/**
 * components.css — Buttons, CTA, Navigation, Cards, Mobile-Menü
 */

/* Buttons / CTA */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-full);
    font-family: var(--font-heading);
    font-weight: var(--fw-heading);
    text-decoration: none;
    border: 2px solid transparent;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.btn:hover {
    transform: translateY(-2px) scale(1.02);
}

.btn--primary {
    background: linear-gradient(135deg, var(--color-primary), #ff9a55);
    color: #ffffff;
    position: relative;
    z-index: 0;
}

.btn--primary::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.35) 48%, transparent 66%);
    background-size: 200% 100%;
    background-position: 200% 0;
    opacity: 0;
    pointer-events: none;
}

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

/* ---------- Regenbogen-Glow (Figma-Referenz .btn-wow, Bericht Nr. 41) ----------
   Rotierender, weich geblurrter Farbring hinter dem primären CTA-Button.
   Liegt per z-index:-1 IM Stacking-Context des Buttons (position:relative +
   z-index:0 oben) hinter dessen eigenem Hintergrund — dadurch bleibt Text/
   Buttonfläche immer voll deckend und lesbar, unabhängig vom Glow.
   Reines CSS (conic-gradient + rotate-Keyframe), keine JS-Kosten. Standard-
   mäßig pausiert (`animation-play-state:paused`) und `opacity:0`, läuft nur
   auf echtem Hover (`@media (hover:hover)`, damit Touch-Geräte keinen
   "hängenden" Hover-Zustand bekommen) sowie bei Tastatur-Fokus. */
.btn--primary::before {
    content: "";
    position: absolute;
    inset: -5px;
    z-index: -1;
    border-radius: inherit;
    /* Bericht Nr. 48 — auf Nutzerwunsch von rotierendem Conic-Gradient auf
       eine links-rechts-links oszillierende Regenbogen-Bewegung
       umgestellt (wirkte als volle Rotation unruhig/unschön). Lineares
       Band, doppelt so breit wie der Button, wandert per
       background-position hin und her. */
    background: linear-gradient(90deg, #ff6b35, #ffd60a, #00c4a0, #7e57c2, #ff3d81, #ff6b35);
    background-size: 250% 100%;
    background-position: 0% 50%;
    filter: blur(11px);
    opacity: 0;
    transition: opacity var(--transition-fast);
    animation: tobidu-btn-glow-sweep 3.2s ease-in-out infinite;
    animation-play-state: paused;
    pointer-events: none;
}

@media (hover: hover) {
    .btn--primary:hover::before {
        opacity: 0.85;
        animation-play-state: running;
    }
}

.btn--primary:focus-visible::before {
    opacity: 0.85;
    animation-play-state: running;
}

@keyframes tobidu-btn-glow-sweep {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .btn--primary::before {
        animation: none;
        opacity: 0;
    }

    .btn--primary:hover::before,
    .btn--primary:focus-visible::before {
        opacity: 0.6;
    }
}

.btn--primary:hover {
    background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
    color: #ffffff;
}

.btn--secondary {
    background: transparent;
    border-color: currentColor;
    color: var(--color-primary);
}

.btn--secondary:hover {
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
}

/* Primäre Navigation — EIN gemeinsames Markup (ein wp_nav_menu()-Aufruf,
   ein <nav id="primary-navigation">) für Desktop UND Mobile. Das responsive
   Verhalten wird ausschließlich über CSS (Media Queries) sowie die
   bestehende JS-Toggle-Klasse ".is-open" (main.js, initMobileMenu())
   gesteuert — kein doppeltes Markup mehr (siehe Bericht Nr. 16).
   Mobile (< 768px): Nav ist standardmäßig ausgeblendet, wird über den
   Toggle-Button als volle Breite unterhalb der Header-Zeile eingeblendet
   (order/flex-basis-Trick auf .site-header__inner, siehe layout.css).
   Desktop (>= 768px): Nav ist immer sichtbar, sitzt inline zwischen Logo
   und (ausgeblendetem) Toggle-Button, Menüpunkte horizontal. */
.main-nav {
    display: none;
    order: 3;
    flex-basis: 100%;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg);
}

