/*
 * Variante B „Mitmachen“ – nur für variante-b.html, eingebunden NACH css/theme.css.
 * Ergänzt das gemeinsame Gestaltungssystem um die Folien-Layouts dieser Variante
 * (Präfix .b-…). Grafiken: assets/illustrationen/variante-b/.
 *
 * Inhalt
 *   1. Stufenleiter: Stufe 6 grün mit Tresor, „Und du?“, Übergangs- und Rahmen-Zustand
 *   2. Gemeinsame Helfer (Kontur-Zahl, Marker-Strich, orange Stempel, Mono)
 *   3. Folien in Vortragsreihenfolge
 */

/* ========== 1. Stufenleiter ========== */
.stufenleiter { container-type: inline-size; }

/* Stufe 6 bekommt statt des Sterns einen kleinen Tresor (Marke aus dem Sprite) */
.leiter-stufe[data-nr='6'] .sl-ikon { display: none; }
.leiter-marke.b-tresor { line-height: 0; }
.leiter-marke.b-tresor .ikon { --ikon: 9.4cqw; }

/* Stufe 6 ist das Ziel: grün, solange sie nicht die aktuelle Stufe ist */
.leiter-stufe[data-nr='6']:is(.kommend, .farbig) .sl-front { fill: var(--gruen-hell); }
.leiter-stufe[data-nr='6']:is(.kommend, .farbig) .sl-top { fill: #e4f3e7; }
.leiter-stufe[data-nr='6']:is(.kommend, .farbig) :is(.sl-nr, .sl-label) { fill: var(--sicher); }

/* Übergang (Folie 10): Stufe 3 erledigt, noch keine neue Stufe orange */
.stufenleiter.b-ohne-aktuell .leiter-stufe.aktuell .sl-front { fill: var(--neutral-hell); }
.stufenleiter.b-ohne-aktuell .leiter-stufe.aktuell .sl-top { fill: var(--neutral); }
.stufenleiter.b-ohne-aktuell .leiter-stufe.aktuell :is(.sl-nr, .sl-label) { fill: var(--grau); }
.stufenleiter.b-ohne-aktuell .leiter-stufe.aktuell .sl-ikon { --ik-a: #d9d4c7; --ik-b: #ece7da; --ik-c: #d9d4c7; opacity: 0.75; }

/* Folie 14: Stufe 5 und 6 gemeinsam umrandet */
.b-leiter-rahmen {
	position: absolute;
	left: 63%;
	top: 2%;
	width: 39%;
	height: 101%;
	border: 5px dashed var(--orange-dunkel);
	border-radius: 18px 24px 16px 22px;
	pointer-events: none;
}

/* „Und du?“ an der Mini-Leiter: links neben der Leiter, Zipfel zeigt auf sie */
.b-und-du {
	position: absolute;
	z-index: 5;
	right: calc(100% + 24px);
	top: 6px;
	padding: 10px 16px 8px;
	border: 4px solid var(--tinte);
	font-family: var(--schrift-pixel);
	font-size: 40px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	color: var(--tinte);
	background: var(--orange);
	box-shadow: 6px 6px 0 var(--tinte);
}
.b-und-du::after {
	content: '';
	position: absolute;
	right: -16px;
	top: 50%;
	width: 22px;
	height: 22px;
	border-top: 4px solid var(--tinte);
	border-right: 4px solid var(--tinte);
	background: var(--orange);
	transform: translateY(-50%) rotate(45deg);
}
.b-und-du.fragment { transform: scale(0.6); }
.b-und-du.fragment.visible { transform: none; transition: opacity 0.2s ease, transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1); }

/* ========== 2. Helfer ========== */
/* Seitenzahl auf Titel und data-ohne-nummer wirklich ausblenden: reveal setzt am
   Element display:block inline, das schlägt die Regel aus theme.css */
.reveal-viewport.ohne-nummer .slide-number { display: none !important; }

/* Biege-Illustration nur mit Freigabe: variante-b.html?ohne-biege zeigt stattdessen eigene Skizzen
   (Titel, Folie 2, Standbild) und blendet den Bildnachweis aus; Schalter per Skript im HTML */
html:not(.ohne-biege) .nur-ohne-biege,
html.ohne-biege .nur-mit-biege { display: none !important; }
.b-ersatz-titel { aspect-ratio: 670 / 600; }
.b-ersatz-kalender { aspect-ratio: 1; }
.b-ersatz-umzug { aspect-ratio: 700 / 620; }

/* Etiketten direkt in .inhalt (Flex-Spalte) nicht auf volle Breite ziehen */
.reveal .inhalt > :is(.stufe-badge, .etikett) { align-self: flex-start; }
/* große Zahl als Absatz: ohne den Absatz-Abstand von .reveal p */
.reveal p.zahl { margin: 0; }
/* Marker-Strich in Listen nur so breit wie der Text */
.liste > li > .b-strich { justify-self: start; }

/* große Zahl in Orange mit Tinten-Kontur (lesbar auf Papier) */
.zahl.b-kontur {
	color: var(--orange);
	-webkit-text-stroke: 6px var(--tinte);
	paint-order: stroke fill;
}
.mono { font-family: var(--schrift-mono); font-weight: 700; }

/* dicker oranger Marker-Strich zum Durchstreichen (Fragment: fragment custom).
   Drehung mit Ursprung links: Bei langen Zeilen hebt schon 1° das rechte Ende deutlich an,
   darum dort fast waagerecht (--strich-dreh). */
.b-strich { --strich-dreh: -1deg; position: relative; display: inline-block; }
.b-kette .b-strich,
.b-antwort .b-strich { --strich-dreh: -0.3deg; }
.b-strich::after {
	content: '';
	position: absolute;
	left: -3%;
	right: -3%;
	top: 40%;
	height: 0.44em;
	background: url('../assets/illustrationen/variante-b/marker-strich.svg') center / 100% 100% no-repeat;
	transform: rotate(var(--strich-dreh)) scaleX(0);
	transform-origin: left center;
	transition: transform 0.55s ease-out;
	pointer-events: none;
}
.b-strich.visible::after { transform: rotate(var(--strich-dreh)) scaleX(1); }
.reveal .b-strich.fragment.visible { color: var(--grau); transition: color 0.4s ease 0.35s; }
.reveal .ton-lila .b-strich.fragment.visible { color: var(--hell-leise); }

/* oranger Stempel */
.stempel.b-stempel-orange { color: var(--orange-dunkel); }

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

/* --- Folie 1: Titel --- */
.b-titel h1 { font-size: 112px; }
.b-titel-frage { display: block; margin-top: 22px; font-size: 80px; line-height: 1.08; }
.b-titel .b-schnick {
	display: block;
	margin-top: 12px;
	font-family: var(--schrift-pixel);
	font-size: 84px;
	font-weight: 700;
	letter-spacing: 0;
	white-space: nowrap;
	color: var(--orange);
}
.b-wackel { display: inline-block; transform-origin: 50% 88%; }
.reveal .slides section.present .b-wackel { animation: b-wackeln 1.1s ease-in-out 0.9s 1 both; }
@keyframes b-wackeln {
	0%, 100% { transform: rotate(0); }
	18% { transform: rotate(-16deg); }
	42% { transform: rotate(12deg); }
	66% { transform: rotate(-6deg); }
	84% { transform: rotate(3deg); }
}
.b-titel .ort { color: var(--hell-leise); }
.b-titel .titel-bild { max-width: 500px; }

/* --- Folie 2: Heute ist DI.DAY --- */
.b-ohne-trenner .spalte + .spalte::before { display: none; }
.b-diday .spalten { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); column-gap: 80px; }
.b-diday h2 { margin: 0 0 30px; font-size: 104px; }
.reveal .b-motto { margin: 0 0 44px; font-weight: 700; }
.b-tagline {
	display: block;
	box-sizing: border-box;
	width: 600px;
	height: auto;
	margin: 0 0 36px;
	padding: 24px 32px;
	border-radius: 16px;
	background: var(--lila);
}
/* #DIDit in Atkinson statt Pixelschrift: Silkscreen kennt keine Kleinbuchstaben („DID it“) */
.reveal .b-didit { margin: 0; font-family: var(--schrift); font-size: 92px; font-weight: 800; line-height: 1; color: var(--orange-dunkel); }
.b-biege { max-width: 700px; margin-left: auto; }

