/* for standard css */
.ks--tiny-slider--inner {
    display: flex;
    justify-content: center;
}

/* ---------- custom css ---------- */
/* ==========================================================
   HEADER  (nutzt die vorhandenen Variablen)
   ========================================================== */
:root{
  --hdr-h:5rem;           /* Höhe der Kopfzeile */
  --hdr-logo:8.75rem;     /* Logobreite */
  --hdr-curve:0.5257;     /* Lage der Kurvenenden im Logo (92/175) */
}
html{scroll-padding-top:5.5rem}
#custom-mobilenav{display:none!important}

#header{
  position:sticky;top:0;z-index:var(--z-index-sticky);
  height:auto;min-height:0;overflow:visible;margin:0;padding:0;
  background:var(--header-color-background);color:var(--header-color-text);
  box-shadow:var(--shadow-sm);
}
#header .inside{
  position:relative;max-width:var(--container-max-width--wide);
  margin:0 auto;padding:0 var(--spacing-component);
}
#header .topbar{
  display:grid;grid-template-columns:1fr auto;align-items:center;
  column-gap:var(--base-spacing-unit--lg);
  min-height:var(--hdr-h);margin:0;padding:0;
}
#header .topbar-inner{display:contents}

/* ---------- Kontakt (Telefon / Adresse) ---------- */
#header .ctabar{grid-column:2;grid-row:1;width:auto;margin:0;padding:0;background:transparent}
#header .ctabar__inner,
#header .ctabar__nav{
  display:flex;align-items:center;gap:var(--base-spacing-unit--lg);
  width:auto;max-width:none;margin:0;padding:0;background:transparent;
}
#header .ctabar__nav > a{order:1}
#header .ctabar__nav .adress{order:2}
#header .ctabar__nav a,
#header .ctabar__nav .adress{
  display:inline-flex;align-items:center;gap:var(--base-spacing-unit--sm);
  margin:0;padding:0;
  color:var(--ctabar-color);
  font-size:var(--topnav-font-size);font-weight:var(--font-weight-semibold);
  line-height:1.5;text-align:left;text-decoration:none;white-space:nowrap;
}
#header .ctabar__nav i{flex:none;width:1.25em;text-align:center}
#header .ctabar__nav a:hover{
  color:var(--color-links-hover);
  text-decoration:underline;text-underline-offset:.25em;
}

/* ---------- Logo: Kurvenenden bündig mit Header-Unterkante ---------- */
#header .topbar-logo{
  position:absolute;z-index:2;
  left:var(--spacing-component);
  top:calc(var(--hdr-h) + 1px - var(--hdr-logo) * var(--hdr-curve)); /* 1px = Header-Border */
  width:var(--hdr-logo);margin:0;padding:0;
  background:transparent;overflow:hidden;
  border-radius:0 0 var(--base-border-radius--sm) var(--base-border-radius--sm);
}
#header .topbar-logo .ce_image,
#header .topbar-logo figure{margin:0;padding:0}
#header .topbar-logo a{display:block;line-height:0}
#header .topbar-logo img{display:block;width:100%;max-width:none;height:auto}
#header .topbar-logo a:focus-visible{
  outline:var(--focus-ring);outline-offset:calc(var(--focus-ring-width) * -1);
}

/* ---------- Hauptnavigation ---------- */
#header .topbar-nav--new{
  grid-column:1;grid-row:1;min-width:0;margin:0;background:transparent;
  padding:0 0 0 calc(var(--hdr-logo) + var(--base-spacing-unit--lg));
}
#header .topbar-nav--new nav{margin:0;padding:0}
#header .topbar-nav--new ul{
  display:flex;flex-wrap:nowrap;align-items:center;gap:.25rem;
  margin:0;padding:0;list-style:none;
}
#header .topbar-nav--new li{margin:0;padding:0;list-style:none}
#header .topbar-nav--new li a{
  display:block;white-space:nowrap;
  padding:.65rem clamp(.5rem,.9vw,.8rem);
  border-radius:var(--base-border-radius--sm);
  color:var(--topnav-color);background:var(--topnav-bgcolor);
  font-size:var(--topnav-font-size);font-weight:var(--topnav-font-weight);
  line-height:1.3;text-decoration:none;
  transition:color var(--transition-fast),background-color var(--transition-fast);
}
#header .topbar-nav--new li a:hover{
  color:var(--topnav-color-hover);background:var(--topnav-bgcolor-hover);
}
#header .topbar-nav--new li.active a,
#header .topbar-nav--new li a[aria-current]{color:var(--topnav-color-hover)}

/* ---------- Fokus ---------- */
#header a:focus-visible,
#header button:focus-visible{
  outline:var(--focus-ring);outline-offset:var(--focus-ring-offset);
}

/* Mobil-Elemente am Desktop aus */
#header .nav-contact,
#header .hdr-burger{display:none}

