/* Kinderlieder mit Bobby, Relaunch 2026, Gestaltung v2 „Bobbys Bühne“
   Farben ausschließlich aus der CI (Bobby App/docs/04_CI-Referenz.md, am Logo gemessen 10.10.2026).
   Abstufungen nur per color-mix() aus diesen Tokens. Gelb ist Funkeln und Logo, keine Knopffläche. */

@font-face { font-family: 'Baloo 2'; font-weight: 600; font-display: optional; src: url('../fonts/baloo-2-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Baloo 2'; font-weight: 700; font-display: optional; src: url('../fonts/baloo-2-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Baloo 2'; font-weight: 800; font-display: optional; src: url('../fonts/baloo-2-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'Pacifico'; font-weight: 400; font-display: optional; src: url('../fonts/pacifico-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-weight: 400; font-display: swap; src: url('../fonts/nunito-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-weight: 400; font-style: italic; font-display: swap; src: url('../fonts/nunito-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-weight: 700; font-display: swap; src: url('../fonts/nunito-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-weight: 800; font-display: swap; src: url('../fonts/nunito-latin-800-normal.woff2') format('woff2'); }

:root {
  --blau: #2962CD;          /* Bobby-Blau: Himmel, Knöpfe */
  --blau-mittel: #1357A8;   /* Hügel, Tiefe */
  --tief: #124388;          /* Text, Nachthimmel */
  --gelb: #FFF019;          /* Logo und Funkeln */
  --creme: #FAF5F0;         /* Bobbys Fell */
  --fell: #EFDFD3;          /* Fell warm */
  --haar: #D1AF96;          /* Haarschopf */
  --wange: #E0C5C1;         /* Wangen */
  --tuerkis: #2EC9B7;       /* Decke */
  --hellblau: #88E6ED;      /* Decke hell */
  --decke: #328EC1;         /* Decke Muster */
  --dunkel: #231F20;        /* Konturen */

  --nacht: color-mix(in srgb, var(--tief) 72%, black);
  --himmel: color-mix(in srgb, var(--blau) 9%, white);
  --grund: #FFFFFF;
  --grund-2: var(--himmel);
  --text: color-mix(in srgb, var(--dunkel) 92%, var(--tief));
  --text-2: color-mix(in srgb, var(--dunkel) 62%, var(--tief));
  --linie: color-mix(in srgb, var(--blau) 16%, white);
  --karte: #FFFFFF;
  --kopf: var(--blau);

  --f-titel: 'Baloo 2', 'Nunito', system-ui, sans-serif;
  --f-schrift: 'Pacifico', 'Baloo 2', cursive;
  --f-text: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --breite: 1240px;
  --r-gross: 32px;
  --r-mittel: 22px;
  --r-klein: 14px;
  --schatten: 0 2px 4px color-mix(in srgb, var(--tief) 8%, transparent), 0 18px 40px -22px color-mix(in srgb, var(--tief) 55%, transparent);
  --schatten-gross: 0 30px 70px -30px color-mix(in srgb, var(--nacht) 80%, transparent);
  --glanz: linear-gradient(180deg, color-mix(in srgb, white 35%, transparent), transparent 55%);
}

html[data-nacht] {
  --grund: var(--nacht);
  --grund-2: color-mix(in srgb, var(--tief) 85%, black);
  --himmel: var(--grund-2);
  --text: var(--creme);
  --text-2: color-mix(in srgb, var(--creme) 86%, var(--tief));
  --linie: color-mix(in srgb, var(--creme) 14%, var(--tief));
  --karte: color-mix(in srgb, var(--blau-mittel) 62%, var(--tief));   /* heller als der Grund, damit Kästen sich abheben (Feedback 16.10.2026) */
  --kopf: color-mix(in srgb, var(--tief) 80%, black);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; background: var(--grund); color: var(--text); font: 400 1.0625rem/1.68 var(--f-text); transition: background-color .6s ease, color .6s ease; overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blau); text-underline-offset: .2em; text-decoration-thickness: 2px; }
html[data-nacht] a:not([class]) { color: var(--hellblau); }
html[data-nacht] :is(.kurz, .liedblatt, .hinweis) a:not([class]) { color: var(--blau); }
:focus-visible { outline: 3px solid var(--gelb); outline-offset: 3px; border-radius: 8px; box-shadow: 0 0 0 7px var(--tief); }
h1, h2, h3, h4 { font-family: var(--f-titel); font-weight: 800; line-height: 1.08; margin: 0 0 .45em; letter-spacing: -.01em; color: var(--tief); text-wrap: balance; }
html[data-nacht] :is(h1, h2, h3, h4) { color: var(--creme); }
h1 { font-size: clamp(2.2rem, 1.3rem + 3.6vw, 4rem); }
h2 { font-size: clamp(1.8rem, 1.25rem + 2vw, 2.8rem); }
h3 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.55rem); font-weight: 700; }
h4 { font-size: 1.15rem; font-weight: 700; }
p { margin: 0 0 1em; }
ul, ol { padding-left: 1.3em; margin: 0 0 1em; }
li { margin-bottom: .35em; }
li::marker { color: var(--tuerkis); }
strong { font-weight: 800; }
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
th, td { text-align: left; padding: .65rem .8rem; border-bottom: 1px solid var(--linie); vertical-align: top; }
th { font-weight: 800; color: #fff; background: var(--blau); font-family: var(--f-titel); font-size: 1rem; letter-spacing: .01em; }
tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--himmel) 60%, white); }
tbody tr:hover td { background: color-mix(in srgb, var(--tuerkis) 12%, white); }
tbody td:first-child { font-weight: 700; color: var(--tief); }
html[data-nacht] tbody tr:nth-child(even) td, html[data-nacht] tbody tr:hover td { background: color-mix(in srgb, var(--tief) 55%, black); }
html[data-nacht] tbody td:first-child { color: var(--creme); }
html[data-nacht] th { color: var(--creme); }
.tabelle-rahmen { overflow-x: auto; border-radius: var(--r-mittel); border: 0; margin-bottom: 1.2em; background: var(--karte); box-shadow: var(--schatten); }
.tabelle-rahmen table { min-width: 560px; }

.huelle { width: min(100% - 32px, var(--breite)); margin-inline: auto; }
.schmal { width: min(100% - 32px, 780px); margin-inline: auto; }
.nur-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprung { position: absolute; left: 12px; top: -60px; z-index: 100; background: #fff; color: var(--tief); padding: .6rem 1rem; border-radius: 999px; font-weight: 800; }
.sprung:focus { top: 12px; }
.schrift-bobby { font-family: var(--f-schrift); font-weight: 400; letter-spacing: 0; }

/* ---------------------------------------------------------------- Knöpfe: Spielzeugtasten */
.knopf { position: relative; display: inline-flex; align-items: center; gap: .55rem; min-height: 50px; padding: .65rem 1.4rem .75rem; border-radius: 999px; border: 0; cursor: pointer;
  font: 700 1.05rem/1 var(--f-titel); letter-spacing: .01em; text-decoration: none; transition: transform .12s ease, box-shadow .12s ease, filter .2s; isolation: isolate; }
.knopf svg { width: 20px; height: 20px; flex: none; }
.knopf::after { content: ''; position: absolute; inset: 2px 10px auto; height: 45%; border-radius: 999px; background: var(--glanz); z-index: -1; pointer-events: none; }
/* Hauptknopf: Bobby-Blau mit Tiefe (früher gelb; Klassenname bleibt) */
.knopf--gelb, .knopf--blau { background: linear-gradient(180deg, color-mix(in srgb, var(--blau) 80%, var(--hellblau)), var(--blau)); color: #fff; box-shadow: 0 5px 0 var(--tief), 0 12px 22px -10px color-mix(in srgb, var(--tief) 80%, transparent); }
.knopf--gelb:hover, .knopf--blau:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--tief), 0 16px 26px -10px color-mix(in srgb, var(--tief) 80%, transparent); text-decoration: none; filter: saturate(1.1); }
.knopf--gelb:active, .knopf--blau:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--tief); }
/* Auf dunklen Bühnen: weiße Taste */
:is(.welt, .seitenkopf, .nacht-flaeche, .tv-buehne, .kita-band) .knopf--gelb { background: linear-gradient(180deg, #fff, var(--creme)); color: var(--tief); box-shadow: 0 5px 0 color-mix(in srgb, var(--tief) 55%, var(--blau)), 0 14px 26px -12px color-mix(in srgb, black 60%, transparent); }
.knopf--rand { background: color-mix(in srgb, white 12%, transparent); color: var(--tief); box-shadow: inset 0 0 0 2.5px currentColor; }
.knopf--rand::after { display: none; }
html[data-nacht] .knopf--rand, :is(.welt, .seitenkopf, .nacht-flaeche, .tv-buehne, .kopf) .knopf--rand { color: #fff; }
.knopf--rand:hover { background: color-mix(in srgb, currentColor 12%, transparent); text-decoration: none; transform: translateY(-1px); }
.knopf--klein { min-height: 42px; padding: .5rem 1.05rem .58rem; font-size: .95rem; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: .85rem; align-items: center; }

/* ---------------------------------------------------------------- Kopf */
.kopf { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--kopf) 94%, transparent); backdrop-filter: blur(10px); color: #fff; transition: background-color .6s ease; box-shadow: 0 10px 30px -20px color-mix(in srgb, var(--nacht) 90%, transparent); }
.kopf__innen { display: flex; align-items: center; gap: 1rem; min-height: 78px; }
.kopf__logo { display: block; flex: none; transition: transform .25s; }
.kopf__logo:hover { transform: none; }
.kopf__logo img { width: 230px; height: auto; filter: drop-shadow(0 2px 0 color-mix(in srgb, var(--tief) 70%, transparent)); }
.menue { margin-left: auto; display: flex; align-items: center; gap: .25rem; }
.menue__liste { display: flex; gap: .1rem; list-style: none; margin: 0; padding: 0; align-items: center; }
.menue__liste > li { margin: 0; position: relative; display: flex; align-items: center; }
.menue__punkt { display: inline-flex; align-items: center; gap: .35rem; padding: .55rem .75rem; border-radius: 999px; color: #fff; text-decoration: none; background: none; border: 0; font: 700 1.05rem var(--f-titel); cursor: pointer; white-space: nowrap; }
.menue__punkt:hover, .menue__punkt[aria-current="page"] { background: color-mix(in srgb, var(--tief) 55%, transparent); text-decoration: none; }
.menue__auf { width: 30px; height: 30px; margin-left: -.35rem; border-radius: 50%; border: 0; background: none; color: #fff; cursor: pointer; display: grid; place-items: center; }
.menue__auf svg { width: 14px; height: 14px; transition: transform .2s; }
.menue__auf[aria-expanded="true"] svg { transform: rotate(180deg); }
.menue__auf:hover { background: color-mix(in srgb, var(--tief) 55%, transparent); }
.nacht-schalter { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 2px solid color-mix(in srgb, white 35%, transparent); display: grid; place-items: center; cursor: pointer; background: color-mix(in srgb, var(--tief) 45%, transparent); color: var(--gelb); }
.nacht-schalter svg { width: 22px; height: 22px; }
.nacht-schalter .sonne { display: none; }
html[data-nacht] .nacht-schalter .sonne { display: block; }
html[data-nacht] .nacht-schalter .mond { display: none; }
.menue-knopf { display: none; }

/* Megamenü */
.mega { position: absolute; top: calc(100% + 12px); left: 50%; translate: -50% 0; width: min(980px, calc(100vw - 32px)); background: var(--karte); color: var(--text); border-radius: var(--r-gross);
  box-shadow: var(--schatten-gross); padding: 1.6rem; display: none; grid-template-columns: 1fr 1fr 1fr 1.05fr; gap: 1.4rem; }
.mega::before { content: ''; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.mega[data-offen] { display: grid; }
@media (min-width: 1041px) and (hover: hover) { .mit-mega:hover > .mega, .mit-mega:focus-within > .mega { display: grid; } }
.mega h3 { font-size: 1.1rem; margin: 0 0 .5rem; color: var(--blau); font-family: var(--f-schrift); font-weight: 400; }
.mega ul { list-style: none; padding: 0; margin: 0; }
.mega li { margin: 0; }
.mega a:not(.mega__karte) { display: flex; align-items: center; gap: .6rem; padding: .4rem .5rem; border-radius: 12px; color: var(--text); text-decoration: none; font-weight: 800; font-size: .98rem; }
.mega a:not(.mega__karte):hover { background: var(--himmel); }
.mega a small { display: block; font-weight: 400; color: var(--text-2); font-size: .82rem; line-height: 1.3; }
.mega__symbol { width: 38px; height: 38px; flex: none; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--tuerkis) 18%, white); color: var(--tief); }
.mega__symbol svg { width: 22px; height: 22px; }
.mega__lied { font-weight: 700 !important; }
.mega__karte { display: block; border-radius: var(--r-mittel); overflow: hidden; background: var(--tief); color: #fff; text-decoration: none; position: relative; box-shadow: var(--schatten); }
.mega__karte img { aspect-ratio: 16/10; object-fit: cover; width: 100%; }
.mega__karte span { display: block; padding: .8rem 1rem 1rem; font: 800 1.1rem/1.2 var(--f-titel); }
.mega__karte small { display: block; font-family: var(--f-schrift); font-weight: 400; color: var(--gelb); font-size: .95rem; margin-bottom: .1rem; }

/* ---------------------------------------------------------------- Einstieg: illustrierte Bühne */
.welt { position: relative; overflow: hidden; color: #fff; background: linear-gradient(180deg, var(--blau), color-mix(in srgb, var(--blau) 60%, var(--hellblau))); isolation: isolate; }
.welt__szene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% 40%; z-index: -2; transition: filter .8s; }
html[data-nacht] .welt__szene { filter: brightness(.45) saturate(.8) hue-rotate(10deg); }
.welt::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, color-mix(in srgb, var(--tief) 55%, transparent) 0%, color-mix(in srgb, var(--tief) 15%, transparent) 45%, transparent 65%); }
.welt__innen { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 640px) minmax(0, 1fr); gap: 2rem; align-items: center; min-height: min(78vh, 720px); padding-block: clamp(2rem, 5vw, 4rem) clamp(5.5rem, 9vw, 8rem); }
.welt__text { position: relative; }
.welt h1, .welt .h1-gleich { color: #fff; font-family: var(--f-titel); font-weight: 800; font-size: clamp(2.4rem, 1.4rem + 4vw, 4.4rem); line-height: 1.02; margin-bottom: .3em;
  text-shadow: 0 3px 0 var(--tief), 0 0 1px var(--tief), 2px 2px 0 var(--tief), -2px 2px 0 var(--tief), 0 12px 30px color-mix(in srgb, var(--nacht) 70%, transparent); max-width: 13ch; }
.welt__gruss { min-height: 1.6em; font-family: var(--f-schrift); color: var(--gelb); font-size: clamp(1.3rem, 1rem + 1vw, 1.8rem); margin: 0 0 .2rem; text-shadow: 0 2px 0 var(--tief); transform: rotate(-3deg); display: inline-block; }
.welt__lead { font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); max-width: 34rem; color: #fff; text-shadow: 0 1px 2px color-mix(in srgb, var(--nacht) 80%, transparent); font-weight: 700; }
.welt__huegel { position: absolute; inset: auto 0 -1px 0; z-index: 3; width: 100%; height: clamp(60px, 7vw, 100px); }
.welt__huegel .h1 { fill: color-mix(in srgb, var(--grund) 55%, transparent); }
.welt__huegel .h2 { fill: var(--grund); transition: fill .6s; }
.sterne { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1s; background-image:
  radial-gradient(2px 2px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 28% 40%, #fff 50%, transparent 51%),
  radial-gradient(2.5px 2.5px at 46% 12%, var(--gelb) 50%, transparent 51%), radial-gradient(1.5px 1.5px at 63% 30%, #fff 50%, transparent 51%),
  radial-gradient(2.5px 2.5px at 82% 16%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 90% 44%, var(--gelb) 50%, transparent 51%),
  radial-gradient(1.5px 1.5px at 6% 52%, #fff 50%, transparent 51%), radial-gradient(2px 2px at 54% 50%, #fff 50%, transparent 51%),
  radial-gradient(1.5px 1.5px at 36% 70%, #fff 50%, transparent 51%), radial-gradient(2px 2px at 74% 64%, var(--gelb) 50%, transparent 51%); }
html[data-nacht] .welt .sterne { opacity: 1; z-index: 1; }
.funkeln { position: absolute; width: 18px; height: 18px; z-index: 1; pointer-events: none; background: var(--gelb); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); filter: drop-shadow(0 0 6px var(--gelb)); opacity: .9; }

/* Moment-Wähler als Taschen-Chips */
.momente { margin-top: 1.4rem; }
.momente__frage { font-weight: 800; margin-bottom: .6rem; font-size: 1.05rem; text-shadow: 0 1px 2px color-mix(in srgb, var(--nacht) 80%, transparent); }
.momente__liste { display: flex; flex-wrap: wrap; gap: .55rem; list-style: none; padding: 0; margin: 0; }
.momente__liste li { margin: 0; }
.moment { display: inline-flex; align-items: center; gap: .5rem; min-height: 48px; padding: .4rem 1.05rem .4rem .45rem; border-radius: 999px; border: 0; text-decoration: none;
  background: #fff; color: var(--tief); font: 700 1rem var(--f-titel); cursor: pointer; box-shadow: 0 4px 0 color-mix(in srgb, var(--tief) 45%, var(--blau)), 0 10px 20px -12px var(--nacht); transition: transform .12s, box-shadow .12s; }
.moment:hover { transform: translateY(-2px); text-decoration: none; }
.moment:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--tief); }
.moment[aria-pressed="true"] { background: var(--tief); color: #fff; }
.moment__ikon { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; color: #fff; }
.moment__ikon svg { width: 20px; height: 20px; }
.momente__liste li:nth-child(1) .moment__ikon { background: color-mix(in srgb, var(--gelb) 40%, var(--haar)); color: var(--tief); }
.momente__liste li:nth-child(2) .moment__ikon { background: var(--tuerkis); }
.momente__liste li:nth-child(3) .moment__ikon { background: var(--decke); }
.momente__liste li:nth-child(4) .moment__ikon { background: var(--blau); }
.momente__liste li:nth-child(5) .moment__ikon { background: var(--tief); color: var(--gelb); }
.belege { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.4rem; padding: 0; list-style: none; font-weight: 800; font-size: .92rem; }
.belege li { display: flex; align-items: center; gap: .45rem; margin: 0; background: color-mix(in srgb, var(--nacht) 55%, transparent); padding: .35rem .8rem .35rem .45rem; border-radius: 999px; backdrop-filter: blur(4px); }
.belege svg { width: 22px; height: 22px; color: var(--gelb); flex: none; }
.belege b { font-family: var(--f-titel); font-size: 1.05rem; color: var(--gelb); }

/* Suche (404) */
.suche-gross { position: relative; max-width: 640px; margin-top: 1.4rem; }
.suche-gross input { width: 100%; min-height: 62px; border-radius: 999px; border: 0; padding: 0 1.4rem 0 3.4rem; font: 700 1.15rem var(--f-text); color: var(--tief); box-shadow: 0 10px 30px -10px color-mix(in srgb, var(--tief) 60%, transparent); }
.suche-gross svg { position: absolute; left: 1.2rem; top: 31px; translate: 0 -50%; width: 24px; height: 24px; color: var(--blau); }
.treffer { list-style: none; padding: .4rem; margin: .5rem 0 0; background: #fff; border-radius: var(--r-mittel); box-shadow: var(--schatten); max-height: 300px; overflow: auto; }
.treffer:empty { display: none; }
.treffer a { display: flex; gap: .7rem; align-items: center; padding: .45rem; border-radius: 12px; color: var(--tief); text-decoration: none; font-weight: 700; }
.treffer a:hover, .treffer a:focus { background: var(--himmel); }
.treffer img { width: 56px; height: 36px; object-fit: cover; border-radius: 8px; }

/* ---------------------------------------------------------------- Abschnitte */
.abschnitt { position: relative; padding-block: clamp(3.2rem, 6.5vw, 6rem); }
.abschnitt--blass { background: var(--himmel); }
.abschnitt--blass::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 70px; pointer-events: none;
  background: radial-gradient(26px 18px at 7% 30px, color-mix(in srgb, white 88%, transparent) 97%, transparent), radial-gradient(18px 13px at calc(7% - 24px) 35px, color-mix(in srgb, white 88%, transparent) 97%, transparent), radial-gradient(20px 14px at calc(7% + 26px) 34px, color-mix(in srgb, white 88%, transparent) 97%, transparent), radial-gradient(21px 14px at 29% 40px, color-mix(in srgb, white 88%, transparent) 97%, transparent), radial-gradient(14px 10px at calc(29% - 19px) 44px, color-mix(in srgb, white 88%, transparent) 97%, transparent), radial-gradient(16px 11px at calc(29% + 21px) 43px, color-mix(in srgb, white 88%, transparent) 97%, transparent), radial-gradient(29px 20px at 52% 28px, color-mix(in srgb, white 88%, transparent) 97%, transparent), radial-gradient(20px 14px at calc(52% - 26px) 34px, color-mix(in srgb, white 88%, transparent) 97%, transparent), radial-gradient(22px 15px at calc(52% + 29px) 32px, color-mix(in srgb, white 88%, transparent) 97%, transparent), radial-gradient(22px 15px at 74% 38px, color-mix(in srgb, white 88%, transparent) 97%, transparent), radial-gradient(15px 11px at calc(74% - 20px) 42px, color-mix(in srgb, white 88%, transparent) 97%, transparent), radial-gradient(17px 12px at calc(74% + 22px) 41px, color-mix(in srgb, white 88%, transparent) 97%, transparent), radial-gradient(26px 18px at 93% 30px, color-mix(in srgb, white 88%, transparent) 97%, transparent), radial-gradient(18px 13px at calc(93% - 24px) 35px, color-mix(in srgb, white 88%, transparent) 97%, transparent), radial-gradient(20px 14px at calc(93% + 26px) 34px, color-mix(in srgb, white 88%, transparent) 97%, transparent); }   /* ganze Wolken unter der Kante statt angeschnittener Halbkreise (Feedback Ugeen 16.10.2026) */
html[data-nacht] .abschnitt--blass::before { opacity: .12; }
.abschnitt__kopf { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1rem 3rem; align-items: end; margin-bottom: 2.2rem; }
.abschnitt__kopf h2 { margin: 0; }
.abschnitt__kopf p { margin: 0; color: var(--text-2); font-size: 1.1rem; }
.abschnitt__kopf--einzeln { grid-template-columns: minmax(0, 46rem); }
.abschnitt__fuss { margin-top: 2.2rem; }

/* Liedkarten: gerahmte Szenenbilder */
.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 1.5rem; }
.lied { position: relative; display: flex; flex-direction: column; background: var(--karte); border-radius: var(--r-mittel); padding: 8px; box-shadow: var(--schatten); transition: transform .2s ease, box-shadow .2s ease; }
.lied:hover { transform: translateY(-5px) rotate(-.4deg); box-shadow: 0 2px 4px color-mix(in srgb, var(--tief) 8%, transparent), 0 26px 46px -22px color-mix(in srgb, var(--tief) 70%, transparent); }
.lied__rahmen { position: relative; border-radius: 16px; overflow: hidden; background: var(--fell); }
.lied__bild { aspect-ratio: 16/10; width: 100%; object-fit: cover; transition: transform .5s ease; }
.lied:hover .lied__bild { transform: scale(1.05); }
.lied__play { position: absolute; right: 10px; bottom: 10px; width: 46px; height: 46px; border-radius: 50%; background: #fff; color: var(--blau); display: grid; place-items: center; box-shadow: 0 6px 16px -6px var(--nacht); transition: transform .2s; }
.lied__play svg { width: 20px; height: 20px; margin-left: 3px; }
.lied:hover .lied__play { transform: scale(1.12); }
.lied__aufrufe { position: absolute; left: 10px; top: 10px; background: color-mix(in srgb, var(--nacht) 70%, transparent); color: #fff; font: 800 .78rem var(--f-text); padding: .25rem .6rem; border-radius: 999px; backdrop-filter: blur(4px); }
.lied__text { padding: .85rem .6rem .55rem; display: flex; flex-direction: column; gap: .25rem; flex: 1; }
.lied__name { font-family: var(--f-titel); font-weight: 800; font-size: 1.22rem; line-height: 1.15; color: var(--tief); text-decoration: none; }
html[data-nacht] .lied__name { color: var(--creme); }
.lied__name::after { content: ''; position: absolute; inset: 0; border-radius: var(--r-mittel); }
.lied__kurz { color: var(--text-2); font-size: .93rem; line-height: 1.4; margin: 0; }
.lied__marken { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: auto; padding-top: .55rem; }
.marke { display: inline-flex; align-items: center; gap: .3rem; font-size: .76rem; font-weight: 800; padding: .22rem .6rem; border-radius: 999px; background: var(--himmel); color: var(--tief); }
html[data-nacht] .marke { background: color-mix(in srgb, var(--creme) 12%, transparent); color: var(--creme); }
.marke--tuerkis { background: color-mix(in srgb, var(--tuerkis) 24%, white); color: color-mix(in srgb, var(--tuerkis) 30%, var(--tief)); }
.marke svg { width: 14px; height: 14px; }

/* Themenwelten: Bühnenbilder mit Schild */
.welten { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.4rem; }
.welt-kachel { position: relative; grid-column: span 2; border-radius: var(--r-gross); overflow: hidden; background: var(--karte); color: var(--tief); text-decoration: none; display: flex; flex-direction: column; isolation: isolate; box-shadow: var(--schatten); border: 6px solid #fff; transition: transform .25s, box-shadow .25s; }
.welt-kachel--breit { grid-column: span 3; }
.welt-kachel:hover { transform: translateY(-4px) rotate(.3deg); text-decoration: none; box-shadow: 0 22px 40px -22px var(--tief); }
.welt-kachel img { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; object-position: 70% 45%; border-radius: calc(var(--r-gross) - 10px); transition: transform .6s ease; }
.welt-kachel:hover img { transform: scale(1.04); }
.welt-kachel__text { display: flex; flex-direction: column; padding: .85rem 1rem 1rem; position: relative; }
.welt-kachel__text b { display: block; font: 800 1.35rem/1.1 var(--f-titel); color: var(--tief); }
.welt-kachel__text b::after { content: ' →'; color: var(--tuerkis); transition: margin .2s; }
.welt-kachel:hover .welt-kachel__text b::after { margin-left: .25rem; }
.welt-kachel__text span { display: block; font-size: .95rem; color: var(--text-2); margin-top: .2rem; }
.welt-kachel__zahl { position: absolute; top: .7rem; right: .7rem; background: #fff; color: var(--tief); font: 800 .85rem/1 var(--f-titel); padding: .45rem .7rem; border-radius: 999px; box-shadow: 0 6px 14px -8px var(--tief); z-index: 1; }
html[data-nacht] .welt-kachel { background: color-mix(in srgb, var(--tief) 70%, black); border-color: color-mix(in srgb, var(--tief) 60%, white); }
html[data-nacht] .welt-kachel__text b { color: var(--creme); }
html[data-nacht] .welt-kachel__text span { color: color-mix(in srgb, var(--creme) 80%, transparent); }
.welten__fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem 1.2rem; text-align: center; }
.welten__fuss p { margin: 0; color: var(--text-2); }

/* Kita-Band */
.kita-band { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--tuerkis), color-mix(in srgb, var(--tuerkis) 60%, var(--decke))); color: var(--tief); border-radius: var(--r-gross); padding: clamp(1.8rem, 4vw, 3.2rem); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2rem; align-items: center; box-shadow: var(--schatten); }
.kita-band h2 { color: var(--tief); }
.kita-band ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.kita-band li { margin: 0; background: color-mix(in srgb, white 82%, var(--tuerkis)); border-radius: 16px; padding: .75rem 1rem; font-weight: 700; box-shadow: 0 6px 16px -12px var(--tief); }
.kita-band li a { color: var(--tief); }
.kita-band--gross { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: stretch; gap: clamp(1.4rem, 3vw, 2.6rem); }
.kita-band__kopf { position: relative; align-self: center; }
.kita-band__kopf .knopf { margin-top: .4rem; }
.kita-band__kopf p { font-size: 1.08rem; max-width: 34ch; }
.kita-band__fuer { display: inline-flex; line-height: 1.25; align-items: center; gap: .45rem; background: #fff; color: var(--tief); font-weight: 800; font-size: .88rem; padding: .35rem .8rem .35rem .45rem; border-radius: 999px; margin-bottom: .8rem; }
.kita-band__fuer svg { width: 22px; height: 22px; color: var(--tuerkis); }
.kita-band__figur { position: absolute; right: -.5rem; bottom: -1rem; width: 160px; height: auto; filter: drop-shadow(0 10px 14px color-mix(in srgb, var(--tief) 35%, transparent)); transform-origin: 50% 100%; }
.kita-band__figur:hover { animation: hops .6s ease; }
@keyframes hops { 40% { transform: translateY(-10px) rotate(-3deg); } }
.kita-kacheln { align-content: center; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.kita-kachel { display: flex; flex-direction: column; gap: .3rem; background: #fff; color: var(--text); border-radius: 20px; padding: 1.1rem 1.1rem 1.2rem; text-decoration: none; box-shadow: 0 10px 22px -14px var(--tief); transition: transform .2s; }
.kita-kachel:hover { transform: translateY(-3px); text-decoration: none; }
.kita-kachel b { font: 800 1.2rem/1.15 var(--f-titel); color: var(--tief); }
.kita-kachel > span:last-child { font-size: .95rem; color: var(--text-2); }
.kita-kachel__symbol { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--tuerkis) 22%, white); color: var(--tief); margin-bottom: .3rem; }
.kita-kachel__symbol svg { width: 26px; height: 26px; }
html[data-nacht] .kita-kachel { background: var(--karte); color: var(--creme); }
html[data-nacht] .kita-kachel b { color: var(--creme); }
html[data-nacht] .kita-band { background: linear-gradient(135deg, color-mix(in srgb, var(--tuerkis) 45%, var(--tief)), var(--tief)); color: var(--creme); }
html[data-nacht] .kita-band h2 { color: var(--creme); }
html[data-nacht] .kita-band li { background: color-mix(in srgb, var(--tief) 60%, transparent); }
html[data-nacht] .kita-band li a { color: var(--creme); }

/* Nachtfläche */
.etiketten { list-style: none; padding: 0; margin: -.6rem 0 1.8rem; display: flex; flex-wrap: wrap; gap: .6rem; position: relative; z-index: 1; }
.etiketten li { display: inline-flex; align-items: center; gap: .5rem; margin: 0; padding: .5rem .95rem .5rem .55rem; border-radius: 999px; background: color-mix(in srgb, white 12%, transparent); border: 1px solid color-mix(in srgb, white 25%, transparent); color: var(--creme); font-weight: 700; font-size: .95rem; }
.etiketten svg { width: 28px; height: 28px; padding: 5px; border-radius: 50%; background: var(--gelb); color: var(--tief); flex: none; }
.abschnitt:not(:has(.nacht-flaeche)) .etiketten li { background: var(--himmel); border-color: var(--linie); color: var(--tief); }
.nacht-flaeche { position: relative; overflow: hidden; background: radial-gradient(120% 90% at 85% 0%, color-mix(in srgb, var(--blau-mittel) 70%, var(--tief)), var(--nacht) 70%); color: var(--creme); border-radius: var(--r-gross); padding: clamp(1.8rem, 4vw, 3.4rem); box-shadow: var(--schatten-gross); }
.nacht-flaeche::after { content: ''; position: absolute; top: 2.2rem; right: 2.6rem; width: 64px; height: 64px; border-radius: 50%; box-shadow: -14px 10px 0 0 var(--gelb); filter: drop-shadow(0 0 12px color-mix(in srgb, var(--gelb) 70%, transparent)); }
.nacht-flaeche h2, .nacht-flaeche h3 { color: var(--creme); }
.nacht-flaeche p { color: color-mix(in srgb, var(--creme) 85%, var(--tief)); }
.nacht-flaeche .sterne { opacity: .9; }
.nacht-flaeche > * { position: relative; z-index: 1; }
.nacht-flaeche .lied { background: color-mix(in srgb, var(--tief) 55%, var(--blau-mittel)); }
.nacht-flaeche .lied__name { color: var(--creme); }
.nacht-flaeche .lied__kurz { color: color-mix(in srgb, var(--creme) 75%, var(--tief)); }

/* Zweispalter */
.zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.zwei__bild img { border-radius: var(--r-gross); width: 100%; aspect-ratio: 4/3; object-fit: cover; box-shadow: var(--schatten); border: 6px solid #fff; }
.zwei__bild--frei img { aspect-ratio: auto; object-fit: contain; border-radius: 0; max-height: 440px; width: auto; margin-inline: auto; box-shadow: none; border: 0; filter: drop-shadow(0 20px 22px color-mix(in srgb, var(--tief) 30%, transparent)); }

/* Streaming */
.dienste { display: flex; flex-wrap: wrap; gap: .8rem; }
.dienst { display: inline-flex; align-items: center; gap: .65rem; min-height: 56px; padding: .55rem 1.2rem .55rem .6rem; border-radius: 18px; background: var(--karte); box-shadow: var(--schatten); color: var(--text); text-decoration: none; font: 800 1rem var(--f-titel); border: 2px solid transparent; transition: transform .15s, border-color .15s; }
.dienst:hover { border-color: var(--blau); text-decoration: none; transform: translateY(-2px); }
.dienst__logo { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: #fff; flex: none; }
.dienst__logo svg { width: 22px; height: 22px; }
.dienst small { display: block; font: 400 .8rem var(--f-text); color: var(--text-2); }

/* Kennzahlen */
.zahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.zahl { background: var(--karte); border-radius: var(--r-mittel); padding: 1.2rem 1.3rem; box-shadow: var(--schatten); position: relative; overflow: hidden; }
.zahl::before { content: ''; position: absolute; inset: 0 0 auto; height: 6px; background: linear-gradient(90deg, var(--tuerkis), var(--blau)); }
.zahl b { display: block; font: 800 2.1rem/1.05 var(--f-titel); color: var(--blau); }
html[data-nacht] .zahl b { color: var(--gelb); }
.zahl span { color: var(--text-2); font-size: .95rem; }

/* Hauptrolle-Teaser */
.premium { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 2.5rem; align-items: center; background: linear-gradient(135deg, var(--creme), var(--fell)); border-radius: var(--r-gross); overflow: hidden; box-shadow: var(--schatten); }
.premium__bild img { width: 100%; height: 100%; object-fit: cover; min-height: 340px; }
.premium__text { padding: clamp(1.5rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem) 0; color: var(--dunkel); }
.premium__text h2 { color: var(--tief); }
html[data-nacht] .premium { background: color-mix(in srgb, var(--fell) 14%, var(--tief)); }
html[data-nacht] .premium__text { color: var(--creme); }
html[data-nacht] .premium__text h2 { color: var(--creme); }

/* ---------------------------------------------------------------- Unterseiten-Kopf */
.seitenkopf { position: relative; color: #fff; overflow: hidden; isolation: isolate; background:
  radial-gradient(70% 120% at 100% 0%, color-mix(in srgb, var(--hellblau) 45%, transparent), transparent 60%),
  linear-gradient(160deg, var(--blau) 0%, var(--blau-mittel) 100%); }
.seitenkopf::after { content: ''; position: absolute; left: -5%; right: -5%; bottom: 30px; height: 120px; z-index: -1; border-radius: 50% 50% 0 0;
  background: color-mix(in srgb, var(--blau-mittel) 70%, var(--tief)); opacity: .45; }
html[data-nacht] .seitenkopf, .seitenkopf--nacht { background: radial-gradient(80% 120% at 90% 0%, color-mix(in srgb, var(--blau-mittel) 60%, transparent), transparent 60%), linear-gradient(180deg, var(--nacht), var(--tief)); }
.seitenkopf .sterne { opacity: .25; }
.seitenkopf--nacht .sterne, html[data-nacht] .seitenkopf .sterne { opacity: .95; }
.seitenkopf__innen { position: relative; z-index: 2; padding-block: 1.6rem 5.2rem; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 2.4rem; align-items: center; }
.seitenkopf--ohne-bild .seitenkopf__innen { grid-template-columns: minmax(0, 54rem); padding-bottom: 5.5rem; }
.seitenkopf h1 { color: #fff; font-size: clamp(2.1rem, 1.3rem + 3vw, 3.4rem); text-shadow: 0 3px 0 var(--tief), 2px 2px 0 var(--tief), -2px 2px 0 var(--tief), 0 12px 26px color-mix(in srgb, var(--nacht) 60%, transparent); }
.seitenkopf__lead { font-size: 1.15rem; color: #fff; max-width: 40rem; font-weight: 700; }
.seitenkopf .welt__huegel { height: 70px; }
.seitenkopf .zwei__bild img { border-color: color-mix(in srgb, white 85%, transparent); }
.brotkrumen { font-size: .9rem; margin-bottom: 1rem; }
.brotkrumen ol { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem; padding: 0; margin: 0; }
.brotkrumen li { margin: 0; display: flex; align-items: center; gap: .3rem; color: #fff; font-weight: 700; }
.brotkrumen li + li::before { content: '›'; opacity: .7; }
.brotkrumen a { color: #fff; }

/* Video: lädt erst nach Klick */
.video { position: relative; border-radius: var(--r-gross); overflow: hidden; background: var(--tief); aspect-ratio: 16/9; box-shadow: var(--schatten-gross); border: 7px solid #fff; }
html[data-nacht] .video { border-color: color-mix(in srgb, var(--creme) 20%, var(--tief)); }
.video img, .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.video__start { position: absolute; inset: 0; display: grid; place-items: center; border: 0; padding: 0; cursor: pointer; background: linear-gradient(180deg, transparent 45%, color-mix(in srgb, var(--tief) 55%, transparent)); color: #fff; }
.video__knopf { width: 86px; height: 86px; border-radius: 50%; background: #fff; color: var(--blau); display: grid; place-items: center; box-shadow: 0 0 0 10px color-mix(in srgb, white 35%, transparent), 0 14px 30px -8px var(--nacht); transition: transform .2s; }
.video__start:hover .video__knopf { transform: scale(1.08); }
.video__knopf svg { width: 34px; height: 34px; margin-left: 5px; }
.video__hinweis { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; margin: 0; padding: .5rem .9rem; font-size: .76rem; line-height: 1.35; color: #fff; background: color-mix(in srgb, var(--tief) 80%, transparent); }
.video__hinweis a { color: #fff; }

.steckbrief { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1rem 0 1.4rem; padding: 0; list-style: none; }
.steckbrief li { margin: 0; display: inline-flex; align-items: center; gap: .4rem; background: color-mix(in srgb, var(--tief) 50%, transparent); border-radius: 999px; padding: .35rem .85rem; font-weight: 800; font-size: .9rem; }
.steckbrief svg { width: 16px; height: 16px; color: var(--gelb); }

.springen { position: sticky; top: 78px; z-index: 40; background: color-mix(in srgb, var(--grund) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--linie); }
.springen__liste { display: flex; gap: .3rem; overflow-x: auto; list-style: none; padding: .55rem 0; margin: 0; scrollbar-width: none; }
.springen__liste li { margin: 0; flex: none; }
.springen a { display: inline-block; padding: .4rem .9rem; border-radius: 999px; font: 700 .95rem var(--f-titel); color: var(--tief); text-decoration: none; }
html[data-nacht] .springen a { color: var(--creme); }
.springen a:hover, .springen a[aria-current="true"] { background: var(--himmel); }
html[data-nacht] .springen a:hover, html[data-nacht] .springen a[aria-current="true"] { background: var(--karte); }

/* Kurz erklärt: Bobby erklärt */
.kurz { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.3rem; align-items: start; background: var(--creme); border-radius: var(--r-gross); padding: clamp(1.3rem, 3vw, 2.1rem); color: var(--dunkel); box-shadow: var(--schatten); }
.kurz::before { content: ''; position: absolute; left: 62px; top: -14px; width: 28px; height: 28px; background: var(--creme); transform: rotate(45deg); border-radius: 4px; }
.kurz img { width: 74px; height: 74px; border-radius: 50%; box-shadow: 0 0 0 5px #fff, 0 8px 18px -8px var(--tief); }
html .kurz h2 { font-size: 1.5rem; margin-bottom: .35rem; color: var(--tief); font-family: var(--f-schrift); font-weight: 400; }
.kurz p:last-child { margin-bottom: 0; }
.kurz a { color: var(--blau); }

/* Inhaltsabschnitte der Liedseiten */
.inhalt { padding-block: clamp(2.4rem, 5vw, 4.2rem); }
.inhalt:nth-of-type(even) { background: var(--himmel); }
.inhalt > .huelle { display: grid; grid-template-columns: minmax(0, 16rem) minmax(0, 50rem); gap: 1rem 3rem; }
.inhalt__titel h2 { font-size: clamp(1.55rem, 1.25rem + 1vw, 2.1rem); position: sticky; top: 150px; }
.inhalt__text h3 { margin-top: 1.6em; color: var(--blau); }
.inhalt__text h3:first-child { margin-top: 0; }
.inhalt__text > :last-child { margin-bottom: 0; }
.textblock + .textblock { margin-top: 1.4rem; }
.steckbrief-karte { background: var(--karte); border-radius: var(--r-mittel); padding: 1.2rem 1.4rem; box-shadow: var(--schatten); position: relative; overflow: hidden; }
.steckbrief-karte::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 7px; background: linear-gradient(180deg, var(--tuerkis), var(--blau)); }
.steckbrief-karte ul { list-style: none; padding: 0; margin: 0; }
.steckbrief-karte li { padding: .38rem 0; border-bottom: 1px dashed var(--linie); margin: 0; }
.steckbrief-karte li:last-child { border-bottom: 0; }

/* Liedblatt: wie ein Notenheft */
.liedblatt { position: relative; background: #fff; color: var(--dunkel); border-radius: var(--r-gross); padding: clamp(1.4rem, 4vw, 2.8rem); box-shadow: var(--schatten); border-top: 10px solid var(--tuerkis); }
.liedblatt::before { content: '♪'; position: absolute; right: 1.4rem; top: .6rem; font-size: 2.6rem; color: color-mix(in srgb, var(--tuerkis) 60%, white); }
html .liedblatt :is(h3, h4) { color: var(--blau); }
.liedblatt__text { font-size: 1.16rem; line-height: 1.78; }
.liedblatt__text p { margin-bottom: 1.1em; }
.liedblatt__werkzeuge { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: 1.3rem; }
.liedblatt a { color: var(--blau); }

/* Mitsing-Modus */
.mitsingen { position: fixed; inset: 0; z-index: 200; background: radial-gradient(120% 80% at 80% 0%, var(--blau-mittel), var(--nacht) 70%); color: var(--creme); display: none; overflow: auto; padding: clamp(1rem, 4vw, 3rem); }
.mitsingen[data-offen] { display: block; }
.mitsingen__leiste { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.mitsingen__leiste b { font: 400 1.6rem var(--f-schrift); color: var(--gelb); }
.mitsingen__text { font-family: var(--f-titel); font-weight: 700; font-size: clamp(1.7rem, 1rem + 2.6vw, 3.1rem); line-height: 1.4; max-width: 30ch; margin-inline: auto; }
.mitsingen__text h3 { color: var(--gelb); font-size: .6em; margin-top: 1.4em; }
.mitsingen__text p { margin-bottom: 1.1em; }
.mitsingen__text strong { color: var(--hellblau); }

/* Noten-Download */
.download { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem; align-items: center; background: var(--karte); border-radius: var(--r-mittel); padding: 1rem 1.1rem; margin: 1rem 0 1.4rem; box-shadow: var(--schatten); }
.download__blatt { width: 56px; height: 72px; border-radius: 6px; background: #fff; border: 2px solid var(--linie); position: relative; overflow: hidden; transform: rotate(-4deg); box-shadow: 0 6px 14px -8px var(--tief); }
.download__blatt::before { content: ''; position: absolute; inset: 12px 8px; background: repeating-linear-gradient(180deg, var(--dunkel) 0 1px, transparent 1px 5px); opacity: .5; }
.download__blatt::after { content: '♪'; position: absolute; right: 4px; bottom: 0; font-size: 20px; color: var(--blau); }
.download b { display: block; color: var(--tief); font-family: var(--f-titel); font-size: 1.1rem; }
html[data-nacht] .download b { color: var(--creme); }
.download small { color: var(--text-2); }

/* FAQ */
.fragen { display: grid; gap: .75rem; }
.frage { background: var(--karte); border-radius: var(--r-mittel); box-shadow: var(--schatten); }
.frage summary { list-style: none; cursor: pointer; padding: 1.05rem 3.4rem 1.05rem 1.3rem; font: 700 1.1rem/1.3 var(--f-titel); position: relative; color: var(--tief); }
html[data-nacht] .frage summary { color: var(--creme); }
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after { content: ''; position: absolute; right: 1.1rem; top: 50%; width: 30px; height: 30px; translate: 0 -50%; border-radius: 50%; background: var(--blau) no-repeat center/14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); transition: transform .2s; }
.frage[open] summary::after { transform: rotate(45deg); }
.frage__antwort { padding: 0 1.3rem 1.2rem; color: var(--text); }
.frage__antwort > :last-child { margin-bottom: 0; }

/* Liederfinder */
.finder { background: var(--karte); border-radius: var(--r-gross); box-shadow: var(--schatten-gross); padding: clamp(1.1rem, 3vw, 1.8rem); margin-top: -3.8rem; position: relative; z-index: 3; }
.finder__suche { position: relative; }
.finder__suche input { width: 100%; min-height: 58px; border-radius: 999px; border: 2px solid var(--linie); padding: 0 1rem 0 3.1rem; font: 700 1.08rem var(--f-text); color: var(--text); background: var(--himmel); }
.finder__suche input:focus { border-color: var(--blau); outline: none; background: #fff; }
.finder__suche svg { position: absolute; left: 1.05rem; top: 50%; translate: 0 -50%; width: 22px; height: 22px; color: var(--blau); }
.finder__gruppen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.1rem; }
.finder fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.finder legend { font: 400 1.05rem var(--f-schrift); margin-bottom: .45rem; color: var(--blau); }
.filter { display: flex; flex-wrap: wrap; gap: .4rem; }
.filter label { cursor: pointer; }
.filter input { position: absolute; opacity: 0; pointer-events: none; }
.filter span { display: inline-flex; align-items: center; min-height: 40px; padding: .35rem .9rem; border-radius: 999px; background: var(--himmel); font: 700 .95rem var(--f-titel); color: var(--tief); transition: background-color .15s, transform .12s; }
.filter span:hover { transform: translateY(-1px); }
.filter input:checked + span { background: var(--blau); color: #fff; box-shadow: 0 3px 0 var(--tief); }
.filter input:focus-visible + span { outline: 3px solid var(--gelb); outline-offset: 2px; }
.finder__stand { margin: 1.4rem 0 1rem; font: 700 1.1rem var(--f-titel); color: var(--text-2); min-height: 1.6em; }
.leer { padding: 2rem; text-align: center; border: 2px dashed var(--linie); border-radius: var(--r-mittel); display: none; }
.leer[data-sichtbar] { display: block; }

.hinweis { background: color-mix(in srgb, var(--gelb) 28%, white); color: var(--dunkel); border-radius: var(--r-mittel); padding: 1rem 1.2rem; }
.pruefen { background: var(--gelb); color: var(--dunkel); padding: 0 .3em; border-radius: 4px; font-weight: 700; outline: 2px dashed var(--dunkel); }

/* ---------------------------------------------------------------- Bobby TV */
.tv-buehne { position: relative; overflow: hidden; isolation: isolate; color: #fff; padding-block: clamp(3rem, 6vw, 5.5rem);
  background: radial-gradient(90% 70% at 50% 0%, color-mix(in srgb, var(--blau) 75%, var(--hellblau)), transparent 70%), linear-gradient(180deg, var(--tief), var(--nacht)); }
.tv-buehne .sterne { opacity: .7; }
.tv-buehne::after { content: ''; position: absolute; left: 50%; bottom: -40%; width: 120%; height: 70%; translate: -50% 0; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--tuerkis) 35%, transparent), transparent); }
.tv-kopf { text-align: center; max-width: 46rem; margin: 0 auto 2.2rem; position: relative; z-index: 1; }
.tv-kopf :is(h1, h2) { color: #fff; font-family: var(--f-schrift); font-weight: 400; font-size: clamp(2.6rem, 1.6rem + 3.5vw, 4.4rem); line-height: 1.1; text-shadow: 0 4px 0 var(--nacht), 0 0 26px color-mix(in srgb, var(--gelb) 45%, transparent); margin-bottom: .2em; }
.tv-kopf p { color: color-mix(in srgb, white 88%, var(--hellblau)); font-size: 1.1rem; font-weight: 700; }
.tv-anlage { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 1rem; align-items: end; max-width: 1060px; margin: 0 auto; }
.fernseher { position: relative; background: linear-gradient(180deg, var(--creme), var(--fell)); border-radius: 46px; padding: 26px; display: grid; grid-template-columns: minmax(0, 1fr) 132px; gap: 22px;
  box-shadow: inset 0 -10px 0 color-mix(in srgb, var(--haar) 55%, var(--fell)), inset 0 4px 0 #fff, 0 40px 60px -30px black, 0 0 0 6px color-mix(in srgb, var(--haar) 70%, var(--fell)); }
.fernseher::before, .fernseher::after { content: ''; position: absolute; top: -62px; width: 7px; height: 78px; border-radius: 4px; background: var(--haar); transform-origin: bottom center; }
.fernseher::before { left: 38%; transform: rotate(-28deg); }
.fernseher::after { left: 44%; transform: rotate(26deg); }
.fernseher__antennenkopf { position: absolute; top: -18px; left: 39.5%; width: 46px; height: 24px; border-radius: 24px 24px 6px 6px; background: color-mix(in srgb, var(--haar) 70%, var(--fell)); }
.fernseher__schirm { position: relative; aspect-ratio: 16/9; border-radius: 26px; overflow: hidden; background: #000; box-shadow: inset 0 0 0 6px color-mix(in srgb, var(--dunkel) 85%, var(--tief)), inset 0 0 40px black; }
.fernseher__schirm img, .fernseher__schirm iframe { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); object-fit: cover; border: 0; border-radius: 20px; }
.fernseher__schirm::after { content: ''; position: absolute; inset: 6px; border-radius: 20px; pointer-events: none; background: linear-gradient(135deg, color-mix(in srgb, white 18%, transparent), transparent 35%); }
.fernseher__start { position: absolute; inset: 0; z-index: 2; border: 0; padding: 0; cursor: pointer; display: grid; place-items: center; background: color-mix(in srgb, var(--nacht) 30%, transparent); }
.fernseher__titel { position: absolute; z-index: 2; left: 18px; bottom: 16px; right: 18px; color: #fff; font: 800 1.15rem/1.2 var(--f-titel); text-shadow: 0 2px 4px black; pointer-events: none; }
.fernseher__tasten { display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.fernseher__tasten-titel { font: 400 1rem var(--f-schrift); color: var(--tief); text-align: center; margin: 0 0 2px; }
.sender { display: flex; align-items: center; gap: .5rem; width: 100%; min-height: 44px; border: 0; border-radius: 16px; padding: .35rem .6rem; cursor: pointer; font: 800 .95rem/1.1 var(--f-titel); color: var(--tief);
  background: linear-gradient(180deg, #fff, var(--creme)); box-shadow: 0 4px 0 color-mix(in srgb, var(--haar) 80%, var(--fell)), 0 8px 14px -8px var(--tief); transition: transform .1s, box-shadow .1s; text-align: left; }
.sender:hover { transform: translateY(-1px); }
.sender:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--haar); }
.sender__punkt { width: 24px; height: 24px; flex: none; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.sender__punkt svg { width: 14px; height: 14px; }
.sender[aria-selected="true"] { background: linear-gradient(180deg, color-mix(in srgb, var(--blau) 80%, var(--hellblau)), var(--blau)); color: #fff; box-shadow: 0 4px 0 var(--tief), 0 0 18px color-mix(in srgb, var(--hellblau) 60%, transparent); }
.tv-bobby { width: clamp(150px, 18vw, 230px); margin-bottom: -6px; filter: drop-shadow(0 22px 20px black); transform-origin: bottom center; }
.tv-streifen { position: relative; z-index: 1; margin: 2.4rem auto 0; max-width: 1180px; background: color-mix(in srgb, var(--nacht) 70%, black); border-radius: 22px; padding: 22px 16px;
  background-image: radial-gradient(circle at 10px 9px, color-mix(in srgb, var(--tief) 40%, black) 4px, transparent 5px), radial-gradient(circle at 10px calc(100% - 9px), color-mix(in srgb, var(--tief) 40%, black) 4px, transparent 5px);
  background-size: 24px 100%; background-repeat: repeat-x; }
.tv-liste { margin: 0; }
.tv-liste ul { display: flex; gap: 14px; overflow-x: auto; list-style: none; margin: 0; padding: 4px 4px 10px; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--tuerkis) transparent; }
.tv-liste li { flex: 0 0 220px; margin: 0; scroll-snap-align: start; }
.tv-titel { display: block; width: 100%; border: 0; padding: 0; background: none; text-align: left; cursor: pointer; color: #fff; font: inherit; border-radius: 14px; }
.tv-titel img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 12px; border: 3px solid transparent; transition: border-color .15s, transform .15s; }
.tv-titel:hover img, .tv-titel[aria-current="true"] img { border-color: var(--gelb); transform: translateY(-2px); }
.tv-titel b { display: block; font: 800 1rem/1.2 var(--f-titel); margin-top: .4rem; }
.tv-titel small { color: color-mix(in srgb, white 70%, var(--tief)); font-size: .82rem; }
.tv-seite { display: inline-block; margin-top: .25rem; font-weight: 800; font-size: .85rem; color: var(--hellblau); }
.tv-hinweis { text-align: center; font-size: .82rem; color: color-mix(in srgb, white 72%, var(--tief)); margin: 1rem 0 0; position: relative; z-index: 1; }
.tv-hinweis a { color: #fff; }

/* Ausmalbilder */
.malraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 1.4rem; }
.malblatt { position: relative; background: #fff; border-radius: 18px; padding: 12px 12px 14px; box-shadow: var(--schatten); transition: transform .2s; }
.malblatt:nth-child(odd) { transform: rotate(-1.2deg); }
.malblatt:nth-child(even) { transform: rotate(1deg); }
.malblatt:hover { transform: rotate(0) translateY(-5px); }
.malblatt img { width: 100%; aspect-ratio: 3/4; object-fit: contain; border-radius: 10px; border: 1px solid var(--linie); background: #fff; }
.malblatt a { color: var(--tief); text-decoration: none; font: 800 1.1rem/1.2 var(--f-titel); display: block; margin-top: .6rem; }
.malblatt a::after { content: ''; position: absolute; inset: 0; }
.malblatt small { color: var(--text-2); }
.malraster--vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.malblatt__fuss { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .4rem; }
.malblatt .malblatt__laden { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: .3rem; margin: 0; padding: .35rem .75rem; border-radius: 999px; background: var(--blau); color: #fff; font: 800 .9rem/1 var(--f-titel); box-shadow: 0 3px 0 var(--tief); }
.malblatt .malblatt__laden::after { display: none; }
.malblatt .malblatt__laden svg { width: 16px; height: 16px; }
.malblatt .malblatt__laden:hover { background: var(--tief); }
.welten__fuss p svg { width: 18px; height: 18px; vertical-align: -3px; color: var(--blau); }
.malblatt::before { content: ''; position: absolute; top: -10px; left: 50%; width: 70px; height: 22px; translate: -50% 0; rotate: -3deg; background: color-mix(in srgb, var(--tuerkis) 45%, white); opacity: .85; border-radius: 3px; }
.malvorschau { background: #fff; border-radius: var(--r-gross); padding: 18px; box-shadow: var(--schatten-gross); rotate: -1.5deg; }
.malvorschau img { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--linie); }

/* ---------------------------------------------------------------- Fuß */
.fuss { background: linear-gradient(180deg, var(--tief), var(--nacht)); color: var(--creme); position: relative; isolation: isolate; }
.fuss__sterne { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .55; background-image: radial-gradient(1.5px 1.5px at 8% 12%, var(--gelb) 50%, transparent 51%), radial-gradient(1px 1px at 22% 30%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 41% 8%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 58% 22%, var(--gelb) 50%, transparent 51%), radial-gradient(1.5px 1.5px at 76% 10%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 93% 26%, var(--gelb) 50%, transparent 51%), radial-gradient(1px 1px at 33% 64%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 85% 58%, #fff 50%, transparent 51%); }
.fuss__abo { display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: center; padding-block: 2.2rem 1.8rem; border-bottom: 1px solid color-mix(in srgb, var(--creme) 14%, transparent); }
.fuss__abo-titel { margin: 0 1rem 0 0; font: 400 1.35rem/1.25 var(--f-schrift); color: var(--gelb); width: 10.5em; }
.fuss .fuss__abo-knopf { display: flex; align-items: center; gap: .8rem; padding: .85rem 1rem; border-radius: 20px; background: color-mix(in srgb, var(--creme) 9%, transparent); border: 1px solid color-mix(in srgb, var(--creme) 16%, transparent); transition: transform .2s, background .2s; }
.fuss .fuss__abo-knopf:hover { text-decoration: none; transform: translateY(-3px); background: color-mix(in srgb, var(--creme) 15%, transparent); }
.fuss__abo-knopf > svg { width: 44px; height: 44px; padding: 10px; border-radius: 14px; background: var(--blau); color: #fff; flex: none; }
.fuss__abo-knopf--yt > svg { background: #FF0000; }
.fuss__abo-knopf--sp > svg { background: #1DB954; }
.fuss__abo-knopf b { display: block; font: 800 1.05rem/1.15 var(--f-titel); }
.fuss__abo-knopf small { color: color-mix(in srgb, var(--creme) 75%, transparent); }
.fuss h2 svg { width: 20px; height: 20px; vertical-align: -3px; margin-right: .35rem; color: var(--tuerkis); }
.fuss__wunsch { margin-top: 1.4rem; padding: .9rem 1rem; border-radius: 16px; background: color-mix(in srgb, var(--tuerkis) 16%, transparent); font-size: .95rem; }
.fuss__wunsch a { font-weight: 800; color: #fff; }
.fuss__welle { display: block; width: 100%; height: 60px; color: var(--tief); background: var(--grund); }
html[data-nacht] .fuss__welle { color: var(--tief); }
.fuss__innen { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 2rem; padding-block: 2rem 2.4rem; }
.fuss h2 { font: 400 1.2rem var(--f-schrift); color: var(--gelb); margin-bottom: .7rem; }
.fuss ul { list-style: none; padding: 0; margin: 0; }
.fuss li { margin-bottom: .45rem; }
.fuss a { color: var(--creme); text-decoration: none; }
.fuss a:hover { text-decoration: underline; color: #fff; }
.fuss__marke img { width: 220px; margin-bottom: 1rem; }
.fuss__marke p { color: color-mix(in srgb, var(--creme) 80%, var(--tief)); max-width: 30rem; }
.fuss__az { border-top: 1px solid color-mix(in srgb, var(--creme) 14%, transparent); padding-block: 1.8rem; }
.fuss__az h2 { margin-bottom: 1rem; }
.fuss__az ul { display: flex; flex-wrap: wrap; gap: .45rem; font-size: .9rem; }
.fuss__az li { margin: 0; }
.fuss__az a { display: inline-block; padding: .3rem .75rem; border-radius: 999px; background: color-mix(in srgb, var(--creme) 8%, transparent); }
.fuss__az a:hover { background: var(--blau); text-decoration: none; }
.sozial { display: flex; gap: .5rem; margin-top: 1rem; }
.sozial a { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--creme) 12%, transparent); }
.sozial a:hover { background: var(--blau); }
.sozial svg { width: 22px; height: 22px; }
.fuss__unten { border-top: 1px solid color-mix(in srgb, var(--creme) 14%, transparent); padding-block: 1.2rem 1.6rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: .9rem; color: color-mix(in srgb, var(--creme) 75%, var(--tief)); }
.fuss__unten ul { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.entwurf-zeile { background: var(--gelb); color: var(--tief); text-align: center; font-weight: 800; font-size: .9rem; padding: .5rem 1rem; }

/* ---------------------------------------------------------------- Bewegung */
@media (prefers-reduced-motion: no-preference) {
  .tv-bobby { animation: wippen 4.5s ease-in-out infinite; }
  .funkeln { animation: funkeln 3.2s ease-in-out infinite; }
  .funkeln:nth-of-type(2) { animation-delay: 1.1s; }
  .funkeln:nth-of-type(3) { animation-delay: 2.2s; }
  @keyframes wippen { 0%, 100% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.5deg) translateY(-5px); } }
  @keyframes funkeln { 0%, 100% { transform: scale(.4) rotate(0); opacity: .3; } 50% { transform: scale(1) rotate(45deg); opacity: 1; } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------------------------------------------------------------- Responsiv */
@media (max-width: 1180px) { .kopf__logo img { width: 190px; } .menue__punkt { padding: .5rem .55rem; font-size: 1rem; } }
@media (max-width: 1040px) {
  .kopf { backdrop-filter: none; background: var(--kopf); }
  .menue-knopf { display: inline-flex; margin-left: auto; align-items: center; gap: .4rem; min-height: 46px; padding: .4rem 1rem; border-radius: 999px; border: 0; background: color-mix(in srgb, var(--tief) 50%, transparent); color: #fff; font: 800 1rem var(--f-titel); cursor: pointer; }
  .menue-knopf svg { width: 22px; height: 22px; }
  .menue { position: fixed; inset: 78px 0 0 0; background: var(--grund); color: var(--text); display: none; flex-direction: column; align-items: stretch; overflow: auto; padding: 1rem 16px 2rem; margin: 0; }
  .menue[data-offen] { display: flex; }
  .menue__liste { flex-direction: column; align-items: stretch; }
  .menue__liste > li { flex-wrap: wrap; }
  .menue__punkt { color: var(--tief); flex: 1; font-size: 1.2rem; padding: .8rem .6rem; border-radius: 12px; }
  html[data-nacht] .menue__punkt { color: var(--creme); }
  .menue__auf { color: var(--tief); width: 46px; height: 46px; margin: 0; }
  html[data-nacht] .menue__auf { color: var(--creme); }
  .menue__punkt:hover, .menue__punkt[aria-current="page"] { background: var(--himmel); }
  .mega { position: static; translate: none; width: 100%; box-shadow: none; padding: .3rem 0 1rem .6rem; grid-template-columns: 1fr; gap: .8rem; background: transparent; }
  .mega::before { display: none; }
  .mega__karte { display: none; }
  .welten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .welt-kachel, .welt-kachel--breit { grid-column: span 1; }
  .fuss__innen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fuss__abo { grid-template-columns: minmax(0, 1fr); }
  .fuss__abo-titel { max-width: none; }
  .fuss__marke { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .malraster--vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tv-anlage { grid-template-columns: minmax(0, 1fr); }
  .tv-bobby { position: absolute; right: -6px; top: -120px; width: 120px; }
  .fernseher { grid-template-columns: minmax(0, 1fr); padding: 16px; border-radius: 32px; }
  .fernseher__tasten { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; }
  .fernseher__tasten-titel { display: none; }
  .sender { width: auto; flex: 1 1 calc(50% - 10px); }
}
@media (max-width: 860px) {
  .welt__innen, .seitenkopf__innen, .zwei, .kita-band, .premium, .abschnitt__kopf { grid-template-columns: minmax(0, 1fr); }
  .kita-band__figur { right: -.6rem; bottom: -.4rem; width: 88px; }
  .welt__innen { min-height: 0; padding-bottom: 5rem; }
  .welt::before { background: linear-gradient(180deg, color-mix(in srgb, var(--tief) 72%, transparent) 0%, color-mix(in srgb, var(--tief) 45%, transparent) 70%, transparent); }
  .welt__szene { object-position: 80% 50%; }
  .premium__text { padding: 0 1.4rem 1.6rem; }
  .premium__bild img { min-height: 220px; max-height: 300px; }
  .inhalt > .huelle { grid-template-columns: minmax(0, 1fr); }
  .inhalt__titel h2 { position: static; }
  .zahlen { grid-template-columns: minmax(0, 1fr); }
  .finder__gruppen { grid-template-columns: minmax(0, 1fr); }
  .seitenkopf__innen { padding-bottom: 4.4rem; }
  .nacht-flaeche::after { top: 1rem; right: 1rem; width: 40px; height: 40px; box-shadow: -9px 6px 0 0 var(--gelb); }
}
@media (max-width: 560px) {
  body { font-size: 1rem; }
  .kopf__innen { min-height: 70px; gap: .5rem; }
  .kopf__logo img { width: 160px; }
  .menue { inset: 70px 0 0 0; }
  .springen { top: 70px; }
  .welten { grid-template-columns: minmax(0, 1fr); }
  .fuss__innen { grid-template-columns: minmax(0, 1fr); }
  .kurz { grid-template-columns: minmax(0, 1fr); }
  .kurz::before { display: none; }
  .kurz img { width: 58px; height: 58px; }
  .download { grid-template-columns: auto minmax(0, 1fr); }
  .download .knopf { grid-column: 1 / -1; justify-content: center; }
  .raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
  .lied { padding: 6px; }
  .lied__text { padding: .55rem .35rem .4rem; }
  .lied__name { font-size: 1.02rem; }
  .lied__kurz { font-size: .83rem; }
  .lied__play { width: 36px; height: 36px; right: 6px; bottom: 6px; }
  .lied__aufrufe { font-size: .68rem; left: 6px; top: 6px; }
  .marke { font-size: .7rem; padding: .15rem .45rem; }
  .welt-kachel__text b { font-size: 1.2rem; }
  .moment { font-size: .95rem; padding-right: .85rem; }
  .kita-kacheln { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
  .kita-kachel { display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: .8rem; row-gap: .1rem; padding: .85rem; }
  .kita-kachel__symbol { grid-row: span 2; margin: 0; }
  .malraster, .malraster--vier { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
  .tv-liste li { flex-basis: 170px; }
}
@media (max-width: 400px) {
  .kopf__logo img { width: 138px; }
  .menue-knopf { padding: .4rem .7rem; font-size: .95rem; }
  .nacht-schalter { width: 42px; height: 42px; }
}

/* ---------------------------------------------------------------- Druck: Liedblatt */

/* Hauptrolle-Teaser Startseite: Bühnenlook in der Palette der Hauptrolle-Seite (hauptrolle.css, Werte der Altseite) */
.star { --star-tief: #06222A; --star-gold: #B08D57; --star-gold-hell: #D9BC82; position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(1.4rem, 3.5vw, 3rem); align-items: center; padding: clamp(1.2rem, 3vw, 2.4rem); border-radius: var(--r-gross); color: #F6EFE3;
  background: radial-gradient(60% 80% at 25% 0%, color-mix(in srgb, #0E5560 70%, transparent), transparent 70%), linear-gradient(160deg, #0B3A43, var(--star-tief) 65%); box-shadow: var(--schatten-gross); }
.star::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .5; background-image: radial-gradient(1.5px 1.5px at 12% 20%, var(--star-gold-hell) 50%, transparent 51%), radial-gradient(1px 1px at 48% 12%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 88% 30%, var(--star-gold-hell) 50%, transparent 51%), radial-gradient(1px 1px at 70% 80%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 95% 70%, var(--star-gold-hell) 50%, transparent 51%); }
.star__licht { position: absolute; z-index: -1; top: -30%; left: 8%; width: 45%; height: 160%; background: conic-gradient(from 165deg at 50% 0%, transparent 0deg, color-mix(in srgb, var(--star-gold-hell) 22%, transparent) 15deg, transparent 30deg); filter: blur(6px); pointer-events: none; }
.star__bild { position: relative; border-radius: calc(var(--r-gross) - 6px); overflow: hidden; border: 2px solid color-mix(in srgb, var(--star-gold) 70%, transparent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--star-gold) 14%, transparent), 0 30px 60px -30px black; }
.star__bild img { display: block; width: 100%; height: auto; aspect-ratio: 1380 / 998; object-fit: cover; transition: transform .8s ease; }
.star:hover .star__bild img { transform: scale(1.03); }
.star__schild { position: absolute; left: .7rem; bottom: .7rem; font-size: .75rem; padding: .25rem .6rem; border-radius: 999px; background: color-mix(in srgb, var(--star-tief) 70%, transparent); color: #F6EFE3; }
.star__kicker { margin: 0 0 .5rem; color: var(--star-gold-hell); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: .82rem; }
.star h2 { color: #fff; margin-top: 0; }
.star__text > p { color: color-mix(in srgb, #F6EFE3 88%, transparent); font-size: 1.06rem; }
.star__wege { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin: 1.2rem 0 1.4rem; }
.star__weg { padding: 1rem 1.05rem; border-radius: 18px; background: color-mix(in srgb, white 7%, transparent); border: 1px solid color-mix(in srgb, white 16%, transparent); }
.star__weg--gold { border-color: color-mix(in srgb, var(--star-gold) 80%, transparent); background: color-mix(in srgb, var(--star-gold) 14%, transparent); }
.star__weg b { display: block; font: 800 1.15rem/1.1 var(--f-titel); color: var(--star-gold-hell); margin-bottom: .3rem; }
.star__weg span { font-size: .93rem; color: color-mix(in srgb, #F6EFE3 85%, transparent); }
.star .star__knopf { background: linear-gradient(135deg, var(--star-gold-hell), var(--star-gold)); color: var(--star-tief); box-shadow: 0 5px 0 color-mix(in srgb, var(--star-gold) 55%, black), 0 14px 30px -14px var(--star-gold); }
.star .star__knopf:hover { transform: translateY(-2px); text-decoration: none; }
.star__link { color: var(--star-gold-hell); font-weight: 700; align-self: center; }
@media (max-width: 860px) { .star { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .star__wege { grid-template-columns: minmax(0, 1fr); } }


/* Bobby für unterwegs (Startseite) */
.unterwegs { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(1.4rem, 3.5vw, 3rem); align-items: start; }
.unterwegs__bild { border-radius: var(--r-gross); overflow: hidden; border: 6px solid #fff; box-shadow: var(--schatten); margin-bottom: 1.4rem; }
.unterwegs__bild img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: 70% 50%; }
.unterwegs__links h2 { margin-top: 0; }
.unterwegs__anlaesse { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.unterwegs__anlaesse li { margin: 0; display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .85rem .45rem .5rem; border-radius: 999px; background: #fff; color: var(--tief); font-weight: 700; font-size: .93rem; box-shadow: 0 6px 14px -10px var(--tief); }
.unterwegs__anlaesse svg { width: 24px; height: 24px; padding: 4px; border-radius: 50%; background: color-mix(in srgb, var(--tuerkis) 25%, white); }
.unterwegs__rechts { background: #fff; border-radius: var(--r-gross); padding: clamp(1.2rem, 2.6vw, 2rem); box-shadow: var(--schatten); }
.unterwegs__rechts h3 { margin: 0 0 .9rem; font-size: 1.15rem; color: var(--tief); }
.unterwegs__rechts h3 + .dienste, .unterwegs__pls { margin-bottom: 1.6rem; }
.unterwegs .dienste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.unterwegs .dienst { box-shadow: none; background: var(--himmel); }
.unterwegs .dienst:last-child { grid-column: span 2; }
.unterwegs__pls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
.unterwegs__pl { display: block; text-decoration: none; color: var(--tief); font-weight: 700; font-size: .85rem; line-height: 1.25; }
.unterwegs__pl span { display: block; overflow-wrap: normal; word-break: normal; hyphens: manual; }
.unterwegs__pl img { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 14px; box-shadow: 0 10px 20px -14px var(--tief); margin-bottom: .45rem; transition: transform .2s; }
.unterwegs__pl:hover img { transform: translateY(-3px) rotate(-1deg); }
.unterwegs__fuss { display: flex; justify-content: flex-start; }
html[data-nacht] .unterwegs__rechts, html[data-nacht] .unterwegs__anlaesse li { background: var(--karte); color: var(--creme); }
html[data-nacht] .unterwegs__rechts h3, html[data-nacht] .unterwegs__pl { color: var(--creme); }
html[data-nacht] .unterwegs .dienst { background: color-mix(in srgb, var(--tief) 55%, black); }
@media (max-width: 860px) { .unterwegs { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .unterwegs__pls { grid-template-columns: repeat(2, minmax(0, 1fr)); } .unterwegs .dienste { grid-template-columns: minmax(0, 1fr); } .unterwegs .dienst:last-child { grid-column: auto; } }


/* FAQ mit mitfahrendem Bobby (Startseite) */
.faqb { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: clamp(1.2rem, 3vw, 2.6rem); align-items: start; }
.faqb__bobby { position: sticky; top: 110px; display: flex; flex-direction: column; align-items: center; padding-top: 3.2rem; }
.faqb__blase { position: relative; background: #fff; color: var(--tief); font: 800 1.05rem/1.2 var(--f-titel); padding: .75rem 1rem; border-radius: 20px; box-shadow: var(--schatten); text-align: center; margin-bottom: .9rem; min-width: 150px; }
.faqb__blase::after { content: ''; position: absolute; left: 50%; bottom: -10px; translate: -50% 0; border: 10px solid transparent; border-top-color: #fff; border-bottom: 0; }
.faqb__blase.ist-neu { animation: blase-pop .35s ease; }
.faqb__bobby img { width: 170px; height: auto; filter: drop-shadow(0 14px 18px color-mix(in srgb, var(--tief) 30%, transparent)); }
.faqb__bobby img.hopst { animation: hops .6s ease; }
@keyframes blase-pop { 0% { transform: scale(.85); } 60% { transform: scale(1.06); } }
.faqb__inhalt h2 { margin-top: 0; }
.faqb__filterleiste { display: flex; flex-wrap: wrap; gap: .5rem; margin: .4rem 0 1.2rem; }
.faqb__filter { font: 800 .95rem/1 var(--f-titel); padding: .6rem 1rem; border-radius: 999px; border: 2px solid var(--linie); background: #fff; color: var(--tief); cursor: pointer; }
.faqb__filter[aria-pressed="true"] { background: var(--blau); border-color: var(--blau); color: #fff; }
.faqb .fragen { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.faqb .frage[hidden] { display: none; }
.faqb__mehr { margin-top: 1.4rem; color: var(--text-2); }
html[data-nacht] .faqb__blase, html[data-nacht] .faqb__filter:not([aria-pressed="true"]) { background: var(--karte); color: var(--creme); }
html[data-nacht] .faqb__blase::after { border-top-color: var(--karte); }
@media (prefers-reduced-motion: reduce) { .faqb__blase.ist-neu, .faqb__bobby img.hopst { animation: none; } }
@media (max-width: 1040px) { .faqb .fragen { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .faqb { grid-template-columns: minmax(0, 1fr); } .faqb__bobby { position: static; flex-direction: row-reverse; justify-content: flex-end; gap: .8rem; padding-top: 0; order: -1; } .faqb__bobby img { width: 96px; } .faqb__blase { margin: 0; } .faqb__blase::after { left: -10px; bottom: auto; top: 50%; translate: 0 -50%; border: 10px solid transparent; border-right-color: #fff; border-left: 0; } }


/* Themenkopf (Themenseiten, Feedback TH-2): Seitenbild als Bühne, Textkarte links */
.tkopf { position: relative; isolation: isolate; overflow: hidden; background: var(--himmel); }
.tkopf__bild { position: absolute; inset: 0; z-index: -1; }
.tkopf__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 75% 50%; }
.tkopf::after { content: ''; position: absolute; inset: auto 0 0; height: 90px; z-index: -1; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--grund) 70%, transparent)); }
.tkopf__innen { min-height: clamp(460px, 44vw, 640px); display: grid; grid-template-columns: minmax(0, 32rem) 1fr; align-items: center; gap: 2rem; padding-block: 2rem 2.2rem; position: relative; }
.tkopf__karte { background: color-mix(in srgb, white 90%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: var(--r-gross); padding: clamp(1.2rem, 2.6vw, 2.1rem); box-shadow: 0 24px 50px -28px var(--tief); color: var(--text); }
.tkopf__karte .brotkrumen, .tkopf__karte .brotkrumen * { color: var(--text-2); text-shadow: none; }
.tkopf h1 { color: var(--tief); font-size: clamp(2rem, 1.3rem + 2.4vw, 3.1rem); line-height: 1.05; margin: .3rem 0 .7rem; text-shadow: none; }
.tkopf__lead { font-size: 1.08rem; margin: 0 0 1rem; color: var(--text); }
.tkopf__fakten { list-style: none; padding: 0; margin: 0 0 1.2rem; display: flex; flex-wrap: wrap; gap: .45rem; }
.tkopf__fakten li { margin: 0; }
.tkopf__fakten li > a, .tkopf__fakten li > svg { text-decoration: none; }
.tkopf__fakten li, .tkopf__fakten a { display: inline-flex; align-items: center; gap: .35rem; font-weight: 800; font-size: .9rem; color: var(--tief); }
.tkopf__fakten li { padding: .35rem .75rem .35rem .4rem; border-radius: 999px; background: var(--himmel); border: 1px solid var(--linie); }
.tkopf__fakten svg { width: 24px; height: 24px; padding: 4px; border-radius: 50%; background: var(--gelb); color: var(--tief); flex: none; }
.tkopf__fakten li:has(a):hover { background: color-mix(in srgb, var(--blau) 12%, white); }
.tkopf__lieb { align-self: end; justify-self: end; display: flex; align-items: center; gap: .8rem; max-width: 330px; padding: .6rem .9rem .6rem .6rem; border-radius: 20px; background: color-mix(in srgb, white 92%, transparent); box-shadow: 0 16px 34px -20px var(--tief); text-decoration: none; color: var(--text); transition: transform .2s; }
.tkopf__lieb:hover { transform: translateY(-3px); text-decoration: none; }
.tkopf__lieb img { width: 104px; height: 70px; object-fit: cover; border-radius: 12px; flex: none; }
.tkopf__lieb small { display: block; font-size: .78rem; color: var(--text-2); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.tkopf__lieb b { display: block; font: 800 1.08rem/1.15 var(--f-titel); color: var(--tief); }
.tkopf__lieb em { display: inline-flex; align-items: center; gap: .3rem; font-style: normal; font-size: .85rem; color: var(--blau); font-weight: 700; margin-top: .15rem; }
.tkopf__lieb em svg { width: 14px; height: 14px; }
.tkopf__sprung { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; padding-block: 0 1.4rem; }
.tkopf__sprung span { font-weight: 800; color: var(--tief); margin-right: .2rem; background: color-mix(in srgb, white 85%, transparent); padding: .3rem .6rem; border-radius: 10px; }
.tkopf .tkopf__sprung a { padding: .45rem .85rem; border-radius: 999px; background: #fff; color: var(--tief); font-weight: 700; font-size: .92rem; text-decoration: none; box-shadow: 0 6px 14px -10px var(--tief); }
.tkopf .tkopf__sprung a:hover { background: var(--blau); color: #fff; }
.tkopf--nacht .tkopf__sprung a, html[data-nacht] .tkopf .tkopf__sprung a { background: color-mix(in srgb, var(--nacht) 80%, transparent); color: var(--creme); border: 1px solid color-mix(in srgb, white 20%, transparent); }
.tkopf--nacht .tkopf__sprung span, html[data-nacht] .tkopf__sprung span { background: color-mix(in srgb, var(--nacht) 80%, transparent); color: var(--creme); }
.tkopf--nacht .tkopf__karte .brotkrumen *, html[data-nacht] .tkopf__karte .brotkrumen * { color: color-mix(in srgb, var(--creme) 85%, transparent); }
/* Bild ohne freie Fläche: Bild rechts im Rahmen, Hintergrund Himmel */
.tkopf--neben { background: linear-gradient(180deg, var(--himmel), var(--grund)); }
.tkopf--neben .tkopf__bild { position: relative; inset: auto; z-index: 0; display: none; }
.tkopf--neben .tkopf__innen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 0; padding-block: 2rem 2.4rem; }
.tkopf--neben .tkopf__innen::after { content: ''; grid-column: 2; grid-row: 1; }
.tkopf--neben .tkopf__lieb { grid-column: 2; grid-row: 1; justify-self: start; align-self: end; margin: 0 0 -1rem -1.5rem; z-index: 2; }
.tkopf--neben .tkopf__seitenbild { grid-column: 2; grid-row: 1; border-radius: var(--r-gross); overflow: hidden; border: 6px solid #fff; box-shadow: var(--schatten-gross); }
.tkopf--neben .tkopf__seitenbild img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
/* Nacht */
.tkopf--nacht .tkopf__karte, html[data-nacht] .tkopf__karte, html[data-nacht] .tkopf__lieb, .tkopf--nacht .tkopf__lieb { background: color-mix(in srgb, var(--nacht) 80%, transparent); color: var(--creme); }
.tkopf--nacht h1, html[data-nacht] .tkopf h1, .tkopf--nacht .tkopf__lieb b, html[data-nacht] .tkopf__lieb b { color: #fff; }
.tkopf--nacht .tkopf__lead, html[data-nacht] .tkopf__lead, .tkopf--nacht .tkopf__karte .brotkrumen, .tkopf--nacht .tkopf__karte .brotkrumen a, html[data-nacht] .tkopf__karte .brotkrumen a { color: color-mix(in srgb, var(--creme) 85%, transparent); }
.tkopf--nacht .tkopf__fakten li, html[data-nacht] .tkopf__fakten li { background: color-mix(in srgb, white 10%, transparent); border-color: color-mix(in srgb, white 20%, transparent); }
.tkopf--nacht .tkopf__fakten li, .tkopf--nacht .tkopf__fakten a, html[data-nacht] .tkopf__fakten li, html[data-nacht] .tkopf__fakten a { color: var(--creme); }
html[data-nacht] .tkopf { background: var(--nacht); }
@media (max-width: 860px) {
  .tkopf__bild { position: relative; inset: auto; aspect-ratio: 16 / 9; }
  .tkopf__innen, .tkopf--neben .tkopf__innen { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-block: 0 1.2rem; margin-top: -2.2rem; }
  .tkopf--neben .tkopf__bild { display: block; }
  .tkopf--neben .tkopf__seitenbild { display: none; }
  .tkopf__lieb, .tkopf--neben .tkopf__lieb { grid-column: auto; grid-row: auto; justify-self: stretch; max-width: none; margin: 0; }
  .tkopf::after { display: none; }
  .tkopf__sprung { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 1rem; }
  .tkopf__sprung > * { flex: none; }
}


/* Empfehlungskarten aus Tabellen mit Liedspalte */
.empf { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: .9rem; margin: 1.4rem 0 1.6rem; }
.empf__karte { display: flex; gap: .9rem; align-items: flex-start; padding: .75rem; border-radius: 20px; background: var(--karte); box-shadow: var(--schatten); color: var(--text); text-decoration: none; transition: transform .2s; }
.empf__karte:hover { transform: translateY(-3px); text-decoration: none; }
.empf__karte img { width: 112px; height: 76px; object-fit: cover; border-radius: 12px; flex: none; }
.empf__text, .tipp, .empf__text b, .empf dd, .empf dt, .tipp p, .tipp b, .empf__karte { min-width: 0; overflow-wrap: normal; word-break: normal; hyphens: auto; }
.empf--video .empf__karte img { width: 140px; height: 79px; }
.empf__text small { display: inline-block; font-size: .78rem; font-weight: 800; color: var(--tief); background: color-mix(in srgb, var(--tuerkis) 22%, white); padding: .15rem .55rem; border-radius: 999px; margin-bottom: .25rem; }
.empf__text b { display: block; font: 800 1.08rem/1.15 var(--f-titel); color: var(--tief); margin-bottom: .3rem; }
.empf dl { margin: 0; display: grid; gap: .1rem; font-size: .88rem; }
.empf dl div { display: block; }
.empf dt { display: inline; margin-right: .3rem; }
.empf dd { display: inline; }
.empf dt { color: var(--text-2); font-weight: 700; }
.empf dt::after { content: ':'; }
.empf dd { margin: 0; }
.schmal:has(.empf) { max-width: min(100%, 76rem); }
html[data-nacht] .empf__karte { background: var(--karte); color: var(--creme); }
html[data-nacht] .empf__text b { color: var(--creme); }
/* Anleitungen zweispaltig mit Zeitstrahl */
.schritte-zwei { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(1.4rem, 3.5vw, 3rem); align-items: start; }
.schritte-zwei__kopf { position: sticky; top: 110px; }
.schritte-zwei__kopf h2 { margin-top: 0; }
.schritte-zwei__kopf .lied { margin-top: 1.2rem; max-width: 360px; }
.schritte-liste--zeit { margin: 0; position: relative; }
.schritte-liste--zeit::before { content: ''; position: absolute; left: 2.2rem; top: 1.5rem; bottom: 1.5rem; width: 3px; border-radius: 3px; background: linear-gradient(var(--tuerkis), var(--blau)); }
.schritte-liste--zeit li { z-index: 0; }
.schritte-liste--zeit li::before { z-index: 1; }
/* Tippkarten */
.tipps__kopf { max-width: 48rem; }
.tipps.tipps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1040px) { .tipps, .tipps.tipps--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .tipps, .tipps.tipps--4 { grid-template-columns: minmax(0, 1fr); } }
.tipps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 1.4rem 0; }
.tipp { position: relative; background: var(--karte); border-radius: var(--r-mittel); padding: 1.2rem 1.2rem 1.1rem; box-shadow: var(--schatten); border-top: 5px solid var(--tuerkis); }
.tipp:nth-child(3n+2) { border-top-color: var(--blau); }
.tipp:nth-child(3n) { border-top-color: var(--haar); }
.tipp__nr { position: absolute; top: .8rem; right: .9rem; font: 800 1.6rem/1 var(--f-titel); color: color-mix(in srgb, var(--blau) 18%, white); }
.tipp b { display: block; font: 800 1.15rem/1.2 var(--f-titel); color: var(--tief); margin-bottom: .35rem; padding-right: 2rem; }
.tipp p { margin: 0; font-size: .97rem; }
html[data-nacht] .tipp { background: var(--karte); }
html[data-nacht] .tipp b { color: var(--creme); }
@media (max-width: 860px) { .schritte-zwei { grid-template-columns: minmax(0, 1fr); } .schritte-zwei__kopf { position: static; } }


/* Ausmalbilder: Kategorien, Stufen, Filter, Malen nach Zahlen */
.ausmal-nav { display: flex; gap: .45rem; overflow-x: auto; scrollbar-width: none; padding-block: 1.2rem .2rem; }
.ausmal-nav a { flex: none; padding: .5rem .95rem; border-radius: 999px; background: var(--himmel); color: var(--tief); font-weight: 800; font-size: .92rem; text-decoration: none; border: 2px solid transparent; }
.ausmal-nav a:hover { border-color: var(--blau); }
.ausmal-nav a[aria-current] { background: var(--blau); color: #fff; }
.malblatt__stufe { position: absolute; z-index: 2; top: 18px; left: 18px; font: 800 .75rem/1 var(--f-titel); padding: .35rem .6rem; border-radius: 999px; background: color-mix(in srgb, var(--tuerkis) 30%, white); color: var(--tief); }
.malblatt__stufe--mittel { background: color-mix(in srgb, var(--blau) 18%, white); }
.malblatt__stufe--schwer { background: color-mix(in srgb, var(--haar) 45%, white); }
.malstufe { position: static; color: #fff; font-weight: 700; }
.malstufe .malblatt__stufe { position: static; display: inline-block; margin-right: .3rem; }
.malblatt[hidden] { display: none; }
.filterleiste { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 1.4rem; }
.filterleiste button { font: 800 .92rem/1 var(--f-titel); padding: .6rem .95rem; border-radius: 999px; border: 2px solid var(--linie); background: #fff; color: var(--tief); cursor: pointer; }
.filterleiste button[aria-pressed="true"] { background: var(--blau); border-color: var(--blau); color: #fff; }
.ausmal-kats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 1.1rem; }
.ausmal-kat { display: flex; flex-direction: column; gap: .2rem; padding: .8rem .8rem 1rem; border-radius: var(--r-gross); background: var(--karte); box-shadow: var(--schatten); color: var(--text-2); text-decoration: none; transition: transform .2s; }
.ausmal-kat:hover { transform: translateY(-4px); text-decoration: none; }
.ausmal-kat__bilder { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; margin-bottom: .6rem; background: var(--himmel); border-radius: 16px; padding: .45rem; }
.ausmal-kat--mnz .ausmal-kat__bilder { grid-template-columns: repeat(2, 1fr); }
.ausmal-kat__bilder img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: contain; background: #fff; border-radius: 8px; }
.ausmal-kat b { font: 800 1.25rem/1.15 var(--f-titel); color: var(--tief); }
.ausmal-kat b::after { content: ' →'; color: var(--tuerkis); }
.mnz-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr)); gap: 1.2rem; }
.mnz { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 1.4rem; align-items: start; background: var(--karte); border-radius: var(--r-gross); padding: 1.1rem; box-shadow: var(--schatten); }
.mnz__bilder img { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--linie); background: #fff; }
.mnz__loesung summary { cursor: pointer; font-weight: 800; color: var(--blau); margin: .5rem 0; }
.mnz__text h3 { margin-top: .2rem; color: var(--tief); }
.mnz__farben { list-style: none; padding: 0; margin: .6rem 0 1rem; display: flex; flex-wrap: wrap; gap: .4rem .9rem; }
.mnz__farben li { display: inline-flex; align-items: center; gap: .4rem; margin: 0; font-size: .95rem; }
.mnz__farben span { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-weight: 800; font-size: .85rem; border: 2px solid rgba(0,0,0,.35); }
html[data-nacht] .ausmal-kat, html[data-nacht] .mnz, html[data-nacht] .filterleiste button:not([aria-pressed="true"]) { background: var(--karte); color: var(--creme); }
html[data-nacht] .ausmal-kat b, html[data-nacht] .mnz__text h3 { color: var(--creme); }
@media (max-width: 560px) { .mnz { grid-template-columns: minmax(0, 1fr); } }


/* Kita-Seite: Mappen und Praktikum */
.mappen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.mappe { position: relative; display: flex; flex-direction: column; gap: .35rem; padding: 1.3rem 1.2rem 1.2rem; border-radius: var(--r-gross); background: var(--karte); box-shadow: var(--schatten); color: var(--text); text-decoration: none; border-top: 6px solid var(--tuerkis); transition: transform .2s; }
.mappe:hover { transform: translateY(-4px); text-decoration: none; }
.mappe--gold { border-top-color: #D9BC82; }
.mappe--link { border-top-color: var(--blau); background: color-mix(in srgb, var(--himmel) 55%, white); }
.mappe__nr { align-self: flex-start; font: 800 .78rem/1 var(--f-titel); padding: .35rem .6rem; border-radius: 999px; background: var(--himmel); color: var(--tief); }
.mappe b { font: 800 1.2rem/1.15 var(--f-titel); color: var(--tief); }
.mappe > span:not(.mappe__nr) { font-size: .95rem; color: var(--text-2); flex: 1; }
.mappe em { font-style: normal; font-weight: 800; color: var(--blau); margin-top: .4rem; }
.mappe em::before { content: '↓ '; }
.mappe--link em::before { content: '→ '; }
.praktikum { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); gap: 2rem; align-items: center; }
.praktikum__bild img { width: min(100%, 240px); height: auto; display: block; margin: 0 auto; filter: drop-shadow(0 16px 20px color-mix(in srgb, var(--tief) 25%, transparent)); }
.praktikum__hinweis { font-size: .93rem; color: var(--text-2); border-left: 4px solid var(--tuerkis); padding-left: .8rem; }
.haken-liste { list-style: none; padding: 0; display: grid; gap: .4rem; }
.haken-liste li { position: relative; padding-left: 1.8rem; margin: 0; font-weight: 700; }
.haken-liste li::before { content: '✓'; position: absolute; left: 0; top: 0; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--tuerkis); color: #fff; font-size: .8rem; display: grid; place-items: center; }
html[data-nacht] .mappe { background: var(--karte); color: var(--creme); }
html[data-nacht] .mappe b { color: var(--creme); }
@media (max-width: 1040px) { .mappen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .mappen, .praktikum { grid-template-columns: minmax(0, 1fr); } .praktikum__bild { display: none; } }

/* „Keine Tipps mehr“ in allen Einblendungen (Feedback 16.10.2026) */
.tipps-aus { display: block; margin: .5rem 0 0; padding: 0; border: 0; background: none; color: inherit; opacity: .9; font: 700 .8rem/1.2 var(--f-text); text-decoration: underline; cursor: pointer; }
.neu-klein .tipps-aus { position: absolute; left: .7rem; bottom: -1.5rem; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
html[data-nacht] .tipps-aus { color: var(--creme); }
.neu-gross .tipps-aus, html[data-nacht] .neu-gross .tipps-aus, .gucker__blase .tipps-aus, html[data-nacht] .gucker__blase .tipps-aus { color: var(--tief); }
html[data-nacht] .tkopf__lieb em, .tkopf--nacht .tkopf__lieb em { color: var(--hellblau); }

/* Nachtansicht: alle Karten mit heller Kante, damit sie sich vom dunklen Grund lösen */
html[data-nacht] :is(.tipp, .schritte-liste li, .empf__karte, .kita-kachel, .mappe, .ausmal-kat, .mnz, .unterwegs__rechts, .frage, .welt-kachel, .malblatt, .lied) { border: 1px solid color-mix(in srgb, var(--creme) 22%, transparent); box-shadow: 0 14px 30px -18px black; }

/* Liederfinder: Filter wirken anklickbar statt ausgegraut (Feedback Ugeen 16.10.2026) */
.finder__tipp { display: flex; align-items: center; gap: .45rem; margin: .9rem 0 0; font-size: .95rem; color: var(--text-2); }
.finder__tipp svg { width: 18px; height: 18px; color: var(--blau); flex: none; }
.filter span { background: #fff; border: 2px solid color-mix(in srgb, var(--blau) 35%, white); box-shadow: 0 3px 0 color-mix(in srgb, var(--blau) 18%, white); }
.filter span::before { content: '+'; font-weight: 800; color: var(--blau); margin-right: .35rem; }
.filter input:checked + span::before { content: '✓'; color: #fff; }
.filter label:hover span { border-color: var(--blau); transform: translateY(-1px); }
html[data-nacht] .filter span { background: var(--karte); border-color: color-mix(in srgb, var(--creme) 30%, transparent); color: var(--creme); box-shadow: none; }

.video-ausweich { margin: .5rem 0 0; font-size: .88rem; color: var(--text-2); text-align: center; }
.video-ausweich a { font-weight: 800; }
:is(.tv-buehne, .nacht-flaeche, .seitenkopf) .video-ausweich, :is(.tv-buehne, .nacht-flaeche, .seitenkopf) .video-ausweich a { color: #fff; }

/* Einwilligung mit Bobby: unten, nicht blockierend, Ja und Nein gleich groß und gleich gestaltet (TDDDG § 25) */
.ew { position: fixed; z-index: 120; left: 50%; bottom: 16px; width: min(640px, calc(100vw - 20px)); display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 1rem; align-items: end;
  background: #fff; color: var(--text); border-radius: 28px; padding: 16px 18px 14px 10px; box-shadow: 0 30px 70px -24px rgba(10, 30, 80, .6), 0 0 0 4px var(--tuerkis);
  transform: translate(-50%, calc(100% + 40px)); opacity: 0; transition: transform .55s cubic-bezier(.2, 1.25, .4, 1), opacity .3s; }
.ew.ist-da { transform: translate(-50%, 0); opacity: 1; }
.ew.ist-weg { transform: translate(-50%, calc(100% + 40px)); opacity: 0; }
.ew__bobby { position: relative; align-self: end; margin: -40px 0 -6px; }
.ew__bobby img { display: block; width: 128px; height: auto; filter: drop-shadow(0 10px 10px rgba(10, 30, 80, .25)); transform-origin: 50% 100%; }
.ew.ist-da .ew__bobby img { animation: ew-hallo 1.4s ease .5s; }
/* Keks mit Schokostückchen, sitzt vor Bobbys Maul */
.ew__keks { position: absolute; left: 74px; top: 22px; width: 38px; height: 38px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #F2C98B, #D9A25A 70%, #B9803E); box-shadow: inset -3px -3px 0 rgba(0,0,0,.08), 0 4px 8px -3px rgba(0,0,0,.35); }
.ew__keks i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #5B3518; }
.ew__keks i:nth-child(1) { left: 9px; top: 10px; } .ew__keks i:nth-child(2) { left: 22px; top: 16px; } .ew__keks i:nth-child(3) { left: 12px; top: 24px; }
.ew.mampft .ew__keks { animation: ew-biss .9s steps(1) forwards; }
.ew.nein .ew__keks { transition: transform .6s ease, opacity .6s; transform: translate(-20px, 60px) rotate(-40deg); opacity: 0; }
@keyframes ew-biss { 0% { clip-path: circle(50% at 50% 50%); } 30% { clip-path: polygon(0 0, 70% 0, 62% 22%, 78% 30%, 70% 48%, 100% 52%, 100% 100%, 0 100%); }
  65% { clip-path: polygon(0 0, 48% 0, 40% 28%, 58% 40%, 46% 58%, 62% 72%, 56% 100%, 0 100%); } 100% { clip-path: polygon(0 20%, 30% 10%, 26% 40%, 42% 56%, 30% 78%, 38% 100%, 0 100%); } }
@keyframes ew-hallo { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-4deg) translateY(-6px); } 60% { transform: rotate(3deg); } }
.ew__blase { position: relative; margin: 0 0 .45rem; padding: .7rem 1rem; border-radius: 18px; background: var(--himmel); color: var(--tief); font: 800 1.12rem/1.25 var(--f-titel); }
.ew__blase::before { content: ''; position: absolute; left: -10px; bottom: 14px; border: 10px solid transparent; border-right-color: var(--himmel); border-left: 0; }
.ew__text { margin: 0 0 .8rem; font-size: .92rem; line-height: 1.45; color: var(--text-2); }
.ew__knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.ew .ew__knopf { min-height: 48px; border-radius: 999px; border: 0; background: var(--blau); color: #fff; font: 800 1.02rem/1 var(--f-titel); cursor: pointer; box-shadow: 0 4px 0 var(--tief); transition: transform .12s; }
.ew .ew__knopf:hover { transform: translateY(-2px); }
.ew .ew__knopf:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--tief); }
.ew__selbst { margin: .7rem 0 0; padding: 0; border: 0; background: none; color: var(--blau); font: 800 .92rem var(--f-text); text-decoration: underline; cursor: pointer; }
.ew__auswahl { margin-top: .7rem; display: grid; gap: .45rem; }
.ew__zeile { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: .6rem; align-items: start; padding: .55rem .7rem; border-radius: 14px; background: var(--himmel); cursor: pointer; font-size: .88rem; color: var(--text-2); }
.ew__zeile b { display: block; color: var(--tief); font: 800 .98rem var(--f-titel); }
.ew__zeile input { width: 20px; height: 20px; margin-top: .15rem; accent-color: var(--blau); }
.ew__fuss { margin: .6rem 0 0; font-size: .8rem; color: var(--text-2); }
.fuss__ew { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
html[data-nacht] .ew { background: var(--karte); color: var(--creme); box-shadow: 0 30px 70px -24px black, 0 0 0 3px var(--tuerkis); }
html[data-nacht] .ew__blase, html[data-nacht] .ew__zeile { background: color-mix(in srgb, var(--tief) 70%, black); color: var(--creme); }
html[data-nacht] .ew__blase::before { border-right-color: color-mix(in srgb, var(--tief) 70%, black); }
html[data-nacht] .ew__zeile b, html[data-nacht] .ew__selbst { color: var(--creme); }
@media (max-width: 600px) {
  .ew { grid-template-columns: 74px minmax(0, 1fr); gap: .6rem; padding: 12px 12px 10px 6px; bottom: 8px; border-radius: 22px; max-height: calc(100vh - 20px); overflow: auto; }
  .ew__bobby { margin: -26px 0 0; } .ew__bobby img { width: 74px; } .ew__keks { left: 44px; top: 10px; width: 24px; height: 24px; } .ew__keks i { width: 5px; height: 5px; }
  .ew__blase { font-size: 1rem; } .ew__text { font-size: .85rem; }
}
@media (prefers-reduced-motion: reduce) { .ew, .ew.ist-da .ew__bobby img, .ew.mampft .ew__keks { transition: none; animation: none; } }


/* ======================= v3 (17.10.2026): CI-Schriften, echte Figuren, Bühnen ======================= */
@font-face { font-family: 'Montebello Rounded'; src: url('../fonts/montebello-rounded.otf') format('opentype'); font-display: swap; unicode-range: U+0000-002F, U+003A-FFFF; }   /* Ziffern aus Baloo 2: die Montebello-1 sieht aus wie ein I (Feedback Artur 19.10.2026) */
@font-face { font-family: 'Outbound'; src: url('../fonts/outbound-regular.otf') format('opentype'); font-display: swap; }
:root { --f-display: 'Montebello Rounded', 'Baloo 2', system-ui, sans-serif; --f-schrift: 'Pacifico', 'Baloo 2', cursive;
  --kontur-hell: 0 2px 0 #fff, 2px 0 0 #fff, -2px 0 0 #fff, 0 -2px 0 #fff, 2px 2px 0 #fff, -2px 2px 0 #fff, 2px -2px 0 #fff, -2px -2px 0 #fff, 0 6px 0 color-mix(in srgb, var(--blau) 22%, white);
  --kontur-dunkel: 0 3px 0 var(--tief), 3px 0 0 var(--tief), -3px 0 0 var(--tief), 0 -3px 0 var(--tief), 3px 3px 0 var(--tief), -3px 3px 0 var(--tief), 3px -3px 0 var(--tief), -3px -3px 0 var(--tief), 0 8px 0 var(--nacht); }
/* Überschriften in der CI-Schrift Montebello Rounded, mit Kontur wie auf den Thumbnails (Feedback Ugeen) */
h1, h2 { font-family: var(--f-display); font-weight: 400; letter-spacing: .02em; line-height: 1.04; color: var(--blau); text-shadow: var(--kontur-hell); }
h2 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.1rem); }
:is(.welt, .seitenkopf, .nacht-flaeche, .tv-buehne, .star, .kita-band, .fuss) :is(h1, h2), html[data-nacht] :is(h1, h2), .tkopf--nacht :is(h1, h2) { color: #fff; text-shadow: var(--kontur-dunkel); }
.welt h1, .welt .h1-gleich { font-family: var(--f-display); font-weight: 400; letter-spacing: .02em; text-shadow: var(--kontur-dunkel); }
.welt-kachel__text b, .tipp b, .empf__text b, .mappe b, .ausmal-kat b, .kita-kachel b { font-family: var(--f-display); font-weight: 400; letter-spacing: .03em; }
.welt__gruss, .welt-kachel__zahl { font-family: var(--f-schrift); }
.kopf__logo img.kopf__schrift { filter: none; }

/* Bühne: echte Figuren in gezeichneter oder eigener Szene */
.buehne { position: absolute; inset: 0; overflow: hidden; isolation: isolate; background: linear-gradient(180deg, #7FC8F4 0%, #BFE6FF 55%, #E6F6FF 100%); }
.buehne--nacht { background: radial-gradient(70% 90% at 75% 10%, #2A5CB8, var(--nacht) 70%); }
.buehne--konzert { background: radial-gradient(60% 70% at 70% 30%, #3E3A9E, #1A1B4B 70%); }
.buehne__plate { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; z-index: -1; }
.buehne__land { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 34%; z-index: 0; }
.buehne--wiese .l1 { fill: #7CCB5B; } .buehne--wiese .l2 { fill: #5AB247; }
.buehne--nacht .l1 { fill: #1E4C8F; } .buehne--nacht .l2 { fill: #163C74; }
.buehne--konzert .l1 { fill: #5B2E8A; } .buehne--konzert .l2 { fill: #FFF019; opacity: .55; }
.buehne__sonne { position: absolute; right: 9%; top: 9%; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, #FFF7A0, #FFE14D 60%, #FFC93D); box-shadow: 0 0 60px 20px color-mix(in srgb, #FFE14D 50%, transparent); }
.buehne__mond { position: absolute; right: 12%; top: 10%; width: 90px; height: 90px; border-radius: 50%; box-shadow: -18px 12px 0 0 #FFF4B8; filter: drop-shadow(0 0 16px #FFF4B8); }
.buehne__sterne { position: absolute; inset: 0; background-image: radial-gradient(2px 2px at 12% 20%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 30% 12%, #FFF4B8 50%, transparent 51%), radial-gradient(2px 2px at 48% 26%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 62% 8%, #fff 50%, transparent 51%), radial-gradient(2px 2px at 86% 34%, #FFF4B8 50%, transparent 51%), radial-gradient(1.5px 1.5px at 22% 44%, #fff 50%, transparent 51%); }
.buehne__wolke { position: absolute; width: 150px; height: 46px; border-radius: 46px; background: #fff; opacity: .95; }
.buehne__wolke::before, .buehne__wolke::after { content: ''; position: absolute; background: #fff; border-radius: 50%; }
.buehne__wolke::before { width: 64px; height: 64px; left: 24px; top: -30px; } .buehne__wolke::after { width: 48px; height: 48px; left: 74px; top: -20px; }
.buehne__wolke.w1 { left: 44%; top: 12%; } .buehne__wolke.w2 { left: 66%; top: 24%; transform: scale(.7); } .buehne__wolke.w3 { left: 86%; top: 34%; transform: scale(.55); }
.buehne__spot { position: absolute; top: -10%; width: 34%; height: 110%; background: conic-gradient(from 168deg at 50% 0%, transparent 0deg, rgba(255, 240, 160, .28) 12deg, transparent 24deg); }
.buehne__spot.s1 { left: 40%; } .buehne__spot.s2 { left: 58%; } .buehne__spot.s3 { left: 76%; }
.buehne__figuren { position: absolute; z-index: 1; right: 3%; bottom: 5%; height: 80%; width: min(56%, 760px); display: flex; align-items: flex-end; justify-content: center; }
.welt__figur img { height: calc(100% * var(--h, 1)); width: auto; max-width: none; margin: 0 -1.2%; filter: drop-shadow(0 12px 10px rgba(10, 30, 80, .28)); transform-origin: 50% 100%; }
.buehne__figuren .figur { height: calc(100% * var(--h, 1) * 3 / max(3, var(--n, 3))); width: auto; max-width: none; margin: 0 -1.2%; filter: drop-shadow(0 12px 10px rgba(10, 30, 80, .28)); transform-origin: 50% 100%; }
@media (prefers-reduced-motion: no-preference) {
  .buehne__figuren .figur { animation: figur-rein .7s cubic-bezier(.2, 1.4, .4, 1) both; animation-delay: calc(var(--i, 0) * .12s + .1s); }
  .buehne__wolke { animation: wolke-zieht 60s linear infinite alternate; }
}
@keyframes figur-rein { from { transform: translateY(40%) scale(.8); opacity: 0; } }
@keyframes wolke-zieht { to { translate: -120px 0; } }
.tkopf--buehne .tkopf__innen { min-height: clamp(520px, 46vw, 660px); }
.tkopf--buehne .tkopf__innen { align-content: center; }
.tkopf--buehne .tkopf__lieb { position: relative; z-index: 2; grid-column: 1; grid-row: 2; justify-self: start; align-self: start; margin-top: -.5rem; }
.tkopf--buehne::after { display: none; }

/* Startseite v3: Himmel, Hügel und Figuren zum Antippen */
.welt--v3 { background: linear-gradient(180deg, #5BB4F0 0%, #A9DCFB 55%, #D8F1FF 100%); }
html[data-nacht] .welt--v3 { background: radial-gradient(70% 90% at 75% 10%, #2A5CB8, var(--nacht) 70%); }
.welt__himmel { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.welt--v3 .buehne__mond, html[data-nacht] .welt--v3 .buehne__sonne { display: none; }
html[data-nacht] .welt--v3 .buehne__mond { display: block; }
.welt__figuren { position: absolute; z-index: 2; right: 2%; bottom: 40px; height: min(58%, 32vw); width: min(46%, 720px); display: flex; align-items: flex-end; justify-content: flex-end; }
.welt__figuren .welt__figur img { margin: 0 -2.5%; }
.welt--v3 .welt__text { max-width: 640px; }
.welt__figur { height: 100%; display: flex; align-items: flex-end; padding: 0; border: 0; background: none; cursor: pointer; }
.welt__figur--bobby img { --h: 1.02; }
.welt__figur:hover img { animation: figur-hops .55s ease; }
.welt__figur.hops img { animation: figur-hops .55s ease; }
@keyframes figur-hops { 40% { transform: translateY(-9%) rotate(-3deg); } 70% { transform: translateY(0) scale(1.03, .97); } }
.nur-nacht, html[data-saison="winter"] .nicht-winter, .nur-winter { display: none; }
html[data-nacht] .nur-nacht, html[data-saison="winter"] .nur-winter:not(.nur-nacht) { display: flex; }
html[data-nacht] .nur-tag { display: none; }
.welt__blase { position: absolute; z-index: 3; top: 6%; left: 50%; translate: -50% 0; background: #fff; color: var(--tief); font: 400 1.25rem/1.2 var(--f-schrift); padding: .6rem 1.1rem; border-radius: 20px; box-shadow: 0 10px 24px -10px var(--tief); white-space: nowrap; }
.welt__blase::after { content: ''; position: absolute; left: 50%; bottom: -10px; translate: -50% 0; border: 10px solid transparent; border-top-color: #fff; border-bottom: 0; }
.welt--v3 .welt__innen { position: relative; z-index: 3; }
@media (min-width: 861px) { .welt__figur.nur-schmal { display: none; } }
@media (max-width: 860px) { .welt__figur.nur-breit { display: none !important; } }

@media (max-width: 860px) {
  .tkopf--buehne .tkopf__bild { position: relative; height: 340px; }
  .tkopf--buehne .tkopf__innen { min-height: 0; }
  .buehne__figuren { width: 100%; right: 0; height: 90%; }
  .buehne__figuren .figur { height: calc(100% * var(--h, 1) * 3.4 / max(3.4, var(--n, 3))); margin: 0 -3%; }
  .buehne__sonne { width: 70px; height: 70px; } .buehne__mond { width: 60px; height: 60px; }
  .welt__figuren { position: relative; right: auto; bottom: auto; width: 100%; height: 260px; margin-top: -10px; }
  .welt--v3 .welt__innen { padding-bottom: 0; }
}


/* Schatzkiste im Kopf */
.kopf__schatz { flex: none; display: inline-flex; align-items: center; gap: .3rem; height: 46px; padding: 0 .85rem 0 .6rem; border-radius: 999px; background: color-mix(in srgb, var(--tief) 45%, transparent); border: 2px solid color-mix(in srgb, white 35%, transparent); color: #fff; font: 800 1.05rem/1 var(--f-titel); text-decoration: none; }
.kopf__schatz svg { width: 22px; height: 22px; color: var(--gelb); fill: var(--gelb); }
.kopf__schatz.hat-gold { border-color: var(--gelb); box-shadow: 0 0 14px -2px var(--gelb); }
.kopf__schatz:hover { text-decoration: none; background: var(--tief); }
.schatz-hinweis { display: flex; gap: .6rem; align-items: center; margin: .7rem 0 0; padding: .7rem 1rem; border-radius: 16px; background: color-mix(in srgb, var(--gelb) 22%, white); color: var(--tief); font-size: .95rem; }
.schatz-hinweis svg { width: 30px; height: 30px; flex: none; color: #E6A800; fill: var(--gelb); }
html[data-nacht] .schatz-hinweis { background: color-mix(in srgb, var(--gelb) 18%, var(--tief)); color: var(--creme); }
/* Belohnung */
.belohnung { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 16px; background: color-mix(in srgb, var(--nacht) 55%, transparent); opacity: 0; transition: opacity .3s; overflow: hidden; }
.belohnung.ist-da { opacity: 1; }
.belohnung__karton { position: relative; width: min(620px, 100%); background: #fff; border-radius: 30px; padding: 1.6rem 1.4rem 1.4rem; text-align: center; box-shadow: 0 40px 80px -30px black, 0 0 0 5px var(--gelb); transform: scale(.85); transition: transform .45s cubic-bezier(.2, 1.4, .4, 1); }
.belohnung.ist-da .belohnung__karton { transform: none; }
.belohnung__bobby { position: absolute; left: -36px; bottom: -10px; width: 120px; height: auto; filter: drop-shadow(0 10px 10px rgba(0,0,0,.25)); }
.belohnung__titel { margin: 0; font: 400 clamp(1.8rem, 1.2rem + 2vw, 2.4rem)/1.05 var(--f-display); color: var(--blau); text-shadow: var(--kontur-hell); }
.belohnung__lied { margin: .2rem 0 1rem; font: 400 1.2rem var(--f-schrift); color: var(--tief); }
.belohnung__liste { list-style: none; padding: 0; margin: 0 0 1.2rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.belohnung__liste li { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .7rem .5rem; border-radius: 18px; background: var(--himmel); animation: geschenk-rein .5s cubic-bezier(.2, 1.4, .4, 1) both; }
.belohnung__liste li:nth-child(2) { animation-delay: .25s; } .belohnung__liste li:nth-child(3) { animation-delay: .5s; }
@keyframes geschenk-rein { from { transform: translateY(20px) scale(.6); opacity: 0; } }
.belohnung__rahmen { display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 0 0 4px var(--gelb); }
.belohnung__rahmen img { width: 100%; height: 100%; object-fit: cover; }
.belohnung__rahmen--karte img, .belohnung__ausmal img { object-fit: contain; }
.belohnung__liste b { font: 800 .95rem/1.15 var(--f-titel); color: var(--tief); }
.belohnung__liste small, .belohnung__liste a { font-size: .82rem; font-weight: 700; }
.konfetti { position: absolute; top: -12px; width: 10px; height: 16px; border-radius: 3px; animation: konfetti var(--d) ease-in forwards; pointer-events: none; }
@keyframes konfetti { to { transform: translate(var(--x), 105vh) rotate(var(--r)); } }
/* Schatzkiste: Stand, Weg, Sticker, Sammelkarten */
.schatz-stand { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin: 0 0 1.2rem; }
.schatz-stand div { padding: .7rem; border-radius: 16px; background: var(--himmel); text-align: center; }
.schatz-stand b { display: block; font: 400 2rem/1 var(--f-display); color: var(--blau); }
.schatz-stand span { font-size: .85rem; font-weight: 700; color: var(--text-2); }
.schatz-weg { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; counter-reset: weg; }
.schatz-weg li { counter-increment: weg; position: relative; margin: 0; padding: 1.2rem 1.2rem 1.2rem 4.2rem; border-radius: var(--r-gross); background: var(--karte); box-shadow: var(--schatten); }
.schatz-weg li::before { content: counter(weg); position: absolute; left: 1rem; top: 1.1rem; width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; background: var(--gelb); color: var(--tief); font: 400 1.4rem var(--f-display); }
.schatz-weg b { display: block; font: 400 1.25rem var(--f-display); color: var(--blau); letter-spacing: .03em; }
.album .sticker__bild img { aspect-ratio: 16 / 9; object-fit: cover; }
.sticker__gold { position: absolute; right: -8px; top: -8px; width: 34px; height: 34px; border-radius: 50%; display: none; place-items: center; background: var(--gelb); box-shadow: 0 0 0 3px #fff, 0 4px 10px -4px black; }
.sticker__gold svg { width: 20px; height: 20px; fill: var(--tief); }
.sticker.gold .sticker__gold { display: grid; }
.sticker.gold .sticker__bild { box-shadow: 0 0 0 4px var(--gelb); }
.sammelkarten { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; }
.sammelkarte { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: .7rem .6rem .8rem; border-radius: 20px; background: linear-gradient(160deg, #fff, var(--himmel)); box-shadow: var(--schatten); border: 3px solid #fff; text-align: center; transition: transform .2s; }
.sammelkarte__bild { height: 170px; display: flex; align-items: flex-end; justify-content: center; }
.sammelkarte .figur { height: calc(170px * var(--h, 1)); width: auto; max-width: 100%; object-fit: contain; filter: brightness(0) opacity(.18); transition: filter .4s; }
.sammelkarte.hat .figur { filter: drop-shadow(0 8px 8px rgba(10, 30, 80, .25)); }
.sammelkarte.hat { border-color: var(--gelb); }
.sammelkarte.hat:hover { transform: translateY(-4px) rotate(-1deg); }
.sammelkarte b { font: 400 1.05rem/1.1 var(--f-display); color: var(--blau); letter-spacing: .03em; }
.sammelkarte:not(.hat) b { color: var(--text-2); }
.sammelkarte small { font-size: .75rem; color: var(--text-2); }
.geschenk-leer { color: var(--text-2); }
/* Einwilligung: Ja und Selbst zusammenstellen nebeneinander, Ablehnen als Schrift-Knopf (Wunsch Artur, 17.10.2026) */
.ew .ew__knopf--zwei { background: #fff; color: var(--blau); box-shadow: inset 0 0 0 3px var(--blau), 0 4px 0 var(--tief); }
.ew__nein { display: block; margin: .8rem auto 0; padding: .2rem; border: 0; background: none; color: var(--tief); font: 700 .95rem var(--f-text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
html[data-nacht] .ew__nein { color: var(--creme); }
@media (max-width: 600px) { .belohnung__liste, .schatz-weg { grid-template-columns: minmax(0, 1fr); } .belohnung__bobby { display: none; } .belohnung__liste li { flex-direction: row; text-align: left; } .belohnung__rahmen { width: 90px; flex: none; } }


/* Kita v3: Morgenkreis-Planer, Liederplan, Leitung */
.mk { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(1.4rem, 3vw, 2.6rem); align-items: start; }
.mk__wahl { display: grid; gap: .8rem; margin: 1rem 0 1.2rem; }
.mk__wahl fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.mk__wahl legend { font: 800 .95rem var(--f-titel); color: var(--tief); margin-bottom: .3rem; width: 100%; }
.mk__wahl label { cursor: pointer; }
.mk__wahl input { position: absolute; opacity: 0; }
.mk__wahl label:has(input) { padding: .5rem .9rem; border-radius: 999px; background: #fff; border: 2px solid var(--linie); font: 700 .95rem var(--f-titel); color: var(--tief); }
.mk__wahl label:has(input:checked) { background: var(--blau); border-color: var(--blau); color: #fff; }
.mk__wahl label:has(input:focus-visible) { outline: 3px solid var(--gelb); }
.mk__plan { background: #fff; border-radius: var(--r-gross); padding: 1.3rem; box-shadow: var(--schatten-gross); border-top: 8px solid var(--tuerkis); }
.mk__titel { margin: 0 0 .8rem; font: 400 1.6rem var(--f-display); color: var(--blau); }
.mk__titel span { display: block; font: 700 .95rem var(--f-text); color: var(--text-2); }
.mk__schritte { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; counter-reset: mk; }
.mk__schritte li { counter-increment: mk; display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) auto; gap: .7rem; align-items: center; margin: 0; padding: .55rem .6rem; border-radius: 16px; background: var(--himmel); }
.mk__nr::before { content: counter(mk); display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--tuerkis); color: var(--tief); font: 400 1.2rem var(--f-display); }
.mk__text b { display: block; font: 800 1.02rem var(--f-titel); color: var(--tief); }
.mk__text span { font-size: .88rem; color: var(--text-2); }
.mk__lied { display: flex; align-items: center; gap: .5rem; max-width: 210px; text-decoration: none; font: 800 .88rem/1.15 var(--f-titel); color: var(--blau); }
.mk__lied img { width: 74px; height: 42px; object-fit: cover; border-radius: 8px; flex: none; }
.mk__fuss { margin: .8rem 0 0; font-size: .75rem; color: var(--text-2); }
.jahreskreis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.monat { background: var(--karte); border-radius: var(--r-gross); padding: 1rem; box-shadow: var(--schatten); border-top: 6px solid var(--linie); }
.monat.ist-jetzt { border-top-color: var(--gelb); box-shadow: 0 0 0 3px var(--gelb), var(--schatten); }
.monat h3 { margin: 0; font: 400 1.4rem var(--f-display); color: var(--blau); letter-spacing: .03em; }
.monat p { margin: 0 0 .6rem; font-weight: 700; color: var(--text-2); font-size: .9rem; }
.monat ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.monat li { margin: 0; }
.monat a { display: flex; align-items: center; gap: .5rem; text-decoration: none; color: var(--tief); font-weight: 700; font-size: .9rem; }
.monat img { width: 56px; height: 32px; object-fit: cover; border-radius: 6px; flex: none; }
.leitung { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; align-items: center; }
.leitung__punkte { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.leitung__punkte li { margin: 0; padding: 1rem; border-radius: 18px; background: var(--karte); box-shadow: var(--schatten); }
.leitung__punkte b { display: block; font: 400 1.15rem var(--f-display); color: var(--blau); letter-spacing: .03em; margin-bottom: .2rem; }
.leitung__punkte span { font-size: .92rem; color: var(--text-2); }
html[data-nacht] .mk__plan, html[data-nacht] .monat, html[data-nacht] .leitung__punkte li, html[data-nacht] .mk__wahl label:has(input:not(:checked)) { background: var(--karte); color: var(--creme); }
@media (max-width: 1040px) { .jahreskreis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mk, .leitung { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .jahreskreis, .leitung__punkte { grid-template-columns: minmax(0, 1fr); } .mk__schritte li { grid-template-columns: 2.2rem minmax(0, 1fr); } .mk__lied { grid-column: 2; } }
@media (max-width: 600px) { .kopf__schatz { height: 38px; padding: 0 .55rem 0 .4rem; font-size: .9rem; gap: .2rem; } .kopf__schatz svg { width: 18px; height: 18px; } }
@media (max-width: 350px) { .kopf__logo img.kopf__schrift { display: none; } .nacht-schalter { width: 38px; height: 38px; } }
@media (max-width: 400px) { .kopf__logo img.kopf__schrift { width: 104px; } .kopf__bobby { width: 30px; height: 30px; } .kopf__innen { gap: .35rem; } .menue-knopf { padding-inline: .6rem; } }

/* Bobby und seine Freunde (Startseite) */
.freunde-abschnitt { background: linear-gradient(180deg, var(--grund) 0%, var(--grund) 64%, #8FD16E 64%, #6CBF52 100%); }
html[data-nacht] .freunde-abschnitt { background: linear-gradient(180deg, var(--grund) 0%, var(--grund) 55%, #1E4C8F 55%, #163C74 100%); }
.freunde { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; justify-content: center; align-items: flex-end; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 0; }
.freunde li { flex: none; margin: 0 -.6rem; display: flex; flex-direction: column; align-items: center; }
.freund { padding: 0; border: 0; background: none; cursor: pointer; height: 230px; display: flex; align-items: flex-end; }
.freund .figur { height: calc(230px * var(--h, 1)); width: auto; filter: drop-shadow(0 10px 8px rgba(10, 30, 80, .3)); transform-origin: 50% 100%; }
.freund:hover .figur, .freund.hops .figur { animation: figur-hops .55s ease; }
.freunde li span { margin-top: .4rem; padding: .2rem .7rem; border-radius: 999px; background: #fff; color: var(--tief); font: 400 1rem var(--f-display); letter-spacing: .03em; box-shadow: 0 4px 10px -6px var(--tief); }
@media (max-width: 860px) { .freunde { justify-content: flex-start; padding: 0 1rem; } .freund { height: 170px; } .freund .figur { height: calc(170px * var(--h, 1)); } }


@media print { body.drucke-planer > *:not(main), body.drucke-planer main > *:not(#planer), body.drucke-planer .mk__kopf { display: none !important; } body.drucke-planer .mk { display: block; } body.drucke-planer .mk__plan { box-shadow: none; } }

@media print {
  .tkopf__bild, .tkopf__lieb, .tkopf__sprung, .kopf, .fuss, .fuss__welle, .springen, .seitenkopf .welt__huegel, .video, .knopf, .liedblatt__werkzeuge, .entwurf-zeile, .nicht-drucken, .mitsingen { display: none !important; }
  body { background: #fff; color: #000; font-size: 12pt; }
  .seitenkopf { background: none !important; color: #000; }
  .seitenkopf h1 { color: #000; text-shadow: none; }
  .seitenkopf__lead, .brotkrumen, .steckbrief { display: none; }
  html.druck-liedblatt main > *:not(.druck-ziel) { display: none !important; }
  html.druck-liedblatt .druck-ziel { display: block !important; border: 0; padding: 0; background: none !important; }
  html.druck-liedblatt .druck-ziel .inhalt__titel { display: none; }
  .liedblatt { background: none; box-shadow: none; border: 0; }
  .druck-fuss { display: block !important; margin-top: 2rem; font-size: 9pt; color: #444; }
}
.druck-fuss { display: none; }
.nacht-flaeche::after { top: 1.4rem; right: 1.6rem; width: 46px; height: 46px; box-shadow: -10px 7px 0 0 var(--gelb); }
.nacht-flaeche .abschnitt__kopf { padding-right: 64px; }
/* Liedseiten: Szene des Videos als weicher Hintergrund */
.seitenkopf__szene { position: absolute; inset: -40px; z-index: -1; background-position: center; background-size: cover; filter: blur(18px) saturate(1.15); opacity: .5; }
.seitenkopf--szene { background: linear-gradient(160deg, color-mix(in srgb, var(--blau) 88%, transparent), color-mix(in srgb, var(--tief) 92%, transparent)); }
@media (max-width: 900px) { .tv-bobby { display: none; } }

/* Lange Mix-Videos */
.mixraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 1.6rem; }
.mixkarte .video { border-width: 5px; border-radius: var(--r-mittel); box-shadow: var(--schatten); }
.mixkarte .video__knopf { width: 64px; height: 64px; }
.mixkarte h3 { margin: .8rem 0 .2rem; font-size: 1.2rem; }
.mixkarte p { margin: 0; color: var(--text-2); font-weight: 700; font-size: .92rem; }
/* Anleitungen als nummerierte Karten */
.schritte-liste { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: .8rem; counter-reset: schritt; }
.schritte-liste li { counter-increment: schritt; position: relative; margin: 0; background: var(--karte); border-radius: var(--r-mittel); padding: 1rem 1.2rem 1rem 4.4rem; box-shadow: var(--schatten); }
.schritte-liste li::before { content: counter(schritt); position: absolute; left: 1rem; top: 50%; translate: 0 -50%; width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tuerkis) 85%, white), var(--tuerkis)); color: var(--tief); font: 800 1.2rem var(--f-titel); box-shadow: 0 3px 0 color-mix(in srgb, var(--tuerkis) 50%, var(--tief)); }
.schritte-liste b { display: block; font: 800 1.12rem/1.2 var(--f-titel); color: var(--tief); margin-bottom: .15rem; }
html[data-nacht] .schritte-liste b { color: var(--creme); }

/* Lieder ohne Video: Albumbühne */
.albumbuehne { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; justify-items: center; }
.albumbuehne__cover { width: min(100%, 340px); aspect-ratio: 1; object-fit: cover; border-radius: var(--r-mittel); border: 7px solid #fff; box-shadow: var(--schatten-gross); rotate: -2deg; }
.albumbuehne__text { text-align: center; }
.albumbuehne__text b { display: block; font: 800 1.2rem var(--f-titel); }
.albumbuehne__text span { display: block; margin-bottom: .6rem; }
.albumbuehne .dienste { justify-content: center; }
.albumbuehne .dienst { color: var(--text); }

/* ---------------- Neu bei Bobby: Hinweis auf das neueste Video */
.neu-hinweis { position: fixed; left: 16px; bottom: 16px; z-index: 70; width: min(360px, calc(100vw - 32px));
  background: #fff; color: var(--text); border-radius: 22px; box-shadow: 0 14px 40px rgba(18, 67, 136, .28), 0 0 0 3px var(--blau);
  transform: translateY(calc(100% + 40px)); opacity: 0; transition: transform .5s cubic-bezier(.2, 1.3, .4, 1), opacity .3s; }
.neu-hinweis.ist-sichtbar { transform: none; opacity: 1; }
.neu-hinweis__link { display: flex; gap: 12px; align-items: center; padding: 10px 44px 10px 10px; color: inherit; text-decoration: none; }
.neu-hinweis__bild { position: relative; flex: none; width: 120px; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--himmel); }
.neu-hinweis__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.neu-hinweis__play { position: absolute; inset: 0; margin: auto; width: 34px; height: 34px; border-radius: 50%; background: var(--blau); box-shadow: 0 0 0 3px #fff; }
.neu-hinweis__play::after { content: ""; position: absolute; left: 13px; top: 10px; border: 7px solid transparent; border-left: 11px solid #fff; border-right: 0; }
.neu-hinweis__text { display: grid; gap: 2px; min-width: 0; }
.neu-hinweis__marke { justify-self: start; font: 800 .72rem/1 "Baloo 2", sans-serif; letter-spacing: .02em; text-transform: uppercase; color: #fff; background: var(--blau); border-radius: 999px; padding: 4px 9px 3px; }
.neu-hinweis__titel { font: 800 .98rem/1.2 "Baloo 2", sans-serif; color: var(--tief); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.neu-hinweis__los { font-weight: 700; font-size: .85rem; color: var(--blau); text-decoration: underline; text-underline-offset: 3px; }
.neu-hinweis__link:hover .neu-hinweis__titel, .neu-hinweis__link:focus-visible .neu-hinweis__titel { color: var(--blau); }
.neu-hinweis__zu { position: absolute; top: 4px; right: 4px; width: 44px; height: 44px; border: 0; background: none; border-radius: 50%;
  font-size: 1.6rem; line-height: 1; color: var(--text-2); cursor: pointer; }
.neu-hinweis__zu:hover, .neu-hinweis__zu:focus-visible { background: var(--himmel); color: var(--tief); }
@media (prefers-reduced-motion: reduce) { .neu-hinweis { transition: opacity .2s; transform: none; } }

/* ---------------- Bobby im Fußbereich: fällt von oben herein, federt nach, verabschiedet sich */
.fuss-bobby { position: absolute; right: max(16px, 9vw); top: -140px; width: 92px; z-index: 2; pointer-events: none;
  transform-origin: 50% 100%; transform: rotate(var(--neigung, 0deg)); transition: transform .4s ease-out; }
.fuss-bobby img { width: 100%; height: auto; display: block; filter: drop-shadow(0 6px 6px rgba(0,0,0,.18)); }
.fuss-bobby__blase { position: absolute; z-index: 1; right: 92%; top: -4px; white-space: nowrap; background: #fff; color: var(--tief);
  font: 800 .9rem/1 "Baloo 2", sans-serif; padding: 8px 12px; border-radius: 14px 14px 2px 14px; box-shadow: 0 4px 12px rgba(0,0,0,.15);
  opacity: 0; transform: scale(.6); transform-origin: 100% 100%; transition: opacity .3s, transform .35s cubic-bezier(.2, 1.4, .4, 1); }
.fuss-bobby.ist-gelandet .fuss-bobby__blase { opacity: 1; transform: none; transition-delay: .25s; }
@media (prefers-reduced-motion: no-preference) {
  .fuss-bobby.bereit .fuss-bobby__sprung { transform: translateY(-110vh); visibility: hidden; }
  .fuss-bobby.landet .fuss-bobby__sprung { visibility: visible; }
  .fuss-bobby.landet .fuss-bobby__sprung { animation: bobby-landen 1.15s cubic-bezier(.45, 0, .55, 1) forwards; }
  .fuss-bobby.ist-gelandet .fuss-bobby__wink { animation: bobby-winken 2.6s ease-in-out infinite; transform-origin: 50% 100%; }
}
@keyframes bobby-landen {
  0% { transform: translateY(-110vh) rotate(-12deg); }
  62% { transform: translateY(0) rotate(4deg) scale(1, 1); }
  72% { transform: translateY(0) rotate(0) scale(1.12, .84); }
  84% { transform: translateY(-18px) rotate(-2deg) scale(.96, 1.05); }
  100% { transform: translateY(0) rotate(0) scale(1, 1); }
}
@keyframes bobby-winken { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-3deg) translateY(-2px); } 50% { transform: rotate(0); } 75% { transform: rotate(2deg); } }
.fuss-bobby .fuss-bobby__sprung { display: none; }
.fuss-bobby.bereit .fuss-bobby__sprung, .fuss-bobby.landet .fuss-bobby__sprung { display: block; }
.fuss-bobby.bereit .fuss-bobby__wink, .fuss-bobby.landet .fuss-bobby__wink { display: none; }
@media (max-width: 600px) { .fuss-bobby { width: 70px; top: -106px; } .fuss-bobby__blase { font-size: .8rem; } }

/* ---------------- Bobby wandert im Seitenkopf mit (nur Computer, beim Scrollen) */
.wanderer { position: absolute; bottom: 6px; right: 4%; width: 74px; height: auto; z-index: 1; pointer-events: none;
  transform: translateX(calc(var(--weg, 0) * -1 * (min(100vw, 1400px) - 140px))) translateY(var(--hopser, 0px)) rotate(var(--schritt, 0deg)); transform-origin: 50% 100%; }
@media (max-width: 860px), (prefers-reduced-motion: reduce) { .wanderer { display: none; } }

/* ---------------- Bobby schläft auf der Fehlerseite */
.bobby-schlaeft { width: min(220px, 50vw); height: auto; margin: .4rem 0 1rem; filter: drop-shadow(0 8px 10px rgba(0,0,0,.18)); }
@media (prefers-reduced-motion: no-preference) { .bobby-schlaeft { animation: bobby-atmen 3.4s ease-in-out infinite; transform-origin: 50% 100%; } }
@keyframes bobby-atmen { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.02, 1.04); } }

/* ---------------- Gruß beim Umschalten von Tag und Nacht */
.gruss-bobby { position: fixed; right: 18px; bottom: 0; z-index: 75; width: 110px; pointer-events: none;
  transform: translateY(110%); transition: transform .5s cubic-bezier(.2, 1.3, .4, 1); }
.gruss-bobby.ist-da { transform: translateY(12%); }
.gruss-bobby img { width: 100%; height: auto; display: block; filter: drop-shadow(0 6px 10px rgba(0,0,0,.25)); }
.gruss-bobby__blase { position: absolute; right: 78%; top: 6px; white-space: nowrap; background: #fff; color: var(--tief);
  font: 800 .95rem/1 "Baloo 2", sans-serif; padding: 8px 12px; border-radius: 14px 14px 2px 14px; box-shadow: 0 4px 12px rgba(0,0,0,.2); }
@media (prefers-reduced-motion: reduce) { .gruss-bobby { transition: none; } }

/* ---------------- Bobby-Gucker: schaut vom rechten Rand herein und hat einen Liedtipp */
.gucker { position: fixed; right: 0; bottom: 150px; z-index: 65; width: 92px; padding: 0; border: 0; background: none; cursor: pointer;
  transform: translateX(105%) rotate(-8deg); transform-origin: 50% 100%; transition: transform .6s cubic-bezier(.2, 1.3, .4, 1); }
.gucker.ist-da { transform: translateX(22%) rotate(-8deg); }
.gucker:hover, .gucker:focus-visible { transform: translateX(10%) rotate(-4deg); }
.gucker img { width: 100%; height: auto; display: block; filter: drop-shadow(-4px 6px 8px rgba(0,0,0,.25)); }
.gucker__blase { position: fixed; right: 84px; bottom: 210px; z-index: 66; width: min(290px, calc(100vw - 110px)); background: #fff; color: var(--text);
  border-radius: 20px 20px 4px 20px; padding: 14px 16px 16px; box-shadow: 0 14px 34px rgba(18, 67, 136, .28), 0 0 0 3px var(--blau); }
.gucker__text { font: 700 1rem/1.35 "Baloo 2", sans-serif; color: var(--tief); margin: 0 26px .7rem 0; }
.gucker__link.knopf { padding: .45rem 1rem; font-size: .95rem; }
.gucker__noch { margin-left: .4rem; border: 0; background: none; color: var(--blau); font-weight: 700; text-decoration: underline; cursor: pointer; padding: .5rem .3rem; }
.gucker__zu { position: absolute; top: 2px; right: 2px; width: 40px; height: 40px; border: 0; background: none; border-radius: 50%; font-size: 1.5rem; color: var(--text-2); cursor: pointer; }
.gucker__zu:hover, .gucker__zu:focus-visible { background: var(--himmel); }
@media (max-width: 600px) { .gucker { width: 72px; bottom: 170px; } .gucker__blase { right: 64px; bottom: 220px; } }
@media (prefers-reduced-motion: reduce) { .gucker { transition: none; } }

/* ---------------- Sticker: Meldung und Album */
.sticker-meldung { position: fixed; left: 50%; top: 92px; z-index: 300; display: flex; gap: 12px; align-items: center; max-width: calc(100vw - 32px);
  background: #fff; border-radius: 20px; padding: 10px 16px 10px 10px; box-shadow: 0 14px 34px rgba(18, 67, 136, .3), 0 0 0 3px var(--tuerkis);
  transform: translate(-50%, -160%); transition: transform .55s cubic-bezier(.2, 1.4, .4, 1); }
.sticker-meldung.ist-da { transform: translate(-50%, 0); }
.sticker-meldung img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 4px solid var(--tuerkis); box-shadow: 0 0 0 2px var(--tief); }
.sticker-meldung b { display: block; font: 800 1.1rem/1.1 "Baloo 2", sans-serif; color: var(--tief); }
.sticker-meldung__text { display: block; font-size: .9rem; }
.sticker-meldung a { font-weight: 700; font-size: .9rem; }
@media (prefers-reduced-motion: reduce) { .sticker-meldung { transition: none; } }
.album-stand { margin-top: 1.2rem; max-width: 420px; }
.album-stand__balken { height: 18px; border-radius: 999px; background: color-mix(in srgb, #fff 25%, transparent); overflow: hidden; box-shadow: inset 0 0 0 2px #fff; }
.album-stand__balken span { display: block; height: 100%; background: var(--tuerkis); border-radius: 999px; transition: width .8s ease; }
.album-stand p { margin-top: .4rem; font-weight: 700; }
.album-bobby { width: min(220px, 40vw); height: auto; justify-self: center; filter: drop-shadow(0 10px 12px rgba(0,0,0,.25)); }
.album-hinweis { color: var(--text-2); max-width: 70ch; margin-bottom: 1.4rem; }
.album { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 1.1rem; }
.sticker a { display: grid; justify-items: center; gap: .5rem; text-decoration: none; color: var(--text-2); text-align: center; font-weight: 700; font-size: .88rem; }
.sticker__bild { width: 110px; height: 110px; border-radius: 50%; overflow: hidden; display: block; position: relative;
  background: var(--himmel); border: 3px dashed color-mix(in srgb, var(--blau) 35%, white); }
.sticker__bild img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(1.25) opacity(.35); }
.sticker__bild::after { content: "?"; position: absolute; inset: 0; display: grid; place-items: center; font: 800 2.4rem "Baloo 2", sans-serif; color: var(--blau); }
.sticker.hat .sticker__bild { border: 5px solid var(--tuerkis); box-shadow: 0 0 0 3px var(--tief), 0 8px 16px rgba(0,0,0,.18); transform: rotate(-4deg); }
.sticker.hat:nth-child(even) .sticker__bild { transform: rotate(3deg); }
.sticker.hat .sticker__bild img { filter: none; }
.sticker.hat .sticker__bild::after { content: none; }
.sticker.hat a { color: var(--tief); }
.urkunde-bereich { margin-top: 2.5rem; padding: 1.6rem; border-radius: var(--r-gross); background: var(--creme); text-align: center; }
.urkunde-name { display: inline-grid; gap: .3rem; font-weight: 700; margin: .8rem 0 1.2rem; text-align: left; }
.urkunde-name input { font: inherit; padding: .6rem .9rem; border-radius: 12px; border: 2px solid var(--blau); min-width: 240px; }
.urkunde-blatt { margin: 0 auto 1.2rem; max-width: 520px; background: #fff; border: 8px solid var(--blau); box-shadow: 0 0 0 8px var(--tuerkis); border-radius: 26px; padding: 1.6rem 1.4rem 1.8rem; }
.urkunde-blatt img { width: 130px; height: auto; margin: 0 auto .4rem; display: block; }
.urkunde-blatt__titel { font: 800 2.6rem/1 "Baloo 2", sans-serif; color: var(--blau); }
.urkunde-blatt__name { font: 400 2rem/1.3 var(--f-schrift); color: var(--tief); border-bottom: 2px solid var(--tief); margin: .4rem auto; max-width: 80%; min-height: 2.6rem; }
.urkunde-blatt__datum { color: var(--text-2); font-size: .9rem; margin-top: .6rem; }
.album-zurueck { margin-top: 2rem; text-align: center; }
@media print {
  body.drucke-urkunde * { visibility: hidden; }
  body.drucke-urkunde .urkunde-blatt, body.drucke-urkunde .urkunde-blatt * { visibility: visible; }
  body.drucke-urkunde .urkunde-blatt { position: fixed; left: 0; right: 0; top: 2cm; margin: auto; max-width: 16cm; }
}

/* ---------------- Tageszeit und Jahreszeit */
.tageslicht { position: absolute; inset: 0; z-index: -1; pointer-events: none; transition: opacity 1s; opacity: 0; }
html[data-tageszeit="morgen"] .tageslicht { opacity: 1; background: linear-gradient(180deg, rgba(255, 210, 170, .28), transparent 50%); }
html[data-tageszeit="abend"] .tageslicht { opacity: 1; background: linear-gradient(180deg, rgba(255, 150, 70, .32) 0%, rgba(255, 170, 110, .12) 40%, transparent 70%); }
html[data-tageszeit="nacht"]:not([data-nacht]) .tageslicht { opacity: 1; background: linear-gradient(180deg, rgba(12, 30, 80, .55), rgba(12, 30, 80, .2)); }
.schnee { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.schnee i { position: absolute; top: -12px; width: var(--g, 8px); height: var(--g, 8px); border-radius: 50%; background: #fff; opacity: .85;
  animation: schneien var(--d, 9s) linear var(--v, 0s) infinite; }
@keyframes schneien { to { transform: translate(var(--x, 30px), 110vh); } }
@media (prefers-reduced-motion: reduce) { .schnee { display: none; } }

/* ---------------- Farbregel (Artur, 12.10.2026): Gelb nur auf dunklem Blau (Logo, Funkeln, Zahlen, Fußüberschriften).
   Auf hellen Flächen ist Türkis aus Bobbys Decke die zweite Kontrastfarbe; als Textfarbe auf Weiß das tiefe Türkis. */
:root { --tuerkis-tief: #07685E; }
.welt__gruss { color: #fff; text-shadow: 0 2px 0 var(--tief), 0 0 18px color-mix(in srgb, var(--tief) 70%, transparent); }
.hinweis { background: color-mix(in srgb, var(--tuerkis) 16%, white); border-left: 6px solid var(--tuerkis); }
.momente__liste li:nth-child(1) .moment__ikon { background: color-mix(in srgb, var(--tuerkis) 35%, white); color: var(--tief); }

/* Gefüllte Knöpfe: Schrift immer weiß, auch in Textbereichen mit eigener Linkfarbe (Fehler Noten-Kasten, Artur 12.10.) */
.download a.knopf, .download a.knopf:hover, .download a.knopf:visited, .gucker__blase a.knopf, .gucker__blase a.knopf:hover { color: #fff !important; }

/* ---------------- Liedseiten: „Kurz erklärt“ + „Auf einen Blick“, Abschnitte mit Symbol und Bobby-Pose */
.blick { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.6rem; align-items: start; }
.blick-karte { background: #fff; border-radius: var(--r-gross); padding: 1.3rem 1.4rem 1.4rem; box-shadow: var(--schatten); border-top: 8px solid var(--tuerkis); }
.blick-karte h2 { font-size: 1.35rem; margin-bottom: .8rem; }
.blick__raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin: 0; }
.blick__kachel { background: var(--himmel); border-radius: 14px; padding: .55rem .75rem .6rem; }
.blick__kachel dt { font: 800 .74rem/1.2 "Baloo 2", sans-serif; text-transform: uppercase; letter-spacing: .03em; color: var(--tuerkis-tief); }
.blick__kachel dd { margin: .15rem 0 0; font-weight: 700; color: var(--tief); font-size: .95rem; line-height: 1.3; }
html[data-nacht] .blick-karte { background: color-mix(in srgb, var(--nacht) 85%, white); }
html[data-nacht] .blick__kachel { background: color-mix(in srgb, var(--tief) 70%, black); }
html[data-nacht] .blick__kachel dd { color: var(--creme); }
html[data-nacht] .blick__kachel dt { color: var(--hellblau); }
@media (max-width: 860px) { .blick { grid-template-columns: 1fr; } }
.inhalt__titel { position: sticky; top: 150px; align-self: start; }
.inhalt__ikon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--blau); color: #fff; margin-bottom: .7rem;
  box-shadow: 0 5px 0 var(--tief); transform: rotate(-4deg); }
.inhalt__ikon svg { width: 28px; height: 28px; }
.inhalt:nth-of-type(even) .inhalt__ikon { background: var(--tuerkis); box-shadow: 0 5px 0 var(--tuerkis-tief); transform: rotate(3deg); }
.inhalt__titel h2 { position: static; }
.inhalt__pose { display: block; width: 150px; height: auto; margin-top: 1.2rem; filter: drop-shadow(0 8px 10px rgba(0,0,0,.18)); }
@media (prefers-reduced-motion: no-preference) { .inhalt__pose { animation: bobby-winken 3.2s ease-in-out infinite; transform-origin: 50% 100%; } }
@media (max-width: 860px) { .inhalt__pose { display: none; } .inhalt__titel { position: static; display: flex; align-items: center; gap: .8rem; } .inhalt__ikon { margin: 0; flex: none; } }
/* Nummerierte Anleitungen als Karten */
.inhalt__text ol { list-style: none; counter-reset: schritt; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .9rem; margin: 1rem 0 1.4rem; }
.inhalt__text ol > li { counter-increment: schritt; position: relative; background: #fff; border-radius: 18px; padding: 1rem 1rem 1rem 3.4rem; box-shadow: 0 6px 18px -10px color-mix(in srgb, var(--tief) 60%, transparent); margin: 0; }
.inhalt__text ol > li::before { content: counter(schritt); position: absolute; left: .9rem; top: .9rem; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--tuerkis); color: #fff; font: 800 1.05rem "Baloo 2", sans-serif; box-shadow: 0 3px 0 var(--tuerkis-tief); }
.inhalt__text ol > li strong:first-child { display: block; color: var(--tief); font-family: "Baloo 2", sans-serif; font-size: 1.05rem; }
html[data-nacht] .inhalt__text ol > li { background: color-mix(in srgb, var(--nacht) 85%, white); }
.inhalt:nth-of-type(odd) .inhalt__text ol > li { background: var(--himmel); box-shadow: none; }
/* Weitere Sprachen einklappbar */
.mehr-sprachen { margin-top: 1.4rem; border-top: 2px dashed var(--linie); padding-top: 1rem; }
.mehr-sprachen summary { cursor: pointer; font: 800 1.1rem "Baloo 2", sans-serif; color: var(--blau); list-style: none; display: flex; align-items: center; gap: .5rem; }
.mehr-sprachen summary::-webkit-details-marker { display: none; }
.mehr-sprachen summary::before { content: "+"; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--blau); color: #fff; font-size: 1.2rem; }
.mehr-sprachen[open] summary::before { content: "−"; }
.mehr-sprachen[open] summary { margin-bottom: 1rem; }

/* ---------------- Playlists: Kasten auf Kategorieseiten und Links auf Liedseiten */
.playlists { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.playlist-karte { display: block; background: #fff; border-radius: var(--r-gross); padding: 1.2rem 1.3rem; box-shadow: var(--schatten); color: var(--text); text-decoration: none; }
a.playlist-karte:hover { transform: translateY(-3px); transition: transform .2s; text-decoration: none; }
.playlist-karte__kopf { display: flex; gap: .8rem; align-items: center; margin-bottom: .9rem; }
.playlist-karte__kopf svg { width: 40px; height: 40px; flex: none; }
.playlist-karte--yt .playlist-karte__kopf svg { color: #e62117; }
.playlist-karte--spotify .playlist-karte__kopf svg { color: #1DB954; }
.playlist-karte b { display: block; font: 800 1.12rem/1.2 "Baloo 2", sans-serif; color: var(--tief); }
.playlist-karte small { color: var(--text-2); }
.playlist-buehne { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: linear-gradient(160deg, var(--blau), var(--tief)); display: grid; place-content: center; justify-items: center; gap: .6rem; padding: 1rem; text-align: center; }
.playlist-buehne__hinweis { color: #dfe9ff; font-size: .82rem; max-width: 36ch; margin: 0; }
.playlist-buehne__hinweis a { color: #fff; }
.playlist-buehne iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.playlist-karte__link { display: inline-block; margin-top: .8rem; font-weight: 700; color: var(--blau); }
@media (max-width: 860px) { .playlists { grid-template-columns: 1fr; } }
.pl-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .8rem; }
.pl-link { display: flex; gap: .7rem; align-items: center; background: #fff; border-radius: 16px; padding: .8rem 1rem; text-decoration: none; color: var(--text); box-shadow: 0 6px 16px -10px color-mix(in srgb, var(--tief) 60%, transparent); }
.pl-link:hover { text-decoration: none; transform: translateY(-2px); }
.pl-link svg { width: 32px; height: 32px; flex: none; }
.pl-link--yt svg { color: #e62117; }
.pl-link--sp svg { color: #1DB954; }
.pl-link b { display: block; color: var(--tief); font-family: "Baloo 2", sans-serif; line-height: 1.2; }
.pl-link small { color: var(--text-2); }
html[data-nacht] :is(.playlist-karte, .pl-link) { background: color-mix(in srgb, var(--nacht) 80%, white); }
html[data-nacht] :is(.playlist-karte, .pl-link) b { color: var(--creme); }
html[data-nacht] :is(.playlist-karte, .pl-link) small { color: color-mix(in srgb, var(--creme) 85%, transparent); }
html[data-nacht] .playlist-karte__link { color: var(--hellblau); }
.tabelle-rahmen:focus-visible { outline: 3px solid var(--tuerkis); outline-offset: 2px; }
/* Lange Wörter und Adressen (z. B. in Rechtstexten der Altseite) dürfen am Handy umbrechen */
main :is(p, li, td, dd, h2, h3, a) { overflow-wrap: anywhere; }
main a[href^="http"] { word-break: break-all; }

/* ================= Etappe 1 (14.10.2026): Kopf, Knöpfe, Schnellwahl, Belege ================= */
/* Logo mit kleinem Bobby-Kopf, der nickt und beim Drüberfahren hüpft */
.kopf__logo { display: flex; align-items: center; gap: .55rem; }
.kopf__logo img.kopf__schrift { width: clamp(200px, 17vw, 270px); }
.kopf__bobby { flex: none; width: 52px; height: 52px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px #fff, 0 6px 14px -4px rgba(0,0,0,.35); overflow: hidden; transform-origin: 50% 90%; }
.kopf__bobby img { width: 100%; height: 100%; display: block; }
@media (prefers-reduced-motion: no-preference) {
  .kopf__logo:hover .kopf__bobby { animation: bobby-wackeln .7s ease-in-out; }
}
@keyframes bobby-nicken { 0%, 86%, 100% { transform: rotate(0); } 89% { transform: rotate(-12deg); } 92% { transform: rotate(9deg); } 95% { transform: rotate(-4deg); } }
@keyframes bobby-wackeln { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-6deg); } 65% { transform: rotate(4deg); } }
@keyframes bobby-hopser { 0% { transform: translateY(0) scale(1); } 35% { transform: translateY(-9px) scale(1.06) rotate(-6deg); } 70% { transform: translateY(0) scale(.96, 1.04); } 100% { transform: none; } }
@media (max-width: 600px) { .kopf__bobby { width: 40px; height: 40px; } .kopf__logo img.kopf__schrift { width: 168px; } }

/* Überschrift auf drei Zeilen */
.welt h1 { font-size: clamp(2.3rem, 1.25rem + 3.3vw, 3.9rem); max-width: 15.5ch; text-wrap: balance; }
.welt__lead { max-width: 36rem; }

/* Knöpfe: Symbol im eigenen Kreis, halbfett, Bewegung beim Drüberfahren */
.knopf { font-weight: 700; min-height: 48px; padding: .5rem 1.25rem .55rem .55rem; gap: .6rem; }
.knopf:not(:has(svg)) { padding-left: 1.25rem; }
.knopf svg { width: 34px; height: 34px; padding: 7px; border-radius: 50%; background: color-mix(in srgb, white 22%, transparent); transition: transform .3s cubic-bezier(.2, 1.6, .4, 1); }
.knopf:hover svg { transform: rotate(-10deg) scale(1.12); }
.knopf--klein { padding: .35rem 1rem .4rem .4rem; min-height: 42px; }
.knopf--klein svg { width: 28px; height: 28px; padding: 6px; }
:is(.welt, .seitenkopf, .nacht-flaeche, .tv-buehne, .kita-band) .knopf--gelb svg { background: var(--blau); color: #fff; }
.knopf--glas { color: #fff; background: color-mix(in srgb, white 16%, transparent); box-shadow: inset 0 0 0 2px color-mix(in srgb, white 75%, transparent), 0 8px 18px -10px rgba(0,0,0,.5);
  backdrop-filter: blur(6px); text-shadow: 0 1px 2px color-mix(in srgb, var(--nacht) 70%, transparent); }
.knopf--glas::after { display: none; }
.knopf--glas svg { background: #fff; color: var(--blau); }
.knopf--glas:hover { background: color-mix(in srgb, white 28%, transparent); text-decoration: none; transform: translateY(-2px); }
.knopf--rand svg { background: color-mix(in srgb, currentColor 12%, transparent); }

/* Schnellwahl: acht Wege im gleichmäßigen Raster */
.momente__frage { font-size: 1.1rem; }
.momente__liste { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; max-width: 46rem; }
.moment { width: 100%; padding-right: .7rem; font-size: .95rem; line-height: 1.15; }
.moment__name { min-width: 0; }
.momente__liste li:nth-child(1) .moment__ikon { background: color-mix(in srgb, var(--tuerkis) 35%, white); color: var(--tief); }
.momente__liste li:nth-child(2) .moment__ikon { background: var(--tuerkis); color: #fff; }
.momente__liste li:nth-child(3) .moment__ikon { background: var(--blau); color: #fff; }
.momente__liste li:nth-child(4) .moment__ikon { background: var(--decke); color: #fff; }
.momente__liste li:nth-child(5) .moment__ikon { background: var(--tuerkis-tief); color: #fff; }
.momente__liste li:nth-child(6) .moment__ikon { background: var(--blau-mittel); color: #fff; }
.momente__liste li:nth-child(7) .moment__ikon { background: color-mix(in srgb, var(--tuerkis) 70%, var(--tief)); color: #fff; }
.momente__liste li:nth-child(8) .moment__ikon { background: var(--tief); color: #fff; }
@media (max-width: 860px) { .momente__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Belege: eine Reihe, Zeichen in Plattformfarbe, Zahl weiß */
.belege { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; max-width: 46rem; font-size: .88rem; }
.belege .beleg { display: flex; align-items: center; gap: .6rem; padding: .55rem .75rem .55rem .55rem; border-radius: 18px; background: color-mix(in srgb, var(--nacht) 62%, transparent); color: #fff; }
.beleg__zeichen { flex: none; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; }
.beleg--yt .beleg__zeichen { background: #FF0000; }
.beleg--sp .beleg__zeichen { background: #1DB954; }
.belege .beleg svg { width: 22px; height: 22px; color: #fff; }
.belege .beleg b { display: block; font-family: var(--f-titel); font-size: 1.25rem; line-height: 1; color: #fff; }
.belege .beleg > span:last-child { line-height: 1.2; font-weight: 700; }
@media (max-width: 600px) { .belege .beleg { flex-direction: column; text-align: center; padding: .6rem .4rem; } .belege .beleg b { font-size: 1.1rem; } }

/* Aufsteigende Noten neben Bobby */
.welt__noten { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.welt__note { position: absolute; bottom: 18%; width: 30px; height: 30px; color: #fff; opacity: 0; filter: drop-shadow(0 2px 3px rgba(18,67,136,.35)); }
.welt__note svg { width: 100%; height: 100%; }
@media (prefers-reduced-motion: no-preference) { .welt__note { animation: note-steigt var(--dauer, 10s) ease-in var(--verz, 0s) infinite; } }
@keyframes note-steigt { 0% { transform: translate(0, 0) rotate(-10deg) scale(.7); opacity: 0; } 15% { opacity: .9; } 50% { transform: translate(18px, -26vh) rotate(8deg) scale(1); } 85% { opacity: .6; } 100% { transform: translate(-10px, -52vh) rotate(-6deg) scale(1.1); opacity: 0; } }
@media (max-width: 860px) { .welt__noten { display: none; } }

.welt .knopf--blau { box-shadow: 0 5px 0 var(--tief), 0 14px 26px -8px color-mix(in srgb, var(--tief) 85%, transparent); }
@media (max-width: 600px) { .kopf__bobby { width: 36px; height: 36px; box-shadow: 0 0 0 2px #fff; } .kopf__logo { gap: .4rem; } .kopf__logo img.kopf__schrift { width: 140px; } }
@media (max-width: 360px) { .kopf__logo img.kopf__schrift { width: 112px; } .kopf__bobby { width: 32px; height: 32px; } }

/* ================= Etappe 2 (14.10.2026): Bobby TV als Tablet ================= */
.tv-sender { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem; max-width: 60rem; margin: 0 auto 1.6rem; position: relative; z-index: 2; }
.tv-sender .sender { width: auto; min-height: 48px; padding: .35rem 1.1rem .35rem .4rem; gap: .55rem; border-radius: 999px; font: 800 1rem/1 var(--f-titel);
  background: color-mix(in srgb, white 14%, transparent); color: #fff; box-shadow: inset 0 0 0 2px color-mix(in srgb, white 35%, transparent); }
.tv-sender .sender:hover { background: color-mix(in srgb, white 24%, transparent); transform: translateY(-2px); }
.tv-sender .sender[aria-selected="true"] { background: #fff; color: var(--tief); box-shadow: 0 5px 0 color-mix(in srgb, var(--tief) 70%, black), 0 12px 24px -10px black; }
.tv-sender .sender__punkt { width: 34px; height: 34px; background: var(--tuerkis); color: #fff; }
.tv-sender .sender[aria-selected="true"] .sender__punkt { background: var(--blau); }
.tv-sender .sender__punkt svg { width: 18px; height: 18px; }
.tv-anlage { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) clamp(170px, 19vw, 250px); gap: 0 1.2rem; align-items: end; max-width: 1080px; margin: 0 auto; }
.tablet { position: relative; padding: clamp(12px, 1.6vw, 20px); border-radius: clamp(24px, 3vw, 38px); background: linear-gradient(160deg, #2a3557, #121a33 60%, #0b1124);
  box-shadow: inset 0 0 0 2px #3c4a75, inset 0 0 0 5px #0b1124, 0 30px 60px -20px black, 0 0 0 1px rgba(255,255,255,.06); }
.tablet::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,.12) 0%, transparent 28%); }
.tablet__kamera { position: absolute; top: calc(clamp(12px, 1.6vw, 20px) / 2 - 3px); left: 50%; width: 7px; height: 7px; margin-left: -3px; border-radius: 50%; background: #3a4670; box-shadow: inset 0 0 0 2px #1b2440; }
.tablet .fernseher__schirm { border-radius: clamp(12px, 1.5vw, 18px); }
.tablet .fernseher__schirm img, .tablet .fernseher__schirm iframe { inset: 0; width: 100%; height: 100%; border-radius: inherit; }
.tablet .fernseher__schirm::after { inset: 0; border-radius: inherit; }
.tv-bobby-platz { position: relative; display: flex; flex-direction: column; align-items: center; z-index: 2; }
.tv-blase { position: relative; margin: 0 0 .9rem; background: #fff; color: var(--tief); font: 800 1rem/1.25 var(--f-titel); padding: .75rem 1rem; border-radius: 18px 18px 18px 6px;
  box-shadow: 0 14px 28px -12px black; max-width: 15rem; text-align: left; transition: transform .3s cubic-bezier(.2, 1.5, .4, 1); }
.tv-blase::after { content: ""; position: absolute; left: 22px; bottom: -10px; border: 10px solid transparent; border-top-color: #fff; border-bottom: 0; }
.tv-blase.wackelt { transform: scale(1.06) rotate(-1.5deg); }
.tv-bobby { width: 100%; height: auto; margin: 0 0 -4px; filter: drop-shadow(0 16px 14px rgba(0,0,0,.45)); transform-origin: 50% 100%; cursor: pointer; animation: none; }
@media (prefers-reduced-motion: no-preference) { .tv-bobby:hover { animation: bobby-hopser .6s ease-out; } }
.tv-boden { grid-column: 1 / -1; height: 18px; margin: 0 -2%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.45), transparent); }
.tv-streifen .tv-titel img { aspect-ratio: 16 / 9; }
@media (max-width: 860px) {
  .tv-anlage { grid-template-columns: minmax(0, 1fr); }
  .tv-bobby-platz { position: absolute; right: -4px; top: -96px; width: 96px; }
  .tv-blase { display: none; }
  .tv-boden { display: none; }
  .tv-sender { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; padding: 4px 2px 10px; margin-inline: -16px; padding-inline: 16px; scroll-snap-type: x mandatory; }
  .tv-sender .sender { flex: none; scroll-snap-align: start; }
}
@media (max-width: 900px) { .tv-bobby { display: block; } }
.tablet .fernseher__titel { display: none; }

/* ================= Etappe 3 (14.10.2026): Playlists mit Vorschau und Spotify-Player ================= */
.pl-raster { display: grid; gap: 1.2rem; align-items: stretch; }
.pl-raster--2 { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.pl-karte { display: flex; flex-direction: column; gap: .85rem; background: #fff; border-radius: var(--r-gross); padding: 1.1rem; box-shadow: var(--schatten); }
.pl-karte > .knopf { align-self: flex-start; margin-top: auto; }
.pl-karte__kopf { display: flex; align-items: center; gap: .75rem; }
.pl-karte__logo { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: #fff; }
.pl-karte--yt .pl-karte__logo { background: #FF0000; }
.pl-karte--sp .pl-karte__logo { background: #1DB954; }
.pl-karte__logo svg { width: 26px; height: 26px; }
.pl-karte__kopf small { display: block; font-size: .8rem; font-weight: 700; color: var(--text-2); }
.pl-karte__kopf b { display: block; font: 800 1.15rem/1.2 var(--f-titel); color: var(--tief); }
.pl-karte__hinweis { font-size: .8rem; color: var(--text-2); margin: 0; }
.pl-buehne { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: var(--tief); }
.pl-buehne img, .pl-buehne iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.pl-buehne__start { position: absolute; inset: 0; border: 0; padding: 0; cursor: pointer; display: grid; place-content: center; justify-items: center; gap: .6rem;
  background: linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--nacht) 70%, transparent)); color: #fff; }
.pl-buehne__start .video__knopf { transition: transform .25s; }
.pl-buehne__start:hover .video__knopf { transform: scale(1.08); }
.pl-buehne__text { position: absolute; left: 14px; bottom: 12px; font: 800 .95rem var(--f-titel); background: color-mix(in srgb, var(--nacht) 75%, transparent); padding: .3rem .7rem; border-radius: 999px; }
.pl-spotify { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 1rem; align-items: center; background: color-mix(in srgb, #1DB954 9%, white); border-radius: 18px; padding: 1rem; }
.pl-cover { width: 132px; height: 132px; border-radius: 14px; box-shadow: 0 10px 20px -10px rgba(0,0,0,.45); }
.pl-spotify__text p { font-size: .95rem; margin: 0 0 .7rem; }
.pl-spotify.ist-geladen { display: block; padding: 0; background: none; }
.pl-spotify iframe { width: 100%; height: 352px; border: 0; border-radius: 14px; display: block; }
html[data-nacht] .pl-karte { background: color-mix(in srgb, var(--nacht) 80%, white); }
html[data-nacht] .pl-karte__kopf b { color: var(--creme); }
html[data-nacht] :is(.pl-karte__kopf small, .pl-karte__hinweis) { color: color-mix(in srgb, var(--creme) 80%, transparent); }
html[data-nacht] .pl-spotify { background: color-mix(in srgb, #1DB954 14%, var(--nacht)); }
@media (max-width: 860px) { .pl-raster--2 { grid-template-columns: 1fr; } .pl-spotify { grid-template-columns: 96px minmax(0, 1fr); } .pl-cover { width: 96px; height: 96px; } }

/* ================= Etappe 4 (14.10.2026): Menü, Neu bei Bobby, Gucker ================= */
.knopf--yt { background: #FF0000; color: #fff; box-shadow: 0 5px 0 #a30000, 0 12px 22px -10px rgba(0,0,0,.4); }
.knopf--yt:hover { transform: translateY(-2px); text-decoration: none; color: #fff; }
.knopf--yt svg { background: #fff; color: #FF0000; }
a.knopf--yt, a.knopf--yt:visited { color: #fff; }
/* Menü */
#mega-lieder { grid-template-columns: repeat(3, minmax(0, 1fr)) 250px; width: min(1080px, calc(100vw - 32px)); align-items: start; }
.mega a small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mega__top .mega__lied { display: flex; align-items: center; gap: .6rem; }
.mega__top img { width: 64px; height: 36px; border-radius: 8px; object-fit: cover; flex: none; }
.mega__top small { color: var(--text-2); font-weight: 400; }
.mega__neu { background: var(--himmel); border-radius: var(--r-mittel); padding: .7rem; display: flex; flex-direction: column; gap: .35rem; }
.mega__neu-bild { position: relative; display: block; border-radius: 12px; overflow: hidden; }
.mega__neu-bild img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.mega__neu-play { position: absolute; inset: 0; margin: auto; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #FF0000; color: #fff; box-shadow: 0 0 0 3px #fff; }
.mega__neu-play svg { width: 18px; height: 18px; }
.mega__neu-marke { margin: .2rem 0 0; font: 800 .75rem var(--f-titel); text-transform: uppercase; letter-spacing: .04em; color: var(--tuerkis-tief); }
.mega__neu-titel { margin: 0 0 .3rem; font: 800 1.05rem/1.2 var(--f-titel); color: var(--tief); }
.mega__neu .knopf { align-self: stretch; justify-content: center; }
.mega__neu-text { font-weight: 700; font-size: .85rem; text-align: center; }
.mega__alle { grid-column: 1 / -1; display: flex; align-items: center; gap: .7rem; padding: .7rem 1rem !important; border-radius: 14px; background: var(--blau); color: #fff !important; font-weight: 800; text-decoration: none; }
.mega__alle:hover { background: var(--tief) !important; }
.mega__alle svg { width: 22px; height: 22px; }
.mega__alle span:last-child { margin-left: auto; }
/* Neu bei Bobby: groß */
.neu-gross { position: fixed; left: 50%; bottom: 20px; z-index: 90; width: min(560px, calc(100vw - 24px)); display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 1rem; align-items: center;
  background: #fff; border-radius: 26px; padding: 14px; box-shadow: 0 30px 70px -20px rgba(10, 30, 80, .55), 0 0 0 4px var(--blau);
  transform: translate(-50%, calc(100% + 40px)); opacity: 0; transition: transform .6s cubic-bezier(.2, 1.3, .4, 1), opacity .3s; }
.neu-gross.ist-da { transform: translate(-50%, 0); opacity: 1; }
.neu-gross__bild { position: relative; display: block; border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 9; }
.neu-gross__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.neu-gross__play { position: absolute; inset: 0; margin: auto; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: #FF0000; color: #fff; box-shadow: 0 0 0 4px #fff; }
.neu-gross__play svg { width: 22px; height: 22px; }
.neu-gross__marke { margin: 0; font: 800 .8rem var(--f-titel); text-transform: uppercase; letter-spacing: .05em; color: #fff; background: var(--blau); display: inline-block; padding: .25rem .65rem; border-radius: 999px; }
.neu-gross__datum { text-transform: none; font-weight: 700; opacity: .9; }
.neu-gross__titel { font: 800 1.15rem/1.2 var(--f-titel); color: var(--tief); margin: .4rem 0 .7rem; }
.neu-gross .knopfreihe { gap: .5rem; }
.neu-gross .knopf--yt { min-height: 44px; font-size: .95rem; }
.neu-gross__zu { position: absolute; top: -12px; right: -12px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--tief); color: #fff; font-size: 1.4rem; cursor: pointer; box-shadow: 0 6px 14px rgba(0,0,0,.3); }
@media (max-width: 600px) { .neu-gross { grid-template-columns: 1fr; bottom: 12px; } .neu-gross__titel { font-size: 1.05rem; } }
/* Neu bei Bobby: klein */
.neu-klein { position: fixed; left: 16px; bottom: 16px; z-index: 70; display: flex; align-items: center; background: #fff; border-radius: 999px; padding: 6px 6px 6px 6px;
  box-shadow: 0 12px 30px -10px rgba(18, 67, 136, .45), 0 0 0 2px var(--blau); max-width: min(380px, calc(100vw - 32px));
  transform: translateY(calc(100% + 30px)); transition: transform .5s cubic-bezier(.2, 1.3, .4, 1); }
.neu-klein.ist-da { transform: none; }
.neu-klein__link { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--tief); min-width: 0; padding-right: .3rem; }
.neu-klein__link img { width: 72px; height: 40px; border-radius: 999px; object-fit: cover; flex: none; }
.neu-klein__link b { display: block; font: 800 .72rem var(--f-titel); text-transform: uppercase; color: var(--tuerkis-tief); letter-spacing: .04em; }
.neu-klein__titel { display: block; font: 800 .9rem/1.2 var(--f-titel); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 230px; }
.neu-klein__zu { flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--himmel); color: var(--tief); font-size: 1.2rem; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .neu-gross, .neu-klein { transition: opacity .2s; } }
/* Gucker-Blase mit Bild */
.gucker__blase { width: min(320px, calc(100vw - 110px)); padding: 10px 12px 14px; }
.gucker__bild { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; display: block; margin-bottom: .55rem; background: var(--himmel); }
.gucker__bild[data-hoch] { object-fit: contain; background: #fff; }
.gucker__marke { margin: 0; font: 800 .72rem var(--f-titel); text-transform: uppercase; color: var(--tuerkis-tief); letter-spacing: .04em; }
.gucker__text { margin-top: .15rem; }
.mega a.knopf--yt, .mega a.knopf--yt:hover { color: #fff; background: #FF0000; }
.neu-gross { width: min(620px, calc(100vw - 24px)); }
.neu-gross .knopfreihe { flex-wrap: nowrap; }
.neu-gross .knopf--yt { white-space: nowrap; }
@media (max-width: 600px) { .neu-gross .knopfreihe { flex-wrap: wrap; } }
@media (max-width: 600px) {
  .neu-gross { grid-template-columns: 112px minmax(0, 1fr); gap: .7rem; padding: 10px; border-radius: 20px; align-items: start; }
  .neu-gross__marke { font-size: .68rem; padding: .2rem .5rem; }
  .neu-gross__titel { font-size: .95rem; margin: .3rem 0 .5rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .neu-gross__play { width: 36px; height: 36px; box-shadow: 0 0 0 3px #fff; }
  .neu-gross__play svg { width: 16px; height: 16px; }
  .neu-gross .knopfreihe { grid-column: 1 / -1; }
  .neu-gross__text { display: contents; }
  .neu-gross__text > p { grid-column: 2; }
  .neu-gross .knopf--yt { flex: 1; justify-content: center; min-height: 44px; font-size: .9rem; }
  .neu-gross__spaeter { display: none; }
}
@media (max-width: 600px) { .neu-gross__bild { grid-row: span 2; align-self: start; } }

/* v3.1: echte Figuren statt KI-Posen, schmale Hochformate begrenzen */
.gucker img, .gruss-bobby img { width: auto; max-width: 100%; max-height: 170px; margin-left: auto; }
.bobby-schlaeft { width: auto; height: min(240px, 46vw); }
.inhalt__pose { width: auto; max-width: 130px; max-height: 200px; }

/* v3.1 Überschriften: kein heller Doppelschatten mehr (Feedback Artur 19.10.2026), auf dunklem Grund nur ein weicher Schatten */
:root { --kontur-hell: none; --kontur-dunkel: 0 2px 12px rgba(6, 22, 60, .35); }

/* v3.1 Kurz erklärt + Auf einen Blick: ein Kartenpaar, gleiche Höhe, gleicher Kopf, gleiche Abstände */
.blick-bereich { padding-top: clamp(1.6rem, 3vw, 2.4rem) !important; padding-bottom: clamp(1.6rem, 3vw, 2.4rem) !important; }
.blick { align-items: stretch; gap: clamp(1rem, 2.4vw, 1.6rem); }
.kurz, .blick-karte { background: #fff; border-radius: var(--r-gross); box-shadow: var(--schatten); border-top: 8px solid var(--tuerkis); padding: clamp(1.1rem, 2.4vw, 1.6rem); margin: 0; }
.kurz { grid-template-columns: 64px minmax(0, 1fr); gap: 1rem; color: var(--text); }
.kurz::before { display: none; }
.kurz img { width: 64px; height: 64px; }
html .kurz h2, .blick-karte h2 { font: 400 1.45rem/1.1 var(--f-display); color: var(--blau); letter-spacing: .03em; text-shadow: none; margin: .15rem 0 .7rem; }
.kurz p { margin: 0 0 .7rem; }
.kurz > div > :last-child { margin-bottom: 0; }
.blick__raster { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.blick__raster li { margin: 0; display: flex; }
.blick__kachel { flex: 1; display: flex; align-items: center; gap: .65rem; padding: .6rem .7rem; border-radius: 14px; background: var(--himmel); color: var(--tief); text-decoration: none; min-height: 64px; border: 2px solid transparent; transition: border-color .15s, transform .15s; }
a.blick__kachel:hover, a.blick__kachel:focus-visible { border-color: var(--blau); transform: translateY(-1px); }
.blick__ikon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--gelb); color: var(--tief); }
.blick__ikon svg { width: 20px; height: 20px; }
.blick__wert { flex: 1; min-width: 0; display: grid; }
.blick__wert small { font: 800 .72rem/1.2 var(--f-titel); text-transform: uppercase; letter-spacing: .04em; color: var(--tuerkis-tief); }
.blick__wert b { font-weight: 700; font-size: .93rem; line-height: 1.25; overflow-wrap: anywhere; }
.blick__pfeil { flex: none; font: 700 1.3rem/1 var(--f-titel); color: var(--blau); }
.blick__mehr { list-style: none; padding: .8rem 0 0; margin: .9rem 0 0; border-top: 1px dashed var(--linie); display: flex; flex-wrap: wrap; gap: .35rem .9rem; font-size: .88rem; color: var(--text-2); }
.blick__mehr li { margin: 0; }
.blick__mehr b { color: var(--tief); }
html[data-nacht] .kurz, html[data-nacht] .blick-karte { background: color-mix(in srgb, var(--nacht) 85%, white); color: var(--creme); }
html[data-nacht] .blick__kachel { background: color-mix(in srgb, var(--tief) 70%, black); color: var(--creme); }
html[data-nacht] .blick__wert small { color: var(--hellblau); }
html[data-nacht] .blick__mehr, html[data-nacht] .blick__mehr b { color: var(--creme); }
@media (max-width: 860px) { .blick { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .blick__raster { grid-template-columns: minmax(0, 1fr); } .kurz { grid-template-columns: minmax(0, 1fr); } }

/* v3.1 Lieblingslied mit Begründung */
.tkopf__lieb { max-width: 360px; }
.tkopf__lieb small { display: flex; align-items: center; gap: .3rem; text-transform: none; letter-spacing: 0; font-size: .82rem; color: var(--tuerkis-tief); font-weight: 800; }
.tkopf__lieb small svg { width: 14px; height: 14px; color: var(--gelb); fill: var(--gelb); stroke: var(--tief); flex: none; }
.tkopf__lieb em { display: block; font-size: .84rem; color: var(--text-2); font-weight: 700; margin: .1rem 0 0; }
.tkopf__lieb i { display: inline-flex; align-items: center; gap: .3rem; font-style: normal; font-size: .84rem; color: var(--blau); font-weight: 800; margin-top: .2rem; }
.tkopf__lieb i svg { width: 13px; height: 13px; }

/* v3.1 „Auf dieser Seite“: eigenes Band unter dem Kopf, Karten mit Symbol und Inhalt */
.band { background: #fff; border-bottom: 1px solid var(--linie); padding: 1.1rem 0 1.3rem; }
.band__titel { margin: 0 0 .7rem; font: 800 .8rem var(--f-titel); text-transform: uppercase; letter-spacing: .06em; color: var(--tuerkis-tief); }
.band__liste { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .6rem; }
.band__liste li { margin: 0; display: flex; }
.band__liste a { flex: 1; display: flex; align-items: flex-start; gap: .7rem; padding: .75rem .85rem; border-radius: 16px; background: var(--himmel); color: var(--tief); text-decoration: none; border: 2px solid transparent; transition: border-color .15s, transform .15s; }
.band__liste a:hover, .band__liste a:focus-visible { border-color: var(--blau); transform: translateY(-2px); }
.band__ikon { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--gelb); }
.band__ikon svg { width: 20px; height: 20px; }
.band__text { display: grid; gap: .1rem; min-width: 0; }
.band__text b { font: 800 1rem/1.2 var(--f-titel); }
.band__text small { font-size: .84rem; line-height: 1.3; color: var(--text-2); }
html[data-nacht] .band { background: var(--nacht); border-color: color-mix(in srgb, white 12%, transparent); }
html[data-nacht] .band__liste a { background: color-mix(in srgb, var(--tief) 70%, black); color: var(--creme); }
html[data-nacht] .band__text small { color: color-mix(in srgb, var(--creme) 75%, transparent); }
@media (max-width: 600px) { .band__liste { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .3rem; } .band__liste li { flex: 0 0 72%; scroll-snap-align: start; } }
.band__liste { grid-template-columns: repeat(var(--spalten, 3), minmax(0, 1fr)); }
@media (max-width: 1040px) { .band__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tkopf__lieb { max-width: 390px; }
.tkopf__lieb small { display: block; }
.tkopf__lieb small svg { display: inline-block; vertical-align: -2px; margin-right: .25rem; }
html[data-nacht] .band__titel { color: var(--hellblau); }
html[data-nacht] .tkopf__lieb small, .tkopf--nacht .tkopf__lieb small { color: var(--gelb); }
html[data-nacht] .tkopf__lieb i, .tkopf--nacht .tkopf__lieb i { color: var(--hellblau); }
html[data-nacht] .band__liste a:hover, html[data-nacht] .band__liste a:focus-visible { border-color: var(--hellblau); }

/* v3.1 Kopf auf dem Handy: Logo darf schrumpfen, nichts ragt über den Rand (375 und 414 px liefen vorher über) */
@media (max-width: 600px) {
  .kopf__innen { gap: .4rem; }
  .kopf__logo { min-width: 0; flex: 1 1 auto; }
  .kopf__logo img.kopf__schrift { width: auto; max-width: min(150px, 100%); min-width: 0; height: auto; }
}
@media (max-width: 430px) { .kopf__logo img.kopf__schrift { max-width: 112px; } .nacht-schalter { width: 40px; height: 40px; } .menue-knopf { padding-inline: .6rem; } }
@media (max-width: 350px) { .kopf__logo img.kopf__schrift { display: none; } }
.belohnung__karte .belohnung__rahmen img { object-fit: contain; padding: 6px 0 0; background: linear-gradient(180deg, var(--himmel), #fff); }

/* ---------- Kita-Werkstatt (v3.1) */
.buehne--herbst { background: linear-gradient(180deg, #8CC9EE 0%, #FCE3B0 70%, #FFF1D6 100%); }
.buehne--herbst .l1 { fill: #E8A33D; } .buehne--herbst .l2 { fill: #C97A2B; }
.buehne__blatt { position: absolute; top: -40px; width: 22px; height: 16px; border-radius: 0 70% 0 70%; background: #E0662E; opacity: .9; z-index: 0; }
.buehne__blatt.b1 { left: 8%; } .buehne__blatt.b2 { left: 22%; background: #F2B33D; } .buehne__blatt.b3 { left: 37%; background: #B9502A; } .buehne__blatt.b4 { left: 51%; }
.buehne__blatt.b5 { left: 63%; background: #F2B33D; } .buehne__blatt.b6 { left: 74%; background: #C9782A; } .buehne__blatt.b7 { left: 86%; } .buehne__blatt.b8 { left: 95%; background: #F2B33D; }
@media (prefers-reduced-motion: no-preference) {
  .buehne__blatt { animation: blatt-faellt 11s linear infinite; }
  .buehne__blatt.b2 { animation-delay: -2s; animation-duration: 13s; } .buehne__blatt.b3 { animation-delay: -5s; } .buehne__blatt.b4 { animation-delay: -8s; animation-duration: 14s; }
  .buehne__blatt.b5 { animation-delay: -3.5s; } .buehne__blatt.b6 { animation-delay: -9.5s; animation-duration: 12s; } .buehne__blatt.b7 { animation-delay: -6.5s; } .buehne__blatt.b8 { animation-delay: -1s; animation-duration: 15s; }
}
@keyframes blatt-faellt { 0% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(30px, 25vh) rotate(90deg); } 50% { transform: translate(-20px, 50vh) rotate(200deg); } 75% { transform: translate(25px, 75vh) rotate(280deg); } 100% { transform: translate(0, 105vh) rotate(360deg); } }

.werk .huelle { max-width: 1040px; }
.werk__karte { background: #fff; border-radius: var(--r-gross); box-shadow: var(--schatten); border-top: 8px solid #E8A33D; padding: clamp(1.2rem, 3vw, 2rem); }
.werk--liedblatt .werk__karte { border-top-color: var(--blau); } .werk--raetsel .werk__karte { border-top-color: var(--tuerkis); } .werk--fingerspiel .werk__karte { border-top-color: #FF7AA8; }
.werk__kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: .8rem; }
.werk__art { margin: 0 0 .2rem; font: 800 .78rem var(--f-titel); text-transform: uppercase; letter-spacing: .06em; color: var(--tuerkis-tief); }
.werk__kopf h2 { margin: 0 0 .5rem; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); }
.werk__info { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.werk__info li { margin: 0; padding: .25rem .7rem; border-radius: 999px; background: var(--himmel); font-weight: 700; font-size: .88rem; color: var(--tief); }
.werk__einl { margin: 0 0 1rem; color: var(--text-2); }
.werk__zwei { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 1.6rem; }
.werk h3 { font: 800 1.05rem var(--f-titel); color: var(--tief); margin: 0 0 .5rem; }
.werk__material { background: #FFF6E6; border-radius: 16px; padding: 1rem 1.1rem; }
.werk__material ul { margin: 0; padding-left: 1.1rem; } .werk__material li { margin: .2rem 0; }
.werk__schritte { margin: 0; padding-left: 1.3rem; } .werk__schritte li { margin: 0 0 .55rem; padding-left: .2rem; } .werk__schritte li::marker { font-weight: 800; color: var(--blau); }
.werk__sicher { display: flex; gap: .6rem; align-items: flex-start; margin: 1rem 0 0; padding: .7rem .9rem; border-radius: 14px; background: #FFF1F0; border: 1px solid #F6C7C2; font-size: .93rem; }
.werk__sicher svg { width: 20px; height: 20px; flex: none; color: #C0392B; margin-top: .1rem; }
.werk__idee { margin: 1rem 0 0; padding: .7rem .9rem; border-radius: 14px; background: var(--himmel); font-size: .95rem; }
.bereiche { list-style: none; padding: 0; margin: 1.1rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.bereiche li { margin: 0; display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .65rem .25rem .35rem; border-radius: 999px; border: 1px solid var(--linie); font-size: .82rem; font-weight: 700; color: var(--tief); }
.bereiche svg { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--gelb); }
.werk__quelle { display: none; }
.liedblatt__text { columns: 2 260px; column-gap: 2.4rem; }
.strophe { break-inside: avoid; margin: 0 0 1rem; font-size: 1.08rem; line-height: 1.6; }
.werk__tabelle { width: 100%; border-collapse: collapse; }
.werk__tabelle th { text-align: left; font: 800 .82rem var(--f-titel); text-transform: uppercase; letter-spacing: .04em; color: var(--tuerkis-tief); padding: .4rem .6rem; border-bottom: 2px solid var(--linie); }
.werk__tabelle td { padding: .6rem; border-bottom: 1px solid var(--linie); vertical-align: top; }
.werk__tabelle td:first-child { font-weight: 700; color: var(--tief); width: 55%; }
.raetsel { display: grid; gap: 1.4rem; }
.raetsel__reihen { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; counter-reset: rr; }
.raetsel__reihe { counter-increment: rr; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; }
.raetsel__reihe::before { content: counter(rr); display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--tuerkis); font-weight: 800; color: var(--tief); }
.raetsel__ding { display: inline-flex; flex-direction: column; align-items: center; gap: .1rem; min-width: 92px; padding: .5rem .6rem; border-radius: 16px; border: 2px solid var(--linie); background: #fff; font: 700 .85rem var(--f-titel); color: var(--tief); cursor: pointer; }
.raetsel__ding span { font-size: 2rem; line-height: 1.1; }
.raetsel__ding:hover:not(:disabled) { border-color: var(--blau); }
.raetsel__ding.ist-richtig { border-color: #2E9E5B; background: #E8F7EE; } .raetsel__ding.ist-falsch { border-color: #E07A5F; background: #FFF1EC; }
.raetsel__antwort { font-weight: 700; color: var(--tief); font-size: .92rem; }
.raetsel__reime { margin: 0; padding-left: 1.3rem; display: grid; gap: .7rem; }
.raetsel__reime p { margin: 0 0 .2rem; font-style: italic; }
.raetsel__reime summary { cursor: pointer; color: var(--blau); font-weight: 700; }
.silben { list-style: none; padding: 0; margin: .5rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.silben li { margin: 0; }
.silbe { padding: .55rem 1rem; border-radius: 999px; border: 2px solid var(--linie); background: #fff; font: 800 1rem var(--f-titel); color: var(--tief); cursor: pointer; display: inline-flex; align-items: center; gap: .3rem; }
.silbe i { color: #E8A33D; font-style: normal; font-weight: 900; }
.silbe small { margin-left: .4rem; font-size: .75rem; color: var(--text-2); }
.silbe.ist-offen { border-color: #E8A33D; background: #FFF6E6; }
.raetsel__loesungen { display: none; }
.mappe { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 2rem; align-items: start; }
.mappe__liste { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
.mappe__liste li { margin: 0; }
.mappe__liste label { display: flex; gap: .6rem; align-items: center; padding: .55rem .7rem; border-radius: 14px; background: #fff; border: 2px solid var(--linie); cursor: pointer; }
.mappe__liste label:has(input:checked) { border-color: var(--blau); }
.mappe__liste input { width: 20px; height: 20px; accent-color: var(--blau); flex: none; }
.mappe__liste b { display: block; font: 800 .95rem/1.2 var(--f-titel); color: var(--tief); }
.mappe__liste small { font-size: .78rem; color: var(--text-2); }
.mappe__hinweis { font-size: .85rem; color: var(--text-2); margin: .6rem 0 0; }
.themen-werk { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.themen-werk a, .themen-werk div { display: flex; flex-direction: column; border-radius: var(--r-gross); overflow: hidden; background: #fff; box-shadow: var(--schatten); text-decoration: none; color: var(--text); }
.themen-werk img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.themen-werk span { padding: .9rem 1rem 1.1rem; display: grid; gap: .25rem; }
.themen-werk b { font: 400 1.5rem/1.1 var(--f-display); color: var(--blau); letter-spacing: .02em; }
.themen-werk em { font-style: normal; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--tuerkis-tief); }
.themen-werk .ist-bald { opacity: .85; } .themen-werk .ist-bald em { color: var(--text-2); }
html[data-nacht] .werk__karte, html[data-nacht] .mappe__liste label, html[data-nacht] .raetsel__ding, html[data-nacht] .silbe, html[data-nacht] .themen-werk a, html[data-nacht] .themen-werk div { background: color-mix(in srgb, var(--nacht) 85%, white); color: var(--creme); }
html[data-nacht] .werk__material { background: color-mix(in srgb, var(--tief) 70%, black); }
@media (max-width: 860px) { .werk__zwei, .mappe { grid-template-columns: minmax(0, 1fr); } .themen-werk { grid-template-columns: minmax(0, 1fr); } .werk__kopf { flex-direction: column; } }
@media (max-width: 480px) { .mappe__liste { grid-template-columns: minmax(0, 1fr); } .raetsel__ding { min-width: 72px; } }
@media print {
  body.drucke-mappe > *:not(main), body.drucke-mappe main > *:not(.mappe-an), body.drucke-mappe .nicht-drucken { display: none !important; }
  body.drucke-mappe .mappe-an { break-after: page; padding: 0 !important; }
  .werk__karte { box-shadow: none; border: 1px solid #ccc; }
  .werk__quelle { display: block; margin: 1rem 0 0; font-size: .75rem; color: #666; }
  .raetsel__loesungen { display: block; margin-top: 1.2rem; font-size: .75rem; color: #666; transform: rotate(180deg); text-align: right; }
  .raetsel__reime details { display: none; }
  .buehne__blatt { display: none; }
}

.werk__tabelle th { background: var(--himmel); color: var(--tief); }
.werk__schritte b { display: block; color: var(--tief); }
.mappe__bobby { display: block; width: auto; height: 220px; margin-top: 1rem; filter: drop-shadow(0 10px 10px rgba(10, 30, 80, .2)); }
@media (max-width: 860px) { .mappe__bobby { display: none; } }
@media print { .werk__tabelle th { background: none; } }
.werkstatt-teaser { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.4rem, 3vw, 2.6rem); align-items: center; background: linear-gradient(135deg, #FFF6E6, #FCE3B0); border-radius: var(--r-gross); padding: clamp(1.3rem, 3vw, 2.4rem); box-shadow: var(--schatten); }
.werkstatt-teaser__bild { position: relative; display: block; border-radius: 20px; overflow: hidden; box-shadow: 0 18px 40px -22px var(--tief); }
.werkstatt-teaser__bild img { width: 100%; height: auto; display: block; }
.werkstatt-teaser__bild span { position: absolute; left: 12px; bottom: 12px; padding: .3rem .8rem; border-radius: 999px; background: var(--gelb); font: 800 .85rem var(--f-titel); color: var(--tief); }
html[data-nacht] .werkstatt-teaser { background: color-mix(in srgb, var(--nacht) 85%, white); }
@media (max-width: 860px) { .werkstatt-teaser { grid-template-columns: minmax(0, 1fr); } }
.werk__logo { display: none; }
@media print {
  @page { size: A4; margin: 14mm 14mm 12mm; }
  body.drucke-mappe .werk__karte, .druck-ziel .werk__karte { border: 0; padding: 0; box-shadow: none; font-size: 10.5pt; line-height: 1.45; }
  body.drucke-mappe .werk__logo, .druck-ziel .werk__logo { display: block; width: 46mm; height: auto; margin: 0 0 4mm; }
  body.drucke-mappe .werk__kopf h2, .druck-ziel .werk__kopf h2 { font-size: 20pt; }
  body.drucke-mappe .werk__schritte li, .druck-ziel .werk__schritte li { margin-bottom: 2.5mm; }
  body.drucke-mappe .strophe, .druck-ziel .strophe { font-size: 12.5pt; }
}
.werk__malbild { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 1.6rem; align-items: center; }
.werk__malbild img { width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--linie); background: #fff; }
@media (max-width: 860px) { .werk__malbild { grid-template-columns: minmax(0, 1fr); } }
@media print { .werk__malbild { display: block; } .werk__malbild img { max-height: 235mm; width: auto; margin: 0 auto; display: block; border: 0; } .werk__malbild > div { display: none; } }
@media (max-width: 600px) {
  .raetsel__reihe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem; }
  .raetsel__reihe::before { grid-column: 1 / -1; width: 1.6rem; height: 1.6rem; }
  .raetsel__ding { min-width: 0; padding: .4rem .2rem; font-size: .72rem; }
  .raetsel__ding span { font-size: 1.6rem; }
  .raetsel__antwort { grid-column: 1 / -1; }
}
@media (max-width: 600px) { .raetsel__ding { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: normal; word-break: normal; font-size: .68rem; } }
.mk__nr::before, .schatz-weg li::before, .schatz-stand b, .tipp__nr, .raetsel__reihe::before { font-family: "Baloo 2", system-ui, sans-serif; font-weight: 800; }

/* v3.1 Schatzkiste mit Nutzen: Memory zum Ausdrucken, Hinweis mit nächster Karte */
.schatz-weg--vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 860px) { .schatz-weg--vier { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .schatz-weg--vier { grid-template-columns: minmax(0, 1fr); } }
.memory-band { display: flex; justify-content: space-between; align-items: center; gap: 1.2rem; margin: 0 0 1.4rem; padding: 1rem 1.3rem; border-radius: var(--r-gross); background: linear-gradient(135deg, #FFF8C7, #FFE98A); box-shadow: var(--schatten); }
.memory-band h3 { margin: 0 0 .2rem; font: 400 1.4rem var(--f-display); color: var(--tief); letter-spacing: .02em; }
.memory-band p { margin: 0; color: var(--tief); }
.memory-band .knopf:disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 600px) { .memory-band { flex-direction: column; align-items: flex-start; } }
.memory-bogen { display: none; }
.schatz-hinweis--karte { display: flex; align-items: center; gap: .8rem; }
.schatz-hinweis--karte img { width: 46px; height: auto; flex: none; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .15)); }
@media print {
  body.drucke-memory > *:not(main), body.drucke-memory main > * { display: none !important; }
  body.drucke-memory .memory-bogen { display: grid !important; grid-template-columns: repeat(4, 45mm); gap: 0; justify-content: center; }
  .memory-karte { width: 45mm; height: 45mm; box-sizing: border-box; border: 1px dashed #999; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3mm; break-inside: avoid; }
  .memory-karte img { height: 32mm; width: auto; }
  .memory-karte b { font: 700 8pt "Baloo 2", sans-serif; color: #12438A; margin-top: 1mm; }
}

/* v3.1 Startbild als Komposition (Magnific): Figuren spielen auf der Wiese statt nebeneinander zu stehen. Nachts bleibt die Nachtbühne. */
.welt__szene { position: absolute; inset: 0; z-index: 0; }
.welt__szenenbild { width: 100%; height: 100%; object-fit: cover; object-position: 70% 60%; display: block; }
.welt--szene::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(18, 60, 140, .72) 0%, rgba(18, 60, 140, .5) 32%, rgba(18, 60, 140, 0) 52%); }
.welt--szene .welt__himmel, .welt--szene .welt__figuren, .welt--szene .welt__noten, .welt--szene .funkeln, .welt--szene .welt__huegel { display: none; }
html[data-nacht] .welt--szene .welt__szene, html[data-nacht] .welt--szene::before { display: none; }
html[data-nacht] .welt--szene .welt__himmel, html[data-nacht] .welt--szene .welt__figuren, html[data-nacht] .welt--szene .welt__huegel { display: revert; }
.welt--szene .welt__innen { min-height: min(820px, 62vw); }
@media (max-width: 1199px) {
  .welt--szene .welt__szene { position: relative; height: 62vw; max-height: 460px; }
  .welt--szene .welt__szenenbild { object-position: 78% 55%; }
  .welt--szene::before { display: none; }
  .welt--szene { background: linear-gradient(180deg, #2E6FD0, #2457B4); }
  .welt--szene .welt__innen { min-height: 0; }
}

/* v3.1 Gruppenbild: Freunde stehen Hand in Hand auf dem Weg einer gemalten Landschaft statt auf einem grünen Balken */
.freunde-abschnitt { background: #CFE9FB url(../img/szenen/freunde-panorama-1400.webp) center bottom / cover no-repeat; padding-bottom: clamp(1.4rem, 3vw, 2.4rem); }
html[data-nacht] .freunde-abschnitt { background: linear-gradient(180deg, #0E2A5C, #163C74); }
.freunde-abschnitt .abschnitt__kopf { background: color-mix(in srgb, white 82%, transparent); border-radius: var(--r-gross); padding: 1rem 1.4rem; backdrop-filter: blur(2px); }
html[data-nacht] .freunde-abschnitt .abschnitt__kopf { background: transparent; }
.freunde { margin-top: clamp(4rem, 9vw, 9rem); }
.freund .figur { filter: drop-shadow(0 12px 6px rgba(40, 70, 20, .35)); }
.freunde li span { box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .35); }
@media (max-width: 860px) { .freunde-abschnitt { background-position: 30% bottom; } .freunde { margin-top: 3rem; } }
/* Startbild 21:9 unten bündig in voller Breite, darüber Himmel in Bildfarbe: nichts wird angeschnitten */
@media (min-width: 1200px) {
  .welt--szene { background: #81D0F4; }
  .welt--szene .welt__szene { top: auto; bottom: 0; height: auto; }
  .welt--szene .welt__szenenbild { height: auto; object-fit: initial; }
}

/* v3.1 Themenkopf mit Szenenbild: Figuren rechts, Textkarte links */
.buehne--szene { background: #81D0F4; }
.buehne__szenenbild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 100% 70%; }
@media (max-width: 860px) { .buehne__szenenbild { object-position: 100% 60%; } .tkopf--buehne .tkopf__bild:has(.buehne--szene) { aspect-ratio: 16 / 9; height: auto; } }

/* ---------------------------------------------------------------- Lesbarkeit nachts (Artur 20.10.2026): keine blauen Links auf dunklem Grund */
html[data-nacht] :is(.kurz, .hinweis, .blick-karte) a:not([class]) { color: var(--gelb); text-decoration-color: color-mix(in srgb, var(--gelb) 55%, transparent); }
html[data-nacht] a:not([class]) { color: #fff; text-decoration-color: var(--hellblau); }
html[data-nacht] a:not([class]):hover { color: var(--gelb); }
html[data-nacht] .kurz h2, html[data-nacht] .blick-karte h2 { color: var(--hellblau); }
html[data-nacht] .liedblatt a:not([class]) { color: var(--blau); }

/* ---------------------------------------------------------------- Schlaflieder-Welt (Seiten mit data-seite-nacht): Sternenhimmel, Mond, Wolken statt Kästen */
html[data-seite-nacht] { --wolke: color-mix(in srgb, var(--blau-mittel) 58%, var(--tief)); --wolke-rand: color-mix(in srgb, var(--hellblau) 18%, transparent); }
html[data-seite-nacht] body {
  background-color: var(--nacht);
  background-image:
    radial-gradient(1.6px 1.6px at 24px 38px, #fff 60%, transparent 62%),
    radial-gradient(1.1px 1.1px at 150px 90px, color-mix(in srgb, white 85%, transparent) 60%, transparent 62%),
    radial-gradient(2px 2px at 260px 170px, color-mix(in srgb, var(--gelb) 80%, white) 60%, transparent 62%),
    radial-gradient(1.2px 1.2px at 90px 230px, #fff 60%, transparent 62%),
    radial-gradient(1px 1px at 210px 300px, color-mix(in srgb, white 70%, transparent) 60%, transparent 62%),
    radial-gradient(1.4px 1.4px at 330px 40px, #fff 60%, transparent 62%),
    linear-gradient(180deg, var(--nacht), color-mix(in srgb, var(--tief) 70%, var(--nacht)) 60%, var(--nacht));
  background-size: 360px 340px, 360px 340px, 360px 340px, 360px 340px, 360px 340px, 360px 340px, 100% 100%;
  background-attachment: fixed;
}
html[data-seite-nacht] .abschnitt, html[data-seite-nacht] .abschnitt--blass { background: transparent; }
html[data-seite-nacht] main .abschnitt { isolation: isolate; }
/* weiche Wolkenbank am oberen Rand jedes Abschnitts */
html[data-seite-nacht] main .abschnitt::before { content: ''; position: absolute; left: 0; right: 0; top: -38px; height: 90px; pointer-events: none; z-index: -1; opacity: .9;
  background:
    radial-gradient(60px 38px at 6% 60px, var(--wolke) 98%, transparent), radial-gradient(90px 52px at 15% 66px, var(--wolke) 98%, transparent), radial-gradient(70px 40px at 27% 64px, var(--wolke) 98%, transparent),
    radial-gradient(110px 46px at 46% 72px, var(--wolke) 98%, transparent), radial-gradient(64px 36px at 61% 62px, var(--wolke) 98%, transparent), radial-gradient(96px 50px at 77% 68px, var(--wolke) 98%, transparent),
    radial-gradient(58px 34px at 93% 62px, var(--wolke) 98%, transparent);
  -webkit-mask: linear-gradient(180deg, #000 40%, transparent); mask: linear-gradient(180deg, #000 40%, transparent); opacity: .35; }
/* Mond oben rechts im ersten Inhaltsabschnitt */
html[data-seite-nacht] main .abschnitt:first-of-type::after { content: ''; position: absolute; right: max(4vw, 24px); top: 2.4rem; width: 70px; height: 70px; border-radius: 50%; box-shadow: -16px 10px 0 0 var(--gelb); filter: drop-shadow(0 0 18px color-mix(in srgb, var(--gelb) 60%, transparent)); pointer-events: none; z-index: -1; }

/* Karten als Wolken: runde Form, Wolkenbuckel oben, kein Kastenrand */
html[data-seite-nacht] :is(.kurz, .tipp, .lied, .pl-karte, .schritte-liste li, .frage, .tabelle-rahmen) {
  position: relative; background: var(--wolke); border: 0; border-radius: 40px 40px 34px 34px;
  box-shadow: inset 0 2px 0 var(--wolke-rand), 0 22px 40px -26px #000, 0 0 40px -18px color-mix(in srgb, var(--hellblau) 30%, transparent); }
html[data-seite-nacht] :is(.kurz, .tipp, .lied, .pl-karte, .schritte-liste li)::after {
  content: ''; position: absolute; left: 9%; width: 82%; height: 30px; top: -28px; pointer-events: none;
  background:
    radial-gradient(circle at 10% 100%, var(--wolke) 0 15px, transparent 16px),
    radial-gradient(circle at 28% 100%, var(--wolke) 0 25px, transparent 26px),
    radial-gradient(circle at 50% 100%, var(--wolke) 0 18px, transparent 19px),
    radial-gradient(circle at 71% 100%, var(--wolke) 0 28px, transparent 29px),
    radial-gradient(circle at 90% 100%, var(--wolke) 0 14px, transparent 15px); }
html[data-seite-nacht] :is(.lied, .frage)::after { height: 20px; top: -18px;
  background: radial-gradient(circle at 18% 100%, var(--wolke) 0 11px, transparent 12px), radial-gradient(circle at 42% 100%, var(--wolke) 0 18px, transparent 19px), radial-gradient(circle at 70% 100%, var(--wolke) 0 14px, transparent 15px), radial-gradient(circle at 88% 100%, var(--wolke) 0 9px, transparent 10px); }
html[data-seite-nacht] .frage { border-radius: 30px; }
html[data-seite-nacht] .frage::after { content: ''; position: absolute; left: 12%; width: 70%; pointer-events: none; }
html[data-seite-nacht] :is(.tipp, .schritte-liste li) { padding-top: 1.4rem; }
html[data-seite-nacht] .tipp__nr { background: var(--gelb); color: var(--tief); border-radius: 50%; width: 1.9rem; height: 1.9rem; display: grid; place-items: center; }
html[data-seite-nacht] .kurz { border-radius: 56px 56px 44px 44px; }
html[data-seite-nacht] .kurz img { box-shadow: 0 0 0 5px var(--wolke), 0 0 24px -4px var(--hellblau); }
html[data-seite-nacht] .tabelle-rahmen { padding: .6rem; }
html[data-seite-nacht] .tabelle-rahmen table { border-radius: 28px; overflow: hidden; }
html[data-seite-nacht] .lied:hover { transform: translateY(-4px); }
/* schwebende Wolken leicht animiert, wer Bewegung nicht mag, bekommt sie ruhig */
@media (prefers-reduced-motion: no-preference) {
  html[data-seite-nacht] :is(.tipp, .lied):nth-child(odd) { animation: wolke-schweben 7s ease-in-out infinite; }
  html[data-seite-nacht] :is(.tipp, .lied):nth-child(even) { animation: wolke-schweben 8.5s ease-in-out -3s infinite; }
}
@keyframes wolke-schweben { 50% { translate: 0 -5px; } }
html[data-seite-nacht] :is(.schritte-liste, .tipps, .raster) { row-gap: 2.3rem; }
html[data-seite-nacht] .schritte-liste li + li { margin-top: .9rem; }