body .sppb-btn, body .btn {
    text-transform: none!important;
}
/* =========================================================
   HERO SLIDER - Textbereich mittig mit ovalem Hintergrund
   ========================================================= */

#sppb-addon-78ce359b-1da4-4819-9364-c6c84754dc0b
.sppb-carousel-extended-content-wrap {
    position: absolute !important;

    /* Inhalt wieder exakt mittig */
    top: 66% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;

    /* NICHT über die ganze Höhe */
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;

    /* Größe des Inhaltsbereiches */
    max-width: 850px;
    padding: 45px 70px !important;

    /* Hintergrund */
    background: rgba(255, 255, 255, 0.7);

    /* Glass-Effekt */
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);

    /* Oval */
    border-radius: 80px;

    /* dezenter Schatten */
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);

    /* Text mittig */
    text-align: center;

    /* sicherstellen, dass nichts gestreckt wird */
    display: block !important;

    z-index: 5;
}


/* Überschrift wieder ohne eigenen Hintergrund */
#sppb-addon-78ce359b-1da4-4819-9364-c6c84754dc0b
.sppb-carousel-extended-heading {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    width: auto !important;
}


/* Unterüberschrift ebenfalls zentrieren */
#sppb-addon-78ce359b-1da4-4819-9364-c6c84754dc0b
.sppb-carousel-extended-subheading {
    text-align: center;
}


/* Mobile */
@media (max-width: 767px) {

    #sppb-addon-78ce359b-1da4-4819-9364-c6c84754dc0b
    .sppb-carousel-extended-content-wrap {
        width: calc(100% - 40px) !important;
        max-width: 600px;

        padding: 28px 25px !important;

        border-radius: 40px;
    }
}
/* =========================================================
   UBUNTU - OHNE ICON FONTS ZU ZERSTOEREN
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap');


/* Grundschrift */
body {
    font-family: 'Ubuntu', Arial, sans-serif !important;
}


/* Überschriften */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Ubuntu', Arial, sans-serif !important;
}


/* Absätze und Listen */
p,
li,
td,
th,
label {
    font-family: 'Ubuntu', Arial, sans-serif !important;
}


/* Navigation */
.sp-megamenu-parent > li > a,
.sp-megamenu-parent > li > span {
    font-family: 'Ubuntu', Arial, sans-serif !important;
}


/* SP Page Builder Überschriften und Texte */
.sppb-addon-title,
.sppb-carousel-extended-heading,
.sppb-carousel-extended-subheading,
.sppb-carousel-extended-description {
    font-family: 'Ubuntu', Arial, sans-serif !important;
}


/* Buttons */
.sppb-btn,
.btn,
button,
input,
textarea,
select {
    font-family: 'Ubuntu', Arial, sans-serif !important;
}
#sp-header #sp-menu .sp-megamenu-wrapper .sp-megamenu-parent .sp-menu-item>a, #sp-header #sp-menu .sp-megamenu-wrapper .sp-megamenu-parent .sp-menu-item>span {
    font-size: 18px!important;
}
/* =========================================================
   HAUPTMENUE - ACTIVE + HOVER
   angepasst an Helix Ultimate
   ========================================================= */

/* Normaler Menülink */
#sp-header #sp-menu .sp-megamenu-parent > li > a {
    position: relative;

    /* Wichtig: keine zusätzlichen horizontalen Abstände */
    padding: 5px 10px !important;

    /* Template-Line-Height überschreiben */
    line-height: 20px !important;

    /* keine feste Höhe */
    height: auto !important;
    min-height: 0 !important;

    color: #222222 !important;
    background: transparent !important;

    border-radius: 15px;

    font-family: 'Ubuntu', Arial, sans-serif !important;
    font-weight: 500;

    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease;
}


/* =========================================================
   HOVER
   ========================================================= */

#sp-header #sp-menu .sp-megamenu-parent > li > a:hover {
    color: #365f34 !important;
    background-color: rgba(54, 95, 52, 0.12) !important;
}


/* =========================================================
   AKTIVER MENÜPUNKT
   ========================================================= */

