/*
Theme Name: Impreza Child
Template: Impreza
Version: 1.9
Author:	UpSolution
Theme URI: http://impreza.us-themes.com/
Author URI: http://us-themes.com/
*/

/*Add your own styles here:*/

/* ==========================================================================
   Global Gallery Gap Consistency
   Master: Startseite = 0.7rem
   Gilt für alle Seiten, vertikal + horizontal, responsive
   ========================================================================== */

/* 1. Impreza-Standard 3rem → 0.7rem (wirkt überall wo kein expliziter Wert gesetzt ist) */
.g-cols.via_grid {
  gap: var(--columns-gap, 0.7rem);
}

/* 2. Foto-Mosaik-Layouts: 0.7rem erzwingen, auch wenn WPBakery vw-Werte setzt.
      Betrifft alle asymmetrischen Spaltenverhältnisse */
.g-cols.via_grid.cols_1-2,
.g-cols.via_grid.cols_2-1,
.g-cols.via_grid.cols_2-3,
.g-cols.via_grid.cols_3-2,
.g-cols.via_grid.cols_3-1,
.g-cols.via_grid.cols_1-3 {
  gap: 0.7rem !important;
}

/* 2a. Ausnahme: Elemente mit explizitem --columns-gap:0 (z.B. Menü-Navigation)
       Höhere Spezifität (4 Klassen) schlägt Regel 2 (3 Klassen) trotz !important */
.g-cols.via_grid.cols_1-2[style*="--columns-gap:0"],
.g-cols.via_grid.cols_2-1[style*="--columns-gap:0"],
.g-cols.via_grid.cols_2-3[style*="--columns-gap:0"],
.g-cols.via_grid.cols_3-2[style*="--columns-gap:0"],
.g-cols.via_grid.cols_3-1[style*="--columns-gap:0"],
.g-cols.via_grid.cols_1-3[style*="--columns-gap:0"] {
  gap: 0 !important;
}

/* 3. Vertikaler Abstand zwischen Galerie-Zeilen (Villa-Seiten) */
.l-section.us_custom_986d8fcd {
  margin-top: 0.7rem !important;
  margin-bottom: 0.7rem !important;
}
.l-section.us_custom_ce9b68ab {
  margin-top: 0.7rem !important;
}

/* 4. Vertikaler Abstand: direkt aufeinanderfolgende Galerie-Zeilen = 0.7rem
      Gilt für alle Spaltenlayouts: symmetrisch (cols_2, cols_3) + asymmetrisch
      Ausnahmen (eigene WPBakery margin-Werte, ggf. negativ für Überlappungseffekte):
        .section-2col-wide — Bild+Text-Blöcke auf mehreren Dine-Seiten
        .abstand-45        — Bild+Text-Blöcke auf Arabian Grill u. Crab Shack
      → beide Klassen nie durch diese Regel überschreiben */

/* 4a. margin-top der zweiten+ Galerie-Sektion auf 0.7rem */
.l-section:has(.g-cols.via_grid:is(.cols_2, .cols_3, .cols_1-2, .cols_2-1, .cols_2-3, .cols_3-2, .cols_3-1, .cols_1-3))
+ .l-section:not(.section-2col-wide):not(.abstand-45):has(.g-cols.via_grid:is(.cols_2, .cols_3, .cols_1-2, .cols_2-1, .cols_2-3, .cols_3-2, .cols_3-1, .cols_1-3)) {
  margin-top: 0.7rem !important;
}

/* 4b. margin-bottom der Galerie-Sektion auf 0.7rem, wenn direkt eine weitere Galerie-Sektion folgt
      → verhindert dass WPBakery margin-bottom: 14px via Margin-Collapsing die 0.7rem überstimmt
      Ausnahme: wenn die Folgesektion .section-2col-wide oder .abstand-45 ist → deren eigenes margin-top gilt */
.l-section:has(.g-cols.via_grid:is(.cols_2, .cols_3, .cols_1-2, .cols_2-1, .cols_2-3, .cols_3-2, .cols_3-1, .cols_1-3)):has(+ .l-section:not(.section-2col-wide):not(.abstand-45):has(.g-cols.via_grid:is(.cols_2, .cols_3, .cols_1-2, .cols_2-1, .cols_2-3, .cols_3-2, .cols_3-1, .cols_1-3))) {
  margin-bottom: 0.7rem !important;
}

/* 5. Vertikaler Abstand zwischen zwei g-cols-Zeilen im selben Container (z.B. Foto-Mosaik Startseite) */
.g-cols.via_grid + .g-cols.via_grid {
  margin-top: 0.7rem;
}

/* 6. Kachel-Höhe stabil halten in cols_2 Layouts:
   - % Padding-Hack deaktivieren (schrumpft beim Schmäler-Machen) — NUR auf Text-Kacheln
   - align-items: stretch → alle Kacheln gleich hoch (Foto-Kachel bestimmt Reihenhöhe)
   - height: auto + padding: 0 nur auf Text-Kacheln (:has(.wpb_text_column)) → strecken sich auf Foto-Höhe
   - Foto-Kacheln behalten padding-top (Höhen-Hack) + height: Xvh → stabile Höhe */
@media (min-width: 769px) {
  .l-section:has(.g-cols.via_grid.cols_2) .g-cols.via_grid.cols_2 {
    align-items: stretch !important;
  }
}
/* Mobile: even-card text tiles in cols_2 — hide completely on mobile.
   PDF shows only photo tiles for even cards on mobile (photo left + text right on desktop
   → only photo stacks to single column on mobile). The text tile has absolute-positioned
   text that would overflow a 0px tile with no containment.
   ":not(.hide_on_default)" excludes mobile-only odd-card tiles which are handled below. */
@media (max-width: 768px) {

  .l-section:has(.g-cols.via_grid.cols_2)
  .wpb_column.has_bg_color:not(.img-bg-hover):has(.wpb_text_column):not(.hide_on_default) {
    display: none !important;
  }
}

/* ==========================================================================
   Photo+Text Intro Sections — Custom HTML Layout
   Identisch mit Startseite (.custom-2col / .custom-2col-tablet-portrait)
   ========================================================================== */

/* Heading padding reset */
.custom-2col h1,
.custom-2col h2,
.custom-2col h3,
.custom-2col h4,
.custom-2col h5,
.custom-2col h6,
.custom-2col-tablet-portrait h1,
.custom-2col-tablet-portrait h2,
.custom-2col-tablet-portrait h3,
.custom-2col-tablet-portrait h4,
.custom-2col-tablet-portrait h5,
.custom-2col-tablet-portrait h6 {
    padding-top: 0;
}

/* BASE (Desktop default) */
.custom-2col {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 3.5rem;
    align-items: start;
    max-width: 1300px;
    margin: 0 auto;
}

.custom-image img {
    width: clamp(380px, 20vw, 380px);
    aspect-ratio: 1 / 1;
    object-fit: cover;
    margin-top: 2.2rem;
    border-radius: 6.2px;
    display: block;
}

