/*
 * Variante A „Alltagsgeschichte“ – nur für variante-a.html, eingebunden NACH css/theme.css.
 * Erika steigt die Stufenleiter hoch. Eigene Grafiken: assets/illustrationen/variante-a/.
 *
 * Inhalt
 *   1. Mini-Leiter unten links, Erika als Figur
 *   2. Stufen-Bühne (Folien 5, 7, 8, 11): Skizze rechts, Overlays deckungsgleich
 *   3. Folienspezifisches (a-…), in Folienreihenfolge
 */

/* ========== 1. Mini-Leiter unten links (Drehbuch: einheitlich unten links) ========== */
.reveal section > .stufenleiter.ecke {
	top: auto;
	right: auto;
	left: 44px;
	bottom: 46px;
	width: 300px;
}
.reveal section:has(> .stufenleiter.ecke) > .inhalt > :is(h2, .dachzeile, .stufe-badge, .etikett) { margin-right: 0; }
/* Ausnahme Folie 14 (Karten über die ganze Breite): oben rechts wie im Gestaltungssystem */
.reveal section > .stufenleiter.ecke.oben {
	top: calc(var(--band-hoehe) + 18px);
	right: 44px;
	left: auto;
	bottom: auto;
}
/* Marken haben feste Größen; ohne max-width: none schrumpft z. B. der Strahlenkranz an Stufe 6
   auf den Restplatz bis zum rechten Leiterrand (theme.css: .reveal object { max-width: 100% }) */
.stufenleiter .leiter-marke > object { display: block; max-width: none; }
.inhalt > .stufe-badge { align-self: flex-start; }
/* Stufen-Etikett und Überschrift in einer Zeile */
.kopf { display: flex; align-items: center; gap: 30px; margin: 0 0 30px; }
.kopf h2 { margin: 0; }
.kopf .stufe-badge { flex: none; }
/* große Zahlen: reveal setzt p { margin-bottom: .6em } – hier nicht */
.reveal .inhalt .zahl { margin: 0 0 6px; }
.stufenleiter.ecke .leiter-marke > object { width: 40px; height: 79px; }