/* --- Folie 3: Wie viele Konten? --- */
.b-konten-zahl {
	position: absolute;
	left: 50%;
	top: 52%;
	transform: translate(-50%, -50%);
	text-align: center;
}
/* erscheint erst nach den Kärtchen (eigenes Fragment, weil reveals fade-up das Zentrier-transform überschreibt) */
.reveal .b-konten-zahl.fragment { opacity: 0; transform: translate(-50%, -42%); transition: opacity 0.5s ease, transform 0.5s ease; }
.reveal .b-konten-zahl.fragment.visible { opacity: 1; transform: translate(-50%, -50%); }
.reveal .b-konten-zahl .zahl { font-size: 320px; }
.reveal .b-konten-zahl .zahl-text { margin-top: 10px; }
.b-kaertchen { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; pointer-events: none; }
.b-kaertchen li {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0;
	padding: 12px 30px 12px 18px;
	border: var(--kontur) solid var(--tinte);
	border-radius: var(--skizzen-radius);
	font-family: var(--schrift-hand);
	font-size: 60px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	color: var(--tinte);
	background: #fff;
	box-shadow: 11px 9px 0 var(--fb, var(--lila-mittel));
	transform: rotate(var(--dreh));
}
.b-kaertchen .ikon { --ikon: 76px; }
.b-kaertchen.fragment li {
	opacity: 0;
	transform: translateY(30px) rotate(var(--dreh)) scale(0.7);
	transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.3, 1.5, 0.5, 1);
	transition-delay: calc(var(--i) * 0.3s);
}
.b-kaertchen.fragment.visible li { opacity: 1; transform: rotate(var(--dreh)); }
.b-bitkom {
	left: 50%;
	bottom: 96px;
	font-size: 62px;
	transform: translateX(-50%) rotate(-1.5deg);
	transform-origin: center;
}
.reveal .b-bitkom.fragment { opacity: 0; transition: opacity 0.6s ease 1.4s; }
.reveal .b-bitkom.fragment.visible { opacity: 1; }

