/*
 * Ambient-Ebene (App\Twig\AmbientExtension, templates/_ambient.html.twig): ruhige, rein dekorative Figuren
 * hinter dem Inhalt, je Look, Bereich und Saison. Nur transform und opacity werden animiert, keine
 * Pointer-Events, kein JavaScript. Bei „Bewegung reduzieren“ stehen die Figuren still. Der Schalter
 * „Bewegung anhalten“ im Footer (#ambient-pause, ohne Speicherung) pausiert auch die Halloween-Ebene.
 */

/*
 * Layering: the figures fly above the coloured surfaces of the sections (hero, bo-section) but below the content.
 * With z-index -1 they sat behind those opaque surfaces and were never seen; now every content container lifts
 * itself above the layer (the hero's container already does, at 2).
 */
.bo-ambient {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    contain: strict;
    color: var(--ink-muted);
}

.bo-container {
    position: relative;
    z-index: 1;
}

.bo-ambient svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.bo-ambient--dark { color: var(--on-night-body); }

/* ===== BuchTicker (Look dark) außerhalb der Saison: Drachen, UFO, Sternschnuppen, Funken, Sterne =====
 * Freundliche Figuren (kein Grusel), geringe Deckkraft, lange Zyklen mit langen Pausen: der Auftritt
 * füllt nur einen Teil des Zyklus, den Rest wartet die Figur außerhalb des Bildes. */
.bo-am-glow { fill: var(--highlight); }
.bo-am-dome { fill: var(--accent); opacity: .55; }
.bo-am-light { fill: var(--highlight); }

.bo-ambient__dragon,
.bo-ambient__ufo {
    position: absolute;
    left: 0;
    color: var(--ink-body);
    transform: translateX(-30vw);
}

.bo-ambient__dragon svg { position: absolute; inset: 0; }

.bo-ambient__dragon {
    width: 150px;
    height: 75px;
    opacity: .28;
    animation: am-glide-right 48s cubic-bezier(.45, 0, .55, 1) infinite;
}

.bo-ambient__dragon--1 { top: 14vh; animation-delay: -6s; }
.bo-ambient__dragon--2 {
    top: 46vh;
    width: 100px;
    height: 50px;
    opacity: .18;
    animation-name: am-glide-left;
    animation-duration: 60s;
    animation-delay: -36s;
}

.bo-ambient__dragon--2 svg { scale: -1 1; }

/* Der Flügel schlägt um seine Wurzel am Rücken. */
.bo-ambient__wing {
    transform-origin: 50% 56%;
    animation: am-wingbeat 1.4s cubic-bezier(.45, 0, .55, 1) infinite alternate;
}

.bo-ambient__ufo {
    width: 96px;
    height: 48px;
    opacity: .3;
    animation: am-glide-right 52s cubic-bezier(.45, 0, .55, 1) infinite;
}

.bo-ambient__ufo--1 { top: 18vh; animation-delay: -4s; }
.bo-ambient__ufo--2 { top: 36vh; animation-delay: -26s; }

.bo-ambient__ufo svg {
    position: relative;
    animation: am-hover 6s cubic-bezier(.45, 0, .55, 1) infinite alternate;
}

/* Kurzer Lichtkegel mitten im Flug (gleicher Zyklus wie das UFO). */
.bo-ambient__beam {
    position: absolute;
    top: 70%;
    left: 22%;
    width: 56%;
    height: 200%;
    background: linear-gradient(color-mix(in srgb, var(--accent) 45%, transparent), transparent);
    clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%);
    transform-origin: 50% 0;
    opacity: 0;
    animation: am-beam 52s cubic-bezier(.45, 0, .55, 1) infinite;
}

.bo-ambient__ufo--1 .bo-ambient__beam { animation-delay: -4s; }
.bo-ambient__ufo--2 .bo-ambient__beam { animation-delay: -26s; }

/* Der Auftritt dauert etwa ein Drittel des Zyklus, danach lange Pause außerhalb des Bildes. */
@keyframes am-glide-right {
    0% { transform: translateX(-30vw) translateY(0); }
    36%, 100% { transform: translateX(115vw) translateY(-5vh); }
}

@keyframes am-glide-left {
    0% { transform: translateX(115vw) translateY(0); }
    36%, 100% { transform: translateX(-30vw) translateY(4vh); }
}

@keyframes am-wingbeat {
    from { transform: scaleY(1); }
    to { transform: scaleY(-.55); }
}

@keyframes am-hover {
    from { transform: translateY(-4px) rotate(-3deg); }
    to { transform: translateY(4px) rotate(3deg); }
}

@keyframes am-beam {
    0%, 10%, 24%, 100% { opacity: 0; transform: scaleY(.3); }
    17% { opacity: .8; transform: scaleY(1); }
}

/* Sternschnuppen: ein kurzer Streifen etwa alle 40 bis 55 Sekunden. */
.bo-ambient__meteor {
    position: absolute;
    width: 120px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--on-night));
    opacity: 0;
    rotate: 24deg;
    animation: am-meteor 44s cubic-bezier(.23, 1, .32, 1) infinite;
}

