/* gfzm.de — Stilblatt
   Geruest "Werkbank": bildgefuehrt statt textgefuehrt.
   Ein festes dunkles Band am linken Rand, ein randloses Aufschlagbild,
   wechselseitige Halbseiten aus Bild und Satz, Zitate ueber Bild,
   ein Bildstreifen statt einer Kachelreihe.
   Keine Kacheln, keine Karten, keine Schatten, kein Eckradius.
   Farbe kommt ausschliesslich aus den Tokens. */

:root{--grund:#E7EDF1;--flaeche:#D3DDE3;--haar:#BFCBD4;--tinte:#111E27;--mute:#45545F;--akzent:#1D6CA5;--akzents:#16537E;--tafel:#101E28;--tafelt:#E4ECF1;--tafela:#78B6E3}

:root{--rand:clamp(20px,4vw,64px);--breite:1280px;--band:64px;
 /* Oberkante des festgesetzten Kopfes. Auf der fertigen Seite 0.
    In der Vorschau setzt das Skript hier die Hoehe der Farbleiste
    ein, damit der Kopf nicht darunter verschwindet. */
 --kopf-fix:0px}

@font-face{font-family:Outfit;font-style:normal;font-weight:300 700;font-display:swap;
 src:url(/assets/fonts/outfit-var.woff2) format('woff2')}

/* Ersatzschrift, auf Outfits Laufweite gestellt.

   Ohne sie springt die Startseite beim Laden: bis die eigene Schrift da
   ist, setzt der Browser in der Systemschrift, und die laeuft breiter.
   Bei einer Ueberschrift von bis zu 104 px verschieben schon zwei
   Prozent Unterschied alles darunter - gemessen 0,3414 CLS, erlaubt
   sind 0,1.

   Gemessen im Browser gegen Arial: Outfit laeuft bei Gewicht 400 auf
   98,7 %, bei 600 auf 95,3 %. Daher zwei Schnitte. Die Ueberhaenge sind
   Outfits eigene (Oberlaenge 100 %, Unterlaenge 26 % der Geviertgroesse),
   geteilt durch die jeweilige Stauchung, damit die Zeilenhoehe gleich
   bleibt. Geladen wird nichts - local() nimmt, was da ist. */
@font-face{font-family:OutfitErsatz;font-style:normal;font-weight:300 500;
 src:local('Arial'),local('Helvetica'),local('Liberation Sans'),local('Roboto');
 size-adjust:98.7%;ascent-override:101.3%;descent-override:26.3%;line-gap-override:0%}
@font-face{font-family:OutfitErsatz;font-style:normal;font-weight:600 700;
 src:local('Arial'),local('Helvetica'),local('Liberation Sans'),local('Roboto');
 size-adjust:95.3%;ascent-override:104.9%;descent-override:27.3%;line-gap-override:0%}

*,*::before,*::after{box-sizing:border-box}
/* overflow-x nur auf html. Auf body macht es den Koerper selbst zum
   Rollbereich, und position:sticky darin haengt sich dann an einen
   Bereich, der nie rollt - die Farbleiste der Vorschau blieb so nicht
   oben stehen. html allein reicht, es wirkt auf das Fenster. */
html{overflow-x:hidden;overscroll-behavior-x:none}
body{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--grund);color:var(--tinte);
 font:400 17px/1.6 Outfit,OutfitErsatz,system-ui,-apple-system,sans-serif;
 -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
svg{display:block}
img{max-width:100%;display:block}
a{color:inherit}
@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}

/* ---- Typografie: harte Kontraste statt einer Skala in der Mitte ------- */
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.032em;line-height:1.02;
 text-wrap:balance;hyphens:auto;overflow-wrap:anywhere}
h1{font-size:clamp(40px,7.4vw,104px);letter-spacing:-.042em}
h2{font-size:clamp(26px,3.4vw,50px)}
h3{font-size:clamp(18px,1.5vw,21px);letter-spacing:-.02em}
h1 em,h2 em,h3 em{font-style:normal;color:var(--akzents)}
p{margin:0 0 1.05em}
/* b erbt die Farbe. Vorher stand hier fest var(--tinte) - auf hellem
   Grund derselbe Wert wie geerbt, auf jeder dunklen Flaeche aber
   dunkelblaue Schrift auf dunklem Grund. Genau so sind die
   Kanalnamen in der Werkbank unsichtbar geworden. */
