/**
 * sections.css — Farbige Section-Hintergrundflächen ("Erlebniswelt"-Look)
 *
 * Meilenstein 6, Iteration 2 (Bericht Nr. 9): Reaktion auf den in Bericht Nr. 8
 * dokumentierten Hauptmangel — die Live-Seite (www.tobidu.de) nutzt durchgehend
 * farbintensive/warme Section-Flächen (Creme statt reinem Weiß, dazu Himmelblau-,
 * Rosa-, Warmorange- und dunkle Navy-Sections im Wechsel), lokal dominierte bisher
 * überwiegend Weiß mit nur vereinzelter Deko.
 *
 * Diese Datei überschreibt gezielt die (bereits vorhandene, meist var(--color-bg))
 * Hintergrundfarbe der jeweiligen Block-<section>-Wrapper mit sanften Verläufen.
 * body-Präfix erhöht die Spezifität bewusst, damit die Regeln unabhängig von der
 * Enqueue-Reihenfolge der einzelnen Block-style.css-Dateien greifen — keine
 * !important nötig. Reine CSS-Erweiterung, keine Block-Attribute/Layout-Änderung.
 *
 * Kontrast: --color-text (#1a1a2e) auf allen hellen Flächen (Creme/Sky/Pink/Warm)
 * bleibt bei 13:1+ (weit über AA). Auf den dunklen Navy-Sections wird bewusst auf
 * --color-on-navy (#f4f7ff) umgeschaltet (Kontrast ~14:1).
 */

/* ==========================================================================
   Einheitlicher Hero-Aufbau "Bild + Text" — Bericht Nr. 123
   Betrifft Speisekarte, Downloads, FAQ, Kontakt, Impressum, AGB,
   Datenschutz, Anfahrt. Gemeinsame, wiederverwendbare Struktur-Klassen
   (KEIN neuer Hero-Wrapper, KEINE neue Hintergrundfarbe — jede Seite
   behält ihre bestehende .tobidu-*-hero-Fläche/Farbe/Deko unverändert,
   nur der INNERE Aufbau von "zentrierte Spalte" auf "Bild links, Text
   rechts" umgestellt):
     .tobidu-page-hero__grid     — 2-spaltiges Grid (Desktop ab 900px),
                                    darunter eine Spalte (Bild zuerst).
     .tobidu-page-hero__image-col — Bildspalte, ca. 34–36% Breite.
     .tobidu-page-hero__image    — das Bild selbst (object-fit:contain,
                                    keine Verzerrung, kein Zuschnitt).
     .tobidu-page-hero__content  — Textspalte (Badge/H1/Beschreibung/ggf.
                                    weiterer bestehender Inhalt).
   Mobile: durch die normale Dokumentreihenfolge automatisch Bild → Badge
   → H1 → Beschreibung, kein zusätzliches CSS nötig. */
.tobidu-page-hero__grid {
    display: grid;
    gap: var(--space-8, 2.5rem);
    align-items: center;
}

/* Bericht 123: bei deutlich längerem Textinhalt (z. B. Speisekarte mit
   Unterzeile/Hinweis/Schnell-Navigation zusätzlich zu Badge/H1/Text)
   würde align-items:center das Bild gegen die volle, sehr hohe Textspalte
   mittig ausrichten und dadurch optisch "absacken" lassen, statt mit der
   H1 auf einer Höhe zu beginnen — hier bewusst oben ausgerichtet. */
@media (min-width: 900px) {
    .tobidu-page-hero__grid--top {
        align-items: start;
    }

    .tobidu-page-hero__grid--top .tobidu-page-hero__image-col {
        padding-top: var(--space-2, 0.5rem);
    }
}

.tobidu-page-hero__image-col {
    display: flex;
    justify-content: center;
}

.tobidu-page-hero__image {
    display: block;
    width: 100%;
    max-width: 320px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.28));
}

.tobidu-page-hero__content {
    min-width: 0;
}

@media (min-width: 900px) {
    .tobidu-page-hero__grid {
        grid-template-columns: minmax(260px, 36%) 1fr;
        text-align: left;
    }

    .tobidu-page-hero__image {
        max-width: 100%;
    }

    .tobidu-page-hero__content {
        text-align: left;
    }
}

/* ---------- 1. Hero ---------- */
/* Bericht Nr. 48: diese Regel (body-Präfix, höhere Spezifität als die
   Basis-Regel in inc/blocks/hero/style.css) überschrieb bisher unbemerkt
   den dort hinterlegten, 1:1 aus Figma übernommenen Verlauf mit einem
   älteren, blaustichigeren Verlauf (Bericht 10) — echter Soll-Ist-Fund
   beim Video-Abgleich. Jetzt identisch zur Figma-Hero()-Komponente. */
body .tobidu-hero {
    background: linear-gradient(160deg, #fff5e6 0%, #fff9f0 40%, #e8fff8 100%);
}

/* ---------- 2. Öffnungszeiten ---------- */
/* Bericht Nr. 46: die ursprüngliche helle "Erlebniswelt"-Creme-Fläche
   (Bericht 9) wich vom tatsächlichen Figma-Vorbild OpeningHours() ab
   (dort: dunkle Navy-Fläche #1A1200). Bereits für die Preise-Seite exakt
   nachgebaut (Bericht 40) — diese Regel wurde jetzt entfernt und die
   dunkle Fassung weiter unten ("Öffnungszeiten: dunkle Navy-Section")
   global (nicht mehr auf `.tobidu-preise-figma` beschränkt) gemacht, damit
   Startseite UND Preise-Seite exakt dieselbe, echte Figma-Section zeigen —
   eine einzige Quelle der Wahrheit statt zweier unterschiedlicher Stile
   für denselben Block. */

/* ---------- 3. Attraktionen — Himmelblau-Tönung ---------- */
/* Bericht Nr. 51 — echter Soll-Ist-Fund: Figma-Attractions() ist Creme
   (#FFFBF5), nicht Himmelblau (Bericht 9 hatte hier eine abweichende
   Zebra-Farbe gewählt). */
body .tobidu-attraktionen-grid {
    background: #fffbf5;
}

/* Cards auf farbigem Grund brauchen weiße Fläche zur Abgrenzung/Kontrast. */
body .tobidu-attraktionen-grid__card {
    background: var(--color-bg);
}

/* ---------- 4. Kindergeburtstag ---------- */
/* Bericht Nr. 56: die frühere Rosa/Pink-Verlauf-Regel (Bericht 9) wich vom
   tatsächlichen Figma-Vorbild Birthday() ab (dort: dunkles Navy #1A1200,
   identisch zu OpeningHours()/Anfahrt()/Geschichte-Timeline). Diese Regel
   wurde entfernt — das Block-eigene style.css (inc/blocks/geburtstags
   pakete/style.css) setzt jetzt die korrekte dunkle Fläche direkt, eine
   einzige Quelle der Wahrheit statt zweier konkurrierender Farbregeln. */

/* ---------- 5. Preise — helle Creme-Fläche (Ruhepol zwischen zwei kräftigen Sections) ---------- */
body .tobidu-preistabelle {
    background: var(--color-bg-cream);
}

body .tobidu-preistabelle__card {
    background: var(--color-bg);
}

/* ---------- 6. Gastronomie — Figma-Referenz "Gastronomy": Teal-Verlauf
   (Bericht Nr. 37, löst den früheren warmen Orange-Verlauf ab — dieselbe
   Regel hatte den in inc/blocks/gastronomie-teaser/style.css gesetzten
   Teal-Ton unbemerkt überschrieben, identisches Muster wie der Hero-CTA-
   Farbbug aus Bericht 32). Die eigentliche Farbdefinition lebt jetzt im
   Block-CSS selbst; hier bewusst KEIN Override mehr, damit exakt eine
   Quelle der Wahrheit für diese Farbe existiert. */

/* ---------- 7. Vertrauen/Bewertungen — Himmelblau-Tönung (Zebra-Wechsel) ---------- */
body .tobidu-trust {
    background: linear-gradient(180deg, var(--color-bg-sky) 0%, var(--color-bg-cream) 100%);
}

body .tobidu-trust__card {
    background: var(--color-bg);
}

/* VDH-Sicherheitshinweis unterhalb der Testimonials (Bericht Nr. 22,
   von der Live-Startseite "Sicherheit geht vor!" übernommen). */
.tobidu-trust__vdh {
    max-width: 760px;
    margin: var(--space-8, 3rem) auto 0;
    text-align: center;
    background: var(--color-bg);
    border-radius: var(--radius-lg, 16px);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.06));
}

/* Bericht Nr. 57 — echtes VDH-Siegelbild (von der Live-Seite übernommen,
   siehe trust.php-Kommentar), dezent freigestellt in einer gestrichelten
   Kreis-Deko wie im Figma-/Live-Vorbild. */
.tobidu-trust__vdh-siegel {
    display: block;
    width: 120px;
    height: auto;
    margin: 0 auto var(--space-4);
    border-radius: var(--radius-md);
    padding: var(--space-2);
    background: #fff;
    box-shadow: var(--shadow-sm);
    outline: 2px dashed var(--color-accent-fun, #ec4899);
    outline-offset: 6px;
}

.tobidu-trust__vdh p {
    margin-top: var(--space-3);
    color: var(--color-text-muted, inherit);
}

/* ---------- 8. FAQ — ruhige Creme-Fläche ---------- */
/* Gleicher Full-Bleed-Trick wie bei Öffnungszeiten, siehe Kommentar dort. */
body .tobidu-faq-akkordeon {
    position: relative;
    background: transparent;
    z-index: 0;
}

body .tobidu-faq-akkordeon::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background: var(--color-bg-cream);
    z-index: -1;
}

body .tobidu-faq-akkordeon__item {
    background: var(--color-bg);
}

/* ---------- 9. Ticket-CTA — Figma-Referenz "FinalCTA": satter Orange-
   Verlauf statt der bisherigen Navy-Fläche (Bericht Nr. 37: Figma-Vorgabe
   für diese eine Section hat Vorrang vor der sonstigen Zebra-Farbfolge). */
body .tobidu-cta-ticket {
    background: linear-gradient(135deg, var(--color-primary) 0%, #ff8c42 40%, #ffb347 100%);
}

body .tobidu-cta-ticket__headline,
body .tobidu-cta-ticket__text {
    color: #fff;
}

body .tobidu-cta-ticket__text {
    color: rgba(255, 255, 255, 0.9);
}

/* Wellen-Trenner farblich an die jeweils folgende Section anpassen, damit der
   weiche Übergang (bereits in components.css angelegt) zur neuen Flächenfarbe passt. */
/* Bericht Nr. 51 — echte Startfarbe des Kindergeburtstag-Verlaufs
   (var(--color-accent-fun) = #ec4899), nicht das blasse --pink. */
.tobidu-wave-divider--pink-hot {
    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='%23ec4899'/%3E%3C/svg%3E");
}

.tobidu-wave-divider--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='%23ffc2d6'/%3E%3C/svg%3E");
}

.tobidu-wave-divider--warm {
    /* Bericht Nr. 52 — Hintergrundfarbe der Fläche DAVOR ergänzt: der
       Wellenpfad startet bei y=10 statt y=0, der transparente Bereich
       darüber zeigte sonst als weißer Strich den Body-Hintergrund statt
       nahtlos in die vorherige Fläche überzugehen. */
    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='%23ffdcae'/%3E%3C/svg%3E");
}

.tobidu-wave-divider--navy {
    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='%231e2f5c'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
    body .tobidu-hero,
    body .tobidu-geburtstagspakete,
    body .tobidu-cta-ticket {
        background-attachment: initial;
    }
}

/* ---------- Foto-Galerie (Bericht Nr. 17) ---------- */
/* Eigenes, leichtes CSS-Grid-Layout — kein Plugin. Responsive Spaltenzahl
   analog zu den bestehenden Breakpoints (480/768/1024px, siehe layout.css). */
.tobidu-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3, 1rem);
}

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

@media (min-width: 768px) {
    .tobidu-gallery {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-4, 1.5rem);
    }
}

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

/* Bericht Nr. 45 (Final-Pass): Creme-Fläche + Deko-Blur-Kreise für spürbare
   Section-Dynamik, statt reinem Weiß wie im vorherigen Durchgang. */
body .tobidu-gallery-section {
    background: var(--color-bg-cream);
    position: relative;
    overflow: hidden;
}

.tobidu-gallery-section::before {
    content: "";
    position: absolute;
    top: -100px;
    right: -80px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: rgba(255, 214, 10, 0.14);
    pointer-events: none;
}

.tobidu-gallery-section::after {
    content: "";
    position: absolute;
    bottom: -90px;
    left: -70px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: rgba(0, 196, 160, 0.12);
    pointer-events: none;
}

.tobidu-gallery {
    position: relative;
}

.tobidu-gallery__item {
    display: block;
    border: 0;
    padding: 0;
    background: none;
    cursor: pointer;
    border-radius: var(--radius-lg, 20px);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    position: relative;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.tobidu-gallery__item:hover,
.tobidu-gallery__item:focus-visible {
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
}

/* Bildunterschrift: Gradient-Overlay + Caption blenden erst bei Hover/Fokus
   ein (Figma-Attraktionskarten-Muster) statt den Bildfokus dauerhaft zu
   verdecken. */
.tobidu-gallery__caption {
    position: absolute;
    inset: auto 0 0 0;
    padding: var(--space-3) var(--space-4);
    background: linear-gradient(to top, rgba(26, 18, 0, 0.85), transparent);
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.tobidu-gallery__item:hover .tobidu-gallery__caption,
.tobidu-gallery__item:focus-visible .tobidu-gallery__caption {
    transform: translateY(0);
    opacity: 1;
}

.tobidu-gallery__zoom {
    flex: none;
    font-size: 1rem;
}

/* Editorial-Akzent statt reinem Uniform-Raster: das erste Bild wirkt als
   "Aufmacher" größer (2x2), analog zur Bildwirkung im Figma-Prototyp. Nur ab
   Tablet-Breite (Mobile bleibt einspaltig-uniform für saubere Lesbarkeit). */
@media (min-width: 768px) {
    .tobidu-gallery__item:first-child {
        grid-column: span 2;
        grid-row: span 2;
    }
}

.tobidu-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.25s ease;
}

.tobidu-gallery__item:hover img,
.tobidu-gallery__item:focus-visible img {
    transform: scale(1.06);
}

.tobidu-gallery__item:focus-visible {
    outline: 3px solid var(--color-primary, #1e6fd9);
    outline-offset: 2px;
}

/* ---------- Lightbox (Vanilla JS, kein externes Plugin) ---------- */
.tobidu-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(10, 12, 20, 0.92);
    padding: var(--space-3, 1rem);
}

.tobidu-lightbox.is-open {
    display: flex;
}

.tobidu-lightbox__figure {
    max-width: min(90vw, 1100px);
    max-height: 85vh;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2, 0.5rem);
}

.tobidu-lightbox__img {
    max-width: 100%;
    max-height: 75vh;
    object-fit: contain;
    border-radius: var(--radius-md, 12px);
}

.tobidu-lightbox__caption {
    color: var(--color-on-navy, #f4f7ff);
    font-size: 0.95rem;
    text-align: center;
}

.tobidu-lightbox__close,
.tobidu-lightbox__prev,
.tobidu-lightbox__next {
    position: absolute;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: 0;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.2s ease;
}

.tobidu-lightbox__close:hover,
.tobidu-lightbox__prev:hover,
.tobidu-lightbox__next:hover {
    background: var(--color-primary);
    transform: scale(1.08);
}

.tobidu-lightbox__close:focus-visible,
.tobidu-lightbox__prev:focus-visible,
.tobidu-lightbox__next:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

.tobidu-lightbox__close {
    top: var(--space-3, 1rem);
    right: var(--space-3, 1rem);
}

.tobidu-lightbox__prev {
    left: var(--space-3, 1rem);
    top: 50%;
    transform: translateY(-50%);
}

.tobidu-lightbox__next {
    right: var(--space-3, 1rem);
    top: 50%;
    transform: translateY(-50%);
}

/* ---------- Inhaltsseiten-Hinweis-Card (Downloads/Newsletter/Jobs: "wird geprüft") ---------- */

.tobidu-notice {
    border: 1px solid var(--color-border, #e2e8f0);
    background: var(--color-bg-soft, #eef4ff);
    border-radius: var(--radius-md, 12px);
    padding: var(--space-4, 1rem);
    margin-bottom: var(--space-4, 1rem);
}

.tobidu-notice p {
    margin: 0;
}

.tobidu-notice--info {
    border-left: 4px solid var(--color-primary, #2563eb);
}

.tobidu-notice__pending {
    font-style: italic;
    color: var(--color-text-muted, #4b5563);
}

/* ---------- Rechtstext (AGB) — reine Lesbarkeits-Typografie, Inhalt bleibt unverändert ---------- */

.tobidu-legal-text h2 {
    margin-top: var(--space-6, 2rem);
}

.tobidu-legal-text p {
    max-width: 70ch;
}

/* ---------- Externe Buchungs-iFrame-Einbindung (Kindergeburtstage) ---------- */

body .tobidu-page-booking {
    background: var(--color-bg-pink);
    padding-block: var(--space-10);
}

.tobidu-page-booking h2 {
    font-family: var(--font-heading);
    font-weight: var(--fw-heading);
}

.tobidu-page-booking__text {
    max-width: 65ch;
    color: rgba(26, 18, 0, 0.7);
}

/* Bericht Nr. 45 — Figma-Birthday()-Deko-Layer: eigene absolute Ebene über
   die volle Höhe des Pakete-Blocks (NICHT die generische `.tobidu-deco-
   layer` mit height:0 — bei einer so hohen Section würden die top:%-Werte
   sonst alle auf 0 kollabieren). Reines CSS, kein Layout-Einfluss auf den
   darunterliegenden, unveränderten `tobidu/geburtstagspakete`-Block. */
.tobidu-deco-layer.tobidu-geburtstag-figma-deco__layer {
    position: absolute;
    inset: 0;
    height: auto;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
}

.tobidu-geburtstag-figma-deco__layer .tobidu-deco {
    position: absolute;
}

/* Bericht Nr. 45 — Buchungs-Intro als eigene, hervorgehobene Karte statt
   reinem Fließtext direkt über dem iFrame (mehr Gewicht für den wichtigsten
   Call-to-Action der Seite). */
.tobidu-page-booking__intro-card {
    background: #fff;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    padding: var(--space-6) var(--space-7);
    max-width: 640px;
    margin: 0 auto var(--space-6);
    text-align: center;
}

.tobidu-page-booking__intro-card h2 {
    margin-top: 0;
}

/* Bericht Nr. 44 — Kontrastfläche zwischen der pinken Pakete-/Buchungs-
   Section und der violetten EscapeWorld-Section (vorher plain Weiß). */
body .tobidu-page-bedingungen {
    background: var(--color-bg-warm);
}

.tobidu-wave-divider--violet {
    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='%237c5cf0'/%3E%3C/svg%3E");
}

body .tobidu-page-escapeworld {
    background: linear-gradient(135deg, var(--color-card-violet) 0%, #6a4bd6 100%);
    color: #fff;
    padding-block: var(--space-10);
}

.tobidu-page-escapeworld h2 {
    color: #fff;
    font-family: var(--font-heading);
    font-weight: var(--fw-heading);
}

.tobidu-page-escapeworld p {
    color: rgba(255, 255, 255, 0.9);
    max-width: 65ch;
}

/* Icon-Karten (Bedingungen zur Buchung u. a.): Icon oben statt reinem
   Fließtext-Block, konsistent mit dem Info-Row-Muster auf "Das TobiDu". */
.tobidu-icon-card__icon {
    display: block;
    font-size: 1.75rem;
    margin-bottom: var(--space-2);
}

.tobidu-page-booking__fallback {
    margin-top: var(--space-4, 1rem);
    color: var(--color-text-muted, #4b5563);
}

/* Bericht Nr. 20: Full-Width-Korrektur. Die Live-Seite (www.tobidu.de) bettet
   den Buchungs-iFrame in eine Elementor-"Full Width/Stretched"-Section ein
   (siehe Live-Analyse: iframe-Breite ~1417px bei 1440px Viewport, ~367px bei
   390px Viewport — jeweils praktisch die volle Viewport-Breite mit nur
   minimalem seitlichem Rand, kein schmaler Boxed-Container). Das Theme hat
   kein Gutenberg-Block-Alignment-System für PHP-Templates (kein
   `alignfull`/`theme.json`-`layout.wideSize`-Mechanismus im Einsatz), daher
   der pragmatische CSS-Breakout-Trick unten. `body` hat bereits global
   `overflow-x: hidden` (siehe base.css) — das bewährte vorhandene Full-Bleed-
   Absicherungsmuster dieses Themes (siehe z.B. `.tobidu-oeffnungszeiten`/
   `.tobidu-faq-akkordeon` oben) — daher ist der `100vw`-Breakout hier ohne
   zusätzliche horizontale Scrollbar sicher nutzbar. */
.tobidu-page-booking__breakout {
    position: relative;
    left: 50%;
    right: 50%;
    width: 100vw;
    margin-left: -50vw;
    margin-right: -50vw;
    padding-inline: var(--space-4, 1rem);
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .tobidu-page-booking__breakout {
        padding-inline: var(--space-6, 1.5rem);
    }
}

.tobidu-iframe-wrap {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 700px;
    max-height: 1400px;
    margin: var(--space-4, 1rem) auto;
    max-width: 1600px;
    border-radius: var(--radius-md, 12px);
    overflow: hidden;
    box-shadow: var(--shadow-md, 0 4px 16px rgba(0, 0, 0, 0.08));
}

.tobidu-iframe-wrap__frame {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
}

/* 782px statt 100vh: bei kleineren/mobilen Viewports würde die volle
   Fensterhöhe zusammen mit dem Intro-/Header-Bereich der Seite eine
   unpraktisch lange Gesamtseite ergeben (Live-Seite verzichtet dort auf ein
   eigenes Intro oberhalb des iFrames, unsere Seite hat aber Titel + Text +
   Paket-Übersicht davor) — daher bewusst reduzierte Werte statt 1:1 100vh. */
@media (max-width: 782px) {
    .tobidu-iframe-wrap {
        height: 85vh;
        min-height: 560px;
    }
}

/* "Das TobiDu"-Seite (page-indoorspielplatz-stuttgart-fellbach.php):
   Besuchs-Hinweise (Sockenpflicht/Speisen/EC-Zahlung) + Geschichte-Timeline,
   Bericht Nr. 21 aus Live-Content-Abgleich ergänzt. Nutzt bestehende
   .card/.grid-Utilities (components.css/layout.css), keine neuen
   Grid-Systeme eingeführt. */
.tobidu-page-hinweise__vereinbarung-title {
    margin-top: var(--space-8);
}

.tobidu-page-hinweise__note {
    margin-top: var(--space-3);
    padding: var(--space-5);
    background: var(--color-bg-warm);
    border-radius: var(--radius-lg);
    color: var(--color-text);
    font-weight: 600;
}

/* Wiederverwendbare Icon-Info-Reihe (Figma-Referenz: Icon-Chip + Titel +
   Text nebeneinander statt reiner Textkarte) — auch auf anderen Seiten
   einsetzbar (Rollout-Feinschliff, Bericht Nr. 31). */
.tobidu-info-row {
    display: grid;
    gap: var(--space-6);
    margin-top: var(--space-6);
    grid-template-columns: 1fr;
}

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

.tobidu-info-row__item {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
}

.tobidu-info-row__icon {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    border-radius: var(--radius-md);
    background: var(--color-primary-light);
}

.tobidu-info-row__item h3 {
    margin: 0 0 var(--space-1);
    font-size: var(--fs-lg);
}

.tobidu-info-row__item p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
}

/* Bericht Nr. 44 — "Das TobiDu": Hinweise-Section auf Creme (Kontrast zum
   weißen Attraktionen-Grid davor) und Geschichte-Timeline auf dunkle Navy-
   Fläche (#1A1200, identischer Ton wie Figma OpeningHours()/Anfahrt())
   umgestellt — kein eigenes Figma-Pendant für diese Seite vorhanden
   (Bericht 43), daher bewusste Extrapolation des etablierten Figma-Dunkel-
   Kontrast-Musters statt der bisherigen durchgehend weißen Fläche. */
body .tobidu-page-hinweise {
    background: var(--color-bg-cream);
}

/* Firmengeschichte als Zickzack-Timeline (Bericht 83, 1:1 aus Figma):
   Mittlere Verlaufslinie, abwechselnd links/rechts platzierte Karten,
   Zeitpunkt als farbiger Emoji-Dot statt reinem Punkt. Mobile: eine
   Spalte, Dot links neben der Karte, Linie ausgeblendet. */
body .tobidu-td-geschichte {
    background: #0f0a00;
    color: #e5d5b5;
    position: relative;
    overflow: hidden;
    padding: var(--space-16, 96px) 0 var(--space-16, 96px);
}

.tobidu-td-geschichte::before {
    content: "";
    position: absolute;
    top: -120px;
    left: -120px;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: rgba(255, 107, 53, 0.06);
    pointer-events: none;
}

.tobidu-td-geschichte::after {
    content: "";
    position: absolute;
    bottom: -100px;
    right: -100px;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: rgba(255, 214, 10, 0.04);
    pointer-events: none;
}

/* Bericht 87: großer, langsam rotierender Neon-Ball hinter der Timeline
   (dieselbe Deko-Idee wie .tobidu-td-hero__bigball im Hero), plus
   schwebende Sterne/Bälle aus dem globalen .tobidu-deco-layer-System
   (decorations.css) — sorgt für Hintergrundbewegung statt starrer Fläche. */
.tobidu-td-geschichte__bigball {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 560px;
    height: 560px;
    margin: -280px 0 0 -280px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(255, 107, 53, 0.12), rgba(255, 214, 10, 0.08), rgba(126, 87, 194, 0.12), rgba(233, 30, 140, 0.08), rgba(255, 107, 53, 0.12));
    filter: blur(2px);
    animation: tobidu-spin 46s linear infinite;
    pointer-events: none;
}

@media (max-width: 640px) {
    .tobidu-td-geschichte__bigball {
        width: 360px;
        height: 360px;
        margin: -180px 0 0 -180px;
    }
}

.tobidu-td-geschichte__head {
    text-align: center;
    max-width: 560px;
    margin: 0 auto var(--space-12, 64px);
    position: relative;
}

.tobidu-td-geschichte__head h2 {
    color: #fff;
    font-family: var(--font-heading);
    font-weight: var(--fw-heading);
    margin: var(--space-4) 0 var(--space-3);
}

.tobidu-td-geschichte__head p {
    color: rgba(255, 255, 255, 0.6);
}

.tobidu-td-geschichte__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-8, 40px);
    position: relative;
}

.tobidu-td-geschichte__list::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 3px;
    transform: translateX(-50%);
    background: linear-gradient(to bottom, transparent, #ff6b35 8%, #ffd60a 35%, #7e57c2 60%, #e91e8c 80%, transparent);
    border-radius: 3px;
    /* Bericht 87: Neon-Schimmer auf der Verlaufslinie selbst. */
    filter: drop-shadow(0 0 6px rgba(255, 107, 53, 0.55)) drop-shadow(0 0 14px rgba(126, 87, 194, 0.4));
    pointer-events: none;
}

.tobidu-td-geschichte__item {
    display: grid;
    grid-template-columns: 1fr 56px 1fr;
    align-items: center;
    position: relative;
}

.tobidu-td-geschichte__dot {
    grid-column: 2;
    grid-row: 1;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--td-color), var(--td-color));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    /* Bericht 87: kräftigerer Neon-Glow (mehrere weiche Ringe + Puls-Animation),
       auf Wunsch angelehnt an den Gruppenpreise-Karten-Glow von
       /preise-und-oeffnungszeiten/ (.tobidu-pv2-package, dort per Hover-Box-
       Shadow in Kartenfarbe) — hier dauerhaft aktiv statt nur bei Hover. */
    box-shadow:
        0 0 0 5px #0f0a00,
        0 0 0 8px color-mix(in srgb, var(--td-color) 45%, transparent),
        0 0 18px 3px color-mix(in srgb, var(--td-color) 75%, transparent),
        0 0 36px 9px color-mix(in srgb, var(--td-color) 50%, transparent),
        0 0 64px 16px color-mix(in srgb, var(--td-color) 28%, transparent);
    animation: tobidu-geschichte-neon-pulse 2.6s ease-in-out infinite;
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}

@keyframes tobidu-geschichte-neon-pulse {
    0%, 100% { filter: brightness(1) saturate(1); }
    50% { filter: brightness(1.4) saturate(1.25); }
}

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

.tobidu-td-geschichte__item:nth-child(odd) .tobidu-td-geschichte__card {
    grid-column: 1;
    justify-self: end;
}

.tobidu-td-geschichte__item:nth-child(even) .tobidu-td-geschichte__card {
    grid-column: 3;
    justify-self: start;
}

.tobidu-td-geschichte__card {
    background: rgba(255, 255, 255, 0.04);
    border: 1.5px solid color-mix(in srgb, var(--td-color) 35%, transparent);
    border-radius: var(--radius-lg, 24px);
    overflow: hidden;
    max-width: 440px;
    width: 100%;
    transition: all 0.3s ease;
    /* Dezenter Dauer-Neon-Schein in Kartenfarbe, verstärkt sich beim Hover. */
    box-shadow: 0 0 20px 1px color-mix(in srgb, var(--td-color) 18%, transparent);
}

.tobidu-td-geschichte__card:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: color-mix(in srgb, var(--td-color) 70%, transparent);
    transform: translateY(-4px);
    box-shadow: 0 0 32px 4px color-mix(in srgb, var(--td-color) 55%, transparent), 0 16px 56px color-mix(in srgb, var(--td-color) 30%, transparent);
}