/* ---------- Skip-Link / Screenreader-Text ---------- */
.hdr-skip{
  position:absolute;left:var(--base-spacing-unit);top:-10rem;z-index:var(--z-index-toast);
  padding:.75rem 1.25rem;border-radius:var(--base-border-radius--sm);
  background:var(--color-brand2);color:var(--color-text-on-brand2);
  font-weight:var(--font-weight-bold);text-decoration:none;
}
.hdr-skip:focus{top:var(--base-spacing-unit)}
.sr-only-hdr{
  position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ---------- 75em–95em: Kontakt zweizeilig, linksbündig ---------- */
@media (min-width:75em) and (max-width:94.99em){
  #header .ctabar__nav{flex-direction:column;align-items:flex-start;gap:0}
  #header .ctabar__nav a,
  #header .ctabar__nav .adress{font-size:var(--font-size-small)}
}

/* ---------- ab 95em: alles einzeilig wie in der Vorlage ---------- */
@media (min-width:95em){
  #header .inside{max-width:100rem}
}

/* ==========================================================
   MOBIL / TABLET  (unter 75em): Burger-Menü
   ========================================================== */
@media (max-width:74.99em){
  :root{--hdr-h:4.5rem;--hdr-logo:6.5rem}

  #header .topbar{
    display:flex;justify-content:flex-end;align-items:center;
    gap:var(--base-spacing-unit--sm);
  }

  /* Kontakt: Telefon und Adresse linksbündig untereinander */
  #header .ctabar__nav{flex-direction:column;align-items:flex-start;gap:0}
  #header .ctabar__nav a,
  #header .ctabar__nav .adress{font-size:var(--font-size-small)}

  /* Burger-Button */
  #header .hdr-burger{
    display:inline-flex;align-items:center;justify-content:center;
    width:2.75rem;height:2.75rem;padding:0;cursor:pointer;
    color:var(--color-brand);background:var(--color-page-background);
    border:var(--base-border-width) solid var(--color-brand);
    border-radius:var(--base-border-radius--md);
    transition:background-color var(--transition-fast),color var(--transition-fast);
  }
  #header .hdr-burger:hover,
  #header .hdr-burger[aria-expanded="true"]{
    background:var(--color-brand);color:var(--color-text-on-brand);
  }
  #header .hdr-burger__bars{
    position:relative;display:block;width:1.375rem;height:2px;
    background:currentColor;border-radius:2px;
  }
  #header .hdr-burger__bars::before,
  #header .hdr-burger__bars::after{
    content:"";position:absolute;left:0;width:100%;height:2px;
    background:currentColor;border-radius:2px;
    transition:transform var(--transition-base);
  }
  #header .hdr-burger__bars::before{transform:translateY(-7px)}
  #header .hdr-burger__bars::after{transform:translateY(7px)}
  #header .hdr-burger[aria-expanded="true"] .hdr-burger__bars{background:transparent}
  #header .hdr-burger[aria-expanded="true"] .hdr-burger__bars::before{transform:rotate(45deg)}
  #header .hdr-burger[aria-expanded="true"] .hdr-burger__bars::after{transform:rotate(-45deg)}

  /* Menüpanel */
  #header .topbar-nav--new{
    position:absolute;top:100%;left:0;right:0;grid-column:auto;
    max-height:calc(100dvh - var(--hdr-h));overflow-y:auto;
    padding:3.5rem var(--spacing-component) var(--spacing-component);
    background:var(--header-color-background);
    border-top:1px solid var(--color-gray-200);
    box-shadow:var(--shadow-lg);
    visibility:hidden;opacity:0;transform:translateY(-.5rem);
    transition:opacity var(--transition-base),transform var(--transition-base),
               visibility 0s linear var(--transition-duration);
  }
  #header .topbar-nav--new.is-open{
    visibility:visible;opacity:1;transform:none;transition-delay:0s;
  }
  #header .topbar-nav--new ul{flex-direction:column;align-items:stretch;gap:0}
  #header .topbar-nav--new li + li{border-top:1px solid var(--color-gray-200)}
  #header .topbar-nav--new li a{
    padding:1rem .5rem;font-size:var(--font-size-large);white-space:normal;
  }

  /* Kontakt im Menü: nur, was im Header fehlt */
  #header .nav-contact{
    display:none;flex-direction:column;align-items:flex-start;gap:.25rem;
    margin:var(--spacing-component) 0 0;
    padding:var(--spacing-component) .5rem 0;
    border-top:2px solid var(--color-brand);
    font-style:normal;font-weight:var(--font-weight-semibold);
  }
  #header .nav-contact a,
  #header .nav-contact span{
    display:inline-flex;align-items:center;gap:var(--base-spacing-unit--sm);
    padding:.5rem 0;color:var(--color-brand);text-decoration:none;
  }
  #header .nav-contact i{width:1.25em;text-align:center}
  #header .nav-contact .nav-contact__tel{display:none}
}

/* unter ca. 580 px: Adresse wandert ins Menü */
@media (max-width:35.99em){
  #header .ctabar__nav .adress{display:none}
  #header .nav-contact{display:flex}
}

/* unter ca. 420 px: Telefon nur als Icon, Nummer im Menü */
@media (max-width:25.99em){
  #header .ctabar__nav a{
    width:2.75rem;height:2.75rem;justify-content:center;
    font-size:0;border-radius:var(--base-border-radius--md);
  }
  #header .ctabar__nav a i{font-size:1.25rem;width:auto}
  #header .ctabar__nav a:hover{background:var(--color-brand-tint);text-decoration:none}
  #header .nav-contact .nav-contact__tel{display:inline-flex}
}

/* unter ca. 550 px: kleineres Logo */
@media (max-width:34.3125em){
  :root{--hdr-h:4rem;--hdr-logo:5.5rem}
}

@media (prefers-reduced-motion:reduce){
  #header *{transition-duration:.01ms!important;transition-delay:0s!important}
}


/* ==========================================================
   HERO  (#hero = Artikel mit dem Bild-Wrapper)
   Nutzt --hdr-logo / --hdr-curve aus dem Header-CSS
   ========================================================== */
#hero .centered-wrapper{
  min-height:clamp(32rem,70vh,42rem);
  align-items:center;
  color:var(--color-text--inverted);
}
#hero .centered-wrapper-background{
  background-size:cover;
  background-position:60% 50%;
}

/* Overlay: Contao setzt Farbe und Deckkraft inline, daher !important */
#hero .centered-wrapper .centered-wrapper__image-overlay{
  opacity:1!important;
  background-color:transparent!important;
  background-image:linear-gradient(90deg,
    rgba(var(--color-brand2-rgb),.90) 0%,
    rgba(var(--color-brand2-rgb),.74) 45%,
    rgba(var(--color-brand2-rgb),.30) 75%,
    rgba(var(--color-brand2-rgb),.05) 100%);
}

/* Inhalt: Abstand zum Logo, optisch mittig unterhalb des Logos */
#hero .centered-wrapper-inner{
  padding-top:calc(var(--hdr-logo) * (1 - var(--hdr-curve)) + var(--spacing-section));
  padding-bottom:var(--spacing-section);
  padding-left:var(--spacing-component);
  padding-right:var(--spacing-component);
}
#hero .ce_rsce_wrapper_plain_start{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:var(--base-spacing-unit);
  max-width:36rem;
}