/* Erika auf dunklem Grund: weißer Aufkleber-Rand */
.erika-rand { filter: drop-shadow(4px 0 0 #fff) drop-shadow(-4px 0 0 #fff) drop-shadow(0 4px 0 #fff) drop-shadow(0 -4px 0 #fff); }

/* Haus mit Schlüssel (DI.DAY-Frage „Wem gehört der Tresor?“) aus zwei Sprite-Ikonen */
.frage-ikon { position: relative; display: inline-flex; flex: none; vertical-align: middle; line-height: 1; }
.frage-ikon > .ikon { --ikon: 1.6em; }
.frage-ikon > .ikon.zusatz { position: absolute; right: -0.28em; bottom: -0.12em; --ikon: 0.95em; }

/* ========== 2. Stufen-Bühne ========== */
.l-stufe .text { position: relative; z-index: 3; max-width: 740px; }
.l-stufe .text h2 { margin: 26px 0 0; }
.l-stufe .buehne {
	position: absolute;
	right: 24px;
	top: 84px;
	width: 1400px;
	aspect-ratio: 16 / 10;
	z-index: 1;
}
.l-stufe .buehne > object { position: absolute; inset: 0; width: 100%; height: 100%; }
.l-stufe .buehne > object.haupt { transition: opacity 0.6s ease; }

/* ========== 3. Folien ========== */

/* --- Folie 1: Titel --- */
.a-titel > .inhalt { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); padding-bottom: calc(var(--band-hoehe) + 40px); }
.a-titel .logo-diday { height: 150px; }
.a-titel h1 { font-size: 100px; }
.a-titel .titel-seite { position: relative; align-self: stretch; }
.a-titel .titel-seite object { position: absolute; right: -30px; bottom: -10px; width: 220px; height: 435px; }

/* --- Folie 2: DI.DAY --- */
.a-diday .tagline { display: block; width: 300px; height: auto; margin: 0 0 30px; }
.a-diday h2 { font-size: 80px; margin: 0 0 24px; white-space: nowrap; }
/* Ausweichfassung ohne Biege-Illustration (?ohne-biege): DI.DAY-Logo + Schriftzug als Aufkleber */
.a-diday .aufkleber.marke { --dreh: -3deg; max-width: 600px; padding: 56px 60px 48px; display: flex; flex-direction: column; align-items: center; gap: 44px; }
.a-diday .aufkleber.marke .logo { width: 100%; height: auto; }
.a-diday .aufkleber.marke .tagline { width: 78%; margin: 0; }
html.ohne-biege .nur-mit-biege { display: none; }
.a-diday .heute { margin: 40px 0 0; font-size: 64px; line-height: 1.15; }
.a-diday .aufkleber { --dreh: -2deg; max-width: 640px; margin-left: auto; }
.a-diday .gastgeber { margin: 28px 0 0; font-size: 40px; color: var(--grau); }

/* --- Folie 3: Das ist Erika --- */
.a-erika .erika-zeile { display: grid; grid-template-columns: 640px minmax(0, 1fr); column-gap: 40px; align-items: center; }
.a-erika .figur { position: relative; height: 720px; }
.a-erika .figur object { position: absolute; left: 10px; top: -30px; width: 395px; height: 780px; }
.namensschild {
	position: absolute;
	left: 300px;
	top: 360px;
	width: 330px;
	transform: rotate(-6deg);
	border: var(--kontur) solid var(--tinte);
	border-radius: 14px;
	background: #fff;
	box-shadow: 10px 9px 0 var(--lila-mittel);
	text-align: center;
	overflow: visible;
}
.namensschild::before,
.namensschild::after {
	content: '';
	position: absolute;
	top: -26px;
	width: 92px;
	height: 40px;
	background: rgba(255, 216, 77, 0.78);
	border: 2px solid rgba(35, 18, 42, 0.25);
}
.namensschild::before { left: -22px; transform: rotate(-24deg); }
.namensschild::after { right: -22px; transform: rotate(20deg); }
.namensschild .ns-kopf {
	display: block;
	padding: 12px 10px 8px;
	border-radius: 8px 8px 0 0;
	font-size: 40px;
	font-weight: 800;
	line-height: 1.1;
	color: #fff;
	background: var(--rot);
}
.namensschild .ns-name {
	display: block;
	padding: 10px 12px 14px;
	font-family: var(--schrift-hand);
	font-size: 62px;
	font-weight: 700;
	line-height: 1;
	color: var(--kuli);
}
.konten { position: relative; list-style: none; margin: 0; padding: 0; height: 700px; }
.konten > li { position: absolute; margin: 0; }
.konten .sprechblase { font-size: 44px; }
.konten .sprechblase .ikon { --ikon: 1.5em; }
.konten .sprechblase.leer { color: var(--grau); background: var(--neutral-hell); padding: 0.1em 0.7em 0.3em; }
.reveal .konten.fragment { opacity: 1; visibility: inherit; }
.reveal .konten.fragment > li { opacity: 0; transform: scale(0.6); transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.3, 1.5, 0.55, 1); transition-delay: calc(var(--i) * 0.3s); }
.reveal .konten.fragment.visible > li { opacity: 1; transform: none; }

/* --- Folie 4: Niemand kann sich das merken --- */
.a-zahl10 .zitat-titel { font-size: 76px; max-width: 1650px; margin: 0 0 20px; }
.a-zahl10 .zeile { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); column-gap: 40px; align-items: center; }
.a-zahl10 .zahl { color: var(--orange-dunkel); font-size: 330px; }
.a-zahl10 .zahl-text { max-width: 640px; }
.a-zahl10 .leiterblock { position: relative; align-self: stretch; }
.a-zahl10 .leiterblock .stufenleiter { position: absolute; right: 0; bottom: 0; width: 880px; }
.a-zahl10 .leiterblock .erika-boden { position: absolute; left: -40px; bottom: 0; width: 150px; height: 296px; }

