/* Vollflaechige Baender und Scroll-Erlebnisse der Unterseiten (11.11.2026).
   Tim: "baue die webseite voll flächig udn mach mehr unterschieldichkeiten udn das auch wenn man scrollt erlebnisse hat mit icons
   zahlen udn parts slide effekte und animationen" und "die ganzen unterseiten sehen nicht aufwenidig aus nur texte und zahlen".
   Bausteine (Klassen f-...), aus denen jede Seite ihre eigene Abfolge baut:
   f-band        Flaeche ueber die ganze Fensterbreite in einem Ton (tinte, faden, hell, zart)
   f-szene       Scroll-Szene: bleibt stehen, waehrend die Schritte nacheinander hereingleiten; grosse Ziffer, Zeichen, Strecke
   f-bildband    Bild ueber die ganze Breite, das sich beim Scrollen langsam verschiebt, mit Text darauf
   f-zahlen      grosse Zahlen, die hochzaehlen, sobald sie im Bild sind (nur Zahlen, die auf der Seite belegt sind)
   f-satz        ein grosser Satz, dessen Woerter nacheinander erscheinen
   f-kreis       Ablaufdiagramm, das sich zeichnet
   f-gleiten     Teile gleiten von links, rechts oder unten herein
   Ruhezustand = sichtbar: Bewegung gibt es nur mit kante-scroll.js (Klasse f-an am html). Ohne Skript stehen alle Schritte
   untereinander, alle Zahlen zeigen ihren Endwert, nichts ist versteckt. Nichts haengt an der Maus. */
.f-band { position: relative; width: 100%; padding: clamp(64px, 9vw, 150px) 0; overflow: clip; }
.f-band--tinte { background: #14161A; color: #F5F4F0; --text: #F5F4F0; --leise: #C9CCD3; --linie: rgba(245, 244, 240, .16); --linie-stark: rgba(245, 244, 240, .3); --fuell: rgba(245, 244, 240, .08); }
.f-band--faden { background: #FF7120; color: #14161A; --text: #14161A; --leise: #3A2413; --linie: rgba(20, 22, 26, .2); --linie-stark: rgba(20, 22, 26, .4); --fuell: rgba(20, 22, 26, .08); --faden: #14161A; }
.f-band--hell { background: var(--grund-2); }
.f-band--zart { background: #FFE2D0; color: #14161A; --text: #14161A; --leise: #4A3A30; }
.f-band h2, .f-band h3 { color: var(--text); }
.f-band .zeile { color: var(--leise); }
.f-band--rund { border-radius: clamp(28px, 4vw, 64px) clamp(28px, 4vw, 64px) 0 0; }
.f-kopf { max-width: 22ch; margin: 0 0 var(--a6); font: 600 clamp(34px, 5vw, 80px)/1.02 Clash, sans-serif; letter-spacing: -.03em; }
.f-vor { margin: 0 0 var(--a2); font-size: var(--t1); letter-spacing: .14em; text-transform: uppercase; color: var(--leise); }

/* ---- Scroll-Szene ---- */
.f-szene-schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--a6); }
.f-schritt { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--a4) var(--a8); align-items: center; }
.f-schritt-marke { display: flex; align-items: center; gap: var(--a3); }
.f-ziffer { font: 600 clamp(90px, 17vw, 280px)/.82 Clash, sans-serif; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 2px var(--faden); }
.f-schritt-marke .zeichen--gross { width: clamp(56px, 6vw, 96px); height: clamp(56px, 6vw, 96px); padding: clamp(13px, 1.4vw, 22px); border-radius: clamp(16px, 1.8vw, 28px); margin: 0; }
.f-schritt h3 { margin: 0 0 var(--a2); font: 600 clamp(32px, 4.4vw, 68px)/1.02 Clash, sans-serif; letter-spacing: -.03em; }
.f-schritt p { margin: 0 0 var(--a3); max-width: 52ch; font-size: clamp(17px, 1.35vw, 21px); color: var(--leise); }
.f-punkte { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--a1); }
.f-punkte li { padding: 10px 16px; border-radius: 999px; border: 1px solid var(--linie-stark); font: 600 var(--t2)/1.2 DM, sans-serif; }
.f-strecke { display: none; }
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  html.f-an .f-szene { padding: 0; height: calc(var(--f-n, 4) * 90vh + 100vh); overflow: visible; }
  html.f-an .f-szene-fest { position: sticky; top: 0; height: 100vh; display: grid; grid-template-rows: auto 1fr auto; padding: clamp(84px, 12vh, 130px) 0 clamp(28px, 5vh, 56px); overflow: hidden; }
  html.f-an .f-szene .f-kopf { margin-bottom: 0; font-size: clamp(24px, 2.4vw, 38px); max-width: none; }
  html.f-an .f-szene-schritte { position: relative; display: block; }
  html.f-an .f-schritt { position: absolute; inset: 0; opacity: 0; transform: translateX(9vw); transition: opacity .5s ease, transform .8s cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
  html.f-an .f-schritt.ist-vorbei { transform: translateX(-9vw); }
  html.f-an .f-schritt.ist-da { opacity: 1; transform: none; pointer-events: auto; }
  html.f-an .f-schritt .f-ziffer { transition: transform 1s cubic-bezier(.2, .8, .2, 1); transform: translateY(18%) rotate(-4deg); }
  html.f-an .f-schritt.ist-da .f-ziffer { transform: none; }
  html.f-an .f-schritt .f-punkte li { opacity: 0; transform: translateY(16px); transition: opacity .4s ease, transform .5s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i, 0) * 80ms + 250ms); }
  html.f-an .f-schritt.ist-da .f-punkte li { opacity: 1; transform: none; }
  html.f-an .f-strecke { position: relative; display: grid; grid-template-columns: repeat(var(--f-n, 4), minmax(0, 1fr)); list-style: none; margin: 0; padding: var(--a3) 0 0; font: 600 var(--t2)/1.2 DM, sans-serif; color: var(--leise); }
  html.f-an .f-strecke::before, html.f-an .f-strecke::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; border-radius: 4px; background: var(--linie); }
  html.f-an .f-strecke::after { background: var(--faden); transform: scaleX(var(--f-p, 0)); transform-origin: 0 50%; }
  html.f-an .f-strecke li { transition: color .3s; }
  html.f-an .f-strecke li.ist-da { color: var(--text); }
}
@media (max-width: 899px) { .f-schritt { grid-template-columns: 1fr; } .f-schritt-marke { gap: var(--a2); } }

