/* =====================================================================
   Race Day Shots – Themes über die gesamte Website

   Grundsatz aus dem Briefing: Die Website wird Teil des Themes, statt
   dass Dekoration daraufgelegt wird. Deshalb hängt die Theme-Klasse am
   body und dieses Stylesheet greift auf jeder Ebene:

     Atmosphäre  Licht, Farbstimmung, Hintergründe
     Struktur    Abschnittsübergänge, Linien, Karten
     Bedienung   Buttons, Hover, Rahmen
     Objekte     wenige, gut gesetzte Motorsportgegenstände
     Abschluss   Fußzeile

   Richtwert je Bildschirmhöhe: ein größeres Element, ein bis zwei kleine
   Details, ein atmosphärischer Effekt. Nicht mehr – die Seite muss atmen.

   Die Fotos selbst werden nie eingefärbt. Ein Theme, das die Bilder
   verfälscht, ruiniert genau das Produkt, das hier verkauft wird.
   ===================================================================== */

/* =====================================================================
   1. GEMEINSAME BAUSTEINE
   ===================================================================== */

/* Abschnittsübergänge: liegen an der Unterkante eines Abschnitts und
   greifen in den nächsten über. Nicht an jedem – nur an jedem zweiten. */
[class*="theme-"] .section::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 0;
    pointer-events: none;
    z-index: 3;
}
[class*="theme-"] .section { position: relative; }

/* Technische Beschriftung neben Überschriften. Wird per PHP gesetzt und
   trägt je Theme einen anderen Text. */
.theme-label {
    display: block;
    margin-bottom: .6rem;
    font-family: var(--font-heading, "bebas-neue-pro", sans-serif);
    font-size: .65rem;
    letter-spacing: 3px;
    color: var(--theme-akzent, #C9A961);
    opacity: .7;
}

/* Große Objekte an den Rändern. Sie liegen hinter dem Inhalt und
   niemals über Text oder Links. */
.theme-objekt {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    user-select: none;
}

/* =====================================================================
   2. WINTERPAUSE
   Rennstrecke im Winterschlaf. Kühl, ruhig, leicht verlassen.
   ===================================================================== */

body.theme-winter {
    --theme-akzent:   #A8B8C4;
    --theme-akzent-2: #E4EDF3;
}

/* Kaltes Licht über hellen Abschnitten – die Fotos bleiben unberührt,
   weil der Schleier hinter ihnen liegt */
body.theme-winter .section:not(.section-dark):not(.section-schwarz) {
    background-image: linear-gradient(180deg, rgba(168,184,196,.09), transparent 40%);
}
body.theme-winter .section-hell {
    background-color: #F2F5F7;
}

/* Schnee sammelt sich am unteren Rand jedes zweiten Abschnitts */
body.theme-winter .section:nth-of-type(2n)::after {
    height: 12px;
    background: #F4F8FA;
    clip-path: polygon(0 100%, 100% 100%, 100% 42%, 93% 66%, 86% 38%,
                       78% 70%, 69% 44%, 60% 72%, 51% 40%, 42% 68%,
                       33% 42%, 24% 70%, 15% 46%, 7% 72%, 0 44%);
    opacity: .85;
}

/* Karten mit Frostkante */
body.theme-winter .leistungs-karte,
body.theme-winter .usp-karte,
body.theme-winter .blog-karte {
    box-shadow: inset 0 1px 0 rgba(228,237,243,.6);
}
body.theme-winter .leistungs-karte::before,
body.theme-winter .blog-karte::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 46px; height: 6px;
    background: #F4F8FA;
    clip-path: polygon(0 0, 100% 0, 100% 40%, 74% 90%, 48% 30%, 22% 85%, 0 35%);
    z-index: 4;
}
body.theme-winter .leistungs-karte,
body.theme-winter .blog-karte { position: relative; }

/* Buttons mit frostigem Schein */
body.theme-winter .btn:hover {
    box-shadow: 0 0 0 1px rgba(228,237,243,.5), 0 6px 22px rgba(168,184,196,.35);
}

/* Fußzeile: Schnee sammelt sich an der Oberkante */
body.theme-winter .footer { position: relative; }
body.theme-winter .footer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 10px;
    background: rgba(244,248,250,.8);
    clip-path: polygon(0 0, 100% 0, 100% 55%, 90% 30%, 80% 62%, 68% 34%,
                       56% 66%, 44% 32%, 32% 60%, 20% 36%, 10% 64%, 0 38%);
}

/* =====================================================================
   3. WEIHNACHTEN
   Paddock an Weihnachten, kein Weihnachtsmarkt.
   ===================================================================== */

body.theme-weihnachten {
    --theme-akzent:   #1F5C3D;
    --theme-akzent-2: #E0C880;
}