.custom-text h5 { margin: 0 0 10px 0; }
.custom-text h2 { margin: 0 0 20px 0; }
.custom-body p  { margin: 0 0 10px 0; }
.custom-body h6 { margin-top: 20px; }

/* Desktop fine-tuning (>1470px) */
@media (min-width: 1471px) {
    .custom-text h5 { margin-bottom: 15px; }
    .custom-text h2 { margin-bottom: 25px; }
    .custom-body p  { margin-bottom: 16px; }
    .custom-body h6 { margin-top: 30px; }
}

/* Laptop (1181–1470px) */
@media (min-width: 1181px) and (max-width: 1470px) {
    .custom-2col {
        width:       min(1000px, calc(100% - 9rem));
        margin-left: auto;
        margin-right: auto;
        column-gap:  75px; /* proportional: 102px × 1300/1920 ≈ 69 → 75px */
    }
    .custom-image { width: 292px; }
}

/* Smartphone (≤768px) */
@media (max-width: 768px) {
    .custom-2col {
        width: calc(100% - 3.2rem);   /* 1.6rem je Seite – etwas mehr Luft als vorher (1.4rem) */
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: 1.4rem;              /* Abstand zwischen Foto-Zeile und Text-Zeile */
    }
    .custom-image {
        width: min(285px, 75%);       /* Foto etwas schmaler: war min(310px, 90%) */
        margin: 0 auto;
    }
    .custom-image img {
        width: 100%;
        margin-top: 0;
    }
    .custom-2col .custom-text,
    .custom-2col .custom-body { text-align: left; }
    .custom-text h5,
    .custom-text h2 {
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    .custom-text h2 {
        font-size: clamp(2.1rem, 6.5vw, 2rem) !important;
        line-height: 1.15 !important;
    }
}

/* Tablet Portrait (769–1180px) — separate HTML block used */
@media (min-width: 769px) and (max-width: 1180px) {
    .custom-2col-tablet-portrait {
        width: min(900px, calc(100% - 6rem));
        margin: 0 auto;
    }
    .custom-2col-tablet-portrait .tablet-top {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 2.5rem;
        align-items: start;
    }
    .custom-2col-tablet-portrait .tablet-image {
        width: clamp(240px, 30vw, 300px);
        margin-top: 2.4rem;
        border-radius: 6.2px;
        overflow: hidden;
    }
    .custom-2col-tablet-portrait .tablet-image img {
        width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        display: block;
        border-radius: 6.2px;
    }
    .custom-2col-tablet-portrait .tablet-headings h5 { margin: 0 0 0.7rem 0; }
    .custom-2col-tablet-portrait .tablet-headings h2 { margin: 0; line-height: 1.02; }
    .custom-2col-tablet-portrait .tablet-body       { margin-top: 1.4rem; }
    .custom-2col-tablet-portrait .tablet-body p     { margin: 0 0 10px 0; }
    .custom-2col-tablet-portrait .tablet-body h6    { margin-top: 20px; }
}

/* ==========================================================================
   UNESCO-Sektion: rechte Spalte — Bilder oben und unten anliegend
   Gilt ab Tablet (≥769px), wo die 3-Spalten-Layout aktiv ist.
   Anker: us_custom_7cf59f2f = Manta-Ray-Bild (eindeutige Klasse der Sektion)
   ========================================================================== */
@media (min-width: 769px) {
    /* 1. Zeilenhöhe = Inhalt der linken Textspalte → alle Spalten strecken sich */
    .g-cols.via_grid.cols_custom:has(.w-image.us_custom_7cf59f2f) {
        align-items: stretch !important;
    }

    /* 2. Rechte Spalte + innere Wrapper als vertikale Flex-Kette */
    .wpb_column:has(.w-image.us_custom_7cf59f2f),
    .wpb_column:has(.w-image.us_custom_7cf59f2f) > .vc_column-inner,
    .wpb_column:has(.w-image.us_custom_7cf59f2f) > .vc_column-inner > .wpb_wrapper {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
    }

    /* 3. Beide Bilder teilen die Höhe gleichmäßig; Separator bleibt fix */
    .wpb_column:has(.w-image.us_custom_7cf59f2f) .w-image {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        max-height: none !important;
    }
    .wpb_column:has(.w-image.us_custom_7cf59f2f) .us_separator {
        flex: 0 0 auto !important;
    }

    /* 4. Ratio-Padding-Hack deaktivieren, volle Flex-Höhe nutzen */
    .wpb_column:has(.w-image.us_custom_7cf59f2f) .w-image-h {
        position: relative !important;
        height: 100% !important;
        padding-top: 0 !important;
    }

    /* 4b. JS-generierten Spacer-Div neutralisieren */
    .wpb_column:has(.w-image.us_custom_7cf59f2f) .w-image-h > div {
        display: none !important;
    }

    /* 5. Bilder füllen ihre Fläche vollständig */
    .wpb_column:has(.w-image.us_custom_7cf59f2f) .w-image img {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
}

/* ==========================================================================
   Foto+Text Layout: Bild links, Text rechts — custom-2col-left-image
   Gilt für Discover-Seite (Baa Atoll, Finolhu) und weitere Unterseiten
   ========================================================================== */

.custom-2col-left-image {
    display: grid;
    grid-template-columns: 1.28fr 0.72fr;
    column-gap: clamp(1rem, 2vw, 2rem);
    align-items: center;
    width: min(1650px, calc(100% - 3rem));
    margin: 0 auto;
    box-sizing: border-box;
}

.custom-left-image {
    width: 100%;
    max-width: 940px;
    aspect-ratio: 1 / 1;
    border-radius: 6.2px;
    overflow: hidden;
    justify-self: start;
}
.custom-left-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 6.2px;
}

.custom-right-text h1,
.custom-right-text h2,
.custom-right-text h3,
.custom-right-text h4,
.custom-right-text h5,
.custom-right-text h6 {
    margin-top: 0;
    padding-top: 0;
}
.custom-right-text h5 { margin: 0 0 0.7rem 0; }
.custom-right-text h2 { margin: 0 0 1.8rem 0; }
.custom-right-text p  { margin: 0 0 1.8rem 0; max-width: 34rem; }

/* Desktop (>1470px) */
@media (min-width: 1471px) {
    .custom-2col-left-image {
        column-gap: 2rem;
    }
    .custom-left-image {
        justify-self: end;
    }
}

/* Laptop (1181–1470px) */
@media (min-width: 1181px) and (max-width: 1470px) {
    .custom-2col-left-image {
        width:               min(1380px, calc(100% - 6rem));
        grid-template-columns: 1.22fr 0.78fr;
        column-gap:          65px; /* proportional: 110px × 1300/1920 ≈ 74 → 65px */
    }
    .custom-left-image {
        width:        min(721px, 100%);
        max-width:    721px;
        aspect-ratio: 1 / 1;
    }
}

/* Tablet (769–1180px) */
@media (min-width: 769px) and (max-width: 1180px) {
    .custom-2col-left-image {
        grid-template-columns: 1fr 1fr;
        width: calc(100% - 5rem);
        column-gap: 1.5rem;
        align-items: start;
    }
    .custom-right-text p { max-width: none; }
}

/* Smartphone (≤768px) */
@media (max-width: 768px) {
    .custom-2col-left-image {
        grid-template-columns: 1fr;
        width: calc(100% - 1.4rem);
        row-gap: 1.25rem;
    }
    .custom-left-image {
        order: 1;
        width: min(308px, 100%);
        margin: 0 auto;
        justify-self: center;
    }
    .custom-right-text { order: 2; }
    .custom-right-text h5,
    .custom-right-text h2 {
        margin-left: 1rem;
        margin-right: 1rem;
    }
    .custom-right-text p {
        padding-left: 1rem;
        padding-right: 1rem;
        max-width: none;
    }
}

/* ==========================================================================
   GLOBALE STYLE-VEREINHEITLICHUNG — Alle Unterseiten
   Referenz: Startseite (Desktop 1920px → Smartphone 390px)
   Analyse-Basis: us_theme_options_css + Impreza style.min.css
   ========================================================================== */

/* ── 1. H2 TYPOGRAPHY — Line-Height-Bug auf allen Breakpoints ───────────
   us-theme-options-css (Position 10 im Head) lädt NACH dem child-theme
   (Position 5) und setzt --h2-line-height als fixen px-Wert:
     Desktop  >1180px: 72px fix, font-size = calc(48px + 1.3vw)
                       → bei 1920px: fs=73px > lh=72px → Überlappung ✗
     Tablet  ≤1180px : 49px fix, font-size ≈ 45–50px → borderline   ✗
     Mobile   ≤768px : 42px fix, font-size ≈ 44–49px → lh < fs      ✗
   Fix: Globale Basisregel + breakpoint-spezifische Überschreibungen
   (alle mit !important, spätere Regel gewinnt bei gleicher Spezifität). */
h2 { line-height: 1 !important; }   /* Desktop-Basis: proportional statt 72px fix */

@media (max-width: 768px) {
    h2 {
        font-size:   clamp(28px, 8.5vw, 44px) !important;
        line-height: 1 !important;
    }
}
@media (min-width: 769px) and (max-width: 1180px) {
    h2 { line-height: 1.12 !important; }
}

/* ── 2. H1 TYPOGRAPHY — Minimaler Durchschuss bei mehrzeiligen Hero-Titeln
   line-height: 1 (= kein Durchschuss) ist bei zwei Zeilen sehr eng.     */
@media (max-width: 768px) {
    h1 { line-height: 1.05 !important; }
}

/* ── 3. SECTION PADDING — Lücke im Impreza-Breakpoint-System füllen ─────
   Impreza: height_medium → 4rem (>1024px) | 2.5rem (≤1024px) | 1.5rem (≤600px).
   Für 601–768px (großes Smartphone / kleines Tablet) fehlt ein Zwischenwert:
   2.5rem passt für 1024px gut, ist aber für 700px-Phones noch etwas viel.  */
@media (min-width: 601px) and (max-width: 768px) {
    .l-section.height_medium {
        padding-top:    2rem !important;
        padding-bottom: 2rem !important;
    }
    .l-section.height_small {
        padding-top:    1.2rem !important;
        padding-bottom: 1.2rem !important;
    }
}

/* ── 4. SECTION-MARGIN — WPBakery-Rows: übermäßige Abstände auf Mobile ──
   WPBakery speichert Abstände als feste rem/px-Werte, die auf Desktop
   eingestellt wurden. Auf Mobile (≤768px) ist ein Abstand > 3rem (63px)
   meist zu groß. Sanfte Begrenzung ohne !important — wirkt nur als Fallback
   wenn WPBakery-Inline-Style keinen expliziten margin-top setzt.          */
/* Hinweis: WPBakery setzt margin-top als Inline-Style → kann hier nicht
   global überschrieben werden. Einzelne Sections mit eigenem Breakpoint-
   Wert in WPBakery-Einstellungen einstellen falls nötig.                  */

/* ── 5. TABLET (769–1180px): Foto+Text-Layouts — gleiche Spaltenhöhe ────
   .custom-2col und .custom-2col-left-image: bereits responsive behandelt.
   WPBakery-Spalten auf Tablet: Impreza stellt auf 1fr/1fr um. OK.         */

/* ── 6. MOBILE: Bilder in WPBakery-Spalten — vh-Höhen deaktivieren ──────
   WPBakery setzt auf Kachel-Columns (hat_bg_color + padding-top als %-Hack)
   oft eine Mindesthöhe per vw/vh. Diese ist auf Mobile oft zu groß.
   Bereits durch bestehende Regel 6 abgedeckt (.l-section:has(.g-cols)).   */

/* ── 7. MOBILE: Abstand zwischen Custom-HTML-Blöcken und nächster Sektion
   Sektionen die custom-2col oder custom-2col-left-image enthalten,
   erhalten auf Mobile ein konsistentes padding-bottom.                    */
@media (max-width: 768px) {
    .l-section:has(.custom-2col),
    .l-section:has(.custom-2col-tablet-portrait),
    .l-section:has(.custom-2col-left-image) {
        padding-bottom: max(2rem, var(--section-padding-bottom, 0px));
    }
}

/* ── 8. MOBILE: Maximale Bildbreite in einzelnen WPBakery-Spalten ────────
   Wenn eine Spalte auf Mobile zu 100% streckt und ein Bild enthält,
   soll das Bild nicht über den Viewport-Rand hinausgehen.                 */
@media (max-width: 768px) {
    .wpb_column .w-image img {
        max-width: 100%;
        height: auto;
    }
}

/* ── 9. MOBILE: .w-btn (Buttons) — einheitliche Breite in Spalten ────────
   Buttons in gestapelten WPBakery-Spalten auf Mobile automatisch
   auf volle Breite ausdehnen wenn sie alleine in einer Zeile stehen.      */
/* (Optional — nur aktivieren falls Buttons zu schmal erscheinen)
@media (max-width: 768px) {
    .wpb_column .w-btn-wrapper:only-child .w-btn {
        display: block;
        width: 100%;
        text-align: center;
    }
} */

/* ==========================================================================
   LAPTOP-ABSTÄNDE  (1181–1489px)
   Proportional skaliert von Desktop-Referenz (1920px):
     • Section-Padding height_medium: 100px  (147 × 1300/1920 ≈ 99 → 100px)
     • custom-2col column-gap:         75px  (→ eigene Laptop-Regel oben)
     • custom-2col-left-image gap:     65px  (→ eigene Laptop-Regel oben)
   Ohne diese Regel greift Impreza-Standard 4rem ≈ 64px — zu knapp für Laptop.
   !important nötig: us-theme-options-css (pos. 10) lädt nach child-theme (pos. 5).
   ========================================================================== */
@media (min-width: 1181px) and (max-width: 1489px) {
    .l-section.height_medium {
        padding-top:    100px !important;
        padding-bottom: 100px !important;
    }
    .l-section.height_small {
        padding-top:    50px !important;
        padding-bottom: 50px !important;
    }
}

/* ==========================================================================
   DESKTOP-ABSTÄNDE (≥1490px)
   Hinweis: Der PDF-Pfeil #9 (147px) misst die GESAMTE visuelle Lücke
   (Section-Padding + Element-Margins). Impreza-Standard height_medium ist
   4rem ≈ 71px. Ein Override von 147px stapelt auf bestehende Element-
   Margins auf → visuell zu viel. Korrekter Wert: 100px (= Laptop-Wert),
   da Laptop (100px) und Desktop visuell konsistent sein sollen.
   Spaltenabstände bleiben auf PDF-Messung (reine Layout-Werte, keine
   doppelten Margins).
   ========================================================================== */

@media (min-width: 1490px) {

    /* ── 10b. Custom 2-Col (Welcome / Intro-Sektionen):
       Content-Breite 1316px → Seitenrand je 302px   (PDF-Pfeile #3, #5)
       Spaltenabstand  102px  → Foto ↔ Text           (PDF-Pfeil  #4)     */
    .custom-2col {
        max-width:  1316px !important;
        column-gap: 102px  !important;
    }
    /* ── 10c. Custom 2-Col Left-Image (Discover / Baa-Atoll-Layouts):
       Spaltenabstand ~110px → Foto ↔ Text            (PDF-Pfeile #25,#29) */
    .custom-2col-left-image {
        column-gap: 110px !important;
    }
}

/* ==========================================================================
   GÄSTEBEWERTUNGEN — Text bleibt immer innerhalb des Kastens
   Ursache: WPBakery setzt height: Xvh (fix) für alle Desktop-Breakpoints:
     Desktop >1470px : height 60vh | min-height 53vh
     Laptop 1181–1470px: height 56vh | min-height 52vh
     Tablet  769–1180px: height 55vh | min-height 50vh
   Bei schmalem Viewport → mehr Zeilenumbrüche → Textinhalt wächst über
   die fixe Höhe hinaus → Überlauf oben und unten sichtbar.
   Fix: height: auto → Kasten wächst mit dem Text.
   min-height (53–50vh) aus WPBakery bleibt aktiv: Spalte ist mindestens
   so hoch wie das Foto links.
   Spezifität (0,3,0) schlägt inline us_custom-css (0,1,0) bei !important.
   ========================================================================== */

/* ── 11a. Spalte wächst mit Inhalt statt fixer vh-Höhe ────────────────── */
.l-section .wpb_column.us_custom_82e85a51 {
    height: auto !important;
}

/* ==========================================================================
   Seaside Media/Text Template
   Reusable layout for recurring image/text modules across subpages.
   Use .sc-media-text with .is-image-left or .is-image-right.
   ========================================================================== */

.sc-media-text {
    --sc-media-max-width: 1650px;
    --sc-media-page-gap: 3rem;
    --sc-media-column-gap: 110px;
    --sc-media-image-max: 940px;
    --sc-media-image-ratio: 1 / 1;
    --sc-media-text-max: 34rem;
    display: grid;
    align-items: center;
    width: min(var(--sc-media-max-width), calc(100% - var(--sc-media-page-gap)));
    margin: 0 auto;
    box-sizing: border-box;
}

.sc-media-text.is-image-left {
    grid-template-columns: minmax(0, 1.28fr) minmax(22rem, 0.72fr);
    column-gap: var(--sc-media-column-gap);
}

.sc-media-text.is-image-right {
    grid-template-columns: minmax(22rem, 0.72fr) minmax(0, 1.28fr);
    column-gap: var(--sc-media-column-gap);
}

.sc-media-text__media {
    width: 100%;
    max-width: var(--sc-media-image-max);
    aspect-ratio: var(--sc-media-image-ratio);
    overflow: hidden;
    border-radius: 6.2px;
}

.sc-media-text.is-image-left .sc-media-text__media {
    justify-self: end;
}

.sc-media-text.is-image-right .sc-media-text__media {
    justify-self: start;
}

.sc-media-text__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--sc-media-position, 50% 50%);
    border-radius: 6.2px;
}