.tobidu-td-geschichte__media {
    aspect-ratio: 16 / 8;
    overflow: hidden;
}

.tobidu-td-geschichte__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Logo-/Grafik-Assets (kein Foto) statt zuzuschneiden zentriert einpassen */
.tobidu-td-geschichte__media--logo {
    background: rgba(255, 255, 255, 0.03);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4, 16px);
}

.tobidu-td-geschichte__media--logo img {
    width: auto;
    height: 100%;
    max-width: 70%;
    object-fit: contain;
}

.tobidu-td-geschichte__body {
    padding: var(--space-5, 20px) var(--space-6, 22px) var(--space-6, 22px);
}

.tobidu-td-geschichte__body h3 {
    color: #fff;
    font-family: var(--font-heading);
    font-weight: var(--fw-heading);
    font-size: var(--fs-lg, 18px);
    margin: 0 0 var(--space-2, 10px);
}

.tobidu-td-geschichte__body p {
    color: rgba(255, 255, 255, 0.65);
    font-size: var(--fs-sm, 13.5px);
    line-height: 1.75;
    margin: 0;
}

.tobidu-td-geschichte__year {
    display: inline-flex;
    font-family: var(--font-heading);
    font-weight: var(--fw-heading);
    font-size: var(--fs-md, 18px);
    color: #fff;
    background: var(--td-color);
    padding: var(--space-1) var(--space-4);
    border-radius: var(--radius-md, 12px);
    margin-bottom: var(--space-3, 12px);
    letter-spacing: -0.5px;
}

.tobidu-td-geschichte__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4, 14px);
    max-width: fit-content;
    margin: var(--space-12, 56px) auto 0;
    padding: var(--space-4, 16px) var(--space-8, 36px);
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--color-primary), #ffd60a);
    box-shadow: 0 12px 48px rgba(255, 107, 53, 0.4);
}

.tobidu-td-geschichte__badge-icon {
    width: 44px;
    height: 44px;
    object-fit: contain;
    flex-shrink: 0;
}

.tobidu-td-geschichte__badge strong {
    display: block;
    color: #fff;
    font-family: var(--font-heading);
    font-weight: var(--fw-heading);
    font-size: var(--fs-lg, 20px);
    line-height: 1.1;
}

.tobidu-td-geschichte__badge small {
    display: block;
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--fs-sm, 13px);
    margin-top: 3px;
}

@media (max-width: 768px) {
    .tobidu-td-geschichte__list::before {
        display: none;
    }

    .tobidu-td-geschichte__item {
        grid-template-columns: 56px 1fr;
        gap: var(--space-3, 12px);
    }

    .tobidu-td-geschichte__dot {
        grid-column: 1;
        width: 44px;
        height: 44px;
        font-size: 19px;
        align-self: flex-start;
    }

    .tobidu-td-geschichte__item:nth-child(odd) .tobidu-td-geschichte__card,
    .tobidu-td-geschichte__item:nth-child(even) .tobidu-td-geschichte__card {
        grid-column: 2;
        justify-self: stretch;
        max-width: none;
    }

    .tobidu-td-geschichte__badge {
        max-width: none;
        margin-left: var(--space-4, 16px);
        margin-right: var(--space-4, 16px);
        text-align: left;
    }
}

/* "Preise & Öffnungszeiten"-Seite (page-preise-und-oeffnungszeiten.php):
   "Hereinspaziert"-Bild+Text-Abschnitt (Bericht Nr. 22, 1:1-Live-Migration).
   Bewusst dasselbe zweispaltige Bild/Text-Muster wie andere Seiten, kein
   neues Layoutsystem. */
.tobidu-page-media-text__inner {
    display: flex;
    align-items: center;
    gap: var(--space-8, 3rem);
    flex-wrap: wrap;
}

.tobidu-page-media-text__image {
    flex: 1 1 320px;
    max-width: 440px;
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg, 16px);
}

/* Bericht Nr. 64 — echtes Logo statt großflächiger Illustration: deutlich
   kleiner und zentriert statt auf Spaltenbreite gestreckt. */
.tobidu-page-media-text__image--logo {
    flex: 0 0 auto;
    max-width: 190px;
    margin-inline: auto;
    border-radius: 0;
}

.tobidu-page-media-text__content {
    flex: 1 1 360px;
}

.tobidu-page-media-text__content p {
    margin-top: var(--space-3);
}

/* Startseiten-Banner-Hinweis (Bericht Nr. 23, TEIL 4) — dezenter,
   optionaler Ankündigungs-Streifen oberhalb des Hero, kein aufdringliches
   Pop-up/Overlay. */
.tobidu-home-banner {
    background: var(--color-accent-soft, #fff4e0);
    text-align: center;
    padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
}

.tobidu-home-banner__text {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text, #1f2933);
}

/* ---------- Anfahrt-Seite: Figma-Komponente AnfahrtPage.tsx 1:1 (Bericht Nr. 119) ----------
   Vorher (Bericht 43) war dieser Block selbst dunkel mit einer schlichten
   Text-Liste — das echte Figma-Original zeigt hier eine CREMEFARBENE
   Section (background:'#FFFBF5') mit einer dunklen Karten-Karte (Pin) links
   und einzelnen weißen Info-Karten rechts. Der dunkle Hero (Badge/H1/CTA +
   2×2-Kurzinfo-Karten) sitzt bei Figma DAVOR, siehe .tobidu-af-hero unten. */
body .tobidu-anfahrt-figma {
    background: var(--color-bg-cream, #fdfaf3);
    padding-block: var(--space-12);
}

.tobidu-anfahrt-figma__inner {
    display: grid;
    gap: var(--space-8);
    align-items: start;
}

@media (min-width: 900px) {
    .tobidu-anfahrt-figma__inner {
        grid-template-columns: 1.3fr 1fr;
    }
}

/* Karte + Info-Chips als EIN durchgehendes Kartenelement (Figma: zwei
   Zonen derselben Karte, keine getrennten Boxen mit Lücke dazwischen). */
.tobidu-af-mapcard {
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
}

.tobidu-af-mapcard .tobidu-home-anfahrt__pin {
    border-radius: 0;
    box-shadow: none;
    min-height: 320px;
}

.tobidu-af-mapcard__cta {
    position: relative;
    z-index: 1;
    align-self: center;
    margin: calc(var(--space-4) * -1) 0 var(--space-4);
    padding: 0.7rem 1.5rem;
    border-radius: 999px;
    background: #fff;
    color: #1a1200;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.85rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    transition: transform 0.15s ease;
}

.tobidu-af-mapcard__cta:hover {
    transform: scale(1.05);
}

.tobidu-af-mapcard .tobidu-anfahrt-figma__chips {
    margin-top: 0;
    border-radius: 0;
    background: #2a2010;
}

.tobidu-anfahrt-figma__chips {
    padding: var(--space-4) var(--space-5);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-5);
}

.tobidu-anfahrt-figma__chips span {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.8rem;
    color: #d5c5a5;
    white-space: nowrap;
}

/* Anfahrtsdetails: einzelne weiße Info-Karten statt Text-Liste, Farbe je
   Karte über --card-color/--card-bg (inline gesetzt, siehe page-anfahrt.php). */
.tobidu-af-details {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.tobidu-af-detail-card {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
    border: 1.5px solid var(--card-color, rgba(0, 0, 0, 0.08));
    display: flex;
    gap: var(--space-4);
}

.tobidu-af-detail-card__icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    background: var(--card-bg, rgba(255, 107, 53, 0.08));
}

.tobidu-af-detail-card__label {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--card-color, var(--color-primary));
    margin-bottom: 0.3rem;
}

.tobidu-af-detail-card__body {
    font-size: 0.92rem;
    color: var(--color-text-muted);
    line-height: 1.6;
}

.tobidu-af-detail-card__body strong {
    color: var(--color-text);
}

.tobidu-af-detail-card__body a {
    color: var(--color-text);
    font-weight: 700;
}

/* ---------- Anfahrt-Hero: dunkler Verlauf + Hintergrund-Ellipsen (Figma) ---------- */
.tobidu-af-hero {
    background: linear-gradient(160deg, #1a1200 0%, #2a1a00 60%, #1a1200 100%);
    padding: 7.5rem 0 4.5rem;
    position: relative;
    overflow: hidden;
}

.tobidu-af-hero__glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.tobidu-af-hero__glow--1 {
    top: -80px;
    right: -80px;
    width: 320px;
    height: 320px;
    background: rgba(255, 107, 53, 0.08);
    animation: tobidu-float 10s ease-in-out infinite;
}

.tobidu-af-hero__glow--2 {
    bottom: -60px;
    left: -60px;
    width: 280px;
    height: 280px;
    background: rgba(255, 214, 10, 0.06);
    animation: tobidu-float 12s ease-in-out infinite reverse;
}

.tobidu-af-hero__inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 var(--space-5);
    position: relative;
}

/* Bericht 123 (Architekten-Auftrag): vorher eigenes 2-spaltiges Grid
   (kleines 130px-Maskottchen + Text | 2×2-Karten). Jetzt einheitlicher
   Seiten-Hero (.tobidu-page-hero__grid, sections.css oben) mit dem neuen,
   großen Anfahrt-Motiv links und Badge/H1/Text/CTA rechts — die 2×2-Kurz-
   info-Karten bleiben vollständig erhalten, stehen jetzt als eigene Zeile
   UNTER dieser Bild+Text-Zeile (volle Breite), statt daneben. Die frühere
   Hin-und-her-Fahranimation war an das alte, kleine Kinderwagen-Bild
   gebunden und wurde mit dem neuen, deutlich größeren Motiv entfernt
   (Bild wird wie auf allen anderen Seiten ruhig/unverändert dargestellt). */
.tobidu-af-hero h1 {
    font-family: var(--font-heading);
    font-weight: var(--fw-heading);
    font-size: clamp(2.1rem, 4vw, 3.4rem);
    color: #fff;
    line-height: 1.1;
    margin: 0 0 var(--space-4);
}

.tobidu-af-hero__highlight {
    color: var(--color-primary);
}

.tobidu-af-hero__text {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.8;
    margin-bottom: var(--space-6);
    max-width: 46ch;
}

.tobidu-af-hero__cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    margin-top: var(--space-8);
}

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

.tobidu-af-hero__card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--card-color, rgba(255, 255, 255, 0.2));
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}

.tobidu-af-hero__card-icon {
    font-size: 1.6rem;
    margin-bottom: var(--space-2);
}

.tobidu-af-hero__card-label {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--card-color, #fff);
    margin-bottom: 0.3rem;
}

.tobidu-af-hero__card-value {
    font-size: 0.83rem;
    color: #d5c5a5;
    line-height: 1.5;
}

/* Welle: dunkler Hero → cremefarbene Karten-Section (bg = Creme/danach,
   Pfad-Fill = dunkles Hero-Ende/davor — gleiche Konvention wie überall). */
.tobidu-af-wave--hero-out {
    width: 100%;
    height: 50px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    background-color: var(--color-bg-cream, #fdfaf3);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 50' preserveAspectRatio='none'%3E%3Cpath d='M0,20 C300,50 900,0 1200,22 L1200,0 L0,0 Z' fill='%231a1200'/%3E%3C/svg%3E");
}

/* ---------- Jobs: farbige Stellenkarten + Teal-Benefits-Grid ----------
   Bericht Nr. 44 — kein eigenes Figma-Pendant, Designsystem-Extrapolation
   (Teal-Ton identisch zu Figma Gastronomy()). */
.tobidu-jobs-card {
    position: relative;
    padding-top: var(--space-8);
}

.tobidu-jobs-card__icon {
    position: absolute;
    top: -22px;
    left: var(--space-6);
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

.tobidu-jobs-card--orange .tobidu-jobs-card__icon {
    background: linear-gradient(135deg, var(--color-primary), #ff9a55);
}

.tobidu-jobs-card--teal .tobidu-jobs-card__icon {
    background: linear-gradient(135deg, #00c4a0, #00a890);
}

body .tobidu-jobs-benefits {
    background: linear-gradient(160deg, #00c4a0, #00a890);
}

.tobidu-jobs-benefits h2 {
    color: #fff;
    font-family: var(--font-heading);
    font-weight: var(--fw-heading);
    text-align: center;
    margin-bottom: var(--space-8);
}

.tobidu-jobs-benefits__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
}

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

.tobidu-jobs-benefits__item {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    display: flex;
    gap: var(--space-4);
    align-items: center;
}

.tobidu-jobs-benefits__item span {
    font-size: 1.75rem;
    flex: none;
}

.tobidu-jobs-benefits__item p {
    margin: 0;
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* ---------- Gruppenangebote: nummeriertes Feature-Card-Grid auf Navy ----------
   Bericht Nr. 44 — kein eigenes Figma-Pendant, Designsystem-Extrapolation
   (identischer Dunkelton wie OpeningHours()/Anfahrt()/Das-TobiDu-Geschichte). */
body .tobidu-gruppen-figma {
    background: #1a1200;
    position: relative;
    overflow: hidden;
}

.tobidu-gruppen-figma::before {
    content: "";
    position: absolute;
    bottom: -100px;
    left: -90px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: rgba(0, 196, 160, 0.08);
    pointer-events: none;
}

.tobidu-gruppen-figma h2 {
    color: #fff;
    font-family: var(--font-heading);
    font-weight: var(--fw-heading);
    text-align: center;
    position: relative;
}

.tobidu-gruppen-figma__intro {
    color: #d5c5a5;
    max-width: 640px;
    margin: 0 auto var(--space-8);
    text-align: center;
    position: relative;
}

.tobidu-gruppen-figma__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
    position: relative;
}

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

.tobidu-gruppen-figma__card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    position: relative;
}

.tobidu-gruppen-figma__num {
    position: absolute;
    top: var(--space-4);
    right: var(--space-5);
    font-family: var(--font-heading);
    font-weight: var(--fw-heading);
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.08);
}

.tobidu-gruppen-figma__icon {
    display: inline-flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--color-primary), #ff9a55);
    margin-bottom: var(--space-3);
}

.tobidu-gruppen-figma__card h3 {
    color: #fff;
    font-size: var(--fs-lg);
    margin: 0 0 var(--space-2);
}

.tobidu-gruppen-figma__card p {
    color: #b5a582;
    font-size: 0.92rem;
    line-height: 1.65;
    margin: 0;
}

/* ---------- Kontakt-Seite: gleiche Figma-Icon-Listen-Optik wie Anfahrt() ----------
   Kein eigenes Figma-Pendant für "Kontakt" vorhanden — bewusste Wieder-
   verwendung derselben Formensprache (Bericht Nr. 43), siehe PHP-Kommentar. */
body .tobidu-page-outro.tobidu-kontakt-figma {
    background: #1a1200;
    color: var(--color-on-navy);
}

/* Überschreibt gezielt die generische weiße Karten-Optik von
   `.tobidu-page-outro .container` (sections.css unten) — diese Seite
   nutzt stattdessen die dunkle Figma-Icon-Listen-Fläche selbst als
   Hintergrund, keine zusätzliche weiße Box mehr nötig. */
body .tobidu-kontakt-figma .container {
    background: transparent;
    box-shadow: none;
    padding: 0;
    max-width: 640px;
}

.tobidu-kontakt-figma__inner {
    margin: 0 auto;
}

.tobidu-kontakt-figma__list {
    margin-bottom: var(--space-8);
}

.tobidu-kontakt-figma__cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.tobidu-kontakt-figma .btn--secondary {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.4);
}

.tobidu-kontakt-figma .btn--secondary:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.tobidu-kontakt-figma__note {
    margin-top: var(--space-5);
    color: #9a8a70;
    font-size: 0.9rem;
}

body .tobidu-page-outro.tobidu-kontakt-figma::before {
    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");
}

/* ---------- Generische Inhaltsseiten-Intro/-Outro ----------
   Betrifft ALLE Seiten mit .tobidu-page-intro/.tobidu-page-outro
   (Gruppenangebote, FAQ, Speisekarte, Kontakt, Anfahrt, Downloads, Jobs,
   Foto-Galerie, Rechtsseiten). Vorher: nur generisches .section (reines
   Weiß, keine Typografie-/Flächenbehandlung) — deutlicher Abstand zur
   Figma-Gesamtwirkung. Jetzt: warmer Verlaufskopf mit großer Nunito-H1
   (analog Hero-Typografie) + Wellenkante, sowie ein farblich abgesetzter,
   abgerundeter Abschluss-Panel mit den Kontakt-/Folge-CTAs statt reinem
   Fließtext auf weißem Grund (Rollout-Durchgang 3, Seitenpaket 1). */
body .tobidu-page-intro {
    background: linear-gradient(160deg, var(--color-bg-warm) 0%, var(--color-bg-cream) 60%, var(--color-bg-sky) 100%);
    padding-block: var(--space-12) var(--space-10);
    position: relative;
    z-index: 0;
}

/* Bericht Nr. 42 — Globaler Wellen-Übergang OHNE Extra-Markup: da
   `.tobidu-page-intro` (Verlauf endend in --color-bg-sky) auf JEDER
   Inhaltsseite fast immer von einer schlichten weißen `.section` gefolgt
   wird, genügt ein ::after-Pseudoelement in Weiß am eigenen unteren Rand —
   wirkt automatisch auf allen Seiten mit diesem Muster (Anfahrt, FAQ,
   Gruppenangebote, Kontakt, Foto-Galerie, AGB, Downloads, Jobs, Preise),
   ohne dass pro Seite ein `<div class="tobidu-wave-divider">` eingefügt
   werden muss. Seiten mit abweichender Folge-Flächenfarbe (z. B. Preise:
   direkt gefolgt von der dunklen Öffnungszeiten-Section) überschreiben das
   Bild gezielt per eigenem Divider ODER per spezifischerer Regel. */
body .tobidu-page-intro::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 100vw;
    height: 40px;
    transform: translateX(-50%);
    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,10 C200,50 400,0 600,20 C800,40 1000,0 1200,15 L1200,60 L0,60 Z' fill='%23ffffff'/%3E%3C/svg%3E");
    pointer-events: none;
}

@media (min-width: 768px) {
    body .tobidu-page-intro::after {
        height: 56px;
    }
}

/* Preise-Seite: Intro wird direkt von der dunklen Öffnungszeiten-Section
   gefolgt (nicht von einer weißen `.section`) — eigener Divider im
   Template übernimmt hier bereits die korrekte Farbe, generisches weißes
   ::after würde falsch aussehen und wird deshalb gezielt deaktiviert. */
body .tobidu-page-intro:has(+ .tobidu-wave-divider)::after {
    display: none;
}

/* Kindergeburtstage-buchen: Intro wird direkt vom pinken
   Geburtstagspakete-Block gefolgt, nicht von der generischen weißen
   `.section` — Wellenfarbe entsprechend angepasst statt des weißen
   Standardbilds (sonst harte Kante, siehe Bericht Nr. 42 Testdurchlauf).
   Bericht Nr. 56: Farbe von Pink (#ec4899) auf Navy (#1a1200) aktualisiert,
   da die Geburtstagspakete-Section jetzt Figma-Birthday()-Navy ist. */
body .tobidu-page-intro:has(+ .tobidu-geburtstagspakete)::after {
    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");
}

/* Foto-Galerie (Bericht Nr. 45): Intro wird von der neuen Creme-Galerie-
   Fläche gefolgt statt der generischen weißen `.section`. */
body .tobidu-page-intro:has(+ .tobidu-gallery-section)::after {
    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='%23fdfaf3'/%3E%3C/svg%3E");
}

/* Kontakt-Seite (Bericht Nr. 43): Intro wird direkt von der dunklen
   Kontakt-Figma-Section gefolgt (kein weißer Mittelteil auf dieser Seite). */
body .tobidu-page-intro:has(+ .tobidu-page-outro.tobidu-kontakt-figma)::after {
    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");
}

body .tobidu-page-intro h1 {
    font-family: var(--font-heading);
    font-weight: var(--fw-heading);
    font-size: var(--fs-h1);
    letter-spacing: -0.01em;
    max-width: 760px;
}

.tobidu-page-intro__text {
    font-size: var(--fs-lg);
    color: var(--color-text-muted);
    max-width: 640px;
}

.tobidu-page-intro__notice {
    margin-top: var(--space-5);
    padding: var(--space-4) var(--space-5);
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    max-width: 640px;
}

body .tobidu-page-outro {
    background: var(--color-bg-sky);
    padding-block: var(--space-10);
    position: relative;
    z-index: 0;
}

/* Spiegelbildliches Gegenstück zum Intro-::after oben: wirkt global auf
   jede Seite mit `.tobidu-page-outro` als letzter Abschnitt vor dem
   Footer, ohne Extra-Markup. Negativer top-Offset lässt die Welle bewusst
   über die eigene Boxgrenze hinaus in die vorhergehende (meist weiße)
   Section hineinragen — kein Ancestor mit overflow:hidden auf diesem Pfad. */
body .tobidu-page-outro::before {
    content: "";
    position: absolute;
    top: -39px;
    left: 50%;
    width: 100vw;
    height: 40px;
    transform: translateX(-50%);
    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='%23e3f4fc'/%3E%3C/svg%3E");
    pointer-events: none;
}

@media (min-width: 768px) {
    body .tobidu-page-outro::before {
        top: -55px;
        height: 56px;
    }
}

/* Preise-Seite: dort steht bereits ein expliziter Divider unmittelbar vor
   der Outro-Section (siehe page-preise-und-oeffnungszeiten.php) — das
   generische ::before wird in diesem Fall deaktiviert, um eine doppelte
   Welle zu vermeiden. */
body .tobidu-wave-divider + .tobidu-page-outro::before {
    display: none;
}

.tobidu-page-outro .container {
    background: var(--color-bg);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    padding: var(--space-8) var(--space-6);
    max-width: 760px;
}

.tobidu-page-outro p {
    font-size: var(--fs-lg);
}

.tobidu-page-outro__contact {
    list-style: none;
    margin: var(--space-4) 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font-weight: 700;
    font-size: var(--fs-lg);
}

.tobidu-page-outro a {
    font-weight: 700;
    color: var(--color-primary-dark);
}

.tobidu-contact-list li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* WooCommerce-Seiten (Kasse/order-pay, Warenkorb, Mein Konto — page.php-
   Fallback, Bericht Nr. 154): bewusst NUR Grundabstand, keine eigene
   Optik — das Ticket-System-Plugin bringt sein eigenes Checkout-CSS mit
   (tobidu-vchr-checkout.css). */
.tobidu-page-woocommerce__body {
    padding-block: var(--space-8);
}

/* Rechtsseiten (Impressum, Datenschutz — page.php-Fallback): dieselbe
   warme Kopf-Fläche/Typografie wie die übrigen Inhaltsseiten, aber bewusst
   OHNE verspielte Deko/Emoji im Fließtext — Rechtstexte bleiben inhaltlich
   unverändert, nur die Seitenrahmung wird an die Figma-Designsprache
   angeglichen (Rollout-Durchgang 3). */
body .tobidu-page-legal__head {
    background: linear-gradient(160deg, var(--color-bg-warm) 0%, var(--color-bg-cream) 100%);
    padding-block: var(--space-10) var(--space-8);
}

.tobidu-page-legal__head h1 {
    font-family: var(--font-heading);
    font-weight: var(--fw-heading);
    font-size: var(--fs-h1);
    letter-spacing: -0.01em;
    margin: 0;
}

.tobidu-page-legal__body {
    max-width: 760px;
    padding-block: var(--space-8);
}

.tobidu-page-legal__body .entry-content > * + * {
    margin-top: var(--space-4);
}

.tobidu-page-legal__body h2 {
    margin-top: var(--space-8);
}

/* ---------- Attraktions-Detailseite (single-attraktion.php) ----------
   Dieselbe warme Kopf-Fläche/Typografie wie die Rechtsseiten oben, plus
   Beitragsbild im Card-Look der Attraktionen-Grid-Kacheln (radius-xl,
   shadow-sm) — Grund für den bisherigen Bug: es gab kein eigenes
   Template, WordPress fiel auf index.php zurück (nur Titel + Fließtext,
   kein Bild, kein Design). */
body .tobidu-page-attraktion__head {
    background: linear-gradient(160deg, var(--color-bg-warm) 0%, var(--color-bg-cream) 100%);
    padding-block: var(--space-10) var(--space-8);
}

.tobidu-page-attraktion__head h1 {
    font-family: var(--font-heading);
    font-weight: var(--fw-heading);
    font-size: var(--fs-h1);
    letter-spacing: -0.01em;
    margin: 0;
}

.tobidu-page-attraktion__body {
    max-width: 760px;
    padding-block: var(--space-8);
}

.tobidu-page-attraktion__media {
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-6);
}

.tobidu-page-attraktion__image {
    width: 100%;
    height: auto;
    display: block;
}

.tobidu-page-attraktion__body .entry-content > * + * {
    margin-top: var(--space-4);
}

/* Mehrteilige Attraktionen (z. B. Spiel- & Kinderterminals): eigene
   Zwischenüberschrift + Bild pro Unterabschnitt, gleiche Bild-Optik wie
   das Beitragsbild oben (radius-xl, shadow-sm). */
.tobidu-page-attraktion__body .entry-content h3 {
    font-family: var(--font-heading);
    font-size: var(--fs-h4);
    color: var(--color-text);
    margin-top: var(--space-8);
}

.tobidu-page-attraktion__body .entry-content figure {
    margin: 0;
}

.tobidu-page-attraktion__body .entry-content figure img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    display: block;
}

.tobidu-page-attraktion__body .tobidu-attraktionen-grid__all-link {
    margin-top: var(--space-6);
}

/* ---------- /attraktionen/ Vollübersicht (Bericht Nr. 187) ----------
   Ersetzt die frühere Einzelseiten-Struktur (single-attraktion.php dient
   seither nur noch als 301-Weiterleitung hierher, siehe dort). Jede
   Attraktion bekommt einen eigenen, klar abgegrenzten Abschnitt mit
   Sprunganker, Bild und vollständigem CPT-Inhalt — Kopf-/Bild-Optik
   bewusst identisch zur bisherigen Detailseite (radius-xl, shadow-sm,
   dieselbe entry-content-Typografie für h3/figure bei mehrteiligen
   Attraktionen wie Spiel- & Kinderterminals). */
.tobidu-attraktionen-overview__intro {
    background: linear-gradient(160deg, var(--color-bg-warm) 0%, var(--color-bg-cream) 100%);
    padding-block: var(--space-10) var(--space-8);
    text-align: center;
}

.tobidu-attraktionen-overview__intro h1 {
    font-family: var(--font-heading);
    font-weight: var(--fw-heading);
    font-size: var(--fs-h1);
    letter-spacing: -0.01em;
    margin: 0 0 var(--space-4);
}

.tobidu-attraktionen-overview__intro p {
    max-width: 640px;
    margin-inline: auto;
    color: var(--color-text-muted);
    font-size: var(--fs-lg);
}

.tobidu-attraktionen-overview__section {
    padding-block: var(--space-10);
}

.tobidu-attraktionen-overview__section--alt {
    background: var(--color-bg-cream);
}

.tobidu-attraktionen-overview__row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
}

@media (min-width: 900px) {
    .tobidu-attraktionen-overview__row {
        flex-direction: row;
        gap: var(--space-10);
    }

    /* Alternierendes Bild links/rechts für visuellen Rhythmus über 9
       Abschnitte hinweg, analog zum bestehenden Gastronomie-Teaser-Muster. */
    .tobidu-attraktionen-overview__section--alt .tobidu-attraktionen-overview__row {
        flex-direction: row-reverse;
    }
}

