/* CHRISTMAS ÜSCHRIFT */
/* CHRISTMAS ÜSCHRIFT */
/* CHRISTMAS ÜSCHRIFT */
/* CHRISTMAS ÜSCHRIFT */
/* CHRISTMAS ÜSCHRIFT */
/* CHRISTMAS ÜSCHRIFT */
/* CHRISTMAS ÜSCHRIFT */
/* CHRISTMAS ÜSCHRIFT */
/* CHRISTMAS ÜSCHRIFT */
/* CHRISTMAS ÜSCHRIFT */
/* CHRISTMAS ÜSCHRIFT */
/* CHRISTMAS ÜSCHRIFT */
/* CHRISTMAS ÜSCHRIFT */
/* CHRISTMAS ÜSCHRIFT */
/* CHRISTMAS ÜSCHRIFT */
/* CHRISTMAS ÜSCHRIFT */
/* CHRISTMAS ÜSCHRIFT */
/* CHRISTMAS ÜSCHRIFT */
/* CHRISTMAS ÜSCHRIFT */
/* Für die Glanz-Welle über die Buchstaben-Kugeln */
@property --glanz {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 100%;
}

body {
    background-color: rgb(19, 19, 19);
    color: #f8f8f8;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/* ---------- Überschrift: Baum | Buchstaben-Kugeln | Zier-Kugel ---------- */

.titel {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 1.2em;
    max-width: 48em;
    margin: 0.4em auto;
    padding: 1em 0.5em 0.8em;
    font-size: clamp(0.75rem, 2.2vw, 1.9rem);
    line-height: 1;
}

.buchstaben {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.7em 1.4em;
}

.titel > #list {
    grid-column: 1 / -1;
}

.wort {
    display: flex;
    gap: 0.3em;
}

/* ---------- Jeder Buchstabe = eine Schneekugel auf Sockel ----------
   Aufbau (siehe christmas.php):
   .kugel > .koerper > .glas  > .schnee.s1, .zeichen, .schnee.s2, .wirbel, .boden
                     > .sockel
   Schneefall, Schütteln und Wirbel laufen nur über transform/opacity (flüssig).
   Fährt man mit der Maus über eine Kugel, wird sie kräftig geschüttelt.  */

.kugel {
    --glas-hell:     #e0606c;
    --glas-mitte:    #96172a;
    --glas-dunkel:   #3d050f;
    --sockel-hell:   #d02b3d;
    --sockel-dunkel: #6a0a1a;
    position: relative;
    flex: none;
    width: 1.7em;
    height: 2.15em;
    cursor: pointer;
    animation: einfallen 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
    animation-delay: calc(var(--i) * 0.06s);
}

.kugel.gruen {
    --glas-hell:     #55cc82;
    --glas-mitte:    #14733c;
    --glas-dunkel:   #052f19;
    --sockel-hell:   #2aa05a;
    --sockel-dunkel: #0b4a26;
}

/* Schatten auf dem Boden */
.kugel::before {
    content: "";
    position: absolute;
    left: calc(50% - 0.85em);
    bottom: -0.14em;
    width: 1.7em;
    height: 0.34em;
    background: radial-gradient(ellipse closest-side, rgba(0, 0, 0, 0.6), transparent);
}

/* Kugel + Sockel wackeln zusammen um die Standfläche */
.koerper {
    position: absolute;
    inset: 0;
    transform-origin: 50% 100%;
    animation: schuetteln 14s ease-in-out infinite;
    animation-delay: calc(var(--i) * 0.13s + 2s);
}

/* ---------- Glaskugel ---------- */

.glas {
    position: absolute;
    left: 0;
    top: 0;
    width: 1.7em;
    height: 1.7em;
    border-radius: 50%;
    overflow: hidden;
    isolation: isolate;
    background:
        linear-gradient(rgba(8, 14, 50, 0.38), transparent 60%),
        radial-gradient(circle at 50% 42%, var(--glas-hell) 0%, var(--glas-mitte) 55%, var(--glas-dunkel) 100%);
    box-shadow:
        inset 0 0 0.3em rgba(255, 255, 255, 0.45),
        inset -0.14em -0.2em 0.4em rgba(0, 0, 0, 0.4),
        0 0 0.9em rgba(255, 255, 255, 0.18);
    box-shadow:
        inset 0 0 0.3em rgba(255, 255, 255, 0.45),
        inset -0.14em -0.2em 0.4em rgba(0, 0, 0, 0.4),
        0 0 0.9em color-mix(in srgb, var(--glas-mitte) 60%, transparent);
}

.glas::before,
.glas::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
}

/* Spiegelungen: Hauptlicht, Lichtpunkt, Boden-Reflex, heller Glasrand */
.glas::before {
    background:
        radial-gradient(ellipse 26% 15% at 31% 19%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0)),
        radial-gradient(circle 0.07em at 76% 80%, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0)),
        radial-gradient(ellipse 62% 20% at 50% 100%, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0)),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0.12) 80%, rgba(255, 255, 255, 0.42) 100%);
}

/* wandernder Glanzstreifen */
.glas::after {
    background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.55) 50%, transparent 62%) var(--glanz) 0 / 250% 100% no-repeat;
    animation: glanz 7s linear infinite;
    animation-delay: calc(var(--i) * 0.12s + 1.5s);
}