/* --- Folie 4: Quiz als Highscore-Tafel --- */
.b-quiz > .inhalt { grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.55fr); }
.b-tafel {
	position: relative;
	justify-self: start;
	align-self: start;
	height: 680px;
	aspect-ratio: 1100 / 800;
	background: url('../assets/illustrationen/variante-b/highscore-rahmen.svg') center / 100% 100% no-repeat;
}
.b-tafel .rangliste {
	position: absolute;
	left: 10.5%;
	right: 9%;
	top: 12.5%;
	bottom: 24.5%;
	justify-content: center;
	gap: 6px;
	font-size: 46px;
	color: var(--tinte);
}
.b-tafel .rangliste > li { grid-template-columns: 1.7em minmax(0, 1fr); }
.b-tafel .rangliste li > span:not(.platz),
.b-tafel .kaestchen { font-family: var(--schrift-mono); font-weight: 700; }
.b-tafel .rangliste > li.gesucht { margin: 6px 0; padding: 10px 0; }
.b-tafel .kaestchen { gap: 5px; font-size: 41px; }
.b-tafel .kaestchen .buchstabe {
	overflow: hidden;
	width: 1em;
	height: 1.25em;
	border: 4px solid var(--tinte);
	border-radius: 6px 8px 5px 7px;
	background: #fff;
}
.b-tafel .kaestchen .buchstabe > span {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	color: var(--orange);
	background: var(--lila);
}
.b-quiz .b-quiz-seite { display: grid; align-self: center; justify-self: center; width: 100%; }
.b-quiz-seite .ikon { --ikon: 300px; justify-content: center; }
.b-tasse-gross { width: 100%; max-width: 480px; }

/* --- Folie 5: große Stufenleiter --- */
/* Leiter so groß wie möglich, aber ohne seitliche Leerfläche im SVG, damit die Marken stimmen */
.l-stufenleiter.b-leiter-gross .inhalt > .stufenleiter { flex: none; align-self: center; width: 1240px; height: 767px; }
.b-leiter-gross .sl-label { font-size: 42px; }
.stufenleiter .leiter-marke.b-und-du-gross { font-size: 56px; transform: translate(-20%, calc(-100% - 330px)); }

/* --- Folie 6: Stufe 1 --- */
.l-buehne.b-stufe1 .buehne-bild { left: 454px; top: 140px; width: 1125px; height: 805px; }
.b-stufe1 .titelkasten { max-width: 700px; }
.reveal .b-stempel-33 {
	position: absolute;
	left: 60px;
	top: 455px;
	margin: 0;
	font-size: 42px;
	line-height: 1.05;
}
.b-stempel-zahl { display: block; font-family: var(--schrift); font-size: 112px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; }