/* Warmes Licht in dunklen Abschnitten */
body.theme-weihnachten .section-dark,
body.theme-weihnachten .section-schwarz {
    background-image: radial-gradient(circle at 18% 0%, rgba(224,200,128,.14), transparent 55%),
                      radial-gradient(circle at 84% 100%, rgba(224,200,128,.1), transparent 50%);
}

/* Feine goldene Lichtlinie als Übergang */
body.theme-weihnachten .section:nth-of-type(2n)::after {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(224,200,128,.85) 25%,
                                rgba(224,200,128,.85) 75%, transparent);
    box-shadow: 0 0 12px rgba(224,200,128,.5);
}

/* Karten bekommen beim Überfahren einen warmen Schein */
body.theme-weihnachten .leistungs-karte:hover,
body.theme-weihnachten .blog-karte:hover,
body.theme-weihnachten .referenz:hover {
    box-shadow: 0 0 0 1px rgba(224,200,128,.5), 0 10px 40px rgba(224,200,128,.2);
}

body.theme-weihnachten .btn-primary:hover {
    box-shadow: 0 0 26px rgba(224,200,128,.55);
}

/* Fußzeile: dezente Lichterkette */
body.theme-weihnachten .footer { position: relative; }
body.theme-weihnachten .footer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: repeating-linear-gradient(90deg,
        rgba(224,200,128,.9) 0 4px, transparent 4px 34px);
    box-shadow: 0 0 10px rgba(224,200,128,.4);
}

/* =====================================================================
   4. OSTERN
   Frühling und Motorsport. Frisch, heller, nicht kindlich.
   ===================================================================== */

body.theme-ostern {
    --theme-akzent:   #7A9A4E;
    --theme-akzent-2: #C6D9A0;
}