.main-nav.is-open {
    display: block;
}

.main-nav ul {
    list-style: none;
    margin: 0;
    padding: var(--space-4);
}

.main-nav li + li {
    border-top: 1px solid var(--color-border);
}

.main-nav a {
    display: block;
    text-decoration: none;
    font-weight: 600;
    color: var(--color-text);
    padding: var(--space-3) 0;
}

.main-nav a:hover,
.main-nav a:focus-visible {
    color: var(--color-primary);
}

/* Bericht Nr. 47 — Desktop-Nav-Hover 1:1 an die Live-Seite angeglichen:
   Pill-Hintergrund statt reinem Farbwechsel (Nutzervorgabe: #FFC85B). */
@media (min-width: 768px) {
    .main-nav a:hover,
    .main-nav a:focus-visible {
        background: #ffc85b;
        border-radius: var(--radius-md, 10px);
    }
}

@media (min-width: 768px) {
    .main-nav {
        display: block;
        order: 2;
        flex-basis: auto;
        border-top: none;
        background: transparent;
    }

    .main-nav ul {
        display: flex;
        align-items: center;
        gap: var(--space-5);
        padding: 0;
    }

    .main-nav li + li {
        border-top: none;
    }

    .main-nav a {
        padding: var(--space-2) var(--space-3);
        border-radius: var(--radius-md, 10px);
        transition: background var(--transition-fast);
    }
}

/* Untermenüs (Desktop: Dropdown per Hover/Focus, z. B. "Das TobiDu" mit
   Speisekarte/FAQ/Kontakt & Anfahrt, siehe URL_MIGRATIONSPLAN.md). Nutzt
   die von wp_nav_menu() bei depth=2 automatisch erzeugte
   ul.sub-menu-Struktur, kein zusätzliches Markup nötig.
   Mobile: Untermenü direkt eingerückt sichtbar (kein zweiter Toggle nötig). */
.main-nav .sub-menu {
    list-style: none;
    margin: 0;
    padding: 0 0 0 var(--space-4);
}

.main-nav .sub-menu a {
    font-weight: 500;
    font-size: 0.95em;
}

@media (min-width: 768px) {
    .main-nav li {
        position: relative;
    }

    .main-nav .sub-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 220px;
        margin: 0;
        padding: var(--space-2) 0;
        background: var(--color-bg);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-md, 0 8px 24px rgba(0, 0, 0, 0.12));
        z-index: 20;
    }

    .main-nav li:hover > .sub-menu,
    .main-nav li.submenu-open > .sub-menu,
    .main-nav li:focus-within > .sub-menu {
        display: block;
    }

    .main-nav .sub-menu li {
        width: 100%;
        border-top: none;
    }

    .main-nav .sub-menu a {
        display: block;
        padding: var(--space-2) var(--space-4);
        white-space: nowrap;
    }
}

/* Online-Ticket-CTA im Menü: als Redakteur über die WordPress-Menü-Item-
   CSS-Klasse "tobidu-nav-cta" (Backend: Menüpunkt bearbeiten -> CSS-Klassen)
   vergeben, siehe URL_MIGRATIONSPLAN.md Navigation-Entwurf. Kein separater
   Header-Button nötig — robuster, da über das normale Menü pflegbar. */
.main-nav li.tobidu-nav-cta a {
    background: var(--color-primary);
    color: #fff;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full, 999px);
}

.main-nav li.tobidu-nav-cta a:hover,
.main-nav li.tobidu-nav-cta a:focus-visible {
    background: var(--color-primary-dark, var(--color-primary));
    color: #fff;
}