/* --- Folie 5: Stufe 1 --- */
.a-stufe1 .banderole {
	position: absolute;
	left: 470px;
	bottom: 70px;
	z-index: 3;
	margin: 0;
	padding: 14px 40px 16px;
	font-size: 46px;
	font-weight: 800;
	line-height: 1.15;
	color: var(--tinte);
	background: var(--orange-hell);
	border: var(--kontur) solid var(--tinte);
	border-radius: 6px 14px 8px 12px;
	box-shadow: 10px 8px 0 var(--orange);
	transform: rotate(-1.5deg);
}
.reveal .a-stufe1 .banderole.fragment { transform: rotate(-1.5deg) translateY(24px); }
.reveal .a-stufe1 .banderole.fragment.visible { transform: rotate(-1.5deg); }

/* --- Folie 6: Ein Leck --- */
.a-leck .leck-zeile { display: grid; grid-template-columns: 1040px minmax(0, 1fr); column-gap: 40px; align-items: center; }
.a-leck .leck-zeile object { width: 1040px; height: 416px; }
.a-leck .zahl.mittel { font-size: 176px; }
.a-leck .zahl-text { font-size: 48px; }
.a-leck .schlagzeile { margin-top: 0; }
/* Mini-Leiter etwas kleiner, damit der Stern den Balkenschatten nicht berührt */
.reveal section.a-leck > .stufenleiter.ecke { width: 270px; }
.a-leck .schlagzeile .balken-text {
	margin: 0;
	padding: 24px 40px 26px;
	font-size: 58px;
	font-weight: 800;
	line-height: 1.15;
	color: #fff;
	background: var(--lila);
	border: var(--kontur) solid var(--tinte);
	border-radius: 10px 18px 12px 16px;
	box-shadow: 12px 10px 0 var(--orange);
	transform: rotate(-0.6deg);
}
.a-leck .schlagzeile .unterzeile { margin: 22px 0 0 380px; font-size: 40px; color: var(--grau); }

/* --- Folie 7: Stufe 2 --- */
.a-stufe2 .tv-untertitel {
	position: absolute;
	right: 120px;
	bottom: 40px;
	z-index: 4;
	margin: 0;
	padding: 12px 34px 14px;
	font-size: 48px;
	font-weight: 700;
	line-height: 1.15;
	color: #fff;
	background: rgba(35, 18, 42, 0.88);
	border-radius: 6px;
}

/* --- Folie 8: Stufe 3 --- */
.a-stufe3 .buehne { width: 1330px; right: 20px; top: 120px; }
.a-stufe3 .text { max-width: 560px; }
.reveal .a-stufe3:has(.karton.visible) .buehne > object.haupt { opacity: 0.35; }
/* Karton etwas nach rechts: Abstand zur Zitatspalte */
.a-stufe3 .buehne > object.karton { left: 60px; }
.bsi-zitat {
	position: relative;
	margin: 44px 0 0;
	padding: 0;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.22;
}
.bsi-zitat object { display: block; width: 210px; height: 160px; margin: 0 0 6px -10px; }
.bsi-zitat cite { display: block; margin-top: 10px; font-size: 40px; font-weight: 400; font-style: normal; color: var(--grau); }

/* --- Folie 9: Stufe 4 --- */
.a-browser .spalten { column-gap: 110px; }
.a-browser .spalte + .spalte::before { left: -57px; }
.a-browser .browser { display: block; width: 740px; height: 518px; }
.a-browser .browsernamen { margin: 10px 0 0 30px; font-size: 40px; color: var(--grau); }
.a-browser .zahl.mittel { font-size: 170px; }
.a-browser .zahl-text { font-size: 50px; margin-top: 4px; }
.a-browser .quelle-inline { margin: 14px 0 0; font-size: 28px; line-height: 1.3; color: var(--grau); }
.a-browser .geraete { display: block; width: 480px; height: 229px; margin-top: 24px; }

