/* ==========================================================================
   TG-TP · „Industrial Cinema" — Site-weites Designsystem
   Konzept: SV1920-Transfer (Ein-Font/Ein-Hue) + Apple/DJI-Produktkapitel.
   Eine Hue-Familie (oklch 262°), Archivo Variable allein, Uppercase-Display,
   Shape-System: Buttons Pill · Media 18px · Chips 8px.
   Dials: VARIANCE 7 / MOTION 7 / DENSITY 3
   ========================================================================== */

@font-face{font-family:"Archivo";src:url("../fonts/Archivo-100-900-normal-latin.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:"Archivo";src:url("../fonts/Archivo-100-900-normal-latin-ext.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0}

:root{
  /* Eine Hue-Familie: Blau 262° (Logo #003E95) */
  --ink:#0C111C;              /* oklch(.17 .03 262) tiefes Marine-Schwarzblau */
  --chapter:#111A2E;          /* oklch(.21 .05 262) Kapitelgrund */
  --chapter-2:#16223C;        /* Karten auf Kapitelgrund */
  --panel:#003E95;            /* Markenpanel = Logo-Blau */
  --panel-deep:#002F73;
  --paper:#F6F8FC;            /* blaustichiges Off-White */
  --hero-bg:#F3F3FC;          /* Grundton des Studio-Renderings */
  --paper-2:#EBEFF6;          /* Studio-Kachelgrund */
  --line-dark:rgba(255,255,255,.14);
  --line-light:#D8DEE9;
  --tx-dark-1:#F4F6FB;
  --tx-dark-2:rgba(230,236,248,.78);
  --tx-light-1:#0C111C;
  --tx-light-2:#4A5568;
  --blue-bright:#5B7CFF;      /* Akzent auf Dunkel */
  --blue-soft:#8CA3FF;        /* große Typo/Labels auf Dunkel */
  --blue-ink:#003E95;         /* Akzent auf Hell */

  --font:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* Technische Daten laufen in derselben Familie: Archivo mit Tabellenziffern.
     Der technische Charakter kommt aus Versalien, Laufweite und Gewicht, nicht aus einer Coder-Mono. */
  --font-tech:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* Display-Skala */
  --fs-hero:clamp(2.05rem,6vw,5.2rem);
  --fs-h2:clamp(2rem,4.4vw,3.4rem);
  --fs-h3:clamp(1.25rem,2vw,1.6rem);
  --fs-num:clamp(2.6rem,4.5vw,4.05rem);
  --fs-ghost:clamp(9rem,22vw,20rem);
  --fs-body:1.0625rem;
  --fs-lead:clamp(1.0625rem,.95rem+.5vw,1.25rem);
  --fs-label:.75rem;

  /* Shape-System (dokumentiert): Buttons Pill · Media 18px · Chips 8px */
  --r-pill:999px;--r-media:18px;--r-chip:8px;

  --wrap:1280px;--gutter:clamp(1.25rem,4vw,2rem);
  --sec:clamp(5.5rem,11vw,9.5rem);
  --hdr-h:76px;   /* fixe Header-Hoehe; Basis fuer Chip-Nav-Sticky und Anker-Offsets */

  /* Emil: starke Kurven, exakte Dauern */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-inout:cubic-bezier(.77,0,.175,1);
  --dur-press:140ms;--dur-hover:200ms;--dur-reveal:550ms;

  --z-nav:100;--z-overlay:200;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);font-size:var(--fs-body);line-height:1.62;
  color:var(--tx-dark-1);background:var(--ink);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:clip;
}
main{overflow-x:clip}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit}
::selection{background:var(--blue-bright);color:#fff}
:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(91,124,255,.5)}
/* Touch: kein Doppeltap-Zoom/Tap-Delay auf Bedienelementen */
a,button,summary,input,select,textarea,label{touch-action:manipulation}
/* Anker-Ziele unter dem fixen Header freistellen; mit Chip-Nav zusaetzlich deren Hoehe */
[id]{scroll-margin-top:calc(var(--hdr-h) + 1rem)}
body:has(.chip-nav) main [id]{scroll-margin-top:calc(var(--hdr-h) + 68px)}
/* Fliesstext laeuft nie breiter als lesbar (Tablet-Zeilenlaengen) */
p{max-width:72ch}
.icon{width:1.1em;height:1.1em;fill:currentColor;flex:none;vertical-align:-.18em}
.skip-link{position:absolute;left:-9999px;top:0;z-index:calc(var(--z-nav) + 1);background:var(--ink);color:#fff;padding:.75rem 1.25rem}
.skip-link:focus{left:0}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.tech{font-family:var(--font-tech);font-variant-numeric:tabular-nums;letter-spacing:.015em;font-weight:500}

/* ---------- Typo-Bausteine ---------- */
.display{
  font-weight:780;font-stretch:98%;text-transform:uppercase;
  line-height:.94;letter-spacing:.012em;text-wrap:balance;hyphens:manual;
}
h1.display{font-size:var(--fs-hero)}
h2.display{font-size:var(--fs-h2)}
.label{
  font-size:var(--fs-label);font-weight:720;text-transform:uppercase;
  letter-spacing:.09em;line-height:1.3;
}
.label-blue{color:var(--blue-soft)}
.on-light .label-blue{color:var(--blue-ink)}
.lead{font-size:var(--fs-lead);line-height:1.6;max-width:56ch}
.on-dark-tx-2{color:var(--tx-dark-2)}

/* Sektionslabel mit Kavitäts-Marker */
.kicker{display:inline-flex;align-items:center;gap:.7rem}
.kicker::before{content:"";width:26px;height:11px;border:2.5px solid var(--blue-bright);border-radius:6px;flex:none}
.on-light .kicker::before{border-color:var(--blue-ink)}

/* ---------- Buttons: Pills (SV1920-Spez) ---------- */
.pill{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--font);font-size:.8125rem;font-weight:740;text-transform:uppercase;
  letter-spacing:.05em;line-height:1;white-space:nowrap;text-decoration:none;
  padding:1.06rem 1.7rem;border-radius:var(--r-pill);border:0;cursor:pointer;
  transition:background-color var(--dur-hover) var(--ease-out),color var(--dur-hover) var(--ease-out),transform var(--dur-press) var(--ease-out);
}
.pill:active{transform:scale(.97)}
.pill .icon{width:1rem;height:1rem;transition:transform var(--dur-hover) var(--ease-out)}
.pill-white{background:#fff;color:var(--ink)}
.pill-ghost{background:rgba(255,255,255,.13);color:#fff;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.pill-ink{background:var(--ink);color:#fff}
.pill-ghost-ink{background:rgba(12,17,28,.08);color:var(--ink)}
@media (hover:hover) and (pointer:fine){
  .pill-white:hover{background:#E7ECF7}
  .pill-ghost:hover{background:rgba(255,255,255,.22)}
  .pill-ink:hover{background:var(--panel-deep)}
  .pill-ghost-ink:hover{background:rgba(12,17,28,.15)}
  .pill:hover .icon{transform:translateX(3px)}
}

/* Pfeil-Textlink */
.arrow-link{display:inline-flex;align-items:center;gap:.5rem;font-size:.8125rem;font-weight:740;text-transform:uppercase;letter-spacing:.06em;text-decoration:none;padding-block:.72rem;margin-block:-.72rem}
.arrow-link .icon{transition:transform var(--dur-hover) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.arrow-link:hover .icon{transform:translateX(4px)}}

/* ---------- Header ---------- */
.site-header{
  position:fixed;inset-inline:0;top:0;z-index:var(--z-nav);
  transition:background-color 300ms var(--ease-out),box-shadow 300ms var(--ease-out);
}
.site-header.scrolled{background:rgba(12,17,28,.82);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);box-shadow:0 1px 0 rgba(255,255,255,.08)}

/* Header über der hellen Studio-Bühne: dunkle Schrift, kippt beim Scrollen zurück.
   Farbwechsel mit Transition, damit der Übergang nicht springt. */
.site-header.hdr-light .logo,
.site-header.hdr-light .logo-sub,
.site-header.hdr-light .nav-main a,
.site-header.hdr-light .lang-switch,
.site-header.hdr-light .lang-switch a,
.site-header.hdr-light .nav-toggle{transition:color var(--dur-hover) var(--ease-out),border-color var(--dur-hover) var(--ease-out)}
.site-header.hdr-light:not(.scrolled) .logo{color:var(--ink)}
.site-header.hdr-light:not(.scrolled) .logo-sub{color:var(--tx-light-2)}
.site-header.hdr-light:not(.scrolled) .nav-main a{color:#28324A}
.site-header.hdr-light:not(.scrolled) .lang-switch{color:#8A94A6}
.site-header.hdr-light:not(.scrolled) .lang-switch a{color:var(--tx-light-2)}
.site-header.hdr-light:not(.scrolled) .lang-switch [aria-current]{color:var(--ink)}
.site-header.hdr-light:not(.scrolled) .nav-toggle{color:var(--ink);border-color:rgba(12,17,28,.22)}
.site-header.hdr-light:not(.scrolled) .nav-main a[aria-current="page"]{color:var(--blue-ink);background:rgba(0,62,149,.09)}
@media (hover:hover) and (pointer:fine){
  .site-header.hdr-light:not(.scrolled) .nav-main a:hover{color:var(--ink);background:rgba(12,17,28,.06)}
}
/* CTA im Header: dunkel auf heller Bühne, weiß sobald der Header dunkel wird */
.pill-nav{background:var(--ink);color:#fff}
.site-header.scrolled .pill-nav{background:#fff;color:var(--ink)}
@media (hover:hover) and (pointer:fine){
  .pill-nav:hover{background:var(--panel-deep)}
  .site-header.scrolled .pill-nav:hover{background:#E7ECF7}
}
.nav-bar{display:flex;align-items:center;gap:1.25rem;height:76px}
.logo{display:flex;flex-direction:column;gap:2px;text-decoration:none;color:#fff;flex:none;padding-block:.35rem}
.logo-mark{display:flex;align-items:center;gap:6px;font-weight:800;font-size:1.3rem;letter-spacing:.01em;line-height:1}
.logo-mark svg{width:32px;height:14px;flex:none}
.logo-sub{font-size:.5625rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(230,236,248,.6);font-weight:600}
.nav-main{display:flex;align-items:center;gap:.35rem;margin-inline:auto}
.nav-main a{
  font-size:.8125rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:rgba(244,246,251,.85);text-decoration:none;padding:.6rem .8rem;border-radius:var(--r-chip);
  white-space:nowrap;
  transition:color var(--dur-hover) var(--ease-out),background-color var(--dur-hover) var(--ease-out);
}
@media (hover:hover) and (pointer:fine){.nav-main a:hover{color:#fff;background:rgba(255,255,255,.09)}}
/* Touch-Tablets mit sichtbarer Vollnavigation (z.B. iPad Pro quer): 44-px-Ziele */
@media (pointer:coarse){.nav-main a{padding-block:.9rem}}
.nav-main a[aria-current="page"]{color:#fff;background:rgba(255,255,255,.12)}
.nav-side{display:flex;align-items:center;gap:.9rem;flex:none;margin-left:auto}
.lang-switch{font-family:var(--font-tech);font-size:.75rem;font-weight:700;letter-spacing:.08em;display:flex;gap:.25rem;align-items:center;color:rgba(230,236,248,.45)}
.lang-switch a{color:rgba(230,236,248,.7);text-decoration:none;padding:.85rem .7rem}
.lang-switch a:hover{color:#fff}
.lang-switch [aria-current]{color:#fff;font-weight:600}
.nav-toggle{display:none;border:1px solid var(--line-dark);background:none;border-radius:var(--r-chip);padding:.72rem .72rem;cursor:pointer;color:#fff}
.nav-toggle .icon{width:1.3rem;height:1.3rem}
@media (max-width:1120px){
  :root{--hdr-h:64px}
  .nav-main{display:none}
  .nav-toggle{display:inline-flex}
  .nav-bar{height:64px}
}
/* EN-Labels sind laenger: Burger frueher */
@media (max-width:1420px){
  html[lang="en"] .nav-main{display:none}
  html[lang="en"] .nav-toggle{display:inline-flex}
}
@media (max-width:600px){.nav-side .pill{display:none}.nav-bar{gap:.75rem}}
.mobile-nav{display:none;position:fixed;inset:0;top:var(--hdr-h);z-index:var(--z-overlay);background:var(--ink);flex-direction:column;padding:1.25rem var(--gutter) 2rem;overflow-y:auto}
body.nav-open{overflow:hidden}
body.nav-open .mobile-nav{display:flex}
/* backdrop-filter (Scrolled-Zustand) macht den Header zum Containing Block fuer das
   fixe Menue darin - bei offenem Menue deshalb Filter aus, Grund ist ohnehin deckend */
body.nav-open .site-header{background:var(--ink);backdrop-filter:none;-webkit-backdrop-filter:none}
/* nur die Menuepunkte (direkte Kinder) - NICHT die CTA-Pills in .mobile-cta,
   sonst faerbt color:#fff die weisse Pill unsichtbar */
.mobile-nav > a{display:block;padding:1.05rem .25rem;font-size:1.05rem;font-weight:740;text-transform:uppercase;letter-spacing:.05em;color:#fff;text-decoration:none;border-bottom:1px solid var(--line-dark)}
/* aktueller Ort im mobilen Menue */
.mobile-nav > a[aria-current="page"]{color:var(--blue-soft);box-shadow:inset 4px 0 0 var(--blue-bright);padding-left:.9rem}
.mobile-nav .mobile-cta{margin-top:auto;padding-top:1.5rem;display:grid;gap:.8rem}

/* ---------- Hero (helle Studio-Bühne, Werkzeug rechts, Text links) ---------- */
.hero{position:relative;background:var(--hero-bg);overflow:clip}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg picture{display:block;width:100%;height:100%}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:0% 50%}
/* Textzone leicht aufhellen (Apple-Technik) + weicher Auslauf zur naechsten Sektion */
.hero-scrim{position:absolute;inset:0;z-index:1;background:
  linear-gradient(90deg,rgba(248,249,254,.78) 0%,rgba(248,249,254,.42) 34%,rgba(248,249,254,0) 58%),
  linear-gradient(180deg,rgba(248,249,254,0) 82%,var(--paper) 100%)}
.hero-content{position:relative;z-index:2;width:100%}
.hero-content .label{margin-bottom:1.4rem}
/* Width-Achse von Archivo: haelt lange Komposita wie "Verantwortung" in der Spalte */
.hero-content h1{color:var(--ink);font-size:clamp(2.05rem,5.45vw,4.8rem);font-stretch:80%;letter-spacing:.006em}
.hero-content .lead{margin-top:1.5rem;color:var(--tx-light-2);max-width:38ch}
.hero-ctas{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.3rem}

/* Desktop: Bild als Buehne, Text in der linken Haelfte */
@media (min-width:900px){
  .hero{min-height:clamp(620px,46vw,880px);display:flex;align-items:center}
  .hero-content{padding-block:6.5rem 3rem}
  .hero-content > *{max-width:min(56%,44rem)}
}
/* Mobil/Tablet: gestapelt, Werkzeug-Ausschnitt unter dem Text */
@media (max-width:899px){
  .hero{display:grid}
  .hero-bg{position:relative;inset:auto;order:2;background:var(--hero-bg)}
  .hero-bg picture{height:auto}
  .hero-bg img{height:auto;aspect-ratio:900/674;object-position:50% 50%}
  /* obere Bildkante gegen den Textbereich ausblenden (Blaubogen erzeugt sonst eine Naht) */
  .hero-bg::before{content:"";position:absolute;inset:0 0 auto;height:64px;z-index:1;pointer-events:none;
    background:linear-gradient(180deg,var(--hero-bg) 0%,rgba(243,243,252,0) 100%)}
  .hero-scrim{display:none}
  .hero-content{order:1;padding-block:7rem 2.5rem}
}

/* ---------- KPI-Band (hell, SV-Zahlen) ---------- */
.on-light{background:var(--paper);color:var(--tx-light-1)}
.on-light p{color:var(--tx-light-2)}
.sec{padding-block:var(--sec)}
/* Hero und KPI-Band teilen denselben hellen Grund: Abstand knapper, sonst klafft es */
.hero + .on-light.sec{padding-top:clamp(3rem,6vw,5rem)}
.stat-grid{display:grid;gap:3rem 2.5rem;grid-template-columns:repeat(2,1fr)}
@media (min-width:960px){.stat-grid{grid-template-columns:repeat(4,1fr)}}
.stat{border-top:2px solid var(--tx-light-1);padding-top:1.4rem}
.stat-num{
  font-size:var(--fs-num);font-weight:820;font-stretch:96%;line-height:.95;
  letter-spacing:-.015em;color:var(--blue-ink);font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.stat-num small{font-size:.42em;font-weight:700;letter-spacing:0;margin-left:.1em}
.stat-label{margin-top:.7rem;font-size:var(--fs-label);font-weight:720;text-transform:uppercase;letter-spacing:.08em;color:var(--tx-light-2)}
.stat-source{margin-top:3rem;font-family:var(--font-tech);font-size:.75rem;font-weight:500;letter-spacing:.02em;color:#8A94A6;font-variant-numeric:tabular-nums}

/* ---------- Leistungs-Kacheln (Bento 1+2, Apple/DJI) ---------- */
.tiles{display:grid;gap:1.25rem}
@media (min-width:900px){.tiles{grid-template-columns:1fr 1fr}.tile-wide{grid-column:1/-1}}
.tile{
  position:relative;display:flex;align-items:flex-end;min-height:420px;
  border-radius:var(--r-media);overflow:hidden;text-decoration:none;color:#fff;isolation:isolate;
}
.tile-wide{min-height:520px}
.tile img{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;filter:saturate(.94) contrast(1.06) brightness(.88);transition:transform 450ms var(--ease-out)}
.tile::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(200deg,rgba(12,17,28,0) 30%,rgba(12,17,28,.34) 62%,rgba(12,17,28,.86) 100%)}
.tile-body{position:relative;z-index:2;padding:clamp(1.5rem,3vw,2.4rem);display:grid;gap:.55rem;max-width:56ch}
.tile-body h3{font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:780;text-transform:uppercase;letter-spacing:.01em;line-height:1}
.tile-body p{font-size:.9875rem;color:var(--tx-dark-2);line-height:1.5}
.tile-body .arrow-link{margin-top:.5rem;color:var(--blue-soft)}
@media (hover:hover) and (pointer:fine){
  .tile:hover img{transform:scale(1.035)}
}
.tile:active{transform:scale(.995)}

/* ---------- Kapitel (Marine) mit Ghost-Zahl ---------- */
.chapter{position:relative;background:var(--chapter);overflow:clip}
.chapter .ghost{
  position:absolute;top:.5rem;left:0;right:0;z-index:0;pointer-events:none;
  font-size:var(--fs-ghost);font-weight:820;font-stretch:96%;line-height:.8;
  letter-spacing:-.02em;color:rgba(255,255,255,.055);white-space:nowrap;
  padding-inline:var(--gutter);user-select:none;
}
.chapter > .wrap{position:relative;z-index:1}
.chapter-head{display:grid;gap:1rem;max-width:62ch;padding-top:clamp(3rem,7vw,5.5rem)}
.chapter-head h2{color:#fff}
.chapter-head p{color:var(--tx-dark-2)}

/* Phasen: Horizontal-Pan (Desktop) / Stapel (Mobil) */
.phases-wrap{position:relative;padding-block:clamp(3.5rem,7vw,5rem)}
@media (min-width:960px){
  .phases-wrap{min-height:100dvh;display:flex;align-items:center;padding-block:0}
  .phases-wrap .chapter-head{padding-top:0;margin-bottom:2.4rem}
}
.phases-track{display:grid;gap:1rem;padding-block:clamp(1.6rem,3vw,2.4rem)}
@media (min-width:960px){
  .phases-track{display:flex;gap:1.25rem;width:max-content;padding-right:40vw}
  .phase-card{width:clamp(360px,32vw,460px)}
}
.phase-card{
  background:rgba(255,255,255,.05);border:1px solid var(--line-dark);
  border-radius:var(--r-media);padding:clamp(1.5rem,2.5vw,2.2rem);
  display:grid;gap:.8rem;align-content:start;flex:none;
}
.phase-card .phase-no{font-family:var(--font-tech);font-size:.72rem;font-weight:700;text-transform:uppercase;color:var(--blue-soft);letter-spacing:.11em;font-variant-numeric:tabular-nums}
.phase-card h3{font-size:1.35rem;font-weight:760;text-transform:uppercase;letter-spacing:.015em;color:#fff}
.phase-card p{font-size:.9375rem;color:var(--tx-dark-2);line-height:1.55}
.phase-chips{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.4rem}
.phase-chip{font-family:var(--font-tech);font-size:.6875rem;font-weight:640;letter-spacing:.045em;color:var(--blue-soft);border:1px solid rgba(91,124,255,.4);border-radius:var(--r-chip);padding:.34rem .6rem;white-space:nowrap}
.phase-chip.gate{background:var(--blue-bright);border-color:var(--blue-bright);color:#fff;font-weight:600}
.phases-progress{height:2px;background:var(--line-dark);border-radius:1px;overflow:hidden;margin-top:.5rem}
.phases-progress span{display:block;height:100%;width:100%;background:var(--blue-bright);transform:scaleX(0);transform-origin:left}
html.no-js .phases-progress span{transform:none}

/* Timeline (SV-Erfolge) */
.chapter-split{display:grid;gap:3rem;padding-block:clamp(2.5rem,5vw,4rem)}
@media (min-width:900px){.chapter-split{grid-template-columns:7fr 5fr;gap:4rem}}
.timeline{list-style:none;display:grid}
.timeline li{display:flex;align-items:baseline;gap:1.4rem;padding-block:1.05rem;border-top:1px solid var(--line-dark)}
.timeline li:last-child{border-bottom:1px solid var(--line-dark)}
.timeline .year{font-size:1.5rem;font-weight:800;color:var(--blue-soft);font-variant-numeric:tabular-nums;flex:none;min-width:4.2ch}
.timeline .what{font-size:.9375rem;color:var(--tx-dark-2)}

/* Vollbreiten-Kapitelfoto */
.chapter-photo{position:relative;margin-top:clamp(2.5rem,5vw,4rem);border-radius:var(--r-media) var(--r-media) 0 0;overflow:hidden}
.chapter-photo img{width:100%;height:clamp(320px,52vw,560px);object-fit:cover;filter:saturate(.94) contrast(1.06) brightness(.92);will-change:transform}
.chapter-photo figcaption{position:absolute;left:1.25rem;bottom:1rem;z-index:2;font-family:var(--font-tech);font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.09em;color:rgba(230,236,248,.8);text-shadow:0 1px 6px rgba(12,17,28,.8)}

/* ---------- Referenzteile (DJI-Kacheln) ---------- */
.parts{display:grid;gap:1.25rem}
@media (min-width:900px){.parts{grid-template-columns:repeat(3,1fr)}}
.part{
  background:var(--paper-2);border-radius:var(--r-media);overflow:hidden;
  display:grid;grid-template-rows:auto 1fr;
}
.part-img{display:grid;place-items:center;padding:2.4rem 2rem;min-height:250px}
.part-img img{max-height:190px;width:auto;filter:saturate(.94) contrast(1.05);transition:transform 450ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.part:hover .part-img img{transform:scale(1.05)}}
.part-body{padding:0 1.6rem 1.6rem;display:grid;gap:.35rem}
.part-body h3{font-size:1.05rem;font-weight:760;text-transform:uppercase;letter-spacing:.02em;color:var(--tx-light-1)}
.part-body .data{font-family:var(--font-tech);font-size:.78rem;font-weight:520;letter-spacing:.015em;color:var(--tx-light-2);font-variant-numeric:tabular-nums}

/* ---------- Markenblau-Panel (Einwände) ---------- */
.panel{background:var(--panel);color:#fff;border-radius:var(--r-media);padding:clamp(2.2rem,5vw,4rem);position:relative;overflow:hidden}
.panel h2{color:#fff;max-width:18ch}
.panel-grid{display:grid;gap:2.2rem 3rem;margin-top:2.6rem}
@media (min-width:820px){.panel-grid{grid-template-columns:1fr 1fr}}
.qa .q{font-size:1.02rem;font-weight:760;text-transform:none;color:#fff;letter-spacing:0}
.qa .a{margin-top:.5rem;font-size:.9375rem;line-height:1.55;color:rgba(255,255,255,.82)}
.panel .pill-white{margin-top:2.4rem}

/* ---------- Standards (hell, kompakt) ---------- */
.standards{display:grid;gap:2.2rem}
@media (min-width:820px){.standards{grid-template-columns:repeat(3,1fr);gap:3rem}}
.standard{border-top:2px solid var(--tx-light-1);padding-top:1.1rem}
.standard .label{color:var(--blue-ink)}
.standard p{margin-top:.6rem;font-size:.9375rem;line-height:1.55}

/* ---------- Karte ---------- */
.geo{display:grid;gap:3rem;align-items:center;padding-block:clamp(2.5rem,5vw,4rem)}
@media (min-width:900px){.geo{grid-template-columns:7fr 5fr}}
.geo svg{width:100%;height:auto}
.geo-facts{display:grid;gap:1.3rem}
.geo-facts div{border-left:2px solid var(--blue-bright);padding-left:1.1rem}
.geo-facts .tech{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.075em;color:var(--blue-soft)}
.geo-facts p{font-size:.9375rem;margin-top:.25rem;color:var(--tx-dark-2)}

/* ---------- Finale (Vollbild-Foto-CTA) ---------- */
.finale{position:relative;min-height:88dvh;display:flex;align-items:center;overflow:clip}
.finale-bg{position:absolute;inset:0;z-index:0}
.finale-bg img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.06) brightness(.62)}
.finale::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(12,17,28,.75) 0%,rgba(12,17,28,.35) 45%,rgba(12,17,28,.85) 100%)}
.finale .wrap{position:relative;z-index:2}
.finale h2{max-width:18ch;color:#fff}
.finale p{margin-top:1.4rem;max-width:52ch;color:var(--tx-dark-2)}
.finale .hero-ctas{margin-top:2.4rem}

/* ---------- Footer ---------- */
.footer{background:var(--ink);color:rgba(230,236,248,.72)}
.footer-grid{display:grid;gap:2.5rem;padding-block:clamp(3.5rem,6vw,5rem)}
@media (min-width:820px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1.1fr}}
.footer h2{font-size:var(--fs-label);font-weight:720;letter-spacing:.09em;text-transform:uppercase;color:rgba(230,236,248,.5);margin-bottom:1.1rem}
.footer ul{list-style:none;display:grid;gap:.6rem}
.footer a{color:rgba(230,236,248,.78);text-decoration:none;font-size:.9375rem;display:inline-block;padding-block:.62rem;margin-block:-.25rem}
.footer a:hover{color:#fff}
.footer ul{gap:.35rem}
.footer .addr{font-style:normal;font-size:.9375rem;line-height:1.7;margin-top:1rem}
.footer-legal{border-top:1px solid var(--line-dark);padding-block:1.5rem;display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;font-size:.8125rem}
.footer-legal ul{display:flex;gap:1.5rem;list-style:none}
.footer-legal a{font-size:.8125rem;display:inline-block;padding-block:.7rem}
.footer-legal .tech{margin-left:auto;font-size:.72rem;color:rgba(230,236,248,.45)}
@media (max-width:640px){.footer-legal .tech{margin-left:0}}

/* ---------- Reveals (No-JS-sicher, Emil: y + blur-Maskierung auf Bildern) ---------- */
html.js .rv{opacity:0;transform:translateY(22px)}
html.js .rv.in{opacity:1;transform:none;transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out)}
html.js .rv-img{opacity:0;transform:scale(1.02);filter:blur(6px)}
html.js .rv-img.in{opacity:1;transform:none;filter:blur(0);transition:opacity 650ms var(--ease-out),transform 900ms var(--ease-out),filter 650ms var(--ease-out)}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  html.js .rv,html.js .rv-img{opacity:1;transform:none;filter:none}
  .phases-progress span{transform:none !important}
  .tile img,.part-img img{transition:none}
}
@media (prefers-contrast:more){
  :root{--tx-dark-2:rgba(240,244,252,.92);--line-dark:rgba(255,255,255,.3)}
}
@media (prefers-reduced-transparency:reduce){
  .site-header.scrolled{background:var(--ink);backdrop-filter:none;-webkit-backdrop-filter:none}
  .pill-ghost{background:rgba(20,28,46,.92);backdrop-filter:none;-webkit-backdrop-filter:none}
}

@media print{.site-header,.footer{display:none}body{background:#fff;color:#000}}

/* ==========================================================================
   UNTERSEITEN-KOMPONENTEN (Rollout N1-N16)
   ========================================================================== */

/* ---------- N1 · Seitenkopf hell ---------- */
.page-head{position:relative;background:linear-gradient(180deg,var(--hero-bg) 0%,var(--paper) 100%);overflow:clip}
.page-head .wrap{position:relative;z-index:1;padding-block:clamp(8rem,16vh,11rem) clamp(2.6rem,5vw,4rem)}
.page-head h1{color:var(--ink);font-size:clamp(2rem,4.6vw,3.9rem);max-width:22ch}
.page-head .lead{margin-top:1.3rem;color:var(--tx-light-2);max-width:52ch}
.page-head .kicker{margin-bottom:1.2rem}
/* Blaubogen-Deko: Zitat des Hero-Renderings */
.page-head::before{content:"";position:absolute;top:-18rem;right:-14rem;width:38rem;height:38rem;border-radius:50%;
  border:5rem solid rgba(0,62,149,.055);pointer-events:none}
.page-head-slim .wrap{padding-block:clamp(7rem,14vh,9.5rem) clamp(2rem,4vw,3rem)}

/* ---------- N2 · Foto-Kopf dunkel ---------- */
.page-head-photo{position:relative;min-height:clamp(480px,58vh,640px);display:flex;align-items:flex-end;overflow:clip;background:var(--ink)}
.page-head-photo .ph-bg{position:absolute;inset:0;z-index:0}
.page-head-photo .ph-bg img{width:100%;height:100%;object-fit:cover;filter:saturate(.94) contrast(1.06) brightness(.85)}
.page-head-photo::after{content:"";position:absolute;inset:0;z-index:1;background:
  linear-gradient(180deg,rgba(12,17,28,.5) 0%,rgba(12,17,28,.12) 40%,rgba(12,17,28,.82) 100%)}
.page-head-photo .wrap{position:relative;z-index:2;width:100%;padding-block:0 clamp(2.6rem,5vw,4rem)}
.page-head-photo h1{color:#fff;font-size:clamp(2rem,4.6vw,3.9rem);max-width:20ch;text-shadow:0 2px 18px rgba(12,17,28,.55)}
.page-head-photo .lead{margin-top:1.2rem;color:var(--tx-dark-2);max-width:52ch;text-shadow:0 1px 10px rgba(12,17,28,.6)}
.page-head-photo .kicker{margin-bottom:1.2rem;color:#fff;text-shadow:0 1px 8px rgba(12,17,28,.7)}
.page-head-photo .kicker::before{border-color:var(--blue-bright)}

/* ---------- N3/N4 · Tabellen ---------- */
.tbl-note{font-family:var(--font-tech);font-size:.72rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#8A94A6;margin-bottom:.8rem;font-variant-numeric:tabular-nums}
.tbl-wrap{overflow-x:auto;border:1px solid var(--line-light);border-radius:var(--r-media);background:#fff}
/* Wisch-Hinweis (Element setzt cinema.js nur bei echtem Overflow auf Touch) */
.tbl-hint{display:flex;align-items:center;gap:.5rem;font-family:var(--font-tech);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--blue-ink);margin-bottom:.55rem}
.tbl-hint::before{content:"";width:20px;height:9px;border:2.5px solid currentColor;border-radius:5px;flex:none}
.chapter .tbl-hint{color:var(--blue-soft)}
.tbl-wrap.has-scroll:not(.at-end){mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 42px),transparent);-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 42px),transparent)}
.tbl-wrap.has-scroll:not(.at-start){mask-image:linear-gradient(90deg,transparent,#000 42px,#000);-webkit-mask-image:linear-gradient(90deg,transparent,#000 42px,#000)}
.tbl-wrap.has-scroll:not(.at-start):not(.at-end){mask-image:linear-gradient(90deg,transparent,#000 42px,#000 calc(100% - 42px),transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 42px,#000 calc(100% - 42px),transparent)}
.tbl-wrap table{width:100%;border-collapse:collapse;font-size:.9375rem}
.tbl-wrap th{font-family:var(--font-tech);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--tx-light-2);text-align:left;padding:.9rem 1.15rem;background:var(--paper-2);white-space:nowrap}
.tbl-wrap td{padding:.85rem 1.15rem;border-top:1px solid var(--line-light);vertical-align:top;color:var(--tx-light-1)}
.tbl-wrap td.num,.tbl-wrap th.num{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.tbl-wrap td.hl{background:rgba(0,62,149,.05)}
@media (hover:hover){.tbl-wrap tbody tr:hover td{background:var(--paper)}.tbl-wrap tbody tr:hover td.hl{background:rgba(0,62,149,.08)}}
/* dunkle Variante */
.chapter .tbl-wrap,.tbl-dark{background:var(--chapter-2);border-color:var(--line-dark)}
.chapter .tbl-wrap th{background:rgba(255,255,255,.05);color:var(--tx-dark-2)}
.chapter .tbl-wrap td{border-color:var(--line-dark);color:var(--tx-dark-1)}
.chapter .tbl-wrap td .sub{color:var(--tx-dark-2)}
@media (hover:hover){.chapter .tbl-wrap tbody tr:hover td{background:rgba(255,255,255,.04)}}
@media (max-width:760px){
  .tbl-sticky th:first-child,.tbl-sticky td:first-child{position:sticky;left:0;background:var(--paper-2);z-index:1;min-width:9.5rem}
  .chapter .tbl-sticky th:first-child,.chapter .tbl-sticky td:first-child{background:var(--chapter-2)}
}
/* Kavitaets-Marker in Matrixzellen */
.dot-full,.dot-hollow{display:inline-block;width:20px;height:9px;border-radius:5px}
.dot-full{background:var(--blue-bright)}
.dot-hollow{border:2px solid rgba(139,163,255,.55)}

/* ---------- N5 · FAQ-Akkordeon ---------- */
.faq{display:grid;gap:.7rem}
.faq details{background:var(--paper-2);border-radius:var(--r-media);overflow:hidden}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:1.25rem;cursor:pointer;list-style:none;padding:1.15rem 1.4rem;font-weight:660;font-size:1.02rem;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:20px;height:9px;border:2.5px solid var(--blue-ink);border-radius:5px;flex:none;transition:transform var(--dur-hover) var(--ease-out)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details[open] summary{color:var(--blue-ink)}
.faq .faq-a{padding:0 1.4rem 1.3rem;max-width:68ch;color:var(--tx-light-2);font-size:.9375rem;line-height:1.6}
.faq .faq-a p + p{margin-top:.7rem}
.faq-group{font-size:var(--fs-label);font-weight:720;text-transform:uppercase;letter-spacing:.09em;color:var(--blue-ink);margin:2.6rem 0 1rem}
.faq-group:first-of-type{margin-top:0}

/* ---------- N6 · Formular ---------- */
.form-grid{display:grid;gap:1.1rem}
@media (min-width:640px){.form-grid{grid-template-columns:1fr 1fr}.form-grid .full{grid-column:1/-1}}
.field label{display:block;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--tx-light-1);margin-bottom:.45rem}
.field label .req{color:var(--blue-ink)}
.field input,.field textarea{width:100%;font:inherit;font-size:1rem;color:var(--ink);background:#fff;border:1px solid var(--line-light);border-radius:var(--r-chip);padding:.8rem .95rem;transition:border-color var(--dur-hover) var(--ease-out),box-shadow var(--dur-hover) var(--ease-out)}
.field input::placeholder,.field textarea::placeholder{color:#9AA3B5}
.field input:focus-visible,.field textarea:focus-visible{border-color:var(--blue-ink);box-shadow:0 0 0 3px rgba(0,62,149,.18);outline:none}
.field .hint{font-size:.8125rem;color:var(--tx-light-2);margin-top:.4rem}
.field .error{display:none;font-size:.8125rem;font-weight:600;color:#B3261E;margin-top:.4rem}
.field.invalid input,.field.invalid textarea{border-color:#B3261E}
.field.invalid .error{display:block}
.form-note{font-size:.8125rem;color:var(--tx-light-2);max-width:60ch}
.form-note a{color:var(--blue-ink)}
.form-status{display:none;border:1px solid var(--blue-ink);color:var(--blue-ink);border-radius:var(--r-chip);padding:.8rem 1rem;font-size:.875rem;font-weight:600}
.form-status.show{display:block}

/* ---------- N7 · Video-Frame ---------- */
.video-frame{position:relative;border-radius:var(--r-media);overflow:hidden;background:var(--chapter-2)}
.video-frame video{width:100%;display:block}
.video-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(12,17,28,.38);border:0;cursor:pointer;transition:background-color var(--dur-hover) var(--ease-out)}
.video-play::after{content:"";position:absolute}
.video-play .play-pill{display:inline-flex;align-items:center;gap:.55rem;background:#fff;color:var(--ink);border-radius:var(--r-pill);padding:1rem 1.6rem;font-size:.8125rem;font-weight:740;text-transform:uppercase;letter-spacing:.05em;transition:transform var(--dur-press) var(--ease-out)}
.video-play:hover{background:rgba(12,17,28,.52)}
.video-play:active .play-pill{transform:scale(.97)}
.video-play.hidden{display:none}
.video-caption{font-family:var(--font-tech);font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.09em;color:var(--tx-dark-2);margin-top:.7rem}
.on-light .video-caption{color:var(--tx-light-2)}

/* ---------- N8 · Fakt-Kacheln ---------- */
.fact-grid{display:grid;gap:1.1rem}
@media (min-width:680px){.fact-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1020px){.fact-grid.cols-3{grid-template-columns:repeat(3,1fr)}.fact-grid.cols-4{grid-template-columns:repeat(4,1fr)}}
.fact{background:var(--paper-2);border-radius:var(--r-media);padding:1.5rem 1.6rem}
.fact-num{font-size:clamp(1.9rem,3vw,2.6rem);font-weight:780;font-stretch:96%;line-height:1;letter-spacing:-.01em;color:var(--blue-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.fact-num small{font-size:.45em;font-weight:700;margin-left:.08em}
.fact-name{margin-top:.55rem;font-size:.72rem;font-weight:720;text-transform:uppercase;letter-spacing:.08em;color:var(--tx-light-1)}
.fact p{margin-top:.5rem;font-size:.875rem;line-height:1.5;color:var(--tx-light-2)}
.chapter .fact{background:var(--chapter-2)}
.chapter .fact-num{color:var(--blue-soft)}
.chapter .fact-name{color:var(--tx-dark-1)}
.chapter .fact p{color:var(--tx-dark-2)}

/* ---------- N9 · QA hell ---------- */
.qa-grid{display:grid;gap:2rem 3rem}
@media (min-width:820px){.qa-grid{grid-template-columns:1fr 1fr}}
.qa-item .q{font-size:1.02rem;font-weight:680;color:var(--ink)}
.qa-item .q::before{content:"";display:block;width:22px;height:9px;border:2.5px solid var(--blue-ink);border-radius:5px;margin-bottom:.7rem}
.qa-item .a{margin-top:.5rem;font-size:.9375rem;line-height:1.55;color:var(--tx-light-2)}
.qa-item .fakt{display:block;margin-top:.55rem;font-family:var(--font-tech);font-size:.78rem;font-weight:620;letter-spacing:.02em;color:var(--blue-ink);font-variant-numeric:tabular-nums}

/* ---------- N10 · Statement ---------- */
.statement{font-size:clamp(1.6rem,3.2vw,2.6rem);line-height:1.22;font-weight:560;font-stretch:97%;letter-spacing:-.01em;max-width:30ch;color:var(--ink)}
.statement em{font-style:normal;color:var(--blue-ink)}
.chapter .statement{color:#fff}
.chapter .statement em{color:var(--blue-soft)}

/* ---------- N11 · Kavitaets-Liste ---------- */
.cav-list{list-style:none;display:grid;gap:.75rem;padding:0}
/* Marker absolut, Inhalt fliesst: strong + Text brechen als EIN Absatz um
   (Flex-Nebeneinander riss die Zeilen auf schmalen Viewports auseinander) */
.cav-list li{position:relative;padding-left:calc(18px + .8rem);max-width:58ch;font-size:.95rem;color:var(--tx-light-2)}
.cav-list li::before{content:"";position:absolute;left:0;top:.45em;width:18px;height:8px;border:2.5px solid var(--blue-ink);border-radius:4px}
.cav-list strong{color:var(--tx-light-1);font-weight:640}
.chapter .cav-list li{color:var(--tx-dark-2)}
.chapter .cav-list li::before{border-color:var(--blue-bright)}
.chapter .cav-list strong{color:var(--tx-dark-1)}
.panel .cav-list li::before{border-color:#fff}

/* ---------- N12 · Personen-Block ---------- */
.person{display:grid;gap:2.4rem;align-items:center}
@media (min-width:820px){.person{grid-template-columns:minmax(240px,340px) 1fr;gap:3.5rem}}
.person-photo{aspect-ratio:4/5;border-radius:var(--r-media);background:var(--chapter-2);border:1px dashed rgba(139,163,255,.4);display:flex;align-items:center;justify-content:center;text-align:center;padding:1rem}
.person-photo span{font-family:var(--font-tech);font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.09em;color:var(--tx-dark-2);line-height:1.8}
.person-name{font-size:clamp(1.7rem,3vw,2.4rem);font-weight:780;font-stretch:96%;text-transform:uppercase;letter-spacing:.012em;color:#fff}
.person-role{margin-top:.4rem;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--blue-soft)}
.person p{margin-top:1.1rem;color:var(--tx-dark-2);max-width:52ch}
.person .hero-ctas{margin-top:1.6rem}

/* ---------- N13 · Kapitel-Subnav (Chips) ---------- */
.chip-nav{position:sticky;top:var(--hdr-h);z-index:calc(var(--z-nav) - 2);background:rgba(246,248,252,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line-light);overflow-x:auto;scrollbar-width:none}
.chip-nav::-webkit-scrollbar{display:none}
/* Wisch-Affordance: Kanten-Fade nur solange dort weitere Chips liegen (Klassen setzt cinema.js) */
.chip-nav.has-scroll:not(.at-end){mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 34px),transparent);-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 34px),transparent)}
.chip-nav.has-scroll:not(.at-start){mask-image:linear-gradient(90deg,transparent,#000 34px,#000);-webkit-mask-image:linear-gradient(90deg,transparent,#000 34px,#000)}
.chip-nav.has-scroll:not(.at-start):not(.at-end){mask-image:linear-gradient(90deg,transparent,#000 34px,#000 calc(100% - 34px),transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 34px,#000 calc(100% - 34px),transparent)}
.chip-nav .wrap{display:flex;gap:.5rem;padding-block:.65rem}
.chip-nav a{flex:none;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--tx-light-2);text-decoration:none;padding:.8rem .95rem;border-radius:var(--r-pill);background:rgba(12,17,28,.05);transition:background-color var(--dur-hover) var(--ease-out),color var(--dur-hover) var(--ease-out)}
.chip-nav a[aria-current="true"]{background:var(--ink);color:#fff}
@media (hover:hover){.chip-nav a:hover{background:rgba(12,17,28,.12);color:var(--ink)}}
@media (prefers-reduced-transparency:reduce){.chip-nav{background:var(--paper)}}

/* ---------- N14 · Prosa schmal ---------- */
.prose{max-width:680px}
.prose h2{font-size:1.1rem;font-weight:720;margin-top:2.2rem;color:var(--ink)}
.prose h2:first-child{margin-top:0}
.prose p{margin-top:.6rem;font-size:.95rem;line-height:1.65;color:var(--tx-light-2)}
.prose a{color:var(--blue-ink)}
.prose address{font-style:normal}

/* ---------- N15 · Panel-Finale ---------- */
.panel-cta{background:var(--panel);color:#fff;border-radius:var(--r-media);padding:clamp(2.2rem,5vw,3.8rem);display:grid;gap:1.4rem}
@media (min-width:900px){.panel-cta{grid-template-columns:1.5fr 1fr;align-items:center;gap:3rem}}
.panel-cta h2{color:#fff;max-width:16ch}
.panel-cta p{color:rgba(255,255,255,.82);max-width:46ch;margin-top:.8rem}
.panel-cta .hero-ctas{margin:0;justify-content:flex-start}
@media (min-width:900px){.panel-cta .hero-ctas{justify-content:flex-end}}
.panel-cta .pill-ghost{background:rgba(255,255,255,.14)}

/* ---------- N16 · Galerie (Rundgang) ---------- */
.gallery{display:grid;gap:1.1rem}
@media (min-width:760px){.gallery{grid-template-columns:1fr 1fr}.gallery .g-wide{grid-column:1/-1}}
/* Rundung clippt am IMG, nicht am figure: Captions unterhalb verlieren sonst
   in der Eckrundung den ersten Buchstaben der letzten Zeile */
.gallery figure{position:relative;margin:0}
.gallery figure::after{border-radius:var(--r-media)}
.gallery img{border-radius:var(--r-media)}
.gallery img{width:100%;aspect-ratio:3/2;object-fit:cover;filter:saturate(.94) contrast(1.06) brightness(.92);transition:transform 450ms var(--ease-out)}
.gallery .g-wide img{aspect-ratio:21/9}
.gallery figcaption{position:absolute;left:1.1rem;bottom:.9rem;z-index:2;font-family:var(--font-tech);font-size:.72rem;font-weight:650;text-transform:uppercase;letter-spacing:.09em;color:rgba(240,244,252,.9);text-shadow:0 1px 8px rgba(12,17,28,.9)}
.gallery figure::after{content:"";position:absolute;inset:auto 0 0;height:45%;background:linear-gradient(180deg,rgba(12,17,28,0),rgba(12,17,28,.62))}
@media (hover:hover) and (pointer:fine){.gallery figure:hover img{transform:scale(1.03)}}

/* ---------- Kachel-Raster dunkel (Werkzeugarten, Kommunikation) ---------- */
.dark-cards{display:grid;gap:1.1rem}
@media (min-width:680px){.dark-cards{grid-template-columns:1fr 1fr}}
@media (min-width:1020px){.dark-cards.cols-3{grid-template-columns:repeat(3,1fr)}}
.dark-card{background:var(--chapter-2);border:1px solid var(--line-dark);border-radius:var(--r-media);padding:1.5rem 1.6rem;color:var(--tx-dark-2)}
.dark-card h3{font-size:1.02rem;font-weight:740;text-transform:uppercase;letter-spacing:.02em;color:#fff}
.dark-card p{margin-top:.5rem;font-size:.9rem;line-height:1.55;color:var(--tx-dark-2)}
.dark-card .tag{font-family:var(--font-tech);font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--blue-soft);display:block;margin-bottom:.5rem}

/* Helle Karten-Kacheln (Dokumente, Haltung) */
.light-cards{display:grid;gap:1.1rem}
@media (min-width:680px){.light-cards{grid-template-columns:1fr 1fr}}
.light-card{background:var(--paper-2);border-radius:var(--r-media);padding:1.5rem 1.6rem}
.light-card h3{font-size:1.02rem;font-weight:720;color:var(--ink)}
.light-card p{margin-top:.5rem;font-size:.9rem;line-height:1.55;color:var(--tx-light-2)}
.light-card .tag{font-family:var(--font-tech);font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--blue-ink);display:block;margin-bottom:.5rem}

/* ---------- Split (Text + Bild) ---------- */
.split{display:grid;gap:clamp(2rem,4.5vw,3.5rem);align-items:center}
@media (min-width:900px){
  .split{grid-template-columns:1fr 1fr}
  .split.split-media-left>.split-media{order:-1}
}
.split-media{border-radius:var(--r-media)}
.split-media img{width:100%;filter:saturate(.94) contrast(1.06);border-radius:var(--r-media)}
.split-body h2{margin-bottom:.4rem}
.split-body>p{margin-top:.9rem;color:var(--tx-light-2)}
.chapter .split-body>p{color:var(--tx-dark-2)}
.split-body .cav-list{margin-top:1.4rem}
.split-body .arrow-link{margin-top:1.5rem;color:var(--blue-ink)}
.chapter .split-body .arrow-link{color:var(--blue-soft)}
.media-caption{font-family:var(--font-tech);font-size:.72rem;font-weight:650;text-transform:uppercase;letter-spacing:.09em;color:var(--tx-light-2);margin-top:.65rem}
.chapter .media-caption{color:var(--tx-dark-2)}

/* ---------- Sektionskopf-Baustein ---------- */
.sec-head{max-width:60ch;margin-bottom:clamp(2rem,4.5vw,3.2rem)}
.sec-head h2{color:inherit}
.sec-head p{margin-top:1rem;color:var(--tx-light-2)}
.chapter .sec-head p{color:var(--tx-dark-2)}
.src-line{font-family:var(--font-tech);font-size:.72rem;font-weight:520;letter-spacing:.02em;color:#8A94A6;margin-top:1.6rem;font-variant-numeric:tabular-nums}
.chapter .src-line{color:var(--tx-dark-2)}

/* ==========================================================================
   MOBILE/TABLET-PASS (ui-ux-pro-max-Audit 30.07.2026, MOBILE-PLAN.md)
   ========================================================================== */

/* Lange Komposita brechen statt zu clippen; greift via lang="de"/"en".
   Gilt auf allen Breiten - Desktop-Spalten sind breit genug, dort trennt praktisch nie.
   text-wrap:pretty statt balance: balance unterdrueckt in Chromium die Silbentrennung. */
.display,.page-head h1,.page-head-photo h1,.panel h2{hyphens:auto;overflow-wrap:break-word;text-wrap:pretty}
/* Typo-Floors kleiner Viewports: Headline passt in die Spalte, Einheit bleibt an der Zahl */
@media (max-width:480px){
  :root{
    --fs-hero:clamp(1.9rem,8.6vw,2.4rem);
    --fs-h2:clamp(1.62rem,7.6vw,2.05rem);
    --fs-num:clamp(1.7rem,9.8vw,2.3rem);
    --fs-ghost:clamp(5.5rem,24vw,8rem);
  }
  .page-head h1,.page-head-photo h1{font-size:clamp(1.9rem,8.6vw,2.4rem)}
  .stat-num{font-stretch:86%}
  .stat-num small{font-size:.5em}
}
/* Ghost-Anschnitt mobil kontrolliert: kleiner, kein Mid-Glyph-Schnitt */
@media (max-width:760px){
  .chapter .ghost{letter-spacing:0}
}

/* Fliesstext-Minimum 16 px auf Touch-Weiten (Labels/Kicker/Datenzellen bewusst ausgenommen) */
@media (max-width:899px){
  .prose p,.qa-item .a,.qa .a,.chapter-head p,.chapter p,.split-body>p,.faq .faq-a,
  .phase-card>p,.finale p,.panel p,.person p,.page-head .lead,
  .page-head-photo .lead,.hero-content .lead,.tile-body p{font-size:1rem}
  .dark-card p,.light-card p,.fact p{font-size:.9375rem}
  .cav-list li{font-size:1rem}
}