/* Typografie */
#hero h1,
#hero h2,
#hero p{margin:0;color:var(--color-text--inverted)}
#hero h1{
  font-size:var(--font-size-h2);
  font-weight:var(--font-weight-bold);
  line-height:var(--headings__line-height);
  text-wrap:balance;
}
#hero .ce_text{
  display:flex;flex-direction:column;
  gap:var(--base-spacing-unit);
  margin:0;
}
#hero h2{
  font-size:var(--font-size-h5);
  font-weight:var(--font-weight-medium);
  line-height:var(--headings__line-height);
  opacity:.92;
}
#hero p{
  max-width:34em;
  font-size:var(--base-font-size);
  line-height:var(--base-line-height);
}

/* Buttons (untereinander; weitere Buttons rutschen automatisch nach) */
#hero .ce_rsce_button_variant{margin:0}
#hero .ce_text + .ce_rsce_button_variant{margin-top:var(--base-spacing-unit--sm)}
#hero .btn{
  display:inline-flex;align-items:center;min-height:2.75rem;
  padding:var(--btn-padding-y) var(--btn-padding-x);
  font-size:var(--btn-font-size);
}
#hero .btn--primary{
  background:var(--color-page-background);
  color:var(--color-brand);
  border:var(--base-border-width) solid var(--color-page-background);
  box-shadow:var(--shadow-lg);
}
#hero .btn--primary:hover,
#hero .btn--primary:focus-visible{
  background:var(--color-brand);
  color:var(--color-text-on-brand);
  border-color:var(--color-brand);
}
/* 2. Button: Outline */
#hero .btn:not(.btn--primary){
  background:transparent;
  color:var(--color-text--inverted);
  border:var(--base-border-width) solid var(--color-page-background);
}
#hero .btn:not(.btn--primary):hover,
#hero .btn:not(.btn--primary):focus-visible{
  background:var(--color-page-background);
  color:var(--color-brand2);
}
#hero .btn:focus-visible{
  outline:var(--focus-ring);
  outline-offset:var(--focus-ring-offset);
}

/* Mobil */
@media (max-width:47.9375em){
  #hero .centered-wrapper{min-height:clamp(30rem,85vh,40rem)}
  #hero .centered-wrapper .centered-wrapper__image-overlay{
    background-image:linear-gradient(180deg,
      rgba(var(--color-brand2-rgb),.80) 0%,
      rgba(var(--color-brand2-rgb),.70) 100%);
  }
}


/* ==========================================================
   INFO-LEISTE  (#infobar = Artikel unter dem Hero)
   ========================================================== */
#infobar .centered-wrapper{
  min-height:0;
  align-items:center;
  background-color:var(--color-brand);
  color:var(--color-text-on-brand);
}
#infobar .centered-wrapper-inner{
  display:grid;
  grid-template-columns:1fr;
  align-items:center;
  gap:var(--spacing-component);
  padding-top:var(--spacing-section--sm);
  padding-bottom:var(--spacing-section--sm);
  padding-left:var(--spacing-component);
  padding-right:var(--spacing-component);
}
#infobar .ce_html{margin:0;overflow:visible}

/* Button horizontal mittig */
#infobar .ce_rsce_button_variant{
  margin:0;
  justify-self:center;
  text-align:center;
}

/* ---------- Liste ---------- */
#infobar .infobar__list{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  margin:0;padding:0;
  list-style:none;
}
#infobar .infobar__item{
  display:flex;align-items:flex-start;
  gap:var(--base-spacing-unit);
  margin:0;
  padding:var(--base-spacing-unit) 0;
  border-top:1px solid rgba(var(--color-white-rgb),.25);
}
#infobar .infobar__item:first-child{border-top:0;padding-top:0}
#infobar .infobar__icon{
  flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  width:3rem;height:3rem;
  border-radius:var(--base-border-radius--pill);
  background:rgba(var(--color-white-rgb),.14);
  border:1px solid rgba(var(--color-white-rgb),.3);
  font-size:1.1rem;
}
#infobar .infobar__body{
  display:flex;flex-direction:column;
  margin:0;
  font-style:normal;
  line-height:1.45;
}
#infobar .infobar__label{
  margin-bottom:.2rem;
  font-size:var(--font-size-xsmall);
  font-weight:var(--font-weight-bold);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(var(--color-white-rgb),.9);
}
#infobar .infobar__text{
  font-size:var(--base-font-size);
  font-weight:var(--font-weight-semibold);
  color:var(--color-text-on-brand);
  text-decoration:none;
}
#infobar a.infobar__text:hover{
  text-decoration:underline;
  text-underline-offset:.2em;
}
#infobar a:focus-visible{
  outline:3px solid var(--color-page-background);
  outline-offset:var(--focus-ring-offset);
}

/* ---------- WhatsApp-Button ---------- */
#infobar .btn{
  display:inline-flex;align-items:center;
  gap:var(--base-spacing-unit--sm);
  min-height:2.75rem;
  padding:var(--btn-padding-y) var(--btn-padding-x);
}
#infobar .btn--primary{
  background:var(--color-page-background);
  color:var(--color-brand);
  border:var(--base-border-width) solid var(--color-page-background);
  box-shadow:var(--shadow-md);
}
#infobar .btn--primary:hover,
#infobar .btn--primary:focus-visible{
  background:var(--color-brand2);
  color:var(--color-text-on-brand2);
  border-color:var(--color-brand2);
}
#infobar .btn:focus-visible{
  outline:3px solid var(--color-page-background);
  outline-offset:var(--focus-ring-offset);
}
#infobar .btn__inner-icon{font-size:1.25em;line-height:1}

/* ---------- Tablet (ab 48em): 3 Spalten, Button darunter ---------- */
@media (min-width:48em){
  #infobar .infobar__list{
    grid-template-columns:repeat(3,1fr);
    column-gap:var(--spacing-component);
  }
  #infobar .infobar__item{padding:0;border-top:0}
  #infobar .infobar__item + .infobar__item{
    padding-left:var(--spacing-component);
    border-left:1px solid rgba(var(--color-white-rgb),.25);
  }
}

/* ---------- Desktop (ab 85em): Liste und Button in einer Zeile ---------- */
@media (min-width:85em){
  #infobar .centered-wrapper-inner{
    grid-template-columns:1fr auto;
    column-gap:var(--spacing-component);
  }
  #infobar .infobar__list{
    grid-template-columns:repeat(3,max-content);
    justify-content:space-between;
    column-gap:0;
  }
  #infobar .infobar__item{padding-right:var(--base-spacing-unit)}
  #infobar .infobar__item:last-child{padding-right:0}
  #infobar .infobar__item + .infobar__item{padding-left:var(--base-spacing-unit)}
  #infobar .infobar__text{white-space:nowrap}
}


