/* ==========================================================================
   LEBOWSKI FENSTER & TÜREN — VISUELLES SYSTEM
   00 Schrift · 01 Tokens · 02 Basis · 03 Layout · 04 Typografie
   05 CTA-Typen · 06 Kopf & Navigation · 07 Bandtypen · 08 Module
   09 Medien · 10 Formular · 11 Fuß & Kontaktleiste · 12 Bewegung · 13 Utilities
   Kein externer Webfont, keine externe Bibliothek, keine Netzabhängigkeit.
   ========================================================================== */

/* ── 00 SCHRIFT ───────────────────────────────────────────────────────────
   Geist Sans ist die gewünschte Hausschrift. Sobald lokale Dateien unter
   assets/fonts/ liegen, die beiden Blöcke einkommentieren. Bis dahin trägt
   der System-Stack, der bewusst mit einer neutralen Grotesk beginnt.

@font-face{ font-family:"Geist"; font-weight:300 700; font-display:swap;
            src:url("../fonts/Geist-Variable.woff2") format("woff2-variations"); }
@font-face{ font-family:"Geist Mono"; font-weight:400 500; font-display:swap;
            src:url("../fonts/GeistMono-Variable.woff2") format("woff2-variations"); }
*/

/* ── 01 TOKENS ────────────────────────────────────────────────────────── */
:root{
  /* Marke, verbindlich */
  --navy:#203250;
  --navy-deep:#16233A;
  --accent:#2D738B;
  --accent-hover:#23596C;
  --mint:#EDF4F5;
  --body:#4E5259;
  --white:#FFFFFF;
  --line:#D6E2E6;
  --steel:#688C97;

  /* Abgeleitet, ohne neue Markenfarbe */
  --navy-800:#1B2B46;
  --t1:#16233A; --t2:#1B2B46; --t3:#203250; --t4:#243A5C;
  --tile:rgba(255,255,255,.045);
  --tile-hi:rgba(255,255,255,.075);
  --accent-lift:#8FC2D4;      /* Akzent auf dunklem Grund, AA-fest */
  --muted:#5B6368;
  --line-soft:#E6EEF0;
  --ok:#1E6B4F;
  --warn:#8A5A12;
  --err:#B3261E;

  /* Kontextfarben, von Bändern gesetzt */
  --fg:var(--body);
  --fg-max:var(--navy);
  --fg-dim:var(--muted);
  --rule:var(--line);
  --focus:var(--navy);
  --focus-halo:var(--white);

  /* Schrift */
  --sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,
         "Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,"Cascadia Mono",
         "Liberation Mono",Consolas,monospace;

  --fs-mega:clamp(2.7rem,1.5rem + 5vw,5.6rem);
  --fs-h1:clamp(2.35rem,1.45rem + 3.5vw,4.6rem);
  --fs-h2:clamp(1.85rem,1.3rem + 2.3vw,3.3rem);
  --fs-h3:clamp(1.15rem,1.04rem + 0.48vw,1.55rem);
  --fs-h4:clamp(1.0625rem,1rem + 0.24vw,1.1875rem);
  --fs-lead:clamp(1.15rem,1.03rem + 0.52vw,1.5rem);
  --fs-base:clamp(1.0625rem,1rem + 0.3vw,1.1875rem);
  --fs-sm:clamp(0.9375rem,0.9rem + 0.16vw,1.0313rem);
  --fs-xs:0.875rem;
  --fs-mono:0.8125rem;

  /* Raster */
  --sp-1:.25rem; --sp-2:.5rem;  --sp-3:.75rem; --sp-4:1rem;   --sp-5:1.5rem;
  --sp-6:2rem;   --sp-7:2.75rem;--sp-8:4rem;   --sp-9:5.5rem; --sp-10:7.5rem;
  --band:clamp(4.5rem,3rem + 6.2vw,9rem);
  --band-lg:clamp(6rem,3.4rem + 9vw,12rem);
  --pad:clamp(1.25rem,.35rem + 3.8vw,4.25rem);
  --shell:1440px;
  --measure:62ch;

  --r-0:0px; --r-1:0px; --r-2:0px; --r-3:0px;
  --hair:1px;
  --hd:60px;                    /* Kopfhöhe */
  --ez:cubic-bezier(.22,.61,.36,1);
  --ez-out:cubic-bezier(.16,1,.3,1);
}
@media (min-width:1180px){ :root{ --hd:76px; } }

/* ── 02 BASIS ─────────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%; color-scheme:light;
  scroll-behavior:smooth; scroll-padding-top:calc(var(--hd) + 1.5rem);
}
body{
  margin:0; font-family:var(--sans); font-size:var(--fs-base); line-height:1.62;
  color:var(--body); background:var(--white); overflow-x:clip;
  letter-spacing:-.003em;
  -webkit-font-smoothing:antialiased; font-synthesis-weight:none;
}
h1,h2,h3,h4,p,figure,ul,ol,dl,dd,table{ margin:0; }
ul,ol{ padding:0; list-style:none; }
img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; }
table{ border-collapse:collapse; width:100%; }
::selection{ background:var(--navy); color:#fff; }

:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--focus); outline-offset:2px;
  box-shadow:0 0 0 6px var(--focus-halo); border-radius:var(--r-1);
}
:focus:not(:focus-visible){ outline:none; }

/* ── Berührung ────────────────────────────────────────────────────────────

   Zwei Eigenschaften, die nur auf Touchgeräten wirken und dort beide einen
   messbaren Unterschied machen.

   `touch-action:manipulation` nimmt dem Browser die Wartezeit, in der er
   prüft, ob aus dem Antippen noch ein Doppeltippen wird. Auf iOS sind das
   rund 300 ms zwischen Fingerdruck und Reaktion — lange genug, dass der
   Besucher ein zweites Mal drückt, weil er meint, es habe nicht geklappt.

   Bewusst NICHT auf `body` oder `html`. Dort würde die Eigenschaft das
   Doppeltippen zum Vergrößern für die ganze Seite abschalten, und das ist
   dieselbe Barriere wie `user-scalable=no` — nur an einer Stelle, an der
   sie niemand vermutet. Sie steht deshalb ausschließlich an Elementen, bei
   denen ein Doppeltipp nie gemeint sein kann: Knöpfe, Verweise mit
   Knopfcharakter, Formularfelder, Aufklapper.

   Nicht an Elementen, die selbst gescrollt oder gezoomt werden — die
   waagerechten Listen (`.scroller`, `.matrix`, `.ledger`) tragen
   `overflow-x:auto` und behalten ihr volles Berührungsverhalten.

   `-webkit-tap-highlight-color` ist auf iOS standardmäßig ein
   halbtransparentes Schwarz. Es hat nichts mit dem Farbsystem zu tun und
   sieht auf den marineblauen Flächen wie ein Darstellungsfehler aus. Der
   Wert wird deshalb gesetzt, nicht abgeschaltet: derselbe Akzentton wie die
   Fokusanzeige, sichtbar hell wie dunkel. `transparent` wäre die falsche
   Antwort — dann fehlt die Rückmeldung ganz. */
:where(a[class*="cta"],button,summary,input,select,textarea,label.choice,.pline,.line,.dock a,.mainnav a,.nojs-nav a,.skip){
  touch-action:manipulation;
}
:where(a,button,summary,label.choice,[role="button"]){
  -webkit-tap-highlight-color:rgba(45,115,139,.24);
}

.skip{
  position:fixed; top:.5rem; left:.5rem; z-index:300;
  transform:translateY(-160%); background:#fff; color:var(--navy);
  padding:.8rem 1.2rem; font-weight:600; border:2px solid var(--navy);
  transition:transform .16s var(--ez);
}
.skip:focus{ transform:none; }

/* ── 03 LAYOUT ────────────────────────────────────────────────────────── */
.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--pad); }
.shell--tight{ max-width:940px; }
.band{ padding-block:var(--band); position:relative; }
.band--lg{ padding-block:var(--band-lg); }
.sf-deep.band--lg:first-of-type,.sf-navy.band--lg:first-of-type{
  padding-top:clamp(3rem,1.6rem + 5vw,6rem); }
.band--flush-top{ padding-top:0; }

/* Flächen. Nie zwei dunkle hintereinander. */
.sf-paper{ background:var(--white); }
.sf-mint{ background:var(--mint); }
.sf-navy{
  background:var(--navy); color:rgba(255,255,255,.76);
  --fg:rgba(255,255,255,.76); --fg-max:#fff; --fg-dim:rgba(255,255,255,.66);
  --rule:rgba(255,255,255,.17); --focus:#fff; --focus-halo:rgba(22,35,58,.92);
}
.sf-slate{
  background:var(--t2); color:rgba(255,255,255,.78);
  --fg:rgba(255,255,255,.78); --fg-max:#fff; --fg-dim:rgba(255,255,255,.62);
  --rule:rgba(255,255,255,.14); --focus:#fff; --focus-halo:rgba(22,35,58,.92);
}
.sf-deep{
  background:var(--navy-deep); color:rgba(255,255,255,.76);
  --fg:rgba(255,255,255,.76); --fg-max:#fff; --fg-dim:rgba(255,255,255,.66);
  --rule:rgba(255,255,255,.17); --focus:#fff; --focus-halo:rgba(22,35,58,.92);
}
.sf-mint + .sf-mint, .sf-paper + .sf-paper{ padding-top:0; }
.sf-deep + .sf-deep, .sf-navy + .sf-navy, .sf-slate + .sf-slate{ padding-top:0; }

/* ── 04 TYPOGRAFIE ────────────────────────────────────────────────────── */
.kicker{
  display:flex; align-items:center; gap:.75rem;
  font-family:var(--mono); font-size:var(--fs-mono); letter-spacing:.18em;
  text-transform:uppercase; color:var(--fg-dim); margin-bottom:var(--sp-5);
}
.kicker::before{ content:""; width:1.75rem; height:2px; background:var(--accent); flex:none; }
.sf-navy .kicker::before,.sf-deep .kicker::before{ background:var(--accent-lift); }

.t-mega{ font-size:var(--fs-mega); font-weight:600; line-height:.99;
         letter-spacing:-.035em; color:var(--fg-max); text-wrap:balance; }
.t-h1{ font-size:var(--fs-h1); font-weight:600; line-height:1.0;
       letter-spacing:-.034em; color:var(--fg-max); text-wrap:balance; }
.t-h2{ font-size:var(--fs-h2); font-weight:600; line-height:1.05;
       letter-spacing:-.028em; color:var(--fg-max); text-wrap:balance; }
.t-h3{ font-size:var(--fs-h3); font-weight:600; line-height:1.28;
       letter-spacing:-.012em; color:var(--fg-max); }
.t-h4{ font-size:var(--fs-h4); font-weight:600; line-height:1.4; color:var(--fg-max); }
.lead{ font-size:var(--fs-lead); line-height:1.5; color:var(--fg); max-width:54ch; text-wrap:pretty; }
.copy{ color:var(--fg); max-width:var(--measure); line-height:1.66; text-wrap:pretty; }
.copy + .copy{ margin-top:var(--sp-4); }
.copy strong{ color:var(--fg-max); font-weight:600; }
.note{ font-size:var(--fs-sm); color:var(--fg-dim); max-width:60ch; }
.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:.01em; }

/* Spaltentitel: Versalien mit feiner Linie, aus der Referenz abgeleitet */
.col-title{
  font-family:var(--mono); font-size:var(--fs-mono); letter-spacing:.16em;
  text-transform:uppercase; color:var(--fg-max); font-weight:500;
  padding-bottom:.6rem; border-bottom:2px solid var(--rule); margin-bottom:var(--sp-4);
}

