/* ============================================================
   Mike Höhmann · digital-sbh.de
   Bildwelt: „Das Wirtschafts-Editorial“ — Magazingeschichte über
   einen Macher. Papier, Tinte, Markenblau #00A8D8 (bindend),
   Bricolage Grotesque (Display/UI) + Source Serif 4 (Erzähltext).
   Hairlines statt Boxen. Seed abffdb5d.
   ============================================================ */

/* ---------- Schriften, lokal ausgeliefert ----------
   Bricolage Grotesque und Source Serif 4 stehen unter der Open Font License
   und liegen deshalb auf dem eigenen Server. Dadurch geht keine Anfrage und
   keine Besucher-IP an Google — die Seite braucht kein Einwilligungs-Banner.
   Enthalten sind die Zeichensätze latin und latin-ext; Kyrillisch, Griechisch
   und Vietnamesisch sind bewusst weggelassen. */
@font-face{
  font-family:'Bricolage Grotesque';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url('fonts/bricolage-grotesque-normal-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face{
  font-family:'Bricolage Grotesque';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url('fonts/bricolage-grotesque-normal-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face{
  font-family:'Source Serif 4';
  font-style:italic;
  font-weight:400 600;
  font-display:swap;
  src:url('fonts/source-serif-4-italic-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face{
  font-family:'Source Serif 4';
  font-style:italic;
  font-weight:400 600;
  font-display:swap;
  src:url('fonts/source-serif-4-italic-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face{
  font-family:'Source Serif 4';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url('fonts/source-serif-4-normal-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face{
  font-family:'Source Serif 4';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url('fonts/source-serif-4-normal-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root{
  --paper:#fafbfc;
  --paper-2:#f3f6f8;
  --ink:#14181b;
  --ink-2:#232a30;
  --text:#3a444d;
  --muted:#66727c;
  --blue:#00a8d8;          /* Markenblau — bindend */
  --blue-deep:#0d84ab;
  --blue-text:#0b7396;     /* Linkfarbe, ≥4.5:1 auf Papier */
  --hairline:#e2e8ec;
  --dark:#101519;          /* dunkle Editorial-Blöcke */
  --dark-text:#c8d6dd;     /* Sekundärtext auf Dunkel, aus dem Blau getönt */
  --max:1200px;
  --measure:70ch;
  --font-d:'Bricolage Grotesque',system-ui,sans-serif;
  --font-s:'Source Serif 4',Georgia,serif;
  --ease:cubic-bezier(.22,.61,.2,1);
}

*{margin:0;padding:0;box-sizing:border-box}
/* clip statt hidden: begrenzt das ausgefahrene Slide-in-Menü, ohne den Sticky-Header zu brechen */
html{scroll-behavior:smooth;overflow-x:clip}
body{
  font-family:var(--font-d);
  font-size:17px;line-height:1.65;
  color:var(--text);background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
::selection{background:rgba(0,168,216,.22)}
a{color:var(--blue-text);text-decoration:none;transition:color .18s var(--ease)}
a:hover{color:var(--blue-deep)}
img{max-width:100%;display:block}
:focus-visible{outline:3px solid var(--blue-deep);outline-offset:3px}

h1,h2,h3,h4{color:var(--ink);font-family:var(--font-d);font-weight:700;line-height:1.08;letter-spacing:-.022em;text-wrap:balance;
  overflow-wrap:break-word}
/* Deutsche Komposita wie „Datenschutzerklärung" sprengen auf schmalen Geräten
   jede Displaygröße — dort trennen lassen (lang="de" liefert die Muster). */
@media(max-width:620px){h1,h2{hyphens:auto;-webkit-hyphens:auto}}
h1{font-size:clamp(2.5rem,6vw,4.4rem);font-weight:800;line-height:1.02}
h2{font-size:clamp(1.9rem,3.8vw,2.9rem);font-weight:800;line-height:1.06}
h3{font-size:clamp(1.25rem,2vw,1.55rem);line-height:1.2}
h4{font-size:1.08rem;line-height:1.3}
p{margin:0 0 1rem}

/* Erzähltext: Serif, Magazinmaß */
.prose{font-family:var(--font-s);font-size:1.13rem;line-height:1.78;color:var(--text);max-width:var(--measure)}
.prose p{margin:0 0 1.35rem}
.prose p:last-child{margin-bottom:0}
.prose b,.prose strong{color:var(--ink);font-weight:600}
.lead{font-family:var(--font-s);font-size:clamp(1.15rem,1.8vw,1.35rem);line-height:1.65;color:var(--ink-2);max-width:var(--measure)}

.wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(20px,4vw,48px)}
.section{padding:clamp(72px,10vw,132px) 0}
.section.tight{padding:clamp(48px,7vw,88px) 0}
.center{text-align:center}
.center .lead,.center .prose{margin-left:auto;margin-right:auto}
.mt{margin-top:26px}.mt-l{margin-top:52px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-d);font-weight:600;font-size:1rem;
  padding:16px 30px;border-radius:999px;cursor:pointer;border:1.5px solid transparent;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),background .22s var(--ease),color .22s var(--ease);white-space:nowrap}
.btn .arr{display:inline-block;transition:transform .22s var(--ease)}
.btn:hover .arr{transform:translateX(5px)}
/* Markenblau bleibt exakt bindend — deshalb trägt der Hauptbutton Tinte statt
   Weiß: Weiß auf #00A8D8 ergibt nur 2,77:1, Tinte darauf 6,5:1. */
.btn-primary{background:var(--blue);color:var(--ink);box-shadow:0 10px 28px -10px rgba(0,168,216,.5)}
.btn-primary:hover{background:#25c0ec;color:var(--ink);transform:translateY(-2px);box-shadow:0 16px 34px -10px rgba(0,168,216,.55)}
.btn-quiet{color:var(--ink);border-color:var(--ink)}
.btn-quiet:hover{background:var(--ink);color:#fff}
.btn:active{transform:translateY(0)}
/* Auf sehr schmalen Geräten dürfen lange Beschriftungen umbrechen, sonst
   sprengt etwa „Zum Systemhaus: it-hoehmann.de" den Bildschirm. */
@media(max-width:430px){.btn{white-space:normal;text-align:center;justify-content:center}}
.btn-row{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
/* Transparenzzeile unter dem CTA */
.cta-note{margin-top:14px;font-size:.92rem;color:var(--muted)}
.cta-note b{color:var(--ink);font-weight:600}

/* stiller Textlink mit Pfeil */
.more{font-weight:600;color:var(--ink);border-bottom:2px solid var(--blue);padding-bottom:2px}
.more:hover{color:var(--blue-deep)}

/* ---------- Header: Glas-Navigation ---------- */
.skip{position:absolute;left:-999px;top:0;z-index:300;background:var(--ink);color:#fff;padding:12px 20px;border-radius:0 0 10px 0;font-weight:700}
.skip:focus{left:0;color:#fff}
.site-header{position:sticky;top:0;z-index:100;
  background:rgba(250,251,252,.78);backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5);
  border-bottom:1px solid rgba(20,24,27,.08)}
.nav{display:flex;align-items:center;justify-content:space-between;height:76px;gap:clamp(28px,4vw,64px)}
.logo{display:flex;align-items:center;gap:13px}
.avatar{position:relative;width:44px;height:44px;border-radius:50%;overflow:hidden;flex-shrink:0;background:var(--blue);display:flex;align-items:center;justify-content:center}
.avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 18%}
.avatar b{color:var(--ink);font-weight:800;font-size:1rem}
.wordmark{display:flex;flex-direction:column;line-height:1.12}
.wordmark b{font-size:1.1rem;font-weight:800;color:var(--ink);letter-spacing:-.02em;white-space:nowrap}
.wordmark small{font-size:.66rem;font-weight:600;color:var(--muted);letter-spacing:1.1px;white-space:nowrap}
/* Die Zusatzzeile braucht Platz — im Gedränge zwischen Nav und CTA weicht sie */
@media(max-width:1180px){.wordmark small{display:none}}
.nav-links{display:flex;align-items:center;gap:clamp(16px,2vw,30px)}
.nav-links a{color:var(--ink);font-weight:600;font-size:.95rem;position:relative;white-space:nowrap}
.nav-links a:hover{color:var(--blue-deep)}
.nav-links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:2px;background:var(--blue)}
.nav-cta{display:flex;align-items:center;gap:16px}
.nav-tel{font-weight:600;font-size:.92rem;color:var(--muted);white-space:nowrap}
.nav-tel:hover{color:var(--ink)}
/* Telefon in der Leiste nur, wo die Zeile es ohne Gedränge trägt */
@media(max-width:1300px){.nav-tel{display:none}}
.nav-cta .btn{padding:11px 22px;font-size:.92rem}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.burger span{width:26px;height:2px;background:var(--ink);border-radius:2px;transition:.22s var(--ease)}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-links .nav-mobile-cta{display:none}
/* Abdunkelnder Grund hinter dem Menü — trennt das Panel und schließt per Tap */
.nav-scrim{position:fixed;inset:0;z-index:99;background:rgba(16,21,25,.44);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility 0s linear .3s}
.nav-scrim.on{opacity:1;visibility:visible;transition:opacity .3s var(--ease),visibility 0s}
@media(max-width:1080px){
  /* Das Panel bleibt im Viewport und wird per clip-path aufgedeckt. Ein
     herausgeschobenes Panel würde das Dokument breiter machen als den
     Bildschirm und dann Inhalt abschneiden statt zu scrollen. */
  /* ACHTUNG: .site-header trägt backdrop-filter und ist damit Containing Block
     seiner fixed-Kinder. Ohne explizite Höhe wäre das Panel nur so hoch wie die
     Leiste (77px) — clip-path schneidet dann fünf Links weg, auch aus dem
     Hit-Testing. Deshalb Höhe und Position hier ausdrücklich setzen. */
  .nav-links{position:fixed;top:0;right:0;bottom:auto;left:auto;
    height:100vh;height:100dvh;width:min(84vw,340px);
    overflow-y:auto;overscroll-behavior:contain;
    background:var(--paper);flex-direction:column;
    justify-content:flex-start;padding:100px 34px 40px;gap:24px;align-items:flex-start;border-left:1px solid var(--hairline);
    box-shadow:-24px 0 60px rgba(16,21,25,.14);
    clip-path:inset(0 0 0 100%);visibility:hidden;
    transition:clip-path .3s var(--ease),visibility 0s linear .3s}
  .nav-links.open{clip-path:inset(0);visibility:visible;transition:clip-path .3s var(--ease),visibility 0s}
  .nav-links a{font-size:1.15rem}
  .burger{display:flex;z-index:110}
  .nav-cta .btn,.nav-tel{display:none}
  /* Kein color:#fff hier — der Button erbt var(--ink) auf Markenblau (6,46:1). */
  .nav-links .nav-mobile-cta{display:inline-flex;margin-top:10px;font-size:1rem;padding:14px 26px}
}

/* ---------- Hero (Startseite): asymmetrischer Split ---------- */
.hero{position:relative;overflow:clip;background:var(--paper)}
/* Die Faktenzeile läuft über die volle Breite, damit rechts unter dem Porträt
   keine Leerfläche stehen bleibt. */
.hero-grid{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);align-items:start;
  grid-template-areas:"copy photo" "facts facts";grid-template-rows:auto auto;
  max-width:var(--max);margin:0 auto;padding:0 clamp(20px,4vw,48px);gap:0 clamp(32px,4vw,64px)}
.hero-copy{grid-area:copy;padding:clamp(56px,9vw,120px) 0 0}
.hero-facts{grid-area:facts}
/* Das Porträt ist ein gesetztes Bild, kein Bildteppich: gebundenes Hochformat,
   an der Textoberkante ausgerichtet. Es beginnt unter der Glasleiste — zieht man
   es darunter, verdeckt die Leiste die Augen; das Motiv gibt oben keinen
   Spielraum her. Substanz bekommt der Blur beim Scrollen. */
.hero-photo{grid-area:photo;align-self:center;justify-self:end;width:100%;max-width:380px;
  margin-top:clamp(56px,9vw,120px)}
.hero-copy h1{margin-bottom:26px;max-width:15ch}
.hero-copy h1 .hl{color:var(--blue-deep)}
.hero-copy .sub{font-family:var(--font-s);font-size:clamp(1.15rem,1.7vw,1.32rem);line-height:1.7;color:var(--text);max-width:52ch;margin-bottom:36px}
.hero-facts{margin:44px 0 clamp(28px,3.5vw,48px);padding-top:20px;border-top:1px solid var(--hairline);
  display:flex;gap:10px 28px;flex-wrap:wrap;font-size:.9rem;color:var(--muted)}
.hero-facts b{color:var(--ink);font-weight:600}
.hero-photo{position:relative;aspect-ratio:4/5}
.hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 18%;
  filter:saturate(.86) contrast(1.04)}
.hero-photo figcaption{position:absolute;left:0;bottom:0;right:0;padding:26px 20px 14px;font-size:.82rem;color:#fff;
  background:linear-gradient(0deg,rgba(16,21,25,.72),transparent);letter-spacing:.01em;line-height:1.35}
@media(max-width:900px){
  /* Mobil kommt das Gesicht VOR die Faktenzeile, damit im ersten Bildschirm
     ein Mensch steht und nicht nur Text. */
  .hero-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "photo" "facts";
    grid-template-rows:auto auto auto;padding-right:clamp(20px,4vw,48px);gap:0}
  .hero-copy{padding:32px 0 0}
  .hero-copy h1{margin-bottom:20px}
  .hero-copy .sub{margin-bottom:26px;font-size:1.1rem}
  /* justify-self:stretch + width:auto, damit die negativen Ränder das Bild
     wirklich über die Satzkante hinaus ziehen statt es nur zu verschieben. */
  .hero-photo{justify-self:stretch;width:auto;max-width:none;aspect-ratio:auto;height:52vh;
    margin:26px calc(clamp(20px,4vw,48px) * -1) 0}
  .hero-photo figcaption{padding:22px 20px 14px}
  .hero-facts{margin:26px 0 clamp(48px,7vw,72px);padding-top:16px}
}

/* ---------- Kapitel-Kopf: Überschrift trägt allein ---------- */
.chapter{max-width:var(--max);margin:0 auto}
.chapter-head{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(20px,4vw,60px);align-items:baseline;margin-bottom:clamp(36px,5vw,64px)}
.chapter-head .meta{font-size:.92rem;color:var(--muted);line-height:1.55}
/* Zweite Eröffnungsfigur: Überschrift über die volle Breite, Vorlauf darunter.
   Setzt Zäsuren, wo ein neuer Erzählabschnitt beginnt. */
.chapter-head.wide{grid-template-columns:minmax(0,1fr);gap:16px}
.chapter-head.wide h2{max-width:26ch}
.chapter-head.wide .meta{font-size:1rem;max-width:56ch}
.chapter-head .meta b{color:var(--ink)}
@media(max-width:760px){.chapter-head{grid-template-columns:minmax(0,1fr);gap:14px}}

/* ---------- Editorial-Split: Text + Marginalie ---------- */
.ed-split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(28px,5vw,84px);align-items:start}
/* Beim Umdrehen müssen die Spurbreiten mitwandern, sonst steht die Marginalie
   in der breiten Spalte und der Erzähltext in der schmalen. */
.ed-split.rev{grid-template-columns:minmax(0,4fr) minmax(0,7fr)}
.ed-split.rev .ed-side{order:-1}
@media(max-width:860px){.ed-split,.ed-split.rev{grid-template-columns:minmax(0,1fr)}.ed-split.rev .ed-side{order:0}}
.ed-side{position:sticky;top:104px}
@media(max-width:860px){.ed-side{position:static}}

/* Pull-Quote: große Serif-Zeile, Hairline oben/unten */
.pull{border-top:2px solid var(--ink);border-bottom:1px solid var(--hairline);padding:26px 0;margin:34px 0}
.pull p{font-family:var(--font-s);font-style:italic;font-size:clamp(1.3rem,2.2vw,1.7rem);line-height:1.5;color:var(--ink);margin:0}
.pull .who{font-family:var(--font-d);font-style:normal;font-size:.88rem;color:var(--muted);margin-top:12px}

/* ---------- Abbildungen (Fotos & System-Mockups) ---------- */
figure.fig{margin:0}
/* height:auto ist hier keine Kosmetik, sondern die Voraussetzung für die
   Verhältnis-Klassen unten: die Bilder tragen im HTML width/height gegen
   Layout-Sprünge, und dieser Präsentationshinweis bestimmt die Höhe, solange
   CSS sie nicht auf auto setzt. Ohne die Zeile blieb aspect-ratio wirkungslos —
   jedes Foto stand in voller Hochkant-Höhe (860×1146 statt beschnitten), also
   fast viermal so hoch wie beabsichtigt, und neben kurzen Textspalten blieb ein
   halber Bildschirm leer. */
figure.fig img{width:100%;height:auto;filter:saturate(.86) contrast(1.04)}
figure.fig figcaption,.figcap{font-size:.88rem;color:var(--muted);padding:12px 0 0;border-bottom:1px solid var(--hairline);padding-bottom:14px;line-height:1.5}
figure.fig figcaption b,.figcap b{color:var(--ink);font-weight:600}
.fig.r43 img{aspect-ratio:4/3;object-fit:cover}
.fig.r45 img{aspect-ratio:4/5;object-fit:cover}

/* ---------- Kennzahlen: stille Zahlenzeile, keine Boxen ---------- */
.numbers{border-top:2px solid var(--ink);border-bottom:1px solid var(--hairline);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:0}
.numbers>div{padding:26px 18px 24px;border-left:1px solid var(--hairline)}
.numbers>div:first-child{border-left:0;padding-left:0}
.numbers b{display:block;font-size:clamp(1.9rem,3vw,2.6rem);font-weight:800;color:var(--ink);line-height:1;letter-spacing:-.03em}
.numbers small{display:block;margin-top:8px;font-size:.85rem;color:var(--muted)}
.numbers .acc b{color:var(--blue-text)}
@media(max-width:700px){
  .numbers{grid-template-columns:repeat(2,1fr)}
  .numbers>div{padding:20px 14px 18px}
  .numbers>div:nth-child(odd){border-left:0;padding-left:0}
}

/* ---------- Leistungs-Index: Zeilen statt Karten ---------- */
.index-list{border-top:2px solid var(--ink)}
.index-list .row{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr) auto;gap:clamp(14px,3vw,44px);
  align-items:baseline;padding:26px 0;border-bottom:1px solid var(--hairline);text-decoration:none;
  transition:background .2s var(--ease),transform .2s var(--ease)}
.index-list .row:hover{background:linear-gradient(90deg,rgba(0,168,216,.05),transparent 70%);transform:translateX(8px)}
.index-list .row h3{font-size:1.2rem;margin:0;transition:color .2s var(--ease)}
.index-list .row:hover h3{color:var(--blue-deep)}
.index-list .row p{margin:0;font-size:.98rem;color:var(--text)}
.index-list .row .arr{color:var(--blue-text);font-weight:700;justify-self:end;transition:transform .2s var(--ease)}
.index-list .row:hover .arr{transform:translateX(6px)}
@media(max-width:760px){
  .index-list .row{grid-template-columns:minmax(0,1fr);gap:6px;padding:20px 0}
  .index-list .row .arr{display:none}
}

/* ---------- Geschichten-Teaser (Fallbeispiele) ---------- */
.stories{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,44px)}
/* Zweispaltige Variante als Klasse, nicht als style="" am Element: ein
   Inline-Style gewinnt gegen jede Media-Query. Genau daran hingen die beiden
   Showroom-Fotos auf der Kontaktseite — sie standen auf einem 390-px-Telefon
   als 163×122-Briefmarken nebeneinander, weil der Umbruch nicht greifen konnte.
   Die Media-Query unten trägt beide Selektoren, damit sie in der Spezifität
   mithält (.stories.zwei = 0,2,0 gegen .stories = 0,1,0). */