.sc-media-text__content {
    min-width: 0;
}

.sc-media-text__content h1,
.sc-media-text__content h2,
.sc-media-text__content h3,
.sc-media-text__content h4,
.sc-media-text__content h5,
.sc-media-text__content h6 {
    margin-top: 0;
    padding-top: 0;
}

.sc-media-text__content h5 {
    margin: 0 0 0.7rem;
}

.sc-media-text__content h2 {
    margin: 0 0 1.8rem;
}

.sc-media-text__content p,
.sc-media-text__content ul {
    max-width: var(--sc-media-text-max);
}

.sc-media-text__content p {
    margin: 0 0 1.8rem;
}

.sc-media-text__content ul {
    margin-top: -0.7rem;
    margin-bottom: 0;
}

@media (min-width: 1181px) and (max-width: 1470px) {
    .sc-media-text {
        --sc-media-max-width: 1380px;
        --sc-media-page-gap: 6rem;
        --sc-media-column-gap: 65px;
        --sc-media-image-max: 721px;
    }
    .sc-media-text.is-image-left {
        grid-template-columns: minmax(0, 1.22fr) minmax(20rem, 0.78fr);
    }
    .sc-media-text.is-image-right {
        grid-template-columns: minmax(20rem, 0.78fr) minmax(0, 1.22fr);
    }
}

