/* ═══════════════════════════════════════════════════════════
   speiseplan.css — Speiseplan-Modul (_speiseplan.php)
   Eingebunden in _speiseplan.php, alle Regeln unter #sp-section
   ═══════════════════════════════════════════════════════════ */

#sp-section {
    --sp-wk: #D55A92;
    --sp-wk-ink: #7A4266;
    --sp-wk-rgb: 213, 90, 146;
    /* Kategorie-Tinte: Farbe 50 % gemischt mit #1E293B */
    --sp-ink-f: #8A6423;
    --sp-ink-j: #4F6D45;
    --sp-ink-2: #475569;
    --sp-ink-3: #64748B;
    --sp-line: rgba(30, 41, 59, .09);
    --sp-dark: var(--amina-dark, #1E293B);
    --sp-ease-out: cubic-bezier(.16, 1, .3, 1);
    --sp-spring: cubic-bezier(.34, 1.4, .64, 1);
    contain-intrinsic-size: auto 1900px;
}

#sp-section [hidden]:not([hidden="until-found"]) { display: none !important; }

.sp-wrap { position: relative; z-index: 10; max-width: 1080px; margin: 0 auto; padding-inline: 16px; }
/* Mobil: Tageskarte und Wochenkarte gehören zusammen, 44px statt 64px (−31%) */
.sp-grid { display: grid; gap: 44px; }
.sp-col-a { width: 100%; max-width: 430px; margin: 0 auto; }
.sp-col-b { width: 100%; max-width: 430px; margin: 0 auto; }
@media (min-width: 1024px) {
    .sp-grid { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 72px; align-items: start; }
    .sp-col-a, .sp-col-b { max-width: none; margin: 0; }
}

/* ── Woche ── */
.sp-week { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding-inline: 4px; }
.sp-week-rel { display: block; font-size: 11px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; color: var(--sp-wk-ink); transition: color .4s ease; }
.sp-week-range { display: block; margin-top: 6px; font-size: 22px; font-weight: 800; letter-spacing: -.025em; color: var(--sp-dark); font-variant-numeric: tabular-nums; }
.sp-week-btns { display: flex; gap: 8px; flex-shrink: 0; }
.sp-nav { width: 44px; height: 44px; padding: 0; border: 0; border-radius: 22px; display: grid; place-items: center; cursor: pointer; color: var(--sp-dark); background: rgba(255, 255, 255, .15); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px var(--sp-line); transition: transform .35s var(--sp-spring), opacity .25s ease; }
.sp-nav:active { transform: scale(.88); }
.sp-nav[aria-disabled="true"] { opacity: .3; cursor: default; }

