/* =============================================================
   Herakles Management — Shared Site Styles
   Brand color sampled from live site: #62798a
   ============================================================= */

:root{
  --slate:       #62798a;
  --slate-dark:  #4d6071;
  --slate-deep:  #3a4a58;
  --ink:         #1f2a33;
  --ink-soft:    #2f3d49;
  --body:        #4a5762;
  --muted:       #7c8a96;
  --line:        #d9dee3;
  --line-soft:   #e8ecef;
  --bg:          #ffffff;
  --bg-tinted:   #f4f6f8;
  --bg-deep:     #eef1f4;
  --accent:      #b58a4c;
  --figure:      #b8502e;   /* Kennzahl-Akzent: Einsparungs- & Umsetzungsdauer-Werte (Herakles-Orange/Rot) */
  --shadow-sm:   0 1px 2px rgba(31,42,51,.04), 0 1px 1px rgba(31,42,51,.03);
  --shadow:      0 8px 24px rgba(31,42,51,.08), 0 2px 6px rgba(31,42,51,.04);
  --radius:      2px;
  --radius-lg:   4px;
  --maxw:        1240px;
  --gutter:      32px;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:"Franklin Gothic Book", "ITC Franklin Gothic Book", "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
  color:var(--body);
  background:var(--bg);
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:var(--slate); text-decoration:none; transition:color .15s ease; }
a:hover{ color:var(--slate-deep); }

h1,h2,h3,h4,h5{
  font-family:"Franklin Gothic Book", "ITC Franklin Gothic Book", "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
  color:var(--ink);
  font-weight:400;
  line-height:1.18;
  letter-spacing:-.01em;
  margin:0 0 .5em;
}
h1{ font-size:clamp(36px, 4.6vw, 56px); font-weight:400; letter-spacing:-.02em; }
h2{ font-size:clamp(28px, 3.0vw, 40px); font-weight:400; letter-spacing:-.015em; }
h3{ font-size:clamp(20px, 1.5vw, 24px); font-weight:500; letter-spacing:-.005em; }
h4{ font-size:18px; font-weight:500; }
h5{ font-size:16px; font-weight:500; }
strong{ font-weight:600; color:var(--ink); }
p{ margin:0 0 1em; }
em.thin{ font-style:normal; color:var(--slate); }

.container{ max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); }