.bo-ambient__meteor--1 { top: 9vh; left: 24vw; animation-delay: -10s; }
.bo-ambient__meteor--2 { top: 5vh; left: 62vw; animation-delay: -31s; animation-duration: 56s; }
.bo-ambient__meteor--3 { top: 12vh; left: 48vw; animation-delay: -20s; animation-duration: 52s; }

@keyframes am-meteor {
    0%, 90% { opacity: 0; transform: translateX(-24vw); }
    92% { opacity: .5; }
    97%, 100% { opacity: 0; transform: translateX(8vw); }
}

/* Funkeln: wenige Punkte, die langsam heller und dunkler werden. */
.bo-ambient__stars,
.bo-ambient__stars::after {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(1.5px 1.5px at 12% 18%, var(--on-night), transparent),
        radial-gradient(1px 1px at 34% 62%, var(--on-night), transparent),
        radial-gradient(1.5px 1.5px at 58% 28%, var(--on-night), transparent),
        radial-gradient(1px 1px at 82% 74%, var(--on-night), transparent);
    background-size: 420px 380px;
    opacity: .1;
    animation: am-twinkle 22s cubic-bezier(.45, 0, .55, 1) infinite alternate;
}

.bo-ambient__stars::after {
    content: "";
    background-size: 560px 500px;
    background-position: 150px 110px;
    animation-delay: -11s;
}

@keyframes am-twinkle {
    from { opacity: .06; }
    to { opacity: .26; }
}

/* Zauberfunken steigen langsam auf. */
.bo-ambient__spark {
    position: absolute;
    bottom: -12px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--highlight-ink), color-mix(in srgb, var(--highlight) 0%, transparent) 70%);
    opacity: 0;
    animation: am-rise var(--am-time, 26s) linear infinite;
}

.bo-ambient__spark--1 { left: 8%; --am-time: 24s; }
.bo-ambient__spark--2 { left: 22%; --am-time: 30s; animation-delay: -12s; }
.bo-ambient__spark--3 { left: 35%; --am-time: 27s; animation-delay: -5s; }
.bo-ambient__spark--4 { left: 50%; --am-time: 34s; animation-delay: -18s; }
.bo-ambient__spark--5 { left: 63%; --am-time: 25s; animation-delay: -9s; }
.bo-ambient__spark--6 { left: 75%; --am-time: 32s; animation-delay: -21s; }
.bo-ambient__spark--7 { left: 87%; --am-time: 28s; animation-delay: -2s; }
.bo-ambient__spark--8 { left: 94%; --am-time: 36s; animation-delay: -15s; }

@keyframes am-rise {
    0% { opacity: 0; transform: translate(0, 0); }
    12% { opacity: .5; }
    50% { transform: translate(16px, -50vh); }
    88% { opacity: .3; }
    100% { opacity: 0; transform: translate(-12px, -100vh); }
}

/* ===== Gemeinsame Bewegungen: Aufsteigen und Herabsinken =====
 * Der Auftritt dauert gut ein Drittel des Zyklus (Länge --t), danach wartet die Figur außerhalb des
 * Bildes. Verzögerung --d (negativ = schon unterwegs), Spitzen-Deckkraft --am-o. Das seitliche
 * Wiegen läuft getrennt über die Eigenschaft translate, das Neigen über rotate. */
@keyframes am-ascend {
    0% { opacity: 0; transform: translateY(0); }
    4%, 32% { opacity: var(--am-o, .3); }
    37%, 100% { opacity: 0; transform: translateY(-118vh); }
}

@keyframes am-descend {
    0% { opacity: 0; transform: translateY(0); }
    4%, 32% { opacity: var(--am-o, .3); }
    37%, 100% { opacity: 0; transform: translateY(124vh); }
}

@keyframes am-sway {
    from { translate: -16px 0; }
    to { translate: 16px 0; }
}

@keyframes am-tilt {
    from { rotate: -35deg; }
    to { rotate: 45deg; }
}

/* ===== LeseTicker (Look romance): schwebende Herzen, fallende Rosenblätter ===== */
.bo-ambient__heart,
.bo-ambient__petal {
    position: absolute;
    left: var(--x);
    width: var(--w);
    height: var(--w);
    opacity: 0;
}

.bo-ambient__heart {
    top: 100vh;
    color: var(--accent);
    --am-o: .3;
    animation:
        am-ascend var(--t) linear var(--d) infinite,
        am-sway 7s cubic-bezier(.45, 0, .55, 1) var(--d) infinite alternate;
}

.bo-ambient__petal {
    top: -8vh;
    color: var(--accent-ink);
    --am-o: .22;
    animation:
        am-descend var(--t) linear var(--d) infinite,
        am-sway 6s cubic-bezier(.45, 0, .55, 1) var(--d) infinite alternate,
        am-tilt 9s cubic-bezier(.45, 0, .55, 1) var(--d) infinite alternate;
}

.bo-ambient__heart--1 { --x: 8%; --w: 28px; --t: 58s; --d: -6s; }
.bo-ambient__heart--2 { --x: 78%; --w: 20px; --t: 66s; --d: -30s; }
.bo-ambient__heart--3 { --x: 30%; --w: 22px; --t: 52s; --d: -22s; }
.bo-ambient__heart--4 { --x: 90%; --w: 30px; --t: 62s; --d: -44s; }
.bo-ambient__heart--5 { --x: 55%; --w: 18px; --t: 70s; --d: -12s; }
.bo-ambient__heart--6 { --x: 18%; --w: 24px; --t: 60s; --d: -50s; }

