/**
 * style.css — tobidu/hero
 * Nutzt Design-Tokens aus assets/css/tokens.css (globale Custom Properties).
 * Meilenstein "Erlebniswelt, Animationen + visuelle Tiefe" (Bericht Nr. 10):
 * mehrschichtiger Hero mit organischer Bildmaske (clip-path), Blur-Glow,
 * überlappenden Deko-Ebenen, Info-Chip und klarer CTA-Hierarchie.
 */
.tobidu-hero {
    padding: var(--space-10) 0;
    /* Bericht Nr. 48 — Hintergrund 1:1 aus der Figma-Hero()-Komponente
       übernommen: heller Creme-zu-Mint-Verlauf statt des bisherigen
       bläulicheren Verlaufs, plus feines Punktraster wie im Original. */
    background: linear-gradient(160deg, #fff5e6 0%, #fff9f0 40%, #e8fff8 100%);
    position: relative;
    overflow: hidden;
}

.tobidu-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255, 107, 53, 0.10) 1.5px, transparent 1.5px);
    background-size: 32px 32px;
    pointer-events: none;
    z-index: 0;
}

/* Dezentes, sehr langsam schwebendes Deko-Element (rein CSS/kein JS). */
.tobidu-hero::before {
    content: "";
    position: absolute;
    top: -80px;
    right: -80px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, var(--color-accent) 0%, transparent 70%);
    opacity: 0.25;
    pointer-events: none;
    animation: tobidu-blob-float 14s ease-in-out infinite;
}

/* Blur-Hintergrundkreis hinter dem Hero-Bild — zusätzliche Tiefenebene,
   liegt zwischen Section-Hintergrund und Bildcontainer (z-index 0). */
.tobidu-hero__glow {
    position: absolute;
    top: 50%;
    right: 4%;
    width: min(560px, 55vw);
    height: min(560px, 55vw);
    transform: translateY(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, var(--color-bg-sky-deep, var(--color-primary-light)) 0%, transparent 72%);
    filter: blur(6px);
    opacity: 0.8;
    pointer-events: none;
    z-index: 0;
}

@keyframes tobidu-blob-float {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(-20px, 25px) scale(1.08);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tobidu-hero::before {
        animation: none;
    }
}

.tobidu-hero__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
    align-items: center;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-5);
    position: relative;
    z-index: 1;
}

/* Bericht Nr. 48 — Ankündigungs-Badge (z. B. "Jetzt neu: Vollständig
   klimatisiert!") 1:1 aus Figma Hero(): Teal-Verlauf-Pille statt des
   bisherigen separaten Voller-Breite-Streifens über dem Hero. */
.tobidu-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-5);
    background: linear-gradient(135deg, #00c4a0, #00a890);
    color: #fff;
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.8rem;
    box-shadow: 0 4px 20px rgba(0, 196, 160, 0.35);
    animation: tobidu-bounce-in 0.8s 0.3s ease both;
}

@keyframes tobidu-bounce-in {
    0% { transform: scale(0.85); opacity: 0; }
    60% { transform: scale(1.04); opacity: 1; }
    100% { transform: scale(1); }
}

/* ---------- Info-Chip "Heute geöffnet" ---------- */
/* Bericht Nr. 48 — Farbgebung 1:1 an Figma angeglichen (Teal statt
   neutralem Weiß/Grau), plus kleiner funkelnder Stern wie im Referenz-Video. */
.tobidu-hero__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-4);
    padding: var(--space-2) var(--space-4);
    border-radius: 999px;
    background: rgba(0, 196, 160, 0.1);
    border: 2px solid rgba(0, 196, 160, 0.3);
    box-shadow: none;
    font-size: var(--fs-sm);
    font-weight: 800;
    color: #00a890;
    position: relative;
}

.tobidu-hero__chip--closed {
    background: rgba(200, 200, 200, 0.2);
    border-color: #ddd;
    color: var(--color-text-muted);
}

.tobidu-hero__chip-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-success);
    flex: none;
    box-shadow: 0 0 0 3px rgba(0, 196, 160, 0.2);
    animation: tobidu-pulse-ring 1.5s infinite;
}

.tobidu-hero__chip--closed .tobidu-hero__chip-dot {
    background: var(--color-danger);
    box-shadow: none;
    animation: none;
}

@keyframes tobidu-pulse-ring {
    0% { box-shadow: 0 0 0 3px rgba(0, 196, 160, 0.2); }
    70% { box-shadow: 0 0 0 8px rgba(0, 196, 160, 0); }
    100% { box-shadow: 0 0 0 3px rgba(0, 196, 160, 0); }
}