#sp-header #sp-menu .sp-megamenu-parent > li.current-item > a,
#sp-header #sp-menu .sp-megamenu-parent > li.active > a {
    color: #ffffff !important;
    background-color: #a1cc00 !important;

    box-shadow: 0 2px 6px rgba(54, 95, 52, 0.25);
}


/* Active Hover */
#sp-header #sp-menu .sp-megamenu-parent > li.current-item > a:hover,
#sp-header #sp-menu .sp-megamenu-parent > li.active > a:hover {
    color: #ffffff !important;
    background-color: #a1cc00 !important;
}


/* =========================================================
   ABSTAND ZWISCHEN DEN MENÜPUNKTEN
   Helix setzt hier standardmäßig 15px
   ========================================================= */

#sp-header #sp-menu .sp-megamenu-wrapper
.sp-megamenu-parent > .sp-menu-item {
    margin: 0 5px !important;
}
.openinghours-credit {
display: none !important;
}

.hero-content {
    position: absolute;
    left: 50%;
    top: 66%;
    transform: translate(-50%, -50%);

    width: min(750px, 75%);
    padding: 42px 60px;

    text-align: center;

    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    border-radius: 60px;
}
/* =========================================================
   NIBELUNGEN-APOTHEKE – RESPONSIVE FIX (Tablet & Mobile)
   Template: Nexio (Helix Ultimate) + SP Page Builder
   Einfügen: Template-Stil > Benutzerdefiniertes CSS
             bzw. ans Ende von /templates/nexio/css/custom.css
   ========================================================= */


/* ---------------------------------------------------------
   0) Basis: Lesbarkeit & kein horizontales Scrollen
   --------------------------------------------------------- */
html, body { overflow-x: clip; }

@media (max-width: 991.98px) {
    body { font-size: 16px; line-height: 1.55; }
    body p, body li { font-size: 16px; }
}


/* ---------------------------------------------------------
   1) LOGO – Hauptfehler
   Nexio setzt bei <=1200px ".logo-image {height:auto !important}".
   Dadurch wird das Logo in voller Größe (842x230 px) angezeigt,
   ragt aus dem Header und schiebt das Menü in eine zweite Zeile.
   --------------------------------------------------------- */
#sp-header .logo .logo-image {
    height: 60px !important;
    width: auto !important;
    max-width: none;
    display: block;
}
@media (max-width: 1199.98px) {
    #sp-header .logo .logo-image { height: 52px !important; }
}
@media (max-width: 991.98px) {
    #sp-header .logo .logo-image { height: 46px !important; }
    #sp-header #sp-logo { padding-right: 0; }
}
@media (max-width: 575.98px) {
    #sp-header .logo .logo-image { height: 38px !important; }
}

/* Burger-Menü: größere Touch-Fläche (min. 44x44 px) */
@media (max-width: 991.98px) {
    #offcanvas-toggler,
    .offcanvas-toggler-right {
        min-width: 44px;
        justify-content: center;
    }
}


/* ---------------------------------------------------------
   2) HERO-SLIDER Startseite (ovale Textbox) – alle Breiten
   Ursache: Das Template setzt "bottom:0" UND custom.css "top:66%".
   Damit ist die Box-Höhe = Resthöhe unter 66% (~190px) – Unter-
   überschrift und Button laufen unten heraus. Zusätzlich begrenzt
   "left:50%" die Breite auf die halbe Slide, die 70px-Überschrift
   bricht um. Lösung: Box unten verankern, Breite nach Inhalt,
   Schrift skaliert mit der Slide-Breite (Container Query).
   --------------------------------------------------------- */