.tobidu-attraktionen-overview__media,
.tobidu-attraktionen-overview__text {
    flex: 1 1 0;
    min-width: 0;
    width: 100%;
}

.tobidu-attraktionen-overview__media img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    display: block;
}

.tobidu-attraktionen-overview__text h2 {
    font-family: var(--font-heading);
    font-size: var(--fs-h2);
    color: var(--color-text);
    margin: 0 0 var(--space-3);
}

.tobidu-attraktionen-overview__text .entry-content > * + * {
    margin-top: var(--space-4);
}

.tobidu-attraktionen-overview__text .entry-content h3 {
    font-family: var(--font-heading);
    font-size: var(--fs-h4);
    color: var(--color-text);
    margin-top: var(--space-6);
}

.tobidu-attraktionen-overview__text .entry-content figure {
    margin: 0;
}

.tobidu-attraktionen-overview__text .entry-content figure img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    display: block;
}

/* ---------- Downloads-Seite: erkennbare Download-Karten ----------
   Bewusst dieselbe Kartenfarb-Logik wie tobidu/preistabelle (amber/teal/
   violet) statt einer neuen Farbsprache — konsistentes Designsystem statt
   Einzelerfindung je Seite (Rollout-Feinschliff, Bericht Nr. 30). */
.tobidu-download-card {
    text-align: center;
    transition: box-shadow 0.25s ease;
}

.tobidu-download-card:hover,
.tobidu-download-card:focus-within {
    box-shadow: var(--shadow-md), 0 0 0 4px rgba(255, 255, 255, 0.4);
}

/* Bericht Nr. 45 — Malvorlagen-Hinweis als eigene Karte statt Fließtext. */
.tobidu-downloads-malvorlagen {
    margin-top: var(--space-8);
    background: var(--color-bg-cream);
    border-radius: var(--radius-xl);
    padding: var(--space-6) var(--space-7);
}

.tobidu-downloads-malvorlagen h2 {
    margin-top: 0;
}

.tobidu-download-card__icon {
    display: block;
    font-size: 2.25rem;
    margin-bottom: var(--space-2);
}

body .tobidu-download-card--amber {
    background: var(--color-card-amber);
    color: var(--color-card-amber-text);
}

body .tobidu-download-card--teal {
    background: var(--color-card-teal);
    color: #fff;
}

body .tobidu-download-card--violet {
    background: var(--color-card-violet);
    color: #fff;
}

.tobidu-download-card--teal .tobidu-download-card__btn,
.tobidu-download-card--violet .tobidu-download-card__btn {
    background: #fff;
    color: var(--color-text);
}

.tobidu-download-card__btn {
    width: 100%;
}

/* ---------- Startseite: FAQ-Teaser (Bericht Nr. 36) ---------- */
body .tobidu-faq-teaser {
    background: var(--color-bg-sky);
    padding-block: var(--space-8);
}

.tobidu-faq-teaser__inner {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    flex-wrap: wrap;
    background: var(--color-bg);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    padding: var(--space-6);
}

.tobidu-faq-teaser__icon {
    font-size: 2.5rem;
    flex: none;
}

.tobidu-faq-teaser__inner h2 {
    font-size: var(--fs-h3);
    margin: 0 0 var(--space-1);
}

.tobidu-faq-teaser__inner p {
    margin: 0;
    color: var(--color-text-muted);
}

.tobidu-faq-teaser__inner .btn {
    margin-left: auto;
    white-space: nowrap;
}

/* Bericht Nr. 46 — Fund beim Homepage-Final-Pass: der CTA-Button lief auf
   schmalen Mobile-Breiten (< 480px) durch `white-space:nowrap` über den
   Viewport hinaus (horizontaler Overflow, von `overflow-x:hidden` auf
   body zwar visuell verdeckt, aber technisch vorhanden). Auf schmalen
   Breiten darf der Button-Text umbrechen. */
@media (max-width: 480px) {
    .tobidu-faq-teaser__inner .btn {
        white-space: normal;
        margin-left: 0;
        text-align: center;
    }
}

/* ---------- Startseite: Anfahrt-Kurzübersicht (Bericht Nr. 36) ---------- */
/* Bericht Nr. 58 — Figma-Referenz nutzt für Anfahrt() dieselbe dunkle
   Warmbraun-Fläche (#1A1200) wie OpeningHours()/Geschichte-Timeline (siehe
   Kommentar geburtstagspakete/render.php Bericht 56); vorher stand hier
   fälschlich das kühle Blau-Navy-Token. Die Pin-Karte innen nutzte den
   korrekten Braunton (#2a2010/#1a1200) bereits — jetzt passt die ganze
   Section dazu. */
body .tobidu-home-anfahrt {
    background: #1a1200;
    color: var(--color-on-navy);
    padding-block: var(--space-10);
}

.tobidu-home-anfahrt h2 {
    color: #fff;
    font-family: var(--font-heading);
    font-weight: var(--fw-heading);
}

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

.tobidu-home-anfahrt__list {
    list-style: none;
    margin: var(--space-6) 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.tobidu-home-anfahrt__list li {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
}

.tobidu-home-anfahrt__list li > span:first-child {
    font-size: 1.25rem;
    flex: none;
}

.tobidu-home-anfahrt__list a {
    color: var(--color-accent);
}

.tobidu-home-anfahrt__pin {
    background: linear-gradient(145deg, #2a2010, #1a1200);
    border-radius: var(--radius-xl);
    min-height: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    position: relative;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
}

/* Gerastertes Pseudo-Karten-Muster (Figma-Referenz: kein echtes Kartenmaterial
   nötig, reine Deko-Grafik) — dezentes Linienraster in Orange. */
.tobidu-home-anfahrt__pin-grid {
    position: absolute;
    inset: 0;
    opacity: 0.07;
    background-image:
        linear-gradient(rgba(255, 107, 53, 1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 107, 53, 1) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
}

/* Puls-Ringe um den Pin — dieselbe Keyframe-Logik wie das bestehende
   .tobidu-hero__chip-dot-Pulsieren (pulse-ring), hier auf 3 versetzte Ringe
   erweitert (Figma-Referenz "Anfahrt"-Kartenvisualisierung). */
.tobidu-home-anfahrt__pin-ring {
    position: absolute;
    border-radius: 50%;
    /* Bericht Nr. 58 — vorher kaum sichtbar (0.25 Deckkraft, gedämpftes
       Orange auf ohnehin dunkler Fläche); heller/kräftiger gemacht. */
    border: 2px solid rgba(255, 154, 85, 0.55);
    pointer-events: none;
    animation: tobidu-anfahrt-pulse 2.5s ease-out infinite;
}

.tobidu-home-anfahrt__pin-ring--1 { width: 130px; height: 130px; animation-delay: 0s; }
.tobidu-home-anfahrt__pin-ring--2 { width: 180px; height: 180px; animation-delay: 0.5s; }
.tobidu-home-anfahrt__pin-ring--3 { width: 230px; height: 230px; animation-delay: 1s; }

@keyframes tobidu-anfahrt-pulse {
    0% { transform: scale(0.85); opacity: 0.6; }
    100% { transform: scale(1.15); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .tobidu-home-anfahrt__pin-ring {
        animation: none;
        opacity: 0;
    }
}

.tobidu-home-anfahrt__pin-icon {
    position: relative;
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.25rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary), #ff9a55);
    box-shadow: 0 8px 28px rgba(255, 107, 53, 0.4);
}

.tobidu-home-anfahrt__pin-text {
    position: relative;
    font-family: var(--font-heading);
    font-weight: var(--fw-heading);
    font-size: 1.25rem;
    color: #fff;
    margin-top: var(--space-2);
}

.tobidu-home-anfahrt__pin-sub {
    position: relative;
    font-size: var(--fs-sm);
    color: #9a8a70;
}

@media (min-width: 768px) {
    .tobidu-home-anfahrt__inner {
        grid-template-columns: 1fr 1fr;
    }
}

/* ---------- Speisekarte: echte Speisekarten-Grafiken zum Antippen ----------
   Bericht Nr. 38: Mobile hat höchste Priorität (QR-Code-Nutzung vor Ort am
   Tisch/an der Kasse) — Karten sind auf Mobile bereits volle Breite, Bild
   bestimmt die Höhe (kein Crop, volle Lesbarkeit), Tap öffnet die
   Originalgröße in neuem Tab (natives Pinch-Zoom, kein eigenes JS nötig). */
.tobidu-speisekarte-gallery-section {
    background: var(--color-bg-cream);
}

.tobidu-speisekarte-gallery {
    list-style: none;
    margin: var(--space-6) 0 0;
    padding: 0;
    display: grid;
    gap: var(--space-5);
    grid-template-columns: 1fr;
}

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

.tobidu-speisekarte-gallery__item a {
    position: relative;
    display: block;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.tobidu-speisekarte-gallery__item a:hover,
.tobidu-speisekarte-gallery__item a:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}

.tobidu-speisekarte-gallery__item img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}

.tobidu-speisekarte-gallery__zoom {
    position: absolute;
    right: var(--space-3);
    bottom: var(--space-3);
    background: rgba(26, 18, 0, 0.72);
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--fs-sm);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    pointer-events: none;
}

/* Bericht 95: Kategorie-Überschrift + Fakten-Badges über jeder Speisekarten-
   Grafik, damit sofort erkennbar ist, um welche Kategorie es sich handelt. */
.tobidu-speisekarte-gallery__item {
    scroll-margin-top: 6rem;
}

.tobidu-speisekarte-gallery__head {
    margin-bottom: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-lg, 20px);
    border-left: 5px solid transparent;
}

.tobidu-speisekarte-gallery__head h3 {
    margin: 0 0 var(--space-2);
    font-size: var(--fs-lg, 1.25rem);
}

.tobidu-speisekarte-gallery__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.tobidu-speisekarte-gallery__badges span {
    /* Bericht 96: fester dunkler Text statt geerbter Farbe — auf
       orange/teal-Köpfen (weißer Fließtext) war der Pillen-Text auf dem
       hellen Pillen-Hintergrund vorher praktisch unlesbar (Weiß auf Weiß). */
    background: rgba(255, 255, 255, 0.92);
    color: #1a1200;
    border-radius: var(--radius-full);
    padding: 0.3rem 0.8rem;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.78rem;
}

.tobidu-speisekarte-gallery__head--orange {
    background: var(--color-card-orange);
    color: var(--color-card-orange-text);
    border-left-color: #ff6b35;
}

.tobidu-speisekarte-gallery__head--amber {
    background: var(--color-card-amber);
    color: var(--color-card-amber-text);
    border-left-color: #e91e8c;
}

.tobidu-speisekarte-gallery__head--teal {
    background: var(--color-card-teal);
    color: var(--color-card-teal-text);
    border-left-color: #00c4a0;
}

/* ---------- Speisekarte: Kategorie-Icons statt reiner Textkarten ---------- */
.tobidu-speisekarte-card {
    text-align: center;
}

.tobidu-speisekarte-card__icon {
    display: block;
    font-size: 2.5rem;
    margin-bottom: var(--space-2);
}

body .tobidu-speisekarte-card--orange {
    background: var(--color-card-orange);
    color: var(--color-card-orange-text);
}

body .tobidu-speisekarte-card--amber {
    background: var(--color-card-amber);
    color: var(--color-card-amber-text);
}

body .tobidu-speisekarte-card--teal {
    background: var(--color-card-teal);
    color: var(--color-card-teal-text);
}

/* Bericht 95: Karten sind jetzt Sprungmarken-Links zu den Kategorien. */
.tobidu-speisekarte-card--link {
    display: block;
    text-decoration: none;
    transition: transform var(--transition-base, 0.2s ease), box-shadow var(--transition-base, 0.2s ease);
}

.tobidu-speisekarte-card--link:hover,
.tobidu-speisekarte-card--link:focus-visible {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.tobidu-speisekarte-card__cta {
    display: inline-block;
    margin-top: var(--space-3);
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: var(--fs-sm);
}

.tobidu-group-card__price {
    margin-top: var(--space-3);
    font-family: var(--font-heading);
    font-weight: var(--fw-heading);
    font-size: var(--fs-h3);
}

/* Checkliste mit Häkchen-Icon statt Standard-Listenpunkt — konsistentes
   "erledigt"-Vokabular wie in den Geburtstagspaketen. */
.tobidu-check-list {
    list-style: none;
    margin: var(--space-4) 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.tobidu-check-list li {
    padding-left: var(--space-6);
    position: relative;
}

.tobidu-check-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Bestehende Deko-Layer (.tobidu-deco-layer--bubbles/-faq auf Kontakt/FAQ)
   bleiben unverändert kompatibel mit der neuen Flächenfarbe. */

/* ==========================================================================
   Bericht Nr. 40 — "/preise-und-oeffnungszeiten/" 1:1 gegen den echten
   Figma-Make-Quellcode (Komponenten OpeningHours()/Tickets(), App.tsx)
   nachgebaut. NUR über den Wrapper `.tobidu-preise-figma` scoped, der
   ausschließlich auf page-preise-und-oeffnungszeiten.php um die geteilten
   Blocks tobidu/oeffnungszeiten + tobidu/preistabelle gelegt ist — die
   Startseite verwendet dieselben Blocks außerhalb dieses Wrappers und bleibt
   dadurch unverändert. Markup der Blocks selbst (inkl. <table> für
   Öffnungszeiten, siehe Bericht Nr. 24 Barrierefreiheits-Entscheidung) wird
   NICHT verändert — die Tabelle wird hier rein per CSS als Pill-Zeilenliste
   dargestellt (thead visuell versteckt, tbody/tr/td auf Flex umgestellt).
   ========================================================================== */

/* ---------- Öffnungszeiten: dunkle Navy-Section, 2-spaltig (Figma: #1A1200) ---------- */
body .tobidu-oeffnungszeiten {
    position: relative;
    overflow: hidden;
    background: #1a1200;
    padding: 4.5rem 0;
    z-index: 0;
}

body .tobidu-oeffnungszeiten::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background: #1a1200;
    z-index: -2;
}

.tobidu-oeffnungszeiten::after {
    content: "";
    position: absolute;
    top: -80px;
    right: -100px;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    background: rgba(255, 107, 53, 0.08);
    pointer-events: none;
    z-index: -1;
}

/* Bericht Nr. 49 — zweiter Deko-Kreis (unten links) 1:1 aus Figma
   ergänzt, war bisher nicht übernommen (echtes Element statt Pseudo-
   Element, da ::before/::after bereits belegt sind). */
.tobidu-oeffnungszeiten__deco-2 {
    position: absolute;
    bottom: -60px;
    left: -80px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: rgba(255, 214, 10, 0.06);
    pointer-events: none;
    z-index: -1;
}

.tobidu-oeffnungszeiten__title {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 214, 10, 0.12);
    border: 1px solid rgba(255, 214, 10, 0.25);
    padding: 0.375rem 1rem;
    border-radius: 999px;
    color: #ffd60a;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 1rem;
}

.tobidu-oeffnungszeiten__table {
    display: block;
    width: 100%;
    max-width: 640px;
    margin: 0;
    border-collapse: separate;
}

.tobidu-oeffnungszeiten__table caption {
    display: block;
}

.tobidu-oeffnungszeiten__table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.tobidu-oeffnungszeiten__table tbody {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.tobidu-oeffnungszeiten__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 13px 20px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.2s;
}

.tobidu-oeffnungszeiten__row th,
.tobidu-oeffnungszeiten__row td {
    display: block;
    padding: 0;
    border: none;
    text-align: left;
    font-weight: 600;
    font-size: 0.95rem;
    color: #9a8a70;
}

.tobidu-oeffnungszeiten__row td {
    text-align: right;
    font-weight: 700;
    color: #e5d5b5;
}

.tobidu-oeffnungszeiten__row--today {
    background: linear-gradient(135deg, #ff6b35, #ff9a55);
    border-color: transparent;
    transform: scale(1.02);
    box-shadow: 0 8px 28px rgba(255, 107, 53, 0.4);
}

.tobidu-oeffnungszeiten__row--today th,
.tobidu-oeffnungszeiten__row--today td {
    color: #fff;
    font-weight: 900;
}

.tobidu-oeffnungszeiten__row--closed td {
    color: #7a6a50;
    font-weight: 600;
}

.tobidu-oeffnungszeiten__badge {
    display: inline-block;
    margin-left: 0.5em;
    font-size: 0.8em;
    font-weight: 700;
}

/* Bericht Nr. 46 — bisher fehlende linke Spalte 1:1 nach Figma
   OpeningHours() ergänzt: Headline + kurzer Teaser + Telefon/E-Mail,
   statt nur dem Badge über einer sonst leeren Fläche. */
.tobidu-oeffnungszeiten__headline {
    font-family: var(--font-heading);
    font-weight: var(--fw-heading);
    font-size: clamp(1.5rem, 3vw, 2.4rem);
    color: #fff;
    margin: 0 0 1rem;
    line-height: 1.15;
}

.tobidu-oeffnungszeiten__lead {
    color: #9a8a70;
    font-size: 0.95rem;
    line-height: 1.7;
    max-width: 360px;
    margin: 0 0 1.5rem;
}

.tobidu-oeffnungszeiten__contact {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 0;
}

.tobidu-oeffnungszeiten__contact a {
    color: #ffd60a;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.95rem;
}

.tobidu-oeffnungszeiten__contact a:last-child {
    color: #9a8a70;
    font-weight: 600;
    font-size: 0.85rem;
}

.tobidu-oeffnungszeiten__hinweis {
    max-width: 640px;
    color: #9a8a70;
    margin-top: 1.5rem;
}

.tobidu-oeffnungszeiten__hinweis--sonder strong {
    color: #ffd60a;
}

@media (min-width: 768px) {
    .tobidu-oeffnungszeiten__inner {
        display: grid;
        grid-template-columns: 1fr 1.3fr;
        gap: 3.5rem;
        align-items: center;
    }

    .tobidu-oeffnungszeiten__title {
        display: inline-flex;
    }

    .tobidu-oeffnungszeiten__table {
        grid-column: 2;
        grid-row: 1 / span 4;
    }

    .tobidu-oeffnungszeiten__intro,
    .tobidu-oeffnungszeiten__hinweis {
        grid-column: 1;
    }
}

/* ---------- Preise: helle Section, große Gradient-Pillkarten (Figma: #FFFBF5) ---------- */
body .tobidu-preise-figma .tobidu-preistabelle {
    background: #fffbf5;
    padding: 5rem 0;
    max-width: none;
    margin: 0;
}

.tobidu-preise-figma .tobidu-preistabelle__title {
    text-align: center;
    margin-bottom: 2.5rem;
}

/* Bericht Nr. 53 — vorher 5 Karten in einer einzigen, sehr breiten Zeile
   (grid, 5 Spalten); jetzt als zentriertes Flex-Wrap-Layout, damit die 5
   Karten (bei genug Breite) auf 2 Zeilen umbrechen und die zweite,
   unvollständige Zeile mittig statt linksbündig steht. */
.tobidu-preise-figma .tobidu-preistabelle__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 1000px;
    margin: 0 auto;
    gap: 1.25rem;
}

.tobidu-preise-figma .tobidu-preistabelle__card {
    min-width: 0;
    flex: 1 1 260px;
    max-width: 280px;
}

@media (max-width: 480px) {
    .tobidu-preise-figma .tobidu-preistabelle__card {
        flex-basis: 100%;
        max-width: 360px;
    }
}

.tobidu-preise-figma .tobidu-preistabelle__hinweis,
.tobidu-preise-figma .tobidu-preistabelle__bezeichnung {
    overflow-wrap: break-word;
}

body .tobidu-preise-figma .tobidu-preistabelle__card {
    border-radius: 28px;
    padding: 1.9rem 1.4rem;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

body .tobidu-preise-figma .tobidu-preistabelle__card:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.18);
}

body .tobidu-preise-figma .tobidu-preistabelle__card--amber {
    background: linear-gradient(135deg, #ffd60a, #ffbc00);
}

body .tobidu-preise-figma .tobidu-preistabelle__card--orange {
    background: linear-gradient(135deg, #ff6b35, #ff9a55);
}

body .tobidu-preise-figma .tobidu-preistabelle__card--teal {
    background: linear-gradient(135deg, #00c4a0, #00a890);
}

body .tobidu-preise-figma .tobidu-preistabelle__card--violet {
    background: linear-gradient(135deg, #7e57c2, #9c6dd8);
}

.tobidu-preise-figma .tobidu-preistabelle__icon {
    font-size: 2.25rem;
    margin-bottom: 0.3rem;
}

.tobidu-preise-figma .tobidu-preistabelle__card--amber .tobidu-preistabelle__kategorie,
.tobidu-preise-figma .tobidu-preistabelle__card--amber .tobidu-preistabelle__bezeichnung,
.tobidu-preise-figma .tobidu-preistabelle__card--amber .tobidu-preistabelle__preis {
    color: #1a1200;
}

.tobidu-preise-figma .tobidu-preistabelle__card--amber .tobidu-preistabelle__hinweis {
    color: rgba(26, 18, 0, 0.6);
}

.tobidu-preise-figma .tobidu-preistabelle__card--orange .tobidu-preistabelle__kategorie,
.tobidu-preise-figma .tobidu-preistabelle__card--orange .tobidu-preistabelle__bezeichnung,
.tobidu-preise-figma .tobidu-preistabelle__card--orange .tobidu-preistabelle__preis,
.tobidu-preise-figma .tobidu-preistabelle__card--teal .tobidu-preistabelle__kategorie,
.tobidu-preise-figma .tobidu-preistabelle__card--teal .tobidu-preistabelle__bezeichnung,
.tobidu-preise-figma .tobidu-preistabelle__card--teal .tobidu-preistabelle__preis,
.tobidu-preise-figma .tobidu-preistabelle__card--violet .tobidu-preistabelle__kategorie,
.tobidu-preise-figma .tobidu-preistabelle__card--violet .tobidu-preistabelle__bezeichnung,
.tobidu-preise-figma .tobidu-preistabelle__card--violet .tobidu-preistabelle__preis {
    color: #fff;
}

.tobidu-preise-figma .tobidu-preistabelle__card--orange .tobidu-preistabelle__hinweis,
.tobidu-preise-figma .tobidu-preistabelle__card--teal .tobidu-preistabelle__hinweis,
.tobidu-preise-figma .tobidu-preistabelle__card--violet .tobidu-preistabelle__hinweis {
    color: rgba(255, 255, 255, 0.75);
}

.tobidu-preise-figma .tobidu-preistabelle__kategorie {
    font-weight: 900;
    font-size: 1.15rem;
}

.tobidu-preise-figma .tobidu-preistabelle__bezeichnung {
    font-size: 0.8rem;
    opacity: 0.85;
}

.tobidu-preise-figma .tobidu-preistabelle__preis {
    font-weight: 900;
    font-size: 1.35rem;
    margin-top: 0.5rem;
}

.tobidu-preise-figma .tobidu-preistabelle__hinweis {
    font-size: 0.78rem;
}

/* ---------- Info-Row: 3 einzelne, schmale Karten (Figma: Socken/EC/Kein-Essen) ---------- */
/* Bericht Nr. 52 — vorher EIN durchgehend breiter weißer Kasten über die
   volle Container-Breite; jetzt 3 eigenständige, kompaktere Karten mit
   Zwischenraum (näher am Figma-Vorbild, wirkt weniger "gestreckt"). */
body .tobidu-preise-figma__info {
    background: #fffbf5;
    padding-top: 0;
    padding-bottom: 2.5rem;
}

.tobidu-preise-figma__info-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

@media (min-width: 700px) {
    .tobidu-preise-figma__info-row {
        grid-template-columns: repeat(3, 1fr);
    }
}

.tobidu-preise-figma__info-item {
    background: #fff;
    border-radius: 20px;
    padding: 1.4rem 1.5rem;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07);
    border: 1px solid rgba(26, 18, 0, 0.07);
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.tobidu-preise-figma__info-icon {
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: #fff5e6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

.tobidu-preise-figma__info-item strong {
    display: block;
    font-size: 0.95rem;
    color: #1a1200;
    margin-bottom: 0.2rem;
}

.tobidu-preise-figma__info-item p {
    font-size: 0.85rem;
    color: #7a6a50;
    line-height: 1.55;
    margin: 0;
}

.tobidu-preise-figma__cta {
    text-align: center;
    margin-top: 2.5rem;
}

.tobidu-preise-figma__cta .btn--primary {
    box-shadow: 0 12px 40px rgba(255, 107, 53, 0.45);
}

/* ==========================================================================
   Seite "Preise & Öffnungszeiten" v2 (Bericht Nr. 61) — 1:1 gegen den
   tatsächlichen Figma-Make-Quellcode (PricePage.tsx) nachgebaut, inkl.
   Effekte/Animationen. Eigener Namensraum ".tobidu-pv2-*", bewusst NICHT
   ".tobidu-preise-figma" wiederverwendet — diese Klasse ist bereits durch
   die Startseiten-Eintrittspreise-Teaser-Sektion belegt (front-page.php),
   eine Vermischung hätte dort ungewollte Seiteneffekte ausgelöst.
   ========================================================================== */

.tobidu-pv2-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--space-5);
    position: relative;
    z-index: 1;
}

.tobidu-pv2-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 1.1rem;
    border-radius: 999px;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    background: rgba(0, 0, 0, 0.04);
    color: #7a6a50;
}

.tobidu-pv2-badge--gold {
    background: rgba(255, 214, 10, 0.12);
    border: 1px solid rgba(255, 214, 10, 0.25);
    color: #ffd60a;
}

.tobidu-pv2-badge--orange {
    background: rgba(255, 107, 53, 0.09);
    color: #ff6b35;
    margin-bottom: var(--space-4);
}

/* ---------- Hero ---------- */
.tobidu-pv2-hero {
    background: linear-gradient(150deg, #1a1200 0%, #2c2010 60%, #1a1200 100%);
    padding: var(--space-11, 5rem) 0 0;
    position: relative;
    overflow: hidden;
}

.tobidu-pv2-hero__dots {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255, 107, 53, 0.12) 1.5px, transparent 1.5px);
    background-size: 28px 28px;
    pointer-events: none;
}

.tobidu-pv2-hero__glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.tobidu-pv2-hero__glow--1 {
    top: -60px;
    right: -60px;
    width: 320px;
    height: 320px;
    background: rgba(255, 107, 53, 0.08);
}

.tobidu-pv2-hero__glow--2 {
    bottom: 20px;
    left: -40px;
    width: 240px;
    height: 240px;
    background: rgba(255, 214, 10, 0.06);
}

/* Schwebende Holz-Infotafel (Bericht Nr. 62) — 1:1 Figma-Vorgabe
   (PricePage.tsx "price-badge-logo"): oben rechts, leichte Float-
   Animation (.float, bereits global in decorations.css definiert),
   Drop-Shadow in Markenorange. Auf schmalen Viewports ausgeblendet,
   damit sie den Hero-Titel nicht überlappt (identisch zur Figma-Regel). */
.tobidu-pv2-hero__badge-img {
    position: absolute;
    top: 24px;
    right: 40px;
    width: 160px;
    height: auto;
    opacity: 0.92;
    z-index: 3;
    pointer-events: none;
    filter: drop-shadow(0 12px 32px rgba(255, 107, 53, 0.35));
}

@media (max-width: 900px) {
    .tobidu-pv2-hero__badge-img {
        display: none;
    }
}

.tobidu-pv2-hero__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--space-5) var(--space-11, 5rem);
    position: relative;
    z-index: 2;
    text-align: center;
}

.tobidu-pv2-hero__title {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: clamp(2rem, 5vw, 3.75rem);
    color: #fff;
    line-height: 1.05;
    margin: var(--space-5) 0 var(--space-4);
}

/* Shimmer-Text-Verlauf — 1:1 aus PricePage.tsx (animierter Hintergrund-
   Verlauf, per background-clip auf den Text maskiert). */
.tobidu-pv2-shimmer {
    background: linear-gradient(125deg, #ff6b35 0%, #ffd60a 50%, #ff6b35 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: tobidu-pv2-shimmer 3s linear infinite;
}

@keyframes tobidu-pv2-shimmer {
    to { background-position: 200% center; }
}

.tobidu-pv2-hero__text {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.75);
    max-width: 520px;
    margin: 0 auto var(--space-6);
    line-height: 1.75;
}

