/* runonsave-test 2026-05-19 */

/* inter-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('/files/cto_layout/fonts/googlefonts/inter-v20-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  src: url('/files/cto_layout/fonts/googlefonts/inter-v20-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 900;
  src: url('/files/cto_layout/fonts/googlefonts/inter-v20-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* cormorant-garamond-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  src: url('/files/cto_layout/fonts/googlefonts/cormorant-garamond-v21-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* cormorant-garamond-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  src: url('/files/cto_layout/fonts/googlefonts/cormorant-garamond-v21-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* cormorant-garamond-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  src: url('/files/cto_layout/fonts/googlefonts/cormorant-garamond-v21-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* cormorant-700 - latin (als Cormorant Garamond 700 eingebunden) */
@font-face {
  font-display: swap;
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 700;
  src: url('/files/cto_layout/fonts/googlefonts/cormorant-v24-latin-700.woff2') format('woff2');
}

body,
p,
a,
input,
form.style5 input,
select,
textarea,
form.style5 textarea,
button,
.ce_text,
.mod_article {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size:16px;
    color:#355881;
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif !important;
    color:#355881;
    font-weight: 300;
    hyphens: none;
    -webkit-hyphens: none;
    -ms-hyphens: none;
    word-break: normal;
    overflow-wrap: normal;
  }

h1, .h1{
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
          font-weight: 600;
}

/* H2 — Design-Tokens (Cormorant Garamond Bold 48/100%) */
h2, .h2 {
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif !important;
    font-weight: 600 !important;
    font-style: normal;
    font-size: 46px;
    line-height: 100%;
    letter-spacing: 0;
}

h2.sliderTextHeadline{
  font-size:32px;
}

/* H3 — Design-Tokens (Cormorant Garamond Light 24/100%) */
h3, .h3 {
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif !important;
    font-weight: 300 !important;
    font-style: normal;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 0;
}

.customColor_1{
  background-color: #355881;
}

/* Globaler Button-Style:
   - nur „nackte" Contao Text-Link CEs (kein theme-Button-Modifier wie btn-accent-outline)
   - plus expliziter Revolution-Slider-Button („mehr erfahren")
   - NICHT für Bild-/Karten-Wrapper (atropos, fancybox), da deren <a> nicht direktes Kind von .ce_hyperlink ist
*/
.ce_hyperlink:not([class*="btn-"]) > a.hyperlink_txt,
a.hyperlink_txt.ce_revolutionslider_hyperlink {
    display: inline-block;
    background: linear-gradient(180deg, #6FB5C2 0%, #355881 100%) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 12px 32px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    transition: opacity 0.2s ease, transform 0.2s ease;
    cursor: pointer;
    margin-bottom: 0px;
}
.ce_hyperlink:not([class*="btn-"]) > a.hyperlink_txt:hover,
a.hyperlink_txt.ce_revolutionslider_hyperlink:hover {
    opacity: 0.9;
    text-decoration: none !important;
    transform: translateY(-1px);
}

/* Green Gradient Link-Button */
.ce_hyperlink > a.greenLink {
    display: inline-block;
    background: linear-gradient(180deg, #00884D 0%, #6CEDB1 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 12px 32px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    transition: opacity 0.2s, transform 0.2s;
    cursor: pointer;
    margin-bottom: 0px;
}
.ce_hyperlink > a.greenLink:hover {
    opacity: 0.9;
    text-decoration: none !important;
    transform: translateY(-1px);
}

/* Green Gradient Link-Button auch für .ce_hyperlink.greenLink > a.hyperlink_txt */
.ce_hyperlink.greenLink > a.hyperlink_txt {
    display: inline-block;
    background: linear-gradient(180deg, #00884D 0%, #6CEDB1 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 12px 32px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    transition: opacity 0.2s, transform 0.2s;
    cursor: pointer;
}
.ce_hyperlink.greenLink > a.hyperlink_txt:hover {
    opacity: 0.9;
    text-decoration: none !important;
    transform: translateY(-1px);
}

/* Utility: weiche Ecken */
.rounded-40 {
    border-radius: 40px;
    overflow: hidden;
}

/* Subline-Text */
.textSubline,
p.textSubline {
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif !important;
    font-weight: 300 !important;
    font-style: normal;
    font-size: 24px !important;
    line-height: 100% !important;
    letter-spacing: 0 !important;
    color:#355881;
}

/* Article 5 — Intro mit Tau-Grafiken links/rechts */

.bg-gradient-cyan{
    position: relative;
    background: linear-gradient(180deg, #E5F5F8 0%, #F8FEFF 100%);
    overflow: hidden;
}

/* Article 25 — Anschluss-Gradient */

/*.article_25 */
.bg-gradient-cyan-fade{
    position: relative;
    background: linear-gradient(180deg, #F8FEFF 67.79%, #FFFFFF 100%);
}

.bgWhite {
    background: #FFFFFF !important;
}

/* Theme-Fix: bg-nocolor soll wirklich keine Farbe haben */
.ce_bgimage.bg-nocolor {
    background: transparent !important;
}

/* === tauSides — Tau-Grafiken links/rechts als Section-Deko ===
   Hook: manuell vergebene Klasse `tauSides` an einem .mod_article.
   Eigenständig (bringt position/overflow selbst mit) — funktioniert
   auch ohne `.bg-gradient-cyan` oder andere BG-Klasse.
   Mobile: kleinere Taue mit reduzierter Opacity. */
.tauSides {
    position: relative;
    overflow: hidden;
}
.tauSides::before,
.tauSides::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 180px;
    height: 330px;
    margin-top: -165px;
    background-image: url('/files/grafiken/tau-angeschnitten.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    pointer-events: none;
    visibility: visible;
    overflow: visible;
    z-index: 0;
}
.tauSides::before {
    left: 0;
    transform: scaleX(-1);
}
.tauSides::after {
    right: 0;
}
.tauSides > .container {
    position: relative;
    z-index: 1;
}
@media (max-width: 768px) {
    .tauSides::before,
    .tauSides::after {
        width: 90px;
        height: 165px;
        margin-top: -82px;
        opacity: 0.6;
    }
}

/* === roomFeatures — Feature-Strip mit Full-Bleed-BG, boxed Content =====
   Hook: manuell vergebene Klasse `roomFeatures` an einem .autogrid_row
   (typ. mit 4× .column.col_3 Iconboxen). Der blaue Streifen läuft per
   Pseudo-Element bis Viewport-Rand (Breakout via 100vw), das Element
   selbst bleibt boxed — die Spalten erben damit ihre Breite vom
   .container/.boxed-content-Wrapper und stapeln auf Mobile normal.

   Zusätzlich: liegt das .roomFeatures in einem ce_bgimage-Wrapper
   (Bild als Hintergrund), wird der zugehörige .ce_bgimage-outer an
   den unteren Rand des Bildes geschoben — die Leiste liegt dann
   bündig auf der unteren Bildkante (mit Top-Rundung als Akzent).

   Tokens (alle mit Fallback, per Inline-Style oder Zusatzklasse
   übersteuerbar):
     --roomfeatures-bg       Hintergrundfarbe   (default #355881)
     --roomfeatures-radius   Top-Rundung        (default 248px)

   Hinweis: Wenn `.customColor_1` (oder andere BG-Klassen) am selben
   Element hängen, wird deren BG bewusst neutralisiert — die Farbe
   kommt allein vom Pseudo-Streifen, damit BG und Streifen nahtlos
   identisch sind. */
.roomFeatures {
    --roomfeatures-bg: #355881;
    --roomfeatures-radius: 248px;
    position: relative;
    background: transparent !important;
}
/* Variante: heller Akzent-Hintergrund (Hook-Klasse `roomFeaturesAccent`
   zusätzlich zu `roomFeatures` setzen) */
.roomFeatures.roomFeaturesAccent {
    --roomfeatures-bg: #E5F5F8;
}
.roomFeatures::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(50% - 50vw);
    right: calc(50% - 50vw);
    background-color: var(--roomfeatures-bg);
    border-top-left-radius: var(--roomfeatures-radius);
    border-top-right-radius: var(--roomfeatures-radius);
    z-index: 0;
    pointer-events: none;
}
/* Spalten über den Pseudo-Streifen heben */
.roomFeatures > .column {
    position: relative;
    z-index: 1;
}
/* Wenn das .roomFeatures im Theme-CE-bgimage liegt, den Outer-Wrapper
   an die Unterkante des Bildes pinnen. Hook: manuell vergebene Klasse
   `featuresWrapper` am umschließenden .ce_bgimage. */
.featuresWrapper .ce_bgimage-outer {
    position: absolute !important;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 !important;
}
/* Theme-Default-Padding am inside-Wrapper neutralisieren, damit die
   Leiste bündig auf der Foto-Unterkante sitzt. */
.featuresWrapper .ce_bgimage-inside {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
/* Icon-Kreise: das Theme setzt am <i> bereits border-radius:100% +
   helles BG, aber ohne feste Größe/Padding wird daraus visuell kein
   Kreis. Hier scoped auf .roomFeatures: fixe Kreis-Maße, Brand-Cyan
   als BG (Akzent zum dunkelblauen Streifen), Icon-Glyph bleibt weiß
   (vom Inline-style des CMS gesetzt).
   Tokens:
     --roomfeatures-icon-size   Kreis-Durchmesser    (default 48px)
     --roomfeatures-icon-bg     Kreis-Hintergrund    (default #52CFE5)
     --roomfeatures-py          Vertikales Padding   (default 32px)
     --roomfeatures-gap         Abstand Icon↔Text    (default 16px) */
.roomFeatures {
    --roomfeatures-icon-size: 48px;
    --roomfeatures-icon-bg: #52CFE5;
    --roomfeatures-py: 32px;
    --roomfeatures-gap: 16px;
    padding-top: var(--roomfeatures-py);
    padding-bottom: var(--roomfeatures-py);
}
.roomFeatures .ce_iconbox_icon i {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: var(--roomfeatures-icon-size);
    height: var(--roomfeatures-icon-size);
    line-height: 1 !important;
    background: var(--roomfeatures-icon-bg) !important;
    border-radius: 50% !important;
    text-align: center;
}
/* Theme-Default: .ce_iconbox_icon hat fixe Breite (flex:0 0 80px) →
   wegnehmen, damit der Kreis-Durchmesser die natürliche Spaltenbreite
   bestimmt und der Abstand zum Text via flex-gap kommt. */
.roomFeatures .ce_iconbox_icon {
    flex: 0 0 auto !important;
    width: auto !important;
    align-self: flex-start !important;
}
/* Iconbox-Innenraum: Flex mit definiertem Gap zwischen Kreis und
   Text. Icons werden oben verankert (statt center), damit alle
   Icons über die Spalten hinweg auf gleicher Höhe sitzen — das
   inside wächst sonst je nach Text-Länge unterschiedlich (z.B.
   2- vs. 3-Zeiler) und mit align-center driften die Icons. */
.roomFeatures .ce_iconbox_inside {
    gap: var(--roomfeatures-gap);
    align-items: flex-start !important;
}
/* Theme-Default: .content im cwrapper hat margin-top:10px → bricht
   die Vertikal-Zentrierung. Innerhalb von .roomFeatures resetten.
   Außerdem line-height knackiger setzen (Theme-Default 27px auf 16px
   ist für 2-Zeiler im Streifen zu luftig). */
.roomFeatures .ce_iconbox_cwrapper .content {
    margin-top: 0 !important;
    line-height: 1.3;
}
/* Theme rendert in einigen Iconboxen den Text als <p> (statt
   .content-div). Das Theme-pct_theme setzt <p> auf #355881 (=
   Streifen-BG → Text unsichtbar) und 15px margin-bottom (verzerrt
   die Inside-Höhe). Beides hier neutralisieren, damit die weiße
   Farbe vom cwrapper geerbt wird und alle Spalten gleich hoch
   bleiben. */
.roomFeatures .ce_iconbox_cwrapper p {
    color: inherit !important;
    margin: 0 !important;
    line-height: 1.3;
}

/* Mobile: kleinere Rundung */
@media (max-width: 768px) {
    .roomFeatures {
        --roomfeatures-radius: 60px;
    }
}

/* =====================================================================
   Article 26 — Zimmer-Teaser (ce_bgimage_418) + Bus-Pill (ce_bgimage_429)
   Stylt vorhandene Contao-Inhaltselemente, ohne Markup zu verändern.
   ===================================================================== */

/* Container als Grid: Bett-Bild + Pill-Reihe */
#article-26 > .container {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 90px;
}

/* --- Bett-Bild mit Subline-Karte als Overlay --- */
#article-26 .ce_bgimage_418 {
    position: relative;
    border-radius: 40px;
    overflow: visible;
    margin-bottom: 50px; /* Platz für überlappende Karte */
}
#article-26 .ce_bgimage_418 .ce_bgimage-image {
    border-radius: 40px;
}
#article-26 .ce_bgimage_418 .ce_bgimage-outer {
    position: absolute;
    inset: auto 0 0 0;
    transform: translateY(60%);
    display: flex;
    justify-content: center;
    pointer-events: none;
}
#article-26 .ce_bgimage_418 .ce_bgimage-inside {
    background: #F8FEFF;
    border-radius: 40px;
    padding: 36px 56px !important;
    width: min(85%, 720px);
    max-width: none !important;
    box-sizing: border-box;
    pointer-events: auto;
    box-shadow: 0 4px 24px rgba(53, 88, 129, 0.08);
}
#article-26 .ce_bgimage_418 .ce_text p {
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif !important;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.35;
    color: #355881;
    margin: 0;
    text-align: center;
}

