/* =====================================================================
   Race Day Shots – Theme-Kulisse

   Alle Objekte liegen in einer Bühne unterhalb des Menüs. Sie nehmen
   keine Klicks entgegen und stehen nie über einem Link – Ausnahme ist
   das versteckte Osterei, das angeklickt werden soll.

   Gebaut ohne ein einziges Bild: Das skaliert scharf, lässt sich in den
   Theme-Farben einfärben und kostet keine Ladezeit.
   ===================================================================== */

.theme-buehne {
    position: absolute;
    top: 80px;
    left: 0;
    right: 0;
    height: 260px;
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
}

/* Auf Seiten mit festem Kopfbild sitzt die Bühne im Bild */
.hero-slider + .theme-buehne,
.page-hero + .theme-buehne { position: absolute; }

.kulisse-objekt {
    position: absolute;
    pointer-events: none;
    user-select: none;
}

/* ---------------------------------------------------------------------
   REIFENSTAPEL
   Drei Scheiben mit Rille, angeschnitten am Rand – wie am Streckenrand.
   --------------------------------------------------------------------- */

.reifen {
    bottom: -18px;
    width: 96px;
    height: 108px;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
}
.reifen-links  { left: -26px; }
.reifen-rechts { right: -26px; }

.reifen-scheibe {
    width: 96px;
    height: 34px;
    margin-top: -3px;
    border-radius: 48px / 17px;
    background:
        repeating-linear-gradient(90deg,
            rgba(255,255,255,.06) 0 3px, transparent 3px 9px),
        radial-gradient(ellipse at 50% 35%, #3A3A3A 0%, #1A1A1A 62%, #0B0B0B 100%);
    box-shadow: inset 0 -3px 6px rgba(0,0,0,.6), 0 2px 5px rgba(0,0,0,.4);
}
.reifen-scheibe:nth-child(2) { transform: translateX(-5px) rotate(-1.5deg); }
.reifen-scheibe:nth-child(3) { transform: translateX(4px) rotate(2deg); width: 90px; }

/* Schnee liegt oben auf, nicht gleichmäßig */
.reifen-schneehaube {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 88px;
    height: 16px;
    border-radius: 44px / 10px;
    background: #F4F8FA;
    box-shadow: 0 2px 5px rgba(120,150,170,.4);
    /* Unregelmäßige Unterkante – Schnee liegt nie in einer geraden Linie */
    clip-path: polygon(0 0, 100% 0, 100% 62%, 88% 78%, 76% 58%,
                       62% 82%, 48% 60%, 33% 80%, 18% 62%, 6% 76%, 0 55%);
    transition: transform .5s cubic-bezier(.3,1.4,.5,1);
}
.reifen-schnee:hover .reifen-schneehaube { transform: translateY(14px) rotate(6deg); opacity: 0; }

/* Nasser Reifen im Herbst */
.reifen-nass .reifen-scheibe {
    background:
        radial-gradient(ellipse at 30% 25%, rgba(255,255,255,.16) 0 12%, transparent 13%),
        radial-gradient(ellipse at 68% 40%, rgba(255,255,255,.12) 0 8%, transparent 9%),
        radial-gradient(ellipse at 50% 35%, #3A3A3A 0%, #1A1A1A 62%, #0B0B0B 100%);
}

/* Geschenkband */
.reifen-band {
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    width: 12px;
    margin-left: -6px;
    background: var(--band, #B3272D);
    box-shadow: 0 0 8px rgba(0,0,0,.4);
}
.reifen-band::before {
    content: '';
    position: absolute;
    top: -8px; left: -12px;
    width: 36px; height: 18px;
    border-radius: 50%;
    border: 5px solid var(--band, #B3272D);
    border-bottom-color: transparent;
}

/* ---------------------------------------------------------------------
   PITBOARD
   --------------------------------------------------------------------- */

.pitboard {
    bottom: 8px;
    width: 74px;
}
.pitboard-links  { left: 88px; }
.pitboard-rechts { right: 96px; }

.pitboard-griff {
    display: block;
    width: 5px;
    height: 34px;
    margin: 0 auto;
    background: linear-gradient(90deg, #444, #777, #444);
}
.pitboard-tafel {
    display: block;
    padding: 7px 5px;
    background: #0C0C0C;
    border: 2px solid #2A2A2A;
    box-shadow: 0 3px 10px rgba(0,0,0,.5);
    transform: rotate(-3deg);
}
.pitboard-tafel span {
    display: block;
    font-family: var(--font-heading, "bebas-neue-pro", sans-serif);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 1px;
    text-align: center;
    color: #E8E4DC;
}

/* ---------------------------------------------------------------------
   REIFENSPUREN, ABRIEB, BESCHRIFTUNG
   --------------------------------------------------------------------- */

.spuren {
    left: 0; right: 0; bottom: 0;
    width: 100%; height: 120px;
    color: rgba(255,255,255,.28);
}

.abrieb {
    left: 0; right: 0; bottom: 0;
    height: 60px;
    background:
        radial-gradient(1px 1px at 12% 70%, rgba(0,0,0,.5) 50%, transparent),
        radial-gradient(2px 1px at 34% 84%, rgba(0,0,0,.4) 50%, transparent),
        radial-gradient(1px 1px at 58% 62%, rgba(0,0,0,.45) 50%, transparent),
        radial-gradient(2px 2px at 76% 88%, rgba(0,0,0,.35) 50%, transparent),
        radial-gradient(1px 1px at 91% 72%, rgba(0,0,0,.5) 50%, transparent);
}

.beschriftung {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-heading, "bebas-neue-pro", sans-serif);
    font-size: 9px;
    letter-spacing: 2px;
    color: rgba(255,255,255,.42);
}
.beschriftung-punkt {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: #E05A4E;
    animation: kulisse-puls 2.4s ease-in-out infinite;
}
@keyframes kulisse-puls { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

.beschriftung-links-unten  { left: 24px;  bottom: 14px; }
.beschriftung-rechts-unten { right: 24px; bottom: 14px; }

/* ---------------------------------------------------------------------
   WEIHNACHTEN
   --------------------------------------------------------------------- */

.flightcase {
    bottom: -6px;
    width: 78px; height: 52px;
}
.flightcase-links { left: 108px; }
.case-korpus {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, #1E1E1E, #111);
    border: 2px solid #3A3A3A;
    box-shadow: inset 0 0 0 4px rgba(255,255,255,.04), 0 3px 10px rgba(0,0,0,.5);
}
.case-korpus::before, .case-korpus::after {
    content: '';
    position: absolute;
    width: 9px; height: 9px;
    background: #6A6A6A;
}
.case-korpus::before { top: 4px; left: 4px; }
.case-korpus::after  { top: 4px; right: 4px; }
.case-schleife {
    position: absolute;
    top: -12px; left: 50%;
    width: 14px; height: 100%;
    margin-left: -7px;
    background: var(--theme-akzent-2, #C9A961);
}
.case-schleife::before {
    content: '';
    position: absolute;
    top: 4px; left: -13px;
    width: 40px; height: 20px;
    border: 5px solid var(--theme-akzent-2, #C9A961);
    border-radius: 50%;
    border-bottom-color: transparent;
}

.helm {
    bottom: 4px; right: 118px;
    width: 52px; height: 46px;
}
.helm-schale {
    position: absolute; inset: 0;
    border-radius: 50% 50% 42% 42%;
    background: linear-gradient(150deg, #F4F1EC 0%, #CFCAC2 70%);
    box-shadow: inset -4px -4px 10px rgba(0,0,0,.2), 0 3px 8px rgba(0,0,0,.4);
}
.helm-visier {
    position: absolute;
    top: 17px; left: 6px;
    width: 40px; height: 14px;
    border-radius: 8px;
    background: linear-gradient(180deg, #1B2A38, #0A1218);
}
.helm-muetze {
    position: absolute;
    top: -12px; left: 2px;
    width: 48px; height: 22px;
    border-radius: 24px 24px 0 0;
    background: #B3272D;
    transform: rotate(-8deg);
}
.helm-muetze::after {
    content: '';
    position: absolute;
    bottom: -4px; left: -2px;
    width: 52px; height: 8px;
    border-radius: 4px;
    background: #F7F7F7;
}
.helm-bommel {
    position: absolute;
    top: -18px; right: -2px;
    width: 13px; height: 13px;
    border-radius: 50%;
    background: #F7F7F7;
}

/* Das Lebkuchenmännchen: bewusst winzig */
.lebkuchen {
    bottom: 3px; left: 46%;
    font-size: 13px;
    opacity: .75;
    transition: transform .3s;
}
.lebkuchen:hover { transform: translateY(-5px) rotate(12deg); }

/* ---------------------------------------------------------------------
   OSTERN
   --------------------------------------------------------------------- */

.ei {
    width: 26px; height: 34px;
    border-radius: 50% 50% 46% 46% / 62% 62% 38% 38%;
    box-shadow: 0 3px 7px rgba(0,0,0,.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading, "bebas-neue-pro", sans-serif);
    font-size: 11px;
    font-weight: 700;
    color: #0A0A0A;
}
.ei-1 { bottom: 12px; left: 78px;  transform: rotate(-14deg); }
.ei-2 { bottom: 30px; left: 132px; transform: rotate(9deg); }
.ei-3 { bottom: 8px;  right: 128px; transform: rotate(18deg); }

.ei-kariert {
    background-image:
        linear-gradient(45deg, #111 25%, transparent 25%, transparent 75%, #111 75%),
        linear-gradient(45deg, #111 25%, transparent 25%, transparent 75%, #111 75%);
    background-color: #FFF;
    background-size: 9px 9px;
    background-position: 0 0, 4.5px 4.5px;
}
.ei-nummer   { background: linear-gradient(160deg, #FFF, #DCD8D0); }
.ei-streifen {
    background: linear-gradient(100deg, #1A1A1A 0 38%, #C9A961 38% 52%,
                                        #1A1A1A 52% 66%, #C9A961 66% 78%, #1A1A1A 78%);
}

/* Das versteckte Ei ist als einziges Objekt anklickbar */
.verstecktes-ei {
    position: absolute;
    bottom: 6px;
    right: 34%;
    padding: 0;
    font-size: 15px;
    line-height: 1;
    background: none;
    border: none;
    opacity: .35;
    cursor: pointer;
    pointer-events: auto;
    transition: opacity .3s, transform .3s;
}
.verstecktes-ei:hover  { opacity: 1; transform: scale(1.25); }
.verstecktes-ei.gefunden { animation: ei-hüpf .6s ease 3; }
@keyframes ei-hüpf {
    0%, 100% { transform: translateY(0) scale(1.2); }
    50%      { transform: translateY(-14px) scale(1.3); }
}

/* ---------------------------------------------------------------------
   HERBST
   --------------------------------------------------------------------- */

.liegendes-blatt {
    bottom: 0;
    left: var(--x);
    font-size: 15px;
    transform: rotate(var(--dreh));
    filter: drop-shadow(0 2px 3px rgba(0,0,0,.35));
    transition: transform .8s ease, opacity .8s;
}

.nebel {
    left: 0; right: 0; bottom: 0;
    height: 110px;
    background: linear-gradient(180deg, transparent, rgba(190,180,170,.16));
}

/* ---------------------------------------------------------------------
   SAISONSTART
   --------------------------------------------------------------------- */

.startampel {
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 9px;
    padding: 8px 12px;
    background: #0A0A0A;
    border: 2px solid #262626;
    border-radius: 4px;
    opacity: 0;
}
.startampel.laeuft { opacity: 1; }
.ampel-paar { display: flex; flex-direction: column; gap: 5px; }
.ampel-paar span {
    width: 13px; height: 13px;
    border-radius: 50%;
    background: #2A1010;
    transition: background .12s, box-shadow .12s;
}
.ampel-paar.an span {
    background: #E02020;
    box-shadow: 0 0 12px #E02020;
}

.hitzeflimmern {
    left: 0; right: 0; bottom: 0;
    height: 90px;
    background: linear-gradient(180deg, transparent, rgba(255,180,90,.1));
    filter: blur(1px);
}

.sticker {
    bottom: 24px;
    padding: 5px 11px;
    font-family: var(--font-heading, "bebas-neue-pro", sans-serif);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #0A0A0A;
    background: var(--theme-akzent-2, #E0C880);
    transform: rotate(-4deg);
    box-shadow: 0 3px 8px rgba(0,0,0,.35);
}
.sticker-links  { left: 26px; }
.sticker-rechts { right: 26px; }
.sticker-gold   { background: linear-gradient(135deg, #E0C880, #C9A961); }

/* ---------------------------------------------------------------------
   JUBILÄUM
   --------------------------------------------------------------------- */

.jubi-marke {
    top: 26px; right: 34px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 9px 14px;
    border: 2px solid var(--theme-akzent, #C9A961);
    color: var(--theme-akzent, #C9A961);
}
.jubi-marke strong { font-size: 22px; line-height: 1; }
.jubi-marke span   { font-size: 8px; letter-spacing: 3px; }

.polaroid {
    bottom: -14px;
    width: 52px; height: 60px;
    background: #F2EFE9;
    box-shadow: 0 3px 12px rgba(0,0,0,.45);
}
.polaroid::before {
    content: '';
    position: absolute;
    top: 4px; left: 4px; right: 4px;
    height: 40px;
    background: linear-gradient(150deg, #3A2A2A, #171010);
}
.polaroid-1 { left: 30px;  transform: rotate(-9deg); }
.polaroid-2 { left: 76px;  transform: rotate(5deg); }
.polaroid-3 { left: 122px; transform: rotate(-3deg); }

/* ---------------------------------------------------------------------
   SELTENE GÄSTE
   --------------------------------------------------------------------- */

.gast { bottom: 16px; }

.fahrzeug {
    left: -90px;
    width: 62px; height: 22px;
    animation: gast-fahrt 11s linear 3s 1 forwards;
}
.fahrzeug-koerper {
    position: absolute; inset: 0;
    border-radius: 10px 16px 5px 5px;
    background: linear-gradient(180deg, #E8E4DC, #B8B2A8);
    box-shadow: 0 2px 6px rgba(0,0,0,.4);
}
.fahrzeug-licht {
    position: absolute;
    top: -6px; left: 22px;
    width: 18px; height: 6px;
    border-radius: 3px;
    background: #E0A93B;
    animation: kulisse-puls .6s linear infinite;
}
.fahrzeug-spur {
    position: absolute;
    top: 18px; right: 100%;
    width: 120px; height: 4px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.3));
}
@keyframes gast-fahrt {
    to { transform: translateX(calc(100vw + 160px)); }
}

.marshal { right: 15%; width: 20px; height: 34px; }
.marshal::before {
    content: '';
    position: absolute;
    bottom: 0; left: 3px;
    width: 14px; height: 26px;
    border-radius: 6px 6px 2px 2px;
    background: #E8931E;
}
.marshal-flagge {
    position: absolute;
    top: 0; left: 14px;
    width: 20px; height: 14px;
    background-image:
        linear-gradient(45deg, #111 25%, transparent 25%, transparent 75%, #111 75%),
        linear-gradient(45deg, #111 25%, transparent 25%, transparent 75%, #111 75%);
    background-color: #FFF;
    background-size: 7px 7px;
    background-position: 0 0, 3.5px 3.5px;
    transform-origin: left center;
    animation: flagge-wehen 1.8s ease-in-out infinite;
}
@keyframes flagge-wehen {
    0%, 100% { transform: rotate(-6deg) skewY(0deg); }
    50%      { transform: rotate(4deg) skewY(-5deg); }
}

.hinweisschild {
    left: 22%;
    padding: 4px 9px;
    font-family: var(--font-heading, "bebas-neue-pro", sans-serif);
    font-size: 9px;
    letter-spacing: 2px;
    color: #0A0A0A;
    background: #E8E4DC;
    transform: rotate(-3deg);
}

.schwebend, .funk { right: 24%; font-size: 20px; opacity: .8; }

/* ---------------------------------------------------------------------
   MOBIL UND RÜCKSICHT
   --------------------------------------------------------------------- */

@media (max-width: 900px) {
    .theme-buehne { top: 70px; height: 190px; }

    /* Auf schmalen Bildschirmen nur die Objekte am Rand – in der Mitte
       ist zu wenig Platz, dort läge alles übereinander */
    .pitboard, .flightcase, .polaroid-2, .polaroid-3,
    .lebkuchen, .startampel, .jubi-marke { display: none; }

    .reifen { width: 68px; height: 78px; }
    .reifen-scheibe { width: 68px; height: 24px; }
    .reifen-schneehaube { width: 62px; height: 12px; left: 3px; }
}

@media (max-width: 600px) {
    .reifen-rechts, .sticker, .gast { display: none; }
}

/*
 * Wer ruhige Darstellung eingestellt hat, sieht die Objekte weiterhin –
 * nur nichts davon bewegt sich. Die Kulisse ist Gestaltung, die
 * Bewegung ist Beiwerk.
 */
@media (prefers-reduced-motion: reduce) {
    .beschriftung-punkt, .fahrzeug, .marshal-flagge,
    .fahrzeug-licht, .startampel { animation: none !important; }
    .fahrzeug { display: none; }
}

@media print {
    .theme-buehne { display: none; }
}

/* =====================================================================
   BEWEGTE ELEMENTE
   Werden vom Skript erzeugt und danach wieder entfernt.
   ===================================================================== */

.flocke {
    position: fixed;
    top: -20px;
    z-index: 900;
    color: #FFFFFF;
    text-shadow: 0 0 8px rgba(255,255,255,.55);
    pointer-events: none;
    animation: flocke-fallen var(--dauer, 6s) linear forwards;
    will-change: transform;
}
.flocke.blatt { text-shadow: none; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); }

@keyframes flocke-fallen {
    0%   { transform: translate3d(0,0,0) rotate(0deg);                    opacity: 0; }
    10%  {                                                                opacity: .9; }
    90%  {                                                                opacity: .9; }
    100% { transform: translate3d(var(--drift,0), 65vh, 0) rotate(260deg); opacity: 0; }
}

/* Blatt, das einmal über die Navigation weht */
.blatt-weht {
    position: fixed;
    top: 26px;
    left: -40px;
    z-index: 1100;
    font-size: 1.2rem;
    pointer-events: none;
    animation: blatt-wehen 4.5s cubic-bezier(.4,0,.6,1) forwards;
}
@keyframes blatt-wehen {
    0%   { transform: translate(0,0) rotate(0deg); opacity: 0; }
    10%  { opacity: 1; }
    50%  { transform: translate(50vw, 18px) rotate(180deg); }
    90%  { opacity: 1; }
    100% { transform: translate(calc(100vw + 60px), -10px) rotate(400deg); opacity: 0; }
}

/* Sternschnuppe */
.sternschnuppe {
    position: fixed;
    top: 34px;
    left: 12%;
    z-index: 1100;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: #FFF6DC;
    box-shadow: 0 0 12px 3px rgba(224,200,128,.8);
    pointer-events: none;
    animation: sternschnuppe-flug 1.5s ease-out forwards;
}
.sternschnuppe::after {
    content: '';
    position: absolute;
    top: 2px; right: 4px;
    width: 70px; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(224,200,128,.9));
}
@keyframes sternschnuppe-flug {
    0%   { transform: translate(0,0) scale(.5); opacity: 0; }
    15%  { opacity: 1; }
    100% { transform: translate(72vw, 26px) scale(1); opacity: 0; }
}

/* Kleines Auto nach dem Osterei */
.flitzer {
    position: fixed;
    bottom: 12vh;
    left: -80px;
    z-index: 1100;
    font-size: 2.2rem;
    pointer-events: none;
    animation: flitzer-fahrt 3.2s cubic-bezier(.3,0,.7,1) forwards;
}
@keyframes flitzer-fahrt {
    0%   { transform: translateX(0) scaleX(-1); }
    100% { transform: translateX(calc(100vw + 140px)) scaleX(-1); }
}

/* Rückmeldung, etwa beim gefundenen Ei */
.theme-meldung {
    position: fixed;
    left: 50%;
    bottom: 2rem;
    z-index: 1200;
    transform: translate(-50%, 180%);
    padding: .8rem 1.6rem;
    font-size: .9rem;
    letter-spacing: 2px;
    color: #0A0A0A;
    background: var(--theme-akzent-2, #E0C880);
    box-shadow: 0 10px 34px rgba(0,0,0,.35);
    transition: transform .35s cubic-bezier(.3,1.4,.5,1);
    pointer-events: none;
}
.theme-meldung.sichtbar { transform: translate(-50%, 0); }

/* Zeitstrahl beim Jubiläum */
.jubi-strahl {
    position: fixed;
    left: 50%;
    bottom: 2rem;
    z-index: 1200;
    display: flex;
    gap: 0;
    padding: 1rem 1.4rem;
    background: #0A0A0A;
    border: 1px solid var(--theme-akzent, #C9A961);
    transform: translate(-50%, 180%);
    transition: transform .4s cubic-bezier(.3,1.3,.5,1);
}
.jubi-strahl.offen { transform: translate(-50%, 0); }
.jubi-strahl span {
    position: relative;
    padding: 0 1.4rem;
    font-family: var(--font-heading, "bebas-neue-pro", sans-serif);
    font-size: .8rem;
    letter-spacing: 1px;
    color: var(--theme-akzent, #C9A961);
}
.jubi-strahl span + span::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    width: 1px; height: 12px;
    margin-top: -6px;
    background: rgba(201,169,97,.4);
}

@media (prefers-reduced-motion: reduce) {
    .flocke, .blatt-weht, .sternschnuppe, .flitzer { display: none; }
}