.tobidu-pv2-status {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: rgba(0, 196, 160, 0.12);
    border: 1px solid rgba(0, 196, 160, 0.3);
    padding: 0.6rem 1.25rem;
    border-radius: 999px;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.85rem;
    color: #00c4a0;
}

.tobidu-pv2-status--closed {
    background: rgba(200, 200, 200, 0.1);
    border-color: rgba(255, 255, 255, 0.1);
    color: #999;
}

.tobidu-pv2-status__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #00c4a0;
    box-shadow: 0 0 0 3px rgba(0, 196, 160, 0.25);
    animation: tobidu-pv2-pulse-ring 1.5s infinite;
    flex: none;
}

.tobidu-pv2-status--closed .tobidu-pv2-status__dot {
    background: #888;
    box-shadow: none;
    animation: none;
}

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

.tobidu-pv2-status__badge {
    margin-left: 0.4rem;
    background: #ff6b35;
    color: #fff;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 0.68rem;
}

.tobidu-pv2-hero__notice {
    max-width: 560px;
    margin: var(--space-5) auto 0;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-lg, 16px);
    padding: var(--space-4);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9rem;
}

.tobidu-pv2-hero__notice p {
    margin: 0 0 0.4rem;
}

.tobidu-pv2-hero__notice p:last-child {
    margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
    .tobidu-pv2-shimmer,
    .tobidu-pv2-status__dot {
        animation: none;
    }
}

/* ---------- Wellen (jeweils mit Backdrop-Farbe gegen den bekannten
   "weißer Strich"-Effekt an transparenten Wellenrändern) ---------- */
.tobidu-pv2-wave {
    width: 100%;
    height: 60px;
    background-repeat: no-repeat;
    /* Bericht Nr. 64 — echter Bug gefunden: background-size:cover skaliert
       nach dem INTRINSISCHEN SVG-Seitenverhältnis (aus dem viewBox
       1440:80 ≈ 18:1), das schmaler ist als die tatsächliche Div-Box
       (~21:1 bei voller Seitenbreite) — dadurch wurde der obere,
       transparente Wellenbereich (zeigt die Backdrop-Farbe) weggeschnitten
       und nur noch die Fläche in der Fill-Farbe war sichtbar ("weißer/
       falscher Farbbalken"). 100% 100% streckt exakt auf die Div-Box,
       kein Crop mehr. */
    background-size: 100% 100%;
    background-position: center;
}

.tobidu-pv2-wave--hero-out {
    margin-top: -2px;
    background-color: #1a1200;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,60 C320,10 720,80 1080,20 C1260,0 1380,40 1440,55 L1440,80 L0,80 Z' fill='%23fffbf5'/%3E%3C/svg%3E");
}

.tobidu-pv2-wave--group-in {
    background-color: #fffbf5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,60 C320,10 720,80 1080,20 C1260,0 1380,40 1440,55 L1440,80 L0,80 Z' fill='%231a1200'/%3E%3C/svg%3E");
}

.tobidu-pv2-wave--group-out {
    margin-top: -2px;
    background-color: #fffbf5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,20 C320,70 720,0 1080,60 C1260,80 1380,40 1440,25 L1440,0 L0,0 Z' fill='%231a1200'/%3E%3C/svg%3E");
}

.tobidu-pv2-wave--cta-in {
    background-color: #fffbf5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,60 C320,10 720,80 1080,20 C1260,0 1380,40 1440,55 L1440,80 L0,80 Z' fill='%23ff6b35'/%3E%3C/svg%3E");
}

/* Reservierung (Bericht Nr. 173): eigenes Wave-Paar Creme<->Peach<->Dunkel,
   da der Abschnitt eine eigene Hintergrundfarbe (#fff2e8) statt des sonst
   verwendeten Creme/Dunkel-Paars bekommt. Gleiche "in"-Kurvenform wie
   group-in (schließt unten), bg = vorangehender Abschnitt, fill =
   folgender Abschnitt. */
.tobidu-pv2-wave--bd-res-in {
    background-color: #fffbf5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,60 C320,10 720,80 1080,20 C1260,0 1380,40 1440,55 L1440,80 L0,80 Z' fill='%23fff2e8'/%3E%3C/svg%3E");
}

.tobidu-pv2-wave--bd-res-out {
    background-color: #fff2e8;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,60 C320,10 720,80 1080,20 C1260,0 1380,40 1440,55 L1440,80 L0,80 Z' fill='%231a1200'/%3E%3C/svg%3E");
}

/* Peach (Reservierung) -> Creme (So geht's), Bericht Nr. 177 */
.tobidu-pv2-wave--bd-res-peach-out {
    background-color: #fff2e8;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,60 C320,10 720,80 1080,20 C1260,0 1380,40 1440,55 L1440,80 L0,80 Z' fill='%23fffbf5'/%3E%3C/svg%3E");
}

/* ---------- Preistabellen + Tab-Umschalter ---------- */
.tobidu-pv2-prices {
    background: #fffbf5;
    padding: var(--space-11, 5rem) 0;
}

.tobidu-pv2-tabs {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-9, 3.25rem);
}

.tobidu-pv2-tabs > div,
.tobidu-pv2-tabs {
    gap: 4px;
}

.tobidu-pv2-tab {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 0.75rem 1.75rem;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: #7a6a50;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

.tobidu-pv2-tab small {
    font-size: 0.7rem;
    font-weight: 600;
    opacity: 0.8;
}

.tobidu-pv2-tabs {
    background: #fff;
    border-radius: 999px;
    padding: 6px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.09);
}

.tobidu-pv2-tab--weekday.is-active {
    background: linear-gradient(135deg, #00c4a0, #00a888);
    color: #fff;
    box-shadow: 0 4px 16px rgba(0, 196, 160, 0.38);
}

.tobidu-pv2-tab--weekend.is-active {
    background: linear-gradient(135deg, #ff6b35, #ff9a55);
    color: #fff;
    box-shadow: 0 4px 16px rgba(255, 107, 53, 0.38);
}

.tobidu-pv2-tables {
    max-width: 760px;
    margin: 0 auto;
}

.tobidu-pv2-table-panel {
    display: none;
}

.tobidu-pv2-table-panel.is-active {
    display: block;
    animation: tobidu-pv2-fade-up 0.4s ease both;
}

@keyframes tobidu-pv2-fade-up {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 901px) {
    .tobidu-pv2-tables {
        max-width: 1100px;
    }

    .tobidu-pv2-tables {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-6, 1.75rem);
    }

    .tobidu-pv2-table-panel {
        display: block !important;
        animation: none !important;
    }
}

.tobidu-pv2-table {
    background: #fff;
    border-radius: 28px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.09);
    overflow: hidden;
    border: 2px solid rgba(var(--pv2-color-rgb), 0.13);
}

.tobidu-pv2-table__head {
    background: linear-gradient(135deg, var(--pv2-color), var(--pv2-color));
    padding: 1.75rem 2rem 1.5rem;
}

.tobidu-pv2-table__head .tobidu-pv2-badge {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    margin-bottom: 0.6rem;
}

.tobidu-pv2-table__head h2 {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 1.6rem;
    color: #fff;
    margin: 0 0 0.25rem;
}

.tobidu-pv2-table__head p {
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0;
}

.tobidu-pv2-table__rows {
    padding: 0.5rem 0;
}

.tobidu-pv2-table__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 2rem;
    background: #fff;
    transition: background 0.15s;
}

.tobidu-pv2-table__row.is-even {
    background: rgba(0, 0, 0, 0.015);
}

.tobidu-pv2-table__row:hover {
    background: rgba(var(--pv2-color-rgb), 0.05);
}

.tobidu-pv2-table__label {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.tobidu-pv2-table__icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(var(--pv2-color-rgb), 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex: none;
}

.tobidu-pv2-table__name {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.94rem;
    color: #1a1200;
}

.tobidu-pv2-table__note {
    font-size: 0.75rem;
    color: #00c4a0;
    font-weight: 600;
    margin-top: 0.15rem;
}

.tobidu-pv2-table__price {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 1.375rem;
    color: var(--pv2-color);
    white-space: nowrap;
}

.tobidu-pv2-table__foot {
    padding: 1rem 2rem 1.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.tobidu-pv2-table__warning {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--pv2-color);
    line-height: 1.5;
    margin: 0 0 0.75rem;
}

.tobidu-pv2-table__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 999px;
    background: var(--pv2-color);
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.85rem;
    text-decoration: none;
    transition: transform var(--transition-fast);
}

.tobidu-pv2-table__cta:hover,
.tobidu-pv2-table__cta:focus-visible {
    transform: translateY(-2px);
}

.tobidu-pv2-notes {
    margin-top: var(--space-8, 2.5rem);
    max-width: 1100px;
    margin-inline: auto;
    background: #fff;
    border-radius: 24px;
    padding: 1.5rem 1.75rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
    border: 1px solid rgba(26, 18, 0, 0.07);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5, 1.5rem);
}

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

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

.tobidu-pv2-note {
    display: flex;
    gap: 0.875rem;
}

.tobidu-pv2-note__icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: #fff5e6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.375rem;
    flex: none;
}

.tobidu-pv2-note__title {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.875rem;
    color: #1a1200;
    margin-bottom: 0.2rem;
}

.tobidu-pv2-note__text {
    font-size: 0.8rem;
    color: #7a6a50;
    line-height: 1.55;
}

/* ---------- Gruppenpreise (dunkle Insel-Fläche) ---------- */
.tobidu-pv2-groupwrap {
    position: relative;
}

.tobidu-pv2-group {
    background: #1a1200;
    padding: var(--space-11, 5rem) 0 var(--space-12, 5.5rem);
    position: relative;
    overflow: hidden;
}

.tobidu-pv2-group__glow {
    position: absolute;
    top: -60px;
    right: -60px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: rgba(255, 107, 53, 0.07);
    pointer-events: none;
}

.tobidu-pv2-group__head {
    text-align: center;
    margin-bottom: var(--space-8, 3rem);
}

.tobidu-pv2-group__head h2 {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: clamp(1.625rem, 3.5vw, 2.75rem);
    color: #fff;
    margin: 0.875rem 0 0.6rem;
}

.tobidu-pv2-group__head p {
    color: #9a8a70;
    font-size: 0.95rem;
    max-width: 480px;
    margin: 0 auto;
    line-height: 1.75;
}

.tobidu-pv2-group__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6, 1.75rem);
    max-width: 800px;
    margin: 0 auto var(--space-8, 3rem);
}

@media (max-width: 640px) {
    .tobidu-pv2-group__grid {
        grid-template-columns: 1fr;
    }
}

.tobidu-pv2-package {
    border-radius: 28px;
    padding: 2rem 1.75rem;
    position: relative;
    background: rgba(255, 255, 255, 0.04);
    border: 2px solid rgba(var(--pv2-pkg-color-rgb), 0.2);
    transition: transform 0.25s, box-shadow 0.25s;
}

.tobidu-pv2-package--highlight {
    background: linear-gradient(145deg, rgba(var(--pv2-pkg-color-rgb), 0.13), rgba(255, 255, 255, 0.04));
    border-color: rgba(var(--pv2-pkg-color-rgb), 0.33);
}

.tobidu-pv2-package:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 48px rgba(var(--pv2-pkg-color-rgb), 0.25);
}

.tobidu-pv2-package__ribbon {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--pv2-pkg-color);
    color: #fff;
    padding: 0.3rem 1.1rem;
    border-radius: 999px;
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 0.72rem;
    white-space: nowrap;
    box-shadow: 0 4px 16px rgba(var(--pv2-pkg-color-rgb), 0.35);
}

.tobidu-pv2-package__icon {
    display: block;
    font-size: 2.25rem;
    margin-bottom: 0.5rem;
}

.tobidu-pv2-package__name {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 1.375rem;
    color: #fff;
    margin-bottom: 0.25rem;
}

.tobidu-pv2-package__price {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin-bottom: var(--space-6, 1.5rem);
}

.tobidu-pv2-package__price span {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 3rem;
    color: var(--pv2-pkg-color);
}

.tobidu-pv2-package__price small {
    color: #9a8a70;
    font-size: 0.95rem;
}

.tobidu-pv2-package__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tobidu-pv2-package__list li {
    position: relative;
    padding-left: 1.75rem;
    margin-bottom: 0.7rem;
    color: #d5c5a5;
    font-size: 0.875rem;
    line-height: 1.4;
}

.tobidu-pv2-package__list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0.05rem;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--pv2-pkg-color);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tobidu-pv2-package__cta {
    display: block;
    margin-top: var(--space-6, 1.5rem);
    padding: 0.8rem;
    border-radius: 999px;
    text-align: center;
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 0.875rem;
    text-decoration: none;
    border: 2px solid var(--pv2-pkg-color);
    color: var(--pv2-pkg-color);
    transition: background var(--transition-fast), color var(--transition-fast);
}

.tobidu-pv2-package--highlight .tobidu-pv2-package__cta {
    background: var(--pv2-pkg-color);
    color: #fff;
}

.tobidu-pv2-package__cta:hover,
.tobidu-pv2-package__cta:focus-visible {
    background: var(--pv2-pkg-color);
    color: #fff;
}

.tobidu-pv2-group__closed {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: var(--space-6, 1.5rem);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.tobidu-pv2-group__closed-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.tobidu-pv2-group__closed-title {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.05rem;
    color: #fff;
    margin-bottom: 0.5rem;
}

.tobidu-pv2-group__closed p {
    color: #9a8a70;
    font-size: 0.875rem;
    line-height: 1.7;
    margin: 0 0 var(--space-4, 1rem);
}

.tobidu-pv2-group__closed strong {
    color: #ffd60a;
}

.tobidu-pv2-group__closed-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3, 1rem);
    justify-content: center;
    align-items: center;
}

.tobidu-pv2-group__closed-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 999px;
    background: #ffd60a;
    color: #1a1200;
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 0.875rem;
    text-decoration: none;
    box-shadow: 0 6px 24px rgba(255, 214, 10, 0.4);
}

.tobidu-pv2-group__closed-link {
    color: #9a8a70;
    font-size: 0.85rem;
    text-decoration: underline;
}

.tobidu-pv2-group__closed-link:hover {
    color: #fff;
}

/* Hereinspaziert-Section jetzt zwischen zwei Cream-Flächen (Gruppenpreise-
   Ausgang und Öffnungszeiten-Section) — Hintergrund exakt angeglichen,
   damit kein zusätzlicher Wellen-Trenner nötig ist (identische Farbe). */
.tobidu-pv2-media-text {
    background: #fffbf5;
}

/* ---------- Öffnungszeiten ---------- */
.tobidu-pv2-hours {
    background: #fffbf5;
    padding: var(--space-8, 2.5rem) 0 var(--space-11, 5rem);
}

.tobidu-pv2-hours__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-9, 3.5rem);
    align-items: start;
}

@media (min-width: 768px) {
    .tobidu-pv2-hours__layout {
        grid-template-columns: 1fr 1.2fr;
    }
}

.tobidu-pv2-hours__title {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: clamp(1.625rem, 3vw, 2.625rem);
    color: #1a1200;
    margin: var(--space-4, 1rem) 0 var(--space-5, 1.5rem);
}

.tobidu-pv2-hours__cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-4, 1rem);
    margin-bottom: var(--space-7, 2rem);
}

.tobidu-pv2-hours__card {
    background: #fff;
    border-radius: 20px;
    padding: 1.25rem 1.4rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07);
    border: 2px solid rgba(0, 196, 160, 0.2);
}

.tobidu-pv2-hours__card--orange {
    border-color: rgba(255, 107, 53, 0.2);
}

.tobidu-pv2-hours__card-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.4rem;
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 0.95rem;
    color: #1a1200;
}

.tobidu-pv2-hours__dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #00c4a0;
    flex: none;
}

.tobidu-pv2-hours__card--orange .tobidu-pv2-hours__dot {
    background: #ff6b35;
}

.tobidu-pv2-hours__card-time {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 1.5rem;
    color: #00c4a0;
    margin-bottom: 0.25rem;
    line-height: 1.3;
}

.tobidu-pv2-hours__card--orange .tobidu-pv2-hours__card-time {
    font-size: 1.2rem;
    color: #ff6b35;
}

.tobidu-pv2-hours__card-sub {
    font-size: 0.8rem;
    color: #9a8a70;
}

.tobidu-pv2-hours__warning {
    background: #fff5e6;
    border-radius: 16px;
    padding: 1rem 1.25rem;
    border: 1px solid rgba(255, 107, 53, 0.2);
}

.tobidu-pv2-hours__warning-title {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.875rem;
    color: #ff6b35;
    margin-bottom: 0.4rem;
}

.tobidu-pv2-hours__warning p {
    font-size: 0.8rem;
    color: #7a6a50;
    line-height: 1.65;
    margin: 0;
}

/* Bericht Nr. 64 — jetzt zentriertes Section-Element (vorher in der
   rechten Grid-Spalte, wirkte "zu weit rechts" mit zu viel Abstand zur
   Wochenübersicht-Karte darunter) — kleiner und mit knappem Abstand. */
.tobidu-pv2-hours__badge-img {
    display: block;
    width: 130px;
    height: auto;
    margin: 0 auto var(--space-3, 0.75rem);
    filter: drop-shadow(0 12px 28px rgba(255, 107, 53, 0.25));
}

.tobidu-pv2-week {
    background: #fff;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.09);
}

.tobidu-pv2-week__head {
    background: linear-gradient(135deg, #ff6b35, #ff9a55);
    padding: 1.25rem 1.5rem;
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 1.125rem;
    color: #fff;
}

.tobidu-pv2-week__rows {
    padding: 0.5rem 0;
}

.tobidu-pv2-week__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 1.5rem;
    background: #fff;
    border-left: 3px solid transparent;
    transition: background var(--transition-fast);
}

.tobidu-pv2-week__row:nth-child(even) {
    background: rgba(0, 0, 0, 0.015);
}

.tobidu-pv2-week__row.is-weekend:not(.is-today) {
    border-left-color: rgba(255, 107, 53, 0.25);
}

.tobidu-pv2-week__row.is-today {
    background: linear-gradient(135deg, #ff6b35, #ff9a55);
}

.tobidu-pv2-week__day {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.94rem;
    color: #1a1200;
}

.tobidu-pv2-week__row.is-today .tobidu-pv2-week__day {
    font-weight: 900;
    color: #fff;
}

.tobidu-pv2-week__day-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
}

.tobidu-pv2-week__we-tag {
    font-size: 0.65rem;
    font-family: var(--font-heading);
    font-weight: 700;
    color: #ff6b35;
    background: rgba(255, 107, 53, 0.1);
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
}

.tobidu-pv2-week__time {
    text-align: right;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.8rem;
    color: #7a6a50;
}

.tobidu-pv2-week__row.is-today .tobidu-pv2-week__time {
    color: rgba(255, 255, 255, 0.95);
}

.tobidu-pv2-week__foot {
    padding: 1rem 1.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    background: #fffbf5;
}

.tobidu-pv2-week__foot p {
    font-size: 0.75rem;
    color: #9a8a70;
    line-height: 1.6;
    margin: 0;
}

/* ---------- Finale CTA ---------- */
.tobidu-pv2-cta {
    background: linear-gradient(135deg, #ff6b35 0%, #ff8c42 50%, #ffb347 100%);
    padding: var(--space-11, 5rem) 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.tobidu-pv2-cta__glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.tobidu-pv2-cta__glow--1 {
    top: -60px;
    left: -60px;
    width: 240px;
    height: 240px;
    background: rgba(255, 255, 255, 0.08);
}

.tobidu-pv2-cta__glow--2 {
    bottom: -40px;
    right: -40px;
    width: 200px;
    height: 200px;
    background: rgba(255, 255, 255, 0.06);
}

.tobidu-pv2-cta__inner {
    max-width: 620px;
    margin: 0 auto;
    padding: 0 var(--space-5);
    position: relative;
    z-index: 1;
}

.tobidu-pv2-cta__mascot {
    display: block;
    font-size: 3.5rem;
    margin-bottom: var(--space-4, 1rem);
}

.tobidu-pv2-cta__inner h2 {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: clamp(1.625rem, 4vw, 3rem);
    color: #fff;
    line-height: 1.1;
    margin: 0 0 0.875rem;
}

.tobidu-pv2-cta__inner p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.88);
    margin: 0 0 var(--space-8, 2.25rem);
    line-height: 1.7;
}

.tobidu-pv2-cta__actions {
    display: flex;
    gap: var(--space-4, 0.875rem);
    justify-content: center;
    flex-wrap: wrap;
}

.tobidu-pv2-cta__primary,
.tobidu-pv2-cta__secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 1.05rem 2.375rem;
    border-radius: 999px;
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 1.05rem;
    text-decoration: none;
    transition: transform 0.2s;
}

.tobidu-pv2-cta__primary {
    background: #fff;
    color: #ff6b35;
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.18);
}

.tobidu-pv2-cta__secondary {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.35);
    font-size: 1rem;
}

.tobidu-pv2-cta__primary:hover,
.tobidu-pv2-cta__primary:focus-visible {
    transform: scale(1.05);
}

.tobidu-pv2-cta__meta {
    margin-top: var(--space-4, 1rem) !important;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.65);
}

/* ---------- Mobile Sticky CTA ---------- */
.tobidu-pv2-mobilebar {
    display: none;
}

@media (max-width: 640px) {
    .tobidu-pv2-mobilebar {
        display: block;
        position: sticky;
        bottom: 0;
        z-index: 300;
        padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
        background: rgba(255, 251, 245, 0.97);
        -webkit-backdrop-filter: blur(16px);
        backdrop-filter: blur(16px);
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
    }

    .tobidu-pv2-mobilebar a {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.6rem;
        width: 100%;
        padding: 0.9rem;
        border-radius: 999px;
        background: linear-gradient(135deg, #ff6b35, #ff9a55);
        color: #fff;
        font-family: var(--font-heading);
        font-weight: 900;
        font-size: 1rem;
        text-decoration: none;
        box-shadow: 0 4px 20px rgba(255, 107, 53, 0.45);
    }

    /* Bericht Nr. 192 — Zwei-Button-Variante (Online-Ticket + Kinder-
       geburtstag), projektweit vereinheitlicht. Sticky-Container/Safe-Area/
       Backdrop/Schatten oben bleiben unverändert, nur der Inhalt wird zur
       Reihe aus zwei gleich hohen Buttons statt eines einzelnen. Farben
       aus bestehenden Design-Tokens: Orange (--color-primary, bereits die
       Farbe des bisherigen Einzel-Buttons) für Kindergeburtstag, Teal
       (--color-card-teal) für Online-Ticket — klar unterscheidbar, keine
       neue Farbe erfunden. */
    .tobidu-pv2-mobilebar--dual {
        display: flex;
        gap: 0.625rem;
    }

    .tobidu-pv2-mobilebar__btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
        flex: 1 1 0;
        min-width: 0;
        padding: 0.9rem 0.5rem;
        border-radius: 999px;
        color: #fff;
        font-family: var(--font-heading);
        font-weight: 900;
        font-size: 0.85rem;
        line-height: 1.15;
        text-align: center;
        text-decoration: none;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .tobidu-pv2-mobilebar__btn--ticket {
        background: linear-gradient(135deg, var(--color-card-teal), #14c79b);
        box-shadow: 0 4px 20px rgba(14, 166, 132, 0.4);
    }

    .tobidu-pv2-mobilebar__btn--birthday {
        background: linear-gradient(135deg, var(--color-primary), #ff9a55);
        box-shadow: 0 4px 20px rgba(255, 107, 53, 0.4);
    }
}

/* Sehr schmale Displays (< 360px): Icon + Text würden sonst zu eng —
   Zeilenumbruch statt Abschneiden, Button wächst in der Höhe mit. */
@media (max-width: 359px) {
    .tobidu-pv2-mobilebar__btn {
        white-space: normal;
        font-size: 0.78rem;
    }
}

/* ==========================================================================
   Seite "Online-Ticket buchen" (Bericht Nr. 65) — 1:1 gegen den
   tatsächlichen Figma-Make-Quellcode (TicketPage.tsx) nachgebaut. Nutzt
   viele bereits vorhandene .tobidu-pv2-*-Bausteine der Preise-Seite
   (Badges, Buttons, Wellen, Tab-/Tabellen-Mechanik) und ergänzt nur die
   seitenspezifischen Teile (.tobidu-ot-*).
   ========================================================================== */

/* Bericht 125: war vorher selbst ein 2-Spalten-Grid (Text | Öffnungszeiten-
   Karte) — jetzt ein einfacher Block, der das einheitliche
   .tobidu-page-hero__grid (Bild links/Text rechts) und die Öffnungszeiten-
   Karte darunter stapelt. */
.tobidu-ot-hero__layout {
    padding-bottom: var(--space-11, 5rem);
}

.tobidu-ot-hourscard-row {
    display: flex;
    justify-content: center;
    margin-top: var(--space-8, 2.5rem);
}

/* Bericht 126 (Architekten-Feedback): 420px war zu schmal — die Uhrzeit
   "10:00 – 14:30 & 15:00 – 19:00 Uhr" brach in eine zweite Zeile um.
   Breiter gemacht, damit die Zeiten immer einzeilig bleiben. */
.tobidu-ot-hourscard-row .tobidu-ot-hourscard {
    max-width: 640px;
    width: 100%;
}

@media (max-width: 480px) {
    .tobidu-ot-hourscard__time {
        font-size: 1.3rem;
    }
}

.tobidu-ot-hero__title {
    text-align: left;
}

.tobidu-ot-hero__text {
    text-align: left;
    margin-left: 0;
    max-width: 480px;
}

.tobidu-ot-infobox {
    display: flex;
    gap: 0.75rem;
    background: rgba(0, 196, 160, 0.1);
    border: 1px solid rgba(0, 196, 160, 0.3);
    border-radius: 18px;
    padding: 1rem 1.25rem;
    margin-bottom: var(--space-6, 1.75rem);
}

.tobidu-ot-infobox__icon {
    font-size: 1.375rem;
    flex: none;
}

.tobidu-ot-infobox__title {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 0.85rem;
    color: #00c4a0;
    margin-bottom: 0.4rem;
}

.tobidu-ot-infobox p {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.68);
    line-height: 1.6;
    margin: 0 0 0.5rem;
}

.tobidu-ot-infobox p:last-child {
    margin-bottom: 0;
}

.tobidu-ot-infobox a {
    color: #ff6b35;
    font-weight: 700;
}

.tobidu-ot-hero__actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.tobidu-ot-hero__secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.95rem;
    text-decoration: none;
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    transition: background var(--transition-fast);
}

.tobidu-ot-hero__secondary:hover,
.tobidu-ot-hero__secondary:focus-visible {
    background: rgba(255, 255, 255, 0.15);
}

.tobidu-ot-hourscard {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 28px;
    overflow: hidden;
}

.tobidu-ot-hourscard__head {
    background: linear-gradient(135deg, #ff6b35, #ff9a55);
    padding: 1.25rem 1.5rem;
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 1rem;
    color: #fff;
}

.tobidu-ot-hourscard__body {
    padding: 1.5rem;
}

.tobidu-ot-hourscard__status {
    margin-bottom: 0.75rem;
}

.tobidu-ot-hourscard__time {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 1.75rem;
    color: #fff;
    margin-bottom: 0.5rem;
}

.tobidu-ot-hourscard__facts {
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.tobidu-ot-hourscard__facts li {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.4;
}

/* ---------- Wellen (dediziert, Farbschema dieser Seite) ---------- */
.tobidu-ot-wave {
    width: 100%;
    height: 60px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
}

.tobidu-ot-wave--hero-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");
}

.tobidu-ot-wave--marquee-out {
    background-color: #ff8c42;
    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");
}

/* ---------- Marquee-Leiste ---------- */
.tobidu-ot-marquee {
    background: linear-gradient(90deg, #ff6b35, #ff9a55);
    overflow: hidden;
    padding: 0.75rem 0;
}

.tobidu-ot-marquee__track {
    display: flex;
    width: max-content;
    animation: tobidu-marquee-scroll 32s linear infinite;
}

.tobidu-ot-marquee:hover .tobidu-ot-marquee__track {
    animation-play-state: paused;
}

.tobidu-ot-marquee__item {
    display: flex;
    align-items: center;
    white-space: nowrap;
    padding: 0 1.75rem;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.875rem;
    color: #fff;
}

.tobidu-ot-marquee__dot {
    margin-left: 1.75rem;
    color: rgba(255, 255, 255, 0.4);
}

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

/* ---------- Head-Bausteine (Steps/Preise/Deals/Rules) ---------- */
.tobidu-ot-head {
    text-align: center;
    margin-bottom: var(--space-9, 3.5rem);
}

.tobidu-ot-head h2 {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: clamp(1.625rem, 3.5vw, 2.75rem);
    color: #1a1200;
    margin: 0.875rem 0 0.6rem;
}

.tobidu-ot-head p {
    color: #7a6a50;
    font-size: 0.95rem;
    max-width: 480px;
    margin: 0 auto;
    line-height: 1.75;
}

/* ---------- Buchungsschritte ---------- */
/* Bericht 126: Platzhalter-Position für das spätere Online-Ticket-System-
   Plugin (siehe Memory "project-plugin-placeholders") — dieselbe cream-
   farbene Fläche wie die direkt folgende "So funktioniert es"-Section,
   damit kein zusätzlicher Wellen-Übergang nötig ist. */
.tobidu-ot-ticketsystem {
    background: #fffbf5;
    padding: var(--space-10, 4rem) 0 0;
}

.tobidu-ot-ticketsystem__card {
    max-width: 640px;
    margin: 0 auto;
    background: #fff;
    border: 1.5px solid rgba(255, 107, 53, 0.18);
    border-radius: 28px;
    box-shadow: 0 8px 36px rgba(0, 0, 0, 0.08);
    padding: 2.5rem 2rem;
    text-align: center;
}

.tobidu-ot-ticketsystem__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff6b35, #ff9a55);
    font-size: 1.75rem;
    margin-bottom: 1rem;
    box-shadow: 0 8px 24px rgba(255, 107, 53, 0.35);
}

.tobidu-ot-ticketsystem__card h2 {
    margin: 0 0 0.75rem;
    color: var(--color-text, #1a1200);
}

.tobidu-ot-ticketsystem__card .tobidu-shop-soon-badge {
    margin-bottom: 1rem;
}

.tobidu-ot-ticketsystem__card p {
    color: #7a6a50;
    line-height: 1.75;
    margin: 0 0 1.5rem;
}

.tobidu-ot-ticketsystem__actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* .tobidu-ot-hero__secondary ist für den dunklen Hero gedacht (weißer
   Text auf halbtransparentem Weiß) — auf der hellen Platzhalter-Karte
   hier wäre das weißer Text auf Weiß (unsichtbar). Für diesen Kontext
   auf dunklen Text/farbigen Rand umgestellt. */
.tobidu-ot-ticketsystem__actions .tobidu-ot-hero__secondary {
    background: #fff;
    color: var(--color-text, #1a1200);
    border-color: rgba(255, 107, 53, 0.35);
}

.tobidu-ot-ticketsystem__actions .tobidu-ot-hero__secondary:hover,
.tobidu-ot-ticketsystem__actions .tobidu-ot-hero__secondary:focus-visible {
    background: rgba(255, 107, 53, 0.08);
}

.tobidu-ot-steps {
    background: #fffbf5;
    padding: var(--space-11, 5rem) 0;
}

.tobidu-ot-steps__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

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

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

.tobidu-ot-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 0.5rem;
}

.tobidu-ot-step__icon {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.tobidu-ot-step__num {
    display: block;
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 0.65rem;
    color: #ff6b35;
    letter-spacing: 0.1em;
    margin-bottom: 0.25rem;
}

.tobidu-ot-step__title {
    display: block;
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 0.95rem;
    color: #1a1200;
    margin-bottom: 0.375rem;
}

.tobidu-ot-step__text {
    display: block;
    font-size: 0.8rem;
    color: #7a6a50;
    line-height: 1.5;
}

.tobidu-ot-steps__cta {
    text-align: center;
    margin-top: var(--space-8, 3rem);
}

/* ---------- Preise (dunkle Fläche, ein Tab-Kärtchen) ---------- */
.tobidu-ot-prices {
    background: #1a1200;
    padding: var(--space-11, 5rem) 0 var(--space-12, 5.5rem);
    position: relative;
    overflow: hidden;
}

.tobidu-ot-prices .tobidu-ot-head h2,
.tobidu-ot-prices .tobidu-ot-head p {
    color: inherit;
}

.tobidu-ot-tabs {
    margin: var(--space-7, 2rem) auto 0;
}

.tobidu-ot-price-card {
    max-width: 680px;
    margin: 0 auto;
    background: #fff;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

/* Wichtig: anders als auf der Preise-Seite zeigt diese Karte NUR eine
   Tabelle gleichzeitig (Tab-Umschalter), auch auf Desktop — die dortige
   Media-Query-Regel (beide Panels ab 901px erzwungen sichtbar) muss hier
   deaktiviert bleiben. */
.tobidu-ot-price-card .tobidu-pv2-table-panel {
    display: none !important;
    animation: none !important;
}

.tobidu-ot-price-card .tobidu-pv2-table-panel.is-active {
    display: block !important;
    animation: tobidu-pv2-fade-up 0.4s ease both !important;
}

.tobidu-ot-price-card__head {
    padding: 1.375rem 1.75rem;
}

.tobidu-ot-price-card__title {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 1.125rem;
    color: #fff;
}

.tobidu-ot-price-card__sub {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 0.25rem;
}

.tobidu-ot-price-card__foot {
    padding: 0.875rem 1.75rem 1.25rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.tobidu-ot-price-card__foot span {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: #9a8a70;
}

.tobidu-ot-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00c4a0;
    flex: none;
}

/* ---------- Sparaktionen ---------- */
.tobidu-ot-deals {
    background: #fffbf5;
    padding: var(--space-11, 5rem) 0;
}

.tobidu-ot-deals__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6, 1.5rem);
    max-width: 960px;
    margin: 0 auto;
}

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

.tobidu-ot-deal {
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    border: 2px solid rgba(var(--ot-deal-color-rgb, 255, 107, 53), 0.13);
    transition: transform 0.25s, box-shadow 0.25s;
}

.tobidu-ot-deal:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.12);
}

.tobidu-ot-deal__head {
    background: var(--ot-deal-color);
    padding: 1.5rem 1.5rem 1.25rem;
    text-align: center;
}

.tobidu-ot-deal__icon {
    display: block;
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.tobidu-ot-deal__day {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.2);
    padding: 0.25rem 0.875rem;
    border-radius: 999px;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.68rem;
    color: #fff;
    letter-spacing: 0.05em;
}

.tobidu-ot-deal__body {
    padding: 1.25rem 1.375rem 1.5rem;
}

.tobidu-ot-deal__title {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 1.125rem;
    color: #1a1200;
    margin-bottom: 0.5rem;
}

.tobidu-ot-deal__body p {
    font-size: 0.875rem;
    color: #7a6a50;
    line-height: 1.6;
    margin: 0;
}

/* ---------- Wichtige Hinweise ---------- */
.tobidu-ot-rules {
    background: #1a1200;
    padding: var(--space-11, 5rem) 0 var(--space-12, 5.5rem);
}

.tobidu-ot-rules__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    max-width: 1000px;
    margin: 0 auto;
}

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

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