b{font-weight:600;color:inherit}
.marker{font:600 10.5px/1 Outfit,OutfitErsatz,sans-serif;letter-spacing:.24em;
 text-transform:uppercase;margin:0 0 20px;color:var(--akzents)}
.gross{font-size:clamp(19px,1.9vw,25px);line-height:1.45;color:var(--tinte);
 font-weight:400;max-width:34ch}

/* ---- Das feste Band am linken Rand ----------------------------------- */
.band{display:none}
@media (min-width:1100px){
 .band{display:flex;position:fixed;left:0;top:0;bottom:0;width:var(--band);
  background:var(--tafel);color:var(--tafelt);z-index:50;
  flex-direction:column;align-items:center;justify-content:space-between;
  padding:18px 0 20px}
 .band-zeichen svg{width:30px;height:auto;color:var(--tafela)}
 .band-schrift{writing-mode:vertical-rl;transform:rotate(180deg);
  font:600 10px/1 Outfit,OutfitErsatz,sans-serif;letter-spacing:.34em;text-transform:uppercase;
  color:var(--tafelt);opacity:.62;white-space:nowrap}
 .band-mail{font:600 10px/1 Outfit,OutfitErsatz,sans-serif;letter-spacing:.2em;
  text-transform:uppercase;color:var(--tafela);text-decoration:none;
  writing-mode:vertical-rl;padding:10px 4px}
 .rahmen{margin-left:var(--band)}
}
.rahmen{position:relative}

