/**
 * ╔══════════════════════════════════════════════════════════════╗
 * ║  Greven Auction – Versteigerungs-Ankündigungssystem          ║
 * ║  Pfandbeleihung Greven, Bonn                                  ║
 * ║                                                                ║
 * ║  Komponenten:                                                  ║
 * ║  1. Announcement Ribbon  (Startseite, fixed top)              ║
 * ║  2. Event-Teaser Sektion (Startseite, inline)                 ║
 * ║  3. Auction Hero         (Versteigerungsseite)                ║
 * ║                                                                ║
 * ║  Theme:   data-gv-theme="dark|light" auf Wrapper-Element      ║
 * ║  Version: 2.2.0                                                ║
 * ╚══════════════════════════════════════════════════════════════╝
 */


/* ============================================================
   SHARED TOKENS
   ============================================================ */

:root {
    /* ── Farben ───────────────────────────────────────────────── */
    --gold:       #C9A84C;
    --gold-light: #D4B96A;
    --gold-dark:  #A88A35;

    /* ── Typografie ───────────────────────────────────────────── */
    /*
     * SICHERHEITS-HINWEIS:
     * Beide Schriften müssen vom Haupt-Theme geladen werden
     * (z.B. via Google Fonts im Theme-Customizer oder functions.php).
     *
     * Falls 'Cormorant Garamond' nicht geladen ist, greift der Browser
     * auf 'Playfair Display' (häufige WordPress-Schrift) und dann auf
     * Georgia zurück – der edle Charakter des Designs bleibt erhalten.
     *
     * Falls 'DM Sans' fehlt, greift 'Outfit' (modernes System-nahe
     * Alternative) oder system-ui ein.
     */
    --fd: 'Cormorant Garamond', 'Playfair Display', Georgia, 'Times New Roman', serif;
    --fb: 'DM Sans', 'Outfit', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

    /* ── Animation ────────────────────────────────────────────── */
    --ease: cubic-bezier(.4, 0, .2, 1);

    /* ── Ribbon-Konfiguration ─────────────────────────────────── */
    /*
     * Diese Variablen werden von init.php via wp_add_inline_style()
     * überschrieben (GV_RIBBON_SCALE, GV_RIBBON_ZINDEX).
     * Die Werte hier sind lediglich Fallbacks.
     */
    --gv-ribbon-scale: 1;
    --gv-ribbon-z:     10000;
}

/* ============================================================
   RIBBON SPACING FIX (Anti-Overlap)
   ============================================================
   Verschiebt das gesamte HTML-Dokument nach unten, analog zur
   WordPress Admin-Bar. Dies garantiert, dass der statische Header
   (nicht sticky) niemals vom fixed Ribbon verdeckt wird.
   ============================================================ */
html {
    /* Setzt den Abstand nach oben. Standardwert ist 0px, falls die Variable fehlt */
    margin-top: var(--gv-ribbon-height, 0px) !important;
    
    /* Sorgt dafür, dass Anker-Links (Sprungmarken) nicht unter den Ribbon rutschen */
    scroll-padding-top: var(--gv-ribbon-height, 0px);
    
    /* Sanfte Animation, wenn der Ribbon geschlossen (dismissed) wird */
    transition: margin-top 0.4s cubic-bezier(.4, 0, .2, 1);
}

/* ============================================================
   BARRIEREFREIHEIT – Utility-Klasse für Screenreader-Text
   ============================================================
   .sr-only macht Inhalte visuell unsichtbar, hält sie aber für
   Screenreader und assistive Technologien zugänglich.
   Wird für den barrierefreien Countdown-Text verwendet.
   ============================================================ */

.sr-only {
    position:  absolute;
    width:     1px;
    height:    1px;
    padding:   0;
    margin:    -1px;
    overflow:  hidden;
    clip:      rect(0, 0, 0, 0);
    white-space: nowrap;
    border:    0;
}


/* ============================================================
   SCROLL-ANIMATIONEN – CLS-sicher via .js-enabled
   ============================================================
   Statt Inline-Styles per JS-For-Schleife zu setzen, nutzen wir
   eine CSS-Klasse. Das verhindert Cumulative Layout Shift (CLS),
   weil kein Layout-relevanter Inline-Style nachträglich injiziert
   wird. JS fügt nur einmalig .js-enabled auf <html> hinzu.
   ============================================================ */