#sppb-addon-78ce359b-1da4-4819-9364-c6c84754dc0b .sppb-carousel-extended-item {
    container-type: inline-size;
}
#sppb-addon-78ce359b-1da4-4819-9364-c6c84754dc0b .sppb-carousel-extended-content-wrap {
    top: auto !important;
    bottom: clamp(16px, 4%, 40px) !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: max-content !important;
    max-width: min(760px, calc(100% - 48px)) !important;
    height: auto !important;
    min-height: 0 !important;
    padding: clamp(18px, 2.8vw, 36px) clamp(22px, 4.5vw, 64px) !important;
    border-radius: clamp(24px, 4vw, 60px) !important;
    box-sizing: border-box;
}
#sppb-addon-78ce359b-1da4-4819-9364-c6c84754dc0b .sppb-carousel-extended-heading {
    font-size: clamp(26px, 6.5cqw, 64px) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.5px !important;
    margin: 0 0 .25em !important;
}
#sppb-addon-78ce359b-1da4-4819-9364-c6c84754dc0b .sppb-carousel-extended-subheading {
    font-size: clamp(15px, 1.8vw, 22px) !important;
    line-height: 1.35 !important;
    margin: 0 !important;
}
#sppb-addon-78ce359b-1da4-4819-9364-c6c84754dc0b .sppb-carousel-extended-description {
    margin-top: clamp(10px, 1.5vw, 18px) !important;
}
@media (max-width: 575.98px) {
    #sppb-addon-78ce359b-1da4-4819-9364-c6c84754dc0b .sppb-carousel-extended-content-wrap {
        width: calc(100% - 32px) !important;
        max-width: calc(100% - 32px) !important;
    }
    /* Pfeile überdecken auf dem Handy die Textbox – Wischen genügt */
    #sppb-addon-78ce359b-1da4-4819-9364-c6c84754dc0b .sppb-carousel-extended-nav-control {
        display: none !important;
    }
}


/* ---------------------------------------------------------
   3) SEITENKOPF der Unterseiten (Über uns, Serviceleistungen)
   Ovale Überschrift-Box (50px Innenabstand, 80px Radius) und
   Breadcrumb "ÜBER UNS" überlappen sich auf dem Handy.
   --------------------------------------------------------- */
@media (max-width: 767.98px) {
    #column-id-30e925d8-6421-4d3f-8164-13dc75803fe5,          /* Über uns */
    #column-id-238fc0cc-51b7-42f1-a126-fe014a2d38aa {         /* Serviceleistungen */
        padding-top: 180px !important;
        padding-bottom: 24px !important;
    }
    #sppb-addon-wrapper-13657e7b-01c9-4306-90a6-b50194324306,
    #sppb-addon-wrapper-6989d1b8-462b-41be-a1f8-43900f8ac24a {
        padding: 20px 22px !important;
        border-radius: 28px !important;
        margin-top: 12px !important;
    }
    #sppb-addon-wrapper-13657e7b-01c9-4306-90a6-b50194324306 *,
    #sppb-addon-wrapper-6989d1b8-462b-41be-a1f8-43900f8ac24a * {
        font-size: 18px !important;
        line-height: 1.4 !important;
    }
    #sppb-addon-85e3f0fa-4d7e-4726-9057-04be0fbaf2ae .breadcrumb,
    #sppb-addon-e2728b00-e60a-4937-88e0-fd6edaeefb8f .breadcrumb {
        padding-left: 4px !important;
        margin-bottom: 0 !important;
        text-shadow: 0 1px 3px rgba(0,0,0,.45);
    }
}
@media (max-width: 767.98px) {
    .hero-content {               /* falls .hero-content noch verwendet wird */
        width: calc(100% - 32px);
        padding: 20px 22px;
        border-radius: 24px;
    }
}


/* ---------------------------------------------------------
   4) "AUF EINEN BLICK" (Dynamic Content, .services-list)
   Karten weiß, zentriert, kompakt; Buttons für Route,
   Reservierung, Anrufen, E-Mail; Öffnungszeiten-Karte mit
   eigenem Modul mod_oeffnungszeiten (Modul-ID 139, Layout nexio:card).
   Handy: kompakte Zeilen (Icon links, Text rechts).
   --------------------------------------------------------- */
.services-list {
  --ab-green: #2e9a3e;
  --ab-green-dark: #1d6e2c;
  --ab-green-soft: #e8f5ea;
  --ab-text: #151917;
  --ab-muted: #5b625e;
  max-width: 1140px;
  margin: 0 auto;
  column-gap: 24px !important;
  row-gap: 24px !important;
  align-items: stretch;
}

/* ---------- Karte ---------- */
.services-list > .sppb-dynamic-content-collection__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 18px 26px !important;
  background: #fff !important;
  border: 1px solid rgba(46, 154, 62, .12);
  border-radius: 20px !important;
  box-shadow: 0 1px 2px rgba(21, 25, 23, .04), 0 8px 24px rgba(21, 25, 23, .06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
}
.services-list > .sppb-dynamic-content-collection__item:hover {
  transform: translateY(-4px);
  border-color: rgba(46, 154, 62, .3);
  box-shadow: 0 2px 4px rgba(21, 25, 23, .05), 0 16px 36px rgba(29, 110, 44, .12);
}
.services-list .sppb-addon-wrapper { width: 100%; margin: 0 !important; }