/* ---- Bildband ---- */
.f-bildband { position: relative; width: 100%; min-height: clamp(360px, 62vw, 860px); display: grid; align-items: end; overflow: clip; background: #14161A; color: #F5F4F0; }
.f-bildband img { position: absolute; left: 0; top: -12%; width: 100%; height: 124%; object-fit: cover; transform: translateY(calc(var(--f-p, .5) * 16% - 8%)); will-change: transform; }
.f-bildband::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 22, 26, 0) 35%, rgba(20, 22, 26, .78)); }
.f-bildband-text { position: relative; z-index: 1; padding: clamp(28px, 5vw, 80px) 0; }
.f-bildband-text p { margin: 0; max-width: 20ch; font: 600 clamp(30px, 4.6vw, 76px)/1.04 Clash, sans-serif; letter-spacing: -.03em; color: #F5F4F0; }

/* ---- Zahlen ---- */
.f-zahlen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--a4); }
.f-zahlen li { display: grid; gap: var(--a1); padding-top: var(--a3); border-top: 2px solid var(--text); }
.f-zahlen .zeichen { width: 30px; height: 30px; margin: 0; color: var(--text); }
.f-zahl { font: 600 clamp(64px, 11vw, 190px)/.9 Clash, sans-serif; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.f-zahlen span { font: 600 clamp(17px, 1.5vw, 24px)/1.2 DM, sans-serif; max-width: 18ch; }
.f-zahlen small { font-size: var(--t2); color: var(--leise); max-width: 30ch; }
@media (max-width: 760px) { .f-zahlen { grid-template-columns: 1fr; } }

/* ---- Grosser Satz ---- */
.f-satz { margin: 0; max-width: 20ch; font: 600 clamp(36px, 6.4vw, 108px)/1.02 Clash, sans-serif; letter-spacing: -.035em; }
.f-satz-quelle { margin: var(--a4) 0 0; font-size: var(--t2); color: var(--leise); }
html.f-an .f-satz .f-w { display: inline-block; opacity: .14; transition: opacity .5s ease; transition-delay: calc(var(--i, 0) * 70ms); }
html.f-an .f-satz.f-da .f-w { opacity: 1; }

/* ---- Ablaufdiagramm ---- */
.f-kreis { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--a8); align-items: center; }
.f-kreis svg { display: block; width: 100%; height: auto; overflow: visible; }
.f-kreis .f-k-linie { fill: none; stroke: var(--faden); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; }
.f-kreis .f-k-zurueck { fill: none; stroke: var(--text); stroke-width: 3; stroke-linecap: round; stroke-dasharray: .012 .02; }
.f-kreis .f-k-knoten circle { fill: var(--faden); }
.f-kreis .f-k-knoten text { fill: var(--text); font: 600 24px/1 Clash, sans-serif; }
.f-kreis .f-k-knoten .f-k-nr { fill: #14161A; font: 600 22px/1 DM, sans-serif; }
.f-kreis .f-k-hinweis { fill: var(--leise); font: 400 17px/1 DM, sans-serif; }
.f-schema { display: grid; gap: var(--a2); }
.f-schema-balken { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a2); align-items: end; height: clamp(180px, 20vw, 300px); }
.f-schema-balken span { display: flex; align-items: flex-end; justify-content: center; padding: var(--a2); border-radius: 18px 18px 0 0; font: 600 var(--t2)/1 DM, sans-serif; transform-origin: 50% 100%; }
.f-schema-balken span:first-child { height: 46%; background: var(--fuell); border: 1px solid var(--linie-stark); border-bottom: 0; }
.f-schema-balken span:last-child { height: 100%; background: var(--faden); color: #14161A; }
.f-schema p { margin: 0; font-size: var(--t1); color: var(--leise); }
html.f-an .f-kreis .f-k-linie { stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s cubic-bezier(.5, 0, .3, 1) .2s; }
html.f-an .f-kreis .f-k-knoten { opacity: 0; transition: opacity .4s ease; transition-delay: calc(var(--i, 0) * 350ms + 300ms); }
html.f-an .f-kreis .f-k-zurueck, html.f-an .f-kreis .f-k-hinweis { opacity: 0; transition: opacity .6s ease 1.9s; }
html.f-an .f-kreis .f-schema-balken span { transform: scaleY(0); transition: transform .9s cubic-bezier(.2, .8, .2, 1) .4s; }
html.f-an .f-kreis .f-schema-balken span:last-child { transition-delay: .9s; }
html.f-an .f-kreis.f-da .f-k-linie { stroke-dashoffset: 0; }
html.f-an .f-kreis.f-da .f-k-knoten, html.f-an .f-kreis.f-da .f-k-zurueck, html.f-an .f-kreis.f-da .f-k-hinweis { opacity: 1; }
html.f-an .f-kreis.f-da .f-schema-balken span { transform: none; }
@media (max-width: 900px) { .f-kreis { grid-template-columns: 1fr; gap: var(--a6); } .f-kreis .f-k-knoten text { font-size: 30px; } .f-kreis .f-k-hinweis { font-size: 24px; } }

/* ---- Hereingleiten ---- */
html.f-an [data-f-gleiten] { transition: opacity .7s ease, transform 1s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i, 0) * 90ms); }
html.f-an [data-f-gleiten]:not(.f-da) { opacity: 0; transform: translateY(60px); }
html.f-an [data-f-gleiten="links"]:not(.f-da) { transform: translateX(-12vw); }
html.f-an [data-f-gleiten="rechts"]:not(.f-da) { transform: translateX(12vw); }
html.f-an [data-f-gleiten="gross"]:not(.f-da) { transform: scale(.86); }