@media (min-width: 769px) and (max-width: 1180px) {
    .sc-media-text {
        --sc-media-page-gap: 6rem;
        --sc-media-image-max: 560px;
        grid-template-columns: 1fr !important;
        row-gap: 1.4rem;
        align-items: start;
    }
    .sc-media-text__media,
    .sc-media-text.is-image-left .sc-media-text__media,
    .sc-media-text.is-image-right .sc-media-text__media {
        justify-self: center;
        width: min(100%, var(--sc-media-image-max));
    }
    .sc-media-text__content p,
    .sc-media-text__content ul {
        max-width: none;
    }
}

@media (max-width: 768px) {
    .sc-media-text {
        --sc-media-page-gap: 1.4rem;
        display: flex;
        flex-direction: column;
        row-gap: 1.25rem;
        width: calc(100% - var(--sc-media-page-gap));
    }
    .sc-media-text__media {
        order: 1;
        width: min(310px, 100%);
        max-width: none;
        margin: 0 auto;
    }
    .sc-media-text__content {
        order: 2;
        width: 100%;
    }
    .sc-media-text__content h5,
    .sc-media-text__content h2,
    .sc-media-text__content p,
    .sc-media-text__content ul {
        max-width: none;
        margin-left: 1rem;
        margin-right: 1rem;
        padding-left: 0;
        padding-right: 0;
        text-align: left;
    }
    .sc-media-text__content h2 {
        margin-bottom: 1rem;
    }
}

