/* ============================================================
   Schnabuliermobil – eigene Anpassungen über dem Yummi-Template
   Marke: Orange #e5531e ("Schnabulier") + Olivgrün #7d8b1f ("Mobil")
   ============================================================ */

/* --- Text-Wortmarke (Platzhalter statt Logo-Grafik) --- */
.sm-logo {
    font-family: 'Lato', sans-serif;
    font-weight: 800;
    font-size: 1.85rem;
    line-height: 1;
    letter-spacing: -0.5px;
    display: inline-block;
    white-space: nowrap;
}
.sm-logo .sm-logo-s { color: #e5531e; }
.sm-logo .sm-logo-m { color: #7d8b1f; }
.mad-header--transparent .mad-header-items:not(.mad-stuck) .sm-logo .sm-logo-m { color: #fff; }

/* --- CSS-Hero (ersetzt den Revolution Slider) --- */
.sm-hero {
    position: relative;
    min-height: 88vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    color: #fff;
    text-align: center;
}
/* Abdunklung: gleichmäßiger Grundschleier + dunkle, weiche Ellipse hinter dem Text,
   damit die Schrift auch über unruhigen Bildbereichen ruhig steht. */
.sm-hero::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background:
        radial-gradient(ellipse 60% 55% at 50% 48%, rgba(20,20,22,0.72) 0%, rgba(20,20,22,0.28) 70%, rgba(20,20,22,0) 100%),
        linear-gradient(180deg, rgba(28,28,30,0.55) 0%, rgba(28,28,30,0.40) 45%, rgba(28,28,30,0.80) 100%);
}
/* Text-Container vertikal zentriert im Raum oberhalb der Kategorie-Leiste */
.sm-hero > .container { position: relative; z-index: 2; width: 100%; margin-top: auto; margin-bottom: auto; }
.sm-hero .sm-hero-kicker {
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 700;
    color: #c4d36a;
    margin-bottom: 1rem;
    text-shadow: 0 1px 10px rgba(0,0,0,0.6);
}
.sm-hero h1 {
    color: #fff;
    font-size: 4rem;
    line-height: 1.05;
    margin-bottom: 1.5rem;
    text-shadow: 0 2px 22px rgba(0,0,0,0.55);
}
.sm-hero h1 .sm-accent { color: #ff7a45; }
.sm-hero p.sm-hero-lead {
    font-size: 1.35rem;
    max-width: 640px;
    margin: 0 auto 2.5rem;
    color: #fff;
    text-shadow: 0 1px 14px rgba(0,0,0,0.65);
}
/* Buttons im Hero zentrieren (btn-set ist sonst linksbündig) */
.sm-hero .btn-set { justify-content: center; }
.sm-hero .btn-set .btn { margin: 0 0.4rem 0.8rem; }

/* Kategorie-Leiste als letztes Flex-Element echt am Hero-Boden (statt absolut).
   Dadurch sitzt sie immer bündig an der Unterkante – unabhängig von der Fenstergröße –
   und die grüne Hover-Fläche reicht exakt bis zum Rand. */
.sm-hero .mad-menu-box-wrap { position: static; width: 100%; }
.sm-hero .mad-menu-box .mad-menu-item { padding-top: 1.5rem; padding-bottom: 2rem; }

@media (max-width: 768px) {
    .sm-hero { min-height: 78vh; }
    .sm-hero h1 { font-size: 2.6rem; }
    .sm-hero p.sm-hero-lead { font-size: 1.1rem; }
}

/* --- Seitenkopf (Breadcrumb-Hero) für Unterseiten: höher, kräftiges Overlay, lesbar --- */
.sm-pagehead {
    position: relative;
    min-height: 56vh;
    display: flex;
    align-items: center;
    background-position: center center;
    background-size: cover;
    color: #fff;
    text-align: center;
    padding: 6rem 0;
}
.sm-pagehead::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(180deg, rgba(28,28,30,0.50) 0%, rgba(28,28,30,0.68) 100%);
}
.sm-pagehead .container { position: relative; z-index: 2; width: 100%; }
.sm-pagehead h1 { color: #fff; margin-bottom: 0.5rem; text-shadow: 0 2px 18px rgba(0,0,0,0.5); }
.sm-pagehead p { color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,0.6); }
.sm-pagehead .sm-crumb { color: #c4d36a; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; text-shadow: 0 1px 8px rgba(0,0,0,0.6); }

/* --- Platzhalter-Hinweis (klar erkennbar, bis echte Daten kommen) --- */
.sm-placeholder {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #b03f12;
    background: #fcf2ec;
    border: 1px dashed #e5531e;
    border-radius: 4px;
    padding: 2px 8px;
}

/* --- Preise: Euro statt Dollar (Template setzt sonst $ via ::before) --- */
.mad-spec-price::before { content: '' !important; }
.mad-pt-price-num::before { content: '' !important; }

/* --- Galerie-Grid (eigenständig, ohne Plugin-Abhängigkeit) --- */
.sm-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.sm-gallery a { display: block; overflow: hidden; border-radius: 8px; }
.sm-gallery img { width: 100%; height: 260px; object-fit: cover; display: block; transition: transform .4s ease; }
.sm-gallery a:hover img { transform: scale(1.06); }
@media (max-width: 768px) { .sm-gallery { grid-template-columns: 1fr; } .sm-gallery img { height: 220px; } }

/* --- Parallax-CTA-Sektionen: eigenes kräftiges Overlay für lesbaren Text ---
   (das Template-Overlay greift hier nicht, da das Bild direkt auf der Section liegt) */
.sm-cta {
    position: relative;
    /* volle Browserbreite (Bild randlos), Inhalt bleibt zentriert.
       Sicher, da .mad-page-wrapper overflow:hidden hat. */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}
.sm-cta::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(180deg, rgba(28,28,30,0.55) 0%, rgba(28,28,30,0.70) 100%);
    z-index: 0;
}
.sm-cta > * { position: relative; z-index: 1; }
.sm-cta > .row { max-width: 1140px; margin-left: auto; margin-right: auto; }

/* Weicher Übergang: Bildränder oben & unten nach Weiß ausblenden.
   Nur dort einsetzen, wo ober- UND unterhalb ein weißer Bereich liegt
   (z. B. Startseite – NICHT vor dem dunklen Footer). */
.sm-cta-fade::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(to bottom,
        #ffffff 0,
        rgba(255,255,255,0) 90px,
        rgba(255,255,255,0) calc(100% - 90px),
        #ffffff 100%);
}
.sm-cta .mad-page-title,
.sm-cta h2,
.sm-cta p { color: #fff; text-shadow: 0 1px 14px rgba(0,0,0,0.65); }

/* --- SEO-Textsektion: angenehme Typo & Abstände --- */
.sm-content-seo h3 { margin-bottom: 0.75rem; }

/* --- Sektions-Abstände reduzieren (Template-Default 9rem ist zu viel,
   gestapelt entsteht zu viel Leerraum). .no-pd / .small-size bleiben dank
   höherer Spezifität unberührt. --- */
.mad-section { padding-top: 5rem; padding-bottom: 5rem; }
@media (max-width: 768px) { .mad-section { padding-top: 3rem; padding-bottom: 3rem; } }

/* --- .mad-content-Wrapper hat im Template 9rem Padding, das sich mit den
   Sektions-Abständen doppelt. Auf 0 setzen – die Sektionen bringen ihren
   eigenen Abstand mit. (.no-pd etc. bleiben unberührt.) --- */
.mad-content { padding-top: 0; padding-bottom: 0; }

/* --- Bildreihen (mad-instafeed) auf einheitliche Höhe bringen,
   damit gemischte Hoch-/Querformate nicht „durcheinander" wirken --- */
.mad-instafeed .mad-grid img { width: 100%; height: 22rem; object-fit: cover; display: block; }
@media (max-width: 768px) {
    .mad-instafeed .mad-grid img { height: 16rem; }
    /* Bildreihen mobil untereinander statt nebeneinander */
    .mad-instafeed .mad-grid .mad-col { width: 100% !important; }
}

/* ============================================================
   MOBILE: eigener Burger + Vollbild-Overlay-Menü
   (ersetzt das fragile Template-Mobilmenü)
   ============================================================ */
.sm-burger { display: none; }
.sm-mobile-overlay { display: none; }

@media (max-width: 991px) {
    /* Template-Mobilmenü komplett ausblenden */
    .mad-header .mad-header-section--sticky-xl,
    .mad-header .mad-navigation-container { display: none !important; }
    /* Pre-Header, Telefon-Block und Desktop-Button verschlanken */
    .mad-header .mad-pre-header { display: none !important; }
    .mad-header .mad-our-info.type-2 { display: none !important; }
    .sm-hide-mobile { display: none !important; }

    /* Header-Zeile kompakt: Logo links, Burger rechts (eine Reihe erzwingen) */
    .mad-header.header-3 .mad-header-items { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; margin: 0 !important; padding: 1.25rem 0 !important; }
    .mad-header.header-3 .mad-header-items .mad-header-item { width: auto !important; flex: 0 1 auto !important; padding: 0 !important; text-align: left !important; }
    .mad-header.header-3 .mad-header-item .mad-logo { padding-right: 0 !important; }
    .mad-header .mad-actions { justify-content: flex-end !important; }
    .sm-logo { font-size: 1.5rem; }

    /* Burger-Button: nur grüne Streifen, kein Kasten */
    .sm-burger {
        display: inline-flex; flex-direction: column; justify-content: center; gap: 6px;
        width: 44px; height: 44px; padding: 0 8px;
        background: transparent; border: 0; cursor: pointer;
    }
    .sm-burger span { display: block; height: 3px; border-radius: 2px; background: #7d8b1f; }

    /* Vollbild-Overlay */
    .sm-mobile-overlay {
        display: flex; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 2000;
        flex-direction: column; align-items: center; justify-content: center;
        background: #232223; padding: 2rem;
        opacity: 0; visibility: hidden; transform: translateY(-10px);
        transition: opacity .25s ease, transform .25s ease, visibility .25s;
    }
    .sm-mobile-overlay.open { opacity: 1; visibility: visible; transform: none; }
    body.sm-noscroll { overflow: hidden; }
    .sm-overlay-close { position: absolute; top: 0.75rem; right: 1.25rem; background: none; border: 0; color: #fff; font-size: 2.75rem; line-height: 1; cursor: pointer; }
    .sm-overlay-logo { margin-bottom: 1.75rem; font-size: 1.9rem; }
    .sm-overlay-nav { display: flex; flex-direction: column; align-items: center; }
    .sm-overlay-nav a { color: #fff; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1.6rem; padding: 0.55rem 1rem; text-decoration: none; }
    .sm-overlay-nav a.active, .sm-overlay-nav a:hover { color: #e5531e; }
    .sm-overlay-cta { margin-top: 1.75rem; }
    .sm-overlay-phone { margin-top: 1.1rem; color: #c4d36a; font-weight: 600; text-decoration: none; }

    /* Hero-Kategorie-Leiste: umbrechen statt seitlich scrollen */
    .sm-hero .mad-menu-box-wrap .mad-menu-box {
        overflow: visible !important; white-space: normal !important;
        flex-wrap: wrap !important; width: auto !important; justify-content: center !important;
    }
    .sm-hero .mad-menu-box-wrap .mad-menu-box .mad-col { width: 33.3333% !important; flex: 0 0 33.3333% !important; }
    .sm-hero .mad-menu-box .mad-menu-item { padding: 1rem 0.25rem !important; }
    .sm-hero .mad-menu-icon .svg { height: 3rem; }
    .sm-hero .mad-menu-title { font-size: 0.8rem; }

    /* Hero-Buttons gestapelt statt nebeneinander */
    .sm-hero .btn-set { flex-direction: column; align-items: center; }
    .sm-hero h1 { font-size: 2.2rem; }
    /* Text sicher im Viewport halten (kein horizontales Überlaufen) */
    .sm-hero .container { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
    .sm-hero p.sm-hero-lead { max-width: 100%; }
    .sm-hero h1, .sm-hero p { overflow-wrap: break-word; }

    /* „So funktioniert's" / „Wofür wir stehen": Schritte untereinander, Deko-Pfeile aus */
    .mad-icon-boxes .mad-col { width: 100% !important; }
    .mad-icon-boxes.with-arrows .mad-col:not(:last-child) .mad-icon-box:after { display: none !important; }

    /* Lange Überschriften nicht abschneiden */
    .mad-entity-title { font-size: 1.9rem !important; }
    h1, h2, h3, .mad-page-title, .mad-entity-title { overflow-wrap: break-word; }

    /* SEO-Textsektionen einheitlich links ausrichten (Titel war zentriert, Spalten links) */
    .sm-content-seo .mad-title-wrap.align-center,
    .sm-content-seo .mad-title-wrap.align-center p { text-align: left !important; }
    .sm-content-seo .mad-title-wrap p { margin-left: 0 !important; margin-right: 0 !important; }
}
@media (max-width: 480px) {
    .sm-hero h1 { font-size: 1.9rem; }
}

/* --- „Schon ausgebucht"-Liste auf der Buchungsseite --- */
.sm-booked-list { list-style: none; margin: 0; padding: 0; }
.sm-booked-list li { padding: .85rem 1.1rem; border: 1px solid #e2e4db; border-radius: 10px; margin-bottom: .6rem; background: #fafaf7; }
.sm-booked-list .sm-booked-date { display: inline-block; min-width: 9.5rem; font-weight: 700; color: #7d8b1f; }
@media (max-width: 600px){ .sm-booked-list .sm-booked-date { display:block; min-width:0; } }

/* ============================================================
   Galerie-Lightbox (Bilder im Overlay durchklicken statt im Browser öffnen)
   ============================================================ */
.sm-lightbox {
    display: none;
    position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 3000;
    background: rgba(0,0,0,0.92);
    align-items: center; justify-content: center;
}
.sm-lightbox.open { display: flex; }
.sm-lightbox img { max-width: 92vw; max-height: 85vh; border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,0.5); }
.sm-lb-close, .sm-lb-prev, .sm-lb-next {
    position: absolute; background: rgba(0,0,0,0.45); color: #fff; border: 0; cursor: pointer;
    width: 3.25rem; height: 3.25rem; border-radius: 50%; font-size: 1.8rem; line-height: 1;
    display: flex; align-items: center; justify-content: center; transition: background .2s ease;
}
.sm-lb-close:hover, .sm-lb-prev:hover, .sm-lb-next:hover { background: #e5531e; }
.sm-lb-close { top: 1rem; right: 1rem; }
.sm-lb-prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.sm-lb-next { right: 1rem; top: 50%; transform: translateY(-50%); }
@media (max-width: 768px) {
    .sm-lb-close { top: 0.6rem; right: 0.6rem; }
    .sm-lb-prev { left: 0.4rem; }
    .sm-lb-next { right: 0.4rem; }
}