/* FHB-Winterwelt (fhb-winterwelt.php) — Raumsprache nach dem FHB-Workshopsystem (KONZEPT §4, Variante A): helle Stahl-
   säulen, Massivholz (helles Nadelholz), helles verzinktes Lochblech mit mattschwarzen Schlaufenhaken, Paletten und
   Getränkekisten; Backstein nur als Material der Halle, nie als rote Fläche. Grundton Schwarz #1D1D1B nur für Haken und
   Kleinteile — der Raum bleibt hell, damit X-schwarz-Ware Struktur zeigt (Lehre C3). Schrift Outfit wie der Katalog.
   Keine FHB-Schrift/-Logos, keine Lamellen/rote Flächen (Payper), kein Dunkelblau/Gelbkante (Blåkläder).
   Der Akzent folgt der gewählten Firmenfarbe (--fh-a/--fh-b). Präfix fh- (nie hw-). */
.fh-raum{--fh-schwarz:#1D1D1B;--fh-putz:#F3F0EA;--fh-putz-2:#E7E2D8;--fh-holz:#D9B98A;--fh-holz-hell:#EBD6B1;--fh-holz-dunkel:#B98F5C;
    --fh-stahl:#C9CDD2;--fh-zink:#DADDE0;--fh-stein:#8E4A35;--fh-text:#1D1D1B;--fh-grau:#5E636B;--fh-a:#3F3C44;--fh-b:#1D1D1B;
    position:relative;margin:0 0 24px;padding:0 0 34px;color:var(--fh-text);background:var(--fh-putz)}
.fh-raum[data-fh-farbe]{--fh-a:var(--fh-wahl-a);--fh-b:var(--fh-wahl-b)}

/* ===== Hero (Lars 04.11.2026: „immer noch zu kitschig. lass das mit den fenster und stell die personen näher zusammen und mach
   sie dafür größer“): oben Headline, Schnellwahl und „10“ auf dunklem Hallengrund, darunter das Team als EINE durchgehende Reihe
   über die volle Breite — je Puppe ein schmaler Streifen ihres Lookbilds (alle Lookbilder zeigen dieselbe Wand aus derselben
   Kamera), dicht nebeneinander, so hoch wie der Bildschirm erlaubt. Keine Abdunklung, kein Verlauf, kein Filter und keine
   Fläche vor den Puppen; nur die Fuge links jedes Streifens (Wand) läuft weich in den Nachbarn. */
.fh-raum{--fh-nacht:#060a12;--fh-nacht-2:#0b1220;--fh-nacht-3:#16243c;--fh-nacht-4:#24395c;--fh-licht:#F0964A;--fh-schnee:#F4F7FB;--fh-silber:#DCE6F2;
    --fh-himmel:#132a62;--fh-halle:#1b120e;--fh-glow:var(--fh-licht);--fh-akzent:var(--fh-licht);
    --fh-rand:max(clamp(16px,3vw,48px),calc(50vw - 840px))}
/* Teamfarbe als Akzent: --fh-glow (Schriftfarbe auf Dunkel) nie dunkler als L .76, unbunte Farben silbern; --fh-akzent ist
   die Farbe selbst (Linie am hellen Namensschild) */
