/* aeverno.de · Stile der App-Seite /immofw (FS192). Erzeugt von einbau.py aus der Vorschau Skizze und Linie (stil.css),
   ohne Kopf und Fuß (die stehen für alle Seiten in huelle.css) und ohne Schalterfeld. Nicht von Hand ändern:
   in der Vorschau ändern und einbau.py laufen lassen. */
/* Vorschau „Skizze und Linie“, vier Fassungen (FS192, 10-10-2026).
   Grundlage: docs/legal/site_aeverno_neu/assets/css/site.css (Aufbau, Maße, Schrift Outfit), Geräterahmen aus
   docs/legal/site_aeverno_stile/app/stile.css. Neu sind nur: die Bildwelt je Fassung, freistehende Motive statt
   Farbflächen, die Marke in der Kopfleiste und das Feld „Tweaks“ (ganz unten, gehört nicht zum Entwurf).
   Fassung, Rahmen, Bewegung, Abschnitte und Logo stehen als data-Merkmale am <html>-Element (setzt stil.js aus der Adresse).
   Runde 2 (11-10-2026): kein Dauerschweben mehr; Bildwechsel im Handy, einmaliges Einblenden, Pfadzeile, neue Abschnitte,
   Abschluss und Fuß. Die Regeln dazu stehen im Block „Runde 2“ vor den Tweaks. */