/* ---------- Icon ---------- */
.services-list .sppb-dynamic-content-image-wrapper {
  width: 112px !important;
  margin: 0 auto 22px !important;
  transition: transform .3s ease;
}
.services-list > .sppb-dynamic-content-collection__item:hover .sppb-dynamic-content-image-wrapper {
  transform: scale(1.05);
}
.services-list .sppb-dynamic-content-image { object-fit: contain !important; }

/* ---------- Titel (Adresse, Reservierung …) ---------- */
.services-list p.sppb-dynamic-content-text {
  display: block !important;
  font-size: 21px !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
  color: var(--ab-text) !important;
  text-align: center;
  margin: 0 0 10px !important;
  position: relative;
  padding-bottom: 12px !important;
}
.services-list p.sppb-dynamic-content-text::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  width: 32px; height: 3px;
  border-radius: 3px;
  background: var(--ab-green);
  transform: translateX(-50%);
}

/* ---------- Inhaltstext ---------- */
.services-list div.sppb-dynamic-content-text {
  display: flex !important;
  flex-direction: column;
  justify-content: center !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
  color: var(--ab-muted) !important;
  text-align: center;
}
.services-list .sppb-dynamic-content__is-rich-text p { margin: 0 0 4px; color: inherit; }
.services-list .sppb-dynamic-content__is-rich-text a {
  color: var(--ab-green-dark) !important;
  font-weight: 500;
  text-decoration: none;
  overflow-wrap: anywhere;
  border-bottom: 1px solid rgba(29, 110, 44, .25);
  transition: border-color .2s, color .2s;
}
.services-list .sppb-dynamic-content__is-rich-text a:hover {
  color: var(--ab-green) !important;
  border-bottom-color: currentColor;
}

/* ---------- Buttons (Route, Reservierung, Anrufen, E-Mail) ---------- */
/* Inhaltsbereich füllt die Karte -> Buttons sitzen in allen Karten auf einer Linie */
.services-list > .sppb-dynamic-content-collection__item > .sppb-addon-wrapper:last-child,
.services-list > .sppb-dynamic-content-collection__item > .sppb-addon-wrapper:last-child > div,
.services-list > .sppb-dynamic-content-collection__item > .sppb-addon-wrapper:last-child div.sppb-dynamic-content-text,
.services-list .sppb-dynamic-content__is-rich-text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.services-list > .sppb-dynamic-content-collection__item > .sppb-addon-wrapper:last-child div.sppb-dynamic-content-text {
  align-items: stretch !important;
}
.services-list .sppb-dynamic-content__is-rich-text > p:has(> a) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: auto 0 0 !important;
  padding-top: 18px;
}
.services-list .sppb-dynamic-content__is-rich-text > p:has(> a) > a {
  /* Farben = globale SP-Page-Builder-Buttonfarben (wie "Kontakt" im Header) */
  --ab-btn: var(--sppb-button-primary, #3653F4);
  --ab-btn-hover: var(--sppb-button-primary-hover, #0B26C2);
  display: inline-flex;
  align-items: center;
  justify-content: center !important;
  gap: 6px;
  min-height: 42px;
  margin: 0 !important;
  padding: 10px 18px !important;
  border: 2px solid var(--ab-btn) !important;
  border-radius: 40px;
  background: var(--ab-btn);
  color: var(--sppb-text-secondary, #fff) !important;
  font-family: Ubuntu, Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  overflow-wrap: normal;
  box-shadow: none;
  transition: background-color .4s, border-color .4s, color .4s !important;
}
.services-list .sppb-dynamic-content__is-rich-text > p:has(> a) > a:hover,
.services-list .sppb-dynamic-content__is-rich-text > p:has(> a) > a:focus-visible {
  background: var(--ab-btn-hover);
  border-color: var(--ab-btn-hover) !important;
  color: #fff !important;
}
.services-list .sppb-dynamic-content__is-rich-text > p:has(> a) > a:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ab-btn) 35%, transparent);
  outline-offset: 2px;
}
/* E-Mail als Zweit-Button (Outline) */
.services-list .sppb-dynamic-content__is-rich-text > p:has(> a) > a[href^="mailto:"] {
  background: transparent;
  color: var(--ab-btn) !important;
}
.services-list .sppb-dynamic-content__is-rich-text > p:has(> a) > a[href^="mailto:"]:hover {
  background: var(--ab-btn);
  border-color: var(--ab-btn) !important;
  color: #fff !important;
}
/* Desktop (4 schmale Spalten): Buttons volle Kartenbreite, mehrere untereinander –
   so bleiben Text + Icon bei allen Buttons gleich (Anrufen / E-Mail) */