.fh-raum[data-fh-farbe]{--fh-glow:color-mix(in srgb,var(--fh-a) 55%,#fff);--fh-akzent:var(--fh-a)}
@supports (color:oklch(from red l c h)){.fh-raum[data-fh-farbe]{--fh-glow:oklch(from var(--fh-a) max(l,.76) max(c,.13) h)}}
.fh-raum:is([data-fh-farbe="schwarz"],[data-fh-farbe="anthrazit-schwarz"],[data-fh-farbe="grau-schwarz"],[data-fh-farbe="weiss-anthrazit"]){--fh-glow:var(--fh-silber)}
.fh-raum[data-fh-farbe="weiss-anthrazit"]{--fh-akzent:var(--fh-b)}
.fh-kopf,.fh-farbwahl,.fh-plan{margin-inline:calc(50% - 50vw)}
.wetter-leinwand{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.fh-kopf{--fh-pt:clamp(18px,1.9vw,36px);--fh-sh:clamp(420px,min(calc(100svh - 150px - 13vw),54vw),980px);position:relative;overflow:hidden;isolation:isolate;
    display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 clamp(24px,3vw,56px);align-items:end;
    margin-top:-6px;padding:var(--fh-pt) var(--fh-rand) 0;color:var(--fh-schnee);background:var(--fh-halle)}
.fh-kopf-text,.fh-kopf-seite{position:relative;z-index:2}
/* Die Bühne: volle Breite unter dem Text, Höhe --fh-sh (höchstens 54vw, damit die Reihe auch bei 901 px ganz hineinpasst).
   Oben läuft nur der Hallenbalken über den Köpfen (die ersten 7 %, Köpfe ab 9 %) in den Hallengrund aus */
.fh-kopf-buehne{grid-column:1/-1;position:relative;height:var(--fh-sh);margin:clamp(14px,1.4vw,26px) calc(-1 * var(--fh-rand)) 0;overflow:hidden;container-type:size;background:var(--fh-halle)}
.fh-kopf-buehne::after{content:"";position:absolute;inset:0 0 auto;height:7%;z-index:2;pointer-events:none;background:linear-gradient(180deg,var(--fh-halle),transparent)}
.fh-overline{display:inline-flex;align-items:center;gap:10px;margin-bottom:clamp(8px,.8vw,14px);font-weight:700;font-size:clamp(11px,.75vw,13px);letter-spacing:.2em;text-transform:uppercase;color:rgba(244,247,251,.86)}
.fh-overline::before{content:"";width:30px;height:2px;background:var(--fh-licht)}
.fh-titel{margin:0;font-size:clamp(32px,min(3.4vw,5.6svh),70px);line-height:.95;white-space:nowrap;font-weight:900;letter-spacing:-.015em;text-transform:uppercase;color:var(--fh-schnee);
    text-shadow:0 2px 24px rgba(5,14,40,.35)}
.fh-titel em{font-style:normal}
/* Schnellwahl unter der Headline: zehn Farbfelder, das gewählte hebt sich mit weißem Rand (kein Leuchten) */
.fh-kopf-farben{display:grid;grid-template-columns:clamp(130px,10.5vw,190px) auto;justify-content:start;align-items:center;gap:8px 16px;margin-top:clamp(12px,1.25vw,24px)}
/* 901–1200 px: kleinere Farbfelder und eine breitere Titelspalte, damit der Farbname höchstens zweizeilig bleibt */
@media(min-width:901px) and (max-width:1200px){
    .fh-kopf-farben{grid-template-columns:168px auto;gap:6px 12px}
    .fh-kopf-farben ul{grid-template-columns:repeat(10,26px);gap:5px}
}
.fh-kopf-farben-titel{display:grid;gap:3px;font-weight:800;font-size:clamp(11px,.72vw,13px);line-height:1.25;letter-spacing:.16em;text-transform:uppercase;color:var(--fh-schnee);text-shadow:0 1px 3px rgba(0,0,0,.85)}
.fh-kopf-farben-titel::after{content:"→";font-size:18px;line-height:1;letter-spacing:0;color:var(--fh-schnee)}
.fh-kopf-farben-titel b{order:1;color:var(--fh-schnee);letter-spacing:.04em;font-size:clamp(12px,.8vw,14px)}
.fh-kopf-farben-titel b:empty,.fh-kopf-farben-titel:has(b:not(:empty))::after{display:none}
.fh-kopf-farben ul{display:grid;grid-template-columns:repeat(10,clamp(30px,2.6vw,48px));gap:clamp(5px,.5vw,9px);margin:0;padding:0;list-style:none}
.fh-kopf-farbe{position:relative;display:block;aspect-ratio:1;border-radius:4px;outline:none;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.fh-kopf-farbe i{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,var(--a) 0 58%,var(--b) 58% 100%);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),0 6px 14px -8px rgba(0,0,0,.7);transition:box-shadow .25s ease}
.fh-kopf-farbe span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.fh-kopf-farbe:hover,.fh-kopf-farbe:focus-visible{transform:translateY(-3px)}
.fh-kopf-farbe:focus-visible i{box-shadow:0 0 0 3px var(--fh-schnee)}
.fh-kopf-farbe[aria-pressed="true"]{transform:translateY(-4px)}
.fh-kopf-farbe[aria-pressed="true"] i{box-shadow:0 0 0 2px var(--fh-halle),0 0 0 4px var(--fh-schnee),0 8px 16px -8px rgba(0,0,0,.7)}
.fh-kopf-seite{display:grid;gap:10px;padding-top:clamp(2px,.6vw,12px)}
.fh-satz{max-width:400px;margin:0;font-size:clamp(13px,.95vw,17px);line-height:1.45;font-weight:600;color:var(--fh-schnee);text-shadow:0 1px 3px rgba(0,0,0,.85),0 0 12px rgba(0,0,0,.5)}
/* Große „10“ mit der Zeile „Farben – welche ist Ihre?“ — weiß wie die Headline */
.fh-kopf-zahl{display:flex;align-items:center;gap:14px}
.fh-zehn{font-size:clamp(70px,6.6vw,136px);line-height:.8;font-weight:900;letter-spacing:-.06em;color:var(--fh-schnee);text-shadow:0 2px 24px rgba(5,14,40,.35)}
/* Neben der 10 (Lars 04.11.2026): eigene Zeile im Sie, kein Zitat */
.fh-zehn-text{margin:0;max-width:240px;font-size:clamp(18px,1.6vw,28px);line-height:1.1;font-weight:800;text-transform:uppercase;color:var(--fh-schnee)}
/* Das Team als Reihe (KT_FH_TEAM_REIHE in % des Lookbilds: --aw Streifen, --ov Fuge, --ay/--ah senkrechter Ausschnitt): das
   Lookbild füllt mit --ah die Bühnenhöhe; Streifen i steht mit seiner Puppenmitte (--cx) bei --mx, die Streifen rücken um
   Streifenbreite − Fuge weiter. Der erste und der letzte Streifen reichen bis an den Rand (mehr vom selben Showroom). OHNE
   Überlagerung (kein ::after, kein filter, keine opacity) */
.fh-team{--ih:calc(100cqh * 100 / var(--ah));--iw:calc(var(--ih) * 16 / 9);--cw:calc(var(--iw) * var(--aw) / 100);--o:calc(var(--iw) * var(--ov) / 100);
    --step:calc(var(--cw) - var(--o));--row:calc(var(--cw) + (var(--n) - 1) * var(--step));--mitte:50cqw;--ende:100cqw;position:absolute;inset:0;margin:0;padding:0}
.fh-team figcaption{position:absolute;left:var(--fh-rand);top:clamp(10px,2.4%,22px);z-index:3;display:flex;align-items:center;gap:10px;
    font-weight:800;font-size:clamp(10px,.72vw,13px);letter-spacing:.24em;text-transform:uppercase;color:var(--fh-schnee);text-shadow:0 1px 3px rgba(0,0,0,.9)}
.fh-team figcaption::before{content:"";width:28px;height:2px;background:var(--fh-licht)}
.fh-team ul{margin:0;padding:0;list-style:none}
.fh-team li{--mx:calc(var(--mitte) + (var(--i) - (var(--n) - 1) / 2) * var(--step));--l:calc(var(--mx) - var(--cw) / 2);--r:calc(var(--mx) + var(--cw) / 2);
    position:absolute;top:0;bottom:0;left:var(--l);width:calc(var(--r) - var(--l))}
.fh-team li:first-child{--l:0px}
.fh-team li:last-child{--r:var(--ende)}
.fh-team a{position:absolute;inset:0;display:block;text-decoration:none;color:var(--fh-text);outline:none}
.fh-team-bild{position:absolute;inset:0;display:block;overflow:hidden}
/* Fuge: der Streifen läuft links über die Breite --o (nur Wand, Test) weich in seinen Nachbarn — sonst nichts */
.fh-team li + li .fh-team-bild{-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--o));mask-image:linear-gradient(90deg,transparent,#000 var(--o))}
.fh-team-bild img{position:absolute;max-width:none;width:var(--iw);height:var(--ih);top:calc(var(--ih) * var(--ay) / -100);left:calc(var(--mx) - var(--l) - var(--iw) * var(--cx) / 100)}
.fh-team-bild img.fh-team-neu{opacity:0;transition:opacity .45s ease}
.fh-team-bild img.fh-team-neu.da{opacity:1}
/* Namensschild vorn auf der Palette, unter den Füßen der Puppe: helles Schild, Linie in der Teamfarbe, KI-Kennzeichnung */
.fh-team-name{position:absolute;left:calc(var(--mx) - var(--l));bottom:clamp(8px,2.6%,26px);z-index:3;display:flex;align-items:center;gap:clamp(5px,.5vw,8px);max-width:calc(var(--cw) * 1.1);padding:5px 8px 5px 5px;transform:translateX(-50%);
    font-size:clamp(10px,.78vw,15px);font-weight:800;letter-spacing:clamp(.02em,.06vw,.06em);line-height:1.2;text-transform:uppercase;white-space:nowrap;color:var(--fh-text);
    background:var(--fh-schnee);border-bottom:3px solid var(--fh-akzent);border-radius:2px;box-shadow:0 6px 16px -8px rgba(10,20,40,.55);transition:border-color .5s ease,background .2s ease,color .2s ease}
.fh-team-name > span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.fh-team-name b{display:grid;place-items:center;flex:none;min-width:24px;height:24px;font-size:11px;letter-spacing:0;color:var(--fh-schnee);background:var(--fh-text)}
.fh-team-name .ki-label{position:static;flex:none;margin-left:2px;padding:0 5px;font-size:9px;line-height:14px}
.fh-team a:hover .fh-team-name,.fh-team a:focus-visible .fh-team-name{color:var(--fh-schnee);background:var(--fh-text)}
.fh-team a:hover .fh-team-name b,.fh-team a:focus-visible .fh-team-name b{color:var(--fh-text);background:var(--fh-schnee)}
.fh-team a:focus-visible .fh-team-name{outline:3px solid var(--fh-schnee);outline-offset:3px}
/* Bühne (Lars 04.11.2026: „bau die hintergrundwand noch mal komplett neu“; 05.11.: Puppen statt Menschen): EINE Leinwand 21:9 = Rückwand
   hero-wand, darauf die freigestellten Puppen. --lw mindestens Bühnenbreite und Bühnenhöhe × 21/9 (füllt immer), höchstens
   Bühnenhöhe × 21/9 × 1,45 (bis ~3,4 : 1 randlos; noch breitere Schirme: der Rest bleibt Hallengrund). Waagrecht mittig; senkrecht fällt der Überstand
   zu 80 % oben (Decke) und 20 % unten (Boden) weg — Köpfe, Füße und Namensschilder bleiben im Bild. Puppe i steht mit der
   Sohle auf --fuss, Mitte --x, Höhe --h (alles % der Leinwand); das Bild liegt unten bündig im Feld 1:2 (object-fit:contain),
   so springt beim Farbwechsel weder Standlinie noch Größe. OHNE Überlagerung, Filter oder Maske auf den Puppen. */
.fh-team--buehne{--lw:min(max(100cqw,calc(100cqh * 21 / 9)),calc(100cqh * 21 / 9 * 1.45));--lh:calc(var(--lw) * 9 / 21)}
.fh-team-leinwand{position:absolute;left:calc((100cqw - var(--lw)) / 2);top:calc((100cqh - var(--lh)) * .8);width:var(--lw);height:var(--lh)}
.fh-team-wand{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none}
.fh-team--buehne ul{position:absolute;inset:0}
.fh-team--buehne li{left:calc(var(--x) * 1%);top:calc((var(--fuss) - var(--h)) * 1%);bottom:auto;width:auto;height:calc(var(--h) * 1%);aspect-ratio:1/2;transform:translateX(-50%)}
.fh-team--buehne .fh-team-bild,.fh-team--buehne li + li .fh-team-bild{overflow:visible;-webkit-mask-image:none;mask-image:none}
.fh-team--buehne .fh-team-bild img{inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 100%}
.fh-team-boden{position:absolute;left:14%;right:14%;bottom:-2.4%;height:5%;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,rgba(24,12,4,.55),rgba(24,12,4,0))}
.fh-team--buehne .fh-team-name{left:50%;top:calc(100% + var(--lh) * .014);bottom:auto;max-width:none}
/* KI-Kennzeichen der Rückwand: klein unten rechts wie überall (Grundregel .ki-label in _layout.php: right/bottom 8px) —
   nur die Ebene über den Puppen. NIE top setzen, ohne bottom:auto: dann zieht es sich als Balken über die Bühne (FR-618). */
.fh-team-wand-ki{z-index:3}

/* Firmenfarben-Schalter: im Hero der Bühnenboden mit großen Farbfeldern; klebt er über den Wänden, wird er eine schmale
   Nachtleiste (nur Punkte, der Name der gewählten Farbe bleibt) */
.fh-farbwahl{position:sticky;top:var(--kopf,0px);z-index:30;padding:16px var(--fh-rand) 18px;color:var(--fh-schnee);background:rgba(11,18,32,.96);
    border-bottom:4px solid var(--fh-glow);box-shadow:0 14px 26px -16px rgba(0,0,0,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    scroll-margin-top:var(--kopf,0px);transition:border-color .6s ease}
.fh-farbwahl-innen{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.fh-farbwahl-titel{font-weight:800;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--fh-glow);transition:color .6s ease}
.fh-farbwahl-liste{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.fh-farbe{display:inline-flex;align-items:center;gap:7px;padding:4px 10px 4px 4px;font-size:12.5px;font-weight:600;white-space:nowrap;text-decoration:none;
    color:var(--fh-schnee);background:rgba(255,255,255,.06);border-radius:999px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);transition:box-shadow .2s ease,transform .2s ease,background .2s ease}
.fh-farbe i,.fh-look i{flex:none;width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,var(--a) 50%,var(--b) 50%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.fh-farbe i{box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.fh-farbe:hover,.fh-farbe:focus-visible{transform:translateY(-2px);background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 2px var(--fh-schnee);outline:none}
.fh-farbe[aria-pressed="true"]{color:var(--fh-nacht);background:var(--fh-schnee);box-shadow:0 0 0 3px var(--fh-glow)}
.fh-farbwahl[data-gemischt] .fh-farbe[aria-pressed="true"]{color:var(--fh-schnee);background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 2px var(--fh-schnee)}
.fh-farbwahl-zurueck{font-size:13px;font-weight:700;color:var(--fh-schnee)}
.fh-farbwahl-zurueck[hidden]{display:none}
.fh-farbwahl-status{flex:1 1 220px;margin:0;font-size:14px;font-weight:600;color:rgba(244,247,251,.8)}
.fh-farbwahl-status:empty{display:none}
/* Im Hero (nicht klebend, breite Fenster): zehn große Farbfelder als Bühnenboden, die gewählte hebt sich mit Lichtkante */
@media(min-width:701px){
    .fh-farbwahl:not(.fh-farbwahl--klebt) .fh-farbwahl-innen{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px 26px}
    .fh-farbwahl:not(.fh-farbwahl--klebt) .fh-farbwahl-titel{width:min-content;font-size:clamp(18px,1.6vw,26px);line-height:1.05;letter-spacing:.06em}
    .fh-farbwahl:not(.fh-farbwahl--klebt) .fh-farbwahl-liste li{display:flex;min-width:0}
    .fh-farbwahl:not(.fh-farbwahl--klebt) .fh-farbwahl-liste{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:clamp(4px,.7vw,12px)}
    .fh-farbwahl:not(.fh-farbwahl--klebt) .fh-farbe{flex:1 1 auto;min-width:0;flex-direction:column;align-items:stretch;gap:7px;padding:0 0 8px;font-size:clamp(10.5px,.85vw,13px);
        text-align:center;white-space:normal;border-radius:0;background:none;box-shadow:none}
    .fh-farbwahl:not(.fh-farbwahl--klebt) .fh-farbe i{width:100%;height:clamp(40px,4.4vw,72px);border-radius:3px;
        background:linear-gradient(135deg,var(--a) 0 58%,var(--b) 58% 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),0 10px 20px -10px rgba(0,0,0,.8);transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease}
    .fh-farbwahl:not(.fh-farbwahl--klebt) .fh-farbe:hover i,.fh-farbwahl:not(.fh-farbwahl--klebt) .fh-farbe:focus-visible i{transform:translateY(-4px)}
    .fh-farbwahl:not(.fh-farbwahl--klebt) .fh-farbe:focus-visible i{box-shadow:0 0 0 3px var(--fh-schnee)}
    .fh-farbwahl:not(.fh-farbwahl--klebt) .fh-farbe[aria-pressed="true"]{color:var(--fh-schnee);background:none;box-shadow:none;font-weight:800}
    .fh-farbwahl:not(.fh-farbwahl--klebt) .fh-farbe[aria-pressed="true"] i{transform:translateY(-8px) scale(1.06);
        box-shadow:0 0 0 3px var(--fh-schnee),0 0 0 6px var(--fh-glow)}
    .fh-farbwahl:not(.fh-farbwahl--klebt) .fh-farbe[aria-pressed="true"]::after{content:"";height:3px;margin:-2px 18% 0;background:var(--fh-glow)}
    .fh-farbwahl:not(.fh-farbwahl--klebt) .fh-farbwahl-status{grid-column:2;grid-row:2}
    .fh-farbwahl:not(.fh-farbwahl--klebt) .fh-farbwahl-zurueck{grid-column:2;grid-row:2;justify-self:end;align-self:center}
    .fh-farbwahl[data-gemischt]:not(.fh-farbwahl--klebt) .fh-farbe[aria-pressed="true"] i{box-shadow:0 0 0 3px var(--fh-schnee)}
}
/* Klebt die Leiste über den Wänden, wird sie einzeilig: nur Farbpunkte, der Name der gewählten Farbe bleibt (die Szene passt
   darunter); die Namen bleiben für Screenreader im Link */
@media(min-width:901px){
    .fh-farbwahl--klebt{padding-top:6px;padding-bottom:6px;border-bottom-width:3px}
    .fh-farbwahl--klebt .fh-farbwahl-innen{flex-wrap:nowrap}
    .fh-farbwahl--klebt .fh-farbwahl-liste{flex-wrap:nowrap}
    .fh-farbwahl--klebt .fh-farbe{padding:3px}
    .fh-farbwahl--klebt .fh-farbe i{width:19px;height:19px}
    .fh-farbwahl--klebt .fh-farbe:not([aria-pressed="true"]) span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
    .fh-farbwahl--klebt .fh-farbe[aria-pressed="true"]{padding-right:9px}
    .fh-farbwahl--klebt .fh-farbwahl-status{flex:1 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    /* Die Szene passt ganz unter Kopfzeile und Leiste (--fh-oben setzt das Skript): bei niedrigen Fenstern schmaler, mittig */
    .fh-wechsel,.fh-wand > .fh-szene,.fh-theke-zone > .fh-szene{max-width:max(640px,calc((100vh - var(--fh-oben,160px) - 20px) * 16 / 9));margin-inline:auto}
}

/* Werkstattplan: die Zonen als Nachtleiste unter der Bühne — Nummer im Licht der Teamfarbe, Wände als Sprungmarken */
.fh-plan{margin-top:0;padding:14px var(--fh-rand) 22px;background:linear-gradient(180deg,var(--fh-nacht-2),var(--fh-nacht));
    scroll-margin-top:calc(var(--kopf,0px) + var(--fh-leiste,70px) + 12px)}
.fh-plan > ol{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:2px;margin:0;padding:0;list-style:none}
.fh-plan-zone{padding:10px 12px 12px;background:rgba(255,255,255,.045);border-top:3px solid rgba(255,255,255,.14);transition:border-color .2s ease,background .2s ease}
.fh-plan-zone:hover,.fh-plan-zone:focus-within{background:rgba(255,255,255,.09);border-top-color:var(--fh-glow)}
.fh-plan-zone > a{display:flex;align-items:center;gap:8px;font-weight:800;font-size:13px;line-height:1.15;letter-spacing:.06em;text-transform:uppercase;color:var(--fh-schnee);text-decoration:none}
.fh-plan-zone > a b{display:inline-grid;place-items:center;flex:none;min-width:30px;height:30px;font-size:14px;color:var(--fh-nacht);background:var(--fh-glow);transition:background .6s ease}
.fh-plan-zone ul{margin:6px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:2px 10px}
.fh-plan-zone ul a{font-size:12px;color:rgba(244,247,251,.62);text-decoration:none}
.fh-plan-zone ul a:hover,.fh-plan-zone ul a:focus-visible{color:var(--fh-schnee);text-decoration:underline}
.fh-plan-zone > a:focus-visible{outline:2px solid var(--fh-glow);outline-offset:3px}
.fh-plan-fokus::after{content:" ✦";color:var(--fh-glow)}

/* Zonenband */
.fh-zone{position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 30px;align-items:end;
    margin:48px 0 0;padding:clamp(26px,3.4vw,52px) clamp(18px,3vw,44px) clamp(20px,2.4vw,30px);background:linear-gradient(180deg,var(--fh-putz-2),var(--fh-putz));
    border-top:1px solid var(--fh-stahl);border-bottom:8px solid var(--fh-holz);scroll-margin-top:calc(var(--kopf,0px) + var(--fh-leiste,70px) + 12px)}
.fh-zone > :not(canvas){position:relative;z-index:1}
.fh-zone-nr{grid-column:1/-1;display:inline-flex;align-items:center;gap:10px;font-size:clamp(24px,3vw,44px);font-weight:800;text-transform:uppercase;letter-spacing:-.01em}
.fh-zone-nr b{display:grid;place-items:center;width:42px;height:42px;font-size:16px;letter-spacing:0;color:#fff;background:var(--fh-schwarz)}
.fh-zone p{max-width:660px;margin:0;font-size:16px;line-height:1.5}
.fh-zone-zahl{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--fh-grau);white-space:nowrap}

/* Wand: Modul mit Topblende (HTML-Titel), Stahlsäule links */
.fh-wand{position:relative;margin:30px 16px 0;padding:20px 18px 18px;scroll-margin-top:calc(var(--kopf,0px) + var(--fh-leiste,70px) + 12px);background:#fff;
    border-left:6px solid var(--fh-stahl);box-shadow:0 1px 0 var(--fh-zink),0 14px 24px -18px rgba(0,0,0,.35)}
.fh-wand--fokus{border-left-color:var(--fh-a)}
.fh-wand-kopf{display:flex;gap:16px;align-items:center;margin-bottom:14px}
.fh-wand-kopf h2{margin:0;font-size:26px;line-height:1.1;font-weight:800;text-transform:uppercase;letter-spacing:.02em}
.fh-wand-kopf > div > span{font-size:14px;color:var(--fh-grau)}
.fh-hoch{margin-left:auto;align-self:center;display:inline-flex;align-items:center;gap:6px;padding:8px 12px;white-space:nowrap;text-decoration:none;
    font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--fh-grau);border:1px solid var(--fh-stahl)}
.fh-hoch:hover,.fh-hoch:focus-visible{color:var(--fh-text);border-color:var(--fh-schwarz);outline:none}
.fh-schild{margin-left:auto;align-self:center;display:inline-flex;align-items:center;gap:10px;padding:10px 16px;white-space:nowrap;text-decoration:none;
    font-weight:700;font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:#fff;background:var(--fh-schwarz)}
.fh-schild span{font-size:20px;line-height:1;transition:transform .2s ease}
.fh-schild:hover span{transform:translateX(4px)}
.fh-schild:focus-visible{outline:3px solid var(--fh-a);outline-offset:2px}
.fh-schild ~ .fh-hoch{margin-left:0}

/* Looks an der Puppe und Schild „in dieser Farbe nicht“ */
.fh-looks{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:10px}
.fh-looks-titel{margin-right:2px;font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fh-grau)}
.fh-look{display:inline-flex;align-items:center;gap:7px;padding:4px 10px 4px 4px;font:inherit;font-size:12px;color:var(--fh-text);cursor:pointer;
    background:var(--fh-putz);border:0;border-radius:999px;box-shadow:inset 0 0 0 1px var(--fh-stahl);transition:box-shadow .2s ease}
.fh-look i{width:20px;height:20px}
.fh-look:hover,.fh-look:focus-visible{box-shadow:inset 0 0 0 1px var(--fh-schwarz);outline:none}
.fh-look[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--fh-schwarz)}
.fh-nicht{margin:10px 0 0;padding:8px 12px;font-size:14px;font-weight:600;background:var(--fh-holz-hell);border-left:4px solid var(--fh-holz-dunkel)}
.fh-nicht[hidden]{display:none}
.fh-hinweis{margin:12px 0 0;font-size:14px;color:var(--fh-grau)}

/* Szene mit Klickflächen; ohne Bild (Vorschau) ein Platzhalter im Workshop-Look */
.fh-szene{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--fh-putz-2);container-type:inline-size;box-shadow:0 18px 30px -16px rgba(0,0,0,.5)}
.fh-szene > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fh-szene > img.fh-look-neu{opacity:0;transition:opacity .45s ease;pointer-events:none}
.fh-szene > img.fh-look-neu.ist-da{opacity:1}
.fh-szene .ki-label{z-index:3}
.fh-szene--platzhalter{display:grid;place-items:center;text-align:center;
    background:linear-gradient(180deg,var(--fh-holz) 0 12%,transparent 12%),
        radial-gradient(circle,rgba(29,29,27,.28) 1.6px,transparent 2px) 0 0/18px 18px,
        linear-gradient(90deg,var(--fh-stahl) 0 2%,var(--fh-zink) 2% 98%,var(--fh-stahl) 98%)}
.fh-platzhalter-blende{position:absolute;left:8%;right:8%;top:3%;font-weight:800;font-size:clamp(14px,2.2cqw,26px);letter-spacing:.14em;color:var(--fh-schwarz)}
.fh-platzhalter-text{padding:12px 18px;font-weight:700;font-size:clamp(14px,1.8cqw,20px);text-transform:uppercase;letter-spacing:.08em;background:rgba(255,255,255,.9);
    border-left:6px solid var(--fh-a)}
.fh-platzhalter-text small{font-size:.75em;font-weight:600;text-transform:none;letter-spacing:0;color:var(--fh-grau)}
.fh-grab{position:absolute;z-index:2;display:block;border-radius:4px;text-decoration:none;transition:box-shadow .18s ease,background-color .18s ease}
.fh-grab:hover,.fh-grab:focus-visible{background:rgba(255,255,255,.08);box-shadow:0 0 0 2px #fff,0 0 0 5px var(--fh-schwarz);outline:none}
.fh-szene--rahmen .fh-grab{box-shadow:0 0 0 3px #00E0FF}
.fh-grab-schild{position:absolute;left:50%;top:100%;transform:translate(-50%,6px);display:flex;flex-direction:column;align-items:flex-start;gap:1px;
    width:max-content;max-width:calc(100% + 40px);min-width:110px;padding:clamp(4px,.5cqw,7px) clamp(6px,.7cqw,10px);
    background:#fff;border-left:3px solid var(--fh-schwarz);color:var(--fh-text);box-shadow:0 8px 16px rgba(0,0,0,.35);text-align:left;opacity:0;pointer-events:none;
    transition:opacity .18s ease,transform .18s ease}
.fh-grab--innen .fh-grab-schild{top:auto;bottom:4%;transform:translate(-50%,0)}
.fh-grab:hover .fh-grab-schild,.fh-grab:focus-visible .fh-grab-schild{opacity:1}
.fh-grab-schild strong{font-size:clamp(10px,1cqw,13px);font-weight:700}
.fh-grab-schild > span{font-size:clamp(9px,.85cqw,11px);color:var(--fh-grau)}
.fh-grab-schild b{margin-top:2px;font-size:clamp(12px,1.2cqw,16px);font-weight:700}
@media(hover:none){.fh-grab .fh-grab-schild{display:none}}
.fh-fenster{position:absolute;z-index:1;display:block;cursor:pointer;border-radius:2px;transition:background-color .2s ease,box-shadow .2s ease}
.fh-fenster span{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);padding:8px 12px;white-space:nowrap;font-size:13px;font-weight:700;letter-spacing:.06em;
    text-transform:uppercase;color:#fff;background:rgba(29,29,27,.82);opacity:0;transition:opacity .2s ease}
.fh-fenster:hover,.fh-fenster:focus-visible{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 2px #fff;outline:none}
.fh-fenster:hover span,.fh-fenster:focus-visible span{opacity:1}
@media(hover:none){.fh-fenster span{opacity:.92}}
.fh-blende{position:absolute;z-index:1;display:flex;align-items:center;justify-content:center;pointer-events:none;white-space:nowrap;
    font-weight:800;font-size:1.25cqw;letter-spacing:.14em;color:var(--fh-schwarz);opacity:.9}
.fh-blende.fh-quad--perspektive{font-size:46px;letter-spacing:.16em}

/* Plaketten: Beschriftung + Wert, keine Gradzahl */
.fh-klima{display:flex;flex-wrap:wrap;gap:3px;margin-top:4px}
.fh-plakette{display:inline-block;max-width:100%;padding:2px 6px;font-style:normal;font-size:10.5px;line-height:1.3;overflow-wrap:anywhere;color:var(--fh-text);background:var(--fh-holz-hell);border-radius:2px}
.fh-plakette b{font-weight:700;margin-right:2px}
.fh-grab-schild .fh-klima{max-width:220px}

/* System-Leiste: gleiche Farbe, Partner dazu */
.fh-system{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:14px 0 0;padding:10px 14px;background:var(--fh-putz);border-left:4px solid var(--fh-a);transition:border-color .4s ease}
.fh-system-titel{font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--fh-grau)}
.fh-system ul{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0;padding:0;list-style:none}
.fh-system li{display:flex;align-items:baseline;gap:6px;font-size:14px}
.fh-system li[hidden]{display:none}
.fh-system-rolle{font-size:12px;color:var(--fh-grau)}
.fh-system a{color:var(--fh-text);text-decoration:none}
.fh-system a:hover,.fh-system a:focus-visible{text-decoration:underline}
.fh-system a span{color:var(--fh-grau)}
.fh-system-nicht{color:var(--fh-grau)}

/* Kluft: Herkunftstafel und Zunftstoff-Leiter (Stoffgewicht) */
.fh-herkunft{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin-top:14px}
.fh-tafel{margin:0;padding:14px 16px;font-size:15px;line-height:1.5;background:var(--fh-holz-hell);border-left:4px solid var(--fh-holz-dunkel)}
.fh-leiter{padding:12px 16px;background:var(--fh-putz)}
.fh-leiter-titel{display:block;margin-bottom:6px;font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--fh-grau)}
.fh-leiter ol{display:grid;gap:4px;margin:0;padding:0;list-style:none}
.fh-leiter li{display:flex;gap:8px;align-items:baseline;font-size:14px}
.fh-leiter li b{min-width:76px;font-variant-numeric:tabular-nums}
.fh-leiter a{margin-left:auto;font-size:12px;font-weight:700;color:var(--fh-text)}
.fh-leiter small{display:block;margin-top:6px;font-size:11px;color:var(--fh-grau)}

/* Karten unter der Wand */
.fh-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(150px,100%),1fr));gap:10px;margin:14px 0 0;padding:0;list-style:none}
.fh-liste a{display:flex;flex-direction:column;height:100%;text-decoration:none;color:var(--fh-text);background:#fff;box-shadow:inset 0 0 0 1px var(--fh-zink);
    border-top:3px solid var(--fh-holz);transition:transform .15s ease,border-color .15s ease}