/* --- Bus-Pill: ce_bgimage_429 als Flex-Container (Text links, Button rechts) --- */
#article-26 .ce_bgimage_429 {
    justify-self: center;
    width: 100%;
    max-width: 886px;
    border: 2px solid #B5E0E8;
    border-radius: 60px;
    background: #FFFFFF !important;
    padding: 18px 18px 18px 36px;
    box-sizing: border-box;
    margin: 0;
    display: flex !important;
    align-items: center;
    gap: 24px;
}
#article-26 .ce_bgimage_429 > .ce_bgimage-outer {
    flex: 1 1 auto;
    min-width: 0;
}
#article-26 .ce_bgimage_429 .ce_bgimage-inside {
    padding: 0 !important;
    max-width: none !important;
}
#article-26 .ce_bgimage_429 .autogrid_grid {
    display: block;
}
#article-26 .ce_bgimage_429 .ce_text {
    color: #355881;
    font-size: 15px;
    line-height: 1.5;
}
#article-26 .ce_bgimage_429 .ce_text p {
    margin: 0;
}
#article-26 .ce_bgimage_429 .ce_text strong {
    font-weight: 700;
}

/* Kontakt-Button-Spalte (Sibling von ce_bgimage-outer innerhalb der Pille) */
#article-26 .ce_bgimage_429 > .column {
    flex: 0 0 auto;
    width: auto;
    padding: 0;
}

@media (max-width: 768px) {
    #article-26 > .container { row-gap: 70px; }
    #article-26 .ce_bgimage_418 { margin-bottom: 30px; }
    #article-26 .ce_bgimage_418 .ce_bgimage-image,
    #article-26 .ce_bgimage_418 { border-radius: 28px; }
    #article-26 .ce_bgimage_418 .ce_bgimage-inside {
        padding: 22px 28px !important;
        width: 92%;
        border-radius: 28px;
    }
    #article-26 .ce_bgimage_418 .ce_text p { font-size: 17px; }
    #article-26 .ce_bgimage_429 {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        gap: 16px;
        padding: 24px 28px;
        border-radius: 32px;
    }
    #article-26 .ce_bgimage_429 > .column { align-self: center; }
}

/* =========================================================
   Kundenmeinungen-Slider (article-27 + .ce_testimonial_slider)
   ========================================================= */

/* Headline-Farbe in der blauen Testimonial-Section */
#article-27 h1, #article-27 h2, #article-27 h3,
#article-27 .h1, #article-27 .h2, #article-27 .h3 {
    color: #FFFFFF !important;
    text-align: center;
    margin-bottom: 60px;
}

/* Slider-Container: Platz für Side-Arrows */
#article-27 .ce_testimonial_slider {
    position: relative;
    padding: 0 70px;
}

/* Slide: kein Avatar (falls leer trotzdem hidden), Text + Name */
.ce_testimonial_slider .swiper-slide .image { display: none; }

.ce_testimonial_slider .swiper-slide .swiper-content {
    color: #FFFFFF;
    padding: 0 10px;
}

/* Großes Anführungszeichen über dem Text */
.ce_testimonial_slider .swiper-slide .text {
    position: relative;
    color: #FFFFFF;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.55;
    padding-top: 60px;
    margin-bottom: 36px;
}
.ce_testimonial_slider .swiper-slide .text::before {
    content: "\201C"; /* „ left double quotation mark */
    position: absolute;
    top: -10px;
    left: 0;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 90px;
    line-height: 1;
    color: #FFFFFF;
    font-weight: 400;
}
/* Sprechblasen-Arrow aus Default-Template ausblenden */
.ce_testimonial_slider .swiper-slide .bottom-arrow { display: none; }

/* Name + Sterne in einer Zeile */
.ce_testimonial_slider .swiper-slide .name {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: #FFFFFF;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 15px;
    margin-top: 8px;
}
.ce_testimonial_slider .swiper-slide .name::after {
    content: "\2605 \2605 \2605 \2605 \2605"; /* 5x ★ */
    color: #F4C44A;
    font-size: 38px;
    letter-spacing: 6px;
    line-height: 1;
}
.ce_testimonial_slider .swiper-slide .info {
    display: none; /* in Figma nicht vorhanden */
}

/* Pagination: weiße Outline-Dots, aktiver Dot gefüllt */
#article-27 .swiper-pagination {
    position: relative;
    margin-top: 30px;
    text-align: center;
}
#article-27 .swiper-pagination .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: transparent;
    border: 1.5px solid #FFFFFF;
    border-radius: 50% !important;
    opacity: 1;
    margin: 0 8px;
}
#article-27 .swiper-pagination .swiper-pagination-bullet-active {
    background: #FFFFFF;
    border-radius: 50% !important;
}

/* Side-Arrows: weiß, an den Rändern */
#article-27 .swiper-buttons .swiper-button-prev,
#article-27 .swiper-buttons .swiper-button-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    color: #FFFFFF;
    cursor: pointer;
    z-index: 10;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
#article-27 .swiper-buttons .swiper-button-prev { left: 10px; }
#article-27 .swiper-buttons .swiper-button-next { right: 10px; }
#article-27 .swiper-buttons .swiper-button-prev::after,
#article-27 .swiper-buttons .swiper-button-next::after {
    font-family: 'FontAwesome', sans-serif;
    font-size: 38px;
    line-height: 1;
    color: #FFFFFF;
}
#article-27 .swiper-buttons .swiper-button-prev::after { content: "\2039"; } /* ‹ */
#article-27 .swiper-buttons .swiper-button-next::after { content: "\203A"; } /* › */
#article-27 .swiper-buttons .swiper-button-prev:hover,
#article-27 .swiper-buttons .swiper-button-next:hover {
    opacity: 0.7;
}