/* Weiterlesen als zwei grosse Tueren */
.f-tueren { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a2); }
.f-tuer { position: relative; display: grid; align-content: space-between; gap: var(--a6); min-height: clamp(260px, 30vw, 440px); padding: clamp(24px, 3vw, 48px); border-radius: clamp(24px, 3vw, 44px); text-decoration: none; background: #14161A; color: #F5F4F0; overflow: hidden; transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.f-tuer:nth-child(2) { background: #FF7120; color: #14161A; }
.f-tuer:hover, .f-tuer:focus-visible { transform: translateY(-8px); }
.f-tuer .zeichen--gross { margin: 0; background: #F5F4F0; }
.f-tuer strong { font: 600 clamp(28px, 3.6vw, 56px)/1.02 Clash, sans-serif; letter-spacing: -.03em; }
.f-tuer span { max-width: 40ch; font-size: var(--t2); opacity: .86; }
.f-tuer i { position: absolute; right: clamp(24px, 3vw, 48px); top: clamp(24px, 3vw, 48px); font-style: normal; font-size: clamp(28px, 3vw, 48px); transition: transform .3s ease; }
.f-tuer:hover i { transform: translateX(8px); }
@media (max-width: 760px) { .f-tueren { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  html.f-an [data-f-gleiten], html.f-an .f-satz .f-w, html.f-an .f-kreis .f-k-linie, html.f-an .f-kreis .f-k-knoten, html.f-an .f-kreis .f-k-zurueck, html.f-an .f-kreis .f-k-hinweis, html.f-an .f-kreis .f-schema-balken span { transition: none; opacity: 1; transform: none; stroke-dashoffset: 0; }
  .f-bildband img { transform: none; }
}

/* ---- Schaubilder (Schaubild.astro): gezeichnet in den Farben der Marke, bewegt, sobald der Schritt im Bild ist ---- */
.sb { display: block; width: 100%; height: auto; max-height: 62vh; overflow: visible; }
.sb text { fill: var(--text); font: 600 20px/1 DM, sans-serif; }
.sb .sb-klein { fill: var(--leise); font: 400 17px/1 DM, sans-serif; }
.sb-blatt { fill: var(--fuell); stroke: var(--linie-stark); stroke-width: 2; }
.sb-strich, .sb-achse { fill: none; stroke: var(--linie-stark); stroke-width: 6; stroke-linecap: round; }
.sb-achse { stroke-width: 3; stroke-linejoin: round; }
.sb-weg, .sb-kurve, .sb-bahn { fill: none; stroke: var(--faden); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.sb-bahn { stroke: var(--linie-stark); stroke-width: 3; stroke-dasharray: .012 .02; }
.sb-grundlinie { fill: none; stroke: var(--leise); stroke-width: 2; stroke-dasharray: 8 8; }
.sb-punkt { fill: var(--text); }
.sb-heiss { fill: var(--faden); }
.sb-welle { fill: none; stroke: var(--faden); stroke-width: 3; transform-box: fill-box; transform-origin: center; }
.sb-lupe { transform: translate(330px, 250px); }
.sb-lupe circle { fill: rgba(255, 113, 32, .12); stroke: var(--text); stroke-width: 6; }
.sb-lupe path { stroke: var(--text); stroke-width: 9; stroke-linecap: round; }
.sb-stein { fill: none; stroke: var(--linie-stark); stroke-width: 2.5; transform-box: fill-box; transform-origin: center; }
.sb-stein--voll { fill: var(--text); stroke: none; }
.sb-stein--faden { fill: var(--faden); stroke: none; }
.sb-marke circle { fill: var(--text); }
.sb-marke--faden circle { fill: var(--faden); }
.sb-ort circle { fill: var(--fuell); stroke: var(--linie-stark); stroke-width: 2.5; }
.sb-ort--faden circle { fill: var(--faden); stroke: none; }
.sb-ort--faden text { fill: #14161A; }
.sb-paket { transform: translate(260px, 132px); }
.sb-paket rect { fill: var(--text); }
.sb-paket path { stroke: var(--grund, #14161A); stroke-width: 4; stroke-linecap: round; }
.f-band--tinte .sb-paket path { stroke: #14161A; }
@media (prefers-reduced-motion: no-preference) {
  html.f-an .sb-weg, html.f-an .sb-kurve { stroke-dashoffset: 1; transition: stroke-dashoffset 1.5s cubic-bezier(.5, 0, .3, 1) .35s; }
  html.f-an :is(.ist-da, .f-da) .sb-weg, html.f-an :is(.ist-da, .f-da) .sb-kurve { stroke-dashoffset: 0; }
  html.f-an .sb-engpass, html.f-an .sb-marke { opacity: 0; transition: opacity .5s ease; transition-delay: calc(var(--i, 0) * 1.1s + 1.1s); }
  html.f-an :is(.ist-da, .f-da) .sb-engpass, html.f-an :is(.ist-da, .f-da) .sb-marke { opacity: 1; }
  html.f-an :is(.ist-da, .f-da) .sb-welle { animation: sb-welle 2.2s ease-out 1.6s infinite; }
  html.f-an .sb-lupe { transform: translate(120px, 110px); transition: transform 1.6s cubic-bezier(.5, 0, .2, 1) .3s; }
  html.f-an :is(.ist-da, .f-da) .sb-lupe { transform: translate(330px, 250px); }
  html.f-an .sb-stein { opacity: 0; transform: translateY(-46px) rotate(-5deg); transition: opacity .35s ease, transform .7s cubic-bezier(.2, 1.3, .3, 1); transition-delay: calc(var(--i, 0) * 130ms + 250ms); }
  html.f-an :is(.ist-da, .f-da) .sb-stein { opacity: 1; transform: none; }
  html.f-an :is(.ist-da, .f-da) .sb-paket { animation: sb-kreisen 7s linear infinite; offset-path: path("M150 200 C220 110 300 110 370 200 C300 290 220 290 150 200"); offset-rotate: 0deg; transform: none; }
}
@keyframes sb-welle { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(3); } }
@keyframes sb-kreisen { from { offset-distance: 0%; } to { offset-distance: 100%; } }
/* Schritt mit Schaubild: Bild gross, Text knapp; der ausfuehrliche Text klappt auf */
.f-schritt--bild { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.f-schritt--bild .f-schritt-marke { margin-bottom: var(--a2); }
.f-schritt--bild .f-ziffer { font-size: clamp(56px, 7vw, 120px); }
.f-schritt--bild .f-schritt-marke .zeichen--gross { width: 52px; height: 52px; padding: 12px; border-radius: 16px; }
.f-kurz { font: 600 clamp(19px, 1.7vw, 27px)/1.25 Clash, sans-serif !important; letter-spacing: -.01em; color: var(--text) !important; max-width: 26ch !important; }
.f-mehr { margin: var(--a3) 0 0; }
.f-mehr summary { display: inline-flex; align-items: center; gap: .5em; cursor: pointer; list-style: none; font: 600 var(--t2)/1 DM, sans-serif; padding: 10px 0; border-bottom: 1px solid var(--linie-stark); }
.f-mehr summary::-webkit-details-marker { display: none; }
.f-mehr summary::after { content: "+"; font-size: 1.2em; }
.f-mehr[open] summary::after { content: "–"; }
.f-mehr p { margin: var(--a2) 0 0; font-size: var(--t2); }
@media (max-width: 899px) { .f-schritt--bild { grid-template-columns: 1fr; } .sb { max-height: none; } }

/* ---- Selbsttaetige Baender (kante-scroll.js): Auf Seiten ohne eigene f-band-Abschnitte bekommt jeder zweite Abschnitt eine
   Flaeche ueber die ganze Fensterbreite. Welche Abschnitte und in welchem Ton, haengt an der Adresse der Seite, damit die
   Seiten sich unterscheiden. Nur helle Toene, damit Karten und Glas darauf lesbar bleiben. ---- */
html.f-an section.f-auto { position: relative; isolation: isolate; }
html.f-an section.f-auto::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(50% - 50vw); width: 100vw; background: var(--grund-2); }
html.f-an section.f-auto--zart::before { background: color-mix(in srgb, var(--faden) 16%, var(--grund)); }
html.f-an section.f-auto--rund::before { border-radius: clamp(28px, 4vw, 64px) clamp(28px, 4vw, 64px) 0 0; }
html.f-an section.f-auto--schraeg::before { clip-path: polygon(0 clamp(20px, 4vw, 70px), 100% 0, 100% 100%, 0 100%); }
html.k-ende section.f-auto::before { opacity: 0; }
/* Grosse Abschnittsnummer, die beim Scrollen hinter der Ueberschrift mitwandert */
html.f-an section[data-f-nr]::after { content: attr(data-f-nr); position: absolute; z-index: -1; right: 0; top: clamp(8px, 2vw, 30px); font: 600 clamp(110px, 20vw, 320px)/.8 Clash, sans-serif; letter-spacing: -.05em;
  color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--faden) 55%, transparent); transform: translateY(calc(var(--f-p, .5) * -90px + 45px)); pointer-events: none; }
@media (max-width: 760px) { html.f-an section[data-f-nr]::after { display: none; } }
@media (prefers-reduced-motion: reduce) { html.f-an section[data-f-nr]::after { transform: none; } }

/* Weitere Schaubilder: suche, marke, automat, app */
.sb-feld { fill: none; stroke: var(--text); stroke-width: 3; }
.sb-lupe-klein { fill: none; stroke: var(--faden); stroke-width: 4; stroke-linecap: round; }
.sb-zeile rect { fill: var(--fuell); stroke: var(--linie-stark); stroke-width: 1.5; }
.sb-zeile path { fill: none; stroke: var(--linie-stark); stroke-width: 6; stroke-linecap: round; }
.sb-zeile--eigen rect { fill: var(--faden); stroke: none; }
.sb-zeile--eigen path { stroke: rgba(20, 22, 26, .55); }
.sb-zeile--eigen text { fill: #14161A; }
.sb-form circle, .sb-form path { fill: none; stroke: var(--text); stroke-width: 5; stroke-linejoin: round; }
.sb-form--faden rect { fill: var(--faden); }
.sb-form { transform-box: fill-box; transform-origin: center; }
.sb-palette circle { fill: var(--text); transform-box: fill-box; transform-origin: center; }
.sb-palette circle:nth-child(2) { fill: var(--faden); } .sb-palette circle:nth-child(3) { fill: var(--leise); }
.sb .sb-gross { font: 600 64px/1 Clash, sans-serif; letter-spacing: -.03em; }
.sb-laeufer { fill: var(--faden); offset-path: path("M90 120 C200 120 180 200 260 200 H430"); offset-distance: 100%; }
.sb-laeufer--b { offset-path: path("M90 280 C200 280 180 200 260 200 H430"); }
.sb-laeufer--c { fill: var(--text); }
.sb-haken { fill: none; stroke: var(--faden); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.sb-telefon > rect:first-child { fill: #14161A; stroke: var(--text); stroke-width: 4; }
.sb-telefon .sb-stein--faden { fill: var(--faden); }
@media (prefers-reduced-motion: no-preference) {
  html.f-an .sb-zeile { transition: transform .9s cubic-bezier(.3, 1.2, .3, 1), opacity .4s ease; transition-delay: calc(var(--i, 0) * 120ms + 300ms); }
  html.f-an .sb-zeile:not(.sb-zeile--eigen) { opacity: 0; }
  html.f-an :is(.ist-da, .f-da) .sb-zeile { opacity: 1; }
  html.f-an :is(.ist-da, .f-da) .sb-zeile--eigen { transform: translateY(-124px); transition-delay: 1.3s; }
  html.f-an :is(.ist-da, .f-da) .sb-zeile:not(.sb-zeile--eigen) { transform: translateY(62px); transition-delay: 1.3s; }
  html.f-an .sb-form, html.f-an .sb-palette circle { opacity: 0; transform: scale(.5) rotate(-20deg); transition: opacity .4s ease, transform .9s cubic-bezier(.2, 1.3, .3, 1); transition-delay: calc(var(--i, 0) * 180ms + 250ms); }
  html.f-an :is(.ist-da, .f-da) .sb-form, html.f-an :is(.ist-da, .f-da) .sb-palette circle { opacity: 1; transform: none; }
  html.f-an :is(.ist-da, .f-da) .sb-laeufer { animation: sb-laufen 3.2s cubic-bezier(.5, 0, .5, 1) infinite; animation-delay: calc(var(--i, 0) * 1.05s); }
  html.f-an .sb-haken { stroke-dashoffset: 1; transition: stroke-dashoffset .6s ease 2.4s; }
  html.f-an :is(.ist-da, .f-da) .sb-haken { stroke-dashoffset: 0; }
  html.f-an .sb-telefon { transform: translateY(70px); opacity: 0; transition: transform .9s cubic-bezier(.2, .8, .2, 1) .9s, opacity .5s ease .9s; }
  html.f-an :is(.ist-da, .f-da) .sb-telefon { transform: none; opacity: 1; }
}
@keyframes sb-laufen { from { offset-distance: 0%; opacity: 1; } 85% { opacity: 1; } to { offset-distance: 100%; opacity: 0; } }
/* Schauband: Schaubild neben der Kernaussage einer Seite, als Band in Tinte */
.f-schau { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--a6) var(--a8); align-items: center; }
.f-schau .f-satz { font-size: clamp(30px, 3.8vw, 62px); max-width: 16ch; }
.f-schau .f-kurz { margin: var(--a3) 0 0; }
.f-schau .kasten { margin-top: var(--a4); padding: var(--a3); border-radius: var(--r); background: var(--fuell); border: 1px solid var(--linie); }
.f-schau .kasten p { margin: 0; color: var(--leise); font-size: var(--t2); }
.f-schau .kasten .zeile { margin-bottom: 6px; }
@media (max-width: 899px) { .f-schau { grid-template-columns: 1fr; } }

/* Schaubilder ort und team; Schauband mit Bild rechts; Schaubild in den Leistungskarten der Saeulen */
.sb-strasse { fill: none; stroke: var(--linie-stark); stroke-width: 10; stroke-linecap: round; }
.sb-nadel path { fill: var(--faden); }
.sb-nadel circle { fill: #14161A; }
.sb-nadel { transform-box: fill-box; transform-origin: 50% 100%; }
.sb-rolle rect { fill: var(--fuell); stroke: var(--text); stroke-width: 2.5; }
.sb-rolle { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  html.f-an .sb-nadel { opacity: 0; transform: translateY(-90px); transition: opacity .3s ease .4s, transform .8s cubic-bezier(.3, 1.6, .5, 1) .4s; }
  html.f-an :is(.ist-da, .f-da) .sb-nadel { opacity: 1; transform: none; }
  html.f-an .sb-rolle { opacity: 0; transform: scale(.4); transition: opacity .35s ease, transform .7s cubic-bezier(.2, 1.4, .3, 1); transition-delay: calc(var(--i, 0) * 110ms + 500ms); }
  html.f-an :is(.ist-da, .f-da) .sb-rolle { opacity: 1; transform: none; }
}
.f-schau--rechts > .sb { order: 2; }
.feld-gross .feld-schau { align-self: center; padding: var(--a2); border-radius: var(--r); background: #14161A; --text: #F5F4F0; --leise: #C9CCD3; --fuell: rgba(245, 244, 240, .08); --linie-stark: rgba(245, 244, 240, .3); --linie: rgba(245, 244, 240, .16); }
@media (min-width: 1081px) { .felder-gross .feld-gross.feld-gross--schau { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) minmax(0, .9fr); } }
@media (max-width: 899px) { .f-schau--rechts > .sb { order: 0; } }
.f-schau .f-satz--lang { font-size: clamp(24px, 2.5vw, 40px); max-width: 22ch; line-height: 1.1; }