.tobidu-ot-rule {
    display: flex;
    gap: 0.875rem;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 20px;
    padding: 1.25rem;
    border: 1px solid rgba(var(--ot-rule-color-rgb, 255, 107, 53), 0.13);
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.tobidu-ot-rule:hover {
    background: rgba(var(--ot-rule-color-rgb, 255, 107, 53), 0.05);
}

.tobidu-ot-rule__icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: var(--ot-rule-color);
    opacity: 0.9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.375rem;
    flex: none;
}

.tobidu-ot-rule__title {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 0.875rem;
    color: #fff;
    margin-bottom: 0.3rem;
}

.tobidu-ot-rule__text {
    font-size: 0.8rem;
    color: #9a8a70;
    line-height: 1.6;
}

/* ==========================================================================
   Seite "Kindergeburtstage buchen" (Bericht Nr. 66) — 1:1 gegen den
   tatsächlichen Figma-Make-Quellcode (BirthdayPage.tsx) nachgebaut. Nutzt
   dieselben tobidu-pv2- und tobidu-ot- Bausteine wie die beiden anderen
   neuen Kernseiten (Badges, Shimmer, Wellen, Tabs, CTA) und ergänzt nur
   die seitenspezifischen Teile (tobidu-bd-*).
   ========================================================================== */

/* Bericht 125: war vorher selbst ein Grid (Text | Paket-Vorschaukarten) —
   jetzt ein einfacher Block, der das einheitliche .tobidu-page-hero__grid
   (Bild links/Text rechts) und die Paket-Vorschau darunter stapelt. */
.tobidu-bd-hero__layout {
    text-align: left;
    padding-bottom: var(--space-9, 3.5rem);
    position: relative;
    z-index: 2;
}

.tobidu-bd-hero__pkgs-row {
    display: none;
    justify-content: center;
    margin-top: var(--space-8, 2.5rem);
}

@media (min-width: 900px) {
    .tobidu-bd-hero__pkgs-row {
        display: flex;
    }
}

.tobidu-bd-hero__pkgs {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
}

@media (min-width: 900px) {
    .tobidu-bd-hero__pkgs {
        display: flex;
    }
}

.tobidu-bd-hero__pkg {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.625rem;
}

.tobidu-bd-hero__pkg--offset {
    margin-bottom: 1.25rem;
}

.tobidu-bd-hero__pkg img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 12px 40px rgba(var(--bd-color-rgb, 255, 107, 53), 0.35);
    border: 3px solid rgba(var(--bd-color-rgb, 255, 107, 53), 0.5);
}

.tobidu-bd-hero__pkg-label {
    display: inline-flex;
    align-items: center;
    background: rgba(var(--bd-color-rgb, 255, 107, 53), 0.2);
    border: 1px solid rgba(var(--bd-color-rgb, 255, 107, 53), 0.4);
    color: rgba(255, 255, 255, 0.9);
    padding: 0.45rem 1rem;
    border-radius: 999px;
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 0.8rem;
    white-space: nowrap;
}

.tobidu-bd-stats {
    background: rgba(255, 255, 255, 0.05);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    z-index: 2;
}

.tobidu-bd-stats__row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1.25rem 0;
}

.tobidu-bd-stats__item {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0 var(--space-5, 1.5rem);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.tobidu-bd-stats__item:last-child {
    border-right: none;
}

.tobidu-bd-stats__icon {
    font-size: 1.75rem;
}

.tobidu-bd-stats__val {
    display: block;
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 1.375rem;
    color: #ff6b35;
}

.tobidu-bd-stats__label {
    display: block;
    font-size: 0.75rem;
    color: #9a8a70;
    font-weight: 600;
}

@media (max-width: 640px) {
    .tobidu-bd-stats__item {
        flex: 0 0 calc(50% - 0.5rem);
        border-right: none;
    }
}

/* ---------- Pakete ---------- */
.tobidu-bd-pakete {
    background: #fffbf5;
    padding: var(--space-11, 5rem) 0;
}

.tobidu-bd-pkg-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-7, 2rem);
    max-width: 900px;
    margin: 0 auto;
}

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

.tobidu-bd-pkg {
    border-radius: 32px;
    overflow: hidden;
    position: relative;
    background: #fff;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.09);
    border: 2px solid rgba(var(--bd-color-rgb), 0.13);
    transition: transform 0.25s, box-shadow 0.25s;
}

.tobidu-bd-pkg--highlight {
    box-shadow: 0 24px 64px rgba(var(--bd-color-rgb), 0.2);
    border-color: rgba(var(--bd-color-rgb), 0.4);
}

.tobidu-bd-pkg:hover {
    transform: translateY(-8px);
    box-shadow: 0 32px 72px rgba(var(--bd-color-rgb), 0.22);
}

.tobidu-bd-pkg__ribbon {
    position: absolute;
    top: 18px;
    right: -32px;
    background: #ffd60a;
    color: #1a1200;
    padding: 0.4rem 2.75rem;
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 0.75rem;
    transform: rotate(35deg);
    z-index: 3;
    box-shadow: 0 4px 16px rgba(255, 214, 10, 0.4);
}

.tobidu-bd-pkg__head {
    background: linear-gradient(145deg, var(--bd-color), var(--bd-color));
    padding: 2rem 1.75rem 1.75rem;
    position: relative;
}

.tobidu-bd-pkg__head img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 16px;
    margin-bottom: 1rem;
    display: block;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.tobidu-bd-pkg__head h3 {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 1.625rem;
    color: #fff;
    margin: 0 0 0.25rem;
}

.tobidu-bd-pkg__head p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.875rem;
    margin: 0;
}

.tobidu-bd-pkg__price {
    margin-top: 1.25rem;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.tobidu-bd-pkg__price-weekday,
.tobidu-bd-pkg__price-weekend {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 3.375rem;
    color: #fff;
    line-height: 1;
}

.tobidu-bd-pkg__price-unit {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.875rem;
    font-weight: 700;
}

.tobidu-bd-pkg__body {
    padding: 1.5rem 1.75rem 1.75rem;
}

.tobidu-bd-pkg__label {
    font-size: 0.75rem;
    font-family: var(--font-heading);
    font-weight: 800;
    color: #9a8a70;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 1rem;
}

.tobidu-bd-pkg__perk {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.625rem;
    align-items: flex-start;
}

.tobidu-bd-pkg__perk span:first-child {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(var(--bd-color-rgb), 0.14);
    color: var(--bd-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 900;
    flex: none;
}

.tobidu-bd-pkg__perk span:last-child {
    font-size: 0.875rem;
    color: #1a1200;
    line-height: 1.45;
    padding-top: 0.15rem;
}

.tobidu-bd-pkg__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    margin-top: 1.5rem;
    padding: 0.95rem;
    border-radius: 999px;
    background: var(--bd-color);
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 0.94rem;
    text-decoration: none;
    box-shadow: 0 8px 28px rgba(var(--bd-color-rgb), 0.4);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.tobidu-bd-pkg__cta:hover,
.tobidu-bd-pkg__cta:focus-visible {
    transform: scale(1.03);
    box-shadow: 0 14px 40px rgba(var(--bd-color-rgb), 0.55);
}

.tobidu-bd-note {
    max-width: 600px;
    margin: var(--space-7, 1.75rem) auto 0;
    text-align: center;
    background: #fff;
    border-radius: 20px;
    padding: 1.125rem 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
    border: 1px solid rgba(255, 107, 53, 0.15);
}

.tobidu-bd-note p {
    font-size: 0.8rem;
    color: #7a6a50;
    line-height: 1.65;
    margin: 0;
}

.tobidu-bd-note p + p {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255, 107, 53, 0.12);
}

.tobidu-bd-note strong {
    color: #ff6b35;
}

/* ---------- Essen ---------- */
.tobidu-bd-food {
    background: #1a1200;
    padding: var(--space-11, 5rem) 0 var(--space-12, 5.5rem);
}

.tobidu-bd-food__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6, 1.5rem);
    max-width: 860px;
    margin: 0 auto;
}

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

.tobidu-bd-food__card {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 24px;
    padding: 2rem 1.5rem;
    text-align: center;
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    transition: all 0.25s;
}

.tobidu-bd-food__card:hover {
    background: rgba(255, 107, 53, 0.12);
    border-color: rgba(255, 107, 53, 0.4);
    transform: translateY(-6px);
}

.tobidu-bd-food__icon {
    display: block;
    font-size: 3.25rem;
    margin-bottom: 0.75rem;
}

.tobidu-bd-food__name {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 1.125rem;
    color: #fff;
    margin-bottom: 0.5rem;
}

.tobidu-bd-food__text {
    font-size: 0.8rem;
    color: #9a8a70;
    line-height: 1.55;
}

.tobidu-bd-food__tag {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 1rem;
    background: rgba(255, 107, 53, 0.15);
    padding: 0.3rem 0.875rem;
    border-radius: 999px;
    font-size: 0.68rem;
    color: #ff6b35;
    font-family: var(--font-heading);
    font-weight: 700;
}

.tobidu-bd-food__tag span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ff6b35;
}

.tobidu-bd-food__note {
    max-width: 540px;
    margin: 2.25rem auto 0;
    text-align: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 18px;
    padding: 1.25rem 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.tobidu-bd-food__note p {
    font-size: 0.8rem;
    color: #9a8a70;
    line-height: 1.7;
    margin: 0;
}

/* ---------- Party-Zeiten / So geht's (Bericht Nr. 177: seit hier zwei
   eigenständige Abschnitte statt einer zweispaltigen Kombi-Sektion,
   Basis-Klasse .tobidu-bd-times weiterhin für Creme-Hintergrund/Padding
   geteilt, .tobidu-bd-times--solo für den einspaltigen, zentrierten
   Aufbau, .tobidu-bd-times--peach für den Party-Zeiten-Farbakzent) ---------- */
.tobidu-bd-times {
    background: #fffbf5;
    padding: var(--space-11, 5rem) 0;
}

.tobidu-bd-times--peach {
    background: #fff2e8;
}

.tobidu-bd-times__narrow {
    max-width: 640px;
    margin: 0 auto;
}

.tobidu-bd-times__list {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.tobidu-bd-times__slot {
    background: #fff;
    border-radius: 20px;
    padding: 1.25rem 1.375rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07);
    border-left: 4px solid;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.tobidu-bd-times__days {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.875rem;
    color: #7a6a50;
    margin-bottom: 0.25rem;
}

.tobidu-bd-times__time {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 1.375rem;
    color: #1a1200;
}

.tobidu-bd-times__tag {
    padding: 0.375rem 0.875rem;
    border-radius: 999px;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.75rem;
    white-space: nowrap;
}

.tobidu-bd-times__hint {
    font-size: 0.8rem;
    color: #9a8a70;
    margin: 0.875rem 0 0;
}

.tobidu-bd-warning {
    margin-top: 1.5rem;
    background: #fff5e6;
    border-radius: 16px;
    padding: 1rem 1.25rem;
    border: 1px solid rgba(255, 107, 53, 0.2);
}

.tobidu-bd-warning__title {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.875rem;
    color: #ff6b35;
    margin-bottom: 0.4rem;
}

.tobidu-bd-warning p {
    font-size: 0.8rem;
    color: #7a6a50;
    line-height: 1.65;
    margin: 0;
}

.tobidu-bd-steps {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 1.75rem;
}

.tobidu-bd-step {
    display: flex;
    gap: 1.125rem;
    padding-bottom: 1.75rem;
    position: relative;
}

.tobidu-bd-step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 21px;
    top: 52px;
    bottom: -4px;
    width: 2px;
    background: linear-gradient(to bottom, #ff6b35, transparent);
}

.tobidu-bd-step__icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: linear-gradient(135deg, #ff6b35, #ff9a55);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    flex: none;
    box-shadow: 0 6px 18px rgba(255, 107, 53, 0.35);
    position: relative;
    z-index: 1;
}

.tobidu-bd-step__num {
    display: block;
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 0.625rem;
    color: #ff6b35;
    letter-spacing: 0.1em;
    margin-bottom: 0.25rem;
}

.tobidu-bd-step__title {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 1.05rem;
    color: #1a1200;
    margin-bottom: 0.25rem;
}

.tobidu-bd-step__text {
    font-size: 0.8rem;
    color: #7a6a50;
    line-height: 1.55;
}

.tobidu-bd-deposit {
    background: #fff;
    border-radius: 20px;
    padding: 1.25rem 1.375rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 2px solid rgba(0, 196, 160, 0.25);
    display: flex;
    gap: 0.875rem;
    align-items: flex-start;
}

.tobidu-bd-deposit > span {
    font-size: 1.75rem;
    flex: none;
}

.tobidu-bd-deposit__title {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 0.94rem;
    color: #1a1200;
    margin-bottom: 0.25rem;
}

.tobidu-bd-deposit p {
    font-size: 0.8rem;
    color: #7a6a50;
    line-height: 1.6;
    margin: 0;
}

/* ---------- Reservierung (SofortRes-Iframe, Bericht Nr. 172/173) ----------
   Eigener Peach-/Orange-Ton (statt des sonst üblichen Cremeweiß), damit sich
   der Abschnitt als eigenständiger Block zwischen Pakete und Speiseauswahl
   abhebt — passend zum orangen Badge/Akzent, der an dieser Seite bereits
   für "buchen"-Aktionen steht (#ff6b35). */
.tobidu-bd-reservation {
    background: #fff2e8;
    padding: var(--space-11, 5rem) 0;
}

.tobidu-bd-reservation__cta {
    margin-top: 2rem;
    text-align: center;
}

.tobidu-bd-reservation__hint {
    margin: 0.875rem auto 0;
    max-width: 420px;
    font-size: 0.8rem;
    color: #7a6a50;
    line-height: 1.6;
}

/* ---------- Desktop-Iframe (Bericht Nr. 190) ----------
   Ab demselben "isDesktop"-Breakpoint wie initParallax() (main.js,
   min-width: 1024px): Button/Hinweis (mobil/Tablet) ausblenden, Iframe
   direkt zeigen. Breite ergibt sich automatisch aus dem umgebenden
   `.tobidu-pv2-inner` (max-width 1280px, bestehendes Seitenraster) —
   kein neuer Wert nötig. Höhe: SofortRes meldet Größenänderungen NICHT
   per postMessage zurück (siehe Kommentar im Popup-CSS unten) — daher
   bewusst eine großzügige, viewport-abhängige FESTE Höhe mit iframe-
   eigenem Scroll als Sicherheitsnetz (kein scrolling="no"), statt eine
   dynamische Höhe vorzutäuschen, die der Anbieter technisch nicht
   liefert. Getestet: Kalender-Ansicht passt ohne internes Scrollen,
   die anschließende Verfügbarkeits-/Warenkorb-Ansicht ist länger und
   scrollt innerhalb des Iframes weiter — inhaltlich nichts abgeschnitten. */
.tobidu-bd-reservation__iframe-wrap {
    display: none;
}

@media (min-width: 1024px) {
    .tobidu-bd-reservation__cta {
        display: none;
    }

    .tobidu-bd-reservation__iframe-wrap {
        display: block;
        margin-top: 2rem;
        border-radius: 24px;
        overflow: hidden;
        box-shadow: 0 12px 40px rgba(26, 18, 0, 0.12);
        background: #fff;
    }

    /* Bericht Nr. 198: Höhe liegt jetzt auf dem Frame-Container
       (data-bd-res-frame), nicht mehr direkt auf dem iframe — der
       Platzhalter (vor Aktivierung) braucht dieselbe Fläche wie später
       der geladene Iframe, damit beim Nachladen kein Layout-Sprung
       entsteht. */
    .tobidu-bd-reservation__iframe-wrap .tobidu-bd-res-frame {
        display: block;
        height: clamp(650px, 82vh, 950px);
    }

    .tobidu-bd-reservation__iframe-wrap iframe {
        display: block;
        width: 100%;
        height: 100%;
        border: none;
    }
}

/* ---------- Reservierungs-Modal (Bericht Nr. 174, Testversion 1 —
   Architekten-Entscheidung Bericht Nr. 177: durchgängig auf allen
   Geräten, kein Breakpoint-Umschalten mehr) ----------
   Ersetzt die vorherige Direkt-Einbettung des SofortRes-Iframes: mobil
   führte das (SofortRes meldet Höhenänderungen nicht per postMessage an
   die Elternseite zurück) dazu, dass nach einem internen Widget-Schritt
   der "Weiter"-Bereich oberhalb des sichtbaren Viewports landete. Das
   Modal gibt dem Iframe eine feste, in sich geschlossene Höhe mit einem
   einzigen, eindeutigen Scroll-Kontext — unabhängig vom Verhalten des
   Anbieters. Markup-/Verhaltensmuster von .tobidu-faq-chatbot-modal
   übernommen (siehe page-faq.php / initFaqChatbotModal() in main.js). */
.tobidu-bd-res-modal {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-5, 1.25rem);
}

.tobidu-bd-res-modal[hidden] {
    display: none;
}

.tobidu-bd-res-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(26, 18, 0, 0.6);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.tobidu-bd-res-modal__dialog {
    position: relative;
    width: 100%;
    max-width: 720px;
    height: 88vh;
    height: 88dvh;
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: tobidu-faq-modal-in 0.2s ease both;
}

.tobidu-bd-res-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.875rem 1rem 0.875rem 1.25rem;
    background: #fff2e8;
    border-bottom: 1px solid rgba(255, 107, 53, 0.18);
    flex: none;
}

.tobidu-bd-res-modal__title {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 0.95rem;
    color: #1a1200;
}

.tobidu-bd-res-modal__close {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: #fff;
    color: #5a4a30;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.tobidu-bd-res-modal__body {
    flex: 1;
    min-height: 0;
}

/* Bericht Nr. 198: der Frame-Container (data-bd-res-frame) wird per JS
   erst beim Öffnen des Modals hierher verschoben (moveFrameIntoModal()
   in main.js) und muss die volle Höhe des Modal-Bodys übernehmen, damit
   sowohl der Platzhalter als auch das spätere Iframe korrekt füllen. */
.tobidu-bd-res-modal__body .tobidu-bd-res-frame {
    display: block;
    height: 100%;
}

.tobidu-bd-res-modal__body iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
}

/* ---------- Reservierungs-Platzhalter (Bericht Nr. 198) ----------
   Gilt für BEIDE Kontexte (Desktop-Inline + Mobil-Modal) — derselbe
   Frame-Container wandert per JS zwischen beiden. Rein technisch
   neutrale Lade-Bestätigung, keine Consent-/Rechtstexte. */
.tobidu-bd-res-frame__placeholder {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    text-align: center;
    padding: 2rem 1.5rem;
}

.tobidu-bd-res-frame__placeholder[hidden] {
    display: none;
}

.tobidu-bd-res-frame__text {
    max-width: 380px;
    font-size: 0.85rem;
    color: #7a6a50;
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 600px) {
    .tobidu-bd-res-modal {
        padding: 0;
    }

    .tobidu-bd-res-modal__dialog {
        max-width: 100%;
        height: 100vh;
        height: 100dvh;
        border-radius: 0;
    }
}

body.tobidu-bd-res-modal-open {
    overflow: hidden;
}

/* ---------- FAQ ---------- */
.tobidu-bd-faq {
    background: #1a1200;
    padding: var(--space-11, 5rem) 0 var(--space-12, 5.5rem);
}

.tobidu-bd-faq__inner {
    max-width: 800px;
}

.tobidu-bd-faq__list {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.tobidu-bd-faq__item {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 18px;
    overflow: hidden;
    border: 1.5px solid rgba(255, 255, 255, 0.08);
    transition: border-color var(--transition-fast);
}

.tobidu-bd-faq__item.is-open {
    border-color: #ff6b35;
}

.tobidu-bd-faq__question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    background: none;
    border: none;
    cursor: pointer;
    gap: 1rem;
    text-align: left;
}

.tobidu-bd-faq__question span:first-child {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.94rem;
    color: #fff;
    line-height: 1.4;
}

.tobidu-bd-faq__toggle {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    flex: none;
    background: rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: background var(--transition-fast);
}

.tobidu-bd-faq__item.is-open .tobidu-bd-faq__toggle {
    background: #ff6b35;
}

.tobidu-bd-faq__answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.tobidu-bd-faq__item.is-open .tobidu-bd-faq__answer {
    max-height: 20em;
}

.tobidu-bd-faq__answer p {
    padding: 0 1.5rem 1.25rem;
    font-size: 0.875rem;
    color: #9a8a70;
    line-height: 1.75;
    margin: 0;
}

/* ---------- Chips (finale CTA) ---------- */
.tobidu-bd-chips {
    display: flex;
    gap: 0.625rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: var(--space-6, 1.5rem);
}

.tobidu-bd-chip {
    background: #fff;
    padding: 0.45rem 1rem;
    border-radius: 999px;
    font-size: 0.75rem;
    color: #7a6a50;
    font-family: var(--font-heading);
    font-weight: 700;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

/* ==========================================================================
   Seite "Gruppenangebote" (Bericht Nr. 67) — 1:1 gegen den tatsächlichen
   Figma-Make-Quellcode (GroupPage.tsx) nachgebaut. Nutzt dieselben
   tobidu-pv2- und tobidu-ot- Bausteine wie die anderen neuen Kernseiten,
   ergänzt nur die seitenspezifischen Teile (tobidu-gr-*).
   ========================================================================== */

/* Bericht 125: war vorher selbst ein 2-Spalten-Grid (Text | Preis-
   Grafiken) — jetzt ein einfacher Block, der das einheitliche
   .tobidu-page-hero__grid (Bild links/Text rechts) und die echten
   Preis-Grafiken darunter stapelt (.tobidu-gr-hero__imgs regelt Mobile-
   Ausblendung bereits selbst). */
.tobidu-gr-hero__layout {
    text-align: left;
    padding-bottom: var(--space-9, 3.5rem);
}

.tobidu-gr-hero__imgs-row {
    display: none;
    justify-content: center;
    margin-top: var(--space-8, 2.5rem);
}

@media (min-width: 900px) {
    .tobidu-gr-hero__imgs-row {
        display: flex;
    }
}

.tobidu-gr-hero__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: var(--space-6, 1.75rem);
}

