/* AUDIOFIE — Komponenten-Stylesheet (Präfix af-). Die Schrift kommt als @font-face aus tokens.css (fonts/HankenGrotesk-latin.woff2).
   Farben, Maße und Schatten kommen aus tokens.css (var(--…)); responsive Werte sind clamp()-Spannen mit dem Token als Maximum.
   Seitenteile (Header, Hero, Band, Window, Panorama) reagieren auf den Viewport, Inhaltsbausteine auf ihre eigene Breite (Container Queries). */

:root{
  --af-ease:cubic-bezier(.22,.61,.24,1);
  --af-gutter:clamp(20px,5.5vw,var(--gutter));
  --af-gap:clamp(20px,2.4vw,var(--grid-gap));
  --af-band-pad:clamp(48px,min(6vw,7.5vh),var(--band-pad));
  --af-fade:clamp(96px,9vw,var(--fade));
  --af-head-gap:clamp(40px,5vw,var(--head-gap));
  /* Ins Dunkel (ink): smoothstep in acht Stufen – ein linearer Verlauf zeichnet an Anfang und Ende eine Kante.
     --af-to-ink wird nach unten dunkel, --af-from-ink kommt oben aus dem Dunkel */
  --af-ink-stops:transparent,color-mix(in srgb,var(--ink) 4%,transparent) 12.5%,color-mix(in srgb,var(--ink) 16%,transparent) 25%,color-mix(in srgb,var(--ink) 32%,transparent) 37.5%,color-mix(in srgb,var(--ink) 50%,transparent) 50%,color-mix(in srgb,var(--ink) 68%,transparent) 62.5%,color-mix(in srgb,var(--ink) 84%,transparent) 75%,color-mix(in srgb,var(--ink) 96%,transparent) 87.5%,var(--ink);
  --af-to-ink:linear-gradient(180deg,var(--af-ink-stops));
  --af-from-ink:linear-gradient(0deg,var(--af-ink-stops));
  /* Fokus: ein Rahmen für alles (Kontrastmodus: 2 px in Highlight, siehe unten) */
  --af-focus:1px solid var(--accent);
  --af-focus-offset:4px;
}
/* Kopfhöhe einmal für alle (Kopfzeile, Menü, Hero, Sprungziele, Seiten): Handy 64 px, niedrige Bildschirme (Handy quer) 56 px */
@media (max-width:760px){:root{--header-h:64px}}
@media (max-height:500px){:root{--header-h:56px}}
*,*::before,*::after{box-sizing:border-box}
/* Scrollbalken: schmal, Griff in Champagner, Spur unsichtbar – der graue Balken des Browsers stand sonst als Fremdkörper neben dem Bild.
   scrollbar-color erbt in Menü, Datenblatt und Ansichten; Safari ohne scrollbar-color bekommt dasselbe über die WebKit-Teile */
html{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--accent) 45%,transparent) transparent}
@supports not (scrollbar-color:auto){
  ::-webkit-scrollbar{width:8px;height:8px;background:transparent}
  ::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--accent) 45%,transparent) padding-box;border:2px solid transparent}
  ::-webkit-scrollbar-thumb:hover{background-color:color-mix(in srgb,var(--accent) 75%,transparent)}
}
body{margin:0;background:var(--ink);color:var(--fg);font-family:var(--font-sans);font-size:17px;line-height:1.65;font-weight:400;font-feature-settings:"kern","liga";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
::selection{background:var(--accent);color:var(--on-light)}
/* iOS: kein grauer Tipp-Schatten – Bedienelemente zeigen Drücken und Fokus selbst */
html{-webkit-tap-highlight-color:transparent}
/* Rücksetzungen nur in Komponenten und ohne Gewicht (:where) – eigene Klassen gewinnen immer */
:where([class*="af-"]):where(h1,h2,h3,h4,p,ul,ol,dl,dd,dt,figure,blockquote),:where([class*="af-"]) :where(h1,h2,h3,h4,p,ul,ol,dl,dd,dt,figure,blockquote){margin:0}
:where([class*="af-"]):where(ul,ol),:where([class*="af-"]) :where(ul,ol){padding:0;list-style:none}
:where([class*="af-"]):where(a),:where([class*="af-"]) :where(a){color:inherit;text-decoration:none}
:where([class*="af-"]):where(button,input,select,textarea),:where([class*="af-"]) :where(button,input,select,textarea){font:inherit;color:inherit}
:where([class*="af-"]):where(img),:where([class*="af-"]) :where(img){display:block;max-width:100%}
[class*="af-"][hidden],:where([class*="af-"]) [hidden]{display:none!important}
/* Gilt auch für Elemente ohne eigene Klasse in Komponenten (Footer-Links, Checkbox, Link in der Einwilligung) */
[class*="af-"]:focus-visible,:where([class*="af-"]) :focus-visible{outline:var(--af-focus);outline-offset:var(--af-focus-offset)}
.af-visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Raster */
.af-container{width:100%;max-width:calc(var(--container) + 2 * var(--af-gutter));margin-inline:auto;padding-left:max(var(--af-gutter),env(safe-area-inset-left,0px));padding-right:max(var(--af-gutter),env(safe-area-inset-right,0px))}

/* Textstile (wie die Typo-Tokens, mit clamp-Spannen) */
.af-display{font-weight:200;font-size:clamp(52px,6.6vw,100px);line-height:1;letter-spacing:-.045em;text-wrap:balance}
.af-h2{font-weight:300;font-size:clamp(36px,4.1vw,60px);line-height:1.06;letter-spacing:-.035em;text-wrap:balance}
.af-h3{font-weight:400;font-size:clamp(21px,1.6vw,24px);line-height:1.25;letter-spacing:-.012em}
.af-lede{font-weight:300;font-size:clamp(18px,1.45vw,21px);line-height:1.55;letter-spacing:-.005em;color:var(--fg-2);max-width:31em;text-wrap:pretty}
.af-small{font-size:14px;line-height:1.5;color:var(--fg-3)}
.af-label{font-size:12px;font-weight:500;line-height:1.3;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3)}
@media (max-width:760px){body{font-size:16px}}