/* Mobile-Menü-Toggle */
.menu-toggle {
    order: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: transparent;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.menu-toggle__bar {
    position: relative;
    width: 22px;
    height: 2px;
    background: var(--color-text);
}

.menu-toggle__bar::before,
.menu-toggle__bar::after {
    content: "";
    position: absolute;
    left: 0;
    width: 22px;
    height: 2px;
    background: var(--color-text);
    transition: transform var(--transition-fast);
}

.menu-toggle__bar::before { top: -7px; }
.menu-toggle__bar::after { top: 7px; }

@media (min-width: 768px) {
    .menu-toggle {
        display: none;
    }
}

/* Cards — Figma-Referenz: große Radien, schwebender Schatten, spürbarer
   Hover-Lift statt dezenter Border (Rollout-Durchgang 2). */
.card {
    background: var(--color-bg);
    border: none;
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-6px);
}

.card__icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    margin-bottom: var(--space-4);
    font-size: 1.5rem;
}

/* Hero */
.hero {
    padding-block: var(--space-10) var(--space-12);
    background: linear-gradient(180deg, var(--color-bg-soft) 0%, var(--color-bg) 100%);
}

.hero__inner {
    display: grid;
    gap: var(--space-8);
    align-items: center;
}

.hero__content {
    max-width: 640px;
}

.hero__eyebrow {
    display: inline-block;
    color: var(--color-primary-dark);
    background: var(--color-primary-light);
    padding: var(--space-1) var(--space-3);
    border-radius: 999px;
    font-weight: 700;
    font-size: var(--fs-sm);
    margin-bottom: var(--space-4);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

/* Scroll-Reveal (per IntersectionObserver in main.js gesteuert).
   WICHTIG (Reveal-Robustheit): das opacity:0/transform-Ausgangsstyling gilt
   NUR wenn JS aktiv ist und früh (siehe header.php <head>-Inline-Script)
   die Klasse .js-reveal-ready auf <html> gesetzt hat. Ohne JS (oder falls
   JS blockiert/verzögert ist) bleibt .reveal-Content normal sichtbar —
   kein "No-JS = unsichtbar"-Risiko. */
html.js-reveal-ready .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--transition-base), transform var(--transition-base);
    transition-delay: calc(var(--stagger-index, 0) * 70ms);
}

html.js-reveal-ready .reveal.is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    html.js-reveal-ready .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Vertrauen/Bewertungen — Platzhalter-Testimonials */
.tobidu-trust__features {
    list-style: none;
    margin: var(--space-6) 0 var(--space-10);
    padding: 0;
    display: grid;
    gap: var(--space-5);
}

.tobidu-trust__features .tobidu-icon-card__icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: var(--color-primary-light);
    font-size: 1.75rem;
    margin-bottom: var(--space-3);
}

@media (min-width: 640px) {
    .tobidu-trust__features {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .tobidu-trust__features {
        grid-template-columns: repeat(3, 1fr);
    }
}

.tobidu-trust__hint {
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
    text-align: center;
    margin-top: calc(var(--space-2) * -1);
}

/* ---------- Stat-Reihe "4 Karten" (Bericht Nr. 55, Figma-Referenz) ---------- */
.tobidu-trust__stats {
    list-style: none;
    margin: 0 0 var(--space-10);
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

@media (min-width: 640px) {
    .tobidu-trust__stats {
        grid-template-columns: repeat(4, 1fr);
    }
}

.tobidu-trust__stat-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    padding: var(--space-5) var(--space-3);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.15rem;
}

.tobidu-trust__stat-icon {
    font-size: 1.75rem;
    margin-bottom: var(--space-2);
}

.tobidu-trust__stat-value {
    font-family: var(--font-heading);
    font-weight: var(--fw-heading);
    font-size: var(--fs-h3, 1.5rem);
    color: var(--color-text);
    line-height: 1.1;
}

.tobidu-trust__stat-label {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
}

/* ---------- Animierte 5-Sterne-Anzeige über der Marquee (Bericht Nr. 55) ---------- */
.tobidu-trust__rating-stars {
    display: flex;
    justify-content: center;
    gap: 0.2rem;
    margin: var(--space-3) 0 var(--space-2);
}

.tobidu-trust__rating-stars span {
    display: inline-block;
    width: 26px;
    height: 26px;
    background: #ffd60a;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    animation: tobidu-star-pop 1.8s ease-in-out infinite;
}

.tobidu-trust__rating-stars span:nth-child(1) { animation-delay: 0s; }
.tobidu-trust__rating-stars span:nth-child(2) { animation-delay: 0.12s; }
.tobidu-trust__rating-stars span:nth-child(3) { animation-delay: 0.24s; }
.tobidu-trust__rating-stars span:nth-child(4) { animation-delay: 0.36s; }
.tobidu-trust__rating-stars span:nth-child(5) { animation-delay: 0.48s; }

@keyframes tobidu-star-pop {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.25); opacity: 0.75; }
}