.bo-ambient__petal--1 { --x: 12%; --w: 18px; --t: 50s; --d: -4s; }
.bo-ambient__petal--2 { --x: 40%; --w: 16px; --t: 58s; --d: -20s; }
.bo-ambient__petal--3 { --x: 66%; --w: 20px; --t: 46s; --d: -33s; }
.bo-ambient__petal--4 { --x: 85%; --w: 15px; --t: 62s; --d: -9s; }
.bo-ambient__petal--5 { --x: 52%; --w: 17px; --t: 54s; --d: -41s; }

@media (max-width: 640px) {
    .bo-ambient__heart--2,
    .bo-ambient__heart--4,
    .bo-ambient__heart--6,
    .bo-ambient__petal--2,
    .bo-ambient__petal--4,
    .bo-ambient--sparse .bo-ambient__petal {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bo-ambient__heart,
    .bo-ambient__petal {
        display: none;
    }
}

/* ===== LeseCharts (Look sachbuch): leuchtende Glühbirnen, sich zeichnende Diagrammlinien, Pfeile nach oben ===== */
.bo-ambient__bulb {
    position: absolute;
    width: 22px;
    height: 38px;
    color: var(--ink-muted);
    opacity: .3;
}

.bo-ambient__bulb--1 { top: 12%; left: 14%; --d: -4s; --t: 38s; }
.bo-ambient__bulb--2 { top: 40%; right: 9%; --d: -20s; --t: 44s; }
.bo-ambient__bulb--3 { top: 72%; left: 62%; --d: -33s; --t: 50s; }

/* Das Leuchten: etwa ein Drittel des Zyklus an, sonst aus. */
.bo-ambient__glow {
    position: absolute;
    inset: -42px;
    display: grid;
    place-items: center;
    color: var(--highlight);
    background: radial-gradient(circle, color-mix(in srgb, var(--highlight) 38%, transparent), transparent 62%);
    opacity: 0;
    animation: am-glow var(--t) cubic-bezier(.45, 0, .55, 1) var(--d) infinite;
}

.bo-ambient__glow svg {
    width: 22px;
    height: 38px;
}

@keyframes am-glow {
    0%, 6% { opacity: 0; }
    13%, 32% { opacity: 1; }
    40%, 100% { opacity: 0; }
}

.bo-ambient__chart {
    position: absolute;
    width: 190px;
    height: 95px;
    color: var(--ink-muted);
    opacity: 0;
    --am-o: .3;
    animation: am-chart 42s cubic-bezier(.45, 0, .55, 1) infinite;
}

.bo-ambient__chart--1 { top: 18%; left: 5%; animation-delay: -6s; }
.bo-ambient__chart--2 { top: 60%; right: 5%; animation-delay: -27s; }

.bo-ambient__chart path {
    fill: none;
    stroke-width: 1.600;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bo-ambient__axis { stroke: currentcolor; }

.bo-ambient__line {
    stroke: var(--accent-ink);
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: am-draw 42s cubic-bezier(.45, 0, .55, 1) infinite;
}

.bo-ambient__chart--1 .bo-ambient__line { animation-delay: -6s; }
.bo-ambient__chart--2 .bo-ambient__line { animation-delay: -27s; }

@keyframes am-chart {
    0% { opacity: 0; }
    3%, 28% { opacity: var(--am-o); }
    36%, 100% { opacity: 0; }
}

@keyframes am-draw {
    0%, 2% { stroke-dashoffset: 1; }
    16%, 100% { stroke-dashoffset: 0; }
}

.bo-ambient__arrow {
    position: absolute;
    width: 14px;
    height: 19px;
    color: var(--trend-up);
    opacity: 0;
    --am-o: .28;
    animation: am-lift 30s cubic-bezier(.45, 0, .55, 1) infinite;
}

.bo-ambient__arrow--1 { left: 24%; top: 78vh; animation-delay: -3s; }
.bo-ambient__arrow--2 { left: 46%; top: 86vh; animation-delay: -12s; animation-duration: 34s; }
.bo-ambient__arrow--3 { left: 72%; top: 70vh; animation-delay: -21s; }
.bo-ambient__arrow--4 { left: 90%; top: 58vh; animation-delay: -27s; animation-duration: 38s; }

@keyframes am-lift {
    0% { opacity: 0; transform: translateY(0); }
    8%, 28% { opacity: var(--am-o); }
    36%, 100% { opacity: 0; transform: translateY(-30vh); }
}

@media (max-width: 640px) {
    .bo-ambient__bulb--2,
    .bo-ambient__bulb--3,
    .bo-ambient__chart--2,
    .bo-ambient__arrow--2,
    .bo-ambient__arrow--4,
    .bo-ambient--sparse .bo-ambient__arrow {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bo-ambient__chart,
    .bo-ambient__arrow {
        display: none;
    }

    .bo-ambient__glow { animation: none; }
}

/* ===== BuchHero (Look kinder): Papierflieger, Ballons, funkelnde Sterne =====
 * Fröhliche Farben aus dem Theme, aber ruhige Zyklen: Flieger und Ballons treten nur ein Drittel
 * des Zyklus auf, die Sterne atmen langsam. */
.bo-ambient__plane {
    position: absolute;
    left: 0;
    width: 54px;
    height: 36px;
    color: var(--primary);
    opacity: .3;
    rotate: -10deg;
    transform: translateX(-20vw);
    animation: am-plane 46s cubic-bezier(.45, 0, .55, 1) infinite;
}

.bo-ambient__plane--1 { top: 20vh; animation-delay: -9s; }
.bo-ambient__plane--2 {
    top: 52vh;
    width: 40px;
    height: 27px;
    color: var(--accent);
    opacity: .26;
    scale: -1 1;
    animation-name: am-plane-left;
    animation-duration: 58s;
    animation-delay: -34s;
}

.bo-ambient__plane svg { animation: am-hover 5s cubic-bezier(.45, 0, .55, 1) infinite alternate; }

@keyframes am-plane {
    0% { transform: translateX(-20vw) translateY(8vh); }
    36%, 100% { transform: translateX(115vw) translateY(-14vh); }
}

@keyframes am-plane-left {
    0% { transform: translateX(115vw) translateY(-6vh); }
    36%, 100% { transform: translateX(-20vw) translateY(12vh); }
}

.bo-ambient__balloon {
    position: absolute;
    top: 100vh;
    left: var(--x);
    width: 28px;
    height: 46px;
    opacity: 0;
    --am-o: .3;
    animation:
        am-ascend var(--t) linear var(--d) infinite,
        am-sway 8s cubic-bezier(.45, 0, .55, 1) var(--d) infinite alternate;
}

.bo-ambient__balloon--1 { --x: 10%; --t: 64s; --d: -8s; color: var(--accent); }
.bo-ambient__balloon--2 { --x: 84%; --t: 72s; --d: -40s; color: var(--primary); }
.bo-ambient__balloon--3 { --x: 52%; --t: 58s; --d: -26s; color: var(--highlight); }

.bo-ambient__sparkle {
    position: absolute;
    width: 18px;
    height: 18px;
    color: var(--highlight);
    opacity: .1;
    --am-o: .45;
    animation: am-sparkle 9s cubic-bezier(.45, 0, .55, 1) infinite alternate;
}

.bo-ambient__sparkle--1 { top: 22%; left: 14%; animation-delay: -2s; }
.bo-ambient__sparkle--2 { top: 14%; left: 88%; width: 14px; height: 14px; animation-duration: 11s; animation-delay: -7s; }
.bo-ambient__sparkle--3 { top: 40%; left: 70%; width: 22px; height: 22px; animation-duration: 10s; animation-delay: -4s; }
.bo-ambient__sparkle--4 { top: 66%; left: 6%; width: 15px; height: 15px; animation-duration: 12s; animation-delay: -9s; }
.bo-ambient__sparkle--5 { top: 86%; left: 46%; animation-duration: 8s; animation-delay: -5s; }

@keyframes am-sparkle {
    from { opacity: .08; transform: scale(.55) rotate(-12deg); }
    to { opacity: var(--am-o); transform: scale(1) rotate(12deg); }
}

@media (max-width: 640px) {
    .bo-ambient__plane--2,
    .bo-ambient__balloon--2,
    .bo-ambient__balloon--3,
    .bo-ambient__sparkle--2,
    .bo-ambient__sparkle--4,
    .bo-ambient--sparse .bo-ambient__sparkle {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bo-ambient__plane,
    .bo-ambient__balloon {
        display: none;
    }

    .bo-ambient__sparkle { animation: none; }
}

/* ===== MiniBuchTipps (Look mini, Formen von kinder): Schmetterlinge, Seifenblasen =====
 * Farben aus dem Theme mini (Korall, Honig, Grün); Schmetterlinge ziehen in einem Drittel des Zyklus durchs Bild,
 * Seifenblasen steigen sanft auf. */
.bo-ambient__butterfly {
    position: absolute;
    left: 0;
    width: 44px;
    height: 33px;
    opacity: .3;
    transform: translateX(-20vw);
    animation: am-flutter-right 54s cubic-bezier(.45, 0, .55, 1) infinite;
}

.bo-ambient__butterfly svg { position: absolute; inset: 0; }

.bo-ambient__butterfly--1 { top: 30vh; color: var(--accent); animation-delay: -10s; }
.bo-ambient__butterfly--2 {
    top: 62vh;
    width: 34px;
    height: 26px;
    color: var(--primary);
    opacity: .26;
    animation-name: am-flutter-left;
    animation-duration: 66s;
    animation-delay: -42s;
}

/* Die Flügel schlagen um die Körperachse. */
.bo-ambient__wings {
    transform-origin: 50% 50%;
    animation: am-flap .9s cubic-bezier(.45, 0, .55, 1) infinite alternate;
}

@keyframes am-flap {
    from { transform: scaleX(1); }
    to { transform: scaleX(.35); }
}

@keyframes am-flutter-right {
    0% { transform: translateX(-20vw) translateY(0); }
    9% { transform: translateX(8vw) translateY(-5vh); }
    18% { transform: translateX(36vw) translateY(4vh); }
    27% { transform: translateX(70vw) translateY(-6vh); }
    36%, 100% { transform: translateX(112vw) translateY(2vh); }
}

@keyframes am-flutter-left {
    0% { transform: translateX(112vw) translateY(0); }
    9% { transform: translateX(86vw) translateY(5vh); }
    18% { transform: translateX(55vw) translateY(-4vh); }
    27% { transform: translateX(22vw) translateY(6vh); }
    36%, 100% { transform: translateX(-20vw) translateY(-2vh); }
}

.bo-ambient__bubble {
    position: absolute;
    top: 100vh;
    left: var(--x);
    width: var(--w);
    height: var(--w);
    border: 1.500px solid color-mix(in srgb, var(--accent) 60%, transparent);
    border-radius: 50%;
    background: radial-gradient(circle at 30% 28%, color-mix(in srgb, var(--highlight) 50%, transparent) 0 12%, color-mix(in srgb, var(--primary) 8%, transparent) 58%, transparent 74%);
    opacity: 0;
    --am-o: .35;
    animation:
        am-ascend var(--t) linear var(--d) infinite,
        am-sway 8s cubic-bezier(.45, 0, .55, 1) var(--d) infinite alternate;
}

.bo-ambient__bubble--1 { --x: 12%; --w: 40px; --t: 54s; --d: -10s; }
.bo-ambient__bubble--2 { --x: 70%; --w: 24px; --t: 62s; --d: -36s; }
.bo-ambient__bubble--3 { --x: 38%; --w: 32px; --t: 48s; --d: -22s; }
.bo-ambient__bubble--4 { --x: 88%; --w: 52px; --t: 70s; --d: -50s; }
.bo-ambient__bubble--5 { --x: 56%; --w: 20px; --t: 58s; --d: -3s; }

@media (max-width: 640px) {
    .bo-ambient__butterfly--2,
    .bo-ambient__bubble--2,
    .bo-ambient__bubble--3,
    .bo-ambient__bubble--4 {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bo-ambient__butterfly,
    .bo-ambient__bubble {
        display: none;
    }
}

/* ===== BuchUno (Look light): umblätternde Seite, fallendes Lesezeichen, Staub im Licht =====
 * Ein schräger Lichtschacht von rechts oben, darin wenige Staubkörner; die Seite blättert und das
 * Lesezeichen fällt je nur in einem Drittel des Zyklus. */
.bo-ambient__shaft {
    position: absolute;
    top: -10vh;
    right: -4vw;
    width: 30vw;
    height: 130vh;
    background: linear-gradient(to bottom, color-mix(in srgb, var(--highlight) 24%, transparent), transparent 85%);
    clip-path: polygon(25% 0, 75% 0, 100% 100%, 0 100%);
    transform-origin: 100% 0;
    rotate: 14deg;
    opacity: .6;
    animation: am-breathe 20s cubic-bezier(.45, 0, .55, 1) infinite alternate;
}

@keyframes am-breathe {
    from { opacity: .45; }
    to { opacity: 1; }
}

.bo-ambient__dust {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--highlight);
    opacity: .1;
    --am-o: .5;
    animation: am-dust var(--t) cubic-bezier(.45, 0, .55, 1) var(--d) infinite alternate;
}

.bo-ambient__dust--1 { top: 12%; left: 82%; --t: 18s; --d: -3s; }
.bo-ambient__dust--2 { top: 24%; left: 70%; --t: 22s; --d: -9s; }
.bo-ambient__dust--3 { top: 36%; left: 88%; --t: 16s; --d: -12s; }
.bo-ambient__dust--4 { top: 46%; left: 66%; --t: 24s; --d: -6s; }
.bo-ambient__dust--5 { top: 18%; left: 92%; --t: 20s; --d: -15s; }
.bo-ambient__dust--6 { top: 58%; left: 80%; --t: 19s; --d: -1s; }

@keyframes am-dust {
    from { opacity: .1; transform: translate(0, 0); }
    to { opacity: var(--am-o); transform: translate(-18px, 26px); }
}

/* Eine Seite wird umgeschlagen (um den Rücken am linken Rand), dann bleibt es lange still. */
.bo-ambient__flip {
    position: absolute;
    right: 7vw;
    bottom: 12vh;
    width: 84px;
    height: 112px;
    border: 1px solid color-mix(in srgb, var(--ink-muted) 60%, transparent);
    border-radius: 2px 6px 6px 2px;
    background:
        repeating-linear-gradient(transparent 0 11px, color-mix(in srgb, var(--ink-muted) 35%, transparent) 11px 12px),
        var(--surface-200);
    transform-origin: 0 50%;
    opacity: 0;
    --am-o: .5;
    animation: am-flip 40s cubic-bezier(.45, 0, .55, 1) infinite;
    animation-delay: -4s;
}

@keyframes am-flip {
    0% { opacity: 0; transform: perspective(700px) rotateY(0); }
    5% { opacity: var(--am-o); transform: perspective(700px) rotateY(0); }
    22% { opacity: var(--am-o); transform: perspective(700px) rotateY(-178deg); }
    30%, 100% { opacity: 0; transform: perspective(700px) rotateY(-178deg); }
}

.bo-ambient__bookmark {
    position: absolute;
    top: -8vh;
    left: var(--x);
    width: 22px;
    height: 36px;
    opacity: 0;
    --am-o: .28;
    animation:
        am-descend var(--t) linear var(--d) infinite,
        am-sway 7s cubic-bezier(.45, 0, .55, 1) var(--d) infinite alternate,
        am-tilt 6s cubic-bezier(.45, 0, .55, 1) var(--d) infinite alternate;
}

.bo-ambient__bookmark--1 { --x: 22%; --t: 56s; --d: -10s; color: var(--accent-ink); }
.bo-ambient__bookmark--2 { --x: 60%; --t: 68s; --d: -44s; color: var(--primary); }

@media (max-width: 640px) {
    .bo-ambient__flip,
    .bo-ambient__bookmark--2,
    .bo-ambient__dust--2,
    .bo-ambient__dust--4,
    .bo-ambient__dust--6,
    .bo-ambient--sparse .bo-ambient__dust--5 {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bo-ambient__flip,
    .bo-ambient__bookmark {
        display: none;
    }

    .bo-ambient__shaft,
    .bo-ambient__dust { animation: none; }
}

/* ===== LeseAlarm (Look krimi): ziehender Nebel, Taschenlampen-Kegel, Fußspuren =====
 * Ein Auftritt füllt nur einen Teil des Zyklus (Nebel gut ein Drittel, Kegel ein Drittel, Spuren ein
 * Viertel), den Rest ruht die Szene unsichtbar. */
.bo-ambient__fog {
    position: absolute;
    left: 0;
    width: 80vw;
    height: 34vh;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, color-mix(in srgb, var(--ink) 34%, transparent), transparent 68%);
    opacity: 0;
    transform: translateX(-90vw);
    animation: am-fog 64s linear infinite;
    --am-o: .22;
}

.bo-ambient__fog--1 { top: 56vh; animation-delay: -8s; }
.bo-ambient__fog--2 {
    top: 22vh;
    width: 60vw;
    height: 28vh;
    animation-duration: 52s;
    animation-delay: -30s;
}

@keyframes am-fog {
    0% { opacity: 0; transform: translateX(-90vw); }
    6%, 34% { opacity: var(--am-o); }
    40%, 100% { opacity: 0; transform: translateX(110vw); }
}

/* Der Kegel schwenkt von einem Boden-Punkt aus langsam von links nach rechts. */
.bo-ambient__torch {
    position: absolute;
    left: 6vw;
    bottom: -4vh;
    width: 46vw;
    height: 78vh;
    background: linear-gradient(to top, color-mix(in srgb, var(--highlight-ink) 60%, transparent), transparent 85%);
    clip-path: polygon(44% 100%, 56% 100%, 100% 0, 0 0);
    transform-origin: 50% 100%;
    opacity: 0;
    animation: am-torch 46s cubic-bezier(.45, 0, .55, 1) infinite;
    animation-delay: -5s;
    --am-o: .2;
}

@keyframes am-torch {
    0% { opacity: 0; transform: rotate(-34deg); }
    6% { opacity: var(--am-o); }
    22% { transform: rotate(10deg); }
    33% { opacity: var(--am-o); }
    38%, 100% { opacity: 0; transform: rotate(34deg); }
}

/* Fußspuren: schräger Weg nach rechts oben, ein Abdruck nach dem anderen (Abstand 1,6 s), dann verblassen alle. */
.bo-ambient__step {
    position: absolute;
    left: calc(8% + var(--n) * 9%);
    top: calc(84% - var(--n) * 7%);
    width: 18px;
    height: 36px;
    color: var(--ink-body);
    rotate: 52deg;
    translate: calc(var(--s) * 7px) calc(var(--s) * -5px);
    opacity: 0;
    animation: am-step 42s cubic-bezier(.45, 0, .55, 1) infinite;
    animation-delay: calc(var(--n) * 1.6s);
    --am-o: .3;
}

.bo-ambient__step--1 { --n: 0; --s: 1; }
.bo-ambient__step--2 { --n: 1; --s: -1; }
.bo-ambient__step--3 { --n: 2; --s: 1; }
.bo-ambient__step--4 { --n: 3; --s: -1; }
.bo-ambient__step--5 { --n: 4; --s: 1; }
.bo-ambient__step--6 { --n: 5; --s: -1; }

@keyframes am-step {
    0% { opacity: 0; }
    3%, 20% { opacity: var(--am-o); }
    30%, 100% { opacity: 0; }
}

/* Mobil höchstens die halbe Besetzung. */
@media (max-width: 640px) {
    .bo-ambient__dragon--2,
    .bo-ambient__meteor--2,
    .bo-ambient--home .bo-ambient__meteor,
    .bo-ambient--home .bo-ambient__spark--3,
    .bo-ambient--home .bo-ambient__spark--7,
    .bo-ambient--page .bo-ambient__spark--4,
    .bo-ambient--fantasy .bo-ambient__spark--2,
    .bo-ambient--fantasy .bo-ambient__spark--4,
    .bo-ambient--fantasy .bo-ambient__spark--6,
    .bo-ambient--fantasy .bo-ambient__spark--8,
    .bo-ambient__fog--2,
    .bo-ambient__step--4,
    .bo-ambient__step--5,
    .bo-ambient__step--6,
    .bo-ambient--sparse .bo-ambient__torch {
        display: none;
    }

    .bo-ambient__dragon { width: 100px; height: 50px; }
}

/* Bewegung anhalten (WCAG 2.2.2): Schalter im Footer, gilt auch für die Halloween-Ebene. */
:root:has(#ambient-pause:checked) .bo-ambient *,
:root:has(#ambient-pause:checked) .bo-ambient,
:root:has(#ambient-pause:checked) .bo-halloween *,
:root:has(#ambient-pause:checked) .bo-halloween {
    animation-play-state: paused;
}

.bo-pause {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--on-night-body);
}

.bo-pause input {
    accent-color: var(--accent);
}

.bo-pause input:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    /* Figuren, die sich bewegen, entfallen; der Sternenhimmel steht still. */
    .bo-ambient__dragon,
    .bo-ambient__ufo,
    .bo-ambient__meteor,
    .bo-ambient__spark,
    .bo-ambient__fog,
    .bo-ambient__torch,
    .bo-ambient__step {
        display: none;
    }

    .bo-ambient__stars,
    .bo-ambient__stars::after {
        animation: none;
    }
}

/* ===== Reihen-Seiten (Bereich series:<slug>, AmbientExtension::SERIES_CASTS): eigene Figuren je Reihe =====
 * Drachenmeister: Drachen und Funken (oben). Dog Man: Sprechblasen. Chronik der Unsterblichen: Schwerter und
 * ein Blutmond. Eule Eva: Eulen und Federn. Notizbuch des Grauens: Notizbuchseiten und Tintenkleckse.
 * Amulett: leuchtendes Amulett und Funken. Gemeinsame Keyframes am-ascend/am-descend/am-sway/am-tilt. */
.bo-ambient__speech,
.bo-ambient__sword,
.bo-ambient__feather,
.bo-ambient__leaf {
    position: absolute;
    left: var(--x);
    width: var(--w);
    opacity: 0;
}

.bo-ambient__speech {
    top: 100vh;
    height: calc(var(--w) * .85);
    color: var(--accent);
    --am-o: .26;
    animation:
        am-ascend var(--t) linear var(--d) infinite,
        am-sway 6s cubic-bezier(.45, 0, .55, 1) var(--d) infinite alternate;
}

.bo-ambient__speech--1 { --x: 10%; --w: 44px; --t: 48s; --d: -4s; }
.bo-ambient__speech--2 { --x: 72%; --w: 34px; --t: 56s; --d: -26s; }
.bo-ambient__speech--3 { --x: 38%; --w: 52px; --t: 62s; --d: -40s; }
.bo-ambient__speech--4 { --x: 88%; --w: 38px; --t: 52s; --d: -14s; }
.bo-ambient__speech--5 { --x: 56%; --w: 30px; --t: 44s; --d: -34s; }

.bo-ambient__sword {
    top: -14vh;
    height: calc(var(--w) * 3);
    color: var(--ink-muted);
    rotate: var(--r);
    --am-o: .2;
    animation:
        am-descend var(--t) linear var(--d) infinite,
        am-sway 9s cubic-bezier(.45, 0, .55, 1) var(--d) infinite alternate;
}

.bo-ambient__sword--1 { --x: 14%; --w: 16px; --r: 24deg; --t: 64s; --d: -8s; }
.bo-ambient__sword--2 { --x: 80%; --w: 13px; --r: -30deg; --t: 72s; --d: -40s; }
.bo-ambient__sword--3 { --x: 46%; --w: 18px; --r: -16deg; --t: 68s; --d: -24s; }
.bo-ambient__sword--4 { --x: 92%; --w: 12px; --r: 38deg; --t: 60s; --d: -52s; }

/* Blutmond: dezent, kein Blut – eine rote Scheibe, die langsam heller und dunkler wird. */
.bo-ambient__moon {
    position: absolute;
    right: 9vw;
    top: 9vh;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 35%, color-mix(in srgb, var(--danger) 55%, var(--highlight)), var(--danger) 72%);
    box-shadow: 0 0 44px 8px color-mix(in srgb, var(--danger) 30%, transparent);
    opacity: .22;
    animation: am-moon 16s cubic-bezier(.45, 0, .55, 1) infinite alternate;
}

@keyframes am-moon {
    from { opacity: .12; transform: scale(1); }
    to { opacity: .3; transform: scale(1.05); }
}

.bo-ambient__owl {
    position: absolute;
    left: 0;
    top: var(--y);
    width: 46px;
    height: 46px;
    color: var(--ink-body);
    opacity: .26;
    transform: translateX(-30vw);
    animation: am-glide-right var(--t) cubic-bezier(.45, 0, .55, 1) var(--d) infinite;
}

.bo-ambient__owl svg { animation: am-hover 3.2s cubic-bezier(.45, 0, .55, 1) infinite alternate; }

.bo-ambient__owl--1 { --y: 16vh; --t: 54s; --d: -8s; }
.bo-ambient__owl--2 { --y: 50vh; --t: 66s; --d: -42s; width: 34px; height: 34px; opacity: .18; animation-name: am-glide-left; }

.bo-ambient__feather {
    height: calc(var(--w) * 2.5);
    color: var(--accent-ink);
    top: -8vh;
    --am-o: .24;
    animation:
        am-descend var(--t) linear var(--d) infinite,
        am-sway 8s cubic-bezier(.45, 0, .55, 1) var(--d) infinite alternate,
        am-tilt 11s cubic-bezier(.45, 0, .55, 1) var(--d) infinite alternate;
}

.bo-ambient__feather--1 { --x: 6%; --w: 13px; --t: 50s; --d: -6s; }
.bo-ambient__feather--2 { --x: 30%; --w: 11px; --t: 58s; --d: -22s; }
.bo-ambient__feather--3 { --x: 58%; --w: 14px; --t: 46s; --d: -34s; }
.bo-ambient__feather--4 { --x: 78%; --w: 12px; --t: 62s; --d: -12s; }
.bo-ambient__feather--5 { --x: 92%; --w: 10px; --t: 54s; --d: -44s; }

.bo-ambient__leaf {
    height: calc(var(--w) * 1.25);
    color: var(--ink-muted);
    top: -8vh;
    --am-o: .2;
    animation:
        am-descend var(--t) linear var(--d) infinite,
        am-sway 9s cubic-bezier(.45, 0, .55, 1) var(--d) infinite alternate,
        am-tilt 13s cubic-bezier(.45, 0, .55, 1) var(--d) infinite alternate;
}

.bo-ambient__leaf--1 { --x: 12%; --w: 26px; --t: 56s; --d: -10s; }
.bo-ambient__leaf--2 { --x: 40%; --w: 22px; --t: 64s; --d: -30s; }
.bo-ambient__leaf--3 { --x: 68%; --w: 28px; --t: 52s; --d: -4s; }
.bo-ambient__leaf--4 { --x: 88%; --w: 20px; --t: 60s; --d: -46s; }

/* Tintenkleckse: wachsen kurz auf und verschwinden wieder (kindgerecht gruselig). */
.bo-ambient__ink {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--w);
    height: calc(var(--w) * .82);
    border-radius: 56% 44% 52% 48% / 48% 56% 44% 52%;
    background: var(--ink-muted);
    opacity: 0;
    --am-o: .2;
    animation: am-blot var(--t) cubic-bezier(.23, 1, .32, 1) var(--d) infinite;
}

.bo-ambient__ink::after {
    content: "";
    position: absolute;
    right: -30%;
    bottom: -18%;
    width: 28%;
    height: 28%;
    border-radius: 50%;
    background: inherit;
}

.bo-ambient__ink--1 { --x: 8%; --y: 62vh; --w: 54px; --t: 34s; --d: -6s; }
.bo-ambient__ink--2 { --x: 84%; --y: 30vh; --w: 40px; --t: 40s; --d: -22s; }
.bo-ambient__ink--3 { --x: 60%; --y: 78vh; --w: 62px; --t: 46s; --d: -34s; }
.bo-ambient__ink--4 { --x: 26%; --y: 18vh; --w: 36px; --t: 38s; --d: -14s; }

@keyframes am-blot {
    0% { opacity: 0; transform: scale(.3); }
    5%, 26% { opacity: var(--am-o); transform: scale(1); }
    34%, 100% { opacity: 0; transform: scale(1.06); }
}

.bo-ambient__amulet {
    position: absolute;
    left: 84%;
    top: 16vh;
    width: 38px;
    height: 54px;
    color: var(--highlight-ink);
    opacity: .4;
    transform-origin: 50% 0;
    animation: am-swing 7s cubic-bezier(.45, 0, .55, 1) infinite alternate;
}

.bo-ambient__aura {
    position: absolute;
    inset: -34px;
    top: -4px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--highlight) 75%, transparent), transparent 66%);
    opacity: 0;
    animation: am-aura 5s cubic-bezier(.45, 0, .55, 1) infinite alternate;
}