/* ---- Kopf: liegt auf dem Bild, wird beim Scrollen fest ---------------- */
.kopf{position:absolute;top:0;left:0;right:0;z-index:40;
 display:flex;align-items:center;gap:26px;padding:20px var(--rand);
 color:#fff}
.kopf.fest{position:fixed;top:var(--kopf-fix);background:var(--grund);
 color:var(--tinte);border-bottom:1px solid var(--haar);padding-block:13px;
 animation:einschweben .3s ease}
@media (min-width:1100px){.kopf.fest{left:var(--band)}}
@keyframes einschweben{from{transform:translateY(-100%)}to{transform:none}}
.marke{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto}
.marke .zeichen svg{height:34px;width:auto;color:currentColor}
.marke .wort svg{height:14px;width:auto;color:currentColor}
.kopf.fest .marke .zeichen svg{color:var(--akzent)}
/* Der helle Knopf steht auf dem Foto. Sobald der Kopf hell wird,
   waere weiss auf hellgrau kaum noch zu sehen - dann der Akzent. */
.kopf.fest .knopf.hell{background:var(--akzent);color:#fff}
.kopf.fest .knopf.hell:hover{background:var(--akzents);color:#fff}
.wortblock{display:flex;flex-direction:column;gap:6px}
.absender{font:500 9px/1 Outfit,OutfitErsatz,sans-serif;letter-spacing:.2em;
 text-transform:uppercase;opacity:.82;white-space:nowrap}
.navi{display:flex;gap:26px;font-size:15px}
.navi a{text-decoration:none;opacity:.9;padding:8px 0}
.navi a:hover,.navi a[aria-current]{opacity:1}
.knopf{display:inline-block;text-decoration:none;background:var(--akzent);color:#fff;
 padding:13px 24px;font:500 15px/1 Outfit,OutfitErsatz,sans-serif;white-space:nowrap;border:0}
.knopf:hover{background:var(--akzents)}
.knopf.hell{background:#fff;color:var(--tafel)}
.knopf.hell:hover{background:var(--tafela);color:var(--tafel)}
.knopf.gross{padding:17px 32px;font-size:16px}
.menu{display:none;background:none;border:1px solid currentColor;
 width:44px;height:44px;cursor:pointer;position:relative;flex:0 0 auto;color:inherit}
.menu span,.menu::before,.menu::after{content:"";position:absolute;left:12px;right:12px;
 height:1.5px;background:currentColor}
.menu::before{top:15px}.menu span{top:21px}.menu::after{top:27px}
.mobilmenue{display:none;flex-direction:column;padding:8px var(--rand) 22px;
 background:var(--grund);border-bottom:1px solid var(--haar)}
.mobilmenue a{padding:14px 0;text-decoration:none;color:var(--tinte);font-size:17px;
 border-bottom:1px solid var(--haar)}
.mm-mail{color:var(--akzents)!important;border-bottom:0!important}

/* Menue offen: der Kopf nimmt denselben hellen Zustand an wie beim
   Rollen, und das aufgeklappte Menue haengt genau unter ihm. Ohne das
   stand die weisse Wortmarke auf dem hellen Menuegrund (1,14:1) und der
   erste Menuepunkt lag unter dem Loewen; weiter unten auf der Seite
   klappte das Menue ausserhalb des Sichtfensters auf. */
.kopf.offen{position:fixed;top:var(--kopf-fix);background:var(--grund);
 color:var(--tinte);border-bottom:1px solid var(--haar)}
.kopf.offen .marke .zeichen svg{color:var(--akzent)}
.kopf.offen .knopf.hell{background:var(--akzent);color:#fff}
.mobilmenue:not([hidden]){position:fixed;left:0;right:0;z-index:39;
 top:calc(var(--kopf-fix) + var(--kopf-hoehe,74px));
 max-height:calc(100vh - var(--kopf-fix) - var(--kopf-hoehe,74px));
 overflow-y:auto}

/* ---- Aufschlag: randloses Bild, Satz darauf --------------------------- */
.auf{position:relative;min-height:clamp(520px,80vh,860px);display:flex;
 align-items:flex-end;overflow:hidden;background:var(--tafel)}
.auf-bild{position:absolute;inset:0}
.auf-bild img{width:100%;height:100%;object-fit:cover;
 animation:atmen 34s ease-in-out infinite alternate}
@keyframes atmen{from{transform:scale(1)}to{transform:scale(1.06)}}
/* Zwei Schleier: einer von oben und unten fuer Kopf und Ueberschrift,
   einer von links, weil aller Text links steht. So bleibt die rechte
   Bildhaelfte sichtbar und die Schrift trotzdem ueber 4,5:1.
   Gemessen wird gegen den hellsten Bildpunkt hinter jedem Textblock. */
.auf-schleier{position:absolute;inset:0;background:
 linear-gradient(180deg,rgba(4,9,14,.88) 0%,rgba(4,9,14,.42) 17%,
  rgba(4,9,14,.34) 32%,rgba(4,9,14,.74) 60%,rgba(4,9,14,.92) 100%),
 linear-gradient(90deg,rgba(4,9,14,.62) 0%,rgba(4,9,14,.30) 48%,rgba(4,9,14,.04) 100%)}
/* Oben MUSS Luft fuer den Kopf bleiben. Mit padding-top:0 waechst der
   Satz nach oben unter den Kopf, sobald er hoeher wird als der
   Aufschlag - auf der ausgelieferten Seite lag die Markerzeile dann
   genau auf der Absenderzeile im Kopf. In der Vorschau fiel das nicht
   auf, weil die Farbleiste alles um ihre Hoehe nach unten schiebt. */
.auf-satz{position:relative;
 padding:clamp(112px,14vh,164px) var(--rand) clamp(38px,5vw,74px);
 color:#fff;max-width:1180px}
.auf-satz .marker{color:rgba(255,255,255,.86)}
.auf-satz h1{color:#fff}
.auf-satz h1 em{color:var(--tafela)}
.auf-lede{font-size:clamp(17px,1.4vw,20px);color:rgba(255,255,255,.9);
 max-width:44ch;margin:26px 0 0}
/* Knopf und Entlastungszeile: die Zeile steht UNTER dem Knopf, nicht
   daneben. Belegt in claude/43 - im Entscheidungsmoment wirkt sie am
   Knopf, im Fussbereich gar nicht. Daneben liest sie kaum jemand. */
.auf-fuss{display:flex;flex-direction:column;align-items:flex-start;
 gap:11px;margin:30px 0 0}
.auf-bei{font-size:14px;line-height:1.5;color:rgba(255,255,255,.82);
 max-width:52ch}
.auf-bei b{color:rgba(255,255,255,.95)}
.auf-linie{position:absolute;left:var(--rand);right:var(--rand);bottom:0;height:1px;
 background:rgba(255,255,255,.22)}

/* ---- Halbseite: Bild randlos, Satz daneben --------------------------- */
.halb{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
 align-items:center;gap:clamp(24px,4vw,70px)}
.halb-bild{position:relative;align-self:stretch;min-height:420px;overflow:hidden}
.halb-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
 transform:scale(1.045);transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.halb.sichtbar .halb-bild img{transform:none}
.halb-satz{padding:clamp(44px,6vw,96px) var(--rand) clamp(44px,6vw,96px) 0}
.halb.gedreht .halb-bild{order:2}
.halb.gedreht .halb-satz{order:1;padding:clamp(44px,6vw,96px) 0 clamp(44px,6vw,96px) var(--rand)}
.ziffer{font:600 clamp(48px,6vw,86px)/1 Outfit,OutfitErsatz,sans-serif;letter-spacing:-.05em;
 color:var(--haar);margin:0 0 6px;display:block}
.halb-satz h2{margin-bottom:20px}
.halb-satz p{color:var(--mute);max-width:46ch}
.halb-satz p:first-of-type{color:var(--tinte);font-size:clamp(17px,1.35vw,19px)}
.weiter{margin-top:24px}
.weiter a{color:var(--akzents);text-underline-offset:4px}

/* ---- Selbstcheck: fuenf Fragen, Auswertung im Browser ---------------- */
.check{padding:clamp(56px,7vw,104px) var(--rand);background:var(--flaeche)}
.ck-innen{max-width:var(--breite);margin:0 auto}
.ck-lede{color:var(--mute);max-width:64ch;margin:0 0 clamp(32px,4vw,52px);
 font-size:clamp(16px,1.3vw,18px)}
.ck-frage{border:0;padding:clamp(22px,2.6vw,32px) 0;margin:0;
 border-top:1px solid var(--haar)}
.ck-frage legend{padding:0;display:flex;align-items:baseline;gap:14px;
 font:600 clamp(18px,1.5vw,21px)/1.25 Outfit,OutfitErsatz,sans-serif;
 letter-spacing:-.02em;margin-bottom:16px;max-width:52ch}
.ck-nr{font:600 15px/1.3 Outfit,OutfitErsatz,sans-serif;letter-spacing:.1em;
 color:var(--akzents);flex:0 0 auto}
.ck-antwort{display:flex;align-items:flex-start;gap:12px;padding:9px 0;
 cursor:pointer;max-width:60ch;color:var(--mute);min-height:24px}
.ck-antwort input{appearance:none;width:19px;height:19px;flex:0 0 auto;
 margin:2px 0 0;border:1.5px solid var(--haar);border-radius:50%;
 background:var(--grund);cursor:pointer}
.ck-antwort input:checked{border-color:var(--akzent);border-width:6px}
.ck-antwort input:focus-visible{outline:2px solid var(--akzents);outline-offset:3px}
.ck-antwort:hover span{color:var(--tinte)}
.ck-antwort input:checked~span{color:var(--tinte)}
.ck-auswertung{margin-top:clamp(36px,4vw,56px);padding:clamp(28px,3.2vw,44px);
 background:var(--tafel);color:var(--tafelt)}
.ck-auswertung .marker{color:var(--tafela)}
.ck-fall h3{color:#fff;font-size:clamp(22px,2.2vw,30px);margin-bottom:14px}
.ck-fall p{margin:0;max-width:62ch;color:rgba(255,255,255,.82)}
.ck-weiter{margin:26px 0 0}
.ck-auswertung .knopf{background:#fff;color:var(--tafel)}
.ck-auswertung .knopf:hover{background:var(--tafela);color:var(--tafel)}
.ck-klein{margin:12px 0 0;font-size:13.5px;color:rgba(255,255,255,.6);max-width:52ch}

/* ---- Zitatbahn: ein Satz ueber einem Bild ---------------------------- */
.zitat{position:relative;min-height:clamp(340px,46vh,520px);display:flex;
 align-items:center;overflow:hidden;background:var(--tafel)}
.zitat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
.zitat-schleier{position:absolute;inset:0;
 background:linear-gradient(90deg,rgba(6,12,18,.9),rgba(6,12,18,.5))}
.zitat blockquote{position:relative;margin:0;padding:clamp(34px,5vw,64px) var(--rand);
 color:#fff;font-size:clamp(23px,3.1vw,44px);font-weight:600;line-height:1.14;
 letter-spacing:-.03em;max-width:24ch}
.zitat cite{display:block;margin-top:20px;font:600 10.5px/1 Outfit,OutfitErsatz,sans-serif;
 letter-spacing:.24em;text-transform:uppercase;color:var(--tafela);font-style:normal}

/* ---- Bildstreifen: drei Bilder Kante an Kante, keine Kacheln --------- */
.streifen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.streifen figure{position:relative;margin:0;min-height:clamp(320px,42vw,460px);
 overflow:hidden;display:flex;align-items:flex-end}
.streifen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.streifen figcaption{position:relative;padding:clamp(20px,2.4vw,30px);
 color:#fff;background:linear-gradient(180deg,rgba(6,12,18,0),rgba(6,12,18,.88) 62%);
 width:100%;padding-top:70px}
.streifen h3{color:#fff;margin-bottom:7px}
.streifen p{margin:0;font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.76)}

/* ---- Satzblock ohne Bild, fuer Text, der laufen muss ----------------- */
.satzblock{padding:clamp(48px,6vw,96px) var(--rand);max-width:calc(74ch + 2*var(--rand))}
.satzblock h2{margin-bottom:24px}
.satzblock p{color:var(--mute)}
.satzblock p:first-of-type{color:var(--tinte)}

/* ---- Liste: nummerierte Punkte, keine Kacheln ------------------------ */
.punkte{padding:0 var(--rand) clamp(48px,6vw,88px);max-width:var(--breite)}
.punkt{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 clamp(18px,2.4vw,38px);
 padding:clamp(22px,2.6vw,34px) 0;border-top:1px solid var(--haar)}
.punkt-nr{font:600 15px/1.3 Outfit,OutfitErsatz,sans-serif;letter-spacing:.1em;color:var(--akzents)}
.punkt h2{font-size:clamp(18px,1.5vw,21px);letter-spacing:-.02em;margin-bottom:8px}
/* Auf der 404 sind die Punkte Wege zurueck, also Verweise. */
.punkt h2 a{color:inherit;text-decoration:none}
.punkt h2 a:hover{color:var(--akzents);text-decoration:underline;text-underline-offset:4px}
.punkt p{margin:0;color:var(--mute);max-width:64ch;grid-column:2}

/* ---- Dokument: Impressum, Datenschutz, Fragen ------------------------ */
.dokument{padding:clamp(20px,3vw,40px) var(--rand) clamp(48px,6vw,88px);
 max-width:calc(74ch + 2*var(--rand))}
.dok-teil{padding:clamp(22px,2.6vw,34px) 0;border-top:1px solid var(--haar)}
.dok-teil:first-child{border-top:0;padding-top:0}
.dok-teil h2{font-size:clamp(19px,1.7vw,24px);margin-bottom:14px}
.dok-teil p{color:var(--mute);max-width:70ch}
.dok-teil a{color:var(--akzents);text-underline-offset:3px}
.frage{padding:clamp(20px,2.4vw,30px) 0;border-top:1px solid var(--haar)}
.frage:first-child{border-top:0;padding-top:0}
.frage h2{font-size:clamp(18px,1.5vw,21px);letter-spacing:-.02em;margin-bottom:11px}
.frage p{margin:0;color:var(--mute);max-width:70ch}

/* ---- Abschluss ------------------------------------------------------- */
.abschluss{position:relative;background:var(--tafel);color:var(--tafelt);
 padding:clamp(52px,6.5vw,104px) var(--rand);overflow:hidden}
.abschluss-inhalt{position:relative;max-width:54ch}
.abschluss h2{color:#fff;margin-bottom:18px}
.abschluss p{color:rgba(255,255,255,.76)}
.abschluss .marker{color:var(--tafela)}
.abschluss-siegel{position:absolute;right:-90px;top:50%;transform:translateY(-50%);
 width:min(46vw,440px);pointer-events:none}
.abschluss-siegel svg{width:100%;height:auto;color:var(--tafela);opacity:.16}

/* ---- Fuss ------------------------------------------------------------ */
.fuss{background:var(--flaeche);padding:clamp(36px,4vw,60px) var(--rand) 26px;
 position:relative;overflow:hidden}
.fuss-inhalt{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
 gap:clamp(20px,3vw,48px);align-items:start;max-width:var(--breite);position:relative}
.fuss-marke{display:flex;align-items:center;gap:11px}
.fuss-marke .zeichen svg{height:30px;width:auto;color:var(--akzent)}
.fuss-marke .wort svg{height:12px;width:auto;color:var(--tinte)}
.fuss-navi{display:flex;flex-wrap:wrap;gap:8px 24px;font-size:15px}
.fuss-navi a{color:var(--mute);text-decoration:none;padding:4px 0}
.fuss-navi a:hover{color:var(--tinte)}
.fuss-adresse{margin:0;font-size:14px;line-height:1.6;color:var(--mute)}
/* Zwei Gruppen im Fuss: oben das Haus, darunter die Lageseiten. Die
   Lageseiten kommen aus der Suche und stehen deshalb nicht im Kopfmenue -
   erreichbar bleiben muessen sie trotzdem, sonst haengen sie nur an der
   Sitemap. */
.fuss-spalten{display:grid;gap:18px}
.fuss-marker{display:block;width:100%;font-size:12px;font-weight:600;
 letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.fuss-lage{gap:8px 20px;font-size:14px}
.fuss-zeile{margin:28px 0 0;font-size:13px;color:var(--mute);
 padding-top:18px;border-top:1px solid var(--haar);max-width:var(--breite);position:relative}
/* Die Schwesterseiten im Fuss. Nur Hannover: Digital Performance Power
   und DPP Systems. pp-finance.de gehoert in die andere Welt und steht
   hier bewusst nicht. */
.fuss-haus{display:block;margin-top:8px}
.fuss-haus a{color:inherit;text-decoration:none;border-bottom:1px solid var(--haar);
 margin-left:14px;padding-bottom:1px}
.fuss-haus a:first-of-type{margin-left:8px}
.fuss-haus a:hover{color:var(--akzents);border-bottom-color:var(--akzents)}
@media (max-width:640px){.fuss-haus a{display:block;margin:6px 0 0;width:fit-content}}

.fuss-wasser{position:absolute;right:-40px;bottom:-60px;width:300px;pointer-events:none}
.fuss-wasser svg{width:100%;height:auto;color:var(--tinte);opacity:.05}

.sprung{position:absolute;top:-80px;left:var(--rand);z-index:90;background:var(--akzent);
 color:#fff;padding:11px 20px;text-decoration:none}
.sprung:focus{top:8px}
:focus-visible{outline:2px solid var(--akzents);outline-offset:3px}
.auf :focus-visible,.zitat :focus-visible,.abschluss :focus-visible,
.streifen :focus-visible,.band :focus-visible{outline-color:var(--tafela)}

/* ---- Breiten --------------------------------------------------------- */
@media (max-width:1099px){
 .navi{display:none}
 .menu{display:block}
 .mobilmenue[hidden]{display:none}
 .mobilmenue:not([hidden]){display:flex}
}
@media (max-width:860px){
 .halb{grid-template-columns:minmax(0,1fr);gap:0}
 .halb-bild{min-height:clamp(240px,52vw,380px)}
 .halb.gedreht .halb-bild{order:0}
 .halb.gedreht .halb-satz{order:0;padding:clamp(30px,6vw,52px) var(--rand)}
 .halb-satz{padding:clamp(30px,6vw,52px) var(--rand)}
 .streifen{grid-template-columns:minmax(0,1fr)}
 .streifen figure{min-height:clamp(260px,62vw,340px)}
 .abschluss-siegel{display:none}
}
@media (max-width:640px){
 body{font-size:16.5px}
 .kopf{padding-block:14px;gap:12px}
 .kopf .knopf{display:none}
 .auf{min-height:clamp(460px,72vh,640px)}
 .auf-bild img{animation:none}
 .punkt{grid-template-columns:minmax(0,1fr);gap:4px}
 .punkt p{grid-column:1}
 .fuss-inhalt{grid-template-columns:minmax(0,1fr);gap:22px}
 .fuss-wasser{display:none}
}

/* ---- Werkbank: die eigene Arbeit als lebende Oberflaeche --------------
   Kein Foto. Die Fotowelt zeigt den Betrieb des Kunden, dieses Modul
   zeigt, was die GFZM tut. Es laeuft beim Hereinkommen einmal auf. */
.ausspielung{background:var(--tafel);color:var(--tafelt);
 padding:clamp(56px,7vw,104px) var(--rand);position:relative;overflow:hidden}
.ausspielung::before{content:"";position:absolute;inset:0;pointer-events:none;
 background:radial-gradient(110% 80% at 12% -10%,rgba(255,255,255,.07),transparent 60%)}
.asp-innen{max-width:var(--breite);margin:0 auto;position:relative;
 display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
 gap:clamp(34px,4.6vw,76px);align-items:center}
@media (max-width:980px){.asp-innen{grid-template-columns:minmax(0,1fr)}}
.asp-satz .marker{color:var(--tafela)}
.asp-satz h2{font-size:clamp(28px,3.4vw,44px);line-height:1.08;
 letter-spacing:-.02em;padding:12px 0 16px;text-wrap:balance}
.asp-satz p{color:rgba(228,236,241,.78);font-size:17px;line-height:1.62;
 max-width:38ch}

.asp-tafel{background:#16242F;border:1px solid rgba(255,255,255,.09);
 box-shadow:0 26px 60px rgba(0,0,0,.4)}
.asp-kopf{display:flex;align-items:center;gap:10px;padding:17px 22px;
 border-bottom:1px solid rgba(255,255,255,.08)}
.asp-kopf b{font:600 16px/1 Outfit,OutfitErsatz,sans-serif}
.asp-punkt{width:8px;height:8px;background:var(--tafela);flex:0 0 auto}
.asp-reiter{margin-left:auto;font:500 11px/1 Outfit,OutfitErsatz,sans-serif;
 letter-spacing:.16em;text-transform:uppercase;color:rgba(228,236,241,.45)}
.asp-liste{list-style:none;margin:0;padding:6px 22px 4px}
.asp-liste li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
 grid-template-areas:"s t w" "s p p";column-gap:14px;row-gap:9px;
 align-items:center;padding:15px 0;
 border-bottom:1px solid rgba(255,255,255,.06)}
.asp-liste li:last-child{border-bottom:0}
.asp-schalter{grid-area:s;width:40px;height:22px;flex:0 0 auto;
 background:rgba(255,255,255,.14);position:relative;
 transition:background .45s ease}
.asp-schalter i{position:absolute;top:3px;left:3px;width:16px;height:16px;
 background:#fff;transition:left .45s cubic-bezier(.3,.8,.3,1)}
.asp-text{grid-area:t;min-width:0}
.asp-text b{display:block;font:500 16px/1.25 Outfit,OutfitErsatz,sans-serif}
.asp-text small{display:block;font:400 13.5px/1.4 Outfit,OutfitErsatz,sans-serif;
 color:rgba(228,236,241,.5);padding-top:3px}
.asp-wert{grid-area:w;font:500 13.5px/1 Outfit,OutfitErsatz,sans-serif;
 color:rgba(228,236,241,.5);white-space:nowrap}
.asp-spur{grid-area:p;display:block;height:8px;
 background:rgba(255,255,255,.09)}
.asp-spur i{display:block;height:100%;width:0;background:var(--tafela);
 transition:width 1.1s cubic-bezier(.22,.7,.25,1)}
.asp-liste li.aus .asp-spur i{background:rgba(255,255,255,.3)}

/* Endzustand, sobald der Abschnitt im Bild war */
.ausspielung.laeuft .asp-liste li:not(.aus) .asp-schalter{background:var(--akzent)}
.ausspielung.laeuft .asp-liste li:not(.aus) .asp-schalter i{left:21px}
.ausspielung.laeuft .asp-spur i{width:var(--w)}
/* Gestaffelt, damit es nicht wie ein Schlag wirkt */
.ausspielung.laeuft .asp-liste li .asp-schalter,
.ausspielung.laeuft .asp-liste li .asp-schalter i,
.ausspielung.laeuft .asp-liste li .asp-spur i{
 transition-delay:calc(var(--takt,0) * .13s)}
.asp-fuss{padding:16px 22px 20px;border-top:1px solid rgba(255,255,255,.07);
 font-size:13px;line-height:1.5;color:rgba(228,236,241,.45)}

@media (max-width:560px){
 .asp-liste{padding-inline:16px}
 .asp-kopf,.asp-fuss{padding-inline:16px}
 .asp-text b{font-size:15px}
}
/* Wer keine Bewegung will, bekommt sofort den Endzustand. */
@media (prefers-reduced-motion:reduce){
 .asp-schalter,.asp-schalter i,.asp-spur i{transition:none}
}