/* Custom-Circle-Cursor verstecken (Theme-Spielerei, passt nicht ins Layout) */
#article-27 .ce_testimonial_slider .circle { display: none !important; }

@media (max-width: 768px) {
    #article-27 .ce_testimonial_slider { padding: 0 40px; }
    .ce_testimonial_slider .swiper-slide .text { font-size: 14px; padding-top: 50px; }
    .ce_testimonial_slider .swiper-slide .text::before { font-size: 70px; }
    .ce_testimonial_slider .swiper-slide .name { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* === Testimonial-Slider Feinschliff === */
/* Theme-Bubble auf aktivem Slide entfernen */
#article-27 .ce_testimonial_slider .swiper-slide .swiper-content,
#article-27 .ce_testimonial_slider .swiper-slide-active .swiper-content,
#article-27 .ce_testimonial_slider .swiper-slide.swiper-slide-active .swiper-content {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
#article-27 .ce_testimonial_slider .swiper-slide .bottom-arrow,
#article-27 .ce_testimonial_slider .swiper-slide-active .bottom-arrow {
  display: none !important;
  background: transparent !important;
  border: 0 !important;
}
/* Quote-Icon (theme rendert ggf. eigenes Symbol via ::before) white */
#article-27 .ce_testimonial_slider .swiper-slide .text,
#article-27 .ce_testimonial_slider .swiper-slide-active .swiper-slide .text,
#article-27 .ce_testimonial_slider .swiper-slide .swiper-content .text {
  color: #FFFFFF !important;
}
#article-27 .ce_testimonial_slider .swiper-slide .text::before {
  color: #FFFFFF !important;
  opacity: 1 !important;
}
/* Name in Weiß, Theme überschreiben */
#article-27 .ce_testimonial_slider .swiper-slide .name,
#article-27 .ce_testimonial_slider .swiper-slide-active .swiper-slide .name,
#article-27 .ce_testimonial_slider .swiper-slide .swiper-content .name {
  color: #FFFFFF !important;
}
/* === Text-Bubble (theme) komplett entfernen === */
#article-27 .ce_testimonial_slider .swiper-slide .text,
#article-27 .ce_testimonial_slider .swiper-slide-active .text {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 60px 20px 20px 80px !important;
  color: #FFFFFF !important;
}
#article-27 .ce_testimonial_slider .swiper-slide .text::before {
  color: #FFFFFF !important;
  background: transparent !important;
}

/* =========================================================
   Testimonial-Slider Layout (Pfeile außen, großer Quote oben mittig)
   ========================================================= */

/* Slider: außenliegende Pfeile -> mehr Padding rechts/links */
#article-27 .ce_testimonial_slider {
  padding: 0 120px !important;
}

/* Pfeile groß und außen neben den Slides */
#article-27 .swiper-buttons .swiper-button-prev,
#article-27 .swiper-buttons .swiper-button-next {
  width: 64px !important;
  height: 64px !important;
  top: 50% !important;
}
#article-27 .swiper-buttons .swiper-button-prev { left: 20px !important; }
#article-27 .swiper-buttons .swiper-button-next { right: 20px !important; }
#article-27 .swiper-buttons .swiper-button-prev::after,
#article-27 .swiper-buttons .swiper-button-next::after {
  font-family: Arial, sans-serif !important;
  font-size: 72px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
}

/* Anführungszeichen GROSS, mittig über dem Text */
#article-27 .ce_testimonial_slider .swiper-slide .text {
  padding: 110px 0px 0 0px !important;
  text-align: left !important;
  position: relative !important;
}
#article-27 .ce_testimonial_slider .swiper-slide .text::before {
  content: "\201C" !important;
  position: absolute !important;
  top: -10px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 160px !important;
  line-height: 1 !important;
  color: #FFFFFF !important;
  font-weight: 400 !important;
  background: transparent !important;
}

/* Mobile-Adjustments Slider */
@media (max-width: 768px) {
  #article-27 .ce_testimonial_slider { padding: 0 50px !important; }
  #article-27 .swiper-buttons .swiper-button-prev,
  #article-27 .swiper-buttons .swiper-button-next {
    width: 40px !important; height: 40px !important;
  }
  #article-27 .swiper-buttons .swiper-button-prev::after,
  #article-27 .swiper-buttons .swiper-button-next::after { font-size: 48px !important; }
  #article-27 .ce_testimonial_slider .swiper-slide .text { padding-top: 80px !important; }
  #article-27 .ce_testimonial_slider .swiper-slide .text::before { font-size: 110px !important; }
}

/* Swiper-Container clippt Slides intern, Arrows liegen außerhalb */
#article-27 .swiper-container { overflow: hidden !important; }
#article-27 .swiper-buttons .swiper-button-prev { left: 20px !important; }
#article-27 .swiper-buttons .swiper-button-next { right: 20px !important; }
#article-27 .swiper-buttons { position: static; }

/* Headline-Abstand zum Slider */
#article-27 > .ce_headline,
#article-27 h2 { margin-bottom: 30px !important; }

/* Pfeile vertikal auf Slide-Text-Mitte */
#article-27 .swiper-buttons .swiper-button-prev,
#article-27 .swiper-buttons .swiper-button-next {
  top: calc(50% - 25px) !important;
}

/* === roundImage — Bilder komplett rund (1:1 + border-radius:50%) === */
.roundImage,
.roundImage img,
img.roundImage,
.ce_image.roundImage img,
figure.roundImage img {
  border-radius: 50% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  overflow: hidden !important;
}
/* Wenn `roundImage` an einem ce_hyperlink hängt: figure/a/img auf volle
   Spaltenbreite zwingen, sonst schrumpft `<a class="hyperlink_img">`
   (inline-block) auf intrinsische Bild-Größe und das runde Bild sitzt
   zu klein und versetzt in der Spalte. */
.ce_hyperlink.roundImage figure.image_container,
.ce_hyperlink.roundImage a.hyperlink_img,
.ce_hyperlink.roundImage a.hyperlink_img img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: 100% !important;
}
.ce_hyperlink.roundImage a.hyperlink_img {
  line-height: 0;
  position: relative;
}
/* Hover-Rahmen nach innen: Overlay-Pseudo mit border:9px #52CFE5 über
   dem <img>. Inset-box-shadow auf <img> selbst ist unsichtbar, weil die
   Bildpixel den Shadow überdecken. Figma-Spec: 9px #52CFE5. */
.ce_hyperlink.roundImage a.hyperlink_img::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 9px solid #52CFE5;
  box-sizing: border-box;
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
}
.ce_hyperlink.roundImage a.hyperlink_img:hover::after,
.ce_hyperlink.roundImage a.hyperlink_img:focus-visible::after {
  opacity: 1;
}

/* === Freizeit-Tabs (.panes) — Bild-Hyperlinks auf volle Spaltenbreite ===
   Bild-Links (a.hyperlink_img) erben die generische Button-Stilisierung
   (.ce_hyperlink a → padding 15px 50px + 2px border). Mit box-sizing:
   border-box schrumpft das Bild dadurch auf die Content-Box
   (368 − 100px Padding − 4px Border = 264px) statt die Spalte zu füllen.
   Button-Padding/Border auf Bild-Links entfernen → Bild volle Breite. */
.panes .ce_hyperlink a.hyperlink_img {
  display: block;
  width: 100%;
  padding: 0 !important;
  border: 0 !important;
  line-height: 0;
}
.panes .ce_hyperlink a.hyperlink_img img {
  width: 100% !important;
  height: auto !important;
}

/* === Article-35 — fancy_divider_hellblau auf volle Viewport-Breite === */
#article-35 {
  position: relative !important;
  left: 50% !important;
  width: 100vw !important;
  margin-left: -50vw !important;
  max-width: none !important;
}
#article-35 .ce_image,
#article-35 figure.image_container,
#article-35 figure.image_container img {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  display: block !important;
}

/* === Footer-Customnav — horizontal, Versalien, ohne Chevrons/Trennstriche === */
footer .mod_customnav ul.vlist {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 1rem 2.5rem !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}
footer .mod_customnav ul.vlist li {
  display: block !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
footer .mod_customnav ul.vlist li::before,
footer .mod_customnav ul.vlist li::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
  background: none !important;
}
footer .mod_customnav ul.vlist li a {
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  float: none !important;
  display: inline-block !important;
}

/* === Unterkunfts-Card-Teaser (Hook: .hotelImageTeaser am ce_bgimage) ===
   Mobile-First. Nutzt Theme-Tokens: bg-accent (#E5F5F8), Cormorant Garamond,
   Text-Farbe #355881, Cyan #52CFE5 (aus pfeil.svg).
   Layout-Quelle: Design-Screenshot „Unsere Unterkünfte". */

/* Card-Wrapper trägt das Hintergrundbild (inline style auf .attributes).
   Greift nur für Card 1 (Hotel) — bei Cards 2/3 liegt das Bild auf
   einem inneren .ce_bgimage-image (siehe unten). */
.attributes:has(> .hotelImageTeaser) {
  background-size: cover;
  background-position: center;
  min-height: 252px;
}
/* Foreground-img aus image_mob raus — Bild kommt aus background-image */
.attributes:has(> .hotelImageTeaser) > .image_mob {
  display: none;
}