body.theme-ostern .section:not(.section-dark):not(.section-schwarz) {
    background-image: linear-gradient(180deg, rgba(198,217,160,.12), transparent 45%);
}
body.theme-ostern .section-hell { background-color: #F5F7F0; }

/* Übergang wie ein feiner Grashorizont */
body.theme-ostern .section:nth-of-type(3n)::after {
    height: 6px;
    background: repeating-linear-gradient(92deg,
        var(--theme-akzent, #7A9A4E) 0 2px, transparent 2px 7px);
    opacity: .45;
}

body.theme-ostern .btn:hover {
    box-shadow: 0 6px 20px rgba(122,154,78,.3);
}

/* =====================================================================
   5. HERBST
   Spätes Rennwochenende. Nasser Asphalt, tiefe Sonne, Nebel.
   ===================================================================== */

body.theme-herbst {
    --theme-akzent:   #B5651D;
    --theme-akzent-2: #E0A55C;
}

/* Tiefes Sonnenlicht von der Seite */
body.theme-herbst .section:not(.section-dark):not(.section-schwarz) {
    background-image: linear-gradient(105deg, rgba(224,165,92,.13), transparent 42%);
}
body.theme-herbst .section-hell { background-color: #F7F3EC; }

/* Dunkle Abschnitte bekommen Sprühnebel */
body.theme-herbst .section-dark,
body.theme-herbst .section-schwarz {
    background-image: linear-gradient(180deg, rgba(224,165,92,.1), transparent 30%),
                      radial-gradient(ellipse at 50% 100%, rgba(200,190,180,.12), transparent 60%);
}

/* Nasser Glanz am Übergang – wie Wasserfilm auf Asphalt */
body.theme-herbst .section:nth-of-type(2n)::after {
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(224,165,92,.5) 30%,
                                rgba(255,255,255,.3) 50%, rgba(224,165,92,.5) 70%, transparent);
}

/* Kupferne Linie fährt beim Überfahren am Button entlang */
body.theme-herbst .btn { position: relative; overflow: hidden; }
body.theme-herbst .btn::after {
    content: '';
    position: absolute;
    left: -100%;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #E0A55C, transparent);
    transition: left .6s ease;
}
body.theme-herbst .btn:hover::after { left: 100%; }

body.theme-herbst .leistungs-karte:hover,
body.theme-herbst .blog-karte:hover {
    box-shadow: 0 10px 34px rgba(181,101,29,.22);
}

/* =====================================================================
   6. SAISONSTART
   Das dynamischste Theme. Garage auf, Motoren an.
   ===================================================================== */

body.theme-saisonstart {
    --theme-akzent:   #C9A961;
    --theme-akzent-2: #E05A4E;
}

/* Startaufstellungs-Markierungen auf hellen Flächen */
body.theme-saisonstart .section-hell {
    background-image:
        repeating-linear-gradient(90deg,
            rgba(39,15,15,.05) 0 2px, transparent 2px 88px);
}

/* Übergang als Start-Ziel-Linie */
body.theme-saisonstart .section:nth-of-type(2n)::after {
    height: 10px;
    background-image:
        linear-gradient(45deg, rgba(10,10,10,.85) 25%, transparent 25%,
                        transparent 75%, rgba(10,10,10,.85) 75%),
        linear-gradient(45deg, rgba(10,10,10,.85) 25%, transparent 25%,
                        transparent 75%, rgba(10,10,10,.85) 75%);
    background-color: rgba(255,255,255,.9);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
}

/* Hitzeflimmern über dunklen Abschnitten */
body.theme-saisonstart .section-dark,
body.theme-saisonstart .section-schwarz {
    background-image: linear-gradient(180deg, transparent 60%, rgba(255,170,80,.09));
}

/* Racing-Sweep über den Button */
body.theme-saisonstart .btn { position: relative; overflow: hidden; }
body.theme-saisonstart .btn::before {
    content: '';
    position: absolute;
    inset: 0;
    left: -100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
    transition: left .5s ease;
}
body.theme-saisonstart .btn:hover::before { left: 100%; }

/* Bildkarten wie ein Timing-Fenster */
body.theme-saisonstart .emotion-item::before {
    content: attr(data-timing);
    position: absolute;
    top: 8px; left: 8px;
    z-index: 3;
    padding: 3px 7px;
    font-family: var(--font-heading, "bebas-neue-pro", sans-serif);
    font-size: .58rem;
    letter-spacing: 1.5px;
    color: #E8E4DC;
    background: rgba(10,10,10,.72);
    opacity: 0;
    transition: opacity .25s;
}
body.theme-saisonstart .emotion-item:hover::before { opacity: 1; }

/* Fußzeile mit Zielflaggenkante */
body.theme-saisonstart .footer { position: relative; }
body.theme-saisonstart .footer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 8px;
    background-image:
        linear-gradient(45deg, #0A0A0A 25%, transparent 25%, transparent 75%, #0A0A0A 75%),
        linear-gradient(45deg, #0A0A0A 25%, transparent 25%, transparent 75%, #0A0A0A 75%);
    background-color: #FFF;
    background-size: 16px 16px;
    background-position: 0 0, 8px 8px;
}

/* =====================================================================
   7. JUBILÄUM
   Elegant, hochwertig, Motorsport-Geschichte.
   ===================================================================== */

body.theme-jubilaeum {
    --theme-akzent:   #C9A961;
    --theme-akzent-2: #F0DCA8;
}

body.theme-jubilaeum .section-dark,
body.theme-jubilaeum .section-schwarz {
    background-image: radial-gradient(ellipse at 50% 0%, rgba(201,169,97,.13), transparent 60%);
}

/* Feine Goldlinie als Übergang */
body.theme-jubilaeum .section:nth-of-type(2n)::after {
    height: 2px;
    background: linear-gradient(90deg, transparent, #C9A961 20%,
                                #F0DCA8 50%, #C9A961 80%, transparent);
}

/* Karten mit Goldkante beim Überfahren */
body.theme-jubilaeum .leistungs-karte:hover,
body.theme-jubilaeum .blog-karte:hover,
body.theme-jubilaeum .referenz:hover {
    box-shadow: inset 0 0 0 1px rgba(201,169,97,.55);
}

body.theme-jubilaeum .btn:hover {
    box-shadow: 0 0 0 1px #C9A961, 0 8px 30px rgba(201,169,97,.3);
}

/* Bilder wirken wie Archivabzüge */
body.theme-jubilaeum .emotion-item {
    box-shadow: inset 0 0 0 1px rgba(201,169,97,.25);
}

body.theme-jubilaeum .footer { position: relative; }
body.theme-jubilaeum .footer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #C9A961, transparent);
}

/* =====================================================================
   9. OBJEKTE IN DEN ABSCHNITTEN
   Große Gegenstände an den Rändern – nie über Text.
   ===================================================================== */

.theme-objekt.gross {
    bottom: 0;
    width: 150px;
    height: 130px;
    opacity: .9;
}
.theme-objekt.links  { left: -32px; }
.theme-objekt.rechts { right: -32px; }

/* Abdeckplane über einem Objekt – Winterpause */
.objekt-plane {
    width: 190px;
    height: 96px;
    border-radius: 96px 96px 8px 8px / 62px 62px 8px 8px;
    background: linear-gradient(160deg, #4A4E52, #2A2D30);
    box-shadow: inset 0 -8px 18px rgba(0,0,0,.45), 0 6px 20px rgba(0,0,0,.35);
}
.objekt-plane::after {
    content: '';
    position: absolute;
    inset: 12px 16px auto 16px;
    height: 1px;
    background: rgba(255,255,255,.12);
}

/* Streckenschild */
.objekt-schild {
    width: 120px;
}
.objekt-schild .schild-pfosten {
    display: block;
    width: 6px;
    height: 46px;
    margin: 0 auto;
    background: linear-gradient(90deg, #3A3A3A, #6A6A6A, #3A3A3A);
}
.objekt-schild .schild-tafel {
    display: block;
    padding: 8px 6px;
    font-family: var(--font-heading, "bebas-neue-pro", sans-serif);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-align: center;
    color: #0A0A0A;
    background: #E8E4DC;
    border: 3px solid #C0392B;
}

/* Kaffeebecher – Paddock-Detail für die Winterpause */
.objekt-becher {
    width: 34px; height: 44px;
    bottom: 6px;
}
.objekt-becher::before {
    content: '';
    position: absolute;
    inset: 8px 0 0 0;
    border-radius: 3px 3px 8px 8px;
    background: linear-gradient(180deg, #E8E4DC, #C4C0B8);
}
.objekt-becher::after {
    content: '';
    position: absolute;
    top: 0; left: 8px;
    width: 18px; height: 14px;
    border-radius: 50%;
    background: rgba(255,255,255,.22);
    filter: blur(3px);
    animation: dampf 3.5s ease-in-out infinite;
}
@keyframes dampf {
    0%, 100% { transform: translateY(0) scaleX(1);   opacity: .35; }
    50%      { transform: translateY(-10px) scaleX(1.4); opacity: .1; }
}

/* Versteckte Eier auf der ganzen Seite */
.oster-ei {
    position: absolute;
    z-index: 4;
    width: 22px; height: 29px;
    border: none;
    border-radius: 50% 50% 46% 46% / 62% 62% 38% 38%;
    opacity: .3;
    cursor: pointer;
    pointer-events: auto;
    transition: opacity .3s, transform .3s;
}
.oster-ei:hover { opacity: 1; transform: scale(1.25) rotate(-8deg); }
.oster-ei.gefunden { animation: ei-hüpf .55s ease 3; }

.oster-ei.ei-carbon {
    background:
        repeating-linear-gradient(45deg, #1A1A1A 0 3px, #2A2A2A 3px 6px);
}
.oster-ei.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: 8px 8px;
    background-position: 0 0, 4px 4px;
}
.oster-ei.ei-streifen {
    background: linear-gradient(100deg, #1A1A1A 0 40%, #C9A961 40% 54%, #1A1A1A 54%);
}

/* Kleine Fundmeldung */
.eier-stand {
    position: fixed;
    right: 1.2rem;
    bottom: 1.2rem;
    z-index: 1150;
    padding: .5rem .9rem;
    font-family: var(--font-heading, "bebas-neue-pro", sans-serif);
    font-size: .72rem;
    letter-spacing: 1px;
    color: #0A0A0A;
    background: var(--theme-akzent-2, #C6D9A0);
    opacity: 0;
    transform: translateY(20px);
    transition: all .3s;
    pointer-events: none;
}
.eier-stand.sichtbar { opacity: 1; transform: translateY(0); }

/* =====================================================================
   10. MOBIL
   Desktop volles Erlebnis, Tablet etwa 70 Prozent, Handy 40 bis 50.
   ===================================================================== */

@media (max-width: 1024px) {
    /* Große Objekte verschwinden zuerst – sie brauchen Rand, den es
       auf schmalen Bildschirmen nicht gibt */
    .theme-objekt.gross { transform: scale(.75); }
    .objekt-plane, .objekt-becher { display: none; }
}

@media (max-width: 700px) {
    .theme-objekt { display: none; }
    .oster-ei { width: 18px; height: 24px; }

    /* Übergänge bleiben – sie kosten nichts und tragen die Stimmung */
    [class*="theme-"] .section:nth-of-type(2n)::after { height: 6px; }
    body.theme-saisonstart .section:nth-of-type(2n)::after { height: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .objekt-becher::after { animation: none; }
    body.theme-herbst .btn::after,
    body.theme-saisonstart .btn::before { transition: none; }
}

@media print {
    .theme-objekt, .oster-ei, .eier-stand { display: none; }
    [class*="theme-"] .section::after { display: none; }
}

/* Marke in der Fußzeile – schließt das Theme nach unten ab */
.theme-fussdetail {
    position: relative;
    text-align: center;
    padding-top: .8rem;
}
.fuss-marke {
    display: inline-block;
    font-family: var(--font-heading, "bebas-neue-pro", sans-serif);
    font-size: .62rem;
    letter-spacing: 4px;
    color: var(--theme-akzent, #C9A961);
    opacity: .55;
}