.stories.zwei{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:860px){.stories,.stories.zwei{grid-template-columns:minmax(0,1fr)}}
.story{display:block;border-top:2px solid var(--ink);padding-top:20px;text-decoration:none;
  transition:transform .22s var(--ease)}
.story:hover{transform:translateY(-3px)}
.story .kat{font-size:.82rem;color:var(--muted);letter-spacing:.02em}
.story h3{margin:8px 0 10px;transition:color .2s var(--ease)}
.story:hover h3{color:var(--blue-deep)}
.story p{font-family:var(--font-s);font-size:1rem;line-height:1.65;color:var(--text);margin:0}
.story .more{display:inline-block;margin-top:14px;font-size:.92rem}

/* ---------- Stimmen: Zitate ohne Karten ---------- */
.voices{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,56px)}
@media(max-width:860px){.voices{grid-template-columns:minmax(0,1fr);gap:36px}}
.voice{border-top:1px solid var(--hairline);padding-top:22px}
.voice:first-child{border-top-color:var(--blue)}
.voice p{font-family:var(--font-s);font-style:italic;font-size:1.08rem;line-height:1.7;color:var(--ink);margin:0 0 16px}
.voice .who{font-size:.88rem;color:var(--muted)}
.voice .who b{display:block;color:var(--ink);font-weight:600;font-size:.95rem}