/* --- Folie 10: Plötzlich Umzug --- */
.a-umzug .umzug-zeile { display: grid; grid-template-columns: minmax(0, 1fr) 270px; column-gap: 40px; align-items: end; }
.kalender { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; perspective: 1400px; }
.kalender > li {
	position: relative;
	margin: 0;
	padding: 46px 16px 18px;
	border: var(--kontur) solid var(--tinte);
	border-radius: 10px 14px 12px 16px;
	background: #fff;
	box-shadow: 10px 9px 0 var(--lila-mittel);
	text-align: center;
	transform-origin: top center;
}
.kalender > li::before {
	content: '';
	position: absolute;
	left: -5px;
	right: -5px;
	top: -5px;
	height: 40px;
	border: var(--kontur) solid var(--tinte);
	border-radius: 10px 14px 0 0;
	background: var(--lila);
}
.kalender > li::after {
	content: '';
	position: absolute;
	left: 22%;
	right: 22%;
	top: -22px;
	height: 34px;
	background: radial-gradient(circle at 8px 50%, var(--tinte) 7px, transparent 8px) left / 50% 100% repeat-x;
}
.kalender .monat { display: block; font-size: 58px; font-weight: 800; line-height: 1.05; color: var(--lila); }
.kalender .jahr { display: block; font-family: var(--schrift-pixel); font-size: 40px; color: var(--orange-dunkel); }
.kalender .ikon { --ikon: 120px; position: relative; display: inline-flex; margin: 8px 0 4px; }
.kalender .ikon::after {
	content: '';
	position: absolute;
	inset: 4%;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M18 20 C 40 42 60 62 84 84 M84 18 C 62 40 42 62 16 82' fill='none' stroke='%23e5533d' stroke-width='9' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.kalender .was { display: block; font-size: 44px; font-weight: 700; line-height: 1.15; }
.kalender .was .x { color: var(--warnung); font-weight: 800; }
.reveal .kalender > li.fragment { opacity: 0; transform: rotateX(-88deg); transition: opacity 0.2s ease, transform 0.6s cubic-bezier(0.3, 1.4, 0.5, 1); }
.reveal .kalender > li.fragment.visible { opacity: 1; transform: none; }
.a-umzug .erika-hoppla { width: 260px; height: 514px; display: block; margin-top: -120px; }
.a-umzug .umzug-unten { display: grid; grid-template-columns: minmax(0, 1fr) 580px; column-gap: 40px; align-items: center; margin-top: 30px; padding-left: 300px; }
.a-umzug .pointe { margin: 0; font-size: 62px; font-weight: 800; line-height: 1.12; color: var(--lila); }
.a-umzug .umzug-unten object { width: 580px; height: 209px; }

/* --- Folie 11: Stufe 5 --- */
.a-stufe5 .anbieter { margin: 30px 0 0; font-size: 56px; font-weight: 700; }
.a-stufe5 .preis-text { margin: 28px 0 0; font-family: var(--schrift-hand); font-size: 60px; font-weight: 700; line-height: 1.05; color: var(--orange-dunkel); }
.a-stufe5 .erika-klein { position: absolute; left: 776px; bottom: 204px; z-index: 2; width: 150px; height: 296px; }
.reveal .a-stufe5 .preis-flip.fragment { opacity: 0; transform: perspective(1600px) rotateY(-90deg); transform-origin: 66% 73%; transition: opacity 0.15s ease, transform 0.7s ease; }
.reveal .a-stufe5 .preis-flip.fragment.visible { opacity: 1; transform: none; }

/* --- Folie 12: LastPass --- */
.a-lastpass .spalten { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 100px; }
.a-lastpass .spalte + .spalte::before { left: -52px; }
/* Ausschnitt x 330–1600, y 60–920 der Skizze (Faktor 0,638) */
.a-lastpass .crop { position: relative; width: 810px; height: 549px; margin-top: 30px; clip-path: inset(0); }
.a-lastpass .crop object { position: absolute; left: -211px; top: -38px; width: 1021px; height: 638px; }
.a-lastpass .liste { font-size: 48px; }
.a-lastpass .tresore { display: block; width: 560px; height: 336px; margin: 26px 0 0; }
.a-lastpass .fazit { margin: 10px 0 0; font-size: 50px; font-weight: 800; line-height: 1.15; color: var(--lila); }

/* --- Folie 13: Die DI.DAY-Frage --- */
.a-frage .leiter-text { max-width: 900px; }
.fragen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; font-size: 56px; font-weight: 700; line-height: 1.15; }
.fragen > li { display: flex; align-items: center; gap: 28px; margin: 0; }
.fragen .ikon,
.fragen .frage-ikon > .ikon:not(.zusatz) { --ikon: 1.6em; }
/* Kasten im Seitenverhältnis der Leiter (1600:990), sonst entsteht seitliche Leerfläche im SVG
   und die Marken (Strahlen, Erika) sitzen neben ihren Stufen */