/* ==========================================================
   Initiale (Großbuchstabe) in allen .intro-Texten abschalten
   ========================================================== */
.intro p:first-of-type::first-letter{
  float:none;
  padding:0;
  font-size:inherit;
  line-height:inherit;
  font-family:inherit;
  font-weight:inherit;
}

/* ==========================================================
   VIDEO + TEXT  (#video-text)
   ========================================================== */
#video-text .wrapper-grid__inner{align-items:start}
#video-text .content-youtube,
#video-text .ce_text.intro{align-self:start}

#video-text .ce_text.intro h2{
  margin:0 0 var(--base-spacing-unit);
  padding:0;
  font-size:var(--font-size-h3);
  line-height:var(--headings__line-height);
}

/* Oberkante der Versalien bündig mit der Oberkante des Videos */
@supports (text-box:trim-start cap){
  #video-text .ce_text.intro h2{text-box:trim-start cap}
}
@supports not (text-box:trim-start cap){
  @media (min-width:37.5625em){
    #video-text .ce_text.intro h2{margin-top:-.23em}
  }
}

#video-text .intro p{
  margin:0;
  line-height:var(--line-height-relaxed);
}


/* ==========================================================
   WELLNESS-BANNER  (#wellness)
   Inline-Styles aus dem Template (Höhe, Overlay) daher !important
   ========================================================== */
#wellness .breaker-bgimage{
  display:flex;
  height:auto!important;
  min-height:clamp(24rem,52vh,32rem)!important;
}
#wellness .breaker-bgimage__overlay{
  opacity:1!important;
  background-color:transparent!important;
  background-image:radial-gradient(ellipse at center,
    rgba(var(--color-black-rgb),.78) 0%,
    rgba(var(--color-black-rgb),.62) 100%);
}
#wellness .breaker-bgimage__inner{
  position:relative;
  width:100%;
  min-height:inherit;
  padding:var(--spacing-section) var(--spacing-component);
}
#wellness .breaker-bgimage__text-wrapper{
  width:100%;
  max-width:46rem;
  margin:0 auto;
  padding:0;
}

/* Überschrift (h2) */
#wellness .breaker-bgimage__headline{
  margin:0 0 var(--base-spacing-unit--lg);
  font-size:var(--font-size-h2);
  font-weight:var(--font-weight-bold);
  line-height:var(--headings__line-height);
  color:var(--color-text--inverted)!important;
  text-wrap:balance;
}
#wellness .breaker-bgimage__headline::after{
  content:"";
  display:block;
  width:3rem;height:3px;
  margin:var(--base-spacing-unit) auto 0;
  border-radius:var(--base-border-radius--pill);
  background:var(--color-brand-light);
}

/* Text */
#wellness .breaker-bgimage__text{
  font-size:var(--font-size-large);
  line-height:var(--line-height-relaxed);
  color:var(--color-text--inverted);
  text-wrap:pretty;
}

/* Mobil: kein fixierter Hintergrund, etwas kleinerer Text */
@media (max-width:47.9375em){
  #wellness .breaker-bgimage{background-attachment:scroll!important}
  #wellness .breaker-bgimage__text{font-size:var(--base-font-size)}
}
@media (prefers-reduced-motion:reduce){
  #wellness .breaker-bgimage{background-attachment:scroll!important}
}




.intro {
    line-height: unset;
    padding: unset;
    border-bottom: unset;
}

/* ==========================================================================
   Behandlungsspektrum – Karten + Popup
   Ohne JavaScript, ohne Attribute außer class (Contao-sicher)
   Benötigt: theme_variables.css (Manrope kommt lokal vom Theme)
   ========================================================================== */

.bs {
  font-family: var(--base-font-family);
  color: var(--color-text);
}

/* ---------- Überschrift + Grid ---------- */
.bs {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--grid__gutter--half);
}
.bs__title {
  margin: 0 0 var(--spacing-section--sm);
  text-align: center;
  font-size: var(--font-size-h2);
  font-weight: var(--headings__font-weight);
  line-height: var(--headings__line-height);
  color: var(--headings__color);
}
.bs__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid__gutter--half);
}
.bs__item {
  display: flex;
  min-width: 0;
}

/* ---------- Rote Box ---------- */
.bs__card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  padding: var(--grid__gutter);
  background: var(--color-brand);
  color: var(--color-text-on-brand);
  border-radius: var(--base-border-radius--md);
  text-align: center;
}
.bs__card h3 {
    font-size: 1.3em;
}
.bs__name {
  margin: 0 0 var(--spacing-component--sm);
  color: var(--color-text-on-brand);
  font-size: var(--font-size-h3);
  font-weight: var(--headings__font-weight);
  line-height: var(--headings__line-height);
}

/* ---------- Button "Mehr dazu hier!" (= summary) ---------- */
.bs-pop {
  display: block;
}
.bs__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin: 0;
  padding: var(--btn-padding-y) var(--btn-padding-x);
  background: var(--color-page-background);
  color: var(--color-text);
  border-radius: var(--base-border-radius--sm);
  font-size: var(--base-font-size--xs);
  font-weight: var(--font-weight-semibold);
  line-height: var(--base-line-height);
  list-style: none;
  cursor: pointer;
  user-select: none;
  transition: var(--btn-transition);
}
.bs__btn::-webkit-details-marker {
  display: none;
}
.bs__btn:hover {
  background: var(--color-gray-200);
}
.bs__btn:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* ---------- Popup (offen, wenn <details> geöffnet ist) ---------- */

/* Dunkler Hintergrund = Pseudo-Element des Buttons, Klick schließt */
.bs-pop[open] > .bs__btn::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-index-modal);
  background: rgba(var(--color-black-rgb), 0.7);
  cursor: pointer;
}

/* Schließen-Kreis oben rechts, Klick schließt ebenfalls */
.bs-pop[open] > .bs__btn::after {
  content: "\00d7";
  position: fixed;
  top: var(--base-spacing-unit--lg);
  right: var(--base-spacing-unit--lg);
  z-index: calc(var(--z-index-modal) + 2);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--base-border-radius--pill);
  background: var(--color-brand2);
  color: var(--color-text--inverted);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}

