/* =============================================================================
   Tierhilfe Wolfsburg e.V. – Virtueller Weihnachtsbasar
   Theme „Winter Wonderland“ – Lichtstimmung nach Tageszeit („Tageslauf“) – Version 1.3.0
   header.php setzt am <html> eine der Klassen ww-phase-morgen | -tag | -abend |
   -nacht (Sonnenstand Wolfsburg bzw. Einstellung daytime_mode), nachts außerdem
   ww-surface-dark (dunkle Seitenfläche, nicht auf der Artikelseite).
   Grundwerte in theme-winter.css: Himmel, Kopf, Dorf und Tier-Block = Nacht,
   Seitenfläche = Frost. Hier stehen nur die Abweichungen je Phase, fast nur Variablen.
   Morgen und Abend: Dämmerungshimmel, Sonne am Horizont hinter dem Dorf, Fenster
   leuchten, Papierweiß als Fläche, warmer Schein um die Karten.
   Tag: blauer Winterhimmel, Sonne statt Mond, Lichterkette aus, keine Sterne,
   dunkle Fenster, rote Häuser, weißer Kopf mit dunkler Schrift.
   Nacht: Mond und Sterne, dunkelblaue Fläche, Karten leuchten wie Schaufenster.
   Schrift auf dem Himmel bleibt in allen Phasen hell; die Verläufe sind so gewählt,
   dass der helle Horizont erst hinter dem Dorf bzw. den Schneehügeln beginnt.
   Tokens werden am body überschrieben: .theme-winter hängt an <html> und <body>.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. Himmel
   ----------------------------------------------------------------------------- */

.ww-phase-morgen body.theme-winter {
    --ww-sky-1: #1f2b5e;
    --ww-sky-2: #4a4a8c;
    --ww-sky-3: #8a6298;
    --ww-sky-4: #f6b999;
    --ww-sky-glow: transparent;
    --ww-sky-aurora: rgba(255, 190, 150, 0.22);
}

.ww-phase-abend body.theme-winter {
    --ww-sky-1: #0e1a42;
    --ww-sky-2: #2b3a78;
    --ww-sky-3: #7d4f86;
    --ww-sky-4: #f29a5c;
    --ww-sky-glow: transparent;
    --ww-sky-aurora: rgba(242, 154, 92, 0.2);
}

.ww-phase-tag body.theme-winter {
    --ww-sky-1: #17508f;
    --ww-sky-2: #2467ae;
    --ww-sky-3: #3f80c4;
    --ww-sky-4: #a4cfee;
    --ww-sky-glow: rgba(255, 255, 255, 0.3);
    --ww-sky-aurora: transparent;
}

/* Am Tag ist der Himmel heller als nachts: Nebentexte und Grün etwas aufhellen */
.ww-phase-tag .theme-winter .ww-hero,
.ww-phase-tag .theme-winter .ww-pagehead,
.ww-phase-tag .theme-winter .page-header--festive,
.ww-phase-tag .theme-winter .ww-thanks {
    --ww-muted-on-dark: #eaf2fb;
    --ww-green-glow: #e4f5a3;
    --ww-ice: #dff2fc;
}

/* -----------------------------------------------------------------------------
   2. Sonne (das Mond-Element der Startseite), Sterne – immer rechts, der Text steht links
   ----------------------------------------------------------------------------- */

.ww-phase-morgen .theme-winter .ww-moon::after,
.ww-phase-tag .theme-winter .ww-moon::after,
.ww-phase-abend .theme-winter .ww-moon::after {
    display: none;                   /* keine Krater auf der Sonne */
}