.a-frage .inhalt > .stufenleiter { flex: none; align-self: flex-end; width: 1256px; margin-top: 130px; }
.a-frage .leiter-marke.erika > object { width: 132px; height: 261px; }
/* Mitte des Sterns: 72 Leiter-Einheiten über dem Anker × Maßstab 1256/1600 */
.a-frage .leiter-marke.strahlen { z-index: 1; transform: translate(-50%, calc(-50% - 57px)); }
.a-frage .leiter-marke.strahlen > object { width: 330px; height: 330px; }

/* --- Folie 14: Stufe 6, Karten --- */
.a-karten .kopf { display: flex; align-items: center; gap: 30px; margin: 0 0 26px; }
.a-karten .kopf h2 { margin: 0; }
.a-karten .kopf .stufe-badge { flex: none; }
.a-karten .karten { gap: 40px; }
.a-karten .karte { padding: 14px 26px 20px; }
.a-karten .karte .karte-bild { height: 168px; margin-bottom: 0; }
.a-karten .karte h3 { margin: 4px 0 2px; font-size: 50px; line-height: 1.05; }
.a-karten .karte .apps { margin: 0 0 12px; font-size: 40px; line-height: 1.15; color: var(--grau); }
.antworten { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 40px; line-height: 1.15; }
.antworten > li { display: grid; grid-template-columns: 1.5em minmax(0, 1fr); column-gap: 0.4em; align-items: center; margin: 0; }
.antworten .ikon,
.antworten .frage-ikon > .ikon:not(.zusatz) { --ikon: 1.4em; }
.antworten .frage-ikon > .ikon.zusatz { --ikon: 0.85em; }
.a-karten .haken {
	margin: auto 0 0;
	padding: 10px 18px 12px;
	border: 4px solid var(--tinte);
	border-radius: 10px 14px 9px 13px;
	font-size: 40px;
	line-height: 1.15;
	background: var(--rot-hell);
}
.a-karten .haken b { font-weight: 800; }
.a-karten > .inhalt { padding-bottom: 104px; }
.reveal .a-karten > .stufenleiter.ecke.oben { width: 190px; top: 86px; }
/* Erika steht auf der Stufe (vor dem Stern), nicht auf dem Stern */
.a-karten > .stufenleiter.ecke .leiter-marke { transform: translate(-60%, calc(-100% + 15px)); }
.a-karten > .stufenleiter.ecke .leiter-marke > object { width: 32px; height: 63px; }
.a-karten .quelle { max-width: none; left: 200px; right: 150px; }