/* Weiße Popup-Box */
.bs-pop[open] > .bs-modal__content {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: calc(var(--z-index-modal) + 1);
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  width: 90%;
  max-width: 54rem;
  max-height: 90vh;
  overflow: auto;
  padding: var(--spacing-section) var(--base-spacing-unit--xl) var(--spacing-section--sm);
  background: var(--color-page-background);
  border-radius: var(--base-border-radius--md);
  text-align: left;
  cursor: auto;
}
.bs-modal__title {
  margin: 0 0 var(--spacing-component);
  color: var(--headings__color);
  font-size: var(--font-size-h2);
  font-weight: var(--headings__font-weight);
  line-height: var(--headings__line-height);
}
.bs-modal__text {
  margin: 0;
  color: var(--color-text);   /* sonst erbt der Text das Weiß der roten Karte */
  font-size: var(--font-size-large);
  font-weight: var(--base-font-weight);
  line-height: var(--base-line-height);
}

/* Seite hinter dem offenen Popup nicht scrollen */
body:has(.bs-pop[open]) {
  overflow: hidden;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .bs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .bs__grid { grid-template-columns: 1fr; }
  .bs-pop[open] > .bs-modal__content {
    padding: var(--spacing-section) var(--grid__gutter) var(--spacing-section--sm);
  }
  .bs-modal__text { font-size: var(--base-font-size); }
}

/* Abstand zwischen zwei aufeinanderfolgenden Bereichen */
.bs + .bs {
  margin-top: var(--spacing-section);
}

/* mehrere Absätze im Popup */
.bs-modal__text + .bs-modal__text,
.bs-modal__text + .bs-modal__list,
.bs-modal__list + .bs-modal__text {
  margin-top: var(--base-spacing-unit);
}

/* Aufzählung im Popup (Naturmoor/Fango) */
.bs-modal__list {
  margin: var(--base-spacing-unit--sm) 0 0;
  padding-left: 1.25em;
  color: var(--color-text);
  font-size: var(--font-size-large);
  line-height: var(--base-line-height);
  list-style: disc;
}
.bs-modal__list li + li {
  margin-top: var(--base-spacing-unit--sm);
}
@media (max-width: 600px) {
  .bs-modal__list { font-size: var(--base-font-size); }
}


/* ==========================================================================
   Massage- und Entspannungsangebote – gleich hohe Karten
   Benötigt: theme_variables.css
   ========================================================================== */

.mz {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--grid__gutter--half);
  font-family: var(--base-font-family);
  color: var(--color-text);
}

/* 6 Spalten-Raster: jede Karte belegt 2 → 3 Karten pro Zeile,
   die einzelne letzte Karte wird mittig gesetzt */
.mz__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--grid__gutter--half);
}
.mz__card {
  grid-column: span 2;
}
.mz__card:last-child:nth-child(3n + 1) {
  grid-column: 3 / span 2;
}

/* ---------- Karte: gleiche Höhe, Badge unten bündig ---------- */
.mz__card {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: var(--grid__gutter);
  background: var(--color-page-background);
  border: 1px solid var(--color-gray-light);
  border-top: 3px solid var(--color-brand);
  border-radius: var(--base-border-radius--md);
  text-align: center;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.mz__card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Titel: immer Platz für 2 Zeilen, damit alle Texte auf einer Linie starten */
.mz__title {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(2 * var(--headings__line-height) * 1em);
  margin: 0 0 var(--spacing-component--sm);
  color: var(--headings__color);
  font-size: var(--font-size-h3);
  font-weight: var(--headings__font-weight);
  line-height: var(--headings__line-height);
}
.mz__text {
  margin: 0 0 var(--spacing-component);
  color: var(--color-text);
  font-size: var(--base-font-size);
  line-height: var(--base-line-height);
}

/* Dauer-Badge: schiebt sich ans Kartenende */
.mz__time {
  margin: auto 0 0;
}
.mz__badge {
  display: inline-block;
  padding: 0.2rem 0.75rem;
  background: var(--color-brand);
  color: var(--color-text-on-brand);
  border-radius: var(--base-border-radius--sm);
  font-size: var(--base-font-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--base-line-height);
  letter-spacing: 0.02em;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .mz__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mz__card,
  .mz__card:last-child:nth-child(3n + 1) { grid-column: auto; }
}
@media (max-width: 600px) {
  .mz__grid { grid-template-columns: 1fr; }
  .mz__title { min-height: 0; }
}

/* ==========================================================
   KACHELN  (.mz = Massage-/Wellness-Kacheln)
   Ruhige Karte ohne Hover, da die Kacheln nicht klickbar sind
   ========================================================== */
.mz .mz__card{
  padding:var(--spacing-component);
  background:var(--color-bg-subtle);
  border:1px solid var(--color-gray-200);
  border-radius:var(--base-border-radius--md);
  text-align:left;
}
/* vorhandenen Hover-Effekt (Schatten, Anheben) neutralisieren */
.mz .mz__card:hover{
  background:var(--color-bg-subtle);
  border-color:var(--color-gray-200);
  box-shadow:none;
  transform:none;
}

/* Titel: linksbündig, bündig über dem Text */
.mz .mz__title{
  justify-content:flex-start;
  align-items:flex-end;
  margin:0 0 var(--base-spacing-unit--sm);
  text-align:left;
  font-size:var(--font-size-h4);
  font-weight:var(--font-weight-semibold);
  line-height:var(--headings__line-height);
}

/* Beschreibung */
.mz .mz__text{
  margin:0 0 var(--spacing-component);
  text-align:left;
  line-height:var(--base-line-height);
}

/* Dauer: schlichte Zeile mit Uhr-Icon am Kartenfuß */
.mz .mz__time{
  margin:auto 0 0;
  padding-top:var(--base-spacing-unit);
  border-top:1px solid var(--color-gray-light);
}
.mz .mz__badge{
  display:inline-flex;
  align-items:center;
  gap:var(--base-spacing-unit--sm);
  padding:0;
  background:transparent;
  border-radius:0;
  color:var(--color-brand);
  font-size:var(--font-size-small);
  font-weight:var(--font-weight-bold);
  letter-spacing:.06em;
  text-transform:uppercase;
}
.mz .mz__badge::before{
  content:"\f017";
  font-family:"Font Awesome 7 Free";
  font-weight:400;
  font-size:1.1em;
  line-height:1;
}

/* ==========================================================
   360°-ANSICHT  (Text + Button unter der Praxis-Galerie)
   ========================================================== */
#praxis > .ce_text,
#praxis > .ce_rsce_button_variant{
  max-width:60rem;
  margin-left:auto;
  margin-right:auto;
  padding-left:var(--spacing-component);
  padding-right:var(--spacing-component);
  text-align:center;
}