.tobidu-gr-hero__fact {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    padding: 0.5rem 1rem;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.8rem;
    color: #fff;
}

.tobidu-gr-hero__imgs {
    display: none;
    gap: 1.25rem;
    align-items: flex-end;
    justify-content: center;
}

@media (min-width: 900px) {
    .tobidu-gr-hero__imgs {
        display: flex;
    }
}

.tobidu-gr-hero__img {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.625rem;
}

.tobidu-gr-hero__img--offset {
    margin-bottom: 1.5rem;
}

.tobidu-gr-hero__img img {
    width: 240px;
    height: auto;
    object-fit: contain;
    border-radius: 16px;
    box-shadow: 0 16px 48px rgba(var(--gr-color-rgb, 255, 107, 53), 0.35);
}

/* ---------- Pakete ---------- */
.tobidu-gr-pakete {
    background: #fffbf5;
    padding: var(--space-11, 5rem) 0;
}

.tobidu-gr-pkg-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-7, 2rem);
    max-width: 920px;
    margin: 0 auto;
}

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

.tobidu-gr-pkg {
    border-radius: 32px;
    overflow: hidden;
    position: relative;
    background: #fff;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.09);
    border: 2px solid rgba(var(--gr-color-rgb), 0.13);
    transition: transform 0.25s, box-shadow 0.25s;
}

.tobidu-gr-pkg--highlight {
    box-shadow: 0 24px 64px rgba(var(--gr-color-rgb), 0.25);
    border-color: rgba(var(--gr-color-rgb), 0.35);
}

.tobidu-gr-pkg:hover {
    transform: translateY(-8px);
    box-shadow: 0 32px 72px rgba(var(--gr-color-rgb), 0.22);
}

.tobidu-gr-pkg__ribbon {
    position: absolute;
    top: 18px;
    right: -32px;
    background: #ffd60a;
    color: #1a1200;
    padding: 0.4rem 2.75rem;
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 0.72rem;
    transform: rotate(35deg);
    z-index: 3;
    box-shadow: 0 4px 16px rgba(255, 214, 10, 0.4);
}

.tobidu-gr-pkg__media {
    background: rgba(var(--gr-color-rgb), 0.08);
    padding: 1.25rem;
}

.tobidu-gr-pkg__media img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
}

.tobidu-gr-pkg__name {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 1.25rem;
    color: #1a1200;
    margin-bottom: 0.2rem;
}

.tobidu-gr-pkg__subtitle {
    font-size: 0.85rem;
    color: var(--gr-color);
    font-weight: 700;
    margin-bottom: 1rem;
}

.tobidu-gr-pkg__body {
    background: #fff;
    padding: 1.375rem 1.5rem 1.625rem;
}

.tobidu-gr-pkg__label {
    font-size: 0.72rem;
    font-family: var(--font-heading);
    font-weight: 800;
    color: #9a8a70;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 0.875rem;
}

.tobidu-gr-pkg__perk {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.625rem;
    align-items: flex-start;
}

.tobidu-gr-pkg__perk span:first-child {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: rgba(var(--gr-color-rgb), 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex: none;
}

.tobidu-gr-pkg__perk span:last-child {
    font-size: 0.875rem;
    color: #1a1200;
    line-height: 1.45;
    padding-top: 0.2rem;
}

.tobidu-gr-pkg__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    margin-top: 1.25rem;
    padding: 0.875rem;
    border-radius: 999px;
    background: linear-gradient(145deg, var(--gr-color), var(--gr-color));
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 0.94rem;
    text-decoration: none;
    box-shadow: 0 8px 28px rgba(var(--gr-color-rgb), 0.4);
    transition: transform var(--transition-fast);
}

.tobidu-gr-pkg__cta:hover,
.tobidu-gr-pkg__cta:focus-visible {
    transform: scale(1.03);
}

.tobidu-gr-factbar {
    margin-top: var(--space-8, 2.5rem);
    background: #fff;
    border-radius: 24px;
    padding: 1.375rem 1.75rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
    border: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    flex-wrap: wrap;
}

.tobidu-gr-factbar__item {
    flex: 1 1 220px;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 1.5rem;
    border-right: 1px solid rgba(0, 0, 0, 0.07);
    font-size: 0.8rem;
    color: #7a6a50;
    font-family: var(--font-heading);
    font-weight: 600;
}

.tobidu-gr-factbar__item:last-child {
    border-right: none;
}

.tobidu-gr-factbar__item span:first-child {
    font-size: 1.25rem;
}

@media (max-width: 640px) {
    .tobidu-gr-factbar__item {
        border-right: none;
    }
}

/* ---------- Aktivitäten ---------- */
.tobidu-gr-activities {
    background: #1a1200;
    padding: var(--space-11, 5rem) 0 var(--space-12, 5.5rem);
}

.tobidu-gr-act-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    max-width: 900px;
    margin: 0 auto;
}

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

.tobidu-gr-act {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 1.5rem 1rem;
    text-align: center;
    border: 1.5px solid rgba(var(--gr-act-color-rgb, 255, 107, 53), 0.13);
    transition: all 0.25s;
}

.tobidu-gr-act:hover {
    background: rgba(var(--gr-act-color-rgb, 255, 107, 53), 0.07);
    transform: translateY(-5px);
}

.tobidu-gr-act span {
    display: block;
    font-size: 2.5rem;
    margin-bottom: 0.625rem;
}

.tobidu-gr-act div {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.875rem;
    color: #fff;
    line-height: 1.3;
}

/* ---------- Zielgruppen ---------- */
.tobidu-gr-targets {
    background: #fffbf5;
    padding: var(--space-11, 5rem) 0;
}

.tobidu-gr-targets .tobidu-pv2-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6, 1.5rem);
}

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

.tobidu-gr-targets .tobidu-ot-head {
    grid-column: 1 / -1;
}

.tobidu-gr-target {
    background: #fff;
    border-radius: 24px;
    padding: 2rem 1.5rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    border: 2px solid rgba(var(--gr-target-color-rgb, 255, 107, 53), 0.1);
    transition: transform 0.25s, box-shadow 0.25s;
}

.tobidu-gr-target:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 48px rgba(var(--gr-target-color-rgb, 255, 107, 53), 0.15);
}

.tobidu-gr-target__icon {
    display: flex;
    width: 60px;
    height: 60px;
    border-radius: 18px;
    background: rgba(var(--gr-target-color-rgb, 255, 107, 53), 0.14);
    align-items: center;
    justify-content: center;
    font-size: 1.875rem;
    margin-bottom: 1rem;
}

.tobidu-gr-target__head {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
    margin-bottom: 0.625rem;
}

.tobidu-gr-target__title {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 1.25rem;
    color: #1a1200;
}

.tobidu-gr-target__badge {
    background: rgba(var(--gr-target-color-rgb, 255, 107, 53), 0.14);
    color: var(--gr-target-color);
    padding: 0.2rem 0.75rem;
    border-radius: 999px;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.68rem;
}

.tobidu-gr-target p {
    font-size: 0.875rem;
    color: #7a6a50;
    line-height: 1.7;
    margin: 0;
}

/* ---------- Anfrageformular ---------- */
.tobidu-gr-form-section {
    background: #1a1200;
    padding: var(--space-11, 5rem) 0 var(--space-12, 5.5rem);
}

.tobidu-gr-form-inner {
    max-width: 860px;
}

.tobidu-gr-form {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 28px;
    padding: 2rem 1.75rem;
}

/*
 * Update Bericht Nr. 129 — die früheren Regeln für `.tobidu-gr-form__grid`,
 * `label`, `input/select/textarea`, `__gdpr`, `__submit` sind entfallen:
 * das Formular selbst kommt jetzt aus dem theme-unabhängigen Plugin
 * `tobidu-form-system` (eigenes CSS, Klassen `.tfs__*`/`.tfs--dark` für
 * genau diese dunkle Glass-Card-Optik). `.tobidu-gr-form` bleibt als
 * reiner Karten-Rahmen bestehen, `__alt` für den Telefon-Hinweis
 * unterhalb des Plugin-Formulars ebenfalls.
 */

.tobidu-gr-form__alt {
    text-align: center;
    font-size: 0.8rem;
    color: #9a8a70;
    margin: 1.25rem 0 0;
}

.tobidu-gr-form__alt a {
    color: #ff6b35;
    font-weight: 700;
}

/* ---------- Finale CTA ---------- */
.tobidu-gr-final {
    background: #fffbf5;
    padding: var(--space-11, 5rem) 0;
    text-align: center;
}

.tobidu-gr-final__inner {
    max-width: 580px;
}

.tobidu-gr-final__icon {
    display: inline-block;
    font-size: 3.25rem;
    margin-bottom: 1rem;
}

.tobidu-gr-final__inner h2 {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: clamp(1.5rem, 3.5vw, 2.625rem);
    color: #1a1200;
    line-height: 1.1;
    margin: 0 0 0.875rem;
}

.tobidu-gr-final__inner p {
    font-size: 0.94rem;
    color: #7a6a50;
    margin: 0 0 2rem;
    line-height: 1.75;
}

.tobidu-gr-final__primary,
.tobidu-gr-final__secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 1rem 2.125rem;
    border-radius: 999px;
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 1rem;
    text-decoration: none;
    transition: transform var(--transition-fast);
}

.tobidu-gr-final__primary {
    background: linear-gradient(135deg, #ff6b35, #ff9a55);
    color: #fff;
    box-shadow: 0 10px 36px rgba(255, 107, 53, 0.42);
}

.tobidu-gr-final__secondary {
    background: #fff;
    color: #1a1200;
    border: 2px solid rgba(26, 18, 0, 0.12);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
    font-weight: 800;
}

.tobidu-gr-final__primary:hover,
.tobidu-gr-final__primary:focus-visible,
.tobidu-gr-final__secondary:hover,
.tobidu-gr-final__secondary:focus-visible {
    transform: scale(1.04);
}

/* ==========================================================================
   Seite "Das TobiDu" (Bericht Nr. 68) — 1:1 gegen den tatsächlichen
   Figma-Make-Quellcode (TobiDuPage.tsx) nachgebaut. Nutzt dieselben
   tobidu-pv2- und tobidu-ot- Bausteine wie die anderen neuen Kernseiten,
   ergänzt nur die seitenspezifischen Teile (tobidu-td-*).
   ========================================================================== */

.tobidu-td-hero__inner {
    text-align: center;
    padding-bottom: var(--space-10, 4rem);
}

.tobidu-td-hero__mascot {
    display: block;
    margin: 0 auto var(--space-4, 1rem);
    width: 96px;
    height: 96px;
    object-fit: contain;
    filter: drop-shadow(0 10px 24px rgba(255, 107, 53, 0.35));
}

/* Bericht 85: großer, langsam rotierender Deko-Ball hinter dem Hero-Content
   (analog zu den Sterne-/Ball-Dekos anderer Kernseiten, decorations.css). */
.tobidu-td-hero__bigball {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 480px;
    height: 480px;
    margin: -240px 0 0 -240px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(255, 107, 53, 0.10), rgba(255, 214, 10, 0.06), rgba(126, 87, 194, 0.08), rgba(255, 107, 53, 0.10));
    animation: tobidu-spin 40s linear infinite;
    pointer-events: none;
}

@media (max-width: 640px) {
    .tobidu-td-hero__bigball {
        width: 320px;
        height: 320px;
        margin: -160px 0 0 -160px;
    }
}

/* ---------- Wellen (dediziert, Farbschema dieser Seite) ---------- */
.tobidu-td-wave {
    width: 100%;
    height: 60px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
}

.tobidu-td-wave--hero-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");
}

.tobidu-td-wave--stats-out {
    background-color: #ff6b35;
    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-td-wave--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");
}

/* ---------- Stats ---------- */
.tobidu-td-stats {
    background: #ff6b35;
    padding: var(--space-8, 2.5rem) 0;
}

.tobidu-td-stats__row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    text-align: center;
}

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

.tobidu-td-stats__icon {
    font-size: 2rem;
    margin-bottom: 0.375rem;
}

.tobidu-td-stats__val {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 1.5rem;
    color: #fff;
}

.tobidu-td-stats__label {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.75);
    margin-top: 0.2rem;
}

/* ---------- Über uns ---------- */
.tobidu-td-about {
    background: #fffbf5;
    padding: var(--space-11, 5rem) 0;
}

.tobidu-td-about__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8, 3.5rem);
    align-items: center;
}

@media (min-width: 900px) {
    .tobidu-td-about__layout {
        grid-template-columns: 1fr 1fr;
    }
}

.tobidu-td-about__title {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: clamp(1.625rem, 3.5vw, 2.875rem);
    color: #1a1200;
    margin: 0.875rem 0 1.125rem;
}

.tobidu-td-about p {
    font-size: 1rem;
    color: #5a4a30;
    line-height: 1.8;
    margin: 0 0 1rem;
}

.tobidu-td-about__facts {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1.75rem;
}

.tobidu-td-about__fact {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.tobidu-td-about__fact span:first-child {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255, 107, 53, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    flex: none;
}

.tobidu-td-about__fact span:last-child {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.94rem;
    color: #1a1200;
}

.tobidu-td-about__media {
    display: grid;
    gap: 0.875rem;
}

.tobidu-td-about__photo {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 28px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.14);
    display: block;
}

.tobidu-td-about__sub {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.875rem;
}

.tobidu-td-about__sub img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 22px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.1);
    display: block;
}

.tobidu-td-about__badge {
    border-radius: 22px;
    background: linear-gradient(135deg, #ffd60a, #ffbc00);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 1.25rem;
    text-align: center;
}

.tobidu-td-about__badge span {
    font-size: 2.125rem;
}

.tobidu-td-about__badge strong {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 0.9rem;
    color: #1a1200;
}

.tobidu-td-about__badge small {
    font-size: 0.7rem;
    color: rgba(26, 18, 0, 0.65);
}

/* ---------- Attraktionen ---------- */
.tobidu-td-attractions {
    background: #1a1200;
    padding: var(--space-11, 5rem) 0 var(--space-12, 5.5rem);
}

.tobidu-td-attr-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6, 1.5rem);
}

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

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

.tobidu-td-attr-card {
    background: #fff;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
    border-top: 4px solid var(--td-color);
}

.tobidu-td-attr-card__media {
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.tobidu-td-attr-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tobidu-td-attr-card__body {
    padding: 1.25rem 1.375rem 1.5rem;
}

.tobidu-td-attr-card__body h3 {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 1.25rem;
    color: #1a1200;
    margin: 0 0 0.5rem;
}

.tobidu-td-attr-card__body p {
    font-size: 0.875rem;
    color: #7a6a50;
    line-height: 1.65;
    margin: 0 0 0.75rem;
}

.tobidu-td-attr-card__body a {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.85rem;
    color: var(--td-color);
    text-decoration: none;
}

.tobidu-td-attr-cta {
    text-align: center;
    margin-top: var(--space-8, 3rem);
}

/* ---------- Anfahrt kurz ---------- */
.tobidu-td-anfahrt {
    background: #1a1200;
    padding: var(--space-11, 5rem) 0;
    text-align: center;
}

.tobidu-td-anfahrt__inner {
    max-width: 780px;
}

.tobidu-td-anfahrt h2 {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: clamp(1.5rem, 3.5vw, 2.625rem);
    color: #fff;
    margin: 0 0 0.875rem;
}

.tobidu-td-anfahrt__company {
    font-size: 1rem;
    color: #9a8a70;
    margin: 0 0 0.5rem;
}

.tobidu-td-anfahrt__address {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.125rem;
    color: #ffd60a;
    margin: 0 0 0.5rem;
}

.tobidu-td-anfahrt__hint {
    font-size: 0.94rem;
    color: #7a6a50;
    margin: 0 0 2rem;
}

/* Bericht 85: dieselbe animierte Pin-Karte wie Startseite/#anfahrt und
   /anfahrt/ (.tobidu-home-anfahrt__pin), hier zentriert unter den CTAs. */
.tobidu-td-anfahrt__pin {
    margin: var(--space-10, 3rem) auto 0;
}

/* ==========================================================================
   Foto-Galerie ("Das TobiDu") — Bericht Nr. 69
   Hero + Info-Statistik-Karte 1:1 gegen Figma FotoGaleriePage.tsx, Galerie-
   Grid/Lightbox bleiben die bereits bestehenden .tobidu-gallery-Klassen.
   ========================================================================== */

/* Bericht Nr. 90 — Architekten-Korrektur: der Hero ist im Figma-Original
   (FotoGaleriePage.tsx) eine DUNKLE Fläche (wie bei allen anderen
   Kernseiten), nicht cream, und zeigt rechts eine gruppierte 2×2-Bildvorschau
   (leicht rotierte Fotos) statt reinem Text. Beides bisher nicht 1:1
   umgesetzt — jetzt nachgezogen. */
.tobidu-fg-hero {
    background: linear-gradient(160deg, #1a1200 0%, #2a1800 55%, #1a1200 100%);
    padding: 7.5rem 0 4.5rem;
    position: relative;
    overflow: hidden;
}

.tobidu-fg-hero__glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.tobidu-fg-hero__glow--1 {
    top: -60px;
    right: -60px;
    width: 320px;
    height: 320px;
    background: rgba(255, 107, 53, 0.09);
}

.tobidu-fg-hero__glow--2 {
    bottom: -40px;
    left: -40px;
    width: 240px;
    height: 240px;
    background: rgba(255, 214, 10, 0.06);
}

/* Bericht 125: war vorher selbst ein 2-Spalten-Grid (Text | Foto-Mosaik) —
   jetzt ein einfacher Block, der das einheitliche .tobidu-page-hero__grid
   (Bild links/Text rechts) und das Foto-Mosaik darunter stapelt. */
.tobidu-fg-hero__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
    position: relative;
    text-align: left;
}

.tobidu-fg-hero__mosaic-row {
    display: none;
    justify-content: center;
    margin-top: var(--space-9, 3rem);
}

@media (min-width: 900px) {
    .tobidu-fg-hero__mosaic-row {
        display: flex;
    }
}

.tobidu-fg-hero__mosaic-row .tobidu-fg-hero__mosaic {
    max-width: 460px;
    width: 100%;
}

.tobidu-fg-hero__inner .tobidu-pv2-badge {
    margin-bottom: 1rem;
}

.tobidu-fg-hero__inner h1 {
    margin: 0 0 1rem;
    line-height: 1.1;
    color: #fff;
}

.tobidu-fg-hero__text {
    font-size: 1.06rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.8;
    margin: 0 0 2rem;
    max-width: 460px;
}

/* Gruppierte 2×2-Bildvorschau rechts (Figma: "Hero mosaic preview") — echte
   erste 4 Galerie-Fotos, leicht rotiert, Hover richtet gerade. */
.tobidu-fg-hero__mosaic {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.875rem;
}

.tobidu-fg-hero__mosaic-item {
    display: block;
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 1;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
}

.tobidu-fg-hero__mosaic-item:nth-child(1) { transform: rotate(-1.5deg); }
.tobidu-fg-hero__mosaic-item:nth-child(2) { transform: rotate(1deg); }
.tobidu-fg-hero__mosaic-item:nth-child(3) { transform: rotate(-0.5deg); }
.tobidu-fg-hero__mosaic-item:nth-child(4) { transform: rotate(2deg); }

.tobidu-fg-hero__mosaic-item:hover {
    transform: rotate(0deg) scale(1.05);
}

.tobidu-fg-hero__mosaic-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 900px) {
    .tobidu-fg-hero__inner {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .tobidu-fg-hero__mosaic {
        display: none;
    }

    .tobidu-fg-hero__text {
        max-width: none;
        margin-left: auto;
        margin-right: auto;
    }
}

.tobidu-fg-info {
    margin-top: 4rem;
    background: #fff;
    border-radius: 28px;
    padding: 2.5rem;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.07);
    border: 1px solid rgba(0, 0, 0, 0.05);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: center;
}

.tobidu-fg-info__text h2 {
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    margin: 0 0 0.9rem;
    color: #1a1200;
}

.tobidu-fg-info__text p {
    font-size: 0.95rem;
    color: #5a4a30;
    line-height: 1.8;
    margin: 0 0 1.25rem;
}

.tobidu-fg-info__actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.tobidu-fg-info__secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    border-radius: 999px;
    background: rgba(255, 107, 53, 0.08);
    color: #ff6b35;
    font-family: var(--font-heading, inherit);
    font-weight: 800;
    font-size: 0.95rem;
    text-decoration: none;
    border: 2px solid rgba(255, 107, 53, 0.25);
}

.tobidu-fg-info__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem;
}

.tobidu-fg-info__stat {
    background: var(--color-bg-warm);
    border-radius: 18px;
    padding: 1.25rem 1rem;
    text-align: center;
}

.tobidu-fg-info__stat span {
    display: block;
    font-size: 1.75rem;
    margin-bottom: 0.35rem;
}

.tobidu-fg-info__stat strong {
    display: block;
    font-family: var(--font-heading, inherit);
    font-weight: 900;
    font-size: 1.15rem;
    color: #ff6b35;
}

.tobidu-fg-info__stat small {
    display: block;
    font-size: 0.75rem;
    color: #9a8a70;
    margin-top: 0.2rem;
}

@media (max-width: 768px) {
    .tobidu-fg-info {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Speisekarte — Bericht Nr. 70
   Hero (Grün-Verlauf) + finale "Geburtstag planen?"-Section 1:1 gegen
   Figma SpeisekartePage.tsx. Grafiken/Kategorie-Karten/Infotext bleiben
   die bereits bestehenden echten Inhalte (Bericht 38).
   ========================================================================== */

.tobidu-sk-hero {
    background: linear-gradient(160deg, #00c4a0 0%, #00a890 60%, #009070 100%);
    padding: 5.5rem 0 4rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Bericht 108: Punkte-Raster wie im Figma-Original (radial-gradient-Dots
   über die gesamte Hero-Fläche), plus organische Blob-Formen statt reiner
   Kreise. */
.tobidu-sk-hero__dots {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.14) 1.5px, transparent 1.5px);
    background-size: 32px 32px;
    pointer-events: none;
}

.tobidu-sk-hero__glow {
    position: absolute;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.09);
}

.tobidu-sk-hero__glow--1 {
    top: -110px;
    right: -110px;
    width: 420px;
    height: 420px;
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    animation: tobidu-float 9s ease-in-out infinite;
}

.tobidu-sk-hero__glow--2 {
    bottom: -80px;
    left: -80px;
    width: 340px;
    height: 340px;
    border-radius: 40% 60% 70% 30% / 40% 50% 50% 60%;
    background: rgba(255, 214, 10, 0.08);
    animation: tobidu-float 11s ease-in-out infinite reverse;
}

.tobidu-sk-hero__floating {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Bericht 124 (Architekten-Feedback): 700px war für die frühere, rein
   zentrierte Text-Spalte gedacht — mit dem neuen Bild-links/Text-rechts-
   Hero (Bericht 123) wirkte der gesamte Kopfbereich dadurch zu schmal/
   gequetscht. Auf dieselbe Breite wie die übrigen Seiten-Heros gebracht. */
.tobidu-sk-hero__inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 1.5rem;
    position: relative;
}

.tobidu-sk-hero__emoji {
    display: block;
    margin: 0 auto 1rem;
    width: 200px;
    height: auto;
    filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.28));
}

.tobidu-sk-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    background: rgba(255, 255, 255, 0.15);
    padding: 0.4rem 1rem;
    border-radius: 999px;
    font-family: var(--font-heading, inherit);
    font-weight: 800;
    font-size: 0.75rem;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.tobidu-sk-hero__inner h1 {
    color: #fff;
    margin: 0 0 1rem;
    line-height: 1.1;
}

.tobidu-sk-hero__tagline {
    font-family: var(--font-heading, inherit);
    font-weight: 800;
    font-size: 1.2rem;
    color: #ffd60a;
    margin: 0 0 0.75rem;
}

.tobidu-sk-hero__text {
    font-size: 1.06rem;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.8;
    margin: 0 0 0.75rem;
}

.tobidu-sk-hero__logo-wrap {
    position: relative;
    display: inline-block;
}

.tobidu-sk-hero__deco-emoji {
    /* top als fester px-Wert statt top:50%+transform:translateY(-50%) —
       die .float-Animation setzt bereits per Keyframe einen eigenen
       transform (translateY/rotate) und würde eine zusätzliche statische
       Zentrierung per transform überschreiben. */
    position: absolute;
    top: 44px;
    font-size: 1.7rem;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.25));
}

.tobidu-sk-hero__deco-emoji--left {
    left: -2.75rem;
}

.tobidu-sk-hero__deco-emoji--right {
    right: -2.75rem;
}

@media (max-width: 380px) {
    .tobidu-sk-hero__deco-emoji--left {
        left: -1.75rem;
    }

    .tobidu-sk-hero__deco-emoji--right {
        right: -1.75rem;
    }
}

.tobidu-sk-hero__note {
    /* Bericht 100: war vorher blass/klein (0.65 Deckkraft, 0.8rem) und für
       einen wichtigen Hinweis auf den ersten Blick kaum lesbar — jetzt als
       auffällige Warn-Badge mit kräftigem Kontrast. */
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.75rem 0 0;
    padding: 0.6rem 1.2rem;
    background: rgba(255, 214, 10, 0.95);
    border: 1.5px solid #1a1200;
    border-radius: 999px;
    font-family: var(--font-heading, inherit);
    font-weight: 800;
    font-size: 0.92rem;
    color: #1a1200;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

/* Bericht 95: Schnell-Navigation zu den Menü-Kategorien direkt im Hero. */
.tobidu-sk-hero__nav {
    display: flex;
    gap: 0.6rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

.tobidu-sk-hero__nav-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1.1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    font-family: var(--font-heading, inherit);
    font-weight: 800;
    font-size: 0.85rem;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease;
}

.tobidu-sk-hero__nav-item:hover,
.tobidu-sk-hero__nav-item:focus-visible {
    background: rgba(255, 255, 255, 0.26);
    transform: translateY(-2px);
}

/* ---------- Bericht 95: Textmenü nach Kategorien (Ergänzung zum Bildermenü) ---------- */
.tobidu-sk-textmenu-section {
    background: #fff;
}

.tobidu-sk-textmenu {
    margin-top: var(--space-8, 2.5rem);
    border-radius: var(--radius-xl, 24px);
    padding: var(--space-6, 1.75rem) var(--space-6, 1.75rem) var(--space-7, 2rem);
    border-top: 5px solid transparent;
    background: var(--color-bg-cream);
}

.tobidu-sk-textmenu:first-of-type {
    margin-top: var(--space-6, 1.75rem);
}

.tobidu-sk-textmenu--orange { border-top-color: var(--color-card-orange); }
.tobidu-sk-textmenu--amber { border-top-color: var(--color-card-amber); }
.tobidu-sk-textmenu--teal { border-top-color: var(--color-card-teal); }

.tobidu-sk-textmenu > h3 {
    margin: 0 0 var(--space-5, 1.5rem);
    font-size: var(--fs-xl, 1.5rem);
}

.tobidu-sk-textmenu__groups {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6, 1.75rem);
}

@media (max-width: 700px) {
    .tobidu-sk-textmenu__groups {
        grid-template-columns: 1fr;
    }
}

.tobidu-sk-textmenu__group h4 {
    margin: 0 0 0.2rem;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1rem;
    color: #5a4a30;
}

.tobidu-sk-textmenu__group-hint {
    margin: 0 0 var(--space-3, 1rem);
    font-size: 0.82rem;
    color: #9a8a70;
    line-height: 1.5;
}

.tobidu-sk-textmenu__list {
    list-style: none;
    margin: var(--space-2, 0.6rem) 0 0;
    padding: 0;
}

.tobidu-sk-textmenu__list li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-3, 1rem);
    padding: 0.55rem 0;
    border-bottom: 1px dashed rgba(26, 18, 0, 0.12);
}

.tobidu-sk-textmenu__list li:last-child {
    border-bottom: none;
}

.tobidu-sk-textmenu__item-name {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.92rem;
    color: #1a1200;
}

.tobidu-sk-textmenu__item-name small {
    display: block;
    font-family: var(--font-base, inherit);
    font-weight: 400;
    font-size: 0.78rem;
    color: #7a6a50;
    margin-top: 0.15rem;
}