/* --- Folie 15: Welcher passt zu dir? --- */
.a-welcher .r-stack { flex: 1 1 auto; min-height: 0; }
.a-welcher .r-stack > div { margin: 0; width: 100%; height: 100%; }
.a-welcher .wegweiser { gap: 44px; }
.a-welcher .wegweiser .wenn { font-size: 46px; }
.a-welcher .ebene-a,
.a-welcher .ebene-b { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.a-welcher .weg-zeile { display: grid; grid-template-columns: minmax(0, 1fr) 440px; column-gap: 40px; align-items: center; flex: 1 1 auto; }
.a-welcher .wegweiser > li { grid-template-columns: minmax(0, 1fr) 110px minmax(0, 0.62fr); position: relative; }
.a-welcher .wegweiser .dann { font-size: 50px; }
.a-welcher .haken-gruen {
	position: absolute;
	z-index: 2;
	right: -64px;
	top: 50%;
	width: 84px;
	height: 84px;
	transform: translateY(-50%) rotate(-6deg);
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='44' fill='%23bfe3c6' stroke='%2323122a' stroke-width='6'/%3E%3Cpath d='M26 52 C 34 58 40 66 45 74 C 54 56 64 40 80 26' fill='none' stroke='%232f8f46' stroke-width='11' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.a-welcher .bitwarden { margin: 30px 0 0; font-size: 40px; line-height: 1.25; color: var(--grau); }
.a-welcher .bitwarden b { color: var(--tinte); }
.a-welcher .erika-geraete { width: 440px; height: 435px; display: block; }
.a-welcher .ebene-b h2 { font-size: 80px; margin: 0 0 10px; max-width: 1500px; }
.a-welcher .ebene-b .stufenleiter { flex: 1 1 auto; min-height: 0; width: 100%; }
.a-welcher .ebene-b .stufenleiter .leiter-svg { width: 100%; height: 100%; }

/* --- Folie 16: Das eine Passwort --- */
.a-passphrase .wuerfel-block { position: relative; }
.a-passphrase .wuerfel { display: block; width: 1728px; height: 230px; }
.passphrase {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	margin: 4px 0 0;
	font-family: var(--schrift-mono);
	font-size: 42px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	color: var(--lila);
}
.reveal .passphrase.fragment { opacity: 1; visibility: inherit; }
.reveal .passphrase.fragment > span { opacity: 0; transform: translateY(-30px); transition: opacity 0.35s ease, transform 0.35s ease; transition-delay: calc(var(--i) * 0.25s); }
.reveal .passphrase.fragment.visible > span { opacity: 1; transform: none; }
.stempel.orange { color: var(--orange-dunkel); }
.a-passphrase .stempel { display: block; width: fit-content; margin: 40px auto 0; --dreh: -2deg; font-size: 48px; max-width: none; white-space: nowrap; }
/* Marker-Stempel statt Pixelschrift: Silkscreen macht das W in VERWENDEN zum Klecks */
.a-passphrase .stempel { font-family: var(--schrift); font-weight: 800; letter-spacing: 0.02em; }
.a-passphrase .notfall { display: flex; align-items: center; gap: 36px; margin-top: 20px; padding-left: 360px; }
.a-passphrase .notfall .schrank { width: 400px; height: 300px; }
.a-passphrase .notfall .umschlag { width: 360px; height: 270px; }
.a-passphrase .notfall p { margin: 0; font-size: 56px; font-weight: 800; color: var(--lila); }

/* --- Folie 17: Entwarnung --- */
.a-entwarnung .checkliste { font-size: 60px; gap: 64px; font-weight: 800; }
.a-entwarnung .checkliste > li { padding-left: 1.6em; }
.a-entwarnung .checkliste > li::before { width: 1.1em; height: 1.1em; }
.a-entwarnung .checkliste > li::after { width: 1.3em; height: 1.3em; top: -0.32em; }
.a-entwarnung .notiz { display: block; margin-top: 12px; font-family: var(--schrift-hand); font-size: 64px; font-weight: 700; line-height: 1.1; color: var(--kuli); }
.a-entwarnung .so-nicht { margin-left: 0.4em; font-family: var(--schrift-hand); font-size: 56px; font-weight: 700; color: var(--warnung); white-space: nowrap; }
.a-entwarnung .notiz2 { display: inline-block; margin-top: 14px; font-family: var(--schrift-mono); font-size: 48px; font-weight: 700; color: var(--grau); }
.reveal .a-entwarnung li .spaet::after { transform: rotate(-2.5deg) scaleX(0); transition: transform 0.5s ease 0.7s; }
.reveal .a-entwarnung li.visible .spaet::after { transform: rotate(-2.5deg) scaleX(1); }
.a-entwarnung .inhalt > div { align-self: center; margin-top: -40px; }
.a-entwarnung .tasse { width: 560px; height: 560px; justify-self: center; }

/* --- Folie 18: Bonus --- */
.a-bonus .spalten { column-gap: 110px; }
.a-bonus .spalte + .spalte::before { left: -57px; }
.a-bonus h3 { font-size: 60px; margin-bottom: 12px; }
.a-bonus .klein { margin: 0 0 30px; }
.a-bonus .spalte:first-child { display: flex; flex-direction: column; }
.a-bonus .unten { display: flex; align-items: flex-end; gap: 24px; margin-top: auto; padding-bottom: 20px; }
.a-bonus .erika-daumen { width: 160px; height: 315px; flex: none; }
.a-bonus .treppchen > li { width: 196px; }
.a-bonus .treppchen > li:nth-child(1) { height: 156px; }
.a-bonus .treppchen > li:nth-child(2) { height: 247px; }
.a-bonus .treppchen > li:nth-child(3) { height: 338px; }
.a-bonus .passkey { display: block; width: 100%; aspect-ratio: 16 / 10; height: auto; }

/* --- Folie 19: Antwort --- */
.a-antwort > .inhalt { grid-template-columns: minmax(0, 1fr) 720px; }
.a-antwort h2 { font-size: 100px; }
.a-antwort .antwort { font-size: 178px; margin: 20px 0 30px; }
.a-antwort .zeile { font-size: 60px; font-weight: 800; line-height: 1.15; margin: 0; }
.a-antwort .bsi { margin: 56px 0 0; font-size: 40px; color: var(--hell-leise); }
.a-antwort .stufenleiter { width: 720px; align-self: end; margin-bottom: 20px; }
.a-antwort .leiter-marke > object { width: 160px; height: 316px; }
.a-antwort .leiter-marke { transform: translate(-90%, calc(-100% + 86px)); }

/* --- Folie 20: Schluss --- */
.a-schluss > .inhalt {
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-rows: auto auto minmax(0, 1fr);
	row-gap: 20px;
	padding-top: calc(var(--band-hoehe) + 44px);
	padding-bottom: calc(var(--band-hoehe) + 34px);
}
.a-schluss .schluss-text { grid-column: 1; grid-row: 1 / 3; align-self: start; }
.a-schluss .schluss-text h2 { font-size: 86px; margin-bottom: 30px; white-space: nowrap; }
.a-schluss .schluss-text .liste { font-size: 46px; gap: 18px; }
.a-schluss .erika-karte { grid-column: 1; grid-row: 3; align-self: end; justify-self: start; width: 380px; padding: 12px 16px 6px; --dreh: -2deg; }
.a-schluss .erika-karte object { display: block; width: 100%; height: auto; aspect-ratio: 800 / 790; }
.a-schluss .logos { grid-column: 2; grid-row: 1; justify-self: end; gap: 32px; }
.a-schluss .qr-reihe { grid-column: 2; grid-row: 3; align-self: end; }
.a-schluss .qr figcaption { max-width: 340px; font-size: 30px; }
.a-schluss h2 .pixel { font-family: var(--schrift); font-weight: 800; }

/* --- Folie 21: Danke & Bildnachweise --- */
.a-nachweise .nachweise { font-size: 38px; }
.a-nachweise .nachweise b { font-weight: 800; }

/* Seitenzahl auf Titel und Schluss wirklich ausblenden: reveal setzt display per Inline-Stil */
.reveal-viewport.ohne-nummer .reveal .slide-number { display: none !important; }

/* PDF (?print-pdf, alle Fragmente sichtbar): Folie 15 zeigt die Wegweiser, nicht die Leiter-Ebene */
html.reveal-print .a-welcher .ebene-b { display: none; }