.tobidu-trust__rating-text {
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
    margin: 0 0 var(--space-6);
}

@media (prefers-reduced-motion: reduce) {
    .tobidu-trust__rating-stars span {
        animation: none;
    }
}

/* ---------- Bewertungen-Marquee (Bericht Nr. 55, Figma "MarqueeStrip"-
   Muster wiederverwendet, siehe .tobidu-marquee in decorations.css) ---------- */
.tobidu-trust__reviews-marquee {
    overflow: hidden;
    padding-block: var(--space-4);
    margin-bottom: var(--space-10);
}

.tobidu-trust__reviews-track {
    display: flex;
    width: max-content;
    gap: var(--space-4);
    animation: tobidu-marquee-scroll 42s linear infinite;
}

.tobidu-trust__reviews-marquee:hover .tobidu-trust__reviews-track {
    animation-play-state: paused;
}

.tobidu-trust__review-chip {
    flex: none;
    width: 320px;
    display: flex;
    flex-direction: column;
}

/* Bericht Nr. 57 — Sprechblasen-Optik der Live-Seite (www.tobidu.de,
   "Das sagen die Gäste") nachgebaut: farbige Bubble mit Zipfel, Zitat in
   Weiß, darunter Avatar + Name statt eines schlichten weißen Kastens. */
.tobidu-trust__review-bubble {
    position: relative;
    border-radius: var(--radius-xl);
    padding: var(--space-5) var(--space-5) var(--space-4);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-6);
}

.tobidu-trust__review-bubble::after {
    content: "";
    position: absolute;
    left: var(--space-6);
    bottom: -14px;
    width: 22px;
    height: 22px;
    background: inherit;
    clip-path: polygon(0 0, 100% 0, 0 100%);
    border-radius: 0 0 0 6px;
}