.fh-liste a:hover,.fh-liste a:focus-visible{transform:translateY(-2px);border-top-color:var(--fh-schwarz);outline:none}
.fh-liste-bild{position:relative;display:block;aspect-ratio:1;background:#fff}
.fh-liste-bild img{width:100%;height:100%;object-fit:contain}
/* Mit FHB-Bildpaar (kt_fh_liste_bild_html): Foto 10:13 randlos auf dem Studiogrund wie die Kacheln der Herstellerwelt; der
   Bildwechsel selbst (Hover, Fokus, Wischen, Punkte) kommt aus fhb-bildpaar.css — hier keine eigene Regel dafür */
.fh-liste-bild.fw-media{aspect-ratio:10/13;overflow:hidden;background:#f2f2f2}
.fh-liste-bild.fw-media .fw-haupt{position:absolute;inset:0;object-fit:cover}
.fh-liste-text{display:grid;gap:1px;min-width:0;padding:7px 9px 9px}
.fh-liste-text strong{font-size:13px;line-height:1.25}
.fh-liste-text em{font-style:normal;font-size:11px;color:var(--fh-grau)}
.fh-liste-text b{margin-top:3px;font-size:15px}
.fh-land{font-size:11px;color:var(--fh-grau)}

/* „Draußen ansehen“: der Showroom gleitet hinaus, das Außenbild herein */
.fh-wechsel{position:relative;overflow:hidden}
.fh-wechsel-spur{display:flex;align-items:flex-start;transition:transform .8s cubic-bezier(.65,0,.35,1)}
.fh-wechsel-spur > *{flex:0 0 100%;min-width:0}
.fh-wechsel--draussen .fh-wechsel-spur{transform:translateX(-100%)}
.fh-draussen{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000}
.fh-draussen video,.fh-draussen > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fh-draussen-text{position:absolute;left:16px;bottom:16px;z-index:2;max-width:min(560px,70%);margin:0;padding:10px 14px;font-size:15px;line-height:1.4;font-weight:600;
    color:var(--fh-text);background:rgba(255,255,255,.92);border-left:4px solid var(--fh-a)}
.fh-draussen .ki-label{z-index:3}
.fh-zurueck{position:absolute;left:16px;top:16px;z-index:2;display:inline-flex;align-items:center;gap:10px;padding:10px 16px;cursor:pointer;
    font:inherit;font-size:14px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#fff;background:rgba(29,29,27,.85);border:0}
.fh-zurueck span{font-size:20px;line-height:1}

/* Theke: Palettentisch mit Stoffhusse */
.fh-theke-zone{position:relative;margin:40px 16px 0;scroll-margin-top:calc(var(--kopf,0px) + var(--fh-leiste,70px) + 12px)}
.fh-theke{display:grid;grid-template-columns:minmax(60px,140px) minmax(0,1fr);min-height:240px;box-shadow:0 18px 26px -16px rgba(0,0,0,.45)}
/* Mit Thekenbild (oder Platzhalter) steht die Szene über der Liste wie an einer Wand; der gemalte Paletten-Streifen entfällt */
.fh-theke-zone > .fh-szene{margin-bottom:18px}
.fh-theke--mit-bild{grid-template-columns:minmax(0,1fr)}
.fh-theke--mit-bild .fh-theke-palette{display:none}
.fh-theke-palette{background:repeating-linear-gradient(180deg,var(--fh-holz) 0 22px,var(--fh-holz-dunkel) 22px 26px,var(--fh-holz-hell) 26px 46px,var(--fh-holz-dunkel) 46px 50px)}
.fh-theke-front{padding:24px 28px;background:#fff}
.fh-theke-front h2{margin:0 0 6px;font-size:22px;font-weight:800;text-transform:uppercase}
.fh-theke-front p{margin:0 0 8px;font-size:15px;line-height:24px}
.fh-lieferzeit{color:var(--fh-grau)}
.fh-theke-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px!important}
.fh-knopf{display:inline-block;padding:10px 16px;font-weight:700;font-size:14px;text-decoration:none;color:#fff;background:var(--fh-schwarz)}
.fh-knopf:hover,.fh-knopf:focus-visible{background:var(--fh-grau);outline:none}
.fh-knopf--hell{color:var(--fh-text);background:transparent;box-shadow:inset 0 0 0 2px var(--fh-schwarz)}
.fh-knopf--hell:hover,.fh-knopf--hell:focus-visible{color:#fff;background:var(--fh-schwarz)}
.fh-fuss{margin:0 0 24px;font-size:13px;line-height:1.5;color:var(--text-muted)}
.fh-404{padding:60px 16px;text-align:center}

/* „Look in den Warenkorb“ oben rechts (Showroom und draußen): schlichter Glasknopf, keine Anzahl, keine Bilder (Lehre F1) */
.fh-wagen{position:absolute;top:14px;right:14px;z-index:4;display:inline-flex;align-items:stretch;padding:0;overflow:hidden;cursor:pointer;
    font:inherit;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:rgba(29,29,27,.8);
    border:1px solid rgba(255,255,255,.18);box-shadow:0 10px 26px rgba(0,0,0,.35);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
    transition:transform .2s ease,background .2s ease}
.fh-wagen-sym{display:grid;place-items:center;width:44px;background:linear-gradient(135deg,var(--fh-a) 50%,var(--fh-b) 50%);color:#fff}
.fh-wagen-sym svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 1px rgba(0,0,0,.6));transition:transform .25s ease}
.fh-wagen-text{padding:12px 16px 12px 14px;white-space:nowrap}
.fh-wagen:hover,.fh-wagen:focus-visible{transform:translateY(-2px);background:rgba(29,29,27,.95);outline:none}
.fh-wagen:hover .fh-wagen-sym svg,.fh-wagen:focus-visible .fh-wagen-sym svg{transform:translateX(3px)}
.fh-wagen:focus-visible{box-shadow:0 0 0 3px #fff,0 10px 26px rgba(0,0,0,.45)}
.fh-wagen::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:30%;pointer-events:none;
    background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.55),rgba(255,255,255,0));transform:skewX(-20deg);opacity:0}
.fh-wagen.gepackt::after{animation:fh-glanz .9s ease}
@keyframes fh-glanz{0%{left:-40%;opacity:1}100%{left:130%;opacity:1}}
/* Der Layer liegt außerhalb .fh-raum — Variablen dort selbst setzen (Lehre F1) */
.fh-wagen-layer{--fh-schwarz:#1D1D1B;--fh-putz:#F3F0EA;--fh-stahl:#C9CDD2;--fh-grau:#5E636B;--fh-text:#1D1D1B;
    width:min(680px,calc(100% - 32px));max-height:calc(100% - 32px);padding:0;color:var(--fh-text);background:#fff;border:0;border-top:4px solid var(--fh-schwarz);box-shadow:0 30px 60px rgba(0,0,0,.45)}
.fh-wagen-layer::backdrop{background:rgba(20,20,18,.6)}
.fh-wagen-kopf{display:flex;justify-content:space-between;gap:16px;padding:18px 20px 10px}
.fh-wagen-kopf h2{margin:0;font-size:20px}
.fh-wagen-look{margin:4px 0 0;font-size:13px;color:var(--fh-grau)}
.fh-wagen-zu{flex:none;width:36px;height:36px;font-size:24px;line-height:1;color:var(--fh-text);background:none;border:1px solid var(--fh-stahl);cursor:pointer}
.fh-wagen-looks{display:flex;flex-wrap:wrap;gap:6px 8px;padding:0 20px 12px}
.fh-wagen-hinweis{margin:0 20px 10px;font-size:13px;color:var(--fh-grau)}
.fh-wagen-liste{margin:0;padding:0 20px;list-style:none}
.fh-wagen-liste li{display:grid;grid-template-columns:auto 56px 1fr 96px 64px 86px;align-items:center;gap:10px;padding:10px 0;border-top:1px solid #E7E2D8}
.fh-wagen-liste li.fh-wagen-laedt,.fh-wagen-liste li.fh-wagen-fehlt{display:block;color:var(--fh-grau)}
.fh-wagen-liste img{width:56px;height:56px;object-fit:contain;background:#fff;border-radius:4px;box-shadow:inset 0 0 0 1px #E7E2D8;cursor:zoom-in}
.fh-wagen-lupe{position:fixed;z-index:10;aspect-ratio:4/5;padding:10px;background:#fff;border-top:3px solid #1D1D1B;box-shadow:0 24px 50px rgba(0,0,0,.45);
    pointer-events:none;opacity:0;transform:scale(.94);transition:opacity .18s ease,transform .18s ease}
.fh-wagen-lupe.offen{opacity:1;transform:none}
.fh-wagen-lupe img{display:block;width:100%;height:100%;object-fit:contain}
.fh-wagen-name strong{display:block;font-size:14px}
.fh-wagen-name span{font-size:12px;color:var(--fh-grau)}
.fh-wagen-liste select,.fh-wagen-liste input[type=number]{width:100%;padding:7px 8px;font:inherit;font-size:14px;color:var(--fh-text);background:#fff;border:1px solid var(--fh-stahl)}
.fh-wagen-mit input{width:18px;height:18px;accent-color:#1D1D1B}
.fh-wagen-preis{text-align:right;font-size:13px;font-weight:600}
.fh-wagen-status{margin:0;font-size:14px;font-weight:600;text-align:right}
.fh-wagen-status:empty{display:none}
.fh-wagen-status.warnung{padding:9px 12px;background:#F6E7B8;border-left:4px solid #1D1D1B;animation:fh-hinweis .35s ease}
@keyframes fh-hinweis{0%,100%{transform:none}30%{transform:translateX(-5px)}65%{transform:translateX(4px)}}
.fh-wagen-liste select.fehlt{border-color:#1D1D1B;box-shadow:0 0 0 2px #F0B400}
.fh-wagen-fuss{display:flex;align-items:center;justify-content:flex-end;gap:14px;padding:16px 20px 18px}
.fh-wagen-summe{margin-right:auto;font-weight:700}
.fh-wagen-zum{color:var(--fh-text);font-weight:600}
.fh-wagen-los{padding:11px 18px;font:inherit;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#fff;background:#1D1D1B;border:0;cursor:pointer}
.fh-wagen-los:disabled{opacity:.5;cursor:wait}

@media(max-width:900px){
    /* Hero am Handy: oben Headline, Schnellwahl und die „10“ auf dem Hallengrund, darunter die Team-Bühne in fester Höhe als
       waagrecht wischbares Band (Puppen rasten in der Mitte ein); die Reihe ist so breit wie sie ist, plus Rand */
    .fh-kopf{display:block;padding:22px 0 0}
    .fh-kopf-text,.fh-kopf-seite{padding-inline:var(--fh-rand)}
    .fh-kopf-seite{gap:10px;padding:18px var(--fh-rand) 34px}
    .fh-titel{font-size:clamp(30px,9.4vw,64px)}
    .fh-kopf-farben{grid-template-columns:minmax(0,1fr);gap:12px}
    .fh-kopf-farben-titel{display:flex;align-items:baseline;gap:10px}
    .fh-kopf-farben-titel::after{display:none}
    .fh-kopf-farben ul{grid-template-columns:repeat(10,minmax(0,1fr));gap:5px;max-width:520px}
    .fh-zehn{font-size:clamp(68px,20vw,130px)}
    .fh-zehn-text{font-size:clamp(17px,4.8vw,24px)}
    .fh-kopf-buehne{height:min(540px,135vw);margin:0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
        scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
    .fh-kopf-buehne::-webkit-scrollbar{display:none}
    .fh-kopf-buehne::after{display:none}
    .fh-team{--mitte:calc(var(--fh-rand) + var(--row) / 2);--ende:calc(var(--row) + 2 * var(--fh-rand));position:relative;inset:auto;width:var(--ende);height:100%}
    .fh-team li{scroll-snap-align:center}
    .fh-team--buehne{width:var(--lw)}
    .fh-team--buehne .fh-team-leinwand{left:0}
    .fh-team-name{font-size:11px;letter-spacing:.03em;gap:6px;padding:4px 6px 4px 4px}
    .fh-team-name b{min-width:20px;height:20px;font-size:10px}
    .fh-wand{margin:28px 0 0;padding:18px 10px 12px}
    .fh-wand-kopf{flex-wrap:wrap}
    .fh-hoch,.fh-schild{margin:8px 0 0;align-self:flex-start}
    .fh-zone{grid-template-columns:1fr}
    .fh-herkunft{grid-template-columns:1fr}
    .fh-theke{grid-template-columns:36px minmax(0,1fr)}
    .fh-theke--mit-bild{grid-template-columns:minmax(0,1fr)}
    .fh-theke-zone > .fh-szene{margin-bottom:12px}
    .fh-theke-front{padding:18px 16px}
    .fh-theke-zone{margin:30px 0 0}
}
/* Handy: Farbleiste waagrecht scrollbar, Text der Außenansicht unter dem Bild (Lehre E4) */
@media(max-width:700px){
    .fh-farbwahl{padding:8px 0 8px 16px}
    .fh-farbwahl-innen,.fh-farbwahl-liste{flex-wrap:nowrap}
    .fh-farbwahl-innen{overflow-x:auto;scrollbar-width:thin;padding-right:16px;-webkit-overflow-scrolling:touch}
    .fh-farbwahl-titel,.fh-farbwahl-status{display:none}
    .fh-farbwahl-zurueck{white-space:nowrap}
    .fh-farbe i{width:28px;height:28px}
    /* Werkstattplan am Handy kompakt: nur die Zonen (die Wände folgen darunter) */
    .fh-plan{padding:10px 16px 14px}
    .fh-plan > ol{grid-template-columns:repeat(2,minmax(0,1fr))}
    .fh-plan-zone{padding:8px 10px}
    .fh-plan-zone ul{display:none}
    /* Looks der Wand am Handy nur als Farbpunkte (Name per title/Screenreader) — die zehn Pillen schoben die Szene weit nach unten */
    .fh-looks{gap:4px}
    .fh-looks-titel{flex:1 1 100%}
    .fh-look{padding:2px}
    .fh-look span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
    .fh-look i{width:24px;height:24px}
    .fh-schild,.fh-hoch{padding:7px 10px;font-size:12px}
    .fh-schild span{font-size:16px}
    .fh-wand-kopf{gap:8px}
    .fh-wand-kopf > div{flex:1 1 100%}
    .fh-draussen{aspect-ratio:auto;padding-top:56.25%;background:var(--fh-putz-2)}
    .fh-draussen video,.fh-draussen > img{bottom:auto;height:auto;aspect-ratio:16/9}
    .fh-draussen-text{position:relative;left:auto;bottom:auto;max-width:none;padding:12px 14px;font-size:14px;border-left:0;border-top:3px solid var(--fh-a)}
    .fh-zurueck{position:relative;left:auto;top:auto;margin:0 14px 14px;gap:8px;padding:8px 12px;font-size:12px}
    .fh-draussen .ki-label{top:8px;bottom:auto;right:auto;left:8px}
    .fh-wechsel:not(.fh-wechsel--draussen){aspect-ratio:16/9}
    .fh-wechsel{align-items:flex-start}
}
@media(max-width:640px){
    .fh-wagen{top:8px;right:8px;font-size:11px;letter-spacing:.05em}
    .fh-wagen-sym{width:32px}.fh-wagen-sym svg{width:17px;height:17px}
    .fh-wagen-text{padding:8px 10px}
    .fh-szene .fh-wagen-text,.fh-draussen .fh-wagen-text{display:none}   /* am Handy nur das Wagen-Symbol: der Text lag über dem Kopf der Puppe bzw. der Person draußen */
    /* Fenster-Schild am Handy nur als Pfeil, rechtsbündig im Fenster: der volle Text lief über die Puppe und aus der Szene */
    .fh-fenster span{left:auto;right:4px;top:30%;transform:translateY(-50%);padding:5px 8px;font-size:0;letter-spacing:0}
    .fh-fenster span b{font-size:16px}
    .fh-wagen-liste li{grid-template-columns:auto 48px 1fr 80px;grid-template-areas:"mit bild name name" "mit bild groesse menge" ". . preis preis"}
    .fh-wagen-liste li .fh-wagen-mit{grid-area:mit}.fh-wagen-liste li img{grid-area:bild;width:48px;height:48px}
    .fh-wagen-liste li .fh-wagen-name{grid-area:name}.fh-wagen-liste li select{grid-area:groesse}
    .fh-wagen-liste li input[type=number]{grid-area:menge}.fh-wagen-liste li .fh-wagen-preis{grid-area:preis}
    .fh-wagen-fuss{flex-wrap:wrap}
    .fh-wagen-status{flex:1 1 100%;order:-1;text-align:left}
}
@media(prefers-reduced-motion:reduce){.fh-wagen-lupe,.fh-wagen,.fh-wagen.gepackt::after,.fh-wagen-status.warnung,.fh-szene > img.fh-look-neu,.fh-grab,.fh-grab-schild,
    .fh-liste a,.fh-wechsel-spur,.fh-farbe,.fh-system,.fh-team-bild img,.fh-team li,.fh-team-bild,.fh-kopf,
    .fh-farbe i,.fh-team-name,.fh-kopf-farbe,.fh-kopf-farbe i{transition:none;animation:none}}