/* ============================================================
   Pfad A — .hotelImageTeaser OHNE inneres .ce_bgimage-image:
   Element selbst IST die Cyan-Overlay-Box (Card 1, Hotel)
   ============================================================ */
.hotelImageTeaser {
  border-bottom-right-radius: 149px;
  max-width: 309px;
}

/* ============================================================
   Pfad B — .hotelImageTeaser MIT innerem .ce_bgimage-image:
   Bild bleibt vollflächig im Hintergrund, Overlay liegt auf
   .ce_bgimage-outer (Cards 2/3, Monteur/Stellplätze)
   ============================================================ */
.hotelImageTeaser:has(> .ce_bgimage-image) {
  max-width: none;
  border-bottom-right-radius: 0;
  background: transparent !important;
  min-height: 252px;
  position: relative;
}
.hotelImageTeaser:has(> .ce_bgimage-image) > .ce_bgimage-outer {
  background-color: #E5F5F8;
  max-width: 309px;
  border-bottom-right-radius: 149px;
  min-height: 252px;
  position: relative;
  z-index: 1;
}

/* Headline in Cyan (Theme-Akzent aus pfeil.svg) */
.hotelImageTeaser h3 {
  color: #52CFE5;
}

/* Erstes <p> im Text = Subline → Divider in Cyan darunter */
.hotelImageTeaser .ce_text > p:first-of-type {
  border-bottom: 1px solid #52CFE5;
  padding-bottom: 0.75em;
  margin-bottom: 1em;
}

/* Pfeil-Link: links bündig mit dem Text, ohne Browser-default-Margins
   am <figure>. */
.hotelImageTeaser .ce_hyperlink {
  margin-top: 1em;
}
.hotelImageTeaser .ce_hyperlink figure.image_container {
  margin: 0;
  padding: 0;
}
.hotelImageTeaser .ce_hyperlink .hyperlink_img {
  display: inline-block;
  margin: 0;
  padding: 0;
  /* Theme-Button-Styling (Cyan-Bg + Border) wegnehmen — Pfeil-SVG
     ist self-contained und braucht keinen zusätzlichen Hintergrund. */
  background: transparent !important;
  border: 0 !important;
}
.hotelImageTeaser .ce_hyperlink img {
  width: 39px;
  height: 39px;
  max-width: none;
}

/* === CTA-Bar "Sie haben Fragen…" an Maßgabe (Bus-CTA) angleichen ===
   Vorlage: .ce_bgimage_429 (article-26) — weiß, hellblauer Border, radius 60, padding 18/36
   Ziel:    innerer Grid der "Fragen"-Bar in article-38 / ce_bgimage_509 */
#article-38 .ce_bgimage_509 .autogrid_grid {
  background: #FFFFFF !important;
  border: 2px solid #B5E0E8 !important;
  border-radius: 60px !important;
  padding: 18px 18px 18px 36px !important;
  align-items: center !important;
}
#article-38 .ce_bgimage_509 .autogrid_grid .ce_text p {
  margin-bottom: 0 !important;
}

/* Menüpunkt "Pizza" in Markenfarbe Grün */
a.pizzaLink,
a.pizzaLink span,
li.pizzaLink > a,
li.pizzaLink > a span {
  color: #008B4B !important;
}

/* Wellen-Trenner unter RevSlider-Hero (article-45):
   ersetzt durch die slider-interne `.dividerSlider`-Lösung weiter unten.
   Article bleibt im DOM, aber visuell unsichtbar (Höhe 0, kein Margin-Hack). */
#article-45 {
  display: none !important;
}

/* ============================================================
   Wavy Section-Divider am Revolution-Slider-Boden (.dividerSlider)
   ----------------------------------------------------------------
   Hook: manuell vergebene Klasse `dividerSlider` an einem
   Image-Caption-Layer. Macht den Layer + die SVG darin viewport-
   breit und pinnt ihn an die Slider-Unterkante.

   Funktionsweise:
   - Der vom Slider-Plugin per Inline-Style positionierte
     `.tp-parallax-wrap` wird auf `left:0 / bottom:0 / width:100vw`
     gezwungen (Plugin überschreibt bei Resize – daher !important).
   - Der eigentliche `.tp-caption` (mit der Klasse `dividerSlider`)
     wird auf volle Breite gestretcht, Höhe `auto`.
   - Das eingebettete `<img>` (mit inline width/height-Attributen)
     wird auf 100vw breit, Höhe proportional via SVG-Aspect.
   - `overflow: visible` an den Slider-internen Wrappern nur
     dort, wo ein `.dividerSlider` drinsteckt — via :has().
   ============================================================ */

/* 1) Parallax-Wrap an Slider-Unterkante pinnen.
      Breite = Slider-Breite (nicht vw), damit's auch in Boxed-Layouts passt. */
.tp-parallax-wrap:has(.dividerSlider) {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  bottom: -1px !important;        /* -1px gegen Subpixel-Gap */
  width: 100% !important;         /* füllt den positionierten Slider-Ancestor */
  height: auto !important;
  transform: none !important;
  z-index: 5 !important;
  pointer-events: none;
}

/* 2) Mask-/Loop-Wrap aufmachen, damit nichts abgeschnitten wird */
.tp-mask-wrap:has(.dividerSlider),
.tp-loop-wrap:has(.dividerSlider) {
  width: 100% !important;
  height: auto !important;
  left: 0 !important;
  top: auto !important;
  bottom: 0 !important;
  overflow: visible !important;
  transform: none !important;
}

/* 3) Der Caption-Layer selbst */
.dividerSlider {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  line-height: 0 !important;
  overflow: visible !important;
  transform: none !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  max-height: none !important;
}

/* 4) Die SVG: Slider-breit, Höhe proportional (KEIN object-fit/crop — sonst
      entsteht eine harte horizontale Schnittkante = „eckig oben"). */
.dividerSlider > img,
.dividerSlider .image_container img,
.dividerSlider figure img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  aspect-ratio: 1385 / 221;
}

/* 5) Slider-Container darf nicht clippen, wenn ein dividerSlider drin liegt */
.tp-banner:has(.dividerSlider),
.tp-revslider-mainul:has(.dividerSlider),
li.slide:has(.dividerSlider) {
  overflow: visible !important;
}

/* 6) Sehr breite Viewports: Welle nicht zu hoch werden lassen — proportional
      schrumpfen via transform-scaleY (kein crop, daher KEINE harte Kante).
      Anker bleibt unten dank transform-origin bottom. */
@media (min-width: 1200px) {
  .dividerSlider > img,
  .dividerSlider .image_container img,
  .dividerSlider figure img {
    transform: scaleY(0.7);
    transform-origin: 50% 100%;
  }
}
@media (min-width: 1600px) {
  .dividerSlider > img,
  .dividerSlider .image_container img,
  .dividerSlider figure img {
    transform: scaleY(0.55);
  }
}
@media (min-width: 1920px) {
  .dividerSlider > img,
  .dividerSlider .image_container img,
  .dividerSlider figure img {
    transform: scaleY(0.45);
  }
}

/* 7) Mobile bleibt rein proportional (60–120px je nach Gerät) */

/* 7) Mobile-Aufstockung (optional, falls 60px-Welle zu flach wirkt) — derzeit
      proportional belassen. Bei Bedarf einkommentieren:
@media (max-width: 600px) {
  .dividerSlider > img,
  .dividerSlider .image_container img,
  .dividerSlider figure img {
    height: 80px;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: bottom;
  }
}
*/

/* =========================================================================
   Wiederverwendbare Section-Divider: .dividerSVG  und  .dividerImage
   -------------------------------------------------------------------------
   Hook: manuell vergebene Klasse am ce_image_extended-Wrapper, der als
   :last-child seines .container sitzt (= letztes Inhaltselement der Section).

   Ziele:
   - voll-breit am Section-Boden (Breakout aus boxed .container)
   - bündig zur folgenden Section (kein Gap, keine Subpixel-Lücke)
   - alle Wrapper-Defaults plattmachen (line-height/margin/figure)
   - frei einsetzbar an jeder Section-Endposition, beliebige Hintergrundfarbe
     (Farbe wird im Inline-SVG bzw. PNG selbst gesteuert — NICHT hier)
   - Lessons-Learned aus .dividerSlider: KEIN object-fit:cover zum Deckeln,
     stattdessen transform:scaleY(<1) mit transform-origin: 50% 100%
     (= proportionale Stauchung, kein Crop → keine harte Schnittkante)
   ========================================================================= */

/* (A) Eltern-Section + ihr .container: padding-bottom 0, damit der Trenner
      bündig sitzt. Greift NUR wenn der Divider letztes Kind seines .container
      ist. `!important` nötig, weil pct_theme das padding via
      `.mod_article:not(.fullwidth) > .container` mit hoher Spezifität setzt
      (gilt für fullwidth-boxed-Sections wie article-27). */
.mod_article:has(> .container > .ce_image_extended.dividerSVG:last-child),
.mod_article:has(> .container > .ce_image_extended.dividerImage:last-child),
.mod_article:has(> .container > .ce_image_extended.dividerSVG:last-child) > .container,
.mod_article:has(> .container > .ce_image_extended.dividerImage:last-child) > .container {
  padding-bottom: 0 !important;
}