/* ---------- Ablauf: nummerierte Schritte (Sequenz trägt Information) ---------- */
.steps-line{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px)}
@media(max-width:860px){.steps-line{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.steps-line{grid-template-columns:minmax(0,1fr)}}
.step-l{border-top:1px solid var(--hairline);padding-top:18px;position:relative}
.step-l .n{font-size:.85rem;font-weight:700;color:var(--blue-text);letter-spacing:.04em}
.step-l h3{margin:6px 0 8px;font-size:1.08rem;line-height:1.3}
.step-l p{font-size:.94rem;color:var(--text);margin:0;line-height:1.6}

/* ---------- dunkler Editorial-Block (Finale / Systemhaus) ---------- */
.dark-band{background:var(--dark);color:var(--dark-text)}
.dark-band h2,.dark-band h3{color:#fff}
.dark-band .prose,.dark-band .lead{color:var(--dark-text)}
.dark-band a:not(.btn){color:#9fd6ec}
.dark-band a:not(.btn):hover{color:#fff}
.dark-band .rule{border-top-color:rgba(255,255,255,.14)}
.dark-band .cta-note{color:#8da4b0}
.dark-band .cta-note b{color:#fff}
.dark-band .btn-quiet{color:#fff;border-color:rgba(255,255,255,.55)}
.dark-band .btn-quiet:hover{background:#fff;color:var(--ink);border-color:#fff}
/* Auf dunklem Grund erben Bildunterschriften und Chips sonst Tinte auf Schwarz (1:1).
   Selektoren müssen figure.fig überstimmen, sonst greift die helle Variante. */
.dark-band figure.fig figcaption,.dark-band .figcap,.region figure.fig figcaption{
  color:var(--dark-text);border-bottom-color:rgba(255,255,255,.16)}
.dark-band figure.fig figcaption b,.dark-band .figcap b,.region figure.fig figcaption b{color:#fff}
.dark-band .chip{color:var(--dark-text)}
.dark-band .cred{color:#fff;border-bottom-color:rgba(255,255,255,.16)}
.dark-band .prose b,.dark-band .prose strong{color:#fff}
/* Grenze zum Regionsband: beide Flächen tragen --dark und würden sonst zu
   einem einzigen Dunkelblock verschmelzen — dieselbe Geste wie am Footer. */
.finale{border-top:1px solid rgba(255,255,255,.14)}
.finale h2{font-size:clamp(2.2rem,5vw,3.6rem);letter-spacing:-.025em;max-width:18ch}
.finale .prose{font-size:1.15rem}

/* ---------- Seitenkopf Unterseiten ---------- */
.phero{border-bottom:1px solid var(--hairline);padding:clamp(52px,7vw,96px) 0 clamp(36px,5vw,64px)}
.phero h1{max-width:20ch;margin-bottom:18px}
.phero .lead{margin:0}
.crumb{font-size:.85rem;color:var(--muted);margin-bottom:22px}
.crumb a{color:var(--muted)}
.crumb a:hover{color:var(--blue-deep)}

/* ---------- System-Abbildungen (ehem. Mockups) ---------- */
.fmock{border:1px solid var(--hairline);background:#fff}
.fmock .bar{display:flex;align-items:center;gap:6px;padding:10px 16px;border-bottom:1px solid var(--hairline)}
.fmock .bar i{width:8px;height:8px;border-radius:50%;background:var(--hairline);display:inline-block}
.fmock .bar span{margin-left:8px;font-size:.78rem;color:var(--muted);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.fmock .body{padding:18px}
.fmock .mrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 2px;border-bottom:1px solid var(--hairline)}
.fmock .mrow:last-child{border-bottom:0}
.fmock .t{font-weight:600;color:var(--ink);font-size:.95rem}
.fmock .s{font-size:.83rem;color:var(--muted)}
.pill{font-size:.74rem;font-weight:700;padding:4px 10px;border-radius:999px;letter-spacing:.02em;white-space:nowrap}
.pill.ok{background:#e6f6ec;color:#14683a}
.pill.warn{background:#fdf0e3;color:#9a5510}
.pill.brand{background:rgba(0,168,216,.12);color:var(--blue-text)}
.pill.crit{background:#fdeaea;color:#a93226}
.hring{--p:0;width:52px;height:52px;border-radius:50%;background:conic-gradient(var(--blue) calc(var(--p)*1%),var(--hairline) 0);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.hring b{width:38px;height:38px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:.82rem;font-weight:800;color:var(--blue-text)}
.chat{display:grid;gap:9px}
.bub{max-width:84%;padding:10px 14px;border-radius:14px;font-size:.9rem;line-height:1.45}
.bub.in{background:var(--paper-2);color:var(--ink-2);border-bottom-left-radius:4px}
.bub.out{background:var(--blue);color:var(--ink);margin-left:auto;border-bottom-right-radius:4px}
.agents{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.ag{display:flex;align-items:center;gap:7px;border:1px solid var(--hairline);border-radius:999px;padding:5px 11px 5px 6px;font-size:.8rem;font-weight:600;color:var(--ink-2)}
.ag .av{width:20px;height:20px;border-radius:50%;background:var(--blue);color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:.6rem;font-weight:800}
.ag .dot{width:7px;height:7px;border-radius:50%;background:#2bb673}
.docline{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px dashed var(--hairline);font-size:.9rem;color:var(--ink-2)}
.docline:last-child{border-bottom:0}
.docline .ico{width:30px;height:30px;border:1px solid var(--hairline);display:flex;align-items:center;justify-content:center;color:var(--blue-text);flex:0 0 auto;font-size:.68rem;font-weight:700}
.docline .stamp{margin-left:auto;font-size:.75rem;color:var(--muted)}
.invtot{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding-top:12px;border-top:2px solid var(--ink)}
.invtot b{font-size:1.2rem;color:var(--ink)}
.mnote{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:.82rem;color:var(--muted)}
.mnote svg{color:var(--blue);flex:0 0 auto}
.fstat{flex:1;min-width:78px;text-align:center;border-top:1px solid var(--hairline);padding:10px 6px 0}
.fstat b{display:block;font-size:1.3rem;color:var(--ink);line-height:1.1;font-weight:800}
.fstat small{font-size:.72rem;color:var(--muted)}

/* ---------- Echte Bildschirmfotos ----------
   Bewusst anders behandelt als .fmock (= nachgebaute Ansicht): ein Screenshot
   ist Beweis, kein Schaubild. Deshalb Hairline-Rahmen, Kennzeichnung
   „Bildschirmfoto" und keine gemalte Fensterleiste. */
.shot{position:relative;margin:0}
/* position:relative gehört an den Rahmen, nicht nur an .shot — sonst würde der
   Hinweis „Originalgröße" am Bildtext kleben statt am Bildrand. */
.shot .frame{position:relative;border:1px solid var(--hairline);background:#fff;overflow:hidden;
  box-shadow:0 18px 44px -28px rgba(16,21,25,.35)}
/* <picture> ist von Haus aus inline und würde unter dem Bild eine
   Grundlinien-Lücke im Rahmen lassen. */
.shot picture{display:block}
.shot img{width:100%;height:auto;display:block}
/* Auf dem Handy schrumpft ein Desktop-Bildschirmfoto auf ein Fünftel seiner
   Breite — dann ist keine Beschriftung mehr zu entziffern und der Beweis
   verpufft. Deshalb ist jeder Rahmen ein Link auf die Bilddatei: der Browser
   zeigt sie in Originalgröße, zum Zoomen und Wischen. Kein JavaScript nötig. */
.shot a.frame{display:block;text-decoration:none;color:inherit}
/* Grundzustand ist SICHTBAR, das Ausblenden steckt in @media(hover:hover).
   Umgekehrt gebaut wäre der Hinweis genau dort unsichtbar, wo er gebraucht
   wird: Headless Chrome meldet auch im Handy-Modus „hover: hover", eine
   Regel unter @media(hover:none) ist hier also nicht prüfbar. So ist der
   Handy-Fall der Standardweg und kann nicht stillschweigend ausfallen. */
.shot a.frame::after{content:"Originalgröße";position:absolute;z-index:2;right:12px;bottom:12px;
  font-family:var(--font-d);font-size:.68rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  padding:7px 12px;border-radius:999px;background:rgba(20,24,27,.88);color:#fff;
  transition:opacity .22s var(--ease),transform .22s var(--ease)}
@media(hover:hover){
  .shot a.frame::after{opacity:0;transform:translateY(4px)}
  .shot a.frame:hover::after{opacity:1;transform:none}
}
.shot a.frame:focus-visible::after{opacity:1;transform:none}
/* Kein eigener Ring: Markenblau als Kontur erreicht nur 2,67:1 auf Papier und
   fällt damit unter die 3:1 nach WCAG 1.4.11. Der globale Ring aus --blue-deep
   liegt bei 4,13:1 und gilt hier ohnehin. */
/* Unter 760px steht der Handy-Zuschnitt, und der ist lesbar. Das ausgeschriebene
   Wort würde dort dauerhaft über der Kennzahl liegen, auf die die Bildunterschrift
   zeigt — deshalb nur noch ein kompaktes Zeichen. Der Linkname kommt ohnehin
   aus dem alt-Text, nicht aus dieser Beschriftung. */
@media(max-width:760px){
  .shot a.frame::after{content:"⤢";font-size:1.05rem;line-height:1;letter-spacing:0;
    padding:0;width:34px;height:34px;display:grid;place-items:center;right:10px;bottom:10px}
}
/* Fehlt die Datei, führt der Link ins Leere und ::after trägt den Platzhaltertext. */
.shot.missing a.frame{pointer-events:none}

/* Weicher Auslauf rechts für Ausschnitte, die mitten in einer Tabelle enden.
   Eine harte Kante durch ein halbes Bedienelement liest sich wie ein Fehler,
   der Verlauf als „hier geht die Ansicht weiter". */
.shot.cut .frame{position:relative}
.shot.cut .frame::before{content:"";position:absolute;top:0;bottom:0;right:0;width:clamp(40px,7%,96px);
  background:linear-gradient(to right,rgba(255,255,255,0),#fff);pointer-events:none;z-index:1}
.shot.cut.missing .frame::before{content:none}
/* Unter 760px zeigt das DMS-Bild nicht mehr die angeschnittene Tabelle, sondern
   den vollständigen Ablagebaum. Der Auslauf hätte dort nichts zu weichzeichnen
   und würde nur eine weiße Bahn über den Baum legen. */
@media(max-width:760px){.shot.cut .frame::before{content:none}}
/* Fehlt die Datei, ersetzt onerror den Rahmen durch einen benannten Platzhalter.
   Das Bild darf dafür NICHT per display:none vorversteckt werden: ein nicht
   gerendertes Bild wird bei loading="lazy" nie geladen, dann käme weder das
   Bild noch der Fehler — eine Sackgasse. Deshalb laden diese Bilder normal,
   mit width/height gegen Layout-Sprünge. */
.shot.missing .frame{border-style:dashed;border-color:var(--hairline);background:var(--paper-2);
  box-shadow:none;min-height:210px;display:flex;align-items:center;justify-content:center;padding:28px}
.shot.missing .frame::after{content:attr(data-file);font-family:var(--font-d);font-size:.86rem;
  font-weight:600;color:var(--muted);text-align:center;line-height:1.6}
.shot.missing img{display:none}
.shot figcaption{font-size:.88rem;color:var(--muted);padding:12px 0 14px;
  border-bottom:1px solid var(--hairline);line-height:1.5}
.shot figcaption b{color:var(--ink);font-weight:600}
.shot .tag{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--blue-text);margin-bottom:8px}
.dark-band .shot figcaption,.region .shot figcaption{color:var(--dark-text);border-bottom-color:rgba(255,255,255,.16)}
.dark-band .shot figcaption b{color:#fff}
.dark-band .shot .tag{color:#7fd0ec}

.dark-band .shot.missing .frame{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.2)}
.dark-band .shot.missing .frame::after{color:var(--dark-text)}

.shot-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,52px)}
@media(max-width:860px){.shot-grid{grid-template-columns:minmax(0,1fr)}}

/* Hochformat, etwa die Seitennavigation: Ein Bild im Verhältnis 1:5 wäre auf
   Spaltenbreite über 1400 px hoch. Deshalb in der Höhe begrenzt, mit einer
   Auslaufkante unten — sie sagt „die Liste geht weiter", ohne zu lügen. Die
   vollständige Aufzählung steht als Text daneben. */
.shot.tall .frame{max-width:258px;position:relative;max-height:600px;overflow:hidden}
.shot.tall .frame::before{content:"";position:absolute;left:0;right:0;bottom:0;height:110px;
  background:linear-gradient(180deg,rgba(255,255,255,0),#fff 78%);pointer-events:none;z-index:1}
.shot.tall.missing .frame{max-height:none}
.shot.tall.missing .frame::before{content:none}
.shot.tall figcaption{max-width:340px}
@media(max-width:860px){
  /* Nebeneinander: schmales Bild links, Erläuterung rechts */
  .shot.tall{display:grid;grid-template-columns:190px minmax(0,1fr);gap:22px;align-items:start}
  .shot.tall .frame{max-width:none;max-height:430px}
  .shot.tall figcaption{max-width:none;border-bottom:0;padding-top:0}
}
@media(max-width:520px){
  .shot.tall{grid-template-columns:minmax(0,1fr);gap:0}
  .shot.tall .frame{max-width:200px;max-height:380px}
  .shot.tall figcaption{padding-top:14px}
}

/* Bildschirmfotos groß, Erläuterung als Marginalie daneben: nur so sieht man
   die Tiefe des Systems, und genau die ist das Argument. */
.shot-rows{display:grid;gap:clamp(40px,5vw,72px)}
.shot-row{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);
  gap:clamp(24px,3vw,48px);align-items:start;
  padding-top:clamp(36px,4vw,56px);border-top:1px solid var(--hairline)}
.shot-row:first-child{padding-top:0;border-top:0}
.shot-row.rev{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
.shot-row.rev .shot{order:2}
.shot-row .note{font-size:.95rem;line-height:1.6;color:var(--text)}
.shot-row .note b{color:var(--ink);font-weight:600;display:block;margin-bottom:6px;font-size:1.05rem}
.shot-row .note .tag{display:block;font-size:.72rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--blue-text);margin-bottom:10px}
.shot-row .shot figcaption{display:none}
@media(max-width:900px){
  .shot-row,.shot-row.rev{grid-template-columns:minmax(0,1fr);gap:18px}
  .shot-row.rev .shot{order:0}
}

/* ---------- Video ----------
   Kein Autoplay: wer zusieht, entscheidet das selbst. Standbild wird
   mitgeliefert, damit vor dem Klick kein schwarzes Loch steht. */
.vid{margin:0}
.vid .frame{border:1px solid var(--hairline);background:var(--dark);overflow:hidden;
  box-shadow:0 18px 44px -28px rgba(16,21,25,.35)}
.vid video{width:100%;height:auto;display:block;background:var(--dark)}
.vid figcaption{font-size:.88rem;color:var(--muted);padding:12px 0 14px;
  border-bottom:1px solid var(--hairline);line-height:1.5}
.vid figcaption b{color:var(--ink);font-weight:600}
.vid .tag{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--blue-text);margin-bottom:8px}
.dark-band .vid figcaption{color:var(--dark-text);border-bottom-color:rgba(255,255,255,.16)}
.dark-band .vid figcaption b{color:#fff}
.dark-band .vid .tag{color:#7fd0ec}
.dark-band .vid .frame{border-color:rgba(255,255,255,.2)}

/* Modul-Leiste: die Breite der Plattform als Beleg, nicht als Behauptung */
.modules{display:flex;flex-wrap:wrap;gap:0;border-top:2px solid var(--ink);
  border-bottom:1px solid var(--hairline)}
.modules span{font-size:.95rem;font-weight:600;color:var(--ink);padding:14px clamp(14px,1.8vw,22px);
  border-left:1px solid var(--hairline);line-height:1.2}
.modules span:first-child{padding-left:0;border-left:0}
.modules span.more{color:var(--muted);font-weight:400}
.dark-band .modules{border-top-color:rgba(255,255,255,.55);border-bottom-color:rgba(255,255,255,.16)}
.dark-band .modules span{color:#fff;border-left-color:rgba(255,255,255,.16)}
.dark-band .modules span.more{color:var(--dark-text)}
@media(max-width:620px){
  .modules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
  .modules span{padding:11px 0;border-left:0;border-top:1px solid var(--hairline)}
  .modules span:first-child,.modules span:nth-child(2){border-top:0}
  .dark-band .modules span{border-top-color:rgba(255,255,255,.16)}
}

/* ---------- Leistungs-Reihen (Text + Abbildung) ---------- */
.frow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center;
  padding:clamp(40px,6vw,72px) 0;border-bottom:1px solid var(--hairline)}
.frow:last-child{border-bottom:0}
.frow.rev .ftext{order:2}
.frow h3{font-size:clamp(1.4rem,2.2vw,1.8rem);margin:0 0 14px}
.frow .kat{font-size:.85rem;color:var(--muted);margin:0 0 8px;letter-spacing:.02em}
.frow .ftext p{font-family:var(--font-s);color:var(--text);margin:0 0 16px;line-height:1.7;font-size:1.04rem}
.fbul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.fbul li{position:relative;padding-left:24px;color:var(--ink-2);font-size:.97rem;line-height:1.55}
.fbul li::before{content:"";position:absolute;left:0;top:.62em;width:12px;height:2px;background:var(--blue)}
.fnut{margin-top:18px;padding-top:14px;border-top:1px solid var(--hairline);font-family:var(--font-s);font-size:.98rem;color:var(--ink-2);line-height:1.6}
.fnut b{color:var(--blue-text);font-family:var(--font-d);font-weight:600}
/* Volle Breite für dichte Tabellen-Bildschirmfotos. In einer halben Spalte
   landet ein 1120-px-Ausschnitt bei 517 px — die Schrift wäre dann rund fünf
   Pixel hoch und der Beweis damit wertlos. Über die ganze Breite (max. 1104 px
   im Rahmen) sitzt er praktisch in Originalgröße. */
.frow.wide{grid-template-columns:minmax(0,1fr);align-items:start;gap:clamp(24px,3vw,38px)}
.frow.wide .ftext{max-width:66ch}
.frow.wide .shot figcaption{max-width:78ch}

/* minmax(0,1fr) statt 1fr: sonst hält der Min-Content-Boden die Spalte auf
   sehr schmalen Geräten breiter als den Bildschirm. */
@media(max-width:820px){.frow{grid-template-columns:minmax(0,1fr);gap:26px}.frow.rev .ftext{order:0}}

/* ---------- Zeitleiste (Werdegang) ---------- */
.tl{margin-top:8px}
.tl-years{display:flex;gap:6px;flex-wrap:wrap;border-bottom:2px solid var(--ink);padding-bottom:0}
.tl-years button{font-family:var(--font-d);font-weight:700;font-size:1rem;color:var(--muted);background:none;border:0;
  padding:10px 16px 12px;cursor:pointer;position:relative;transition:color .2s var(--ease)}
.tl-years button:hover{color:var(--ink)}
.tl-years button[aria-selected="true"]{color:var(--blue-text)}
.tl-years button[aria-selected="true"]::after{content:"";position:absolute;left:10px;right:10px;bottom:-2px;height:3px;background:var(--blue)}
/* Die Zeitleiste nutzt die volle Satzbreite — eine leere Marginalspalte
   daneben liest sich als unausgefülltes Raster, nicht als Asymmetrie. */
.tl{grid-column:1 / -1}
.tl-panel{padding:30px 0 6px;min-height:130px}
.tl-panel h3{font-size:1.3rem;margin-bottom:10px;line-height:1.2}
.tl-panel p{font-family:var(--font-s);font-size:1.06rem;line-height:1.7;color:var(--text);max-width:60ch;margin:0}
@media(max-width:640px){
  .tl-years{gap:0}
  .tl-years button{padding:8px 11px 10px;font-size:.92rem}
}
/* Fallback ohne JS: vertikale Liste */
.tline{border-left:1px solid var(--hairline);margin-left:6px;padding-left:28px;display:grid;gap:30px}
.tline .ev{position:relative}
.tline .ev::before{content:"";position:absolute;left:-35px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--blue)}
.tline .ev .yr{font-weight:800;color:var(--blue-text);font-size:.9rem;letter-spacing:.04em}
.tline .ev h3{font-size:1.1rem;margin:3px 0 5px;line-height:1.3}
.tline .ev p{font-family:var(--font-s);font-size:1rem;margin:0;color:var(--text);line-height:1.65}

/* ---------- Konditionen (Angebot) ---------- */
.offer{border-top:2px solid var(--ink);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);padding:36px 0;border-bottom:1px solid var(--hairline)}
@media(max-width:820px){.offer{grid-template-columns:minmax(0,1fr);gap:18px}}
.offer .price{font-size:clamp(2rem,4vw,3rem);font-weight:800;color:var(--ink);letter-spacing:-.03em;line-height:1.05}
.offer .price span{display:block;font-size:.95rem;font-weight:400;color:var(--muted);letter-spacing:0;margin-top:8px}
.offer h3{margin:0 0 10px}
.offer ul{list-style:none;display:grid;gap:10px;margin:16px 0 22px}
.offer li{position:relative;padding-left:24px;font-size:.98rem;color:var(--ink-2);line-height:1.55}
.offer li::before{content:"";position:absolute;left:0;top:.62em;width:12px;height:2px;background:var(--blue)}

/* Punkt/Bedeutung-Tabelle (Prozess-Analyse) */
.padef{border-top:2px solid var(--ink)}
.padef .r{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(16px,3vw,48px);border-bottom:1px solid var(--hairline);padding:20px 0}
.padef .p{font-weight:700;color:var(--ink);display:flex;gap:12px;align-items:baseline;line-height:1.4}
.padef .m{color:var(--text);font-family:var(--font-s);font-size:1rem;line-height:1.65}
.padef .num{flex:0 0 auto;font-size:.85rem;font-weight:800;color:var(--blue-text)}
@media(max-width:680px){.padef .r{grid-template-columns:minmax(0,1fr);gap:8px}}

/* ---------- ROI-Rechner (Wissen) — Funktionsinsel ---------- */
.roi{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start}
@media(max-width:860px){.roi{grid-template-columns:minmax(0,1fr)}}
.calc{border:1px solid var(--hairline);border-top:2px solid var(--ink);padding:clamp(20px,3vw,34px);background:#fff}
.calc .ct{font-weight:800;color:var(--ink);font-size:1.15rem;margin-bottom:20px}
.calc .field{margin-bottom:18px}
.calc label{display:flex;justify-content:space-between;font-size:.92rem;font-weight:600;color:var(--ink);margin-bottom:8px}
.calc label b{color:var(--blue-text);font-variant-numeric:tabular-nums}
.calc input[type=range]{width:100%;accent-color:var(--blue);height:28px;padding:11px 0;background:transparent;cursor:pointer}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);margin-top:22px;border-top:2px solid var(--ink)}
.kpi{padding:16px 12px 0;border-left:1px solid var(--hairline)}
.kpi:first-child{border-left:0;padding-left:0}
.kpi b{display:block;font-size:clamp(1.2rem,1.8vw,1.5rem);font-weight:800;color:var(--ink);line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kpi small{font-size:.76rem;color:var(--muted);display:block;margin-top:5px}
.payback{margin-top:20px}
.payback .bar{height:10px;background:var(--paper-2);overflow:hidden;margin:8px 0}
.payback .bar i{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left;background:var(--blue);transition:transform .25s var(--ease)}
.payback small{color:var(--muted);font-size:.82rem}
.calc .note{font-size:.8rem;color:var(--muted);margin-top:16px;line-height:1.5}
.tbars{display:grid;gap:14px;margin-top:20px}
.tbars .tbar .lab{font-size:.88rem;color:var(--ink);margin-bottom:5px;display:flex;justify-content:space-between;font-weight:600}
.tbars .tbar .track{height:18px;background:var(--paper-2);overflow:hidden}
.tbars .tbar .track i{display:block;height:100%}
.tbars .tbar .track i.before{width:100%;background:#c3dcea}
.tbars .tbar .track i.after{width:50%;background:var(--blue)}

/* ---------- FAQ: redaktionelles Frage-Antwort ---------- */
.faq{display:grid;gap:0;max-width:820px}
.faq details{border-bottom:1px solid var(--hairline)}
.faq details:first-child{border-top:2px solid var(--ink)}
.faq summary{list-style:none;cursor:pointer;padding:22px 0;font-weight:700;color:var(--ink);display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-size:1.08rem;transition:color .18s var(--ease)}
.faq summary:hover{color:var(--blue-deep)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--blue);font-weight:600;font-size:1.5rem;line-height:1;flex-shrink:0;transition:transform .2s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 0 24px;color:var(--text);font-family:var(--font-s);font-size:1.02rem;line-height:1.72;max-width:64ch}
.faq .a p{margin:0 0 .7rem}
.faq .a p:last-child{margin:0}

/* ---------- Kontakt ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,5vw,80px)}
@media(max-width:860px){.contact-grid{grid-template-columns:minmax(0,1fr)}}
.cinfo{display:grid;gap:0;border-top:2px solid var(--ink)}
.cinfo .row{display:grid;grid-template-columns:130px 1fr;gap:14px;padding:16px 0;border-bottom:1px solid var(--hairline);font-size:.98rem}
.cinfo .row b{color:var(--ink);font-weight:600}
.cinfo .row a{display:inline-flex;align-items:center;min-height:26px;padding:2px 0}
/* Hier stand das Kontaktformular (form.cf, .err, .formnote). Es ist entfernt:
   die Kontaktseite nennt Telefon, E-Mail, Adresse, Öffnungszeiten, Region und
   LinkedIn direkt, dazu zwei Knöpfe (anrufen, E-Mail schreiben). Ein Formular,
   das ohnehin nur das Mailprogramm geöffnet hat, war ein Umweg mit
   Eingabefeldern. Die Regeln sind mitgelöscht, damit kein toter Code bleibt —
   .contact-grid trägt jetzt links die Kontaktangaben, rechts das Foto.

   Das Porträt trägt hier 4/5 statt der sonst üblichen 4/3: bei 4/3 wäre die
   Bildspalte kürzer als die Kontaktangaben daneben, bei 4/5 sind beide fast
   gleich hoch. height:auto kommt inzwischen aus figure.fig img. */
.contact-grid .fig img{aspect-ratio:4/5}

/* ---------- Region: typografisches Band ----------
   Zuvor eine gezeichnete Landschaft mit Textkasten darauf. Beides ersetzt:
   Clipart trägt die Editorial-Welt nicht, und der Kasten war der letzte
   Rahmen auf der Seite. Wenn echte Regionalfotos vorliegen, kann
   .region ein Hintergrundbild bekommen (siehe BILDER-BRIEFING.md). */
.region{position:relative;overflow:hidden;background:var(--dark);color:var(--dark-text);
  padding:clamp(64px,9vw,116px) 0 clamp(48px,6vw,72px)}
.region::before{content:"";position:absolute;top:-30%;right:-10%;width:60vw;height:150%;
  background:radial-gradient(ellipse at center,rgba(0,168,216,.20),transparent 62%);pointer-events:none}
.region .wrap{position:relative}
.region h2{color:#fff;margin-bottom:16px;max-width:22ch}
.region p{color:var(--dark-text);font-family:var(--font-s);line-height:1.75;max-width:62ch;margin:0}
.region-places{display:flex;flex-wrap:wrap;gap:12px 0;margin-top:clamp(30px,4vw,48px);
  border-top:1px solid rgba(255,255,255,.16);padding-top:22px}
/* Trenner als Pseudoelement, nicht als border-left: beim Umbruch in eine zweite
   Reihe behielte der Rand sonst Strich und Polster und versetzte die Textachse. */
.region-places span{position:relative;font-size:clamp(1.05rem,1.9vw,1.5rem);font-weight:700;color:#fff;
  letter-spacing:-.015em;padding-right:clamp(14px,2vw,26px);line-height:1.25}
.region-places span+span{padding-left:clamp(14px,2vw,26px)}
.region-places span+span::before{content:"";position:absolute;left:0;top:.15em;bottom:.15em;
  width:1px;background:rgba(255,255,255,.16)}
.region-places span em{font-style:normal;color:var(--blue)}
@media(max-width:620px){
  /* Mobil zweispaltig: so beginnt jede Zeile auf derselben Achse */
  .region-places{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}
  .region-places span,.region-places span+span{padding:0}
  .region-places span+span::before{display:none}
}

/* ---------- Status, Chips, Nachweise ---------- */
.status{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:5px 0;white-space:nowrap;border-bottom:2px solid}
.status.live{color:#14683a;border-color:#2bb673}
.status.soon{color:#9a5510;border-color:#e0a35a}
.chips{display:flex;flex-wrap:wrap;gap:8px 18px}
.chip{font-size:.85rem;color:var(--ink-2);position:relative;padding-left:14px}
.chip::before{content:"";position:absolute;left:0;top:.58em;width:8px;height:2px;background:var(--blue)}
.cred{display:inline-flex;align-items:baseline;gap:8px;font-size:.92rem;font-weight:600;color:var(--ink);padding:8px 0;border-bottom:1px solid var(--hairline)}
.cred::before{content:"";width:10px;height:10px;background:var(--blue);flex:0 0 auto;align-self:center}
.badges{display:grid;gap:2px;margin-top:10px;max-width:420px}

/* ---------- Legal ---------- */
/* Nicht .legal selbst begrenzen: als .wrap.legal würde der Rechtstext im
   Viewport zentriert und stünde nicht auf der Satzachse des Seitentitels. */
.legal>*{max-width:820px}
.legal h2{font-size:1.5rem;margin:44px 0 12px}
.legal h3{font-size:1.12rem;margin:26px 0 8px}
.legal p,.legal li{font-size:.98rem;color:var(--text)}
.legal ul{margin:0 0 1rem 1.2rem;display:grid;gap:6px}
.legal a{word-break:break-word}
.legal strong,.legal b{color:var(--ink)}
.legal .note{border-top:2px solid var(--blue);border-bottom:1px solid var(--hairline);padding:16px 0;font-size:.92rem;color:var(--ink-2);margin-bottom:30px;font-family:var(--font-s)}
.legal .box{border-top:1px solid var(--hairline);padding:16px 0;margin:16px 0}

/* ---------- Footer: Kolophon ---------- */
/* Hairline trennt die Konversionszone vom Kolophon — sonst laufen Finale und
   Footer als ein einziger dunkler Block über 1000px zusammen. */
.site-footer{background:var(--dark);color:var(--dark-text);padding:clamp(52px,7vw,84px) 0 30px;font-size:.94rem;
  border-top:1px solid rgba(255,255,255,.14)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(28px,4vw,56px);margin-bottom:48px}
@media(max-width:760px){.foot-grid{grid-template-columns:minmax(0,1fr);gap:32px}}
/* h3, nicht h5: nach der letzten Inhalts-h2 hätte h5 zwei Gliederungsstufen
   übersprungen. Die Optik ist hier ohnehin eigens gesetzt. */
.site-footer h3{color:#fff;font-size:.85rem;margin-bottom:16px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.site-footer a{color:var(--dark-text)}
.site-footer a:hover{color:#fff}
.site-footer .fnav{display:grid;gap:9px}
.site-footer .brandline{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.site-footer .brandline svg{height:38px}
.foot-claim{font-family:var(--font-s);line-height:1.7;max-width:340px;color:var(--dark-text)}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.84rem;color:#8da4b0}
.foot-bottom a{color:#8da4b0}
.foot-bottom a:hover{color:#fff}

/* ---------- Bewegung ----------
   Der Grundzustand ist sichtbar: fällt JS aus, fehlt nur das Setzen, nie der
   Inhalt. Die Fläche bewegt sich leise; zwei Momente sind gesetzt. */
.rv{transform:translateY(12px);transition:transform .6s var(--ease)}
.rv.in{transform:none}
.rv.d1{transition-delay:.07s}.rv.d2{transition-delay:.14s}.rv.d3{transition-delay:.21s}

/* Die zwei gesetzten Momente verbergen ihren Startzustand nur, wenn Skripte
   laufen — sonst wäre die Zahlenzeile ohne JavaScript komplett weggeschnitten. */
@media (scripting: enabled){
  /* Moment 1: die Zahlenzeile zieht auf und schärft sich aus dem Blur */
  .numbers.rv{clip-path:inset(0 100% 0 0);filter:blur(3px);
    transition:transform .6s var(--ease),clip-path 1.1s var(--ease),filter .8s var(--ease)}
  .numbers.rv.in{clip-path:inset(0);filter:none}
  /* Moment 2: das Finale hebt sich schwerer aus dem Dunkel */
  .finale h2.rv{transform:translateY(26px);filter:blur(4px);
    transition:transform .9s var(--ease),filter .9s var(--ease)}
  .finale h2.rv.in{transform:none;filter:none}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}