/* =========================================================
   hero-film.css – Animiertes Startseiten-Fenster im Hero.

   Ein kurzer, ruhiger Film in Schleife:
     1. Guten Morgen     – die persönliche Startseite
     2. Stundenplan      – Vertretungen erscheinen live
     3. Messenger        – Chat, Lesehaken, Umfrage
     4. Krankmeldung     – absenden, fertig
     5. Klassenbuch & Co – Stunde, Arbeit, Raum
     6. Feature-Lauf     – alle Module mit grünem Haken,
                           immer schneller
     7. Finale           – „Alles in einer Plattform.“

   Ablauf und Zeiten steuert hero-film.js. Innerhalb einer
   Szene läuft alles über CSS-Verzögerungen (--d), sodass
   jede Szene hier im Stylesheet nachvollziehbar bleibt.

   Skalierung: .hf ist ein CSS-Container, alle Maße hängen in
   em an der Schriftgröße von .hf-in (in cqw). Das Fenster
   passt sich damit jeder Breite an.
   ========================================================= */

.hero-visual.hf {
    container-type: inline-size;
    isolation: isolate;
    --hf-blue:   #1565c0;
    --hf-red:    #c62828;
    --hf-orange: #e65100;
    --hf-green:  #16a34a;
    --hf-green-soft: #dcfce7;
    --hf-ease:   cubic-bezier(0.22, 1, 0.36, 1);
    --hf-swipe:  cubic-bezier(0.65, 0, 0.35, 1);
}
.hf-in {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    font-size: clamp(9.5px, 3.05cqw, 15px);
    line-height: 1.35;
}

/* ---------- Kopf (bleibt stehen, Text wechselt) ---------- */
.hf-top {
    position: relative; flex-shrink: 0;
    padding: 0.6em 1.15em 1.45em;
    color: #fff;
    background: linear-gradient(150deg, var(--accent-deep) 0%, var(--accent-deeper) 70%, #0c3a48 100%);
}
.hf-top::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
    height: 1.1em; background: var(--surface);
    border-radius: 1.1em 1.1em 0 0;
}
.hf-bar {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 0.7em; font-weight: 700; letter-spacing: 0.02em; opacity: 0.92;
}
.hf-bar span + span { display: inline-flex; gap: 0.5em; }

/* Szenen-Fortschritt wie bei Stories */
.hf-steps { display: flex; gap: 0.3em; margin: 0.55em 0 0.8em; }
.hf-steps > i {
    flex: 1; height: 0.2em; border-radius: 1em; overflow: hidden;
    background: rgba(255,255,255,0.22);
}
.hf-steps > i > b { display: block; height: 100%; width: 0; background: rgba(255,255,255,0.92); border-radius: inherit; }
.hf-steps > i.is-done > b { width: 100%; }
.hf-steps > i.is-run > b { animation: hfFill var(--dur, 3s) linear forwards; }
@keyframes hfFill { from { width: 0; } to { width: 100%; } }