/* Text mit rundem Icon darüber */
#praxis > .ce_text{
  margin-bottom:0;
  padding-top:var(--spacing-section);
}
#praxis > .ce_text::before{
  content:"\f21d";
  font-family:"Font Awesome 7 Free";
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:center;
  width:3.5rem;
  height:3.5rem;
  margin:0 auto var(--base-spacing-unit);
  border-radius:var(--base-border-radius--pill);
  background:var(--color-brand-tint);
  color:var(--color-brand);
  font-size:1.4rem;
  line-height:1;
}
/* ==========================================================
   360°-ANSICHT  (Wrapper mit der Klasse "360-grad")
   Attributselektor, weil Klassen nicht mit einer Ziffer
   beginnen dürfen, ohne maskiert zu werden
   ========================================================== */
[class~="360-grad"]{
  max-width:60rem;
  margin-left:auto;
  margin-right:auto;
  padding:var(--spacing-section) var(--spacing-component);
  text-align:center;
}

/* Text mit rundem Icon darüber */
[class~="360-grad"] .ce_text{margin:0}
[class~="360-grad"] .ce_text::before{
  content:"\f21d";
  font-family:"Font Awesome 7 Free";
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:center;
  width:3.5rem;
  height:3.5rem;
  margin:0 auto var(--base-spacing-unit);
  border-radius:var(--base-border-radius--pill);
  background:var(--color-brand-tint);
  color:var(--color-brand);
  font-size:1.4rem;
  line-height:1;
}
[class~="360-grad"] .ce_text p{
  margin:0;
  font-size:var(--font-size-large);
  line-height:var(--base-line-height);
  color:var(--color-text);
  text-wrap:balance;
}

/* Button */
[class~="360-grad"] .ce_rsce_button_variant{
  margin:0;
  padding-top:var(--spacing-component);
}
[class~="360-grad"] .btn{
  display:inline-flex;
  align-items:center;
  min-height:2.75rem;
}


/* ==========================================================
   BREAKER-BANNER  (.breaker-bgimage: Wellness, Team, …)
   Inline-Styles aus dem Template (Höhe, Overlay) daher !important
   ========================================================== */
.breaker-bgimage{
  display:flex;
  height:auto!important;
  min-height:clamp(24rem,52vh,32rem)!important;
}
.breaker-bgimage__overlay{
  opacity:1!important;
  background-color:transparent!important;
  background-image:radial-gradient(ellipse at center,
    rgba(var(--color-black-rgb),.78) 0%,
    rgba(var(--color-black-rgb),.62) 100%);
}
.breaker-bgimage__inner{
  position:relative;
  width:100%;
  min-height:inherit;
  padding:var(--spacing-section) var(--spacing-component);
}
.breaker-bgimage__text-wrapper{
  width:100%;
  max-width:46rem;
  margin:0 auto;
  padding:0;
}

/* Überschrift (h2) */
.breaker-bgimage__headline{
  margin:0 0 var(--base-spacing-unit--lg);
  font-size:var(--font-size-h2);
  font-weight:var(--font-weight-bold);
  line-height:var(--headings__line-height);
  color:var(--color-text--inverted)!important;
  text-wrap:balance;
}
.breaker-bgimage__headline::after{
  content:"";
  display:block;
  width:3rem;
  height:3px;
  margin:var(--base-spacing-unit) auto 0;
  border-radius:var(--base-border-radius--pill);
  background:var(--color-brand-light);
}

/* Text */
.breaker-bgimage__text{
  font-size:var(--font-size-large);
  line-height:var(--line-height-relaxed);
  color:var(--color-text--inverted);
  text-wrap:pretty;
}

/* Mobil: kein fixierter Hintergrund, etwas kleinerer Text */
@media (max-width:47.9375em){
  .breaker-bgimage{background-attachment:scroll!important}
  .breaker-bgimage__text{font-size:var(--base-font-size)}
}
@media (prefers-reduced-motion:reduce){
  .breaker-bgimage{background-attachment:scroll!important}
}

/* ==========================================================================
   Team – Foto-Karten mit Hover-Text
   ========================================================================== */

/* Abstand zwischen den Karten (Grid-Wrapper von Contao) */
.wrapper-grid__inner:has(> .foto-hover) {
  gap: var(--grid__gutter--half);
}

/* ---------- Karte ---------- */
.foto-hover {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-sizing: border-box;
  aspect-ratio: 3 / 5.2;
  min-height: 0;
  margin: 0;
  padding: 1.1rem 0.9rem;
  overflow: hidden;
  border-radius: var(--base-border-radius--sm);
  /* Fallback, falls noch kein Foto hinterlegt ist */
  background: linear-gradient(160deg, var(--color-brand2-light), var(--color-brand2));
  color: var(--color-text--inverted);
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base);
}
.foto-hover:hover,
.foto-hover:focus-within {
  box-shadow: var(--shadow-lg);
}

/* Wrapper der Contao-Komponente auflösen, damit beide Strukturen gleich laufen */
.foto-hover .con-kit-component-image__header,
.foto-hover .con-kit-component-header,
.foto-hover .con-kit-component-image__plain,
.foto-hover .con-kit-component-text {
  display: contents;
}

/* ---------- Foto ---------- */
.foto-hover .image_container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
}
.foto-hover .image_container picture,
.foto-hover .image_container img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.7s ease;
}
.foto-hover:hover .image_container img,
.foto-hover:focus-within .image_container img {
  transform: scale(1.06);
}