/* (B) Gemeinsamer Wrapper-Reset für beide Divider-Varianten */
.ce_image_extended.dividerSVG,
.ce_image_extended.dividerImage {
  margin: 0;
  padding: 0;
  line-height: 0;
  display: block;
  pointer-events: none;
  /* Wrapper darf NICHT clippen: ein geflipptes/transformiertes Kind
     (siehe .is-topfill weiter unten) bleedet bewusst in die nächste
     Section. Contao setzt per Default overflow:hidden auf
     .ce_image_extended → hier neutralisieren. */
  overflow: visible;
  /* Subpixel-Gap zur nächsten Section vermeiden */
  margin-bottom: -1px;
}

.ce_image_extended.dividerSVG .ce_image_extended_inside,
.ce_image_extended.dividerImage .ce_image_extended_inside,
.ce_image_extended.dividerImage .image_container,
.ce_image_extended.dividerImage figure {
  margin: 0;
  padding: 0;
  line-height: 0;
  display: block;
  overflow: visible;
}

/* (C) Breakout aus boxed .container — zieht den Trenner auf volle
      Viewport-Breite (= volle Section-Background-Breite bei fullwidth/
      fullwidth-boxed). Bei `fullwidth` ist der .container ohnehin (fast)
      voll, der Breakout schadet aber nicht (volle Breite bleibt voll). */
.container > .ce_image_extended.dividerSVG:last-child,
.container > .ce_image_extended.dividerImage:last-child {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* =========================================================================
   .dividerSVG  —  Inline-SVG mit preserveAspectRatio="none"
   ========================================================================= */

/* SVG füllt seinen Wrapper voll, Aspect über CSS gepinnt damit auch bei
   preserveAspectRatio="none" eine vorhersagbare Höhe entsteht. */
.ce_image_extended.dividerSVG > .ce_image_extended_inside,
.ce_image_extended.dividerSVG svg {
  display: block;
  width: 100%;
  height: auto;
}
.ce_image_extended.dividerSVG svg {
  aspect-ratio: 1385 / 221;     /* = viewBox der fancy-divider-Welle */
}

/* Modifier: top-fill SVGs nach unten schieben
   ---------------------------------------------------------------
   Default-Annahme für `.dividerSVG`: das SVG ist BOTTOM-fill —
   farbige Fläche unten im viewBox, transparent oben, wavy Kante
   als Top-Border des Blobs (wie `fancy_divider_hellblau.svg` im
   `.dividerSlider`). Wave-Kante landet damit natürlich an der
   Section-Grenze, wenn das Element am Section-Boden sitzt.

   Manche Vorlage-SVGs (z. B. `fancy_divider_blau.svg` in article-27)
   sind dagegen TOP-fill (Farbe oben, wavy Kante in der Mitte,
   transparent unten). Ohne Korrektur würde die Welle innerhalb des
   gleichfarbigen Section-Hintergrunds liegen (unsichtbar, Farbe-auf-
   Farbe). Der Modifier `is-topfill` verschiebt das SVG vertikal um
   ~45% seiner Höhe nach unten, sodass die wavy Kante des Blobs
   auf der Section-Grenze sitzt und der Rest des Blobs in die
   nächste Section „fließt“. 45% entspricht in etwa dem transparenten
   Strip unterhalb des Blobs in der Vorlage — SVG-spezifisch über
   --divider-shift-y übersteuerbar. */
.ce_image_extended.dividerSVG.is-topfill svg {
  --divider-shift-y: 45%;
  transform: translateY(var(--divider-shift-y)) scaleY(1);
  transform-origin: 50% 100%;
}

/* =========================================================================
   .dividerImage  —  Raster-Trenner (PNG/JPG) via <img>
   ========================================================================= */

.ce_image_extended.dividerImage figure,
.ce_image_extended.dividerImage .image_container,
.ce_image_extended.dividerImage img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;             /* überschreibt evtl. Core-Begrenzungen */
}

/* =========================================================================
   Höhen-Begrenzung an breiten Viewports (für BEIDE Varianten)
   -------------------------------------------------------------------------
   Wave-Trenner werden bei sehr breiten Layouts optisch zu hoch / die Peaks
   wirken eckig. Stauchen statt croppen: scaleY mit Ursprung an der Unterkante
   → die Welle wird flacher, die Form bleibt erhalten, kein harter Cut.
   Mobile-First: bis 1199px volle natürliche Höhe.
   ========================================================================= */
@media (min-width: 1200px) {
  .ce_image_extended.dividerSVG svg,
  .ce_image_extended.dividerImage img {
    transform: scaleY(0.75);
    transform-origin: 50% 100%;
  }
  .ce_image_extended.dividerSVG.is-topfill svg {
    transform: translateY(var(--divider-shift-y)) scaleY(0.75);
  }
}
@media (min-width: 1600px) {
  .ce_image_extended.dividerSVG svg,
  .ce_image_extended.dividerImage img {
    transform: scaleY(0.6);
  }
  .ce_image_extended.dividerSVG.is-topfill svg {
    transform: translateY(var(--divider-shift-y)) scaleY(0.6);
  }
}
@media (min-width: 1920px) {
  .ce_image_extended.dividerSVG svg,
  .ce_image_extended.dividerImage img {
    transform: scaleY(0.45);
  }
  .ce_image_extended.dividerSVG.is-topfill svg {
    transform: translateY(var(--divider-shift-y)) scaleY(0.45);
  }
}

/* ============================================================
   Form-Submit-Buttons an Theme-Buttons („Zimmer finden" o.ä.) angleichen
   ----------------------------------------------------------------
   Hintergrund: Theme rendert <input type="submit" class="submit"> mit
   background: var(--accentColor) — die Variable wird aber im Layout-CSS
   (7_*.css aus Backend) auf das Pastellblau #E5F5F8 gesetzt → Button
   praktisch unsichtbar (weißer Text auf hellblau). Hier hart auf den
   gleichen Look wie .ce_hyperlink > a.hyperlink_txt überschreiben.
   ============================================================ */
input.submit,
button.submit {
    background: linear-gradient(180deg, #6FB5C2 0%, #355881 100%) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 12px 32px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    height: auto !important;
    min-width: 140px;
    text-decoration: none !important;
    transition: opacity 0.2s ease, transform 0.2s ease;
    cursor: pointer;
}
input.submit:hover,
button.submit:hover,
input.submit:focus-visible,
button.submit:focus-visible {
    opacity: 0.9;
    text-decoration: none !important;
    transform: translateY(-1px);
}

/* ============================================================
   Kontakt-Icons (.contactIcon) — Telefon / E-Mail
   ----------------------------------------------------------------
   Theme rendert die Iconbox-Glyphe als Kreis mit BG = var(--accentColor)
   (durch das Backend-Layout aktuell #E5F5F8). Soll laut Figma stattdessen
   ein dunkelblauer Kreis (#355881) mit weißem Icon sein, Text rechts
   daneben in Brand-Dunkelblau.
   ============================================================ */
.contactIcon .ce_iconbox_inside {
    display: flex !important;
    align-items: center !important;
    gap: 18px;
}
.contactIcon .ce_iconbox_icon {
    flex: 0 0 auto !important;
    width: auto !important;
    height: auto !important;
}
.contactIcon .ce_iconbox_icon a {
    display: inline-block;
    line-height: 0;
}
.contactIcon .ce_iconbox_icon i {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 50px !important;
    height: 50px !important;
    background: #355881 !important;
    color: #FFFFFF !important;
    border-radius: 50% !important;
    font-size: 22px !important;
    line-height: 1 !important;
}
.contactIcon .ce_iconbox_cwrapper {
    color: #355881 !important;
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.3;
    flex: 1 1 auto;
    min-width: 0;
}
.contactIcon .ce_iconbox_cwrapper a {
    color: inherit !important;
    text-decoration: none !important;
}
.contactIcon .ce_iconbox_cwrapper a:hover {
    text-decoration: underline !important;
}
/* Theme rendert an .ce_iconbox .link::before einen FontAwesome-Chevron
   (\f105). Im Kontakt-Icon nicht erwünscht — Hover-Verhalten bleibt. */
.contactIcon .ce_iconbox_cwrapper a.link::before,
.contactIcon a.link::before {
    content: none !important;
    display: none !important;
    margin: 0 !important;
}
/* Vertikaler Abstand zwischen mehreren Kontakt-Icons untereinander */
.contactIcon + .contactIcon {
    margin-top: 24px;
}

/* =========================================================================
   Hauptnavigation — Inter SemiBold 24/90% / -4.25%
   ========================================================================= */
.mod_navigation.mainmenu .mainmenu_link,
.mod_navigation.mainmenu .mainmenu_link span {
    font-family: 'Inter', -apple-system, 'system-ui', 'Segoe UI', Roboto, sans-serif !important;
    font-weight: 600 !important;
    font-style: normal;
    font-size: 24px !important;
    line-height: 0.9 !important;
    letter-spacing: -0.0425em !important;
}

/* Theme-Default: Underline-Animation auf Top-Level + Submenü entfernen */
.mod_navigation.mainmenu .mainmenu_link > span,
.mod_navigation.mainmenu .mainmenu_link:hover > span,
.mod_navigation.mainmenu .mainmenu_link.active > span,
.mod_navigation.mainmenu .mainmenu_link.trail > span {
    border-bottom: 0 none !important;
    text-decoration: none !important;
}
.mod_navigation.mainmenu .mainmenu_link,
.mod_navigation.mainmenu .mainmenu_link:hover {
    text-decoration: none !important;
}
/* Theme nutzt span::before als animierten 1px-Underline → komplett unterdrücken */
.mod_navigation.mainmenu .mainmenu_link > span::before,
.mod_navigation.mainmenu .mainmenu_link > span::after {
    content: none !important;
    display: none !important;
    height: 0 !important;
    width: 0 !important;
    background: transparent !important;
}

/* Submenü gleiche Schrift */
.mod_navigation.mainmenu .vlist.level_2 .mainmenu_link,
.mod_navigation.mainmenu .vlist.level_2 .mainmenu_link span,
.mod_navigation.mainmenu ul ul a,
.mod_navigation.mainmenu ul ul a span {
    font-size: 24px !important;
    font-weight: 600 !important;
    line-height: 0.9 !important;
    letter-spacing: -0.0425em !important;
}

/* Submenü: Items als Block mit definiertem Padding/Gap (Figma-Spec) */
.mod_navigation.mainmenu ul ul {
    margin-top: 56px !important;
}

/* Hover-Brücke: unsichtbare Hit-Zone unter dem Trigger,
   damit der 56-px-Abstand zum Submenü :hover nicht abreißen lässt */
.mod_navigation.mainmenu .mlist.submenu {
    position: relative;
}
.mod_navigation.mainmenu .mlist.submenu > a.a-level_1::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 56px;
    z-index: 1;
}
.mod_navigation.mainmenu .vlist.level_2 > li {
    margin: 0;
    padding: 0;
    border-left: 3px solid transparent;
    transition: background-color 120ms ease, border-color 120ms ease;
}
.mod_navigation.mainmenu .vlist.level_2 > li + li {
    margin-top: 10px;
}
.mod_navigation.mainmenu .vlist.level_2 > li > a.mainmenu_link {
    display: block;
    padding: 18px 20px !important;
}