/* --- Folie 7: Ein Leck – alle Türen offen --- */
.b-leck-raster {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	grid-template-rows: minmax(0, 1fr);
	column-gap: 48px;
	align-items: center;
}
.b-leck-bild { display: block; width: 100%; aspect-ratio: 1180 / 880; max-height: 100%; }
.b-zahlen-kette { display: flex; flex-direction: column; align-items: flex-start; }
.reveal .b-zahl-klein { font-size: 160px; color: var(--lila); }
.reveal .b-zahl-gross { font-size: 210px; }
.b-zahlen-kette .zahl-text { margin: 6px 0 0; }
.b-pfeil-runter { display: block; height: 150px; width: auto; margin: 6px 0 4px 70px; }

/* --- Folie 8: Stufe 2, Ebenen übereinander --- */
.l-buehne.b-stufe2 .buehne-bild { left: 449px; top: 105px; width: 1123px; height: 940px; }
.b-ebenen > object { width: 100%; height: 100%; }

/* --- Folie 9: Stufe 3 --- */
.l-buehne .b-buch-bild { left: 400px; top: 110px; width: 1504px; height: 940px; }
.b-stufe3 .titelkasten { max-width: 700px; }
.b-buchtitel { left: 110px; top: 420px; font-size: 64px; transform: rotate(-3deg); }
.reveal .b-ort-satz {
	position: absolute;
	left: var(--rand);
	top: 720px;
	width: 600px;
	margin: 0;
	font-size: 48px;
	font-weight: 800;
	line-height: 1.2;
}

/* --- Folie 10: Passwortbuch, nur digital --- */
.b-digital .spalten { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); column-gap: 112px; }
.b-schublade { display: block; width: 100%; aspect-ratio: 1000 / 700; }
.reveal .b-bsi-zitat { margin: 0 0 32px; font-size: 44px; font-style: italic; line-height: 1.25; }
.b-bsi-zitat cite { font-style: normal; font-weight: 700; color: var(--grau); }
.b-digital .checkliste { margin: 0 0 36px; }
.reveal .b-master {
	display: flex;
	align-items: center;
	gap: 18px;
	margin: 0;
	padding: 14px 26px;
	border: var(--kontur) solid var(--tinte);
	border-radius: var(--skizzen-radius);
	font-size: 46px;
	font-weight: 700;
	line-height: 1.2;
	background: var(--orange-hell);
	box-shadow: 9px 8px 0 var(--orange);
}
.b-master .ikon { --ikon: 84px; flex: none; }

/* --- Folie 11: Stufe 4, Browser-Kacheln mit Gartenzaun --- */
.b-kacheln {
	list-style: none;
	margin: 26px 0 0;
	padding: 0;
	display: flex;
	justify-content: center;
	gap: 44px;
}
.b-kacheln li {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	width: 290px;
	margin: 0;
	padding: 16px 10px 18px;
	border: var(--kontur) solid var(--tinte);
	border-radius: var(--skizzen-radius);
	font-size: 52px;
	font-weight: 800;
	line-height: 1.1;
	background: #fff;
	box-shadow: 10px 9px 0 var(--lila-mittel);
	transform: rotate(var(--dreh));
	transition: transform 0.8s cubic-bezier(0.3, 1.3, 0.5, 1);
}
.b-kacheln .ikon { --ikon: 110px; }
.b-kacheln .b-zaun {
	position: absolute;
	left: -46px;
	bottom: -84px;
	width: calc(100% + 92px);
	height: auto;
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.4s ease 0.5s, transform 0.4s ease 0.5s;
}
.b-kacheln.visible li { transform: translateX(var(--weg)) rotate(var(--dreh)); }
.b-kacheln.visible .b-zaun { opacity: 1; transform: none; }
.b-84 { display: flex; align-items: center; justify-content: center; gap: 48px; margin-top: 80px; }
.b-browser .quelle { max-width: 76%; }
.b-84 .zahl-text { max-width: 620px; margin: 0; }

/* --- Folie 12: Zeitleiste mit verblassendem Schlüssel --- */
.b-zeitleiste .zeitleiste { align-content: start; padding-top: 160px; }
.b-zeitleiste .zeitleiste::before { top: calc(160px + 84px); }
.b-schluessel { display: block; width: 330px; height: auto; }
.b-station {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	min-width: 400px;
	padding: 24px 30px 22px;
	border: var(--kontur) solid var(--tinte);
	border-radius: var(--skizzen-radius);
	background: #fff;
	box-shadow: 10px 9px 0 var(--orange-hell);
}
.b-station .wann { font-size: 44px; }
.b-station .was { font-size: 48px; }