.hf-head { display: flex; align-items: center; justify-content: space-between; gap: 0.8em; }
.hf-head-txt { min-width: 0; }
.hf-title {
    display: block; font-size: 1.22em; font-weight: 800; letter-spacing: -0.015em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hf-sub {
    display: block; font-size: 0.78em; font-weight: 500; opacity: 0.84; margin-top: 0.1em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hf-title.is-swap, .hf-sub.is-swap { animation: hfTxt 520ms var(--hf-ease) both; }
.hf-sub.is-swap { animation-delay: 70ms; }
@keyframes hfTxt { from { opacity: 0; transform: translateY(0.45em); } to { opacity: 1; transform: none; } }

.hf-avatar {
    width: 2.75em; height: 2.75em; flex-shrink: 0; border-radius: 50%;
    display: grid; place-items: center;
    font-size: 1em; font-weight: 800;
    background: rgba(255,255,255,0.18); border: 1.5px solid rgba(255,255,255,0.38);
}
.hf-avatar > span { font-size: 0.86em; }
.hf-avatar.is-swap > span { animation: hfFlip 560ms var(--hf-ease) both; }
@keyframes hfFlip { from { opacity: 0; transform: rotateY(90deg) scale(0.7); } to { opacity: 1; transform: none; } }

/* ---------- Bühne ---------- */
.hf-stage { position: relative; flex: 1; min-height: 0; z-index: 3; margin-top: -0.35em; }
.hf-scene {
    position: absolute; inset: 0;
    padding: 0.25em 1.1em 1.1em;
    display: flex; flex-direction: column; gap: 0.62em;
    opacity: 0; transform: translateX(26%) scale(0.98);
    transition: opacity 560ms var(--hf-swipe), transform 700ms var(--hf-swipe);
    pointer-events: none;
}
.hf-scene.is-active { opacity: 1; transform: none; }
.hf-scene.is-out    { opacity: 0; transform: translateX(-26%) scale(0.98); }

/* Bausteine erscheinen gestaffelt – --d steuert die Verzögerung */
.hf-a { opacity: 0; }
.is-active .hf-a, .is-out .hf-a { animation: hfUp 620ms var(--hf-ease) var(--d, 0ms) both; }
@keyframes hfUp { from { opacity: 0; transform: translateY(0.8em); } to { opacity: 1; transform: none; } }

.hf-label {
    display: inline-flex; align-items: center; gap: 0.45em;
    font-size: 0.7em; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--ink-muted);
}
.hf-label i { color: var(--warm); }

/* ---------- Karten (gemeinsamer Stil) ---------- */
.hf-card {
    position: relative;
    display: flex; align-items: center; gap: 0.7em;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 0.95em; padding: 0.68em 0.8em;
    box-shadow: 0 1px 3px rgba(13,42,56,0.05);
}
.hf-card > div { min-width: 0; flex: 1; }
.hf-card b { display: block; font-size: 0.9em; line-height: 1.25; }
.hf-card small { display: block; font-size: 0.76em; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hf-num { width: 1.4em; flex-shrink: 0; text-align: center; font-size: 0.82em; font-weight: 800; color: var(--ink-muted); }
.hf-ic {
    width: 2.55em; height: 2.55em; flex-shrink: 0; border-radius: 0.75em;
    display: grid; place-items: center; color: #fff; font-size: 0.92em;
    background: linear-gradient(135deg, var(--accent), var(--accent-deeper));
    box-shadow: 0 0.4em 0.9em -0.45em rgba(13,42,56,0.45);
}
.hf-ic.is-warm   { background: linear-gradient(135deg, #f6a14a, #ea580c); }
.hf-ic.is-violet { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.hf-ic.is-green  { background: linear-gradient(135deg, #22c55e, #15803d); }
.hf-pill {
    margin-left: auto; flex-shrink: 0;
    font-size: 0.68em; font-weight: 800; padding: 0.25em 0.6em; border-radius: 100px;
    background: var(--accent-soft); color: var(--accent-deeper);
}
.hf-pill.is-live { background: var(--accent-deep); color: #fff; display: inline-flex; align-items: center; gap: 0.35em; }
.hf-pill.is-live::before { content: ""; width: 0.5em; height: 0.5em; border-radius: 50%; background: #fff; animation: hfBlink 1.6s ease-in-out infinite; }
.hf-pill.is-warm { background: #fbe3c6; color: #c2691a; }
@keyframes hfBlink { 50% { opacity: 0.25; } }

/* ===== Szene 1: Guten Morgen ===== */
.hf-card.is-alert { border-color: #f7d9b5; background: linear-gradient(100deg, var(--warm-soft), var(--surface) 70%); }
.is-active .hf-card.is-alert, .is-out .hf-card.is-alert { animation: hfUp 620ms var(--hf-ease) var(--d) both, hfGlow 1.4s ease-in-out 1.5s 2; }
@keyframes hfGlow { 50% { box-shadow: 0 0 0 0.3em rgba(246,161,74,0.22); } }

/* ===== Szene 2: Stundenplan ===== */
.hf-grid {
    display: grid; grid-template-columns: 1.3em repeat(5, 1fr);
    gap: 0.32em; font-size: 0.98em;
}
.hf-grid > span { text-align: center; font-size: 0.66em; font-weight: 800; color: var(--ink-muted); align-self: end; }
.hf-grid > em { font-style: normal; font-size: 0.7em; font-weight: 800; color: var(--ink-muted); align-self: center; text-align: center; }
.hf-c {
    position: relative; overflow: hidden;
    height: 3.5em; border-radius: 0.45em;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: var(--surface); border: 1px solid var(--line);
    box-shadow: 0 1px 2px rgba(13,42,56,0.05);
    opacity: 0;
}
.hf-c b { font-size: 0.86em; line-height: 1.1; color: #111f37; }
.hf-c small { font-size: 0.62em; font-weight: 600; color: #3366cc; line-height: 1.2; }
.hf-c.is-free { background: transparent; border-style: dashed; box-shadow: none; }
.is-active .hf-c, .is-out .hf-c { animation: hfPop 460ms var(--hf-ease) var(--d, 0ms) both; }
@keyframes hfPop { from { opacity: 0; transform: scale(0.82); } to { opacity: 1; transform: none; } }

/* Änderungen: Farbe wird live „eingeblendet“ */
.hf-c::before {
    content: ""; position: absolute; inset: 0; opacity: 0;
    border-left: 0.2em solid var(--chg);
    background: linear-gradient(135deg, var(--chg-bg), #f9fafc);
}
.hf-c > * { position: relative; }
.hf-c.x-sub  { --chg: #2196f3; --chg-bg: #e3f2fd; }
.hf-c.x-ent  { --chg: #f44336; --chg-bg: #ffebee; }
.hf-c.x-room { --chg: #ff9800; --chg-bg: #fff3e0; }
.is-active .hf-c[class*="x-"]::before, .is-out .hf-c[class*="x-"]::before { animation: hfShow 420ms var(--hf-ease) var(--x) both; }
@keyframes hfShow { from { opacity: 0; } to { opacity: 1; } }
.is-active .hf-c.x-sub b, .is-out .hf-c.x-sub b,
.is-active .hf-c.x-sub small, .is-out .hf-c.x-sub small { animation: hfToBlue 420ms var(--hf-ease) var(--x) both; }
@keyframes hfToBlue { to { color: var(--hf-blue); } }
.is-active .hf-c.x-ent b, .is-out .hf-c.x-ent b,
.is-active .hf-c.x-ent small, .is-out .hf-c.x-ent small { animation: hfToRed 420ms var(--hf-ease) var(--x) both; }
@keyframes hfToRed { to { color: var(--hf-red); text-decoration: line-through; } }
.is-active .hf-c.x-room small, .is-out .hf-c.x-room small { animation: hfToOrange 420ms var(--hf-ease) var(--x) both; }
@keyframes hfToOrange { to { color: var(--hf-orange); font-weight: 800; } }
/* Text tauschen: alter Wert raus, neuer rein */
.hf-swap { display: grid; }
.hf-swap > * { grid-area: 1 / 1; }
.hf-swap > :last-child { opacity: 0; }
.is-active .hf-swap > :first-child, .is-out .hf-swap > :first-child { animation: hfOut 300ms ease var(--x) both; }
.is-active .hf-swap > :last-child,  .is-out .hf-swap > :last-child  { animation: hfIn2 380ms var(--hf-ease) calc(var(--x) + 180ms) both; }
@keyframes hfOut { to { opacity: 0; transform: translateY(-0.5em); } }
@keyframes hfIn2 { from { opacity: 0; transform: translateY(0.5em); } to { opacity: 1; transform: none; } }

.hf-toast {
    position: absolute; left: 1.1em; right: 1.1em; top: 0.2em; z-index: 4;
    display: flex; align-items: center; gap: 0.65em;
    background: rgba(255,255,255,0.97); border: 1px solid var(--line);
    border-radius: 0.95em; padding: 0.6em 0.75em;
    box-shadow: 0 1.2em 2.4em -1em rgba(13,42,56,0.38);
    opacity: 0;
}
.hf-toast b { display: block; font-size: 0.86em; }
.hf-toast small { display: block; font-size: 0.72em; color: var(--ink-muted); }
.hf-toast .hf-ic { width: 2.2em; height: 2.2em; }
.is-active .hf-toast, .is-out .hf-toast { animation: hfToast 2300ms var(--hf-ease) 1.1s both; }
@keyframes hfToast {
    0%   { opacity: 0; transform: translateY(-120%); }
    16%  { opacity: 1; transform: none; }
    82%  { opacity: 1; transform: none; }
    100% { opacity: 0; transform: translateY(-120%); }
}
.hf-legend { display: flex; flex-wrap: wrap; gap: 0.4em; margin-top: 0.35em; }
.hf-legend > span {
    display: inline-flex; align-items: center; gap: 0.4em;
    font-size: 0.7em; font-weight: 700; padding: 0.3em 0.7em; border-radius: 100px;
    border: 1px solid; opacity: 0;
}
.hf-legend > span::before { content: ""; width: 0.55em; height: 0.55em; border-radius: 50%; background: currentColor; }
.hf-legend .l-sub  { background: #e3f2fd; color: var(--hf-blue);   border-color: #bbdefb; }
.hf-legend .l-ent  { background: #ffebee; color: var(--hf-red);    border-color: #ffcdd2; }
.hf-legend .l-room { background: #fff3e0; color: var(--hf-orange); border-color: #ffe0b2; }
.is-active .hf-legend > span, .is-out .hf-legend > span { animation: hfUp 480ms var(--hf-ease) var(--x) both; }

/* ===== Szene 3: Messenger ===== */
.hf-chat {
    flex: 1; min-height: 0; border-radius: 1em; background: #eef4f7;
    padding: 0.7em; display: flex; flex-direction: column; gap: 0.5em; overflow: hidden;
}
.hf-chathead { display: flex; align-items: center; gap: 0.6em; padding-bottom: 0.55em; border-bottom: 1px solid #dde7ec; }
.hf-chathead b { font-size: 0.88em; display: block; }
.hf-chathead small { font-size: 0.7em; color: var(--ink-muted); display: block; }
.hf-chathead small.is-typing { color: var(--accent-deep); font-weight: 700; }
.hf-av {
    width: 2.3em; height: 2.3em; border-radius: 50%; flex-shrink: 0;
    display: grid; place-items: center; color: #fff; font-size: 0.78em; font-weight: 800;
    background: linear-gradient(135deg, #2e9e8b, #1f6a5f);
}
.hf-msg {
    max-width: 82%; padding: 0.5em 0.75em; border-radius: 1em;
    font-size: 0.82em; line-height: 1.35;
    background: #fff; box-shadow: 0 1px 1.5px rgba(13,42,56,0.08);
    border-bottom-left-radius: 0.3em;
}
.hf-msg > i { display: block; font-style: normal; font-size: 0.82em; font-weight: 800; color: #c2691a; margin-bottom: 0.1em; }
.hf-msg.is-me {
    align-self: flex-end; background: #d9f3f8;
    border-bottom-left-radius: 1em; border-bottom-right-radius: 0.3em;
}
.hf-meta { display: flex; justify-content: flex-end; align-items: center; gap: 0.3em; margin-top: 0.15em; font-size: 0.78em; color: var(--ink-muted); }
.hf-ticks { position: relative; color: #9aa9b1; }
.is-active .hf-ticks, .is-out .hf-ticks { animation: hfTick 300ms ease 1.65s both; }
@keyframes hfTick { to { color: #2f9bff; } }
.hf-typing {
    display: inline-flex; gap: 0.25em; padding: 0.65em 0.8em; background: #fff;
    border-radius: 1em; border-bottom-left-radius: 0.3em; align-self: flex-start;
    opacity: 0;
}
.hf-typing i { width: 0.42em; height: 0.42em; border-radius: 50%; background: #9aa9b1; animation: hfDot 1s ease-in-out infinite; }
.hf-typing i:nth-child(2) { animation-delay: 0.15s; } .hf-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes hfDot { 50% { transform: translateY(-0.25em); opacity: 0.5; } }
.is-active .hf-typing, .is-out .hf-typing { animation: hfTyping 900ms ease 1.9s both; }
@keyframes hfTyping { 0% { opacity: 0; max-height: 0; } 15%,80% { opacity: 1; max-height: 3em; } 100% { opacity: 0; max-height: 0; padding: 0; margin: -0.5em 0 0; } }

.hf-poll {
    align-self: flex-start; width: 82%; background: #fff; border-radius: 1em; border-bottom-left-radius: 0.3em;
    padding: 0.6em 0.75em; box-shadow: 0 1px 1.5px rgba(13,42,56,0.08);
}
.hf-poll > b { display: flex; align-items: center; gap: 0.45em; font-size: 0.8em; margin-bottom: 0.45em; }
.hf-poll > b i { color: var(--accent-deep); }
.hf-opt { position: relative; font-size: 0.74em; font-weight: 600; padding: 0.35em 0.6em; border-radius: 0.5em; background: var(--surface-2); overflow: hidden; display: flex; justify-content: space-between; }
.hf-opt + .hf-opt { margin-top: 0.3em; }
.hf-opt::before {
    content: ""; position: absolute; inset: 0; right: auto; width: var(--w);
    background: var(--accent-tint); transform-origin: left; transform: scaleX(0);
}
.hf-opt > * { position: relative; }
.is-active .hf-opt::before, .is-out .hf-opt::before { animation: hfBar 900ms var(--hf-ease) 3.0s both; }
@keyframes hfBar { to { transform: scaleX(1); } }

/* ===== Szene 4: Krankmeldung ===== */
.hf-form {
    position: relative; flex: 1; min-height: 0;
    background: var(--surface); border: 1px solid var(--line); border-radius: 1em;
    padding: 0.85em; display: flex; flex-direction: column; gap: 0.55em; overflow: hidden;
}
.hf-kid { display: flex; align-items: center; gap: 0.6em; padding-bottom: 0.55em; border-bottom: 1px solid var(--line); }
.hf-kid .hf-av { background: linear-gradient(135deg, #efa457, #c2691a); }
.hf-kid b { display: block; font-size: 0.88em; } .hf-kid small { display: block; font-size: 0.7em; color: var(--ink-muted); }
.hf-field { display: flex; justify-content: space-between; align-items: center; gap: 0.6em; }
.hf-field > span { font-size: 0.74em; font-weight: 700; color: var(--ink-muted); }
.hf-input {
    display: inline-grid; justify-items: end; white-space: nowrap;
    font-size: 0.78em; font-weight: 700;
    padding: 0.38em 0.7em; border-radius: 0.55em; border: 1px solid var(--line-strong);
    color: var(--ink-muted); background: var(--surface-2); min-width: 9.5em;
}
.hf-input > em { font-style: normal; grid-area: 1 / 1; }
.hf-input > em + em { opacity: 0; color: var(--ink); }
.is-active .hf-input, .is-out .hf-input { animation: hfSet 360ms ease var(--x) both; }
.is-active .hf-input > em:first-child, .is-out .hf-input > em:first-child { animation: hfOut 260ms ease var(--x) both; }
.is-active .hf-input > em + em, .is-out .hf-input > em + em { animation: hfIn2 360ms var(--hf-ease) calc(var(--x) + 120ms) both; }
@keyframes hfSet { to { border-color: var(--accent); background: var(--accent-soft); } }
.hf-switch { width: 2.3em; height: 1.3em; border-radius: 1em; background: var(--accent-deep); position: relative; flex-shrink: 0; }
.hf-switch::after { content: ""; position: absolute; top: 0.15em; right: 0.15em; width: 1em; height: 1em; border-radius: 50%; background: #fff; }
.hf-send {
    margin-top: auto; text-align: center; font-size: 0.84em; font-weight: 800; color: #fff;
    padding: 0.7em; border-radius: 0.75em;
    background: linear-gradient(135deg, var(--accent-deep), var(--accent-deeper));
    box-shadow: 0 0.6em 1.2em -0.7em var(--accent-deeper);
}
.is-active .hf-send, .is-out .hf-send { animation: hfUp 620ms var(--hf-ease) var(--d) both, hfPress 380ms ease 2.35s; }
@keyframes hfPress { 40% { transform: scale(0.95); filter: brightness(0.92); } 100% { transform: none; } }
.hf-tap {
    position: absolute; left: 50%; bottom: 1.2em; width: 2.6em; height: 2.6em; margin-left: -1.3em;
    border-radius: 50%; border: 2px solid var(--accent); opacity: 0; pointer-events: none;
}
.is-active .hf-tap, .is-out .hf-tap { animation: hfRing 700ms ease-out 2.25s forwards; }
@keyframes hfRing { 0% { opacity: 0.9; transform: scale(0.4); } 100% { opacity: 0; transform: scale(1.8); } }

.hf-done {
    position: absolute; inset: 0; z-index: 2;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4em;
    background: rgba(255,255,255,0.96); text-align: center; opacity: 0;
}
.is-active .hf-done, .is-out .hf-done { animation: hfShow 380ms ease 2.75s both; }
.hf-done b { font-size: 1.15em; letter-spacing: -0.01em; }
.hf-done small { font-size: 0.78em; color: var(--ink-muted); max-width: 20em; }
.hf-done-chips { display: flex; gap: 0.3em; margin-top: 0.35em; }
.hf-done-chips > span {
    font-size: 0.68em; font-weight: 800; padding: 0.25em 0.55em; border-radius: 0.45em;
    background: var(--hf-green-soft); color: #15803d; opacity: 0;
}
.is-active .hf-done-chips > span, .is-out .hf-done-chips > span { animation: hfPop 380ms var(--hf-ease) var(--x) both; }

/* Gezeichneter Haken (wird für Krankmeldung und Finale verwendet) */
.hf-check { width: 4.2em; height: 4.2em; }
.hf-check circle { fill: var(--hf-green-soft); stroke: var(--hf-green); stroke-width: 3; stroke-dasharray: 151; stroke-dashoffset: 151; }
.hf-check path { fill: none; stroke: var(--hf-green); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; }
.is-active .hf-done .hf-check circle, .is-out .hf-done .hf-check circle { animation: hfDraw 560ms var(--hf-ease) 2.85s forwards; }
.is-active .hf-done .hf-check path,   .is-out .hf-done .hf-check path   { animation: hfDraw 420ms var(--hf-ease) 3.2s forwards; }
@keyframes hfDraw { to { stroke-dashoffset: 0; } }

/* ===== Szene 5: Klassenbuch, Arbeiten, Räume ===== */
.hf-kb { flex-direction: column; align-items: stretch; gap: 0.45em; padding: 0.75em 0.85em; }
.hf-kb-row { display: flex; gap: 0.8em; align-items: flex-start; }
.hf-kb-left { text-align: center; min-width: 2.6em; }
.hf-kb-left b { display: block; font-size: 1.35em; color: var(--accent-deeper); line-height: 1.1; }
.hf-kb-left small { display: block; font-size: 0.62em; font-weight: 800; letter-spacing: 0.06em; color: var(--ink-muted); }
.hf-kb-left i { display: block; font-style: normal; font-size: 0.72em; font-weight: 800; color: var(--accent-deep); }
.hf-kb-txt { flex: 1; min-width: 0; font-size: 0.78em; line-height: 1.45; }
.hf-kb-txt em { font-style: normal; font-size: 0.82em; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); margin-right: 0.4em; }
.hf-type { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom; max-width: 0; }
.is-active .hf-type, .is-out .hf-type { animation: hfType 1100ms steps(30) var(--x) forwards; }
@keyframes hfType { to { max-width: 22em; } }
.hf-card > .hf-prog { flex: none; }
.hf-prog { height: 0.42em; border-radius: 1em; background: #e5ebef; overflow: hidden; position: relative; }
.hf-prog::before { content: ""; position: absolute; inset: 0; width: 0; border-radius: inherit; background: #facc15; }
.is-active .hf-prog::before, .is-out .hf-prog::before { animation: hfProg 2400ms linear 0.5s both; }
@keyframes hfProg { 0% { width: 0; background: #facc15; } 88% { width: 100%; background: #facc15; } 100% { width: 100%; background: var(--accent-deeper); } }

.hf-date {
    width: 2.9em; flex-shrink: 0; text-align: center; border-radius: 0.65em; overflow: hidden;
    border: 1px solid var(--line); background: var(--surface);
}
.hf-date small { display: block; font-size: 0.6em; font-weight: 800; color: #fff; background: #6d28d9; padding: 0.15em 0; white-space: normal; }
.hf-date b { display: block; font-size: 1.1em; padding: 0.1em 0 0.15em; }
.hf-room { display: inline-grid; vertical-align: bottom; }
.hf-room > * { grid-area: 1 / 1; }
.hf-room s { color: var(--ink-muted); }
.hf-room em { font-style: normal; font-weight: 800; color: var(--hf-orange); opacity: 0; }
.is-active .hf-room s, .is-out .hf-room s { animation: hfOut 300ms ease 2.4s both; }
.is-active .hf-room em, .is-out .hf-room em { animation: hfIn2 380ms var(--hf-ease) 2.55s both; }

/* ===== Szene 6: Feature-Lauf ===== */
.hf-count { display: flex; align-items: flex-end; gap: 0.8em; }
.hf-count-num { font-size: 2.6em; font-weight: 800; letter-spacing: -0.04em; line-height: 0.95; font-variant-numeric: tabular-nums; color: var(--ink); transition: color 300ms ease; }
.hf-count-num small { font-size: 0.42em; color: var(--ink-muted); letter-spacing: 0; font-weight: 700; margin-left: 0.15em; }
.hf-count-txt { flex: 1; min-width: 0; padding-bottom: 0.2em; }
.hf-count-txt b { display: block; font-size: 0.86em; }
.hf-count-bar { height: 0.32em; border-radius: 1em; background: var(--surface-2); margin-top: 0.4em; overflow: hidden; }
.hf-count-bar > i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--hf-green)); transition: width 160ms linear; }
.hf-run.is-complete .hf-count-num { color: var(--hf-green); }

.hf-list-view {
    position: relative; flex: 1; min-height: 0; overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 80%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 80%, transparent 100%);
}
.hf-list {
    --row: 2.75em;
    position: absolute; left: 0; right: 0; top: 0;
    padding-top: calc(var(--row) * 0.6);
    transition: transform 420ms var(--hf-ease);
    will-change: transform;
}
.hf-list.is-fast { filter: blur(0.35px); }
.hf-row {
    height: var(--row);
    display: flex; align-items: center; gap: 0.7em;
    padding: 0 0.55em; border-radius: 0.7em;
    transition: background 200ms ease, opacity 200ms ease;
    opacity: 0.55;
}
.hf-row > i:first-child {
    width: 2em; height: 2em; flex-shrink: 0; border-radius: 0.55em;
    display: grid; place-items: center; font-size: 0.82em;
    background: var(--surface-2); color: var(--ink-muted);
    transition: background 200ms ease, color 200ms ease;
}
.hf-row span { flex: 1; min-width: 0; font-size: 0.86em; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-soft); }
.hf-tick {
    width: 1.55em; height: 1.55em; flex-shrink: 0; border-radius: 50%;
    display: grid; place-items: center; font-size: 0.78em; color: transparent;
    border: 1.5px solid var(--line-strong); transition: all 220ms var(--hf-ease);
}
.hf-row.is-cur { opacity: 1; background: var(--accent-soft); }
.hf-row.is-done { opacity: 1; }
.hf-row.is-done > i:first-child { background: var(--accent-soft); color: var(--accent-deeper); }
.hf-row.is-done span { color: var(--ink); }
.hf-row.is-done .hf-tick { background: var(--hf-green); border-color: var(--hf-green); color: #fff; animation: hfTickPop 360ms var(--hf-ease); }
@keyframes hfTickPop { 0% { transform: scale(0.4); } 60% { transform: scale(1.18); } 100% { transform: none; } }
.hf-list.is-fast .hf-row.is-done .hf-tick { animation-duration: 160ms; }

/* ===== Szene 7: Finale ===== */
.hf-final { align-items: center; justify-content: center; text-align: center; gap: 0.3em; }
.hf-orbit { position: relative; width: 17em; height: 17em; flex-shrink: 0; }
.hf-orbit-ring {
    position: absolute; inset: 1.4em; border-radius: 50%;
    border: 1.5px dashed var(--accent-tint);
}
.hf-orbit-spin { position: absolute; inset: 0; }
.is-active .hf-orbit-spin, .is-out .hf-orbit-spin { animation: hfSpin 24s linear infinite; }
@keyframes hfSpin { to { transform: rotate(360deg); } }
.hf-orb {
    position: absolute; left: 50%; top: 50%; width: 2.5em; height: 2.5em; margin: -1.25em 0 0 -1.25em;
    border-radius: 50%; display: grid; place-items: center; font-size: 0.9em; color: #fff;
    background: var(--c, var(--accent-deep));
    box-shadow: 0 0.5em 1em -0.5em rgba(13,42,56,0.5);
    transform: rotate(var(--a)) translateY(-7.15em) rotate(calc(var(--a) * -1));
    opacity: 0;
}
.hf-orb > i { display: block; }
.is-active .hf-orb, .is-out .hf-orb { animation: hfOrbIn 900ms var(--hf-ease) var(--d) both; }
.is-active .hf-orb > i, .is-out .hf-orb > i { animation: hfCounter 24s linear infinite; }
@keyframes hfCounter { to { transform: rotate(-360deg); } }
@keyframes hfOrbIn {
    from { opacity: 0; transform: rotate(calc(var(--a) - 40deg)) translateY(-11em) rotate(calc((var(--a) - 40deg) * -1)) scale(0.6); }
    to   { opacity: 1; transform: rotate(var(--a)) translateY(-7.15em) rotate(calc(var(--a) * -1)); }
}
.hf-core {
    position: absolute; left: 50%; top: 50%; width: 6.2em; height: 6.2em; margin: -3.1em 0 0 -3.1em;
    border-radius: 1.8em; display: grid; place-items: center;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deeper) 100%);
    box-shadow: 0 1.4em 2.6em -1.1em var(--accent-deeper), 0 0 0 0.6em rgba(6,182,212,0.1);
    color: #fff; font-size: 1em; opacity: 0;
}
.hf-core > i { font-size: 2.2em; }
.hf-core-check {
    position: absolute; right: -0.55em; bottom: -0.55em; width: 2.3em; height: 2.3em; border-radius: 50%;
    display: grid; place-items: center; background: var(--hf-green); color: #fff; font-size: 0.85em;
    border: 0.22em solid #fff; opacity: 0;
}
.is-active .hf-core, .is-out .hf-core { animation: hfCore 700ms var(--hf-ease) 0.15s both; }
@keyframes hfCore { from { opacity: 0; transform: scale(0.5) rotate(-12deg); } to { opacity: 1; transform: none; } }
.is-active .hf-core-check, .is-out .hf-core-check { animation: hfBadge 520ms var(--hf-ease) 1.25s both; }
@keyframes hfBadge { 0% { opacity: 0; transform: scale(0.3); } 60% { opacity: 1; transform: scale(1.18); } 100% { opacity: 1; transform: none; } }
.hf-final-txt b { display: block; font-size: 1.55em; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; }
.hf-final-txt b span {
    background: linear-gradient(120deg, var(--accent) 0%, var(--accent-deeper) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hf-final-txt small { display: block; font-size: 0.8em; color: var(--ink-muted); margin-top: 0.25em; font-weight: 600; }

/* ---------- Pause (außerhalb des Sichtfelds / Tab im Hintergrund) ---------- */
.hf.is-paused *, .hf.is-paused *::before, .hf.is-paused *::after { animation-play-state: paused !important; }

/* ---------- Reduzierte Bewegung: ruhiges Standbild ---------- */
@media (prefers-reduced-motion: reduce) {
    .hf-steps { visibility: hidden; }
}

/* ---------- Breiten ---------- */
@media (max-width: 980px) {
    .hero-visual.hf { max-width: 440px; width: 100%; }
}

/* Szene 1: Modulkacheln wie auf der echten Startseite */
.hf-tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.4em; }
.hf-tiles > span {
    display: flex; flex-direction: column; align-items: center; gap: 0.3em;
    padding: 0.55em 0.1em 0.45em; border-radius: 0.75em;
    background: var(--surface-2); border: 1px solid var(--line);
    font-size: 0.62em; font-weight: 700; color: var(--ink-soft); text-align: center; line-height: 1.15;
    opacity: 0;
}
.hf-tiles > span i { font-size: 1.55em; color: var(--accent-deep); }
.hf-tiles > span.is-hot { background: #fff1f1; border-color: #fecaca; }
.hf-tiles > span.is-hot i { color: #e5484d; }
.is-active .hf-tiles > span, .is-out .hf-tiles > span { animation: hfPop 460ms var(--hf-ease) var(--d) both; }

/* Szene 3: Newspage-Karte mit Lesebestätigungen */
.hf-reads { margin-top: 0.35em; height: 0.3em; border-radius: 1em; background: var(--surface-2); overflow: hidden; }
.hf-reads > i { display: block; height: 100%; width: 79%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-deeper)); transform-origin: left; transform: scaleX(0); }
.is-active .hf-reads > i, .is-out .hf-reads > i { animation: hfBar 1600ms var(--hf-ease) 0.5s both; }

/* Szene 4: Hinweis */
.hf-hint {
    display: flex; gap: 0.55em; align-items: flex-start;
    font-size: 0.74em; line-height: 1.4; color: var(--accent-deeper);
    background: var(--accent-soft); border: 1px solid var(--accent-tint);
    border-radius: 0.7em; padding: 0.55em 0.7em;
}
.hf-hint i { margin-top: 0.15em; }