.tobidu-sk-textmenu__item-price {
    flex-shrink: 0;
    text-align: right;
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 0.92rem;
    color: #ff6b35;
    white-space: nowrap;
}

.tobidu-sk-textmenu__item-price small {
    display: block;
    font-family: var(--font-base, inherit);
    font-weight: 400;
    font-size: 0.68rem;
    color: #9a8a70;
    white-space: normal;
    text-align: right;
}

.tobidu-sk-textmenu__note {
    margin: var(--space-7, 2rem) 0 0;
    padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
    background: #fff5e6;
    border-radius: var(--radius-md, 14px);
    border-left: 4px solid #ff6b35;
    font-size: 0.85rem;
    color: #7a6a50;
    line-height: 1.7;
}

/* ---------- Bericht 96: Wellen-Übergänge Hero→Hinweisleiste und
   →Info-Block (vorher fehlten beide, harter Farbschnitt) ---------- */
.tobidu-sk-wave {
    width: 100%;
    height: 50px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
}

/* Regel: background-color = Farbe der NACHFOLGENDEN Section (füllt die
   "Täler" der Welle), Pfad-Fill = Farbe der VORANGEHENDEN Section (füllt
   die "Berge" oben, die nahtlos in die vorherige Fläche übergehen). Vorher
   waren beide Farben vertauscht — dadurch blieb oben/unten ein weißer
   Rand statt einer sauberen Farbüberblendung sichtbar. Zusätzlich war der
   Farbkontrast Weiß→Pfirsich zu schwach (kaum wahrnehmbare Welle) — der
   Info-Block nutzt jetzt den kräftigeren Ton --color-bg-warm-deep, beide
   Wellen sind exakt darauf abgestimmt (oben UND unten, vorher passte die
   untere Welle noch auf den alten, helleren Cream-Ton). */
.tobidu-sk-wave--hero-out {
    background-color: #fff5e6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 50' preserveAspectRatio='none'%3E%3Cpath d='M0,10 C200,40 400,0 600,18 C800,36 1000,4 1200,14 L1200,0 L0,0 Z' fill='%2300a890'/%3E%3C/svg%3E");
}

.tobidu-sk-wave--info-in {
    background-color: #ffdcae;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 50' preserveAspectRatio='none'%3E%3Cpath d='M0,20 C300,50 900,0 1200,22 L1200,0 L0,0 Z' fill='%23fff'/%3E%3C/svg%3E");
}

.tobidu-sk-wave--info-out {
    background-color: #1a1200;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 50' preserveAspectRatio='none'%3E%3Cpath d='M0,30 C300,55 900,5 1200,28 L1200,50 L0,50 Z' fill='%23ffdcae'/%3E%3C/svg%3E");
}

/* ---------- Bericht 96: eigener Hintergrund + Deko-Animation + echte
   Chef-Grafiken für "Genießer aufgepasst!"/"Typisch Tobi" ---------- */
body .tobidu-page-speisekarte-info {
    background: #ffdcae;
    position: relative;
    overflow: hidden;
}

.tobidu-page-speisekarte-info::before {
    /* Bericht 99: weiter nach unten/innen gerückt statt in der Ecke zu
       kleben — vorher immer noch sichtbar angeschnitten. */
    content: "";
    position: absolute;
    top: 60px;
    right: 40px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: rgba(255, 107, 53, 0.10);
    pointer-events: none;
}

.tobidu-page-speisekarte-info::after {
    /* Bericht 99: weiter nach oben/innen gerückt statt in der Ecke zu
       kleben — vorher immer noch sichtbar angeschnitten. */
    content: "";
    position: absolute;
    bottom: 80px;
    left: 30px;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    background: rgba(0, 196, 160, 0.10);
    pointer-events: none;
}