/* --- Folie 13: Stufe 5, Plus | Tresor | Minus --- */
.reveal .b-namen { margin: -22px 0 12px; font-size: 48px; font-weight: 700; color: var(--grau); }
.b-abo-raster {
	display: grid;
	/* Plus- und Minus-Spalte so breit wie ihr längster Punkt (einzeilig), damit beide Listen
	   gleich hoch sind und auf einer Höhe stehen; der Tresor bekommt den Rest */
	grid-template-columns: max-content minmax(0, 1fr) max-content;
	grid-template-rows: minmax(0, 1fr);
	column-gap: 48px;
	align-items: center;
}
.b-abo-bild { height: 100%; }
.b-abo-bild > object { width: 100%; height: 100%; }
.reveal .b-pm-zeichen {
	display: grid;
	place-items: center;
	width: 88px;
	height: 88px;
	margin: 0 0 26px;
	border: var(--kontur) solid var(--tinte);
	border-radius: 50%;
	font-family: var(--schrift-pixel);
	font-size: 64px;
	font-weight: 700;
	line-height: 1;
	color: #fff;
}
.reveal .b-pm.plus .b-pm-zeichen { background: var(--sicher); }
.reveal .b-pm.minus .b-pm-zeichen { background: var(--warnung); }
.b-pm .liste.eng { gap: 24px; font-size: 42px; }
.b-pm .liste.eng > li { white-space: nowrap; }

/* --- Folie 14: Eine Lehre für jeden Cloud-Tresor --- */
.b-lehre-raster {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	grid-template-rows: minmax(0, 1fr);
	column-gap: 56px;
	align-items: center;
}
.b-lehre-text { gap: 36px; font-size: 46px; }
.b-lehre-bild { width: 100%; aspect-ratio: 1.6; }
.b-lehre-bild > object { width: 100%; height: 100%; }

/* --- Folien 15–17: Stufe 6, Tool-Karten --- */
.reveal .b-karten { margin-bottom: 40px; gap: 40px; grid-template-columns: minmax(0, 2.1fr) minmax(0, 0.8fr) minmax(0, 0.8fr); }
.b-karten.aktiv-2 { grid-template-columns: minmax(0, 0.8fr) minmax(0, 2.1fr) minmax(0, 0.8fr); }
.b-karten.aktiv-3 { grid-template-columns: minmax(0, 0.8fr) minmax(0, 0.8fr) minmax(0, 2.1fr); }
.karte.b-klein { justify-content: center; text-align: center; opacity: 0.5; filter: saturate(0.3); }
.karte.b-klein .karte-bild { height: 190px; }
.karte.b-klein h3 { margin: 10px 0 0; font-size: 44px; color: var(--grau); }
.karte.b-aktiv { padding: 20px 34px 26px; box-shadow: 14px 12px 0 var(--orange); }
.karte.b-aktiv .karte-bild { height: 280px; }
.karte.b-aktiv h3 { margin: 4px 0 4px; font-size: 60px; }
.karte.b-aktiv .weg { margin: 0 0 16px; font-size: 58px; }
.b-geraete { list-style: none; margin: 0; padding: 0; font-size: 42px; line-height: 1.25; }
.b-geraete li { position: relative; margin: 0 0 8px; padding-left: 1.1em; }
.b-geraete li::before {
	content: '';
	position: absolute;
	left: 0.15em;
	top: 0.42em;
	width: 0.4em;
	height: 0.4em;
	background: var(--orange);
	box-shadow: 0.1em 0.1em 0 var(--lila);
}
.b-zwei-bilder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
/* zwei Bilder etwas flacher: Luft für die vier Textzeilen, Kartenhöhe bleibt wie auf Folie 15/16 */
.karte.b-aktiv .b-zwei-bilder .karte-bild { height: 220px; }
.reveal .b-aktivieren.fragment { transition: opacity 0.5s ease, filter 0.5s ease, transform 0.5s ease; }
.reveal .b-aktivieren.fragment:not(.visible) { opacity: 0.5; filter: saturate(0.3); transform: scale(0.96); }