/* ---------- Abdunklung ---------- */
.foto-hover::before,
.foto-hover::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
/* Ruhezustand: Verlauf von unten, damit der Name lesbar ist (Kontrast ≥ 10:1) */
.foto-hover::before {
  background: linear-gradient(
    to top,
    rgba(var(--color-brand2-rgb), 0.92) 0%,
    rgba(var(--color-brand2-rgb), 0.72) 25%,
    rgba(var(--color-brand2-rgb), 0) 58%
  );
}
/* Hover: ganze Karte abgedunkelt (Kontrast ≈ 17:1) */
.foto-hover::after {
  background: rgba(var(--color-brand2-rgb), 0.94);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.foto-hover:hover::after,
.foto-hover:focus-within::after {
  opacity: 1;
}

/* ---------- Name (immer sichtbar) ---------- */
.foto-hover h3 {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: 0;
  color: var(--color-text--inverted);
  font-size: var(--font-size-h4);
  font-weight: var(--headings__font-weight);
  line-height: var(--headings__line-height);
  text-align: center;
}
.foto-hover h3::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 3px;
  margin: 0.65rem auto 0;
  border-radius: 2px;
  background: var(--color-brand);
  transition: width 0.4s ease, margin 0.45s ease;
}
.foto-hover:hover h3::after,
.foto-hover:focus-within h3::after {
  width: 4rem;
  margin-bottom: 0.2rem;
}

/* ---------- Rolle + Liste (erscheinen bei Hover) ---------- */
.foto-hover > p,
.foto-hover > ul,
.foto-hover .con-kit-component-text > * {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  max-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(0.75rem);
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--color-text--inverted);
  text-align: center;
  transition:
    max-height 0.55s ease,
    opacity 0.4s ease 0.1s,
    transform 0.45s ease 0.1s,
    margin-top 0.45s ease;
}
.foto-hover:hover > p,
.foto-hover:hover > ul,
.foto-hover:hover .con-kit-component-text > *,
.foto-hover:focus-within > p,
.foto-hover:focus-within > ul,
.foto-hover:focus-within .con-kit-component-text > * {
  max-height: 30rem;
  margin-top: 0.3rem;
  opacity: 1;
  transform: none;
}

/* erste Zeile = Rolle (weiß, fett) */
.foto-hover > p:first-of-type,
.foto-hover .con-kit-component-text > :first-child {
  font-weight: var(--font-weight-bold);
}

/* leere Absätze ausblenden */
.foto-hover > p:empty,
.foto-hover .con-kit-component-text > :empty {
  display: none;
}

/* Liste ohne Aufzählungspunkte, mit feinen Trennlinien */
.foto-hover ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.foto-hover li {
  margin: 0;
  padding: 0.16rem 0;
  border-top: 1px solid rgba(var(--color-white-rgb), 0.22);
  /* !important nötig, weil der Contao-Editor text-align:left direkt am li setzt */
  text-align: center !important;
}

/* ---------- Weniger Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  .foto-hover,
  .foto-hover *,
  .foto-hover::after {
    transition: none !important;
  }
}

/* ==========================================================
   KONTAKT  (#kontakt)
   ========================================================== */
/* Inline-Padding des Abschnitts (3em / 5em) überschreiben */
#kontakt .centered-wrapper{
  padding-top:var(--spacing-section)!important;
  padding-bottom:var(--spacing-section)!important;
}
#kontakt .wrapper-grid__inner{align-items:start}

/* ---------- Linke Spalte ---------- */
#kontakt h2{
  margin:0 0 var(--base-spacing-unit);
  font-size:var(--font-size-h3);
  line-height:var(--headings__line-height);
}
#kontakt .ce_text p{
  margin:0 0 var(--base-spacing-unit);
  line-height:var(--line-height-relaxed);
}
#kontakt .ce_text h3{
  margin:var(--spacing-component) 0 var(--base-spacing-unit--xs);
  font-size:var(--font-size-small);
  font-weight:var(--font-weight-bold);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--color-brand);
}

/* ---------- Formular-Karte ---------- */
#kontakt .wrapper-grid__inner > .ce_rsce_wrapper_plain_start{
  padding:var(--spacing-component);
  background:var(--color-page-background);
  border:1px solid var(--color-gray-200);
  border-radius:var(--base-border-radius--md);
}

/* Das Raster des Formulars (12 Spalten) auf 2 Spalten umstellen */
#kontakt .formbody{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--base-spacing-unit) var(--spacing-component--sm);
}
#kontakt .formbody > .widget{
  margin:0;
  min-width:0;
  grid-column:auto;
}
#kontakt .formbody > .widget-text:nth-of-type(3),
#kontakt .formbody > .widget-textarea,
#kontakt .formbody > .widget-explanation,
#kontakt .formbody > .widget-submit{
  grid-column:1 / -1;
}

/* Labels und Felder */
#kontakt .widget label{
  display:block;
  margin:0 0 var(--base-spacing-unit--xs);
  font-size:var(--font-size-small);
  font-weight:var(--font-weight-semibold);
  color:var(--color-text);
}
#kontakt .widget input.text,
#kontakt .widget input[type=text],
#kontakt .widget input[type=email],
#kontakt .widget textarea{
  width:100%;
  box-sizing:border-box;
  padding:.6rem .85rem;
  background:var(--form-input-bg);
  color:var(--form-input-color);
  border:1px solid var(--color-gray-400);
  border-radius:var(--form-input-border-radius);
  font-family:inherit;
  font-size:var(--form-input-font-size);
}
#kontakt .widget textarea{
  height:8rem;
  resize:vertical;
}
#kontakt .widget input:focus,
#kontakt .widget textarea:focus{
  outline:var(--focus-ring);
  outline-offset:0;
  border-color:var(--color-brand);
}

/* Datenschutzhinweis */
#kontakt .widget-explanation{
  font-size:var(--font-size-small);
  line-height:1.5;
  color:var(--color-text-muted);
}
#kontakt .widget-explanation p{
  margin:0 0 .5rem;
  font-size:inherit;
  line-height:inherit;
}
#kontakt .widget-explanation p:last-child{margin-bottom:0}