.tobidu-sk-info__deco {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.tobidu-sk-info__deco span {
    position: absolute;
    font-size: 1.6rem;
    filter: drop-shadow(0 4px 10px rgba(26, 18, 0, 0.15));
}

.tobidu-page-speisekarte-info .container {
    position: relative;
    z-index: 2;
}

.tobidu-sk-info__block {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: var(--space-8, 2.5rem);
    align-items: start;
}

.tobidu-sk-info__block + .tobidu-sk-info__block {
    margin-top: var(--space-9, 3rem);
    padding-top: var(--space-9, 3rem);
    border-top: 1px dashed rgba(26, 18, 0, 0.12);
}

.tobidu-sk-info__block--reverse {
    grid-template-columns: 1fr 220px;
}

.tobidu-sk-info__block--reverse .tobidu-sk-info__media {
    order: 2;
}

.tobidu-sk-info__media img {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 720px) {
    .tobidu-sk-info__block,
    .tobidu-sk-info__block--reverse {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .tobidu-sk-info__block--reverse .tobidu-sk-info__media {
        order: 0;
    }

    .tobidu-sk-info__media {
        max-width: 200px;
        margin: 0 auto;
    }
}

.tobidu-sk-hint {
    background: #fff5e6;
    border-bottom: 2px solid rgba(255, 214, 10, 0.19);
}

.tobidu-sk-hint__inner {
    max-width: 720px;
    margin: 0 auto;
    padding: 1.1rem 1.5rem;
    text-align: center;
    font-family: var(--font-heading, inherit);
    font-weight: 700;
    font-size: 0.9rem;
    color: #5a4a30;
}

.tobidu-sk-hint__text {
    margin: 0;
    line-height: 1.6;
}

.tobidu-sk-hint__phone {
    display: inline-block;
    white-space: nowrap;
    margin-left: 0.3rem;
    font-weight: 900;
    color: #ff6b35;
    text-decoration: none;
}

.tobidu-sk-birthday {
    background: #1a1200;
    padding: 3.5rem 0;
}

.tobidu-sk-birthday__inner {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1.5rem;
    text-align: center;
}

.tobidu-sk-birthday__inner > span {
    display: block;
    font-size: 3rem;
    margin-bottom: 1rem;
}

.tobidu-sk-birthday__inner h2 {
    color: #fff;
    margin: 0 0 0.9rem;
    font-size: clamp(1.4rem, 3.5vw, 2.4rem);
}

.tobidu-sk-birthday__inner p {
    color: #9a8a70;
    font-size: 1rem;
    line-height: 1.75;
    margin: 0 0 1.75rem;
}

/* ==========================================================================
   FAQ — Bericht Nr. 71
   Hero + finale Kontakt-Karte 1:1 gegen Figma FAQPage.tsx. Der Akkordeon-
   Block selbst (echte CPT-Daten) bleibt unverändert.
   ========================================================================== */

.tobidu-faq-hero {
    background: linear-gradient(160deg, var(--color-bg-cream) 0%, var(--color-bg-warm) 100%);
    padding: 7rem 0 3.25rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.tobidu-faq-hero__glow {
    position: absolute;
    top: -60px;
    right: -60px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: rgba(255, 107, 53, 0.07);
    pointer-events: none;
}

.tobidu-faq-hero__inner {
    max-width: 680px;
    margin: 0 auto;
    padding: 0 1.5rem;
    position: relative;
}

/* Bericht 118: eigenes FAQ-Motiv (Tobi zeigt auf Tafel) ersetzt das
   generische quadratische Bärenkopf-Logo — Bildverhältnis ist breiter als
   hoch, daher feste Breite statt fixer Höhe. */
.tobidu-faq-hero__emoji {
    display: block;
    margin: 0 auto 0.75rem;
    width: 150px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 8px 20px rgba(255, 107, 53, 0.25));
}

.tobidu-faq-hero__inner .tobidu-pv2-badge {
    margin-bottom: 0.9rem;
}

.tobidu-faq-hero__inner h1 {
    margin: 0 0 0.85rem;
    line-height: 1.1;
}

.tobidu-faq-hero__text {
    font-size: 1.06rem;
    color: #7a6a50;
    line-height: 1.8;
    margin: 0;
}

/* Bericht 114 (korrigiert): Der Akkordeon-Block selbst füllt seinen
   Hintergrund bereits über die bestehende Section-8-Regel oben
   (".tobidu-faq-akkordeon::before", Creme-Vollbild-Trick) — er ist also
   genauso cremefarben wie die Kontakt-Section danach, dort braucht es
   keine Welle. Der eigentliche Farbwechsel liegt zwischen dem Hero-Verlauf
   (endet warm, #fff1de) und diesem Creme-Block (#fdfaf3) — die Welle
   gehört daher zwischen Hero und Akkordeon-Block, nicht danach.
   Regel wie auf anderen Seiten: background-color = Farbe der NACHFOLGENDEN
   Section (Akkordeon, Creme), Pfad-Fill = Farbe der VORANGEHENDEN Section
   (Hero-Ende, Warm). */
.tobidu-faq-wave--akkordeon-out {
    width: 100%;
    height: 50px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    background-color: #fdfaf3;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 50' preserveAspectRatio='none'%3E%3Cpath d='M0,20 C300,50 900,0 1200,22 L1200,0 L0,0 Z' fill='%23fff1de'/%3E%3C/svg%3E");
}

.tobidu-faq-contact-section {
    background: var(--color-bg-cream);
}

.tobidu-faq-contact {
    background: #1a1200;
    border-radius: 28px;
    padding: 2.25rem 2.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.tobidu-faq-contact__text h3 {
    color: #fff;
    font-size: 1.35rem;
    margin: 0 0 0.35rem;
}

.tobidu-faq-contact__text p {
    color: #9a8a70;
    font-size: 0.9rem;
    margin: 0;
}

.tobidu-faq-contact__actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.tobidu-faq-contact__call {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.4rem;
    border-radius: 999px;
    background: rgba(255, 214, 10, 0.15);
    color: #ffd60a;
    font-family: var(--font-heading, inherit);
    font-weight: 900;
    font-size: 0.9rem;
    text-decoration: none;
    border: 2px solid rgba(255, 214, 10, 0.3);
}

/* ---------- Bericht 114: Chatbot-Platzhalter-Button + Popup ---------- */
.tobidu-faq-contact__chatbot {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.4rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #7e57c2, #9c6dd8);
    color: #fff;
    font-family: var(--font-heading, inherit);
    font-weight: 900;
    font-size: 0.9rem;
    border: none;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(126, 87, 194, 0.35);
    transition: transform 0.15s ease;
}

.tobidu-faq-contact__chatbot:hover {
    transform: translateY(-2px);
}

.tobidu-faq-chatbot-modal {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-5, 1.25rem);
}

.tobidu-faq-chatbot-modal[hidden] {
    display: none;
}

.tobidu-faq-chatbot-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(26, 18, 0, 0.6);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.tobidu-faq-chatbot-modal__dialog {
    position: relative;
    max-width: 440px;
    width: 100%;
    background: #fff;
    border-radius: 28px;
    padding: 2.5rem 2rem 2rem;
    text-align: center;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
    animation: tobidu-faq-modal-in 0.2s ease both;
}

@keyframes tobidu-faq-modal-in {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.tobidu-faq-chatbot-modal__close {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--color-bg-cream, #f5f0e8);
    color: #5a4a30;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

.tobidu-faq-chatbot-modal__icon {
    display: block;
    font-size: 3rem;
    margin-bottom: 0.75rem;
}

.tobidu-faq-chatbot-modal__dialog h3 {
    margin: 0 0 0.75rem;
    font-size: 1.3rem;
}

.tobidu-faq-chatbot-modal__dialog p {
    color: #7a6a50;
    line-height: 1.7;
    margin: 0 0 1.5rem;
}

.tobidu-faq-chatbot-modal__actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ==========================================================================
   Anfahrt — Bericht Nr. 72 (Welle korrigiert in Bericht Nr. 119)
   Finale Outro-Section auf Orange umgestellt (statt generischem Himmelblau),
   damit der Footer (.tobidu-footer-wave) mit seiner fest orangen Fläche
   nahtlos anschließt.
   Wellen-Fill-Konvention für dieses ÜBERLAPPENDE ::before (Gegensatz zu den
   eigenständigen Divider-<div>s wie .tobidu-af-wave--hero-out!): die Welle
   ragt mit negativem top-Offset in die VORHERGEHENDE Section hinein und
   deckt deren letzte Pixelreihen ab — die Fill-Farbe muss daher der EIGENEN
   Hintergrundfarbe der Outro-Section entsprechen (so wirkt es, als würde
   Orange wellenförmig nach oben "hineinwachsen"); an den transparenten
   Stellen bleibt die tatsächliche Vorgänger-Farbe sichtbar. Ein Fill in der
   Vorgänger-Farbe (wie vorher, dark/#1a1200) ist auf einer gleichfarbigen
   Vorgänger-Section unsichtbar (Farbe-auf-Farbe) — genau der Fehler, der
   hier vom Architekten bemängelt wurde. Bericht 119: Vorgänger-Section ist
   jetzt außerdem creme statt dunkel, das allein hätte die Welle also
   ohnehin nicht mehr sichtbar gemacht.
   ========================================================================== */

.tobidu-page-intro .tobidu-pv2-badge {
    margin-bottom: 0.9rem;
}

body .tobidu-page-outro.tobidu-anfahrt-outro {
    background: linear-gradient(135deg, #ff6b35, #ff9a55);
}

body .tobidu-page-outro.tobidu-anfahrt-outro::before {
    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");
}

body .tobidu-anfahrt-outro .container {
    background: #fff;
}

/* ==========================================================================
   Kontakt — Bericht Nr. 73
   Hero + zweispaltiges Layout (Kontakt-Karten + mailto-Formular) 1:1
   gegen Figma KontaktPage.tsx. Alle Kontaktdaten weiterhin ausschließlich
   aus tobidu_get_contact()/tobidu_get_opening_hours_today().
   ========================================================================== */

.tobidu-kk-hero {
    background: linear-gradient(160deg, var(--color-bg-cream) 0%, var(--color-bg-warm) 100%);
    padding: 7rem 0 3.25rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.tobidu-kk-hero__glow {
    position: absolute;
    top: -60px;
    right: -60px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: rgba(255, 107, 53, 0.07);
    pointer-events: none;
}

.tobidu-kk-hero__inner {
    /*
     * Update Bericht Nr. 135 — max-width/margin/padding entfernt: diese
     * Regel lief dem gemeinsamen `.tobidu-pv2-inner` (max-width 1280px,
     * dasselbe Element trägt beide Klassen) bei gleicher Selektor-
     * Spezifität allein durch spätere Position in dieser Datei den Rang
     * ab und quetschte dadurch Seitenlogo/Hero-Bild auf der Kontaktseite
     * sichtbar kleiner als auf allen anderen Seiten mit .tobidu-page-
     * hero__grid (Anfahrt, AGB, Downloads, FAQ, Speisekarte, ...).
     */
    position: relative;
}

/* Bericht 121: eigenes Kontakt-Motiv statt Bären-Emoji. */
.tobidu-kk-hero__emoji {
    display: block;
    margin: 0 auto 0.75rem;
    width: 150px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 8px 20px rgba(255, 107, 53, 0.25));
}

.tobidu-kk-hero__inner .tobidu-pv2-badge {
    margin-bottom: 0.9rem;
}

.tobidu-kk-hero__inner h1 {
    margin: 0 0 0.85rem;
    line-height: 1.1;
}

.tobidu-kk-hero__text {
    font-size: 1.06rem;
    color: #7a6a50;
    line-height: 1.8;
    margin: 0;
}

.tobidu-kk-main {
    background: var(--color-bg-cream);
}

.tobidu-kk-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 2.5rem;
    align-items: start;
}

.tobidu-kk-info h2,
.tobidu-kk-form h2 {
    font-size: 1.6rem;
    color: #1a1200;
    margin: 0 0 1rem;
}

.tobidu-kk-info__card {
    display: flex;
    gap: 0.9rem;
    padding: 1.1rem 1.25rem;
    border-radius: 20px;
    text-decoration: none;
    margin-bottom: 1rem;
    transition: transform 0.2s;
}

.tobidu-kk-info__card:hover {
    transform: translateY(-2px);
}

.tobidu-kk-info__card--orange {
    background: rgba(255, 107, 53, 0.04);
    border: 1.5px solid rgba(255, 107, 53, 0.12);
}

.tobidu-kk-info__card--teal {
    background: rgba(0, 196, 160, 0.04);
    border: 1.5px solid rgba(0, 196, 160, 0.12);
}

.tobidu-kk-info__card--gold {
    background: rgba(255, 214, 10, 0.06);
    border: 1.5px solid rgba(255, 214, 10, 0.18);
}

.tobidu-kk-info__card--purple {
    background: rgba(126, 87, 194, 0.04);
    border: 1.5px solid rgba(126, 87, 194, 0.12);
}

.tobidu-kk-info__icon {
    width: 48px;
    height: 48px;
    border-radius: 15px;
    background: rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}

.tobidu-kk-info__label {
    display: block;
    font-family: var(--font-heading, inherit);
    font-weight: 800;
    font-size: 0.7rem;
    color: #ff6b35;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 0.2rem;
}

.tobidu-kk-info__value {
    display: block;
    font-family: var(--font-heading, inherit);
    font-weight: 700;
    font-size: 0.95rem;
    color: #1a1200;
    margin-bottom: 0.15rem;
}

.tobidu-kk-info__sub {
    display: block;
    font-size: 0.75rem;
    color: #9a8a70;
}

.tobidu-kk-info__birthday {
    background: #1a1200;
    border-radius: 24px;
    padding: 1.5rem 1.6rem;
    margin-top: 0.5rem;
}

.tobidu-kk-info__birthday-title {
    font-family: var(--font-heading, inherit);
    font-weight: 900;
    font-size: 1rem;
    color: #fff;
    margin-bottom: 0.4rem;
}

.tobidu-kk-info__birthday p {
    font-size: 0.8rem;
    color: #9a8a70;
    line-height: 1.65;
    margin: 0 0 1rem;
}

.tobidu-kk-form {
    background: #fff;
    border-radius: 28px;
    padding: 2.5rem 2.25rem;
    box-shadow: 0 16px 56px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

/*
 * Update Bericht Nr. X — die früheren Regeln für `.tobidu-kk-form form`,
 * `label`, `input/select/textarea`, `button[type="submit"]` sind entfallen:
 * das Kontaktformular selbst kommt jetzt aus dem theme-unabhängigen Plugin
 * `tobidu-form-system` (eigenes CSS, Klassen `.tfs__*`). Alte, breite
 * Nachfahren-Selektoren hier hätten sonst in das Plugin-Markup
 * hineingewirkt. `.tobidu-kk-form` bleibt als reiner Karten-Rahmen
 * (Hintergrund/Radius/Schatten) bestehen, `__hint` für den Telefon-Hinweis
 * unterhalb des Plugin-Formulars ebenfalls.
 */

.tobidu-kk-form__hint {
    font-size: 0.78rem;
    color: #9a8a70;
    text-align: center;
    margin: 0;
}

.tobidu-kk-form__hint a {
    color: #ff6b35;
    font-weight: 700;
}

@media (max-width: 900px) {
    .tobidu-kk-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .tobidu-kk-form__row {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Shop Gutscheine (my_shop) — Bericht Nr. 76
   1:1 gegen Figma ShopPage.tsx. Gutschein-Kaufsystem läuft über ein
   Zusatzplugin, das hier noch nicht eingebunden ist — alle Kauf-Buttons
   sind bewusst als Platzhalter ("Demnächst"/"Bald verfügbar") gestaltet,
   keine funktionalen Checkout-Links.
   ========================================================================== */

.tobidu-shop-hero {
    background: linear-gradient(160deg, #1a1200 0%, #2a1500 55%, #1a0a00 100%);
    padding: 7.5rem 0 4.5rem;
    position: relative;
    overflow: hidden;
}

.tobidu-shop-hero__dots {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(255, 107, 53, 0.12) 1.5px, transparent 1.5px);
    background-size: 32px 32px;
}

.tobidu-shop-hero__glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.tobidu-shop-hero__glow--1 {
    top: -130px;
    right: -130px;
    width: 420px;
    height: 420px;
    background: rgba(255, 107, 53, 0.1);
}

.tobidu-shop-hero__glow--2 {
    bottom: -80px;
    left: -80px;
    width: 320px;
    height: 320px;
    background: rgba(255, 214, 10, 0.07);
}

/* Bericht 124: war vorher selbst ein 2-Spalten-Grid (Text | Vorschau) —
   jetzt nur noch ein einfacher Block, der das einheitliche
   .tobidu-page-hero__grid (Bild links/Text rechts) und die Vorschau-Zeile
   darunter stapelt; die eigentliche Spaltenaufteilung übernimmt jetzt
   .tobidu-page-hero__grid selbst. */
.tobidu-shop-hero__inner {
    position: relative;
    z-index: 2;
}

.tobidu-shop-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.1rem;
    background: rgba(255, 214, 10, 0.15);
    border: 1px solid rgba(255, 214, 10, 0.3);
    padding: 0.45rem 1.1rem;
    border-radius: 999px;
    font-family: var(--font-heading, inherit);
    font-weight: 800;
    font-size: 0.75rem;
    color: #ffd60a;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.tobidu-shop-hero__col h1 {
    font-size: clamp(2rem, 5vw, 3.6rem);
    color: #fff;
    line-height: 1.05;
    margin: 0 0 1.1rem;
}

.tobidu-shop-hero__text {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.8;
    max-width: 460px;
    margin: 0 0 1.3rem;
}

.tobidu-shop-soon-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1.2rem;
    border-radius: 999px;
    background: rgba(255, 107, 53, 0.15);
    border: 1.5px solid rgba(255, 107, 53, 0.35);
    color: #ff9a55;
    font-family: var(--font-heading, inherit);
    font-weight: 800;
    font-size: 0.85rem;
    margin-bottom: 1.5rem;
}

.tobidu-shop-hero__facts {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.tobidu-shop-hero__facts div {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-heading, inherit);
    font-weight: 700;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.75);
}

.tobidu-shop-hero__facts span {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
}

/* Bericht 124: die Gutschein-Vorschau ist jetzt keine eigene Grid-Spalte
   mehr (der obere Bereich nutzt das einheitliche .tobidu-page-hero__grid),
   sondern eine eigene Zeile darunter — hier zentriert und auf eine
   sinnvolle Breite begrenzt statt volle Containerbreite. */
.tobidu-shop-hero__preview-row {
    display: flex;
    justify-content: center;
    margin-top: var(--space-10, 3.5rem);
}

.tobidu-shop-hero__preview {
    position: relative;
    max-width: 380px;
    width: 100%;
}

.tobidu-shop-hero__preview-main {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
    transform: rotate(-2deg);
}

.tobidu-shop-hero__preview-main img {
    width: 100%;
    display: block;
}

.tobidu-shop-hero__preview-sub {
    position: absolute;
    bottom: -24px;
    right: -16px;
    width: 55%;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
    transform: rotate(3deg);
    z-index: -1;
}

.tobidu-shop-hero__preview-sub img {
    width: 100%;
    display: block;
    opacity: 0.85;
}

.tobidu-shop-hero__price-badge {
    position: absolute;
    top: -14px;
    right: -14px;
    background: #ffd60a;
    border-radius: 50%;
    width: 72px;
    height: 72px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 28px rgba(255, 214, 10, 0.55);
    z-index: 3;
}

.tobidu-shop-hero__price-badge span {
    font-family: var(--font-heading, inherit);
    font-weight: 900;
    font-size: 0.6rem;
    color: #1a1200;
    line-height: 1;
}

.tobidu-shop-hero__price-badge strong {
    font-family: var(--font-heading, inherit);
    font-weight: 900;
    font-size: 1.25rem;
    color: #1a1200;
    line-height: 1;
}

.tobidu-shop-cards-section {
    background: var(--color-bg-cream);
}

.tobidu-shop-cards__head {
    text-align: center;
    margin-bottom: 2.5rem;
}

.tobidu-shop-cards__deco {
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
}

.tobidu-shop-cards__head h2 {
    font-size: clamp(1.6rem, 4vw, 2.6rem);
    color: #1a1200;
    margin: 0 0 0.6rem;
}

.tobidu-shop-cards__head p {
    color: #7a6a50;
    font-size: 0.98rem;
    max-width: 480px;
    margin: 0 auto;
    line-height: 1.7;
}

.tobidu-shop-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.75rem;
    max-width: 900px;
    margin: 0 auto;
}

.tobidu-shop-card {
    background: #fff;
    border-radius: 26px;
    overflow: hidden;
    box-shadow: 0 12px 44px rgba(0, 0, 0, 0.09);
    position: relative;
}

.tobidu-shop-card__flag {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 3;
    background: #ffd60a;
    border-radius: 999px;
    padding: 0.3rem 0.85rem;
    font-family: var(--font-heading, inherit);
    font-weight: 900;
    font-size: 0.68rem;
    color: #1a1200;
}

.tobidu-shop-card__img {
    background: var(--color-bg-warm);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.tobidu-shop-card__img img {
    width: auto;
    max-width: 60%;
    max-height: 220px;
    display: block;
}

@media (max-width: 640px) {
    .tobidu-shop-card__img img {
        max-width: 50%;
        max-height: 160px;
    }
}

.tobidu-shop-card__body {
    padding: 1.4rem 1.6rem 1.6rem;
}

.tobidu-shop-card__title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}

.tobidu-shop-card__title span {
    font-size: 1.3rem;
}

.tobidu-shop-card__title h3 {
    font-size: 1.1rem;
    color: #1a1200;
    margin: 0;
}

.tobidu-shop-card__body p {
    font-size: 0.86rem;
    color: #7a6a50;
    line-height: 1.7;
    margin: 0 0 1.1rem;
}

.tobidu-shop-card__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.8rem;
    border-radius: 999px;
    background: #ff6b35;
    color: #fff;
    font-family: var(--font-heading, inherit);
    font-weight: 800;
    font-size: 0.85rem;
    border: none;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.tobidu-shop-card__cta:hover {
    background: #e85a28;
    transform: translateY(-1px);
}

.tobidu-shop-info {
    margin-top: 3rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.tobidu-shop-info__item {
    background: #fff;
    border-radius: 18px;
    padding: 1.25rem 1.1rem;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
    text-align: center;
}

.tobidu-shop-info__item span {
    display: block;
    font-size: 1.7rem;
    margin-bottom: 0.5rem;
}

.tobidu-shop-info__item strong {
    display: block;
    font-family: var(--font-heading, inherit);
    font-weight: 900;
    font-size: 0.88rem;
    color: #1a1200;
    margin-bottom: 0.25rem;
}

.tobidu-shop-info__item small {
    display: block;
    font-size: 0.75rem;
    color: #9a8a70;
    line-height: 1.5;
}

.tobidu-shop-interim-note {
    text-align: center;
    margin: 2rem auto 0;
    max-width: 560px;
    font-size: 0.9rem;
    color: #7a6a50;
}

.tobidu-shop-interim-note a {
    color: #ff6b35;
    font-weight: 800;
}

/* ---------- Gutschein-Kauf-Widget (Bericht 147) ----------
   Wrapper/Karte für [tobidu_voucher_buy] — nur äußere Sektion, das
   Plugin-Widget selbst bringt sein eigenes CSS (tobidu-vchr-buy.css) mit. */
.tobidu-shop-buy {
    background: #fffbf5;
    padding: 4.5rem 0;
}

.tobidu-shop-buy__head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 2.5rem;
}

.tobidu-shop-buy__head h2 {
    margin: 0.75rem 0 0.5rem;
    color: var(--color-text, #1a1200);
}

.tobidu-shop-buy__head p {
    color: #7a6a50;
    line-height: 1.75;
    margin: 0;
}

.tobidu-shop-buy__card {
    max-width: 640px;
    margin: 0 auto;
    background: #fff;
    border: 1.5px solid rgba(255, 107, 53, 0.18);
    border-radius: 28px;
    box-shadow: 0 8px 36px rgba(0, 0, 0, 0.08);
    padding: 2rem;
}

@media (max-width: 640px) {
    .tobidu-shop-buy__card {
        padding: 1.5rem 1.25rem;
        border-radius: 20px;
    }
}

.tobidu-shop-marquee {
    background: #ff6b35;
    overflow: hidden;
    padding: 0.9rem 0;
}

.tobidu-shop-marquee__track {
    display: flex;
    width: max-content;
    animation: tobidu-marquee-scroll 26s linear infinite;
}

.tobidu-shop-marquee__item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 2rem;
    font-family: var(--font-heading, inherit);
    font-weight: 800;
    font-size: 0.88rem;
    color: #fff;
    white-space: nowrap;
}

.tobidu-shop-marquee__item span {
    color: rgba(255, 255, 255, 0.4);
    margin-left: 0.5rem;
}

.tobidu-shop-wave--marquee-out {
    position: relative;
    width: 100%;
    height: 56px;
    background-color: #ff6b35;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,20 C320,70 720,0 1080,60 C1260,80 1380,40 1440,25 L1440,0 L0,0 Z' fill='%231a1200'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin-top: -2px;
}

.tobidu-shop-why {
    background: #1a1200;
    padding: 4.5rem 0 5.5rem;
    position: relative;
    overflow: hidden;
}

.tobidu-shop-why__glow {
    position: absolute;
    top: -80px;
    right: -80px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: rgba(255, 107, 53, 0.07);
    pointer-events: none;
}

.tobidu-shop-why__head {
    text-align: center;
    margin-bottom: 3.25rem;
    position: relative;
}

.tobidu-shop-why__head h2 {
    font-size: clamp(1.6rem, 3.5vw, 2.75rem);
    color: #fff;
    margin: 0 0 0.6rem;
}

.tobidu-shop-why__head p {
    font-size: 0.94rem;
    color: #9a8a70;
    max-width: 440px;
    margin: 0 auto;
}

.tobidu-shop-why__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    position: relative;
}

.tobidu-shop-why__card {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 22px;
    padding: 1.6rem 1.35rem;
    border: 1px solid rgba(255, 107, 53, 0.12);
}

.tobidu-shop-why__card span {
    display: flex;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: rgba(255, 107, 53, 0.1);
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    margin-bottom: 0.9rem;
}

.tobidu-shop-why__card h3 {
    font-size: 1.05rem;
    color: #fff;
    margin: 0 0 0.5rem;
}

.tobidu-shop-why__card p {
    font-size: 0.82rem;
    color: #9a8a70;
    line-height: 1.65;
    margin: 0;
}

@keyframes tobidu-marquee-scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

@media (max-width: 900px) {
    .tobidu-shop-hero__inner {
        grid-template-columns: 1fr;
    }

    .tobidu-shop-hero__preview-row {
        display: none;
    }

    .tobidu-shop-cards {
        grid-template-columns: 1fr;
    }

    .tobidu-shop-why__grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .tobidu-shop-info {
        grid-template-columns: 1fr 1fr;
    }

    .tobidu-shop-why__grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Downloads & Vorlagen — Bericht Nr. 78
   1:1 gegen Figma DownloadsPage.tsx: dunkler Hero, Gradient-Kopf-Karten,
   gelbe Malvorlagen-Section (echte Ausmalbilder), dunkle Kontakt-CTA.
   ========================================================================== */

.tobidu-dl-hero {
    background: linear-gradient(160deg, #1a1200 0%, #2a1800 55%, #1a1200 100%);
    padding: 7rem 0 4rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.tobidu-dl-hero__dots {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(255, 107, 53, 0.1) 1.5px, transparent 1.5px);
    background-size: 32px 32px;
}

.tobidu-dl-hero__glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.tobidu-dl-hero__glow--1 {
    top: -100px;
    right: -100px;
    width: 380px;
    height: 380px;
    background: rgba(255, 107, 53, 0.09);
}

.tobidu-dl-hero__glow--2 {
    bottom: -70px;
    left: -70px;
    width: 300px;
    height: 300px;
    background: rgba(255, 214, 10, 0.06);
}

.tobidu-dl-hero__inner {
    max-width: 780px;
    margin: 0 auto;
    padding: 0 1.5rem;
    position: relative;
}

.tobidu-dl-hero__inner .tobidu-pv2-badge {
    margin-bottom: 1rem;
}

.tobidu-dl-hero__inner h1 {
    color: #fff;
    margin: 0 0 1rem;
    line-height: 1.1;
}

.tobidu-dl-hero__text {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.8;
    max-width: 520px;
    margin: 0 auto;
}

.tobidu-dl-cards-section {
    background: var(--color-bg-cream);
}

.tobidu-dl-cards__head {
    text-align: center;
    margin-bottom: 2.5rem;
}

.tobidu-dl-cards__deco {
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
}

.tobidu-dl-cards__head h2 {
    font-size: clamp(1.6rem, 3.5vw, 2.6rem);
    color: #1a1200;
    margin: 0 0 0.5rem;
}

.tobidu-dl-cards__head p {
    color: #7a6a50;
    font-size: 0.95rem;
    max-width: 440px;
    margin: 0 auto;
    line-height: 1.7;
}

.tobidu-dl-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.tobidu-dl-card {
    background: #fff;
    border-radius: 26px;
    overflow: hidden;
    box-shadow: 0 8px 34px rgba(0, 0, 0, 0.09);
    display: flex;
    flex-direction: column;
}

.tobidu-dl-card__head {
    padding: 1.75rem 1.5rem 1.25rem;
    position: relative;
    overflow: hidden;
}

.tobidu-dl-card--orange .tobidu-dl-card__head {
    background: linear-gradient(135deg, #ff6b35, #ff9a55);
}

.tobidu-dl-card--teal .tobidu-dl-card__head {
    background: linear-gradient(135deg, #00c4a0, #00a890);
}

.tobidu-dl-card--pink .tobidu-dl-card__head {
    background: linear-gradient(135deg, #e91e8c, #ff6b9d);
}

.tobidu-dl-card__head span {
    display: block;
    font-size: 2.5rem;
    margin-bottom: 0.6rem;
}

.tobidu-dl-card__head h3 {
    font-size: 1.25rem;
    color: #fff;
    margin: 0;
}

.tobidu-dl-card__body {
    padding: 1.3rem 1.4rem 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.tobidu-dl-card__body p {
    font-size: 0.88rem;
    color: #5a4a30;
    line-height: 1.7;
    margin: 0 0 1rem;
    flex: 1;
}

.tobidu-dl-card__badge {
    display: inline-block;
    align-self: flex-start;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 999px;
    padding: 0.3rem 0.75rem;
    font-family: var(--font-heading, inherit);
    font-weight: 800;
    font-size: 0.7rem;
    color: #7a6a50;
    margin-bottom: 1.1rem;
}

.tobidu-dl-card--orange .tobidu-dl-card__badge {
    color: #ff6b35;
    background: rgba(255, 107, 53, 0.1);
}

.tobidu-dl-card--teal .tobidu-dl-card__badge {
    color: #00a890;
    background: rgba(0, 196, 160, 0.1);
}

.tobidu-dl-card--pink .tobidu-dl-card__badge {
    color: #e91e8c;
    background: rgba(233, 30, 140, 0.1);
}

.tobidu-dl-card__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem;
    border-radius: 999px;
    color: #fff;
    font-family: var(--font-heading, inherit);
    font-weight: 900;
    font-size: 0.88rem;
    text-decoration: none;
}

.tobidu-dl-card--orange .tobidu-dl-card__btn {
    background: linear-gradient(135deg, #ff6b35, #ff9a55);
    box-shadow: 0 6px 20px rgba(255, 107, 53, 0.3);
}

.tobidu-dl-card--teal .tobidu-dl-card__btn {
    background: linear-gradient(135deg, #00c4a0, #00a890);
    box-shadow: 0 6px 20px rgba(0, 196, 160, 0.3);
}

.tobidu-dl-card--pink .tobidu-dl-card__btn {
    background: linear-gradient(135deg, #e91e8c, #ff6b9d);
    box-shadow: 0 6px 20px rgba(233, 30, 140, 0.3);
}

.tobidu-pv2-wave--dl-mal-in {
    margin-top: -2px;
    background-color: #fffbf5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,60 C320,10 720,80 1080,20 C1260,0 1380,40 1440,55 L1440,80 L0,80 Z' fill='%23ffd60a'/%3E%3C/svg%3E");
}

.tobidu-pv2-wave--dl-mal-out {
    margin-top: -2px;
    background-color: #ffd60a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,20 C320,70 720,0 1080,60 C1260,80 1380,40 1440,25 L1440,0 L0,0 Z' fill='%231a1200'/%3E%3C/svg%3E");
}

/* Bericht 91: der gelbe Malvorlagen-Bereich wirkte flach ("kalt") — Punkte-
   Hintergrundmuster, bunte Blur-Blobs und schwebende Deko (Buntstifte/
   Sterne) ergänzt, analog zu den Deko-Layern der anderen Sections. */
.tobidu-dl-mal {
    background: #ffd60a;
    padding: 4rem 0;
    position: relative;
    overflow: hidden;
}

.tobidu-dl-mal::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(26, 18, 0, 0.12) 1.5px, transparent 1.5px);
    background-size: 30px 30px;
    pointer-events: none;
}

.tobidu-dl-mal__blob {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.tobidu-dl-mal__blob--1 {
    top: -90px;
    left: -90px;
    width: 300px;
    height: 300px;
    background: rgba(255, 107, 53, 0.20);
}

.tobidu-dl-mal__blob--2 {
    bottom: -110px;
    right: -70px;
    width: 340px;
    height: 340px;
    background: rgba(0, 196, 160, 0.18);
}

.tobidu-dl-mal__blob--3 {
    top: 32%;
    right: 6%;
    width: 150px;
    height: 150px;
    background: rgba(233, 30, 140, 0.14);
}

.tobidu-dl-mal__deco {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.tobidu-dl-mal__deco span {
    position: absolute;
    font-size: 1.5rem;
    filter: drop-shadow(0 4px 10px rgba(26, 18, 0, 0.18));
}

.tobidu-dl-mal__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.tobidu-dl-mal__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    background: rgba(26, 18, 0, 0.1);
    padding: 0.4rem 1rem;
    border-radius: 999px;
    font-family: var(--font-heading, inherit);
    font-weight: 800;
    font-size: 0.75rem;
    color: #1a1200;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.tobidu-dl-mal__text h2 {
    font-size: clamp(1.4rem, 3.5vw, 2.3rem);
    color: #1a1200;
    margin: 0 0 1rem;
    line-height: 1.25;
}

.tobidu-dl-mal__text p {
    font-size: 0.95rem;
    color: rgba(26, 18, 0, 0.75);
    line-height: 1.8;
    margin: 0 0 1.25rem;
}

.tobidu-dl-mal__list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 1.5rem;
}

.tobidu-dl-mal__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 14px;
    padding: 0.6rem 1rem;
    text-decoration: none;
}

.tobidu-dl-mal__item img {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
}

.tobidu-dl-mal__item span {
    font-family: var(--font-heading, inherit);
    font-weight: 800;
    font-size: 0.88rem;
    color: #1a1200;
}

.tobidu-dl-mal__mail {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8rem 1.4rem;
    border-radius: 999px;
    background: #1a1200;
    color: #ffd60a;
    font-family: var(--font-heading, inherit);
    font-weight: 900;
    font-size: 0.85rem;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(26, 18, 0, 0.28);
}

.tobidu-dl-mal__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.tobidu-dl-mal__tile {
    display: block;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.22);
    border: 3px solid #fff;
    background: #fff;
    aspect-ratio: 1;
    position: relative;
    text-decoration: none;
    cursor: zoom-in;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.tobidu-dl-mal__tile:hover,
.tobidu-dl-mal__tile:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
}

.tobidu-dl-mal__tile::after {
    content: "🔍";
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}

.tobidu-dl-mal__tile:hover::after,
.tobidu-dl-mal__tile:focus-visible::after {
    opacity: 1;
    transform: translateY(0);
}

.tobidu-dl-mal__tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tobidu-dl-mal__tile:nth-child(3) {
    grid-column: span 2;
}

.tobidu-dl-contact {
    background: #1a1200;
    padding: 4.5rem 0 5.5rem;
    position: relative;
    overflow: hidden;
}

.tobidu-dl-contact__glow {
    position: absolute;
    top: -60px;
    right: -60px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: rgba(255, 107, 53, 0.07);
    pointer-events: none;
}

.tobidu-dl-contact__inner {
    max-width: 700px;
    margin: 0 auto;
    padding: 0 1.5rem;
    text-align: center;
    position: relative;
}

.tobidu-dl-contact__inner h2 {
    color: #fff;
    font-size: clamp(1.5rem, 3.5vw, 2.4rem);
    margin: 0 0 0.85rem;
}

.tobidu-dl-contact__inner p {
    color: #9a8a70;
    font-size: 0.95rem;
    line-height: 1.75;
    margin: 0 0 2rem;
}

.tobidu-dl-contact__actions {
    display: flex;
    gap: 0.85rem;
    justify-content: center;
    flex-wrap: wrap;
}

@media (max-width: 900px) {
    .tobidu-dl-cards {
        grid-template-columns: 1fr;
    }

    .tobidu-dl-mal__inner {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Jobs — Bericht Nr. 79
   1:1 gegen Figma JobsPage.tsx: dunkler Hero, Akkordeon-artige Stellen-
   karten, dunkle Benefits-Section, finale orange Bewerbungs-CTA.
   ========================================================================== */

.tobidu-jb-hero {
    background: linear-gradient(160deg, #1a1200 0%, #2a1800 55%, #1a1200 100%);
    padding: 7.5rem 0 4.5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.tobidu-jb-hero__dots {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(255, 107, 53, 0.1) 1.5px, transparent 1.5px);
    background-size: 32px 32px;
}

.tobidu-jb-hero__glow {
    position: absolute;
    top: -100px;
    right: -100px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: rgba(255, 107, 53, 0.09);
    pointer-events: none;
}

.tobidu-jb-hero__inner {
    max-width: 820px;
    margin: 0 auto;
    padding: 0 1.5rem;
    position: relative;
}

.tobidu-jb-hero__inner .tobidu-pv2-badge {
    margin-bottom: 1.1rem;
}

.tobidu-jb-hero__inner h1 {
    color: #fff;
    margin: 0 0 1.1rem;
    line-height: 1.1;
}

.tobidu-jb-hero__text {
    font-size: 1.06rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.8;
    max-width: 540px;
    margin: 0 auto 1.75rem;
}

.tobidu-jb-jobs-section {
    background: var(--color-bg-cream);
}

.tobidu-jb-jobs__head {
    text-align: center;
    margin-bottom: 2.75rem;
}

.tobidu-jb-jobs__head h2 {
    font-size: clamp(1.6rem, 3.5vw, 2.6rem);
    color: #1a1200;
    margin: 0 0 0.5rem;
}

.tobidu-jb-jobs__head p {
    color: #7a6a50;
    font-size: 0.95rem;
    max-width: 480px;
    margin: 0 auto;
}

.tobidu-jb-jobs {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 960px;
    margin: 0 auto;
}

.tobidu-jb-job {
    background: #fff;
    border-radius: 28px;
    padding: 1.75rem 2rem 2rem;
    box-shadow: 0 8px 36px rgba(0, 0, 0, 0.09);
}

.tobidu-jb-job__head {
    display: flex;
    gap: 1.25rem;
    align-items: center;
    margin-bottom: 1.1rem;
}

.tobidu-jb-job__icon {
    width: 64px;
    height: 64px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.9rem;
    flex-shrink: 0;
}

.tobidu-jb-job--orange .tobidu-jb-job__icon {
    background: linear-gradient(135deg, #ff6b35, #ff9a55);
    box-shadow: 0 6px 20px rgba(255, 107, 53, 0.3);
}

.tobidu-jb-job--teal .tobidu-jb-job__icon {
    background: linear-gradient(135deg, #00c4a0, #00a890);
    box-shadow: 0 6px 20px rgba(0, 196, 160, 0.3);
}

.tobidu-jb-job__title h3 {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    font-size: 1.25rem;
    color: #1a1200;
    margin: 0 0 0.25rem;
}

.tobidu-jb-job__type {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.2rem 0.75rem;
    font-family: var(--font-heading, inherit);
    font-weight: 800;
    font-size: 0.68rem;
}

.tobidu-jb-job--orange .tobidu-jb-job__type {
    background: rgba(255, 107, 53, 0.12);
    border: 1.5px solid rgba(255, 107, 53, 0.3);
    color: #ff6b35;
}

.tobidu-jb-job--teal .tobidu-jb-job__type {
    background: rgba(0, 196, 160, 0.12);
    border: 1.5px solid rgba(0, 196, 160, 0.3);
    color: #00a890;
}

.tobidu-jb-job__title p {
    font-size: 0.82rem;
    color: #9a8a70;
    margin: 0;
}

.tobidu-jb-job__intro {
    font-size: 0.92rem;
    color: #5a4a30;
    line-height: 1.7;
    margin: 0 0 1.5rem;
}

.tobidu-jb-job__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    border-top: 1px solid #f5f0e8;
    padding-top: 1.5rem;
}

.tobidu-jb-job__label {
    font-family: var(--font-heading, inherit);
    font-weight: 900;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.85rem;
}

.tobidu-jb-job--orange .tobidu-jb-job__label {
    color: #ff6b35;
}

.tobidu-jb-job--teal .tobidu-jb-job__label {
    color: #00a890;
}

.tobidu-jb-job__grid ul {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
}

.tobidu-jb-job__grid li {
    display: flex;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
    font-size: 0.86rem;
    color: #5a4a30;
    line-height: 1.6;
}

.tobidu-jb-job__grid li span {
    font-weight: 900;
    flex-shrink: 0;
}

.tobidu-jb-job--orange .tobidu-jb-job__grid li span {
    color: #ff6b35;
}

.tobidu-jb-job--teal .tobidu-jb-job__grid li span {
    color: #00a890;
}

.tobidu-jb-job__apply {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.3rem;
    border-radius: 999px;
    color: #fff;
    font-family: var(--font-heading, inherit);
    font-weight: 900;
    font-size: 0.82rem;
    text-decoration: none;
}

.tobidu-jb-job--orange .tobidu-jb-job__apply {
    background: linear-gradient(135deg, #ff6b35, #ff9a55);
    box-shadow: 0 6px 20px rgba(255, 107, 53, 0.3);
}

.tobidu-jb-job--teal .tobidu-jb-job__apply {
    background: linear-gradient(135deg, #00c4a0, #00a890);
    box-shadow: 0 6px 20px rgba(0, 196, 160, 0.3);
}

.tobidu-jb-benefits {
    background: #1a1200;
    padding: 4rem 0 4.5rem;
}

.tobidu-jb-benefits__head {
    text-align: center;
    margin-bottom: 2.75rem;
}

.tobidu-jb-benefits__head h2 {
    font-size: clamp(1.6rem, 3.5vw, 2.6rem);
    color: #fff;
    margin: 0 0 0.5rem;
}

.tobidu-jb-benefits__head p {
    color: #9a8a70;
    font-size: 0.95rem;
    max-width: 480px;
    margin: 0 auto;
}

.tobidu-jb-benefits__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.1rem;
}

.tobidu-jb-benefits__item {
    background: rgba(255, 255, 255, 0.05);
    border: 1.5px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px;
    padding: 1.5rem 1.35rem;
}

.tobidu-jb-benefits__item span {
    display: block;
    font-size: 1.8rem;
    margin-bottom: 0.75rem;
}

.tobidu-jb-benefits__item p {
    font-size: 0.85rem;
    color: #d5c5a5;
    line-height: 1.65;
    margin: 0;
}

.tobidu-jb-cta-section {
    background: linear-gradient(135deg, #ff6b35, #ff9a55);
    padding: 4.5rem 0 5.5rem;
}

.tobidu-jb-cta {
    max-width: 640px;
    margin: 0 auto;
    padding: 0 1.5rem;
    text-align: center;
}

.tobidu-jb-cta > span {
    display: block;
    font-size: 3rem;
    margin-bottom: 1rem;
}

.tobidu-jb-cta h2 {
    color: #fff;
    font-size: clamp(1.4rem, 3vw, 2.1rem);
    margin: 0 0 0.85rem;
}

.tobidu-jb-cta p {
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.95rem;
    line-height: 1.75;
    margin: 0 0 1.75rem;
}

.tobidu-jb-cta__actions {
    display: flex;
    gap: 0.85rem;
    justify-content: center;
    flex-wrap: wrap;
}

.tobidu-jb-cta__primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.6rem;
    border-radius: 999px;
    background: #fff;
    color: #ff6b35;
    font-family: var(--font-heading, inherit);
    font-weight: 900;
    font-size: 0.92rem;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.tobidu-jb-cta__secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.6rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.4);
    color: #fff;
    font-family: var(--font-heading, inherit);
    font-weight: 900;
    font-size: 0.92rem;
    text-decoration: none;
}

@media (max-width: 768px) {
    .tobidu-jb-job__grid {
        grid-template-columns: 1fr;
    }

    .tobidu-jb-benefits__grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .tobidu-jb-benefits__grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Rechtsseiten (AGB / Impressum / Datenschutz) — Bericht Nr. 80
   1:1 gegen Figma AGBPage.tsx: dunkler Hero, §-Akkordeon-Karten. Der
   Rechtstext selbst ist bei allen drei Seiten unverändert/live-treu.
   ========================================================================== */

.tobidu-legal-hero {
    background: linear-gradient(160deg, #1a1200, #2a1800);
    padding: 7rem 0 3.5rem;
    text-align: center;
}

.tobidu-legal-hero__inner {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.tobidu-legal-hero__inner .tobidu-pv2-badge {
    margin-bottom: 1.1rem;
}

.tobidu-legal-hero__inner h1 {
    color: #fff;
    margin: 0 0 0.85rem;
    font-size: clamp(1.8rem, 4vw, 3rem);
    line-height: 1.15;
}

.tobidu-legal-hero__text {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.8;
    margin: 0;
}

.tobidu-legal-section {
    background: var(--color-bg-cream);
}

.tobidu-legal-section .container {
    max-width: 880px;
}

.tobidu-legal-info {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.06), rgba(255, 214, 10, 0.03));
    border: 1.5px solid rgba(255, 107, 53, 0.13);
    border-radius: 20px;
    padding: 1.1rem 1.4rem;
    margin-bottom: 2rem;
}

.tobidu-legal-info > span {
    font-size: 1.4rem;
    flex-shrink: 0;
}

.tobidu-legal-info__title {
    font-family: var(--font-heading, inherit);
    font-weight: 900;
    font-size: 0.9rem;
    color: #1a1200;
    margin-bottom: 0.2rem;
}

.tobidu-legal-info p {
    font-size: 0.82rem;
    color: #7a6a50;
    line-height: 1.7;
    margin: 0;
}

.tobidu-legal-accordion {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.tobidu-legal-item {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.tobidu-legal-item summary {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.4rem;
    cursor: pointer;
    list-style: none;
}

.tobidu-legal-item summary::-webkit-details-marker {
    display: none;
}

.tobidu-legal-item summary::after {
    content: '⌄';
    margin-left: auto;
    color: #ff6b35;
    font-size: 1.2rem;
    transition: transform 0.25s;
    flex-shrink: 0;
}

.tobidu-legal-item[open] summary::after {
    transform: rotate(180deg);
}

.tobidu-legal-item__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    height: 34px;
    background: linear-gradient(135deg, #ff6b35, #ff9a55);
    border-radius: 10px;
    font-family: var(--font-heading, inherit);
    font-weight: 900;
    font-size: 0.7rem;
    color: #fff;
    flex-shrink: 0;
    padding: 0 0.5rem;
}

.tobidu-legal-item__title {
    font-family: var(--font-heading, inherit);
    font-weight: 800;
    font-size: 0.94rem;
    color: #1a1200;
}

.tobidu-legal-item__body {
    padding: 0 1.4rem 1.2rem 5.6rem;
}

.tobidu-legal-item__body p {
    font-size: 0.86rem;
    color: #5a4a30;
    line-height: 1.8;
    margin: 0 0 0.9rem;
}

.tobidu-legal-item__body p:last-child {
    margin-bottom: 0;
}

/* Bericht 122: Datenschutz-Abschnitte enthalten zusätzlich <h3>-
   Unterüberschriften und <ul>-Listen (Cookies/Server-Log-Felder) —
   dieselbe Typografie wie zuvor .tobidu-legal-card--prose, hier auf den
   Akkordeon-Body übertragen. */
.tobidu-legal-item__body h3 {
    font-size: 0.92rem;
    color: #1a1200;
    margin: 1.4rem 0 0.5rem;
}

.tobidu-legal-item__body h3:first-child {
    margin-top: 0;
}

.tobidu-legal-item__body ul {
    margin: 0 0 0.9rem;
    padding-left: 1.3rem;
}

.tobidu-legal-item__body li {
    font-size: 0.86rem;
    color: #5a4a30;
    line-height: 1.75;
    margin-bottom: 0.4rem;
}

.tobidu-legal-item__body strong {
    color: #1a1200;
}

.tobidu-legal-item__body a {
    color: #ff6b35;
    font-weight: 700;
}

.tobidu-legal-contact {
    margin-top: 2.5rem;
    padding: 1.75rem 1.75rem;
    background: #f5f0e8;
    border-radius: 20px;
}

.tobidu-legal-contact p {
    font-size: 0.82rem;
    color: #7a6a50;
    line-height: 1.8;
    margin: 0;
}

.tobidu-legal-contact a {
    color: #ff6b35;
    font-weight: 700;
}

.tobidu-legal-contact__links {
    display: flex;
    gap: 0.9rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.tobidu-legal-contact__links a {
    font-family: var(--font-heading, inherit);
    font-weight: 800;
    font-size: 0.82rem;
}

@media (max-width: 600px) {
    .tobidu-legal-item__body {
        padding-left: 1.4rem;
    }
}

/* ---------- Impressum: Info-Block/Zeilen-Karte (Bericht Nr. 81) ---------- */

.tobidu-legal-card {
    background: #fff;
    border-radius: 28px;
    padding: 2.5rem;
    box-shadow: 0 8px 36px rgba(0, 0, 0, 0.08);
}

.tobidu-legal-block {
    margin-bottom: 2.25rem;
}

.tobidu-legal-block--last {
    margin-bottom: 0;
}

.tobidu-legal-block h2 {
    font-size: 1.1rem;
    color: #ff6b35;
    margin: 0 0 0.9rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid rgba(255, 107, 53, 0.13);
}

.tobidu-legal-block p {
    font-size: 0.88rem;
    color: #5a4a30;
    line-height: 1.85;
    margin: 0 0 0.75rem;
}

.tobidu-legal-block p:last-child {
    margin-bottom: 0;
}

.tobidu-legal-block a {
    color: #ff6b35;
    font-weight: 700;
}

.tobidu-legal-row {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 0.75rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid #f5f0e8;
    font-size: 0.88rem;
}

.tobidu-legal-row:last-child {
    border-bottom: none;
}

.tobidu-legal-row span:first-child {
    font-family: var(--font-heading, inherit);
    font-weight: 800;
    font-size: 0.82rem;
    color: #9a8a70;
}

.tobidu-legal-row span:last-child {
    color: #1a1200;
}

.tobidu-legal-related__intro {
    font-size: 0.82rem !important;
    color: #7a6a50 !important;
}

.tobidu-legal-related {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.tobidu-legal-related__item {
    display: block;
    background: #f5f0e8;
    border-radius: 14px;
    padding: 0.9rem 1.1rem;
    text-decoration: none;
    transition: background 0.15s;
}

.tobidu-legal-related__item:hover {
    background: #efe6d8;
}

.tobidu-legal-related__name {
    font-family: var(--font-heading, inherit);
    font-weight: 800;
    font-size: 0.9rem;
    color: #1a1200;
    margin-bottom: 0.15rem;
}

.tobidu-legal-related__desc {
    font-size: 0.78rem;
    color: #7a6a50;
    line-height: 1.5;
}

@media (max-width: 560px) {
    .tobidu-legal-row {
        grid-template-columns: 1fr;
        gap: 0.2rem;
    }

    .tobidu-legal-card {
        padding: 1.75rem 1.5rem;
    }
}

/* ---------- Datenschutz: Original-Fließtext in Karten-Typografie (Bericht Nr. 82) ---------- */

.tobidu-legal-card--prose h2 {
    font-size: 1.15rem;
    color: #ff6b35;
    margin: 2.25rem 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid rgba(255, 107, 53, 0.13);
}

.tobidu-legal-card--prose h2:first-child {
    margin-top: 0;
}

.tobidu-legal-card--prose h3 {
    font-size: 0.98rem;
    color: #1a1200;
    margin: 1.5rem 0 0.6rem;
}

.tobidu-legal-card--prose p {
    font-size: 0.88rem;
    color: #5a4a30;
    line-height: 1.85;
    margin: 0 0 0.9rem;
}

.tobidu-legal-card--prose ul {
    margin: 0 0 0.9rem;
    padding-left: 1.3rem;
}

.tobidu-legal-card--prose li {
    font-size: 0.88rem;
    color: #5a4a30;
    line-height: 1.75;
    margin-bottom: 0.4rem;
}

.tobidu-legal-card--prose strong {
    color: #1a1200;
}

.tobidu-legal-card--prose a {
    color: #ff6b35;
    font-weight: 700;
}