.tobidu-trust__review-bubble--blue { background: #38b6e6; }
.tobidu-trust__review-bubble--amber { background: var(--color-card-amber); }
.tobidu-trust__review-bubble--teal { background: var(--color-card-teal); }
.tobidu-trust__review-bubble--violet { background: var(--color-card-violet); }

.tobidu-trust__review-quote-icon {
    display: block;
    font-family: Georgia, serif;
    font-size: 2.5rem;
    line-height: 0.5;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: var(--space-2);
}

.tobidu-trust__review-quote {
    font-style: italic;
    color: #fff;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tobidu-trust__review-author {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-left: var(--space-2);
}

.tobidu-trust__review-avatar {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.1rem;
    color: #fff;
}

.tobidu-trust__review-avatar--blue { background: #38b6e6; }
.tobidu-trust__review-avatar--amber { background: var(--color-card-amber); color: var(--color-card-amber-text); }
.tobidu-trust__review-avatar--teal { background: var(--color-card-teal); }
.tobidu-trust__review-avatar--violet { background: var(--color-card-violet); }

.tobidu-trust__review-stars {
    display: block;
    color: #ffd60a;
    letter-spacing: 0.1rem;
    font-size: 0.85rem;
}

.tobidu-trust__review-name {
    font-weight: 600;
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    margin: 0;
}

@media (prefers-reduced-motion: reduce) {
    .tobidu-trust__reviews-track {
        animation: none;
        flex-wrap: wrap;
        width: 100%;
        justify-content: center;
    }
}

.tobidu-trust__list {
    list-style: none;
    margin: var(--space-6) 0 0;
    padding: 0;
    display: grid;
    gap: var(--space-5);
}

.tobidu-trust__card {
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.tobidu-trust__card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-sm);
}

.tobidu-trust__quote {
    font-style: italic;
    color: var(--color-text);
    margin: 0 0 var(--space-3);
}

.tobidu-trust__name {
    font-weight: 600;
    color: var(--color-text-muted);
    margin: 0;
}

@media (min-width: 768px) {
    .tobidu-trust__list {
        grid-template-columns: repeat(3, 1fr);
    }
}

/**
 * Wellen-Divider — weicher Section-Übergang statt harter Kante.
 * Reines SVG (inline als background-image, kein externer Request),
 * verursacht keinen Layout-Shift (feste Höhe, kein Content-Reflow).
 */
.tobidu-wave-divider {
    display: block;
    width: 100%;
    height: 48px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0,30 C300,60 900,0 1200,30 L1200,60 L0,60 Z' fill='%23eef4ff'/%3E%3C/svg%3E");
}

.tobidu-wave-divider--accent {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0,30 C300,60 900,0 1200,30 L1200,60 L0,60 Z' fill='%23ff6b35'/%3E%3C/svg%3E");
}

.tobidu-wave-divider--soft {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0,10 C200,50 400,0 600,20 C800,40 1000,0 1200,15 L1200,60 L0,60 Z' fill='%23ffffff'/%3E%3C/svg%3E");
}

/* Zusätzliche globale Farbvarianten (Bericht Nr. 41) — Wellen-Trenner färbt
   sich immer in der Fläche der FOLGENDEN Section ein und liegt am Ende der
   VORHERIGEN Section, damit keine harte Kante zwischen zwei Flächenfarben
   entsteht. Wiederverwendbar auf jeder Seite, nicht nur "Preise". */
.tobidu-wave-divider--sky {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0,30 C300,60 900,0 1200,30 L1200,60 L0,60 Z' fill='%23e3f4fc'/%3E%3C/svg%3E");
}

.tobidu-wave-divider--navy-dark {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0,10 C200,50 400,0 600,20 C800,40 1000,0 1200,15 L1200,60 L0,60 Z' fill='%231a1200'/%3E%3C/svg%3E");
}

/* Bericht Nr. 53 — echter Bug gefunden: der transparente Bereich OBERHALB
   der Wellenkurve in einer einfarbigen SVG (nur der Zielfarbe) zeigt nicht
   die vorherige Section-Farbe, sondern die Standard-Seitenfarbe (Weiß) —
   sichtbar als heller "Riss" IMMER DANN, wenn die vorherige Section nicht
   ohnehin weiß/creme ist (hier: dunkles Navy). Fix: zweifarbiges SVG mit
   einem vollflächigen Rechteck in der VORHERIGEN Farbe (#1A1200) als Basis,
   die Wellenkurve (Zielfarbe Creme) liegt darüber — kein transparenter
   Bereich mehr. Zusätzlich die Kurvenamplitude spürbar vertieft (vorher zu
   flach, wirkte wie eine gerade Linie statt einer Welle) und die Divider-
   Höhe erhöht. */
.tobidu-wave-divider--cream-figma {
    height: 90px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 110' preserveAspectRatio='none'%3E%3Crect width='1200' height='110' fill='%231a1200'/%3E%3Cpath d='M0,55 C300,120 900,-10 1200,55 L1200,110 L0,110 Z' fill='%23fffbf5'/%3E%3C/svg%3E");
}

/* Bericht Nr. 56 — exakte Farbe von .tobidu-page-booking (--color-bg-pink,
   #FFE6EE), Übergang von der jetzt dunklen Geburtstagspakete-Section. */
.tobidu-wave-divider--booking-pink {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0,30 C300,60 900,0 1200,30 L1200,60 L0,60 Z' fill='%23ffe6ee'/%3E%3C/svg%3E");
}

.tobidu-wave-divider--teal {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0,10 C200,50 400,0 600,20 C800,40 1000,0 1200,15 L1200,60 L0,60 Z' fill='%2300c4a0'/%3E%3C/svg%3E");
}

/* Bericht Nr. 54 — Übergänge um den Gastronomie-Block (Startseite): vorher
   endete die davorliegende `--warm`-Welle in einem freistehenden Tan-
   Streifen ohne Übergang zum tatsächlichen Teal-Verlauf der Section
   (var(--color-card-teal), #0EA684), und nach der Section fehlte
   überhaupt ein Wellen-Übergang zur hellblauen Vertrauen-Section
   (var(--color-bg-sky), #E3F4FC) — harte Kante. Exakte Farben ergänzt,
   background-color davor gesetzt (verhindert den bereits bekannten
   "weißer Strich"-Effekt an den transparenten Wellenrändern). */
.tobidu-wave-divider--gastro-in {
    background-color: #fffbf5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0,10 C200,50 400,0 600,20 C800,40 1000,0 1200,15 L1200,60 L0,60 Z' fill='%230ea684'/%3E%3C/svg%3E");
}

.tobidu-wave-divider--gastro-out {
    background-color: #0ea684;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0,30 C300,60 900,0 1200,30 L1200,60 L0,60 Z' fill='%23e3f4fc'/%3E%3C/svg%3E");
}

/* Bericht Nr. 55 — Übergang Trust-Section (endet als Verlauf in
   --color-bg-cream, #FDFAF3) zur FAQ-Teaser-Section (--color-bg-sky,
   #E3F4FC) fehlte bisher komplett (harte Kante). */
.tobidu-wave-divider--trust-out {
    background-color: #fdfaf3;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0,10 C200,50 400,0 600,20 C800,40 1000,0 1200,15 L1200,60 L0,60 Z' fill='%23e3f4fc'/%3E%3C/svg%3E");
}

/* Bericht Nr. 58 — Übergänge um "So findet ihr uns" (Startseite): davor
   fehlte die Welle zwischen FAQ-Teaser (--color-bg-sky, #E3F4FC) und der
   jetzt braunen Anfahrt-Section (#1A1200) komplett (harte Kante); danach
   wechselt die Section direkt zur orangen Ticket-CTA (var(--color-primary),
   #FF6B35) — eigene, unabhängig von der global genutzten .tobidu-wave-
   divider--accent-Variante, damit andere Seiten mit dieser Klasse nicht
   versehentlich mitbetroffen sind. */
.tobidu-wave-divider--anfahrt-in {
    background-color: #e3f4fc;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0,30 C300,60 900,0 1200,30 L1200,60 L0,60 Z' fill='%231a1200'/%3E%3C/svg%3E");
}

.tobidu-wave-divider--anfahrt-out {
    background-color: #1a1200;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0,10 C200,50 400,0 600,20 C800,40 1000,0 1200,15 L1200,60 L0,60 Z' fill='%23ff6b35'/%3E%3C/svg%3E");
}

/* Bericht Nr. 187 — Attraktionen-Slider zieht jetzt zwischen Gastronomie
   (Teal #0EA684) und Vertrauen (startet auf Himmelblau --color-bg-sky)
   ein; Attraktionen selbst ist Creme (#FFFBF5, siehe Bericht 46/51). Zwei
   neue, exakt passende Wellen statt Wiederverwendung von gastro-out (das
   ging direkt Teal→Himmelblau, ohne die jetzt dazwischenliegende Fläche). */
.tobidu-wave-divider--gastro-to-cream {
    background-color: #0ea684;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0,30 C300,60 900,0 1200,30 L1200,60 L0,60 Z' fill='%23fffbf5'/%3E%3C/svg%3E");
}

.tobidu-wave-divider--cream-to-sky {
    background-color: #fffbf5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0,10 C200,50 400,0 600,20 C800,40 1000,0 1200,15 L1200,60 L0,60 Z' fill='%23e3f4fc'/%3E%3C/svg%3E");
}

@media (min-width: 768px) {
    .tobidu-wave-divider {
        height: 64px;
    }

    .tobidu-wave-divider--cream-figma {
        height: 120px;
    }
}