/* Hover: linker Cyan-Balken */
.mod_navigation.mainmenu .vlist.level_2 > li:hover {
    border-left-color: #52CFE5;
}

/* Active/Trail: hellblauer Hintergrund (#E5F5F8) */
.mod_navigation.mainmenu .vlist.level_2 > li.active,
.mod_navigation.mainmenu .vlist.level_2 > li.trail,
.mod_navigation.mainmenu .vlist.level_2 > li.mm-selected {
    background-color: #E5F5F8;
}

/* Active/Trail-Submenü: Theme setzt die Textfarbe ebenfalls auf #E5F5F8 →
   Text wird auf dem hellblauen Hintergrund unsichtbar. Standardfarbe wiederherstellen. */
.mod_navigation.mainmenu .vlist.level_2 > li.active > a.mainmenu_link,
.mod_navigation.mainmenu .vlist.level_2 > li.active > a.mainmenu_link > span,
.mod_navigation.mainmenu .vlist.level_2 > li.trail > a.mainmenu_link,
.mod_navigation.mainmenu .vlist.level_2 > li.trail > a.mainmenu_link > span,
.mod_navigation.mainmenu .vlist.level_2 > li.mm-selected > a.mainmenu_link,
.mod_navigation.mainmenu .vlist.level_2 > li.mm-selected > a.mainmenu_link > span {
    color: #355881 !important;
}

/* =========================================================================
   Hero-Container — einheitliche 80vw-Box ab Viewport < 980px
   Gilt für Startseite (Revolution Slider Captions) UND Monteurzimmer-
   Hero (Headline). Bricht den Slider-Caption-Container aus der RS-Stage-
   Logik heraus und behandelt ihn wie einen normalen zentrierten Block.
   ========================================================================= */
@media (max-width: 979px) {
    /* DOM-Struktur im <li.slide>:
       1=slotholder, 2=image-divider-wrap (Wellen),
       3=Headline-wrap, 4=Subtitle-wrap, 5=Button-wrap.
       Die Caption sitzt unter parallax-wrap > loop-wrap > mask-wrap. */

    /* RS skaliert die Stage proportional (~0.625×vw). Bei vw=320 ergibt
       das nur 200px Höhe — reicht physikalisch nicht für Subtitle (2-3
       Zeilen) + Headline + Button + Wellen-Divider. Min-Höhe erzwingen.
       Greift auf jedem Slider (Startseite + Monteurzimmer + andere). */
    .banner.tp-banner,
    .tp-revslider-mainul,
    .tp-revslider-mainul > li.slide {
        min-height: 300px !important;
    }

    /* Horizontaler Reset: Text- und Button-Wraps (NICHT Divider) auf
       volle Slide-Breite setzen, damit die Caption darin per left:50%
       relativ zum Slide zentriert. :has() schließt .dividerSlider aus,
       deshalb seitenunabhängig — Slot-Indizes variieren pro Slide.
       .bold-Filter schließt versteckte SEO-Captions aus (kleine font-size,
       die Stage soll sie nicht visuell rendern). */
    .slide > .tp-parallax-wrap:has(.ce_revolutionslider_text.tp-caption.bold),
    .slide > .tp-parallax-wrap:has(.ce_revolutionslider_hyperlink.tp-caption),
    .slide > .tp-parallax-wrap:has(.ce_revolutionslider_text.tp-caption.bold) > .tp-loop-wrap,
    .slide > .tp-parallax-wrap:has(.ce_revolutionslider_hyperlink.tp-caption) > .tp-loop-wrap,
    .slide > .tp-parallax-wrap:has(.ce_revolutionslider_text.tp-caption.bold) .tp-mask-wrap,
    .slide > .tp-parallax-wrap:has(.ce_revolutionslider_hyperlink.tp-caption) .tp-mask-wrap {
        left: 0 !important;
        transform: none !important;
        width: 100% !important;
    }

    /* Vertikale Position pro Caption-Slot setzen.
       Subtitle ganz oben, Headline mittig, Button bottom-anchored damit
       er sich am Wellen-Divider orientiert (Divider-Höhe ⋅ vw). */
    .article_1 .slide > .tp-parallax-wrap:nth-of-type(3) {
        top: 30% !important;  /* Headline */
    }
    .article_1 .slide > .tp-parallax-wrap:nth-of-type(4) {
        /* Topline-Anchor: Wrap-Top liegt 16px über der Headline-Top-Linie.
           In Kombination mit translate(_, -100%) auf der Caption (siehe
           unten) hängt die Caption mit ihrer Unterkante 16px über der
           Headline — unabhängig von der Topline-Höhe (1 oder 2 Zeilen). */
        top: calc(30% - 16px) !important;
    }
    .article_1 .slide > .tp-parallax-wrap:nth-of-type(4) .ce_revolutionslider_text.tp-caption {
        /* Override des allgemeinen translate(-50%, 0) — Topline hängt
           bottom-anchored, damit der Gap zur Headline konstant bleibt. */
        transform: translate(-50%, -100%) !important;
    }
    .article_1 .slide > .tp-parallax-wrap:nth-of-type(5) {
        top: 58% !important;  /* Button \u00fcber Wellen-Divider (parallax-wrap h=0,
                                 deshalb top= auf wrap-Top, Button extends down) */
    }

    /* Captions selbst: 80vw-Box, zentriert, Text wrappt.
       .bold-Filter schließt versteckte SEO-Captions aus, sonst werden sie
       durch den white-space:normal-Override sichtbar überdimensioniert. */
    .ce_revolutionslider_text.tp-caption.bold,
    .ce_revolutionslider_hyperlink.tp-caption {
        position: absolute !important;
        white-space: normal !important;
        width: 80vw !important;
        max-width: 80vw !important;
        left: 50% !important;
        transform: translate(-50%, 0) !important;
        text-align: center !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    /* Button-Layer: feste min-width aus RS (175px) erlauben kleiner zu
       werden, Block schrumpft auf Buttoninhalt */
    .ce_revolutionslider_hyperlink.tp-caption {
        min-width: 0 !important;
        width: auto !important;
    }
}

/* Home-Slider Topline (Slot 4, „Genießen Sie eine entspannte Auszeit ...")
   smooth skalieren statt zu springen. RS responsiveLevels switchen sonst
   zwischen ~12px und ~24px je nach Stage-Grid-Level (Sprung bei vw≈781).
   Min 12px, damit der Text bei vw≤700 in 80vw nicht auf 2 Zeilen wrappt
   (sonst Kollision mit Headline). */
.my_revolutionslider_1 .slide > .tp-parallax-wrap:nth-of-type(4) .ce_revolutionslider_text.tp-caption {
    font-size: clamp(12px, 1.5vw, 22px) !important;
    line-height: 1.5 !important;
}

/* Home-Slider Desktop-Schmal (980–1459): RS-Default platziert den Button
   so eng unter der Headline, dass er optisch klebt (Default-Gap −12 bei
   vw=980 bis +49 bei vw=1459). Mobile-Block (≤979) hat Gap ≈34.
   Linear interpolierter Zusatz-margin: 50px @ vw=980 → 0px @ vw=1459.
   Resultierender Gesamt-Gap durchgehend ≈33–49 (kein Sprung beim Übergang
   zu vw≥1460, wo RS-Default selbst genug Luft hat). */
@media (min-width: 980px) and (max-width: 1459px) {
    .my_revolutionslider_1 .slide > .tp-parallax-wrap:has(.ce_revolutionslider_hyperlink.tp-caption) {
        margin-top: calc(50px - (100vw - 980px) / 9.58) !important;
    }
}

/* Monteurzimmer-Slider: Layout in einen 1380px-Container einrasten.
   Bis vw=1460 ist der Container 100vw - 80px (40px Mindestabstand jeder Seite).
   Ab vw=1460 ist der Container konstant 1380px breit, zentriert — d.h. die
   Inhalte wachsen NICHT mit dem Viewport mit, sondern bleiben in der Position
   aus dem 1460-Referenz-Screenshot (bündig mit der dortigen 40px-Position).
   Home-Slider (.my_revolutionslider_1) bleibt unangetastet. */
@media (min-width: 980px) {
    .my_revolutionslider_529 .slide > .tp-parallax-wrap:has(.ce_revolutionslider_text.tp-caption.bold) {
        left: 0 !important;
        margin-left: max(40px, calc((100vw - 1380px) / 2)) !important;
    }
}

@media (min-width: 1460px) {
    /* Rechte Info-Liste: wrap + loop + mask auf volle Slide-Breite,
       Caption darin per right:40 am rechten Viewport-Rand ankern.
       Wrap mit width:0 ohne diesen Reset würde Caption nach rechts
       aus dem Viewport hinausfließen lassen. */
    .my_revolutionslider_529 .slide > .tp-parallax-wrap:has(.ce_revolutionslider_text.tp-caption:not(.bold)),
    .my_revolutionslider_529 .slide > .tp-parallax-wrap:has(.ce_revolutionslider_text.tp-caption:not(.bold)) > .tp-loop-wrap,
    .my_revolutionslider_529 .slide > .tp-parallax-wrap:has(.ce_revolutionslider_text.tp-caption:not(.bold)) .tp-mask-wrap {
        left: 0 !important;
        right: auto !important;
        width: 100vw !important;
        transform: none !important;
        margin: 0 !important;
    }
    .my_revolutionslider_529 .slide .ce_revolutionslider_text.tp-caption:not(.bold) {
        position: absolute !important;
        left: auto !important;
        right: max(40px, calc((100vw - 1380px) / 2)) !important;
        top: 0 !important;
        width: auto !important;
    }
}

@media (max-width: 1459px) {
    /* Rechte Info-Liste unterhalb des Freeze-Breakpoints komplett ausblenden,
       sonst Kollision mit der bold Headline (sowohl im 980\u20131459 Desktop-
       Schmalbereich als auch im Mobile-/Tablet-Bereich 763\u2013979). */
    .my_revolutionslider_529 .slide > .tp-parallax-wrap:has(.ce_revolutionslider_text.tp-caption:not(.bold)) {
        display: none !important;
    }
}

/* Pizza-Bild (custom_grid_497): kräftiger Hover-Effekt
   Pizza wächst deutlich und überlappt das Pizzawagen-Foto rechts. */
.custom_grid_497 .ce_image:has(img[src*="/pizza/pizza."]),
.custom_grid_497 .ce_image:has(img[src*="/pizza/pizza."]) .image_container {
    overflow: visible !important;
}
.custom_grid_497 .ce_image img[src*="/pizza/pizza."] {
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    transform-origin: center center;
    position: relative;
    z-index: 2;
    will-change: transform;
}
.custom_grid_497 .ce_image img[src*="/pizza/pizza."]:hover {
    transform: rotate(8deg) scale(1.4);
    z-index: 5;
}
@media (prefers-reduced-motion: reduce) {
    .custom_grid_497 .ce_image img[src*="/pizza/pizza."],
    .custom_grid_497 .ce_image img[src*="/pizza/pizza."]:hover {
        transition: none;
        transform: none;
    }
}

/* Divider-Wellenbilder: Theme stetzt unter bestimmten Bedingungen ein
   transform: matrix(1,0,0,0.75,0,0) (= scaleY 0.75) auf das <img>, das
   das Bild vertikal staucht. Höhe folgt korrekt height: auto, aber die
   Transformation verzerrt die Welle. Hart neutralisieren. */
.ce_image_extended.dividerImage img,
.ce_image_extended.dividerSVG img {
    transform: none !important;
    scale: none !important;
}


/* ============================================================
   TW design fixes (2026-06-19) — contrast & layout
   ============================================================ */

/* (1) Teaser text over photo ("Bei uns finden Sie ..." flower image):
   add a dark overlay between photo and text + white text for legibility.
   Scoped to elements tagged .tw-overlay-text only. */
.tw-overlay-text.ce_bgimage{position:relative;}
.tw-overlay-text.ce_bgimage::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
  background:linear-gradient(180deg,rgba(15,25,40,.30),rgba(15,25,40,.52));}
