/* WebStärke · Fortsetzung nach der Galerie: derselbe fotografische Himmel läuft hinter dem Inhalt bis zum Horizont weiter
   (Leinwand der Szene, fest hinter der Seite). Weiß auf offenem Himmel mit weichem Lesesaum, Tinte am hellen Horizont und auf Flächen. */
:root {
  --lesen: #E9F1F9;    /* helle Fläche (ruhige Fassung, Rechtsseiten) */
  --hell-weiss: rgba(255, 255, 255, .97);
  --linie-hell: rgba(255, 255, 255, .3);
  --abschnitt: clamp(110px, 17svh, 200px);
  --anzeige: 620 clamp(38px, 4.4vw, 74px)/1.04 var(--display);
  /* feiner Schriftschatten: nur eine knappe Kante an den Buchstaben (keine Halos, keine dunklen Flächen hinter Textblöcken);
     die Lesbarkeit tragen Schriftfarbe, ruhige Himmelsbereiche und die gleichmäßige Abstimmung der Abschnitte */
  --saum: 0 1px 2px rgba(6, 22, 56, .36);
  --saum-gross: 0 1px 3px rgba(6, 22, 56, .28);
}

/* ---------- Inhalt über dem Himmel (die Bühne steht fest dahinter) ---------- */
.weiter-himmel { position: relative; z-index: 3; color: #fff; }
.erlebnis .weiter-himmel { margin-top: -100svh; pointer-events: none; }
.erlebnis .weiter-himmel :is(.vorfuehrung__buehne, .vorfuehrung__nach, .auffindbar, .ablauf, .preise, .fragen, .kontakt) { pointer-events: auto; }
/* ruhige Fassung (ohne Szene): dasselbe Himmelsfoto als stehender Hintergrund, nicht über die Seitenlänge gestreckt */
html:not(.erlebnis) .weiter-himmel::before { content: ''; display: block; position: sticky; top: 0; height: 100svh; margin-bottom: -100svh; z-index: -1;
  background: #2D63A6 url('../img/himmel/inhalt-d.webp') center / cover no-repeat; }
@media (max-aspect-ratio: 4/5), (max-width: 699px) { html:not(.erlebnis) .weiter-himmel::before { background-image: url('../img/himmel/inhalt-m.webp'); } }
/* Kein overflow (auch nicht clip) an .weiter-himmel oder anderen Vorfahren der gehaltenen Bühnen (Vorführung, SEO/GEO): Safari/WebKit legt für
   einachsiges Clipping eine „unendlich“ hohe Clip-Ebene an (±2²⁴ px); die Sticky-Ebenen darunter springen beim Scrollen um 1–2 px (float-Raster).
   Seitlich begrenzt body (overflow-x: clip, geht auf den Viewport über); Dekorflächen begrenzen sich selbst (z. B. .auffindbar__ende). */
.leistung { position: relative; }

/* ---------- Gemeinsame Rollen (auf offenem Himmel) ---------- */
.weiter-himmel .label { color: rgba(255, 255, 255, .9); text-shadow: var(--saum); }
.angebot__titel, .ablauf__titel, .fragen__titel, .kontakt__titel { font: var(--anzeige); font-stretch: 125%; letter-spacing: -.032em; color: #fff; text-wrap: balance; text-shadow: var(--saum-gross); }
.leistung__titel, .schritt__titel { font: 500 clamp(24px, 2vw, 32px)/1.12 var(--display); font-stretch: 125%; letter-spacing: -.028em; color: #fff; text-shadow: var(--saum); }
.angebot__lead, .ablauf__lead, .kontakt__lead, .aufbau__lead { font-size: clamp(16.5px, 1.15vw, 18.5px); line-height: 1.55; color: var(--hell-weiss); max-width: 30em; text-shadow: var(--saum); }
.weiter-himmel .link { color: #fff; }
.weiter-himmel .link__text { --link-linie: rgba(255, 255, 255, .5); }
.weiter-himmel .link:focus-visible, .weiter-himmel .frage summary:focus-visible { outline-color: #fff; }

/* Überschriften gleiten einmal ruhig in ihre Position (nur mit Bewegung) */
html.gleiten .gleitet { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform 1.15s var(--ease); }
html.gleiten .gleitet.ist-da { opacity: 1; transform: none; }
html.gleiten .angebot__titel.gleitet { opacity: 1; transform: none; }
html.gleiten .angebot__titel > span { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform 1.2s var(--ease); }
html.gleiten .angebot__titel.ist-da > span { opacity: 1; transform: none; }
html.gleiten .angebot__titel.ist-da > span:nth-child(2) { transition-delay: .14s; }
.angebot__titel > span { display: block; }

/* ---------- Leseverlauf (nur mit JS und Bewegung; Wortspannen ändern nur die Deckkraft) ---------- */
.liest .wort { opacity: .26; transition: opacity .12s linear; }

/* ---------- Gerätefläche: gemeinsame Rahmung für alle Ansichten (führt bis in die Beispielansicht der Suche) ---------- */
.geraet { position: relative; overflow: hidden; border-radius: 16px; background: #FBFCFE;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .5), 0 0 0 6px rgba(255, 255, 255, .13), 0 44px 90px -50px rgba(8, 22, 56, .75); }
.geraet img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.geraet--handy { border-radius: 24px; border: 5px solid #F7F9FC; box-shadow: 0 0 0 1px rgba(16, 29, 69, .08), 0 34px 70px -34px rgba(8, 22, 56, .75); }
/* feiner Lichtreflex auf dem Rahmen, wandert mit der Neigung */
.geraet::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(112deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .2) 47%, rgba(255, 255, 255, 0) 56%) no-repeat;
  background-size: 260% 100%; background-position: calc(46% + var(--pz, 0) * 30%) 0; mix-blend-mode: screen; }

/* ---------- 1 · Angebot: EINE Komposition (keine eigene Einleitungshülle davor) ---------- */
.angebot { position: relative; }
.angebot__inhalt { position: relative; padding: var(--abschnitt) var(--rand) calc(var(--abschnitt) * .5); }
/* Mit Szene: die Bühne beginnt genau am Inhaltsbeginn – dort kommt die Revoltaic-Karte aus der Wolkenpassage an (keine Leerstrecke davor) */
.erlebnis .angebot__inhalt { padding-top: 0; padding-bottom: clamp(24px, 5svh, 60px); }

/* ---------- Vorführung: eine Revoltaic-Präsentation, der Scroll steuert die echte Website (Dach → Annäherung → Modulschichten) ---------- */
/* Eintritt: Gerät etwas kleiner und leicht perspektivisch → wächst und richtet sich frontal aus; dann hält die Bühne, während der Scroll die
   Sequenz führt; danach wird sie weich entlassen. --e (Eintritt 0…1), --p (Sequenz 0…1), --rb/--rh/--rr (Gerätemaße) setzt vorfuehrung.js.
   Ohne Skript und bei reduzierter Bewegung: normale Abfolge mit Standbild, Umschalter nur mit Skript. */
.vorfuehrung { position: relative; --p: 0; --h: 1; }
.vorfuehrung.ist-gesteuert { height: 290svh; }
.vorfuehrung__buehne { position: relative; min-height: 100svh; display: grid; grid-template-columns: minmax(0, .36fr) minmax(0, 1fr); align-items: center; gap: 3.2vw;
  padding: clamp(86px, 11svh, 110px) 0 clamp(26px, 5svh, 46px); }
.ist-gesteuert .vorfuehrung__buehne { position: sticky; top: 0; height: 100svh; grid-template-rows: minmax(0, 1fr); } /* feste Zeile: Öffnen verschiebt das Gerät nicht */
.vorfuehrung__text { align-self: center; }
/* geschlossen mittig (Skript), Zeilen öffnen nach unten. Ankunft/Abgang: scrollgebunden (unten „Ankunft und Abgang“) – keine CSS-Übergänge auf
   Lage oder Maßen, damit nichts zeitverzögert nachläuft. Kein will-change: eine dauerhaft eigene Ebene der Bühne verrechnete Text und Rahmen
   in Ruhe weicher (gemessen an der Übergabe 1366 × 768); die scrollgebundenen Animationen erhalten ihre Ebene vom Browser. */
.ist-gesteuert .vorfuehrung__text { align-self: start; }
.aufbau__aussage { font: 620 clamp(28px, 2.6vw, 44px)/1.08 var(--display); font-stretch: 125%; letter-spacing: -.03em; color: #fff; text-shadow: var(--saum-gross); max-width: 11em; text-wrap: balance; }
.aufbau__lead { margin-top: clamp(12px, 1.8svh, 18px); max-width: 25em; font-size: clamp(15.5px, 1.08vw, 17.5px); }
.vorfuehrung__geraet { margin: 0; justify-self: end; display: grid; justify-items: center; gap: 14px; perspective: 1600px; min-width: 0; width: 100%; }
/* Gerät: Rahmen = Browserfenster bzw. Handy; Maße setzt das Skript, die Form wechselt kontrolliert */
.vorfuehrung__rahmen { position: relative; width: 100%; max-width: 900px; border-radius: var(--rr, 16px); overflow: hidden; background: #0B1424;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .55), 0 0 0 7px rgba(255, 255, 255, .12), 0 16px 34px -20px rgba(4, 14, 40, .55);
  transition: width .55s var(--ease), height .55s var(--ease), border-radius .55s var(--ease), box-shadow .35s var(--ease); }
/* Ankunft aus der Wolkenpassage: Bis die Bühne hält, zeigt die Szene die deckungsgleiche Karte; dann blendet dieser Rahmen über ihr ein (--h aus
   vorfuehrung.js) – derselbe Rahmen, dasselbe Bild, kein Wechsel sichtbar. Unterschrift und Umschalter folgen. Ohne Szene: sofort sichtbar. */
.erlebnis .vorfuehrung.ist-gesteuert .vorfuehrung__rahmen, .erlebnis .vorfuehrung.ist-gesteuert .vorfuehrung__unterschrift { opacity: var(--h, 1); }
.erlebnis .vorfuehrung.ist-gesteuert:not(.ist-angekommen) .vorfuehrung__geraet { pointer-events: none; }
.mit-skript .vorfuehrung__rahmen { width: var(--rb); height: var(--rh); max-width: none; }
.vorfuehrung__geraet[data-geraet="handy"] .vorfuehrung__rahmen { box-shadow: 0 0 0 1px rgba(255, 255, 255, .62), 0 0 0 8px #0C1628, 0 0 0 9px rgba(255, 255, 255, .3), 0 16px 34px -20px rgba(4, 14, 40, .55); }
/* feine Lichtkante beim Überfahren (nur Maus): folgt dem Zeiger am Rand, kehrt beim Verlassen weich zurück; die Website selbst bleibt ruhig */
.vorfuehrung__rahmen::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3; opacity: 0; transition: opacity .35s var(--ease);
  background: radial-gradient(240px 240px at var(--lx, 50%) var(--ly, 0%), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); padding: 1.5px; }
@media (hover: hover) and (pointer: fine) { .vorfuehrung__rahmen:hover::after { opacity: 1; } }
.vorfuehrung__leiste { position: relative; z-index: 2; height: 34px; display: flex; align-items: center; gap: 7px; padding: 0 14px; background: #F3F6FA; border-bottom: 1px solid rgba(16, 29, 69, .1); transition: opacity .3s var(--ease), height .55s var(--ease); }
.vorfuehrung__leiste span { width: 10px; height: 10px; border-radius: 50%; background: #D3DAE5; }
.vorfuehrung__leiste p { margin: 0 auto; padding: 4px 16px; border-radius: 999px; background: #fff; font: 500 12px/1.2 var(--lese); color: var(--neben); box-shadow: inset 0 0 0 1px rgba(16, 29, 69, .08); }
.vorfuehrung__geraet[data-geraet="handy"] .vorfuehrung__leiste { height: 0; opacity: 0; border: 0; }
.vorfuehrung__bildschirm { position: relative; overflow: hidden; background: #0B1424; aspect-ratio: 1440 / 900; }
.mit-skript .vorfuehrung__bildschirm { aspect-ratio: auto; height: calc(100% - 34px); transition: height .55s var(--ease); }
.mit-skript [data-geraet="handy"] .vorfuehrung__bildschirm { height: 100%; }
.vorfuehrung__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .45s var(--ease); }
.vorfuehrung__poster--hoch, [data-geraet="handy"] .vorfuehrung__poster--breit { opacity: 0; }
[data-geraet="handy"] .vorfuehrung__poster--hoch { opacity: 1; }
.vorfuehrung__seite { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; background: transparent; opacity: 0; transition: opacity .3s linear; pointer-events: none; }
.vorfuehrung__seite.ist-sichtbar { opacity: 1; } /* erst nach tatsächlicher Bereitschaft (aktueller Fortschritt gezeichnet) */
.vorfuehrung__seite.ist-sofort { transition: none; }
/* Standbild des letzten gültigen Zustands während des Gerätewechsels (füllt die neue Form, bis die andere Fassung gezeichnet ist) */
.vorfuehrung__moment { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s linear; pointer-events: none; }
.vorfuehrung__moment.ist-da { opacity: 1; transition: none; }
.ist-ausfall .vorfuehrung__stand { display: none; } /* Vorführung nicht verfügbar: Standbild, keine Fortschrittsanzeige */
/* Rückmeldung der Angebotszeilen in der Vorschau: eine kleine Kapsel benennt, was die geöffnete Zeile an dieser Website zeigt */
.vorfuehrung__hinweis { position: absolute; left: 14px; bottom: 14px; z-index: 2; display: flex; align-items: center; gap: 10px; max-width: calc(100% - 28px); margin: 0; padding: 9px 14px;
  border-radius: 14px; background: rgba(9, 24, 54, .66); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .38);
  font: 500 13px/1.3 var(--lese); color: #fff; opacity: 0; transform: translate3d(0, 8px, 0); transition: opacity .24s var(--ease), transform .3s var(--ease); pointer-events: none; }
.vorfuehrung[data-hinweis="1"] [data-zu="1"], .vorfuehrung[data-hinweis="2"] [data-zu="2"], .vorfuehrung[data-hinweis="3"] [data-zu="3"] { opacity: 1; transform: none; transition-delay: .12s; }
.vorfuehrung__farben { display: inline-flex; flex: none; gap: 4px; }
.vorfuehrung__farben span { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55); }
.farbe--nacht { background: #0b1622; } .farbe--gruen { background: #3a8453; } .farbe--gelb { background: #ffd624; }
.vorfuehrung__unterschrift { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; width: 100%; max-width: 900px; }
.mit-skript .vorfuehrung__unterschrift { width: var(--rb); max-width: none; transition: width .55s var(--ease); }
.vorfuehrung:not(.mit-skript) .vorfuehrung__wahl, .vorfuehrung:not(.ist-gesteuert) .vorfuehrung__stand { display: none; }
.vorfuehrung__stand { position: relative; display: flex; gap: 20px; padding: 10px 16px 13px; border-radius: 999px; background: rgba(9, 28, 66, .36); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font: 500 13px/1.2 var(--display); font-stretch: 112%; letter-spacing: .02em; color: rgba(255, 255, 255, .76); }
.vorfuehrung__phase { transition: color .3s var(--ease); }
.vorfuehrung__phase.ist-aktiv { color: #fff; }
.vorfuehrung__linie { position: absolute; left: 16px; right: 16px; bottom: 6px; height: 1px; background: rgba(255, 255, 255, .26); }
.vorfuehrung__linie span { position: absolute; left: 0; top: -0.5px; height: 2px; width: 100%; transform: scaleX(0); transform-origin: left center; background: #fff; border-radius: 2px; }
.vorfuehrung__wahl { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .22); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.vorfuehrung__wahl button { min-height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; color: #fff; cursor: pointer; font: 560 14px/1 var(--display); font-stretch: 112%; transition: background-color .2s var(--ease), color .2s var(--ease), transform .12s var(--ease); }
.vorfuehrung__wahl button:hover:hover { background: rgba(255, 255, 255, .18); }
.vorfuehrung__wahl button[aria-pressed="true"][aria-pressed="true"] { background: #fff; color: var(--tief); box-shadow: 0 1px 2px rgba(14, 26, 60, .2); }
.vorfuehrung__wahl button:active:active { transform: scale(.97); }
.vorfuehrung__wahl button:focus-visible:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vorfuehrung__nach:empty { display: none; }
.vorfuehrung__nach { position: relative; margin-top: 20px; }
.vorfuehrung__nach .nutzen { margin-top: 0; max-width: none; }

/* ---------- Angebotszeilen: bedienbar, eine geöffnet, aktiver Marker gleitet zur gewählten Zeile (Lage --my/--mh setzt das Skript) ---------- */
.nutzen { position: relative; list-style: none; margin: clamp(18px, 3svh, 28px) 0 0; padding: 0; max-width: 27em; }
.nutzen::before { content: ''; position: absolute; left: -12px; right: -12px; top: 0; height: var(--mh, 0px); transform: translate3d(0, var(--my, 0px), 0); border-radius: 16px; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, rgba(30, 78, 165, .46), rgba(58, 116, 204, .32) 60%, rgba(128, 178, 238, .2));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45), 0 18px 40px -26px rgba(4, 18, 52, .7); transition: opacity .25s var(--ease); }
.nutzen.hat-aktiv::before { opacity: 1; }
.nutzen__zeile { position: relative; border-top: 1px solid var(--linie-hell); }
.nutzen__zeile:last-child { border-bottom: 1px solid var(--linie-hell); }
.nutzen__knopf { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: space-between; gap: 18px; width: 100%; min-height: 56px; padding: 14px 0; border: 0; background: none; cursor: pointer; text-align: left; color: #fff;
  font: 600 clamp(16px, 1.15vw, 18px)/1.35 var(--display); font-stretch: 115%; text-shadow: var(--saum); border-radius: 12px; transition: transform .2s var(--ease); }
.nutzen__knopf::before { content: ''; position: absolute; inset: 2px -12px; border-radius: 14px; background: rgba(255, 255, 255, 0); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0); transition: background-color .2s var(--ease), box-shadow .2s var(--ease); z-index: -1; }
@media (hover: hover) { .nutzen__knopf:hover { transform: translateY(-2px); } .nutzen__knopf:hover::before { background: rgba(255, 255, 255, .09); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .34); } .nutzen__knopf:hover .nutzen__plus { background: rgba(255, 255, 255, .3); } }
.nutzen__knopf:focus-visible { transform: translateY(-2px); }
.nutzen__knopf:focus-visible::before { background: rgba(255, 255, 255, .09); }
.nutzen__knopf:focus-visible { outline: none; }
.nutzen__knopf:focus-visible::before { box-shadow: inset 0 0 0 2px #fff; }
.nutzen__plus { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55); transition: background-color .2s var(--ease), transform .2s var(--ease); }
.nutzen__plus::before, .nutzen__plus::after { content: ''; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.6px; margin: -.8px 0 0 -5.5px; background: #fff; border-radius: 1px; transition: transform .25s var(--ease), background-color .2s var(--ease); }
.nutzen__plus::after { transform: rotate(90deg); }
.nutzen__knopf:focus-visible .nutzen__plus { background: rgba(255, 255, 255, .3); }
.nutzen__knopf[aria-expanded="true"] .nutzen__plus { background: #fff; }
.nutzen__knopf[aria-expanded="true"] .nutzen__plus::before, .nutzen__knopf[aria-expanded="true"] .nutzen__plus::after { background: var(--tief); }
.nutzen__knopf[aria-expanded="true"] .nutzen__plus::after { transform: rotate(0deg); } /* Plus wird zu Minus */
.nutzen__mehr { overflow: hidden; transition: height .24s var(--ease), opacity .24s var(--ease); }
.nutzen.ist-bereit .nutzen__mehr { opacity: 0; }
.nutzen.ist-bereit .ist-offen .nutzen__mehr { opacity: 1; }
.nutzen__mehr p { padding: 0 44px 16px 0; font-size: 15.5px; line-height: 1.55; color: var(--hell-weiss); text-shadow: var(--saum); }

/* ---------- 3 · Zusammenarbeit (Finalpaket 07.10.2026): Überschrift, Hinweis und Prozess in EINER Bühne; links EINE Vorschau der Materialseite
   (Strukturplan → Design → Website in derselben Geometrie), rechts drei Schritte an einer feinen Fortschrittslinie. Mit Skript und Bewegung hält die
   Bühne, wenn alles in die Fensterhöhe passt (Breite der Vorschau setzt inhalt.js), sonst normale Abfolge. Keine Schrittzahlen, Punkte oder Trenner. ---------- */
.ablauf { position: relative; padding: clamp(36px, 7svh, 84px) var(--rand) clamp(48px, 9svh, 110px); }
.ablauf__kopf { max-width: 1340px; margin: 0 auto clamp(16px, 2.8svh, 28px); }
.ablauf__titel { margin: 8px 0 6px; font-size: clamp(32px, 3.4vw, 56px); max-width: none; }
.ablauf__lead { max-width: 36em; }
.stationen-strecke { position: relative; }
.stationen-strecke.ist-gesteuert { height: 270svh; }
.ist-gesteuert .stationen-buehne { position: sticky; top: 0; height: 100svh; display: grid; align-content: center; padding: clamp(80px, 10svh, 96px) 0 clamp(14px, 2.4svh, 26px); }
.stationen { display: grid; grid-template-columns: minmax(0, 1.24fr) minmax(0, .76fr); gap: 24px clamp(32px, 4vw, 72px); align-items: center; width: 100%; max-width: 1340px; margin: 0 auto;
  padding: clamp(18px, 2.2vw, 36px); border-radius: 26px;
  /* ruhige blaue Fläche: links (hinter der Vorschau) etwas durchlässiger, hinter den Schritten dicht genug für weiße Schrift auch vor hellen Wolken */
  background: linear-gradient(90deg, rgba(74, 112, 172, .58) 0%, rgba(52, 90, 154, .8) 52%, rgba(54, 94, 158, .86) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .17), 0 28px 60px -48px rgba(6, 18, 48, .5); } /* ein leichter Schatten (früher zwei schwere, die sich addierten) */
/* Vorschau: ein Fenster im Seitenverhältnis der Website; Größe steht während der ganzen Verwandlung fest */
.stationen__vorschau { margin: 0; min-width: 0; display: grid; justify-items: center; }
.stationen__fenster { position: relative; width: 100%; aspect-ratio: 1440 / 900; overflow: hidden; border-radius: 14px; background: #EEF0F3;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .6), 0 0 0 6px rgba(255, 255, 255, .12); isolation: isolate; }
/* Materialseite: Grund des Strukturplans → Grund der Gestaltung (Aufnahme ohne Bausteine) → Drahtgitter → Design-Ausschnitte → Design (ganz) →
   warme Platzhalter → fertige Ausschnitte (Kacheln, Muster) → fertige Website (ganz) → Ziffernebene. Ohne Skript zeigt die oberste Ebene die fertige Seite. */
.ks { position: absolute; inset: 0; background: #EEF0F3; }
.ks > img, .ks__plan, .ks__platzhalter { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ks__band { fill: #DDE2E9; }
.ks__strich, .ks__rahmen { fill: none; stroke: #8E99AA; stroke-width: 1.3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ks__strich--fein { stroke-width: 1; }
.ks__balken { fill: #C3CAD4; }
.ks__balken--gross { fill: #A6B0BE; }
.ks__platz { fill: #EEE7DB; stroke: #D6CAB6; stroke-width: 1; vector-effect: non-scaling-stroke; }
.ks__platz--muster { fill: #EBE4D8; }
.ks__teil { position: absolute; background-repeat: no-repeat; }
.ks__teil--design { background-image: url('../img/arbeiten/ks-material-design.webp'); }
.ks__teil--fertig { background-image: url('../img/arbeiten/ks-material-fertig.webp'); }
.stationen__ziffern { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
.stationen__quelle { margin-top: 12px; justify-self: start; font: 420 14.5px/1.4 var(--lese); color: rgba(255, 255, 255, .8); }
.stationen__stand { font-weight: 640; color: #fff; }
/* Schritte: Titel und Begleittext; links eine sehr dünne Linie, ein kurzer heller Abschnitt gleitet stetig mit dem Fortschritt (Lage setzt das Skript) */
.stationen__schritte { position: relative; padding-left: clamp(26px, 2.4vw, 42px); }
.stationen__linie { position: absolute; left: 0; top: var(--linie-oben, 0px); height: var(--linie-hoehe, 100%); width: 1px; background: rgba(255, 255, 255, .24); }
.stationen__lauf { position: absolute; left: -1px; top: 0; width: 3px; height: var(--lauf-h, 33%); border-radius: 2px; background: #fff; transform: translate3d(0, var(--lauf-y, 0px), 0); }
.stationen:not(.mit-skript) .stationen__lauf { display: none; }
.stationen__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(22px, 4.6svh, 52px); }
.station__knopf { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; color: inherit; }
.station__titel { display: block; font: 620 clamp(24px, 2.25vw, 38px)/1.08 var(--display); font-stretch: 125%; letter-spacing: -.028em; color: rgba(255, 255, 255, .62); transition: color .35s var(--ease); }
.station__text { margin-top: 8px; max-width: 25em; font: 420 clamp(15.5px, 1.12vw, 18px)/1.5 var(--lese); color: rgba(255, 255, 255, .82); transition: color .35s var(--ease); }
.station.ist-aktiv .station__titel, .stationen:not(.mit-skript) .station__titel { color: #fff; }
.station.ist-aktiv .station__text, .stationen:not(.mit-skript) .station__text { color: rgba(255, 255, 255, .96); }
@media (hover: hover) { .station__knopf:hover .station__titel { color: rgba(255, 255, 255, .9); } }
.station__knopf:focus-visible { outline: 2px solid #fff; outline-offset: 6px; border-radius: 6px; }

/* ---------- Kapitelanzeige in der Kopfzeile: kleiner Punkt gleitet unter den aktiven Bereich ---------- */
.kopf__nav { position: relative; }
.kopf__punkt { position: absolute; left: -2.5px; bottom: 0; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: 0; transition: transform .6s var(--ease), opacity .4s var(--ease); pointer-events: none; }
.kopf__punkt.ist-da { opacity: 1; }
.kopf__nav a { color: inherit; }
.menue__nav a[aria-current]::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--tinte); align-self: center; flex: none; }

/* ---------- 4 · Preise: zwei Karten auf dem Himmel (Bild 01, blaue Fassung; kompakt, Finalpaket 07.10.2026) – links tiefblau mit weißer Schrift
   (Website: Einführungspreis 1.500 € einmalig, mattrotes Label), rechts wolkenweiß mit dunkelblauer Schrift (Betreuung). Überschrift, Einleitung
   und beide vollständigen Karten passen am Desktop in eine Ansicht; bei wenig Platz stehen die Karten untereinander. ---------- */
.preise { position: relative; padding: clamp(44px, 8svh, 100px) var(--rand) clamp(56px, 10svh, 120px);
  --navy: #0F3667; --navy-tief: #0B2B55; --hellblau: #A9D3F7; --hellblau-hover: #C4E2FB; --angebot-rot: #B53F4A; }
.preise__kopf, .tarife { max-width: 1120px; margin-left: auto; margin-right: auto; }
.preise__titel { font: var(--anzeige); font-stretch: 125%; letter-spacing: -.032em; color: #fff; text-wrap: balance; text-shadow: var(--saum-gross); }
.preise__lead { margin-top: clamp(6px, 1svh, 12px); font: 450 clamp(17px, 1.45vw, 24px)/1.32 var(--lese); letter-spacing: -.005em; color: var(--hell-weiss); text-shadow: var(--saum); }
.tarife { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(14px, 1.4vw, 20px); align-items: stretch; margin-top: clamp(18px, 3.2svh, 34px); }
.tarif { display: grid; min-width: 0; } /* Hülle: einmaliges Einblenden (steig); das Anheben beim Überfahren übernimmt die Fläche */
.tarif__flaeche { position: relative; display: flex; flex-direction: column; min-width: 0; padding: clamp(20px, 2.2vw, 32px) clamp(20px, 2.4vw, 34px) clamp(18px, 1.9vw, 26px);
  border-radius: 20px; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.tarif--website .tarif__flaeche { color: #fff; background: linear-gradient(162deg, #174A84 0%, var(--navy) 44%, var(--navy-tief) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 36px 72px -48px rgba(3, 14, 40, .8); }
.tarif--betreuung .tarif__flaeche { color: var(--navy); background: linear-gradient(172deg, #F9FBFE, #EEF4FA);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .95), 0 36px 72px -48px rgba(3, 14, 40, .62); }
/* Überfahren und Tastaturfokus: wenige Pixel anheben, Kontur dezent heller */
@media (hover: hover) {
  .tarif__flaeche:hover { transform: translate3d(0, -4px, 0); }
  .tarif--website .tarif__flaeche:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4), 0 44px 80px -48px rgba(3, 14, 40, .88); }
  .tarif--betreuung .tarif__flaeche:hover { box-shadow: inset 0 0 0 1px #fff, 0 0 0 1px rgba(255, 255, 255, .6), 0 44px 80px -48px rgba(3, 14, 40, .7); }
}
.tarif__flaeche:has(:focus-visible) { transform: translate3d(0, -4px, 0); }
.tarif__oben { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 30px; }
.tarif__art { font: 640 12.5px/1.2 var(--display); font-stretch: 118%; letter-spacing: .2em; text-transform: uppercase; }
.tarif--website .tarif__art { color: rgba(255, 255, 255, .88); }
.tarif--betreuung .tarif__art { color: #3A72B8; }
/* Angebotslabel: mattes Rot nur als dieser eine Akzent (kein Blinken, keine pulsierende Umrandung) */
.tarif__marke { flex: none; padding: 8px 14px 9px; border-radius: 999px; background: var(--angebot-rot); color: #fff; font: 640 13.5px/1 var(--display); font-stretch: 110%; letter-spacing: .005em; }
.tarif__titel { margin-top: clamp(8px, 1vw, 14px); font: 640 clamp(23px, 2vw, 33px)/1.1 var(--display); font-stretch: 115%; letter-spacing: -.022em; text-wrap: balance; }
.tarif__preisblock { margin-top: clamp(8px, 1vw, 14px); }
.tarif__preis { font: 700 clamp(50px, 4.5vw, 76px)/1 var(--display); font-stretch: 110%; letter-spacing: -.035em; white-space: nowrap; }
.tarif__ab { font-size: .48em; font-weight: 640; letter-spacing: -.01em; }
.tarif__takt { margin-top: 4px; font: 450 clamp(15.5px, 1.1vw, 18px)/1.3 var(--lese); }
.tarif--website .tarif__takt { color: rgba(255, 255, 255, .88); }
.tarif--betreuung .tarif__takt { color: #4A5E80; }
.tarif__steuer { font-size: .88em; white-space: nowrap; } /* § 19 UStG: in derselben Zeile wie „einmalig“/„pro Monat“ – keine zusätzliche Höhe auf dem Desktop */
@media (max-width: 600px) { .tarif__steuer { display: block; margin-top: 2px; white-space: normal; } .tarif__trenner { display: none; } }
.tarif__zweck { margin-top: clamp(8px, 1vw, 12px); font: 480 clamp(16px, 1.2vw, 19px)/1.35 var(--lese); }
/* Beträge zählen beim Erscheinen einmal von 0 hoch (preise.js): Tabellenziffern, Breite auf den Endwert reserviert, Zahl rechtsbündig –
   „ab“, „€“ und „pro Monat“ stehen fest, nichts springt seitlich; ohne Skript und bei reduzierter Bewegung steht sofort der Endwert */
.tarif__zahl { display: inline-block; text-align: right; font-variant-numeric: tabular-nums lining-nums; }
/* Leistungen: hellblaue Häkchen */
.tarif__liste { list-style: none; display: grid; gap: clamp(7px, .8vw, 11px); margin: clamp(14px, 1.6vw, 20px) 0 0; padding: clamp(14px, 1.6vw, 20px) 0 0; border-top: 1px solid rgba(255, 255, 255, .2); }
.tarif--betreuung .tarif__liste { border-top-color: rgba(15, 54, 103, .14); }
.tarif__liste li { position: relative; padding-left: 36px; font: 450 clamp(15.5px, 1.1vw, 18px)/1.4 var(--lese); }
.tarif__liste li::before { content: ''; position: absolute; left: 0; top: calc(.7em - 12px); width: 24px; height: 24px; border-radius: 50%;
  background: var(--hellblau) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1.3 5.2l3 3L10.7 1.7' fill='none' stroke='%230B2B55' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px 9px no-repeat; }
.tarif--betreuung .tarif__liste li::before { background-color: #C3DFF8; }
.tarif__fuss { display: grid; justify-items: center; gap: 10px; margin-top: auto; padding-top: clamp(16px, 1.9vw, 24px); }
.tarif__knopf { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 54px; padding: 10px 24px; border-radius: 999px; text-align: center; text-decoration: none;
  background: var(--hellblau); color: var(--navy-tief); font: 640 clamp(16px, 1.15vw, 18px)/1.2 var(--display); font-stretch: 110%; letter-spacing: -.005em;
  transition: background-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease); }
.tarif__knopf--kontur { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--navy); }
@media (hover: hover) { .tarif__knopf:hover { background: var(--hellblau-hover); } .tarif__knopf--kontur:hover { background: rgba(169, 211, 247, .42); } }
.tarif__knopf:active { transform: scale(.985); }
.tarif__knopf:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 999px; }
.tarif--betreuung .tarif__knopf:focus-visible { outline-color: var(--marke-hell); }
.tarif__hinweis { font: 420 14px/1.4 var(--lese); text-align: center; }
.tarif--website .tarif__hinweis { color: rgba(255, 255, 255, .82); }
.tarif--betreuung .tarif__hinweis { color: #4A5E80; }
/* Weg zur jeweiligen Leistungsseite (SEO/GEO 08.10.2026): klein, unterstrichen, Farbe der Karte */
.tarif__mehr { white-space: nowrap; font-weight: 560; text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px; }
.tarif--website .tarif__mehr { color: #FFFFFF; text-decoration-color: rgba(255, 255, 255, .55); }
.tarif--betreuung .tarif__mehr { color: #1F3A66; text-decoration-color: rgba(31, 58, 102, .45); }
.tarif__mehr:hover, .tarif__mehr:focus-visible { text-decoration-thickness: 2px; }
.kontakt__mehr { margin-top: 14px; font: 560 15px/1.4 var(--lese); }
.kontakt__mehr a { color: #FFFFFF; text-decoration: underline; text-underline-offset: .22em; text-decoration-color: rgba(255, 255, 255, .6); }
.kontakt__mehr a:hover, .kontakt__mehr a:focus-visible { text-decoration-thickness: 2px; text-decoration-color: #FFFFFF; }
.nutzen__mehr p a, .frage__antwort a { color: inherit; text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; white-space: nowrap; }

/* ---------- 5 · Fragen: die ganze Zeile reagiert vor dem Öffnen (hell, leicht angehoben), Öffnen per Klick/Tippen/Tastatur mit weicher Höhe ---------- */
.fragen { position: relative; padding: calc(var(--abschnitt) * .5) var(--rand) calc(var(--abschnitt) * .7); display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px 7vw; align-items: start; }
/* Überschrift: zwei Zeilen gleiten beim Herunterscrollen von links ruhig an ihren Platz (leicht versetzt, ohne Überschwingen); kein dunkler Schatten.
   Start, wenn der Abschnitt gut sichtbar ist (inhalt.js setzt .ist-da); ohne Skript und bei reduzierter Bewegung steht der Text sofort. */
.fragen__titel { text-shadow: none; }
.fragen__zeile { display: block; }
html.steigt .fragen__titel.gleitet .fragen__zeile { opacity: 0; transform: translate3d(-9vw, 0, 0); }
html.steigt .fragen__titel.gleitet.ist-da .fragen__zeile { opacity: 1; transform: none; transition: transform 1.25s cubic-bezier(.16, .84, .3, 1), opacity .9s cubic-bezier(.3, .6, .3, 1); }
html.steigt .fragen__titel.gleitet.ist-da .fragen__zeile + .fragen__zeile { transition-delay: .16s, .16s; }
@media (prefers-reduced-motion: reduce) { html.steigt .fragen__titel.gleitet .fragen__zeile { opacity: 1; transform: none; } }
.fragen__liste { position: relative; container-type: inline-size; background: linear-gradient(var(--linie-hell), var(--linie-hell)) left top / 100% 1px no-repeat; }
.frage { position: relative; background: linear-gradient(var(--linie-hell), var(--linie-hell)) left bottom / 100% 1px no-repeat; }
/* Lichtlauf: ein schmaler, weich auslaufender heller Abschnitt wandert einmal von links nach rechts über die stehende Grundlinie und verschwindet
   (nur Transform/Deckkraft, keine Wirkung auf Layout, Klicks oder Tastatur). Start je Linie setzt inhalt.js (.licht-an) – oben beginnend,
   sichtbare Linien im Abstand von ≈150 ms, spätere erst beim Eintritt; nicht bei reduzierter Bewegung. */
.fragen__liste::before, .frage::after { content: ''; position: absolute; left: 0; z-index: 1; width: clamp(96px, 18cqw, 210px); height: 3px; pointer-events: none; opacity: 0;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, .95), rgba(255, 255, 255, .5) 42%, rgba(255, 255, 255, 0)); }
.fragen__liste::before { top: -1px; }
.frage::after { bottom: -1px; }
.fragen__liste.licht-an::before, .frage.licht-an::after { animation: lichtlauf .9s cubic-bezier(.42, 0, .3, 1) both; }
@keyframes lichtlauf {
  0% { opacity: 0; transform: translate3d(0, 0, 0); }
  16% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(calc(100cqw - 100%), 0, 0); }
}
@media (prefers-reduced-motion: reduce) { .fragen__liste::before, .frage::after { display: none; } }
.frage summary { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 68px; padding: 16px 0; cursor: pointer; list-style: none;
  font: 600 clamp(17px, 1.3vw, 20px)/1.3 var(--display); font-stretch: 115%; letter-spacing: -.01em; color: #fff; text-shadow: var(--saum); transition: transform .2s var(--ease); }
.frage summary::-webkit-details-marker { display: none; }
.frage summary::before { content: ''; position: absolute; inset: 4px -16px; z-index: -1; border-radius: 16px; pointer-events: none; background: rgba(255, 255, 255, 0); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0); transition: background-color .2s var(--ease), box-shadow .2s var(--ease); }
.frage__text { background: linear-gradient(currentColor, currentColor) left 100% / 0% 1px no-repeat; padding-bottom: 3px; transition: background-size .22s var(--ease); }
.frage__zeichen { position: relative; flex: none; width: 38px; height: 38px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .2); transition: box-shadow .2s var(--ease), transform .2s var(--ease); }
.frage__zeichen::before, .frage__zeichen::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.6px; margin: -.8px 0 0 -6px; background: var(--tief); transition: transform .22s var(--ease); }
.frage__zeichen::after { transform: rotate(90deg); }
.frage[open] .frage__zeichen::after { transform: rotate(0deg); }
/* gleiche Wertigkeit: Überfahren, Tastaturfokus und geöffnete Frage */
@media (hover: hover) { .frage summary:hover { transform: translateY(-2px); } .frage summary:hover::before { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
  .frage summary:hover .frage__text { background-size: 100% 1px; } .frage summary:hover .frage__zeichen { box-shadow: 0 0 0 7px rgba(255, 255, 255, .3); } }
.frage summary:focus-visible { outline: none; transform: translateY(-2px); }
.frage summary:focus-visible::before { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 2px #fff; }
.frage summary:focus-visible .frage__text { background-size: 100% 1px; }
.frage summary:focus-visible .frage__zeichen { box-shadow: 0 0 0 7px rgba(255, 255, 255, .3); }
.frage[open] > summary::before { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.frage[open] .frage__zeichen { box-shadow: 0 0 0 7px rgba(255, 255, 255, .3); }
.frage.schliesst > summary::before { background: rgba(255, 255, 255, 0); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0); }
.frage.schliesst .frage__zeichen { box-shadow: 0 0 0 4px rgba(255, 255, 255, .2); }
.frage.schliesst .frage__zeichen::after { transform: rotate(90deg); }
.frage__antwort { padding: 6px 64px 26px 0; max-width: 40em; }
.frage__antwort p { color: var(--hell-weiss); text-shadow: var(--saum); }
.frage.bewegt { overflow: hidden; } /* nur während der Höhenänderung (fragen in inhalt.js) */

/* ---------- Kleine Gruppen steigen einmal auf, Linien bauen sich auf (nur mit Skript und Bewegung) ---------- */
html.steigt .steig { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity .8s var(--ease), transform 1s var(--ease); }
html.steigt .steig.ist-da { opacity: 1; transform: none; }
html.steigt .tarif.steig { transform: translate3d(0, 28px, 0); }
html.steigt .tarif.steig.ist-da { transform: none; }
html.steigt .tarif--betreuung.steig { transition-delay: .12s; }

/* ---------- Himmel ohne Abschnittskanten (Auftrag 08.10.2026 material/quellen/AUFTRAG-schatten-scroll-fix-2026-10-08.txt) ----------
   Ursache der geraden dunklen Streifen am Übergang Angebot → SEO/GEO: abschnittsgebundene Abdunklungen über dem Himmel – .tiefe::before (bis 30 %,
   volle Deckung schon nach 2,5 % der ≈ 7 500 px hohen Fläche, also ≈ 190 px unter ihrer Oberkante), .auffindbar::before (+20 %), eine radiale
   Fläche hinter dem Angebotstext (40 %) und eine hinter dem Kontakt. Sie sind entfernt. Die Tiefe für die Lesbarkeit entsteht jetzt als EINE
   gleichmäßige Abdunklung des Himmels in der Szene (szene.js „abdunkeln“, unter den Karten; Stärke nach der Scrollposition aus start.js) – im Bild
   gibt es keine räumliche Kante, und die ankommende Karte bleibt so hell wie der Rahmen der Seite. Dazu ein weicher Schriftschatten im Angebot. */
.tiefe { position: relative; }
.erlebnis .vorfuehrung__text { position: relative; }
.erlebnis .vorfuehrung__text .aufbau__lead, .erlebnis .vorfuehrung__text .nutzen { text-shadow: 0 1px 2px rgba(6, 22, 56, .45), 0 0 14px rgba(6, 22, 56, .32); }

/* ---------- 6 · Kontakt: kostenlose Website-Vorschau (Bild 02) – links die Einladung in Weiß direkt auf dem Himmel, rechts eine wolkenweiße
   Formularfläche (dunkle Schrift, klare Felder, viel Luft). Anfrageart sichtbar und änderbar; Texte je Art über data-art (ohne JS: :has) ---------- */
.kontakt { position: relative; padding: clamp(48px, 8svh, 100px) var(--rand) clamp(70px, 11svh, 130px); --navy: #0F3667; --blau: #2F56B8; --feld: #D3DDEA; --grau: #56677F; }
.kontakt__inhalt { display: grid; grid-template-columns: minmax(0, .6fr) minmax(0, 1fr); gap: 32px clamp(32px, 4.4vw, 80px); align-items: start; max-width: 1400px; margin: 0 auto; }
.kontakt__einladung { padding-top: clamp(10px, 4svh, 44px); }
.weiter-himmel .kontakt__label { color: #fff; font-size: clamp(12px, .9vw, 14px); letter-spacing: .28em; }
.kontakt__titel { margin-top: clamp(12px, 1.8svh, 20px); max-width: 9em; font-size: clamp(36px, 3.7vw, 62px); }
.kontakt__lead { margin-top: clamp(14px, 2.2svh, 22px); max-width: 18em; font-size: clamp(17px, 1.45vw, 23px); line-height: 1.4; }
/* Formularfläche */
.brief { position: relative; min-width: 0; padding: clamp(20px, 2.2vw, 32px) clamp(20px, 2.4vw, 36px) clamp(18px, 1.9vw, 26px); border-radius: 22px; color: var(--tief);
  background: linear-gradient(180deg, #FFFFFF, #F7FAFD); box-shadow: 0 0 0 1px rgba(255, 255, 255, .75), 0 0 0 9px rgba(255, 255, 255, .12), 0 60px 120px -60px rgba(3, 14, 40, .75); }
.brief:focus { outline: none; } /* Sprungziel der Anfragewege (tabindex -1): Fokus für Vorlesen, Tastatur sieht eine ruhige Kontur */
.brief:focus-visible { outline: 2px solid rgba(255, 255, 255, .85); outline-offset: 6px; border-radius: 24px; }
.brief__kopf { display: flex; align-items: center; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(15, 54, 103, .13); }
.brief__zeichen { flex: none; width: 38px; height: auto; fill: var(--navy); }
.brief__art { font: 640 12.5px/1.3 var(--display); font-stretch: 118%; letter-spacing: .2em; text-transform: uppercase; color: var(--navy); }
.brief__titel { margin-top: clamp(12px, 1.6svh, 18px); font: 660 clamp(24px, 2.1vw, 34px)/1.08 var(--display); font-stretch: 112%; letter-spacing: -.026em; color: #0A1530; text-wrap: balance; }
.brief__lead { margin-top: 4px; font: 420 clamp(15.5px, 1.1vw, 17.5px)/1.4 var(--lese); color: var(--grau); }
/* Texte je Anfrageart */
.nur-betreuung { display: none; }
.brief[data-art="betreuung"] .nur-betreuung { display: inline; }
.brief[data-art="betreuung"] .nur-vorschau { display: none; }
.brief:has(input[name="anfrageart"][value="betreuung"]:checked) .nur-betreuung { display: inline; }
.brief:has(input[name="anfrageart"][value="betreuung"]:checked) .nur-vorschau { display: none; }
.brief:has(input[name="anfrageart"][value="vorschau"]:checked) .nur-vorschau { display: inline; }
.brief:has(input[name="anfrageart"][value="vorschau"]:checked) .nur-betreuung { display: none; }
/* Anfrageart: zwei Möglichkeiten in einer Kapsel; gewählt = weiße Fläche mit dunkler Schrift */
.brief__wahl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px; min-width: 0; margin: clamp(12px, 1.8svh, 18px) 0 0; padding: 4px; border: 0; border-radius: 14px;
  background: #EAF0F7; box-shadow: inset 0 0 0 1px rgba(15, 54, 103, .08); }
.brief__modus { position: relative; display: flex; align-items: center; justify-content: center; min-height: 42px; padding: 7px 12px; border-radius: 11px; cursor: pointer; text-align: center;
  font: 620 14px/1.25 var(--display); font-stretch: 110%; color: var(--grau); transition: background-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease); }
.brief__modus input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
@media (hover: hover) { .brief__modus:hover { color: var(--navy); background: rgba(255, 255, 255, .55); } }
.brief__modus:has(input:checked), .brief__modus.ist-gewaehlt { background: #fff; color: var(--navy); box-shadow: 0 1px 2px rgba(14, 26, 60, .12), 0 0 0 1px rgba(15, 54, 103, .1); }
.brief__modus:has(input:focus-visible) { outline: 2px solid var(--blau); outline-offset: 2px; }
/* übernommener Bezug aus den Preiskarten: sichtbar, entfernbar, ausdrücklich nur ein Bezug (kein Auftrag) */
.brief__bezug { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 6px 6px 6px 16px; border-radius: 12px;
  background: #F1F6FC; box-shadow: inset 0 0 0 1px rgba(47, 86, 184, .2); font: 500 14.5px/1.35 var(--lese); color: #1E3768; }
.brief__bezug-weg { position: relative; flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; transition: background-color .2s var(--ease); }
.brief__bezug-weg span::before, .brief__bezug-weg span::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.6px; margin: -.8px 0 0 -6px; background: var(--navy); border-radius: 1px; transform: rotate(45deg); }
.brief__bezug-weg span::after { transform: rotate(-45deg); }
@media (hover: hover) { .brief__bezug-weg:hover { background: rgba(47, 86, 184, .12); } }
.brief__bezug-weg:focus-visible { outline: 2px solid var(--blau); outline-offset: 1px; border-radius: 50%; }
/* Felder: Beschriftung steht dauerhaft über dem Feld (bleibt beim Tippen sichtbar) */
.brief__pflicht { margin-top: clamp(10px, 1.5svh, 14px); font: 420 13.5px/1.4 var(--lese); color: var(--grau); }
.brief__felder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(10px, 1.5svh, 14px) 16px; margin-top: 8px; }
.formular__feld { display: grid; gap: 5px; align-content: start; min-width: 0; }
.formular__feld--breit { grid-column: 1 / -1; }
.formular__feld label { font: 520 14.5px/1.3 var(--lese); color: #17243F; }
.formular__stern { color: var(--navy); }
.formular__optional { font-weight: 400; color: var(--grau); }
.brief input:not([type="radio"]), .brief textarea { display: block; width: 100%; min-height: 46px; padding: 10px 13px; border: 1px solid var(--feld); border-radius: 10px; background: #fff;
  font: 420 16px/1.4 var(--lese); color: var(--tief); box-shadow: 0 1px 2px rgba(14, 26, 60, .04); transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease); }
.brief input::placeholder { color: #8796AC; }
@media (hover: hover) { .brief input:not([type="radio"]):hover, .brief textarea:hover { border-color: #B3C3D8; } }
.brief input:not([type="radio"]):focus, .brief textarea:focus { outline: none; border-color: var(--blau); box-shadow: 0 0 0 3px rgba(47, 86, 184, .16); }
.brief [aria-invalid="true"] { border-color: #B3261E; background: #FFFBFA; }
.brief [aria-invalid="true"]:focus { border-color: #B3261E; box-shadow: 0 0 0 3px rgba(179, 38, 30, .14); }
.formular__fehler { font-size: 13.5px; line-height: 1.4; color: #8A1C1C; }
.formular__falle { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* Wünsche: zunächst geschlossene Zeile, öffnet ein Nachrichtenfeld (ohne JS: natives Aufklappen) */
.brief__wuensche { margin-top: clamp(10px, 1.5svh, 14px); border: 1px solid var(--feld); border-radius: 10px; background: #F7FAFD; transition: border-color .18s var(--ease), background-color .18s var(--ease); }
.brief__wuensche summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; padding: 0 16px; border-radius: 9px; cursor: pointer; list-style: none;
  font: 520 15px/1.3 var(--lese); color: #1E3768; }
.brief__wuensche summary::-webkit-details-marker { display: none; }
@media (hover: hover) { .brief__wuensche:hover { border-color: #B3C3D8; background: #F3F7FC; } }
.brief__wuensche summary:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }
.brief__plus { position: relative; flex: none; width: 16px; height: 16px; }
.brief__plus::before, .brief__plus::after { content: ''; position: absolute; left: 0; top: 50%; width: 16px; height: 1.6px; margin-top: -.8px; background: var(--navy); border-radius: 1px; transition: transform .22s var(--ease); }
.brief__plus::after { transform: rotate(90deg); }
.brief__wuensche[open] .brief__plus::after { transform: rotate(0deg); }
.brief__wuensche.schliesst .brief__plus::after { transform: rotate(90deg); }
.brief__wuensche-feld { display: grid; gap: 7px; padding: 0 12px 12px; }
.brief__wuensche textarea { min-height: 124px; resize: vertical; }
.brief__wuensche.bewegt { overflow: hidden; } /* nur während der Höhenänderung (formular.js) */
/* Absenden: dunkelblaue Kapsel über die volle Breite, Pfeil rechts */
.brief__senden { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 54px; margin-top: clamp(14px, 2svh, 20px); padding: 10px 62px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--navy); color: #fff; font: 640 clamp(16px, 1.15vw, 18px)/1.2 var(--display); font-stretch: 110%; text-align: center;
  box-shadow: 0 18px 36px -22px rgba(6, 22, 60, .8); transition: background-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); }
.brief__senden .pfeil { position: absolute; right: 26px; top: 50%; margin-top: -.5em; font-size: 20px; line-height: 1; }
@media (hover: hover) { .brief__senden:hover { background: #164682; transform: translateY(-1px); } .brief__senden:hover .pfeil { transform: translateX(3px); } }
.brief__senden:active { transform: scale(.99); background: var(--navy-tief, #0B2B55); }
.brief__senden:focus-visible { outline: none; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--blau); }
.brief__senden[aria-disabled="true"] { cursor: progress; opacity: .8; }
.formular__meldung { margin-top: 10px; font-size: 14.5px; line-height: 1.45; color: var(--tief); text-align: center; }
.formular__meldung:empty { display: none; }
.formular__meldung[data-art="fehler"] { color: #8A1C1C; }
.formular__meldung[data-art="erfolg"] { color: #1D5B33; }
.brief__danach { margin-top: 10px; font: 420 14px/1.5 var(--lese); color: #44556F; text-align: center; }
.formular__hinweis { margin-top: 2px; font-size: 13px; line-height: 1.5; color: var(--grau); text-align: center; }
.formular__hinweis a { color: var(--navy); text-underline-offset: 3px; }

/* ---------- Fußzeile auf dem hellen Horizont: Tinte ---------- */
.fuss { display: block; position: relative; z-index: 3; padding: 30px var(--rand) 28px; color: var(--neben); font-size: 13.5px; }
html:not(.erlebnis) .fuss { background: linear-gradient(#EEF4FB, #F6F9FD); }
.fuss__oben { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 40px; padding-bottom: 24px; border-bottom: 1px solid var(--linie); }
.fuss__marke { color: var(--tief); margin-right: auto; }
.fuss__nav { display: flex; flex-wrap: wrap; gap: 6px 26px; }
.fuss__nav a, .fuss__recht a { font: 600 14px/1 var(--display); font-stretch: 115%; color: var(--tief); text-decoration: none; padding: 12px 0; }
.fuss__nav a, .fuss__recht a { background: linear-gradient(currentColor, currentColor) left calc(100% - 8px) / 0% 1px no-repeat; transition: background-size .28s var(--ease); }
.fuss__nav a:hover, .fuss__recht a:hover, .fuss__nav a:focus-visible, .fuss__recht a:focus-visible { background-size: 100% 1px; }
/* Unternehmensvorstellung und Leistungsseiten (SEO/GEO 08.10.2026): knapp, im ruhigen Fuß – keine eigene Szene */
.fuss__mitte { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px 48px; align-items: start; padding: 20px 0; border-bottom: 1px solid var(--linie); }
.fuss__ueber { max-width: 62ch; font: 420 14px/1.55 var(--lese); color: var(--neben); }
.fuss__ueber a { color: var(--tief); }
.fuss__leistungen { display: flex; flex-wrap: wrap; gap: 2px 24px; justify-content: flex-end; }
.fuss__leistungen a { font: 600 14px/1 var(--display); font-stretch: 115%; color: var(--tief); text-decoration: none; padding: 10px 0;
  background: linear-gradient(currentColor, currentColor) left calc(100% - 6px) / 0% 1px no-repeat; transition: background-size .28s var(--ease); }
.fuss__leistungen a:hover, .fuss__leistungen a:focus-visible { background-size: 100% 1px; }
@media (max-width: 860px) { .fuss__mitte { grid-template-columns: minmax(0, 1fr); } .fuss__leistungen { justify-content: flex-start; } }
.fuss__unten { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; padding-top: 18px; }
.fuss__recht { display: flex; gap: 22px; }
.fuss__hinweis { margin-left: auto; }
.fuss .knopf { --fassung: rgba(70, 115, 186, .14); --fassung-rand: rgba(70, 115, 186, .28); }


/* ---------- Mittlere Breiten ---------- */
@media (max-width: 1100px) and (min-width: 901px) { .kopf__nav a[href="#ablauf"] { display: none; } }
/* Kontakt bei mittlerer Breite: mehr Platz für die Formularfläche (Feldpaare bleiben nebeneinander lesbar) */
@media (max-width: 1180px) and (min-width: 901px) {
  .kontakt__inhalt { grid-template-columns: minmax(0, .5fr) minmax(0, 1fr); gap: 32px 3.4vw; }
  .kontakt__titel { font-size: clamp(32px, 4vw, 46px); }
  .brief__felder { column-gap: 14px; }
}

/* ---------- Mobil / Hochformat: eigene Zeilenfälle, geringere Tiefe, kurze Wege ---------- */
@media (max-width: 900px) {
  .fragen { grid-template-columns: 1fr; }
  .stationen { grid-template-columns: 1fr; gap: 16px; }
  .stationen__vorschau { justify-items: center; }
  .kontakt__inhalt { grid-template-columns: 1fr; gap: clamp(30px, 5svh, 44px); }
  .tarife { grid-template-columns: 1fr; max-width: 680px; margin-left: 0; }
  .vorfuehrung.ist-gesteuert { height: 240svh; }
  .vorfuehrung__buehne, .ist-gesteuert .vorfuehrung__buehne { grid-template-columns: 1fr; grid-template-rows: none; align-content: center; gap: 16px; padding-top: 78px; }
  .vorfuehrung__geraet { justify-self: center; }
  .erlebnis .vorfuehrung.ist-gesteuert .vorfuehrung__geraet { order: -1; } /* Flug: die Vorschau steht oben, der Text steigt darunter ein (keine Überdeckung) */
  .vorfuehrung__text .nutzen { margin-top: 12px; }
  .vorfuehrung__hinweis { left: 10px; bottom: 10px; max-width: calc(100% - 20px); padding: 8px 11px; font-size: 12px; }
}
@media (max-width: 700px), (max-aspect-ratio: 4/5) {
  :root { --abschnitt: clamp(80px, 12svh, 120px); --anzeige: 500 clamp(31px, 8.3vw, 42px)/1.06 var(--display); }
  .aufbau__aussage { font-size: clamp(23px, 6.2vw, 28px); }
  .nutzen__knopf { min-height: 50px; padding: 10px 0; font-size: 15.5px; }
  .stationen { padding: 14px 14px 18px; border-radius: 20px; }
  .stationen__quelle { margin-top: 8px; font-size: 13px; }
  .stationen__schritte { padding-left: 22px; }
  .stationen__liste { gap: 14px; }
  .station__titel { font-size: clamp(20px, 5.4vw, 24px); }
  .station__text { margin-top: 4px; font-size: 15px; line-height: 1.42; }
  .ist-gesteuert .stationen-buehne { padding-top: 70px; }
  .ablauf__titel { font-size: clamp(27px, 7.4vw, 36px); }
  .ablauf__lead { font-size: 15.5px; }
  .frage__antwort { padding-right: 0; }
  .tarif__flaeche { padding: 22px 20px 20px; border-radius: 18px; }
  .tarif__oben { min-height: 28px; }
  .tarif__marke { padding: 7px 12px 8px; font-size: 12.5px; }
  .tarif__preis { font-size: clamp(48px, 14vw, 68px); }
  .tarif__knopf { min-height: 52px; padding: 10px 16px; font-size: 15.5px; }
  .preise__lead { font-size: clamp(18px, 5vw, 21px); }
  .kontakt__lead { font-size: clamp(18px, 5vw, 21px); }
  .brief { padding: 20px 18px 20px; border-radius: 18px; }
  .brief__kopf { gap: 14px; }
  .brief__zeichen { width: 40px; }
  .brief__art { font-size: 12px; letter-spacing: .18em; }
  .brief__titel { font-size: clamp(27px, 7.4vw, 34px); }
  .brief__lead { font-size: 17px; }
  .brief__modus { font-size: 13.5px; padding: 8px 8px; }
  .brief__felder { grid-template-columns: 1fr; }
  .brief__senden { padding: 10px 52px; }
  .brief__senden .pfeil { right: 20px; }
  .fuss__oben { gap: 14px 24px; }
  .fuss__hinweis { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .liest .wort { opacity: 1 !important; } }

/* ---------- Ankunft und Abgang der Angebotsbühne (Ken 08.10.2026): scrollgebunden im Browser selbst (Scroll-Zeitleiste --vf der Vorführung) ----------
   Textgruppe: läuft mit Scrollgeschwindigkeit (um EINLAUF/2 voraus) und über die letzten EINLAUF weich aus – steht genau mit der Ankunft der Karte.
   Bühne (+ Handy-Zeilen): beginnt AUSLAUF vor dem Lösen sanft zu steigen und erreicht AUSLAUF danach die Scrollgeschwindigkeit. Kurven: Weg bei
   Geschwindigkeit smoothstep (∫ = s³ − s⁴/2), 41 Stützstellen. Längen und Bereiche (px) setzt vorfuehrung.js aus dem Layout (--ein-d, --aus-e, Bereiche);
   die Werte folgen ohne Skript im Bildtakt der Scrollposition – auch beim nativen, asynchronen Scrollen (Touch). Ohne Unterstützung: vorfuehrung.js. */
.angebot__inhalt { timeline-scope: --vf; }
.vorfuehrung.ist-bahn { view-timeline: --vf block; }
.ist-bahn .vorfuehrung__text { animation: vf-einlauf linear both, vf-licht linear both; animation-timeline: --vf, --vf;
  animation-range: cover var(--ein-a) cover var(--ein-b), cover var(--licht-a) cover var(--licht-b); }
.ist-bahn .vorfuehrung__buehne, .ist-bahn + .vorfuehrung__nach { animation: vf-auslauf linear both; animation-timeline: --vf; animation-range: cover var(--aus-a) cover var(--aus-b); }
@keyframes vf-einlauf {
  0% { transform: translate3d(0, calc(var(--ein-d) * -0.5), 0); }
  2.5% { transform: translate3d(0, calc(var(--ein-d) * -0.49998), 0); }
  5% { transform: translate3d(0, calc(var(--ein-d) * -0.49988), 0); }
  7.5% { transform: translate3d(0, calc(var(--ein-d) * -0.49959), 0); }
  10% { transform: translate3d(0, calc(var(--ein-d) * -0.49905), 0); }
  12.5% { transform: translate3d(0, calc(var(--ein-d) * -0.49817), 0); }
  15% { transform: translate3d(0, calc(var(--ein-d) * -0.49688), 0); }
  17.5% { transform: translate3d(0, calc(var(--ein-d) * -0.49511), 0); }
  20% { transform: translate3d(0, calc(var(--ein-d) * -0.4928), 0); }
  22.5% { transform: translate3d(0, calc(var(--ein-d) * -0.48989), 0); }
  25% { transform: translate3d(0, calc(var(--ein-d) * -0.48633), 0); }
  27.5% { transform: translate3d(0, calc(var(--ein-d) * -0.48206), 0); }
  30% { transform: translate3d(0, calc(var(--ein-d) * -0.47705), 0); }
  32.5% { transform: translate3d(0, calc(var(--ein-d) * -0.47125), 0); }
  35% { transform: translate3d(0, calc(var(--ein-d) * -0.46463), 0); }
  37.5% { transform: translate3d(0, calc(var(--ein-d) * -0.45715), 0); }
  40% { transform: translate3d(0, calc(var(--ein-d) * -0.4488), 0); }
  42.5% { transform: translate3d(0, calc(var(--ein-d) * -0.43955), 0); }
  45% { transform: translate3d(0, calc(var(--ein-d) * -0.42938), 0); }
  47.5% { transform: translate3d(0, calc(var(--ein-d) * -0.41828), 0); }
  50% { transform: translate3d(0, calc(var(--ein-d) * -0.40625), 0); }
  52.5% { transform: translate3d(0, calc(var(--ein-d) * -0.39328), 0); }
  55% { transform: translate3d(0, calc(var(--ein-d) * -0.37938), 0); }
  57.5% { transform: translate3d(0, calc(var(--ein-d) * -0.36455), 0); }
  60% { transform: translate3d(0, calc(var(--ein-d) * -0.3488), 0); }
  62.5% { transform: translate3d(0, calc(var(--ein-d) * -0.33215), 0); }
  65% { transform: translate3d(0, calc(var(--ein-d) * -0.31463), 0); }
  67.5% { transform: translate3d(0, calc(var(--ein-d) * -0.29625), 0); }
  70% { transform: translate3d(0, calc(var(--ein-d) * -0.27705), 0); }
  72.5% { transform: translate3d(0, calc(var(--ein-d) * -0.25706), 0); }
  75% { transform: translate3d(0, calc(var(--ein-d) * -0.23633), 0); }
  77.5% { transform: translate3d(0, calc(var(--ein-d) * -0.21489), 0); }
  80% { transform: translate3d(0, calc(var(--ein-d) * -0.1928), 0); }
  82.5% { transform: translate3d(0, calc(var(--ein-d) * -0.17011), 0); }
  85% { transform: translate3d(0, calc(var(--ein-d) * -0.14688), 0); }
  87.5% { transform: translate3d(0, calc(var(--ein-d) * -0.12317), 0); }
  90% { transform: translate3d(0, calc(var(--ein-d) * -0.09905), 0); }
  92.5% { transform: translate3d(0, calc(var(--ein-d) * -0.07459), 0); }
  95% { transform: translate3d(0, calc(var(--ein-d) * -0.04988), 0); }
  97.5% { transform: translate3d(0, calc(var(--ein-d) * -0.02498), 0); }
  100% { transform: translate3d(0, calc(var(--ein-d) * 0), 0); }
}
@keyframes vf-auslauf {
  0% { transform: translate3d(0, calc(var(--aus-e) * 0), 0); }
  2.5% { transform: translate3d(0, calc(var(--aus-e) * -0.00003), 0); }
  5% { transform: translate3d(0, calc(var(--aus-e) * -0.00024), 0); }
  7.5% { transform: translate3d(0, calc(var(--aus-e) * -0.00081), 0); }
  10% { transform: translate3d(0, calc(var(--aus-e) * -0.0019), 0); }
  12.5% { transform: translate3d(0, calc(var(--aus-e) * -0.00366), 0); }
  15% { transform: translate3d(0, calc(var(--aus-e) * -0.00624), 0); }
  17.5% { transform: translate3d(0, calc(var(--aus-e) * -0.00978), 0); }
  20% { transform: translate3d(0, calc(var(--aus-e) * -0.0144), 0); }
  22.5% { transform: translate3d(0, calc(var(--aus-e) * -0.02022), 0); }
  25% { transform: translate3d(0, calc(var(--aus-e) * -0.02734), 0); }
  27.5% { transform: translate3d(0, calc(var(--aus-e) * -0.03587), 0); }
  30% { transform: translate3d(0, calc(var(--aus-e) * -0.0459), 0); }
  32.5% { transform: translate3d(0, calc(var(--aus-e) * -0.0575), 0); }
  35% { transform: translate3d(0, calc(var(--aus-e) * -0.07074), 0); }
  37.5% { transform: translate3d(0, calc(var(--aus-e) * -0.08569), 0); }
  40% { transform: translate3d(0, calc(var(--aus-e) * -0.1024), 0); }
  42.5% { transform: translate3d(0, calc(var(--aus-e) * -0.12091), 0); }
  45% { transform: translate3d(0, calc(var(--aus-e) * -0.14124), 0); }
  47.5% { transform: translate3d(0, calc(var(--aus-e) * -0.16344), 0); }
  50% { transform: translate3d(0, calc(var(--aus-e) * -0.1875), 0); }
  52.5% { transform: translate3d(0, calc(var(--aus-e) * -0.16344), 0); }
  55% { transform: translate3d(0, calc(var(--aus-e) * -0.14124), 0); }
  57.5% { transform: translate3d(0, calc(var(--aus-e) * -0.12091), 0); }
  60% { transform: translate3d(0, calc(var(--aus-e) * -0.1024), 0); }
  62.5% { transform: translate3d(0, calc(var(--aus-e) * -0.08569), 0); }
  65% { transform: translate3d(0, calc(var(--aus-e) * -0.07074), 0); }
  67.5% { transform: translate3d(0, calc(var(--aus-e) * -0.0575), 0); }
  70% { transform: translate3d(0, calc(var(--aus-e) * -0.0459), 0); }
  72.5% { transform: translate3d(0, calc(var(--aus-e) * -0.03587), 0); }
  75% { transform: translate3d(0, calc(var(--aus-e) * -0.02734), 0); }
  77.5% { transform: translate3d(0, calc(var(--aus-e) * -0.02022), 0); }
  80% { transform: translate3d(0, calc(var(--aus-e) * -0.0144), 0); }
  82.5% { transform: translate3d(0, calc(var(--aus-e) * -0.00978), 0); }
  85% { transform: translate3d(0, calc(var(--aus-e) * -0.00624), 0); }
  87.5% { transform: translate3d(0, calc(var(--aus-e) * -0.00366), 0); }
  90% { transform: translate3d(0, calc(var(--aus-e) * -0.0019), 0); }
  92.5% { transform: translate3d(0, calc(var(--aus-e) * -0.00081), 0); }
  95% { transform: translate3d(0, calc(var(--aus-e) * -0.00024), 0); }
  97.5% { transform: translate3d(0, calc(var(--aus-e) * -0.00003), 0); }
  100% { transform: translate3d(0, calc(var(--aus-e) * 0), 0); }
}
@keyframes vf-licht {
  0% { opacity: 0; }
  10% { opacity: 0.028; }
  20% { opacity: 0.104; }
  30% { opacity: 0.216; }
  40% { opacity: 0.352; }
  50% { opacity: 0.5; }
  60% { opacity: 0.648; }
  70% { opacity: 0.784; }
  80% { opacity: 0.896; }
  90% { opacity: 0.972; }
  100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .ist-bahn .vorfuehrung__text, .ist-bahn .vorfuehrung__buehne, .ist-bahn + .vorfuehrung__nach { animation: none; } }

/* Übergabe: die Deckkraft des Vorschaufensters kompositorisch vorbereiten, ohne die Textbühne zu skalieren. */
.erlebnis .vorfuehrung.ist-gesteuert .vorfuehrung__rahmen { will-change: opacity; }