/* ============================================================
   TRÆN · traen.de · Design-System v2.5
   Quelle: Master Brand Identity v2.5 §11 (Farben, Schrift, Produktkachel, Leise Datenebene,
   Dunkelmodus), §13 (Montage und Wand). Kurzfassung: TRAEN/Marke/TRAEN_Brand_Canon.md.

   Schrift: Söhne mit Klim-Web-Lizenz (Bestellung 26101411, Alex 28.10.2026; Master §11): Söhne Buch/Kräftig (Text),
   Halbfett (Überschriften), Dreiviertelfett (große Zahl), Söhne Mono Buch/Kräftig (Daten, Etikett, Typenschild),
   Söhne Schmal Halbfett (Statement und Ankündigungsleiste). Nur die WOFF2 aus der Web-Lizenz, lokal (DSGVO);
   OTF (Desktop) und TTF (App) nie hier einbinden, nie konvertieren. Keine Serife.

   Farbrollen: Kobalt nur Daten und Links · Emerald nur Status · Buttons in Textfarbe ·
   Burnt Orange nur TENSION · Produktkacheln immer Nebel, auch im Dunkelmodus · keine Verläufe.
   ============================================================ */
@font-face{font-family:"Söhne";src:url("fonts/soehne-buch.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Söhne";src:url("fonts/soehne-kraftig.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Söhne";src:url("fonts/soehne-halbfett.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Söhne";src:url("fonts/soehne-dreiviertelfett.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Söhne Mono";src:url("fonts/soehne-mono-buch.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Söhne Mono";src:url("fonts/soehne-mono-kraftig.woff2") format("woff2");font-weight:500 600;font-style:normal;font-display:swap}   /* 600 nimmt Kräftig, kein künstliches Fett */
@font-face{font-family:"Söhne Schmal";src:url("fonts/soehne-schmal-halbfett.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

:root{
  /* Palette (Master §11) */
  --kreide:#FCFCFA; --anthrazit:#2B2B2B; --nebel:#EDEEEC; --kobalt:#2446C2; --emerald:#2D6A4F;
  --nacht:#161616; --kalk:#F4F2ED; --buche:#D9B48A; --orange:#C2410C;

  /* Rollen · Tag (Calm) */
  --grund:var(--kreide);
  --text:var(--anthrazit);
  --text-leise:#5E5E5A;          /* 6,3 : 1 auf Kreide, 5,6 : 1 auf Nebel */
  --linie:#DFE0DC;
  --linie-stark:var(--anthrazit);
  --flaeche:var(--nebel);        /* Karten, Sekundärflächen */
  --kachel:var(--nebel);         /* Produktkachel: in beiden Lichtstimmungen Nebel */
  --link:var(--kobalt);          /* 7,5 : 1 auf Kreide */
  --status:var(--emerald);       /* 6,2 : 1 auf Kreide */
  --app-frage:var(--status);     /* Frage im App-Bereich: hell Emerald, dunkel das Orange der App (Alex 28.10.2026, Master v2.15) */
  --ansage-grund:var(--nacht);   /* Ankündigungsleiste: Fast-Schwarz wie das Anlass-Band (Alex 28.10.2026) */
  --knopf:var(--kobalt);         /* Knöpfe in Kobalt (Alex 28.10.2026, Master v2.14 §11; vorher Textfarbe), 7,5 : 1 */
  --knopf-text:var(--kreide);
  --knopf-hover:#1D3AA3;
  --kopf:rgba(252,252,250,.94);
  --etikett-grund:rgba(252,252,250,.95);
  --etikett-text:var(--anthrazit);
  --platzhalter:rgba(43,43,43,.13);
  --muster-rand:rgba(43,43,43,.3);   /* Rand der Farbpunkte */

  /* Schrift */
  --display:"Söhne","Helvetica Neue",Arial,sans-serif;
  --sans:"Söhne","Helvetica Neue",Arial,sans-serif;
  --mono:"Söhne Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --schmal:"Söhne Schmal","Arial Narrow",sans-serif;
  --eng:-.03em;                  /* Überschriften eng (Master §11); Söhne braucht weniger als das frühere Inter (-.05em) */

  /* Raster */
  --max:1320px;
  --rand:clamp(16px,4vw,56px);
  --kopf-h:60px;
  --abstand:clamp(88px,10vw,136px);   /* Übergänge S2 (Alex 31.10.2026) */
  --luft:clamp(14px,1.6vw,22px);
  --radius:3px;
  --ease:cubic-bezier(.22,1,.36,1);
  color-scheme:light;
}

/* Abend · Dunkelmodus des Geräts = Arbeitslicht, kein Statement (Master §11, Entscheid 17.10.2026) */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --grund:var(--nacht); --text:var(--kalk); --text-leise:#A9A69F; --linie:#2F2E2B; --linie-stark:var(--kalk);
    --flaeche:#1F1F1D; --link:#8298E8; --status:#439F76; --app-frage:#DB764A; --ansage-grund:#1F1F1D;
    --knopf:#8298E8; --knopf-text:var(--nacht); --knopf-hover:#9EB0EE;
    --kopf:rgba(22,22,22,.94); --platzhalter:rgba(244,242,237,.16); --muster-rand:rgba(244,242,237,.5);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --grund:var(--nacht); --text:var(--kalk); --text-leise:#A9A69F; --linie:#2F2E2B; --linie-stark:var(--kalk);
  --flaeche:#1F1F1D; --link:#8298E8; --status:#439F76; --app-frage:#DB764A; --ansage-grund:#1F1F1D;
  --knopf:#8298E8; --knopf-text:var(--nacht); --knopf-hover:#9EB0EE;
  --kopf:rgba(22,22,22,.94); --platzhalter:rgba(244,242,237,.16); --muster-rand:rgba(244,242,237,.5);
  color-scheme:dark;
}

/* ---------- Grundlage ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--kopf-h) + var(--ansage-h,0px) + 12px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--grund);color:var(--text);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
@media (min-width:760px){body{font-size:17px}}
img,svg{display:block;max-width:100%}
img{height:auto}
p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit}
:focus-visible{outline:2px solid var(--link);outline-offset:3px;border-radius:2px}
::selection{background:var(--text);color:var(--grund)}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--rand)}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:8px;z-index:200;background:var(--knopf);color:var(--knopf-text);padding:10px 14px;border-radius:var(--radius)}
.skip:focus{left:12px}

/* Phasen-Schalter: body.prelaunch bis zum Launch, danach body.live (alle Seiten, s. HANDOVER) */
body.prelaunch .nur-live{display:none!important}
body.live .nur-prelaunch{display:none!important}

/* Ankündigungsleiste über der Kopfzeile (Alex 28.10.2026, Blatt „Ankündigungsleiste“, Version 3): Fast-Schwarz und Söhne Schmal
   wie das Anlass-Band, eine Meldung nach der anderen (site.js); scrollt mit weg, die Kopfzeile bleibt oben. Nur vor dem Launch. */
.ansage{position:sticky;top:0;z-index:101;background:var(--ansage-grund);color:var(--kalk);font:600 14.5px/1.2 var(--schmal);letter-spacing:.06em;text-transform:uppercase}   /* Söhne Schmal läuft schmaler: größer setzen */
.ansage-zeile{position:relative;display:flex;align-items:center;justify-content:center;min-height:36px;padding-block:8px}
.ansage-m{margin:0;padding-inline:8px;text-align:center}
.ansage-m a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.ansage-m.blende{animation:ansage-ein .5s var(--ease) both}
@keyframes ansage-ein{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.ansage-m.blende{animation:none}}

/* ---------- Typografie (Master §11: Headlines kräftig und eng, Body ruhig, Daten in Mono) ---------- */
h1,h2,h3,h4{font-family:var(--display);font-weight:600;margin:0;text-wrap:balance;letter-spacing:var(--eng)}
.h1{font-size:clamp(44px,7.6vw,108px);line-height:.94;letter-spacing:-.035em}
.h1-seite{font-size:clamp(40px,6.2vw,84px);line-height:.96;letter-spacing:-.035em}
h2,.h2{font-size:clamp(32px,4.6vw,60px);line-height:1;letter-spacing:-.03em}
h3,.h3{font-size:clamp(20px,1.9vw,25px);line-height:1.12;letter-spacing:-.02em}
.lead{font-size:clamp(18px,1.55vw,21px);line-height:1.5;color:var(--text-leise);max-width:46ch;text-wrap:pretty}
.text{max-width:60ch;text-wrap:pretty}
.leise{color:var(--text-leise)}
.label{font:500 11.5px/1.35 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--text-leise)}
.mono{font-family:var(--mono)}
.datenzeile{display:block;font:500 12.5px/1.4 var(--mono);letter-spacing:.09em;text-transform:uppercase;padding-top:12px;border-top:1px solid var(--linie-stark)}
.statement{font:600 clamp(48px,8vw,116px)/.9 var(--schmal);text-transform:uppercase;letter-spacing:.005em;text-wrap:balance}

/* Platzhalter-Text: Wortlaut kommt aus dem Copywriting-Projekt (daten/texte.json). Wortbalken statt
   eckiger Klammern — sichtbar als Fläche in der richtigen Länge, nie als Arbeitsmarker im Text. */
.ph{display:inline}
.ph i{display:inline-block;height:.6em;width:calc(var(--l) * .5em);margin-right:.3em;border-radius:2px;background:var(--platzhalter);vertical-align:-.02em}
.ph i:last-child{margin-right:0}

/* ---------- Links und Buttons ---------- */
.link{color:var(--link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.link:hover{text-decoration-thickness:2px}
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:48px;padding:13px 24px;border:0;border-radius:2px;background:var(--knopf);color:var(--knopf-text);font:500 15px/1.2 var(--sans);letter-spacing:.005em;text-decoration:none;white-space:nowrap;transition:background-color .2s var(--ease)}
.knopf:hover{background:var(--knopf-hover)}
.knopf.zweit{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1.5px var(--linie-stark)}
.knopf.zweit:hover{background:var(--flaeche)}
.knopf .pfeil{transition:transform .3s var(--ease)}
.knopf:hover .pfeil{transform:translateX(3px)}
.status{display:inline-flex;align-items:center;gap:9px;font:500 12.5px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--status);flex:none}

/* ---------- Kopf und Navigation ---------- */
.kopf{position:sticky;top:var(--ansage-h,0px);z-index:100;background:var(--kopf);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .3s var(--ease)}
.kopf.gescrollt,.kopf.offen{border-bottom-color:var(--linie)}
.kopf-zeile{height:var(--kopf-h);display:flex;align-items:center;gap:clamp(16px,3vw,40px)}
.wm{display:inline-block;aspect-ratio:900/207;background:currentColor;-webkit-mask:url("img/wordmark-dark.png") center/contain no-repeat;mask:url("img/wordmark-dark.png") center/contain no-repeat}
.kopf .marke{display:inline-flex;align-items:center;padding-block:8px;color:var(--text)}
.kopf .marke .wm{width:76px}
.nav{display:none;align-items:center;gap:clamp(18px,2.4vw,32px);margin-left:auto}
.nav a,.nav button{font:500 14.5px/1 var(--sans);background:none;border:0;padding:10px 0;color:var(--text);text-decoration:none;opacity:.78;transition:opacity .2s}
.nav a:hover,.nav button:hover,.nav [aria-expanded="true"],.nav [aria-current="page"]{opacity:1}
.nav [aria-current="page"]{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.nav button::after{content:"";display:inline-block;width:6px;height:6px;margin-left:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-3px) rotate(45deg);transition:transform .25s var(--ease)}
.nav button[aria-expanded="true"]::after{transform:translateY(0) rotate(-135deg)}
.menue-knopf{margin-left:auto;display:inline-flex;align-items:center;gap:10px;min-height:44px;background:none;border:0;padding:10px 0;font:500 14.5px/1 var(--sans)}   /* 44 px (Formatcheck B1) */
.menue-knopf .striche{position:relative;width:20px;height:12px}
.menue-knopf .striche::before,.menue-knopf .striche::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .25s var(--ease),top .25s var(--ease)}
.menue-knopf .striche::before{top:2px}
.menue-knopf .striche::after{top:9px}
.menue-knopf[aria-expanded="true"] .striche::before{top:5.5px;transform:rotate(45deg)}
.menue-knopf[aria-expanded="true"] .striche::after{top:5.5px;transform:rotate(-45deg)}
.panel{display:none;border-top:1px solid var(--linie);background:var(--grund);max-height:calc(100dvh - var(--kopf-h) - var(--ansage-h,0px));overflow-y:auto;overscroll-behavior:contain}
.panel.offen{display:block}
.panel .wrap{padding-block:20px 28px}
.panel-raster{list-style:none;display:grid;grid-template-columns:minmax(0,1fr)}
.panel-raster a{display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:14px;align-items:center;align-content:center;padding:8px 0;border-bottom:1px solid var(--linie);text-decoration:none}
.panel-raster .bild{grid-row:span 2;width:64px;aspect-ratio:1/1;border-radius:2px}
.panel-raster .leer .label{display:none}
.panel-raster b{font:600 15px/1.25 var(--sans);align-self:end}
.panel-raster span.mono{font-size:11px;letter-spacing:.06em;color:var(--text-leise);align-self:start;margin-top:3px}
.panel-links{list-style:none;display:grid;margin-top:22px;border-top:1px solid var(--linie)}
.panel-links a{display:flex;justify-content:space-between;align-items:center;padding:16px 0;border-bottom:1px solid var(--linie);font:600 19px/1.2 var(--display);letter-spacing:-.01em;text-decoration:none}
.panel-alle{display:inline-block;margin-top:18px}
@media (min-width:900px){
  :root{--kopf-h:68px}
  .kopf .marke .wm{width:84px}
  .nav{display:flex}
  .menue-knopf{display:none}
  .panel-raster{grid-template-columns:repeat(7,minmax(0,1fr));gap:16px}
  .panel-raster a{grid-template-columns:minmax(0,1fr);row-gap:8px;padding:0;border:0;align-content:start}
  .panel-raster .bild{grid-row:auto;width:100%}
  .panel-raster b{font-size:14px;align-self:start}
  .panel-links{display:none}
  .panel .wrap{padding-block:24px 30px}
}
@media (prefers-reduced-motion:no-preference){
  .panel.offen .panel-raster > li{animation:auftauchen .45s var(--ease) both;animation-delay:calc(var(--i,0) * 35ms)}
}
@keyframes auftauchen{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* N2 · Produkte-Leiste in Gruppen nach Produktart, eine Ebene (Alex 18.10.2026). Desktop: alle sieben Kacheln gleich breit
   (Subgrid), jede Gruppe mit eigener Linie unter dem Titel. Handy: Titel über der Liste. */
.panel-gruppen{display:grid;gap:22px}
.panel-gruppe > .label{padding-bottom:7px;border-bottom:1px solid var(--linie-stark)}
@media (min-width:900px){
  .panel-gruppen{grid-template-columns:repeat(8,minmax(0,1fr));column-gap:14px;row-gap:0}   /* 8 Spalten: App + 7 Geräte (Alex 31.10.2026) */
  .panel-gruppe{display:grid;grid-column:span var(--n);grid-template-columns:subgrid;row-gap:14px;align-content:start}
  .panel-gruppe > .label,.panel-gruppe .panel-raster{grid-column:1/-1}
  .panel-gruppe .panel-raster{grid-template-columns:subgrid}
}

/* ---------- Bild und Bildetikett (Herkunft jedes Bildteils, Master §11) ---------- */
.bild{position:relative;overflow:hidden;border-radius:var(--radius);background:var(--kachel)}
.bild img{width:100%;height:100%;object-fit:cover}
.bild.leer{display:grid;place-items:center}
.bild.leer .label{font-size:10.5px;color:#5E5E5A}   /* Nebel bleibt hell, auch abends */
/* Formatcheck 19.10.2026: 10,5 px auch am Handy (E2); Felder brechen im Feld um statt abgeschnitten zu werden (E3); am Handy fällt
   nur das Modellkürzel weg (Klasse „kuerzel“ aus tools/build.py), nie ein Herkunftsfeld (E4, Prüfung in tools/pruefen.py) */
.etikett{position:absolute;left:10px;bottom:10px;display:inline-flex;max-width:calc(100% - 20px);overflow:hidden;border:1.25px solid var(--anthrazit);border-radius:4px;background:var(--etikett-grund);color:var(--etikett-text);font:500 10.5px/1.15 var(--mono);letter-spacing:.09em;text-transform:uppercase;pointer-events:none}
.etikett span{padding:6px 8px;white-space:normal}
.etikett span + span{border-left:1px solid var(--anthrazit)}
.etikett.frei{position:static;max-width:100%}
/* Kennzeichnung seit 25.10.2026 (Alex, Variante A): „AI“ oben rechts nur bei KI im Bild, unten links höchstens „Produkt 3D“ */
.ki-zeichen{position:absolute;right:10px;top:10px;z-index:3;display:inline-flex;border:1.25px solid var(--anthrazit);border-radius:4px;background:var(--etikett-grund);color:var(--etikett-text);font:500 10.5px/1.15 var(--mono);letter-spacing:.09em;text-transform:uppercase;pointer-events:none}
.ki-zeichen > span[aria-hidden]{padding:6px 8px}
.ki-zeichen.frei{position:static}
.ki-zeichen.frei > span{padding:6px 8px}
@media (min-width:760px){.ki-zeichen{right:12px;top:12px}.ki-zeichen > span[aria-hidden]{padding:7px 9px}}
/* Handy: so klein wie vertretbar (Alex 31.10.2026), bleibt lesbar und kontrastreich — 9 px Mono, Rahmen bleibt (KI-Kennzeichnung muss klar erkennbar sein) */
@media (max-width:759px){.ki-zeichen{right:6px;top:6px;border-width:1px;border-radius:3px;font-size:10.5px;letter-spacing:.06em}.ki-zeichen > span[aria-hidden]{padding:3px 5px}}
@media (min-width:760px){.etikett{left:12px;bottom:12px}.etikett span{padding:7px 9px}}
@media (max-width:420px){.etikett .kuerzel:nth-child(n+3){display:none}}
/* kleine Kacheln (vier nebeneinander am Tablet, Beispiele auf „Über“): Felder enger, damit das Etikett ganz bleibt */
.raster > li,.nah > li,.anleitungen > li,.montage-bilder > li{container-type:inline-size}
@container (max-width:240px){.etikett span{padding:5px 6px}}

/* ---------- Typenschild: Lineal, Spezifikation (Gravur), Datenzeile (Master §11) ---------- */
.lineal{display:grid;gap:8px;font:500 11px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase}
.lineal .enden{display:flex;justify-content:space-between;gap:16px}
.lineal .skala{display:block;height:12px;border-bottom:1.5px solid currentColor;background:repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 8px) left bottom/100% 6px no-repeat,repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 40px) left bottom/100% 12px no-repeat}
.spez{display:grid;gap:9px;width:min(100%,420px);font:500 11.5px/1.3 var(--mono);letter-spacing:.09em;text-transform:uppercase}
.spez .k{display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.spez .k .wm{width:74px}
.spez .doppel{display:block;height:5px;border-top:2px solid currentColor;border-bottom:1px solid currentColor;margin:2px 0 3px}
.spez .z{display:flex;align-items:baseline;gap:8px}
.spez .z > span:first-child{opacity:.66}
.spez .z i{flex:1;min-width:14px;border-bottom:1.5px dotted currentColor;opacity:.45;transform:translateY(-3px)}
.spez .z > span:last-child{text-align:right}
.spez .ende{display:block;border-top:1px solid currentColor;margin-top:4px}
.spez .z.q > span:last-child{white-space:nowrap}
.quelle{margin-top:14px;font:400 12.5px/1.45 var(--mono);color:var(--text-leise)}

/* ---------- Abschnitte ---------- */
.abschnitt{padding-top:var(--abstand)}
.abschnitt-kopf{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:14px 32px;margin-bottom:clamp(24px,3.4vw,44px)}
.abschnitt-kopf .text{color:var(--text-leise)}
/* Übergänge S2 (Alex 31.10.2026, Blatt „Übergänge“): jeder Abschnitt beginnt gleich — feine Linie, darauf klein die Kapitelnummer in Mono
   (01, 02 … je Seite), darunter die Überschrift; Überschriften der Abschnitte einheitlich 32–48 px. Nur die Linie direkt am Abschnitt zählt. */
.linie-oben{position:relative;padding-top:28px;border-top:1px solid var(--linie)}
main{counter-reset:kap}
main section > .linie-oben,main section > .wrap > .linie-oben{counter-increment:kap}
main section > .linie-oben::before,main section > .wrap > .linie-oben::before{content:counter(kap,decimal-leading-zero);position:absolute;top:8px;left:0;font:400 11px/1 var(--mono);letter-spacing:.08em;color:var(--text-leise)}
main .launch.linie-oben::before{left:clamp(24px,4vw,48px)}
main .abschnitt-kopf h2,main .app-frage{font-size:clamp(32px,3.6vw,48px);line-height:1.05}
/* Seitenkopf von Übersicht, Über und Montage: ein Abstand bis zum ersten Inhalt (Formatcheck L3: vorher 45 bis 205 px) */
.seitenkopf{padding-top:clamp(28px,4vw,56px);margin-bottom:clamp(40px,5vw,72px)}
.abschnitt.nach-kopf{padding-top:0}
/* Gleiches Ziel, eine Stelle je Breite (Formatcheck D5) */
@media (max-width:899px){.nur-breit{display:none!important}}
@media (min-width:900px){.nur-schmal{display:none!important}}
/* Fokus nie hinter festen Leisten (WCAG 2.4.11; Formatcheck F1, F2): Kaufleiste am Handy, Sprungleiste der Anleitung */
@media (max-width:899px){html:has(.kaufleiste){scroll-padding-bottom:calc(80px + env(safe-area-inset-bottom,0px))}}
html:has(.anl-leiste){scroll-padding-top:calc(var(--kopf-h) + var(--ansage-h,0px) + 58px)}
/* Produktseiten: Abschnittstitel kleiner als der Produktname (Formatcheck L2: vorher h2 60 px über h1 56 px) */
.seite-produkt main h2:not(.h3){font-size:clamp(32px,3.6vw,48px)}

/* ---------- Start · Auftakt (bis 19.10.2026 randloses Loop-Video mit dem Blender-Animatic als Platzhalter; seitdem Variante A) ---------- */
.knoepfe{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.fenster{position:relative;margin:0;width:100%;max-width:560px;aspect-ratio:16/9;overflow:hidden;border-radius:var(--radius);background:var(--kachel);isolation:isolate}
.banner-video{display:block;width:100%;height:100%;object-fit:cover}
/* Film ohne sichtbaren Knopf (Alex 27.10.2026): unsichtbare Fläche über dem Film, Klick/Tippen/Leertaste hält an */
.film-flaeche{position:absolute;inset:0;z-index:2;margin:0;padding:0;border:0;background:none;color:transparent;font-size:0;cursor:pointer}
.film-flaeche:focus-visible{outline:2px solid var(--link);outline-offset:-2px}
.fenster-leiste{position:absolute;right:10px;bottom:10px;z-index:2;display:flex;pointer-events:none}
/* Auftakt v2 „D2 · Ein Raum“ + Handy „M3“ (Alex 25.10.2026, Blatt Hero Runde 3; Einbaupaket
   outputs/wip/2026-10-25_Website_Hero-Vorschlaege-v2_v1/einbau/hero-v2.css, angepasst an kennzeichnung() der Website):
   Handy nur der Film 16:9, darunter die Kennzeile, der Satz über den Produkten; ab 900 px das Raumbild KS2 Schwarz randlos,
   Kennzeile und Satz einzeilig an der hellen Decke, der Film als Fenster unten rechts. Kennzeichnung „AI“ oben rechts, „Produkt 3D“ unten links. */
.auftakt{padding:16px var(--rand) 0}
.auftakt-buehne{position:relative}
.auftakt-raum{display:none}
.auftakt .fenster{position:relative;width:100%;max-width:none;aspect-ratio:16/9}
.auftakt-text{display:block}
.auftakt-text .h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}   /* am Handy nur für Screenreader; sichtbar über den Produkten */
.kennzeile{display:block;padding-top:12px;font:500 11px/1.35 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-leise)}
.produkte-satz{font-family:var(--display);font-weight:600;font-size:30px;line-height:1;letter-spacing:var(--eng);margin:0}
@media (min-width:900px){
  .auftakt{padding:0}
  .auftakt-buehne{height:calc(100svh - var(--kopf-h));min-height:620px;max-height:900px;overflow:hidden;background:var(--kachel)}
  .auftakt-raum{display:block;width:100%;height:100%;border-radius:0}
  .auftakt-raum img{width:100%;height:100%;object-fit:cover;object-position:50% 0%}
  .auftakt-raum .ki-zeichen{top:16px;right:16px}
  .auftakt-raum .etikett{left:16px;bottom:16px}
  .auftakt-text{position:absolute;left:39%;top:46px;display:grid;gap:8px;color:var(--anthrazit)}   /* steht im Foto: in beiden Lichtstimmungen Anthrazit */
  .auftakt-text .h1{position:static;width:auto;height:auto;overflow:visible;clip:auto;
    font-size:clamp(40px,3.6vw,52px);line-height:.94;letter-spacing:-.035em;white-space:nowrap;margin:0}
  .auftakt-text .kennzeile{padding:0;font-size:12px;letter-spacing:.09em;color:#4A4A47}
  /* Weg zu den Produkten im ersten Bildschirm (Alex 28.10.2026, Blatt Website-CRO: ruhiger Textlink unter dem Satz). Steht im Foto:
     Anthrazit und Kobalt-Fokus fest, wie Satz und Kennzeile */
  .auftakt-link{justify-self:start;margin-top:1px;padding-block:3px;font:500 15px/1.3 var(--sans);color:var(--anthrazit);text-decoration:underline;
    text-decoration-thickness:1px;text-underline-offset:4px}   /* padding: Ziel ≥ 24 px hoch (WCAG 2.5.8) */
  .auftakt-link:hover{text-decoration-thickness:2px}
  .auftakt-link:focus-visible{outline-color:var(--kobalt)}
  .auftakt .fenster{position:absolute;left:auto;min-width:0;max-width:none;right:max(var(--rand),calc((100% - var(--max)) / 2 + var(--rand)));bottom:56px;
    width:clamp(358px,27vw,400px);box-shadow:0 0 0 6px var(--grund)}   /* mind. 358 px: eingebrannte Kennzeichnung ohne Zoom lesbar */
}
@media (max-width:899px){.auftakt + .abschnitt{padding-top:36px}}

/* ---------- Produktkachel und Raster „vier Kacheln, dann ein großes Bild“ (Master §11) ---------- */
.raster{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(22px,3vw,40px) clamp(10px,1.4vw,18px)}
.raster > li{min-width:0}
.raster .gross{grid-column:1/-1}
.kachel{display:grid;gap:12px;align-content:start;text-decoration:none;color:inherit}
.kachel .bild{aspect-ratio:1/1;border-radius:2px}
.kachel .bild img{transition:transform .9s var(--ease)}
.kachel:hover .bild img{transform:scale(1.025)}
.kachel-text{display:grid;gap:3px}
.kachel-text b{font:600 15px/1.3 var(--sans);letter-spacing:-.005em}
.kachel-text .leise{font-size:14px;line-height:1.4}
.kachel:hover b{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.farben{display:flex;gap:6px;margin-top:6px}
.farben i{width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--muster-rand)}
.gross .kachel .bild{aspect-ratio:1/1}
@media (min-width:760px){
  .raster{grid-template-columns:repeat(4,minmax(0,1fr))}
  .raster.drei{grid-template-columns:repeat(3,minmax(0,1fr))}   /* Startseite: sechs Geräte in zwei Reihen (Alex 18.10.2026) */
  .gross .kachel .bild{aspect-ratio:2/1}
}
.mehr-zeile{display:flex;justify-content:flex-end;margin-top:clamp(20px,2.6vw,32px)}

/* ---------- Griffdurchmesser im gleichen Maßstab (Master §7) ----------
   Auswahl (Alex 18.10.2026): jeder Querschnitt ist ein Knopf. Darunter Modell und Handgröße als drei Punkte
   (klein · mittel · groß, gefüllt = passt). Antippen legt einen Messring um den Querschnitt und zeigt darunter Zweck und
   Handgröße als Lineal, dessen Balken sich nacheinander ausmessen. „Warum diese Durchmesser?“ als Typenschild-Raster. */
.griffe{--mm:2.3px;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,2.4vw,32px);align-items:start}
.griff{min-width:0}
.griff-knopf{display:grid;gap:12px;align-content:start;width:100%;padding:0 0 4px;border:0;background:none;color:inherit;text-align:center;-webkit-tap-highlight-color:transparent}
.griff-knopf:focus-visible{outline-offset:6px}
.griff .platz{height:calc(40 * var(--mm) + 14px);padding-bottom:7px;display:flex;align-items:flex-end;justify-content:center}   /* Kreise mittig (Alex 18.10.2026), Luft für den Messring */
.griff .quer{position:relative;width:calc(var(--d) * var(--mm));aspect-ratio:1/1;border-radius:50%;border:1.5px solid currentColor;background:var(--flaeche);display:grid;place-items:center;font:500 10.5px/1 var(--mono);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.griff .quer::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:1.5px solid var(--text);opacity:0;transform:scale(.9);transition:opacity .25s var(--ease),transform .5s var(--ease)}
.griff-knopf:hover .quer::after{opacity:.3;transform:scale(1)}
.griff-knopf[aria-pressed="true"] .quer::after{opacity:1;transform:scale(1)}
.griff.aktiv .quer{background:var(--text);color:var(--grund);border-color:var(--text)}
.griff .bildquer{border:0;background:none}
.griff .bildquer img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.griff .datenzeile{font-size:11px;padding-top:10px;text-align:center;transition:border-color .25s var(--ease)}
.griff-knopf[aria-pressed="false"] .datenzeile{border-top-color:var(--linie)}
/* Produktseite: der eigene Durchmesser im Fokus, die übrigen zurückgenommen, bis man sie antippt (Alex 18.10.2026). Blass wird nur
   das Bild (Querschnitt, Hände); die Schrift bleibt lesbar in Leise-Grau, 6,3 : 1 (Formatcheck K1: vorher 2,4 : 1, WCAG 1.4.3) */
.griffwahl[data-aktiv] .griff:not(.aktiv) .griff-knopf .platz{opacity:.42;transition:opacity .3s var(--ease)}
.griffwahl[data-aktiv] .griff:not(.aktiv) .griff-knopf .hand{opacity:.6;transition:opacity .3s var(--ease)}
.griffwahl[data-aktiv] .griff:not(.aktiv) .griff-knopf .datenzeile{color:var(--text-leise)}
.griffwahl[data-aktiv] .griff:not(.aktiv) .griff-knopf:is(:hover,:focus-visible,[aria-pressed="true"]) :is(.platz,.hand){opacity:1}
.griffwahl[data-aktiv] .griff:not(.aktiv) .griff-knopf:is(:hover,:focus-visible,[aria-pressed="true"]) .datenzeile{color:var(--text)}
.griff .datenzeile b{font-weight:600;color:var(--text)}
.hand{display:flex;justify-content:center;align-items:center;gap:5px;height:14px}
.hand-label{font:500 10px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--text-leise)}
.hand .hand-label{margin-right:3px}
.hand i{width:calc(6px + var(--n) * 2px);height:calc(6px + var(--n) * 2px);border-radius:50%;box-shadow:inset 0 0 0 1.25px var(--text-leise)}
.hand i.an{background:var(--text);box-shadow:none}
.griff-infos{margin-top:clamp(18px,2.4vw,28px)}
.griff-info{display:grid;gap:16px 40px;align-items:end;padding:clamp(16px,2vw,22px) clamp(18px,2.2vw,26px);border-radius:4px;background:var(--flaeche)}
.gi-text{display:grid;gap:5px;min-width:0}
.gi-text b{font:600 16px/1.4 var(--sans);letter-spacing:-.005em;text-wrap:pretty}
.hand-lineal{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:end;gap:14px}
.hl-skala{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.hl-teil{display:grid;gap:7px;text-align:center;font:500 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-leise)}
.hl-teil.an{color:var(--text)}
.hl-teil i{position:relative;height:11px;border-left:1px solid var(--linie-stark);border-bottom:1.5px solid var(--linie-stark)}
.hl-teil:last-child i{border-right:1px solid var(--linie-stark)}
.hl-teil.an i::after{content:"";position:absolute;left:3px;right:3px;bottom:2px;height:5px;background:var(--text);transform-origin:left}
.griff-warum{margin-top:clamp(14px,2vw,20px);border-top:1px solid var(--linie)}
.griff-warum summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:48px;padding-block:12px;font:500 11.5px/1.35 var(--mono);letter-spacing:.09em;text-transform:uppercase}
.griff-warum summary::-webkit-details-marker{display:none}
.griff-warum summary::after{content:"+";font:400 18px/1 var(--sans)}
.griff-warum[open] summary::after{content:"\2212"}
.warum-liste{display:grid;column-gap:clamp(24px,3vw,48px);margin:2px 0 0}
.warum-liste > div{display:grid;gap:7px;align-content:start;padding-block:14px 16px;border-top:1px solid var(--linie)}
.warum-liste dd{margin:0;max-width:52ch;line-height:1.55;text-wrap:pretty}
.griff-warum .quelle{margin-top:4px;padding-bottom:8px}
@media (min-width:760px){
  .griffe{--mm:3.2px}
  .griff-info{grid-template-columns:minmax(0,1fr) minmax(240px,340px)}
  .warum-liste{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1100px){.warum-liste{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:520px){   /* alle vier Durchmesser in einer Zeile, kleiner im selben Maßstab (Alex 25.10.2026) */
  .griffe{--mm:1.7px;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .griff .datenzeile{font-size:10px;letter-spacing:.04em;padding-top:8px}
  .griff-knopf{gap:8px}
}
@media (prefers-reduced-motion:no-preference){
  .griff-info:not([hidden]){animation:auftauchen .38s var(--ease) both}
  .griff-info:not([hidden]) .hl-teil.an i::after{animation:messen .55s var(--ease) both;animation-delay:calc(140ms + var(--n) * 110ms)}
  .griff-warum[open] .warum-liste > div{animation:auftauchen .42s var(--ease) both}
  .griff-warum[open] .warum-liste > div:nth-child(2){animation-delay:60ms}
  .griff-warum[open] .warum-liste > div:nth-child(3){animation-delay:120ms}
  .griff-warum[open] .warum-liste > div:nth-child(4){animation-delay:180ms}
}
@keyframes messen{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- Nahaufnahmen (eigener Abschnitt, echte Kamera-Fotos, Master §11) ---------- */
.nah{list-style:none;display:grid;grid-auto-flow:column;grid-auto-columns:72%;gap:var(--luft);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(-1 * var(--rand));padding-inline:var(--rand);scroll-padding-inline:var(--rand)}
.nah::-webkit-scrollbar{display:none}
.nah > li{scroll-snap-align:start;display:grid;gap:10px;align-content:start}
.nah .bild{aspect-ratio:4/5}
.karton-nah{margin-bottom:clamp(36px,5vw,72px)}
@media (min-width:760px){.nah{grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-columns:auto;overflow:visible;margin-inline:0;padding-inline:0}.nah.zwei{grid-template-columns:repeat(2,minmax(0,1fr))}.nah.drei{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Nahaufnahmen der Startseite als Band (Alex 19.10.2026 abends). Ohne JS und bei „Bewegung reduzieren“ eine Reihe zum Wischen;
   mit JS läuft die Spur langsam und gleichmäßig (nur transform), Ziehen und Wischen verschieben sie (site.js, Klasse „laeuft“). */
.nah-abschnitt .abschnitt-kopf{align-items:flex-end}
.nah-band{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;scroll-snap-type:x proximity;padding-inline:var(--rand);scroll-padding-inline:var(--rand)}
.nah-band::-webkit-scrollbar{display:none}
.nah-band:focus-visible{outline:2px solid var(--link);outline-offset:-2px}
.nah-spur{list-style:none;display:flex;gap:var(--luft);width:max-content;margin:0;padding:0}
.nah-spur > li{flex:none;width:62vw;scroll-snap-align:start;container-type:inline-size}
.nah-spur .bild{aspect-ratio:4/5}
.nah-band.laeuft{overflow:hidden;scroll-snap-type:none;padding-inline:0;cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.nah-band.laeuft.zieht{cursor:grabbing}
.nah-band.laeuft .nah-spur{will-change:transform}
.nah-band.laeuft img{-webkit-user-drag:none;pointer-events:none}
@media (min-width:760px){.nah-spur > li{width:clamp(220px,23vw,300px)}}

/* „Im Raum“ der Produktseite: ganze Raumansichten (3312 × 2480) je Farbe bzw. Ausführung (Alex 19.10.2026 abends) */
.raum-ganz{list-style:none;margin:0;padding:0;display:grid;gap:var(--luft)}
.raum-ganz .bild{aspect-ratio:3312/2480}
.raum-ganz.n1{max-width:880px}
@media (max-width:759px){
  .raum-ganz.n2,.raum-ganz.n3{grid-auto-flow:column;grid-auto-columns:86%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(-1 * var(--rand));padding-inline:var(--rand);scroll-padding-inline:var(--rand)}
  .raum-ganz.n2::-webkit-scrollbar,.raum-ganz.n3::-webkit-scrollbar{display:none}
  .raum-ganz > li{scroll-snap-align:start}
}
@media (min-width:760px){.raum-ganz.n2{grid-template-columns:repeat(2,minmax(0,1fr))}.raum-ganz.n3{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- Montage-Block (Master §13: sichtbar verlinkt, Wand-Check hinter „Mehr erfahren“) ---------- */
.montage{display:grid;gap:clamp(20px,3vw,40px)}
.montage-bilder{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,1.2vw,14px)}
.montage-bilder .bild{aspect-ratio:1/1}
/* Film als Schleife im Bildformat (Vormontage): Leiste mit Etikett und Pause-Knopf unten, wie beim Auftakt */
.film video{display:block;width:100%;height:100%;object-fit:cover}
.film-leiste{position:absolute;left:8px;right:8px;bottom:8px;display:flex;pointer-events:none}
.film-leiste .etikett{position:static;max-width:100%;flex:0 1 auto;min-width:0}
.montage-bilder .mit-film{grid-column:span 2}   /* Film größer als die Standbilder, damit Etikett und Bewegung lesbar bleiben */
@media (max-width:620px){.montage-bilder .mit-film{grid-column:1 / -1}}
.montage-karte{display:grid;gap:14px;align-content:start;padding:clamp(20px,2.4vw,30px);border:1px solid var(--linie);border-radius:4px}
.montage-karte .m-link{justify-self:start;font:600 17px/1.3 var(--sans)}
.montage-karte .m-zeile{display:flex;flex-wrap:wrap;gap:8px 22px}
.montage-karte details{border-top:1px solid var(--linie-stark);padding-top:4px}
.montage-karte summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:48px;font:500 11.5px/1.35 var(--mono);letter-spacing:.09em;text-transform:uppercase;padding-block:4px}   /* 48 px wie die übrigen Aufklapper (Formatcheck B1) */
.montage-karte summary::-webkit-details-marker{display:none}
.montage-karte summary::after{content:"+";font-size:16px;line-height:1}
.montage-karte details[open] summary::after{content:"\2212"}
.wc-details > .wc{margin-top:14px}
/* ---------- Copy-Variante B „visuell“ (Vorschlag 19.10.2026): Symbol und kurze Datenzeile statt Absatz ---------- */
.ikon{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.piktos{list-style:none;display:grid;gap:12px;margin:0;padding:0}
.piktos li{display:grid;grid-template-columns:26px minmax(0,1fr);column-gap:12px;align-items:center;font:500 12px/1.35 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.piktos .ikon{width:26px;height:26px}
.app-chips,.piktos.schritte{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.app-chips li,.piktos.schritte li{grid-template-columns:1fr;row-gap:10px;justify-items:start;align-items:start;padding-top:14px;border-top:1px solid var(--linie-stark)}
.app-chips .ikon{width:30px;height:30px}
.app-chips{grid-template-columns:repeat(4,minmax(0,1fr))}   /* vier Stichworte inkl. Crew (Alex 28.10.2026) */
@media (max-width:599px){.app-chips{grid-template-columns:repeat(2,minmax(0,1fr))}}
.piktos.schritte{max-width:560px}
.piktos.schritte .ikon{width:34px;height:34px}
.antwort-zeilen{list-style:none;display:grid;gap:9px;margin:0 0 14px;padding:0}
.antwort-zeilen li{display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:10px;align-items:center;font:500 12px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.az-strich{width:12px;height:1.5px;background:currentColor;justify-self:center;opacity:.5}
.zeitleiste{display:grid;grid-template-columns:minmax(0,1fr) minmax(32px,72px) minmax(0,1fr);align-items:end;gap:14px}
.zeitleiste b{display:block;font:600 clamp(34px,5.4vw,64px)/1 var(--display);letter-spacing:-.025em}
.zeitleiste span{display:block;margin-top:10px;font:500 11.5px/1.35 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-leise)}
.zeitleiste i{align-self:center;height:0;border-top:1.5px solid var(--linie-stark);margin-bottom:28px}
/* Hand-Symbol beim Griffdurchmesser (Alex 19.10.2026: „ein Symbol von der Hand“): passende Größen in Textfarbe, übrige blass */
.hand-bild{gap:3px;height:20px;align-items:flex-end}
.hand-bild i{display:grid;place-items:end center;width:auto;height:auto;border-radius:0;background:none;box-shadow:none;color:var(--text);opacity:.28}
.hand-bild i.an{opacity:1;background:none}
.hand-bild .h-klein .hand-ikon{width:14px;height:14px}
.hand-bild .h-mittel .hand-ikon{width:17px;height:17px}
.hand-bild .h-gross .hand-ikon{width:20px;height:20px}
.hl-bild{grid-template-columns:minmax(0,1fr)}
.hl-bild .hl-teil{justify-items:center;align-items:end}
.hl-bild .hl-teil i{justify-self:stretch}
.hl-bild .hl-teil .hand-ikon{order:-1;opacity:.28}
.hl-bild .hl-teil.an .hand-ikon{opacity:1}
.hl-bild .hand-ikon.h-klein{width:16px;height:16px}
.hl-bild .hand-ikon.h-mittel{width:20px;height:20px}
.hl-bild .hand-ikon.h-gross{width:24px;height:24px}
@media (min-width:900px){.montage{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:start}.montage.ohne-bilder{grid-template-columns:minmax(0,1fr)}}
/* Film allein: füllt seine Spalte, die Karte steht mittig daneben (Formatcheck L1: vorher ein Drittel leer neben dem Film) */
.montage.nur-film .montage-bilder{grid-template-columns:minmax(0,1fr);max-width:480px}
.montage.nur-film .mit-film{grid-column:1/-1}
@media (min-width:900px){.montage.nur-film{grid-template-columns:minmax(0,480px) minmax(0,1fr);align-items:start}}   /* Film oben bündig mit der Karte (Sichtprüfung 25.10.2026) */
.montage-karte .wc-tabelle table{min-width:0}   /* bricht um wie in der Anleitung, statt mitten im Wort zu enden (Formatcheck L10) */

/* ---------- Wand-Check (Stand Montageanleitung v2, Alex 17./18.10.2026) ----------
   Vier Karten mit Ziffer, Wandtypen mit Status, Probebohrung als Tabelle hinter „Mehr erfahren“. Status als Zeichen in einem
   Kreis plus Wort für Screenreader: geeignet ✓ in Emerald (einzige Statusfarbe), mit Fachbetrieb △ als Kontur, nicht
   geeignet ✕ gefüllt in Textfarbe. Keine Warnfarbe (Orange nur TENSION). Das Raster richtet sich nach der Breite des
   Blocks (Container-Abfrage), denn er steht ganz breit auf der Montage-Seite und schmal in der Montage-Karte jedes Produkts.
   Sicherheitsinhalt: Entwurf bis zur Legal-/GPSR-Freigabe (Master §13). */
.wc{container-type:inline-size;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(18px,2.4vw,28px)}   /* Spur = Containerbreite: sonst dehnt die Probebohrungs-Tabelle (min. 460 px) den Wand-Check, und die Seite scrollt quer */
.wc-kopf{display:grid;gap:8px;max-width:60ch}
.wc-kopf .h3{font-size:clamp(24px,2.6vw,34px)}
.wc-karten{list-style:none;counter-reset:wc;display:grid;gap:10px}
.wc-karte{counter-increment:wc;display:grid;gap:10px;align-content:start;min-width:0;padding:clamp(18px,2vw,24px);border-radius:4px;background:var(--flaeche)}
.wc-karte::before{content:counter(wc,decimal-leading-zero);font:500 11.5px/1 var(--mono);letter-spacing:.09em;color:var(--text-leise)}
.wc-karte h4{font:600 19px/1.2 var(--display);letter-spacing:-.015em}
.wc-karte p{font-size:15px;line-height:1.5;max-width:56ch}
.wc-karte p.leise{font-size:14px}
.wc-chips,.wc-typen{list-style:none;display:grid}
.wc-chips{gap:8px}
.wc-chips li{display:flex;align-items:center;gap:10px;font-size:15px;line-height:1.35}
.wc-typen li{display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:10px;row-gap:2px;align-items:center;align-content:start;padding-block:8px;border-top:1px solid var(--linie);font-size:15px;line-height:1.35}
.wc-typen .wc-mark{grid-row:span 2;align-self:start}
.wc-typen b{grid-column:2;font-weight:600}
.wc-notiz{grid-column:2;font-size:13px;color:var(--text-leise)}
.wc-mark{display:inline-grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1.25px currentColor;font:600 12px/1 var(--sans);color:var(--text)}
.wc-mark[data-status="ok"]{color:var(--status)}
.wc-mark[data-status="no"]{background:var(--text);color:var(--grund);box-shadow:none}
.wc-probe{border-top:1px solid var(--linie-stark)}
.wc-probe summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:48px;padding-block:12px;font:500 11.5px/1.35 var(--mono);letter-spacing:.09em;text-transform:uppercase}
.wc-probe summary::-webkit-details-marker{display:none}
.wc-probe summary::after{content:"+";font:400 18px/1 var(--sans)}
.wc-probe[open] summary::after{content:"\2212"}
.wc-probe > p{margin-bottom:14px;max-width:60ch}
.wc-tabelle{overflow-x:auto}
.wc-tabelle table{width:100%;min-width:0;border-collapse:collapse;font-size:14.5px;line-height:1.4}
.wc-tabelle th{padding:0 16px 10px 0;border-bottom:1.5px solid var(--linie-stark);text-align:left;font:500 11px/1.3 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--text-leise)}
.wc-tabelle td{padding:10px 16px 10px 0;border-bottom:1px solid var(--linie);vertical-align:middle}
.wc-tabelle td:first-child{width:42%}
.wc-tabelle td .wc-mark{width:20px;height:20px;margin-right:10px;font-size:11px;vertical-align:middle}
.wc-mehl{display:inline-block;width:14px;height:14px;margin-right:10px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--muster-rand);vertical-align:-2px}
.montage-karte .wc-probe{padding-top:0}
@container (min-width:600px){
  .wc-karten{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wc-karte.breit,.wc-karte:last-child{grid-column:1/-1}
  .wc-karte.breit .wc-typen{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
}
@container (min-width:1000px){
  .wc-karten{grid-template-columns:repeat(4,minmax(0,1fr))}
  .wc-karte.breit{grid-column:3/span 2;grid-row:1/span 2}
  .wc-karte:last-child{grid-column:1/span 2}
}
@container (min-width:1000px){   /* Anleitung mit Bildern (Formatanalyse 25.10.2026): 01 links über zwei Zeilen, 02 und 04 darunter in Spalte 2 — keine leere Karte */
  .wc.mit-bildern .wc-karten{grid-template-rows:auto 1fr}
  .wc.mit-bildern .wc-karte:first-child{grid-column:1;grid-row:1/span 2}
  .wc.mit-bildern .wc-karte:last-child{grid-column:2;grid-row:2}
}
@media (prefers-reduced-motion:no-preference){
  .wc-details[open] .wc-karte,.wc-probe[open] tbody tr{animation:auftauchen .42s var(--ease) both}
  .wc-details[open] .wc-karte:nth-child(2),.wc-probe[open] tbody tr:nth-child(2){animation-delay:50ms}
  .wc-details[open] .wc-karte:nth-child(3),.wc-probe[open] tbody tr:nth-child(3){animation-delay:100ms}
  .wc-details[open] .wc-karte:nth-child(4),.wc-probe[open] tbody tr:nth-child(4){animation-delay:150ms}
  .wc-probe[open] tbody tr:nth-child(5){animation-delay:200ms}
  .wc-probe[open] tbody tr:nth-child(6){animation-delay:250ms}
  .wc-probe[open] tbody tr:nth-child(7){animation-delay:300ms}
}

/* ---------- TRÆN App (Startseite, gut sichtbar; Alex 18.10.2026) ---------- */
.app{display:grid;gap:clamp(28px,4vw,64px);padding:clamp(24px,4vw,56px);border-radius:4px;background:var(--flaeche)}
.app-text{display:grid;gap:18px;align-content:center;max-width:560px}
.app-frage{color:var(--app-frage)}   /* Frage als Überschrift: hell Emerald (Hinweis auf die App), dunkel Orange #DB764A wie die App auf Dunkel, 5,3 : 1 auf #1F1F1D (Alex 28.10.2026, Blatt „App-Überschrift“ + Chat; Master v2.15 §11) */
.app-punkte{margin-top:4px}
.app-bilder{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,24px);align-items:start;width:100%;max-width:640px;justify-self:center}   /* drei Bildschirme: Coach, Training, Crew (Alex 28.10.2026) */
.app-bilder > li:nth-child(2){margin-top:clamp(28px,5vw,64px)}
.telefon .bild{aspect-ratio:393/852;border-radius:clamp(18px,3vw,34px);background:#161616;box-shadow:0 0 0 1px rgba(43,43,43,.28),0 18px 40px -24px rgba(22,22,22,.45)}
.telefon .etikett{left:50%;transform:translateX(-50%);bottom:14px;font-size:10px}   /* lesbar ohne Zoom (Formatcheck E2: vorher 9 px) */
.telefon .etikett span{padding:4px 6px}
@media (max-width:899px){   /* mobil: Bilder zuerst, als Wischreihe */
  .app-bilder{order:-1;max-width:none;display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
  .app-bilder::-webkit-scrollbar{display:none}
  .app-bilder > li{flex:0 0 min(62%,260px);scroll-snap-align:center}
  .app-bilder > li:nth-child(2){margin-top:0}
}
@media (min-width:900px){.app{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center}}
/* App-Bereich gefächert, ohne Fläche (Alex 31.10.2026, Blatt „App-Bereich neu“ N3): drei Telefone leicht gedreht und überlappend direkt auf
   der Seite, Desktop und Handy gleich; hell die dunklen App-Screens, dunkel die hellen (der Bruch kommt aus den Screens). */
.app-geteilt{position:relative;overflow:hidden;padding-top:var(--abstand);padding-bottom:clamp(8px,2vw,24px)}   /* gleicher Abstand wie jeder Abschnitt (fehlte 31.10.2026 kurz) */
.app-geteilt .app{position:relative;background:transparent;padding:0;border-radius:0}
.app-geteilt .app-bilder{display:flex;justify-content:center;max-width:none;overflow:visible;margin:0;padding:8px 0 clamp(16px,3vw,40px)}
.app-geteilt .app-bilder > li{flex:0 0 33%;margin-top:0}
.app-geteilt .app-bilder > li + li{margin-left:-6%}
.app-geteilt .app-bilder > li:nth-child(1){transform:translateY(8%) rotate(-4deg);z-index:1}
.app-geteilt .app-bilder > li:nth-child(2){z-index:2}
.app-geteilt .app-bilder > li:nth-child(3){transform:translateY(8%) rotate(4deg);z-index:1}
.app-geteilt .tel-nacht{display:none}
.app-geteilt .tel-nacht img{width:100%;height:auto;display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .app-geteilt .tel-tag{display:none}
  :root:not([data-theme="light"]) .app-geteilt .tel-nacht{display:block}
  :root:not([data-theme="light"]) .app-geteilt .telefon .bild{box-shadow:0 0 0 1px rgba(244,242,237,.22),0 24px 50px -20px rgba(0,0,0,.7)}}
:root[data-theme="dark"] .app-geteilt .tel-tag{display:none}
:root[data-theme="dark"] .app-geteilt .tel-nacht{display:block}
@media (max-width:899px){.app-geteilt .app-bilder{overflow:visible;scroll-snap-type:none}.app-geteilt .app-bilder > li{flex:0 0 33%}}
@media (prefers-reduced-motion:no-preference){.app-geteilt .app-bilder > li{transition:transform .6s var(--ease)}}

/* ---------- Founder ---------- */
.founder{display:grid;gap:clamp(24px,4vw,64px)}
.founder .bild{aspect-ratio:4/5}
.founder-text{display:grid;gap:18px;align-content:start;max-width:640px}
/* Founder Line in der Ich-Form, ohne Anführungs-Pathos; kräftig wie die Headlines und in einer Größe auf Start und „Über“
   (Formatcheck T2, Alex 19.10.2026: vorher Regular in 25 bzw. 60 px, Master §11) */
.zitat{margin:0;text-wrap:balance;font:600 clamp(24px,2.6vw,36px)/1.15 var(--display);letter-spacing:-.02em}
@media (min-width:900px){.founder{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center}.founder.ohne-bild{grid-template-columns:minmax(0,1fr)}}
/* Founder-Bild mit zweitem Medium daneben (Handstand, Alex 27.10.2026): zwei gleich hohe 4:5-Flächen, Text daneben bzw. darunter */
.founder-name{margin:-6px 0 0;font-weight:500;color:var(--text-leise)}   /* Name unter der Founder Line (Alex 27.10.2026) */
.founder-bilder{display:grid;grid-template-columns:1fr 1fr;gap:clamp(8px,1.2vw,16px)}
.founder-bilder>*{aspect-ratio:4/5;min-width:0}
@media (min-width:900px){.founder.zwei{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}

/* ---------- Launch-Liste (nur prelaunch; sendet nichts, bis Brevo angebunden ist) ---------- */
.launch{display:grid;gap:22px;padding:clamp(24px,4vw,48px);border-radius:4px;background:var(--flaeche)}
.launch form{display:grid;gap:14px;max-width:560px}
.launch label{font-size:14px;color:var(--text-leise)}
.zeile{display:flex;flex-direction:column;gap:10px}
.zeile input[type="email"]{flex:1;min-width:0;min-height:48px;padding:12px 18px;border:1.5px solid var(--linie-stark);border-radius:999px;background:var(--grund);color:var(--text);font:inherit}
.zeile input[type="email"]:focus{outline:2px solid var(--link);outline-offset:2px}
.zustimmung{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.5;color:var(--text-leise)}
.zustimmung input{margin-top:4px;accent-color:var(--text);flex:none}
.launch .klein{font-size:13px;color:var(--text-leise)}
.launch .einwilligung{line-height:1.55;max-width:52ch}   /* Einwilligung am Knopf (CRM-Auftrag 27.10.2026): ruhig, aber lesbar */
.launch > div:first-child{display:grid;gap:12px;align-content:start}   /* Überschrift und Satz mit Abstand (Formatcheck L5) */
.launch .fehler{font-size:14px;color:var(--text);margin-top:-4px}   /* direkt unter seinem Feld (Formatcheck L9) */
.launch .fehler::before{content:"";display:inline-block;width:8px;height:8px;margin-right:9px;border-radius:50%;background:var(--text);vertical-align:1px}
.launch input[aria-invalid="true"]{border-color:var(--text);outline:2px solid var(--link);outline-offset:2px}
.launch form.gesendet .zeile,.launch form.gesendet .zustimmung,.launch form.gesendet .klein,.launch form.gesendet > label{display:none}
@media (min-width:560px){.zeile{flex-direction:row;flex-wrap:wrap}.zeile input[type="email"]{flex:1 1 14rem}}   /* langer Knopftext bricht unter das Feld statt über den Rand (CRM-Auftrag 27.10.2026) */
@media (min-width:900px){.launch{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start}}

/* ---------- Produktseite ---------- */
.pfad{display:flex;flex-wrap:wrap;gap:8px;padding-block:18px 14px}
.pfad a{text-decoration:none}
.pfad a:hover{text-decoration:underline}
.produkt{display:grid;gap:clamp(24px,4vw,56px)}
.galerie{min-width:0}
.galerie-satz{list-style:none;display:grid;grid-auto-flow:column;grid-auto-columns:100%;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(-1 * var(--rand))}
.galerie-satz::-webkit-scrollbar{display:none}
.galerie-satz > li{scroll-snap-align:center}
.galerie-satz .bild{aspect-ratio:1/1;border-radius:0}
/* Großansicht per Klick (Alex 18.10.2026): Bild auf Nebel wie die Kachel, Etikett und Zähler unten, Knöpfe in Textfarbe (site.js) */
.galerie-satz .bild img[role="button"]{cursor:zoom-in}
.galerie-satz .bild img:focus-visible{outline:2px solid var(--anthrazit);outline-offset:-6px}
html.lupe-offen{overflow:hidden}
.lupe{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--grund);color:var(--text);overscroll-behavior:contain}
.lupe::backdrop{background:var(--grund)}
.lupe-bild{position:absolute;inset:calc(68px + env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) calc(76px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));margin:0;display:grid;place-items:center;container-type:size}
/* Das Bild steht als Nebel-Kachel auf dem Seitengrund wie in der Galerie: Schatten, die bis an den Bildrand reichen (KS2, KS3, DB1
   rechts; TR1-Gurte oben), enden an der Kachelkante statt mitten in der Fläche. Darunter liegt das schon geladene Galeriebild als
   Platzhalter, bis die Großansicht-Datei da ist (site.js). Ohne Container-Einheiten füllt das Bild das Feld wie bisher. */
.lupe-bild picture{display:block;width:100%;height:100%;width:min(100cqw,100cqh);height:min(100cqw,100cqh);overflow:hidden;border-radius:var(--radius);background:var(--kachel) center/cover no-repeat}
.lupe-bild img{display:block;width:100%;height:100%;object-fit:contain}   /* ganz eingepasst, auch hohe Bilder (Maßbild) */
.lupe-leiste{position:absolute;left:max(68px,calc(68px + env(safe-area-inset-left,0px)));right:max(68px,calc(68px + env(safe-area-inset-right,0px)));bottom:calc(22px + env(safe-area-inset-bottom,0px));display:flex;justify-content:space-between;align-items:center;gap:12px}
.lupe-etikett{min-width:0}
.lupe-etikett .etikett{position:static;max-width:100%}
.lupe-zaehler{flex:none;font-variant-numeric:tabular-nums}
.lupe-knopf{position:absolute;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1.25px solid var(--anthrazit);border-radius:50%;background:var(--etikett-grund);color:var(--anthrazit);font:400 20px/1 var(--sans);cursor:pointer}
.lupe-knopf:hover{background:var(--kreide)}
.lupe-knopf:focus-visible{outline:2px solid var(--text);outline-offset:3px}
.lupe-knopf[hidden]{display:none}
.lupe-zu{top:calc(14px + env(safe-area-inset-top,0px));right:max(14px,calc(14px + env(safe-area-inset-right,0px)))}
.lupe-zu::before{content:"\00d7";font-size:26px}
.lupe-zurueck,.lupe-weiter{bottom:calc(12px + env(safe-area-inset-bottom,0px))}
.lupe-zurueck{left:max(14px,calc(14px + env(safe-area-inset-left,0px)))}
.lupe-weiter{right:max(14px,calc(14px + env(safe-area-inset-right,0px)))}
.lupe-zurueck::before{content:"\2190"}
.lupe-weiter::before{content:"\2192"}
@media (min-width:900px){
  .lupe-bild{inset:72px 96px 84px}
  .lupe-zurueck,.lupe-weiter{bottom:auto;top:50%;transform:translateY(-50%)}
  .lupe-leiste{left:96px;right:96px}
}
.galerie-satz[hidden]{display:none}
.galerie-zaehler{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px}
.bildzeile{margin-top:14px;font-size:14px;line-height:1.5;color:var(--text-leise)}
.bildzeile .link{white-space:nowrap}
.kaufen{display:grid;gap:18px;align-content:start}
.kaufen .label{display:flex;gap:10px;flex-wrap:wrap}
.kaufen h1{font-size:clamp(34px,4.4vw,56px);line-height:.98;letter-spacing:-.03em}
.kaufen .material{font-size:17px;color:var(--text-leise);margin-top:-8px}
.wahl{border:0;padding:0;margin:0;display:grid;gap:10px}
.wahl legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}   /* „Farbe · Mattweiß“ steht schon in der Datenzeile und auf dem gewählten Knopf (Alex 25.10.2026), nur für Screenreader */
.wahl-knoepfe{display:flex;flex-wrap:wrap;gap:8px}
.wahl-knoepfe button{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:9px 16px;border:0;border-radius:999px;background:transparent;box-shadow:inset 0 0 0 1px var(--linie);font:500 14px/1.2 var(--sans);transition:box-shadow .2s var(--ease)}
.wahl-knoepfe button:hover{box-shadow:inset 0 0 0 1px var(--linie-stark)}
.wahl-knoepfe button[aria-pressed="true"]{box-shadow:inset 0 0 0 1.5px var(--linie-stark)}
.wahl-knoepfe button i{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--muster-rand)}
.kaufen .knopf{width:100%}
.passt .link{display:inline-block;padding-block:3px}   /* Zielgröße ≥ 24 px (WCAG 2.2, 2.5.8) */
/* Preise (CRO-Auftrag 28.10.2026): Gesamtpreis der gewählten Variante über Status und Hauptaktion, Zahl in Textfarbe (kein Akzent),
   Pflichthinweis leise daneben. Preisvorgaben (daten/preise.json „vorgabe“) erscheinen nur in der Vorschau (site.js setzt
   html.ist-vorschau) und tragen dort eine gestrichelte Kennzeichnung wie die Medienplätze; öffentlich bleiben sie unsichtbar. */
html:not(.ist-vorschau) [data-preis-vorgabe]{display:none!important}
.preis{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:0}
.preis-zahl{font-variant-numeric:tabular-nums;white-space:nowrap}
.preis > .preis-zahl{font:600 clamp(26px,2.3vw,30px)/1.1 var(--sans);letter-spacing:-.01em}
.preis-hinweis{font-size:13px;line-height:1.4;color:var(--text-leise)}
.raster-hinweis{font-size:13px;line-height:1.4;color:var(--text-leise);margin:clamp(14px,1.8vw,22px) 0 0}   /* einmal unter dem Kachelraster (Rechtsprüfung 31.10.2026) */
.preis-mark{display:inline-block;padding:3px 6px;border:1px dashed var(--linie-stark);border-radius:2px;font:500 10.5px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-leise);white-space:nowrap}
.preis > .preis-mark{flex-basis:auto}
.kachel-preis{display:block;margin-top:2px;font:500 15px/1.3 var(--sans)}
.kachel-preis .preis-mark{margin-left:4px;padding:2px 5px;font-size:9.5px;vertical-align:1px}
.preis-leiste .preis-zahl{color:var(--text);font-weight:600}
/* Kaufbox A „Aufgeräumt“ (Alex 28.10.2026): Status klein unter dem Knopf; auf der TENSION-Seite die Auflage als ruhiges Zeichen am Preis
   (Kontur in Textfarbe, kein zweiter Akzent neben dem Kobalt-Knopf) */
.kaufen .status{margin-top:-6px;font-size:11px;color:var(--text-leise)}
.auflage-zeichen{justify-self:start;margin:-6px 0 0;padding:3px 8px;border:1px solid var(--linie-stark);border-radius:2px;font:500 11px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase}

/* P2 · „Passt das bei dir?“: Montage-Voraussetzungen aus dem Datenblatt in der Kaufbox (Alex 18.10.2026) */
.passt{display:grid;gap:10px;padding-top:8px}
.passt .spez{width:100%;gap:8px;font-size:11px}
.passt .link{justify-self:start;font-size:14px}
@media (min-width:900px){
  .produkt{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start}
  .galerie-satz{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-columns:auto;overflow:visible;margin-inline:0;gap:10px}
  .galerie-satz .bild{border-radius:2px}
  .galerie-satz > li:first-child,.galerie-satz.letztes-gross > li:last-child{grid-column:1/-1}   /* erstes immer groß (Alex 19.10.2026) */
  .galerie-zaehler{display:none}
  .kaufen{position:sticky;top:calc(var(--kopf-h) + var(--ansage-h,0px) + 24px)}
  .kaufen .knopf{width:auto}
}
.fakten{display:grid;gap:clamp(36px,5vw,72px)}
.fakten h2,.fakten h3{margin-bottom:18px}
.material-liste{list-style:none;display:grid;gap:10px;max-width:46ch}
.material-liste li{position:relative;padding-left:22px;line-height:1.5}
.material-liste li::before{content:"";position:absolute;left:0;top:.72em;width:10px;border-top:1.5px solid currentColor}
@media (min-width:900px){.fakten{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Montage-Seite „Im Karton“: vier Listen ohne Lücke (Formatcheck L4: vorher DB1 allein in der zweiten Reihe) */
@media (min-width:760px){.fakten.karton-listen{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.fakten.karton-listen{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:clamp(24px,2.6vw,40px)}}
.raum .bild{aspect-ratio:4/5}
@media (min-width:760px){.raum{max-width:640px}}

/* P1 · Kaufleiste am Handy: erscheint, wenn der Knopf der Kaufbox aus dem Bild ist, und geht am Fuß weg (site.js).
   Ruhig: Kopf-Fläche, Textfarbe, nur Einblenden, keine Signalfarbe (Alex 18.10.2026). */
.kaufleiste{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--kopf);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--linie);padding-bottom:env(safe-area-inset-bottom,0px);opacity:0;visibility:hidden;transition:opacity .28s var(--ease),visibility 0s linear .28s}
.kaufleiste.an{opacity:1;visibility:visible;transition:opacity .28s var(--ease),visibility 0s}
.kaufleiste-zeile{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:64px;padding-block:8px}
.kaufleiste-text{display:grid;gap:2px;min-width:0;font:500 11.5px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-leise)}
.kaufleiste-text b{font:600 15px/1.2 var(--sans);letter-spacing:-.005em;text-transform:none;color:var(--text)}
.kaufleiste-text b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kaufleiste-text > span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}   /* Name bricht um statt „…“ (Formatcheck B3) */
.kaufleiste .knopf{flex:none;min-height:44px;padding:10px 18px;font-size:14px}
@media (min-width:900px){.kaufleiste{display:none}}

/* P3 · Die drei Klimmzugstangen nebeneinander (nur eigene Modelle, Master §7). Handy: seitlich wischen, Zeilentitel bleiben stehen. */
.vergleich-rahmen{overflow-x:auto;margin-inline:calc(-1 * var(--rand));padding-inline:var(--rand)}
.vergleich{width:100%;min-width:560px;border-collapse:collapse;font-size:15px;line-height:1.4;font-variant-numeric:tabular-nums}
.vergleich th,.vergleich td{padding:13px 16px 13px 0;text-align:left;vertical-align:top;border-bottom:1px solid var(--linie)}
.vergleich thead th,.vergleich thead td{border-bottom:1.5px solid var(--linie-stark);padding-bottom:14px}
.vergleich thead a{display:grid;gap:3px;text-decoration:none}
.vergleich thead a:hover b{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.vergleich thead b{font:600 18px/1.2 var(--sans);letter-spacing:-.01em}
.vergleich thead span{font-size:13.5px;font-weight:400;color:var(--text-leise)}
.vergleich tbody th{position:sticky;left:0;z-index:1;background:var(--grund);font:500 11.5px/1.7 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--text-leise);white-space:nowrap;padding-right:20px}
.vergleich td span{display:block;margin-top:2px;font-size:12.5px;color:var(--text-leise)}

/* P4 · Antworten je Produkt zum Aufklappen */
.antworten{display:grid;max-width:820px;border-top:1px solid var(--linie)}
.antwort{border-bottom:1px solid var(--linie)}
.antwort summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:56px;padding-block:14px;font:600 17px/1.35 var(--sans);letter-spacing:-.01em}
.antwort summary::-webkit-details-marker{display:none}
.antwort summary::after{content:"+";flex:none;font:400 22px/1 var(--sans);color:var(--text-leise)}
.antwort[open] summary::after{content:"\2212"}
.antwort > p{padding:0 0 22px;color:var(--text-leise)}

/* Ratgeber auf der Produktseite (Alex 28.10.2026): die Artikel zu diesem Gerät als ruhige Liste wie die Antworten; Stil der Artikel in ratgeber.css */
.rg-liste{list-style:none;display:grid;max-width:820px;border-top:1px solid var(--linie)}
.rg-liste a{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;padding:16px 0;border-bottom:1px solid var(--linie);text-decoration:none;color:inherit}
.rg-liste a > *{grid-column:1}
.rg-liste b{margin-top:4px;font:600 17px/1.35 var(--sans);letter-spacing:-.01em}
.rg-liste .leise{margin-top:2px;font-size:15px;line-height:1.45}
.rg-liste a::after{content:"→";grid-column:2;grid-row:1/4;align-self:center;color:var(--text-leise)}
.rg-liste a:hover b{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}

/* T1 · weiche Seitenwechsel (Chrome/Edge ab 126, Safari ab 18.2); bei „Bewegung reduzieren“ keine Übergänge */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.24s;animation-timing-function:var(--ease)}
  .kopf{view-transition-name:kopf}
}

/* TENSION · Statement mit Anlass (Drop 01): nur der Auftakt dunkel, Orange nur hier (Master §10, §11) */
.anlass{background:var(--nacht);color:var(--kalk);padding-block:clamp(40px,7vw,96px)}
.anlass .label{color:#A9A69F}
.anlass .statement em{font-style:normal;color:var(--orange);display:block}
.anlass .zweit{margin-top:18px;font:600 clamp(18px,1.8vw,23px)/1.25 var(--display);letter-spacing:-.015em}

/* ---------- Über TRÆN · Wie unsere Bilder entstehen ---------- */
.legende{list-style:none;display:grid;gap:12px}
.legende li{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:16px;align-items:center;padding-block:12px;border-top:1px solid var(--linie)}
.nah.beispiele .bild{aspect-ratio:1/1}
.beispiele .etikett .kuerzel:nth-child(n+3){display:none}   /* nur das Kürzel fällt weg, nie ein Herkunftsfeld (Formatcheck E4) */
.legende .etikett{justify-self:start}
.bilder-inhalt{display:grid;gap:24px;align-content:start;min-width:0}   /* Titel links, Text, Legende und Beispiele rechts (Formatcheck A4) */
@media (max-width:560px){.legende li{grid-template-columns:minmax(0,1fr);gap:8px}}
.zwei-spalten{display:grid;gap:clamp(28px,4vw,72px)}
@media (min-width:900px){.zwei-spalten{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}

/* ---------- Montage-Seite ---------- */
.anleitungen{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.4vw,28px) clamp(10px,1.4vw,18px)}
.anleitungen a.kachel .bild{aspect-ratio:1/1}
@media (min-width:760px){.anleitungen{grid-template-columns:repeat(4,minmax(0,1fr))}}   /* nur montierte Produkte: vier (Alex 18.10.2026) */

/* ---------- Fuß ---------- */
.fuss{margin-top:var(--abstand);border-top:1px solid var(--linie);padding-block:clamp(44px,6vw,80px) 28px}
.fuss-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 20px}
.fuss h2{font:500 11.5px/1.35 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--text-leise);margin-bottom:14px}
.fuss ul{list-style:none;display:grid;gap:10px}
.fuss a{text-decoration:none;font-size:15px;hyphens:auto;overflow-wrap:anywhere}   /* 320 px: „Datenschutzerklärung“ passt nicht in die halbe Spalte (Reflow, WCAG 1.4.10; CRO-Auftrag 28.10.2026) */
.fuss a:hover{text-decoration:underline;text-underline-offset:3px}
.fuss-unten{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px 24px;margin-top:clamp(40px,6vw,72px);padding-top:20px;border-top:1px solid var(--linie);font:500 11.5px/1.35 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--text-leise)}
.fuss-unten .wm{width:92px;color:var(--text)}
@media (min-width:760px){.fuss-raster{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---------- Montageanleitung je Produkt (anleitung/<produkt>/, Branch anleitung-ks2, Alex 18.10.2026) ----------
   Kurz zuerst: Kopf, Wand-Check als Karte mit Status, zehn Schritte zum Abhaken. Erklärungen, Teile, Bohrmehl, alle
   Sicherheitshinweise und Pflichtangaben liegen hinter „Mehr erfahren“ (<details>: ohne JS bedienbar, die Suche im Browser
   findet den Inhalt). Etikett an jedem Bild und Film (Master §11); Pfeile, Buchstaben und Zonen als Vektor-Ebene aus den
   Ankerpunkten der Vorlage. Emerald nur für Status und Montage-Schritte (Nummer, Haken, Fortschritt, Pfeile im Bild). */
.anl [id]{scroll-margin-top:14px}   /* die Leiste unter dem Kopf hält scroll-padding-top frei (Formatcheck F2), dazu etwas Luft */
.anl-kopf{display:grid;gap:clamp(20px,3vw,40px);padding-top:clamp(4px,1vw,12px)}
.anl-kopf-text{display:grid;gap:16px;align-content:end;justify-items:start}
.anl-kopf h1{font-size:clamp(36px,4.6vw,64px);line-height:.98;letter-spacing:-.03em;hyphens:manual}
.anl-kopf .lead{max-width:34ch}
.anl-fassung{font-size:13px;line-height:1.4;color:var(--text-leise);margin:0;max-width:56ch}   /* Online-Fassung (Rechtsprüfung 31.10.2026) */
.anl-entwurf{display:inline-flex;align-items:center;font:500 11px/1.3 var(--mono);letter-spacing:.09em;text-transform:uppercase;padding:6px 9px;border:1.25px dashed var(--linie-stark);border-radius:4px}
.anl-legende{font-size:14px;line-height:1.55;color:var(--text-leise);max-width:76ch;text-wrap:pretty}
.anl-legende .link{white-space:nowrap}
@media (min-width:900px){.anl-kopf{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:end;column-gap:clamp(32px,4vw,64px)}.anl-legende{grid-column:1/-1}}

/* Leiste unter dem Kopf: Sprungmarken und Fortschritt; erscheint mit dem ersten Abschnitt und bleibt stehen */
.anl-leiste{position:sticky;top:calc(var(--kopf-h) + var(--ansage-h,0px));z-index:60;margin-top:clamp(28px,4vw,48px);background:var(--kopf);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-block:1px solid var(--linie)}
.anl-leiste-zeile{display:flex;align-items:center;gap:clamp(14px,2.6vw,36px);min-height:46px}
.anl-leiste-titel{display:none;font:500 11.5px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--text-leise);white-space:nowrap}
.anl-sprung{display:flex;gap:clamp(14px,2.6vw,28px);min-width:0}
/* Vier Sprungmarken (LG1, TR1) passen am Handy nicht neben den Zähler: die Reihe wischt quer, statt in „0 von 5“ zu laufen
   (19.10.2026). Innenabstand und Gegenrand halten den Fokusrahmen frei, ohne die Lage zu verschieben. */
.anl-sprung{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:6px;margin:-6px}
.anl-sprung::-webkit-scrollbar{display:none}
.anl-sprung a{font:500 11.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;padding-block:13px;white-space:nowrap;opacity:.8}
.anl-sprung a:hover{opacity:1;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.anl-fortschritt{margin-left:auto;display:flex;align-items:center;gap:10px;font:500 11.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;font-variant-numeric:tabular-nums}
.anl-fortschritt .balken{position:relative;width:clamp(36px,7vw,96px);height:4px;border-radius:2px;background:var(--linie);overflow:hidden}
.anl-fortschritt .balken i{position:absolute;inset:0 auto 0 0;width:0;background:var(--status);transition:width .5s var(--ease)}
@media (min-width:900px){.anl-leiste-titel{display:inline}}
@media (max-width:359px){.anl-fortschritt .balken{display:none}}
.anl-kopfzeile{display:grid;gap:10px}
.anl-leiste + .abschnitt{padding-top:clamp(40px,5vw,72px)}

/* Wand-Check: kurz als Karte mit Status, die vier Karten mit Bildern hinter „Wand-Check ansehen“ */
.anl-wc{display:grid;gap:22px;padding:clamp(20px,2.8vw,36px);border:1px solid var(--linie);border-radius:4px}
.anl-wc-text{display:grid;gap:12px;align-content:start}
.anl-status{list-style:none;display:grid;gap:12px;align-content:center}
.anl-status li{display:flex;align-items:center;gap:12px;font-size:15.5px;line-height:1.35}
.anl-wc .anl-mehr{grid-column:1/-1}
@media (min-width:900px){.anl-wc{grid-template-columns:minmax(0,1fr) minmax(0,.85fr);align-items:center;column-gap:clamp(32px,4vw,72px)}}
.wc-karte h3{font:600 19px/1.2 var(--display);letter-spacing:-.015em}
.wc-karte > .bild{margin-bottom:4px}
.wc-typen-bilder{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px}
.wc-typen-bilder li{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;padding:0;border:0;align-content:start}
.wc-typen-bilder .wc-notiz{grid-column:auto;padding-left:30px}   /* Formatanalyse 25.10.2026: Notiz bündig mit dem Namen (22 px Zeichen + 8 px Abstand) */
.wc-typen-bilder .etikett{left:6px;bottom:6px;max-width:calc(100% - 12px);font-size:10px;letter-spacing:.06em}   /* kleine Kachel: Etikett kompakt, ganz lesbar (Formatcheck E2: vorher 9 px) */
.wc-typen-bilder .etikett span{padding:4px 6px}
.wc-typ-name{display:flex;align-items:center;gap:8px;margin-top:6px}
.wc-typ-name .wc-mark{align-self:center}
@container (min-width:600px){.wc-karte.breit .wc-typen-bilder{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* „Mehr erfahren“: Pille in Textfarbe, öffnet weich, wo der Browser die Höhe animieren kann (sonst springt es auf) */
.anl-mehr > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:10px 18px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--linie-stark);font:500 14.5px/1.2 var(--sans);transition:background-color .2s var(--ease);-webkit-tap-highlight-color:transparent}
.anl-mehr > summary::-webkit-details-marker{display:none}
.anl-mehr > summary::after{content:"";flex:none;width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .35s var(--ease)}
.anl-mehr[open] > summary::after{transform:translateY(2px) rotate(-135deg)}
.anl-mehr > summary:hover{background:var(--flaeche)}
.anl-mehr.klein > summary{min-height:44px;padding:8px 15px;font-size:13.5px}   /* 44 px (Formatcheck B1) */
.anl-mehr-innen{display:grid;gap:18px;padding-top:18px}
@supports (interpolate-size:allow-keywords){
  .anl{interpolate-size:allow-keywords}
  .anl details::details-content{height:0;overflow:clip;transition:height .5s var(--ease),content-visibility .5s allow-discrete}
  .anl details[open]::details-content{height:auto}
}

/* Schritte */
.anl-schritte{list-style:none;display:grid;gap:clamp(44px,5vw,64px) clamp(16px,2vw,28px)}
@media (min-width:760px){.anl-schritte{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.anl-schritte{grid-template-columns:repeat(3,minmax(0,1fr))}}
.anl-schritt{display:grid;gap:12px;align-content:start;min-width:0}
.anl-koerper{display:grid;gap:12px;align-content:start}
/* Ab Tablet: die Köpfe einer Reihe stehen auf einer Linie (Subgrid), Bilder sitzen unten auf der Linie, der Text fließt darunter */
@media (min-width:760px){
  .anl-schritte{row-gap:12px}
  .anl-schritt{grid-row:span 3;grid-template-rows:subgrid;gap:12px}
  .anl-medien{align-self:end}
  .anl-koerper{margin-bottom:clamp(32px,4vw,52px)}
}
.anl-medien{display:grid;transition:opacity .4s var(--ease)}
.anl-schritt.fertig .anl-medien{opacity:.7}
.anl-schritt-kopf{display:flex;align-items:center;gap:12px;padding-top:12px;border-top:2px solid var(--status)}
.anl-nr{font:500 13px/1 var(--mono);letter-spacing:.06em;color:var(--status)}
.anl-schritt h3{font-size:clamp(21px,1.8vw,25px)}
.anl-koerper > p{max-width:46ch;line-height:1.5}
.anl-daten{font:500 12px/1.45 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.anl-haken{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 0 0 10px;border:0;background:none;font:500 11.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-leise);-webkit-tap-highlight-color:transparent}
.anl-haken i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--linie-stark);transition:background-color .3s var(--ease),box-shadow .3s var(--ease)}
.anl-haken svg{width:14px;height:14px;stroke:#FCFCFA;opacity:0;transform:scale(.4);transition:opacity .25s var(--ease),transform .35s cubic-bezier(.2,1.4,.4,1)}
.anl-haken[aria-pressed="true"]{color:var(--status)}
.anl-haken[aria-pressed="true"] i{background:var(--status);box-shadow:none}
.anl-haken[aria-pressed="true"] svg{opacity:1;transform:none}
.anl-zweit{display:grid;gap:8px;margin-top:6px}
.anl-warnung{display:flex;gap:10px;align-items:center;font:600 15px/1.35 var(--sans);padding:10px 12px;border:1.5px solid var(--linie-stark);border-radius:4px}
.anl-warnung .icon{flex:none}
.anl-warnung.leise{font-weight:500;border-width:1px}
.anl-hinweis{font-size:15px;line-height:1.55;color:var(--text-leise);padding-left:12px;border-left:2px solid var(--linie)}
.anl-gruppe{display:grid;gap:10px}
.anl .wc-tabelle table{min-width:0}
.anl-teile{width:100%}
.anl-teile .z > span:first-child{opacity:1;flex:none;width:16px;font-weight:600}
.anl-werkzeug{list-style:none;display:grid;gap:10px}
.anl-werkzeug li{display:flex;gap:12px;align-items:center;font-size:15px;line-height:1.35}
.anl-werkzeug li.nein{font-weight:600}
.anl-werkzeug .icon{flex:none}

/* Bilder: Vektor-Ebene und Etiketten liegen über dem Bild, das Bildetikett ganz oben und lesbar (bricht um statt abzuschneiden) */
.anl-ebene{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:hidden}
.anl-etiketten{position:absolute;inset:0;pointer-events:none;z-index:2}
.anl .et{position:absolute;transform:translate(-50%,-50%);font:500 12px/1 var(--mono);letter-spacing:.06em;color:#2B2B2B;white-space:nowrap}
.anl .et-buchstabe{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#FCFCFA;box-shadow:inset 0 0 0 1.25px #2B2B2B;font-size:11.5px}
.anl .et-wort,.anl .et-mass{background:rgba(252,252,250,.92);padding:5px 7px;border-radius:3px;text-transform:uppercase}
.anl .et-mass{text-transform:none}
.anl .et-r{transform:translate(8px,-50%)}
.anl .et-l{transform:translate(calc(-100% - 8px),-50%)}
.anl .et-o{transform:translate(-50%,calc(-100% - 6px))}
.anl .et-u{transform:translate(-50%,6px)}
.anl .bild .etikett{z-index:3}
.anl .etikett span{white-space:normal}
.schall{transform-box:view-box;animation:klopf 1.8s ease-out infinite;animation-delay:calc(var(--i) * .14s)}
@keyframes klopf{0%{opacity:0;transform:scale(.82)}25%{opacity:1}70%{opacity:.15;transform:scale(1.12)}100%{opacity:0;transform:scale(1.12)}}
.ziffer{position:absolute;transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;background:var(--emerald);color:#FCFCFA;display:grid;place-items:center;font:600 14px/1 var(--mono);opacity:0;animation:zifferpop 4.8s infinite;animation-delay:calc(var(--n) * .7s)}
@keyframes zifferpop{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}6%{opacity:1;transform:translate(-50%,-50%) scale(1.2)}10%,85%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1)}}

/* Filme der Anleitung: 1:1, Etikett unten, Pause oben rechts; „7 cm“ folgt den am fertigen Film gemessenen Ankern */
.anl .film{aspect-ratio:1/1}
.anl .film .film-leiste,.anl .film .film-flaeche{z-index:4}
.mass-ebene{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.mass-ebene line{stroke:#2B2B2B;stroke-width:4;stroke-linecap:round;opacity:0;transition:opacity .25s}
.mass-ebene.an line{opacity:1}
.mass-label,.mass-pop{position:absolute;left:0;top:0;z-index:3;transform:translate(-50%,calc(-100% - 12px));font:500 15px/1 var(--mono);padding:7px 10px;border-radius:3px;background:#2B2B2B;color:#FCFCFA;opacity:0;pointer-events:none;white-space:nowrap}
.mass-label.an{opacity:1;transition:opacity .25s}
.mass-pop.an{animation:masspop .7s cubic-bezier(.2,1.6,.4,1) both}
@keyframes masspop{0%{opacity:0;transform:translate(-50%,calc(-100% - 12px)) scale(.35)}55%{opacity:1;transform:translate(-50%,calc(-100% - 12px)) scale(1.2)}100%{opacity:1;transform:translate(-50%,calc(-100% - 12px)) scale(1)}}

/* Danach, Sicherheit, weitere Angaben */
.anl-danach{display:grid;gap:clamp(28px,4vw,64px)}
.anl-danach-text{display:grid;gap:18px;align-content:start}
.anl-danach h2{font-size:clamp(36px,5vw,64px)}
.anl-hilfe{display:grid;gap:8px;margin-top:6px;padding:clamp(18px,2vw,26px);border-radius:4px;background:var(--flaeche);max-width:520px}
.anl-hilfe h3{font-size:clamp(19px,1.6vw,22px)}
@media (min-width:900px){.anl-danach{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}}
.anl-wichtig-label{margin-bottom:6px}
.anl-sicher{list-style:none;display:grid;margin-bottom:22px}
.anl-sicher li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:8px;padding-block:13px;border-top:1px solid var(--linie);font-size:15.5px;line-height:1.5}
.anl-sicher-nr{font:500 12px/1.9 var(--mono);color:var(--text-leise)}
.anl-sicher.alle{margin-bottom:0}
@media (min-width:900px){.anl-wichtig,.anl-sicher.alle{column-gap:clamp(24px,3vw,48px)}.anl-wichtig{grid-template-columns:repeat(3,minmax(0,1fr))}.anl-sicher.alle{grid-template-columns:repeat(2,minmax(0,1fr))}}
.anl-pflicht-innen{display:grid;gap:18px;padding-bottom:28px;max-width:860px}
.anl-pflicht-innen > p{color:var(--text-leise)}
.anl-block{display:grid;gap:8px}
.anl-block h3{font:600 16px/1.35 var(--sans);letter-spacing:-.005em}
.anl-block p{color:var(--text-leise);line-height:1.6;max-width:70ch}
.anl .material-liste{max-width:64ch}
.anl-ol{display:grid;gap:8px;padding-left:22px;line-height:1.5}
.anl-ol li::marker{font:500 12px var(--mono);color:var(--text-leise)}
.anl-tabelle{display:grid;margin:0}
.anl-tabelle > div{display:grid;gap:4px;padding-block:12px;border-top:1px solid var(--linie)}
.anl-tabelle dt{font:500 11.5px/1.4 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--text-leise)}
.anl-tabelle dd{margin:0;line-height:1.5}
@media (min-width:760px){.anl-tabelle > div{grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:24px}}
.anl-grafik{max-width:640px}
.anl-grafik img{object-fit:contain}
.anl-grafik svg{display:block;width:100%;height:100%}   /* Zeichnung inline, damit Söhne greift (28.10.2026) */
.anl-hersteller span{margin-right:6px;color:var(--text)}
.antwort > .antwort-link{margin-top:-12px}

/* Anleitung ohne Montage (LG1, TR1, 19.10.2026): Prüf-Karte wie der Wand-Check, Übungen als Nebel-Karten (Nummer leise: keine
   Statusfarbe, die gehört den Schritten zum Abhaken), Handstand als nummerierte Liste mit Empfehlung in Mono */
.anl-check .wc-karte p{max-width:62ch}
@container (min-width:1000px){   /* breite Karte (01) links über alle Zeilen, die übrigen rechts untereinander: Lesefolge 01 → 04 */
  .anl-check .wc-karten{grid-template-columns:repeat(2,minmax(0,1fr))}
  .anl-check .wc-karte.breit{grid-column:1;grid-row:1/span 3}
  .anl-check .wc-karte:last-child{grid-column:auto}
}
.anl-uebungen{list-style:none;display:grid;gap:clamp(12px,1.6vw,20px);align-items:start}   /* offene Karte streckt die Nachbarn nicht */
@media (min-width:760px){.anl-uebungen{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.anl-uebungen{grid-template-columns:repeat(3,minmax(0,1fr))}}
.anl-uebung{display:grid;gap:12px;align-content:start;min-width:0;padding:clamp(18px,2vw,26px);border-radius:4px;background:var(--flaeche)}
.anl-medien.zwei{gap:8px}   /* Übung mit Nahaufnahme (Übungsbilder Runde 5, 25.10.2026): untereinander, sonst wird das eingebrannte „AI“ unlesbar klein */
.anl-hs-bild{max-width:420px;gap:12px}
@media (min-width:760px){.anl-hs-bild:has(> :nth-child(2)){max-width:840px;grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.anl-hs-bild:has(> :nth-child(3)){max-width:none;grid-template-columns:repeat(3,minmax(0,1fr))}}   /* zwei Handstand-Bilder nebeneinander */
.anl-uebung-kopf{display:flex;align-items:baseline;gap:12px}
.anl-uebung .anl-nr{color:var(--text-leise)}
.anl-uebung h3{font-size:clamp(20px,1.7vw,24px)}
.anl-uebung .anl-mehr > summary:hover{background:var(--grund)}
.anl-regeln{margin-top:clamp(18px,2.2vw,26px)}
.anl-handstand{display:grid;gap:16px;margin-top:clamp(44px,5vw,64px);padding-top:clamp(18px,2.2vw,26px)}
.anl-handstand > .text{max-width:60ch}
.anl-hs{list-style:none;display:grid}
.anl-hs li{display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:8px;row-gap:4px;align-content:start;padding-block:13px;border-top:1px solid var(--linie);font-size:15.5px;line-height:1.5}
.anl-hs .anl-nr{grid-row:span 3;font-size:12px;line-height:1.9;color:var(--text-leise)}
.anl-hs b{font-weight:600}
.anl-hs-text{color:var(--text-leise)}
@media (min-width:900px){.anl-hs{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,3vw,48px)}}
.anl-empfehlung .anl-daten{text-transform:none;letter-spacing:.03em;font-size:13px}
.anl-empfehlung{display:grid;gap:8px;padding:clamp(18px,2vw,26px);border-radius:4px;background:var(--flaeche);max-width:520px}

/* Montage-Seite: Sicherheitshinweise je Produkt (Ziel „Sicherheitshinweise“ im Fuß) */
.sicher-links{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);column-gap:clamp(24px,3vw,48px);border-top:1px solid var(--linie)}
.sicher-links a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--linie);text-decoration:none;font-size:15.5px}
.sicher-links a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
@media (min-width:760px){.sicher-links{grid-template-columns:repeat(2,minmax(0,1fr))}}

@media (prefers-reduced-motion:no-preference){
  .anl-mehr[open] .anl-mehr-innen > *,.anl-mehr[open] .wc-karte{animation:auftauchen .45s var(--ease) both}
  .anl-mehr[open] .anl-mehr-innen > :nth-child(2),.anl-mehr[open] .wc-karte:nth-child(2){animation-delay:60ms}
  .anl-mehr[open] .anl-mehr-innen > :nth-child(3),.anl-mehr[open] .wc-karte:nth-child(3){animation-delay:120ms}
  .anl-mehr[open] .wc-karte:nth-child(4){animation-delay:180ms}
}
@media (prefers-reduced-motion:reduce){
  .anl details::details-content{transition:none}
  .schall{animation:none}
  .ziffer{animation:none;opacity:1}
  .mass-pop.an{animation:none;opacity:1}
  .mass-label.an{transition:none}
  .anl-haken i,.anl-haken svg,.anl-fortschritt .balken i,.anl-medien,.anl-mehr > summary::after{transition:none}
}

/* ---------- Bewegung: additiv, ohne JS ist alles sichtbar ---------- */
html.bewegt .rv{opacity:0;transform:translateY(12px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
html.bewegt .rv.da{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html.bewegt .rv{opacity:1;transform:none;transition:none}
  .kachel .bild img,.knopf .pfeil{transition:none}
}

/* ---- Launch-Auftrag 20.10.2026: Anmeldung (R4), Medienplätze (R3), Vorschau-Leiste (R8) ---- */
.launch .meldung:empty{display:none}
.launch .meldung{font-size:15px;line-height:1.5;color:var(--text)}
.launch .meldung[data-art="angenommen"]{color:var(--status)}
.launch .meldung[data-art="sende"]{color:var(--text-leise)}
.launch form[aria-busy="true"] .knopf{opacity:.6;cursor:progress}
.falle{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.medienplatz{position:relative;width:100%;border-radius:4px;overflow:hidden;background:var(--flaeche)}
.medienplatz.leer.vorschau{display:grid;place-content:center;gap:10px;padding:24px;text-align:center;border:1px dashed var(--linie-stark)}
.medienplatz-mark{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-leise)}
.medienplatz-titel{font-size:15px;line-height:1.45;color:var(--text);max-width:36ch}
.medien-abschnitt .medienplatz{max-width:880px}
.seite-produkt .medien-abschnitt .medienplatz{max-width:560px}
.founder .medienplatz{aspect-ratio:4/5}
.film-abruf picture,.film-abruf img,.film-abruf video{display:block;width:100%;height:100%;object-fit:cover}
.film-abruf .abspielen{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:10px;
  padding:12px 18px;border:0;border-radius:999px;background:var(--grund);color:var(--text);font:inherit;font-size:15px;cursor:pointer;min-height:44px}
.film-abruf .abspielen:focus-visible{outline:2px solid var(--link);outline-offset:3px}
.abspielen-zeichen{width:0;height:0;border-style:solid;border-width:7px 0 7px 12px;border-color:transparent transparent transparent currentColor}
.vorschau-leiste{position:relative;z-index:60;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;
  padding:8px 16px;background:#161616;color:#FCFCFA;font-size:13px;line-height:1.4}
.vorschau-leiste a{color:#FCFCFA;text-decoration:underline;text-underline-offset:3px}
.vorschau-leiste a:focus-visible{outline:2px solid #8298E8;outline-offset:2px}
.sicherheit-block{display:grid;gap:10px;align-content:start}
.kurz-dl{display:grid;gap:8px;margin:0;font-size:14px;line-height:1.5}
.kurz-dl dt{color:var(--text-leise)}
.kurz-dl dd{margin:0}
.status.bald::before{background:var(--text-leise)}

/* Handy: weniger Text unter der Galerie (Alex 25.10.2026); der Hinweis zu den Bildern steht im Fuß */
@media (max-width:759px){.bildzeile{display:none}}

/* „Passt das bei dir?“ mit Symbolen und großen Maßen (Alex 25.10.2026) */
.passt{gap:14px}
.passt-montage{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.passt-montage li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:4px 12px;align-items:center;font-size:14.5px;line-height:1.35}
.passt-montage li > .ikon{width:28px;height:28px}
.passt-montage .t b{font-weight:600}
.ikon.klein{width:22px;height:22px}
/* Handy: weniger Text in der Kaufbox (Alex 25.10.2026): Überschrift in einer Zeile, keine Datenzeile darunter, Symbole bleiben */
@media (max-width:759px){
  .kaufen h1{font-size:min(8vw,36px);line-height:1.05}
  .kaufen > .datenzeile{display:none}
}

/* Wand-Check zum Ansehen (Alex 25.10.2026): Baustoff als Bild, Status rechts, wenig Text; Erklärungen hinter „Mehr erfahren“ */
.ikon.stoff{width:40px;height:40px;stroke-width:1.3}
.baustoffe{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 18px}
.baustoffe li{display:flex;align-items:center;gap:8px;font:500 12px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.baustoffe .ikon.stoff{width:30px;height:30px}
.wc-visuell{gap:clamp(16px,2vw,24px)}
.wc-stoffe{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}   /* nach Platz, nicht nach Fensterbreite: in der Produktseiten-Spalte 3 × 2, auf der Montage-Seite 6 in einer Reihe */
/* Formatanalyse 25.10.2026: Baustoff und Status oben in einer Zeile, Name und Notiz darunter an derselben Kante — kein Zeichen mehr über dem Text */
.wc-stoffe li{display:grid;grid-template-rows:auto auto 1fr;gap:4px;align-content:start;min-width:0;padding:14px;border-radius:6px;background:var(--flaeche)}
.wc-stoff-kopf{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.wc-stoffe .ikon.stoff{width:32px;height:32px}
.wc-stoffe .wc-name{font-weight:600;font-size:15px;line-height:1.25}
.wc-stoffe .wc-notiz{grid-column:auto;font-size:13px;line-height:1.35;color:var(--text-leise)}
.wc-stoffe .wc-mark{width:22px;height:22px}
.wc-schritte{list-style:none;margin:0;padding:0;display:grid;gap:16px}
@media (min-width:760px){.wc-schritte{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}}
.wc-schritte > li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:start}
.wc-schritte > li > .ikon{width:24px;height:24px}
.wc-schritte b{display:block;font-weight:600;font-size:15px;line-height:24px;margin-bottom:6px}
.wc-schritte .wc-chips li,.wc-schritte .leise{font-size:14px;line-height:1.45}
.wc-visuell .wc-probe > p{font-size:15px}

/* Varianten an der Kachel (Alex 25.10.2026) */
.kv{display:block}
.kachel-wahl{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.kw{min-height:28px;border:1px solid var(--linie-stark);border-radius:999px;background:none;color:var(--text);cursor:pointer;font:500 11.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.kw.wort{padding:0 10px}
.kw.punkt{position:relative;width:30px;height:30px;padding:0;border:0;display:inline-grid;place-items:center}
/* Farbknopf ohne Kreis (Alex 31.10.2026, Blatt Knöpfe F1): gewählt mit kurzem Strich darunter, beim Drüberfahren wächst der Punkt leicht */
.kw.punkt i{width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--muster-rand);transition:transform .2s var(--ease)}
.kw.punkt:hover i{transform:scale(1.18)}
.kw.punkt[aria-pressed="true"]{box-shadow:none}
.kw.punkt[aria-pressed="true"]::after{content:"";position:absolute;left:9px;right:9px;bottom:1px;height:2px;border-radius:1px;background:var(--text)}
@media (prefers-reduced-motion:reduce){.kw.punkt i{transition:none}}
.kw[aria-pressed="true"]{border-color:var(--text);box-shadow:inset 0 0 0 1px var(--text)}
.kw:focus-visible{outline:2px solid var(--link);outline-offset:2px}

/* Anleitungen am Handy knapper (Alex 25.10.2026): Titelbild, Wand-Check, Schritte, „Fertig“ und Sicherheit bleiben; Datenzeile,
   Farbzeile und Bild-Legende im Kopf entfallen (der Hinweis zu den Bildern steht im Fuß) */
@media (max-width:759px){
  .anl-kopf-text .datenzeile,.anl-kopf-text .datenzeile + .label,.anl-legende{display:none}
}

/* Runde 2 (Alex 25.10.2026 abends): Handy kompakter. Titel in einer Zeile (Schriftgröße aus der Zeichenzahl --z), unter dem Titel nur ein
   Merkmal, „Farbe · …“ nur noch in der Auswahl, kein zweiter Link zur Anleitung in der Kaufbox. Varianten an der Kachel als Bild im Kreis
   (Vorschlag A); Vorschlag B als Text darunter nur in der Vorschau. */
.kachel-text b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:min(15px,calc(100cqi / var(--z,20) / .62))}
/* Varianten ohne Farbpunkte als Kurztext in einer Zeile (Alex 25.10.2026, Vorschlag B): klein, leise, gewählte Variante in Textfarbe */
.kachel-wahl.als-text{flex-wrap:nowrap;gap:0;align-items:center;min-width:0}
@media (max-width:359px){.kachel-wahl.als-text{flex-wrap:wrap}}   /* 320 px: „Mit Fußschlaufen · Ohne“ ist breiter als die Kachel (Reflow, WCAG 1.4.10) */
.kw.text{min-height:28px;padding:0;border:0;border-radius:0;white-space:nowrap;font:500 12px/1 var(--sans);letter-spacing:0;text-transform:none;color:var(--text-leise)}
.kw.text + .kw.text::before{content:"·";display:inline-block;padding-inline:7px;color:var(--text-leise)}
.kw.text[aria-pressed="true"]{border:0;box-shadow:none;color:var(--text);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
/* Touch (CRO-Auftrag 28.10.2026, M7): Trefferfläche 44 × 44 CSS-px (WCAG 2.5.5, Apple 44 pt) bei unveränderter Optik — der Ring
   (28 px) ist ein Pseudo-Element in der Mitte, der Rest der Fläche ist durchsichtig; Textknöpfe werden nur höher. Maus/Trackpad wie vorher. */
@media (pointer:coarse){
  .kachel-wahl{gap:0;margin-top:2px;margin-inline-start:-8px}
  .kw.punkt,.kw.punkt[aria-pressed="true"]{position:relative;width:44px;height:44px;border:0;box-shadow:none}
  .kw.punkt[aria-pressed="true"]::after{left:16px;right:16px;bottom:6px}   /* Strich unter dem Punkt in der 44-px-Fläche */
  .kw.punkt:focus-visible{outline-offset:-4px}
  .kachel-wahl.als-text{margin-inline-start:0}
  .kw.text{min-height:44px}
}
@media (max-width:759px){
  .kaufen{gap:14px}
  .kaufen h1{white-space:nowrap;font-size:min(8vw,calc((100vw - 32px) / var(--z,20) / .6))}
  .wahl legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .passt{gap:10px;padding-top:4px}
  .passt-montage{gap:6px}
  .passt-montage li{font-size:13.5px}
}

/* Sichtprüfung 25.10.2026 */
.wc-tabelle + p,.wc-probe > .wc-tabelle + p{margin-top:16px}
.anleitungen .kachel-text b{white-space:normal;overflow:visible;text-overflow:clip;font-size:15px}   /* Montage-Seite: Namen ganz, darf umbrechen */
.wc-typ-name{align-items:flex-start}
.wc-typ-name .wc-mark{align-self:flex-start}
.wc-typen-bilder:has(> li:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
@container (min-width:600px){.wc-karte.breit .wc-typen-bilder:has(> li:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}}
.legende .ki-zeichen{justify-self:start}   /* Legende auf „Über“: KI-Zeichen so groß wie im Bild, nicht zeilenbreit */
[data-medienplatz] + *{margin-top:clamp(16px,2vw,24px)}
@media (max-width:480px){   /* Sprungleiste: alle Marken und der Zähler passen nebeneinander (Sichtprüfung 25.10.2026: „Sicherh“ abgeschnitten) */
  .anl-leiste-zeile{gap:12px}
  .anl-sprung{gap:12px}
  .anl-sprung a,.anl-fortschritt{font-size:11px;letter-spacing:.04em}
  .anl-fortschritt .balken{display:none}
}
@media (min-width:1100px){.anl-schritte:has(> li:nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}}   /* vier Schritte in einer Reihe statt 3 + 1 */
.anl-hs .anl-daten{margin-top:6px}
@media (min-width:900px){.anl-danach.ohne-bild{grid-template-columns:minmax(0,1fr)}}
.training-platz{margin-top:clamp(16px,2vw,24px)}
.training-platz .medienplatz{max-width:560px}
.nah.quadrat .bild{aspect-ratio:1/1}

/* Im Detail (Alex 27.10.2026, Muster KS2): A+-Bild mit nummerierten Punkten, Erklärungen daneben (Desktop) bzw. darunter (Handy) */
.detail{display:grid;gap:var(--luft)}
.detail-bild{position:relative;align-self:start}
.detail-bild .bild{aspect-ratio:860/420;background:var(--kachel)}
.detail-punkt{position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--anthrazit);color:#FCFCFA;font:600 12px/1 var(--mono);text-decoration:none;box-shadow:0 0 0 3px rgba(252,252,250,.85)}
.detail-punkt::after{content:"";position:absolute;inset:-8px}   /* Trefferfläche 44 px */
.detail-punkt:focus-visible{outline:2px solid var(--link);outline-offset:3px}
.detail-liste{list-style:none;margin:0;padding:0;display:grid;gap:14px;align-content:start}
.detail-liste li{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start;scroll-margin-top:96px}
.detail-liste b{display:block;font-weight:600}
.detail-liste p{margin:2px 0 0}
.detail-nr{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1.25px solid currentColor;font:600 12px/1 var(--mono)}
.detail-liste li:target .detail-nr{background:var(--text);color:var(--grund)}
@media (min-width:900px){.detail{grid-template-columns:3fr 2fr;align-items:center}}

/* Passt dazu (Alex 27.10.2026): drei kleine Produkte unter der Kaufbox */
/* Technische Angaben zum Aufklappen (Alex 27.10.2026) */
.fakten-auf > summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:56px;padding-block:14px;font:600 clamp(18px,2.2vw,22px)/1.25 var(--sans)}
.fakten-auf > summary::-webkit-details-marker{display:none}
.fakten-auf > summary::after{content:"+";font:400 24px/1 var(--sans)}
.fakten-auf[open] > summary::after{content:"\2212"}
.fakten-auf > .fakten{padding-top:18px}
/* Baustoff-Fotos statt Symbole, gleiche Größe (Alex 27.10.2026); ein „AI“ für die Reihe */
.stoff-bild{width:32px;height:32px;border-radius:4px;object-fit:cover;display:block}
.wc-stoffe-rahmen{position:relative}
.wc-stoffe-rahmen .wc-stoffe-ki{position:static;justify-self:end;display:inline-flex;margin:0 0 8px auto;width:max-content}
.wc-stoffe-rahmen{display:grid}

/* TRÆN App als Kachel und Produktseite (Alex 31.10.2026, Blatt App-Kachel): App-Screens als Telefone auf Nebel, zwei versetzt;
   grünes Feld (Emerald = Status) statt Preis. */
.app-bild{background:var(--kachel);position:relative;overflow:hidden;container-type:inline-size;aspect-ratio:1/1}
.app-bild .tel{position:absolute;display:block;border-radius:6.5cqi;border:1px solid #D6D6D2;box-shadow:0 2cqi 6cqi rgba(30,30,28,.14);background:#FCFCFA;overflow:hidden}
.app-bild .tel img{display:block;width:100%;height:auto}
.app-bild.n1 .tel{width:40%;left:30%;top:7%}
.app-bild.n2 .t1{width:35%;left:14%;top:12%}
.app-bild.n2 .t2{width:35%;left:51%;top:5%}
.app-gratis{display:inline-block;padding:1px 9px;border-radius:999px;background:color-mix(in srgb,var(--status) 14%,transparent);color:var(--status);font:600 14px/1.5 var(--sans);letter-spacing:.01em}
.app-gratis.gross{padding:3px 12px;font-size:17px}
.app-wahl{font:400 12.5px/1.4 var(--sans);color:var(--text-leise)}
.app-coach{margin-top:-4px}
/* Flache App-Kachel nach der ersten Reihe (Alex 31.10.2026, W2): so hoch wie eine Kachelreihe, drei Telefone */
.app-breit{grid-column:1/-1;order:var(--om)}
@media (min-width:760px){.app-breit{order:var(--od)}}
.app-bild.app-band{aspect-ratio:2/1}
@media (min-width:760px){.app-bild.app-band{aspect-ratio:3/1}}
.app-band .tel{border-radius:2.2cqi;box-shadow:0 .8cqi 2.4cqi rgba(30,30,28,.14)}
.app-band.n3 .t1{width:20%;left:14%;top:14%}.app-band.n3 .t2{width:20%;left:40%;top:6%}.app-band.n3 .t3{width:20%;left:66%;top:14%}
@media (min-width:760px){.app-band.n3 .t1{width:12%;left:22%}.app-band.n3 .t2{width:12%;left:44%}.app-band.n3 .t3{width:12%;left:66%}}
/* Montage kurz auf der Startseite (Alex 31.10.2026, MW2): Klopf-Foto mit Wellen und Klang-Hinweis, drei geeignete Wände, fünf Schritte */
.mk{display:grid;gap:clamp(16px,2.4vw,32px);align-items:center}
@media (min-width:760px){.mk{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}}
.mk-foto{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:2px}
.mk-foto img{width:100%;height:100%;object-fit:cover;display:block}
.klopf-wellen{position:absolute;left:46%;top:27%;width:9%;height:auto;fill:none;stroke:var(--anthrazit);stroke-width:2.2;stroke-linecap:round;opacity:.75}
.klopf-wellen path{animation:klopf 1.6s var(--ease) infinite}
.klopf-wellen path:nth-child(2){animation-delay:.12s}.klopf-wellen path:nth-child(3){animation-delay:.24s}
@keyframes klopf{0%,55%,100%{opacity:.15}12%{opacity:1}}
@media (prefers-reduced-motion:reduce){.klopf-wellen path{animation:none;opacity:.8}}
.mk-foto .klang{position:absolute;left:14px;bottom:14px;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.mk-foto .klang > span{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:rgba(252,252,250,.94);font:600 14px/1.2 var(--sans)}
.mk-foto .klang .ja{color:var(--emerald)}.mk-foto .klang .nein{color:#5E5E5A}
.mk-foto .klang svg,.mk-haken svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.mk-waende{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.mk-wand{position:relative;display:grid;gap:8px;font:500 14px/1.2 var(--sans)}
.mk-wand .bild{aspect-ratio:1/1;border-radius:2px}
.mk-haken{position:absolute;top:8px;left:8px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--status);color:#fff}
.mk-schritte{list-style:none;margin:0;padding:0;display:grid;counter-reset:s}
.mk-schritte li{counter-increment:s;display:grid;grid-template-columns:28px 32px 1fr;align-items:center;gap:14px;padding:14px 0;border-top:1px solid var(--linie);font:500 17px/1.3 var(--sans)}
.mk-schritte li:last-child{border-bottom:1px solid var(--linie)}
.mk-schritte li::before{content:"0" counter(s);font:400 12px/1 var(--mono);color:var(--text-leise)}
.mk-schritte .ikon{width:28px;height:28px}
.mk-schritte b{display:block;font-weight:500}.mk-schritte small{display:block;font:400 12px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--status)}
.mk-fuss{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;margin-top:22px;font:400 13px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--text-leise)}
.mk-fuss a{text-transform:none;letter-spacing:0;font-family:var(--sans)}
@media (max-width:759px){.mk-schritte li{padding:10px 0;font-size:15px}.mk-wand{font-size:12.5px}.mk-foto .klang > span{font-size:12.5px;padding:5px 10px}}

/* Fragefarbe am Knopf im App-Bereich (Alex 31.10.2026): Kontur und Schrift wie die Frage — hell Emerald, dunkel das Orange der App */
#app .knopf.zweit{color:var(--app-frage);box-shadow:inset 0 0 0 1.5px var(--app-frage)}
#app .knopf.zweit:hover{background:color-mix(in srgb,var(--app-frage) 10%,transparent)}

/* Launch-Leiste unten (Alex 31.10.2026): auf allen Seiten ohne Kaufleiste, nur vor dem Launch; erscheint nach dem ersten Bildschirm,
   verschwindet, sobald das Anmeldefeld oder der Fuß im Bild ist (assets/site.js). Gleiche Ruhe wie die Kaufleiste. */
.launchleiste{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--kopf);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--linie);padding-bottom:env(safe-area-inset-bottom,0px);opacity:0;visibility:hidden;transition:opacity .28s var(--ease),visibility 0s linear .28s}
.launchleiste.an{opacity:1;visibility:visible;transition:opacity .28s var(--ease),visibility 0s}
.launchleiste-zeile{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:64px;padding-block:8px}
.launchleiste-text{font:500 11.5px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-leise)}
.launchleiste .knopf{flex:none;min-height:44px;padding:10px 18px;font-size:14px}
body.live .launchleiste{display:none}
html:has(.launchleiste.an){scroll-padding-bottom:calc(80px + env(safe-area-inset-bottom,0px))}
.app-geteilt .app.linie-oben{padding-top:28px}   /* S2: Linie mit Nummer über den Telefonen (Handy: Telefone stehen darunter, Alex 31.10.2026) */
/* Passt dazu unter der Kaufbox (Alex 27./31.10.2026): eine Zeile kleiner Kacheln, Handy zum Wischen */
.dazu{display:grid;gap:10px;margin-top:8px;padding-top:18px;border-top:1px solid var(--linie)}
.dazu-reihe{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.dazu-kachel{display:grid;gap:6px;color:var(--text);text-decoration:none}
.dazu-kachel .bild{aspect-ratio:1/1;border-radius:2px;background:var(--kachel)}
.dazu-name{font:500 13px/1.25 var(--sans)}
.dazu-preis{font:500 13px/1.2 var(--sans);color:var(--text-leise)}
.dazu-kachel:hover .dazu-name{text-decoration:underline;text-underline-offset:3px}
@media (max-width:899px){.dazu-reihe{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:38%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(-1 * var(--rand));padding-inline:var(--rand);scroll-padding-inline:var(--rand)}
  .dazu-reihe::-webkit-scrollbar{display:none}.dazu-reihe > li{scroll-snap-align:start}}
/* Kontaktformular (Alex 31.10.2026): untereinander, Felder wie das Anmeldefeld, Ecke 2 px */
.kontakt-form{display:grid;gap:10px;max-width:640px;margin-top:8px}
.kontakt-form label{font:500 14px/1.3 var(--sans);margin-top:8px}
.kontakt-form input[type="email"],.kontakt-form input[type="text"],.kontakt-form textarea{width:100%;min-height:48px;padding:12px 14px;border:1.5px solid var(--linie-stark);border-radius:2px;background:var(--grund);color:var(--text);font:inherit}
.kontakt-form textarea{resize:vertical;min-height:160px}
.kontakt-form input:focus,.kontakt-form textarea:focus{outline:2px solid var(--link);outline-offset:2px}
.kontakt-form .knopf{justify-self:start;margin-top:6px}
.kontakt-mail{margin-top:24px}