/* Icon (Pfeil, Linien) */
.af-icon{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.af-icon--up{transform:rotate(-90deg)}
.af-icon--left{transform:rotate(180deg)}

/* Einblenden beim Scrollen (reveal() im Bundle setzt die Klassen, nur unterhalb des Bildschirms) */
.af-rv{opacity:0;transform:translate3d(0,22px,0)}
.af-rv--mask{transform:translate3d(0,30%,0);clip-path:polygon(-6% 130%,106% 130%,106% 130%,-6% 130%)}
.af-rv.af-rv-in{opacity:1;transform:none;transition:opacity 1.1s var(--af-ease) calc(var(--af-i,0) * 90ms),transform 1.3s var(--af-ease) calc(var(--af-i,0) * 90ms),clip-path 1.3s var(--af-ease) calc(var(--af-i,0) * 90ms)}
.af-rv--mask.af-rv-in{clip-path:polygon(-6% -25%,106% -25%,106% 130%,-6% 130%)}
/* Wörter in Fugen (SplitText, Überschriften): steigen nacheinander auf */
.af-w{display:inline-block;overflow:hidden;vertical-align:top;padding:.04em .04em .14em;margin:-.04em -.04em -.14em}
.af-w-in{display:inline-block}
.af-rv.af-rv--words{opacity:1;transform:none}
.af-rv--words .af-w-in{transform:translate3d(0,112%,0)}
.af-rv--words.af-rv-in .af-w-in{transform:none;transition:transform 1.25s cubic-bezier(.19,1,.22,1) calc(var(--af-i,0) * 90ms + var(--af-w,0) * 45ms)}
@keyframes af-fade{from{opacity:0}}
@keyframes af-fade-up{from{opacity:0;transform:translate3d(0,10px,0)}}
@keyframes af-rise{from{opacity:0;transform:translate3d(0,14px,0)}}

/* Sprunglink für Tastatur */
.af-skip{position:fixed;left:16px;top:-100px;z-index:calc(var(--layer-header) + 10);background:var(--light);color:var(--on-light);padding:12px 18px;font-size:15px;font-weight:500;transition:top .3s var(--af-ease)}
.af-skip:focus{top:calc(16px + env(safe-area-inset-top,0px))}

/* --- Intro (Auftritt beim ersten Besuch) -------------------------------------------- */
:root.af-has-intro{--af-intro-d:1.7s}
.af-intro{display:none}
:root.af-has-intro:not(.af-intro-over) .af-intro,.af-intro--on{position:fixed;inset:0;z-index:calc(var(--layer-header) + 20);display:grid;place-items:center;overflow:hidden;background:var(--ink);cursor:pointer;animation:af-intro-out .8s var(--af-ease) 1.7s both}
.af-intro--contained{position:absolute!important}
.af-intro-stage{position:relative;display:flex;flex-direction:column;align-items:center;gap:clamp(20px,2.4vw,30px)}
.af-intro-mark{position:relative;z-index:1;display:block;width:clamp(104px,11vw,150px);height:auto;animation:af-intro-mark 1.3s cubic-bezier(.2,.7,.2,1) .15s both}
.af-intro-word{position:relative;z-index:1;display:block;height:clamp(11px,1.2vw,15px);width:auto;animation:af-intro-word 1.1s var(--af-ease) .7s both}
/* Der Lichtstrahl des Zeichens: eine senkrechte Linie, die von oben durchs „A“ fällt */
.af-intro-beam{position:absolute;left:50%;top:-40vh;width:1px;height:calc(80vh + 100%);margin-left:-.5px;background:linear-gradient(180deg,#ffffff00,color-mix(in srgb,var(--accent) 85%,#fff) 42%,#fff 50%,color-mix(in srgb,var(--accent) 85%,#fff) 58%,#ffffff00);box-shadow:0 0 12px 1px color-mix(in srgb,var(--accent) 60%,transparent);transform:scaleY(0);transform-origin:50% 0;animation:af-intro-beam 1.5s cubic-bezier(.3,.6,.2,1) both}
.af-intro--skip{animation:af-intro-out .35s var(--af-ease) both!important}
/* Erzwungen (Vorschau) und reduzierte Bewegung: ohne Bewegung gäbe es nichts zu sehen und nichts, das es beendet */
@media (prefers-reduced-motion:reduce){.af-intro--on{display:none}}
@keyframes af-intro-beam{0%{transform:scaleY(0);opacity:1}50%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}
@keyframes af-intro-mark{from{opacity:0;transform:scale(.9);filter:blur(10px) brightness(1.8)}to{opacity:1;transform:none;filter:none}}
@keyframes af-intro-word{from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:none}}
@keyframes af-intro-out{to{opacity:0;visibility:hidden}}

/* Bilder mit mehreren Formaten: <picture> trägt kein eigenes Layout */
.af-pic{display:contents}
/* <source> blendet kein Browser von selbst aus – in Flex-Reihen (Logo, Bilder) zählte es sonst als Element mit Abstand */
.af-pic>source{display:none}

/* --- Brand ------------------------------------------------------------------ */
.af-brand{display:inline-flex;align-items:center;gap:14px;flex:none;line-height:0}
.af-brand-mark{display:block;height:38px;width:auto}
.af-brand-word{display:block;height:14px;width:auto}
a.af-brand:hover .af-brand-mark{filter:brightness(1.12)}
.af-brand--compact{gap:10px}
.af-brand--compact .af-brand-mark{height:30px}
.af-brand--compact .af-brand-word{height:11px}
.af-brand--mark .af-brand-mark{height:var(--af-brand-size,64px)}
.af-brand--signoff{display:block;width:clamp(250px,24vw,320px)}
.af-brand--signoff{position:relative}
.af-brand--signoff img{display:block;width:100%;height:auto}
/* Ohne die Zeile „Pure Emotion“ (line={false}): dieselbe Datei, unter der Wortmarke abgeschnitten (742 von 800 px); der Glanz behält die volle Höhe */
.af-brand--no-line{aspect-ratio:900 / 742;overflow:hidden}
.af-brand--no-line .af-brand-sheen{bottom:auto;aspect-ratio:900 / 800}
.af-brand-sheen{position:absolute;inset:0;pointer-events:none;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  background:linear-gradient(105deg,#ffffff00 38%,#ffffff99 47%,color-mix(in srgb,var(--accent) 55%,#fff) 50%,#ffffff99 53%,#ffffff00 62%) 0 0 / 300% 100% no-repeat;background-position:110% 0;mix-blend-mode:screen;opacity:0}
@media (prefers-reduced-motion:no-preference){
  .af-live .af-brand-sheen{animation:af-sheen 9s cubic-bezier(.4,.1,.3,1) 1.2s infinite}
  .af-live .af-window-title .af-display{animation:af-sunrise 8s cubic-bezier(.4,.1,.3,1) .9s infinite}
}
@keyframes af-sheen{0%{background-position:110% 0;opacity:1}28%{background-position:-10% 0;opacity:1}29%,100%{background-position:-10% 0;opacity:0}}

/* --- Button ----------------------------------------------------------------- */
.af-btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:12px;height:var(--button-h);padding:0 28px;border:1px solid transparent;border-radius:var(--radius-none);font-size:15px;font-weight:500;line-height:1;letter-spacing:.005em;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .35s var(--af-ease),color .35s var(--af-ease),border-color .35s var(--af-ease),transform .35s var(--af-ease)}
.af-btn{transform:translate3d(var(--af-mx,0px),var(--af-my,0px),0)}
.af-btn:active{transform:translate3d(var(--af-mx,0px),calc(var(--af-my,0px) + 1px),0)}
.af-btn-label{display:inline-block;transform:translate3d(calc(var(--af-mx,0px) * .45),calc(var(--af-my,0px) * .45),0);transition:transform .35s var(--af-ease)}
/* Hauptaktion: Graphit mit Champagner-Rand – oben im Licht (wie der Glanz der Wortmarke), nach unten auslaufend. Beim
   Überfahren hellt der Grund auf und ein Lichtstreif zieht einmal durch; die Beschriftung (transformiert) liegt darüber */
.af-btn--light{background:linear-gradient(180deg,var(--graphite),var(--graphite-2)) padding-box,linear-gradient(180deg,color-mix(in srgb,var(--accent) 55%,#fff),var(--accent) 40%,color-mix(in srgb,var(--accent) 32%,transparent)) border-box}
.af-btn--light{color:var(--fg);font-weight:450;letter-spacing:.015em;box-shadow:inset 0 1px 0 color-mix(in srgb,var(--spot) 12%,transparent),inset 0 0 0 60px color-mix(in srgb,var(--spot) 0%,transparent);transition:box-shadow .5s var(--af-ease),transform .35s var(--af-ease)}
.af-btn--light:hover{box-shadow:inset 0 1px 0 color-mix(in srgb,var(--spot) 20%,transparent),inset 0 0 0 60px color-mix(in srgb,var(--spot) 5%,transparent)}
.af-btn--light::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 35%,color-mix(in srgb,var(--spot) 13%,transparent) 50%,transparent 65%);transform:translateX(-101%);pointer-events:none}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .af-btn--light::before{transition:transform 1.2s var(--af-ease)}
  .af-btn--light:hover::before{transform:translateX(101%)}
}
.af-btn--line{border-color:var(--hair-2);color:var(--fg);background:var(--fill-faint)}
.af-btn--line:hover{border-color:var(--hair-strong);background:var(--fill-hover)}
.af-btn--sm{height:40px;padding:0 18px;font-size:14px}
.af-btn--wide{min-width:220px}
.af-btn--block{width:100%}
.af-btn:disabled:not([aria-busy="true"]){opacity:.45;cursor:not-allowed}
/* Läuft: eine feine Linie wandert unten durch den Button */
.af-btn[aria-busy="true"]{cursor:progress}
.af-btn[aria-busy="true"]::after{content:"";position:absolute;left:0;bottom:0;width:40%;height:1px;background:currentColor;opacity:.55;animation:af-busy 1.3s var(--af-ease) infinite}
@keyframes af-busy{from{transform:translateX(-100%)}to{transform:translateX(260%)}}

/* --- TextLink ---------------------------------------------------------------- */
/* Unterlinie hair-2; beim Überfahren zieht eine Linie in fg von links darüber */
.af-link{display:inline-flex;align-items:center;gap:10px;padding:0 0 6px;border:0;background:linear-gradient(var(--fg),var(--fg)) left bottom / 0 1px no-repeat,linear-gradient(var(--hair-2),var(--hair-2)) left bottom / 100% 1px no-repeat;font-size:15px;font-weight:500;line-height:1.3;color:var(--fg);cursor:pointer;transition:background-size .6s var(--af-ease)}
.af-link .af-icon{transition:transform .4s var(--af-ease)}
.af-link:hover,.af-link:focus-visible{background-size:100% 1px,100% 1px}
.af-link:hover .af-icon{transform:translateX(4px)}
.af-link:hover .af-icon--up{transform:rotate(-90deg) translateX(4px)}

/* --- SectionHead ------------------------------------------------------------- */
.af-head-wrap{container-type:inline-size}
.af-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px var(--af-gap);align-items:end;margin-bottom:var(--af-head-gap)}
.af-head .af-label{grid-column:1 / -1}
.af-head .af-h2{grid-column:1 / span 7}
.af-head-text{grid-column:9 / span 4;color:var(--fg-2);text-wrap:pretty}
.af-head--flush{margin-bottom:0}
@container (max-width:1000px){.af-head .af-h2{grid-column:1 / span 10}.af-head-text{grid-column:1 / span 8}}
@container (max-width:700px){.af-head{margin-bottom:36px}.af-head .af-h2,.af-head-text{grid-column:1 / -1}.af-head--flush{margin-bottom:0}}

/* --- Split ------------------------------------------------------------------- */
.af-split-wrap{container-type:inline-size}
.af-split{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:56px var(--af-gap);align-items:start}
.af-split--center{align-items:center}
.af-split-main{grid-column:1 / span 6;display:flex;flex-direction:column;align-items:flex-start;gap:28px}
.af-split-main .af-btn{margin-top:12px}
.af-split-side{grid-column:8 / span 5}
.af-split--wide-side .af-split-side{grid-column:7 / span 6}
@container (max-width:1000px){.af-split-main,.af-split-side,.af-split--wide-side .af-split-side{grid-column:1 / -1}}

/* --- Panorama (durchgehender Hintergrund) ------------------------------------- */
.af-backdrop{position:fixed;inset:0;z-index:var(--layer-backdrop);overflow:hidden;background:var(--ink);pointer-events:none;container-type:size}
.af-backdrop--contained{position:absolute}
.af-backdrop-stage{position:absolute;inset:0;transform-origin:50% 35%}
.af-backdrop-layer{position:absolute;top:0;left:50%;width:max(100cqw,75cqh);transform:translate3d(-50%,0,0);will-change:transform}
.af-backdrop-img{position:relative;display:block;width:100%;max-width:none;height:auto;aspect-ratio:1/3;filter:brightness(var(--backdrop-brightness));-webkit-mask-image:linear-gradient(180deg,#000 95%,transparent);mask-image:linear-gradient(180deg,#000 95%,transparent)}
/* Kopfstück (nur Handys laden es, sonst bleibt es leer): liegt unter dem Panorama, bis das geladen ist */
.af-backdrop-head{position:absolute;top:0;display:block;max-width:none;height:auto;filter:brightness(var(--backdrop-brightness));-webkit-mask-image:linear-gradient(180deg,#000 92%,transparent);mask-image:linear-gradient(180deg,#000 92%,transparent)}
.af-is-full .af-backdrop-head{display:none}
.af-backdrop::after{content:"";position:absolute;inset:0;opacity:var(--grain-opacity);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E")}
@media (prefers-reduced-motion:no-preference){.af-backdrop--settle .af-backdrop-stage{animation:af-settle 2.8s cubic-bezier(.2,.6,.2,1) var(--af-intro-d,0s) both}}
@keyframes af-settle{from{transform:scale(1.07);opacity:0}to{transform:none;opacity:1}}
.af-marks{position:absolute;inset:0;opacity:0}
/* Lebendiger Hero (PanoTurn): deckende Ausschnitte über dem Panorama, gleiche Helligkeit, Ränder weich ins Bild darunter */
.af-pano-turn{position:absolute;pointer-events:none;opacity:0;transition:opacity .6s var(--af-ease);filter:brightness(var(--backdrop-brightness));
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent),linear-gradient(180deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent),linear-gradient(180deg,transparent,#000 6%,#000 94%,transparent);mask-composite:intersect}
.af-pano-turn.af-is-ready{opacity:1}
.af-pano-turn-img{position:absolute;inset:0;width:100%;height:100%;display:block}
@media (prefers-reduced-motion:reduce){.af-pano-turn{display:none}}
@container (max-width:760px){.af-marks{display:none}}

/* --- ImageCallout (Beschriftung im Bild) --------------------------------------- */
.af-mark{position:absolute;color:var(--fg);text-shadow:var(--mark-on-image);white-space:nowrap}
.af-mark--callout{display:flex;align-items:center;transform:translate(-7px,-7px)}
.af-mark--off{display:none}
.af-mark-dot{position:relative;flex:none;width:14px;height:14px;border-radius:var(--radius-dot);border:1px solid var(--on-image);display:grid;place-items:center;box-shadow:0 0 12px #00000080}
.af-mark-dot::after{content:"";width:4px;height:4px;border-radius:var(--radius-dot);background:var(--accent)}
.af-mark-dot::before{content:"";position:absolute;inset:-1px;border-radius:var(--radius-dot);border:1px solid var(--accent-ring);animation:af-ping 3.2s cubic-bezier(.2,.6,.2,1) infinite}
@keyframes af-ping{0%{transform:scale(1);opacity:.9}70%,100%{transform:scale(2.6);opacity:0}}
.af-mark-line{flex:none;width:var(--mark-line);height:1px;background:linear-gradient(90deg,var(--on-image),var(--on-image-2))}
.af-mark-text{display:flex;flex-direction:column;gap:3px;padding-left:14px;line-height:1.3}
.af-mark-text b{font-size:15px;font-weight:500;letter-spacing:-.005em}
.af-mark-text span{font-size:13px;color:var(--fg-2)}
.af-mark--label{transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.af-mark--label b{font-size:20px;font-weight:300;letter-spacing:-.02em;line-height:1}
.af-mark--label span{font-size:12px;font-weight:500;letter-spacing:.14em;line-height:1.3;color:var(--fg-2)}
/* Im Panorama: Linie zeichnet sich, Text folgt, sobald die Gruppe richtig im Blick ist */
.af-marks .af-mark-line{transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--af-ease) .1s}
.af-marks .af-mark-text,.af-marks .af-mark--label>*{opacity:0;transform:translate3d(-6px,0,0);transition:opacity .8s var(--af-ease) .45s,transform .9s var(--af-ease) .45s}
.af-marks .af-mark--label>*{transform:translate3d(0,6px,0)}
.af-marks .af-mark--label>span{transition-delay:.6s}
.af-marks.af-on .af-mark-line,.af-marks.af-on .af-mark-text,.af-marks.af-on .af-mark--label>*{opacity:1;transform:none}

/* --- Band (Inhalt auf shade, weich ins Panorama auslaufend) ------------------- */
.af-band{--af-fade-top:var(--af-fade);--af-fade-bottom:var(--af-fade);position:relative;z-index:var(--layer-content);padding-block:var(--af-band-pad);background:linear-gradient(180deg,transparent 0,var(--shade) var(--af-fade-top),var(--shade) calc(100% - var(--af-fade-bottom)),transparent 100%)}
/* Ruhige Lesefläche: unter Text wird das Panorama weichgezeichnet – Licht und Farbe bleiben, Motive verschwinden.
   Die Unschärfe läuft mit denselben Verläufen aus wie die Abdunklung, Fenster bleiben scharf. */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .af-band::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;-webkit-backdrop-filter:blur(var(--band-blur,26px));backdrop-filter:blur(var(--band-blur,26px));-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 var(--af-fade-top),#000 calc(100% - var(--af-fade-bottom)),transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 var(--af-fade-top),#000 calc(100% - var(--af-fade-bottom)),transparent 100%)}
  /* Zwei Bänder ohne Verlauf dazwischen (offen unten → das nächste): Jedes zeichnet nur in seinem Kasten unscharf, an der
     Grenze stießen zwei getrennt gerechnete Bilder hart aneinander. Die Unschärfe des unteren reicht ein Stück nach oben
     (--af-seam, im freien Rand darüber, kein Text) und blendet dort ein – die Grenze liegt unter ihr und verwischt mit */
  .af-band--open-bottom+.af-band{--af-seam:40px}
  .af-band--open-bottom+.af-band::before{top:calc(-1 * var(--af-seam));
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 var(--af-seam),#000 calc(100% - var(--af-fade-bottom)),transparent 100%);
    mask-image:linear-gradient(180deg,transparent 0,#000 var(--af-seam),#000 calc(100% - var(--af-fade-bottom)),transparent 100%)}
}
/* Weniger Transparenz gewünscht: die Bänder decken ganz (ink), ohne Weichzeichner – das Panorama bleibt den Fenstern */
@media (prefers-reduced-transparency:reduce){.af-band{--shade:var(--ink)}.af-band::before{display:none}}
.af-band--joined{--af-fade-top:0px;padding-top:calc(var(--af-band-pad) * .6)}
.af-band--open-bottom{--af-fade-bottom:0px;padding-bottom:calc(var(--af-band-pad) * .6)}
.af-band--closed-bottom{--af-fade-bottom:0px}
/* Band und Fenster stoßen im Dunkel aneinander: Das Band beginnt bzw. endet über --af-fade in ink, das Fenster kommt aus ink
   bzw. läuft hinein (unten: Window). Liefen beide Verläufe gegen das Panorama aus, stünde an der Grenze der Durchblick des
   Bands (unscharf) gegen das scharfe Bild – und im Fenster der Rand des Motivs (die Wolken über dem Abendhimmel).
   --af-ink-top/--af-ink-bottom (none oder --af-from-ink/--af-to-ink) schalten das auch für Nachbarn außerhalb (Footer) */
.af-band{--af-ink-top:none;--af-ink-bottom:none}
.af-band::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--af-ink-top) top / 100% var(--af-fade) no-repeat,var(--af-ink-bottom) bottom / 100% var(--af-fade) no-repeat}
.af-band:has(+ .af-window){--af-fade-bottom:0px;--af-ink-bottom:var(--af-to-ink)}
.af-window+.af-band{--af-fade-top:0px;--af-ink-top:var(--af-from-ink)}

/* --- Window (freier Blick aufs Panorama) ------------------------------------- */
.af-window{position:relative;z-index:var(--layer-content);margin:0;height:clamp(300px,36vw,var(--window-h))}
.af-window--scene{height:clamp(380px,42vw,620px)}
.af-window--launch{height:clamp(360px,40vw,580px)}
/* Neben einem Band kommt das Fenster aus dem Dunkel bzw. läuft hinein (siehe Band) – über gut ein Drittel seiner Höhe */
.af-window{--af-ink-top:none;--af-ink-bottom:none;--af-window-fade:clamp(120px,36%,220px);background:var(--af-ink-top) top / 100% var(--af-window-fade) no-repeat,var(--af-ink-bottom) bottom / 100% var(--af-window-fade) no-repeat}
.af-band+.af-window{--af-ink-top:var(--af-from-ink)}
.af-window:has(+ .af-band){--af-ink-bottom:var(--af-to-ink)}
.af-window-cap{position:absolute;left:0;right:0;bottom:clamp(20px,2.6vw,36px);translate:0 calc(var(--af-wp,0) * 28px);display:flex;align-items:center;gap:14px;font-size:12px;font-weight:500;line-height:1.3;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-2);text-shadow:var(--text-on-image)}
.af-window-cap::before{content:"";flex:none;width:28px;height:1px;background:currentColor;opacity:.7}
/* Der Scrim setzt oben weich ein (Maske), sonst steht an der Fensterkante eine Stufe gegen das auslaufende Band darüber */
.af-window--claim::before{content:"";position:absolute;inset:0;background:linear-gradient(160deg,color-mix(in srgb,var(--shade-scrim) 67%,transparent) 0%,color-mix(in srgb,var(--shade-scrim) 28%,transparent) 30%,transparent 50%);-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 48px);mask-image:linear-gradient(180deg,transparent 0,#000 48px)}
.af-window-claim{position:absolute;left:0;right:0;top:clamp(40px,7vw,104px);transform:translate3d(0,calc(var(--af-wp,0) * 56px),0)}
.af-claim{font-size:clamp(40px,5vw,76px);font-weight:200;line-height:1;letter-spacing:-.045em;color:var(--fg);text-shadow:var(--claim-on-image)}
.af-claim-line{display:block}
.af-claim-sub{color:var(--fg-2)}
.af-window-title{position:absolute;left:0;right:0;bottom:clamp(40px,5vw,72px);transform:translate3d(0,calc(var(--af-wp,0) * 64px),0)}
/* Das Datum zieht beim Hereinkommen die Laufweite zusammen */
.af-window-title .af-display{font-size:clamp(68px,12.5vw,196px);line-height:.88;letter-spacing:calc(-.055em + max(var(--af-wp,0),0) * .1em);text-shadow:var(--launch-on-image)}
/* Das Datum fängt Licht: ein warmer Streif zieht durch die Schrift, wie die Sonne im Bild */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .af-window-title .af-display{color:transparent;background:linear-gradient(100deg,var(--fg) 0 40%,#fff 46%,color-mix(in srgb,var(--accent) 70%,#fff) 50%,#fff 54%,var(--fg) 60% 100%) 0 0 / 300% 100% no-repeat;background-position:100% 0;-webkit-background-clip:text;background-clip:text}
}
@keyframes af-sunrise{0%{background-position:100% 0}32%,100%{background-position:0 0}}
@media (max-width:760px){
  .af-window{height:max(260px,64vw)}
  .af-window--launch{height:max(300px,80vw)}
  .af-window-claim{top:28px}
  .af-window--claim::before{background:linear-gradient(180deg,color-mix(in srgb,var(--shade-scrim) 80%,transparent) 0%,color-mix(in srgb,var(--shade-scrim) 39%,transparent) 42%,transparent 66%)}
  .af-claim{font-size:clamp(34px,10vw,48px)}
  .af-window-title .af-display{font-size:clamp(56px,16vw,104px)}
}
/* Handy im Hochformat: der Claim bekommt einen eigenen Moment (60 % der Höhe). Die anderen Fenster bleiben schmal –
   höher zeigten sie schon das nächste Motiv des Panoramas (unter der Serien-Szene den See, unter dem See nur Schwarz) */
@media (max-width:760px) and (orientation:portrait){
  .af-window--claim{height:max(260px,60svh)}
}

/* --- Explosion (Der Antrieb, freigelegt) ------------------------------------- */
/* Das Fenster `drive` ist höher und schneidet ab: die Spiegelung läuft unten weich aus (Maske). Die Bildfolge steht
   in Container-Einheiten: so breit wie 92 % des Fensters, höchstens 1,7 Fensterhöhen – das Chassis (die obere Hälfte
   des Bildes) füllt dann die Höhe; etwas rechts der Mitte, damit der Claim links frei bleibt. Claim und Bildunterschrift
   liegen darüber. Gemessen an --af-drive-h (der Höhe ohne Scrollweg) und an --af-pano-y (Standard die Mitte des Fensters):
   Steht es mit Weg höher (ganzer Bildschirm), bleiben Chassis und Maske, wo sie waren – das Panorama hängt an derselben Stelle
   (--af-pano-y liest es mit), das Chassis bleibt auf seinem Boden. */
.af-window--drive{--af-drive-h:clamp(380px,46vw,680px);height:var(--af-drive-h);overflow:hidden;container-type:size}
.af-window--drive .af-window-claim,.af-window--drive .af-window-cap{z-index:2}
.af-explode-stage{position:absolute;inset:0;overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(#000 calc(var(--af-pano-y,50%) + .22 * var(--af-drive-h,100%)),transparent calc(var(--af-pano-y,50%) + .5 * var(--af-drive-h,100%)));mask-image:linear-gradient(#000 calc(var(--af-pano-y,50%) + .22 * var(--af-drive-h,100%)),transparent calc(var(--af-pano-y,50%) + .5 * var(--af-drive-h,100%)))}
.af-explode,.af-explode-over{position:absolute;left:55%;top:var(--af-pano-y,50%);width:min(92cqw,1.7 * var(--af-drive-h,100cqh));aspect-ratio:1882/1777;transform:translate3d(-50%,-28%,0)}
.af-explode-sheet{position:absolute;inset:0;overflow:hidden}
.af-explode-img{position:absolute;left:0;top:0;display:block;max-width:none;user-select:none;-webkit-user-drag:none}
@media (max-width:760px){
  .af-window--drive{--af-drive-h:max(360px,92vw)}
  /* Handy: tiefer im Fenster – das zusammengesetzte Chassis läge sonst auf der zweiten Claim-Zeile, solange das Fenster hereinkommt */
  .af-explode,.af-explode-over{left:50%;transform:translate3d(-50%,-14%,0)}
}

/* Fenster mit Scrollweg (Window run): Es steht unter der Kopfzeile und füllt den Bildschirm, solange man den Weg scrollt
   (--af-run lang, der Rahmen trägt ihn als Platz unter dem Fenster). Nur mit Script und Bewegung – sonst, und mit
   motion: false (af-window-run--static), steht das Fenster wie ohne Weg */
/* Ohne Weg stoßen Fenster und Band wie überall im Dunkel aneinander – .af-window+.af-band greift hier nicht (Hülle
   af-window-run). Mit Weg zeichnet das Fenster sein Auslaufen selbst (unten, --af-fo-a/b) */
.af-window-run+.af-band{--af-fade-top:0px;--af-ink-top:var(--af-from-ink)}
.af-window-run:has(+ .af-band)>.af-window{--af-ink-bottom:var(--af-to-ink)}
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){
  .af-window-run:not(.af-window-run--static)::after{content:"";display:block;height:var(--af-run,150svh)}
  .af-window-run:not(.af-window-run--static)>.af-window--run{position:sticky;top:var(--header-h);height:calc(100svh - var(--header-h))}
  /* Unter dem Ausschnitt (--af-drive-h um die Mitte), spätestens in den letzten 260 px (niedrige Bildschirme, sonst endete der
     helle Boden hart am Band), läuft das Fenster ins Dunkel aus (a → b, mindestens 240 px, ink; --af-to-ink unter dem Chassis) – auf dem Handy
     reichte der Bildschirm sonst bis in die Serien-Szene des Panoramas. Oben bleibt es offen: Hero und Fenster sind ein Bild.
     Das Band danach kommt aus demselben Dunkel (wie nach jedem Fenster, Regel oben) */
  .af-window-run:not(.af-window-run--static)>.af-window--run{--af-fo-a:min(calc(var(--af-pano-y,50%) + .3 * var(--af-drive-h,60%)),calc(100% - 260px));--af-fo-b:min(max(calc(var(--af-pano-y,50%) + .5 * var(--af-drive-h,60%) + 16px),calc(var(--af-fo-a) + 240px)),calc(100% - 40px));background:linear-gradient(180deg,transparent calc(var(--af-fo-b) - 1px),var(--ink) calc(var(--af-fo-b) - 1px))}
  .af-window-run:not(.af-window-run--static)>.af-window--run::after{content:"";position:absolute;left:0;right:0;top:var(--af-fo-a);height:calc(var(--af-fo-b) - var(--af-fo-a));z-index:-1;pointer-events:none;background:var(--af-to-ink)}
  /* Handy: Chassis und Bildstelle (--af-pano-y, Panorama) höher im Fenster – gleich unter dem Claim, darunter Platz für die Tafel */
  @media (max-width:760px){
    .af-window-run:not(.af-window-run--static)>.af-window--drive{--af-pano-y:30%}
    /* Die Tafel gleich unter dem Chassis (wo die Maske ausläuft), nicht erst am unteren Rand – dazwischen stand ein Viertel des
       Bildschirms leer. Reicht die Höhe nicht (iPhone SE), nimmt der auto-Rand keinen Platz und die Tafel steht wieder unten.
       top nie tiefer als bottom (Regel weiter unten): Quer ist --af-drive-h (92 vw) höher als das Fenster – ohne min() begann
       die Tafel unter dem Bildschirm, die Bildunterschrift lag auf den Segmenten */
    .af-window-run:not(.af-window-run--static)>.af-window--drive .af-explode-info.af-is-live{top:min(calc(var(--af-pano-y) + .5 * var(--af-drive-h) + 8px),calc(100% - clamp(20px,2.6vw,36px) - 44px));flex-direction:column;justify-content:flex-end}
    .af-window-run:not(.af-window-run--static)>.af-window--drive .af-explode-panel{margin-bottom:auto}
  }
  /* Handy hochkant: Das Bild ist dort 225 vh hoch (Panorama 75 vh breit), 15 vh unter der Bildstelle endet der Marmorboden
     an einer geraden Kante (darunter Holz und Himmel des nächsten Motivs) – bis dahin ist das Fenster fast dunkel */
  @media (max-width:760px) and (orientation:portrait){.af-window-run:not(.af-window-run--static)>.af-window--drive{--af-fo-a:calc(var(--af-pano-y) + 15vh - 80px);--af-fo-b:calc(var(--af-pano-y) + 15vh + 16px)}}
}

/* Marken an den Teilen: ein Punkt auf dem Teil, eine Linie hinaus (Länge = Höhe bzw. Breite des Elements), am Ende der Name.
   Über der Maske, damit tiefe Namen nicht mit der Spiegelung verblassen. Die des Schritts steigen nacheinander auf */
.af-explode-over{z-index:1;pointer-events:none}
.af-explode-mark{position:absolute;opacity:0;transition:opacity .3s var(--af-ease)}
.af-explode-mark.af-is-on{opacity:1;transition:opacity .6s var(--af-ease) calc(.12s * var(--d,0) + .15s)}
.af-explode-mark--top,.af-explode-mark--bottom{width:0}
.af-explode-mark--left,.af-explode-mark--right{height:0}
.af-explode-mark::before{content:"";position:absolute;width:7px;height:7px;margin:-3.5px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent),0 0 12px color-mix(in srgb,var(--ink) 80%,transparent)}
.af-explode-mark::after{content:"";position:absolute;background:color-mix(in srgb,var(--fg) 55%,transparent);transform-origin:0 0;transition:transform .5s var(--af-ease)}
.af-explode-mark--bottom::before{left:0;top:0}
.af-explode-mark--top::before{left:0;bottom:0}
.af-explode-mark--left::before{right:0;top:0}
.af-explode-mark--right::before{left:0;top:0}
.af-explode-mark--top::after,.af-explode-mark--bottom::after{left:-.5px;width:1px;top:6px;bottom:0}
.af-explode-mark--top::after{top:0;bottom:6px;transform-origin:0 100%}
.af-explode-mark--left::after,.af-explode-mark--right::after{top:-.5px;height:1px;left:6px;right:0}
.af-explode-mark--left::after{left:0;right:6px;transform-origin:100% 0}
.af-explode-mark:not(.af-is-on)::after{transform:scale(0)}
.af-explode-mark.af-is-on::after{transition-delay:calc(.12s * var(--d,0) + .15s)}
.af-explode-mark-name{position:absolute;font-size:11px;font-weight:500;line-height:1.3;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;color:var(--fg);text-shadow:var(--text-on-image),0 0 10px var(--ink)}
.af-explode-mark--bottom .af-explode-mark-name{top:calc(100% + 6px);left:-1px}
.af-explode-mark--top .af-explode-mark-name{bottom:calc(100% + 6px);left:-1px}
.af-explode-mark--left .af-explode-mark-name{right:calc(100% + 10px);top:0;translate:0 -50%}
.af-explode-mark--right .af-explode-mark-name{left:calc(100% + 10px);top:0;translate:0 -50%}

/* Tafel unten rechts (nur mit Weg; sonst für Screenreader): Nummern als Segmente, die sich mit dem Weg füllen (--af-s),
   darunter Titel, Text und Teile – alle Schritte und die Einleitung übereinander in einer Zelle, nur der aktuelle sichtbar,
   die Tafel springt nicht */
.af-explode-info:not(.af-is-live){position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.af-explode-info.af-is-live{position:absolute;left:0;right:0;bottom:clamp(20px,2.6vw,36px);z-index:2;display:flex;justify-content:flex-end;pointer-events:none}
.af-explode-panel{display:grid;grid-template-columns:minmax(0,1fr);width:clamp(min(100%,320px),36%,400px)}
.af-explode-intro{grid-column:1;grid-row:2 / span 3;padding-top:4px}
.af-explode-steps{display:grid;grid-column:1;grid-row:1 / span 4;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));grid-template-rows:subgrid;column-gap:10px;margin:0;padding:0;list-style:none}
.af-explode-step{display:grid;grid-column:1 / -1;grid-row:1 / span 4;grid-template-columns:subgrid;grid-template-rows:subgrid}
.af-explode-num{grid-column:calc(var(--i) + 1);grid-row:1;position:relative;display:block;width:100%;margin:0;padding:14px 0 12px;border:0;background:none;text-align:left;font:inherit;font-size:12px;font-weight:500;line-height:1.3;letter-spacing:.16em;color:var(--fg-3);font-variant-numeric:tabular-nums lining-nums;transition:color .5s var(--af-ease);pointer-events:auto;-webkit-tap-highlight-color:transparent}
button.af-explode-num{cursor:pointer}
button.af-explode-num:hover{color:var(--fg-2)}
.af-explode-num::before,.af-explode-num::after{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--hair-2)}
.af-explode-num::after{background:var(--accent);transform:scaleX(clamp(0,calc(var(--af-s,0) - var(--i,0)),1));transform-origin:0 50%}
.af-explode-step.af-is-on .af-explode-num{color:var(--accent)}
.af-explode-title,.af-explode-text,.af-explode-parts{grid-column:1 / -1;margin:0;white-space:normal}
.af-explode-title{grid-row:2;margin-top:2px;font-size:clamp(20px,1.6vw,24px);font-weight:300;line-height:1.2;letter-spacing:-.015em;color:var(--fg)}
.af-explode-text{grid-row:3;padding-top:8px;font-size:15px;line-height:1.55;color:var(--fg-2);text-shadow:var(--text-on-image)}
.af-explode-parts{grid-row:4;padding-top:10px;font-size:11px;font-weight:500;line-height:1.4;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3)}
.af-explode-intro .af-explode-title,.af-explode-intro .af-explode-text{grid-row:auto}
.af-explode-info.af-is-live :is(.af-explode-intro,.af-explode-step) :is(.af-explode-title,.af-explode-text,.af-explode-parts){opacity:0;transition:opacity .2s var(--af-ease)}
.af-explode-info.af-is-live :is(.af-explode-intro,.af-explode-step).af-is-on :is(.af-explode-title,.af-explode-text,.af-explode-parts){opacity:1;transition:opacity .5s var(--af-ease) .2s}
/* Unter 1180 px Fensterbreite rücken die Teile so eng, dass Namen und Linien einander kreuzten: dann nur die Punkte – die Namen
   stehen in der Tafel */
@container (max-width:1179px){
  .af-explode-mark-name{display:none}
  .af-explode-mark::after{display:none}
}
@media (max-width:760px){
  /* Handy: die Tafel über die ganze Breite, über der Bildunterschrift */
  .af-explode-info.af-is-live{bottom:calc(clamp(20px,2.6vw,36px) + 44px)}
  .af-explode-panel{width:100%}
  .af-explode-title{font-size:20px}
  .af-explode-text{font-size:14px}
}

/* --- Hero -------------------------------------------------------------------- */
.af-hero{position:relative;z-index:var(--layer-content);min-height:100vh;min-height:100svh;display:flex;align-items:stretch;padding-top:calc(var(--header-h) + 56px);padding-bottom:clamp(24px,3.5vh,40px);isolation:isolate}
.af-hero-scrim{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(90deg,var(--shade-scrim) 0%,color-mix(in srgb,var(--shade-scrim) 87%,transparent) 30%,color-mix(in srgb,var(--shade-scrim) 22%,transparent) 56%,transparent 74%),
  linear-gradient(180deg,color-mix(in srgb,var(--shade-scrim) 61%,transparent) 0%,transparent 18%,transparent 70%,color-mix(in srgb,var(--shade-scrim) 87%,transparent) 100%)}
/* Auslauf unter dem Hero: setzt die Abdunklung fort, während das nächste Band weich einblendet – keine Kante */
.af-hero-scrim::after{content:"";position:absolute;left:0;right:0;top:100%;height:var(--af-fade);pointer-events:none;background:
  linear-gradient(90deg,var(--shade-scrim) 0%,color-mix(in srgb,var(--shade-scrim) 87%,transparent) 30%,color-mix(in srgb,var(--shade-scrim) 22%,transparent) 56%,transparent 74%),
  color-mix(in srgb,var(--shade-scrim) 87%,transparent);-webkit-mask-image:linear-gradient(180deg,#000,transparent);mask-image:linear-gradient(180deg,#000,transparent)}
.af-hero-inner{display:flex;flex-direction:column;justify-content:flex-end;gap:clamp(44px,7vh,84px)}
.af-hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:26px;max-width:min(820px,56vw);transform:translate3d(0,calc(var(--af-hp,0) * -80px),0);opacity:calc(1 - var(--af-hp,0) * .9);will-change:transform}
.af-hero-copy .af-label{color:var(--fg-2)}
.af-hero-copy .af-lede{max-width:27em}
.af-hero-title{font-weight:200;line-height:.92;letter-spacing:-.05em}
/* Zeilen, die beim Laden aus einer Fuge aufsteigen; Innenabstand gibt Ober- und Unterlängen Raum */
.af-line{display:block;overflow:hidden;padding:.1em .08em .16em;margin:-.1em -.08em -.16em}
.af-line-in{display:block}
.af-hero-kicker{margin-bottom:.06em;font-size:clamp(28px,2.9vw,42px);font-weight:300;line-height:1.1;letter-spacing:-.02em;color:var(--fg-3)}
.af-hero-main{font-size:clamp(62px,8.4vw,120px);color:var(--fg)}
.af-actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px 36px;margin-top:8px}
@media (prefers-reduced-motion:no-preference){
  .af-hero-label,.af-hero-lede,.af-hero .af-actions{animation:af-rise 1.2s var(--af-ease) var(--af-intro-d,0s) both}
  .af-hero-title .af-line-in{animation:af-line-up 1.5s cubic-bezier(.19,1,.22,1) var(--af-intro-d,0s) both}
  .af-hero-kicker .af-line-in{animation-delay:calc(var(--af-intro-d,0s) + .12s)}
  .af-hero-main .af-line-in{animation-delay:calc(var(--af-intro-d,0s) + .26s)}
  .af-hero-lede{animation-delay:calc(var(--af-intro-d,0s) + .5s)}
  .af-hero .af-actions{animation-delay:calc(var(--af-intro-d,0s) + .62s)}
  .af-hero .af-hero-index{animation:af-rise 1.2s var(--af-ease) calc(var(--af-intro-d,0s) + .8s) both}
  /* backwards statt both: Eine stehen bleibende Deckkraft-Animation macht die Kopfzeile zur Grenze für backdrop-filter –
     der Weichzeichner dahinter sähe dann nur sich selbst, Text unter Logo und Menü stünde scharf */
  .af-header{animation:af-fade 1s var(--af-ease) calc(var(--af-intro-d,0s) + .3s) backwards}
}
@keyframes af-line-up{from{transform:translate3d(0,112%,0)}}
@media (max-width:1080px){.af-hero-copy{max-width:min(720px,72vw)}}
@media (max-width:760px){
  .af-hero{min-height:min(100svh,860px);padding-bottom:20px}
  .af-hero-copy{max-width:none;gap:22px}
  .af-hero-kicker{font-size:26px}
  .af-hero-main{font-size:clamp(44px,14.2vw,84px)}
  /* Im Hochformat steht der Text auf dem Lautsprecher: Verlauf schon ab dem Label, Schrift mit leichtem Schatten */
  .af-hero-scrim{background:linear-gradient(180deg,color-mix(in srgb,var(--shade-scrim) 56%,transparent) 0%,color-mix(in srgb,var(--shade-scrim) 14%,transparent) 14%,color-mix(in srgb,var(--shade-scrim) 46%,transparent) 26%,color-mix(in srgb,var(--shade-scrim) 80%,transparent) 48%,var(--shade-scrim) 72%,var(--shade-scrim) 100%)}
  .af-hero-copy .af-label,.af-hero-kicker,.af-hero-main{text-shadow:var(--text-on-image)}
  .af-actions .af-btn{flex:1 1 100%}
}

/* --- HeroIndex ---------------------------------------------------------------- */
.af-hero-index-wrap{container-type:inline-size}
.af-hero-index{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--hair-image)}
.af-hero .af-hero-index-wrap{opacity:calc(1 - var(--af-hp,0) * 1.6);transform:translate3d(0,calc(var(--af-hp,0) * -30px),0)}
/* Aufgelöst (af-hero--past): keine Klicks auf unsichtbare Links; kommt die Tastatur hinein, steht alles wieder da */
.af-hero--past :is(.af-hero-copy,.af-hero-index-wrap){pointer-events:none}
.af-hero:has(:focus-visible) :is(.af-hero-copy,.af-hero-index-wrap){opacity:1;transform:none;pointer-events:auto}
.af-hero-index a{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:6px 14px;padding:20px 24px 2px 0;color:var(--fg-2)}
/* Champagnerlinie wächst beim Überfahren über dem Eintrag */
.af-hero-index a::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--af-ease)}
.af-hero-index a:hover::before,.af-hero-index a:focus-visible::before{transform:scaleX(1)}
.af-hero-index a+a{padding-left:24px;border-left:1px solid var(--hair)}
.af-hi-name{font-size:17px;line-height:1.4;color:var(--fg)}
.af-hi-meta{font-size:14px;line-height:1.4;color:var(--fg-3);font-variant-numeric:tabular-nums;transition:color .35s var(--af-ease)}
.af-hero-index .af-icon{justify-self:end;opacity:.55;transition:transform .35s var(--af-ease),opacity .35s var(--af-ease)}
.af-hero-index a:hover .af-icon{transform:translateX(4px);opacity:1}
.af-hero-index a:hover .af-hi-meta{color:var(--fg-2)}
.af-hi-chips{display:inline-flex;align-items:center;gap:8px}
/* Ausführungen als runde Lackproben mit Glanzpunkt – nebeneinander, mit Abstand */
.af-hi-chips i{display:block;width:11px;height:11px;border-radius:50%;box-shadow:0 0 0 1px var(--hair-image),0 1px 3px #00000080;transition:transform .35s var(--af-ease)}
.af-hero-index a:hover .af-hi-chips i{transform:translateY(-1px)}
.af-hero-index a:hover .af-hi-chips i:nth-child(2){transition-delay:.04s}
.af-hero-index a:hover .af-hi-chips i:nth-child(3){transition-delay:.08s}
.af-chip--silver{background:radial-gradient(circle at 34% 30%,#fff 0,var(--finish-silver-metal-2) 22%,var(--finish-silver-metal-1) 70%,var(--finish-silver-base-3) 100%)}
.af-chip--blue{background:radial-gradient(circle at 34% 30%,color-mix(in srgb,var(--finish-blue-lacquer-2) 55%,#fff) 0,var(--finish-blue-lacquer-2) 24%,var(--finish-blue-lacquer-1) 62%,var(--finish-blue-lacquer-3) 100%)}
.af-chip--red{background:radial-gradient(circle at 34% 30%,color-mix(in srgb,var(--finish-red-lacquer-2) 55%,#fff) 0,var(--finish-red-lacquer-2) 24%,var(--finish-red-lacquer-1) 62%,var(--finish-red-lacquer-3) 100%)}
@container (max-width:960px){
  .af-hero-index{grid-template-columns:repeat(2,minmax(0,1fr))}
  .af-hero-index a:nth-child(3){padding-left:0;border-left:0}
  .af-hero-index a:nth-child(n+3){border-top:1px solid var(--hair);margin-top:18px}
}
@container (max-width:600px){
  .af-hero-index a{grid-template-columns:1fr;gap:2px}
  .af-hero-index a,.af-hero-index a+a{padding:16px 12px 2px 0}
  .af-hero-index a+a:nth-child(even){padding-left:14px}
  .af-hi-name{font-size:15px}
  .af-hi-meta{font-size:13px}
  .af-hero-index .af-icon{display:none}
}

/* --- Ausführungs-Muster (Chip) ------------------------------------------------- */

/* --- Scrollweg mit stehendem Rahmen (Bauplan, Showroom; useScrollRun in bundle.js) ---------------------------------
   Der Rahmen klebt, während man --n Schritte scrollt (je 26svh, wie die Klang-Bühne). Er beginnt oben am Band (negativer
   Rand in Höhe des Band-Innenabstands) – der Sprung auf das Band landet so genau dort, wo alles stehen bleibt.
   split: der Kopf scrollt davon (Handy). static: ohne Scrollweg (passt nicht, reduzierte Bewegung, ohne Script). */
.af-run{--af-run:calc(var(--n,3) * 26svh);position:relative;margin-top:calc(-1 * var(--af-run-pull,var(--af-band-pad)))}
.af-run::after{content:"";display:block;height:var(--af-run)}
.af-band--joined>.af-container>.af-run,.af-band--joined>.af-container>.af-config-wrap--scene .af-config-run{--af-run-pull:calc(var(--af-band-pad) * .6)}
.af-run-frame{position:sticky;top:var(--af-run-top,0px);min-height:calc(100svh + var(--af-run-lead,0px));display:flex;flex-direction:column;justify-content:center;padding:calc(var(--header-h) + clamp(12px,3vh,40px)) 0 clamp(24px,4vh,48px)}
.af-run--split .af-run-frame{justify-content:flex-start}
/* Anker (#serie-…) als erstes Kind des Laufs: der Sprung landet dort, wo der Rahmen steht. Ohne Scrollweg normal unter der Kopfzeile */
.af-run:not(.af-run--static)>.af-anchor{scroll-margin-top:calc(-1 * var(--header-h))}
.af-run--static{margin-top:0}
/* Bauplan mit Scrollweg auf breiten Bildschirmen: der Inhalt sitzt unten im stehenden Rahmen statt mittig – sonst lag beim
   Übergang zum Showroom der freie Rest des Rahmens (rund 100 px) zusätzlich zwischen den Begriffen und der Bühne */
@media (min-width:1100px) and (min-height:600px){.af-run:not(.af-run--split):not(.af-run--static)>.af-bp-frame.af-run-frame{justify-content:flex-end;padding-bottom:clamp(32px,6vh,64px)}}
.af-run--static::after{display:none}
.af-run--static .af-run-frame{position:relative;top:auto;min-height:0;padding:0;display:block}
@media (scripting:none),(prefers-reduced-motion:reduce){
  .af-run:not(.af-run--static)>.af-anchor{scroll-margin-top:0}
  .af-run{margin-top:0}
  .af-run::after{display:none}
  .af-run-frame{position:relative;top:auto;min-height:0;padding:0;display:block}
}

/* --- Blueprint (Bauplan) ------------------------------------------------------------- */
.af-bp{container:af-bp / inline-size}
.af-bp-top{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap);align-items:center}
.af-bp-intro{grid-column:1 / span 6;display:flex;flex-direction:column;align-items:flex-start;gap:26px}
.af-bp-intro .af-h2{max-width:12em}
.af-bp-figure{grid-column:7 / -1;position:relative;isolation:isolate;margin:0}
.af-bp-figure::before{content:"";position:absolute;inset:-12% 0;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,color-mix(in srgb,var(--ink) 78%,transparent),transparent)}
.af-bp-svg{display:block;width:100%;height:auto;max-height:clamp(280px,44vh,480px);overflow:visible}
.af-bp-part{fill:none;stroke:var(--fg-3);stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;opacity:.62;transition:opacity .6s var(--af-ease),stroke .6s var(--af-ease),filter .6s var(--af-ease)}
.af-bp-part.af-is-on{stroke:var(--accent);opacity:1;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--accent) 45%,transparent))}
.af-bp-hatch{stroke:none;opacity:.5}
.af-bp-svg pattern line{stroke:var(--fg-3);stroke-width:.8}
.af-bp--build.af-is-on .af-bp-hatch{opacity:1}
.af-bp-dash{stroke-dasharray:3 4}
.af-bp-axis{stroke-dasharray:12 4 2 4;opacity:.7}
.af-bp-ext{stroke-dasharray:2 3;opacity:.6}
.af-bp-dim{fill:var(--fg-3);stroke:none;font-size:11px;font-weight:500;letter-spacing:.16em}
.af-bp--precision.af-is-on .af-bp-dim{fill:var(--accent)}
.af-bp-wave{opacity:.8}
.af-bp-mark{cursor:pointer}
/* Auf Touch-Geräten sind die Marken zu klein zum Tippen – getippt wird der Begriff */
@media (pointer:coarse){.af-bp-mark{pointer-events:none}}
.af-bp-mark circle{fill:var(--ink);stroke:var(--hair-strong);stroke-width:1;transition:stroke .4s var(--af-ease),fill .4s var(--af-ease)}
.af-bp-mark text{fill:var(--fg-2);font-size:9px;font-weight:500;letter-spacing:.06em;font-variant-numeric:tabular-nums;pointer-events:none;transition:fill .4s var(--af-ease)}
.af-bp-mark.af-is-on circle{stroke:var(--accent);fill:color-mix(in srgb,var(--accent) 22%,var(--ink))}
.af-bp-mark.af-is-on text{fill:var(--fg)}
.af-bp-note{position:absolute;right:0;bottom:-6px;font-size:12px;line-height:1.3;letter-spacing:.04em;color:var(--fg-3)}
/* Die vier Begriffe als Reihe: Haarlinie, Nummer, Titel, Text – der aktuelle hell mit accent-Linie */
.af-bp-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(24px,3.2vw,var(--column-gap));margin:clamp(32px,5vh,64px) 0 0;padding:0;list-style:none}
.af-bp-item{position:relative;display:flex;flex-direction:column;gap:14px;padding-top:26px}
.af-bp-item::before,.af-bp-item::after{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--hair-2)}
.af-bp-item::after{background:var(--accent);transform:scaleX(0);transform-origin:0 50%;transition:transform .9s var(--af-ease)}
.af-bp-item.af-is-on::after{transform:scaleX(1)}
/* Mit Scrollweg wächst die Linie mit dem Weg wie bei den Kapiteln der Klang-Bühne: vorbei voll, aktuell anteilig, danach leer */
.af-bp.af-run:not(.af-run--static) .af-bp-item::after{transform:scaleX(clamp(0,calc(var(--af-u,0) * var(--n,4) - var(--i,0)),1));transition:none}
.af-bp-num{font-size:12px;font-weight:500;line-height:1.3;letter-spacing:.16em;color:var(--fg-3);font-variant-numeric:tabular-nums lining-nums;transition:color .5s var(--af-ease)}
.af-bp-item.af-is-on .af-bp-num{color:var(--accent)}
.af-bp-title{margin:0;font-size:clamp(22px,1.9vw,28px);font-weight:300;line-height:1.2;letter-spacing:-.015em;color:var(--fg);transition:color .6s var(--af-ease)}
.af-bp-text{margin:0;max-width:24em;color:var(--fg-2);transition:color .6s var(--af-ease)}
/* Mit Scrollweg sind Begriffe und Marken Knöpfe (Sprung zum Begriff) */
.af-bp.af-run:not(.af-run--static) .af-bp-item{cursor:pointer}
/* Titel als Knopf (mit Scrollweg, für die Tastatur): sieht aus wie der Titel, der Fokusrahmen kommt vom Design-System */
.af-bp-jump{padding:0;margin:0;background:none;border:0;font:inherit;letter-spacing:inherit;line-height:inherit;text-align:inherit;color:inherit;cursor:inherit}
/* Handy (split): die Zeichnung niedriger, damit Zeichnung und vier Begriffe unter der Kopfzeile zusammen stehen bleiben
   (bei 844 px Höhe: 64 + 89 + 253 + 25 + 392 + 34 px) */
.af-run--split .af-bp-svg{max-height:clamp(200px,30vh,320px)}
.af-run--split .af-bp-list{margin-top:clamp(20px,3vh,40px)}
/* Zeichnen beim ersten Erscheinen: Kontur, dann Chassis, Konstruktion, zuletzt Maße */
@media (prefers-reduced-motion:no-preference){
  .af-bp--draw .af-bp-part :is(path,circle,rect,line):not(.af-bp-hatch){stroke-dasharray:1;stroke-dashoffset:1}
  .af-bp--draw .af-bp-part .af-bp-dash,.af-bp--draw .af-bp-part .af-bp-axis,.af-bp--draw .af-bp-part .af-bp-ext{stroke-dasharray:none;stroke-dashoffset:0;opacity:0}
  .af-bp--draw .af-bp-hatch,.af-bp--draw .af-bp-dim,.af-bp--draw .af-bp-mark{opacity:0}
  .af-bp--draw.af-is-in .af-bp-part :is(path,circle,rect,line):not(.af-bp-hatch){stroke-dashoffset:0;transition:stroke-dashoffset 1.6s cubic-bezier(.5,.1,.2,1) var(--af-bp-d,0s)}
  .af-bp--draw.af-is-in .af-bp-part .af-bp-dash{stroke-dasharray:3 4;opacity:1;transition:opacity 1s var(--af-ease) var(--af-bp-d,0s)}
  .af-bp--draw.af-is-in .af-bp-part .af-bp-axis{stroke-dasharray:12 4 2 4;opacity:.7;transition:opacity 1s var(--af-ease) var(--af-bp-d,0s)}
  .af-bp--draw.af-is-in .af-bp-part .af-bp-ext{stroke-dasharray:2 3;opacity:.6;transition:opacity 1s var(--af-ease) var(--af-bp-d,0s)}
  .af-bp--draw.af-is-in .af-bp-hatch{opacity:.5;transition:opacity 1.2s var(--af-ease) 1.4s}
  .af-bp--draw.af-is-in .af-bp-dim{opacity:1;transition:opacity 1s var(--af-ease) 2s}
  .af-bp--draw.af-is-in .af-bp-mark{opacity:1;transition:opacity .8s var(--af-ease) 2.2s}
  .af-bp--acoustic{--af-bp-d:.45s}
  .af-bp--build{--af-bp-d:.9s}
  .af-bp--precision{--af-bp-d:1.3s}
  /* Schall: die Bögen laufen nach außen, solange Akustik gewählt ist */
  .af-bp--acoustic.af-is-on .af-bp-wave{animation:af-bp-wave 1.8s ease-out infinite}
  .af-bp--acoustic.af-is-on .af-bp-wave:nth-child(2){animation-delay:.3s}
  .af-bp--acoustic.af-is-on .af-bp-wave:nth-child(3){animation-delay:.6s}
  .af-bp-mark.af-is-on circle{animation:af-bp-ping 2.4s var(--af-ease) infinite}
}
@keyframes af-bp-wave{0%{opacity:0}25%{opacity:1}100%{opacity:0}}
@keyframes af-bp-ping{0%{stroke-width:1}40%{stroke-width:3}100%{stroke-width:1}}
/* Zurücktreten über die Farbe (fg-3, 7.4:1), nicht über Deckkraft – nur, solange ein Begriff aktiv ist; sonst stehen alle hell */
.af-bp:not(.af-bp--static) .af-bp-list:has(.af-is-on) .af-bp-item:not(.af-is-on) :is(.af-bp-title,.af-bp-text){color:var(--fg-3)}
@container af-bp (max-width:900px){
  .af-bp-top{grid-template-columns:1fr;row-gap:48px}
  .af-bp-intro,.af-bp-figure{grid-column:1 / -1}
  .af-bp-list{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}
}
@container af-bp (max-width:560px){
  .af-bp-top{row-gap:32px}
  .af-bp-part{stroke-width:1.8}
  /* Handy: Begriff links, Satz rechts – vier kompakte Zeilen statt vier Blöcke */
  .af-bp-list{grid-template-columns:1fr;row-gap:0;margin-top:32px}
  .af-bp-item{display:grid;grid-template-columns:minmax(0,8.5em) minmax(0,1fr);column-gap:16px;row-gap:4px;align-items:start;padding:16px 0 18px}
  .af-bp-num{grid-column:1;grid-row:1}
  .af-bp-title{grid-column:1;grid-row:2;font-size:19px}
  .af-bp-text{grid-column:2;grid-row:1 / span 2;font-size:15px;line-height:1.55}
  .af-bp-note{position:static;margin-top:12px}
}
/* Handy (mit Script und Bewegung): die Begriffe als Segmente unter der Zeichnung – wie die Kapitel der SoundStage. Haarlinie,
   darauf die accent-Linie (mit Scrollweg wächst sie mit dem Weg), darunter die Nummer – Tippen darauf springt zum Begriff.
   Titel und Text aller Begriffe liegen übereinander in einer Zelle (subgrid), nur der aktive ist zu sehen, vor dem ersten
   Wechsel der erste. So passen Zeichnung und Begriffe auf einen Bildschirm, und der Bauplan steht auch auf dem Handy, während
   man scrollt. In der Zeichnung bleiben die Marken als Punkte (die Nummer trägt das Segment), die Maße stehen größer. Nur mit
   laufendem Scrollweg: ohne (Rahmen zu hoch, Vorschau in Schleife, ohne Script, reduzierte Bewegung) bleibt die Liste, deren
   Text immer dasteht. */
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){
  @container af-bp (max-width:560px){
    .af-bp.af-run:not(.af-run--static):not(.af-bp--static) .af-bp-list{grid-template-columns:repeat(var(--n,4),minmax(0,1fr));grid-template-rows:auto auto auto;column-gap:12px;row-gap:0;margin-top:24px}
    .af-bp.af-run:not(.af-run--static):not(.af-bp--static) .af-bp-item{grid-column:1 / -1;grid-row:1 / span 3;display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid;gap:0;padding:0;pointer-events:none}
    .af-bp.af-run:not(.af-run--static):not(.af-bp--static) .af-bp-item::before,.af-bp.af-run:not(.af-run--static):not(.af-bp--static) .af-bp-item::after{content:none}
    .af-bp.af-run:not(.af-run--static):not(.af-bp--static) .af-bp-num{grid-column:calc(var(--i) + 1);grid-row:1;position:relative;padding:16px 0 14px;pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent}
    .af-bp.af-run:not(.af-run--static):not(.af-bp--static) .af-bp-num::before,.af-bp.af-run:not(.af-run--static):not(.af-bp--static) .af-bp-num::after{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--hair-2)}
    .af-bp.af-run:not(.af-run--static):not(.af-bp--static) .af-bp-num::after{background:var(--accent);transform:scaleX(clamp(0,calc(var(--af-u,0) * var(--n,4) - var(--i,0)),1));transform-origin:0 50%}
    .af-bp.af-run:not(.af-run--static):not(.af-bp--static) .af-bp-title{grid-column:1 / -1;grid-row:2;margin-top:4px;font-size:24px;transition:opacity .6s var(--af-ease)}
    .af-bp.af-run:not(.af-run--static):not(.af-bp--static) .af-bp-text{grid-column:1 / -1;grid-row:3;max-width:none;padding-top:10px;font-size:15px;line-height:1.6;transition:opacity .6s var(--af-ease)}
    .af-bp.af-run:not(.af-run--static):not(.af-bp--static) .af-bp-item:not(.af-is-on) :is(.af-bp-title,.af-bp-text){opacity:0;transition:opacity .2s var(--af-ease)}
    .af-bp.af-run:not(.af-run--static):not(.af-bp--static) .af-bp-item.af-is-on :is(.af-bp-title,.af-bp-text){transition:opacity .5s var(--af-ease) .2s}
    .af-bp.af-run:not(.af-run--static):not(.af-bp--static) .af-bp-list:not(:has(.af-is-on)) .af-bp-item:first-child :is(.af-bp-title,.af-bp-text){opacity:1}
    .af-bp.af-run:not(.af-run--static):not(.af-bp--static) .af-bp-list:has(.af-is-on) .af-bp-item:not(.af-is-on) :is(.af-bp-title,.af-bp-text){color:var(--fg)}
    .af-bp.af-run:not(.af-run--static):not(.af-bp--static) .af-bp-mark text{display:none}
    .af-bp.af-run:not(.af-run--static):not(.af-bp--static) .af-bp-dim{font-size:18px}
    /* Mit Scrollweg: Einleitung, Zeichnung und Begriffe direkt im Rahmen (die Hülle af-bp-top tritt zurück) – die Einleitung
       oben, Zeichnung und Begriffe mittig im übrigen Platz. Scrollt die Einleitung davon (split), stehen sie so mittig unter der
       Kopfzeile statt oben mit leerem Rest darunter; die Zeichnung darf dann bis 300 px hoch werden */
    .af-bp.af-run:not(.af-run--static):not(.af-bp--static) .af-bp-frame{gap:32px}
    .af-bp.af-run:not(.af-run--static):not(.af-bp--static) .af-bp-top{display:contents}
    .af-bp.af-run:not(.af-run--static):not(.af-bp--static) .af-bp-figure{margin-top:auto}
    .af-bp.af-run:not(.af-run--static):not(.af-bp--static) .af-bp-list{margin-top:0;margin-bottom:auto}
    .af-bp.af-run--split:not(.af-bp--static) .af-bp-svg{max-height:clamp(180px,100svh - 360px,300px)}
  }
}

/* --- SoundStage (Klang-Bühne) ------------------------------------------------------- */
/* Der Rahmen bleibt stehen, während man durch die Kapitel scrollt; darunter liegt der Weg dafür (run).
   Mit Überschrift (head) steht sie mit im Rahmen: Überschrift, Welle und Kapitel sind zusammen im Bild, die Welle nimmt
   den Platz, der übrig bleibt. Passt das nicht (Handy, niedrige Fenster), scrollt die Überschrift davon (af-stage--split). */
.af-stage{--af-stage-run:calc(var(--n,3) * 26svh);position:relative;margin-top:clamp(8px,2vw,24px);container:af-stage / inline-size}
.af-stage::after{content:"";display:block;height:var(--af-stage-run)}
.af-stage-frame{position:sticky;top:var(--af-stage-top,0px);min-height:calc(100svh + var(--af-stage-lead,0px));display:flex;flex-direction:column;justify-content:center;gap:clamp(28px,4.6vh,64px);padding:calc(var(--header-h) * .6) 0 clamp(24px,4vh,48px)}
/* Mit Überschrift beginnt der Rahmen oben am Band – der Sprung auf das Band landet so genau dort, wo alles stehen bleibt */
.af-stage--head{margin-top:calc(-1 * var(--af-band-pad))}
.af-stage--head .af-stage-frame{padding-top:calc(var(--header-h) + clamp(12px,3vh,40px))}
/* Seiten mit scroll-padding-top (Kopfhöhe): der Sprung auf das Band soll trotzdem am Rahmen landen – zu weit ist harmlos, er steht ja */
.af-band:has(> .af-container > :is(.af-stage--head,.af-run):first-child),.af-band:has(> .af-container > .af-config-wrap--scene:first-child .af-config-run.af-run:not(.af-run--static)){scroll-margin-top:calc(-1 * var(--header-h))}
.af-stage-head .af-head{margin-bottom:0}
.af-stage--split .af-stage-frame{justify-content:flex-start}
/* Die Welle wächst nur, wo Platz ist: 410 px bleiben für die zwei Abstände, die Kapitel mit dem längsten Text (bei 390 px
   Breite) und den Innenabstand unten – auf niedrigen Handys steht sie so still, statt beim Kapitelwechsel mit dem Text zu atmen */
.af-stage--split .af-stage-scope{margin-bottom:auto;max-height:clamp(180px,min(44vh,100svh - 410px),400px)}
/* Das Messfeld: läuft über die ganze Fensterbreite, Raster und Nulllinie verlieren sich zu den Rändern */
.af-stage-scope{position:relative;width:calc(100vw - var(--af-sbw,0px));margin-left:calc(50% - 50vw + var(--af-sbw,0px) / 2);flex:1 0 0;min-height:clamp(130px,20vh,200px);max-height:clamp(220px,42vh,440px)}
.af-stage-scope::before{content:"";position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(var(--hair),var(--hair)) 0 50% / 100% 1px no-repeat,
  repeating-linear-gradient(90deg,color-mix(in srgb,var(--hair) 55%,transparent) 0 1px,transparent 1px calc(100% / 24)),
  repeating-linear-gradient(180deg,color-mix(in srgb,var(--hair) 40%,transparent) 0 1px,transparent 1px 25%);
  -webkit-mask-image:radial-gradient(ellipse 58% 64% at 50% 50%,#000 30%,transparent 100%);mask-image:radial-gradient(ellipse 58% 64% at 50% 50%,#000 30%,transparent 100%)}
.af-stage-still,.af-stage-canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.af-stage-still{overflow:visible;transition:opacity 1s var(--af-ease)}
.af-stage-still path{fill:none;stroke-width:1.5;vector-effect:non-scaling-stroke}
.af-stage-still .af-stage-ghost{opacity:.28}
.af-stage-canvas{opacity:0;transition:opacity 1.2s var(--af-ease)}
.af-stage.af-is-live .af-stage-canvas{opacity:1}
.af-stage.af-is-live .af-stage-still{opacity:0}
/* Kapitel: Haarlinie oben, darauf wächst beim Scrollen eine accent-Linie; das aktuelle steht hell, die anderen treten zurück */
.af-stage-chapters{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:0 clamp(24px,3.2vw,var(--column-gap));margin:0;padding:0;list-style:none}
.af-stage-chapter{--af-f:clamp(0,calc(var(--af-u,0) * var(--n,3) - var(--i,0)),1);position:relative;display:flex;flex-direction:column;gap:14px;padding-top:26px}
.af-stage-chapter::before,.af-stage-chapter::after{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--hair-2)}
.af-stage-chapter::after{background:var(--accent);transform:scaleX(var(--af-f));transform-origin:0 50%}
/* Das aktuelle steht hell, die anderen treten über die Farbe zurück (fg-3, 7.4:1) – nur, solange die Bühne lebt */
.af-stage.af-is-live .af-stage-chapter:not([aria-current="true"]) :is(.af-stage-title,.af-stage-text p){color:var(--fg-3)}
.af-stage.af-is-live .af-stage-chapter:not([aria-current="true"]):hover .af-stage-title{color:var(--fg-2)}
/* Sprung zum Kapitel: der Titel ist ein Knopf, seine Fläche reicht über das ganze Kapitel */
.af-stage-jump{padding:0;margin:0;background:none;border:0;font:inherit;letter-spacing:inherit;text-align:inherit;color:inherit;cursor:pointer}
.af-stage-jump::after{content:"";position:absolute;inset:0}
.af-stage-chapter[aria-current="true"] .af-stage-jump{cursor:default}
.af-stage-num{font-size:12px;font-weight:500;line-height:1.3;letter-spacing:.16em;color:var(--fg-3);font-variant-numeric:tabular-nums lining-nums;transition:color .6s var(--af-ease)}
.af-stage-chapter[aria-current="true"] .af-stage-num{color:var(--accent)}
.af-stage-title{margin:0;font-size:clamp(22px,1.9vw,28px);font-weight:300;line-height:1.2;letter-spacing:-.015em;color:var(--fg);transition:color .7s var(--af-ease)}
.af-stage-text{display:grid;grid-template-rows:1fr;transition:grid-template-rows .7s var(--af-ease)}
.af-stage-text p{min-height:0;overflow:hidden;margin:0;max-width:24em;color:var(--fg-2);transition:color .7s var(--af-ease)}
@container af-stage (max-width:760px){
  .af-stage-frame{gap:24px}
  .af-stage-scope{min-height:clamp(110px,16vh,180px);max-height:clamp(160px,34vh,300px)}
  .af-stage-chapters{grid-template-columns:1fr}
  .af-stage-chapter{gap:8px;padding:16px 0 14px}
  .af-stage-title{font-size:20px}
  .af-stage-text{grid-template-rows:0fr}
  .af-stage-chapter[aria-current="true"] .af-stage-text{grid-template-rows:1fr}
  .af-stage-text p{font-size:15px;line-height:1.6;padding-top:2px}
}
/* Handy (mit Script und Bewegung): Die Kapitel werden zu drei Segmenten unter der Welle – Haarlinie, darauf wächst die
   accent-Linie, darunter die Nummer (Tippen springt zum Kapitel). Titel und Text aller Kapitel liegen übereinander in einer
   Zelle (subgrid), nur das aktuelle ist zu sehen – der Bereich ist so hoch wie das längste Kapitel, beim Wechsel springt
   nichts, die Welle bleibt gleich groß und nimmt den Platz darüber. Ohne Script und bei reduzierter Bewegung stehen die
   Kapitel weiter untereinander und alle offen. */
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){
  @container af-stage (max-width:760px){
    .af-stage:not(.af-stage--static) .af-stage-scope{max-height:clamp(160px,42vh,360px)}
    .af-stage--split:not(.af-stage--static) .af-stage-scope{max-height:clamp(180px,min(50vh,100svh - 330px),400px)}
    .af-stage:not(.af-stage--static) .af-stage-chapters{grid-template-columns:repeat(var(--n,3),minmax(0,1fr));grid-template-rows:auto auto auto;column-gap:14px}
    .af-stage:not(.af-stage--static) .af-stage-chapter{grid-column:1 / -1;grid-row:1 / span 3;display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid;gap:0;padding:0;position:static}
    .af-stage:not(.af-stage--static) .af-stage-chapter::before,.af-stage:not(.af-stage--static) .af-stage-chapter::after{content:none}
    .af-stage:not(.af-stage--static) .af-stage-num{grid-column:calc(var(--i) + 1);grid-row:1;position:relative;padding:16px 0 14px}
    .af-stage:not(.af-stage--static) .af-stage-num::before,.af-stage:not(.af-stage--static) .af-stage-num::after{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--hair-2)}
    .af-stage:not(.af-stage--static) .af-stage-num::after{background:var(--accent);transform:scaleX(var(--af-f));transform-origin:0 50%}
    .af-stage.af-is-live .af-stage-num{cursor:pointer;-webkit-tap-highlight-color:transparent}
    .af-stage:not(.af-stage--static) .af-stage-title{grid-column:1 / -1;grid-row:2;margin-top:4px;font-size:24px;transition:opacity .6s var(--af-ease),color .7s var(--af-ease)}
    .af-stage:not(.af-stage--static) .af-stage-text{grid-column:1 / -1;grid-row:3;grid-template-rows:1fr;transition:opacity .6s var(--af-ease)}
    .af-stage:not(.af-stage--static) .af-stage-text p{padding-top:10px}
    /* Der Knopf deckt hier nicht das ganze Kapitel (das läge über allen dreien) – getippt wird die Nummer */
    .af-stage:not(.af-stage--static) .af-stage-jump::after{content:none}
    .af-stage:not(.af-stage--static) .af-stage-chapter:not([aria-current="true"]):not(:focus-within) :is(.af-stage-title,.af-stage-text){opacity:0;pointer-events:none;transition:opacity .2s var(--af-ease)}
    /* Wechsel: das alte Kapitel geht in .2 s, das neue kommt danach (.5 s) – nie zwei Texte übereinander */
    .af-stage:not(.af-stage--static) .af-stage-chapter[aria-current="true"] :is(.af-stage-title,.af-stage-text){transition:opacity .5s var(--af-ease) .2s,color .7s var(--af-ease)}
    /* Hat ein anderes Kapitel den Fokus (Tastatur), tritt das aktuelle so lange zurück – sonst lägen beide übereinander */
    .af-stage:not(.af-stage--static) .af-stage-chapters:has(.af-stage-chapter:not([aria-current="true"]):focus-within) .af-stage-chapter[aria-current="true"] :is(.af-stage-title,.af-stage-text){opacity:0}
    .af-stage.af-is-live .af-stage-chapter:not([aria-current="true"]) :is(.af-stage-title,.af-stage-text p){color:var(--fg)}
  }
}
/* Ruhig: ohne Script, bei reduzierter Bewegung, motion: false – oder als Vorschau in Schleife (auto) ohne Scrollweg */
.af-stage--static::after,.af-stage--auto::after{display:none}
.af-stage--static .af-stage-frame,.af-stage--auto .af-stage-frame{position:relative;min-height:0;padding:clamp(24px,4vw,48px) 0 0}
.af-stage--static .af-stage-scope,.af-stage--auto .af-stage-scope{flex:none;height:clamp(190px,32vh,360px)}
.af-stage--static.af-stage--head,.af-stage--auto.af-stage--head{margin-top:0}
.af-stage--static.af-stage--head .af-stage-frame,.af-stage--auto.af-stage--head .af-stage-frame{padding-top:0;gap:clamp(36px,5vw,64px)}
.af-stage--static .af-stage-chapter::after{transform:scaleX(0)}
.af-stage--static .af-stage-text{grid-template-rows:1fr!important}
@media (scripting:none),(prefers-reduced-motion:reduce){
  .af-stage::after{display:none}
  .af-stage-frame{position:relative;min-height:0;padding:clamp(24px,4vw,48px) 0 0}
  .af-stage-scope{flex:none;height:clamp(190px,32vh,360px)}
  .af-stage--head{margin-top:0}
  .af-stage--head .af-stage-frame{padding-top:0;gap:clamp(36px,5vw,64px)}
  .af-stage-chapter::after{transform:scaleX(0)}
  .af-stage-text{grid-template-rows:1fr!important}
}

/* --- FinishConfigurator: Showroom ------------------------------------------------
   Monitor, Hornspeaker und Subwoofer als 3D-Visualisierung nebeneinander – alle Bilder gleich hoch, also im
   echten Größenverhältnis und auf einer Standlinie. Die gewählte Serie steht im Licht (Lichtkegel, Lichtfleck
   am Boden), die anderen treten zurück. Darunter die Ausführungen als Materialproben; die Bilder blenden über. */
.af-config-wrap{container:af-config / inline-size}
/* Die Bühne misst sich an ihrer eigenen Breite (Container) – neben dem Bedienfeld oder über die ganze Breite.
   Seitlich bis 64 px Luft (in den Seitenrand) – sonst schnitte die Kante das Licht über dem äußeren Lautsprecher senkrecht ab */
.af-show{--af-show-room:min(var(--af-gutter),64px);position:relative;margin-inline:calc(-1 * var(--af-show-room));padding-top:clamp(8px,2cqw,28px);padding-inline:var(--af-show-room);overflow-x:clip;container-type:inline-size}
.af-show-head .af-head{margin-bottom:clamp(32px,4cqw,56px)}
.af-show-stage{--af-gap:clamp(6px,4.5cqw,64px);--af-h:min(520px,56vh,calc((100cqw - 2 * var(--af-gap)) * var(--af-ratio)));
  position:relative;display:flex;justify-content:center;align-items:flex-start;gap:var(--af-gap)}
.af-show-item{position:relative;display:flex;flex-direction:column;align-items:center;min-width:0;padding:0;background:none;border:0;color:inherit;text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.af-show-item:focus-visible{outline:none}
/* Der Knopf ist die ganze Bildfläche – der Fokusrahmen sitzt am Namen */
.af-show-item:focus-visible .af-show-name{outline:var(--af-focus);outline-offset:var(--af-focus-offset)}
.af-show-figure{position:relative;z-index:1;display:block;height:var(--af-h);width:calc(var(--af-h) * var(--af-ar))}
.af-show-imgs{position:absolute;inset:0;display:block;filter:brightness(var(--finish-dim)) saturate(.75);transition:filter 1s var(--af-ease)}
.af-show-item:hover .af-show-imgs{filter:brightness(var(--finish-hover)) saturate(.9)}
.af-show-item[aria-checked="true"] .af-show-imgs{filter:none}
.af-show-layer{position:absolute;inset:0;display:block;opacity:0;transition:opacity .9s var(--af-ease)}
.af-show-layer.af-is-on{opacity:1;z-index:1}
/* Lichtwechsel der Ausführung: Die neue Ebene steht sofort, eine Maske deckt sie in 1,1 s von links nach rechts auf; an ihrer
   Kante zieht ein Lichtstreif über den Lautsprecher (dieselbe Datei, aufgehellt, nur im schmalen Band – er folgt genau der Form,
   wie eine Softbox, die vorbeischwenkt). Die alte Ebene bleibt darunter stehen, bis der Streif durch ist */
.af-show-layer:not(.af-is-on){transition:opacity .35s var(--af-ease) 1s}
.af-show-layer.af-wipe-a,.af-show-layer.af-wipe-b{transition:none;-webkit-mask-image:linear-gradient(100deg,#000 47.5%,transparent 52.5%);mask-image:linear-gradient(100deg,#000 47.5%,transparent 52.5%);-webkit-mask-size:300% 100%;mask-size:300% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.af-show-layer.af-wipe-a{animation:af-wipe-a 1.1s cubic-bezier(.55,.1,.35,1) both}
.af-show-layer.af-wipe-b{animation:af-wipe-b 1.1s cubic-bezier(.55,.1,.35,1) both}
@keyframes af-wipe-a{from{-webkit-mask-position:100% 0;mask-position:100% 0}to{-webkit-mask-position:0 0;mask-position:0 0}}
@keyframes af-wipe-b{from{-webkit-mask-position:100% 0;mask-position:100% 0}to{-webkit-mask-position:0 0;mask-position:0 0}}
.af-show-glint{position:absolute;inset:0;display:block;pointer-events:none;mix-blend-mode:screen;filter:brightness(2.6) saturate(.5);-webkit-mask-image:linear-gradient(100deg,transparent 45%,#000 50%,transparent 55%);mask-image:linear-gradient(100deg,transparent 45%,#000 50%,transparent 55%);-webkit-mask-size:300% 100%;mask-size:300% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;animation:af-glint 1.1s cubic-bezier(.55,.1,.35,1) both}
.af-show-glint img,.af-show-glint picture{display:block;width:100%;height:100%}
@keyframes af-glint{from{-webkit-mask-position:100% 0;mask-position:100% 0;opacity:1}80%{opacity:1}to{-webkit-mask-position:0 0;mask-position:0 0;opacity:0}}
.af-show-layer img{display:block;width:100%;height:100%;user-select:none;-webkit-user-drag:none}
/* Licht von oben auf den gewählten Lautsprecher und ein warmer Fleck am Boden; oben läuft der Kegel weich aus (Maske) statt an der Kante des Kastens abzubrechen */
.af-show-beam{position:absolute;left:-70%;right:-70%;top:-20%;height:calc(var(--af-floor) + 30%);pointer-events:none;opacity:0;transition:opacity 1.1s var(--af-ease);-webkit-mask-image:linear-gradient(180deg,transparent,#000 32%);mask-image:linear-gradient(180deg,transparent,#000 32%);
  background:
    radial-gradient(34% 7% at 50% 92%,color-mix(in srgb,var(--spot) 16%,transparent),transparent),
    radial-gradient(24% 78% at 50% 0%,color-mix(in srgb,var(--spot) 10%,transparent),transparent)}
.af-show-item[aria-checked="true"] .af-show-beam{opacity:1}
.af-show.af-live .af-show-item[aria-checked="true"] .af-show-beam{animation:af-beam 7s ease-in-out infinite}
@keyframes af-beam{0%,100%{opacity:1}50%{opacity:.82}}
/* Lichtstreif über die Bühne, wenn die Ausführung wechselt */
.af-show-sweep{display:none;position:absolute;inset:0 -10%;z-index:2;pointer-events:none;background:linear-gradient(105deg,#ffffff00 42%,color-mix(in srgb,var(--spot) 9%,transparent) 50%,#ffffff00 58%);mix-blend-mode:screen;animation:af-show-sweep 1.5s var(--af-ease) both}
@keyframes af-show-sweep{from{transform:translate3d(-45%,0,0);opacity:1}to{transform:translate3d(45%,0,0);opacity:0}}

/* Bildunterschrift */
.af-show-cap{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:6px;max-width:100%;margin-top:clamp(14px,2cqw,26px);padding-inline:4px}
.af-show-index{font-size:12px;font-weight:500;line-height:1.3;letter-spacing:.16em;color:var(--fg-3);font-variant-numeric:tabular-nums lining-nums}
.af-show-name{position:relative;padding-bottom:8px;font-size:21px;font-weight:300;line-height:1.3;letter-spacing:-.015em;color:var(--fg-2);white-space:nowrap;transition:color .5s var(--af-ease)}
.af-show-name::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);transform:scaleX(0);transition:transform .7s var(--af-ease)}
.af-show-models{font-size:14px;line-height:1.5;color:var(--fg-3);font-variant-numeric:tabular-nums;transition:color .5s var(--af-ease)}
.af-show-item:hover .af-show-name,.af-show-item[aria-checked="true"] .af-show-name{color:var(--fg)}
.af-show-item[aria-checked="true"] .af-show-name::after{transform:scaleX(1)}
.af-show-item[aria-checked="true"] .af-show-models{color:var(--fg-2)}

/* Ausführungen: Materialproben mit Namen */
.af-swatches{display:flex;justify-content:center;flex-wrap:wrap;gap:12px clamp(20px,4cqw,56px);margin-top:clamp(36px,5cqw,64px);padding-top:clamp(28px,3.5cqw,40px);border-top:1px solid var(--hair)}
.af-swatch{display:flex;align-items:center;gap:14px;padding:6px 2px;background:none;border:0;color:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.af-swatch-chip{flex:none;width:26px;height:26px;border-radius:var(--radius-dot);box-shadow:0 0 0 1px var(--hair-image),0 2px 6px #00000099;transition:box-shadow .5s var(--af-ease),transform .5s var(--af-ease)}
.af-swatch:hover .af-swatch-chip{transform:translateY(-1px)}
.af-swatch[aria-checked="true"] .af-swatch-chip{box-shadow:0 0 0 3px var(--ink),0 0 0 4px var(--accent),0 2px 6px #00000099}
.af-swatch-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.af-swatch-name{font-size:16px;line-height:1.35;color:var(--fg-2);transition:color .5s var(--af-ease)}
.af-swatch-meta{font-size:13px;line-height:1.4;color:var(--fg-3)}
.af-swatch:hover .af-swatch-name,.af-swatch[aria-checked="true"] .af-swatch-name{color:var(--fg)}

.af-turn-img{position:absolute;left:0;top:0;display:block;max-width:none;user-select:none;-webkit-user-drag:none;pointer-events:none}
/* 360°: das gewählte Modell lässt sich ziehen; der Bilderbogen liegt deckungsgleich über dem Showroom-Bild */
.af-show-item[aria-checked="true"] .af-show-figure{cursor:grab;touch-action:pan-y}
.af-show-item[aria-checked="true"]:active .af-show-figure{cursor:grabbing}
/* Unsichtbar mit visibility statt nur opacity: Safari malte die unsichtbaren Bögen (je bis 2586 × 3692 px) trotzdem und
   dekodierte sie dafür beim Serienwechsel auf dem Hauptthread – 30–60 ms Stillstand beim Scrollen. Dekodiert werden sie
   vorher per img.decode() (FinishConfigurator), gezeigt erst danach */
.af-show-turn{position:absolute;top:0;height:100%;display:block;overflow:hidden;opacity:0;visibility:hidden;pointer-events:none}
.af-show-turn.af-is-on{opacity:1;visibility:visible}
.af-show-figure.af-is-turning .af-show-imgs{opacity:0}
.af-turn{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:clamp(20px,2.6cqw,32px);font-size:12px;font-weight:500;line-height:1;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3)}
.af-turn-hint{letter-spacing:.08em;text-transform:none;font-weight:400;font-size:13px}
.af-turn-range{-webkit-appearance:none;appearance:none;width:min(200px,38cqw);height:24px;margin:0;background:transparent;cursor:pointer}
.af-turn-range::-webkit-slider-runnable-track{height:1px;background:var(--hair-strong)}
.af-turn-range::-moz-range-track{height:1px;background:var(--hair-strong)}
.af-turn-range::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;margin-top:-6px;border-radius:var(--radius-dot);background:var(--ink);border:1px solid var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);transition:transform .3s var(--af-ease)}
.af-turn-range::-moz-range-thumb{width:13px;height:13px;border-radius:var(--radius-dot);background:var(--ink);border:1px solid var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.af-turn-range:hover::-webkit-slider-thumb{transform:scale(1.15)}
.af-turn-value{display:none}
/* Im Detail: Nahaufnahmen in der gewählten Ausführung */
/* Unter der Bühne: links die gewählte Serie, rechts die Ausführung (info: false = nur die Ausführung, mittig).
   Ab 1100 px Breite als Konfigurator: Bühne links (7/12), rechts Kopf, Serie und Ausführung – alles auf einer Bildschirmhöhe */
.af-anchor{display:block;height:0;overflow:hidden}
/* Mit Scrollweg im Showroom: die Serien-Anker an der Mitte ihres Schritts (je 26 svh, wie --af-run) – der Sprung landet dort,
   wo die Serie gewählt ist. Scrollt der Kopf davon (Handy), korrigiert das Script den Sprung beim Laden (der Weg des Kopfs
   steht erst nach dem Vermessen fest; ein Anteil im CSS verschöbe den Anker, während der Browser ihn noch hält) */
.af-config-run.af-run:not(.af-run--static)>.af-anchor{position:absolute;left:0;top:calc((var(--i,0) + .5) * 26svh)}
@container af-config (min-width:1100px){
  .af-config--info:not(.af-config--scene){display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"stage head" "stage panel";gap:0 clamp(32px,4cqw,64px);align-content:center}
  .af-config--info:not(.af-config--scene) > .af-show-head{grid-area:head}
  .af-config--info:not(.af-config--scene) > .af-show{grid-area:stage;align-self:center}
  /* Der Lichtraum der Bühne reicht in die Lücke – Kopf und Bedienfeld liegen darüber, Klicks kommen bei ihnen an */
  .af-config--info:not(.af-config--scene) > .af-show-head,.af-config--info:not(.af-config--scene) > .af-show-panel{position:relative;z-index:1}
  .af-config--info:not(.af-config--scene) > .af-show-panel{grid-area:panel;display:flex;flex-direction:column;gap:clamp(22px,3vh,32px);margin-top:0;padding-top:0;border-top:0}
  .af-config--info:not(.af-config--scene) .af-show-head .af-head{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:clamp(22px,3vh,32px)}
  .af-config--info:not(.af-config--scene) .af-show-head .af-head .af-h2{font-size:clamp(32px,2.8vw,44px);line-height:1.08;letter-spacing:-.025em;max-width:none}
  .af-config--info:not(.af-config--scene) .af-show-head .af-head-text{font-size:15px;line-height:1.55;max-width:34em}
  .af-config--info:not(.af-config--scene) .af-show-head .af-head-label{margin:0}
  .af-config--info:not(.af-config--scene) .af-show-index,.af-config--info:not(.af-config--scene) .af-show-models{display:none}
  .af-config--info:not(.af-config--scene) .af-show-cap{margin-top:clamp(10px,1.6cqw,18px)}
  .af-config--info:not(.af-config--scene) .af-show-name{font-size:16px;font-weight:400;letter-spacing:0;padding-bottom:6px}
  .af-config--info:not(.af-config--scene) .af-show-info{gap:12px}
  .af-config--info:not(.af-config--scene) .af-show-info-name{font-size:24px;font-weight:300;letter-spacing:-.015em}
  .af-config--info:not(.af-config--scene) .af-show-info-claim{font-size:16px}
  .af-config--info:not(.af-config--scene) .af-show-info-desc{font-size:15px;line-height:1.55;margin-top:2px}
  .af-config--info:not(.af-config--scene) .af-show-choose{gap:10px}
  .af-config--info:not(.af-config--scene) .af-show-panel:not(.af-show-panel--plain) .af-swatch{padding:9px 0}
  .af-config--info:not(.af-config--scene) .af-swatch-chip{width:22px;height:22px}
  .af-config--info:not(.af-config--scene) .af-swatch-name{font-size:15px}
  .af-config--info:not(.af-config--scene) .af-swatch-meta{font-size:12px}
  .af-config--info:not(.af-config--scene) .af-show-panel:not(.af-show-panel--plain) .af-showroom-foot{gap:8px;margin-top:4px}
}
.af-show-panel{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px clamp(32px,7cqw,112px);margin-top:clamp(32px,4.5cqw,56px);padding-top:clamp(28px,3.5cqw,44px);border-top:1px solid var(--hair)}
.af-show-panel--plain{display:block;margin-top:0;padding-top:0;border-top:0}
.af-show-panel--plain .af-showroom-foot{align-items:center;text-align:center}
.af-show-info{display:flex;flex-direction:column;gap:18px;min-width:0}
.af-show-info-label,.af-show-choose-label{margin:0;color:var(--fg-3);font-variant-numeric:tabular-nums lining-nums}
.af-show-info-body{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto 1fr;column-gap:clamp(24px,4cqw,56px);row-gap:10px;animation:af-fade-up .6s var(--af-ease) both}
/* Alle Serien in einer Zelle, nur die gewählte sichtbar: die Höhe richtet sich nach der längsten. Den Rest nimmt die
   Textzeile (1fr) – Name, Leitsatz und Text stehen oben, die Modellreihe immer auf derselben Bodenlinie */
.af-show-info-stack{display:grid}
.af-show-info-stack>.af-show-info-body{grid-area:1 / 1}
.af-show-info-ghost{visibility:hidden;animation:none}
.af-show-info-name{grid-column:1;margin:0;font-size:clamp(30px,3.4cqw,46px);font-weight:200;line-height:1.08;letter-spacing:-.03em;color:var(--fg)}
.af-show-info-claim{grid-column:1;margin:0;font-size:17px;line-height:1.4;color:var(--fg-2)}
.af-show-info-desc{grid-column:1;margin:6px 0 0;max-width:30em;color:var(--fg-2);text-wrap:pretty}
.af-show-info-models{grid-column:2;grid-row:1 / span 3;align-self:end;padding-top:0}
.af-show-info-models .af-label{color:var(--fg-3)}
.af-show-info-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 40px;margin-top:6px}
.af-show-detail-btn{display:inline-flex;align-items:center;gap:12px;padding:0;background:none;border:0;color:var(--fg);font:inherit;font-size:15px;font-weight:500;line-height:1.4;cursor:pointer}
.af-show-detail-icon{display:grid;grid-template-columns:repeat(2,7px);gap:3px}
.af-show-detail-icon i{display:block;width:7px;height:7px;box-shadow:inset 0 0 0 1px var(--accent);transition:background-color .4s var(--af-ease)}
.af-show-detail-btn:hover .af-show-detail-icon i:nth-child(odd),.af-show-detail-btn:focus-visible .af-show-detail-icon i:nth-child(odd){background:var(--accent)}
.af-show-detail-count{font-size:13px;font-weight:400;color:var(--fg-3)}
.af-show-choose{display:flex;flex-direction:column;gap:14px;min-width:0}
.af-show-panel:not(.af-show-panel--plain) .af-swatches{flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:0;margin:0;padding:0;border:0}
.af-show-panel:not(.af-show-panel--plain) .af-swatch{padding:12px 0;border-bottom:1px solid var(--hair)}
.af-show-panel:not(.af-show-panel--plain) .af-swatch:first-child{border-top:1px solid var(--hair)}
.af-show-panel:not(.af-show-panel--plain) .af-showroom-foot{align-items:flex-start;gap:12px;margin-top:8px;text-align:left}
.af-show-panel:not(.af-show-panel--plain) .af-showroom-detail{display:none!important}
/* Vormerken als Haupt-Button; schmal über die ganze Breite, der lange Name darf umbrechen (ausgewogen, mittig) */
.af-showroom-cta{margin-top:6px}
@container af-config (max-width:520px){
  .af-showroom-foot .af-showroom-cta{align-self:stretch;height:auto;min-height:var(--button-h);padding:14px 20px;white-space:normal;line-height:1.35;text-align:center;text-wrap:balance}
}
@container af-config (max-width:760px){
  .af-show-panel{grid-template-columns:minmax(0,1fr);gap:36px}
  .af-show-info-body{display:flex;flex-direction:column}
  /* Die Modellreihe steht unten in der Zelle (wie breit): bei jeder Serie an derselben Stelle */
  .af-show-info-models{align-self:flex-start;margin-top:auto;padding-top:10px}
  .af-show-panel:not(.af-show-panel--plain) .af-swatch-text{display:flex}
  .af-show-panel:not(.af-show-panel--plain) .af-swatch-chip{width:24px;height:24px}
}

/* --- Bühne: die Serien-Szene (assets.speakers.scene) -------------------------------------------------------------
   Der Hintergrund ohne Lautsprecher, darüber je Serie die Ebene in der gewählten Ausführung – genau so, wie der Lautsprecher
   im Panorama steht (Licht, Schatten, Spiegelung im Stein). Die Bühne steht über die ganze Fensterbreite, wie ein Fenster
   im Panorama; Kopf und Bühne bleiben stehen, während die Ausführung beim Scrollen wechselt (Scrollweg um beide), Serie,
   Ausführung und Button folgen darunter. Damit Kopf und Bühne auf einen Bildschirm passen, darf die Bühne oben und unten
   zusammen bis 16 % verlieren (der innere Rahmen bleibt im Seitenverhältnis und steht mittig) – Lautsprecher und Namen
   liegen zwischen 9 % und 90 % der Höhe. Knopf, Licht, 360°-Feld und Name liegen absolut, in Prozent der Bühne. */
/* seitlich abgeschnitten (clip): der Lichtstreif beim Wechsel der Ausführung reicht über die Bühne hinaus – sonst würde die Seite
   auf dem Handy breiter als der Bildschirm */
.af-show--scene{--af-show-room:0px;width:calc(100vw - var(--af-sbw,0px));margin-inline:calc(50% - 50vw + var(--af-sbw,0px) / 2);padding:0;overflow-x:clip;overflow-y:visible}
.af-show-stage.af-scene{display:block;position:relative;width:100%;overflow:hidden;overflow:clip;--finish-dim:.36;--finish-hover:.72;
  height:clamp(calc(100cqw * var(--af-scene-r) * .84),calc(100svh - var(--header-h) - 190px),calc(100cqw * var(--af-scene-r)))}
.af-scene-in{position:absolute;left:0;top:50%;width:100%;transform:translate3d(0,-50%,0);transition:filter 1.6s var(--af-ease)}
/* Die Lichter gehen an: Bis die Bühne fast halb im Bild ist, steht sie dunkel (af-is-dark, nur mit Script) – dann zieht das
   Licht in 1,6 s hoch, die Lichtsäulen zuerst (sie sind am hellsten), der Kegel auf dem gewählten Modell mit. Einmalig. */
.af-scene.af-is-dark .af-scene-in{filter:brightness(.16)}
.af-scene.af-is-dark .af-show-beam{opacity:0}
/* Oben und unten weich ins Band – seitlich steht die Szene bis an den Fensterrand. Oben länger (24 %): die Lichtsäulen sind
   dort am hellsten und stehen direkt unter dem Kopf – kürzer leuchteten sie dem Begleittext ins Wort */
.af-scene-bg{position:absolute;inset:0;display:block;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 24%,#000 84%,transparent);mask-image:linear-gradient(180deg,transparent,#000 24%,#000 84%,transparent)}
.af-scene-bg img{display:block;width:100%;height:100%}
.af-scene .af-show-item{position:absolute;display:block;padding:0}
.af-scene .af-show-imgs,.af-scene .af-show-figure,.af-scene .af-show-beam{position:absolute;display:block}
.af-scene .af-show-imgs{z-index:0}
.af-scene .af-show-figure{z-index:1}
.af-scene .af-show-layer img{width:100%;height:100%}
.af-scene .af-show-item.af-is-turning .af-show-imgs{opacity:0}
.af-scene .af-show-beam{right:auto;z-index:0}
/* Auf der Bühne tritt die Auswahl deutlicher hervor: die anderen dunkler und entsättigt, ihre Namen in fg-3; über dem gewählten
   ein kräftigerer Kegel und Lichtfleck – vorher standen alle drei fast gleich hell, gewählt war nur an der Linie zu erkennen */
.af-scene .af-show-imgs{filter:brightness(var(--finish-dim)) saturate(.55)}
.af-scene .af-show-item:hover .af-show-imgs{filter:brightness(var(--finish-hover)) saturate(.85)}
.af-scene .af-show-item[aria-checked="true"] .af-show-imgs{filter:brightness(1.06) contrast(1.04)}
/* Die Namen der anderen bleiben in fg-2: sie stehen auf dem spiegelnden Boden, in fg-3 waren sie dort kaum zu lesen */
.af-scene .af-show-item:not([aria-checked="true"]) .af-show-name{color:var(--fg-2)}
.af-scene .af-show-item:not([aria-checked="true"]):hover .af-show-name{color:var(--fg)}
.af-scene .af-show-beam{background:
    radial-gradient(34% 7% at 50% 92%,color-mix(in srgb,var(--spot) 24%,transparent),transparent),
    radial-gradient(24% 78% at 50% 0%,color-mix(in srgb,var(--spot) 15%,transparent),transparent)}
/* Der 360°-Bogen ist ohne Szenenlicht gerendert – auf der Bühne bekommt er ungefähr den Farbangleich der Ebenen */
/* Farbangleich am sichtbaren Ausschnitt, nicht am ganzen Bogen (ein Filter am Bild rechnete Safari über alle 24 Stellungen) */
.af-scene .af-show-turn{filter:brightness(.8) sepia(.14) contrast(1.06)}
.af-scene .af-show-item[aria-checked="true"]{cursor:grab;touch-action:pan-y}
.af-scene .af-show-item[aria-checked="true"]:active{cursor:grabbing}
.af-scene .af-show-item[aria-checked="true"] .af-show-figure{cursor:inherit}
/* 360°: beim Zeigen auf das gewählte Modell ein Ring „360°“ mit Hinweis in seiner Mitte (nur mit Maus, nicht beim Drehen) –
   dass Ziehen dreht, verriet sonst nur der Cursor */
.af-show-tip{position:absolute;z-index:3;display:none;flex-direction:column;align-items:center;gap:10px;transform:translate(-50%,-50%);pointer-events:none;opacity:0;transition:opacity .5s var(--af-ease)}
.af-show-tip-ring{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border:1px solid color-mix(in srgb,var(--accent) 70%,transparent);border-radius:50%;background:color-mix(in srgb,var(--ink) 55%,transparent);box-shadow:0 0 0 6px color-mix(in srgb,var(--ink) 25%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);font-size:13px;font-weight:500;letter-spacing:.08em;color:var(--fg)}
.af-show-tip-text{font-size:12px;font-weight:500;line-height:1;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-2);text-shadow:var(--mark-on-image);white-space:nowrap}
@media (hover:hover) and (pointer:fine){
  .af-show-tip{display:flex}
  .af-show-item[aria-checked="true"]:hover:not(.af-is-turning) .af-show-tip{opacity:1;transition-delay:.25s}
}
/* Name und Modelle auf einer Grundlinie unter den Sockeln (die Höhe des tiefsten Labels, bundle.js) – wie die Hinweise im Panorama */
.af-scene .af-show-cap{position:absolute;z-index:2;margin:0;padding:0;max-width:none;transform:translate(-50%,-50%);gap:3px;text-shadow:var(--mark-on-image)}
.af-scene .af-show-name{font-size:clamp(13px,1.35cqw,20px);font-weight:300;letter-spacing:-.01em;padding-bottom:5px}
.af-scene .af-show-models{display:block;font-size:11px;font-weight:500;letter-spacing:.14em;line-height:1.3;color:var(--fg-3)}
.af-scene .af-show-index{display:none}
/* Serienreihe über der Bühne – nur schmal (siehe unten), dort statt der Namen auf den Sockeln: Name und Modelle, die gewählte
   Serie in fg mit accent-Linie wie auf der Bühne */
.af-scene-tabs{display:none;grid-template-columns:repeat(var(--n),minmax(0,1fr));margin-bottom:clamp(2px,.8vh,8px)}
.af-scene-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;min-height:52px;padding:6px 2px;border:0;background:none;color:var(--fg-2);font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.af-scene-tab-name{position:relative;padding-bottom:5px;font-size:15px;font-weight:400;line-height:1.2;white-space:nowrap;transition:color .5s var(--af-ease)}
.af-scene-tab-name::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);transform:scaleX(0);transition:transform .7s var(--af-ease)}
.af-scene-tab-models{font-size:11px;font-weight:500;letter-spacing:.14em;line-height:1.3;color:var(--fg-3);white-space:nowrap}
.af-scene-tab:hover .af-scene-tab-name,.af-scene-tab.af-is-on .af-scene-tab-name{color:var(--fg)}
.af-scene-tab.af-is-on .af-scene-tab-name::after{transform:scaleX(1)}
/* Unter der Bühne eine Leiste – sie steht mit der Szene im Scrollweg: links die Ausführung (Proben, Name und Material),
   in der Mitte der 360°-Regler, rechts Vormerken. Ein Klick auf eine Probe springt zu ihrer Stelle im Weg */
.af-scene-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;margin-top:clamp(10px,1.6vh,20px);container:af-scene-bar / inline-size}
.af-scene-bar .af-turn{margin-top:0}
.af-scene-pick{display:flex;align-items:center;gap:18px;min-width:0}
.af-scene-bar .af-swatches{flex:none;flex-wrap:nowrap;justify-content:flex-start;gap:6px;margin:0;padding:0;border:0}
.af-scene-bar .af-swatch{padding:5px}
.af-scene-bar .af-swatch-text{display:none}
.af-scene-bar .af-swatch-chip{width:24px;height:24px}
.af-scene-bar .af-showroom-detail{display:block;margin:0;font-size:14px;line-height:1.4;color:var(--fg-3);text-align:left}
.af-scene-bar .af-showroom-detail span:first-child{display:inline-block;color:var(--fg);animation:af-fade-up .5s var(--af-ease) both}
/* Eine Zeile: ist die Leiste schmaler, entfallen erst der Hinweis am Regler, dann das Material (gemessen an der Leiste selbst) */
/* Mit Bühne fehlt neben Proben, Material und Vormerken der Platz für den Hinweis am Regler (auf 1440 × 900 ist die Leiste
   1267 px breit und bräche mit ihm um – die Sektion passte nicht mehr auf den Bildschirm); das Drehen erklärt der Ring auf dem Modell */
.af-scene-bar .af-turn-hint{display:none}
/* Der Regler unter der Bühne: Spur in accent statt Haarlinie, „360°“ in fg-2 – er war eine Linie, die man übersah */
.af-scene-bar .af-turn{color:var(--fg-2)}
.af-scene-bar .af-turn-hint{color:var(--fg-3)}
.af-scene-bar .af-turn-range::-webkit-slider-runnable-track{background:color-mix(in srgb,var(--accent) 38%,transparent)}
.af-scene-bar .af-turn-range::-moz-range-track{background:color-mix(in srgb,var(--accent) 38%,transparent)}
/* Eine Skala wie im Bauplan: feine Striche alle 45° über der Spur, rechts die Stellung in Grad (tabellarische Ziffern,
   feste Breite – die Leiste springt beim Drehen nicht) */
.af-scene-bar .af-turn-range::-webkit-slider-runnable-track{height:9px;background:
    linear-gradient(color-mix(in srgb,var(--accent) 42%,transparent),color-mix(in srgb,var(--accent) 42%,transparent)) 0 50% / 100% 1px no-repeat,
    repeating-linear-gradient(90deg,var(--hair-2) 0 1px,transparent 1px calc((100% - 1px) / 8)) 0 0 / 100% 9px no-repeat}
.af-scene-bar .af-turn-range::-webkit-slider-thumb{margin-top:-2px}
.af-scene-bar .af-turn-range::-moz-range-track{height:9px;background:
    linear-gradient(color-mix(in srgb,var(--accent) 42%,transparent),color-mix(in srgb,var(--accent) 42%,transparent)) 0 50% / 100% 1px no-repeat,
    repeating-linear-gradient(90deg,var(--hair-2) 0 1px,transparent 1px calc((100% - 1px) / 8)) 0 0 / 100% 9px no-repeat}
.af-scene-bar .af-turn-value{display:inline-block;min-width:3.2em;font-size:13px;font-weight:400;letter-spacing:.02em;text-transform:none;color:var(--fg);font-variant-numeric:tabular-nums lining-nums}
.af-scene-bar .af-turn:not(.af-is-ready) .af-turn-value{color:var(--fg-3)}
@container af-scene-bar (max-width:1159px){.af-scene-bar .af-showroom-meta{display:none}}
@container (max-width:1000px){.af-scene-bar{justify-content:center}}
.af-scene-bar .af-showroom-foot{display:block;margin:0}
.af-scene-bar .af-showroom-cta{margin:0}
/* Pfeil und die Wahl daneben gehören nur zur Text-Aktion auf dem Handy (siehe dort) */
.af-showroom-cta-arrow,.af-showroom-sum{display:none}
/* Der stehende Rahmen ist bildschirmhoch: Bühne und Leiste mittig darin (auch wenn der Kopf davonscrollt) und unten knapp –
   sonst bliebe nach dem Weg eine Lücke bis zur Serie */
.af-config-run.af-run--split .af-run-frame{justify-content:center}
.af-config-run .af-run-frame{padding-bottom:clamp(12px,2vh,20px)}
/* Desktop (af-config--fit): der ganze Bereich auf einem Bildschirm. Im bildschirmhohen Rahmen unter der Kopfzeile: die Bühne
   (scharf wie das Panorama, mit Sockeln und spiegelndem Boden; die Überschrift liegt oben im Bild, wo die Wand dunkel ist), die
   Leiste und die Serie als kompakte Zeile mit der Modellreihe (unten). Die Bühne nimmt, was übrig bleibt.
   Das Bild: Es muss das Band von 2 % (über dem Hornspeaker) bis 80 % (unter den Namen) zeigen. Reicht die Höhe dafür bei voller
   Breite, steht es über die volle Breite und wird oben höchstens 2 %, unten bis 93 % beschnitten; sonst wird es so hoch, dass
   das Band passt (--af-hi), und damit schmaler als das Fenster – dann läuft es seitlich weich ins Dunkel aus (keine unscharfen
   Kopien mehr, die wirkten verwaschen). */
.af-config--fit .af-config-frame{justify-content:flex-start;padding-top:var(--header-h);padding-bottom:clamp(10px,1.8vh,18px)}
.af-config--fit .af-show-head{position:absolute;left:0;right:0;top:calc(var(--header-h) + clamp(16px,3vh,32px));z-index:4;pointer-events:none}
.af-config--fit .af-show-head .af-head{margin-bottom:0;row-gap:10px}
.af-config--fit .af-show-head .af-h2{font-size:clamp(32px,2.9vw,44px);text-shadow:var(--text-on-image)}
.af-config--fit .af-show-head .af-head-text{font-size:15px;line-height:1.55;color:var(--fg-2);text-shadow:var(--text-on-image)}
.af-config--fit .af-show--scene{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.af-config--fit .af-show-stage.af-scene{--af-hi:min(calc(100cqw * var(--af-scene-r)),calc(100% / .78));flex:1 1 auto;height:calc(100svh - var(--header-h) - 240px);min-height:clamp(260px,36vh,400px);max-height:calc(100cqw * var(--af-scene-r) * .93);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 3%,#000 94%,transparent);mask-image:linear-gradient(180deg,transparent,#000 3%,#000 94%,transparent)}
.af-config--fit .af-scene-in{left:50%;width:auto;height:var(--af-hi);transform:translate3d(-50%,0,0);top:min(0px,max(var(--af-hi) * -.02,100% - var(--af-hi) * .93))}
/* Oben dunkel aus der Kopfzeile (über der Wand steht die Überschrift), seitlich weich ins Dunkel – bei voller Breite nur ein
   leiser Rand. In Bildanteilen: die Lautsprecher liegen darüber, die Maske trifft nur den Hintergrund */
.af-config--fit .af-scene-bg{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(180deg,#0000 0,#0003 3%,#000 24%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(180deg,#0000 0,#0003 3%,#000 24%);mask-composite:intersect}
/* Die Namen stehen auf dem spiegelnden Boden – etwas mehr Schatten. Sie sitzen knapp über dem unteren Rand der Bühne: etwas
   angehoben und mit kurzem Verlauf (94 %), sonst blendete die Maske die Modellangaben fast aus (vorher ab 88 %) */
.af-config--fit .af-scene .af-show-cap{text-shadow:0 1px 14px #000,0 0 3px #000c;transform:translate(-50%,calc(-50% - clamp(14px,2.4vh,26px)))}
.af-config--fit .af-scene .af-show-models{font-size:12px;color:var(--fg-2)}
.af-config--fit .af-scene .af-show-item[aria-checked="true"] .af-show-models{color:var(--fg)}
.af-config--fit .af-scene-bar{margin-top:clamp(8px,1.4vh,16px)}
/* Mit Bühne folgt die gewählte Serie unter dem Scrollweg: oben die Nummer, rechts daneben Datenblatt und Details; darunter Name
   und Leitsatz links, der Text rechts – und die Modellreihe über die ganze Breite (af-lineup) */
.af-show-panel--scene{display:block;margin-top:0;padding-top:clamp(28px,3.4vw,48px)}
.af-show-panel--scene .af-show-info{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"label actions" "body body";column-gap:var(--af-gap);row-gap:clamp(14px,2vw,24px);align-items:center}
.af-show-panel--scene .af-show-info-label{grid-area:label}
.af-show-panel--scene .af-show-info-actions{grid-area:actions;margin:0;gap:12px 36px}
.af-show-panel--scene .af-show-info-stack{grid-area:body}
.af-show-panel--scene .af-showroom-note{margin-top:clamp(20px,3vh,32px)}
@container af-config (min-width:761px){
  .af-show-panel--scene .af-show-info-body{grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto auto 1fr;column-gap:var(--af-gap);row-gap:8px}
  .af-show-panel--scene .af-show-info-name{grid-column:1 / span 5;grid-row:1}
  .af-show-panel--scene .af-show-info-claim{grid-column:1 / span 5;grid-row:2;align-self:start}
  .af-show-panel--scene .af-show-info-desc{grid-column:7 / -1;grid-row:1 / span 2;align-self:end;margin:0;max-width:34em}
  .af-show-panel--scene .af-lineup{grid-column:1 / -1;grid-row:3;align-self:end}
}

/* Modellreihe: die Modelle der Serie nebeneinander, jedes in seiner Spalte an einer Haarlinie (oben eine Linie, keine Kästen).
   Die Umrisse stehen auf einer gemeinsamen Bodenlinie, im echten Größenverhältnis (alle Serien im selben Maßstab); das Modell
   auf der Bühne trägt eine accent-Linie und „Auf der Bühne“ */
.af-lineup{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--af-gap);margin:clamp(24px,3.2vw,44px) 0 0;padding:0;list-style:none;font-variant-numeric:tabular-nums lining-nums}
.af-lineup-item{position:relative;min-width:0;padding-top:16px}
/* Jedes Modell ist ein Knopf (öffnet das Datenblatt mit diesem Modell): ohne eigenen Rahmen, der Inhalt ist das Ziel */
.af-lineup-go{display:flex;flex-direction:column;gap:4px;width:100%;min-width:0;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;-webkit-tap-highlight-color:transparent}
button.af-lineup-go{cursor:pointer}
/* Fokus am Namen, wie bei den Lautsprechern auf der Bühne – ein Kasten um das ganze Modell war zu schwer */
.af-lineup-go:focus-visible{outline:none}
.af-lineup-go:focus-visible .af-lineup-name{outline:var(--af-focus,1px solid var(--accent));outline-offset:var(--af-focus-offset,4px)}
.af-lineup-arrow{display:inline-flex;align-self:center;margin-left:auto;color:var(--fg-2);opacity:.55;transition:transform .4s var(--af-ease),opacity .4s var(--af-ease)}
button.af-lineup-go:hover .af-lineup-arrow,button.af-lineup-go:focus-visible .af-lineup-arrow{opacity:1;transform:translateX(4px)}
button.af-lineup-go:hover .af-lineup-fig .af-sil{stroke:var(--fg-2)}
button.af-lineup-go:hover .af-lineup-fig{border-bottom-color:var(--hair-strong)}
.af-lineup-item.af-is-staged button.af-lineup-go:hover .af-lineup-fig .af-sil{stroke:var(--accent)}
.af-lineup-item.af-is-staged button.af-lineup-go:hover .af-lineup-fig{border-bottom-color:var(--accent)}
/* Bodenlinie unter den Umrissen – je Spalte ein Stück, so stehen sie wie auf einem Sockel */
.af-lineup-fig{display:flex;align-items:flex-end;height:calc(var(--af-lineup-h,160px) + 1px);margin-bottom:14px;border-bottom:1px solid var(--hair-2)}
.af-lineup-fig .af-sil{display:block;overflow:visible;fill:none;stroke:var(--fg-3);stroke-width:1;vector-effect:non-scaling-stroke}
.af-lineup-fig .af-sil *{vector-effect:non-scaling-stroke}
.af-lineup-item.af-is-staged .af-lineup-fig .af-sil{stroke:var(--accent)}
.af-lineup-item.af-is-staged .af-lineup-fig{border-bottom-color:var(--accent)}
.af-lineup-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;width:100%}
.af-lineup-name{font-size:clamp(24px,2.2vw,32px);font-weight:200;line-height:1;letter-spacing:-.03em;color:var(--fg)}
.af-lineup-tag{font-size:12px;font-weight:500;line-height:1.3;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.af-lineup-kind{margin-top:6px;font-size:15px;line-height:1.45;color:var(--fg-2)}
.af-lineup-facts{display:flex;flex-direction:column;font-size:14px;line-height:1.5;color:var(--fg-3);white-space:nowrap}
.af-lineup-facts span{overflow:hidden;text-overflow:ellipsis}
@media (prefers-reduced-motion:no-preference){
  .af-show-info-body:not(.af-show-info-ghost) .af-lineup-item{animation:af-fade-up .6s var(--af-ease) calc(var(--af-k,0) * 70ms) both}
}
/* Desktop (af-config--fit): die Serie als kompakte Zeile im Rahmen, unter der Leiste an einer Haarlinie – links Name und
   Leitsatz, darunter der Text (höchstens zwei Zeilen), in der Mitte die Modellreihe klein (Umrisse im Größenverhältnis,
   darunter nur der Name; die Werte stehen im Datenblatt), rechts Datenblatt und Details untereinander, ganz unten der Hinweis */
.af-config--fit .af-show-panel--scene{flex:none;margin-top:clamp(10px,1.6vh,16px);padding-top:clamp(10px,1.6vh,16px);border-top:1px solid var(--hair)}
.af-config--fit .af-show-panel--scene .af-show-info{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"body actions";row-gap:0;align-items:end}
.af-config--fit .af-show-panel--scene .af-show-info-label{display:none}
.af-config--fit .af-show-panel--scene .af-show-info-actions{flex-direction:column;align-items:flex-start;gap:10px}
.af-config--fit .af-show-panel--scene .af-show-info-body{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:16px;row-gap:4px;align-items:baseline}
.af-config--fit .af-show-panel--scene .af-show-info-name{grid-column:1;grid-row:1;font-size:clamp(22px,1.8vw,28px)}
.af-config--fit .af-show-panel--scene .af-show-info-claim{grid-column:2;grid-row:1;font-size:15px;align-self:baseline}
.af-config--fit .af-show-panel--scene .af-show-info-desc{grid-column:1 / span 2;grid-row:2;margin:0;padding:0;max-width:44em;font-size:14px;line-height:1.5;color:var(--fg-3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.af-config--fit .af-show-panel--scene .af-lineup{grid-column:3;grid-row:1 / span 2;align-self:end;display:flex;gap:clamp(14px,1.6vw,24px);margin:0 clamp(16px,3vw,48px) 0 clamp(16px,2vw,32px)}
.af-config--fit .af-lineup-item{padding-top:0}
.af-config--fit .af-lineup-go{align-items:center;gap:6px}
/* Umrisse auf ein Drittel (der größte 54 px, bis 820 px Bildschirmhöhe 45 px) – zoom statt Neuberechnung, die Maße bleiben im Verhältnis */
.af-config--fit .af-lineup{--af-lz:.34}
@media (max-height:820px){.af-config--fit .af-lineup{--af-lz:.28}}
.af-config--fit .af-lineup-fig{--af-lineup-h:calc(160px * var(--af-lz));justify-content:center;width:100%;min-width:40px;margin-bottom:4px}
.af-config--fit .af-lineup-fig .af-sil{zoom:var(--af-lz)}
.af-config--fit .af-lineup-head{justify-content:center;width:auto}
.af-config--fit .af-lineup-name{font-size:15px;font-weight:400;letter-spacing:0;color:var(--fg-2)}
.af-config--fit .af-lineup-item.af-is-staged .af-lineup-name{color:var(--fg)}
.af-config--fit .af-lineup-tag,.af-config--fit .af-lineup-kind,.af-config--fit .af-lineup-facts,.af-config--fit .af-lineup-arrow{display:none}
.af-config--fit button.af-lineup-go:hover .af-lineup-name{color:var(--fg)}
.af-config--fit .af-show-panel--scene .af-showroom-note{margin-top:6px;font-size:12px}
@container af-config (max-width:760px){
  .af-show-panel--scene .af-show-info{grid-template-areas:"label" "body" "actions";grid-template-columns:minmax(0,1fr)}
  .af-show-panel--scene .af-show-info-actions{flex-direction:column;align-items:flex-start}
  .af-lineup{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px;margin-top:20px}
  .af-lineup-fig{--af-lineup-h:96px}
  .af-lineup-fig .af-sil{zoom:.6}
  .af-lineup-name{font-size:24px}
  .af-lineup-facts{white-space:normal}
}
@container af-config (max-width:760px){
  .af-scene .af-show-models{display:none}
  .af-scene .af-show-name{font-size:13px;padding-bottom:4px}
  .af-scene-bar{flex-direction:column;align-items:stretch;gap:14px}
  .af-scene-pick{flex-direction:column;gap:6px}
  .af-scene-bar .af-showroom-detail{text-align:center}
  .af-scene-bar .af-showroom-cta{width:100%}
}
/* Handy (Showroom bis 560 px): Die Bühne zeigt die gewählte Serie im Ausschnitt statt die ganze Szene. Steht der Rahmen und
   der Kopf scrollt davon (af-run--split), füllt sie den Platz unter Kopfzeile, Serienreihe und Leiste ganz (flex) – sonst
   bliebe über der Reihe ein Rest des Kopfes stehen. Das Bild darin ist so hoch wie die Bühne (oben und unten zusammen 10 %
   beschnitten), höchstens 2.6-mal so breit wie das Fenster (SCENE_ZOOM in bundle.js); ist die Bühne höher, steht es mittig
   und läuft oben und unten weich aus. Beim Wechsel der Serie fährt der Ausschnitt durch den Raum auf die Mitte des Modells
   (--af-cx, in Prozent der eigenen Breite) – an den Rändern der Szene bleibt er stehen. Die Namen stehen dann in der Reihe
   über der Bühne statt auf den Sockeln. Nur mit Script – ohne bleibt die ganze Szene mit den Namen auf den Sockeln. */
@media (scripting:enabled){
  @container af-config (max-width:560px){
    .af-show--scene{--af-sw:calc(100vw - var(--af-sbw,0px))}
    .af-show-stage.af-scene{height:clamp(calc(var(--af-sw) * var(--af-scene-r) * 1.2),calc(100svh - var(--header-h) - 300px),calc(var(--af-sw) * var(--af-scene-r) * 2.34))}
    .af-config-run.af-run--split .af-run-frame{justify-content:flex-start}
    .af-config-run.af-run--split .af-show--scene{flex:1 1 auto;display:flex;flex-direction:column}
    .af-config-run.af-run--split .af-show-stage.af-scene{flex:1 1 auto;height:auto;min-height:calc(var(--af-sw) * var(--af-scene-r) * 1.2)}
    .af-scene-in{width:auto;height:min(calc(100% / .9),calc(var(--af-sw) * 2.6 * var(--af-scene-r)));transition:transform .9s var(--af-ease),filter 1.6s var(--af-ease);
      transform:translate3d(calc(-1 * clamp(0px,var(--af-cx,.5) * 100% - var(--af-sw) / 2,100% - var(--af-sw))),-50%,0)}
    .af-scene-tabs{display:grid;margin-top:clamp(6px,1.4vh,14px)}
    /* Proben links, 360° rechts in einer Zeile – die Bühne gewinnt die Höhe einer Zeile */
    .af-scene-bar{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:20px;row-gap:12px}
    .af-scene-pick{flex-direction:row;justify-self:start}
    .af-scene-bar .af-swatches{gap:4px}
    .af-scene-bar .af-turn{justify-self:end;justify-content:flex-end;gap:10px;min-width:0}
    .af-scene-bar .af-turn-range{width:min(150px,32vw)}
    .af-scene-bar .af-turn-value{min-width:2.8em;text-align:right}
    .af-scene-bar .af-showroom-foot{grid-column:1 / -1}
    .af-scene .af-show-cap{display:none}
    .af-scene .af-show-item:focus-visible{outline:var(--af-focus);outline-offset:-6px}
    /* Vormerken als Text-Aktion an einer Haarlinie: links die Wahl (Serie, darunter die Ausführung), rechts „Vormerken“ mit
       Pfeil auf einer accent-Linie – gleich hoch bei jeder Wahl, die Bühne darüber springt nicht. Die Zeile unter den Proben
       entfällt (die Wahl steht neben „Vormerken“) */
    .af-scene-bar .af-showroom-detail{display:none}
    .af-scene-bar .af-showroom-foot{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:16px;padding-top:14px;border-top:1px solid var(--hair);text-align:left}
    .af-showroom-sum{display:flex;flex-direction:column;gap:3px;min-width:0;margin:0}
    .af-showroom-sum-series{font-size:16px;line-height:1.25;color:var(--fg)}
    .af-showroom-sum-finish{font-size:13px;line-height:1.35;color:var(--fg-3);white-space:nowrap}
    .af-scene-bar .af-showroom-cta.af-btn,.af-scene-bar .af-showroom-cta.af-btn:hover{width:auto;align-self:center;flex:none;height:auto;min-height:44px;padding:0;border:0;background:none;box-shadow:none;font-size:16px;font-weight:500;letter-spacing:.005em}
    .af-scene-bar .af-showroom-cta.af-btn::before{display:none}
    .af-scene-bar .af-showroom-cta .af-btn-label{display:inline-flex;align-items:center;padding-bottom:6px;background:linear-gradient(var(--accent),var(--accent)) left bottom / 100% 1px no-repeat}
    .af-scene-bar .af-showroom-cta-ctx{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
    .af-scene-bar .af-showroom-cta-verb{display:inline-block}
    .af-scene-bar .af-showroom-cta-verb::first-letter{text-transform:uppercase}
    .af-scene-bar .af-showroom-cta-arrow{display:inline-flex;margin-left:12px;transition:transform .4s var(--af-ease)}
    .af-scene-bar .af-showroom-cta:hover .af-showroom-cta-arrow{transform:translateX(4px)}
    @media (forced-colors:active){.af-scene-bar .af-showroom-cta .af-btn-label{text-decoration:underline;text-underline-offset:6px}}
  }
}

/* Im Detail: Vollbild-Ansicht (<dialog>) */
/* Gesperrt wird über body, nicht html: Mit overflow an html scrollt statt des Fensters body (overflow-x: hidden der Seite) –
   Safari merkte sich das über das Schließen hinaus, und die klebenden Rahmen danach (Januar-Bühne) klebten nicht mehr */
html.af-has-modal body{overflow:hidden}
.af-viewer{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:color-mix(in srgb,var(--ink) 95%,transparent);color:var(--fg);overscroll-behavior:contain}
.af-viewer::backdrop{background:#000000b3;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.af-viewer[open]{display:flex;animation:af-fade .35s var(--af-ease) both}
.af-viewer-frame{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;gap:clamp(14px,2.4vh,28px);width:100%;max-width:1280px;height:100%;margin:0 auto;padding:max(18px,env(safe-area-inset-top,0px)) max(var(--af-gutter),env(safe-area-inset-right,0px)) max(20px,env(safe-area-inset-bottom,0px)) max(var(--af-gutter),env(safe-area-inset-left,0px))}
.af-viewer-head{display:flex;align-items:center;gap:24px;min-width:0;min-height:44px}
.af-viewer-head .af-label{min-width:0;margin:0;color:var(--fg-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.af-viewer-count{flex:none;margin:0 0 0 auto;white-space:nowrap;font-size:13px;letter-spacing:.12em;color:var(--fg-3);font-variant-numeric:tabular-nums lining-nums}
.af-viewer-close{display:grid;place-items:center;width:44px;height:44px;margin-right:-10px;padding:0;background:none;border:0;color:var(--fg);cursor:pointer}
.af-viewer-close svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round}
.af-viewer-stage{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(8px,2vw,32px);min-height:0;touch-action:pan-y}
.af-viewer-figure{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;height:100%;min-height:0;margin:0}
.af-viewer-media{display:block;width:min(100%,calc((100dvh - 300px) * 4 / 3));aspect-ratio:4 / 3;overflow:hidden;background:var(--ink);box-shadow:0 0 0 1px var(--hair);animation:af-fade .5s var(--af-ease) both}
.af-viewer-media img{display:block;width:100%;height:100%;object-fit:cover}
.af-viewer-cap{max-width:40em;text-align:center}
.af-viewer-title{margin:0 0 6px;font-size:clamp(20px,2vw,26px);font-weight:300;line-height:1.25;letter-spacing:-.015em;color:var(--fg)}
.af-viewer-cap p{margin:0;font-size:15px;line-height:1.55;color:var(--fg-2)}
.af-viewer-nav{display:grid;place-items:center;width:52px;height:52px;padding:0;border:1px solid var(--hair-strong);border-radius:var(--radius-dot);background:none;color:var(--fg);cursor:pointer;transition:border-color .3s var(--af-ease)}
.af-viewer-nav:hover{border-color:var(--accent)}
.af-viewer-thumbs{display:flex;justify-content:center;gap:10px}
.af-viewer-thumb{width:88px;aspect-ratio:4 / 3;padding:0;border:0;overflow:hidden;background:var(--ink);box-shadow:0 0 0 1px var(--hair);opacity:.42;cursor:pointer;transition:opacity .3s var(--af-ease),box-shadow .3s var(--af-ease)}
.af-viewer-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.af-viewer-thumb:hover{opacity:.8}
.af-viewer-thumb[aria-current="true"]{opacity:1;box-shadow:0 0 0 1px var(--accent)}
@media (max-width:760px){
  .af-viewer-stage{grid-template-columns:minmax(0,1fr)}
  .af-viewer-nav{display:none}
  .af-viewer-media{width:100%}
  .af-viewer-thumb{width:64px}
}
/* Hochformat: quadratischer Ausschnitt statt 4 : 3 – das Bild füllt sonst nur ein Drittel der Höhe */
@media (max-width:760px) and (orientation:portrait){
  .af-viewer-media{width:min(100%,calc(100dvh - 330px));aspect-ratio:1 / 1}
}
/* Schmal: im Kopf nur die Ausführung, „Im Detail ·“ würde sie abschneiden */
@media (max-width:520px){.af-viewer-kicker{display:none}}
/* Datenblatt als Ebene (SpecDialog): wie die Vollbild-Ansicht – fast deckendes ink, die Seite dahinter weichgezeichnet; die
   Ebene scrollt selbst, oben eine stehende Leiste mit „Datenblatt“ und ×. Klick ins Dunkel neben dem Inhalt schließt. */
.af-spec-dialog{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:color-mix(in srgb,var(--ink) 96%,transparent);color:var(--fg);overflow-y:auto;overscroll-behavior:contain}
.af-spec-dialog::backdrop{background:#000000b3;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.af-spec-dialog[open]{display:block;animation:af-fade .35s var(--af-ease) both}
.af-spec-dialog-frame{width:100%;max-width:calc(var(--container) + 2 * var(--af-gutter));margin:0 auto;padding:0 max(var(--af-gutter),env(safe-area-inset-right,0px)) max(clamp(32px,6vh,72px),env(safe-area-inset-bottom,0px)) max(var(--af-gutter),env(safe-area-inset-left,0px))}
.af-spec-dialog-bar{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:var(--header-h);margin-bottom:clamp(8px,2vh,24px);padding-top:env(safe-area-inset-top,0px);background:linear-gradient(180deg,var(--ink) 72%,color-mix(in srgb,var(--ink) 0%,transparent))}
.af-spec-dialog-bar .af-label{margin:0;color:var(--fg-2)}
.af-spec-dialog .af-sheet-head{margin-top:0}
/* Ohne Script: kein Modal – das Datenblatt steht offen unter dem Showroom, ohne Schließen-Knopf */
@media (scripting:none){
  .af-spec-dialog:not([open]){display:block;position:static;width:auto;height:auto;overflow:visible;background:none;color:inherit}
  .af-spec-dialog-close{display:none}
  .af-spec-dialog-bar{position:static;min-height:0;background:none;margin-top:clamp(48px,6vw,96px)}
  .af-spec-dialog-frame{max-width:none;padding:0}
}
@media (prefers-reduced-motion:reduce){.af-viewer[open],.af-spec-dialog[open],.af-viewer-media,.af-show-info-body{animation:none}.af-scene-in{transition:none}}
@media (scripting:none){.af-show-detail-btn,.af-turn{display:none}.af-show-item[aria-checked="true"] .af-show-figure{cursor:default}}
.af-showroom-foot{display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:clamp(28px,4cqw,44px);text-align:center}
.af-showroom-detail{display:none;font-size:14px;line-height:1.5;color:var(--fg-2)}
.af-showroom-detail span{color:var(--fg)}
.af-showroom-detail .af-showroom-meta{color:inherit}
.af-showroom-note{font-size:13px;line-height:1.5;color:var(--fg-3)}
@media (prefers-reduced-motion:reduce){
  .af-show-sweep{display:none}
  .af-show-glint{display:none}
  .af-show-layer.af-wipe-a,.af-show-layer.af-wipe-b{animation:none;-webkit-mask-image:none;mask-image:none}
  .af-show-layer:not(.af-is-on){transition:none}
  .af-show-layer,.af-show-imgs,.af-show-beam{transition:none}
}
@container af-config (max-width:760px){
  .af-show-index,.af-show-models{display:none}
  .af-show-name{font-size:14px;font-weight:400;letter-spacing:0;padding-bottom:6px}
  .af-swatch-meta{display:none}
  .af-swatch{gap:10px}
  .af-swatch-chip{width:22px;height:22px}
  .af-swatch-name{font-size:14px}
  .af-showroom-detail{display:block}
}
/* Schmal: nur die Proben – Name und Material stehen darunter in der Detailzeile */
@container af-config (max-width:520px){
  .af-swatches{gap:28px}
  .af-swatch-text{display:none}
  .af-swatch-chip{width:30px;height:30px}
}

/* --- Modellreihe (Showroom: Umrisse der Modelle im Größenverhältnis) ------------------------------------------- */
.af-row-models{display:flex;flex-direction:column;gap:10px;padding-top:4px}
.af-row-models ul{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:17px;font-variant-numeric:tabular-nums}
/* Umrisse der Modelle im Größenverhältnis, auf einer gemeinsamen Bodenlinie */
.af-row-model-list:has(.af-sil){position:relative;width:max-content;max-width:100%;align-items:flex-end;gap:10px 16px;padding-top:6px}
.af-row-model-list:has(.af-sil)::after{content:"";position:absolute;left:-4px;right:-4px;bottom:24px;height:1px;background:linear-gradient(90deg,#ffffff00,var(--hair-2) 12%,var(--hair-2) 88%,#ffffff00)}
.af-row-model-list:has(.af-sil) li{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:14px;line-height:16px;color:var(--fg-2)}
.af-sil{display:block;overflow:visible;fill:none;stroke:var(--fg-3);stroke-width:1;vector-effect:non-scaling-stroke;transition:stroke .5s var(--af-ease)}
.af-sil *{vector-effect:non-scaling-stroke}
.af-row-model-list li{transition:transform .5s var(--af-ease) calc(var(--af-k,0) * 45ms),color .5s var(--af-ease)}
@container (max-width:640px){
  .af-row-models{grid-column:1 / -1;grid-row:2;flex-direction:row;align-items:baseline;gap:16px}
  .af-row-models:has(.af-sil){flex-direction:column;align-items:flex-start;gap:10px}
}

/* --- SpecSheet --------------------------------------------------------------------- */
/* --af-sheet-key: Breite der Merkmalsspalte – dieselbe für die Modellnamen im Diagramm, so beginnen Achse und Modellspalten auf einer Linie */
.af-sheet{container-type:inline-size;--af-sheet-key:24%}
.af-sheet-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px 40px;flex-wrap:wrap;margin-bottom:24px}
.af-sheet-head .af-label{margin-bottom:14px}
.af-sheet-switch{display:flex;justify-content:flex-end;max-width:100%}
.af-sheet-switch .af-tabs{margin-bottom:0}
.af-sheet-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 32px;margin-top:16px}
.af-sheet-foot .af-note{max-width:none}
.af-note{display:flex;align-items:baseline;gap:10px;max-width:24em;font-size:14px;line-height:1.5;color:var(--fg-3)}
.af-note::before{content:"";flex:none;width:6px;height:6px;border-radius:var(--radius-dot);background:var(--accent);transform:translateY(-1px)}
.af-tabs{position:relative;display:inline-flex;max-width:100%;border:1px solid var(--hair);margin-bottom:12px;overflow-x:auto;scrollbar-width:none}
.af-tabs::-webkit-scrollbar{display:none}
.af-tab{position:relative;z-index:1;height:46px;padding:0 24px;background:transparent;border:0;font-size:15px;font-weight:500;color:var(--fg-3);cursor:pointer;white-space:nowrap;transition:color .3s var(--af-ease),background-color .3s var(--af-ease)}
/* Gleitende Markierung: Fläche fill-selected mit accent-Linie unten; ohne Script trägt das Segment selbst die Fläche */
.af-tab-ind{position:absolute;left:0;top:0;bottom:0;background:var(--fill-selected);box-shadow:inset 0 -1px 0 var(--accent);pointer-events:none;transition:transform .55s var(--af-ease),width .55s var(--af-ease)}
.af-tab+.af-tab{border-left:1px solid var(--hair)}
.af-tab:hover{color:var(--fg)}
.af-tab[aria-selected="true"]{color:var(--fg)}
.af-tabs:not(.af-tabs--ind) .af-tab[aria-selected="true"]{background:var(--fill-selected)}
/* Fokus innen (focus-inset): außen schnitte die Leiste den Rahmen ab (overflow) – als outline, damit er auch im Kontrastmodus bleibt */
.af-tab:focus-visible{outline:var(--af-focus);outline-offset:-1px}
.af-table-wrap{animation:af-fade-up .6s var(--af-ease) both}
/* Ab 701 px stehen alle Serien in einer Zelle, die nicht gewählten unsichtbar: das Datenblatt ist so hoch wie die längste – beim Wechsel springt nichts */
@container (min-width:701px){
  .af-sheet-panels{display:grid;grid-template-columns:minmax(0,1fr)}
  .af-sheet-panels>.af-table-wrap{grid-area:1 / 1;animation:none}
  .af-sheet-panels>.af-table-wrap[hidden]{display:block!important;visibility:hidden}
  .af-sheet-panels>.af-table-wrap:not([hidden]){animation:af-fade-up .6s var(--af-ease) both}
  /* Weniger Modelle: die Balken verteilen sich über dieselbe Höhe – die Tabelle beginnt bei jeder Serie an derselben Stelle */
  .af-sheet-panels .af-fr-plot{min-height:calc(var(--af-fr-rows,3) * (30px + var(--af-fr-gap)) - var(--af-fr-gap) + 28px);grid-auto-rows:1fr}
  .af-sheet-panels .af-fr-track{align-self:center}
}
.af-table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.af-specs{width:100%;min-width:720px;border-collapse:collapse;font-variant-numeric:tabular-nums lining-nums}
/* Die Legende nennt Serie und Status nur für Screenreader – sichtbar steht der Vermerk unter dem Datenblatt, einmal */
.af-specs caption{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.af-specs th,.af-specs td{padding:12px 24px 12px 0;border-bottom:1px solid var(--hair);text-align:left;vertical-align:top;font-weight:400;line-height:1.45}
.af-specs thead th{padding-top:16px;padding-bottom:12px;font-size:32px;font-weight:200;letter-spacing:-.03em;line-height:1;color:var(--fg)}
.af-specs thead th:first-child{font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3);vertical-align:bottom}
.af-specs tbody th{width:var(--af-sheet-key);font-size:15px;color:var(--fg-3)}
/* Modellspalten gleich breit: der Rest nach der Merkmalsspalte, geteilt durch die Zahl der Modelle (--af-n) */
.af-specs thead th[data-col]{width:calc((100% - var(--af-sheet-key)) / var(--af-n,3))}
.af-specs td{font-size:16px;color:var(--fg);white-space:nowrap;transition:color .3s var(--af-ease)}
/* Spalte unter dem Zeiger: Modellname mit accent-Linie, die übrigen Werte treten zurück */
.af-specs thead th[data-col]{position:relative;transition:color .3s var(--af-ease)}
.af-specs thead th[data-col]::after{content:"";position:absolute;left:0;right:24px;bottom:-1px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--af-ease)}
.af-specs thead th.af-col-on::after{transform:scaleX(1)}
.af-specs:has(.af-col-on) td{color:var(--fg-2)}
.af-specs td.af-col-on{color:var(--fg)}
.af-specs tbody tr:hover th{color:var(--fg-2)}
.af-specs tbody th{transition:color .3s var(--af-ease)}
.af-is-scrolled .af-specs tbody th,.af-is-scrolled .af-specs thead th:first-child{position:sticky;left:0;z-index:1;background:var(--ink)}
.af-specs td small,.af-spec-row dd small{display:block;font-size:14px;color:var(--fg-3)}
.af-spec-mobile{display:none}
/* Kompakt: nur Kernwerte, der Rest mit „Alle Werte“ */
.af-sheet--core .af-row-more{display:none}
.af-sheet-more{display:inline-flex;align-items:center;gap:10px;margin-top:0;padding:0;background:none;border:0;color:var(--fg);font:inherit;font-size:15px;font-weight:500;line-height:1.4;cursor:pointer}
.af-sheet-more .af-icon{width:14px;height:14px;stroke:var(--accent)}
@media (scripting:none){.af-sheet--core tr.af-row-more{display:table-row}.af-sheet--core .af-spec-row.af-row-more{display:grid}.af-sheet-more{display:none}}
.af-model-picker{display:flex;gap:32px;border-bottom:1px solid var(--hair)}
.af-model{position:relative;padding:18px 0 14px;background:none;border:0;font-size:32px;font-weight:200;line-height:1;letter-spacing:-.03em;color:var(--fg-3);cursor:pointer;font-variant-numeric:lining-nums;transition:color .3s var(--af-ease)}
.af-model::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--af-ease)}
.af-model[aria-pressed="true"]{color:var(--fg)}
.af-model[aria-pressed="true"]::after{transform:scaleX(1)}
.af-spec-row{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:16px;padding:16px 0 17px;border-bottom:1px solid var(--hair)}
.af-spec-row dt{font-size:14px;line-height:1.45;color:var(--fg-3)}
.af-spec-row dd{font-size:16px;line-height:1.45;color:var(--fg);font-variant-numeric:tabular-nums lining-nums}
.af-spec-row dd small{margin-top:2px}
.af-spec-list{animation:af-fade-up .5s var(--af-ease) both}
@container (max-width:700px){
  .af-sheet-head{margin-bottom:24px}
  .af-sheet-switch{width:100%}
  .af-tabs{display:flex;width:100%;margin-bottom:8px}
  .af-sheet-foot{flex-direction:column;align-items:flex-start}
  .af-tab{flex:1;padding:0 6px;font-size:14px}
  .af-table-scroll{display:none}
  .af-spec-mobile{display:block}
}
/* Handy: der Umschalter als Reihe wie die Serien im Showroom – ohne Kasten und Fläche, die gewählte Serie in fg mit
   accent-Linie unter dem Namen */
@container (max-width:560px){
  .af-tabs{border:0;overflow:visible}
  .af-tab{height:48px;font-size:15px;font-weight:400;color:var(--fg-2);text-decoration:underline 1px transparent;text-underline-offset:8px;transition:color .3s var(--af-ease),text-decoration-color .6s var(--af-ease)}
  .af-tab+.af-tab{border-left:0}
  .af-tab[aria-selected="true"]{color:var(--fg);text-decoration-color:var(--accent)}
  .af-tabs:not(.af-tabs--ind) .af-tab[aria-selected="true"]{background:none}
  .af-tab-ind{display:none}
}

/* --- ReserveForm ------------------------------------------------------------------- */
.af-reserve-wrap{container-type:inline-size}
.af-reserve{display:grid;grid-template-columns:1fr 1fr;gap:24px 20px}
.af-field{display:flex;flex-direction:column;gap:10px;min-width:0}
.af-field--full{grid-column:1 / -1}
.af-field>label{font-size:14px;font-weight:500;line-height:1.4;color:var(--fg-2);transition:color .3s var(--af-ease)}
.af-field:focus-within>label{color:var(--fg)}
.af-input{height:var(--input-h);width:100%;padding:0 18px;background:var(--fill);border:1px solid var(--hair-hover);border-radius:var(--radius-none);color:var(--fg);font-size:17px;transition:border-color .3s var(--af-ease),background-color .3s var(--af-ease)}
.af-input::placeholder{color:var(--placeholder)}
.af-input:hover{border-color:var(--hair-strong)}
/* Fokus: Rahmen in accent und der normale Fokusrahmen (bleibt auch bei ungültigen Feldern, deren Rahmen danger trägt) */
.af-input:focus{border-color:var(--accent);background-color:var(--fill-hover)}
select.af-input{appearance:none;-webkit-appearance:none;padding-right:40px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23c3beb6' stroke-width='1.3'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:16px}
select.af-input option{background:var(--option-ground);color:var(--fg)}
.af-check{display:flex;gap:14px;align-items:flex-start;font-size:15px;line-height:1.55;color:var(--fg-2);cursor:pointer}
.af-check input{appearance:none;-webkit-appearance:none;flex:none;width:22px;height:22px;margin:1px 0 0;border:1px solid var(--hair-hover);background:var(--fill);cursor:pointer;transition:background-color .2s,border-color .2s}
.af-check input:checked{background:var(--light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%230c0c0c' stroke-width='1.6'/%3E%3C/svg%3E") center/14px no-repeat;border-color:var(--light)}
.af-check:hover input:not(:checked){border-color:var(--hair-strong)}
.af-check a{color:var(--fg);border-bottom:1px solid var(--hair-2)}
.af-error{font-size:14px;line-height:1.5;color:var(--danger)}
/* Leer unsichtbar, aber im Baum für Screenreader: Eine Live-Region, die erst mit dem Text erscheint, wird oft nicht angesagt */
.af-error:empty{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.af-field.af-is-invalid .af-input,.af-field.af-is-invalid .af-check input{border-color:var(--danger)}
.af-input:disabled,.af-input[readonly]{opacity:.7}
.af-reserve-actions{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:8px}
.af-form-error{flex-basis:100%}
.af-reserve-done{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding-top:32px;border-top:1px solid var(--hair)}
/* Bestätigung: Kreis und Haken zeichnen sich in accent, wie die Linienmotive */
.af-done-mark{width:48px;height:48px;margin-bottom:8px;overflow:visible;fill:none;stroke:var(--accent);stroke-width:1;stroke-linecap:round;stroke-linejoin:round}
.af-done-mark *{vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0;animation:af-draw 1.4s var(--af-ease) both}
.af-done-mark path{animation-delay:.55s}
@keyframes af-draw{from{stroke-dashoffset:1}}
.af-reserve-done>:not(.af-done-mark){animation:af-fade-up .8s var(--af-ease) both}
.af-reserve-done>:nth-child(2){animation-delay:.15s}
.af-reserve-done>:nth-child(3){animation-delay:.25s}
.af-reserve-done>:nth-child(n+4){animation-delay:.38s}
.af-reserve-done .af-h3{font-size:clamp(30px,2.6vw,40px);font-weight:200;letter-spacing:-.03em}
.af-reserve-done>p:not(.af-label):not(.af-small){color:var(--fg-2)}
.af-reserve-done:focus{outline:none}
/* Feld für Bots: nie sichtbar, nie fokussierbar */
.af-hp{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
/* Karte: das Formular auf einer ruhigen Fläche, oben eine Lichtkante */
.af-reserve-wrap--card{--af-card-pad:clamp(20px,3vw,44px);position:relative;padding:var(--af-card-pad);background:linear-gradient(180deg,#ffffff0a,#ffffff03 40%,#ffffff02);border:1px solid var(--hair);-webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);box-shadow:0 40px 80px -50px #000000}
.af-reserve-wrap--card::before{content:"";position:absolute;left:12%;right:12%;top:-1px;height:1px;background:linear-gradient(90deg,#ffffff00,color-mix(in srgb,var(--accent) 80%,#fff),#ffffff00);opacity:.7}
.af-reserve-wrap--card .af-reserve-done{padding-top:0;border-top:0}
/* Ihre Auswahl: eine kleine Bühne oben in der Karte – die drei Lautsprecher im Größenverhältnis auf einer Bodenlinie, warmes
   Licht von oben; die gewählte Serie steht im Lichtkegel, die anderen treten zurück (wie im Showroom). Darunter die Wahl in Worten. */
.af-pick{--af-pick-h:clamp(112px,min(11vw,15.5vh),168px);position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:stretch;gap:12px;padding-bottom:22px;margin:calc(-1 * var(--af-card-pad,0px)) calc(-1 * var(--af-card-pad,0px)) 26px;padding-top:clamp(20px,2.4vw,32px);border-bottom:1px solid var(--hair);
  background:radial-gradient(ellipse 46% 62% at 50% 0,color-mix(in srgb,var(--accent) 13%,transparent),transparent 72%),radial-gradient(ellipse 52% 26% at 50% calc(100% - 64px),#00000080,transparent 70%)}
.af-pick-minis{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:clamp(16px,3.4cqw,34px);height:var(--af-pick-h);padding:0 16px}
/* Bodenlinie auf Höhe der Standfläche (die Bilder tragen darunter Schatten und Spiegelung) */
.af-pick-minis::after{content:"";position:absolute;left:14%;right:14%;bottom:calc(var(--af-pick-h) * var(--af-floor,.09));height:1px;background:linear-gradient(90deg,#ffffff00,var(--hair-2) 25%,var(--hair-2) 75%,#ffffff00);pointer-events:none}
.af-mini{position:relative;z-index:1;display:block;height:var(--af-pick-h);width:calc(var(--af-pick-h) * var(--af-ar));opacity:.55;filter:brightness(.72) saturate(.75);transition:opacity .7s var(--af-ease),filter .7s var(--af-ease)}
/* Lichtkegel über dem Lautsprecher: nur beim gewählten */
.af-mini::before{content:"";position:absolute;z-index:-1;left:50%;bottom:calc(var(--af-pick-h) * var(--af-floor,.09));width:max(170%,120px);height:118%;transform:translateX(-50%);background:radial-gradient(ellipse 50% 100% at 50% 0,color-mix(in srgb,var(--accent) 20%,transparent),transparent 78%),radial-gradient(ellipse 42% 10% at 50% 100%,color-mix(in srgb,var(--accent) 26%,transparent),transparent 80%);opacity:0;transition:opacity .9s var(--af-ease);pointer-events:none}
.af-mini.af-is-on::before{opacity:1}
.af-mini-img{position:absolute;inset:0;display:block;animation:af-fade .7s var(--af-ease) both}
.af-mini img{display:block;width:100%;height:100%}
.af-pick--chosen .af-mini{opacity:.3;filter:brightness(.55) saturate(.5)}
.af-pick--chosen .af-mini.af-is-on{opacity:1;filter:none}
.af-pick-text{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;padding:0 16px;text-align:center}
.af-pick-value{font-size:clamp(20px,1.7vw,24px);font-weight:300;line-height:1.25;letter-spacing:-.01em;color:var(--fg);animation:af-fade-up .6s var(--af-ease) both}
.af-pick-hint{font-size:14px;line-height:1.45;color:var(--fg-3)}
.af-pick-hint .af-pick-link{margin-top:4px;font-size:14px}
@container (max-width:400px){
  .af-pick{--af-pick-h:132px}
}
/* Serie und Ausführung nebeneinander nur, wenn beide Namen ganz hineinpassen („Dunkelrot & Schwarz“, „Hornspeaker · H1–H3“) */
@container (max-width:460px){
  .af-reserve{grid-template-columns:1fr}
}
@container (max-width:400px){
  .af-reserve-actions .af-btn{flex:1 1 100%}
}

/* Frequenzbereich: logarithmische Achse, je Modell ein Balken, dahinter der Hörbereich */
.af-fr{margin:0 0 16px;padding:18px 0 0;border-top:1px solid var(--hair)}
.af-fr-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px 24px;margin-bottom:16px}
.af-fr-legend{display:inline-flex;align-items:center;gap:10px;font-size:13px;line-height:1.3;color:var(--fg-3)}
.af-fr-legend i{display:block;width:18px;height:10px;background:color-mix(in srgb,var(--accent) 10%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent)}
.af-fr-plot{--af-fr-label:var(--af-sheet-key,72px);--af-fr-val:150px;--af-fr-gap:4px;position:relative;display:grid;grid-template-columns:var(--af-fr-label) minmax(0,1fr) var(--af-fr-val);row-gap:var(--af-fr-gap);padding-bottom:28px}
/* Die Achse beginnt (10 Hz) mit einer Linie – auf der Kante der Modellspalten der Tabelle darunter */
.af-fr-scale{position:absolute;top:-6px;bottom:22px;left:var(--af-fr-label);right:var(--af-fr-val);border-left:1px solid var(--hair);pointer-events:none}
.af-fr-band{position:absolute;top:0;bottom:0;background:color-mix(in srgb,var(--accent) 6%,transparent);border-left:1px solid color-mix(in srgb,var(--accent) 26%,transparent);border-right:1px solid color-mix(in srgb,var(--accent) 26%,transparent)}
.af-fr-tick{position:absolute;top:0;bottom:0;width:1px;background:var(--hair)}
.af-fr-tick b{position:absolute;top:calc(100% + 8px);left:0;transform:translateX(-50%);font-size:11px;font-weight:500;letter-spacing:.06em;color:var(--fg-3);font-variant-numeric:tabular-nums;white-space:nowrap}
/* Einheit auf der Zeile der Achsenwerte (gleiche Höhe, gleiche Schrift), rechts vom Ende der Achse */
.af-fr-unit{position:absolute;top:calc(100% + 8px);left:100%;margin-left:10px;font-size:11px;font-weight:500;letter-spacing:.06em;color:var(--fg-3);white-space:nowrap}
.af-fr-row{display:contents}
.af-fr-model{align-self:center;font-size:15px;font-weight:300;color:var(--fg);font-variant-numeric:tabular-nums}
.af-fr-track{position:relative;height:30px}
.af-fr-bar{position:absolute;top:50%;height:6px;margin-top:-3px;border-radius:3px;background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 55%,transparent),var(--accent) 22%,color-mix(in srgb,var(--accent) 70%,#fff) 60%,var(--accent));box-shadow:0 0 14px color-mix(in srgb,var(--accent) 35%,transparent);transform-origin:0 50%}
/* Werte rechtsbündig – auf einer Kante mit Legende, Tabelle und Vermerk */
.af-fr-val{align-self:center;padding-left:20px;text-align:right;font-size:14px;color:var(--fg-2);font-variant-numeric:tabular-nums;white-space:nowrap}
@media (prefers-reduced-motion:no-preference){
  .af-fr-bar{animation:af-fr-grow 1.2s cubic-bezier(.2,.7,.2,1) var(--d,0s) both}
}
@keyframes af-fr-grow{from{transform:scaleX(0);opacity:.2}to{transform:none;opacity:1}}
@container (max-width:700px){
  .af-fr{margin:20px 0 28px;padding-top:22px}
  .af-fr-plot{--af-fr-label:40px;--af-fr-val:0px;grid-template-columns:var(--af-fr-label) minmax(0,1fr)}
  /* Schmal: der Wert klein unter seinem Balken, bündig mit dessen Anfang */
  .af-fr-model{grid-column:1}
  .af-fr-track{grid-column:2;height:24px}
  .af-fr-val{grid-column:2;align-self:start;margin-top:-6px;padding:0 0 6px var(--af-fr-from,0);text-align:left;font-size:12px;line-height:1.3}
  .af-fr-unit{left:auto;right:0;margin-left:0}
  .af-fr-tick--minor b{display:none}
}

/* --- Perks (Liste mit Schlüssel und Text) -------------------------------------------- */
.af-perks{display:grid;width:100%;max-width:34em;border-top:1px solid var(--hair);container-type:inline-size}
.af-perks li{display:grid;grid-template-columns:150px 1fr;gap:6px 24px;padding:18px 0;border-bottom:1px solid var(--hair);color:var(--fg-2)}
.af-perk-key{color:var(--fg)}
.af-perk-text{text-wrap:pretty}
@container (max-width:460px){.af-perks li{grid-template-columns:1fr;gap:2px}}

/* --- Film (Bildfolge im stehenden Rahmen) ----------------------------------------------------------------------------------
   Eigenes Bild statt Panorama (deckend, ink darunter). Mit Script und Bewegung steht der Rahmen unter der Kopfzeile und füllt den
   Bildschirm, solange man den Weg scrollt (--af-run als Platz darunter); sonst (af-film--static, ohne Script, reduzierte
   Bewegung) ein Bild in voller Breite, die Schritte offen darunter. Kopf oben links, Tafel unten rechts wie im Antrieb */
.af-film{position:relative;z-index:var(--layer-content);background:var(--ink)}
.af-film{--af-film-h:clamp(360px,62.5vw,80vh)}
.af-film-frame{position:relative}
.af-film-media{position:relative;height:var(--af-film-h);overflow:hidden}
.af-film-scrim{position:absolute;left:0;right:0;top:0;height:var(--af-film-h)}
.af-film-fx{position:absolute;inset:0}
.af-film .af-film-cap{top:calc(var(--af-film-h) - 44px);bottom:auto}
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){
  .af-film:not(.af-film--static)::after{content:"";display:block;height:var(--af-run,150svh)}
  .af-film:not(.af-film--static)>.af-film-frame{position:sticky;top:var(--header-h);height:calc(100svh - var(--header-h));overflow:hidden}
  .af-film:not(.af-film--static) :is(.af-film-media,.af-film-scrim){position:absolute;inset:0;height:auto}
  /* inset (Schnitt): im Hochformat steht das Bild zwischen Kopf und Tafel und läuft oben und unten ins Dunkel – der Schnitt
     ist hell und kleinteilig, Überschrift und Knopf lägen sonst darauf */
  @media (max-width:760px) and (orientation:portrait){
    .af-film--inset:not(.af-film--static) .af-film-media{top:clamp(150px,26svh,240px);bottom:clamp(170px,30svh,260px);-webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent)}
  }
  /* Handy quer: wenig Höhe – Lead und Bildunterschrift entfallen, die Tafel bekommt einen dunklen Grund */
  @media (max-height:520px) and (orientation:landscape){
    .af-film-head .af-lede,.af-film .af-film-cap{display:none}
    .af-film:not(.af-film--static) .af-film-scrim{background:linear-gradient(180deg,var(--ink) 0,color-mix(in srgb,var(--ink) 55%,transparent) 14%,transparent 40%),linear-gradient(270deg,color-mix(in srgb,var(--ink) 90%,transparent) 0,color-mix(in srgb,var(--ink) 80%,transparent) 42%,transparent 66%),linear-gradient(90deg,color-mix(in srgb,var(--ink) 60%,transparent) 0,transparent 36%)}
  }
  .af-film:not(.af-film--static) .af-film-cap{top:auto;bottom:clamp(20px,2.6vw,36px)}
}
/* Bänder daneben stoßen im Dunkel an (wie an ein Fenster mit Weg) */
.af-film+.af-band{--af-fade-top:0px;--af-ink-top:var(--af-from-ink)}
.af-band:has(+ .af-film){--af-fade-bottom:0px;--af-ink-bottom:var(--af-to-ink)}
.af-film-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.86)}
.af-film-fx{width:100%;height:100%;z-index:1;pointer-events:none}
/* Kopf und Tafel stehen auf dem Bild: oben aus ink (Kopfzeile, Übergang aus dem Band davor), links und unten dunkler */
.af-film-scrim{z-index:1;pointer-events:none;background:
  linear-gradient(180deg,var(--ink) 0,color-mix(in srgb,var(--ink) 62%,transparent) 7%,color-mix(in srgb,var(--ink) 18%,transparent) 30%,transparent 46%,transparent 56%,color-mix(in srgb,var(--ink) 64%,transparent) 82%,color-mix(in srgb,var(--ink) 88%,transparent) 100%),
  linear-gradient(90deg,color-mix(in srgb,var(--ink) 58%,transparent) 0,color-mix(in srgb,var(--ink) 20%,transparent) 34%,transparent 52%)}
.af-film-head{position:absolute;left:0;right:0;top:clamp(28px,6vh,64px);z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:16px;pointer-events:none}
.af-film-head>*{max-width:min(30em,48%);margin:0;text-shadow:var(--text-on-image)}
.af-film-head a,.af-film-head button{pointer-events:auto}
.af-film-info,.af-film-cap{z-index:2}
.af-film-cap{color:var(--fg-2)}
/* Marken und Maße über dem Bild (Ebene so groß wie das Bild im Rahmen): Punkt in accent, Linie hinaus, Name im Label-Stil */
.af-film-over{position:absolute;z-index:1;pointer-events:none}
.af-film-mark{position:absolute;width:0;height:0}
.af-film-mark::before{content:"";position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:var(--radius-dot);background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent),0 0 14px color-mix(in srgb,var(--accent) 60%,transparent);opacity:0;transform:scale(.4);transition:opacity .4s var(--af-ease),transform .5s var(--af-ease)}
.af-film-mark-name{position:absolute;left:12px;top:0;display:flex;align-items:center;gap:10px;white-space:nowrap;transform:translate3d(-6px,-50%,0);font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--fg);text-shadow:var(--text-on-image);opacity:0;transition:opacity .4s var(--af-ease),transform .6s var(--af-ease)}
.af-film-mark-name::before{content:"";width:clamp(28px,4vw,64px);height:1px;background:color-mix(in srgb,var(--fg) 70%,transparent)}
.af-film-mark--left .af-film-mark-name{left:auto;right:12px;flex-direction:row-reverse;transform:translate3d(6px,-50%,0)}
.af-film-mark.af-is-on::before{opacity:1;transform:none;transition-delay:calc(var(--d,0) * 90ms)}
.af-film-mark.af-is-on .af-film-mark-name{opacity:1;transform:translate3d(0,-50%,0);transition-delay:calc(var(--d,0) * 90ms + 120ms)}
.af-film-dims{position:absolute;inset:0;width:100%;height:100%;overflow:visible;opacity:0;transition:opacity .6s var(--af-ease)}
.af-film-dims line{stroke:var(--accent);stroke-width:1.2;vector-effect:non-scaling-stroke}
.af-film-dims.af-is-on{opacity:1}
.af-film-dim{position:absolute;padding:3px 8px;transform:translate(-50%,-50%);background:color-mix(in srgb,var(--ink) 70%,transparent);font-size:12px;font-weight:500;letter-spacing:.16em;color:var(--accent);white-space:nowrap;opacity:0;transition:opacity .6s var(--af-ease) .2s}
.af-film-dim--h{transform:translate(-50%,-50%) rotate(-90deg)}
.af-film-dim.af-is-on{opacity:1}
@media (max-width:760px){.af-film-mark-name{font-size:11px;letter-spacing:.12em}.af-film-mark-name::before{width:20px}}
@media (prefers-reduced-motion:reduce){.af-film-mark::before,.af-film-mark-name,.af-film-dims,.af-film-dim{transition:none}}
/* Ohne Weg: die Schritte offen unter dem Bild, nebeneinander */
.af-film-info:not(.af-is-live){position:relative!important;width:100%;height:auto;margin:0 auto;overflow:visible;clip:auto;white-space:normal;padding:clamp(28px,4vw,48px) max(var(--af-gutter),env(safe-area-inset-right,0px)) clamp(28px,4vw,48px) max(var(--af-gutter),env(safe-area-inset-left,0px))}
.af-film-info:not(.af-is-live) .af-explode-intro{display:none}
.af-film-info:not(.af-is-live) .af-explode-panel{width:100%}
.af-film-info:not(.af-is-live) .af-explode-steps{grid-row:auto;grid-template-rows:none;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:24px var(--af-gap,32px)}
.af-film-info:not(.af-is-live) .af-explode-step{grid-column:auto;grid-row:auto;display:flex;flex-direction:column;gap:6px}
.af-film-info:not(.af-is-live) .af-explode-num{padding-top:14px}
@media (max-width:760px){
  .af-film-head>*{max-width:none}
  .af-film-info:not(.af-is-live) .af-explode-steps{grid-template-columns:minmax(0,1fr)}
  .af-film-scrim{background:linear-gradient(180deg,var(--ink) 0,color-mix(in srgb,var(--ink) 70%,transparent) 8%,color-mix(in srgb,var(--ink) 30%,transparent) 32%,transparent 46%,transparent 52%,color-mix(in srgb,var(--ink) 72%,transparent) 74%,color-mix(in srgb,var(--ink) 92%,transparent) 100%)}
}
@media print{.af-film-fx{display:none}}

/* --- SiteHeader -------------------------------------------------------------------- */
.af-header{position:fixed;inset:0 0 auto;z-index:var(--layer-header);padding-top:env(safe-area-inset-top,0px);border-bottom:1px solid transparent;transition:background-color .5s var(--af-ease),border-color .5s var(--af-ease),transform .6s var(--af-ease)}
/* Beim Weiterlesen nach unten weicht die Kopfzeile, beim Zurückscrollen kommt sie wieder */
.af-header.af-is-away{transform:translate3d(0,-100%,0)}
.af-header--static{position:relative}
/* Beim Scrollen keine Fläche, kein Balken: Der Verlauf aus dem Hero bleibt, dazu ein Weichzeichner mit einem Hauch ink, der nach unten
   ausläuft – Bild und Bühne gehen bis an die Oberkante durch, Text darunter verschwimmt hinter Logo und Menü */
.af-header::after{content:"";position:absolute;inset:0 0 calc(-1 * clamp(28px,4vh,48px));z-index:-2;pointer-events:none;background:color-mix(in srgb,var(--ink) 50%,transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);-webkit-mask-image:linear-gradient(180deg,#000 45%,transparent);mask-image:linear-gradient(180deg,#000 45%,transparent);opacity:0;transition:opacity .5s var(--af-ease)}
.af-header.af-is-solid::after{opacity:1}
.af-header--static::after{display:none}
@media (prefers-reduced-transparency:reduce){.af-header.af-is-solid{background:var(--ink)}.af-header::after{display:none}}
/* Über dem Bild (Hero, noch nicht solid): ein leiser Verlauf aus dem Dunkel hinter Logo und Menü – helle Wolken und Kanten
   im Panorama stehen sonst unruhig hinter der Schrift. Weich auslaufend (smoothstep), keine Kante */
.af-header::before{content:"";position:absolute;inset:0 0 calc(-1 * clamp(28px,4vh,48px));z-index:-1;pointer-events:none;background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 64%,transparent),color-mix(in srgb,var(--ink) 52%,transparent) 30%,color-mix(in srgb,var(--ink) 30%,transparent) 60%,color-mix(in srgb,var(--ink) 9%,transparent) 85%,transparent);transition:opacity .5s var(--af-ease)}
.af-header--static::before{opacity:0}
.af-header-inner{height:var(--header-h);display:flex;align-items:center;gap:clamp(24px,3vw,48px)}
.af-nav{display:flex;gap:clamp(22px,2.8vw,44px);margin-left:auto}
.af-nav a{position:relative;padding-block:10px;font-size:12px;font-weight:500;line-height:1.4;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-2);text-shadow:var(--text-on-image);transition:color .3s var(--af-ease)}
.af-nav a::after{content:"";position:absolute;left:50%;bottom:0;width:18px;margin-left:-9px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--af-ease)}
.af-nav a:hover,.af-nav a[aria-current="true"]{color:var(--fg)}
.af-nav a[aria-current="true"]::after{transform:scaleX(1)}
.af-nav a:not([aria-current="true"]):hover::after{transform:scaleX(1);background:var(--hair-strong)}
.af-menu-btn{display:none;flex-direction:column;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-10px;padding:0;background:none;border:0;cursor:pointer}
.af-menu-btn span{display:block;width:22px;height:1px;background:var(--fg);transition:transform .35s var(--af-ease)}
.af-menu-btn span+span{margin-top:7px}
.af-menu-btn[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.af-menu-btn[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}
.af-menu{position:fixed;inset:0;z-index:var(--layer-menu);display:flex;flex-direction:column;justify-content:space-between;gap:40px;background:var(--ink);padding:calc(var(--header-h) + 32px + env(safe-area-inset-top,0px)) max(var(--af-gutter),env(safe-area-inset-right,0px)) calc(40px + env(safe-area-inset-bottom,0px)) max(var(--af-gutter),env(safe-area-inset-left,0px))}
/* Niedrige Bildschirme: das Menü scrollt in sich, die Seite dahinter nicht */
.af-menu{overflow-y:auto;overscroll-behavior:contain}
/* Offenes Menü: „Jetzt vormerken“ steht darin – „Vormerken“ oben tritt zurück (behält seinen Platz, der Menü-Knopf bleibt stehen) */
.af-header.af-is-open .af-header-cta{visibility:hidden}
.af-menu:not([hidden]){animation:af-fade .35s var(--af-ease) both}
.af-menu-nav{display:flex;flex-direction:column}
.af-menu-link{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:clamp(32px,8.5vw,44px);font-weight:200;letter-spacing:-.03em;line-height:1.2;padding-block:10px;border-bottom:1px solid var(--hair)}
.af-menu-link[aria-current="true"] span{padding-bottom:2px;background:linear-gradient(var(--accent),var(--accent)) left bottom / 100% 1px no-repeat}
.af-menu-link .af-icon{width:20px;height:20px;opacity:.45;transition:transform .4s var(--af-ease),opacity .4s var(--af-ease)}
.af-menu-link:hover .af-icon,.af-menu-link:focus-visible .af-icon{opacity:1;transform:translateX(4px)}
.af-menu-foot{display:flex;flex-direction:column;align-items:stretch;gap:18px}
.af-menu-foot .af-label{text-align:center}
@media (prefers-reduced-motion:no-preference){.af-menu-link,.af-menu-foot{animation:af-rise .7s var(--af-ease) both;animation-delay:calc(var(--af-i,0) * 45ms + 80ms)}}
/* „Vormerken“ oben eine Stufe leiser als die Hauptaktion im Inhalt */
.af-header-cta.af-btn{height:38px;padding:0 20px;font-size:13px}
@media (max-width:1080px){
  .af-nav{display:none}
  .af-menu-btn{display:flex}
  .af-header-cta{margin-left:auto}
}
@media (max-width:760px){
  .af-header-cta.af-btn{height:36px;padding:0 14px;font-size:13px}
}
/* Handy-Logo in der Kopfzeile: schmal oder niedrig (Handy quer) */
@media (max-width:760px),(max-height:500px){
  .af-header .af-brand{gap:10px}
  .af-header .af-brand-mark{height:30px}
  .af-header .af-brand-word{height:11px}
}
/* Schmale Handys: Logo (nie unter 30 / 11 px), „Vormerken“ und Menü passen nebeneinander, ohne dass Knopf oder Menü
   gestaucht werden. Unter 350 px ist dafür kein Platz – dann steht „Vormerken“ nur im Menü (und im Hero) */
@media (max-width:420px){
  .af-header-inner{gap:12px}
  .af-header-cta.af-btn{padding:0 10px}
  .af-header-cta,.af-menu-btn{flex:none}
}
@media (max-width:350px){
  .af-header-cta{display:none}
  .af-menu-btn{margin-left:auto}
}

/* --- ScrollTimeline (Kapitel-Leiste) -------------------------------------------------
   Breit (ab 1081 px, wie die Navigation der Kopfzeile): eine Leiste rechts im Rand neben dem Inhalt (Punkte 36–50 px vom Rand,
   der Inhalt endet dort frühestens 59 px davor). Schmal: Segmente an der Unterkante der Kopfzeile, darunter beim Scrollen
   das Kapitel. Unsichtbar ist beides auch nicht fokussierbar (visibility) – außer der Fokus steht schon darin */
.af-tl{display:contents;--af-tl-r:clamp(14px,1.6vw,32px)}
.af-tl-nav,.af-tl-bar{position:fixed;z-index:calc(var(--layer-menu) - 1);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .5s var(--af-ease),transform .7s var(--af-ease),visibility 0s linear .5s}
.af-tl.af-is-on>.af-tl-nav,.af-tl.af-is-on>.af-tl-bar,.af-tl-nav:focus-within{opacity:1;visibility:visible;transition-delay:0s}
.af-tl p{margin:0}
.af-tl-num{font-variant-numeric:tabular-nums lining-nums}
@keyframes af-tl-in{from{opacity:0}}
@media (min-width:1081px){
  .af-tl-bar{display:none}
  /* Mitte des Bereichs unter der Kopfzeile */
  .af-tl-nav{top:calc(50% + var(--header-h) / 2);right:var(--af-tl-r);display:flex;flex-direction:column;align-items:center;gap:18px;transform:translate3d(10px,-50%,0)}
  .af-tl.af-is-on>.af-tl-nav,.af-tl-nav:focus-within{transform:translate3d(0,-50%,0)}
  .af-tl-count{display:flex;flex-direction:column;align-items:center;gap:7px;font-size:12px;font-weight:500;line-height:1;letter-spacing:.08em;font-variant-numeric:tabular-nums lining-nums;color:var(--fg);text-shadow:var(--text-on-image)}
  .af-tl-total{padding-top:7px;border-top:1px solid var(--hair-strong);color:var(--fg-3)}
  /* Die ganze Spalte zählt als Zeigen – zwischen den Punkten fielen die Namen sonst weg */
  .af-tl-rail{position:relative;width:28px;height:clamp(200px,38vh,360px);pointer-events:auto}
  /* Beim Zeigen: die Namen auf einem Schleier, der vom Rand kommt */
  .af-tl-rail::before{content:"";position:absolute;top:-48px;bottom:-48px;right:calc(-1 * var(--af-tl-r));width:320px;background:linear-gradient(270deg,var(--shade-scrim) 35%,transparent);-webkit-mask-image:linear-gradient(180deg,transparent,#000 48px,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(180deg,transparent,#000 48px,#000 calc(100% - 48px),transparent);opacity:0;pointer-events:none;transition:opacity .45s var(--af-ease)}
  .af-tl-track{position:absolute;top:0;bottom:0;left:50%;width:1px;margin-left:-.5px;background:var(--hair-image)}
  /* Die Füllung läuft aus dem Dunkel ins Champagner – ihr Ende (der Kopf) steht, wo man gerade ist */
  .af-tl-fill{position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 30%,transparent),var(--accent));transform:scaleY(var(--af-tl-f,0));transform-origin:top}
  .af-tl-head{position:absolute;top:0;left:50%;width:5px;height:100%;margin-left:-2.5px;pointer-events:none;transform:translate3d(0,calc(var(--af-tl-f,0) * 100%),0)}
  .af-tl-head::after{content:"";position:absolute;top:-2.5px;left:0;width:5px;height:5px;border-radius:var(--radius-dot);background:var(--accent);box-shadow:0 0 10px 2px color-mix(in srgb,var(--accent) 50%,transparent)}
  .af-tl-list{position:absolute;inset:0;margin:0;padding:0;list-style:none}
  .af-tl-item{position:absolute;left:0;right:0;top:calc(var(--k) / (var(--n) - 1) * 100%);height:0}
  .af-tl-link{position:absolute;top:-14px;left:0;display:block;width:28px;height:28px;color:var(--fg-2)}
  .af-tl-dot{position:absolute;top:50%;left:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border:1px solid var(--hair-strong);border-radius:var(--radius-dot);background:var(--ink);transition:transform .45s var(--af-ease),background-color .45s var(--af-ease),border-color .45s var(--af-ease),box-shadow .45s var(--af-ease)}
  .af-tl-item.af-is-done .af-tl-dot{border-color:transparent;background:color-mix(in srgb,var(--accent) 55%,var(--ink))}
  .af-tl-item.af-is-on .af-tl-dot{border-color:var(--accent);background:var(--accent);transform:scale(1.3);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent),0 0 14px color-mix(in srgb,var(--accent) 45%,transparent)}
  .af-tl-link:hover .af-tl-dot{border-color:var(--fg);transform:scale(1.3)}
  .af-tl-link:focus-visible{outline-offset:-4px}
  /* Touch (iPad quer): 44 × 44 px um den Punkt */
  @media (pointer:coarse){.af-tl-link{top:-22px;left:-8px;width:44px;height:44px}.af-tl-link:focus-visible{outline-offset:-12px}}
  /* Namen links der Punkte – nur beim Zeigen oder mit Fokus, nacheinander; sonst fangen sie keine Klicks ab */
  .af-tl-name{position:absolute;top:50%;right:34px;padding-block:6px;white-space:nowrap;font-size:12px;font-weight:500;line-height:1.3;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-2);text-shadow:var(--text-on-image);opacity:0;pointer-events:none;transform:translate3d(8px,-50%,0);transition:opacity .35s var(--af-ease),transform .5s var(--af-ease),color .3s var(--af-ease)}
  .af-tl-name .af-tl-num{margin-right:12px;color:var(--fg-3);transition:color .3s var(--af-ease)}
  .af-tl-rail:hover::before,.af-tl-rail:focus-within::before{opacity:1}
  .af-tl-rail:hover .af-tl-name,.af-tl-rail:focus-within .af-tl-name{opacity:1;pointer-events:auto;transform:translate3d(0,-50%,0);transition-delay:calc(var(--k) * 28ms)}
  .af-tl-link:hover .af-tl-name,.af-tl-link:focus-visible .af-tl-name,.af-tl-item.af-is-on .af-tl-name{color:var(--fg)}
  .af-tl-item.af-is-on .af-tl-num{color:var(--accent)}
  /* Das aktuelle Kapitel unter der Leiste, senkrecht im Rand */
  .af-tl-current{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;font-size:12px;font-weight:500;line-height:1;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-2);text-shadow:var(--text-on-image);animation:af-tl-in .6s var(--af-ease) both;transition:opacity .35s var(--af-ease)}
  .af-tl-rail:hover~.af-tl-current,.af-tl-rail:focus-within~.af-tl-current{opacity:0}
}
@media (min-width:1081px) and (max-height:560px){.af-tl-current{display:none}}
@media (max-width:1080px){
  .af-tl-nav{display:none}
  /* Über der Kopfzeile, auf ihrer Unterkante (deckt die Haarlinie) – unter dem offenen Menü nicht */
  .af-tl-bar{top:calc(var(--header-h) + env(safe-area-inset-top,0px) - 1px);left:0;right:0;z-index:calc(var(--layer-header) + 1)}
  .af-menu:not([hidden])~.af-tl>.af-tl-bar{opacity:0;visibility:hidden}
  .af-tl-segs{display:flex;gap:3px;height:2px}
  .af-tl-seg{position:relative;flex:1;overflow:hidden;background:var(--hair-image)}
  .af-tl-seg::after{content:"";position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:left}
  .af-tl-seg.af-is-done::after{transform:scaleX(1);background:color-mix(in srgb,var(--accent) 55%,var(--ink))}
  .af-tl-seg.af-is-on::after{transform:scaleX(var(--af-tl-p,0))}
  .af-tl-tag{position:absolute;top:10px;right:max(var(--af-gutter),env(safe-area-inset-right,0px));display:flex;align-items:baseline;gap:10px;padding:7px 12px;border:1px solid var(--hair);background:color-mix(in srgb,var(--ink) 92%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 8px 28px #000a;font-size:12px;font-weight:500;line-height:1.2;letter-spacing:.16em;text-transform:uppercase;color:var(--fg);opacity:0;transform:translate3d(0,-4px,0);transition:opacity .4s var(--af-ease),transform .5s var(--af-ease)}
  .af-tl-tag .af-tl-num{letter-spacing:.08em;color:var(--accent)}
  .af-tl.af-is-moving .af-tl-tag{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){.af-tl-nav,.af-tl-bar,.af-tl-dot,.af-tl-name,.af-tl-tag,.af-tl-rail::before{transition:none}.af-tl-current{animation:none}}
@media print{.af-tl{display:none}}

/* --- SiteFooter---------------------------------------------------------------------- */
.af-footer{container-type:inline-size;padding-top:clamp(48px,5vw,80px);padding-bottom:calc(32px + env(safe-area-inset-bottom,0px))}
/* Der Footer deckt: ink statt shade über dem weichgezeichneten Panorama – unten auf der Seite ist das Bild ein unruhiger,
   heller Fleck (Abendhimmel) und schimmerte durch; der warme Horizont (af-footer-glow) bleibt das einzige Licht */
.af-footer.af-band{--af-fade-bottom:0px;--shade:var(--ink)}
.af-footer.af-band::before{display:none}
/* Abendlicht am Fuß: warmer Horizont (accent) aus der Unterkante, darüber ein Hauch Kupfer – leise, nur ein Nachklang des
   Januar-Fensters. Der Inhalt liegt darüber. */
.af-footer{position:relative}
.af-footer>.af-container{position:relative;z-index:1}
.af-footer-glow{position:absolute;left:0;right:0;bottom:0;height:min(78%,520px);pointer-events:none;
  background:radial-gradient(ellipse 72% 70% at 50% 100%,color-mix(in srgb,var(--accent) 22%,transparent),color-mix(in srgb,var(--accent) 8%,transparent) 42%,transparent 76%),radial-gradient(ellipse 34% 24% at 50% 100%,color-mix(in srgb,#e8a35c 20%,transparent),transparent 80%)}
@media (prefers-contrast:more){.af-footer-glow{display:none}}
/* Die Wortmarke steht bündig mit dem Inhalt: im Bild beginnt sie 13 von 900 px vom linken Rand */
.af-footer-brand .af-brand--signoff{--af-logo-w:clamp(140px,12vw,180px);width:var(--af-logo-w);margin:-8px 0 4px calc(var(--af-logo-w) * -13 / 900)}
.af-footer-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:40px var(--af-gap)}
.af-footer-brand{grid-column:1 / span 5;display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.af-footer-brand .af-link{margin-top:8px}
.af-tagline{font-size:24px;font-weight:200;line-height:1.3;letter-spacing:-.02em;color:var(--fg-2)}
.af-footer-col{grid-column:span 2;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.af-footer-col:first-of-type{grid-column:7 / span 2}
.af-footer-col .af-label{margin-bottom:6px}
.af-footer-col a{font-size:15px;line-height:1.5;color:var(--fg-2);transition:color .3s var(--af-ease)}
.af-footer-col a:hover{color:var(--fg)}
.af-footer-base{display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin-top:clamp(40px,4.5vw,72px);padding-top:24px;border-top:1px solid var(--hair);font-size:14px;line-height:1.5;color:var(--fg-3)}
.af-footer-base .af-link{font-size:14px;font-weight:400;color:var(--fg-2)}
.af-footer-base .af-link:hover{color:var(--fg)}
@container (max-width:1000px){
  .af-footer-brand{grid-column:1 / -1}
  .af-footer-col,.af-footer-col:first-of-type{grid-column:span 4}
}
@container (max-width:700px){
  .af-footer-col,.af-footer-col:first-of-type{grid-column:span 6}
  .af-footer-base{flex-direction:column;align-items:flex-start}
}

@media (prefers-reduced-motion:reduce){
  /* auch Kinder ohne eigene Klasse (Haken der Bestätigung, Modell-Umrisse, Menü-Linien, Bild-Hinweise) – und ohne Verzögerung */
  [class*="af-"],[class*="af-"]::before,[class*="af-"]::after,:where([class*="af-"]) *,:where([class*="af-"]) *::before,:where([class*="af-"]) *::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
}

/* --- Niedrige Bildschirme (bis 840 px hoch): jede Sektion bleibt auf einer Bildschirmhöhe ------------------------------- */
@media (max-height:840px){
  .af-config--info:not(.af-config--scene) .af-show-head .af-head-text{display:none}
  .af-config--info:not(.af-config--scene) .af-swatch-meta{display:none}
  .af-sheet-head .af-h2{font-size:clamp(36px,4.4vw,46px)}
  .af-fr-plot{--af-fr-gap:2px}
  .af-sheet-head{margin-bottom:16px}
  .af-fr{margin-bottom:10px}
  .af-reserve-wrap--card{--af-card-pad:clamp(20px,3vw,32px)}
  .af-reserve{gap:14px 20px}
  .af-field{gap:8px}
  .af-input{height:52px}
}

/* --- Touch (grober Zeiger): jedes Ziel mindestens 44 × 44 px – über unsichtbare Flächen, das Layout bleibt ---------------- */
@media (pointer:coarse){
  .af-header .af-brand,.af-nav a,.af-link,.af-show-detail-btn,.af-sheet-more,.af-model,.af-swatch{position:relative}
  .af-header-cta.af-btn{overflow:visible}
  .af-show-info-actions{row-gap:22px}
  /* Proben unter der Bühne: 34 px breit – erst mit 10 px Abstand überlappen ihre 44-px-Flächen nicht (sonst läge die nächste Probe über der vorigen) */
  .af-scene-bar .af-swatches{gap:10px}
  .af-header .af-brand::before,.af-header-cta::before,.af-nav a::before,.af-link::after,.af-show-detail-btn::after,.af-sheet-more::after,.af-model::before,.af-swatch::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)}
  /* Footer-Links untereinander: 44 px hoch statt 23 px mit Abstand – die Flächen überlappen nicht */
  .af-footer-col{gap:0}
  .af-footer-col a{display:flex;align-items:center;min-height:44px}
  /* 360°: der Regler 44 px hoch, ohne mehr Platz zu nehmen; der Griff größer */
  .af-turn-range{height:44px;margin-block:-10px}
  .af-turn-range::-webkit-slider-thumb{width:22px;height:22px;margin-top:-10.5px}
  .af-turn-range::-moz-range-thumb{width:22px;height:22px}
  /* Mit Skala ist die Spur 9 px hoch – der große Griff sitzt dann um (9 − 22) / 2 höher */
  .af-scene-bar .af-turn-range::-webkit-slider-thumb{margin-top:-6.5px}
}

/* --- Kontrastmodus (forced-colors): Schatten, Verläufe und Flächenfarben fallen weg – Fokus, Auswahl und Proben bekommen
   Linien und Rahmen in Systemfarben ---------------------------------------------------------------------------------------- */
@media (forced-colors:active){
  :root{--af-focus:2px solid Highlight}
  /* Der Champagner-Rand des Haupt-Buttons ist ein Verlauf – hier ein Rand in Systemfarbe */
  .af-btn--light{border-color:ButtonText}
  .af-link{text-decoration:underline;text-underline-offset:5px}
  .af-menu-btn span{background:ButtonText}
  .af-header.af-is-solid{background:Canvas;border-bottom-color:CanvasText}
  .af-header::after{display:none}
  /* Gewählt, aktuell, gedrückt: die accent-Linien in Highlight */
  .af-nav a[aria-current="true"]::after,.af-model::after,.af-show-name::after,.af-scene-tab-name::after,.af-stage-chapter::after,.af-bp-item::after{background:Highlight}
  .af-model::after{height:2px}
  .af-stage-chapter::before,.af-bp-item::before{background:GrayText}
  .af-stage-num::after{background:Highlight}
  .af-stage-num::before{background:GrayText}
  .af-bp-num::after{background:Highlight}
  .af-menu-link[aria-current="true"] span{background:none;text-decoration:underline 2px Highlight;text-underline-offset:6px}
  .af-bp-num::before{background:GrayText}
  /* Handy: der Datenblatt-Umschalter ohne Fläche und Indikator – die gewählte Serie unterstrichen */
  @container (max-width:560px){.af-tab{text-decoration-line:none}.af-tab[aria-selected="true"]{text-decoration:underline 3px Highlight}}
  /* Das aktuelle Kapitel, der aktive Begriff: dort tritt sonst nur die Farbe zurück */
  .af-stage.af-is-live .af-stage-chapter[aria-current="true"] .af-stage-jump,.af-bp-item.af-is-on .af-bp-title{text-decoration:underline 2px Highlight;text-underline-offset:6px}
  .af-tab-ind{background:none;border-bottom:3px solid Highlight}
  .af-tabs:not(.af-tabs--ind) .af-tab[aria-selected="true"]{border-bottom:3px solid Highlight}
  .af-viewer-thumb{border:1px solid CanvasText}
  .af-tl-track,.af-tl-seg{background:GrayText}
  .af-tl-fill,.af-tl-seg::after,.af-tl-head::after{background:Highlight;box-shadow:none}
  .af-tl-dot{border-color:CanvasText;background:Canvas}
  .af-tl-item.af-is-done .af-tl-dot{background:GrayText}
  .af-tl-item.af-is-on .af-tl-dot{border-color:Highlight;background:Highlight;box-shadow:none}
  .af-tl-tag{border-color:CanvasText}
  .af-viewer-thumb[aria-current="true"]{border:3px solid Highlight}
  .af-bp-part.af-is-on{stroke:Highlight}
  /* Proben und Lackpunkte zeigen Produktfarben – sie bleiben, mit Rand; die gewählte Probe trägt einen Ring in Highlight */
  .af-swatch-chip,.af-hi-chips i{forced-color-adjust:none;border:1px solid CanvasText}
  .af-swatch[aria-checked="true"] .af-swatch-chip{box-shadow:0 0 0 3px Canvas,0 0 0 5px Highlight}
  /* Checkbox: das eigene Häkchen ist ein Bild in fester Farbe – hier zeichnet das System das Kästchen */
  .af-check input{-webkit-appearance:auto;appearance:auto;background:none}
  /* Auswahl: der Pfeil ist ein Bild in fester Farbe – das System zeichnet seinen eigenen */
  select.af-input{-webkit-appearance:auto;appearance:auto;background-image:none}
  .af-turn-range::-webkit-slider-runnable-track{background:CanvasText}
  .af-turn-range::-moz-range-track{background:CanvasText}
  .af-scene-bar .af-turn-range::-webkit-slider-runnable-track{height:1px;background:CanvasText}
  .af-scene-bar .af-turn-range::-moz-range-track{height:1px;background:CanvasText}
  .af-turn-range::-webkit-slider-thumb{background:Canvas;border-color:CanvasText}
  .af-turn-range::-moz-range-thumb{background:Canvas;border-color:CanvasText}
  .af-fr-bar{background:CanvasText}
  .af-fr-tick{background:GrayText}
  .af-fr-legend i,.af-show-detail-icon i{border:1px solid CanvasText}
  .af-note::before{background:CanvasText}
}

/* --- Ganz niedrige Bildschirme (Handy quer, bis 500 px hoch) ---------------------------------------------------------------
   Kopfzeile 56 px (:root oben) mit Handy-Logo; Menü oben bündig und kleiner; im Hero „Jetzt vormerken“ im ersten Bild und
   ohne Ausblenden beim Scrollen; die Vollbild-Ansicht stellt Bild und Text nebeneinander, ohne Vorschau-Leiste */
@media (max-height:500px){
  .af-menu{justify-content:flex-start;gap:24px;padding-top:calc(var(--header-h) + 12px + env(safe-area-inset-top,0px));padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}
  .af-menu-link{font-size:26px;padding-block:6px}
  .af-menu-foot{gap:12px}
  .af-hero{padding-top:calc(var(--header-h) + 20px)}
  .af-hero-copy{gap:14px;transform:none;opacity:1}
  .af-hero .af-hero-index-wrap{transform:none;opacity:1}
  /* Hier blendet nichts aus – also nehmen Text und Index auch nach af-hero--past Klicks an */
  .af-hero--past :is(.af-hero-copy,.af-hero-index-wrap){pointer-events:auto}
  .af-hero-kicker{font-size:26px}
  .af-hero-main{font-size:clamp(44px,17vh,70px)}
  .af-actions .af-btn{flex:none}
  .af-viewer-frame{grid-template-rows:auto minmax(0,1fr);gap:8px;padding-top:max(10px,env(safe-area-inset-top,0px));padding-bottom:max(12px,env(safe-area-inset-bottom,0px))}
  .af-viewer-thumbs{display:none}
  .af-viewer-stage{grid-template-columns:auto minmax(0,1fr) auto}
  .af-viewer-nav{display:grid}
  .af-viewer-figure{flex-direction:row;gap:clamp(16px,3vw,32px)}
  .af-viewer-media{width:min(60%,calc((100dvh - 90px) * 4 / 3));aspect-ratio:4 / 3}
  .af-viewer-cap{flex:1;min-width:0;max-width:20em;text-align:left}
}