:root {
  --papier: #FBF8F2;
  --blau: #EEF2F8;
  --sand: #F5EFE4;
  --tinte: #0B1220;
  --tinte-2: #26324A;
  --neben: #566076;
  --akzent: #2E5AA8;
  --ocker: #7D4F1F;
  --flaeche: #FFFDF9;
  --glas: rgba(255, 253, 249, .8);
  --hell: #E3EAF5;
  --akzent-linie: #B7C6E2;
  --linie: rgba(11, 18, 32, .12);
  --schrift: "Outfit", ui-rounded, system-ui, -apple-system, "Segoe UI", sans-serif;
  --rand: 28px;
  /* je Fassung */
  --buehne-grund: #FBF8F2;
  --grund-2: #F4EEE3;          /* Abschnitt „Sechs Handlungsbereiche“ */
  --ziffer-grund: #EADFCB;
  --boden-farbe: var(--tinte);
  --boden-staerke: 1.6px;
}
html[data-stil="skizze2"] { --grund-2: #F7EEE1; --ziffer-grund: #F0DEC6; }
html[data-stil="linie1"] { --buehne-grund: #FBF8F2; --grund-2: #EEF2F8; --ziffer-grund: #E3EAF5; }
html[data-stil="linie2"] { --buehne-grund: #FBF8F2; /* einfarbig: ein Verlauf stand bei Skalierung 125 und 150 % nicht Punkt für Punkt still */ --grund-2: #FAF0E0; --ziffer-grund: #F3DFC2; --boden-farbe: var(--akzent); --boden-staerke: 2.6px; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 120px; }
body {
  margin: 0; background: var(--papier); color: var(--tinte);
  font: 400 16px/1.65 var(--schrift);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
h1, h2, h3, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, svg { display: block; }
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p { text-wrap: pretty; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; border-radius: 6px; }
::selection { background: #CFDCF2; color: var(--tinte); }
.rahmen { width: 100%; max-width: 1296px; margin-inline: auto; padding-inline: var(--rand); }

/* ---------- Schrift ---------- */
.h1 { font-weight: 600; font-size: clamp(2.5rem, 5.556vw, 5.05rem); line-height: 1.02; letter-spacing: -.052em; }
.h2 { font-weight: 600; font-size: clamp(2.35rem, 4.25vw, 3.8rem); line-height: 1.08; letter-spacing: -.045em; }
.h1 > span, .h2 > span { display: block; }
/* Überschrift der Bühne: Die Vorschau führt mehrere Fassungen (Schalter „Überschrift“), sichtbar ist genau eine. Jede Fassung ist eine
   Zeile, die frei umbricht; die blaue Hälfte steht als Spanne darin. In der echten Seite steht nur die gewählte Fassung. */
.h1 > .kz, .h2 > .kz { display: none; }
.kz--zeilen > span { display: block; }
html[data-schluss="bisher"] .h2 > .kz[data-kz="bisher"], html[data-schluss="lernplatz"] .h2 > .kz[data-kz="lernplatz"], html[data-schluss="frage"] .h2 > .kz[data-kz="frage"] { display: block; }
html[data-ueberschrift="kurz"] .h1 > .kz[data-kz="kurz"], html[data-ueberschrift="b"] .h1 > .kz[data-kz="b"], html[data-ueberschrift="a"] .h1 > .kz[data-kz="a"] { display: block; }
.akz { color: var(--akzent); }
.h2 > .klein { font-size: .78em; line-height: 1.08; margin-top: 12px; }
.absatz { color: var(--neben); font-size: 18px; line-height: 1.7; max-width: 500px; margin-top: 25px; }
.absatz--19 { font-size: 19px; line-height: 1.65; margin-top: 24px; }
.verweis { display: inline-flex; align-items: center; gap: 11px; color: var(--akzent); font-weight: 500; font-size: 16px; line-height: 1.65; text-underline-offset: 5px; }
.verweis svg, .knopf svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.verweis:hover { text-decoration: underline; }
.verweis--15 { font-size: 15px; }

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 14px 26px; border-radius: 999px; border: 1px solid transparent;
  font-weight: 500; font-size: 16px; line-height: 26.4px; white-space: nowrap;
  transition: transform .2s ease, background-color .2s ease;
}
.knopf svg { width: 19px; height: 19px; }
.knopf:hover { transform: translateY(-2px); }
.knopf--voll { background: var(--tinte); color: var(--papier); box-shadow: 0 8px 22px -12px rgba(11, 18, 32, .67); }
.knopf--voll:hover { background: #17233B; }
.knopf--glas { background: rgba(255, 253, 249, .88); border-color: var(--linie); color: var(--tinte-2); }
.knopf--glas:hover { background: var(--flaeche); }
.abzeichen { display: inline-block; border-radius: 10px; transition: transform .2s ease; }
.abzeichen img { width: 196px; height: auto; margin-block: -9px; }
.abzeichen:hover { transform: translateY(-2px); }

/* ---------- Geräte: Breite --b, alles andere rechnet sich daraus (wie in der Stil-Seite) ---------- */
.geraet {
  --b: 320px;
  position: relative; flex: none; width: var(--b); padding: calc(var(--b) * .024); border-radius: calc(var(--b) * .15);
}
.geraet__schirm {
  position: relative; overflow: hidden; aspect-ratio: 1064 / 2200;
  border: calc(var(--b) * .011) solid #0B101B; border-radius: calc(var(--b) * .128); background: #0B101B;
}
.geraet__schirm img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 0; }
/* kleine Geräte füllen ihre Spalte, höchstens 175 Pixel breit (cqw = Breite der Spalte) */
.geraet--klein { --b: min(175px, 100cqw); }
/* Rahmen: je Ton ein Grund (Verlauf), eine Kante (feiner Ring) und ein Wurf (weiter Schatten). Silber, Graphit und Linie
   wie bisher (Stil-Seite: Klar, Foto, Plan). Nachtblau, Sand, Salbei und Perlweiß sind in OKLCH gerechnet: je Ton ein
   Farbwinkel und eine Buntheit, fünf Helligkeiten für den Verlauf; helle Töne tragen außen einen 1-Pixel-Ring, damit die
   Kante auf dem Papier sauber steht (Rechnung und Kontraste: Bericht Runde 4). */
html[data-rahmen="silber"] { --r-grund: linear-gradient(145deg, #F4F5F7 0%, #B9BEC8 30%, #E3E6EB 55%, #9FA6B3 80%, #EEF0F3 100%);
  --r-kante: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 1px 2px rgba(18, 32, 66, .18); --r-wurf: 0 22px 40px -16px rgba(18, 32, 66, .26), 0 60px 100px -44px rgba(18, 32, 66, .34);
  --r-wurf-klein: 0 14px 26px -14px rgba(18, 32, 66, .3); --r-schirm: #0B101B; }
html[data-rahmen="graphit"] { --r-grund: linear-gradient(140deg, #5B5650 0%, #1C1A18 36%, #34302C 66%, #6B655E 100%);
  --r-kante: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 2px 3px rgba(40, 24, 8, .26); --r-wurf: 0 24px 40px -18px rgba(40, 24, 8, .4), 0 60px 100px -44px rgba(40, 24, 8, .4);
  --r-wurf-klein: 0 14px 26px -14px rgba(40, 24, 8, .42); --r-schirm: #141413; }
html[data-rahmen="nachtblau"] { --r-grund: linear-gradient(142deg, #435B85 0%, #0A1D42 34%, #1F345C 60%, #04153A 82%, #364D76 100%);
  --r-kante: inset 0 0 0 1px rgba(255, 255, 255, .2), 0 2px 3px rgba(6, 16, 40, .3); --r-wurf: 0 24px 40px -18px rgba(10, 24, 58, .42), 0 60px 100px -44px rgba(10, 24, 58, .4);
  --r-wurf-klein: 0 14px 26px -14px rgba(10, 24, 58, .42); --r-schirm: #050D1C; }
html[data-rahmen="sand"] { --r-grund: linear-gradient(145deg, #F4E6CD 0%, #C6B9A1 30%, #E4D6BD 55%, #B3A68F 80%, #EDE0C7 100%);
  --r-kante: inset 0 0 0 1px rgba(255, 255, 255, .6), 0 0 0 1px rgba(117, 103, 79, .5), 0 1px 2px rgba(60, 44, 20, .2); --r-wurf: 0 22px 40px -16px rgba(60, 44, 20, .26), 0 60px 100px -44px rgba(60, 44, 20, .32);
  --r-wurf-klein: 0 14px 26px -14px rgba(60, 44, 20, .3); --r-schirm: #120F09; }
html[data-rahmen="salbei"] { --r-grund: linear-gradient(145deg, #CCE1D1 0%, #96AB9B 30%, #B6CABA 55%, #819586 80%, #C2D7C7 100%);
  --r-kante: inset 0 0 0 1px rgba(255, 255, 255, .55), 0 0 0 1px rgba(79, 100, 84, .5), 0 1px 2px rgba(24, 44, 30, .2); --r-wurf: 0 22px 40px -16px rgba(24, 44, 30, .26), 0 60px 100px -44px rgba(24, 44, 30, .32);
  --r-wurf-klein: 0 14px 26px -14px rgba(24, 44, 30, .3); --r-schirm: #0B110C; }
html[data-rahmen="perlweiss"] { --r-grund: linear-gradient(145deg, #FDFAF3 0%, #E2DFD8 30%, #F4F1EA 55%, #D4D1CA 80%, #F9F7EF 100%);
  --r-kante: inset 0 0 0 1px rgba(255, 255, 255, .8), 0 0 0 1px rgba(121, 116, 103, .55), 0 1px 2px rgba(50, 44, 30, .2); --r-wurf: 0 22px 40px -16px rgba(50, 44, 30, .24), 0 60px 100px -44px rgba(50, 44, 30, .3);
  --r-wurf-klein: 0 14px 26px -14px rgba(50, 44, 30, .28); --r-schirm: #110F0B; }
/* Warme Töne (Nutzer 11-10-2026, 17 Uhr): Rosé, Kupfer, Champagner; gerechnet wie die vier darüber */
html[data-rahmen="rose"] { --r-grund: linear-gradient(145deg, #F9DBD9 0%, #CCAFAE 30%, #E8CAC9 55%, #B69A98 80%, #F2D4D2 100%);
  --r-kante: inset 0 0 0 1px rgba(255, 255, 255, .6), 0 0 0 1px rgba(126, 88, 86, .45), 0 1px 2px rgba(70, 36, 30, .2); --r-wurf: 0 22px 40px -16px rgba(70, 36, 30, .24), 0 60px 100px -44px rgba(70, 36, 30, .3);
  --r-wurf-klein: 0 14px 26px -14px rgba(70, 36, 30, .28); --r-schirm: #140D0D; }
html[data-rahmen="kupfer"] { --r-grund: linear-gradient(145deg, #EBC0A7 0%, #A77F68 30%, #CDA48B 55%, #8E6851 80%, #DEB49B 100%);
  --r-kante: inset 0 0 0 1px rgba(255, 255, 255, .45), 0 0 0 1px rgba(103, 67, 46, .4), 0 1px 2px rgba(66, 36, 16, .22); --r-wurf: 0 22px 40px -16px rgba(66, 36, 16, .28), 0 60px 100px -44px rgba(66, 36, 16, .34);
  --r-wurf-klein: 0 14px 26px -14px rgba(66, 36, 16, .32); --r-schirm: #140E0A; }
html[data-rahmen="champagner"] { --r-grund: linear-gradient(145deg, #FCEEC3 0%, #D1C49A 30%, #ECDEB3 55%, #BEB187 80%, #F6E7BC 100%);
  --r-kante: inset 0 0 0 1px rgba(255, 255, 255, .65), 0 0 0 1px rgba(116, 104, 68, .5), 0 1px 2px rgba(60, 48, 16, .2); --r-wurf: 0 22px 40px -16px rgba(60, 48, 16, .24), 0 60px 100px -44px rgba(60, 48, 16, .3);
  --r-wurf-klein: 0 14px 26px -14px rgba(60, 48, 16, .28); --r-schirm: #110F09; }
/* „Linie“: ein gezeichneter Umriss, kein Schatten */
html[data-rahmen="linie"] { --r-grund: var(--flaeche); --r-kante: 0 0 0 1.5px var(--tinte); --r-wurf: 0 0 0 0 transparent; --r-wurf-klein: 0 0 0 0 transparent; --r-schirm: var(--tinte); }
.geraet { background: var(--r-grund); box-shadow: var(--r-kante), var(--r-wurf); }
.geraet--klein { box-shadow: var(--r-kante), var(--r-wurf-klein); }
.geraet__schirm { border-color: var(--r-schirm); }
html[data-rahmen="linie"] .geraet__schirm { border-width: 1.5px; }

/* ---------- Umschalter ---------- */
.umschalter { display: inline-flex; gap: 3px; padding: 5px; border-radius: 999px; background: var(--hell); }
.umschalter button { height: 43px; padding: 10px 20px; border-radius: 999px; color: var(--neben); font-size: 14px; line-height: 23.1px; transition: background-color .2s ease, color .2s ease, box-shadow .2s ease; }
.umschalter button[aria-selected="true"] { background: var(--flaeche); color: var(--tinte); box-shadow: 0 4px 10px rgba(26, 46, 92, .07); }

/* ---------- Motive: freigestellt, ohne Fläche dahinter ---------- */
.motiv { width: 100%; height: auto; -webkit-user-select: none; user-select: none; }

/* ---------- B1 Bühne ---------- */
.buehne { position: relative; overflow: hidden; overflow: clip; min-height: 100dvh; background: var(--buehne-grund); }
/* Kein Verlauf am unteren Rand der Bühne mehr (Runde 2): Die Bühnenbilder laufen selbst in Papier aus. Verläufe wurden bei
   Bildschirm-Skalierung 125 und 150 % nicht jedes Mal Punkt für Punkt gleich gerechnet. */
/* Bühnenbild: freigestellte Zeichnung. Lage und Größe hängen am Handy (stil.js, Abschnitt „Bühnenbild setzen“):
   Der Punkt 64,5 % / 52 % des Bildes liegt auf der Mitte des Handys, die Bildhöhe ist das 1,36-Fache der Handyhöhe.
   So stimmt die Anordnung bei jeder Breite. Ohne Skript: rechts bündig, volle Höhe. */
.land { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.land img {
  position: absolute; max-width: none; width: var(--land-b, auto);
  left: var(--land-l, auto); right: var(--land-r, 0); top: var(--land-o, 0); height: var(--land-h, 100%);
}
/* Weicher Auslauf nur, wenn ein Bildrand im Fenster liegt (stil.js setzt „mit-auslauf“). Ohne Not keine Maske: Sie kostet
   eine eigene Rechenstufe, und bei Bildschirm-Skalierung 125 % stand die Seite damit nicht Punkt für Punkt still. */
.land.mit-auslauf img {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--aus-l, 0px), #000 calc(100% - var(--ende-r, 0px) - var(--aus-r, 0px)), transparent calc(100% - var(--ende-r, 0px))), linear-gradient(180deg, #000 calc(100% - var(--aus-u, 0px)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--aus-l, 0px), #000 calc(100% - var(--ende-r, 0px) - var(--aus-r, 0px)), transparent calc(100% - var(--ende-r, 0px))), linear-gradient(180deg, #000 calc(100% - var(--aus-u, 0px)), transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
/* Skizze: Das Bild ist deckend auf der Papierfarbe der Seite gespeichert (#FBF8F2). Kein Mischmodus, kein Verlauf dahinter:
   Beides stand bei Bildschirm-Skalierung 125 und 150 % nicht Punkt für Punkt still (Runde 2, Bericht „Flimmern“). */
/* Linie: Die Bodenlinie des Bildes läuft bis an beide Ränder des Fensters weiter (Lage und Stärke je Bild aus stil.js). */
.land__weiter { position: absolute; display: none; height: var(--w-staerke, 2px); background: var(--w-farbe, var(--tinte)); border-radius: 2px; }
.buehne__innen {
  position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); column-gap: 15px; align-items: center;
  min-height: 100dvh; padding-top: 148px; padding-bottom: 108px;
}
.buehne__vorspann { color: var(--neben); font-size: 21px; line-height: 1.6; max-width: 510px; margin-top: 28px; }
.buehne__knoepfe { display: flex; align-items: center; gap: 16px; margin-top: 32px; }
.buehne__bild { position: relative; display: flex; justify-content: flex-start; padding-left: 8px; }
/* Gerät, Schild und Motiv stehen still (Runde 2): Schweben per Skript ließ Kanten und Schrift von Bild zu Bild wandern,
   Schweben per CSS machte sie weich. Im Ruhezustand trägt nichts davon ein transform. */
.buehne__geraet { --b: 350px; }
.buehne__ding { position: absolute; right: -29px; bottom: 96px; width: 285px; }
.notiz {
  position: absolute; left: 54px; bottom: calc((1 - var(--oben, 0.06)) * 100% + 10px); /* direkt über dem Motiv */
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px 12px 12px; border-radius: 22px 22px 22px 6px;
  background: var(--flaeche); border: 1px solid var(--linie);
  box-shadow: 0 15px 25px -20px rgba(26, 46, 92, .31);
  font-weight: 500; font-size: 16px; line-height: 1.3; white-space: nowrap; color: var(--tinte);
}
.notiz__zeichen { width: 42px; height: 42px; border-radius: 23%; flex: none; }
html[data-logo="aus"] .notiz { padding: 15px 22px; border-radius: 28px 28px 28px 5px; }
html[data-logo="aus"] .notiz__zeichen { display: none; }
.buehne__fuss {
  position: absolute; z-index: 3; left: 50%; bottom: 35px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: var(--tinte-2); font-size: 13px; line-height: 1.65; transition: color .2s ease;
  text-shadow: 0 0 4px var(--papier), 0 0 9px var(--papier), 0 0 14px var(--papier); /* hält die Zeile frei, wenn eine Zeichnung dahinter läuft */
}
.buehne__fuss:hover { color: var(--akzent); }
.buehne__fuss svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- B2 Einblick ---------- */
.einblick { padding-block: 115px 125px; }
.einblick__raster { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); column-gap: 64px; align-items: center; }
.einblick__motiv { --mb: 150px; width: var(--mb); margin: 0 0 16px calc(var(--links, 0.05) * -1 * var(--mb)); }
.erklaer { min-height: 105px; margin-top: 18px; padding-left: 16px; border-left: 2px solid var(--akzent-linie); }
.erklaer p { color: var(--neben); font-size: 15px; line-height: 1.7; max-width: 484px; }
.erklaer p + p { margin-top: 10px; }
.einblick .verweis { margin-top: 20px; }
.schau { display: flex; flex-direction: column; align-items: center; }
.schau__geraete { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; width: 100%; margin-top: 38px; padding-bottom: 8px; }
.schau__geraet { container-type: inline-size; min-width: 0; display: flex; justify-content: center; cursor: pointer; opacity: .78; transform: translateY(8px); transition: transform .35s ease, opacity .35s ease; }
.schau__geraet.ist-gewaehlt { opacity: 1; transform: translateY(-8px); }

/* ---------- B3 Vorstellung ---------- */
.vorstellung { background: var(--grund-2); overflow-x: hidden; overflow-x: clip; }
.vorstellung__raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 80px; align-items: center; }
.portrait { position: relative; align-self: stretch; min-height: 659px; display: flex; align-items: center; justify-content: center; }
.stand-ort { position: relative; }
.portrait { --mb: 440px; }
.portrait__ding { width: var(--mb); max-width: 100%; }
/* Motive stehen im Bild unten bündig; --oben (aus /assets/img/immofw/masse.js) ist der freie Platz darüber. Damit sitzt das Motiv optisch mittig. */
.stand-ort { margin-top: calc((0.06 - var(--oben, 0.06)) * var(--mb)); }
.vorstellung__text { padding-block: 80px; }
.zeilen { margin-top: 30px; }
.zeilen li { display: flex; align-items: center; gap: 17px; padding-block: 15px; border-bottom: 1px solid var(--linie); font-size: 17px; line-height: 1.65; color: var(--tinte); -webkit-hyphens: auto; hyphens: auto; }
.ziffer { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ziffer-grund); color: var(--akzent); font-size: 15px; line-height: 1; }
.stand { margin-top: 16px; color: var(--neben); font-size: 13px; line-height: 1.65; }
.vorstellung__text .verweis { margin-top: 18px; }

/* Bodenlinie unter den Motiven: nur in den beiden Linien-Fassungen. Sie ersetzt Schatten und Farbfläche. */
.boden { display: none; position: absolute; left: -22%; right: -22%; width: 144%; height: 40px; bottom: 3.2%; overflow: visible; }
.boden path { fill: none; stroke: var(--boden-farbe); stroke-width: var(--boden-staerke); stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 3; stroke-dashoffset: 0; } /* 3 statt 1: Die Linie wird in der Breite gestreckt; mit 1 blieb sie am Ende zu kurz (Runde 2) */
html[data-stil="linie1"] .boden, html[data-stil="linie2"] .boden { display: block; }
html[data-stil="linie1"] .boden__schleife, html[data-stil="linie2"] .boden__gerade { display: none; }
html[data-stil^="linie"] .stand-ort .motiv { position: relative; z-index: 1; }

/* ---------- B4 Schritte ---------- */
.schritte { padding-block: 110px; overflow-x: hidden; overflow-x: clip; }
.schritte__raster { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 70px; align-items: center; }
.stufen { margin-top: 31px; }
.stufen li { display: flex; gap: 20px; padding-block: 19px; border-bottom: 1px solid var(--linie); }
.stufen__nr { flex: none; color: var(--ocker); font-size: 15px; line-height: 1.65; font-variant-numeric: tabular-nums; }
.stufen h3 { font-weight: 600; font-size: 21px; line-height: 1.12; letter-spacing: -.035em; }
.stufen p { margin-top: 8px; color: var(--neben); font-size: 15px; line-height: 1.7; }
.schritte .verweis { margin-top: 30px; }
.frei { display: flex; align-items: center; justify-content: center; min-height: 480px; }
.frei { --mb: 400px; }
.frei__ding { width: var(--mb); max-width: 100%; }

/* ---------- Telefon: Fußleiste ---------- */
.fussleiste { display: none; }

/* ---------- Bewegung „Mehr“: Die Linien-Bühne baut sich beim Laden und beim Wechsel einmal auf, Bodenlinien zeichnen sich ---------- */
@keyframes zeichnen { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes auftauchen { from { opacity: 0; } to { opacity: 1; } }
html[data-bewegung="mehr"].auftritt[data-stil^="linie"] .land { animation: zeichnen 1.9s cubic-bezier(.45, .05, .25, 1) both; }
html[data-bewegung="mehr"].auftritt[data-stil^="skizze"] .land img { animation: auftauchen 1.4s ease both; }
html[data-bewegung="mehr"] .boden path { stroke-dashoffset: 3; transition: stroke-dashoffset 1.5s cubic-bezier(.45, .05, .25, 1) .15s; }
html[data-bewegung="mehr"] .ist-da .boden path, html[data-bewegung="mehr"] .ist-da > .boden path { stroke-dashoffset: 0; }

/* ============ ab 1100 abwärts ============ */
@media (max-width: 1100px) {
.einblick__raster { column-gap: 40px; }
.vorstellung__raster { column-gap: 48px; }
.schritte__raster { column-gap: 44px; }
.buehne__geraet { --b: 300px; }
.buehne__ding { width: 220px; right: -20px; bottom: 84px; }
.notiz { left: auto; right: 0; font-size: 13px; padding: 9px 14px 9px 9px; gap: 9px; }
.notiz__zeichen { width: 32px; height: 32px; }
html[data-logo="aus"] .notiz { padding: 12px 18px; }
.portrait { --mb: 360px; }
.frei { --mb: 330px; }
.boden { left: -10%; right: -10%; width: 120%; }
}
@media (min-width: 701px) and (max-width: 960px) {
.buehne__geraet { --b: 270px; }
.buehne__ding { width: 150px; right: -24px; bottom: 64px; }
.notiz { right: 10px; font-size: 13px; padding: 9px 13px 9px 9px; }
.notiz__zeichen { width: 30px; height: 30px; }
.portrait { --mb: 280px; }
.frei { --mb: 270px; }
.einblick__motiv { --mb: 120px; }
}
@media (max-width: 900px) {
.buehne__vorspann { font-size: 19px; }
.vorstellung__raster { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
}

/* ============ ab 700 abwärts: einspaltig, Menüknopf, Fußleiste ============ */
@media (max-width: 700px) {
:root { --rand: 22px; }
html { scroll-padding-top: 96px; }
.h1 { font-size: clamp(2rem, 11.3vw, 4.3rem); line-height: 1.04; letter-spacing: -.065em; }
.buehne__innen { display: flex; flex-direction: column; align-items: stretch; padding-top: 138px; padding-bottom: 100px; min-height: 100svh; }
.buehne__text { display: flex; flex-direction: column; align-items: center; text-align: center; }
.buehne__vorspann { font-size: 17px; line-height: 1.65; max-width: 410px; margin-top: 22px; }
.buehne__knoepfe { justify-content: center; gap: 10px; margin-top: 26px; }
.buehne__knoepfe .knopf { min-height: 51px; padding: 13px 17px; font-size: 14px; line-height: 23.1px; }
.abzeichen img { width: 168px; margin-block: -8px; }
.buehne__bild { margin-top: 56px; justify-content: center; padding-left: 0; padding-right: 69px; padding-bottom: 15px; }
.buehne__geraet { --b: 220px; }
.buehne__ding { width: 142px; right: -7px; bottom: 52px; }
.notiz { left: -14px; right: auto; padding: 8px 13px 8px 8px; gap: 8px; border-radius: 18px 18px 18px 4px; font-size: 12px; }
.notiz__zeichen { width: 30px; height: 30px; }
html[data-logo="aus"] .notiz { padding: 11px 16px; border-radius: 22px 22px 22px 4px; }
.buehne__fuss { left: 25px; bottom: 15px; transform: none; flex-direction: row; gap: 8px; padding-block: 9px; font-size: 11px; }
.einblick { padding-block: 70px 80px; }
.einblick__raster { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
.einblick__motiv { --mb: 124px; }
.erklaer { min-height: 76px; }
.einblick .verweis { margin-top: 7px; }
.umschalter button { height: 41px; padding: 9px 19px; }
.schau__geraete { grid-template-columns: repeat(2, minmax(0, 160px)); justify-content: space-between; gap: 26px; margin-top: 32px; }
.geraet--klein { --b: min(160px, 100cqw); }
.vorstellung__raster { display: flex; flex-direction: column; align-items: stretch; }
.vorstellung__text { order: 1; padding-block: 65px 10px; }
.portrait { order: 2; min-height: 330px; margin-inline: 0; padding-block: 10px 40px; }
.portrait { --mb: 300px; }
.boden { left: -6%; right: -6%; width: 112%; }
.schritte { padding-block: 70px 60px; }
.schritte__raster { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
.schritte .verweis { margin-top: 26px; }
.frei { min-height: 0; padding-block: 24px 96px; }
.frei { --mb: 280px; }
.fussleiste {
    position: fixed; z-index: 40; left: 12px; right: 12px; bottom: 12px;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    min-height: 66px; padding: 11px 11px 11px 18px; border-radius: 22px;
    background: #FFFDF9; border: 1px solid var(--linie);
    box-shadow: 0 12px 34px -22px rgba(22, 40, 82, .5);
  }
.fussleiste__text strong { display: block; font-weight: 600; font-size: 14px; line-height: 1.25; color: var(--tinte); }
.fussleiste__text span { display: block; margin-top: 1px; font-size: 11px; line-height: 1.25; color: var(--neben); }
.fussleiste .knopf { min-height: 42px; padding: 9px 15px; font-weight: 600; font-size: 13px; line-height: 21.45px; box-shadow: none; }
}
@media (max-width: 380px) {
.h1 { font-size: 10.8vw; }
.h2 { font-size: 9.6vw; }
.umschalter button { padding-inline: 11px; }
.schau__geraete { gap: 16px; }
.buehne__knoepfe { flex-wrap: wrap; }
}

/* ============ Weniger Bewegung ============ */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation: none !important; transition-duration: 0s !important; }
html[data-bewegung="mehr"] .boden path { stroke-dashoffset: 0; }
}
html[data-bewegung="aus"] { scroll-behavior: auto; }
html[data-bewegung="aus"] .schau__geraet, html[data-bewegung="aus"] .knopf, html[data-bewegung="aus"] .abzeichen { transition: none; }

/* Ohne Skript bleibt jeder Erklärtext sichtbar; mit Skript zeigt der Umschalter genau einen. */
.js .erklaer p + p { margin-top: 0; }

/* =====================================================================================================
   Runde 2 (11-10-2026)
   ===================================================================================================== */
.nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html[data-abschnitte="neu"] .nur-bisher, html[data-abschnitte="bisher"] .nur-neu { display: none !important; }

/* ---------- Bildwechsel im Handy der Bühne: nur Deckkraft, gleiche Lage ---------- */
/* Die Überblendung rechnet stil.js Bild für Bild (Deckkraft des neuen Bildes von 0 auf 1), NICHT als CSS-Übergang:
   Ein CSS-Übergang legt das Bild für seine Dauer auf eine eigene Ebene; zu Beginn und am Ende rechnet der Browser dann
   Handy, Schild und Motiv neu, und alle Kanten springen zweimal je Wechsel (gemessen: bis 85 von 255 auf rund 74.000
   Punkten). So wie hier ändert sich nur die Fläche des Schirms, und im Stand ist jedes Bild Punkt für Punkt gleich. */
.wechsel { isolation: isolate; }
.wechsel img { opacity: 0; }
.wechsel img.ist-hinten { opacity: 1; z-index: 1; }
.wechsel img.ist-vorn { opacity: 1; z-index: 2; }
.buehne__geraet { cursor: pointer; }
.marken { position: absolute; left: 8px; width: 350px; bottom: -20px; display: flex; justify-content: center; gap: 2px; }
.marken button { position: relative; width: 26px; height: 16px; }
.marken button::before { content: ""; position: absolute; left: 4px; right: 4px; top: 7px; height: 3px; border-radius: 2px; background: rgba(11, 18, 32, .2); }
.marken button:hover::before { background: rgba(11, 18, 32, .45); }
.marken button[aria-pressed="true"]::before { background: var(--tinte); }
html[data-stil="linie2"] .marken button[aria-pressed="true"]::before { background: var(--akzent); }

/* ---------- Einblenden: einmal, 14 Pixel Weg, danach ohne transform ---------- */
[data-ein] { transition: opacity .6s cubic-bezier(.2, .7, .2, 1), transform .6s cubic-bezier(.2, .7, .2, 1); }
html.js[data-bewegung="ruhig"]:not([data-ruhe]) [data-ein]:not(.ist-da), html.js[data-bewegung="mehr"]:not([data-ruhe]) [data-ein]:not(.ist-da) { opacity: 0; transform: translateY(14px); }
html[data-bewegung="aus"] [data-ein] { transition: none; }

/* ---------- B3 neu: die sechs Bereiche beim Namen, Zahlen als gesetzter Satz ---------- */
.bereiche { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 36px; margin-top: 30px; border-top: 1px solid var(--linie); }
.bereiche li { display: flex; align-items: center; gap: 14px; min-height: 66px; padding-block: 11px; border-bottom: 1px solid var(--linie); font-size: 16px; line-height: 1.35; color: var(--tinte); -webkit-hyphens: manual; hyphens: manual; }
.bereiche img { flex: none; width: 46px; height: 46px; } /* die Fach-Bilder der App-Startseite, unverändert kopiert */
.stand--satz { margin-top: 20px; max-width: 560px; font-size: 14px; line-height: 1.65; }

/* ---------- B4 neu: Bildfolge mit echten Ausschnitten aus der App ---------- */
html[data-abschnitte="neu"] .schritte__raster { row-gap: 0; }
html[data-abschnitte="neu"] .frei { min-height: 0; --mb: 280px; justify-content: flex-end; padding-right: 6%; }
.folge { grid-column: 1 / -1; margin-top: 78px; display: grid; row-gap: 84px; }
.folge__zeile { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 8%; align-items: center; }
.folge__zeile:nth-child(even) .folge__bild { order: 2; justify-self: start; }
.folge__zeile:nth-child(even) .folge__text { justify-self: end; }
.folge__bild { justify-self: end; width: 380px; max-width: 100%; margin: 0; border-radius: 26px; overflow: hidden; border: 1px solid rgba(11, 18, 32, .14); background: var(--flaeche); box-shadow: 0 34px 60px -44px rgba(26, 46, 92, .45), 0 2px 6px -3px rgba(26, 46, 92, .12); }
.folge__bild img { width: 100%; height: auto; }
.folge__text { position: relative; max-width: 470px; }
.folge__text h3 { font-weight: 600; font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1.12; letter-spacing: -.04em; }
.folge__nr { position: absolute; right: calc(100% + 18px); top: .5em; color: var(--ocker); font-weight: 400; font-size: 15px; line-height: 1; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.folge__text p { margin-top: 16px; color: var(--neben); font-size: 17px; line-height: 1.7; }
.folge__verweis { grid-column: 1 / -1; justify-self: start; margin-top: 84px; }

/* ---------- B7 Abschluss ---------- */
.abschluss { position: relative; overflow: hidden; overflow: clip; padding-block: 100px 108px; text-align: center; background: var(--grund-2); }
.abschluss__innen { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.zeichen { width: 72px; height: 72px; border-radius: 23%; box-shadow: 0 10px 30px rgba(26, 46, 92, .13); }
.abschluss .h2 { margin-top: 28px; }
.abschluss__satz { margin-top: 22px; color: var(--neben); font-size: 19px; line-height: 1.65; }
.abschluss .abzeichen { margin-top: 30px; }
.boden--breit { left: 0; right: 0; width: 100%; bottom: 44px; }

@media (max-width: 1100px) {
.marken { width: 300px; }
.bereiche { column-gap: 24px; }
.folge { row-gap: 64px; margin-top: 60px; }
.folge__bild { width: 320px; }
.folge__nr { position: static; display: inline-block; margin-right: 12px; vertical-align: .35em; }
html[data-abschnitte="neu"] .frei { --mb: 230px; }
}
@media (min-width: 701px) and (max-width: 960px) {
.marken { width: 270px; }
.bereiche { grid-template-columns: minmax(0, 1fr); }
.bereiche li { min-height: 0; }
.folge__bild { width: 260px; }
}
@media (max-width: 700px) {
.marken { left: 0; right: 69px; width: auto; bottom: -8px; }
.bereiche { grid-template-columns: minmax(0, 1fr); margin-top: 26px; }
.bereiche li { min-height: 0; }
html[data-abschnitte="neu"] .frei { --mb: 200px; justify-content: center; padding: 8px 0 0; }
html[data-abschnitte="neu"] .schritte { padding-bottom: 70px; }
.folge { margin-top: 44px; row-gap: 52px; }
.folge__zeile { grid-template-columns: minmax(0, 1fr); row-gap: 26px; }
.folge__zeile:nth-child(even) .folge__bild { order: 0; justify-self: center; }
.folge__zeile:nth-child(even) .folge__text { justify-self: start; }
.folge__bild { justify-self: center; width: 78vw; max-width: 340px; border-radius: 22px; }
.folge__verweis { margin-top: 40px; }
.abschluss { padding-block: 70px 84px; }
.boden--breit { bottom: 30px; }
}
@media (prefers-reduced-motion: reduce) {
[data-ein] { opacity: 1 !important; transform: none !important; }
}

/* =====================================================================================================
   Runde 3 (11-10-2026): Handy schwebt auf zwei weiteren Wegen · Leiste am Telefon erst nach dem Rollen
   ===================================================================================================== */
/* „Schatten“: Das Handy steht still. Nur dieser weiche Körper darunter atmet (Deckkraft und Breite). Er liegt auf einer
   eigenen Ebene UNTER dem Handy; kein Bildpunkt des Handys ändert sich (gemessen, Bericht Runde 3). */
.schatten { display: none; position: absolute; z-index: 0; pointer-events: none; }
.schatten::before, .schatten::after { content: ""; position: absolute; border-radius: 50%; }
.schatten::before { inset: 0 13%; background: radial-gradient(ellipse at 50% 50%, rgba(26, 46, 92, .5) 0%, rgba(26, 46, 92, .22) 40%, rgba(26, 46, 92, 0) 70%); }
.schatten::after { inset: 0; opacity: .2; background: radial-gradient(ellipse at 50% 50%, rgba(26, 46, 92, .3) 0%, rgba(26, 46, 92, .14) 42%, rgba(26, 46, 92, 0) 70%); }
/* Reihenfolge: Marken und Schild werden VOR dem Handy gemalt, das Handy liegt darüber, das Motiv wieder VOR dem Handy
   (sonst schneidet das Handy das Motiv an; Nutzer 11-10-2026, 17 Uhr). Wo das Schild den Rand des Handys überdeckt
   (schmale Fenster, Telefon), hebt das Skript es nach vorn (stil.js, ebene.lage). Im Weg „Weich“ liegt damit nur das
   Motiv auf einer eigenen Ebene (gemessen: 0,95 der Schärfe), Schild und Marken bleiben in der Seite. */
.marken { z-index: 2; }
.buehne__geraet { z-index: 3; }
.buehne__ding .motiv { position: relative; z-index: 4; }
/* Nur Deckkraft, keine Verschiebung und keine Dehnung: Der enge, dunkle Kern wird blasser, der weite, helle Hof kräftiger.
   Das wirkt wie ein Schatten, der breiter und weicher wird. Mit einer bewegten Fläche (transform) hält der Browser alles,
   was danach gemalt wird, für überdeckt und legt auch das Handy auf eine eigene Ebene; bei Bildschirm-Skalierung 125 und
   150 % wurde es dadurch weich (gemessen: Schärfe 0,35 und 0,55 statt 1; Bericht Runde 4). */
@keyframes atmen { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes atmen-hof { 0%, 100% { opacity: .2; } 50% { opacity: .85; } }
/* Solange der Schatten-Körper atmet, trägt der Rahmen nur einen hauchdünnen eigenen Schatten, und der Körper liegt ganz
   UNTER der Unterkante des Handys. Grund (gemessen, Runde 3): Überdeckt das Handy samt seinem weiten Schatten die bewegte
   Ebene, legt der Browser auch das Handy auf eine Ebene, und bei Bildschirm-Skalierung 125 und 150 % wird es dann weich
   (Schärfe 0,41 und 0,30 statt 1). Ohne Überdeckung bleibt das Handy in der Seite und Punkt für Punkt gleich. */
html[data-schweben="schatten"]:not([data-bewegung="aus"]):not([data-ruhe]) .buehne__geraet, html.nur-kante .buehne__geraet { box-shadow: var(--r-kante); }
html[data-schweben="schatten"]:not([data-bewegung="aus"]):not([data-ruhe]) .schatten { display: block; }
html[data-schweben="schatten"]:not([data-bewegung="aus"]):not([data-ruhe]) .schatten::before { animation: atmen 9s ease-in-out infinite; }
html[data-schweben="schatten"]:not([data-bewegung="aus"]):not([data-ruhe]) .schatten::after { animation: atmen-hof 9s ease-in-out infinite; }
/* „Weich“: das Handy als hochaufgelöstes Bild in einem canvas, vom Browser als eigene Ebene bewegt. Das gebaute Handy bleibt
   an seinem Platz (unsichtbar), damit Lage, Marken und Bühnenbild sich nicht ändern. */
.ebene-fenster { display: none; position: absolute; z-index: 3; overflow: clip; pointer-events: none; }
.geraet-ebene { position: absolute; cursor: pointer; pointer-events: auto; }
/* Hub 9 Pixel in 10 s, nur senkrecht. Die Neigung (--neig) ist aus: Mit ihr wanderten die langen geraden Kanten des Rahmens
   (Nutzer 11-10-2026, 17 Uhr; gemessen: Änderung an der Seitenkante 0,27 mit Neigung, 0,01 ohne). Bericht Runde 4, Punkt 6. */
.geraet-ebene { --neig: 0deg; }
@keyframes gleiten { 0%, 100% { transform: translateY(0) rotate(calc(var(--neig) * -1)); } 50% { transform: translateY(-9px) rotate(var(--neig)); } }
html.ebene-an .ebene-fenster { display: block; }
html.ebene-an .geraet-ebene { animation: gleiten 10s ease-in-out infinite; will-change: transform; }
html.ebene-an .buehne__geraet { visibility: hidden; }
/* Unter dem schwebenden Handy bleibt der Schatten am Boden und atmet im selben Takt (nur Deckkraft) */
html.ebene-an:not([data-bewegung="aus"]) .schatten { display: block; }
html.ebene-an:not([data-bewegung="aus"]) .schatten::before { animation: atmen 10s ease-in-out infinite; }
html.ebene-an:not([data-bewegung="aus"]) .schatten::after { animation: atmen-hof 10s ease-in-out infinite; }
html[data-bewegung="aus"].ebene-an .geraet-ebene { animation: none; }
@media (prefers-reduced-motion: reduce) {
.schatten, .ebene-fenster { display: none !important; } }

/* Leiste am Telefon: mit „Nach dem Rollen“ erst sichtbar, wenn der Google-Play-Knopf der Bühne aus dem Bild ist */
@media (max-width: 700px) {
.fussleiste { transition: opacity .25s ease, visibility 0s linear 0s; }
html.js:not(.leiste-da) .fussleiste { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s ease, visibility 0s linear .25s; }
}


/* =====================================================================================================
   Runde 4 · Abschnitte 2, 3, 5 und 9
   ===================================================================================================== */
/* Schalter „Ein kleiner Blick“ und Motive */
html[data-blick="reihe"] .nur-karussell, html[data-blick="karussell"] .nur-reihe { display: none !important; }
html[data-m-buehne="aus"] .buehne__ding .motiv, html[data-m-einblick="aus"] .einblick__motiv, html[data-m-bereiche="aus"] .portrait .stand-ort, html[data-m-schritte="aus"] .frei { display: none; }
/* Dritter Teil ohne Motiv: an seiner Stelle ein Handy mit der Übersicht der Lernbereiche */
.portrait__geraet { display: none; --b: 250px; }
html[data-m-bereiche="aus"] .portrait__geraet { display: block; }
.geraet--mittel { --b: 250px; }

/* „So lernst du“: je Schritt ein ganzes Handy, darunter die Wahl des Bildschirms als schlichte Wörter */
.folge__schau { justify-self: end; display: flex; flex-direction: column; align-items: center; gap: 20px; width: 380px; max-width: 100%; }
.folge__zeile:nth-child(even) .folge__schau { order: 2; justify-self: start; }
.folge__schau .geraet { cursor: pointer; }
.wortwahl { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 22px; row-gap: 4px; }
.wortwahl button { padding: 6px 1px 5px; border-bottom: 2px solid transparent; color: var(--neben); font-size: 14.5px; line-height: 1.3; transition: color .2s ease, border-color .2s ease; }
.wortwahl button:hover { color: var(--tinte); }
.wortwahl button[aria-pressed="true"] { color: var(--tinte); font-weight: 600; border-bottom-color: var(--akzent); }

/* Karussell: ein Handy groß vorn, die Nachbarn kleiner, leicht gedreht und zurückgesetzt. Vorn steht das Handy ohne
   transform (scharf wie jedes andere); die Fahrt dauert eine halbe Sekunde. */
.umschalter--viele { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.umschalter--viele::-webkit-scrollbar { display: none; }
.umschalter--viele button { flex: none; padding-inline: 14px; font-size: 13.5px; }
.karussell { --kb: 232px; position: relative; width: 100%; height: calc(var(--kb) * 2.13 + 30px); margin-top: 34px; overflow: clip; touch-action: pan-y; }
.karussell__platz { position: absolute; left: 50%; top: 6px; width: var(--kb); margin-left: calc(var(--kb) / -2); padding: 0; border-radius: calc(var(--kb) * .15);
  transform-origin: 50% 58%; transition: transform .5s cubic-bezier(.3, .7, .2, 1), opacity .5s ease; cursor: pointer; }
.karussell .geraet, .karussell .geraet__schirm { display: block; }
/* Runde 5: Die Handys selbst sind immer deckend (vorher mit Deckkraft 0,92 und 0,6: die dritte Reihe schien durch die zweite).
   Blasser wirken die hinteren durch einen Schleier in Papierfarbe, der auf dem Handy liegt. */
.karussell__platz::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--papier); opacity: var(--schleier, 0); transition: opacity .5s ease; pointer-events: none; }
.karussell img { pointer-events: none; -webkit-user-drag: none; user-select: none; } /* kein Ziehen des Bilds: Wischen gehört dem Karussell */
.karussell .geraet { --b: var(--kb); box-shadow: var(--r-kante), var(--r-wurf-klein); }
.karussell__platz[data-lage="0"] { z-index: 5; cursor: default; }
.karussell__platz[data-lage="1"] { z-index: 4; --schleier: .14; transform: translateX(60%) translateY(4%) scale(.8) rotate(3deg); }
.karussell__platz[data-lage="-1"] { z-index: 4; --schleier: .14; transform: translateX(-60%) translateY(4%) scale(.8) rotate(-3deg); }
.karussell__platz[data-lage="2"] { z-index: 3; --schleier: .4; transform: translateX(106%) translateY(9%) scale(.63) rotate(6deg); }
.karussell__platz[data-lage="-2"] { z-index: 3; --schleier: .4; transform: translateX(-106%) translateY(9%) scale(.63) rotate(-6deg); }
.karussell__platz[data-lage="3"] { z-index: 2; opacity: 0; pointer-events: none; transform: translateX(140%) translateY(13%) scale(.5) rotate(8deg); }
.karussell__platz[data-lage="-3"] { z-index: 2; opacity: 0; pointer-events: none; transform: translateX(-140%) translateY(13%) scale(.5) rotate(-8deg); }
html[data-bewegung="aus"] .karussell__platz, html[data-ruhe] .karussell__platz { transition: none; }
@media (prefers-reduced-motion: reduce) {
.karussell__platz { transition: none; } }
@media (max-width: 1100px) {
.folge__schau { width: 320px; }
.karussell { --kb: 210px; }
}
@media (min-width: 701px) and (max-width: 960px) {
.folge__schau { width: 260px; }
.geraet--mittel { --b: 210px; }
.karussell { --kb: 180px; }
}
@media (max-width: 700px) {
.folge__schau, .folge__zeile:nth-child(even) .folge__schau { order: 0; justify-self: center; width: 100%; }
.geraet--mittel { --b: 210px; }
.portrait__geraet { --b: 220px; }
.bereiche img { width: 42px; height: 42px; }
.umschalter--viele { align-self: stretch; border-radius: 26px; }
.karussell { --kb: 190px; margin-top: 26px; }
.karussell__platz[data-lage="2"], .karussell__platz[data-lage="-2"] { opacity: 0; pointer-events: none; }
}

/* =====================================================================================================
   Runde 4 · Punkt 7: Knopf mit Glanz und lebende Stoppuhr
   ===================================================================================================== */
/* Knopf mit Glanz (Schalter „Knöpfe“). Eigener Entwurf in reinem CSS, Anregung: dunkler Knopf mit umlaufendem Licht.
   Farben aus der Seite: Grund Tinte, Glanz in unserem Blau #2E5AA8 und zwei helleren Tönen desselben Farbwinkels, in OKLCH
   gerechnet (#81ABF3 = oklch(0.74 0.115 261), #CDDFFD = oklch(0.90 0.045 261)). Gilt nur für die eigenen Hauptknöpfe
   („App laden“), nicht für das Google-Play-Abzeichen. Ohne @property bleibt das Licht an einer Stelle stehen, weil sich
   der Winkel dann nicht gleitend ändern lässt: ein ruhiger, stehender Rand. */
@property --glanz-winkel { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@property --glanz-weite { syntax: "<percentage>"; initial-value: 74%; inherits: false; }
@property --glanz-kraft { syntax: "<number>"; initial-value: .94; inherits: false; }
/* Runde 5: edler und ohne Punktmuster. Tiefer Tinten-Grund mit ganz leichtem Verlauf, saubere Kante, ein schmaler Lichtbogen
   in unserem Blau mit hellem Kern, der in 9 Sekunden einmal um den Rand läuft; innen nur ein sehr leiser Schimmer von oben. */
html[data-knopf="glanz"] .knopf--voll {
  --glanz-blau: #2E5AA8; --glanz-hell: #81ABF3; --glanz-licht: #EAF2FF;
  position: relative; isolation: isolate; overflow: hidden; border: 1.5px solid transparent; color: #FFFDF9;
  font-weight: 600; letter-spacing: .004em;
  background:
    linear-gradient(180deg, #152036 0%, #0B1220 52%, #070C17 100%) padding-box,
    conic-gradient(from var(--glanz-winkel), transparent 0, transparent var(--glanz-weite),
      rgba(46, 90, 168, calc(var(--glanz-kraft) * .55)) calc(var(--glanz-weite) + (100% - var(--glanz-weite)) * .35),
      rgba(129, 171, 243, var(--glanz-kraft)) calc(var(--glanz-weite) + (100% - var(--glanz-weite)) * .78),
      rgba(234, 242, 255, var(--glanz-kraft)) calc(100% - 2.2%), rgba(129, 171, 243, calc(var(--glanz-kraft) * .7)) calc(100% - .7%), transparent 100%) border-box,
    linear-gradient(180deg, #2C3A57, #1A2439) border-box;
  box-shadow: inset 0 1px 0 rgba(205, 223, 253, .13), inset 0 -1px 0 rgba(0, 0, 0, .35), 0 1px 1px rgba(11, 18, 32, .28), 0 12px 26px -16px rgba(11, 18, 32, .8);
  animation: glanz-lauf 9s linear infinite;
  transition: transform .2s ease, box-shadow .35s ease, --glanz-weite .55s ease, --glanz-kraft .35s ease;
}
/* innen: ein sehr leiser Schimmer von oben (steht), dazu ein kaum sichtbares Band, das einmal je Umlauf durchzieht */
html[data-knopf="glanz"] .knopf--voll::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: radial-gradient(120% 90% at 50% -30%, rgba(129, 171, 243, .2) 0%, rgba(129, 171, 243, .05) 46%, transparent 70%);
}
html[data-knopf="glanz"] .knopf--voll::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: linear-gradient(112deg, transparent 40%, rgba(205, 223, 253, .1) 50%, transparent 60%) no-repeat;
  background-size: 280% 100%; background-position: 135% 0;
  animation: glanz-zug 9s ease-in-out infinite;
}
html[data-knopf="glanz"] .knopf--voll:hover, html[data-knopf="glanz"] .knopf--voll:focus-visible {
  --glanz-weite: 58%; --glanz-kraft: 1; background-color: transparent;
  box-shadow: inset 0 1px 0 rgba(205, 223, 253, .2), inset 0 -1px 0 rgba(0, 0, 0, .35), 0 0 0 1px rgba(129, 171, 243, .16), 0 14px 30px -16px rgba(46, 90, 168, .85);
}
html[data-knopf="glanz"] .knopf--voll:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; border-radius: 999px; }
@keyframes glanz-lauf { to { --glanz-winkel: 360deg; } }
@keyframes glanz-zug { 0%, 34% { background-position: 135% 0; } 72%, 100% { background-position: -35% 0; } }
/* Bewegung aus oder „weniger Bewegung“ am Gerät: Der Bogen steht */
html[data-bewegung="aus"][data-knopf="glanz"] .knopf--voll, html[data-ruhe][data-knopf="glanz"] .knopf--voll, html[data-bewegung="aus"][data-knopf="glanz"] .knopf--voll::after, html[data-ruhe][data-knopf="glanz"] .knopf--voll::after { animation: none; }
@media (prefers-reduced-motion: reduce) {
html[data-knopf="glanz"] .knopf--voll, html[data-knopf="glanz"] .knopf--voll::after { animation: none; } }

/* Die Uhr (Runde 6): klein in Schritt 3 neben der Überschrift, Uhrenbild der Fassung ohne Zeiger, Zeiger als SVG darüber */
/* breite Fenster: rechts neben dem Textblock (dort ist Platz), so bricht die Überschrift nicht um; sonst rechts im Block */
/* Schlussrunde: Die Uhr steht groß und frei über der Überschrift von Schritt 3 (das Bildfeld ist rundum größer als die Uhr:
   links 17, oben 10 Prozent frei; die Ränder ziehen die Uhr bündig an den Text). Zifferblatt rund 125 Pixel. */
.lebuhr { display: none; position: relative; width: 240px; margin: -22px 0 2px -42px; }
@media (max-width: 1100px) {
.lebuhr { width: 210px; margin: -18px 0 2px -37px; } }
.lebuhr__bild { display: block; width: 100%; height: auto; }
.lebuhr svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* die Schrittnummer bleibt an der Überschrift, auch wenn die Uhr darüber steht */
.folge__text h3 { position: relative; }
.lebuhr__sek line { stroke: var(--akzent); }
.lebuhr__sek circle { fill: var(--akzent); }
html[data-aha="an"][data-uhr="an"] .lebuhr { display: block; }
/* Kleine Uhr auf dem Schreibtisch der Bühne (Schalter „Uhr auf dem Schreibtisch“): steht links neben dem Handy auf der Tischkante,
   läuft wie die Uhr bei Schritt 3, nur auf breiten Bildschirmen. */
html[data-aha="an"][data-uhr="an"] .lebuhr.lebuhr--tisch { display: none; }
.lebuhr.lebuhr--tisch { position: absolute; z-index: 3; left: -128px; bottom: 30px; width: 112px; margin: 0; }
html[data-aha="an"][data-tischuhr="an"] .lebuhr.lebuhr--tisch { display: block; }
@media (max-width: 700px) {
html[data-aha="an"][data-tischuhr="an"] .lebuhr.lebuhr--tisch { display: none; } }
/* Nur fürs Handy (Schalter „Bild oben am Handy“, „Text oben am Handy“) */
@media (max-width: 700px) {
html[data-bildhandy="links1"] .land img { translate: -44px 0; }
html[data-bildhandy="links2"] .land img { translate: -88px 0; }
html[data-texthandy="links"] .buehne__text { align-items: flex-start; text-align: left; }
}
/* Offene Schalter nach der Auswahl des Nutzers (12-10-2026): Schild der Bühne, Datum bei den Zahlen, Überschrift bei Schritt 3 */
html[data-schild="aus"] .buehne__ding .notiz { display: none; }
.sd, .s3 { display: none; }
html[data-standdatum="an"] .sd[data-sd="an"], html[data-standdatum="aus"] .sd[data-sd="aus"] { display: inline; }
html[data-schritt3="bisher"] .s3[data-s3="bisher"], html[data-schritt3="generalprobe"] .s3[data-s3="generalprobe"], html[data-schritt3="zeitgefuehl"] .s3[data-s3="zeitgefuehl"], html[data-schritt3="wannespasst"] .s3[data-s3="wannespasst"] { display: inline; }
/* Überschriften der Schritte am Handy: Die zweite Zeile beginnt unter dem ersten Wort, nicht unter der Ziffer (Nutzer 12-10-2026) */
@media (max-width: 700px) {
.folge__text h3 { display: flex; align-items: baseline; }
.folge__text h3 > .folge__nr { flex: none; } }
/* Karussell am Handy über die ganze Bildschirmbreite (Nutzer 12-10-2026: war links und rechts abgeschnitten) */
@media (max-width: 700px) {
.karussell { width: 100vw; margin-inline: calc(50% - 50vw); } }
/* Die Teilung des Tweak-Felds in „Laptop“ und „Nur fürs Handy“ ist wieder entfallen (Nutzer 12-10-2026): Am Handy steht dieselbe
   volle Auswahl wie am Laptop; er gibt zwei vollständige Einstellungen ab, eine je Gerät. */
/* Die Motive der Abschnitte sind Schmuck: Sie dürfen keinen Tipp abfangen. Am Handy lag das Motiv der sechs Bereiche mit seinem
   durchsichtigen Rand über dem Verweis „Die sechs Handlungsbereiche“, der sich deshalb nicht antippen ließ (Nutzer 12-10-2026). */
.stand-ort, .portrait__ding, .frei__ding { pointer-events: none; }
html[data-aha="aus"] [data-feld="uhr"] { opacity: .45; }

/* =====================================================================================================
   Runde 4 · Punkt 8: Die Bühne zeichnet sich von links nach rechts auf, auch bei Skizze (Schalter „Bühne zeichnet sich auf“)
   Eine weiche Maske zieht einmal über das stehende Bild (bei Linie mit schmalerer Kante). Danach nimmt stil.js die Marke
   „auftritt“ weg, es bleibt keine Maske zurück. Nicht bei Bewegung „Aus“ und nicht bei „weniger Bewegung“ am Gerät.
   ===================================================================================================== */
@keyframes aufziehen { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
html.auftritt[data-wisch="links"]:not([data-bewegung="aus"]):not([data-ruhe]) .land {
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 44%, transparent 56%); mask-image: linear-gradient(90deg, #000 0, #000 44%, transparent 56%);
  -webkit-mask-size: 230% 100%; mask-size: 230% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  animation: aufziehen 2.3s cubic-bezier(.4, .1, .25, 1) both;
}
html.auftritt[data-wisch="links"][data-stil^="linie"]:not([data-bewegung="aus"]):not([data-ruhe]) .land {
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 48%, transparent 52%); mask-image: linear-gradient(90deg, #000 0, #000 48%, transparent 52%);
}
html.auftritt:not([data-wisch="aus"]):not([data-bewegung="aus"]):not([data-ruhe]) .land img { animation: none; }

/* Runde 4 · Punkt 9: Die Linie führt durch die Schritte (zwei feine Bögen zwischen den Handys, im Strich der Fassung) */
.folge { position: relative; }
.faden { display: none; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.faden path { fill: none; stroke: rgba(70, 80, 100, .6); stroke-width: 1.4; stroke-linecap: round; }
html[data-stil="skizze2"] .faden path { stroke: rgba(92, 72, 48, .6); }
html[data-stil="linie1"] .faden path { stroke: var(--tinte); stroke-width: 2; }
html[data-stil="linie2"] .faden path { stroke: var(--akzent); stroke-width: 2; }
html[data-aha="an"][data-faden="an"][data-abschnitte="neu"] .faden { display: block; }
/* Linie „Hochwertig“ (Schalter „Linie durch die Schritte“, Wert fein): Verlauf, zarter Schein darunter, Ring am Anfang, wandernde Perle */
html[data-aha="an"][data-faden="fein"][data-abschnitte="neu"] .faden { display: block; }
.faden .faden__fein { stroke-width: 2.4; }
.faden .faden__schein { stroke: rgba(46, 90, 168, .12); stroke-width: 11; }
.faden__ring { fill: var(--papier); stroke: #2E5AA8; stroke-width: 2; }
.faden__perle { fill: var(--akzent); stroke: var(--papier); stroke-width: 2.5; opacity: 0; transition: opacity .2s ease; }
@media (max-width: 700px) {
html[data-aha="an"][data-faden="fein"] .faden { display: none; } }
/* Motive am Handy (Schalter „Motive am Handy“): „aus“ blendet auf schmalen Bildschirmen die Motive der Abschnitte aus (nicht das der Bühne) */
@media (max-width: 700px) {
html[data-mhandy="aus"] .einblick__motiv, html[data-mhandy="aus"] .portrait .stand-ort, html[data-mhandy="aus"] .frei { display: none; } }
/* … und der Rahmen des Motivs bei den sechs Bereichen gleich mit: Er hielt sonst 330 Pixel leere Fläche frei (Nutzer 12-10-2026).
   Steht an dem Platz ein Handy statt des Motivs, bleibt der Rahmen. */
@media (max-width: 700px) {
html[data-mhandy="aus"][data-m-bereiche="an"] .portrait { display: none; } }
/* „oben“: Die Motive der Abschnitte stehen auf schmalen Bildschirmen über der Überschrift statt unter dem Text */
@media (max-width: 700px) {
html[data-mhandy="oben"] .portrait, html[data-mhandy="oben"] .frei { order: -1; } }
@media (max-width: 700px) {
html[data-aha="an"][data-faden="an"] .faden { display: none; } }

/* =====================================================================================================
   Runde 5
   ===================================================================================================== */
/* A3 Rahmen Hellblau, gerechnet (OKLCH, Farbwinkel 245°, Buntheit 0,055; Kantenring #1F5F8F: Kontrast zum Papier 6,41) */
html[data-rahmen="hellblau"] { --r-grund: linear-gradient(145deg, #BDDFFD 0%, #91B2CF 30%, #ACCDEB 55%, #7999B5 80%, #B7D9F7 100%);
  --r-kante: inset 0 0 0 1px rgba(255, 255, 255, .6), 0 0 0 1px rgba(31, 95, 143, .55), 0 1px 2px rgba(16, 44, 72, .22); --r-wurf: 0 22px 40px -16px rgba(16, 44, 72, .28), 0 60px 100px -44px rgba(16, 44, 72, .34);
  --r-wurf-klein: 0 14px 26px -14px rgba(16, 44, 72, .32); --r-schirm: #030E19; }

/* A4 „Lebhaft“: mehr Weg und schneller, weiter nur senkrecht und über die hochaufgelöste Ebene (Messung: Bericht Runde 5) */
@keyframes gleiten-lebhaft { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
html[data-schweben="lebhaft"].ebene-an .geraet-ebene { animation: gleiten-lebhaft 7s ease-in-out infinite; }
html[data-schweben="lebhaft"].ebene-an:not([data-bewegung="aus"]) .schatten::before { animation-duration: 7s; }
html[data-schweben="lebhaft"].ebene-an:not([data-bewegung="aus"]) .schatten::after { animation-duration: 7s; }
html[data-bewegung="aus"][data-schweben="lebhaft"].ebene-an .geraet-ebene { animation: none; }

/* A8 Sechs Bereiche ohne Zeichen (Vorgabe): je Zeile ein schmaler Farbstrich in der Farbe des Bereichs aus der App, der Name
   groß genug, feine Linien, zwei Spalten. Schalter „Bereiche“ holt die Zeichen der App zurück. */
.bereiche li::before { content: ""; flex: none; align-self: center; width: 4px; height: 34px; border-radius: 2px; background: var(--ton, var(--akzent)); }
/* Farben der sechs Bereiche (Schalter „Farben der sechs Bereiche“). „fein“: dieselben Farbfamilien wie in der App, in OKLCH auf gleiche
   Helligkeit (0,56) und gleiche Buntheit (0,085) gerechnet; Kontrast zum Grund des Abschnitts 3,9 bis 4,2 zu 1 (App-Farben: 3,5 bis 5,6).
   „blau“: alle im Blau der Seite. Die Striche sind immer gleich lang (Nutzer 12-10-2026), auch wenn ein Name zwei Zeilen braucht. */
html[data-farben="fein"] .bereiche li:nth-child(1) { --ton: #8D6F35 !important; }
html[data-farben="fein"] .bereiche li:nth-child(2) { --ton: #248388 !important; }
html[data-farben="fein"] .bereiche li:nth-child(3) { --ton: #956186 !important; }
html[data-farben="fein"] .bereiche li:nth-child(4) { --ton: #9D6547 !important; }
html[data-farben="fein"] .bereiche li:nth-child(5) { --ton: #4A79A4 !important; }
html[data-farben="fein"] .bereiche li:nth-child(6) { --ton: #667E46 !important; }
html[data-farben="blau"] .bereiche li { --ton: var(--akzent) !important; }
html[data-zeichen="ohne"] .bereiche img { display: none; }
html[data-zeichen="ohne"] .bereiche { column-gap: 44px; }
html[data-zeichen="ohne"] .bereiche li { gap: 16px; min-height: 68px; padding-block: 14px; font-size: 17.5px; font-weight: 500; letter-spacing: -.012em; line-height: 1.3; }
html[data-zeichen="mit"] .bereiche li::before { display: none; }
@media (max-width: 700px) {
html[data-zeichen="ohne"] .bereiche li { min-height: 0; font-size: 17px; } }

/* A9 Weitere Arten, wie sich das Bühnenbild aufbaut. Jede läuft einmal; danach nimmt stil.js die Marke „auftritt“ weg,
   es bleibt weder Maske noch Filter. */
@property --kr { syntax: "<length>"; initial-value: 0px; inherits: false; }
@keyframes kreis { from { --kr: 0px; } to { --kr: 2400px; } }
/* Vom Handy aus: Das Bild wächst in einem weichen Kreis hinter dem Handy hervor (Rand des Kreises 260 Pixel weich) */
html.auftritt[data-wisch="handy"]:not([data-bewegung="aus"]):not([data-ruhe]) .land {
  -webkit-mask-image: radial-gradient(circle at var(--kx, 70%) var(--ky, 50%), #000 0, #000 calc(var(--kr) - 260px), transparent var(--kr));
  mask-image: radial-gradient(circle at var(--kx, 70%) var(--ky, 50%), #000 0, #000 calc(var(--kr) - 260px), transparent var(--kr));
  animation: kreis 2.6s cubic-bezier(.3, .05, .3, 1) both;
}
/* Scharfstellen: aus leichter Unschärfe und geringer Deckkraft in die Schärfe */
@keyframes scharf { from { filter: blur(14px); opacity: .25; } 60% { opacity: 1; } to { filter: blur(0); opacity: 1; } }
html.auftritt[data-wisch="scharf"]:not([data-bewegung="aus"]):not([data-ruhe]) .land { animation: scharf 2.2s cubic-bezier(.3, .1, .2, 1) both; }

/* A9 „Erst Linie, dann Farbe“: Zuerst erscheint die entfärbte, aufgehellte Fassung desselben Bildes (/assets/img/immofw/…-linie.webp, per
   Bildbearbeitung erzeugt), dann blendet die Farbe darüber ein. Am Ende ist das zweite Bild wieder weg. */
.land__linie { display: none; }
@keyframes linie-kommt { 0% { opacity: 0; } 32%, 100% { opacity: 1; } }
@keyframes farbe-kommt { 0%, 36% { opacity: 0; } 100% { opacity: 1; } }
html.auftritt[data-wisch="linie"]:not([data-bewegung="aus"]):not([data-ruhe]) .land .land__linie { display: block; animation: linie-kommt 2.6s ease-out both; }
html.auftritt[data-wisch="linie"]:not([data-bewegung="aus"]):not([data-ruhe]) .land #buehnenbild { animation: farbe-kommt 2.6s cubic-bezier(.4, 0, .3, 1) both; }
/* Je Platz: Motiv (an), Handy oder nichts (aus). Die Regeln aus Runde 4 blenden bei „aus“ das Motiv aus; hier kommen das
   Handy je Platz und die saubere Fassung ohne beides dazu. */
.einblick__geraet, .frei__geraet { display: none; }
.einblick__geraet { --b: 112px; margin: 0 0 22px 2px; }
.frei__geraet { --b: 150px; }
.einblick__geraet, .frei__geraet, .portrait__geraet { box-shadow: var(--r-kante), var(--r-wurf-klein); }
html[data-m-einblick="handy"] .einblick__motiv { display: none; }
html[data-m-einblick="handy"] .einblick__geraet { display: block; }
html[data-m-bereiche="handy"] .portrait .stand-ort { display: none; }
html[data-m-bereiche="handy"] .portrait__geraet { display: block; }
html[data-m-bereiche="aus"] .portrait__geraet, html[data-m-bereiche="aus"] .portrait { display: none; }
html[data-m-bereiche="aus"] .vorstellung__raster { grid-template-columns: minmax(0, 1fr); }
html[data-m-bereiche="aus"] .vorstellung__raster > :not(.portrait) { max-width: 820px; }
html[data-m-schritte="handy"] .frei .stand-ort { display: none; }
html[data-m-schritte="handy"] .frei__geraet { display: block; }
/* Schild der Bühne ohne Motiv: höher neben dem Handy (Höhe je Bühnenbild aus fruh.js, Vorgabe 44 % der Höhe des Handys) */
html[data-m-buehne="aus"] .buehne__ding { bottom: auto; top: var(--schild-oben, 44%); }
html[data-m-buehne="aus"] .buehne__ding .notiz { bottom: auto; top: 0; }
@media (max-width: 700px) {
.lebuhr { width: 190px; margin: -16px 0 0 -33px; }
.frei__geraet { --b: 132px; }
}

/* =====================================================================================================
   Runde 7
   ===================================================================================================== */
/* Motiv am Handy schwebt: das Motiv als eigene, höher aufgelöste Ebene (stil.js, motivEbene), nur senkrecht, eigener Takt */
.motiv-fenster { display: none; position: absolute; z-index: 4; overflow: clip; pointer-events: none; }
.motiv-ebene { position: absolute; }
@keyframes gleiten-motiv { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
html.motiv-schwebt .motiv-fenster { display: block; }
html.motiv-schwebt .motiv-ebene { animation: gleiten-motiv 7.3s ease-in-out -2.4s infinite; will-change: transform; }
html.motiv-schwebt .buehne__ding .motiv { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
.motiv-fenster { display: none !important; }
html.motiv-schwebt .buehne__ding .motiv { visibility: visible; } }

/* ---------- Runde 7, Zusatz: Motiv im Abschnitt „Ein kleiner Blick“ – Platz und Größe ---------- */
/* Größe „größer“: das Anderthalbfache der bisherigen Breite (150, 120 und 124 Pixel je Fensterbreite) */
html[data-egroesse="gross"] .einblick__motiv { --mb: 225px; }
/* Platz „unter dem Text, rechts“: Das Motiv steht am Fuß des Textblocks rechts, der Verweis links daneben; die Überschrift
   rückt dadurch nach oben auf die Höhe der Umschalter. Der Block hält unten so viel frei, dass das Motiv nichts überdeckt:
   in bisheriger Größe beginnt es knapp über dem Verweis (rechts von ihm), größer steht es ganz unter dem Verweis. */
html[data-eplatz="unten"][data-m-einblick="an"] .einblick__text { position: relative; padding-bottom: 110px; }
html[data-eplatz="unten"][data-m-einblick="an"][data-egroesse="gross"] .einblick__text { padding-bottom: 231px; }
html[data-eplatz="unten"][data-m-einblick="an"] .einblick__motiv { position: absolute; right: 0; bottom: 0; margin: 0; }
/* schmale zweispaltige Fenster: Die Textspalte ist zu schmal für Verweis und Motiv nebeneinander, das Motiv steht ganz darunter */
@media (min-width: 961px) and (max-width: 1100px) {
html[data-eplatz="unten"][data-m-einblick="an"] .einblick__text { padding-bottom: 156px; }
}
@media (min-width: 701px) and (max-width: 960px) {
html[data-egroesse="gross"] .einblick__motiv { --mb: 180px; }
html[data-eplatz="unten"][data-m-einblick="an"] .einblick__text { padding-bottom: 126px; }
html[data-eplatz="unten"][data-m-einblick="an"][data-egroesse="gross"] .einblick__text { padding-bottom: 186px; }
}
@media (max-width: 700px) {
html[data-egroesse="gross"] .einblick__motiv { --mb: 186px; }
html[data-eplatz="unten"][data-m-einblick="an"] .einblick__text { padding-bottom: 96px; }
html[data-eplatz="unten"][data-m-einblick="an"][data-egroesse="gross"] .einblick__text { padding-bottom: 192px; }
}

/* ---------- Nachtrag: Video-Bild bei Schritt 1 ---------- */
/* „Szene mit Abspielknopf“: leichter Schleier und runder Knopf als Überlagerung über dem Bild der Szene (kein neues Bild). Sichtbar nur,
   wenn das Video-Bild vorn steht; blendet mit dem Bildwechsel weich ein und aus. */
.spielknopf { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity .5s ease;
  background: linear-gradient(rgba(11, 18, 32, .06), rgba(11, 18, 32, .20)); }
.spielknopf::before { content: ""; grid-area: 1 / 1; width: 30%; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 253, 248, .95);
  box-shadow: 0 0 0 6px rgba(255, 253, 248, .22), 0 8px 24px rgba(11, 18, 32, .30); }
.spielknopf svg { grid-area: 1 / 1; width: 15%; margin-left: 1.5%; fill: #0B1220; }
html[data-video="knopf"] .wechsel img.ist-vorn[data-vbild="video"] + .spielknopf { opacity: 1; }
/* Szene des Erklärvideos im Karussell (die Stellung „Karte des Videos“ tauscht sie dorthin): leichter Schleier und Pause-Knopf, als wäre
   das Video gerade angetippt worden, damit man es als Video erkennt (Nutzer 12-10-2026) */
.pauseknopf { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; opacity: 0; pointer-events: none; background: rgba(11, 18, 32, .16); }
.pauseknopf::before { content: ""; grid-area: 1 / 1; width: 30%; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 253, 248, .95); box-shadow: 0 6px 18px -8px rgba(11, 18, 32, .5); }
.pauseknopf svg { grid-area: 1 / 1; width: 13%; fill: #0B1220; }
.karussell__platz img[data-vbild="video"] + .pauseknopf { opacity: 1; }


/* =====================================================================================================
   Nur in der echten Seite: Abschnitt „Ein Thema, drei Wege“, Abschnitt „Fragen“, Sprungziele
   ===================================================================================================== */
/* Sprungziele: Abstand zur Kopfleiste und weiches Rollen regeln die gemeinsamen Stile (scroll-padding-top am html-Element) */
/* Ein Thema, drei Wege: links Text mit Umschalter, rechts ein Handy, dessen Bildschirm mit dem Umschalter wechselt (ohne Fahrt) */
.wege { padding-block: 110px 120px; }
.wege__raster { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); column-gap: 64px; align-items: center; }
.wege__text .absatz { margin-top: 18px; }
.wege__text .umschalter { margin-top: 30px; }
.bildzeile { min-height: 3.2em; margin-top: 18px; padding-left: 16px; border-left: 2px solid var(--akzent-linie); color: var(--neben); font-size: 15px; line-height: 1.7; }
.wege__bild { display: flex; justify-content: center; }
.wege__geraet { --b: 262px; box-shadow: var(--r-kante), var(--r-wurf-klein); }
.stapel img { opacity: 0; }
.stapel img.ist-gewaehlt { opacity: 1; }
@media (max-width: 900px) { .wege__raster { column-gap: 36px; } .wege__geraet { --b: 230px; } }
@media (max-width: 700px) {
  .wege { padding-block: 70px 80px; }
  .wege__raster { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .wege__geraet { --b: 220px; }
}
/* Knöpfe „schlicht“ (Einstellung knopf): Kopf und Fuß kommen mit Glanz aus huelle.css; hier wird er für diese Seite abgestellt */
html[data-knopf="schlicht"] .knopf--voll { animation: none; border: 1px solid transparent; background: var(--tinte); font-weight: 500; letter-spacing: 0; box-shadow: 0 8px 22px -12px rgba(11, 18, 32, .67); }
html[data-knopf="schlicht"] .knopf--voll::before, html[data-knopf="schlicht"] .knopf--voll::after { display: none; }
/* Fragen: dieselben Regeln wie auf den Unterseiten (aus unterseiten.css übernommen) */
.fragen { padding-block: 100px; }
.fragen__raster { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); column-gap: 90px; align-items: start; }
.fragen__kopf p { color: var(--neben); font-size: 17px; line-height: 1.65; max-width: 300px; margin-top: 20px; }
.fragen__kopf .verweis { margin-top: 28px; }
.fragen__liste { border-top: 1px solid var(--linie); }
.frage { border-bottom: 1px solid var(--linie); }
.frage summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding-block: 21px; cursor: pointer; list-style: none;
  font-weight: 600; font-size: 17px; line-height: 1.25; letter-spacing: -.02em;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary h3 { margin: 0; font: inherit; letter-spacing: inherit; }
.frage summary svg { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--neben); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.frage summary:hover h3 { color: var(--akzent); }
.frage[open] summary svg { transform: rotate(180deg); }
.frage__antwort { padding: 2px 40px 24px 0; color: var(--tinte-2); font-size: 16px; line-height: 1.7; }
.frage__antwort a { color: var(--akzent); text-decoration: underline; text-underline-offset: 3px; }

/* ============ ab 1100 abwärts ============ */
@media (max-width: 1100px) {
.fragen__raster { column-gap: 56px; }}

/* ============ ab 700 abwärts: einspaltig ============ */
@media (max-width: 700px) {
.fragen { padding-block: 64px; }
.fragen__raster { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
.frage__antwort { padding-right: 0; }}