/* Senden-Button */
#kontakt .widget-submit .submit{
  min-height:2.75rem;
  padding:var(--btn-padding-y) var(--btn-padding-x);
  background:var(--button-bg);
  color:var(--color-btn-text);
  border:var(--base-border-width) solid var(--button-bg);
  font-weight:var(--btn-font-weight);
  cursor:pointer;
  transition:background-color var(--transition-fast),border-color var(--transition-fast);
}
#kontakt .widget-submit .submit:hover,
#kontakt .widget-submit .submit:focus-visible{
  background:var(--button-bg-hover);
  border-color:var(--button-bg-hover);
}
#kontakt .widget-submit .submit:focus-visible{
  outline:var(--focus-ring);
  outline-offset:var(--focus-ring-offset);
}

/* ---------- Mobil: Felder einspaltig ---------- */
@media (max-width:37.4375em){
  #kontakt .formbody{grid-template-columns:1fr}
  #kontakt .formbody > .widget-text:nth-of-type(3){grid-column:auto}
}

/* ==========================================================
   ANFAHRT  (#anfahrt)
   ========================================================== */
#anfahrt{
  padding-top:var(--spacing-section);
  padding-bottom:var(--spacing-section);
}

/* Kopf */
#anfahrt .ce_headline{
  margin:0 0 var(--base-spacing-unit);
  text-align:center;
  font-size:var(--font-size-h2);
  line-height:var(--headings__line-height);
  text-wrap:balance;
}
#anfahrt .ce_text{
  max-width:46rem;
  margin:0 auto var(--spacing-component);
  text-align:center;
}
#anfahrt .ce_text p{
  margin:0 0 var(--base-spacing-unit);
  font-size:var(--font-size-large);
  line-height:var(--base-line-height);
}
#anfahrt .ce_text p:last-child{margin-bottom:0}

/* ---------- Galerie: gleiche Höhe, natürliche Seitenverhältnisse ---------- */
#anfahrt .ce_gallery{margin:0}

/* Das 12-Spalten-Raster der Galerie durch Flex ersetzen */
#anfahrt .ce_gallery > ul{
  display:flex;
  flex-wrap:nowrap;
  align-items:flex-start;
  gap:var(--grid__gutter--half);
  margin:0;
  padding:0;
  list-style:none;
}
#anfahrt .ce_gallery > ul > li{
  flex:1 1 0;
  min-width:0;
  float:none;
  width:auto;
  height:auto;
  margin:0;
  padding:0;
  grid-column:auto;
}

/* Breite = Seitenverhältnis des Bildes (Breite : Höhe),
   dadurch haben alle Bilder dieselbe Höhe */
#anfahrt .ce_gallery > ul > li:nth-child(1){flex-grow:1.778}  /* 711 x 400 */
#anfahrt .ce_gallery > ul > li:nth-child(2){flex-grow:.5625}  /* 225 x 400 */
#anfahrt .ce_gallery > ul > li:nth-child(3){flex-grow:.6575}  /* 263 x 400 */

#anfahrt .ce_gallery figure{
  display:block;
  width:100%;
  margin:0;
}
#anfahrt .ce_gallery a{
  display:block;
  width:100%;
  overflow:hidden;
  border-radius:var(--base-border-radius--md);
  line-height:0;
}
#anfahrt .ce_gallery picture{display:block;width:100%}
#anfahrt .ce_gallery img{
  display:block;
  width:100%;
  height:auto;
  max-width:none;
}
#anfahrt .ce_gallery a:focus-visible{
  outline:var(--focus-ring);
  outline-offset:var(--focus-ring-offset);
}

/* ---------- Mobil: Querformat oben, Hochformate nebeneinander ---------- */
@media (max-width:47.9375em){
  #anfahrt .ce_gallery > ul{flex-wrap:wrap}
  #anfahrt .ce_gallery > ul > li:nth-child(1){flex:0 0 100%}
}


/* ==========================================================
   YOUTUBE-VORSCHAU  (#video-text, 2-Klick-Lösung)
   ========================================================== */
#video-text .content-youtube{
  --youtube-red:#f00;  /* YouTube-Rot, keine Variable der Seite */
}
#video-text .content-youtube figure{margin:0}
#video-text .content-youtube figure > iframe{
  border-radius:var(--base-border-radius--md);
}

/* Vorschau-Button: füllt die Fläche, kein Grau, kein Rand */
#video-text .content-youtube button[data-splash-screen]{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  color:var(--color-text--inverted);
  font:inherit;
  text-align:left;
  cursor:pointer;
  border-radius:var(--base-border-radius--md);
  overflow:hidden;
}
#video-text .content-youtube button[data-splash-screen] picture{
  position:absolute;
  inset:0;
  display:block;
}
#video-text .content-youtube button[data-splash-screen] img{
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
}

/* Play-Symbol in YouTube-Rot */
#video-text .content-youtube button[data-splash-screen]::after{
  content:"\f04b";
  font-family:"Font Awesome 7 Free";
  font-weight:900;
  position:absolute;
  top:50%;
  left:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  width:4.5rem;
  height:3.25rem;
  padding-left:.2em;
  box-sizing:border-box;
  transform:translate(-50%,-50%);
  background:var(--youtube-red);
  color:var(--color-text-on-brand);
  border-radius:var(--base-border-radius--md);
  box-shadow:var(--shadow-md);
  font-size:1.3rem;
  line-height:1;
}

/* Fokus für Tastaturnutzer (kein Hover-Effekt) */
#video-text .content-youtube button[data-splash-screen]:focus-visible{
  outline:var(--focus-ring);
  outline-offset:var(--focus-ring-offset);
}

/* Einwilligungstext unten auf dem Bild */
#video-text .content-youtube button[data-splash-screen] span{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  display:block;
  padding:2.5rem var(--base-spacing-unit) var(--base-spacing-unit--sm);
  background:linear-gradient(to top,
    rgba(var(--color-black-rgb),.82) 0%,
    rgba(var(--color-black-rgb),.6) 55%,
    rgba(var(--color-black-rgb),0) 100%);
  color:var(--color-text--inverted);
  font-size:var(--font-size-small);
  line-height:1.4;
  text-align:left;
}

@media (max-width:37.4375em){
  #video-text .content-youtube button[data-splash-screen] span{
    padding-top:2rem;
    font-size:var(--font-size-xsmall);
  }
  #video-text .content-youtube button[data-splash-screen]::after{
    width:3.75rem;
    height:2.75rem;
    font-size:1.1rem;
  }
}