/* Buchstabe in Gold */
.zeichen {
    position: absolute;
    inset: 0 0 0.2em;
    display: grid;
    place-items: center;
    font-size: 1.3em;
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(180deg, #fffdf0 5%, #ffe7a0 55%, #e9b94a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter:
        drop-shadow(0 0.03em 0.025em rgba(0, 0, 0, 0.55))
        drop-shadow(0 0 0.12em rgba(255, 244, 200, 0.45));
}

/* verschneiter Hügel am Boden der Kugel */
.boden {
    position: absolute;
    left: -18%;
    right: -18%;
    bottom: -22%;
    height: 50%;
    border-radius: 50%;
    background: radial-gradient(ellipse 60% 100% at 50% 0%, #fff 0%, #e8f3ff 55%, #aac8e8 100%);
    box-shadow: inset 0 0.08em 0.12em rgba(255, 255, 255, 0.9);
}

.boden::before {
    content: "";
    position: absolute;
    left: 56%;
    top: -16%;
    width: 46%;
    height: 70%;
    border-radius: 50%;
    background: radial-gradient(ellipse 60% 100% at 50% 0%, #fff 0%, #e2effc 70%, #b4cfeb 100%);
}

/* ---------- Schnee in der Kugel ---------- */

/* zwei Schichten fallen endlos: das Muster ist genau eine Kachelhöhe (--h) länger als die Kugel
   und wird um --h nach unten geschoben, dadurch sieht man keine Naht */
.schnee {
    position: absolute;
    left: -10%;
    right: -10%;
    top: calc(var(--h) * -1);
    height: calc(100% + var(--h));
    pointer-events: none;
    animation: fallen linear infinite, wehen ease-in-out infinite alternate;
}

/* hinten: klein, langsam */
.s1 {
    --h: 0.8em;
    background-image:
        radial-gradient(circle 0.026em at 18% 22%, rgba(255, 255, 255, 0.85) 80%, transparent 100%),
        radial-gradient(circle 0.026em at 70% 61%, rgba(255, 255, 255, 0.85) 80%, transparent 100%),
        radial-gradient(circle 0.026em at 45% 88%, rgba(255, 255, 255, 0.85) 80%, transparent 100%),
        radial-gradient(circle 0.026em at 88% 35%, rgba(255, 255, 255, 0.85) 80%, transparent 100%);
    background-size: 0.53em var(--h), 0.67em var(--h), 0.83em var(--h), 0.97em var(--h);
    animation-duration: 8s, 3.4s;
    animation-delay: calc(var(--i) * -1.1s), calc(var(--i) * -0.7s);
}

/* vorne: größer, weich, schneller */
.s2 {
    --h: 1.2em;
    background-image:
        radial-gradient(circle 0.05em at 30% 25%, #fff 35%, rgba(255, 255, 255, 0) 100%),
        radial-gradient(circle 0.05em at 72% 70%, #fff 35%, rgba(255, 255, 255, 0) 100%),
        radial-gradient(circle 0.05em at 50% 5%, #fff 35%, rgba(255, 255, 255, 0) 100%);
    background-size: 0.91em var(--h), 1.13em var(--h), 1.37em var(--h);
    animation-duration: 4.5s, 2.6s;
    animation-delay: calc(var(--i) * -0.8s), calc(var(--i) * -0.5s);
}

/* Schneewirbel: ruht unsichtbar und stiebt auf, wenn die Kugel geschüttelt wird */
.wirbel {
    position: absolute;
    inset: -25%;
    opacity: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle 0.04em at 25% 30%, #fff 60%, rgba(255, 255, 255, 0) 100%),
        radial-gradient(circle 0.04em at 70% 65%, #fff 60%, rgba(255, 255, 255, 0) 100%),
        radial-gradient(circle 0.035em at 40% 80%, #fff 60%, rgba(255, 255, 255, 0) 100%),
        radial-gradient(circle 0.045em at 85% 20%, #fff 60%, rgba(255, 255, 255, 0) 100%);
    background-size: 0.45em 0.5em, 0.62em 0.58em, 0.77em 0.71em, 0.97em 0.89em;
    animation: wirbel 14s ease-in-out infinite;
    animation-delay: calc(var(--i) * 0.13s + 2s);
}

/* ---------- Sockel ---------- */

.sockel {
    position: absolute;
    left: calc(50% - 0.65em);
    bottom: 0;
    width: 1.3em;
    height: 0.62em;
    border-radius: 14% 14% 30% 30% / 28% 28% 55% 55%;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.35), transparent 22%, rgba(255, 255, 255, 0.28) 42%, transparent 62%, rgba(0, 0, 0, 0.4)),
        linear-gradient(var(--sockel-hell), var(--sockel-dunkel));
    box-shadow: 0 0.08em 0.2em rgba(0, 0, 0, 0.55);
}

/* goldener Ring, in dem die Glaskugel steckt */
.sockel::before {
    content: "";
    position: absolute;
    left: 6%;
    right: 6%;
    top: -0.06em;
    height: 0.16em;
    border-radius: 0.08em;
    background: linear-gradient(#fff0a8, #d4a72c 55%, #8a6411);
    box-shadow: 0 0.04em 0.05em rgba(0, 0, 0, 0.45);
}

/* feine goldene Zierlinie unten */
.sockel::after {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: 0.1em;
    height: 0.035em;
    border-radius: 0.02em;
    background: linear-gradient(90deg, transparent, #f0cf6a, transparent);
}

.kugel,
.stilwahl label {
    -webkit-tap-highlight-color: transparent;
}

/* Mit der Maus drüber: Kugel kräftig schütteln */
.kugel:hover .koerper {
    animation: ruettel 0.9s ease-in-out;
}

.kugel:hover .wirbel {
    animation: wirbel-sofort 3.6s ease-out;
}

/* ---------- Weihnachtsbaum (links), komplett aus CSS ---------- */

.baum {
    --o-rot:  radial-gradient(circle closest-side at 38% 35%, #ff9a9a 0, #d81e2c 55%, #7a0a14 96%, transparent 100%);
    --o-gold: radial-gradient(circle closest-side at 38% 35%, #fffbd0 0, #f1c232 55%, #9a6d0a 96%, transparent 100%);
    position: relative;
    width: 6em;
    height: 8.2em;
    background:
        /* Schneehügel */
        radial-gradient(ellipse closest-side, #eef7ff 92%, transparent 100%) 0.7em 7.43em / 4.6em 0.65em no-repeat,
        /* Stamm */
        linear-gradient(#a0622d, #6b3f1b) 2.6em 6.7em / 0.8em 1.1em no-repeat;
    filter: drop-shadow(0 0 0.5em rgba(63, 212, 119, 0.3));
}

/* drei Etagen + Kugeln */
.baum::before {
    content: "";
    position: absolute;
    inset: 0;
    clip-path: polygon(
        50% 14.63%, 75% 41.46%, 63.58% 41.46%, 81.67% 60.98%, 68.17% 60.98%, 90% 82.93%,
        10% 82.93%, 31.83% 60.98%, 18.33% 60.98%, 36.42% 41.46%, 25% 41.46%
    );
    background:
        var(--o-rot)  2.426em 2.548em / 0.72em 0.72em no-repeat,
        var(--o-rot)  2.757em 1.676em / 0.64em 0.64em no-repeat,
        var(--o-gold) 3.126em 2.248em / 0.72em 0.72em no-repeat,
        var(--o-rot)  1.711em 4.334em / 0.76em 0.76em no-repeat,
        var(--o-gold) 2.911em 3.834em / 0.76em 0.76em no-repeat,
        var(--o-rot)  3.811em 4.434em / 0.76em 0.76em no-repeat,
        var(--o-rot)  1.196em 6.02em  / 0.8em 0.8em no-repeat,
        var(--o-gold) 2.296em 5.42em  / 0.8em 0.8em no-repeat,
        var(--o-rot)  3.496em 5.62em  / 0.8em 0.8em no-repeat,
        var(--o-gold) 4.296em 6.12em  / 0.8em 0.8em no-repeat,
        var(--o-rot)  2.596em 6.22em  / 0.8em 0.8em no-repeat,
        linear-gradient(#45dc7d, #17883f) 0 1.2em / 100% 2.2em no-repeat,
        linear-gradient(#3fcf72, #12733a) 0 3.4em / 100% 1.6em no-repeat,
        linear-gradient(#35c066, #0d6130) 0 5em   / 100% 1.8em no-repeat;
    animation: glimmen 1.8s ease-in-out infinite alternate;
}

/* Stern */
.baum::after {
    content: "";
    position: absolute;
    left: 2.38em;
    top: 0.15em;
    width: 1.24em;
    height: 1.18em;
    clip-path: polygon(50% 0, 62.9% 36.6%, 100% 38.3%, 71% 62.6%, 80.6% 100%, 50% 78.7%, 19.4% 100%, 29% 62.6%, 0 38.3%, 37.1% 36.6%);
    background: linear-gradient(135deg, #fff2a8, #d9a21b);
    animation: pulsieren 2.4s ease-in-out infinite alternate;
}

/* ---------- Zier-Kugel (rechts), komplett aus CSS ---------- */

.deko-kugel {
    position: relative;
    width: 4em;
    height: 4em;
    margin-top: 4em;                 /* Platz für Schnur und Öse */
    border-radius: 50%;
    background:
        /* Glanzfleck */
        radial-gradient(ellipse closest-side, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0)) 20% 14% / 1.1em 0.7em no-repeat,
        /* Punktreihen */
        radial-gradient(circle 0.07em at 50% 50%, #fff 0 95%, transparent 100%) 0 24% / 0.5em 0.5em repeat-x,
        radial-gradient(circle 0.07em at 50% 50%, #fff 0 95%, transparent 100%) 0 76% / 0.5em 0.5em repeat-x,
        /* goldenes Band */
        linear-gradient(#ffe08a, #e0b23c) 0 50% / 100% 0.4em no-repeat,
        /* Kugelkörper */
        radial-gradient(circle at 35% 30%, #ff9a9a, #d81e2c 55%, #6d0912 100%);
    box-shadow:
        inset -0.3em -0.4em 0.6em rgba(0, 0, 0, 0.3),
        0 0 1em rgba(216, 30, 44, 0.45);
    transform-origin: 50% -4em;
    animation: schwingen 3.5s ease-in-out infinite alternate;
}

/* goldene Kappe */
.deko-kugel::before {
    content: "";
    position: absolute;
    left: calc(50% - 0.45em);
    top: -0.6em;
    width: 0.9em;
    height: 0.7em;
    border-radius: 0.12em 0.12em 0 0;
    background: linear-gradient(#f3d66b, #b8902b);
}

/* Schnur + Öse */
.deko-kugel::after {
    content: "";
    position: absolute;
    left: calc(50% - 0.3em);
    bottom: calc(100% + 0.6em);
    width: 0.6em;
    height: 3.4em;
    background:
        radial-gradient(circle closest-side, transparent 62%, #d4af37 66% 98%, transparent 100%) 50% 100% / 0.6em 0.6em no-repeat,
        linear-gradient(#d4af37, #d4af37) 50% 0 / 0.06em 2.9em no-repeat;
}

/* ---------- Countdown bis Heiligabend ----------
   Alles hier ist reines CSS: Überschrift (.countdown::before), Doppelpunkte (.box::after),
   Schneehaube (.box::before), Schweben und Glanz. Zahlen liefern PHP + countdown.js.
   Standard = Christmas, bei "Glaskugeln" (Umschalter) klares Glas. */

.countdown {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.1em 0.7em;
    margin: 0.4em 0 1.4em;
    padding: 0 0.5em;
    font-size: clamp(0.9rem, 3vw, 1.8rem);
}

.countdown::before {
    flex: 0 0 100%;
    text-align: center;
    font-size: 0.6em;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #ffe9b0;
    text-shadow: 0 0 0.9em rgba(255, 200, 100, 0.55);
}

.countdown .box {
    --hell:    #e0606c;
    --mitte:   #a3182a;
    --dunkel:  #55091a;
    --glow:    rgba(216, 30, 44, 0.5);
    --punkt:   #ffe7a0;
    --toenung: rgba(255, 110, 130, 0.10);
    position: relative;
    min-width: 3.5em;
    padding: 1em 0.45em 0.6em;
    border: 0.09em solid transparent;
    border-radius: 0.75em;
    text-align: center;
    background:
        /* wandernder Glanzstreifen */
        linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.5) 50%, transparent 62%) var(--glanz) 0 / 250% 100% no-repeat padding-box,
        /* Glanzfleck + Lichtkante oben */
        radial-gradient(ellipse 60% 18% at 30% 9%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0)) padding-box,
        linear-gradient(rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 45%) padding-box,
        /* Körper */
        linear-gradient(180deg, var(--hell), var(--mitte) 45%, var(--dunkel)) padding-box,
        /* goldener Rahmen mit Verlauf */
        linear-gradient(135deg, #fff3b0, #d9ac3a 35%, #8a6411 60%, #f3d66b) border-box;
    box-shadow:
        inset 0 0 0.35em rgba(255, 255, 255, 0.35),
        inset -0.12em -0.2em 0.4em rgba(0, 0, 0, 0.35),
        0 0.3em 0.8em rgba(0, 0, 0, 0.55),
        0 0 1.2em var(--glow);
    animation: schweben 5s ease-in-out infinite alternate, glanz 7s linear infinite;
}

.countdown .box.gruen {
    --hell:    #55cc82;
    --mitte:   #14733c;
    --dunkel:  #052f19;
    --glow:    rgba(40, 170, 90, 0.45);
    --toenung: rgba(110, 255, 165, 0.09);
}

/* jede Box schwebt und glänzt zeitversetzt */
.countdown .box:nth-child(2) { animation-delay: -1.3s, 1.7s; }
.countdown .box:nth-child(3) { animation-delay: -2.6s, 3.4s; }
.countdown .box:nth-child(4) { animation-delay: -3.9s, 5.1s; }

/* Schneehaube mit Tropfen */
.countdown .box::before {
    content: "";
    position: absolute;
    top: -0.24em;
    left: -0.1em;
    right: -0.1em;
    height: 0.75em;
    border-radius: 0.7em 0.7em 0 0;
    pointer-events: none;
    background:
        radial-gradient(circle 0.13em at 14% 0.5em, #e6f1ff 95%, transparent 100%),
        radial-gradient(circle 0.1em at 38% 0.52em, #e6f1ff 95%, transparent 100%),
        radial-gradient(circle 0.16em at 66% 0.46em, #e6f1ff 95%, transparent 100%),
        radial-gradient(circle 0.09em at 88% 0.5em, #e6f1ff 95%, transparent 100%),
        linear-gradient(#fff, #e6f1ff) 0 0 / 100% 0.52em no-repeat;
    filter: drop-shadow(0 0.05em 0.05em rgba(0, 0, 0, 0.3));
}

/* Doppelpunkt zwischen den Boxen (steht still) */
.countdown .box:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 1.5em;
    right: -0.62em;
    width: 0.34em;
    height: 1.1em;
    background:
        radial-gradient(circle 0.14em at 50% 22%, var(--punkt) 85%, transparent 100%),
        radial-gradient(circle 0.14em at 50% 78%, var(--punkt) 85%, transparent 100%);
    filter: drop-shadow(0 0.03em 0.04em rgba(0, 0, 0, 0.6));
}

.countdown b {
    display: block;
    font-size: 2.3em;
    line-height: 1;
    font-variant-numeric: tabular-nums;                 /* gleich breite Ziffern, nichts wackelt */
    background: linear-gradient(180deg, #fffdf0 5%, #ffe7a0 55%, #e9b94a 100%);   /* Gold wie die Kugel-Buchstaben */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0.03em 0.03em rgba(0, 0, 0, 0.6));
}

.countdown span {
    display: block;
    margin-top: 0.15em;
    font-size: 0.55em;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #ffe0a0;
}

@keyframes schweben {
    from { transform: translateY(-0.1em); }
    to   { transform: translateY(0.1em); }
}

/* Stil "Glaskugeln": klares Glas, eisweiße Ziffern, ohne Gold und Schneehaube */
#stil-glas:checked ~ .countdown::before {
    color: rgba(235, 243, 255, 0.9);
    text-shadow: 0 0 0.9em rgba(150, 200, 255, 0.6);
}

#stil-glas:checked ~ .countdown .box {
    --punkt: #dcecff;
    border-color: rgba(255, 255, 255, 0.55);
    background:
        linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.45) 50%, transparent 62%) var(--glanz) 0 / 250% 100% no-repeat,
        radial-gradient(ellipse 45% 16% at 30% 10%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0)),
        radial-gradient(ellipse 70% 25% at 50% 104%, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 72%),
        linear-gradient(var(--toenung), var(--toenung)),
        radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0) 55%, rgba(180, 220, 255, 0.10) 75%, rgba(200, 230, 255, 0.22) 100%);
    -webkit-backdrop-filter: blur(1.5px) saturate(1.5) brightness(1.1);
    backdrop-filter: blur(1.5px) saturate(1.5) brightness(1.1);
    box-shadow:
        inset 0 0 0.12em rgba(255, 255, 255, 0.75),
        inset 0 0 0.5em rgba(150, 205, 255, 0.28),
        inset -0.16em -0.22em 0.45em rgba(110, 160, 255, 0.22),
        0 0 0.9em rgba(160, 210, 255, 0.3);
}

#stil-glas:checked ~ .countdown .box::before {
    display: none;
}

#stil-glas:checked ~ .countdown b {
    background: linear-gradient(180deg, #fff 15%, #cfe6ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    filter:
        drop-shadow(0 0 0.1em rgba(150, 205, 255, 0.9))
        drop-shadow(0 0.03em 0.03em rgba(0, 10, 50, 0.4));
}

#stil-glas:checked ~ .countdown span {
    color: rgba(225, 240, 255, 0.85);
}

/* Touch-Geräte: ohne Hintergrund-Unschärfe, spart Rechenleistung */
@media (pointer: coarse) {
    #stil-glas:checked ~ .countdown .box {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .countdown .box {
        animation: none;
    }
}

/* ---------- STIL-WAHL: "Christmas" (Standard) oder "Glaskugeln" ----------
   Der Umschalter (zwei Radio-Buttons in christmas.php) arbeitet nur mit CSS:
   #stil-glas:checked ~ .titel  trifft die Überschrift, wenn "Glaskugeln" gewählt ist.
   Der Christmas-Stil sind die Regeln oben (.kugel, .glas, .sockel ...),
   der Glas-Stil überschreibt sie weiter unten. */

.stil-radio {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.stilwahl {
    position: fixed;
    top: max(0.8rem, env(safe-area-inset-top));
    right: max(0.8rem, env(safe-area-inset-right));
    z-index: 10;
    display: flex;
    gap: 0.2rem;
    padding: 0.22rem;
    border-radius: 999px;
    background: rgba(8, 16, 40, 0.72);
    border: 1px solid rgba(190, 220, 255, 0.28);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    font: 600 0.8rem/1 system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.stilwahl label {
    padding: 0.55em 1em;
    border-radius: 999px;
    color: rgba(235, 243, 255, 0.7);
    cursor: pointer;
    user-select: none;
    transition: background 0.2s, color 0.2s;
}

.stilwahl label:hover {
    color: #fff;
}

#stil-christmas:checked ~ .stilwahl label[for="stil-christmas"],
#stil-glas:checked ~ .stilwahl label[for="stil-glas"] {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}

/* Handy: Umschalter unten in der Mitte, größere Tippflächen */
@media (max-width: 560px) {
    .stilwahl {
        top: auto;
        right: auto;
        left: 50%;
        bottom: max(0.8rem, env(safe-area-inset-bottom));
        transform: translateX(-50%);
    }
}

@media (pointer: coarse) {
    .stilwahl {
        font-size: 0.9rem;
    }

    .stilwahl label {
        padding: 0.9em 1.2em;
    }
}

#stil-christmas:focus-visible ~ .stilwahl label[for="stil-christmas"],
#stil-glas:focus-visible ~ .stilwahl label[for="stil-glas"] {
    outline: 2px solid #9ccbff;
    outline-offset: 2px;
}

/* ---------- Stil "Glaskugeln": klares Glas, ohne Sockel, Hügel, Gold und Rot/Grün ---------- */

#stil-glas:checked ~ .titel .kugel {
    --toenung: rgba(255, 110, 130, 0.10);   /* ganz leichte Tönung, abwechselnd */
    height: 1.7em;
}

#stil-glas:checked ~ .titel .kugel.gruen {
    --toenung: rgba(110, 255, 165, 0.09);
}

/* statt Schatten: bläulicher Lichtfleck unter der Kugel */
#stil-glas:checked ~ .titel .kugel::before {
    left: calc(50% - 0.65em);
    bottom: -0.2em;
    width: 1.3em;
    height: 0.28em;
    background: radial-gradient(ellipse closest-side, rgba(170, 215, 255, 0.35), transparent);
}

#stil-glas:checked ~ .titel .koerper {
    transform-origin: 50% 50%;
}

#stil-glas:checked ~ .titel .sockel,
#stil-glas:checked ~ .titel .boden {
    display: none;
}

/* Glaskörper: fast durchsichtig, dichter zum Rand, bricht den Hintergrund leicht */
#stil-glas:checked ~ .titel .glas {
    background:
        linear-gradient(var(--toenung), var(--toenung)),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0) 55%, rgba(180, 220, 255, 0.10) 75%, rgba(200, 230, 255, 0.22) 100%);
    -webkit-backdrop-filter: blur(1.5px) saturate(1.5) brightness(1.1);
    backdrop-filter: blur(1.5px) saturate(1.5) brightness(1.1);
    box-shadow:
        inset 0 0 0.12em rgba(255, 255, 255, 0.75),
        inset 0 0 0.5em rgba(150, 205, 255, 0.28),
        inset -0.16em -0.22em 0.45em rgba(110, 160, 255, 0.22),
        0 0 0.8em rgba(160, 210, 255, 0.28);
}

/* Spiegelungen: Fensterlicht, Nebenlicht, Funkeln, heller Boden-Reflex, Regenbogenrand */
#stil-glas:checked ~ .titel .glas::before {
    background:
        radial-gradient(ellipse 34% 17% at 30% 18%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 100%),
        radial-gradient(ellipse 12% 8% at 20% 36%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0)),
        radial-gradient(circle 0.06em at 78% 78%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0)),
        radial-gradient(ellipse 58% 30% at 50% 108%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 72%),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0) 64%, rgba(255, 120, 170, 0.12) 78%, rgba(120, 210, 255, 0.22) 90%, rgba(255, 255, 255, 0.5) 100%);
}

/* Touch-Geräte: ohne Hintergrund-Unschärfe, spart Rechenleistung */
@media (pointer: coarse) {
    #stil-glas:checked ~ .titel .glas {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

/* Buchstabe in Eisweiß statt Gold */
#stil-glas:checked ~ .titel .zeichen {
    inset: 0 0 0.05em;
    background: linear-gradient(180deg, #fff 15%, #cfe6ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    filter:
        drop-shadow(0 0 0.1em rgba(150, 205, 255, 0.9))
        drop-shadow(0 0.03em 0.03em rgba(0, 10, 50, 0.4));
}

/* ---------- Animationen ---------- */

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

@keyframes einfallen {
    from { scale: 0; opacity: 0; }
    to   { scale: 1; opacity: 1; }
}

@keyframes glanz {
    0%   { --glanz: 100%; }
    12%  { --glanz: 0%; }
    100% { --glanz: 0%; }
}

@keyframes fallen {
    from { translate: 0 0; }
    to   { translate: 0 var(--h); }
}

@keyframes wehen {
    from { transform: translateX(-0.07em); }
    to   { transform: translateX(0.07em); }
}

/* alle 14 s schüttelt sich jede Kugel kurz, versetzt wie eine Welle */
@keyframes schuetteln {
    0%, 9%, 100% { rotate: 0deg; }
    1.5% { rotate: -7deg; }
    3%   { rotate: 6deg; }
    4.5% { rotate: -4deg; }
    6%   { rotate: 2.5deg; }
    7.5% { rotate: -1deg; }
}

@keyframes ruettel {
    0%   { rotate: 0deg; }
    15%  { rotate: -9deg; }
    30%  { rotate: 8deg; }
    45%  { rotate: -6deg; }
    60%  { rotate: 4deg; }
    75%  { rotate: -2deg; }
    100% { rotate: 0deg; }
}

@keyframes wirbel {
    0%, 1% { opacity: 0; transform: rotate(0deg) scale(0.7); }
    5%     { opacity: 1; }
    22%    { opacity: 0.85; transform: rotate(230deg) scale(1); }
    32%, 100% { opacity: 0; transform: rotate(340deg) scale(1.05); }
}

@keyframes wirbel-sofort {
    0%   { opacity: 0; transform: rotate(0deg) scale(0.7); }
    8%   { opacity: 1; }
    60%  { opacity: 0.8; transform: rotate(260deg) scale(1); }
    100% { opacity: 0; transform: rotate(380deg) scale(1.05); }
}

@keyframes glimmen {
    from { filter: brightness(0.9); }
    to   { filter: brightness(1.25); }
}

@keyframes pulsieren {
    from { transform: scale(0.92) rotate(-6deg); }
    to   { transform: scale(1.12) rotate(6deg); }
}

@media (prefers-reduced-motion: reduce) {
    .kugel,
    .kugel *,
    .kugel *::before,
    .kugel *::after,
    .deko-kugel,
    .baum::before,
    .baum::after {
        animation: none !important;
    }
}

/* Schmale Bildschirme: Baum und Zier-Kugel ausblenden */
@media (max-width: 560px) {
    .baum,
    .deko-kugel {
        display: none;
    }

    .titel {
        grid-template-columns: minmax(0, 1fr);
        font-size: clamp(0.8rem, 4.4vw, 1.3rem);
    }

    .buchstaben {
        gap: 0.6em 1.2em;
    }

    /* "Adventskalender" bricht in zwei etwa gleich lange Zeilen um (8 + 7 Kugeln) */
    .wort {
        flex-wrap: wrap;
        justify-content: center;
        max-width: 17em;
    }
}

/* Sehr große Bildschirme: Überschrift wächst weiter mit */
@media (min-width: 1900px) {
    .titel {
        font-size: clamp(1.9rem, 1.6vw, 3rem);
    }
}

/* CHRISTMAS ÜSCHRIFT ENDE*/
/* CHRISTMAS ÜSCHRIFT ENDE*/
/* CHRISTMAS ÜSCHRIFT ENDE*/
/* CHRISTMAS ÜSCHRIFT ENDE*/
/* CHRISTMAS ÜSCHRIFT ENDE*/
/* CHRISTMAS ÜSCHRIFT ENDE*/
/* CHRISTMAS ÜSCHRIFT ENDE*/
/* CHRISTMAS ÜSCHRIFT ENDE*/
/* CHRISTMAS ÜSCHRIFT ENDE*/
/* CHRISTMAS ÜSCHRIFT ENDE*/
/* CHRISTMAS ÜSCHRIFT ENDE*/
/* CHRISTMAS ÜSCHRIFT ENDE*/
/* CHRISTMAS ÜSCHRIFT ENDE*/
/* CHRISTMAS ÜSCHRIFT ENDE*/
/* CHRISTMAS ÜSCHRIFT ENDE*/
/* CHRISTMAS ÜSCHRIFT ENDE*/
/* CHRISTMAS ÜSCHRIFT ENDE*/
/* CHRISTMAS ÜSCHRIFT ENDE*/
/* CHRISTMAS ÜSCHRIFT ENDE*/

/* CHRISTMAS SCHNEE */
/* Vollflächige Leinwand hinter dem Inhalt, Klicks gehen durch */
#schnee {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    height: 100lvh;
    z-index: -1;
    pointer-events: none;
}
/* CHRISTMAS SCHNEE ENDE */

/* CHRISTMAS MADE-BY */
/* Zwei Überraschungen liegen unten im Schnee (siehe christmas.php + madeby.js):
   - Geschenk mit Anhänger "Made by"  -> Flocken setzen "einfachAlex" zusammen
   - "???" (glitcht, funkt)  -> Flocken setzen "Secret" zusammen + Countdown
   Desktop: Geschenk links unten, ??? rechts unten. Handy: beide mittig über dem Stil-Umschalter.
   Alles aus CSS, die Größe steuert font-size an .madeby-leiste. */
.madeby-leiste {
    position: fixed;
    left: max(0.9rem, env(safe-area-inset-left));
    right: max(0.9rem, env(safe-area-inset-right));
    bottom: max(0.9rem, env(safe-area-inset-bottom));
    z-index: 11;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    font-size: 1rem;
    pointer-events: none;            /* nur die Knöpfe selbst sind klickbar */
}

/* offen: Leiste liegt über der Abdunklung, der andere Knopf blendet aus */
.madeby-leiste.offen {
    z-index: 21;
}

.madeby-leiste.offen .madeby-btn:not(.offen) {
    opacity: 0;
    pointer-events: none;
}

.madeby-btn {
    display: flex;
    align-items: flex-end;
    margin: 0;
    padding: 0.3em 0.3em 0.5em;
    border: 0;
    background: none;
    font: 700 1em/1 system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: inherit;
    cursor: pointer;
    pointer-events: auto;
    transition: opacity 0.3s;
    -webkit-tap-highlight-color: transparent;
}

.madeby-btn:focus-visible {
    outline: 2px solid #9ccbff;
    outline-offset: 2px;
    border-radius: 0.5em;
}

/* ---------- Geschenk ---------- */

.geschenk {
    position: relative;
    flex: none;
    width: 3.3em;
    height: 3.2em;
    transform-origin: 50% 100%;
    animation: geschenk-huepfen 6s ease-in-out 2s infinite;
}

/* Schatten im Schnee */
.geschenk::after {
    content: "";
    position: absolute;
    left: -0.25em;
    right: -0.25em;
    bottom: -0.3em;
    height: 0.6em;
    background: radial-gradient(ellipse closest-side, rgba(0, 0, 0, 0.55), transparent);
    z-index: -1;
}

/* Funkeln über der Schleife lockt zum Klicken */
.geschenk::before {
    content: "";
    position: absolute;
    right: -0.15em;
    top: -0.75em;
    width: 0.8em;
    height: 0.8em;
    clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
    background: linear-gradient(135deg, #fff, #ffe08a);
    animation: geschenk-funkel 2.8s ease-in-out infinite;
    z-index: 2;
}

.korpus,
.deckel {
    position: absolute;
    background:
        /* goldenes Band, senkrecht */
        linear-gradient(90deg, transparent calc(50% - 0.28em), #f6dc7a calc(50% - 0.28em), #cf9f26 calc(50% + 0.28em), transparent calc(50% + 0.28em)),
        /* Rundung: links dunkel, in der Mitte Glanz, rechts dunkel */
        linear-gradient(90deg, rgba(0, 0, 0, 0.3), transparent 24%, rgba(255, 255, 255, 0.2) 44%, transparent 64%, rgba(0, 0, 0, 0.38)),
        linear-gradient(var(--oben), var(--unten));
}

.korpus {
    --oben: #d92b3a;
    --unten: #86101f;
    left: 0.3em;
    right: 0.3em;
    bottom: 0;
    height: 2.1em;
    border-radius: 0.1em 0.1em 0.22em 0.22em;
    box-shadow:
        inset 0 0.12em 0.2em rgba(0, 0, 0, 0.35),
        0 0.08em 0.25em rgba(0, 0, 0, 0.5);
}

.deckel {
    --oben: #ec4757;
    --unten: #b01a2b;
    left: 0;
    right: 0;
    bottom: 2em;
    height: 0.9em;
    border-radius: 0.14em;
    box-shadow: 0 0.06em 0.18em rgba(0, 0, 0, 0.5), inset 0 0.08em 0.1em rgba(255, 255, 255, 0.3);
    transform-origin: 0 100%;
    transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Schleife: zwei Schlaufen + Knoten (das <i>) */
.deckel::before,
.deckel::after {
    content: "";
    position: absolute;
    top: -0.6em;
    width: 1em;
    height: 0.68em;
    box-sizing: border-box;
    border: 0.2em solid #f3d66b;
    border-radius: 50%;
    box-shadow: 0 0.04em 0.08em rgba(0, 0, 0, 0.4), inset 0 0.04em 0.06em rgba(0, 0, 0, 0.25);
}

.deckel::before {
    left: calc(50% - 1.02em);
    transform: rotate(-24deg);
}

.deckel::after {
    left: calc(50% + 0.02em);
    transform: rotate(24deg);
}

.deckel i {
    position: absolute;
    left: calc(50% - 0.22em);
    top: -0.3em;
    z-index: 1;
    width: 0.44em;
    height: 0.44em;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff6b8, #e0b23c 60%, #8a6411);
    box-shadow: 0 0.04em 0.08em rgba(0, 0, 0, 0.5);
}

/* Licht aus dem geöffneten Geschenk */
.licht {
    position: absolute;
    left: 0.2em;
    right: 0.2em;
    bottom: 1.8em;
    height: 0;
    opacity: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 62% 100% at 50% 100%, rgba(255, 244, 190, 0.95), rgba(255, 214, 120, 0.5) 42%, rgba(255, 200, 100, 0) 72%);
    transition: opacity 0.5s ease, height 0.7s ease;
}

/* neugierig: Deckel lupft sich leicht */
.madeby-btn:hover .deckel {
    transform: translate(-0.04em, -0.12em) rotate(-8deg);
}

.madeby-btn:hover .licht {
    opacity: 0.6;
    height: 1.3em;
}

/* offen: Deckel kippt weg, Licht strahlt */
.madeby-btn.offen .deckel {
    transform: translate(-0.55em, -0.35em) rotate(-38deg);
}

.madeby-btn.offen .licht {
    opacity: 1;
    height: 4.4em;
    animation: licht-puls 1.4s ease-in-out infinite alternate;
}

.madeby-btn.offen .geschenk {
    animation: none;
}

/* ---------- "???" (Secret) ----------
   Goldene Fragezeichen, die ständig leicht pulsieren. Alle paar Sekunden glitcht es:
   Rot/Cyan-Versatz, Streifen verrutschen, Zucken (die ::before/::after-Kopien des Textes).
   Funken steigen auf. Hover = Dauer-Glitch, offen = Vollgas.
   Das JS (madeby.js) würfelt die Zeichen zwischendurch kurz durch. --g = Dauer eines Glitch-Zyklus. */
.frage {
    position: relative;
    display: block;
    padding: 0.1em 0.2em 0;
}

.frage-text {
    --g: 4.6s;
    position: relative;
    display: block;
    font-size: 2.7em;
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: -0.03em;
    white-space: nowrap;
    background: linear-gradient(180deg, #fffdf0 5%, #ffe7a0 55%, #e9b94a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: frage-puls 2.4s ease-in-out infinite alternate, frage-zucken var(--g) steps(1) infinite;
}

/* die zwei Glitch-Kopien: Rot und Cyan, meist unsichtbar */
.frage-text::before,
.frage-text::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    background: none;
    pointer-events: none;
}

.frage-text::before {
    color: #ff2d6a;
    animation: frage-glitch-a var(--g) steps(1) infinite;
}

.frage-text::after {
    color: #22e6ff;
    animation: frage-glitch-b var(--g) steps(1) 0.07s infinite;
}

/* Funken steigen auf (zwei Sätze, zeitversetzt) */
.frage::before,
.frage::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0.5em;
    width: 0.13em;
    height: 0.13em;
    border-radius: 50%;
    background: #ffe9a8;
    opacity: 0;
    pointer-events: none;
    box-shadow:
        -1.4em -0.2em 0 0 #ffd56a,
        -0.7em -0.9em 0 -0.02em #fff2c4,
        0.2em -0.5em 0 0 #ffe08a,
        0.9em -1.1em 0 -0.02em #ffd56a,
        1.5em -0.3em 0 0 #fff2c4,
        -1.7em -1.3em 0 -0.03em #ffe08a;
    animation: frage-funken 2.6s ease-out infinite;
}

.frage::after {
    scale: -1 1;
    animation-delay: 1.3s;
}

/* Hover: Dauer-Glitch */
.madeby-btn:hover .frage-text {
    --g: 1.1s;
    scale: 1.06;
}

/* offen: Vollgas */
.madeby-btn.offen .frage-text {
    --g: 0.6s;
    scale: 1.14;
    animation: frage-puls 0.3s ease-in-out infinite alternate, frage-zucken var(--g) steps(1) infinite;
}

.madeby-btn.offen .frage::before,
.madeby-btn.offen .frage::after {
    animation-duration: 1.1s;
}

/* ---------- Anhänger "Made by" ---------- */

.anhaenger {
    align-self: center;
    margin: 0 0 0 -0.3em;
    transform-origin: 0 50%;
    animation: anhaenger-schwingen 3.2s ease-in-out infinite alternate;
}

.anhaenger span {
    display: block;
    padding: 0.55em 0.8em 0.55em 1.35em;
    font-size: 0.74em;
    letter-spacing: 0.05em;
    color: #8c0f1f;
    white-space: nowrap;
    clip-path: polygon(0.7em 0, 100% 0, 100% 100%, 0.7em 100%, 0 50%);
    background:
        radial-gradient(circle 0.17em at 0.72em 50%, rgba(8, 16, 40, 0.9) 0 85%, transparent 100%),
        linear-gradient(#fff7de, #efdca8);
    filter: drop-shadow(0 0.1em 0.12em rgba(0, 0, 0, 0.5));
}

/* ---------- Bühne ---------- */

/* ganzer Bildschirm über allem, ein Klick irgendwo schließt */
.madeby-layer {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    height: 100lvh;
    z-index: 20;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.madeby-layer[hidden] {
    display: none;
}

.nur-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Handy: beide mittig, oberhalb des Stil-Umschalters (der sitzt dort unten in der Mitte).
   Schriftgröße folgt der Bildschirmbreite, so passen beide auch auf schmale Geräte */
@media (max-width: 560px) {
    .madeby-leiste {
        left: 0.6rem;
        right: 0.6rem;
        bottom: calc(max(0.8rem, env(safe-area-inset-bottom)) + 4rem);
        justify-content: center;
        gap: 1.6em;
        font-size: clamp(0.78rem, 4.1vw, 1.05rem);
    }
}

@media (pointer: coarse) and (min-width: 561px) {
    .madeby-leiste {
        font-size: 1.15rem;
    }
}

@keyframes geschenk-huepfen {
    0%, 84%, 100% { transform: none; }
    87%  { transform: translateY(-0.6em) scale(0.96, 1.05); }
    90%  { transform: translateY(0) scale(1.06, 0.93); }
    93%  { transform: translateY(-0.22em); }
    96%  { transform: none; }
}

@keyframes geschenk-funkel {
    0%, 55%, 100% { opacity: 0; scale: 0.3; rotate: 0deg; }
    72%           { opacity: 1; scale: 1;   rotate: 45deg; }
}

@keyframes frage-puls {
    from { filter: drop-shadow(0 0 0.1em rgba(255, 196, 90, 0.8)) drop-shadow(0 0 0.3em rgba(255, 150, 40, 0.35)); }
    to   { filter: drop-shadow(0 0 0.16em rgba(255, 226, 140, 1)) drop-shadow(0 0 0.6em rgba(255, 150, 40, 0.75)); }
}

/* Zucken: harte Sprünge nur im Glitch-Fenster, sonst ruhig */
@keyframes frage-zucken {
    0%, 84%, 100% { transform: none; }
    85% { transform: translate(0.03em, -0.02em) skewX(-7deg); }
    88% { transform: translate(-0.05em, 0.02em) skewX(6deg); }
    91% { transform: translate(0.02em, 0) scaleY(1.1); }
    94% { transform: translate(-0.03em, 0.01em) skewX(-4deg); }
    97% { transform: none; }
}

@keyframes frage-glitch-a {
    0%, 84%, 100% { opacity: 0; }
    85% { opacity: 1; transform: translate(-0.09em, 0); clip-path: inset(8% 0 62% 0); }
    87% { opacity: 1; transform: translate(0.07em, 0.01em); clip-path: inset(52% 0 18% 0); }
    90% { opacity: 1; transform: translate(-0.12em, 0); clip-path: inset(28% 0 42% 0); }
    93% { opacity: 1; transform: translate(0.1em, -0.01em); clip-path: inset(74% 0 4% 0); }
    96% { opacity: 1; transform: translate(-0.05em, 0); clip-path: inset(0 0 78% 0); }
    98% { opacity: 0; }
}

@keyframes frage-glitch-b {
    0%, 84%, 100% { opacity: 0; }
    86% { opacity: 1; transform: translate(0.1em, 0.01em); clip-path: inset(60% 0 12% 0); }
    89% { opacity: 1; transform: translate(-0.08em, 0); clip-path: inset(14% 0 58% 0); }
    92% { opacity: 1; transform: translate(0.12em, 0); clip-path: inset(40% 0 30% 0); }
    95% { opacity: 1; transform: translate(-0.1em, 0.01em); clip-path: inset(0 0 70% 0); }
    98% { opacity: 0; }
}

@keyframes frage-funken {
    0%   { opacity: 0; transform: translateY(0) scale(0.6); }
    12%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(-2.4em) scale(1.15); }
}

@keyframes anhaenger-schwingen {
    from { transform: rotate(2deg); }
    to   { transform: rotate(9deg); }
}

@keyframes licht-puls {
    from { filter: brightness(0.95); }
    to   { filter: brightness(1.25); }
}

@media (prefers-reduced-motion: reduce) {
    .geschenk,
    .geschenk::before,
    .frage-text,
    .frage-text::before,
    .frage-text::after,
    .frage::before,
    .frage::after,
    .anhaenger,
    .madeby-btn .licht {
        animation: none !important;
    }

    .deckel,
    .licht {
        transition: none;
    }
}
/* CHRISTMAS MADE-BY ENDE */