/* --- Folie 18: Welcher passt zu dir? --- */
.b-wahl .inhalt > h2 { margin-bottom: 18px; }
.b-analogie { display: block; width: 1100px; max-width: 100%; aspect-ratio: 1500 / 400; margin: 0 0 22px; }
.b-wahl .wegweiser { flex: none; justify-content: flex-start; gap: 22px; }
.b-wahl .wegweiser .wenn { padding: 12px 28px; font-size: 44px; }
.reveal .b-bitwarden { margin: 22px 0 0; font-size: 40px; color: var(--grau); }

/* --- Folie 19: Passphrase auf sechs Würfeln --- */
.b-wuerfelreihe { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-top: 4px; }
.b-wuerfelreihe figure { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 0; }
.b-wuerfelreihe img { display: block; width: 170px; height: 170px; }
.b-wuerfelreihe figcaption { font-family: var(--schrift-hand); font-size: 68px; font-weight: 700; line-height: 1; color: var(--tinte); }
.b-wuerfelreihe.fragment img {
	opacity: 0;
	transform: translateX(-200px) rotate(-260deg);
	transition: transform 0.75s cubic-bezier(0.25, 1.1, 0.5, 1), opacity 0.2s ease;
	transition-delay: calc(var(--i) * 0.15s);
}
.b-wuerfelreihe.fragment figcaption {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.3s ease, transform 0.3s ease;
	transition-delay: calc(0.6s + var(--i) * 0.15s);
}
.b-wuerfelreihe.fragment.visible :is(img, figcaption) { opacity: 1; transform: none; }
.reveal .b-beispiel {
	position: absolute;
	left: 0;
	right: 0;
	top: 204px;
	width: fit-content;
	margin: 0 auto;
	padding: 12px 36px;
	font-size: 38px;
	line-height: 1.15;
}
.reveal .b-beispiel.fragment.stempeln.visible { transition-delay: 1.6s; }
.reveal .b-keiner {
	left: 0;
	right: 0;
	top: 500px;
	width: fit-content;
	margin: 0 auto;
	font-size: 66px;
	color: var(--sicher);
}
.b-tasse-liste { position: absolute; left: var(--rand); top: 610px; display: flex; align-items: center; gap: 18px; }
.b-tasse-klein { width: 270px; height: 270px; }
.b-tasse-liste .handnotiz { position: static; font-size: 60px; color: var(--warnung); transform: rotate(-4deg); }
.b-umschlag { position: absolute; left: 760px; top: 640px; width: 420px; height: 315px; }
.b-tresor-klein { position: absolute; right: 80px; top: 560px; width: 520px; height: 450px; }
.b-tresor-klein > object { width: 100%; height: 100%; }
.b-tresor-klein.visible .b-glanz-puls { animation: b-puls 0.9s ease-in-out 0.4s 4 alternate; }
@keyframes b-puls { from { opacity: 1; } to { opacity: 0.25; } }

/* --- Folie 20: Was du nicht mehr musst --- */
.reveal .b-streichliste { gap: 64px; margin-top: 110px; font-size: 66px; }
.b-kette:not(.visible)::before { opacity: 0; }
.b-kette :is(.b-k1, .b-k2, .b-k3) { opacity: 0; transition: opacity 0.4s ease; }
.b-kette.visible .b-k1 { opacity: 1; }
.b-kette.visible .b-k2 { opacity: 1; transition-delay: 0.9s; }
.b-kette.visible .b-k3 { opacity: 1; transition-delay: 1.8s; }
.balken.b-balken {
	height: 132px;
	margin-top: 140px;
	padding: 0 52px;
	border: 0;
	font-family: var(--schrift);
	font-size: 62px;
	background: url('../assets/illustrationen/variante-b/laengen-balken.svg') center / 100% 100% no-repeat;
}

.reveal .b-balken.fragment.wachsen { opacity: 0; }
.reveal .b-balken.fragment.wachsen.visible { opacity: 1; transition: opacity 0.1s ease, transform 1.1s steps(14, end); }