.eyebrow{
  font-family:"Franklin Gothic Book", "ITC Franklin Gothic Book", "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--slate);
  font-weight:600;
  margin:0 0 18px;
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{ content:""; width:28px; height:1px; background:var(--slate); }
.hero .eyebrow::after{ content:""; width:28px; height:1px; background:var(--slate); }

/* ------------ HEADER ------------ */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.site-header .bar{
  display:flex; align-items:center; justify-content:space-between;
  height:84px;
}
.brand{ display:flex; align-items:center; gap:14px; }
.brand img{ height:60px; width:auto; }

.primary-nav{ display:flex; align-items:center; gap:28px; }
.primary-nav a{
  color:var(--ink-soft);
  font-size:15px;
  font-weight:500;
  letter-spacing:.01em;
  position:relative;
  padding:6px 14px;
  border-radius:99px;
  transition:background-color .15s ease, color .15s ease;
}
.primary-nav a:hover{ color:var(--ink); background:var(--bg-deep); }
.primary-nav a.active{ color:#fff; background:var(--slate); }
.primary-nav a.active:hover{ background:var(--slate-deep); color:#fff; }

.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 22px;
  font-size:14px; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase;
  border-radius:var(--radius);
  transition:all .15s ease;
  cursor:pointer;
  border:1px solid transparent;
}
.btn-primary{ background:var(--slate); color:#fff; }
.btn-primary:hover{ background:var(--slate-deep); color:#fff; }
.btn-outline{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn-outline:hover{ background:var(--ink); color:#fff; }
.btn-ghost{
  background:transparent; color:var(--slate); padding:8px 0;
  text-transform:none; letter-spacing:0; font-size:15px;
}
.btn-ghost .arrow{ transition:transform .2s ease; }
.btn-ghost:hover .arrow{ transform:translate(3px,-3px); }
.btn-on-dark{ background:#fff; color:var(--ink); }
.btn-on-dark:hover{ background:#e8ecef; color:var(--ink); }

/* Header-Breadcrumb (aus dem Phase-Hero in die Kopfzeile verschoben, s. nav.js) */
.site-header .header-crumbs{
  border-top:1px solid var(--line-soft);
  background:rgba(255,255,255,.92);
}
.site-header .header-crumbs .container{
  display:flex; align-items:center;
  min-height:36px; padding-top:5px; padding-bottom:5px;
}
.site-header .header-crumbs nav{
  font-family:"Franklin Gothic Book", "ITC Franklin Gothic Book", "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
  font-size:14px; letter-spacing:.08em;
  color:var(--figure);
  display:flex; flex-wrap:wrap; align-items:center;
  white-space:nowrap;
}
.site-header .header-crumbs nav > *{ white-space:normal; }
.site-header .header-crumbs a{ color:var(--figure); }
.site-header .header-crumbs a:hover{ text-decoration:underline; color:var(--figure); }
.site-header .header-crumbs span{ color:var(--figure); }
.site-header .header-crumbs .sep{ margin:0 10px; opacity:.5; }
.site-header .header-crumbs .live{ font-weight:600; }

/* ------------ HERO (home) ------------ */
.hero{
  position:relative;
  padding:40px 0 44px;
  background:linear-gradient(180deg, #fff 0%, #fff 60%, #f7f8fa 100%);
}
.hero-grid{
  display:grid;
  grid-template-columns: 1fr 1.15fr;
  gap:24px;
  align-items:center;
}
.hero-copy h1{
  font-size:clamp(34px, 3.8vw, 54px);
  line-height:1.1;
  letter-spacing:-.01em;
}
.hero-copy h1 .accent{ color:var(--slate); }
.hero-copy .lede{ font-size:19px; color:var(--ink-soft); margin-top:8px; }
.hero-actions{ display:flex; gap:14px; margin-top:28px; flex-wrap:wrap; }

/* ------------ ZIELGRUPPEN-KACHELN (Hero) ------------ */
.zg-wrap{ margin-top:30px; }
.zg-tiles{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;
}
.zg-tile{
  display:flex; flex-direction:column; gap:12px;
  background:var(--ink);
  border:1px solid var(--ink);
  border-radius:var(--radius-lg);
  padding:24px 24px 20px;
  position:relative; overflow:hidden;
  transition:background .18s ease, box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.zg-tile::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--accent); opacity:0; transition:opacity .2s ease;
}
.zg-tile:hover{
  background:var(--slate-deep);
  box-shadow:var(--shadow);
  transform:translateY(-4px);
  border-color:var(--slate-deep);
}
.zg-tile:hover::before{ opacity:1; }
.zg-tile .zg-label{
  font-family:"Franklin Gothic Book", "ITC Franklin Gothic Book", "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
  font-weight:600; font-size:19px; color:#fff; letter-spacing:-.01em;
}
.zg-tile .zg-desc{ font-size:14.5px; color:#c3ccd3; line-height:1.5; margin:0; }
.zg-tile .zg-arrow{
  margin-top:auto; color:#fff; font-weight:600; font-size:15px;
  display:inline-flex; align-items:center; gap:8px;
}
.zg-tile .zg-arrow .a{ transition:transform .2s ease; display:inline-block; }
.zg-tile:hover .zg-arrow .a{ transform:translateX(4px); }
@media (max-width: 900px){
  .zg-tiles{ grid-template-columns:1fr; }
  .zg-wrap{ margin-top:40px; }
}

.hero-figure{
  position:relative; aspect-ratio: 4/3;
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow);
}
.hero-figure img{ width:100%; height:100%; object-fit:cover; }
.hero-figure .caption{
  position:absolute; left:0; right:0; bottom:0;
  padding:16px 22px;
  color:#fff;
  font-size:13px; letter-spacing:.1em; text-transform:uppercase;
  background:linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,0));
}

/* ------------ SECTIONS ------------ */
section{ padding:64px 0; border-top:1px solid var(--line-soft); }
section.tinted{ background:var(--bg-tinted); }
section.deep{ background:#1f2a33; color:#cdd6dd; border-top:none; }
section.deep h2, section.deep h3, section.deep h4{ color:#fff; }
section.deep .eyebrow{ color:#a8b6c1; }
section.deep .eyebrow::before{ background:#a8b6c1; }
section.deep a{ color:#fff; }
section.deep p{ color:#a8b6c1; }

.section-head{ max-width:880px; margin:0 auto 40px; text-align:center; }
.section-head.left{ margin:0 0 40px; text-align:left; max-width:780px; }
.section-head p{ font-size:18px; }

/* ------------ PHASEN (Home) — now 3 cards ------------ */
.phases{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}
.phase{
  position:relative;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:40px 32px 36px;
  display:flex; flex-direction:column;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  overflow:hidden;
}
.phase::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--slate); opacity:0; transition:opacity .2s ease;
}
.phase:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow);
  border-color:var(--slate);
}
.phase:hover::before{ opacity:1; }
.phase .num{
  font-family:"Franklin Gothic Book", "ITC Franklin Gothic Book", "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
  font-size:14px; letter-spacing:.2em;
  color:var(--accent);
  margin-bottom:18px;
}
.phase h3{ margin-bottom:14px; font-size:28px; }
.phase p.lede{ color:var(--body); font-size:16px; }
.phase .topics{
  list-style:none; padding:0; margin:18px 0 24px;
  font-size:14px; color:var(--muted); display:flex; flex-wrap:wrap; gap:6px 12px;
}
.phase .topics li{
  display:inline-flex; align-items:center; gap:6px;
}
.phase .topics li::before{
  content:""; width:4px; height:4px; border-radius:50%; background:var(--slate);
}
.phase .topics-label{
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--slate); font-weight:600; margin:22px 0 12px;
}
.phase .pains{
  list-style:none; padding:0; margin:0 0 24px;
  display:flex; flex-direction:column; gap:10px;
}
.phase .pains li{
  position:relative; padding-left:18px;
  font-size:14.5px; color:var(--body); line-height:1.42;
}
.phase .pains li::before{
  content:""; position:absolute; left:0; top:8px;
  width:5px; height:5px; border-radius:50%; background:var(--slate);
}
.phase a.cta{
  margin-top:auto; font-weight:600;
  display:inline-flex; align-items:center; gap:8px;
  border-top:1px solid var(--line-soft);
  padding-top:18px;
}
.phase a.cta .arrow{ transition:transform .2s ease; display:inline-block; }
.phase:hover a.cta .arrow{ transform:translate(3px,-3px); }

/* ------------ TEAM ------------ */
.werte{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:16px;
  margin-bottom:52px;
}
.wert{
  background:var(--ink);
  border-radius:var(--radius-lg);
  padding:22px 22px 20px;
  box-shadow:var(--shadow-sm);
}
.wert h4{
  font-size:16px; font-weight:600; color:#fff;
  margin:0 0 9px; display:flex; align-items:center; gap:10px; line-height:1.25;
}
.wert h4::before{
  content:""; width:8px; height:8px; background:var(--slate);
  border-radius:1px; flex-shrink:0;
}
.wert p{ margin:0; font-size:14px; color:#b7c2ca; line-height:1.45; }
@media (max-width:900px){ .werte{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:560px){ .werte{ grid-template-columns:1fr; } }
.team-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:32px 24px;
}
.member{ display:flex; flex-direction:column; }
.member .portrait{
  aspect-ratio: 4/3;
  background:#e3e7eb;
  border-radius:var(--radius-lg);
  overflow:hidden;
  margin-bottom:16px;
}
.member .portrait img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.member:hover .portrait img{ transform:scale(1.03); }
.member h4{ margin:0 0 4px; color:var(--ink); font-family:"Franklin Gothic Book", "ITC Franklin Gothic Book", "Libre Franklin", "Helvetica Neue", Arial, sans-serif; font-weight:600; font-size:17px; }
.member .role{ font-size:14px; color:var(--slate); font-weight:600; letter-spacing:.02em; margin-bottom:6px; }
.member .industries{ font-size:13px; color:var(--muted); line-height:1.45; }
.member .linkedin{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:10px;
  font-size:12px; color:var(--slate); font-weight:600;
  letter-spacing:.05em; text-transform:uppercase;
}

/* ------------ WERTSTEIGERUNGSMODELL ------------ */
.wsmodell-grid{ display:flex; flex-direction:column; gap:48px; }
.wsmodell-figure{
  background:#fff; padding:28px; margin:0;
  border:1px solid var(--line-soft); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
}
.wsmodell-figure img{ display:block; width:100%; height:auto; }
.wsmodell-svg{ display:block; width:100%; height:auto; font-family:"Franklin Gothic Book","ITC Franklin Gothic Book","Libre Franklin","Helvetica Neue",Arial,sans-serif; }
.wsmodell-points{ display:grid; grid-template-columns: repeat(3, 1fr); gap:20px; }
.wsmodell-points .pt{
  display:flex; flex-direction:column; gap:10px;
  padding:28px 30px;
  background:var(--bg-tinted);
  border:none; border-radius:var(--radius-lg);
  box-shadow:none;
}
.wsmodell-points .pt .eyebrow{ margin:0 0 4px; }
.wsmodell-points .pt h4{ margin:0 0 6px; }
.wsmodell-points .pt p{ margin:0; }

/* ------------ LÖSUNGSKOMPETENZEN (dark) ------------ */
.solutions{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:0;
  border-top:1px solid rgba(255,255,255,.12);
  border-left:1px solid rgba(255,255,255,.12);
}
.solution{
  padding:36px 28px 32px;
  border-right:1px solid rgba(255,255,255,.12);
  border-bottom:1px solid rgba(255,255,255,.12);
  display:flex; flex-direction:column;
  min-height:280px;
  transition:background .2s ease;
}
.solution:hover{ background:rgba(255,255,255,.04); }
.solution .num{
  font-family:"Franklin Gothic Book", "ITC Franklin Gothic Book", "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
  color:var(--accent);
  font-size:14px; letter-spacing:.2em;
  margin-bottom:24px;
}
.solution h3{ color:#fff; font-size:20px; margin-bottom:14px; }
.solution p{ color:#a8b6c1; font-size:15px; flex:1; }
.solution a{ color:#fff; font-weight:600; margin-top:16px; font-size:14px; letter-spacing:.04em; text-transform:uppercase; }
.solution a .arrow{ display:inline-block; transition:transform .2s ease; }
.solution:hover a .arrow{ transform:translate(3px,-3px); }

/* ------------ LEISTUNGEN TOOLBOX (home) ------------ */
.services-block{
  display:grid; grid-template-columns: 280px 1fr;
  gap:48px;
  padding:48px 0;
  border-top:1px solid var(--line);
}
.services-block:first-of-type{ border-top:none; }
.services-block .title-col h3{
  font-size:22px; letter-spacing:.02em; text-transform:uppercase;
  font-family:"Franklin Gothic Book", "ITC Franklin Gothic Book", "Libre Franklin", "Helvetica Neue", Arial, sans-serif; font-weight:600;
  color:var(--ink);
}
.services-block .title-col .meta{ font-size:14px; color:var(--muted); margin-top:6px; }
.services-grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.service{ background:#fff; padding:24px 26px; }
.service h4{
  font-family:"Franklin Gothic Book", "ITC Franklin Gothic Book", "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
  font-size:16px; font-weight:600;
  color:var(--ink); margin:0 0 8px;
  display:flex; align-items:baseline; gap:10px;
}
.service h4 .dot{ width:6px; height:6px; border-radius:50%; background:var(--slate); flex:0 0 6px; transform:translateY(-2px); }
.service p{ font-size:14.5px; color:var(--body); margin:0; line-height:1.55; }

/* ------------ NEWS ------------ */
.news-card{
  display:grid; grid-template-columns: 1.1fr 1fr; gap:48px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  align-items:center;
}
.news-card .copy{ padding:48px; }
.news-card .copy .tag{
  display:inline-block;
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--slate); font-weight:600; margin-bottom:16px;
}
.news-card .copy h3{ font-size:28px; margin-bottom:16px; }
.news-card .img{
  aspect-ratio: 4/3;
  background-image: linear-gradient(135deg, #62798a 0%, #3a4a58 100%);
  position:relative; display:flex; align-items:center; justify-content:center;
}
.news-card .img .glyph{
  color:rgba(255,255,255,.18); font-family:"Franklin Gothic Book", "ITC Franklin Gothic Book", "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
  font-size:120px; line-height:1; font-style:italic;
}

/* ------------ CONTACT ------------ */
.contact-grid{ display:grid; grid-template-columns: 1fr 1.2fr; gap:64px; align-items:start; }
.contact-info h3{ font-size:24px; margin-bottom:8px; }
.contact-info .line{ margin:6px 0; font-size:16px; }
.contact-info .line a{ color:var(--ink); font-weight:600; }
.contact-info .line .label{ display:block; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:2px; }
.contact-info .hr{ height:1px; background:var(--line); margin:32px 0; }

.form{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:36px;
}
.form h3{ font-size:22px; margin-bottom:24px; }
.form .row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.form .field{ display:flex; flex-direction:column; }
.form label{
  font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); font-weight:600; margin-bottom:6px;
}
.form input, .form textarea{
  font-family:inherit; font-size:15px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:#fff; color:var(--ink);
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.form input:focus, .form textarea:focus{
  border-color:var(--slate);
  box-shadow:0 0 0 3px rgba(98,121,138,.15);
}
.form textarea{ min-height:140px; resize:vertical; }
.form .submit-row{ display:flex; justify-content:flex-end; margin-top:18px; }

/* ------------ FOOTER ------------ */
.site-footer{
  background:#1f2a33; color:#a8b6c1;
  padding:64px 0 28px;
}
.site-footer .row{
  display:grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap:48px;
  padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.08);
}
.site-footer .logo-block img{ height:38px; width:auto; margin-bottom:18px; filter:brightness(0) invert(1); }
.site-footer h5{
  color:#fff; font-family:"Franklin Gothic Book", "ITC Franklin Gothic Book", "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
  font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  font-weight:600; margin:0 0 14px;
}
.site-footer ul{ list-style:none; padding:0; margin:0; }
.site-footer li{ margin:6px 0; font-size:15px; }
.site-footer a{ color:#a8b6c1; }
.site-footer a:hover{ color:#fff; }
.site-footer .legal{
  padding-top:24px;
  display:flex; justify-content:space-between; align-items:center;
  font-size:13px; color:#7c8a96;
  flex-wrap:wrap; gap:12px;
}
.site-footer .legal a{ color:#a8b6c1; }

/* ------------ SANDBOX BANNER ------------ */
.sandbox-banner{
  background:#1f2a33; color:#e6ecf1;
  font-size:12px; letter-spacing:.05em;
  padding:8px 0; text-align:center;
}
.sandbox-banner strong{ color:#fff; letter-spacing:.12em; text-transform:uppercase; font-size:11px; margin-right:8px; }
.sandbox-banner .dot{ width:6px; height:6px; border-radius:50%; background:#b58a4c; display:inline-block; vertical-align:middle; margin-right:8px; }

/* =============================================================
   PHASE PAGE — specific styles
   ============================================================= */

/* Phase hero */
.phase-hero{
  position:relative;
  padding:80px 0 64px;
  background:linear-gradient(180deg, #fff 0%, #f7f8fa 100%);
  border-bottom:1px solid var(--line-soft);
}
.phase-hero .crumbs{
  font-size:13px; letter-spacing:.04em; color:var(--muted);
  margin-bottom:24px;
}
.phase-hero .crumbs a{ color:var(--muted); }
.phase-hero .crumbs a:hover{ color:var(--slate); }
.phase-hero .crumbs .sep{ margin:0 8px; color:var(--line); }
.phase-hero h1{
  font-size:clamp(38px, 4.6vw, 64px);
  max-width:920px;
  line-height:1.08;
}
.phase-hero h1 .accent{ color:var(--slate); }
.phase-hero .lede{ max-width:720px; font-size:20px; color:var(--ink-soft); margin-top:8px; }

/* Bereich-Kacheln unter dem Phase-Hero */
.bereich-tiles{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:12px;
  margin-top:40px;
}
.bereich-tiles a{
  background:var(--bg-tinted); padding:12px 18px;
  border-radius:var(--radius-lg);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  color:var(--ink);
  transition:background .15s ease, box-shadow .15s ease, transform .15s ease;
}
.bereich-tiles a:hover{ background:var(--bg-deep); box-shadow:var(--shadow-sm); transform:translateY(-2px); }
.bereich-tiles a .kicker{
  display:block;
  font-family:"Franklin Gothic Book", "ITC Franklin Gothic Book", "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin-bottom:2px;
}
.bereich-tiles a .title{
  font-family:"Franklin Gothic Book", "ITC Franklin Gothic Book", "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
  font-weight:600; font-size:15.5px; line-height:1.3;
}
.bereich-tiles a .arrow{ color:var(--slate); transition:transform .15s ease; flex-shrink:0; }
.bereich-tiles a:hover .arrow{ transform:translateX(4px); }
@media (max-width: 1080px){
  .bereich-tiles{ gap:8px; }
  .bereich-tiles a{ padding:10px 14px; }
  .bereich-tiles a .title{ font-size:14px; }
}
.phase-hero .phase-num{
  font-family:"Franklin Gothic Book", "ITC Franklin Gothic Book", "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
  color:var(--accent);
  font-size:14px; letter-spacing:.22em;
  margin-bottom:18px;
  display:inline-flex; align-items:center; gap:14px;
}
.phase-hero .phase-num::before{
  content:""; width:36px; height:1px; background:var(--accent);
}

/* Themen-Übersicht — clickable jump nav (ersetzt durch Header-Breadcrumb, ausgeblendet) */
.themen-nav{ display:none !important; }
.themen-nav-unused{
  background:#fff;
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  position:sticky; top:var(--header-h, 84px); z-index:20;
}
.themen-nav .container{
  display:flex; flex-wrap:wrap; gap:8px;
  padding-top:14px; padding-bottom:14px;
  align-items:center;
}
.themen-nav .label{
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); font-weight:600;
  margin-right:6px;
}
.themen-nav a{
  font-size:13px; padding:6px 14px;
  border:1px solid var(--line); border-radius:99px;
  color:var(--ink-soft); font-weight:500;
  background:#fff;
  transition:all .15s ease;
}
.themen-nav a:hover{
  border-color:var(--slate); color:var(--slate);
}
/* Aktiver Bereich (Split-Seiten): gefüllte Pille, kein Wechsel auf sich selbst */
.themen-nav a.active{
  background:var(--slate); border-color:var(--slate); color:#fff;
  cursor:default;
}
.themen-nav a.active:hover{ color:#fff; }
.themen-nav.accent a.active{ background:var(--slate-deep); border-color:var(--slate-deep); }
/* Akzentuierte Variante (z. B. Phase 1): Themen-Pills in Herakles-Blau */
.themen-nav.accent a{
  background:var(--slate); border-color:var(--slate); color:#fff;
}
.themen-nav.accent a:hover{
  background:var(--slate-deep); border-color:var(--slate-deep); color:#fff;
}

/* Thema-Section header */
.thema{
  padding:80px 0 24px;
  border-top:1px solid var(--line-soft);
}
.thema:first-of-type{ border-top:none; padding-top:64px; }
.thema-head{
  display:grid; grid-template-columns: 1fr 1.4fr; gap:48px;
  margin-bottom:48px; align-items:end;
}
.thema-head .thema-phase{
  display:flex; align-items:center; gap:10px;
  font-size:13px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--slate); font-weight:700; margin-bottom:16px;
}
.thema-head .thema-phase::before{ content:""; width:32px; height:2px; background:var(--slate); }
.thema-head .meta{
  font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); font-weight:600; margin-bottom:12px;
}
.thema-head h2{ margin-bottom:0; }
.thema-head .intro{ color:var(--ink-soft); font-size:17px; }

/* Leistung index (per Thema) */
.leistung-index{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:12px;
  margin-bottom:64px;
}
.leistung-index a{
  background:var(--bg-tinted); padding:22px 26px;
  border-radius:var(--radius-lg);
  display:flex; align-items:center; justify-content:space-between;
  color:var(--ink); transition:background .15s ease, box-shadow .15s ease, transform .15s ease;
}
.leistung-index a:hover{ background:var(--bg-deep); box-shadow:var(--shadow-sm); transform:translateY(-2px); }
.leistung-index a .title{
  font-family:"Franklin Gothic Book", "ITC Franklin Gothic Book", "Libre Franklin", "Helvetica Neue", Arial, sans-serif; font-weight:600; font-size:17px;
}
.leistung-index a .arrow{ color:var(--slate); transition:transform .15s ease; }
.leistung-index a:hover .arrow{ transform:translateX(4px); }
.leistung-index a.skelett{ background:#fafbfc; }
.leistung-index a.skelett .title{ color:var(--ink-soft); }
.leistung-index a.skelett .tag{
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); background:var(--bg-deep);
  padding:3px 8px; border-radius:99px; margin-left:10px;
}

/* ------------ LEISTUNG (the big detail blocks) ------------ */
.leistung{
  padding:96px 0;
  border-top:1px solid var(--line);
  scroll-margin-top:160px;
}
.leistung.tinted{ background:var(--bg-tinted); }

.leistung-head{
  margin-bottom:80px;
}
.leistung-head .num{
  font-family:"Franklin Gothic Book", "ITC Franklin Gothic Book", "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
  color:var(--accent); font-size:14px; letter-spacing:.22em;
  margin-bottom:16px;
}
.leistung-head h2{
  font-size:clamp(32px, 3.4vw, 48px);
  margin-bottom:0;
}
.leistung-head .meta{ color:var(--body); font-size:18px; line-height:1.5; margin:18px 0 0; max-width:720px; }

/* Block 1 — Beschreibung */
.block-beschreibung{
  position:relative; display:flex; align-items:flex-end;
  min-height:380px; margin:32px 0 64px; padding:0;
  border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow);
}
.block-beschreibung .copy{
  position:relative; z-index:2; width:100%; max-width:none; margin:0;
  padding:72px 40px 36px;
  background:linear-gradient(to top, rgba(31,42,51,.9) 0%, rgba(31,42,51,.55) 50%, rgba(31,42,51,0) 100%);
}
.block-beschreibung .copy h3{
  font-size:14px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--slate); font-weight:600; margin-bottom:18px;
  font-family:"Franklin Gothic Book", "ITC Franklin Gothic Book", "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
}
.block-beschreibung .copy p{ font-size:20px; color:#fff; line-height:1.5; max-width:820px; margin:0; }
.block-beschreibung .image{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%;
  overflow:hidden;
  background:linear-gradient(135deg, #62798a 0%, #3a4a58 100%);
}
.block-beschreibung .image img{ width:100%; height:100%; object-fit:cover; }
.block-beschreibung .image.placeholder{
  display:flex; align-items:center; justify-content:center;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 2px, transparent 2px 24px),
    linear-gradient(135deg, #62798a 0%, #3a4a58 100%);
}
.block-beschreibung .image.placeholder .caption{
  font-family:"JetBrains Mono", "Menlo", monospace;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.75);
  background:rgba(0,0,0,.25);
  padding:8px 14px; border-radius:4px;
}

/* Block 2 — Übersicht (single column, no image) */
.block-uebersicht{
  display:block;
  max-width:none;
  padding:48px 0;
  border-top:1px solid var(--line-soft);
}
.block-uebersicht .copy h3{
  font-size:32px; margin-bottom:24px;
}
.block-uebersicht .copy{ font-size:17px; }

/* Block 3 — Vorteile / Ihr Nutzen */
.block-vorteile{
  padding:64px 0;
  border-top:1px solid var(--line-soft);
}
.block-vorteile h3{ font-size:32px; margin-bottom:8px; }
.block-vorteile .sub{ color:var(--ink-soft); font-size:17px; max-width:640px; margin-bottom:40px; }
.vorteile-bilanz{ margin:0 0 44px; }
.vorteile-bilanz .stats{ display:flex; flex-wrap:wrap; gap:48px; }
.vorteile-bilanz .stat{ display:flex; flex-direction:column; gap:6px; }
.vorteile-bilanz .stat .v{ font-size:36px; font-weight:600; color:var(--figure); line-height:1; letter-spacing:-.01em; }
.vorteile-bilanz .stat .l{ font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.vorteile-bilanz .bilanz-note{ margin:18px 0 0; font-size:13px; color:var(--muted); max-width:600px; line-height:1.45; }
.vorteile-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:24px;
}
.vorteil{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:32px 28px;
  display:flex; flex-direction:column; gap:14px;
}
.vorteil .icon{
  width:48px; height:48px; border-radius:50%;
  background:var(--bg-deep);
  display:flex; align-items:center; justify-content:center;
  color:var(--slate);
}
.vorteil .icon svg{ width:24px; height:24px; }
.vorteil h4{
  font-family:"Franklin Gothic Book", "ITC Franklin Gothic Book", "Libre Franklin", "Helvetica Neue", Arial, sans-serif; font-weight:600;
  font-size:20px; margin:0;
}
.vorteil p{ font-size:15px; color:var(--body); margin:0; }

/* Block 4 — Unser Ansatz (process) */
.block-ansatz{
  padding:80px 0;
  background:var(--bg-tinted);
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  margin: 32px calc(-1 * var(--gutter));
  padding-left:var(--gutter); padding-right:var(--gutter);
}
.block-ansatz .inner{ max-width:var(--maxw); margin:0 auto; }
.ansatz-intro-row{
  display:grid; grid-template-columns:1fr minmax(360px, 540px);
  gap:48px; align-items:start; margin-bottom:48px;
}
.ansatz-intro-row .ansatz-intro-copy .sub{ margin-bottom:16px; }
.ansatz-intro-row .ansatz-intro-copy .sub:last-child{ margin-bottom:0; }
.ansatz-schaubild{ margin:0; }
.ansatz-schaubild-art{
  background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:24px 22px;
  box-shadow:var(--shadow-sm);
}
.ansatz-schaubild-art svg{ display:block; width:100%; height:auto; }
.ansatz-schaubild figcaption{
  margin-top:14px; font-size:13px; line-height:1.5;
  color:var(--muted); max-width:420px;
}
@media (max-width:900px){
  .ansatz-intro-row{ grid-template-columns:1fr; gap:32px; }
  .ansatz-schaubild figcaption{ max-width:none; }
}
.block-ansatz h3{ font-size:32px; margin-bottom:8px; }
.block-ansatz .sub{ color:var(--ink-soft); font-size:17px; max-width:none; margin-bottom:48px; white-space:pre-line; }
.block-ansatz .sub:has(+ .ansatz-faktoren){ margin-bottom:16px; }
.ansatz-faktoren{
  list-style:none; margin:0 0 24px; padding:0;
  max-width:640px; display:flex; flex-direction:column; gap:14px;
}
.ansatz-faktoren li{
  position:relative; padding-left:22px;
  color:var(--ink-soft); font-size:17px; line-height:1.55;
}
.ansatz-faktoren li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:7px; height:7px; border-radius:50%;
  background:var(--slate);
}
.ansatz-faktoren li strong{ color:var(--ink); font-weight:600; }
.process{
  display:grid;
  grid-template-columns:repeat(var(--steps, 5), 1fr);
  gap:0;
  position:relative;
}
.process::before{
  content:""; position:absolute;
  top:32px; left:32px; right:calc(100% / var(--steps, 5) - 50px); height:1px;
  background:var(--line); z-index:0;
}
.process .step{
  position:relative; z-index:1;
  padding:0 18px;
  display:flex; flex-direction:column; align-items:flex-start; gap:14px;
}
.process .step .marker{
  position:relative;
  width:64px; height:64px; border-radius:50%;
  background:#fff; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-family:"Franklin Gothic Book", "ITC Franklin Gothic Book", "Libre Franklin", "Helvetica Neue", Arial, sans-serif; color:var(--slate);
  font-size:22px; font-weight:600;
  box-shadow:0 4px 12px rgba(31,42,51,.04);
}
.process .step h4{
  font-family:"Franklin Gothic Book", "ITC Franklin Gothic Book", "Libre Franklin", "Helvetica Neue", Arial, sans-serif; font-weight:600;
  font-size:17px; color:var(--ink); margin:0;
}
.process .step p{ font-size:14px; color:var(--body); margin:0; line-height:1.5; }
/* Richtungspfeil vor dem letzten Knoten des (horizontalen) Zeitstrahls — Pendant zum Stream-Pfeil */
.process .step:last-child .marker::before{
  content:""; position:absolute; z-index:2;
  top:50%; left:-26px; transform:translateY(-50%);
  width:0; height:0;
  border-top:8px solid transparent;
  border-bottom:8px solid transparent;
  border-left:14px solid var(--slate);
}

/* Projektdurchlaufzeit-Block am Ende des Ansatz (Streams ODER Prozesskette) — linksbündig mit dem Zeitstrahl, ohne Trennstrich */
.ansatz-dauer{ margin-top:38px; padding-left:18px; }
.ansatz-dauer.stream-dauer{ margin-top:24px; padding-left:0; }
.ansatz-dauer .kpi{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
.ansatz-dauer .kpi .v{ font-size:23px; font-weight:600; color:var(--figure); line-height:1; letter-spacing:-.01em; white-space:nowrap; }
.ansatz-dauer .kpi .l{ font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.ansatz-dauer .dauer-note{ margin:12px 0 0; font-size:13px; color:var(--muted); max-width:640px; line-height:1.45; }

/* Paralleler Handlungsstrang — Herakles-Beirat als Spiegel-Zeitstrahl unter dem Wertsteigerungs-Zeitstrahl,
   Knoten spaltengenau unter den nummerierten Kreisen, Team-Symbol an Anfang und Ende */
.ansatz-parallel{ margin-top:18px; }
.ansatz-parallel .ap-head{ display:flex; align-items:center; gap:11px; margin-bottom:16px; padding-left:18px; }
.ansatz-parallel .ap-head .ap-team{ width:30px; height:auto; color:var(--slate); flex:none; }
.ansatz-parallel .ap-head-txt{ display:flex; flex-direction:column; gap:1px; }
.ansatz-parallel .ap-tag{ font-size:15px; font-weight:600; color:var(--slate); letter-spacing:-.01em; }
.ansatz-parallel .ap-sub{ font-size:12.5px; color:var(--muted); }

.ap-process{
  position:relative;
  display:grid;
  grid-template-columns:repeat(var(--steps, 6), 1fr);
  min-height:74px;
}
/* gestrichelte Beirat-Linie — verläuft durch die Knoten-Mittelpunkte (Spaltenmitte bei x = colLeft + 50px) */
.ap-process::before{
  content:""; position:absolute; z-index:0;
  top:14px; left:50px; right:calc(100% / var(--steps, 6) - 50px); height:2px;
  background:repeating-linear-gradient(90deg, var(--slate) 0 7px, transparent 7px 14px);
  opacity:.6;
}
.ap-step{ position:relative; z-index:1; padding:0 18px; }
/* Knoten + Label zentriert auf der Spaltenmitte (col_left + 50px) — fluchtet mit den 01..06 Kreisen darüber */
.ap-nodewrap{
  position:absolute; left:50px; top:0; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:7px; width:max-content; max-width:150px; text-align:center;
}
.ap-node{ display:flex; align-items:center; justify-content:center; }
.ap-dot{ width:14px; height:14px; border-radius:50%; background:#fff; border:2px solid var(--slate); box-shadow:0 1px 3px rgba(31,42,51,.12); margin-top:7px; }
.ap-node--cap{ width:34px; height:34px; border-radius:50%; background:#fff; border:1.5px solid var(--slate); box-shadow:0 2px 6px rgba(31,42,51,.08); margin-top:-3px; }
.ap-node--cap .ap-glyph{ width:19px; height:19px; color:var(--slate); }
.ap-node--end{ border-color:var(--figure); }
.ap-node--end .ap-glyph{ color:var(--figure); }
.ap-label{ font-size:12px; color:var(--muted); line-height:1.3; margin-top:1px; }
.ap-label--out{ color:var(--figure); font-weight:600; white-space:nowrap; }
.ap-note{ margin:18px 0 0; padding-left:18px; font-size:13px; color:var(--muted); max-width:780px; line-height:1.5; }
@media (max-width:1080px){
  .ap-process{ grid-template-columns:repeat(2, 1fr); row-gap:44px; column-gap:16px; }
  .ap-process::before{ display:none; }
  .ap-step{ padding:0; }
  .ap-nodewrap{ position:static; transform:none; align-items:flex-start; text-align:left; max-width:none; }
  .ap-dot{ margin-top:0; }
  .ap-node--cap{ margin-top:0; }
}

/* Block 5 — Investition / Festpreis (nur Herakles-Kompass) */
.block-preis{ padding:80px 0; }
.block-preis .inner{ max-width:var(--maxw); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter); }
.block-preis h3{ font-size:32px; margin-bottom:8px; }
.block-preis .sub{ color:var(--ink-soft); font-size:17px; max-width:640px; margin-bottom:40px; }
.preis-tiers{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; max-width:820px; }
.preis-tier{
  display:flex; flex-direction:column; gap:10px;
  background:var(--bg-tinted); border-radius:var(--radius-lg);
  padding:26px 28px; transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.preis-tier:hover{ transform:translateY(-2px); box-shadow:var(--shadow-sm); background:var(--bg-deep); }
.preis-tier .u{ font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.preis-tier .p{ font-size:34px; font-weight:600; color:var(--ink); line-height:1; letter-spacing:-.01em; }
.preis-note{ margin:24px 0 0; font-size:13px; color:var(--muted); max-width:680px; line-height:1.5; }
@media(max-width:760px){ .preis-tiers{ grid-template-columns:1fr; } }

/* Block 5b — Schaubilder (Kompass-Analyse & -Ergebnis) */
.block-schaubilder{ padding:80px 0; }
.block-schaubilder .inner{ max-width:var(--maxw); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter); }
.block-schaubilder h3{ font-size:32px; margin-bottom:8px; }
.block-schaubilder .sub{ color:var(--ink-soft); font-size:17px; max-width:680px; margin-bottom:40px; }
.schaubild-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:24px; }
.schaubild{
  margin:0; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:22px 24px 24px; box-shadow:var(--shadow-sm);
}
.schaubild-art{ background:var(--bg-tinted); border-radius:var(--radius); padding:14px; }
.schaubild-art svg{ display:block; width:100%; height:auto; }
.schaubild figcaption h4{ font-size:18px; color:var(--ink); margin:18px 0 6px; }
.schaubild figcaption p{ font-size:14px; color:var(--body); margin:0; line-height:1.55; }
@media(max-width:760px){ .schaubild-grid{ grid-template-columns:1fr; } }

/* Block 4b — Unser Ansatz · Drei-Stream-Variante (integrierter Ansatz) */
/* Zuklappbare Ansatz-Streams: Zusammenfassung sichtbar, Detail aufklappbar */
.ansatz-collapse{ margin-top:8px; }
.ansatz-collapse > summary.ansatz-collapse-head{
  list-style:none; cursor:pointer; display:flex; align-items:flex-start; gap:28px;
  padding:26px 28px; background:var(--bg-tinted); border-radius:var(--radius-lg);
  transition:background .18s ease;
}
.ansatz-collapse > summary.ansatz-collapse-head::-webkit-details-marker{ display:none; }
.ansatz-collapse > summary.ansatz-collapse-head:hover{ background:var(--bg-deep); }
.ansatz-collapse-lead{ flex:1; }
.ansatz-streams-intro{ margin:0 0 16px; font-size:15px; line-height:1.5; color:var(--body); }
.ansatz-summary-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.ansatz-summary-list li{ display:flex; gap:16px; align-items:baseline; }
.ansatz-summary-list .acs-num{
  flex:0 0 auto; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  font-weight:600; color:var(--muted); min-width:72px; padding-top:2px;
}
.ansatz-summary-list .acs-text{ font-size:15px; line-height:1.55; color:var(--ink); }
.ansatz-summary-list .acs-text strong{ font-weight:600; }
.ansatz-collapse-toggle{ flex:0 0 auto; display:flex; align-items:center; gap:10px; color:var(--slate); padding-top:1px; }
.ansatz-collapse-toggle .acs-hint{ font-size:12px; letter-spacing:.06em; text-transform:uppercase; font-weight:600; white-space:nowrap; }
.ansatz-collapse-toggle .acs-close{ display:none; }
.ansatz-collapse[open] .ansatz-collapse-toggle .acs-open{ display:none; }
.ansatz-collapse[open] .ansatz-collapse-toggle .acs-close{ display:inline; }
.ansatz-collapse:not(.has-summary) > summary.ansatz-collapse-head{ justify-content:flex-start; padding:18px 28px; }
.ansatz-chev{ width:22px; height:22px; transition:transform .22s ease; }
.ansatz-collapse[open] .ansatz-chev{ transform:rotate(180deg); }
.ansatz-collapse-body{ padding-top:40px; }
.ansatz-collapse:not([open]) .ansatz-collapse-body{ display:none; }
@media (max-width:680px){
  .ansatz-collapse > summary.ansatz-collapse-head{ flex-direction:column; gap:18px; padding:22px; }
  .ansatz-summary-list li{ flex-direction:column; gap:4px; }
}

.ansatz-streams{ display:flex; flex-direction:column; }
.ansatz-stream{ padding:48px 0; border-top:1px solid var(--line); }
.ansatz-stream:first-child{ padding-top:0; border-top:none; }
.ansatz-stream:last-child{ padding-bottom:0; }
.stream-head{ margin-bottom:34px; }
.stream-title{ display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; }
.stream-head .s-num{
  font-family:"JetBrains Mono","Menlo",monospace;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  font-weight:500; color:var(--slate); white-space:nowrap;
}
.stream-head h4{ font-size:24px; font-weight:500; color:var(--ink); margin:0; }
.stream-head .s-intro{ margin:14px 0 0; max-width:640px; color:var(--body); font-size:15.5px; line-height:1.5; }
.stream-head .s-kpi{ margin-top:18px; display:flex; align-items:baseline; gap:12px; }
.stream-head .s-kpi .v{ font-size:23px; font-weight:600; color:var(--figure); line-height:1; letter-spacing:-.01em; white-space:nowrap; }
.stream-head .s-kpi .l{ font-size:12.5px; color:var(--muted); line-height:1.35; }
.stream-body{ display:grid; grid-template-columns:0.92fr 1.08fr; gap:52px; align-items:center; }
.stream-body.flip .stream-graphic{ order:2; }
.stream-graphic{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:22px 24px; box-shadow:var(--shadow-sm);
}
.stream-graphic svg{ width:100%; height:auto; display:block; }
.stream-steps{ display:flex; flex-direction:column; }
.stream-step{ display:grid; grid-template-columns:auto 1fr; gap:18px; padding:13px 0; position:relative; }
.stream-step:has(+ .stream-step)::before{
  content:""; position:absolute; left:19px; top:33px;
  height:100%; width:2px; background:var(--line); z-index:0;
}
.stream-step:not(:has(+ .stream-step))::before{
  content:""; position:absolute; left:14px; top:1px;
  width:0; height:0;
  border-left:6px solid transparent; border-right:6px solid transparent;
  border-top:8px solid var(--slate); z-index:0;
}
.stream-step .sm{
  position:relative; z-index:1;
  width:40px; height:40px; border-radius:50%;
  background:#fff; border:1.5px solid var(--slate); color:var(--slate);
  display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:600;
  box-shadow:0 0 0 4px var(--bg-tinted);
}
.stream-step .st-copy h5{ font-size:16px; font-weight:600; color:var(--ink); margin:0 0 3px; }
.stream-step .st-copy p{ font-size:14px; color:var(--body); margin:0; line-height:1.5; }

/* Block 5 — Situation */
.block-situation{
  padding:64px 0;
  display:grid; grid-template-columns: 1fr 1.1fr; gap:64px; align-items:center;
  border-top:1px solid var(--line-soft);
}
.block-situation .image{
  aspect-ratio: 4/3;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:linear-gradient(135deg, #62798a 0%, #3a4a58 100%);
  position:relative;
  box-shadow:var(--shadow);
  display:flex; align-items:center; justify-content:center;
}
.block-situation .image.placeholder{
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 2px, transparent 2px 24px),
    linear-gradient(135deg, #62798a 0%, #3a4a58 100%);
}
.block-situation .image.placeholder .caption{
  font-family:"JetBrains Mono", "Menlo", monospace;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.75);
  background:rgba(0,0,0,.25);
  padding:8px 14px; border-radius:4px;
  text-align:center; max-width:75%;
}
.block-situation .copy h3{ font-size:32px; margin-bottom:24px; }

/* Situation · breite Variante: Kopf links, Querformat-Band, Trigger zweispaltig */
.block-situation.wide{ display:block; }
.block-situation.wide .copy h3{ margin-bottom:14px; }
.block-situation.wide .copy p{ max-width:680px; color:var(--body); }
.block-situation.wide .image{ width:100%; aspect-ratio:21/8; margin:28px 0 40px; }
.block-situation.wide ul.triggers{
  display:grid; grid-template-columns:1fr 1fr; gap:0 56px;
}
.block-situation.wide ul.triggers li{ break-inside:avoid; }
.block-situation ul.triggers{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:14px;
}
.block-situation ul.triggers li{
  display:flex; gap:14px; align-items:flex-start;
  padding-bottom:14px;
  border-bottom:1px solid var(--line-soft);
}
.block-situation ul.triggers li:last-child{ border-bottom:none; }
.block-situation ul.triggers li::before{
  content:""; flex:0 0 auto;
  width:6px; height:6px; border-radius:50%;
  background:var(--slate); margin-top:11px;
}
.block-situation ul.triggers strong{ display:block; color:var(--ink); margin-bottom:2px; }
.block-situation ul.triggers .desc{ font-size:14.5px; color:var(--body); }

/* Block 6 — Herausforderungen (Q&A) */
.block-qa{
  padding:80px 0;
  background:#1f2a33; color:#cdd6dd;
  margin: 32px calc(-1 * var(--gutter)) 0;
  padding-left:var(--gutter); padding-right:var(--gutter);
}
.block-qa .inner{ max-width:var(--maxw); margin:0 auto; }
.block-qa h3{ color:#fff; font-size:32px; margin-bottom:8px; }
.block-qa .sub{ color:#a8b6c1; font-size:17px; margin-bottom:48px; max-width:640px; }
.qa-grid{
  display:grid; grid-template-columns: 280px 1fr; gap:48px;
  padding:32px 0;
  border-top:1px solid rgba(255,255,255,.12);
}
.qa-grid:first-of-type{ border-top:1px solid rgba(255,255,255,.18); padding-top:48px; }
.qa-partner{ display:flex; flex-direction:column; gap:14px; }
.qa-partner .portrait{
  aspect-ratio: 4/3;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:#3a4a58;
}
.qa-partner .portrait img{ width:100%; height:100%; object-fit:cover; }
.qa-partner h5{
  color:#fff; font-family:"Franklin Gothic Book", "ITC Franklin Gothic Book", "Libre Franklin", "Helvetica Neue", Arial, sans-serif; font-weight:600;
  font-size:17px; margin:0;
}
.qa-partner .role{ font-size:13px; color:#a8b6c1; }
.qa-content .question{
  font-family:"Franklin Gothic Book", "ITC Franklin Gothic Book", "Libre Franklin", "Helvetica Neue", Arial, sans-serif; font-style:italic;
  font-size:20px; color:#fff;
  margin-bottom:18px; line-height:1.4;
}
.qa-content .question::before{
  content:"„"; color:var(--accent); font-size:32px; line-height:0;
  position:relative; top:8px; margin-right:2px;
}
.qa-content .answer{ color:#cdd6dd; font-size:16px; line-height:1.7; }

/* Skelett leistung — collapsed placeholder */
.leistung.skelett{
  padding:32px 0;
  border-top:1px solid var(--line-soft);
}
.leistung.skelett .leistung-head{
  margin-bottom:0;
  display:flex; align-items:center; justify-content:space-between;
}
.leistung.skelett .leistung-head h2{
  font-size:24px;
}
.leistung.skelett .leistung-head .num{ margin-bottom:8px; }
.leistung.skelett .placeholder-note{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--bg-deep); color:var(--muted);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  padding:6px 12px; border-radius:99px;
  font-weight:600;
}
.leistung.skelett .teaser{
  margin-top:14px; color:var(--ink-soft); max-width:720px; font-size:16px;
}
.leistung.skelett .blocks-preview{
  margin-top:24px;
  display:grid; grid-template-columns:repeat(6, 1fr); gap:8px;
}
.leistung.skelett .blocks-preview .b{
  background:var(--bg-tinted);
  border:1px dashed var(--line);
  border-radius:var(--radius);
  padding:14px 12px;
  text-align:center;
  font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted);
}
.leistung.skelett .blocks-preview .b .n{
  display:block; font-family:"Franklin Gothic Book", "ITC Franklin Gothic Book", "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
  font-size:15px; color:var(--slate); margin-bottom:4px;
  text-transform:none; letter-spacing:0;
}

/* Final CTA on phase pages */
.phase-cta{
  padding:80px 0;
  background:linear-gradient(135deg, #62798a 0%, #3a4a58 100%);
  color:#fff; text-align:center;
}
.phase-cta h2{ color:#fff; max-width:720px; margin:0 auto 16px; }
.phase-cta p{ color:rgba(255,255,255,.85); max-width:560px; margin:0 auto 28px; font-size:18px; }
.phase-cta .actions{ display:inline-flex; gap:14px; flex-wrap:wrap; justify-content:center; }

/* ------------ CASE STUDY (Bereich-Abschluss) ------------ */
.cs-section{ padding:96px 0; border-top:1px solid var(--line-soft); background:var(--bg-tinted); scroll-margin-top:160px; }
.cs-head{ max-width:880px; margin:0 0 40px; }
.cs-head .cs-phase{
  display:flex; align-items:center; gap:10px;
  font-size:13px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--slate); font-weight:700; margin-bottom:16px;
}
.cs-head .cs-phase::before{ content:""; width:32px; height:2px; background:var(--slate); }
.cs-head h2{ margin-bottom:18px; }
.cs-tags{ display:flex; flex-wrap:wrap; gap:8px; margin:0; }
.cs-tags span{
  font-size:12px; padding:5px 14px;
  border:1px solid var(--line); border-radius:99px;
  color:var(--ink-soft); background:#fff;
}
.cs-hero{
  position:relative; width:100%; aspect-ratio:21/8;
  border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow); margin:0 0 12px;
}
.cs-hero img{ width:100%; height:100%; object-fit:cover; }
.cs-cap{ font-size:13px; color:var(--muted); margin:0 0 36px; }
.cs-lead{
  font-size:22px; line-height:1.45; color:var(--ink); font-weight:500;
  max-width:880px; margin:0 0 44px; letter-spacing:-.01em;
}
.cs-lead .up{ color:var(--figure); font-weight:600; }
.cs-kpis{ display:flex; flex-wrap:wrap; gap:48px; margin:0 0 56px; }
.cs-kpi{ display:flex; flex-direction:column; gap:6px; }
.cs-kpi .v{ font-size:34px; font-weight:600; color:var(--figure); line-height:1; letter-spacing:-.01em; }
.cs-kpi .l{ font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.cs-body{ max-width:760px; }
.cs-body h3{ font-size:24px; margin:40px 0 12px; }
.cs-body h3:first-child{ margin-top:0; }
.cs-body p{ font-size:17px; color:var(--body); }
.cs-quote{
  background:#fff; border-left:3px solid var(--accent);
  border-radius:0 var(--radius-lg) var(--radius-lg) 0;
  padding:28px 32px; margin:40px 0; max-width:760px; box-shadow:var(--shadow-sm);
}
.cs-quote .q{ font-size:21px; font-style:italic; color:var(--ink); margin:0 0 10px; line-height:1.45; }
.cs-quote .a{ font-size:14px; color:var(--muted); margin:0; }
.cs-table{ border-collapse:collapse; width:100%; max-width:760px; margin:8px 0 0; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; }
.cs-table td{ padding:14px 20px; border-bottom:1px solid var(--line-soft); font-size:15.5px; color:var(--body); vertical-align:top; }
.cs-table tr:last-child td{ border-bottom:none; }
.cs-table td.key{ font-weight:600; color:var(--ink); width:34%; }
.cs-foot{ margin:32px 0 0; padding-top:18px; border-top:1px solid var(--line); font-size:14px; color:var(--muted); max-width:760px; }
.cs-foot a{ color:var(--slate); font-weight:600; }

/* Platzhalter-Variante: Referenzfall in Vorbereitung */
.cs-placeholder{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:40px; align-items:center; max-width:980px;
}
.cs-placeholder .image{ aspect-ratio:4/3; border-radius:var(--radius-lg); }
.cs-placeholder .copy p{ font-size:17px; color:var(--body); margin:0 0 14px; }
.cs-placeholder .copy p:first-child{ margin-top:0; }
.cs-soon-badge{
  display:inline-block; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  font-weight:700; color:var(--slate); background:#fff;
  border:1px solid var(--line); border-radius:99px; padding:5px 14px; margin-bottom:18px;
}
@media(max-width:760px){
  .cs-hero{ aspect-ratio:16/10; } .cs-lead{ font-size:19px; } .cs-kpis{ gap:28px; }
  .cs-placeholder{ grid-template-columns:1fr; gap:24px; }
}

/* =============================================================
   BRANCHEN PAGE
   ============================================================= */
.branchen-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:32px;
}
.branche-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.branche-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow);
  border-color:var(--slate);
}
.branche-card .image{
  aspect-ratio: 4/3;
  background-image: linear-gradient(135deg, #62798a 0%, #3a4a58 100%);
  position:relative;
  display:flex; align-items:center; justify-content:center;
}
.branche-card .image .caption{
  font-family:"JetBrains Mono", monospace;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.75);
  background:rgba(0,0,0,.25);
  padding:6px 12px; border-radius:4px;
}
.branche-card .body{ padding:28px; flex:1; display:flex; flex-direction:column; }
.branche-card h3{ font-size:22px; margin-bottom:8px; }
.branche-card p{ font-size:15px; color:var(--body); flex:1; }
.branche-card .links{ margin-top:18px; display:flex; flex-wrap:wrap; gap:6px; }
.branche-card .links a{
  font-size:12px; padding:4px 12px;
  border:1px solid var(--line); border-radius:99px;
  color:var(--ink-soft); transition:all .15s ease;
}
.branche-card .links a:hover{ border-color:var(--slate); color:var(--slate); }

/* Hide placeholder caption when a user image is set */
[data-image-slot].has-image .caption{ display:none; }
[data-image-slot].has-image::before{ display:none; }
[data-image-slot].has-image{ background-color:transparent !important; }

/* ============================================================= 
   MEGAMENU (nav dropdown)
   ============================================================= */
.primary-nav .has-megamenu{ position:relative; }
.primary-nav .has-megamenu > a{
  display:inline-flex; align-items:center; gap:6px;
}
.primary-nav .has-megamenu > a .caret{
  font-size:9px; opacity:.55;
  transition:transform .15s ease, opacity .15s ease;
  display:inline-block;
}
.primary-nav .has-megamenu:hover > a:not(.active),
.primary-nav .has-megamenu:focus-within > a:not(.active),
.primary-nav .has-megamenu.open > a:not(.active){
  background:var(--bg-deep); color:var(--ink);
}
.primary-nav .has-megamenu:hover > a .caret,
.primary-nav .has-megamenu:focus-within > a .caret,
.primary-nav .has-megamenu.open > a .caret{
  transform:rotate(180deg); opacity:1;
}

.megamenu{
  position:absolute;
  top:calc(100% + 14px);
  left:0;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 24px 48px rgba(31,42,51,.10), 0 4px 12px rgba(31,42,51,.06);
  padding:28px 32px;
  display:grid;
  grid-template-columns:repeat(var(--cols, 3), minmax(200px, 1fr));
  gap:32px;
  opacity:0; visibility:hidden;
  transform:translateY(6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
  z-index:100;
  pointer-events:none;
  border-radius:var(--radius-lg);
}
.megamenu::before{
  /* invisible bridge so hover doesn't break in the gap */
  content:""; position:absolute;
  top:-14px; left:0; right:0; height:14px;
}

/* For the rightmost menu items, anchor to the right edge of the trigger */
.primary-nav .has-megamenu[data-phase="transaktion"] .megamenu{
  left:auto; right:0;
}

.primary-nav .has-megamenu:hover .megamenu,
.primary-nav .has-megamenu:focus-within .megamenu,
.primary-nav .has-megamenu.open .megamenu{
  opacity:1; visibility:visible; transform:translateY(0);
  pointer-events:auto;
}

.megamenu-col{ min-width:0; }
.megamenu-col h6{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--slate); font-weight:600;
  margin:0 0 14px;
  padding-bottom:10px;
  border-bottom:1px solid var(--line-soft);
}
.megamenu-col ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:0; }
.megamenu-col a{
  display:block;
  padding:7px 0;
  font-size:14px;
  color:var(--ink-soft);
  line-height:1.35;
  letter-spacing:0;
  text-transform:none;
  font-weight:400;
  transition:color .12s ease, padding-left .15s ease;
  border-left:2px solid transparent;
  padding-left:0;
}
.megamenu-col a:hover{
  color:var(--slate);
  padding-left:10px;
  border-left-color:var(--slate);
}

.megamenu-foot{
  grid-column:1 / -1;
  display:flex; justify-content:space-between; align-items:center;
  padding-top:18px; margin-top:6px;
  border-top:1px solid var(--line-soft);
  font-size:13px;
}
.megamenu-foot .all{
  font-weight:600; color:var(--slate);
  display:inline-flex; align-items:center; gap:6px;
}
.megamenu-foot .all:hover{ color:var(--slate-deep); }
.megamenu-foot .all .arrow{ transition:transform .15s ease; display:inline-block; }
.megamenu-foot .all:hover .arrow{ transform:translateX(3px); }
.megamenu-foot .hint{ color:var(--muted); font-size:12px; }

@media (max-width:760px){
  /* Megamenu only disabled where the primary nav itself is hidden,
     so the 760–1080px range keeps working dropdowns. */
  .megamenu{ display:none; }
  .primary-nav .has-megamenu > a .caret{ display:none; }
}

/* ============================================================= 
   END MEGAMENU
   ============================================================= */

/* ------------ RESPONSIVE ------------ */
@media (max-width:1080px){
  .hero-grid, .news-card, .contact-grid{ grid-template-columns: 1fr; gap:36px; }
  .wsmodell-points{ grid-template-columns: 1fr; }
  .phases{ grid-template-columns: 1fr; }
  .solutions{ grid-template-columns: repeat(2, 1fr); }
  .team-grid{ grid-template-columns: repeat(3, 1fr); }
  .services-block{ grid-template-columns: 1fr; gap:24px; }
  .news-card .copy{ padding:32px; }
  .thema-head, .leistung-head, .block-beschreibung, .block-uebersicht, .block-situation{
    grid-template-columns: 1fr; gap:32px;
  }
  .vorteile-grid, .branchen-grid{ grid-template-columns: repeat(2, 1fr); }
  .process{ grid-template-columns: repeat(2, 1fr); gap:24px 16px; }
  .process::before{ display:none; }
  .process .step:last-child .marker::before{ display:none; }
  .stream-body{ grid-template-columns:1fr; gap:32px; }
  .stream-body.flip .stream-graphic{ order:0; }
  .leistung-index{ grid-template-columns: 1fr; }
  .qa-grid{ grid-template-columns: 1fr; gap:24px; }
  .qa-partner{ flex-direction:row; align-items:center; gap:16px; flex-wrap:wrap; }
  .qa-partner .portrait{ width:150px; flex:0 0 150px; aspect-ratio:1/1; }
  .qa-partner h5, .qa-partner .role{ flex-basis:100%; }
  .leistung.skelett .blocks-preview{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width:760px){
  section{ padding:64px 0; }
  .primary-nav{ display:none; }
  .team-grid{ grid-template-columns: repeat(2, 1fr); }
  .solutions{ grid-template-columns: 1fr; }
  .services-grid{ grid-template-columns: 1fr; }
  .form .row{ grid-template-columns: 1fr; }
  .site-footer .row{ grid-template-columns: 1fr; }
  .vorteile-grid, .branchen-grid{ grid-template-columns: 1fr; }
  .block-situation.wide ul.triggers{ grid-template-columns:1fr; gap:0; }
  .themen-nav{ position:static; }
  .leistung.skelett .blocks-preview{ grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   2.3 — Branchen: Herausforderungen je Karte + Quellen-Raster
   ============================================================ */
.branche-card p{ flex:0 0 auto; }
.branche-card .topics-label{
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--slate); font-weight:600; margin:20px 0 10px;
}
.branche-card .pains{
  list-style:none; padding:0; margin:0; flex:1;
  display:flex; flex-direction:column; gap:9px;
}
.branche-card .pains li{
  position:relative; padding-left:18px;
  font-size:14px; color:var(--body); line-height:1.42;
}
.branche-card .pains li::before{
  content:""; position:absolute; left:0; top:8px;
  width:5px; height:5px; border-radius:50%; background:var(--slate);
}
.branche-card .links{ margin-top:20px; padding-top:16px; border-top:1px solid var(--line-soft); }

.branchen-quellen{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:12px;
}
.branche-quelle{
  background:var(--bg-tinted); border-radius:var(--radius-lg); padding:20px 22px;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.branche-quelle:hover{ transform:translateY(-2px); box-shadow:var(--shadow-sm); background:var(--bg-deep); }
.branche-quelle h4{ font-size:15px; margin:0 0 10px; }
.branche-quelle ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:7px; }
.branche-quelle a{ font-size:13.5px; color:var(--ink-soft); }
.branche-quelle a:hover{ color:var(--slate); }

/* ============================================================
   2.3 — Zielgruppen-Seiten: Bildband + Bild je Phasenkarte
   ============================================================ */
.zg-bildband{
  position:relative; width:100%; height:340px; margin:0 0 8px;
  border-radius:var(--radius-lg); overflow:hidden;
  background:var(--bg-deep); background-size:cover; background-position:center;
}
.zg-bildband::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(18,24,28,.72) 0%, rgba(18,24,28,.15) 55%, rgba(18,24,28,0) 100%);
}
.zg-bildband .caption{
  position:absolute; left:0; top:50%; transform:translateY(-50%); width:100%;
  text-align:center; font-family:'JetBrains Mono', monospace; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
}
.zg-bildband .band-text{
  position:absolute; z-index:2; left:32px; right:32px; bottom:26px;
  color:#fff; font-size:16px; line-height:1.5; max-width:720px;
}
.phase .phase-bild{
  height:150px; margin:-4px 0 20px; border-radius:var(--radius-md, 8px);
  background:var(--bg-deep); background-size:cover; background-position:center;
  position:relative; overflow:hidden;
}
.phase .phase-bild .caption{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:'JetBrains Mono', monospace; font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
}

/* ============================================================
   2.3 — Foto in den Zielgruppen-Kacheln der Startseite
   ============================================================ */
.zg-tile{ padding-top:0; }
.zg-tile .zg-foto{
  display:block; position:relative;
  margin:0 -24px 4px; height:150px;
  background:var(--slate-deep); background-size:cover; background-position:center;
  filter:grayscale(.25);
}
.zg-tile .zg-foto::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(18,24,28,.20) 0%, rgba(18,24,28,.55) 70%, var(--ink) 100%);
}
.zg-tile:hover .zg-foto::after{
  background:linear-gradient(to bottom, rgba(18,24,28,.10) 0%, rgba(18,24,28,.45) 70%, var(--slate-deep) 100%);
}
.zg-tile .zg-foto .caption{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:'JetBrains Mono', monospace; font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; color:#8b98a2;
}
.zg-tile .zg-label{ margin-top:4px; }
@media (max-width: 900px){
  .zg-tile .zg-foto{ height:170px; }
}

/* 2.3 — Sprungziele unter dem klebenden Header freistellen */
#team, #news, #kontakt, #phasen{ scroll-margin-top:120px; }

/* ── Sprachumschalter ─────────────────────────────────────────────── */
.lang-switch{
  display:flex; align-items:center; gap:2px;
  margin-left:20px; padding-left:20px;
  border-left:1px solid var(--line);
  flex-shrink:0;
}
.lang-switch a{
  font-family:"JetBrains Mono", "Menlo", monospace;
  font-size:11px; font-weight:500; letter-spacing:.1em;
  color:var(--muted);
  padding:5px 8px; border-radius:99px;
  transition:color .15s ease, background-color .15s ease;
}
.lang-switch a:hover{ color:var(--ink); background:var(--bg-deep); }
.lang-switch a.active{ color:var(--ink); font-weight:600; }
@media (max-width: 900px){
  .lang-switch{ margin-left:auto; padding-left:12px; }
}