/* ── 11c. Foto-Spalte: Desktop/Tablet — passt sich der Text-Spalten-Höhe an */
/* WPBakery setzt ebenfalls height: 60vh auf die Foto-Spalte. Die Text-Spalte */
/* bestimmt jetzt die Grid-Zeilenhöhe; height:100% füllt diese aus.           */
@media (min-width: 769px) {
    .l-section .wpb_column.us_custom_25a1980e {
        height: 100% !important;
    }
}

/* ── 11d. Foto-Spalte: Mobile — Hochformat wie PDF-Vorlage ────────────── */
/* PDF S.4: Foto ist 690pt hoch bei 750pt Breite ≈ 92 % der Viewport-Breite. */
/* WPBakery setzt 38vh (zu flach) und background-size:120% an einer           */
/* ungünstigen Position → dünner Streifen. Fix: quadratisches Format (85vw)   */
/* damit das gesamte Motiv (Frau am Strand) sichtbar ist; cover zentriert.    */
@media (max-width: 768px) {
    .l-section .wpb_column.us_custom_25a1980e {
        height:            85vw                        !important;
        background-size:   cover                       !important;
        background-position: center center             !important;
    }
}

/* ── 11b. Innen-Abstand: ohne valign_middle-Zentrierung braucht der
   vc_column-inner eigenes padding-top/bottom (Tablet + Desktop).
   Mobile (≤768px) regelt WPBakery bereits mit 1.25rem.                  */
@media (min-width: 769px) {
    .l-section .wpb_column.us_custom_82e85a51 .vc_column-inner {
        padding-top:    2.5rem !important;
        padding-bottom: 2.5rem !important;
    }
}

/* ==========================================================================
   VILLA-KACHELN — Überschrift unten verankern (Mobile)
   Sheet 15 (inline) setzt position:static auf alle wpb_text_column-Elemente
   → Beschreibung und Überschrift fließen normal, Überschrift landet direkt
   nach dem Text statt am unteren Rand der Kachel.
   Fix:
   1. Kachel behält ihre Größe (height:auto von Sheet 15 bleibt gültig,
      vc_column-inner bestimmt über Flex-Height die Gesamthöhe).
   2. vc_column-inner → Flex-Spalte, height:100% → füllt die Kachel aus.
   3. Überschrift → margin-top:auto → wird an den unteren Rand gedrückt.
   Spezifität (0,3,0) schlägt Sheet 14+15 inline (0,1,0) mit !important.
   ========================================================================== */

/* NOTE: Sections 12a–12c removed — the hash classes us_custom_730bf0fc,
   us_custom_283129b2, us_custom_15508758 no longer exist on the Stay page.
   The global cols_1-2 / cols_2-1 rules (lines ~869–893) cover this layout. */

/* ==========================================================================
   BEIGE CONTENT BOXES — Listen-Typografie (us_custom_5f55ea05)
   Gilt global für alle Seiten mit diesem Container (Happenings + Stay).
   Ziel: einheitlicher, kompakterer Zeilenabstand + gleichmäßiger Abstand
   zwischen den Bulletpoints — angelehnt an die PDF-Vorlage.
   Body erbt 29px / 17.82px ≈ 1.63 → zu großzügig für diese Listen.
   ========================================================================== */
.us_custom_5f55ea05 ul,
.us_custom_5f55ea05 ol {
    margin-top:    0;
    margin-bottom: 0;
}

.us_custom_5f55ea05 li {
    line-height:   1.4;
    margin-bottom: 0;  /* Kein Extra-Abstand: line-height-Leading ergibt automatisch
                          denselben Rhythmus zwischen Zeilen und zwischen Bulletpoints */
}

/* ==========================================================================
   HAPPENINGS + STAY — Fluides horizontales Padding im Beige-Kasten
   Gilt global für alle Unterseiten beider Rubriken (nicht Smartphone).

   Problem:
     WPBakery setzt auf dem inneren Grid-Element ohne @media:
       padding: 10px 135–140px 60–70px 135–140px  (alle Breakpoints, fest)
     + bei Laptop (1181–1470px) nochmals: padding: 10px 140px … 140px
     Bestehende Tablet-Nullungs-Regeln (Spez. 0,4,1) setzen padding: 0
     → Inhalt hat auf schmalen Displays keinen Atemraum.

   Lösung: clamp(70px, 9.52vw, 140px) — skaliert flüssig mit Viewport:
     • ≥ 1470px → gekappt bei 140px  (Laptop/Desktop: wie PDF-Design)
     •   1181px → 112px              (Laptop schmal: fließende Reduktion)
     •    900px → 86px
     •    769px → 73px               (kurz vor Smartphone-Grenze)
     • ≤  768px → NICHT geändert     (Smartphone-Regeln bleiben aktiv)

   Spezifität (0,5,1) durch .via_grid als 5. Klasse:
     body.parent-pageid-XXX .us_custom_5f55ea05 .g-cols.via_grid.cols_X-X
     schlägt Nullungs-Regeln (0,4,1) und WPBakery-Inline (0,1,0) ✓
   ========================================================================== */