.ww-phase-tag .theme-winter .ww-moon {
    top: 13%;
    right: 10%;
    background: radial-gradient(circle at 50% 50%, #ffffff, #fffbe0 55%, #fff1b8);
    box-shadow: 0 0 50px 16px rgba(255, 255, 255, 0.55), 0 0 140px 50px rgba(255, 246, 200, 0.3);
}

/* Auf- und untergehende Sonne: halb hinter dem Dorf (.ww-village liegt darüber).
   Schein bewusst knapp: der Hero schneidet unten nicht ab, ein weiter Schein liefe in den Inhalt. */
.ww-phase-morgen .theme-winter .ww-moon,
.ww-phase-abend .theme-winter .ww-moon {
    top: auto;
    bottom: 70px;
    width: 104px;
    height: 104px;
}

.ww-phase-morgen .theme-winter .ww-moon {
    right: 15%;
    background: radial-gradient(circle at 50% 50%, #fff6dc, #ffe2a8 60%, #ffcf8a);
    box-shadow: 0 0 34px 10px rgba(255, 200, 140, 0.55), 0 0 56px 12px rgba(255, 190, 150, 0.24);
}

.ww-phase-abend .theme-winter .ww-moon {
    right: 8%;
    background: radial-gradient(circle at 50% 50%, #ffd9a0, #ffb06a 60%, #f58a4a);
    box-shadow: 0 0 34px 10px rgba(255, 150, 90, 0.55), 0 0 56px 12px rgba(242, 154, 92, 0.24);
}

@media (max-width: 767.98px) {
    .ww-phase-tag .theme-winter .ww-moon {
        top: 58px;
        right: 5%;
        width: 46px;
        height: 46px;
        box-shadow: 0 0 26px 10px rgba(255, 255, 255, 0.5);
    }

    .ww-phase-morgen .theme-winter .ww-moon,
    .ww-phase-abend .theme-winter .ww-moon {
        right: 7%;
        bottom: 32px;
        width: 58px;
        height: 58px;
        box-shadow: 0 0 22px 8px rgba(255, 180, 120, 0.5);
    }
}

.ww-phase-tag .theme-winter .ww-stars { display: none; }
.ww-phase-morgen .theme-winter .ww-stars { opacity: 0.3; }
.ww-phase-abend .theme-winter .ww-stars { opacity: 0.55; }

/* -----------------------------------------------------------------------------
   3. Lichterkette: am Tag ausgeschaltet
   ----------------------------------------------------------------------------- */

.ww-phase-tag .theme-winter .ww-garland span::after,
.ww-phase-tag.fx-on .theme-winter .ww-garland span::after {
    animation: none;
    box-shadow: none;
    opacity: 0.8;
    filter: saturate(0.5) brightness(0.92);
}

/* -----------------------------------------------------------------------------
   4. Morgen und Abend: warmer Schein um Karten und Kästen
   ----------------------------------------------------------------------------- */

.ww-phase-morgen body.theme-winter,
.ww-phase-abend body.theme-winter {
    --ww-ring: 0 0 0 1px rgba(242, 207, 107, 0.6);
    --ww-shadow: 0 10px 30px -12px rgba(170, 100, 40, 0.4), 0 0 26px -6px rgba(255, 196, 120, 0.45);
    --ww-shadow-lift: 0 26px 50px -18px rgba(170, 100, 40, 0.5), 0 0 34px -4px rgba(255, 196, 120, 0.55);
}

/* -----------------------------------------------------------------------------
   5. Kopf und Topbar je Phase (seit 1.3.0)
   Nacht #071022 (Grundwert), Morgen #1f2a5a, Abend #101a40; am Tag weiß mit dunkler
   Schrift, feiner Linie, grüner Navigationsmarkierung und Logo ohne Kasten.
   ----------------------------------------------------------------------------- */

.ww-phase-morgen body.theme-winter { --ww-head-bg: #1f2a5a; }
.ww-phase-abend body.theme-winter  { --ww-head-bg: #101a40; }

.ww-phase-tag body.theme-winter {
    --ww-head-bg: #ffffff;
    --ww-topbar-bg: #e9f6fc;
    --ww-head-ink: #10284c;
    --ww-head-muted: #2c4264;
    --ww-head-line: #dbe7f1;
    --ww-head-hover: rgba(16, 40, 76, 0.07);
    --ww-head-toggler: rgba(16, 40, 76, 0.35);
    --ww-nav-mark: #9cc026;
    --ww-nav-mark-glow: none;
    --ww-fx-track: rgba(16, 40, 76, 0.25);
}

.ww-phase-tag .theme-winter .topbar,
.ww-phase-tag .theme-winter .site-header {
    --ww-focus: #1d5fbf;
}

.ww-phase-tag .theme-winter .topbar .fas {
    color: var(--ww-green-text);
}

.ww-phase-tag .theme-winter .navbar {
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2816, 40, 76, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    box-shadow: none !important;
}

.ww-phase-tag .theme-winter .site-header::after {
    display: none;                   /* Glitzerlinie nur auf dunklem Kopf; am Tag die feine Linie */
}

.ww-phase-tag .theme-winter .navbar-brand__logo {
    padding-inline: 0;
    background: transparent;
    box-shadow: none;
}

.ww-phase-tag .theme-winter .brand-text__star {
    color: var(--ww-gold-deep);
}

.ww-phase-tag .theme-winter .nav-cart {
    background: #e9f6fc;
    box-shadow: 0 0 0 1px #cfe0ec;
}

.ww-phase-tag .theme-winter .nav-cart__badge {
    border-color: #ffffff;
}

/* -----------------------------------------------------------------------------
   6. Dorf im Start-Hero je Phase (seit 1.3.0; Grundwert Nacht in theme-winter.css)
   Fenster leuchten morgens, abends und nachts; am Tag dunkel, Häuser rot.
   ----------------------------------------------------------------------------- */

.ww-phase-morgen body.theme-winter {
    --ww-v-win: #ffd98a;
    --ww-v-wall: #4a4170;
    --ww-v-roof: #352e5a;
    --ww-v-tree: #3a3f64;
    --ww-v-cap: #fbe9e4;
    --ww-v-snow: #f6e1df;
    --ww-v-back: #bf97b2;
}

.ww-phase-abend body.theme-winter {
    --ww-v-win: #ffcf6a;
    --ww-v-wall: #3a2f58;
    --ww-v-roof: #281f45;
    --ww-v-tree: #2a2a4c;
    --ww-v-cap: #f3d7d2;
    --ww-v-snow: #eccfd0;
    --ww-v-back: #a9789a;
}

.ww-phase-tag body.theme-winter {
    --ww-v-win: #5f7289;
    --ww-v-glow: 0px;
    --ww-v-wall: #a54a3c;
    --ww-v-roof: #5b3a32;
    --ww-v-tree: #2f5d4a;
    --ww-v-cap: #ffffff;
    --ww-v-snow: #ffffff;
    --ww-v-back: #d3e4f1;
}

/* -----------------------------------------------------------------------------
   7. Seitenfläche je Phase (seit 1.3.0)
   Morgen warmes Papierweiß, Abend #fbf3ea, Tag Frost (Grundwert), Nacht dunkelblau.
   Der vordere Schneestreifen des Dorfs und die Hügel der Unterseiten laufen in diese Farbe aus.
   ----------------------------------------------------------------------------- */

.ww-phase-morgen body.theme-winter {
    --ww-page: #fdf6f1;
    --ww-hill: #f6e1df;
}

.ww-phase-abend body.theme-winter {
    --ww-page: #fbf3ea;
    --ww-hill: #eccfd0;
}

/* Nacht: Inhalte außerhalb der Kästen hell auf #0b1630 (Kontraste im Protokoll 1.3.0);
   Karten und Kästen bleiben hell und leuchten wie Schaufenster (goldener Ring, warmer Schein). */
.ww-surface-dark body.theme-winter {
    --ww-page: #0b1630;
    --ww-on-page: #ffffff;
    --ww-on-page-muted: #c6d4e6;
    --ww-on-page-link: #bfe6f7;
    --ww-on-page-kicker: #c3e655;
    --ww-hill: #4d6c9c;
    --ww-focus: var(--ww-focus-dark);
    --ww-ring: 0 0 0 1px #f2cf6b;
    --ww-shadow: 0 0 0 4px rgba(242, 207, 107, 0.16), 0 12px 44px -6px rgba(242, 190, 90, 0.3);
    --ww-shadow-lift: 0 0 0 5px rgba(242, 207, 107, 0.22), 0 24px 54px -10px rgba(242, 190, 90, 0.42);
}

/* in den hellen Kästen bleibt der blaue Fokusrahmen */
.ww-surface-dark .theme-winter :is(.product-card, .step-card, .filter-bar__inner, .cart-list, .summary-card,
    .form-section, .info-block, .pay-card, .alert, .ww-thanks__card, .ww-notfound) {
    --ww-focus: #1d5fbf;
}

.ww-surface-dark .theme-winter .product-card:hover,
.ww-surface-dark .theme-winter .product-card:focus-within {
    box-shadow: 0 0 0 1px #f2cf6b, var(--ww-shadow-lift);
}

/* „Alle Artikel ansehen“ (Nachtblau) bekommt auf der dunklen Fläche einen hellen Rand */
.ww-surface-dark .theme-winter .section-highlights .btn-outline-accent {
    box-shadow: 0 0 0 1px rgba(191, 230, 247, 0.7), 0 10px 24px -10px rgba(0, 0, 0, 0.8);
}

.ww-surface-dark .theme-winter .empty-state__icon {
    color: var(--ww-gold);
    filter: none;
}

/* -----------------------------------------------------------------------------
   8. Tier-Block je Phase (seit 1.3.0; Grundwert Nacht #101f40 mit heller Schrift)
   Morgen #f6e6e0, Abend #f3e3d3, Tag #e9f6fc, jeweils mit dunkler Schrift.
   ----------------------------------------------------------------------------- */

.ww-phase-morgen body.theme-winter,
.ww-phase-tag body.theme-winter,
.ww-phase-abend body.theme-winter {
    --ww-panel-ink: #1b2740;
    --ww-panel-title: #0f2347;
    --ww-panel-muted: #4f5d73;
    --ww-panel-kicker: #4a5f0c;      /* auf #f3e3d3 hätte #5a7010 nur 4,45:1 */
    --ww-panel-btn-ink: #1d3f73;
    --ww-panel-btn-bg: #ffffff;
    --ww-panel-btn-border: #1d3f73;
    --ww-panel-btn-hover: #e9f6fc;
    --ww-panel-focus: #1d5fbf;
    --ww-progress-bg: rgba(255, 255, 255, 0.6);
    --ww-progress-border: rgba(15, 35, 71, 0.12);
    --ww-progress-track: rgba(15, 35, 71, 0.12);
    --ww-progress-value: #7d5f0e;
    --ww-progress-glow: none;
}

.ww-phase-morgen body.theme-winter { --ww-panel: #f6e6e0; }
.ww-phase-abend body.theme-winter  { --ww-panel: #f3e3d3; }
.ww-phase-tag body.theme-winter    { --ww-panel: #e9f6fc; }