/*
 * Initialer Zustand (NUR wenn JS aktiv ist).
 * Ohne JS: Elemente sofort sichtbar – kein White-Screen-Problem.
 */
.js-enabled .gv-event-teaser,
.js-enabled .gv-auction-badge {
    opacity:    0;
    transform:  translateY(18px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
}

/* Sichtbar-Zustand: wird per IntersectionObserver via Klasse gesetzt. */
.js-enabled .gv-event-teaser.gv-is-visible,
.js-enabled .gv-auction-badge.gv-is-visible {
    opacity:   1;
    transform: none;
}


/* ============================================================
   🌙 DARK THEME
   ============================================================ */

[data-gv-theme="dark"] {
    --ribbon-bg:        #1A1A1A;
    --ribbon-bdr:       rgba(201,168,76,.2);
    --ribbon-txt:       #FAFAFA;
    --ribbon-close-hov: rgba(255,255,255,.06);

    --teaser-bg:        #1A1A1A;
    --teaser-bdr:       #2E2E34;
    --teaser-txt:       #FAFAFA;
    --teaser-txt-s:     #A1A1AA;
    --teaser-txt-m:     #71717A;
    --teaser-chip-bg:   rgba(255,255,255,.04);
    --teaser-chip-bdr:  rgba(255,255,255,.08);
    --teaser-atmo1:     rgba(201,168,76,.1);
    --teaser-atmo2:     rgba(201,168,76,.05);
    --teaser-count-bg:  rgba(255,255,255,.03);
    --teaser-count-bdr: rgba(201,168,76,.12);
    --teaser-btn2-bdr:  #3E3E46;
    --teaser-btn2-txt:  #A1A1AA;

    --hero-bg:          #0B0B0D;
    --hero-txt:         #FAFAFA;
    --hero-txt-s:       #A1A1AA;
    --hero-txt-m:       #71717A;
    --hero-atmo:        rgba(201,168,76,.09);
    --hero-line:        rgba(201,168,76,.08);
    --hero-count-bg:    rgba(255,255,255,.025);
    --hero-count-bdr:   rgba(201,168,76,.1);
    --hero-detail-bg:   rgba(201,168,76,.04);
    --hero-detail-bdr:  rgba(201,168,76,.15);
    --hero-btn2-bdr:    #3E3E46;
    --hero-btn2-txt:    #A1A1AA;

    --badge-bg:         #141416;
    --badge-bdr:        #2E2E34;
    --badge-txt-m:      #71717A;

    --notice-bg:        rgba(255,255,255,.025);
    --notice-bdr:       rgba(201,168,76,.12);
    --notice-txt:       #A1A1AA;
    --notice-txt-s:     #71717A;
}


/* ============================================================
   ☀️ LIGHT THEME
   ============================================================ */

[data-gv-theme="light"] {
    --ribbon-bg:        #FAF8F5;
    --ribbon-bdr:       rgba(201,168,76,.2);
    --ribbon-txt:       #1A1A1A;
    --ribbon-close-hov: rgba(0,0,0,.04);

    --teaser-bg:        #FFFFFF;
    --teaser-bdr:       #E8E2D8;
    --teaser-txt:       #1A1A1A;
    --teaser-txt-s:     #5A5A5A;
    --teaser-txt-m:     #8A8A8A;
    --teaser-chip-bg:   rgba(201,168,76,.06);
    --teaser-chip-bdr:  rgba(201,168,76,.15);
    --teaser-atmo1:     rgba(201,168,76,.06);
    --teaser-atmo2:     rgba(201,168,76,.03);
    --teaser-count-bg:  rgba(201,168,76,.04);
    --teaser-count-bdr: rgba(201,168,76,.15);
    --teaser-btn2-bdr:  #D4CEC4;
    --teaser-btn2-txt:  #5A5A5A;

    --hero-bg:          #FAF8F5;
    --hero-txt:         #1A1A1A;
    --hero-txt-s:       #5A5A5A;
    --hero-txt-m:       #8A8A8A;
    --hero-atmo:        rgba(201,168,76,.06);
    --hero-line:        rgba(201,168,76,.1);
    --hero-count-bg:    rgba(201,168,76,.04);
    --hero-count-bdr:   rgba(201,168,76,.15);
    --hero-detail-bg:   rgba(201,168,76,.05);
    --hero-detail-bdr:  rgba(201,168,76,.15);
    --hero-btn2-bdr:    #D4CEC4;
    --hero-btn2-txt:    #5A5A5A;

    --badge-bg:         #F5F0EA;
    --badge-bdr:        #E8E2D8;
    --badge-txt-m:      #8A8A8A;

    --notice-bg:        rgba(201,168,76,.04);
    --notice-bdr:       rgba(201,168,76,.15);
    --notice-txt:       #5A5A5A;
    --notice-txt-s:     #8A8A8A;
}


/* ============================================================
   COMPONENT 1: ANNOUNCEMENT RIBBON
   ============================================================
   Z-Index-Strategie:
   Der Ribbon nutzt var(--gv-ribbon-z), das aus PHP-Konstante
   GV_RIBBON_ZINDEX gespeist wird (Standard: 10000).
   Falls das Theme-Menü einen höheren Z-Index hat, kann
   GV_RIBBON_ZINDEX in init.php einfach erhöht werden.

   Größen-Strategie:
   Padding und Schriftgrößen skalieren linear mit
   var(--gv-ribbon-scale) (PHP: GV_RIBBON_SCALE).
   0.85 = kompakt  |  1.0 = Standard  |  1.2 = groß
   ============================================================ */

.gv-ribbon {
    position:   fixed;
    top:        0;
    left:       0;
    right:      0;
    z-index:    var(--gv-ribbon-z, 10000);    /* ← PHP-konfigurierbar */
    background: var(--ribbon-bg);
    border-bottom: 1px solid var(--ribbon-bdr);
    transform:  translateY(-100%);
    animation:  gv-ribbonIn .7s .5s var(--ease) forwards;
    overflow:   hidden;
    transition: background .4s var(--ease), border-color .4s var(--ease);
}

/* Goldene Linie am oberen Rand */
.gv-ribbon::before {
    content:    '';
    position:   absolute;
    top:        0;
    left:       0;
    right:      0;
    height:     1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--gold) 20%,
        var(--gold-light) 50%,
        var(--gold) 80%,
        transparent 100%
    );
    opacity: .5;
}