.tobidu-hero__chip-time {
    color: inherit;
    font-weight: 700;
}

.tobidu-hero__chip-star {
    position: absolute;
    top: -10px;
    right: -6px;
    font-size: 0.9rem;
    animation: tobidu-spin-slow 4s ease-in-out infinite;
}

.tobidu-hero__headline {
    font-family: var(--font-heading);
    font-size: var(--fs-h1);
    line-height: 1.05;
    font-weight: var(--fw-heading);
    letter-spacing: -0.01em;
    color: var(--color-text);
    margin: 0 0 var(--space-4);
}

.tobidu-hero__subheadline {
    font-size: var(--fs-lg);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-6);
}

.tobidu-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
}

/* Figma-Referenz: dominanter Ticket-CTA ist eine Orange-Verlauf-Pille mit
   weißem Text (nicht die Akzent-Gelb-Fläche) — an das globale .btn--primary
   angeglichen (Rollout-Durchgang 2). */
.tobidu-hero__cta,
.tobidu-hero__cta--preview {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    justify-content: center;
    min-height: 48px;
    padding: var(--space-3) var(--space-6);
    background: linear-gradient(135deg, var(--color-primary) 0%, #ff9a55 100%);
    color: #ffffff;
    font-family: var(--font-heading);
    font-weight: var(--fw-heading);
    text-decoration: none;
    border-radius: var(--radius-full);
    box-shadow: 0 8px 28px rgba(255, 107, 53, 0.4);
    position: relative;
    overflow: hidden;
    transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.tobidu-hero__cta::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.4) 48%, transparent 66%);
    background-size: 200% 100%;
    background-position: 200% 0;
    opacity: 0;
    pointer-events: none;
}

.tobidu-hero__cta:hover::after,
.tobidu-hero__cta:focus-visible::after {
    opacity: 1;
    animation: tobidu-shimmer-sweep 1.1s ease forwards;
}

.tobidu-hero__cta:hover,
.tobidu-hero__cta:focus-visible {
    /* Bericht Nr. 48 — echter Lesbarkeits-Bug gefunden: die globale
       `a:hover { color: var(--color-primary-dark) }`-Regel (base.css) hat
       hier unbemerkt die weiße Button-Textfarbe auf dunkelorange
       umgeschaltet → Text auf dem orangen Verlauf praktisch unsichtbar.
       Farbe hier explizit wieder auf Weiß gesetzt. */
    color: #ffffff;
    background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 12px 36px rgba(255, 107, 53, 0.48);
}

.tobidu-hero__cta:focus-visible {
    outline: 2px solid var(--color-primary-dark);
    outline-offset: 2px;
}

.tobidu-hero__cta-icon {
    transition: transform var(--transition-fast);
}

.tobidu-hero__cta:hover .tobidu-hero__cta-icon {
    transform: translateX(3px);
}

/* Bericht Nr. 48 — Sekundär-CTA 1:1 aus Figma: echter weißer Pill-Button
   mit Rahmen statt reinem Textlink (Soll-Ist-Fund beim Video-Abgleich). */
.tobidu-hero__cta-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 48px;
    padding: var(--space-3) var(--space-6);
    background: #fff;
    color: #1a1200;
    font-family: var(--font-heading);
    font-weight: 800;
    text-decoration: none;
    border: 2px solid rgba(26, 18, 0, 0.12);
    border-radius: var(--radius-full);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07);
    transition: border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.tobidu-hero__cta-secondary:hover,
.tobidu-hero__cta-secondary:focus-visible {
    border-color: var(--color-primary);
    color: var(--color-primary);
    transform: translateY(-2px);
}

/* ---------- Stat-Reihe (Figma-Referenz, Bericht Nr. 36) ---------- */
.tobidu-hero__stats {
    display: flex;
    gap: var(--space-6);
    flex-wrap: wrap;
    margin-top: var(--space-8);
}