@media (min-width: 992px) {
  .services-list .sppb-dynamic-content__is-rich-text > p:has(> a) {
    flex-direction: column;
    align-items: stretch;
  }
  .services-list .sppb-dynamic-content__is-rich-text > p:has(> a) > a {
    width: 100%;
  }
}
/* Icons */
.services-list .sppb-dynamic-content__is-rich-text > p:has(> a) > a::before {
  content: "";
  width: 16px; height: 16px;
  flex: 0 0 16px;
  background: currentColor;
  -webkit-mask: var(--ab-ico) center / contain no-repeat;
          mask: var(--ab-ico) center / contain no-repeat;
}
.services-list a[href*="google.com/maps"] { --ab-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='3 11 22 2 13 21 11 13 3 11'/%3E%3C/svg%3E"); }
.services-list a[href*="reservierung"] { --ab-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18M9 16l2 2 4-4'/%3E%3C/svg%3E"); }
.services-list a[href^="tel:"] { --ab-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.18 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.1 9.9a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E"); }
.services-list a[href^="mailto:"] { --ab-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E"); }

/* Leeren Absatz unter „Auf einen Blick“ entfernen */
#sppb-addon-1770272384290 .sppb-addon-content:has(> p:only-child:empty) { display: none; }

/* ---------- Öffnungszeiten-Modul (mod_oeffnungszeiten, Layout „card“) ---------- */
.services-list .oez,
.services-list .oez__cardline {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  padding: 0 !important;
}
.services-list .oez__today-row { margin: 0 0 18px !important; }
.services-list .oez__today { color: var(--ab-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.services-list .oez__detail,
.services-list .oez__vacation-short { margin: -16px 0 18px !important; font-size: 14px; line-height: 1.4; }
.services-list .oez__detail:empty { display: none; }
/* Detail nur zeigen, wenn nicht geöffnet (z. B. „öffnet morgen um 08:00 Uhr“) */
.services-list .oez__cardline:has(.oez__trigger[data-state="open"]) .oez__detail { display: none; }

/* Status-Button */
.services-list .oez__trigger {
  --st: var(--ab-green-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 42px;
  margin: auto 0 0;
  padding: 10px 18px;
  border: 2px solid var(--st);
  border-radius: 40px;
  background: color-mix(in srgb, var(--st) 10%, #fff);
  color: var(--st);
  font: inherit;
  font-family: Ubuntu, Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s, transform .2s, box-shadow .2s;
}
.services-list .oez__trigger:hover {
  background: color-mix(in srgb, var(--st) 18%, #fff);
  transform: translateY(-1px);
}
.services-list .oez__trigger:focus-visible { outline: 3px solid color-mix(in srgb, var(--st) 35%, transparent); outline-offset: 2px; }
.services-list .oez__trigger[data-state="soon"],
.services-list .oez__trigger[data-state="vacation"] { --st: #9a4d00; }
.services-list .oez__trigger[data-state="closed"] { --st: #a32020; }
.services-list .oez__trigger-dot {
  width: 8px; height: 8px; flex: 0 0 8px;
  border-radius: 50%;
  background: currentColor;
}
.services-list .oez__trigger[data-state="open"] .oez__trigger-dot { animation: ab-pulse 2s infinite; }
@keyframes ab-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 55%, transparent); }
  70%  { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.services-list .oez__chev {
  width: 14px; height: 14px; flex: 0 0 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Pop-up */
.services-list .oez__dialog {
  width: min(400px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0 !important;
  border: 0 !important;
  border-radius: 20px !important;
  background: #fff;
  box-shadow: 0 24px 60px rgba(21, 25, 23, .25) !important;
  color: var(--ab-text);
  font-size: 15px;
  line-height: 1.4;
  text-align: left;
}
.services-list .oez__dialog::backdrop { background: rgba(21, 25, 23, .45); backdrop-filter: blur(3px); }
.services-list .oez__dialog-head {
  justify-content: flex-start !important;
  gap: 14px !important;
  margin: 0 !important;
  padding: 20px 20px 0 22px;
}
.services-list .oez__dialog-head::before {
  content: "";
  width: 46px; height: 46px; flex: 0 0 46px;
  background: url("/images/2026/10/27/clock.webp") center / contain no-repeat;
}
.services-list .oez__dialog:has(.oez__status--closed, .oez__status--vacation) .oez__dialog-head::before {
  background-image: url("/images/2026/09/22/clock-closed.png");
}
.services-list .oez__dialog-title { font-size: 20px !important; font-weight: 600; color: var(--ab-text) !important; line-height: 1.2; }
.services-list .oez__close { margin-left: auto; background: #f2f4f2 !important; color: var(--ab-text) !important; }
.services-list .oez__dialog .oez__status-row {
  margin: -16px 0 0 !important;
  padding: 0 22px 14px 82px;
  border-bottom: 1px solid #eef1ee;
  text-align: left;
}
.services-list .oez__dialog .oez__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 !important;
  background: none !important;
  font-size: 13px !important;
  font-weight: 600;
}
.services-list .oez__dialog .oez__status--open { color: var(--ab-green-dark) !important; }
.services-list .oez__dialog .oez__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.services-list .oez__dialog .oez__table { width: 100% !important; margin: 6px 0 !important; border-collapse: collapse; }
.services-list .oez__dialog .oez__day,
.services-list .oez__dialog .oez__hours {
  padding: 9px 22px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: var(--ab-text) !important;
  text-align: left !important;
}
.services-list .oez__dialog .oez__hours { text-align: right !important; font-weight: 500 !important; font-variant-numeric: tabular-nums; }
.services-list .oez__dialog .oez__row.is-today > * {
  background: var(--ab-green-soft) !important;
  color: var(--ab-green-dark) !important;
  font-weight: 700 !important;
}
.services-list .oez__dialog .oez__row.is-closed .oez__hours { color: #8a918d !important; font-weight: 400 !important; }
.services-list .oez__dialog .oez__special-label { display: block; font-size: 12px !important; font-weight: 400; color: #9a4d00; }
.services-list .oez__dialog .oez__specials,
.services-list .oez__dialog .oez__vacation,
.services-list .oez__dialog .oez__emergency,
.services-list .oez__dialog .oez__note { margin: 4px 22px 12px !important; font-size: 13px; }
.services-list .oez__dialog-foot {
  margin: 0 !important;
  padding: 14px 22px 20px;
  border-top: 1px solid #eef1ee;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ab-muted);
}
.services-list .oez__dialog-foot a { color: var(--ab-green-dark) !important; font-weight: 600; }
@media (max-width: 767.98px) {
  .services-list .oez__trigger { width: auto; align-self: flex-start; }
}

/* ---------- Tablet / Mobil ---------- */
@media (max-width: 991.98px) {
  .services-list { padding: 0 16px; }
}
@media (max-width: 767.98px) {
  .services-list { row-gap: 14px !important; padding: 0; }
  .services-list > .sppb-dynamic-content-collection__item {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    column-gap: 14px;
    align-items: center;
    text-align: left;
    padding: 16px !important;
  }
  .services-list > .sppb-dynamic-content-collection__item > * { min-width: 0; }
  .services-list > .sppb-dynamic-content-collection__item:hover { transform: none; }
  .services-list .addon-root-dynamic-content-image { grid-row: 1 / span 2; }
  .services-list .sppb-dynamic-content-image-wrapper { width: 56px !important; margin: 0 !important; }
  .services-list p.sppb-dynamic-content-text {
    font-size: 18px !important;
    text-align: left !important;
    margin: 0 0 6px !important;
    padding-bottom: 0 !important;
  }
  .services-list p.sppb-dynamic-content-text::after { display: none; }
  .services-list div.sppb-dynamic-content-text {
    text-align: left !important;
    justify-content: flex-start;
    font-size: 15px !important;
  }
  .services-list .sppb-dynamic-content__is-rich-text > p:has(> a) { justify-content: flex-start; padding-top: 12px; }
  .services-list > .sppb-dynamic-content-collection__item > .sppb-addon-wrapper:last-child div.sppb-dynamic-content-text { align-items: stretch !important; }
}

@media (prefers-reduced-motion: reduce) {
  .services-list *, .services-list > * { transition: none !important; animation: none !important; }
}


/* ---------------------------------------------------------
   5) TEAM-RASTER "Über uns"
   Mobil: 15 Personen untereinander (~7.500px Scrollen).
   Lösung: 2 Spalten Handy, 3 Spalten Tablet.
   --------------------------------------------------------- */
#section-id-c19736c8-2493-45ec-9587-c172f21e6ca6 .sppb-row {
    row-gap: 24px;
}
@media (max-width: 991.98px) {
    #section-id-c19736c8-2493-45ec-9587-c172f21e6ca6 .sppb-row > .sppb-row-column:not(:first-child) {
        flex: 0 0 33.333% !important;
        max-width: 33.333% !important;
        width: 33.333% !important;
    }
}
@media (max-width: 575.98px) {
    #section-id-c19736c8-2493-45ec-9587-c172f21e6ca6 .sppb-row > .sppb-row-column:not(:first-child) {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
}
.sppb-addon-person .sppb-person-image img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 16px;
}
@media (max-width: 575.98px) {
    .sppb-addon-person .sppb-person-name        { font-size: 15px !important; margin-top: 8px; }
    .sppb-addon-person .sppb-person-designation { font-size: 13px !important; }
}


/* ---------------------------------------------------------
   6) "WIR SPRECHEN 6 SPRACHEN"
   45px auf dem Handy zu groß; Tablet nur halbe Breite.
   --------------------------------------------------------- */
#sppb-addon-8d581cd7-c13b-40df-ad76-61f647b2be52 .sppb-addon-title,
#sppb-addon-8d581cd7-c13b-40df-ad76-61f647b2be52 .sppb-addon-animated-heading,
#sppb-addon-8d581cd7-c13b-40df-ad76-61f647b2be52 span {
    font-size: clamp(28px, 7vw, 45px) !important;
    line-height: 1.15 !important;
}
@media (min-width: 576px) and (max-width: 991.98px) {
    #section-id-1770285574954 .sppb-row > .sppb-row-column {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}


/* ---------------------------------------------------------
   7) SERVICELEISTUNGEN – Notfall-Fix für 2 Feature-Boxen
   (Titel stehen auf 200/180/100/80px). Richtig ist, die Werte
   im Page Builder zu korrigieren – siehe Bericht.
   --------------------------------------------------------- */
#sppb-addon-4VOe83lEWqWytBuRRrdD0 .sppb-feature-box-title,
#sppb-addon-yQcjoK9LBPcLHubDQtxIM .sppb-feature-box-title,
#sppb-addon-4VOe83lEWqWytBuRRrdD0 .sppb-addon-title,
#sppb-addon-yQcjoK9LBPcLHubDQtxIM .sppb-addon-title {
    font-size: 18px !important;
    line-height: 1.3 !important;
}


/* ---------------------------------------------------------
   8) FOOTER – Touch-Ziele & Scroll-Up-Button
   --------------------------------------------------------- */
@media (max-width: 767.98px) {
    #sp-footer { text-align: center; padding-bottom: 72px; }
    #sp-footer [id^="sppb-addon-"],
    #sp-footer .sppb-addon-content,
    #sp-footer p { text-align: center !important; }
    #sp-footer .sppb-icons-group-list { justify-content: center !important; }
    #sp-footer a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 0 6px;
    }
    #sp-footer .sppb-addon-single-image-container img { max-width: 180px; margin: 0 auto; }
    .sp-scroll-up { right: 16px !important; bottom: 16px !important; }
}


/* ---------------------------------------------------------
   9) Bewegung reduzieren (Barrierefreiheit)
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}