.tw-overlay-text .ce_bgimage-inside{position:relative;z-index:10;}
.tw-overlay-text .ce_text,.tw-overlay-text .ce_text p,
.tw-overlay-text .ce_text h2,.tw-overlay-text .ce_text h3{
  color:#fff !important;text-shadow:0 1px 10px rgba(0,0,0,.5);}

/* (3) Testimonial slider (style1): non-active speech bubbles had no text
   color set and inherited a dark colour -> illegible on the navy section.
   Force readable white on all slides; ensure full opacity. */
.ce_testimonial_slider[data-style="style1"] .swiper-content .text,
.ce_testimonial_slider[data-style="style1"] .swiper-content .text p,
.ce_testimonial_slider[data-style="style1"] .swiper-slide-active .swiper-content .text,
.ce_testimonial_slider[data-style="style1"] .swiper-slide-active .swiper-content .text p{
  color:#fff !important;}
.ce_testimonial_slider[data-style="style1"] .swiper-slide .swiper-content{opacity:1 !important;}

/* (Weg 2) Info section moved OUT of the hero slider into a normal,
   responsive card grid below the hero. Works on desktop & mobile. */
.tw-info-section{padding:48px 0 8px;}
.tw-info-section h2{text-align:center;margin:0 0 1em;}
.tw-info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:28px 44px;max-width:1120px;margin:0 auto;}
.tw-info-section .tw-info-card h3{color:#355881;font-size:1.8rem;font-weight:600 !important;line-height:1.25;margin:0 0 .5em;}
.tw-info-grid .tw-info-card p{margin:0 0 .55em;line-height:1.5;}
.tw-info-grid .tw-info-card:last-child p{margin-bottom:0;}

/* ===== CORRECTIONS (2026-06-20) ===== */
/* accentColor is a very pale cyan (#E5F5F8) -> white text on it is invisible. */

/* Testimonials style1: ACTIVE bubble has pale accent bg -> dark text;
   NON-active bubble is transparent on the navy section -> white text; names -> white. */
.ce_testimonial_slider[data-style="style1"] .swiper-content .text,
.ce_testimonial_slider[data-style="style1"] .swiper-content .text p{color:#ffffff !important;}
.ce_testimonial_slider[data-style="style1"] .swiper-slide-active .swiper-content .text,
.ce_testimonial_slider[data-style="style1"] .swiper-slide-active .swiper-content .text p{color:#355881 !important;}
.ce_testimonial_slider[data-style="style1"] .swiper-content .name{color:#ffffff !important;}

/* Contact CTA: pale button + white text in a 15% column (clipped "Conta…").
   -> readable navy button sized to its content; stack on mobile. */
.tw-group-cta{grid-template-columns:1fr auto !important;align-items:center !important;column-gap:30px;}
@media (max-width:767px){.tw-group-cta{grid-template-columns:1fr !important;}}
.tw-group-cta .ce_hyperlink a{background:#355881 !important;border-color:#355881 !important;
  color:#ffffff !important;white-space:nowrap;min-width:0;}

/* (FLOWER TEASER CORRECTION 2026-06-20) The theme places a pale translucent box
   behind this text -> white text was unreadable. Replace with a solid navy pill. */
.tw-overlay-text.ce_bgimage::after{display:none !important;}
.tw-overlay-text .ce_bgimage-inside{text-align:center !important;}
.tw-overlay-text .ce_text{display:inline-block !important;background:#355881 !important;
  padding:18px 30px !important;border-radius:12px !important;max-width:92% !important;
  box-shadow:0 6px 24px rgba(0,0,0,.28);}
.tw-overlay-text .ce_text,.tw-overlay-text .ce_text *{color:#ffffff !important;text-shadow:none !important;}


/* (TESTIMONIALS match DE 2026-06-20) EN/NL active bubble had a pale box; DE shows
   plain white-on-navy on all slides. Make the active bubble identical to the rest. */
.ce_testimonial_slider[data-style="style1"] .swiper-slide-active .swiper-content .text{
  background:transparent !important;box-shadow:none !important;}
.ce_testimonial_slider[data-style="style1"] .swiper-slide-active .swiper-content .text,
.ce_testimonial_slider[data-style="style1"] .swiper-slide-active .swiper-content .text p{color:#ffffff !important;}
.ce_testimonial_slider[data-style="style1"] .swiper-slide-active .text .bottom-arrow{opacity:0 !important;}


/* (TESTIMONIALS nav cleanup 2026-06-20) hide the prev/next arrow buttons on all
   testimonial sliders for a clean, identical look across DE/EN/NL (swipe + dots stay). */
.ce_testimonial_slider .swiper-buttons,
.ce_testimonial_slider .swiper-button-prev,
.ce_testimonial_slider .swiper-button-next{display:none !important;}



/* (Mobile language switcher 2026-06-20) Show DE/EN/NL switcher at the bottom of the
   open mobile menu. ThemeDesigner had '#mmenu .mod_langswitcher{display:none}'. */
#mmenu #mmenu_bottom{position:static !important;bottom:auto !important;left:auto !important;right:auto !important;
  padding:18px 20px 40px !important;border-top:1px solid #e6eaee;margin-top:8px;overflow:visible;}
#mmenu #mmenu_bottom .mod_langswitcher{display:block !important;opacity:0;transform:translateY(-20px);transition:opacity .6s ease, transform .6s ease;
  position:static !important;text-align:center;font-size:1.05rem;float:none !important;margin:0 !important;top:auto !important;right:auto !important;}
 body.mmenu_open #mmenu #mmenu_bottom .mod_langswitcher{opacity:1;transform:none;transition-delay:.9s;}
#mmenu #mmenu_bottom .mod_langswitcher_inside{position:static !important;}
#mmenu #mmenu_bottom .mod_langswitcher_inside>span,
#mmenu #mmenu_bottom .mod_langswitcher_inside>img{display:none !important;}
#mmenu #mmenu_bottom .mod_langswitcher ul{display:flex !important;justify-content:center;gap:26px;
  position:static !important;border:0 !important;background:none !important;width:auto !important;margin:0 !important;padding:0 !important;list-style:none;box-shadow:none !important;}
#mmenu #mmenu_bottom .mod_langswitcher ul li{display:inline-flex !important;margin:0 !important;}
#mmenu #mmenu_bottom .mod_langswitcher ul li a{display:inline-flex !important;align-items:center;gap:8px;
  border:0 !important;color:#355881;text-decoration:none;padding:6px 4px;}
#mmenu #mmenu_bottom .mod_langswitcher ul li a span{display:inline !important;font-weight:500;}
#mmenu #mmenu_bottom .mod_langswitcher ul li.active a{font-weight:800;}
#mmenu #mmenu_bottom .mod_langswitcher ul li a img{display:inline-block !important;
  width:26px !important;height:18px !important;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.08);}




/* Legal pages darker text (2026-06-20): site-wide body color is brand-navy #355881 (~7:1); on the dense legal pages the phone numbers were hard to read. Darken legal-page text for legibility; brand pages untouched. */
body.page_10 .ce_text, body.page_11 .ce_text, body.page_12 .ce_text, body.page_34 .ce_text, body.page_35 .ce_text, body.page_36 .ce_text, body.page_51 .ce_text, body.page_52 .ce_text, body.page_53 .ce_text, body.page_68 .ce_text, body.page_69 .ce_text, body.page_70 .ce_text,
body.page_10 .ce_text p, body.page_10 .ce_text li, body.page_10 .ce_text strong, body.page_10 .ce_text td, body.page_11 .ce_text p, body.page_11 .ce_text li, body.page_11 .ce_text strong, body.page_11 .ce_text td, body.page_12 .ce_text p, body.page_12 .ce_text li, body.page_12 .ce_text strong, body.page_12 .ce_text td, body.page_34 .ce_text p, body.page_34 .ce_text li, body.page_34 .ce_text strong, body.page_34 .ce_text td, body.page_35 .ce_text p, body.page_35 .ce_text li, body.page_35 .ce_text strong, body.page_35 .ce_text td, body.page_36 .ce_text p, body.page_36 .ce_text li, body.page_36 .ce_text strong, body.page_36 .ce_text td, body.page_51 .ce_text p, body.page_51 .ce_text li, body.page_51 .ce_text strong, body.page_51 .ce_text td, body.page_52 .ce_text p, body.page_52 .ce_text li, body.page_52 .ce_text strong, body.page_52 .ce_text td, body.page_53 .ce_text p, body.page_53 .ce_text li, body.page_53 .ce_text strong, body.page_53 .ce_text td, body.page_68 .ce_text p, body.page_68 .ce_text li, body.page_68 .ce_text strong, body.page_68 .ce_text td, body.page_69 .ce_text p, body.page_69 .ce_text li, body.page_69 .ce_text strong, body.page_69 .ce_text td, body.page_70 .ce_text p, body.page_70 .ce_text li, body.page_70 .ce_text strong, body.page_70 .ce_text td{color:#16263a !important;}


/* (2026-06-20) tauSides-Seile auf den 'Gut zu wissen'-Info-Artikeln ausblenden — sie ueberlappten die Info-Karten (Hotel + Unsere-Zimmer, alle Sprachen). */
.tauSides:has(.tw-info-section)::before,
.tauSides:has(.tw-info-section)::after{display:none !important;}


/* (2026-06-20) Desktop language switcher hover — sanfte Einblend-Animation + Dropdown direkt unter den Button (vorher kein Fade + ~44px Luecke darunter). */
@media(min-width:769px){
  #header .mod_langswitcher_inside{position:relative;}
  #header .mod_langswitcher_inside ul{
    display:block !important;
    position:absolute !important; top:100% !important; margin-top:6px !important; bottom:auto !important;
    opacity:0; visibility:hidden; pointer-events:none; transform:translateY(8px);
    transition:opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
  }
  #header .mod_langswitcher_inside:hover ul{
    opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0);
    transition:opacity .22s ease, transform .22s ease;
  }
}


/* (2026-06-21) Footer-Bodenzeile gruppieren: Nav als eigene zentrierte Zeile, darunter Logos zentriert in Reihenfolge Pizza -> Tauwerk -> Facebook (vorher ueber volle Breite "gespreizt"). */
#footer .inside .autogrid_row{display:flex !important;flex-wrap:wrap;justify-content:center;align-items:center;gap:1rem 2.6rem;}
#footer .inside .autogrid_row > .column{width:auto !important;max-width:none !important;flex:0 0 auto;margin:0 !important;}
#footer .inside .autogrid_row > .column:has(.mod_customnav){order:1;flex:0 0 100% !important;margin-bottom:.6rem !important;}
#footer .column:has(.mod_customnav) .vlist{display:flex !important;flex-wrap:wrap;justify-content:center;gap:.3rem 1.5rem;}
#footer .column:has(.mod_customnav) .mlist{float:none !important;margin:0 !important;}
#footer .column:has(a[href*="holzofen-pizza"]){order:2;}
#footer .column:has(img[src*="hotel-tauwerk-logo"]){order:3;}
#footer .column:has(.fa-facebook-square){order:4;}
#footer .column .ce_iconbox .fa-facebook-square{font-size:2.3rem;}
#footer .column .ce_image img,#footer .column .tw-home-logo a{cursor:pointer;}


/* (2026-06-21) Sprachswitcher: Hover-Bruecke ueber die Luecke Button<->Dropdown, damit das Menue beim Ruebergehen nicht verschwindet + laengere Schliessverzoegerung. */
@media(min-width:769px){
  #header .mod_langswitcher_inside::after{content:'';position:absolute;left:-14px;right:-14px;top:100%;height:20px;}
  #header .mod_langswitcher_inside ul{transition:opacity .22s ease, transform .22s ease, visibility 0s linear .5s !important;}
  #header .mod_langswitcher_inside:hover ul{transition:opacity .2s ease, transform .2s ease !important;}
}

/* === CLS-Fix: RevSlider-Hoehe vorab reservieren === */
.tp-banner.my_revolutionslider_1{height:62.5vw !important;max-height:1000px;}
@media(max-width:480px){.tp-banner.my_revolutionslider_1{height:300px !important;}}

/* === LCP-Fix: Hero-Bild sofort als Container-Hintergrund (paintet vor RevSlider-JS) === */
body.home #article-1{background-image:url(/files/titelbilder/Tauwerk-startseite.webp);background-size:cover;background-position:center center;background-repeat:no-repeat;background-color:#cfe3ea;}

/* === Kontaktseite: Formular entfernt → leere Spalte weg, Infos zentriert === */
body.page_6 .autogrid_row.gutter_l .col_8,
body.page_31 .autogrid_row.gutter_l .col_8,
body.page_48 .autogrid_row.gutter_l .col_8,
body.page_65 .autogrid_row.gutter_l .col_8{display:none !important;}
body.page_6 .autogrid_row.gutter_l .col_4,
body.page_31 .autogrid_row.gutter_l .col_4,
body.page_48 .autogrid_row.gutter_l .col_4,
body.page_65 .autogrid_row.gutter_l .col_4{flex:0 0 100% !important;max-width:680px !important;margin:0 auto !important;text-align:center !important;}

/* Zimmer-Ausstattung (roomFeatures): auf Mobil das Hintergrund-Zimmerfoto durch einheitliches Blau ersetzen
   -> verhindert die haesslichen Bild-Splitter an den Raendern beim gestapelten Layout. Desktop (>=768px) behaelt das Foto. */
@media (max-width:767px){
  .ce_bgimage.roomFeatures .ce_bgimage-image{
    background-image:none !important;
    background-color:rgb(53,88,129) !important;
  }
}

/* OpenStreetMap-Consent-Hinweis: knallrot (255,0,0, Entwickler-Default) -> neutrales, freundliches Theme-Hellblau */
.ce_openstreetmap .privacy,
p#privacy_info_463.privacy,
p.privacy{
  background:#eef2f6 !important;
  color:#35587f !important;
  border:1px solid #d4dde6 !important;
  border-radius:24px !important;
  padding:30px 24px !important;
  font-size:15px !important;
  line-height:1.55 !important;
  display:flex !important;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.ce_openstreetmap .privacy a,
p.privacy a{ color:#35587f !important; text-decoration:underline; font-weight:600; }

/* Korrektur: privacy-Hinweis als zentrierter Fliesstext, nicht flex */
.ce_openstreetmap p.privacy, p#privacy_info_463.privacy, p.privacy{ display:block !important; }
p.privacy a{ display:inline !important; white-space:normal; }

/* Datenschutz-Wiederoeffnen-Button (Fingerabdruck) von unten-LINKS nach unten-RECHTS (ueber den Nach-oben-Pfeil) verschieben,
   damit er den linksbuendigen Text (z.B. Telefonnummer im Impressum) nicht mehr verdeckt. */
#privacy_optout_link{
  left:auto !important;
  right:15px !important;
  bottom:100px !important;
}