.tobidu-hero__stat {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.tobidu-hero__stat-icon {
    width: 44px;
    height: 44px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.375rem;
    background: var(--color-bg);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.tobidu-hero__stat-value {
    font-family: var(--font-heading);
    font-weight: var(--fw-heading);
    font-size: 1.375rem;
    line-height: 1.1;
    color: var(--color-text);
}

.tobidu-hero__stat-label {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    margin-top: 1px;
}

/* ---------- Bildbereich: organische Maske, Layering, Tiefenwirkung ---------- */
.tobidu-hero__media {
    display: flex;
    position: relative;
    z-index: 1;
}

.tobidu-hero__media-frame {
    position: relative;
    width: 100%;
}

.tobidu-hero__image {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    /* Bildausschnitt aufs obere Bilddrittel (Spielgeruest-Silhouette) statt
       Bildmitte, damit der markanteste Teil des Fotos in der Maske sichtbar
       bleibt. */
    object-position: center 30%;
    /* Organische Maske statt Rechteck/klassischem border-radius-Blob. */
    clip-path: path('M0,120 C0,40 60,0 160,0 L320,0 C400,0 440,50 440,120 L440,260 C440,340 380,380 300,380 L100,380 C30,380 0,320 0,240 Z');
    box-shadow: var(--shadow-lg, var(--shadow-md));
    transition: clip-path var(--transition-base);
}

/* Maskottchen-Overlay: schwebt vor dem Hero-Bild (unten links, überlappend),
   verstärkt Wiedererkennung/Tiefenwirkung analog zur Live-Seite. */
.tobidu-hero__mascot {
    position: absolute;
    z-index: 3;
    bottom: -28px;
    left: -18px;
    width: clamp(110px, 20vw, 170px);
    height: auto;
    filter: drop-shadow(0 8px 18px rgba(26, 26, 46, 0.22));
    pointer-events: none;
}

@media (max-width: 767px) {
    .tobidu-hero__mascot {
        width: 92px;
        bottom: -14px;
        left: -8px;
    }
}

/* Zweite Bildebene als Rahmen-Akzent hinter dem Bild — verstärkt die
   Tiefenwirkung (leicht versetzt, gedeckte Akzentfarbe, niedrigerer z-index). */
.tobidu-hero__media-frame::before {
    content: "";
    position: absolute;
    inset: 14px -14px -14px 14px;
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--deco-pink, var(--color-accent-fun)) 100%);
    opacity: 0.35;
    clip-path: path('M0,120 C0,40 60,0 160,0 L320,0 C400,0 440,50 440,120 L440,260 C440,340 380,380 300,380 L100,380 C30,380 0,320 0,240 Z');
    z-index: -1;
}

/* Bericht Nr. 48 — "VDH-zertifiziert"-Badge + funkelnder Sparkle 1:1 aus
   Figma Hero() ergänzt (unser echtes Bild bleibt, nur die beiden
   schwebenden Deko-Elemente daneben/darüber sind neu). */
.tobidu-hero__vdh-badge {
    position: absolute;
    top: 16px;
    left: 0;
    z-index: 3;
    background: #ffd60a;
    color: #1a1200;
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 0.8rem;
    padding: 0.6rem 0.9rem;
    border-radius: var(--radius-md);
    box-shadow: 0 8px 28px rgba(255, 214, 10, 0.5);
    pointer-events: none;
}

.tobidu-hero__sparkle {
    position: absolute;
    top: 32%;
    right: -14px;
    z-index: 3;
    font-size: 2.1rem;
    pointer-events: none;
    animation: tobidu-spin-slow 8s linear infinite;
}

@media (max-width: 767px) {
    .tobidu-hero__vdh-badge {
        font-size: 0.7rem;
        padding: 0.45rem 0.7rem;
        top: 10px;
    }

    .tobidu-hero__sparkle {
        font-size: 1.5rem;
        right: -6px;
    }
}

/* Deko-Shapes, die das Hero-Bild bewusst überlappen (hoher z-index,
   oberhalb des Bildes) — sorgen für den "schwebt davor"-Tiefeneffekt. */
.tobidu-hero__overlap-deco {
    position: absolute;
    z-index: 2;
    opacity: 0.9;
    pointer-events: none;
}

.tobidu-hero__overlap-deco--1 {
    width: 46px;
    height: 46px;
    top: 6%;
    left: 42%;
}

.tobidu-hero__overlap-deco--2 {
    width: 34px;
    height: 34px;
    bottom: 10%;
    left: 30%;
}

@media (max-width: 767px) {
    .tobidu-hero__overlap-deco {
        display: none;
    }

    .tobidu-hero__glow {
        opacity: 0.5;
        width: 70vw;
        height: 70vw;
        right: -10%;
    }

    .tobidu-hero__media-frame::before {
        inset: 8px -8px -8px 8px;
    }
}

@media (min-width: 768px) {
    .tobidu-hero__inner {
        grid-template-columns: 1.05fr 0.95fr;
    }
}