@keyframes gv-ribbonIn { to { transform: translateY(0); } }

.gv-ribbon.gv-ribbon--dismissed {
    animation: gv-ribbonOut .4s var(--ease) forwards;
}
@keyframes gv-ribbonOut { to { transform: translateY(-100%); } }

.gv-ribbon__inner {
    max-width:      1200px;
    margin:         0 auto;
    /* Padding skaliert mit GV_RIBBON_SCALE */
    padding:        calc(.55rem * var(--gv-ribbon-scale, 1))
                    calc(1.5rem * var(--gv-ribbon-scale, 1));
    display:        flex;
    align-items:    center;
    justify-content: center;
    gap:            1.25rem;
}

.gv-ribbon__icon {
    flex-shrink: 0;
    width:       calc(26px * var(--gv-ribbon-scale, 1));
    height:      calc(26px * var(--gv-ribbon-scale, 1));
    border-radius: 50%;
    border:      1px solid rgba(201,168,76,.3);
    display:     flex;
    align-items: center;
    justify-content: center;
    background:  rgba(201,168,76,.08);
}
.gv-ribbon__icon svg {
    width:        calc(13px * var(--gv-ribbon-scale, 1));
    height:       calc(13px * var(--gv-ribbon-scale, 1));
    fill:         none;
    stroke:       var(--gold);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.gv-ribbon__content {
    display:         flex;
    align-items:     center;
    gap:             .65rem;
    flex-wrap:       wrap;
    justify-content: center;
}

.gv-ribbon__label {
    font-family:     var(--fb);
    font-size:       calc(.66rem * var(--gv-ribbon-scale, 1));  /* skalierbar */
    font-weight:     600;
    letter-spacing:  .16em;
    text-transform:  uppercase;
    color:           var(--gold);
}

.gv-ribbon__sep {
    width:      1px;
    height:     14px;
    background: rgba(201,168,76,.2);
    flex-shrink: 0;
}

.gv-ribbon__text {
    font-family:    var(--fd);
    font-size:      calc(.92rem * var(--gv-ribbon-scale, 1));   /* skalierbar */
    font-weight:    400;
    color:          var(--ribbon-txt);
    letter-spacing: .01em;
    transition:     color .4s;
}
.gv-ribbon__text strong { color: var(--gold-light); font-weight: 500; }
[data-gv-theme="light"] .gv-ribbon__text strong { color: var(--gold-dark); }

.gv-ribbon__cta {
    display:        inline-flex;
    align-items:    center;
    gap:            .3rem;
    font-family:    var(--fb);
    font-size:      calc(.68rem * var(--gv-ribbon-scale, 1));   /* skalierbar */
    font-weight:    600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color:          #1A1A1A;
    background:     var(--gold);
    border:         none;
    border-radius:  4px;
    padding:        calc(.3em * var(--gv-ribbon-scale, 1))
                    calc(.9em * var(--gv-ribbon-scale, 1));
    cursor:         pointer;
    text-decoration: none;
    transition:     all .25s var(--ease);
    flex-shrink:    0;
}
.gv-ribbon__cta:hover {
    background: var(--gold-light);
    transform:  translateY(-1px);
}
.gv-ribbon__cta svg {
    width:        10px;
    height:       10px;
    fill:         none;
    stroke:       #1A1A1A;
    stroke-width: 2;
    stroke-linecap: round;
}

.gv-ribbon__close {
    flex-shrink:     0;
    /* Mindest-Touch-Target: 44×44 px (Google / WCAG 2.5.5-Empfehlung).
       Das visuelle Element ist kleiner; der unsichtbare Klickbereich
       wird über padding auf die empfohlene Größe gestreckt. */
    width:           34px;
    height:          34px;
    padding:         0;
    border:          1px solid rgba(201,168,76,.25);   /* sichtbare Kontur */
    background:      rgba(201,168,76,.07);             /* leichte Gold-Tönung */
    color:           var(--ribbon-txt);
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    border-radius:   50%;
    transition:      all .22s var(--ease);
    outline-offset:  2px;
    margin-left:     .25rem;                           /* etwas Luft zum CTA */
}
.gv-ribbon__close:hover {
    background:   rgba(201,168,76,.18);
    border-color: rgba(201,168,76,.55);
    color:        var(--gold-light);
    transform:    scale(1.08);
}
[data-gv-theme="light"] .gv-ribbon__close:hover {
    color: var(--gold-dark);
}
.gv-ribbon__close:active {
    transform: scale(.95);
}
.gv-ribbon__close:focus-visible {
    outline: 2px solid var(--gold);
}
.gv-ribbon__close svg {
    width:        15px;          /* größeres Icon für bessere Erkennbarkeit */
    height:       15px;
    stroke:       currentColor;
    stroke-width: 2;             /* etwas kräftiger als vorher (1.5) */
    fill:         none;
    pointer-events: none;
}

@media (max-width: 680px) {
    .gv-ribbon__inner { gap: .6rem; padding: .45rem .75rem; }
    .gv-ribbon__icon,
    .gv-ribbon__sep  { display: none; }
    .gv-ribbon__label { font-size: calc(.6rem * var(--gv-ribbon-scale, 1)); }
    .gv-ribbon__text  { font-size: calc(.8rem * var(--gv-ribbon-scale, 1)); }
}


/* ============================================================
   COMPONENT 2: EVENT TEASER
   ============================================================ */

.gv-event-teaser {
    position:   relative;
    overflow:   hidden;
    margin:     2rem 0;
    background: var(--teaser-bg);
    border:     1px solid var(--teaser-bdr);
    border-radius: 20px;
    transition: background .4s var(--ease), border-color .4s var(--ease);
    container-type: inline-size;
}

.gv-event-teaser__atmo {
    position:       absolute;
    inset:          0;
    pointer-events: none;
    overflow:       hidden;
}
.gv-event-teaser__atmo::before {
    content:    '';
    position:   absolute;
    top:        -40%;
    right:      -20%;
    width:      70%;
    height:     120%;
    background: radial-gradient(ellipse, var(--teaser-atmo1) 0%, transparent 65%);
    animation:  gv-tDrift 20s ease-in-out infinite alternate;
}
.gv-event-teaser__atmo::after {
    content:    '';
    position:   absolute;
    bottom:     -30%;
    left:       -10%;
    width:      50%;
    height:     80%;
    background: radial-gradient(ellipse, var(--teaser-atmo2) 0%, transparent 55%);
    animation:  gv-tDrift2 25s ease-in-out infinite alternate;
}
@keyframes gv-tDrift  { to { transform: translate(-5%, 8%); } }
@keyframes gv-tDrift2 { to { transform: translate(8%, -5%); } }

.gv-event-teaser::before {
    content:    '';
    position:   absolute;
    top:        0;
    left:       10%;
    right:      10%;
    height:     1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity:    .35;
    z-index:    2;
}

.gv-event-teaser__body {
    position:        relative;
    z-index:         2;
    padding:         3rem 2.5rem;
    display:         grid;
    grid-template-columns: 1fr auto;
    gap:             2.5rem;
    align-items:     center;
}

.gv-event-teaser__tag {
    display:        inline-flex;
    align-items:    center;
    gap:            .5rem;
    font-family:    var(--fb);
    font-size:      .62rem;
    font-weight:    600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color:          var(--gold);
    margin-bottom:  .75rem;
}
.gv-event-teaser__tag::before {
    content:       '';
    width:         6px;
    height:        6px;
    border-radius: 50%;
    background:    var(--gold);
    animation:     gv-ePulse 2.5s ease-in-out infinite;
}
@keyframes gv-ePulse {
    0%, 100% { opacity: .4; transform: scale(.8); }
    50%      { opacity: 1;  transform: scale(1.2); }
}

.gv-event-teaser__title {
    font-family:    var(--fd);
    font-size:      clamp(1.5rem, 2.8vw, 2rem);
    font-weight:    400;
    color:          var(--teaser-txt);
    line-height:    1.2;
    margin-bottom:  .5rem;
    transition:     color .4s;
}
.gv-event-teaser__title em { font-style: italic; color: var(--gold); }

.gv-event-teaser__date {
    font-family:    var(--fd);
    font-size:      1.05rem;
    font-weight:    400;
    color:          var(--gold);
    margin-bottom:  .3rem;
    letter-spacing: .02em;
}
[data-gv-theme="light"] .gv-event-teaser__date { color: var(--gold-dark); }

.gv-event-teaser__meta {
    font-size:     .84rem;
    color:         var(--teaser-txt-m);
    margin-bottom: 1.25rem;
    line-height:   1.6;
    transition:    color .4s;
}

.gv-event-teaser__highlights {
    display:       flex;
    flex-wrap:     wrap;
    gap:           .45rem;
    margin-bottom: 1.5rem;
}
.gv-event-teaser__chip {
    font-size:      .7rem;
    font-weight:    500;
    color:          var(--teaser-txt-s);
    background:     var(--teaser-chip-bg);
    border:         1px solid var(--teaser-chip-bdr);
    border-radius:  100px;
    padding:        .25em .8em;
    letter-spacing: .02em;
    transition:     all .4s;
}

.gv-event-teaser__actions { display: flex; gap: .65rem; flex-wrap: wrap; }

.gv-event-teaser__btn {
    display:        inline-flex;
    align-items:    center;
    gap:            .4rem;
    font-family:    var(--fb);
    font-size:      .8rem;
    font-weight:    600;
    border-radius:  6px;
    padding:        .65em 1.4em;
    cursor:         pointer;
    text-decoration: none;
    transition:     all .25s var(--ease);
    letter-spacing: .02em;
}
.gv-event-teaser__btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.gv-event-teaser__btn--primary {
    background: var(--gold);
    color:      #1A1A1A;
    border:     none;
}
.gv-event-teaser__btn--primary:hover {
    background:  var(--gold-light);
    transform:   translateY(-2px);
    box-shadow:  0 8px 28px rgba(201,168,76,.25);
}
.gv-event-teaser__btn--secondary {
    background: transparent;
    color:      var(--teaser-btn2-txt);
    border:     1px solid var(--teaser-btn2-bdr);
    transition: all .25s;
}
.gv-event-teaser__btn--secondary:hover {
    border-color: var(--gold);
    color:        var(--gold);
}
.gv-event-teaser__btn svg {
    width:        13px;
    height:       13px;
    stroke:       currentColor;
    fill:         none;
    stroke-width: 1.5;
}

/* ── Countdown (wird von Teaser & Hero genutzt) ── */

.gv-event-teaser__countdown { text-align: center; flex-shrink: 0; }
.gv-event-teaser__countdown-label {
    font-family:    var(--fb);
    font-size:      .58rem;
    font-weight:    600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color:          var(--teaser-txt-m);
    margin-bottom:  .6rem;
    transition:     color .4s;
}

.gv-countdown { display: flex; gap: .5rem; }
.gv-countdown__unit {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    min-width:      54px;
}
.gv-countdown__num {
    font-family:    var(--fd);
    font-size:      2rem;
    font-weight:    300;
    color:          var(--teaser-txt);
    line-height:    1;
    padding:        .4rem .5rem;
    background:     var(--teaser-count-bg);
    border:         1px solid var(--teaser-count-bdr);
    border-radius:  10px;
    min-width:      54px;
    text-align:     center;
    transition:     all .4s;
}
.gv-countdown__txt {
    font-family:    var(--fb);
    font-size:      .54rem;
    font-weight:    600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color:          var(--teaser-txt-m);
    margin-top:     .35rem;
    transition:     color .4s;
}
.gv-countdown__sep {
    font-family:    var(--fd);
    font-size:      1.6rem;
    font-weight:    300;
    color:          rgba(201,168,76,.35);
    align-self:     flex-start;
    padding-top:    .4rem;
}

@container (max-width: 720px) {
    .gv-event-teaser__body {
        grid-template-columns: 1fr;
        gap:     1.75rem;
        padding: 2rem 1.25rem;
    }
    .gv-event-teaser__countdown { order: -1; }
    .gv-countdown { justify-content: center; }
}
@media (max-width: 480px) {
    .gv-countdown__num  { font-size: 1.5rem; min-width: 46px; }
    .gv-countdown__unit { min-width: 46px; }
}


/* ============================================================
   COMPONENT 3: AUCTION HERO
   ============================================================ */

.gv-auction-hero {
    position:        relative;
    overflow:        hidden;
    min-height:      82vh;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      var(--hero-bg);
    transition:      background .5s var(--ease);
}

.gv-auction-hero__atmo { position: absolute; inset: 0; pointer-events: none; }
.gv-auction-hero__atmo::before {
    content:    '';
    position:   absolute;
    top:        -30%;
    left:       50%;
    transform:  translateX(-50%);
    width:      120%;
    height:     80%;
    background: radial-gradient(ellipse at center, var(--hero-atmo) 0%, transparent 55%);
    animation:  gv-hGlow 15s ease-in-out infinite alternate;
}
@keyframes gv-hGlow {
    0%   { opacity: .7; transform: translateX(-50%) scale(1); }
    100% { opacity: 1;  transform: translateX(-50%) scale(1.08); }
}

.gv-auction-hero__grain {
    position:        absolute;
    inset:           0;
    pointer-events:  none;
    opacity:         .012;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-gv-theme="light"] .gv-auction-hero__grain { opacity: .025; }

.gv-auction-hero__lines { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.gv-auction-hero__lines::before {
    content:    '';
    position:   absolute;
    top:        50%;
    left:       0;
    right:      0;
    height:     1px;
    background: linear-gradient(90deg, transparent 0%, var(--hero-line) 25%, rgba(201,168,76,.15) 50%, var(--hero-line) 75%, transparent 100%);
}
.gv-auction-hero__lines::after {
    content:    '';
    position:   absolute;
    left:       50%;
    top:        0;
    bottom:     0;
    width:      1px;
    background: linear-gradient(180deg, transparent 0%, var(--hero-line) 30%, rgba(201,168,76,.12) 50%, var(--hero-line) 70%, transparent 100%);
}

.gv-auction-hero__content {
    position:   relative;
    z-index:    2;
    text-align: center;
    padding:    4rem 2rem;
    max-width:  900px;
}

.gv-auction-hero__overline {
    display:        inline-flex;
    align-items:    center;
    gap:            .6rem;
    font-family:    var(--fb);
    font-size:      .65rem;
    font-weight:    600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color:          var(--gold);
    margin-bottom:  1.25rem;
    opacity:        0;
    animation:      gv-hFade .8s .3s var(--ease) forwards;
}
.gv-auction-hero__overline::before,
.gv-auction-hero__overline::after {
    content: '';
    width:   28px;
    height:  1px;
}
.gv-auction-hero__overline::before { background: linear-gradient(90deg, transparent, var(--gold)); }
.gv-auction-hero__overline::after  { background: linear-gradient(90deg, var(--gold), transparent); }

.gv-auction-hero__h1 {
    font-family:    var(--fd);
    font-size:      clamp(2.2rem, 5vw, 3.6rem);
    font-weight:    300;
    color:          var(--hero-txt);
    line-height:    1.1;
    margin-bottom:  .4rem;
    opacity:        0;
    animation:      gv-hFade .8s .45s var(--ease) forwards;
    transition:     color .4s;
}
.gv-auction-hero__h1 em { font-style: italic; color: var(--gold); }

.gv-auction-hero__edition {
    font-family:    var(--fb);
    font-size:      .72rem;
    font-weight:    500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color:          var(--hero-txt-m);
    margin-bottom:  2.25rem;
    opacity:        0;
    animation:      gv-hFade .8s .55s var(--ease) forwards;
    transition:     color .4s;
}

@keyframes gv-hFade {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

/* ── Großer Countdown (Hero) ── */

.gv-hero-countdown {
    display:         flex;
    justify-content: center;
    gap:             .85rem;
    margin-bottom:   2.5rem;
    opacity:         0;
    animation:       gv-hFade .8s .65s var(--ease) forwards;
}
.gv-hero-countdown__unit {
    display:        flex;
    flex-direction: column;
    align-items:    center;
}
.gv-hero-countdown__num {
    font-family:    var(--fd);
    font-size:      clamp(2.6rem, 5.5vw, 4rem);
    font-weight:    300;
    color:          var(--hero-txt);
    line-height:    1;
    min-width:      85px;
    padding:        .45rem .7rem .5rem;
    background:     var(--hero-count-bg);
    border:         1px solid var(--hero-count-bdr);
    border-radius:  14px;
    text-align:     center;
    transition:     all .4s;
    position:       relative;
}
.gv-hero-countdown__num::before {
    content:    '';
    position:   absolute;
    top:        0;
    left:       20%;
    right:      20%;
    height:     1px;
    background: linear-gradient(90deg, transparent, rgba(201,168,76,.15), transparent);
}
.gv-hero-countdown__txt {
    font-family:    var(--fb);
    font-size:      .58rem;
    font-weight:    600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color:          var(--hero-txt-m);
    margin-top:     .45rem;
    transition:     color .4s;
}
.gv-hero-countdown__sep {
    font-family:    var(--fd);
    font-size:      clamp(1.8rem, 3.5vw, 2.8rem);
    font-weight:    300;
    color:          rgba(201,168,76,.3);
    align-self:     flex-start;
    padding-top:    .55rem;
    animation:      gv-sepP 2s ease-in-out infinite;
}
@keyframes gv-sepP { 0%, 100% { opacity: .3; } 50% { opacity: .7; } }

/* ── Event-Details ── */

.gv-auction-hero__details {
    display:         flex;
    justify-content: center;
    gap:             2.25rem;
    margin-bottom:   2.25rem;
    opacity:         0;
    animation:       gv-hFade .8s .8s var(--ease) forwards;
}
.gv-hero-detail { text-align: center; }
.gv-hero-detail__icon {
    width:           38px;
    height:          38px;
    border-radius:   50%;
    border:          1px solid var(--hero-detail-bdr);
    background:      var(--hero-detail-bg);
    display:         flex;
    align-items:     center;
    justify-content: center;
    margin:          0 auto .4rem;
    transition:      all .4s;
}
.gv-hero-detail__icon svg {
    width:        17px;
    height:       17px;
    stroke:       var(--gold);
    fill:         none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.gv-hero-detail__label {
    font-size:      .58rem;
    font-weight:    600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color:          var(--hero-txt-m);
    margin-bottom:  .15rem;
    transition:     color .4s;
}
.gv-hero-detail__value {
    font-family: var(--fd);
    font-size:   .9rem;
    color:       var(--hero-txt-s);
    transition:  color .4s;
}

/* ── CTAs ── */

.gv-auction-hero__actions {
    display:         flex;
    justify-content: center;
    gap:             .85rem;
    flex-wrap:       wrap;
    opacity:         0;
    animation:       gv-hFade .8s .95s var(--ease) forwards;
}
.gv-hero-btn {
    display:        inline-flex;
    align-items:    center;
    gap:            .45rem;
    font-family:    var(--fb);
    font-size:      .82rem;
    font-weight:    600;
    border-radius:  7px;
    padding:        .8em 1.8em;
    cursor:         pointer;
    text-decoration: none;
    transition:     all .3s var(--ease);
    letter-spacing: .02em;
}
.gv-hero-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.gv-hero-btn--gold {
    background: var(--gold);
    color:      #1A1A1A;
    border:     none;
}
.gv-hero-btn--gold:hover {
    background: var(--gold-light);
    transform:  translateY(-2px);
    box-shadow: 0 10px 35px rgba(201,168,76,.3);
}
.gv-hero-btn--outline {
    background: transparent;
    color:      var(--hero-btn2-txt);
    border:     1.5px solid var(--hero-btn2-bdr);
    transition: all .25s;
}
.gv-hero-btn--outline:hover {
    border-color: var(--gold);
    color:        var(--gold);
}
.gv-hero-btn svg {
    width:        15px;
    height:       15px;
    stroke:       currentColor;
    fill:         none;
    stroke-width: 1.5;
}

/* ── Scroll-Hint ── */

.gv-auction-hero__scroll {
    position:       absolute;
    bottom:         1.75rem;
    left:           50%;
    transform:      translateX(-50%);
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            .4rem;
    color:          var(--hero-txt-m);
    font-size:      .58rem;
    font-weight:    500;
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity:        0;
    animation:      gv-hFade .8s 1.2s var(--ease) forwards;
}
.gv-auction-hero__scroll-line {
    width:      1px;
    height:     28px;
    background: linear-gradient(180deg, rgba(201,168,76,.4), transparent);
    animation:  gv-scrollP 2s ease-in-out infinite;
}
@keyframes gv-scrollP {
    0%, 100% { opacity: .3; transform: scaleY(.7); }
    50%      { opacity: .7; transform: scaleY(1); }
}

@media (max-width: 680px) {
    .gv-auction-hero          { min-height: 88vh; }
    .gv-hero-countdown__num   { min-width: 60px; }
    .gv-hero-countdown        { gap: .5rem; }
    .gv-auction-hero__details { gap: 1.25rem; flex-wrap: wrap; }
    .gv-auction-hero__content { padding: 3rem 1.25rem; }
}
@media (max-width: 420px) {
    .gv-hero-countdown__num { min-width: 52px; }
}


/* ============================================================
   BADGES BAR
   ============================================================ */

.gv-auction-badges {
    display:         flex;
    justify-content: center;
    gap:             2rem;
    padding:         2.25rem 1.5rem;
    background:      var(--badge-bg);
    border-top:      1px solid var(--badge-bdr);
    transition:      all .4s;
}
.gv-auction-badge { text-align: center; }
.gv-auction-badge__num {
    font-family:    var(--fd);
    font-size:      1.6rem;
    font-weight:    400;
    color:          var(--gold);
    line-height:    1;
    margin-bottom:  .2rem;
}
.gv-auction-badge__text {
    font-size:      .64rem;
    font-weight:    500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color:          var(--badge-txt-m);
    transition:     color .4s;
}
@media (max-width: 600px) {
    .gv-auction-badges { gap: 1rem; flex-wrap: wrap; }
}


/* ============================================================
   "KEIN TERMIN" NOTICE (Hero-Fallback)
   ============================================================ */

.gv-auction-notice {
    text-align:    center;
    padding:       3rem 2rem;
    max-width:     560px;
    margin:        0 auto;
    opacity:       0;
    animation:     gv-hFade .8s .5s var(--ease) forwards;
}
.gv-auction-notice__icon {
    width:           56px;
    height:          56px;
    border-radius:   50%;
    border:          1px solid var(--notice-bdr);
    background:      var(--notice-bg);
    display:         flex;
    align-items:     center;
    justify-content: center;
    margin:          0 auto 1.25rem;
}
.gv-auction-notice__icon svg {
    width:        24px;
    height:       24px;
    stroke:       var(--gold);
    fill:         none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.gv-auction-notice__title {
    font-family:    var(--fd);
    font-size:      clamp(1.3rem, 3vw, 1.8rem);
    font-weight:    400;
    color:          var(--hero-txt);
    margin-bottom:  .6rem;
    transition:     color .4s;
}
.gv-auction-notice__title em { font-style: italic; color: var(--gold); }
.gv-auction-notice__text {
    font-size:     .9rem;
    color:         var(--notice-txt);
    line-height:   1.7;
    margin-bottom: 1.5rem;
    transition:    color .4s;
}
.gv-auction-notice__hint {
    font-size:      .72rem;
    font-weight:    500;
    letter-spacing: .08em;
    color:          var(--notice-txt-s);
    transition:     color .4s;
}
.gv-auction-notice__hint a { color: var(--gold); text-decoration: none; }
.gv-auction-notice__hint a:hover { text-decoration: underline; }