/* ── HAPPENINGS (parent-pageid-210): cols_2-3 Grid ────────────────────── */
@media (min-width: 769px) {
    body.parent-pageid-210 .us_custom_5f55ea05 .g-cols.via_grid.cols_2-3 {
        padding-left:  clamp(70px, 9.52vw, 140px) !important;
        padding-right: clamp(70px, 9.52vw, 140px) !important;
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }
}
/* Ausstattung-Block global sauber zentrieren */
@media (min-width: 769px){

  .us_custom_5f55ea05 > .vc_column-inner{
    padding-left: clamp(4rem, 8vw, 11rem) !important;
    padding-right: clamp(4rem, 8vw, 11rem) !important;
     padding-top: 1.5rem;
     padding-bottom: 1.5rem;
  }

  .us_custom_5f55ea05 .g-cols.via_grid.cols_3{
    column-gap: clamp(1.2rem, 2.5vw, 3rem) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

}


/* ── STAY cols_3 Grid + Überschrift: WPBakery-Margin/Padding nullen ─────── */
/* Der clamp-Indent liegt jetzt auf vc_column-inner → Kindelemente brauchen
   keine eigenen Abstände mehr. WPBakery-margin und -padding werden genullt. */
@media (min-width: 769px) {
    body.parent-pageid-202 .us_custom_5f55ea05 .g-cols.via_grid.cols_3 {
        margin-left:   0 !important;
        margin-right:  0 !important;
        padding-left:  0 !important;
        padding-right: 0 !important;
    }
}

/* ==========================================================================
   HAPPENINGS — Responsive Text-Kästen (Unterseiten von parent-pageid-210)
   Problem: Die innere Zweispalten-Zeile (.cols_2-3) erhält per WPBakery-
   Inline-CSS ohne @media-Abfrage: margin 5.5rem + padding 10px 135px 60px.
   Dieses Default-Ruleset greift auch bei ≤ 768 px → 270 px horizontaler
   Innenabstand auf einem Smartphone → Inhalt läuft über den Rand.
   Bei Tablet (769–1180 px) bleibt die Zweispalten-Aufteilung aktiv
   (tablets-cols_inherit), was bei schmalen Tablets zu gedrängt wirkt.
   Fix:
   1. Ab ≤ 900 px (Tablet Hochformat): Spalten stapeln, Überschrift oben,
      Inhalt darunter (DOM-Reihenfolge ist bereits korrekt).
   2. row-gap zwischen gestapelten Blöcken für Luft sorgen.
   3. Alle Texte im Kasten linksbündig ausrichten.
   4. Übermäßige Margen/Innenabstände auf ein lesbares Maß reduzieren.
   5. Ab ≤ 768 px (Smartphone): Padding weiter komprimiert.
   Spezifität (0,3,0) mit !important schlägt WPBakery-Inline (0,1,0).
   ========================================================================== */

/* ── Äußere Section: Padding bei Tablet halbieren (0.75rem statt WPBakery-Standard 1.5rem) ──
   Gilt 769–1180 px — gibt den Spalten mehr Raum und hält Side-by-Side länger aufrecht. */
@media (min-width: 769px) and (max-width: 1180px) {
    body.parent-pageid-210 .us_custom_5f55ea05 {
        padding-left:  0.75rem !important;
        padding-right: 0.75rem !important;
    }
}

/* ── Smartphone (≤768px): Spalten stapeln, Abstand & Ausrichtung ──
   Breakpoint auf 768px gesenkt (war 900px): 2-spaltig bleibt so lange wie möglich erhalten. */
@media (max-width: 768px) {
    body.parent-pageid-210 .us_custom_5f55ea05 .g-cols.cols_2-3 {
        grid-template-columns: 100%   !important;
        row-gap:               0.5rem !important;
        margin-left:           0      !important;
        margin-right:          0      !important;
        padding-left:          0.5rem !important;
        padding-right:         0.5rem !important;
    }

    /* Alle Texte im Kasten linksbündig */
    body.parent-pageid-210 .us_custom_5f55ea05 h1,
    body.parent-pageid-210 .us_custom_5f55ea05 h2,
    body.parent-pageid-210 .us_custom_5f55ea05 h3,
    body.parent-pageid-210 .us_custom_5f55ea05 h4,
    body.parent-pageid-210 .us_custom_5f55ea05 h5,
    body.parent-pageid-210 .us_custom_5f55ea05 h6,
    body.parent-pageid-210 .us_custom_5f55ea05 p,
    body.parent-pageid-210 .us_custom_5f55ea05 li,
    body.parent-pageid-210 .us_custom_5f55ea05 .wpb_text_column {
        text-align: left !important;
    }
}

/* ── Tablet (769–1180px): WPBakery-Grid-Padding/Margin nullen + column-gap setzen ── */
@media (min-width: 769px) and (max-width: 1180px) {
    body.parent-pageid-210 .us_custom_5f55ea05 .g-cols.cols_2-3 {
        column-gap:    3rem !important;
        margin-left:   0    !important;
        margin-right:  0    !important;
        padding-left:  0    !important;
        padding-right: 0    !important;
    }
}

/* ── Desktop (>1180px): column-gap beibehalten ── */
@media (min-width: 1181px) {
    body.parent-pageid-210 .us_custom_5f55ea05 .g-cols.cols_2-3 {
        column-gap: 3rem !important;
    }
}

/* ==========================================================================
   STAY — Responsive Text-Kästen (Unterseiten von parent-pageid-202)
   Die horizontalen WPBakery-Styles für Heading und Grid wurden direkt in der
   DB entfernt. Der clamp()-Einzug liegt auf .vc_column-inner (s.o.) →
   Heading + Grid fluchten ohne CSS-Konflikte über alle Viewport-Breiten.
   ========================================================================== */

/* ── Äußere Section: Padding bei Tablet halbieren (0.75rem statt WPBakery-Standard 1.5rem) ── */
@media (min-width: 901px) and (max-width: 1180px) {
    body.parent-pageid-202 .us_custom_5f55ea05 {
        padding-left:  0.75rem !important;
        padding-right: 0.75rem !important;
    }
}

/* ── Tablet Hochformat & kleiner: Spalten stapeln, Abstand & Ausrichtung ── */
@media (max-width: 900px) {
    body.parent-pageid-202 .us_custom_5f55ea05 .g-cols.cols_3 {
        grid-template-columns: 100%   !important;
        row-gap:               1rem   !important;
        margin-left:           0      !important;
        margin-right:          0      !important;
        padding-left:          0.5rem !important;
        padding-right:         0.5rem !important;
    }

    /* Alle Texte im Kasten linksbündig */
    body.parent-pageid-202 .us_custom_5f55ea05 h1,
    body.parent-pageid-202 .us_custom_5f55ea05 h2,
    body.parent-pageid-202 .us_custom_5f55ea05 h3,
    body.parent-pageid-202 .us_custom_5f55ea05 h4,
    body.parent-pageid-202 .us_custom_5f55ea05 h5,
    body.parent-pageid-202 .us_custom_5f55ea05 h6,
    body.parent-pageid-202 .us_custom_5f55ea05 p,
    body.parent-pageid-202 .us_custom_5f55ea05 li,
    body.parent-pageid-202 .us_custom_5f55ea05 .wpb_text_column {
        text-align: left !important;
    }
}

/* ── Tablet Querformat (901–1180px): column-gap setzen ── */
@media (min-width: 901px) and (max-width: 1180px) {
    body.parent-pageid-202 .us_custom_5f55ea05 .g-cols.cols_3 {
        column-gap:    3rem !important;
        margin-left:   0    !important;
        margin-right:  0    !important;
        padding-left:  0    !important;
        padding-right: 0    !important;
    }
}

/* ── Desktop (>1180px): column-gap beibehalten ── */
@media (min-width: 1181px) {
    body.parent-pageid-202 .us_custom_5f55ea05 .g-cols.cols_3 {
        column-gap: 3rem !important;
    }
}

/* ── Smartphone: Padding etwas kompakter ── */
@media (max-width: 768px) {
    body.parent-pageid-202 .us_custom_5f55ea05 .g-cols.cols_3 {
        padding-left:  0.5rem !important;
        padding-right: 0.5rem !important;
    }

}


/* ==========================================================================
   STAY-UNTERSEITEN — Intro-Textblock auf Smartphone (parent-pageid-202)
   Ursache: .l-section hat --padding-inline:2.3vmin ≈ 9px seitlich (Theme-Options).
   .vc_column-inner in via_grid-Spalten ohne has_bg_color bekommt kein eigenes
   Padding → h5/h2 nutzen fast die volle Viewport-Breite (372/390px).
   Fix 1: vc_column-inner bekommt auf Mobile 1.5rem Seitenabstand → sichtbarer
          weißer Rand, Überschriften brechen sauber um.
   Fix 2: us_custom_58d03bc9 hat WPBakery margin:28% seitlich → bei 390px
          nur 172px Textbreite. Auf Mobile auf 0 zurücksetzen → Padding des
          vc_column-inner reicht als Rand (1.5rem je Seite).
   ========================================================================== */
@media (max-width: 768px) {
    /* Fix 1 – Intro-Spalteninhalt: seitlichen Innenabstand ergänzen */
    body.parent-pageid-202 .l-section.height_medium .vc_column-inner {
        padding-left:  1.5rem !important;
        padding-right: 1.5rem !important;
    }
    /* Fix 2 – Beschreibungstext: 28%-Margin aufheben, volle Spaltenbreite nutzen */
    .us_custom_58d03bc9 {
        margin-left:  0 !important;
        margin-right: 0 !important;
    }
}

/* ==========================================================================
   VILLA-KACHELN MOBILE — Einheitliche Höhe (Foto = Textkasten) + 0.7rem Abstand
   Problem: WPBakery setzt min-height:70vh auf alle Kacheln (Foto + Text) in
   cols_1-2 / cols_2-1 Grids. Auf dem Smartphone (≤768px) = ~467px pro Kachel
   → viel zu groß. Gestapelt: Textkasten gleich hoch wie Fotos, aber beide
   riesig. Ziel: beide Typen = 70vw (273px @ 390px) + 0.7rem Zeilenabstand.
   sticky-footer-column nutzt Flex (description oben, Überschrift unten) →
   bleibt korrekt, da height:100% auf vc_column-inner greift.
   Spezifität (0,4,0) schlägt WPBakery-generiertes CSS (0,1,0) + !important.
   ========================================================================== */
@media (max-width: 768px) {
    /* Alle Foto- und Textkacheln in asymmetrischen Grids: einheitlich 70vw */
    .g-cols.via_grid.cols_1-2.mobiles-cols_1 .wpb_column.has_bg_color,
    .g-cols.via_grid.cols_2-1.mobiles-cols_1 .wpb_column.has_bg_color {
        min-height: 0   !important;
        height:     70vw !important;
    }

    /* Zeilenabstand zwischen gestapelten Kacheln: 0.7rem */
    .g-cols.via_grid.cols_1-2.mobiles-cols_1,
    .g-cols.via_grid.cols_2-1.mobiles-cols_1,
    .g-cols.via_grid.cols_2.mobiles-cols_1 {
        row-gap: 0.7rem !important;
    }
}

/* ==========================================================================
   GALERIE-FOTOS — background-size immer cover (global)
   WPBakery setzt background-size manchmal als Prozentwert (z.B. 130%)
   statt cover → bei hohen Containern entsteht eine Lücke oben oder unten,
   weil das Bild den Container nicht vollständig füllt.
   Fix: background-size: cover erzwingen auf allen Foto-Spalten im Grid.
   background-position (Perspektive / Fokuspunkt) bleibt unverändert erhalten.
   Spezifität (0,3,0) schlägt WPBakery-generiertes CSS (0,1,0) auch bei !important.
   ========================================================================== */
.g-cols.via_grid .wpb_column.has_bg_color {
    background-size: cover !important;
}

/* ==========================================================================
   FOOTER — Zweispaltig auf Smartphones
   Der Smartphone-Footer (us_custom_a3cb2b44) ist bereits nur auf Mobil
   sichtbar (hide_on_default hide_on_laptops hide_on_tablets), enthält aber
   die Klasse mobiles-cols_1 → Impreza setzt grid-template-columns: 100%
   bei ≤ 768 px → das Grid bricht einspaltig ein.
   Gewünscht: Links Adresse + Logo, rechts Menü-Links — immer zweispaltig.
   Der Türkis-Bereich (us_custom_a95da117) bleibt einspaltig (kein Fix nötig).
   ========================================================================== */
@media (max-width: 768px) {
    /* ── Beige Box: Innenabstand ── */
    .us_custom_a3cb2b44 .l-section-h {
        padding: 1.5rem 1.5rem 1.5rem 1.5rem !important;
    }
    /* ── Beige Box: 2-spaltiges Grid erzwingen ── */
    .us_custom_a3cb2b44 .g-cols.cols_2 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    /* ── Türkis Box: gleiche Seitenabstände wie Beige Box (0.4rem) hinzufügen,
       damit alle drei Elemente (Beige Box, Türkis Box, Button) gleich breit sind.
       Footer-Padding 0.35rem + Section-Margin 0.40rem = 0.75rem je Seite.
       .width_full beschränkt die Regel auf die Footer-Sektion; die gleichnamige
       Galerie-Sektion auf der Crab-Shack-Seite (kein width_full) bleibt unberührt. ── */
    .us_custom_a95da117.width_full {
        margin-left:  0.4rem !important;
        margin-right: 0.4rem !important;
    }
    /* ── Button-Breite exakt angleichen: 2 × 0.75rem = 1.50rem gesamt.
       Höhere Spezifität (0,1,1) schlägt die DB-generierte Regel (0,1,0). ── */
    footer .mobile-sticky-booking-btn {
        width: calc(100% - 1.50rem) !important;
    }
}

/* ==========================================================================
   VILLA DETAIL PAGES — Specs-Kachel (sticky-footer-column): linksbündig
   Ursache: .l-canvas/.l-main setzt global text-align:center, das von der
   vc_column-inner der Specs-Kachel geerbt wird → Beschreibung und Titel
   erscheinen zentriert statt linksbündig wie auf der Startseite.
   Fix: text-align:left + padding-left für visuelle Randdistanz.
   Gilt global (Desktop/Tablet/Mobile), da das Tile auf allen Breakpoints
   zentrierten Text erbt.
   ========================================================================== */
.sticky-footer-column .vc_column-inner {
    text-align:   left   !important;
    padding-left: 2rem   !important;
    padding-right: 1.5rem !important;
    box-sizing:   border-box !important;
}

/* ==========================================================================
   KARUSSELL — Pfeil-SVGs: korrekten URL-Pfad erzwingen
   Ursache: WPBakery-Custom-CSS setzt background-image:url('/wp-content/...')
   ohne /seaside-website/ → 404. Kindelement-Selektor (.us_post_carousel .owl-*)
   hat Spezifität (0,2,0) vs. Inline-Style-Selektor (.owl-*) (0,1,0) →
   höhere Spezifität + !important überschreibt den fehlerhaften Inline-Wert.
   ========================================================================== */
.us_post_carousel .owl-prev {
    background-image:    url('/seaside-website/wp-content/uploads/2026/02/Pfeil-links.svg')  !important;
    background-size:     contain     !important;
    background-repeat:   no-repeat   !important;
    background-position: center      !important;
}
.us_post_carousel .owl-next {
    background-image:    url('/seaside-website/wp-content/uploads/2026/02/Pfeil-rechts.svg') !important;
    background-size:     contain     !important;
    background-repeat:   no-repeat   !important;
    background-position: center      !important;
}

/* ==========================================================================
   VILLA DETAIL PAGES — Karussell: seitliche Abstände auf Smartphone
   Problem: Die Karussell-Sektion hat kein margin-left/right auf Mobile →
   das Karussell füllt den Viewport von Kante zu Kante. Die Navigations-Pfeile
   (owl-prev/owl-next) werden mit negativem left/right relativ zum Karussell
   positioniert und verschwinden außerhalb des Viewports.
   Fix: margin-left/right:2rem → Sektion schmaler → Pfeile innerhalb des
   Viewports sichtbar. Entspricht der WPBakery-Einstellung auf der Startseite
   (us_custom_903eb422 bekommt via WPBakery denselben Wert).
   ========================================================================== */
@media (max-width: 768px) {
    .l-section:has(.us_post_carousel) {
        margin-left:  2rem !important;
        margin-right: 2rem !important;
    }
}

/* ==========================================================================
   VILLA DETAIL PAGES — Weißraum nach Karussell entfernen (Orange Area)
   Ursache: w-separator mit inline style="height:7rem" direkt nach dem
   Karussell → 147 px Leerraum auf Mobile. Auf Desktop ist der Abstand
   Teil des Seiten-Layouts (z. B. für Sticky-Footer-Abstand), auf Mobile
   aber unerwünscht.
   Fix: Alle w-separator-Elemente nach dem Karussell auf height:0 setzen.
   ========================================================================== */
@media (max-width: 768px) {
    .l-section:has(.us_post_carousel) .us_post_carousel ~ .w-separator {
        height:     0 !important;
        min-height: 0 !important;
    }
}

/* ==========================================================================
   STAY ÜBERSICHT — Mobile Textkacheln in cols_2-Grids (Villen-Karten)
   Aufbau: cols_2-Grid mit 3 Spalten:
     1. Desktop-Fotokachel (hide_on_mobiles) → auf Mobile display:none
     2. Fotokachel (immer sichtbar) → hat WPBakery padding-top/%
     3. Mobil-Textkachel (hide_on_default/laptops/tablets) → nur auf Mobile
   Problem: Die Textkachel hat alle Text-Elemente mit position:absolute.
   Da vc_column-inner position:static ist, verlassen die absolut positionierten
   Elemente den Container. Zudem fehlt der Kachel eine definierte Höhe →
   sie kollabiert auf ~6px.
   Fix 1: height:70vw → Kachel bekommt sichtbare Höhe
   Fix 2: vc_column-inner → position:relative → Positioning Context für
           die absoluten Kinder (description top:35px, name bottom:35px)
   Fix 3: text-align:left → überschreibt vererbtes center aus .l-canvas
   ========================================================================== */
/* ==========================================================================
   HEADER — Unterseiten: Burger-Icon und Sprachauswahl immer dunkel
   Problem 1 (Smartphone ≤768px):
     WPBakery Global Custom CSS setzt global:
     @media (max-width:768px) { .mobile-lang-switch { color:#fff } }
     Diese Regel gilt auf ALLEN Seiten. Auf der Startseite ist das korrekt
     (transparenter Header). Auf Unterseiten soll die Sprachauswahl aber
     schon vor dem Scrollen dunkel sein.
   Problem 2 (alle Breakpoints):
     Die transparenten id_836-Regeln (background:transparent, color:#fff für
     .w-nav-icon, .w-nav-control) sind als page-spezifisches CSS auf der
     Startseite abgelegt. Auf Unterseiten existieren sie nicht. Als Absicherung
     werden die Elemente auf Unterseiten explizit dunkel gesetzt.
   Lösung:
     body:not(.home) trifft alle Seiten außer der Startseite (body.home).
     Spezifität body:not(.home) .mobile-lang-switch = (0,2,1) schlägt
     globales .mobile-lang-switch = (0,1,0) bei gleicher !important-Priorität.
     Burger: body:not(.home) + id_836-Kette = (0,5,1) > transparent-Regel
     (0,5,0) → gewinnt selbst wenn die weiße Regel versehentlich aktiv wäre.
   ========================================================================== */

/* 1. Sprachauswahl: vor dem Scrollen dunkel auf allen Unterseiten */
@media (max-width: 768px) {
    body:not(.home) .mobile-lang-switch {
        color: #555657 !important;
    }
}

/* 2. Burger-Icon: alle Breakpoints, alle Unterseiten */
body:not(.home) .l-header.id_836:not(.sticky):not(.menu-force-solid) .w-nav-control,
body:not(.home) .l-header.id_836:not(.sticky):not(.menu-force-solid) .w-nav-icon,
body:not(.home) .l-header.id_836:not(.sticky):not(.menu-force-solid) .w-nav-icon div {
    color:        #555657 !important;
    border-color: #555657 !important;
}
body:not(.home) .l-header.id_836:not(.sticky):not(.menu-force-solid) .w-nav-icon div {
    background: #555657 !important;
}

/* ==========================================================================
   KARUSSELL — Navigations-Pfeile: nur auf Smartphone anzeigen
   Desktop (≥1471px), Laptop (1181–1470px), Tablet (769–1180px): ausblenden.
   Smartphone (≤768px): sichtbar (keine Einschränkung → Standard).
   Gilt global für alle us_post_carousel-Instanzen auf der gesamten Website.
   ========================================================================== */
@media (min-width: 769px) {
    .us_post_carousel .owl-nav {
        display: none !important;
    }
}

@media (max-width: 768px) {
    /* Kachel: definierte Höhe */
    .g-cols.via_grid.cols_2.mobiles-cols_1
        .wpb_column.hide_on_default.hide_on_laptops.hide_on_tablets.has_bg_color {
        height:     70vw !important;
        min-height: 0    !important;
    }
    /* vc_column-inner: Positioning Context + volle Höhe */
    .g-cols.via_grid.cols_2.mobiles-cols_1
        .wpb_column.hide_on_default.hide_on_laptops.hide_on_tablets.has_bg_color
        .vc_column-inner {
        height:     100%      !important;
        box-sizing: border-box !important;
    }
    /* Text: linksbündig */
    .g-cols.via_grid.cols_2.mobiles-cols_1
        .wpb_column.hide_on_default.hide_on_laptops.hide_on_tablets.has_bg_color
        .wpb_text_column {
        text-align: left !important;
    }
}

/* ==========================================================================
   HEADER — Unterseiten: Mobiles Burger-SVG schwarz vor dem Scrollen
   Ursache: Global in Impreza-CSS (Inline-Style) gilt auf ALLEN Seiten:
     .ush_popup_1 .w-popup-trigger.type_icon i {
       background-image: url(Menu-Burger-weiss.svg);  /- Spez. (0,3,1) -/
     }
   Auf Unterseiten (body:not(.home)) soll vor dem Scrollen das schwarze
   SVG erscheinen. Diese Regel hat Spezifität (0,6,2) + !important → gewinnt.
   ========================================================================== */
@media (max-width: 768px) {
    body:not(.home) .l-header:not(.sticky):not(.menu-force-solid) .ush_popup_1 .w-popup-trigger.type_icon i {
        background-image: url('/seaside-website/wp-content/uploads/2026/04/Menu-Burger-schwarz.svg') !important;
    }
}