/* --- Folie 21: Bonus --- */
.b-bonus .spalten { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
.reveal .b-bonus-text { margin: 0 0 30px; font-size: 46px; line-height: 1.3; }
.b-2fa-bild { display: flex; align-items: flex-end; gap: 28px; }
.b-schloesser { width: 360px; height: 270px; flex: none; }
.b-2fa-bild .treppchen > li { width: 128px; }
.b-tuer-bild { width: 100%; aspect-ratio: 1200 / 680; }
.b-tuer-bild > object { width: 100%; height: 100%; }
.b-wackeln { transform-origin: 72% 67%; }
.b-wackeln.visible { animation: b-dreht-nicht 0.45s ease-in-out 0.7s 3; }
@keyframes b-dreht-nicht {
	0%, 100% { transform: rotate(0); }
	30% { transform: rotate(-4deg); }
	70% { transform: rotate(3deg); }
}

/* --- Folie 22: Schutz oder Schnickschnack? --- */
.b-antwort h2 { font-size: 112px; }
.b-antwort .b-schnick { font-family: var(--schrift-pixel); font-size: 96px; font-weight: 700; color: var(--orange); }
.b-antwort .antwort { font-size: 250px; color: var(--orange); }
.reveal .b-gehoert { margin: 28px 0 0; font-size: 64px; font-weight: 700; }

/* --- Folie 23: Dein erster Schritt --- */
.b-schritt > .inhalt {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
	grid-template-rows: auto auto auto minmax(0, 1fr);
	column-gap: 56px;
}
.b-schritt .inhalt > h2 { grid-column: 1; grid-row: 1; margin-bottom: 36px; }
.b-leiter-plus { position: relative; grid-column: 2; grid-row: 1 / span 3; align-self: start; margin-top: 10px; }
.b-leiter-plus .stufenleiter { width: 100%; }
.b-plus1 { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 1600 / 990; pointer-events: none; }
.b-mail { grid-column: 1; grid-row: 2; display: flex; align-items: center; gap: 36px; }
.b-mail-bild { flex: none; width: 290px; height: 213px; }
.b-mail .checkliste { gap: 24px; }
.reveal .b-hoeher { grid-column: 1; grid-row: 3; justify-self: start; margin: 64px 0 0; }
.b-schluss {
	grid-column: 1 / -1;
	grid-row: 4;
	align-self: end;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
}
.reveal .b-wechsel { margin: 0; font-size: 66px; font-weight: 800; color: var(--lila); }
.b-tasse-didit { display: flex; align-items: center; gap: 22px; }
.b-tasse-schluss { width: 220px; height: 220px; }
.b-tasse-didit p { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.b-didit-klein { font-family: var(--schrift); font-size: 80px; font-weight: 800; line-height: 1; }
.b-danke { font-size: 64px; font-weight: 800; line-height: 1; }

/* --- Folie 24: Standbild --- */
.b-standbild > .inhalt { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); grid-template-rows: minmax(0, 1fr); }
.b-standbild-links { grid-column: 1; grid-row: 1; align-self: center; display: flex; flex-direction: column; align-items: flex-start; gap: 56px; }
.b-standbild-biege { width: 100%; max-width: 560px; }
.b-standbild-text { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; justify-content: center; gap: 26px; }
.b-standbild-text h2 { margin: 0; font-size: 88px; }
.b-standbild-text .gross { margin: 0; font-weight: 700; }
.b-standbild .qr { max-width: 440px; }
.b-standbild .qr figcaption { font-size: 30px; }
/* QR-Codes in B: Skizzen-Papier hinter dem Code, Klebestreifen als Ebene darüber
   (liegen nur auf dem Papierrand, ragen um 10 % über das Bild hinaus) */
.b-qr-rahmen { --qr: 340px; position: relative; }
.b-qr-rahmen.klein { --qr: 210px; }
.qr.b-qr-rahmen img {
	width: var(--qr);
	height: var(--qr);
	padding: calc(var(--qr) * .077);
	border-radius: 0;
	background: url('../assets/illustrationen/variante-b/qr-rahmen.svg') center / 100% 100% no-repeat;
	box-shadow: none;
}
.b-qr-rahmen::before {
	content: '';
	position: absolute;
	top: calc(var(--qr) * -.1);
	left: 50%;
	width: calc(var(--qr) * 1.2);
	height: calc(var(--qr) * 1.2);
	transform: translateX(-50%);
	background: url('../assets/illustrationen/variante-b/qr-klebeband.svg') center / 100% 100% no-repeat;
	pointer-events: none;
}
.b-standbild .logos { justify-content: flex-start; gap: 44px; }
.b-standbild .logo-luise { width: 140px; height: 140px; }
.b-standbild .logo-diday { height: 100px; }