/* ── Tage ── */
.sp-days { position: relative; margin-top: 16px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 4px; border-radius: 9999px; background: #F4F6F9; box-shadow: inset 0 0 0 1px var(--sp-line); }
.sp-days-pill { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 5); border-radius: 9999px; background: #FFFFFF; box-shadow: 0 6px 14px -8px rgba(var(--sp-wk-rgb), .4), 0 1px 2px rgba(30, 41, 59, .08); transform: translateX(calc(var(--sp-i, 0) * 100%)); transition: transform .6s var(--sp-spring); }
.sp-day { position: relative; z-index: 1; min-height: 56px; padding: 0; border: 0; background: none; border-radius: 9999px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; cursor: pointer; color: #334155; transition: color .35s ease, transform .3s var(--sp-spring); -webkit-tap-highlight-color: transparent; }
.sp-day:active { transform: scale(.92); }
.sp-day[aria-pressed="true"] { color: var(--sp-wk-ink); }
.sp-day.is-past, .sp-day.is-closed { color: var(--sp-ink-3); }
.sp-day.is-closed .sp-day-num { opacity: .55; }
/* Heute auch ohne Auswahl erkennbar: Tageszahl in der Tinte der Woche (nicht an Schließtagen) */
.sp-day.is-today:not(.is-closed) .sp-day-num { color: var(--sp-wk-ink); }
/* Wochentag immer zentriert: Der Punkt (heute bzw. geschlossen) steht außerhalb des Textes
   links daneben und verschiebt nichts. letter-spacing hängt .14em Laufweite auch hinter den
   letzten Buchstaben; dieselbe .14em als Innenabstand links gleicht das aus, der sichtbare
   Text steht damit exakt in der Mitte. Der Punkt hält 4px Abstand zum ersten Buchstaben:
   4px minus die .14em Innenabstand, die schon zwischen Box-Kante und Text liegen. */
.sp-day-wd { position: relative; display: block; padding-inline-start: .14em; font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.sp-day-wd i { position: absolute; top: 50%; right: 100%; width: 5px; height: 5px; margin-right: calc(4px - .14em); border-radius: 3px; background: var(--sp-wk); transform: translateY(-50%); }
.sp-day.is-closed .sp-day-wd i { background: var(--amina-pink, #D55A92); }
.sp-day-num { font-size: 17px; line-height: 1; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }

/* ── Bühne ── */
.sp-hero { position: relative; margin-top: 16px; aspect-ratio: 4 / 5; max-width: 100%; border-radius: 32px; overflow: hidden; isolation: isolate; background: #1B1E23; box-shadow: 0 26px 44px -30px rgba(30, 41, 59, .3), 0 0 0 1px rgba(30, 41, 59, .06); view-transition-name: sp-hero; }
.sp-hero::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); pointer-events: none; }
.sp-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; animation: sp-kb 9s var(--sp-ease-out) both; }
@keyframes sp-kb { from { transform: scale(1.1); } to { transform: scale(1); } }
.sp-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Ohne Foto: ruhige Fläche in der Wochenfarbe mit Teller-Umriss */
.sp-media.is-empty { background: radial-gradient(110% 70% at 50% 28%, rgba(var(--sp-wk-rgb), .45) 0%, rgba(var(--sp-wk-rgb), 0) 62%), linear-gradient(160deg, #2A2E35, #15181D); }
.sp-media.is-empty svg { position: absolute; left: 50%; top: 32%; width: 62%; height: auto; transform: translate(-50%, -50%); opacity: .5; }
.sp-scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(14, 17, 23, .92) 0%, rgba(14, 17, 23, .7) 30%, rgba(14, 17, 23, .18) 56%, rgba(14, 17, 23, 0) 70%), linear-gradient(to bottom, rgba(14, 17, 23, .4) 0%, rgba(14, 17, 23, 0) 20%), radial-gradient(120% 90% at 50% 40%, rgba(14, 17, 23, 0) 60%, rgba(14, 17, 23, .35) 100%); }
.sp-hero-top { position: absolute; top: 16px; left: 16px; right: 16px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sp-glass { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: 9999px; background: rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); color: #FFFFFF; font-size: 10px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; white-space: nowrap; }
.sp-glass.is-today { background: var(--sp-wk-ink); box-shadow: none; }
.sp-hero-copy { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px 22px; display: flex; flex-direction: column; gap: 8px; color: #FFFFFF; }
.sp-kicker { font-size: 11px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; color: rgba(255, 255, 255, .78); }
.sp-soup { font-size: 15px; font-weight: 400; color: rgba(255, 255, 255, .85); }
.sp-title { margin: 0; font-size: 34px; line-height: 1.06; font-weight: 800; letter-spacing: -.035em; text-wrap: balance; overflow-wrap: break-word; color: #FFFFFF; text-shadow: 0 1px 18px rgba(0, 0, 0, .25); }
.sp-title.is-long { font-size: 30px; }
.sp-w { display: inline-block; animation: sp-word .9s var(--sp-ease-out) both; animation-delay: calc(120ms + var(--k) * 55ms); }
@keyframes sp-word { from { opacity: 0; transform: translateY(.5em) rotate(2deg); } to { opacity: 1; transform: none; } }
.sp-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 26px; margin-top: 2px; }
.sp-side { font-size: 15px; font-weight: 400; color: rgba(255, 255, 255, .85); }
.sp-codes { display: flex; gap: 6px; margin-left: auto; }
.sp-rise { animation: sp-rise .8s var(--sp-ease-out) both; }
.sp-rise.d2 { animation-delay: .1s; }
.sp-rise.d3 { animation-delay: .2s; }
@keyframes sp-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ── Allergen-Knöpfe ── */
.sp-code, .sp-mcode { position: relative; padding: 0; border: 0; font-family: inherit; display: grid; place-items: center; font-size: 10px; font-weight: 800; cursor: pointer; transition: transform .3s var(--sp-spring), background-color .25s ease, color .25s ease, box-shadow .25s ease; -webkit-tap-highlight-color: transparent; }
.sp-code::before, .sp-mcode::before { content: ''; position: absolute; inset: -10px -3px; }
.sp-code { width: 24px; height: 24px; border-radius: 12px; color: #FFFFFF; background: rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.sp-mcode { width: 22px; height: 22px; border-radius: 11px; color: var(--sp-ink-2); background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(30, 41, 59, .16); }
.sp-code:active, .sp-mcode:active { transform: scale(.88); }
.sp-code[aria-expanded="true"] { background: #FFFFFF; color: var(--sp-dark); box-shadow: none; }
.sp-mcode[aria-expanded="true"] { background: var(--sp-dark); color: #FFFFFF; box-shadow: none; }

/* ── Tooltip (Popover im Top-Layer) ── */
.sp-tip { position: fixed; inset: auto; margin: 0; border: 0; padding: 14px 16px 15px; width: min(288px, calc(100vw - 32px)); border-radius: 20px; color: #FFFFFF; background: rgba(30, 41, 59, .92); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); box-shadow: 0 26px 50px -22px rgba(15, 23, 42, .65), inset 0 0 0 1px rgba(255, 255, 255, .1); overflow: visible; font-family: inherit; opacity: 0; transform: translateY(8px) scale(.96); transform-origin: var(--sp-ax, 50%) 100%; transition: opacity .22s ease, transform .4s var(--sp-spring), display .4s allow-discrete, overlay .4s allow-discrete; }
.sp-tip.is-below { transform-origin: var(--sp-ax, 50%) 0; transform: translateY(-8px) scale(.96); }
.sp-tip:popover-open { opacity: 1; transform: none; }
@starting-style { .sp-tip:popover-open { opacity: 0; transform: translateY(8px) scale(.96); } .sp-tip.is-below:popover-open { transform: translateY(-8px) scale(.96); } }
.sp-tip::after { content: ''; position: absolute; left: calc(var(--sp-ax, 50%) - 7px); bottom: -6px; width: 14px; height: 14px; border-radius: 3px; background: rgba(30, 41, 59, .92); transform: rotate(45deg); clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.sp-tip.is-below::after { bottom: auto; top: -6px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.sp-tip-head { display: flex; align-items: center; gap: 10px; }
.sp-tip-letter { flex: 0 0 30px; height: 30px; border-radius: 15px; display: grid; place-items: center; font-size: 13px; font-weight: 800; color: var(--sp-dark); background: #FFFFFF; }
.sp-tip-name { font-size: 15px; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; }
.sp-tip-text { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .8); }

/* ── Frühstück & Jause ── */
.sp-meals { margin: 20px 0 0; padding: 0; }
.sp-meal { display: grid; grid-template-columns: 104px minmax(0, 1fr); column-gap: 12px; align-items: baseline; padding: 18px 6px; border-top: 1px solid var(--sp-line); }
.sp-meal:last-child { border-bottom: 1px solid var(--sp-line); }
.sp-meal dt { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.sp-meal dt i { flex: 0 0 6px; height: 6px; border-radius: 3px; }
.sp-meal dd { margin: 0; font-size: 16px; line-height: 1.45; font-weight: 600; color: var(--sp-dark); overflow-wrap: break-word; text-wrap: pretty; }
.sp-mcodes { display: flex; gap: 6px; margin-top: 8px; }

/* ── Geschlossen ── */
.sp-hero.is-closed { background: linear-gradient(170deg, #F6C4DA 0%, #E48AB2 38%, #B4557F 70%, #6E3A5C 100%); }
.sp-hero.is-closed .sp-scrim { background: linear-gradient(to top, rgba(62, 28, 50, .55) 0%, rgba(62, 28, 50, 0) 45%); }
.sp-hero.is-closed .sp-glass { background: #7A4266; box-shadow: none; }
.sp-c-cloud { position: absolute; fill: #FFFFFF; pointer-events: none; animation: sp-drift 18s ease-in-out infinite; }
@keyframes sp-drift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-16px, 10px); } }
/* Schild: auf der Referenzkarte (430px Viewport − 2 × 16px Rand = 398px breit) 210px breit und
   64px + 12px vom oberen Rand (12px tiefer als zuvor, Wunsch Anis 29.09.2026). Auf schmaleren
   Karten schrumpft das Schild im selben Verhältnis zur Kartenbreite (cqw der .sp-hero), damit es
   den Text nicht überdeckt; breiter als auf der Referenzkarte wird es nicht. Der Abstand oben
   schrumpft mit, aber nie unter die früheren 64px, sonst rückt die Aufhängung an das Etikett. */
.sp-hero.is-closed { container-type: inline-size; }
.sp-sign-wrap { position: absolute; left: 0; right: 0; top: clamp(64px, calc(100cqw * (64 + 12) / 398), calc(64px + 12px)); display: flex; justify-content: center; }
.sp-sign-wrap .sp-sign { width: min(210px, calc(100cqw * 210 / 398)); height: auto; }
.sp-sign { transform-origin: 50% 0; animation: sp-swing 4.2s ease-in-out infinite; filter: drop-shadow(0 18px 22px rgba(62, 28, 50, .35)); }
@keyframes sp-swing { 0%, 100% { transform: rotate(-3.5deg); } 50% { transform: rotate(3.5deg); } }
.sp-back { align-self: flex-start; margin-top: 6px; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 calc(14px + 4px) 0 14px; border-radius: 9999px; background: rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); font-size: 13px; font-weight: 600; color: #FFFFFF; white-space: nowrap; }
.sp-back i { flex: 0 0 7px; height: 7px; border-radius: 4px; background: #FFFFFF; box-shadow: 0 0 0 4px rgba(255, 255, 255, .25); }
/* Rechts 14px + 4px: Entscheidung Anis (29.09.2026), die Pille läuft rechts einen Hauch weiter
   über das Textende hinaus.
   Die Pille bleibt einzeilig (white-space: nowrap). Längste Form „Wieder für euch da: Mo, 30. Sept.“
   misst in Inter 13px 257px und passt erst ab rund 333px Viewport (Karte 244px bei 320px). Mit
   Reserve für abweichende Schriftmetrik steht unter 360px die Kurzform „Ab Mo, 30. Sept.“
   (Entscheidung Anis 29.09.2026). */
#sp-section .sp-back-s { display: none; }
@media (max-width: 359.98px) {
    #sp-section .sp-back-l { display: none; }
    #sp-section .sp-back-s { display: inline; }
}
/* Endlos-Animationen pausieren außerhalb des Sichtbereichs (perfObs in fuer-eltern.js) */
#sp-section.js-paused .sp-c-cloud, #sp-section.js-paused .sp-sign { animation-play-state: paused; }

/* ── Wochenkarte ── */
.sp-list-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; color: var(--sp-wk-ink); }
.sp-list-h { margin: 8px 0 20px; font-size: 28px; line-height: 1.12; font-weight: 800; letter-spacing: -.035em; color: var(--sp-dark); text-wrap: balance; }
.sp-row { width: 100%; margin: 0; padding: 10px; border: 0; background: none; display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 14px; align-items: center; border-radius: 22px; text-align: left; font-family: inherit; cursor: pointer; color: inherit; transition: background-color .35s ease; -webkit-tap-highlight-color: transparent; }
.sp-row + .sp-row { margin-top: 4px; }
.sp-row[aria-pressed="true"] { background: rgba(var(--sp-wk-rgb), .08); }
.sp-thumb { position: relative; width: 72px; height: 72px; border-radius: 18px; overflow: hidden; background: #1B1E23; transition: transform .45s var(--sp-spring); }
.sp-thumb::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); pointer-events: none; }
.sp-row:active .sp-thumb { transform: scale(.94); }
/* Eigener Ausschnitt für die Vorschau: Die Fotos sind 4:5 mit dem Teller im oberen Teil
   (Tellermitte bei 38% der Bildhöhe, Platz für den Text der großen Karte). Im 72px-Quadrat
   steht das Bild oben bündig (Tellermitte bei 38% × 5/4 der Quadrathöhe), wird um die
   Tellermitte 1.15-fach vergrößert und um den Rest (50% − 38% × 5/4) auf die Quadratmitte
   geschoben. Die Bildoberkante bleibt dabei über dem Quadrat. Statisch, keine Animation. */
.sp-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; transform: translateY(calc(50% - 38% * 5 / 4)) scale(1.15); transform-origin: 50% calc(38% * 5 / 4); display: block; }
.sp-thumb.is-empty { background: radial-gradient(90% 80% at 50% 30%, rgba(var(--sp-wk-rgb), .5) 0%, rgba(var(--sp-wk-rgb), 0) 70%), linear-gradient(160deg, #2A2E35, #15181D); display: grid; place-items: center; }
.sp-thumb.is-closed { background: linear-gradient(160deg, #F6C4DA, #B4557F); display: grid; place-items: center; }
.sp-row-meta { display: block; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--sp-ink-3); }
.sp-row[aria-pressed="true"] .sp-row-meta, .sp-row.is-today .sp-row-meta { color: var(--sp-wk-ink); }
.sp-row-main { display: block; margin-top: 4px; font-size: 16px; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; color: var(--sp-dark); overflow-wrap: break-word; text-wrap: pretty; }
.sp-row-sub { display: block; margin-top: 3px; font-size: 13px; line-height: 1.35; color: var(--sp-ink-3); }
.sp-row.is-closed .sp-row-main { color: var(--sp-ink-3); }
.sp-row.is-closed .sp-row-sub { color: #9B4570; font-weight: 600; }

/* ── Legende ── */
.sp-legend { margin-top: 40px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.sp-leg-btn { min-height: 44px; padding: 0 20px; border: 0; border-radius: 9999px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-family: inherit; font-size: 11px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; color: var(--sp-wk-ink); background: rgba(255, 255, 255, .15); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px var(--sp-line); }
.sp-leg-btn svg { transition: transform .3s ease; }
.sp-leg-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.sp-leg-grid { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; padding-inline: 12px; }
.sp-leg-grid div { display: flex; align-items: baseline; gap: 12px; font-size: 15px; color: #334155; }
.sp-leg-grid b { flex: 0 0 14px; font-size: 12px; font-weight: 800; color: var(--sp-wk-ink); }
.sp-note { margin: 0; max-width: 300px; text-align: center; font-size: 13px; line-height: 1.5; color: var(--sp-ink-3); }

#sp-section :where(.sp-nav, .sp-day, .sp-row, .sp-leg-btn, .sp-code, .sp-mcode):focus-visible { outline: 2px solid var(--amina-blue, #48A0D6); outline-offset: 3px; }

/* Kochmütze auf der Eyebrow (_speiseplan.php, .sp-eb / .sp-hat)
   Entscheidung Anis (28.09.2026): Foto-Mütze als WebP mit Transparenz statt eigenem SVG,
   bewusste Ausnahme von der SVG-Regel für Grafiken. Dateien images/kochmuetze-1x/-2x/-3x.webp
   (58/116/174px breit), Motiv beschnitten auf 1167 × 1100 px Quellmaß.
   Größe: Die Mütze muss in den vorhandenen Sektionsabstand passen (py-12 = 48px über der
   Eyebrow, die Sektion schneidet oben ab), Entscheidung Anis: kein zusätzlicher Abstand,
   stattdessen kleinere Mütze. Sie ragt 2.024 Pillenradien über die Pillenoberkante
   (33.4px beim größten Radius 16.5px, mit Glow rund 40px ≤ 48px, Reserve für Hover und
   Landung).
   Passung: Das Band hat eine Aussparung für die Pillenecke. Aus der Kontur der Aussparung
   (Alphakante 50%) ist die Pillenecke eingemessen: gerade Oberkante plus Rundung mit Radius
   340.823 px, Mittelpunkt im Quellbild bei 160.904 | 1035.343, Drehung 0.398°. Die Aussparung
   ist enger als die Rundung bei dieser Größe; die beste Lage weicht höchstens 3.4% des Radius
   ab (0.6px bei 16.5px Radius), abwechselnd als Spalt und als Überdeckung der Kante.
   .sp-hat ist das Quadrat der rechten Pillenrundung (Rahmenkante: 100% Innenhöhe + 2 × 1px
   Rahmen, Breite per aspect-ratio), sein Mittelpunkt ist der Mittelpunkt der Rundung.
   .sp-hat-in legt den eingemessenen Mittelpunkt des Bildes genau darauf und skaliert das
   Bild so, dass 2 × 340.823 Quellpixel der Quadratseite entsprechen. .sp-hat-rot dreht um
   genau diesen Punkt. Alle Wege in den Keyframes sind % der Mützenhöhe: Alles skaliert
   gemeinsam mit der Eyebrow.
   Bewegung: einmaliges Aufsetzen, sobald .reveal sichtbar wird (fuer-eltern.js setzt .active),
   mit kurzem Lüften. Hover lüftet sie erneut; auf Touch-Geräten ist das Aufsetzen beim
   Sichtbarwerden der gleichwertige Auslöser. Keine Endlosschleife, daher kein perfObs-Eintrag.
   Drehpunkt ist der Mittelpunkt der Rundung: Die Mütze kippt auf der Ecke. */
#sp-section .sp-eb { position: relative; }
#sp-section .sp-hat { position: absolute; top: -1px; right: -1px; height: calc(100% + 2px); aspect-ratio: 1 / 1; pointer-events: none; }
#sp-section .sp-hat-rot { position: absolute; inset: 0; transform: rotate(0.398deg); }
#sp-section .sp-hat-in {
    position: absolute;
    width: calc(100% * 1167 / (2 * 340.823));
    aspect-ratio: 1167 / 1100;
    left: calc(50% - 100% * 160.904 / (2 * 340.823));
    top: calc(50% - 100% * 1035.343 / (2 * 340.823));
    transform-origin: calc(100% * 160.904 / 1167) calc(100% * 1035.343 / 1100);
}
#sp-section .sp-hat-tip { display: block; width: 100%; height: 100%; max-width: none; transform-origin: calc(100% * 160.904 / 1167) calc(100% * 1035.343 / 1100); transition: transform .5s var(--sp-spring); filter: drop-shadow(0 1px 1.5px rgba(30, 41, 59, .22)) drop-shadow(0 0 6px rgba(72, 160, 214, .3)); }
#sp-section .reveal.active .sp-hat-in { animation: sp-hat-in 1.2s linear .35s both; }
@keyframes sp-hat-in {
    0%   { opacity: 0; transform: translateY(-8%) rotate(-6deg); animation-timing-function: cubic-bezier(.5, 0, .9, .5); }
    24%  { opacity: 1; }
    40%  { transform: translateY(0) rotate(1.5deg); animation-timing-function: cubic-bezier(.2, .8, .4, 1); }
    62%  { transform: translateY(-3%) rotate(-3deg); animation-timing-function: cubic-bezier(.5, 0, .5, 1); }
    82%  { transform: translateY(0) rotate(.6deg); animation-timing-function: cubic-bezier(.3, .6, .4, 1); }
    100% { opacity: 1; transform: translateY(0) rotate(0deg); }
}
@media (hover: hover) {
    #sp-section .sp-eb:hover .sp-hat-tip { transform: translateY(-3%) rotate(-3deg); }
}

::view-transition-old(sp-hero), ::view-transition-new(sp-hero) { animation-duration: .55s; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }

/* Tiefe: Foto bewegt sich beim Scrollen leicht gegen die Karte (Ruhezustand sichtbar) */
@supports (animation-timeline: view()) {
    .sp-media > img { animation: sp-par linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    @keyframes sp-par { from { transform: translateY(-4%) scale(1.1); } to { transform: translateY(4%) scale(1.1); } }
}

@media (prefers-reduced-motion: reduce) {
    #sp-section .sp-media, #sp-section .sp-media > img, #sp-section .sp-w, #sp-section .sp-rise,
    #sp-section .sp-c-cloud, #sp-section .sp-sign, #sp-section .sp-hat-in { animation: none !important; }
    #sp-section .sp-days-pill, #sp-section .sp-day, #sp-section .sp-nav, #sp-section .sp-thumb,
    #sp-section .sp-row, #sp-section .sp-leg-btn svg, #sp-section .sp-code, #sp-section .sp-mcode, .sp-tip { transition: none; }
    #sp-section .sp-hat-tip, #sp-section .sp-eb:hover .sp-hat-tip { transition: none; transform: none; }
}