/* ── 05 CTA-TYPEN ─────────────────────────────────────────────────────── */
/* 1 Anfrage: gefüllt */
.cta-request{
  display:inline-flex; align-items:center; gap:.7rem; min-height:54px;
  padding:.85rem 1.6rem; background:var(--accent); color:#fff;
  font-weight:600; letter-spacing:.005em; text-decoration:none;
  border:2px solid var(--accent); border-radius:var(--r-1);
  transition:background-color .18s var(--ez),border-color .18s var(--ez),transform .1s var(--ez);
}
.cta-request:hover{ background:var(--accent-hover); border-color:var(--accent-hover); }
.cta-request:active{ transform:translateY(1px); }
.sf-navy .cta-request,.sf-deep .cta-request{ background:#fff; color:var(--navy); border-color:#fff; }
.sf-navy .cta-request:hover,.sf-deep .cta-request:hover{ background:var(--mint); border-color:var(--mint); }

/* 2 Anruf: Umriss, Nummer in Mono */
.cta-call{
  display:inline-flex; align-items:center; gap:.7rem; min-height:54px;
  padding:.7rem 1.25rem; text-decoration:none; color:var(--fg-max);
  border:var(--hair) solid var(--steel); border-radius:var(--r-1);
  font-weight:500; transition:background-color .18s var(--ez),border-color .18s var(--ez);
}
.cta-call .num{ font-family:var(--mono); font-size:.95em; letter-spacing:.02em; }
.cta-call:hover{ background:var(--mint); border-color:var(--navy); }
.sf-navy .cta-call,.sf-deep .cta-call{ color:#fff; border-color:rgba(255,255,255,.42); }
.sf-navy .cta-call:hover,.sf-deep .cta-call:hover{ background:rgba(255,255,255,.1); border-color:#fff; }

/* 3 Vertiefung: flache Fläche mit Pfeil */
.cta-depth{
  display:inline-flex; align-items:center; justify-content:space-between; gap:1.5rem;
  min-height:56px; padding:.9rem 1.15rem; width:100%; max-width:23rem;
  background:var(--mint); color:var(--navy); text-decoration:none;
  border-left:3px solid var(--accent); font-weight:600; font-size:var(--fs-sm);
  transition:background-color .18s var(--ez),padding-left .18s var(--ez);
}
/* Bis Phase 20F verschob der Hover `padding-left` von 1,15 auf 1,5 rem.
   Damit rückte die Beschriftung selbst zur Seite: Der Text unter dem
   Zeiger bewegt sich, während man ihn liest. Jetzt bewegt sich nur der
   Pfeil — die Richtung wird angezeigt, ohne den Inhalt zu verschieben. */
.cta-depth:hover{ background:#E2EEF1; }
.cta-depth::after{ content:"→"; font-family:var(--mono); color:var(--accent); flex:none;
                   transition:transform .18s var(--ez-out); }
.cta-depth:hover::after,.cta-depth:focus-visible::after{ transform:translateX(.28rem); }
.cta-text::after{ transition:transform .18s var(--ez-out); }
.cta-text:hover::after,.cta-text:focus-visible::after{ transform:translateX(.22rem); }
.sf-navy .cta-depth,.sf-deep .cta-depth{
  background:rgba(255,255,255,.07); color:#fff; border-left-color:var(--accent-lift);
}
.sf-navy .cta-depth:hover,.sf-deep .cta-depth:hover{ background:rgba(255,255,255,.13); }
.sf-navy .cta-depth::after,.sf-deep .cta-depth::after{ color:var(--accent-lift); }

/* 4 Richtungslink im Fließtext */
.cta-text{
  display:inline-flex; align-items:baseline; gap:.4rem; color:var(--accent);
  font-weight:600; text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px; background-position:0 100%; background-repeat:no-repeat;
  transition:background-size .25s var(--ez-out);
}
.cta-text::after{ content:"→"; font-family:var(--mono); font-size:.9em; }
.cta-text:hover{ background-size:100% 1px; }
.sf-navy .cta-text,.sf-deep .cta-text{ color:var(--accent-lift); }

/* 5 Sprungmarke in langen Seiten */
.cta-jump{
  display:inline-flex; align-items:center; min-height:44px; padding:.35rem .8rem;
  font-size:var(--fs-sm); color:var(--fg); text-decoration:none;
  border:var(--hair) solid var(--rule); border-radius:999px; background:transparent;
  transition:border-color .18s var(--ez),color .18s var(--ez),background-color .18s var(--ez);
}
.cta-jump:hover,.cta-jump[aria-current="true"]{ border-color:var(--navy); color:var(--navy); background:var(--mint); }

.cta-row{ display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-top:var(--sp-6); }
@media (max-width:479px){ .cta-row .cta-request,.cta-row .cta-call{ width:100%; justify-content:center; } }

/* ── 06 KOPF & NAVIGATION ─────────────────────────────────────────────── */
.head{ position:sticky; top:0; z-index:120; background:var(--navy-deep); color:#fff;
       --focus:#fff; --focus-halo:rgba(22,35,58,.92); }
.head__util{ display:none; border-bottom:var(--hair) solid rgba(255,255,255,.1); }
@media (min-width:1180px){
  .head__util{ display:block; }
  .head__util .shell{ display:flex; align-items:center; gap:1.5rem; min-height:38px;
                      font-size:var(--fs-xs); color:rgba(255,255,255,.66); min-height:44px; }
  .head__util a{ display:inline-flex; align-items:center; min-height:44px; }
  .head__util .sep{ margin-left:auto; }
  .head__util a{ text-decoration:none; color:rgba(255,255,255,.78); }
  .head__util a:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
}
.head__main .shell{ display:flex; align-items:center; gap:var(--sp-4); min-height:var(--hd); }

/* Originale Wort-/Bildmarke. Sie wird nicht eingefärbt, nicht invertiert und
   nicht nachgesetzt. Auf dunklem Grund steht sie auf einer ruhigen Mintfläche,
   weil die Originalfarben dort sonst nicht tragen.
   Die Höhen sind gemessen, nicht geschätzt: In der Marke nimmt „Fenster & Türen"
   11,1 Prozent der Gesamthöhe ein. Erst ab etwa 46 px Markenhöhe erreicht diese
   Zeile rund 5 px und bleibt lesbar. Wo die Kopfzeile das nicht hergibt, steht
   die originale Bildmarke: derselbe Datenbestand, anderer Ausschnitt. */
/* min-height sichert das Tap-Ziel: die Plakette allein waere bei 26 px
   Markenhoehe nur 36 px hoch und damit unter der Mindestgroesse. */
.logo{ display:inline-flex; align-items:center; justify-content:center;
       text-decoration:none; margin-right:auto; flex:none; min-height:44px;
       background:var(--mint); padding:.3rem .5rem; }
.logo > img{ display:block; flex:none; width:auto; height:26px; }
.logo > .logo__full{ display:none; }
.logo:hover,.logo:focus-visible{ background:#fff; }
@media (min-width:640px){
  .logo{ padding:.35rem .55rem; }
  .logo > .logo__mark{ display:none; }
  .logo > .logo__full{ display:block; height:32px; }
}
@media (min-width:1180px){
  .logo{ padding:.45rem .7rem; }
  .logo > .logo__full{ height:48px; }
}
/* Fuß: dort ist Raum, deshalb die vollständige Marke in klar lesbarer Größe */
.logo--foot{ margin-right:0; margin-bottom:1.15rem; padding:.85rem 1.1rem; }
.logo--foot > img{ display:block; height:62px; }

.mainnav{ display:none; }
@media (min-width:1180px){
  .mainnav{ display:flex; align-items:stretch; }
  .mainnav > li{ display:flex; }
  .mainnav a,.mainnav button{
    display:inline-flex; align-items:center; gap:.4rem; padding:0 .7rem; min-height:var(--hd);
    white-space:nowrap;
    font-size:var(--fs-sm); font-weight:500; color:rgba(255,255,255,.8);
    text-decoration:none; cursor:pointer; position:relative; white-space:nowrap;
    transition:color .18s var(--ez);
  }
  .mainnav a:hover,.mainnav button:hover,
  .mainnav a[aria-current="page"],.mainnav [aria-expanded="true"]{ color:#fff; }
  .mainnav a[aria-current="page"]::after,.mainnav [aria-expanded="true"]::after{
    content:""; position:absolute; inset:auto 0 0; height:2px; background:var(--accent-lift);
  }
  .mainnav .chev{ width:.5rem; height:.5rem; border-right:1.5px solid currentColor;
                  border-bottom:1.5px solid currentColor; transform:rotate(45deg) translateY(-2px);
                  transition:transform .2s var(--ez); }
  .mainnav [aria-expanded="true"] .chev{ transform:rotate(-135deg) translateY(-2px); }
}
.head__cta{ display:none; }
@media (min-width:1180px){
  .head__cta{ display:inline-flex; align-items:center; min-height:44px; padding:.5rem 1.15rem;
              margin-left:.75rem; background:var(--accent); color:#fff; font-size:var(--fs-sm);
              font-weight:600; text-decoration:none; border-radius:var(--r-1);
              white-space:nowrap; transition:background-color .18s var(--ez); }
  .head__cta:hover{ background:var(--accent-hover); }
}
.head__tel{
  display:inline-flex; align-items:center; gap:.45rem; min-height:44px; padding:0 .7rem;
  color:#fff; text-decoration:none; font-size:var(--fs-sm); font-weight:600;
}
.head__tel .num{ display:none; font-family:var(--mono); white-space:nowrap; }
@media (min-width:600px){ .head__tel .num{ display:inline; } }
/* Zwischen 1180 und 1399 px braucht die Hauptnavigation den Platz. */
@media (min-width:1180px) and (max-width:1399px){ .head__tel .num{ display:none; } }
@media (min-width:1440px){ .mainnav a,.mainnav button{ padding:0 .95rem; } }
.head__tel svg{ width:1.05rem; height:1.05rem; flex:none; }
.head__tel:hover{ color:var(--accent-lift); }

.burger{ display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px;
         margin-right:-.5rem; color:#fff; cursor:pointer; flex:none; }
@media (min-width:1180px){ .burger{ display:none; } }
.burger i{ display:block; width:21px; height:1.5px; background:currentColor; position:relative; }
.burger i::before,.burger i::after{ content:""; position:absolute; left:0; width:21px; height:1.5px;
  background:currentColor; transition:transform .26s var(--ez-out),opacity .18s linear; }
.burger i::before{ top:-6.5px; } .burger i::after{ top:6.5px; }
.burger[aria-expanded="true"] i{ background:transparent; }
.burger[aria-expanded="true"] i::before{ transform:translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] i::after{ transform:translateY(-6.5px) rotate(-45deg); }

/* Mega-Menü: Spur links, Gruppen mittig, Kontaktpanel rechts */
.mega{
  display:none; position:absolute; inset:100% 0 auto; z-index:110;
  background:var(--navy-800); border-top:var(--hair) solid rgba(255,255,255,.14);
  box-shadow:0 32px 60px -28px rgba(11,18,30,.8);
  --focus:#fff; --focus-halo:rgba(22,35,58,.92);
}
.mega[data-open="true"]{ display:block; }
.mega__grid{ display:grid; grid-template-columns:15rem minmax(0,1fr) 17rem;
             gap:0; padding-block:var(--sp-6) var(--sp-7); }
.mega__track{ border-right:var(--hair) solid rgba(255,255,255,.13); padding-right:var(--sp-5); }
.mega__track a{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  min-height:46px; padding:.7rem .9rem; color:rgba(255,255,255,.82); text-decoration:none;
  font-size:var(--fs-sm); font-weight:500; border-left:2px solid transparent;
  transition:background-color .16s var(--ez),color .16s var(--ez);
}
.mega__track a:hover{ background:rgba(255,255,255,.08); color:#fff; border-left-color:var(--accent-lift); }
.mega__track a::after{ content:"→"; font-family:var(--mono); opacity:0; transition:opacity .16s; }
.mega__track a:hover::after{ opacity:.8; }
.mega__cols{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
             gap:var(--sp-6) var(--sp-7); padding-inline:var(--sp-7); }
.mega__cols .col-title{ color:#fff; border-bottom-color:rgba(255,255,255,.22); }
.mega__cols li a{ display:flex; flex-direction:column; justify-content:center;
                  min-height:46px; padding:.4rem 0; color:rgba(255,255,255,.76);
                  text-decoration:none; font-size:var(--fs-sm); }
.mega__cols li a:hover{ color:#fff; text-decoration:underline; text-underline-offset:4px; }
.mega__cols li small{ display:block; font-size:var(--fs-xs); color:rgba(255,255,255,.5); }
.mega__panel{ border-left:var(--hair) solid rgba(255,255,255,.13); padding-left:var(--sp-6); }
.mega__panel .col-title{ color:#fff; border-bottom-color:rgba(255,255,255,.22); }
.mega__panel .pline{ display:flex; align-items:center; gap:.7rem; min-height:48px; padding:.6rem 0;
                     color:rgba(255,255,255,.8); text-decoration:none; font-size:var(--fs-sm); }
.mega__panel .pline b{ color:#fff; font-weight:600; }
.mega__panel .pline:hover b{ color:var(--accent-lift); }
.mega__panel svg{ width:1.05rem; height:1.05rem; flex:none; opacity:.8; }
.mega__panel .cta-request{ width:100%; justify-content:center; margin-top:var(--sp-4); }

/* Mobilmenü, mehrstufig */
.mnav{
  position:fixed; inset:var(--hd) 0 0; z-index:115; background:var(--navy-deep); color:#fff;
  display:flex; flex-direction:column; overflow-y:auto; overscroll-behavior:contain;
  opacity:0; visibility:hidden; transform:translateY(-.75rem);
  transition:opacity .24s var(--ez),transform .3s var(--ez-out),visibility .24s;
  --fg:rgba(255,255,255,.78); --fg-max:#fff; --fg-dim:rgba(255,255,255,.66);
  --rule:rgba(255,255,255,.18); --focus:#fff; --focus-halo:rgba(22,35,58,.92);
}
.mnav[data-open="true"]{ opacity:1; visibility:visible; transform:none; }
@media (min-width:1180px){ .mnav{ display:none; } }
.mnav__pane{ padding:var(--sp-5) 0 var(--sp-8); }
.mnav__pane[hidden]{ display:none; }
.mnav__back{
  display:flex; align-items:center; gap:.6rem; min-height:52px; width:100%;
  padding:0 var(--pad); color:var(--accent-lift); font-size:var(--fs-sm);
  font-weight:600; cursor:pointer; border-bottom:var(--hair) solid rgba(255,255,255,.14);
}
.mnav__back::before{ content:"←"; font-family:var(--mono); }
.mnav ul{ padding-inline:var(--pad); }
.mnav li > a,.mnav li > button{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; width:100%;
  min-height:60px; padding:.9rem 0; color:#fff; text-decoration:none;
  font-size:1.0625rem; font-weight:500; text-align:left; cursor:pointer;
  border-bottom:var(--hair) solid rgba(255,255,255,.14);
}
.mnav li > button::after{ content:"→"; font-family:var(--mono); color:var(--accent-lift); }
.mnav li > a[aria-current="page"]{ color:var(--accent-lift); }
.mnav__contact{ margin-top:auto; padding:var(--sp-6) var(--pad) var(--sp-8);
                display:grid; gap:var(--sp-3); background:rgba(0,0,0,.18); }
.mnav__contact .cta-request,.mnav__contact .cta-call{ width:100%; justify-content:center; }

/* Kontaktpanel, Desktop */
.cpanel{
  position:fixed; top:var(--hd); right:0; z-index:118; width:min(24rem,92vw);
  background:var(--navy-deep); color:#fff; padding:var(--sp-6) var(--sp-6) var(--sp-7);
  border-left:var(--hair) solid rgba(255,255,255,.16);
  box-shadow:-24px 0 60px -30px rgba(11,18,30,.85);
  transform:translateX(105%); visibility:hidden;
  transition:transform .3s var(--ez-out),visibility .3s;
  --fg:rgba(255,255,255,.78); --fg-max:#fff; --fg-dim:rgba(255,255,255,.66);
  --rule:rgba(255,255,255,.18); --focus:#fff; --focus-halo:rgba(22,35,58,.92);
}
.cpanel[data-open="true"]{ transform:none; visibility:visible; }
.cpanel .pline{ display:flex; align-items:center; gap:.8rem; min-height:56px; padding:.85rem 0;
                border-bottom:var(--hair) solid rgba(255,255,255,.14);
                color:rgba(255,255,255,.78); text-decoration:none; }
.cpanel .pline b{ display:block; color:#fff; font-family:var(--mono); font-size:1rem; }
.cpanel .pline small{ font-size:var(--fs-xs); }
.cpanel svg{ width:1.1rem; height:1.1rem; flex:none; }
.cpanel__close{ position:absolute; top:.5rem; right:.5rem; width:44px; height:44px;
                display:grid; place-items:center; color:#fff; cursor:pointer; font-size:1.4rem; }
.scrim{ position:fixed; inset:0; z-index:105; background:rgba(11,18,30,.5);
        opacity:0; visibility:hidden; transition:opacity .25s var(--ez),visibility .25s; }
.scrim[data-open="true"]{ opacity:1; visibility:visible; }

/* Breadcrumb */
.crumbs{ background:var(--mint); border-bottom:var(--hair) solid var(--line); }
.crumbs ol{ display:flex; flex-wrap:wrap; align-items:center; gap:0 .6rem;
            font-size:var(--fs-xs); color:var(--muted); }
.crumbs li{ display:flex; align-items:center; }
.crumbs a,.crumbs [aria-current="page"]{ display:inline-flex; align-items:center; min-height:44px; }
.crumbs a{ color:var(--muted); text-decoration:none; }
.crumbs a:hover{ color:var(--navy); text-decoration:underline; text-underline-offset:3px; }
.crumbs li:not(:last-child)::after{ content:"/"; margin-left:.6rem; color:var(--steel); }
.crumbs [aria-current="page"]{ color:var(--navy); font-weight:600; }

/* ── 07 BANDTYPEN ─────────────────────────────────────────────────────── */
/* intro: Seiteneinstieg, asymmetrisch */
.b-intro__grid{ display:grid; gap:var(--sp-6); }
@media (min-width:1024px){
  .b-intro__grid{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
                  gap:var(--sp-8); align-items:end; }
}
.b-intro .t-h1{ margin-bottom:var(--sp-5); }

/* split: Text neben Medium */
.b-split__grid{ display:grid; gap:var(--sp-6); align-items:center; }
/* Erst ab 1080px zweispaltig: bei 900px ist die Textspalte zu schmal fuer
   lange deutsche Komposita in Ueberschriftgroesse, sie brechen mitten im Wort. */
@media (min-width:1080px){
  .b-split__grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--sp-8); }
  .b-split--rev .b-split__media{ order:-1; }
}

/* ledger: linierte Merkmalszeilen, kein Kartenraster */
.ledger{ border-top:2px solid var(--rule); }
.ledger__row{
  display:grid; gap:var(--sp-2) var(--sp-6); padding-block:var(--sp-5);
  border-bottom:var(--hair) solid var(--rule); align-items:baseline;
}
@media (min-width:768px){ .ledger__row{ grid-template-columns:4.5rem minmax(0,1.1fr) minmax(0,1.4fr); } }
.ledger__n{ font-family:var(--mono); font-size:var(--fs-mono); letter-spacing:.12em;
            color:var(--accent); }
.sf-navy .ledger__n,.sf-deep .ledger__n{ color:var(--accent-lift); }
.ledger__row p{ font-size:var(--fs-sm); color:var(--fg); max-width:58ch; }

/* matrix: echte Vergleichstabelle */
.matrix{ overflow-x:auto; border:var(--hair) solid var(--rule); }
/* Mindestbreite folgt der Spaltenzahl, sonst quetschen sich drei Spalten auf
   dieselbe Breite wie zwei und jede Zelle bricht auf fuenf Zeilen. */
.matrix table{ min-width:calc(9rem + var(--cols, 2) * 11.5rem); font-size:var(--fs-sm); }
@media (min-width:900px){ .matrix table{ min-width:34rem; width:100%; } }
.matrix caption{ text-align:left; padding:var(--sp-4) var(--sp-5); font-size:var(--fs-sm);
                 color:var(--fg-dim); border-bottom:var(--hair) solid var(--rule); }
.matrix th,.matrix td{ padding:.85rem var(--sp-4); text-align:left; vertical-align:top;
                       border-bottom:var(--hair) solid var(--rule); }
.matrix thead th{ background:var(--navy); color:#fff; font-weight:600; font-size:var(--fs-xs);
                  letter-spacing:.08em; text-transform:uppercase; border-bottom:0; }
.matrix tbody th{ font-weight:600; color:var(--fg-max); background:var(--mint); width:11rem; }
.matrix tbody tr:last-child th,.matrix tbody tr:last-child td{ border-bottom:0; }
.matrix td .mono{ color:var(--muted); font-size:var(--fs-xs); }

/* process: nummerierte Schritte mit Verlaufslinie */
.process{ display:grid; gap:var(--sp-5); counter-reset:s; }
@media (min-width:768px){ .process{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-6); } }
@media (min-width:1180px){ .process{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.process__step{ position:relative; padding-top:var(--sp-5); border-top:2px solid var(--rule); }
.process__step::before{ content:""; position:absolute; top:-2px; left:0; width:2.5rem; height:2px;
                        background:var(--accent); }
.sf-navy .process__step::before,.sf-deep .process__step::before{ background:var(--accent-lift); }
.process__n{ display:block; font-family:var(--mono); font-size:var(--fs-mono); letter-spacing:.14em;
             color:var(--fg-dim); margin-bottom:var(--sp-3); }
.process__step p{ font-size:var(--fs-sm); color:var(--fg); margin-top:.4rem; }

/* detail: technische Zone, Zeichnung plus Legende */
.b-detail__grid{ display:grid; gap:var(--sp-7); align-items:center; }
@media (min-width:1024px){ .b-detail__grid{ grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); } }
.legend{ margin-top:var(--sp-5); border-top:var(--hair) solid var(--rule); }
.legend li{ display:flex; gap:var(--sp-4); align-items:baseline; padding-block:.7rem;
            border-bottom:var(--hair) solid var(--rule); font-size:var(--fs-sm); }
.legend .mono{ color:var(--accent); flex:none; width:1.9rem; }
.sf-navy .legend .mono,.sf-deep .legend .mono{ color:var(--accent-lift); }
.legend b{ color:var(--fg-max); }

/* questions: Akkordeon */
.qa{ border-top:2px solid var(--rule); }
.qa details{ border-bottom:var(--hair) solid var(--rule); }
.qa summary{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-5);
             padding:var(--sp-5) 0; cursor:pointer; list-style:none;
             font-size:var(--fs-h3); font-weight:600; color:var(--fg-max);
             letter-spacing:-.012em; line-height:1.32; }
.qa summary::-webkit-details-marker{ display:none; }
.qa summary::after{ content:"+"; font-family:var(--mono); font-size:1.5rem; line-height:1;
                    color:var(--accent); flex:none; transition:transform .22s var(--ez); }
.qa details[open] summary::after{ content:"–"; }
.qa summary:hover{ color:var(--accent); }
.qa__a{ padding-bottom:var(--sp-5); max-width:var(--measure); }
.qa__a > p + p{ margin-top:var(--sp-4); }
.qa__a .answer{ font-weight:500; color:var(--fg-max); }

/* closing: Abschluss-CTA */
.b-closing__grid{ display:grid; gap:var(--sp-6); align-items:center; }
@media (min-width:1024px){ .b-closing__grid{ grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:var(--sp-8); } }

/* ── 08 MODULE ────────────────────────────────────────────────────────── */
/* Auswahlraster für Produktgruppen: unterschiedliche Höhen, keine Kartenwüste */
.picker{ display:grid; gap:var(--hair); background:var(--rule); border:var(--hair) solid var(--rule); }
@media (min-width:640px){ .picker{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1100px){ .picker{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.picker__item{
  display:flex; flex-direction:column; gap:var(--sp-4); padding:var(--sp-5);
  background:var(--white); text-decoration:none; color:inherit; min-height:100%;
  transition:background-color .2s var(--ez);
}
.picker__item:hover{ background:var(--mint); }
.picker__item .media{ margin-bottom:auto; }
.picker__item .t-h3{ transition:color .2s var(--ez); }
.picker__item:hover .t-h3{ color:var(--accent); }
.picker__item p{ font-size:var(--fs-sm); color:var(--fg-dim); }
.picker__go{ font-family:var(--mono); font-size:var(--fs-mono); letter-spacing:.14em;
             text-transform:uppercase; color:var(--accent); }

/* Materialraster, aus der Referenz als Prinzip übernommen */
.swatches{ display:grid; grid-template-columns:repeat(auto-fill,minmax(6.5rem,1fr)); gap:var(--sp-3); }
.swatch{ border:var(--hair) solid var(--rule); background:var(--white); }
.swatch i{ display:block; height:3.5rem; }
.swatch span{ display:block; padding:.5rem .6rem; font-family:var(--mono);
              font-size:var(--fs-mono); color:var(--fg-dim); }

/* Zweispaltige Faktenliste */
.facts{ display:grid; gap:var(--sp-5); }
@media (min-width:768px){ .facts{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-6); } }
.facts > div{ padding-top:var(--sp-4); border-top:var(--hair) solid var(--rule); }
.facts p{ font-size:var(--fs-sm); color:var(--fg); margin-top:.3rem; max-width:48ch; }

/* Hinweis auf offene Prüfung */
.gate{
  display:flex; gap:var(--sp-4); padding:var(--sp-4) var(--sp-5);
  background:var(--mint); border-left:3px solid var(--steel);
  font-size:var(--fs-sm); color:var(--body); max-width:70ch;
}
.gate b{ color:var(--navy); }
.sf-navy .gate,.sf-deep .gate{ background:rgba(255,255,255,.07); color:rgba(255,255,255,.8);
                               border-left-color:var(--accent-lift); }
.sf-navy .gate b,.sf-deep .gate b{ color:#fff; }

/* Sprungnavigation für lange Seiten */
.jumpbar{ position:sticky; top:var(--hd); z-index:60; background:rgba(255,255,255,.94);
          backdrop-filter:blur(10px); border-bottom:var(--hair) solid var(--line); }
.jumpbar ul{ display:flex; gap:.5rem; overflow-x:auto; padding-block:.5rem;
             scrollbar-width:thin; -webkit-overflow-scrolling:touch; }
.jumpbar li{ flex:none; }

/* Glossar und Wissensliste */
.index-list{ border-top:2px solid var(--rule); }
.index-list > li{ border-bottom:var(--hair) solid var(--rule); }
.index-list > li > a{ display:grid; gap:.35rem var(--sp-6); padding-block:var(--sp-5); min-height:44px;
                      text-decoration:none; color:inherit; align-items:baseline; }
@media (min-width:768px){ .index-list > li > a{ grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); } }
.index-list > li > a:hover .t-h3{ color:var(--accent); }
.index-list p{ font-size:var(--fs-sm); color:var(--fg-dim); }

/* ── 09 MEDIEN ────────────────────────────────────────────────────────────
   Drei Klassen. Jede ist ein dokumentierter Austauschpunkt: das <svg> im
   Inneren kann 1:1 durch <img src="..." alt="..."> ersetzt werden, ohne dass
   Layout oder Abstände angefasst werden müssen. Siehe README, Abschnitt Medien. */
.media{ position:relative; background:var(--mint); overflow:hidden; }
.media > img{ width:100%; height:100%; object-fit:cover; display:block; }
.media > svg{ width:100%; height:100%; display:block; }
.media--scene > svg{ object-fit:cover; }
/* Zeichnungen werden vollstaendig gezeigt, sonst fehlt die Bemassung. */
.media--elevation > svg,.media--detail > svg{ object-fit:contain; padding:var(--sp-5); }
.media--scene{ aspect-ratio:16/10; color:var(--navy); }
.media--elevation{ aspect-ratio:4/5; background:var(--white); color:var(--navy);
                   border:var(--hair) solid var(--rule); }
.media--detail{ aspect-ratio:4/3; background:var(--navy-deep); color:#fff; }
.media__tag{
  position:absolute; left:0; bottom:0; padding:.4rem .7rem;
  font-family:var(--mono); font-size:var(--fs-mono); letter-spacing:.12em;
  text-transform:uppercase; background:var(--navy); color:#fff;
}
.media--elevation .media__tag{ background:var(--mint); color:var(--navy); }
.figure figcaption{ margin-top:var(--sp-3); font-size:var(--fs-xs); color:var(--fg-dim); }

/* Zeichenstil */
.dwg .s1{ fill:none; stroke:currentColor; stroke-width:1.4; vector-effect:non-scaling-stroke; }
.dwg .s2{ fill:none; stroke:currentColor; stroke-width:.8; opacity:.55; vector-effect:non-scaling-stroke; }
.dwg .s3{ fill:none; stroke:currentColor; stroke-width:.8; opacity:.65;
          stroke-dasharray:6 5; vector-effect:non-scaling-stroke; }
.dwg .fg{ fill:currentColor; opacity:.06; }
.dwg .gl{ fill:url(#glaze); }
.dwg text{ font-family:var(--mono); font-size:13px; fill:currentColor; opacity:.75; }

/* ── 10 FORMULAR ──────────────────────────────────────────────────────── */
.form{ max-width:44rem; }
.steps-bar{ display:flex; gap:var(--hair); background:var(--rule); border:var(--hair) solid var(--rule);
            margin-bottom:var(--sp-6); overflow:hidden; }
.steps-bar li{ flex:1 1 0; min-width:0; background:var(--white); padding:.6rem .5rem;
               font-family:var(--mono); font-size:var(--fs-mono); color:var(--muted);
               text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.steps-bar li[aria-current="step"]{ background:var(--navy); color:#fff; }
.steps-bar li[data-done="true"]{ background:var(--mint); color:var(--navy); }
.field{ margin-bottom:var(--sp-5); }
.field > label,.fieldset > legend{ display:block; font-weight:600; color:var(--navy);
                                   font-size:var(--fs-sm); margin-bottom:.45rem; }
.field input[type=text],.field input[type=tel],.field input[type=email],
.field input[type=number],.field select,.field textarea{
  width:100%; min-height:52px; padding:.7rem .85rem; font-size:1rem; color:var(--navy);
  background:var(--white); border:var(--hair) solid var(--steel); border-radius:var(--r-1);
}
.field textarea{ min-height:8rem; line-height:1.55; }
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--accent); border-width:2px; }
.field .hint{ display:block; font-size:var(--fs-xs); color:var(--muted); margin-top:.35rem; }
.field .err{ display:none; font-size:var(--fs-sm); font-weight:600; color:var(--err); margin-top:.35rem; }
.field[data-invalid="true"] .err{ display:block; }
.field[data-invalid="true"] input,.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea{ border-color:var(--err); border-width:2px; }
.choices{ display:grid; gap:var(--sp-3); }
@media (min-width:560px){ .choices{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.choice{ display:flex; align-items:center; gap:.8rem; min-height:60px; padding:.75rem 1rem;
         border:var(--hair) solid var(--steel); background:var(--white); cursor:pointer; }
.choice:hover{ border-color:var(--accent); background:var(--mint); }
.choice input{ width:20px; height:20px; accent-color:var(--accent); flex:none; margin:0; }
.choice span{ font-weight:500; color:var(--navy); }
.choice:has(input:checked){ border-color:var(--accent); border-width:2px; background:var(--mint); }
.form__nav{ display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-top:var(--sp-6);
            padding-top:var(--sp-5); border-top:var(--hair) solid var(--rule); }
.form__nav .cta-request{ margin-left:auto; }
.summary dl{ display:grid; gap:var(--hair); background:var(--rule);
             border:var(--hair) solid var(--rule); }
@media (min-width:560px){ .summary dl{ grid-template-columns:12rem minmax(0,1fr); } }
.summary dt,.summary dd{ background:var(--white); padding:.75rem 1rem; margin:0; font-size:var(--fs-sm); }
.summary dt{ font-weight:600; color:var(--navy); background:var(--mint); }

/* ── 11 FUSS & KONTAKTLEISTE ──────────────────────────────────────────── */
.foot{ background:var(--navy-deep); color:rgba(255,255,255,.72);
       --fg:rgba(255,255,255,.72); --fg-max:#fff;
       --fg-dim:rgba(255,255,255,.62); --rule:rgba(255,255,255,.15);
       --focus:#fff; --focus-halo:rgba(22,35,58,.92); }
.foot__grid{ display:grid; gap:var(--sp-7); padding-block:var(--sp-9) var(--sp-7); }
@media (min-width:640px){ .foot__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px){ .foot__grid{ grid-template-columns:1.4fr 1fr 1fr 1.25fr; gap:var(--sp-6); } }
.foot .col-title{ color:#fff; border-bottom-color:rgba(255,255,255,.2); }
.foot a:not(.cta-request):not(.cta-call):not(.cta-depth){
  color:rgba(255,255,255,.72); text-decoration:none; }
.foot a:not(.cta-request):not(.cta-call):not(.cta-depth):hover{
  color:#fff; text-decoration:underline; text-underline-offset:4px; }
.foot__links li a{ display:inline-flex; align-items:center; gap:.5rem;
                   min-height:44px; font-size:var(--fs-sm); }
.foot__bar{ display:flex; flex-wrap:wrap; gap:var(--sp-3) var(--sp-6); align-items:center;
            padding-block:var(--sp-5); border-top:var(--hair) solid rgba(255,255,255,.15);
            font-size:var(--fs-xs); }
.foot__bar nav{ display:flex; flex-wrap:wrap; gap:0 var(--sp-5); margin-left:auto; }
.foot__bar nav a{ display:inline-flex; align-items:center; min-height:44px; }

.dock{ position:fixed; inset:auto 0 0; z-index:100; display:grid; grid-template-columns:repeat(3,1fr);
       gap:var(--hair); background:var(--line); border-top:var(--hair) solid var(--line);
       padding-bottom:env(safe-area-inset-bottom); transform:translateY(110%);
       transition:transform .3s var(--ez-out); }
.dock[data-show="true"]{ transform:none; }
.dock[data-hide="true"]{ transform:translateY(110%); }
.dock a{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.15rem;
         min-height:60px; background:var(--white); color:var(--navy); text-decoration:none;
         font-size:.75rem; font-weight:600; }
.dock a svg{ width:1.15rem; height:1.15rem; }
.dock a:first-child{ background:var(--accent); color:#fff; }
@media (min-width:1180px){ .dock{ display:none; } }
@media (max-width:1179px){ body{ padding-bottom:calc(60px + env(safe-area-inset-bottom)); } }

/* ── 12 BEWEGUNG ──────────────────────────────────────────────────────────
   Ein Bewegungssystem mit vier Rollen statt einer Bewegung für alles.

   Bis Phase 20F bewegte sich jedes `.rv` gleich: 12 px nach oben, 600 ms.
   Eine Überschrift, eine technische Zeichnung und eine Listenzeile
   verhalten sich damit identisch, obwohl sie Verschiedenes tun. Das ist
   der Grund, warum eine sonst hochwertige Seite generisch wirkt — nicht
   zu wenig Bewegung, sondern überall dieselbe.

   Die vier Rollen:

     .rv          Grundfall. Inhalt kommt herein.
     .rv--kopf    Überschriftengruppe. Etwas weiter, etwas langsamer —
                  sie führt den Abschnitt an und darf das zeigen.
     .rv--riss    Zeichnungen. Kein Versatz, sondern eine Blende, die von
                  unten aufzieht. Eine technische Zeichnung, die
                  hereinrutscht, sieht nach Werbung aus; eine, die
                  aufgedeckt wird, sieht nach Konstruktion aus.
   Eine vierte Rolle `.rv--linie` war vorgesehen und ist wieder entfallen:
   Sie hätte ein `::before` als Strich gebraucht, und im Bestand gibt es
   keinen dekorativen Trenner dieser Art — `.line` ist ein Verweis mit
   Rahmen, kein Strich. Eine Bewegungsrolle ohne echtes Ziel ist tote
   Regel; sie einem Rahmen aufzuzwingen wäre Bewegung ohne Funktion.

   Stärke nach Gerät: Desktop voll, Tablet drei Viertel, Handy die Hälfte.
   Auf einem 390-px-Bild ist ein 20-px-Versatz ein Sprung, auf 1440 px ein
   Nicken. `prefers-reduced-motion` schaltet alles ab, unverändert. */

:root{
  --mv-weg:12px;      /* Versatz Grundfall  */
  --mv-weg-kopf:20px; /* Versatz Kopfgruppe */
  --mv-t:.6s;         /* Dauer Grundfall    */
  --mv-t-kopf:.72s;
}
@media (max-width:1023px){ :root{ --mv-weg:9px;  --mv-weg-kopf:14px; } }
@media (max-width:639px){  :root{ --mv-weg:6px;  --mv-weg-kopf:9px; --mv-t:.5s; --mv-t-kopf:.56s; } }

.rv{ opacity:0; transform:translateY(var(--mv-weg)); }
.rv.in{ opacity:1; transform:none;
        transition:opacity var(--mv-t) var(--ez-out) var(--dl,0ms),
                   transform var(--mv-t) var(--ez-out) var(--dl,0ms); }

.rv--kopf{ transform:translateY(var(--mv-weg-kopf)); }
.rv--kopf.in{ transition-duration:var(--mv-t-kopf); }

/* Blende statt Versatz. clip-path ist auf der Verbundschicht animierbar,
   kostet also kein Layout. Fällt ein Browser darauf zurück, bleibt die
   reine Einblendung übrig — kein kaputter Zustand. */
.rv--riss{ opacity:1; transform:none; clip-path:inset(0 0 100% 0); }
.rv--riss.in{ clip-path:inset(0 0 0 0);
              transition:clip-path .78s var(--ez-out) var(--dl,0ms); }


html.no-js .rv{ opacity:1; transform:none; }
html.no-js .rv--riss{ clip-path:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important;
                        transition-duration:.01ms!important; }
  .rv{ opacity:1; transform:none; }
  .rv--riss{ clip-path:none!important; }
}

/* ── 13 UTILITIES ─────────────────────────────────────────────────────── */
.vh{ position:absolute!important; width:1px; height:1px; overflow:hidden;
     clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
.mt-4{ margin-top:var(--sp-4); } .mt-5{ margin-top:var(--sp-5); }
.mt-6{ margin-top:var(--sp-6); } .mt-7{ margin-top:var(--sp-7); }
.stack-5 > * + *{ margin-top:var(--sp-5); }

/* Ohne JavaScript bleibt alles bedienbar */
html.no-js .mega{ display:none; }
html.no-js .burger{ display:none; }
html.no-js .nojs-nav{ display:block!important; }

/* Der Anfrageassistent ohne JavaScript.

   „Weiter" ist ein type="button" und bewirkt ohne Skript nichts; sichtbar
   waere er nur eine Falle.

   Der Absendeknopf steht NICHT hier, sondern in anfrage.css unmittelbar
   unter der Regel, die ihn verbirgt. Dort liegt ein !important, und dagegen
   hilft keine Spezifitaet — die erste Fassung dieser Zeile stand an dieser
   Stelle und blieb wirkungslos. Nachzulesen im Kommentar an jener Stelle.

   Schrittzaehler und Schrittleiste zeigen ohne Skript einen Fortschritt,
   den es nicht gibt: Alle Schritte stehen gleichzeitig da. Sie entfallen. */
html.no-js .form__nav [data-next]{ display:none; }
html.no-js .steps-zaehler,
html.no-js .steps-bar{ display:none; }
html.no-js .lb-nojs__hinweis{ margin-block:var(--sp-5); }
.nojs-nav{ display:none; background:var(--navy-800); }
.nojs-nav ul{ display:flex; flex-wrap:wrap; gap:.25rem 1rem; padding-block:.75rem; }
.nojs-nav a{ display:inline-flex; min-height:40px; align-items:center;
             color:rgba(255,255,255,.85); font-size:var(--fs-sm); text-decoration:none; }
.nojs-nav a:hover{ color:#fff; text-decoration:underline; }

/* ==========================================================================
   14 V2 — REDAKTIONELLE EBENE
   Ergänzt das Grundsystem um Module, die es in Version 1 nicht gab:
   Wasserzeichen, Produktlandschaft, Anforderungsfeld, Kontaktzeilen,
   geschärfte CTA-Formen. Kein Modul ersetzt eine bestehende Klasse,
   damit die 21 noch nicht überarbeiteten Seiten unverändert funktionieren.
   ========================================================================== */

/* ── 14.1 CTA-Formen geschärft ───────────────────────────────────────── */
.cta-request{
  position:relative; padding:1rem 1.75rem; border-width:1px; letter-spacing:.01em;
  overflow:hidden;
}
.cta-request::after{
  content:"→"; font-family:var(--mono); margin-left:.15rem;
  transition:transform .28s var(--ez-out);
}
.cta-request:hover::after{ transform:translateX(.3rem); }

/* Anruf: Beschriftung über der Nummer, Nummer trägt die Zeile */
.cta-call{
  flex-direction:column; align-items:flex-start; gap:.1rem;
  padding:.7rem 1.25rem .8rem; min-height:58px;
  border-width:1px; border-color:var(--rule);
}
.cta-call > :first-child{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--fg-dim); font-weight:400;
}
.cta-call .num{ font-size:1.05em; font-weight:600; letter-spacing:0; color:var(--fg-max); }
.cta-call:hover{ border-color:var(--fg-max); background:transparent; }
.sf-navy .cta-call:hover,.sf-deep .cta-call:hover,.sf-slate .cta-call:hover{
  background:rgba(255,255,255,.06);
}

/* Vertiefung: volle Kante links, kein Kastencharakter */
.cta-depth{ border-left-width:2px; padding:1rem 1.25rem; }

/* ── 14.2 Wasserzeichen ──────────────────────────────────────────────── */
.wm{ position:relative; isolation:isolate; overflow:clip; }
.wm__mark{
  position:absolute; z-index:-1; pointer-events:none; user-select:none;
  font-weight:700; line-height:.7; letter-spacing:-.06em;
  font-size:clamp(11rem,30vw,26rem); color:rgba(255,255,255,.038);
  left:-.05em; bottom:-.24em;
}
.sf-paper .wm__mark,.sf-mint .wm__mark{ color:rgba(32,50,80,.045); }
.wm__mark--right{ left:auto; right:-.06em; }

/* ── 14.3 Produktlandschaft ──────────────────────────────────────────── */
.scape{ display:grid; gap:var(--hair); background:var(--rule); }
.scape__cell{
  position:relative; display:flex; flex-direction:column;
  background:var(--t2); color:inherit; text-decoration:none;
  padding:var(--sp-6); min-height:15rem; overflow:hidden;
  transition:background-color .3s var(--ez);
}
.sf-deep .scape__cell{ background:var(--t2); }
.sf-navy .scape__cell{ background:var(--t3); }
.scape__cell:hover{ background:var(--t4); }
.scape__cell:hover .scape__go{ transform:translateX(.35rem); }
.scape__eyebrow{
  font-family:var(--mono); font-size:.8125rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent-lift); margin-bottom:auto;
}
.scape__title{
  font-size:clamp(1.5rem,1.15rem + 1.3vw,2.35rem); font-weight:600;
  line-height:1.04; letter-spacing:-.026em; color:#fff; margin-top:var(--sp-6);
}
.scape__cell p{ margin-top:.7rem; font-size:var(--fs-sm); color:rgba(255,255,255,.72);
                max-width:34ch; }
.scape__go{
  display:inline-flex; align-items:center; gap:.5rem; margin-top:var(--sp-5);
  font-family:var(--mono); font-size:.8125rem; letter-spacing:.14em;
  text-transform:uppercase; color:#fff;
  transition:transform .28s var(--ez-out);
}
.scape__art{
  position:absolute; inset:auto 0 0 0; height:62%; z-index:0;
  display:flex; align-items:flex-end; justify-content:center;
  opacity:.5; pointer-events:none;
}
.scape__art svg{ width:100%; height:100%; object-fit:contain; color:#fff; }
.scape__cell > *{ position:relative; z-index:1; }

/* Blickachsen: jede Zelle bekommt ein eigenes Format */
.scape__cell--tall{ min-height:32rem; }
.scape__cell--tall .scape__art{ height:70%; opacity:.62; }
.scape__cell--slim{ min-height:24rem; }
.scape__cell--slim .scape__art{ height:66%; inset:auto -12% 0 -12%; }
.scape__cell--wide .scape__art{
  inset:0 0 0 auto; width:42%; height:100%; align-items:center; opacity:.42;
}
.scape__cell--flat{ min-height:13rem; }
.scape__cell--flat .scape__art{ height:52%; opacity:.4; }

@media (min-width:900px){
  .scape{
    grid-template-columns:minmax(0,1.22fr) minmax(0,.66fr) minmax(0,.92fr);
    grid-template-areas:"fen tur sch" "fen tur rol";
  }
  .scape__cell--fen{ grid-area:fen; }
  .scape__cell--tur{ grid-area:tur; }
  .scape__cell--sch{ grid-area:sch; }
  .scape__cell--rol{ grid-area:rol; }
}
@media (min-width:1400px){
  .scape{ grid-template-columns:minmax(0,1.3fr) minmax(0,.6fr) minmax(0,.95fr); }
}

/* ── 14.4 Anforderungsfeld ───────────────────────────────────────────── */
.aspects{ display:grid; gap:var(--hair); background:var(--rule); }
@media (min-width:760px){
  .aspects{
    grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
    grid-template-areas:"one two" "three two" "three four";
  }
  .aspects > :nth-child(1){ grid-area:one; }
  .aspects > :nth-child(2){ grid-area:two; }
  .aspects > :nth-child(3){ grid-area:three; }
  .aspects > :nth-child(4){ grid-area:four; }
}
.aspect{
  background:var(--t2); padding:var(--sp-6);
  display:flex; flex-direction:column; justify-content:flex-end; min-height:12rem;
}
.sf-navy .aspect{ background:var(--t3); }
.aspect__n{ font-family:var(--mono); font-size:.8125rem; letter-spacing:.16em;
            color:var(--accent-lift); margin-bottom:auto; }
.aspect h3{ font-size:clamp(1.2rem,1.05rem + .6vw,1.6rem); font-weight:600;
            line-height:1.1; letter-spacing:-.02em; color:#fff; margin-top:var(--sp-6); }
.aspect p{ margin-top:.6rem; font-size:var(--fs-sm); color:rgba(255,255,255,.72); max-width:38ch; }
.aspect--lead{ background:var(--t4); min-height:20rem; }
.aspect--lead h3{ font-size:clamp(1.5rem,1.2rem + 1.2vw,2.2rem); }

/* ── 14.5 Kontaktzeilen ──────────────────────────────────────────────── */
.lines{ display:grid; gap:var(--hair); background:var(--rule); border-block:var(--hair) solid var(--rule); }
.line{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.35rem var(--sp-6);
  padding:var(--sp-5) 0; background:inherit; text-decoration:none;
  transition:padding-left .28s var(--ez);
}
.line:hover{ padding-left:.75rem; }
.line__k{ flex:0 0 9rem; font-family:var(--mono); font-size:.8125rem;
          letter-spacing:.16em; text-transform:uppercase; color:var(--fg-dim); }
.line__v{ font-size:clamp(1.35rem,1.05rem + 1.3vw,2.25rem); font-weight:600;
          letter-spacing:-.02em; color:var(--fg-max); font-family:var(--mono);
          font-variant-numeric:tabular-nums; }
.line__n{ flex:1 1 14rem; font-size:var(--fs-sm); color:var(--fg-dim); }

/* ── 14.6 Zweizeiler mit Stützspalte ─────────────────────────────────── */
.brief{ display:grid; gap:var(--sp-6) var(--sp-8); }
@media (min-width:900px){
  .brief{ grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); align-items:end; }
}
.brief__side{ display:grid; gap:var(--hair); background:var(--rule);
              border-top:var(--hair) solid var(--rule); }
@media (min-width:560px){ .brief__side{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.brief__side > div{ background:inherit; padding:var(--sp-5) var(--sp-4) 0 0; }
.brief__side .t-h4{ margin-bottom:.4rem; }
.brief__side p{ font-size:var(--fs-sm); color:var(--fg-dim); }

/* ── 14.7 Hero V2 ────────────────────────────────────────────────────── */
.hero2{ position:relative; overflow:clip; }
.hero2__grid{ display:grid; gap:var(--sp-7); align-items:end; }
@media (min-width:1024px){
  .hero2__grid{ grid-template-columns:minmax(0,1.32fr) minmax(20rem,.68fr); gap:var(--sp-8); }
}
.hero2 .t-h1 em{ font-style:normal; color:var(--accent-lift); display:block; }
.hero2__plate{
  background:linear-gradient(158deg,rgba(237,244,245,.97),rgba(214,226,230,.9));
  color:var(--navy); padding:var(--sp-6) var(--sp-6) 0;
  display:flex; flex-direction:column;
}
.hero2__plate svg{ width:100%; height:auto; max-height:22rem; }
.hero2__bar{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  margin-top:var(--sp-5); padding:.85rem 0; border-top:var(--hair) solid rgba(32,50,80,.22);
  font-family:var(--mono); font-size:.8125rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--navy);
}
.hero2__glow{
  position:absolute; z-index:-1; inset:-30% -20% auto auto; width:70%; height:110%;
  background:radial-gradient(48% 42% at 70% 26%,rgba(143,194,212,.22),transparent 72%);
  pointer-events:none;
}

/* ── 14.8 Schnellzugriff unter dem Hero ──────────────────────────────── */
.rail{ display:grid; gap:var(--hair); background:var(--rule);
       border-top:var(--hair) solid var(--rule); }
@media (min-width:640px){ .rail{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px){ .rail{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.rail a{
  background:inherit; padding:var(--sp-5) var(--sp-5) var(--sp-5) 0;
  text-decoration:none; display:flex; flex-direction:column; gap:.3rem; min-height:44px;
  transition:padding-left .26s var(--ez);
}
.rail a:hover{ padding-left:.6rem; }
.rail b{ color:var(--fg-max); font-size:var(--fs-h4); font-weight:600; }
.rail span{ font-size:var(--fs-sm); color:var(--fg-dim); }

/* ── 14.9 Ablaufband mit durchlaufender Linie ────────────────────────── */
.track{ display:grid; gap:var(--sp-6); position:relative; }
@media (min-width:760px){ .track{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1180px){ .track{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; } }
.track__step{ padding-top:var(--sp-5); border-top:var(--hair) solid var(--rule); position:relative; }
@media (min-width:1180px){
  .track__step{ padding-right:var(--sp-6); }
  .track__step + .track__step{ padding-left:var(--sp-6);
                               border-left:var(--hair) solid var(--rule); }
}
.track__step::before{ content:""; position:absolute; top:-1px; left:0; width:3rem; height:2px;
                      background:var(--accent-lift); }
@media (min-width:1180px){ .track__step + .track__step::before{ left:var(--sp-6); } }
.track__n{ display:block; font-family:var(--mono); font-size:.8125rem; letter-spacing:.18em;
           color:var(--fg-dim); margin-bottom:var(--sp-4); }
.track__step h3{ font-size:var(--fs-h3); font-weight:600; letter-spacing:-.015em;
                 color:var(--fg-max); line-height:1.2; }
.track__step p{ margin-top:.55rem; font-size:var(--fs-sm); color:var(--fg); max-width:32ch; }

/* ── 14.10 Feineinstellungen ─────────────────────────────────────────── */
.kicker{ font-size:.8125rem; letter-spacing:.2em; }
.kicker::before{ width:2.25rem; }
.picker__item{ padding:var(--sp-6); }
.matrix,.tabs,.steps-bar,.gate{ border-radius:0; }
.field input,.field select,.field textarea,.choice{ border-radius:0; }

/* ── 14.11 Lange deutsche Wörter ─────────────────────────────────────────
   V2 setzt Überschriften deutlich größer. Dadurch kann ein einzelnes
   Kompositum wie „zusammengestellt" breiter werden als der Viewport und
   die Rasterspalte aufsprengen. Beides wird hier abgefangen. */
.t-mega,.t-h1,.t-h2,.t-h3,.t-h4,
.scape__title,.aspect h3,.track__step h3,.line__v,.qa summary{
  overflow-wrap:break-word; hyphens:auto;
}
.b-intro__grid > *,.brief > *,.hero2__grid > *,.b-split__grid > *,
.b-detail__grid > *,.b-closing__grid > *,.svc__head > *,.qual > *,.region > *,
.contact__grid > *,.scape__cell,.aspect,.track__step,.rail a,.line{ min-width:0; }

/* Kopf: ab 1180 px muss alles nebeneinander passen, auch mit größerer Schrift */
@media (min-width:1180px) and (max-width:1439px){
  .head__cta{ padding:.5rem .95rem; }
  .mainnav a,.mainnav button{ padding:0 .6rem; }
}

/* ── 14.12 Korrekturen aus der Messung ───────────────────────────────────
   Die Trennlinien von rail, lines und brief__side entstanden über eine
   Hintergrundfläche im Rasterabstand. Die Kacheln erbten dadurch die helle
   Linienfarbe statt der Bandfarbe, wodurch Text auf aufgehellter Fläche
   stand und der Kontrast fiel. Jetzt echte Rahmenlinien, kein Hintergrund. */
.rail,.lines,.brief__side{ background:none; gap:0; }
.rail{ border-top:var(--hair) solid var(--rule); }
.rail a{ background:none; border-bottom:var(--hair) solid var(--rule); }
@media (min-width:640px){
  .rail a{ padding-right:var(--sp-6); }
  .rail a:not(:nth-child(2n+1)){ padding-left:var(--sp-5);
                                 border-left:var(--hair) solid var(--rule); }
}
@media (min-width:1024px){
  .rail a{ border-bottom:0; }
  .rail a:not(:first-child){ padding-left:var(--sp-5);
                             border-left:var(--hair) solid var(--rule); }
  .rail a:nth-child(2n+1){ padding-left:0; border-left:0; }
  .rail a:not(:first-child){ padding-left:var(--sp-5);
                             border-left:var(--hair) solid var(--rule); }
}
.lines{ border-block:0; }
.line{ background:none; border-bottom:var(--hair) solid var(--rule); }
.line:first-child{ border-top:var(--hair) solid var(--rule); }
.brief__side{ border-top:0; }
.brief__side > div{ background:none; padding:var(--sp-5) var(--sp-5) 0 0;
                    border-top:var(--hair) solid var(--rule); }
@media (min-width:560px){
  .brief__side > div + div{ padding-left:var(--sp-5);
                            border-left:var(--hair) solid var(--rule); }
}
/* Spaltentitel bleiben weiß, der Beschreibungstext wird gedämpft */
.brief__side .t-h4{ color:var(--fg-max); }
.brief__side p:not(.t-h4){ font-size:var(--fs-sm); color:var(--fg-dim); }

/* Die helle Hero-Platte braucht eine echte Hintergrundfarbe unter dem
   Verlauf, sonst steht dunkler Text rechnerisch auf dunklem Grund. */
.hero2__plate{ background-color:var(--mint); }

/* Gedämpfte Schrift auf dunklem Grund eine Stufe kräftiger */
.sf-navy,.sf-deep,.sf-slate,.foot,.mnav,.cpanel{ --fg-dim:rgba(255,255,255,.74); }

/* ── 14.13 Visuelle Runde 1 ──────────────────────────────────────────────
   Befunde am gerenderten Bild: H1 zu dominant und siebenzeilig, Zusatzzeile
   gleich groß wie die Hauptzeile, Stützspalte auf drei zu schmale Spalten
   gequetscht, Produktzellen oben leer. */

/* H1: Hauptzeile trägt, Zusatzzeile ordnet sich unter */
.hero2 .t-h1{ max-width:15ch; }
.hero2 .t-h1 em{
  display:block; margin-top:.5em; font-size:.52em; font-weight:500;
  line-height:1.15; letter-spacing:-.015em; color:var(--accent-lift);
  max-width:24ch;
}
@media (min-width:1024px){ .hero2__grid{ align-items:center; } }

/* Stützspalte: Spalten erst, wenn sie wirklich Platz haben */
.brief__side{ grid-template-columns:repeat(auto-fit,minmax(11.5rem,1fr)); }
@media (min-width:560px){
  .brief__side > div + div{ padding-left:var(--sp-5);
                            border-left:var(--hair) solid var(--rule); }
}

/* Produktzellen: Kennung oben, Titel und Text unten, Zeichnung präsenter */
.scape__eyebrow{ margin-bottom:0; }
.scape__title{ margin-top:auto; }
.scape__art{ opacity:.6; }
.scape__cell--tall .scape__art{ height:64%; opacity:.7; }
.scape__cell--slim .scape__art{ height:58%; opacity:.66; }
.scape__cell--wide .scape__art{
  inset:0 -4% 0 auto; width:46%; height:100%; opacity:.5;
  align-items:center; justify-content:flex-end;
}
.scape__cell--flat .scape__art{ height:56%; opacity:.5; inset:auto -6% 0 auto; width:52%; }
.scape__cell{ padding:var(--sp-6) var(--sp-6) var(--sp-6); }
.scape__cell--wide p,.scape__cell--flat p{ max-width:24ch; }

/* ── 14.14 Visuelle Runde 2 ──────────────────────────────────────────────
   Die beiden kleinen Zellen bekamen eine verkleinerte Fassung derselben
   Hintergrundzeichnung. Das las sich wie ein Symbol und nicht wie eine
   Bauteilansicht. Sie erhalten jetzt ein eigenes Format: Zeichnung steht
   im Textfluss über der Kennung, die beiden großen Zellen behalten die
   angeschnittene Hintergrundzeichnung. Zwei Informationsdichten, wie in
   der Referenz. */
.scape__cell--wide .scape__art,
.scape__cell--flat .scape__art{
  position:static; inset:auto; width:100%; height:7.5rem;
  margin-bottom:var(--sp-5); opacity:.72;
  align-items:center; justify-content:flex-start;
}
.scape__cell--wide .scape__art svg,
.scape__cell--flat .scape__art svg{ width:auto; max-width:60%; height:100%; }
.scape__cell--wide .scape__title,
.scape__cell--flat .scape__title{ margin-top:var(--sp-4); }
.scape__cell--wide,.scape__cell--flat{ justify-content:flex-start; }

/* Die großen Zellen: Kennung oben, Text unten, Zeichnung dazwischen */
.scape__cell--tall .scape__title,
.scape__cell--slim .scape__title{ margin-top:auto; }
.scape__cell--tall .scape__art{ inset:auto 0 22% 0; height:52%; }
.scape__cell--slim .scape__art{ inset:auto -10% 26% -10%; height:44%; }

/* ==========================================================================
   15 SEITENFAMILIEN
   Die Startseite bleibt die dunkelste Bühne. Die vier Familien unterscheiden
   sich jeweils an mindestens drei Merkmalen: Grundfläche, Hero-Logik,
   Medienverwendung, Vergleichslogik, CTA-Führung, mobile Verdichtung.
   Grundlage: PAGE_FAMILY_MATRIX.md
   ========================================================================== */

/* ── 15.0 Gemeinsame Anpassung für alle Unterseiten ──────────────────────
   Unterseiten starten heller als die Startseite. Der Einstiegsblock einer
   Unterseite ist kein zweiter Hero, sondern ein Seitenkopf. */
/* Der Seitenkopf trägt eine eigene, kleinere Titelstufe als der Startseiten-
   Hero. Sonst bricht ein Produkttitel neben der Faktenspalte auf fünf Zeilen. */
:is(.fam-a,.fam-b,.fam-c,.fam-d){ --fs-h1-page:clamp(2.15rem,1.35rem + 2.9vw,3.9rem); }
:is(.fam-a,.fam-b,.fam-c,.fam-d) .b-intro .t-h1{
  font-size:var(--fs-h1-page); line-height:1.06; max-width:22ch;
}
:is(.fam-a,.fam-b,.fam-c,.fam-d) .band:first-of-type{
  padding-block:clamp(2.75rem,1.6rem + 4.4vw,5.5rem);
}

/* ── 15.1 Familie A · Produkt und Leistung ───────────────────────────────
   Hell mit Mintfeldern, ein einziges dunkles Beweisband. Elementansicht auf
   heller Platte rechts vom Titel. Vergleich als echte Tabelle. */
.fam-a .band:first-of-type{ background:var(--mint); }
.fam-a .band:first-of-type .b-intro__grid{ align-items:center; }
.fam-a .b-intro .t-h1{ max-width:24ch; }
.fam-a .b-intro .facts{
  border-left:2px solid var(--accent); padding-left:var(--sp-5);
}
.fam-a .b-intro .facts > div{ border-top:0; padding-top:0; }
.fam-a .b-intro .facts > div + div{ margin-top:var(--sp-4); }
/* Kennung als Marke am linken Rand statt als Linie */
.fam-a .kicker::before{ width:.5rem; height:.5rem; background:var(--accent); }
.fam-a .kicker{ letter-spacing:.22em; }
/* Vergleichstabelle bekommt Zebrastruktur und feste Kopfzeile im Blick */
.fam-a .matrix{ border-width:2px; }
.fam-a .matrix tbody tr:nth-child(even) td{ background:rgba(237,244,245,.5); }
.fam-a .ledger__row:hover{ background:var(--mint); }
/* Nur ein dunkles Band je Produktseite: das Beweisband */
.fam-a .sf-navy .kicker::before{ background:var(--accent-lift); }

/* ── 15.2 Familie B · Planung, Ausführung, Prozess ───────────────────────
   Dunkle Tonstufen als Grundhaltung, ein helles Erklärband in der Mitte.
   Seitenkopf über volle Breite, darunter eine Kennzeile in Mono. */
.fam-b .band:first-of-type{
  background:var(--navy-deep); color:rgba(255,255,255,.78);
  --fg:rgba(255,255,255,.78); --fg-max:#fff; --fg-dim:rgba(255,255,255,.74);
  --rule:rgba(255,255,255,.17); --focus:#fff; --focus-halo:rgba(22,35,58,.92);
}
@media (min-width:1024px){
  .fam-b .band:first-of-type .b-intro__grid{
    grid-template-columns:minmax(0,1fr); gap:var(--sp-6);
  }
  .fam-b .band:first-of-type .t-h1{ max-width:22ch; }
  .fam-b .band:first-of-type .facts{
    grid-template-columns:repeat(4,minmax(0,1fr));
    border-top:var(--hair) solid var(--rule); padding-top:var(--sp-5);
  }
  .fam-b .band:first-of-type .facts > div{ border-top:0; padding-top:0; }
}
.fam-b .band:first-of-type .facts .t-h4{
  font-family:var(--mono); font-size:.8125rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent-lift);
}
/* Prozessschritte tragen eine durchlaufende Linie statt Kacheln */
.fam-b .process__step{ border-top-width:2px; }
.fam-b .process__step::before{ width:100%; opacity:.25; }
.fam-b .legend li{ padding-block:1rem; }
.fam-b .legend .mono{ width:2.6rem; font-size:1rem; }
/* Foto-Slot für spätere Baustellenbilder */
.photoslot{
  display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:14rem; padding:var(--sp-5);
  border:var(--hair) dashed var(--steel); background:var(--mint);
  font-family:var(--mono); font-size:var(--fs-xs); letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted);
}
.sf-navy .photoslot,.sf-deep .photoslot,.sf-slate .photoslot{
  background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.3);
  color:rgba(255,255,255,.7);
}

/* ── 15.3 Familie C · Wissen und Erklärung ───────────────────────────────
   Weiß als Grundfläche. Die Frage ist die Überschrift, die Antwort steht
   sofort darunter in einem Mintblock. Schmalere Spalte, ruhiger Satz. */
/* Phase 20F · Entscheidung Herofamilien.
   fam-b (navy-deep) und fam-d (navy) tragen kraeftig, fam-a (mint) traegt
   ueber die Faktentafel rechts. fam-c oeffnete auf Weiss — auf den drei
   Wissens-Einstiegen las sich das wie ein fehlender Hero: Text unter der
   Brotkrume, ohne Auftakt. Mint statt Weiss gibt der Familie eine Flaeche,
   bleibt eine Markenfarbe und aendert nichts am Kontrast, weil fam-a
   dieselbe Kombination aus Navy-Text auf Mint seit jeher traegt.
   Die drei anderen Familien bleiben unveraendert — ohne klaren Vorteil
   keine Aenderung. */
.fam-c .band:first-of-type{ background:var(--mint); }
.fam-c .band:first-of-type .shell{ max-width:1080px; }
.fam-c .b-intro__grid{ grid-template-columns:minmax(0,1fr); }
.fam-c .b-intro .t-h1{ max-width:22ch; }
.fam-c .b-intro .facts{
  grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));
  border-top:2px solid var(--rule); padding-top:var(--sp-5); margin-top:var(--sp-6);
}
.fam-c .b-intro .facts > div{ border-top:0; padding-top:0; }
/* Direktantwort: das Leitmodul dieser Familie */
.answer-box{
  border-left:3px solid var(--accent); background:var(--mint);
  padding:var(--sp-5) var(--sp-6); max-width:64ch;
}
.answer-box p:first-child{
  font-size:var(--fs-lead); font-weight:600; line-height:1.42;
  color:var(--navy); letter-spacing:-.012em;
}
.answer-box p + p{ margin-top:var(--sp-4); font-size:var(--fs-sm); color:var(--body); }
.answer-box .mono{
  display:block; font-size:var(--fs-mono); letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent); margin-bottom:.6rem;
}
/* Wissensseiten: schmalere Lesespalte, mehr Zeilenluft */
.fam-c .copy,.fam-c .qa__a{ max-width:60ch; line-height:1.7; }
.fam-c .index-list > li > a{ grid-template-columns:minmax(0,1fr); }
@media (min-width:900px){
  .fam-c .index-list > li > a{ grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); }
}
.fam-c .qa summary{ font-size:var(--fs-h3); }

/* ── 15.4 Familie D · Unternehmen, Region, Conversion ────────────────────
   Marineblau rahmt, Weiß trägt den Kern. Kurze Behauptung, sofort Beleg
   oder sichtbares Gate. Kontaktwege vor Formular. */
.fam-d .band:first-of-type{
  background:var(--navy); color:rgba(255,255,255,.78);
  --fg:rgba(255,255,255,.78); --fg-max:#fff; --fg-dim:rgba(255,255,255,.74);
  --rule:rgba(255,255,255,.17); --focus:#fff; --focus-halo:rgba(22,35,58,.92);
}
/* Kurze Behauptung, sofort Beleg: der Nachweis steht oben, nicht unten */
.fam-d .band:first-of-type .b-intro__grid{ align-items:start; }
.fam-d .band:first-of-type .facts > div{
  border-top:var(--hair) solid var(--rule);
}
.fam-d .band:first-of-type .facts .t-h4{ color:var(--accent-lift); }
/* Status- und Zuständigkeitsliste statt Kartenreihe */
.status{ border-top:2px solid var(--rule); }
.status li{
  display:grid; gap:.3rem var(--sp-6); padding-block:var(--sp-4);
  border-bottom:var(--hair) solid var(--rule); align-items:baseline;
}
@media (min-width:700px){ .status li{ grid-template-columns:10rem minmax(0,1fr) 8rem; } }
.status .k{ font-family:var(--mono); font-size:var(--fs-mono); letter-spacing:.14em;
            text-transform:uppercase; color:var(--fg-dim); }
.status .v{ color:var(--fg); font-size:var(--fs-sm); }
.status .s{ font-family:var(--mono); font-size:var(--fs-mono); letter-spacing:.1em; }
.status .s[data-state="offen"]{ color:var(--warn); }
.status .s[data-state="belegt"]{ color:var(--ok); }
.sf-navy .status .s[data-state="offen"],.sf-deep .status .s[data-state="offen"]{ color:#E8B963; }
.sf-navy .status .s[data-state="belegt"],.sf-deep .status .s[data-state="belegt"]{ color:#7FD1AE; }
/* Kontaktwege bekommen in dieser Familie mehr Gewicht als das Formular */
.fam-d .lines .line__v{ font-size:clamp(1.5rem,1.1rem + 1.6vw,2.5rem); }

/* ── 15.5 Mobile Verdichtung je Familie ──────────────────────────────────
   Keine Familie ist mobil ein verkleinerter Desktop. */
@media (max-width:767px){
  .fam-a .matrix table{ min-width:30rem; }
  .fam-a .b-intro .facts{ border-left-width:2px; padding-left:var(--sp-4); }
  .fam-b .band:first-of-type .facts{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-4); }
  .fam-b .legend .mono{ width:2rem; }
  .fam-c .answer-box{ padding:var(--sp-4) var(--sp-5); }
  .fam-c .copy{ line-height:1.66; }
  .fam-d .status li{ padding-block:var(--sp-3); }
  .fam-d .status .s{ justify-self:start; }
}

/* ==========================================================================
   16 PRODUKT- UND LEISTUNGSBAUSTEINE (Phase 2)
   Drei allgemeine Module, die jede Produktseite braucht, und fünf
   Signaturmodule, von denen jedes genau einer Seite gehört.
   ========================================================================== */

/* ── 16.1 Direkte Antwort ────────────────────────────────────────────────
   Die Frage steht als Überschrift, die Antwort daneben und zuerst. */
.answer2{ display:grid; gap:var(--sp-6); }
@media (min-width:1000px){
  .answer2{ grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
            gap:var(--sp-8); align-items:start; }
}
/* Die Frage ist eine Frage, nicht die Hauptueberschrift des Abschnitts.
   Auf der Hero-Stufe brechen lange deutsche Komposita mitten im Wort. */
.answer2__q .t-h2{ font-size:clamp(1.6rem,1.1rem + 1.9vw,2.7rem); line-height:1.14; }
.answer2__a{
  border-left:3px solid var(--accent); padding-left:var(--sp-6);
  max-width:62ch;
}
.answer2__lead{
  font-size:var(--fs-lead); font-weight:600; line-height:1.4;
  letter-spacing:-.012em; color:var(--fg-max);
}
.answer2__a p + p{ margin-top:var(--sp-4); font-size:var(--fs-sm); color:var(--fg); }
.sf-navy .answer2__a,.sf-deep .answer2__a,.sf-slate .answer2__a{ border-left-color:var(--accent-lift); }
@media (max-width:999px){
  .answer2__a{ padding-left:var(--sp-5); }
}

/* ── 16.2 Typische Fehlannahmen ──────────────────────────────────────────
   Zwei Zeilen je Eintrag: was oft angenommen wird, und was zutrifft. */
.myths{ border-top:2px solid var(--rule); }
.myth{ padding-block:var(--sp-5); border-bottom:var(--hair) solid var(--rule); }
@media (min-width:860px){
  .myth{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
         gap:var(--sp-7); align-items:start; }
}
.myth__t{
  display:block; font-family:var(--mono); font-size:var(--fs-mono);
  letter-spacing:.16em; text-transform:uppercase; margin-bottom:.5rem;
  color:var(--muted);
}
.myth__t--r{ color:var(--accent); }
.sf-navy .myth__t,.sf-deep .myth__t{ color:rgba(255,255,255,.62); }
.sf-navy .myth__t--r,.sf-deep .myth__t--r{ color:var(--accent-lift); }
.myth__c{ font-size:var(--fs-sm); color:var(--fg-dim); }
.myth__r{ font-size:var(--fs-base); color:var(--fg-max); font-weight:500; line-height:1.55; }
@media (max-width:859px){ .myth__r{ margin-top:var(--sp-4); } }

/* ── 16.3 Fragen für Beratung und Aufmaß ─────────────────────────────────
   Frage links, Verwendungszweck rechts. Nummer als schmale Spur. */
.ckl{ border-top:2px solid var(--rule); }
.ckl__i{
  display:grid; gap:.4rem var(--sp-6); padding-block:var(--sp-5);
  border-bottom:var(--hair) solid var(--rule); align-items:baseline;
}
@media (min-width:820px){
  .ckl__i{ grid-template-columns:3.5rem minmax(0,1.1fr) minmax(0,1.15fr); }
}
.ckl__n{ font-family:var(--mono); font-size:var(--fs-mono); letter-spacing:.12em;
         color:var(--accent); }
.sf-navy .ckl__n,.sf-deep .ckl__n{ color:var(--accent-lift); }
.ckl__q{ font-size:var(--fs-base); font-weight:600; color:var(--fg-max); line-height:1.4; }
.ckl__w{ font-size:var(--fs-sm); color:var(--fg); }
@media (max-width:819px){
  .ckl__n{ grid-column:1; }
  .ckl__q,.ckl__w{ grid-column:1; }
}

/* ── 16.4 Entscheidungssystem · Signatur /fenster/ ────────────────────────
   Vier Stufen, die aufeinander aufbauen. Waagerecht auf großen Flächen,
   senkrecht mit durchlaufender Spur auf kleinen. */
.chain{ display:grid; gap:0; }
.chain__st{
  position:relative; padding:var(--sp-5) 0 var(--sp-5) var(--sp-6);
  border-left:2px solid var(--rule);
}
.chain__st:first-child{ padding-top:0; }
/* Senkrecht: die Nummer steht im Textfluss, sonst ragt sie ueber den
   linken Rand der Inhaltsspalte hinaus. Waagerecht sitzt sie auf der Linie. */
.chain__n{
  width:1.9rem; height:1.9rem; display:grid; place-items:center;
  margin-bottom:.65rem;
  background:var(--accent); color:#fff;
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.06em;
}
.chain__o{ margin-top:var(--sp-4); display:flex; flex-wrap:wrap; gap:.4rem; }
.chain__o li{
  font-size:var(--fs-xs); padding:.4rem .7rem;
  border:var(--hair) solid var(--rule); color:var(--fg);
}
.chain__d{ margin-top:var(--sp-4); font-size:var(--fs-sm); color:var(--fg); max-width:46ch; }
.chain__d .mono{
  display:block; font-size:var(--fs-mono); letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); margin-bottom:.35rem;
}
.sf-navy .chain__n,.sf-deep .chain__n{ background:var(--accent-lift); color:var(--navy-deep); }
.sf-navy .chain__d .mono,.sf-deep .chain__d .mono{ color:rgba(255,255,255,.62); }
/* Zwischenstufe: zwei Spalten, bevor vier Spalten genug Breite haben.
   Bei 1024px waere eine Spalte nur 186px breit und Woerter brechen im Wort. */
@media (min-width:720px) and (max-width:1179px){
  .chain{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:var(--sp-7); }
}
@media (min-width:1180px){
  .chain{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; }
  .chain__st{
    padding:var(--sp-7) var(--sp-5) 0 var(--sp-5);
    border-left:0; border-top:2px solid var(--rule);
  }
  .chain__st:first-child{ padding-left:0; padding-top:var(--sp-7); }
  .chain__st:last-child{ padding-right:0; }
  .chain__n{ position:absolute; left:var(--sp-5); top:0;
             transform:translateY(-50%); margin-bottom:0; }
  .chain__st:first-child .chain__n{ left:0; }
  /* Pfeil zwischen den Stufen */
  .chain__st + .chain__st::before{
    content:"→"; position:absolute; left:0; top:0; transform:translate(-60%,-58%);
    font-family:var(--mono); font-size:.9rem; color:var(--muted); background:inherit;
  }
}

/* ── 16.5 Bauteile am Element · Signatur /haustueren/ ────────────────────
   Zeichnung und nummerierte Bauteilliste als ein Block. */
.co{ display:grid; gap:var(--sp-6); }
@media (min-width:960px){
  .co{ grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr); gap:var(--sp-8);
       align-items:start; }
  .co__media{ position:sticky; top:calc(var(--head-h) + var(--sp-5)); }
  /* Ohne Zeichnung keine leere Spalte: Die Liste nimmt die volle Breite und
     stellt Nummer, Titel und Erlaeuterung nebeneinander — dieselbe Aufteilung
     wie `.ledger__row`, damit kein zweites Listenbild entsteht. Die
     Zeilenlaenge bleibt durch die 56ch an `.co__i p:last-child` begrenzt. */
  .co--solo{ grid-template-columns:minmax(0,1fr); }
  .co--solo .co__i{ grid-template-columns:2.6rem minmax(0,1.05fr) minmax(0,1.45fr);
                    align-items:baseline; gap:var(--sp-4) var(--sp-6); }
  .co--solo .co__i > div{ display:contents; }
  .co--solo .co__i p:last-child{ margin-top:0; }
}
.co__list{ border-top:2px solid var(--rule); }
.co__i{
  display:grid; grid-template-columns:2.6rem minmax(0,1fr); gap:var(--sp-4);
  padding-block:var(--sp-5); border-bottom:var(--hair) solid var(--rule);
}
.co__n{
  width:2rem; height:2rem; display:grid; place-items:center;
  border:var(--hair) solid var(--accent); color:var(--accent);
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.06em;
  border-radius:50%;
}
.sf-navy .co__n,.sf-deep .co__n{ border-color:var(--accent-lift); color:var(--accent-lift); }
.co__i p:last-child{ font-size:var(--fs-sm); color:var(--fg); margin-top:.3rem; max-width:56ch; }

/* ── 16.6 Anforderungsskala · Signatur /schiebeelemente/ ─────────────────
   Je Faktor eine Skala von unkritisch bis vorab zu klären. Keine Zahlen,
   nur die Richtung der Anforderung. */
.gauges{ display:grid; gap:var(--sp-6); }
.gauge{ border-top:2px solid var(--rule); padding-top:var(--sp-5); }
.gauge__bar{ display:grid; margin-top:var(--sp-4); gap:2px; }
@media (min-width:760px){ .gauge__bar{ grid-template-columns:1fr 1fr 1fr; } }
.gauge__s{
  display:block; padding:var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-5);
  border-left:3px solid currentColor;
}
.gauge__s b{ display:block; font-size:var(--fs-sm); font-weight:600; color:var(--fg-max); }
.gauge__s i{
  display:block; margin-top:.3rem; font-style:normal;
  font-family:var(--mono); font-size:var(--fs-mono);
  letter-spacing:.12em; text-transform:uppercase;
}
.gauge__s[data-s="ok"]{ color:var(--ok); background:rgba(23,120,86,.06); }
.gauge__s[data-s="mid"]{ color:var(--warn); background:rgba(154,102,20,.07); }
/* eigene, dunklere Akzentstufe: der Basisakzent erreicht auf dieser
   getönten Fläche nur 4.39:1 und fällt damit unter AA */
.gauge__s[data-s="hi"]{ color:#1F5F74; background:rgba(45,115,139,.07); }
.sf-navy .gauge__s[data-s="ok"],.sf-deep .gauge__s[data-s="ok"]{ color:#7FD1AE; background:rgba(255,255,255,.05); }
.sf-navy .gauge__s[data-s="mid"],.sf-deep .gauge__s[data-s="mid"]{ color:#E8B963; background:rgba(255,255,255,.05); }
.sf-navy .gauge__s[data-s="hi"],.sf-deep .gauge__s[data-s="hi"]{ color:var(--accent-lift); background:rgba(255,255,255,.05); }
.gauge__n{ margin-top:var(--sp-4); font-size:var(--fs-sm); color:var(--fg); max-width:62ch; }

/* ── 16.7 Lichtführung · Signatur /rolllaeden-raffstores/ ────────────────
   Zwei Prinzipbilder nebeneinander, damit der Unterschied sichtbar wird. */
.shade{ display:grid; gap:var(--sp-7); }
@media (min-width:900px){ .shade{ grid-template-columns:1fr 1fr; gap:var(--sp-8); } }
.shade__art{ border:var(--hair) solid var(--rule); }
/* Die Prinzipzeichnung wird vollstaendig gezeigt, nicht beschnitten. */
.shade__art .media{ aspect-ratio:38/25; background:var(--white); }
.shade__art .media > svg{ object-fit:contain; padding:var(--sp-4); }
.shade__p .kicker{ margin-top:var(--sp-5); }
.shade__p .t-h3{ margin-top:.4rem; }
.shade__l{ margin-top:var(--sp-4); }
.shade__l li{
  font-size:var(--fs-sm); color:var(--fg); padding-block:.5rem;
  border-bottom:var(--hair) solid var(--rule); padding-left:1.2rem; position:relative;
}
.shade__l li::before{
  content:""; position:absolute; left:0; top:1.05em;
  width:.5rem; height:var(--hair); background:var(--accent);
}
.sf-navy .shade__l li::before,.sf-deep .shade__l li::before{ background:var(--accent-lift); }

/* ── 16.8 Entscheidungspfad · Signatur /leistungen/ ──────────────────────
   Situation in der Sprache der Anfragenden, daneben das passende Ziel. */
.route{ border-top:2px solid var(--rule); }
.route__i{
  display:grid; gap:.5rem var(--sp-6); padding-block:var(--sp-5);
  border-bottom:var(--hair) solid var(--rule); align-items:center;
}
@media (min-width:1024px){
  .route__i{ grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr) 17rem; }
}
.route__s{
  font-size:var(--fs-lead); font-weight:600; line-height:1.34;
  letter-spacing:-.01em; color:var(--fg-max);
}
.route__w{ font-size:var(--fs-sm); color:var(--fg); }
.route__g{
  display:inline-flex; align-items:center; gap:.6rem; justify-self:stretch;
  justify-content:space-between; text-decoration:none;
  min-height:44px; padding:.7rem var(--sp-4);
  border:var(--hair) solid var(--accent); color:var(--accent);
  font-size:var(--fs-sm); font-weight:600; line-height:1.3; text-align:left;
}
/* Beschriftungen duerfen umbrechen, statt ueber den Rahmen zu laufen. */
.route__g > span{ flex:0 0 auto; }
.route__g{ align-items:center; }
.route__g:hover{ background:var(--accent); color:#fff; }
.route__g span{ font-family:var(--mono); }
.sf-navy .route__g,.sf-deep .route__g{ border-color:var(--accent-lift); color:var(--accent-lift); }
.sf-navy .route__g:hover,.sf-deep .route__g:hover{ background:var(--accent-lift); color:var(--navy-deep); }

/* ── 16.9 Mobile Verdichtung der Phase-2-Module ──────────────────────────*/
@media (max-width:767px){
  .answer2__lead{ font-size:calc(var(--fs-lead) * .94); }
  .myth{ padding-block:var(--sp-4); }
  .ckl__i{ padding-block:var(--sp-4); }
  .chain__o li{ font-size:.8125rem; }
  .co__i{ grid-template-columns:2.2rem minmax(0,1fr); gap:var(--sp-3); }
  .gauge__s{ padding:var(--sp-3) var(--sp-4); }
  .shade__l li{ padding-block:.45rem; }
  .route__s{ font-size:var(--fs-base); }
}

/* ==========================================================================
   17 BEWEISBAUSTEINE FÜR PLANUNG UND AUSFÜHRUNG (Phase 3)
   Vier Leitbausteine, je einer pro Route, dazu die Zuständigkeitsliste.
   ========================================================================== */

/* ── 17.1 Aufnahmebogen · Signatur /beratung-aufmass/ ────────────────────
   Sieht aus wie das Formular, das beim Termin tatsächlich ausgefüllt wird. */
.sheet{ border:var(--hair) solid var(--rule); background:var(--white); }
.sf-navy .sheet,.sf-deep .sheet,.sf-slate .sheet{
  background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.22);
}
.sheet__g + .sheet__g{ border-top:2px solid var(--rule); }
.sheet__gt{
  display:flex; align-items:baseline; gap:var(--sp-4);
  padding:var(--sp-4) var(--sp-5); background:var(--mint);
  font-size:var(--fs-base); font-weight:600; color:var(--navy);
}
.sf-navy .sheet__gt,.sf-deep .sheet__gt{ background:rgba(255,255,255,.06); color:#fff; }
.sheet__gt .mono{
  font-size:var(--fs-mono); letter-spacing:.16em; color:var(--accent);
}
.sf-navy .sheet__gt .mono,.sf-deep .sheet__gt .mono{ color:var(--accent-lift); }
.sheet__fs{ display:grid; }
@media (min-width:900px){ .sheet__fs{ grid-template-columns:1fr 1fr; } }
.sheet__f{
  padding:var(--sp-4) var(--sp-5);
  border-top:var(--hair) solid var(--rule);
}
@media (min-width:900px){
  .sheet__f:nth-child(odd){ border-right:var(--hair) solid var(--rule); }
}
.sheet__k{
  font-family:var(--mono); font-size:var(--fs-mono); letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin-bottom:.4rem;
}
.sf-navy .sheet__k,.sf-deep .sheet__k{ color:rgba(255,255,255,.66); }
.sheet__v{ font-size:var(--fs-sm); font-weight:600; color:var(--fg-max); }
.sheet__w{ font-size:var(--fs-xs); color:var(--fg-dim); margin-top:.35rem; max-width:44ch; }

/* ── 17.2 Arbeitsschritte mit Foto-Slot · Signatur /montage-abdichtung/ ──
   Jeder Schritt hat den Platz, an dem später ein echtes Baustellenbild steht. */
.wss{ display:grid; gap:var(--sp-7); }
.ws{ display:grid; gap:var(--sp-5); align-items:start; }
@media (min-width:860px){
  .ws{ grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:var(--sp-7); }
  .ws:nth-child(even) .ws__media{ order:2; }
  /* Ein Schritt ohne Zeichnung reserviert keine Bildspalte mehr. Traegt kein
     Schritt eine, laeuft der Baustein einspaltig — der Wechsel links/rechts
     hat ohne Bilder nichts mehr zu wechseln.

     Die Schritte werden dann nicht zweispaltig gesetzt: Die Ueberschrift
     lautet „Sechs Arbeitsschritte, die sich nicht vertauschen lassen", und
     zwei Spalten laden dazu ein, erst die linke von oben nach unten zu
     lesen. Eine Folge, deren Reihenfolge der Inhalt ist, bleibt eine Spalte.

     Stattdessen nimmt der einzelne Schritt die Breite in derselben
     Aufteilung wie `.ledger__row` und `.co--solo .co__i`: Nummer, Titel,
     Erlaeuterung nebeneinander, die Hinweise darunter ueber beide
     Textspalten. Drei Bausteine, ein Muster. */
  .ws--solo{ grid-template-columns:minmax(0,1fr); }
  .wss--solo{ gap:var(--sp-6); }
  .wss--solo .ws__b{
    display:grid; align-items:baseline;
    grid-template-columns:4.5rem minmax(0,1.05fr) minmax(0,1.45fr);
    column-gap:var(--sp-6);
  }
  .wss--solo .ws__n{ grid-column:1; margin-bottom:0; }
  .wss--solo .ws__b > .t-h3{ grid-column:2; }
  .wss--solo .ws__t{ grid-column:3; margin-top:0; }
  .wss--solo .ws__c{ grid-column:2 / -1; margin-top:var(--sp-4); }
}
.ws__b{ position:relative; }
.ws__n{
  display:block; font-family:var(--mono); font-size:var(--fs-mono);
  letter-spacing:.16em; color:var(--accent); margin-bottom:.5rem;
}
.sf-navy .ws__n,.sf-deep .ws__n{ color:var(--accent-lift); }
.ws__t{ margin-top:var(--sp-4); font-size:var(--fs-sm); color:var(--fg); max-width:58ch; }
.ws__c{ margin-top:var(--sp-4); border-top:var(--hair) solid var(--rule); }
.ws__c li{
  font-size:var(--fs-xs); color:var(--fg-dim); padding-block:.55rem;
  border-bottom:var(--hair) solid var(--rule); padding-left:1.1rem; position:relative;
}
.ws__c li::before{
  content:""; position:absolute; left:0; top:.95em;
  width:.45rem; height:var(--hair); background:var(--accent);
}
.sf-navy .ws__c li::before,.sf-deep .ws__c li::before{ background:var(--accent-lift); }
.ws__art{ border:var(--hair) solid var(--rule); }

/* ── 17.3 Verantwortung und Übergabe · Signatur /ablauf/ ─────────────────
   Keine Schritte-Karten, sondern drei Spalten je Schritt: wir, Sie, Übergabe. */
.ho{ border-top:2px solid var(--rule); }
.ho__r{
  display:grid; gap:var(--sp-4); padding-block:var(--sp-5);
  border-bottom:var(--hair) solid var(--rule);
}
@media (min-width:1000px){
  .ho__r{ grid-template-columns:minmax(0,.85fr) repeat(3,minmax(0,1fr));
          gap:var(--sp-6); align-items:start; }
}
.ho__s{
  display:flex; flex-direction:column; gap:.45rem;
  font-size:var(--fs-base); font-weight:600; color:var(--fg-max); line-height:1.35;
}
.ho__s .mono{ font-size:var(--fs-mono); letter-spacing:.16em; color:var(--accent); font-weight:400; }
.sf-navy .ho__s .mono,.sf-deep .ho__s .mono{ color:var(--accent-lift); }
.ho__c p:last-child{ font-size:var(--fs-sm); color:var(--fg); }
.ho__l{
  font-family:var(--mono); font-size:var(--fs-mono); letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin-bottom:.4rem;
}
.sf-navy .ho__l,.sf-deep .ho__l{ color:rgba(255,255,255,.62); }
.ho__c--h{ border-left:2px solid var(--accent); padding-left:var(--sp-4); }
.sf-navy .ho__c--h,.sf-deep .ho__c--h{ border-left-color:var(--accent-lift); }
.ho__c--h .ho__l{ color:var(--accent); }
.sf-navy .ho__c--h .ho__l,.sf-deep .ho__c--h .ho__l{ color:var(--accent-lift); }

/* ── 17.4 Vergleichsbogen · Signatur /systeme-marken/ ────────────────────
   Zwei leere Spalten, die im Angebotsgespräch selbst ausgefüllt werden. */
.wsh{ border:var(--hair) solid var(--rule); background:var(--white); }
.sf-navy .wsh,.sf-deep .wsh{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.22); }
.wsh__head,.wsh__r{ display:grid; }
@media (min-width:760px){
  .wsh__head,.wsh__r{ grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr); }
}
.wsh__head{
  background:var(--navy); color:#fff;
  font-family:var(--mono); font-size:var(--fs-mono); letter-spacing:.14em;
  text-transform:uppercase;
}
.wsh__head span{ padding:var(--sp-4) var(--sp-5); }
@media (min-width:760px){
  .wsh__head span + span{ border-left:var(--hair) solid rgba(255,255,255,.28); }
}
.wsh__r{ border-top:var(--hair) solid var(--rule); }
.wsh__k{ padding:var(--sp-4) var(--sp-5); }
.wsh__k p:first-child{ font-size:var(--fs-sm); font-weight:600; color:var(--fg-max); }
.wsh__h{ font-size:var(--fs-xs); color:var(--fg-dim); margin-top:.3rem; max-width:46ch; }
/* Eine Schreiblinie je Zeile, unabhaengig von der Zeilenhoehe. Ein
   durchlaufendes Linienmuster verrutscht gegen die Zeilengrenzen. */
.wsh__blank{
  position:relative; min-height:3.4rem;
  border-left:var(--hair) solid var(--rule);
}
.wsh__blank::after{
  content:""; position:absolute; left:var(--sp-5); right:var(--sp-5); bottom:38%;
  height:var(--hair); background:var(--rule);
}
@media (max-width:759px){
  .wsh__blank{ min-height:2.6rem; border-left:0; border-top:var(--hair) dashed var(--rule); }
  .wsh__blank::after{ left:var(--sp-4); right:var(--sp-4); }
  .wsh__head span:not(:first-child){ display:none; }
}

/* ── 17.5 Mobile Verdichtung der Phase-3-Module ──────────────────────────*/
@media (max-width:767px){
  .sheet__gt,.sheet__f{ padding:var(--sp-4); }
  .wss{ gap:var(--sp-6); }
  .ws{ gap:var(--sp-4); }
  .ho__r{ padding-block:var(--sp-4); }
  .ho__c--h{ padding-left:var(--sp-3); }
  .wsh__k{ padding:var(--sp-4); }
}

/* ── 17.6 Grundlage und Grenzen eines Fachartikels ───────────────────────
   Steht am Ende jedes Wissensartikels und sagt, worauf er beruht und was
   er ausdrücklich nicht behauptet. */
.basis{ border:var(--hair) solid var(--rule); padding:var(--sp-6); max-width:74ch; }
.sf-navy .basis,.sf-deep .basis{ border-color:rgba(255,255,255,.22); }
.basis .t-h3{ margin-top:.5rem; }
.basis__l{ margin-top:var(--sp-5); border-top:var(--hair) solid var(--rule); }
.basis__l li{
  display:grid; gap:.3rem var(--sp-5); padding-block:var(--sp-4);
  border-bottom:var(--hair) solid var(--rule); font-size:var(--fs-sm); color:var(--fg);
}
@media (min-width:700px){ .basis__l li{ grid-template-columns:9.5rem minmax(0,1fr); } }
.basis__l .mono{
  font-size:var(--fs-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.sf-navy .basis__l .mono,.sf-deep .basis__l .mono{ color:rgba(255,255,255,.66); }

/* Aufzaehlung im Text-neben-Bild-Baustein. Die Farbe stand fruehe inline und
   erreichte auf dunklem Grund nur 2,41:1. */
.split__i{ display:flex; gap:.7rem; padding-block:.35rem; }
.split__m{ color:var(--accent); }
.sf-navy .split__m,.sf-deep .split__m,.sf-slate .split__m{ color:var(--accent-lift); }

/* ── 18 PRIMÄRER WEG JE SEITE (Phase 6) ─────────────────────────────────
   Die CTA-Matrix bestimmt je Route, welcher Weg vorn steht. Steht dort ein
   Anruf oder WhatsApp, muss er auch aussehen wie der Hauptweg. Vorher trug
   immer die Anfrage das gefüllte Erscheinungsbild, unabhängig von der
   festgelegten Priorität. */
.cta-call.cta--lead{
  background:var(--accent); color:#fff;
  border:2px solid var(--accent); padding:.85rem 1.6rem; font-weight:600;
}
.cta-call.cta--lead:hover{ background:var(--accent-hover); border-color:var(--accent-hover); }
/* Die Nummer trug eine eigene Farbe aus --fg-max und stand damit auf der
   gefuellten Schaltflaeche weiss auf weiss. Sie erbt jetzt die Buttonfarbe. */
.cta-call.cta--lead .num{ color:inherit; }
.sf-navy .cta-call.cta--lead,.sf-deep .cta-call.cta--lead,.sf-slate .cta-call.cta--lead{
  background:#fff; color:var(--navy); border-color:#fff;
}
.sf-navy .cta-call.cta--lead:hover,.sf-deep .cta-call.cta--lead:hover{
  background:var(--mint); border-color:var(--mint);
}
/* Steht die Anfrage nicht an erster Stelle, tritt sie sichtbar zurück. */
.cta-request:not(.cta--lead){
  background:transparent; color:var(--fg-max); border-color:var(--steel); font-weight:500;
}
.cta-request:not(.cta--lead):hover{ background:var(--mint); border-color:var(--navy); }
.sf-navy .cta-request:not(.cta--lead),.sf-deep .cta-request:not(.cta--lead),
.sf-slate .cta-request:not(.cta--lead){
  background:transparent; color:#fff; border-color:rgba(255,255,255,.42);
}
.sf-navy .cta-request:not(.cta--lead):hover,.sf-deep .cta-request:not(.cta--lead):hover{
  background:rgba(255,255,255,.1); border-color:#fff;
}

/* ── 19 FORTSCHRITT IM FORMULAR AUF KLEINEN SCHIRMEN (Phase 8) ──────────
   Neun beschriftete Kästen ergeben bei 390 px je 38 px Breite; sichtbar
   blieb nur „0…“. Unterhalb von 700 px wird die Leiste zur reinen
   Fortschrittsspur, dazu tritt die Schrittangabe sichtbar daneben. */
@media (max-width:699px){
  .steps-bar{ margin-bottom:var(--sp-4); }
  .steps-bar li{ padding:0; height:.5rem; font-size:0; text-indent:-9999px; }
  .steps-bar li[aria-current="step"]{ background:var(--accent); }
  .steps-bar li[data-done="true"]{ background:var(--accent-lift); }
  /* .vh setzt position mit !important, das muss hier gleichwertig zurueck. */
  [data-wizard] [data-live].vh{
    position:static!important; width:auto!important; height:auto!important;
    overflow:visible!important; clip:auto!important; clip-path:none!important;
    white-space:normal!important; margin:0 0 var(--sp-5)!important;
    display:block; margin-bottom:var(--sp-5);
    font-family:var(--mono); font-size:var(--fs-mono); letter-spacing:.14em;
    text-transform:uppercase; color:var(--muted);
  }
}

/* ==========================================================================
   20 WISSENSBEREICH (V4)
   Nur für /wissen/ und die Fachartikel. Grundhaltung: Planungsakte statt
   Magazin. Mehr Ordnung über Achsen, Kriterienspuren und Flächenwechsel,
   nicht über Farbe, Icons oder Karten.
   ========================================================================== */

/* ── 20.1 Tabellensystem, drei funktional verschiedene Varianten ─────────
   Gemeinsam: echte Tabelle, Kopfzeile dunkel, erste Spalte als Kriterienspur
   auf Mint, ruhige Zeilenführung ohne Zebra und ohne Schatten. */
.matrix{ border:0; border-top:3px solid var(--navy); background:var(--white); }
.sf-navy .matrix,.sf-deep .matrix{ border-top-color:var(--accent-lift); background:rgba(255,255,255,.04); }
.matrix caption{
  caption-side:top; text-align:left; padding:var(--sp-4) var(--sp-5);
  font-size:var(--fs-sm); font-weight:600; color:var(--fg-max);
  border-bottom:var(--hair) solid var(--rule);
}
.matrix thead th{
  background:var(--navy); color:#fff; text-align:left; font-weight:600;
  padding:var(--sp-4) var(--sp-5); font-size:var(--fs-sm); vertical-align:bottom;
}
.matrix thead th + th{ border-left:var(--hair) solid rgba(255,255,255,.22); }
.matrix tbody th[scope="row"]{
  background:var(--mint); color:var(--navy); font-weight:600; text-align:left;
  padding:var(--sp-4) var(--sp-5); font-size:var(--fs-sm); vertical-align:top;
  border-bottom:var(--hair) solid var(--rule); width:1%; white-space:normal;
}
.matrix tbody td{
  padding:var(--sp-4) var(--sp-5); vertical-align:top;
  border-bottom:var(--hair) solid var(--rule); color:var(--fg);
}
.matrix tbody td + td{ border-left:var(--hair) solid var(--rule); }
.matrix tbody tr:last-child th,.matrix tbody tr:last-child td{ border-bottom:0; }
.sf-navy .matrix tbody th[scope="row"],.sf-deep .matrix tbody th[scope="row"]{
  background:rgba(255,255,255,.08); color:#fff;
}

/* Vergleich: zwei oder mehr gleichrangige Spalten, Kopf gleich gewichtet */
.matrix--vergleich thead th:not(:first-child){ width:auto; }

/* Entscheidung: die Spalten sind Wege, nicht Eigenschaften. Die letzte Spalte
   trägt die Empfehlung und bekommt eine sichtbare Kante. */
.matrix--entscheidung tbody td:last-child{
  border-left:2px solid var(--accent); background:rgba(45,115,139,.045);
}
.matrix--entscheidung thead th:last-child{ background:var(--accent); }
.sf-navy .matrix--entscheidung tbody td:last-child,
.sf-deep .matrix--entscheidung tbody td:last-child{
  border-left-color:var(--accent-lift); background:rgba(255,255,255,.05);
}
.sf-navy .matrix--entscheidung thead th:last-child,
.sf-deep .matrix--entscheidung thead th:last-child{ background:rgba(143,194,212,.22); }

/* Zuordnung: Begriff links, Bedeutung rechts, keine Kopfzeile nötig */
.matrix--zuordnung{ border-top-width:2px; }
.matrix--zuordnung tbody th[scope="row"]{ background:transparent; width:26%; }
.matrix--zuordnung tbody td{ border-left:0; }

/* Waagerechter Bildlauf mit sichtbarem Hinweis statt stiller Abschneidung */
.tabelle{ margin-top:var(--sp-7); }
.tabelle__scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tabelle__hint{
  display:none; align-items:center; gap:.5rem; margin-top:var(--sp-3);
  font-family:var(--mono); font-size:var(--fs-mono); letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted);
}
.tabelle__hint::before{ content:"↔"; font-size:1rem; }
@media (max-width:767px){ .tabelle__hint{ display:flex; } }
.sf-navy .tabelle__hint,.sf-deep .tabelle__hint{ color:rgba(255,255,255,.66); }

/* ── 20.2 Abschnittsachse in Wissensseiten ──────────────────────────────
   Sichtbare Kapitelnummer am linken Rand. Sie ersetzt keine Überschrift,
   sie gibt Position in einem langen Text. */
.fam-c .band > .shell{ position:relative; }
@media (min-width:1080px){
  .fam-c .band[data-kap] > .shell{ padding-left:4.25rem; }
  .fam-c .band[data-kap] > .shell::before{
    content:attr(data-kap); position:absolute; left:0; top:.35rem;
    font-family:var(--mono); font-size:var(--fs-mono); letter-spacing:.14em;
    color:var(--muted); border-top:2px solid var(--rule); padding-top:.55rem;
    width:2.75rem;
  }
  .sf-navy.band[data-kap] > .shell::before,.sf-deep.band[data-kap] > .shell::before{
    color:rgba(255,255,255,.6); border-top-color:rgba(255,255,255,.28);
  }
}

/* ── 20.3 Glossar: Begriff, Kurzdefinition, Zielseite ────────────────────*/
.gloss{ border-top:2px solid var(--rule); }
.gloss__grp{ scroll-margin-top:calc(var(--head-h) + 4rem); }
.gloss__key{
  position:sticky; top:calc(var(--head-h) + .25rem); z-index:2;
  display:flex; align-items:baseline; gap:var(--sp-4);
  padding:var(--sp-3) 0; background:var(--white);
  border-bottom:2px solid var(--navy);
}
.gloss__key b{ font-size:1.35rem; font-weight:600; color:var(--navy); line-height:1; }
.gloss__key span{
  font-family:var(--mono); font-size:var(--fs-mono); letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
}
.gloss__i{
  display:grid; gap:.35rem var(--sp-6); padding-block:var(--sp-5);
  border-bottom:var(--hair) solid var(--rule); align-items:start;
}
@media (min-width:820px){ .gloss__i{ grid-template-columns:minmax(0,.42fr) minmax(0,1fr); } }
.gloss__t{ font-size:var(--fs-base); font-weight:600; color:var(--fg-max); line-height:1.35; }
.gloss__d{ font-size:var(--fs-sm); color:var(--fg); max-width:62ch; }
.gloss__go{
  display:inline-flex; align-items:center; gap:.45rem; min-height:44px;
  font-size:var(--fs-xs); font-weight:600; color:var(--accent); text-decoration:none;
}
.gloss__go:hover{ text-decoration:underline; text-underline-offset:3px; }
.gloss__go span{ font-family:var(--mono); }
/* Buchstabenleiste */
.gloss__nav{ display:flex; flex-wrap:wrap; gap:.35rem; margin-top:var(--sp-6); }
.gloss__nav a{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; min-height:44px; padding:0 .5rem;
  border:var(--hair) solid var(--rule); color:var(--fg-max);
  font-family:var(--mono); font-size:.8125rem; text-decoration:none;
}
.gloss__nav a:hover{ background:var(--mint); border-color:var(--navy); }

/* ── 20.4 FAQ: dichter, mit sichtbarer Gruppenordnung ────────────────────*/
.fam-c .qa details{ padding-block:0; }
.fam-c .qa summary{ padding-block:var(--sp-4); font-size:var(--fs-base); line-height:1.4; }
.fam-c .qa__a{ padding-bottom:var(--sp-5); }
.qa-grp{ margin-top:var(--sp-7); }
.qa-grp__h{
  display:flex; align-items:baseline; gap:var(--sp-4);
  padding-bottom:var(--sp-3); border-bottom:2px solid var(--navy);
}
.qa-grp__h .mono{ font-size:var(--fs-mono); letter-spacing:.14em;
                  text-transform:uppercase; color:var(--accent); }
.qa-grp__h p{ font-size:var(--fs-h4); font-weight:600; color:var(--fg-max); }

/* ── 20.5 Grundlage und Grenzen: trägt die Glaubwürdigkeit, also sichtbar ─*/
.basis{ border:0; border-top:3px solid var(--navy); background:var(--mint);
        padding:var(--sp-7); max-width:78ch; }
.sf-navy .basis,.sf-deep .basis{ background:rgba(255,255,255,.05);
        border-top-color:var(--accent-lift); }
.basis .kicker::before{ background:var(--accent); }
.basis__l{ border-top:2px solid var(--rule); }
.basis__l li:last-child{ border-bottom:0; }

/* ── 20.6 Drei redaktionelle Artikelmuster ───────────────────────────────
   Gleiche Grundstruktur, andere Führung. Der Unterschied entsteht aus dem,
   was der Artikeltyp beweisen muss, nicht aus Dekoration.

   vergleich  Die Entscheidungshilfe trägt den Artikel. Sie bekommt Raum,
              eine eigene Fläche und die stärkste Kante.
   ablauf     Der Weg trägt den Artikel. Die Schrittlisten führen, die
              Nummern laufen als Spur mit.
   technik    Die Erklärung trägt den Artikel. Zeichnung und Legende stehen
              im Vordergrund, der Fließtext bekommt mehr Ruhe. */

/* Vergleich */
.art-vergleich .tabelle{ margin-top:var(--sp-8); }
.art-vergleich .matrix{ border-top-width:4px; }
.art-vergleich .matrix caption{ font-size:var(--fs-base); padding-block:var(--sp-5); }
.art-vergleich .band:has(.tabelle){ background:var(--mint); }
.art-vergleich .band:has(.tabelle) .matrix{ background:var(--white); }
.art-vergleich .answer2__a{ border-left-width:4px; }

/* Ablauf */
.art-ablauf .ckl__n,.art-ablauf .ledger__n{
  font-size:.9375rem; font-weight:600; color:var(--navy);
}
.art-ablauf .sf-navy .ckl__n,.art-ablauf .sf-deep .ckl__n,
.art-ablauf .sf-navy .ledger__n,.art-ablauf .sf-deep .ledger__n{ color:var(--accent-lift); }
.art-ablauf .ckl,.art-ablauf .ledger{ border-top-width:3px; }
.art-ablauf .ckl__i,.art-ablauf .ledger__row{ padding-block:var(--sp-5); }
.art-ablauf .ckl__i + .ckl__i{ border-top:0; }
@media (min-width:820px){
  .art-ablauf .ckl__i{ grid-template-columns:4.5rem minmax(0,1fr) minmax(0,1.1fr); }
}

/* Technik */
.art-technik .b-detail__grid{ align-items:start; }
.art-technik .legend{ border-top:2px solid var(--rule); margin-top:var(--sp-6); }
.art-technik .legend li{ padding-block:var(--sp-4); }
.art-technik .legend .mono{ color:var(--accent); }
/* art-* steht am body, sf-* am Band: die Reihenfolge muss so herum sein. */
.art-technik .sf-navy .legend .mono,.art-technik .sf-deep .legend .mono{ color:var(--accent-lift); }
.art-technik .copy{ max-width:58ch; }
.art-technik .media--detail{ aspect-ratio:1/1; }

/* ── 20.7 Wissenshub: Priorität statt gleichförmiger Liste ───────────────*/
.fam-c .route__i:first-child{ padding-top:var(--sp-6); }
@media (min-width:1024px){
  .fam-c .route__i:first-child .route__s{ font-size:var(--fs-h3); }
}
.fam-c .index-list > li:first-child > a{ background:var(--mint); }
.fam-c .index-list > li:first-child .t-h3{ font-size:var(--fs-h3); }