@keyframes am-swing {
    from { transform: rotate(-4deg); }
    to { transform: rotate(4deg); }
}

@keyframes am-aura {
    from { opacity: .1; transform: scale(.8); }
    to { opacity: .7; transform: scale(1.1); }
}

/* Mobil höchstens die halbe Besetzung. */
@media (max-width: 640px) {
    .bo-ambient--series .bo-ambient__spark--2,
    .bo-ambient--series .bo-ambient__spark--4,
    .bo-ambient--series .bo-ambient__spark--6,
    .bo-ambient--series .bo-ambient__spark--8,
    .bo-ambient__speech--2,
    .bo-ambient__speech--4,
    .bo-ambient__sword--2,
    .bo-ambient__sword--4,
    .bo-ambient__owl--2,
    .bo-ambient__feather--2,
    .bo-ambient__feather--4,
    .bo-ambient__leaf--2,
    .bo-ambient__leaf--4,
    .bo-ambient__ink--2,
    .bo-ambient__ink--4 {
        display: none;
    }

    .bo-ambient__moon { width: 60px; height: 60px; }
}

@media (prefers-reduced-motion: reduce) {
    /* Bewegte Figuren entfallen; Mond und Amulett stehen still. */
    .bo-ambient__speech,
    .bo-ambient__sword,
    .bo-ambient__owl,
    .bo-ambient__feather,
    .bo-ambient__leaf,
    .bo-ambient__ink,
    .bo-ambient__aura {
        display: none;
    }

    .bo-ambient__moon,
    .bo-ambient__amulet {
        animation: none;
    }
}