/* Helferhand Morina – WordPress polish v7 */

/* WP admin bar */
body.admin-bar { padding-top: 32px; }
@media (max-width: 782px) { body.admin-bar { padding-top: 46px; } }

/* Abstand zwischen Kontakt-Sektion und Footer: der zusätzliche
   Innenabstand unten für #kontakt wird direkt bei den anderen
   mobilen/Tablet-Anpassungen im Seitenkopf gesetzt (Datei _body.html),
   damit auf Mobilgeräten sichtbarer Platz zwischen der Kontakt-Sektion
   und dem Footer entsteht. */

/* Einheitliche Typografie über die WordPress-Theme-Standards hinweg erzwingen */
html, body, #page, .site, main, p, span, li, a, button, input, textarea, label, div {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif !important;
}
h1, h2, h3, h4, .font-serif, .font-serif * {
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif !important;
}
.hh-m-cta, button, .uppercase, [class*="uppercase"] {
  letter-spacing: inherit;
}

/* ============================================================
   HERO SYSTEM v7 – zentrale, browserstabile Hero-Regeln
   Desktop, Tablet und Mobile sind getrennt. Hero-Inline-Styles
   werden dadurch nicht mehr benötigt.
   ============================================================ */
:root {
  --hh-header-mobile: 96px;
  --hh-header-tablet: 108px;
  --hh-header-desktop: 108px;
  --hh-hero-bg: #f3efe4;
  --hh-hero-bg-soft: #fbf7ef;
  --hh-hero-heading: #50533D;
  --hh-hero-copy: #7C7B6B;
  --hh-hero-green: #7A8458;
  --hh-hero-gold: #C4A882;
  /* Unterseiten-Hero (Alltagshilfe = verbindliche Referenz): eine zentrale
     Overlay-Stärke für alle Unterseiten, damit keine Seite individuell
     heller/dunkler oder ausgewaschener wirkt als die anderen. */
  --hh-subpage-hero-overlay-color: 247, 244, 236;
  --hh-subpage-hero-overlay-edge: 0.39;
  --hh-subpage-hero-overlay-mid: 0.21;
}

/* Gebäudereinigung in Bildern: eigenes, etwas höheres Seitenverhältnis
   für diesen einen Slider, da die Fotos hochformatig sind und beim
   bisherigen breiten 16:10-Zuschnitt zu viel vom eigentlichen Bild
   (Kopf, Logo, Tätigkeit) verloren ging. Nur für diesen Slider genutzt. */
.aspect-\[3\/4\] { aspect-ratio: 3 / 4; }

/* Alle vier "in Bildern"-Slider (Alltagshilfe, Betreuung, Hauswirtschaft,
   Gebäudereinigung): auf normalen Laptop-Bildschirmen (ab 1024px Breite)
   sollen sie einheitlich gleich groß dargestellt werden – in der Breite, die
   sich bei Hauswirtschaft bereits bewährt hat. Seitenverhältnis, Bildausschnitt
   und Bildqualität bleiben je Sektion unverändert (dadurch leicht
   unterschiedliche Höhen je nach Bildformat); es wird nur die Breite
   vereinheitlicht. Tablet und Mobile bleiben von dieser Regel unberührt. */
@media (min-width: 1024px) {
  .hh-gallery-compact-desktop {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }
  /* Alltagshilfe & Betreuung: bei 600px wirkte die Sektion auf Wunsch der
     Kundin zu klein/leer. Nur für diese zwei Slider etwas breiter, alle
     anderen Slider bleiben bei 600px unverändert. */
  .hh-gallery-wide-desktop {
    max-width: 820px;
  }
  /* Gebäudereinigung: die Fotos sind hochformatig (3:4). Bei gleicher Breite
     wie die anderen drei Slider (600px) wäre die Sektion sehr hoch und würde
     auf einem normalen Laptop nicht mehr komplett ohne Scrollen sichtbar sein.
     Deshalb hier – nur für diesen Slider, nur auf Desktop – eine feste Höhe
     statt des Seitenverhältnisses, kombiniert mit object-fit:contain, damit
     das komplette Bild ohne Beschnitt sichtbar bleibt (ggf. mit etwas
     Kartenhintergrund links/rechts statt eines aggressiven Zuschnitts). */
  .hh-gallery-contain-desktop .aspect-\[3\/4\] {
    aspect-ratio: unset;
    height: 600px;
  }
  .hh-gallery-contain-desktop .aspect-\[3\/4\] img {
    object-fit: contain;
  }
}

/* ============================================================
   UNTERSEITEN-HERO SYSTEM – gemeinsame, zentrale Klassen für alle
   Leistungs-Unterseiten (Alltagshilfe, Betreuung, Hauswirtschaft,
   Gebäudereinigung). Nur das Hintergrundbild und dessen vertikale
   Bildausrichtung unterscheiden sich pro Seite (inline gesetzt);
   Größe, Abstände, Overlay-Farbe und Overlay-Deckkraft kommen aus
   genau dieser einen Stelle, nicht aus Inline-Styles pro Seite. */
.hh-subpage-hero-bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
}
.hh-subpage-hero-overlay {
  /* Sehr dezentes, dunkles Overlay: Bild bleibt klar sichtbar, kein
     milchiger/weißer Schleier, nur so viel Abdunklung wie für den
     Kontrast der Schrift nötig. */
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.22) 0%,
    rgba(0, 0, 0, 0.12) 40%,
    rgba(0, 0, 0, 0.16) 100%
  );
}
.hh-subpage-hero-title {
  /* Schwarze Umrandung statt weißer Umrandung: die Schriftfarbe selbst
     bleibt unverändert, nur ein dunkler Rand sorgt für genug Kontrast
     vor dem Hintergrundfoto. Über -webkit-text-stroke gelöst: das
     zeichnet einen echten, gleichmäßigen Umriss entlang der Buchstaben-
     kontur. Die vorherige Variante mit gestapelten text-shadow-Kopien
     wirkte bei dieser Serifenschrift ausgefranst/verpixelt, besonders
     beim Hineinzoomen – ein echter Stroke ist sauber in jeder Größe. */
  -webkit-text-stroke: 3px rgba(0, 0, 0, 0.75);
  text-stroke: 3px rgba(0, 0, 0, 0.75);
  paint-order: stroke fill;
}
.hh-subpage-hero-copy {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95),
    0 2px 5px rgba(0, 0, 0, 0.85),
    0 4px 12px rgba(0, 0, 0, 0.65);
}

/* Unterseiten-Hero: oben etwas mehr Platz als unten, damit der Abstand
   zwischen Header/Bildoberkante und dem Badge genauso groß wirkt wie
   der Abstand zwischen den Buttons und der Bildunterkante. */
.hh-subpage-hero-section {
  padding-top: 4.5rem !important;
  padding-bottom: 4rem !important;
}
@media (min-width: 640px) {
  .hh-subpage-hero-section {
    padding-top: 7.5rem !important;
    padding-bottom: 6rem !important;
  }
}

/* Alltagshilfe-Hero, nur mobile Ansicht: Bei diesem Foto liegen die Gesichter
   sehr weit oben im Bild, dadurch saßen Badge und Überschrift genau über den
   Gesichtern. Zusätzlicher Abstand oben schiebt den Text nach unten, sodass
   beide Gesichter frei über dem Badge sichtbar bleiben. Nur diese Unterseite,
   nur unterhalb 640px – Desktop/Tablet und alle anderen Unterseiten sind
   davon nicht betroffen. */
@media (max-width: 639px) {
  .hh-hero-alltagshilfe-mobile-fix {
    padding-top: calc(4.5rem + 80px) !important;
  }
  /* Badge "Leistung · Alltagshilfe": nur mobile, nur diese Unterseite –
     etwas kleiner, damit mehr vom Hintergrundfoto (Gesichter) zu sehen ist. */
  .hh-hero-badge-alltagshilfe-mobile {
    padding: 0.3rem 0.7rem !important;
    font-size: 9.5px !important;
    gap: 0.3rem !important;
  }
  .hh-hero-badge-alltagshilfe-mobile svg {
    width: 11px !important;
    height: 11px !important;
  }
}

.hh-site-header {
  min-height: var(--hh-header-mobile);
  background: rgba(245, 239, 228, .88);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.hh-site-header > div { min-height: 80px; }
.hh-site-header img[alt*="Helferhand"] {
  width: auto;
  height: auto;
  max-width: 176px;
  max-height: 52px;
  object-fit: contain;
}
.hh-page-main { padding-top: var(--hh-header-mobile); }
.hh-mobile-root {
  width: 100%;
  max-width: 1023px;
  margin: 0 auto;
  overflow: hidden;
  background: linear-gradient(180deg, #fbf7ef 0%, #f8f1e8 100%);
  color: #13283a;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}
.hh-hero { position: relative; isolation: isolate; overflow: hidden; }

/* Home Hero – Mobile/Tablet share markup, rules stay separated below */
.hh-home-hero { background: var(--hh-hero-bg-soft); }
.hh-home-hero-media,
.hh-home-hero-overlay,
.hh-home-hero-fade,
.hh-home-hero-img { position: absolute; inset: 0; }
.hh-home-hero-media { z-index: 1; overflow: hidden; }
.hh-home-hero--mobile .hh-home-hero-media {
  background-image: url('../img/hero-hands.jpg');
  background-repeat: no-repeat;
}
.hh-home-hero-overlay { z-index: 2; pointer-events: none; }
.hh-home-hero-fade { z-index: 3; pointer-events: none; background: transparent; }
.hh-home-hero-content { position: relative; z-index: 4; }
.hh-home-hero-kicker {
  margin: 0;
  color: var(--hh-hero-heading);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .19em;
  text-transform: uppercase;
  white-space: nowrap;
}
.hh-home-hero-title {
  margin: 0;
  color: var(--hh-hero-heading);
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-weight: 600;
}
.hh-home-hero-title span { display: block; white-space: nowrap; }
.hh-home-hero-divider { height: 2px; background: var(--hh-hero-heading); }
.hh-home-hero-copy {
  margin: 0;
  color: var(--hh-hero-copy);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  font-weight: 500;
}

/* Mobile Hero: bis 640px */
@media (max-width: 640px) {
  .hh-site-header { min-height: var(--hh-header-mobile); }
  .hh-page-main { padding-top: var(--hh-header-mobile); }
  .hh-home-hero--mobile {
    min-height: 392px;
    margin-top: var(--hh-header-mobile);
  }
  .hh-home-hero--mobile .hh-home-hero-media {
    background-size: min(118vw, 520px) auto;
    background-position: right -30px top 0;
  }
  .hh-home-hero--mobile .hh-home-hero-overlay {
    background: linear-gradient(90deg, rgba(248,245,239,.99) 0%, rgba(248,245,239,.92) 35%, rgba(248,245,239,.58) 64%, rgba(248,245,239,.18) 86%, rgba(248,245,239,0) 100%);
  }
  .hh-home-hero--mobile .hh-home-hero-content {
    width: 65%;
    padding: 30px 0 24px 18px;
  }
  .hh-home-hero--mobile .hh-home-hero-kicker { margin-bottom: 14px; font-size: 8px; }
  .hh-home-hero--mobile .hh-home-hero-title { font-size: 34px; line-height: .96; letter-spacing: 0; }
  .hh-home-hero--mobile .hh-home-hero-divider { width: 34px; margin: 15px 0; }
  .hh-home-hero--mobile .hh-home-hero-copy { max-width: 25rem; font-size: 10.5px; line-height: 1.55; }
}

/* Tablet Hero: 641px bis 1023px */
@media (min-width: 641px) and (max-width: 1023.98px) {
  .hh-site-header { min-height: var(--hh-header-tablet); }
  .hh-site-header img[alt*="Helferhand"] { max-width: 230px; max-height: 70px; }
  .hh-page-main { padding-top: var(--hh-header-tablet); }
  .hh-home-hero--mobile {
    min-height: 620px;
    margin-top: var(--hh-header-tablet);
  }
  .hh-home-hero--mobile .hh-home-hero-media {
    background-size: min(96vw, 850px) auto;
    background-position: right -20px top 0;
  }
  .hh-home-hero--mobile .hh-home-hero-overlay {
    background: linear-gradient(90deg, rgba(248,245,239,.99) 0%, rgba(248,245,239,.88) 32%, rgba(248,245,239,.54) 60%, rgba(248,245,239,.16) 84%, rgba(248,245,239,0) 100%);
  }
  .hh-home-hero--mobile .hh-home-hero-content {
    width: 60%;
    padding: 56px 0 42px clamp(34px, 6vw, 66px);
  }
  .hh-home-hero--mobile .hh-home-hero-kicker { margin-bottom: 24px; font-size: clamp(12px, 1.7vw, 17px); }
  .hh-home-hero--mobile .hh-home-hero-title { font-size: clamp(48px, 6vw, 68px); line-height: .96; letter-spacing: 0; }
  .hh-home-hero--mobile .hh-home-hero-divider { width: clamp(44px, 6vw, 56px); margin: 26px 0 24px; }
  .hh-home-hero--mobile .hh-home-hero-copy { max-width: 395px; font-size: clamp(14px, 1.8vw, 18px); line-height: 1.58; }
}

/* Desktop Hero: ab 1024px */
@media (min-width: 1024px) {
  .hh-site-header { min-height: var(--hh-header-desktop); }
  .hh-site-header img[alt*="Helferhand"] { max-width: 252px; max-height: 76px; }
  .hh-page-main { padding-top: var(--hh-header-desktop); }
  .hh-home-hero--desktop { min-height: calc(100vh - var(--hh-header-desktop)); margin-top: var(--hh-header-desktop); background: var(--hh-hero-bg); }
  .hh-home-hero-grid {
    display: grid;
    min-height: calc(100vh - var(--hh-header-desktop));
    grid-template-columns: 48% 52%;
  }
  .hh-home-hero--desktop .hh-home-hero-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem 2rem 6rem 5rem;
  }
  .hh-home-hero--desktop .hh-home-hero-kicker { margin-bottom: 1.25rem; font-size: 15px; letter-spacing: .34em; }
  .hh-home-hero--desktop .hh-home-hero-title { font-size: 56px; line-height: 1.04; letter-spacing: 0; }
  .hh-home-hero--desktop .hh-home-hero-divider { width: 4rem; margin: 2rem 0 0; }
  .hh-home-hero--desktop .hh-home-hero-copy { max-width: 32rem; margin-top: 2rem; font-size: 20px; line-height: 1.7; }
  .hh-home-hero--desktop .hh-home-hero-media { position: relative; inset: auto; min-height: calc(100vh - var(--hh-header-desktop)); background: var(--hh-hero-bg); }
  .hh-home-hero-img { width: 100%; height: 100%; object-fit: cover; object-position: 46% 47%; }
  .hh-home-hero--desktop .hh-home-hero-overlay {
    background: linear-gradient(to right, rgba(243,239,228,1) 0%, rgba(243,239,228,.96) 22%, rgba(243,239,228,.72) 46%, rgba(243,239,228,.38) 68%, rgba(243,239,228,.12) 88%, rgba(243,239,228,0) 100%);
  }
}
@media (min-width: 1280px) {
  .hh-home-hero-grid { grid-template-columns: 46% 54%; }
  .hh-home-hero--desktop .hh-home-hero-content { padding-left: 7rem; padding-right: 2.5rem; }
  .hh-home-hero--desktop .hh-home-hero-title { font-size: 62px; }
}
@media (min-width: 1536px) {
  .hh-home-hero-grid { grid-template-columns: 45% 55%; }
  .hh-home-hero--desktop .hh-home-hero-content { padding-left: 9rem; }
  .hh-home-hero--desktop .hh-home-hero-title { font-size: 70px; }
}

/* Service-Unterseiten Hero – gleiche Struktur, eigene Breakpoints */
.hh-service-hero { background: rgba(236, 228, 211, .4); }
.hh-service-hero__glow {
  position: absolute;
  pointer-events: none;
  width: 18rem;
  height: 18rem;
  border-radius: 999px;
  filter: blur(64px);
  opacity: .16;
}
.hh-service-hero__glow--left { left: -6rem; top: 2.5rem; background: var(--hh-hero-green); }
.hh-service-hero__glow--right { right: -6rem; bottom: 0; background: var(--hh-hero-gold); }
.hh-service-hero__inner { position: relative; max-width: 48rem; margin: 0 auto; padding-inline: 1.25rem; text-align: center; }
.hh-service-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border: 1px solid rgba(122,132,88,.34);
  border-radius: 999px;
  background: #fbf7ef;
  padding: .375rem 1rem;
  color: var(--hh-hero-green);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .18em;
  text-transform: uppercase;
  box-shadow: 0 16px 40px -24px rgba(122,132,88,.28);
}
.hh-service-hero--betreuung .hh-service-hero__eyebrow { color: var(--hh-hero-gold); border-color: rgba(196,168,130,.34); }
.hh-service-hero__title { margin: 1.25rem 0 0; color: var(--hh-hero-heading); font-size: 34px; font-weight: 600; line-height: 1.12; letter-spacing: 0; }
.hh-service-hero__copy { max-width: 42rem; margin: 1rem auto 0; color: var(--hh-hero-copy); font-size: 15px; line-height: 1.65; }
.hh-service-hero__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem; margin-top: 1.75rem; }
.hh-service-hero__primary-cta,
.hh-service-hero__secondary-cta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border-radius: 999px;
  padding: .75rem 1.25rem;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  transition: transform .18s ease;
}
.hh-service-hero__primary-cta { background: var(--hh-hero-green); color: #fff; box-shadow: 0 16px 40px -24px rgba(122,132,88,.45); }
.hh-service-hero--betreuung .hh-service-hero__primary-cta { background: var(--hh-hero-gold); }
.hh-service-hero__secondary-cta { border: 1px solid #d8cdb5; background: #fbf7ef; color: #484A33; }
.hh-service-hero__primary-cta:hover,
.hh-service-hero__secondary-cta:hover { transform: translateY(-2px); }
@media (max-width: 640px) {
  .hh-service-hero { padding: 3rem 0 3.5rem; }
  .hh-service-hero__title { font-size: 34px; }
}
@media (min-width: 641px) and (max-width: 1023.98px) {
  .hh-service-hero { padding: 4.5rem 0 5.5rem; }
  .hh-service-hero__title { font-size: 48px; }
  .hh-service-hero__copy { font-size: 18px; }
}
@media (min-width: 1024px) {
  .hh-service-hero { padding: 6rem 0; }
  .hh-service-hero__title { font-size: 56px; }
  .hh-service-hero__copy { font-size: 18px; }
}

/* Aus dem alten Inline-Block ausgelagerte mobile Detailkorrekturen – ohne Hero-Regeln */
@media (max-width: 640px) {
  .hh-mobile-root .hh-card { grid-template-columns: 58px 1fr !important; column-gap: 10px !important; padding: 12px 10px !important; min-height: 0 !important; border-radius: 12px !important; }
  .hh-mobile-root .hh-card-icon { width: 58px !important; height: 58px !important; }
  .hh-mobile-root .hh-card-icon img { width: 80% !important; height: 80% !important; }
  .hh-mobile-root .hh-card h3 { font-size: 9.6px !important; white-space: normal !important; word-break: normal !important; letter-spacing: 0 !important; line-height: 1.1 !important; margin-bottom: 3px !important; color: #50533D !important; }
  .hh-mobile-root .hh-card p { font-size: 8.5px !important; line-height: 1.32 !important; color: #7C7B6B !important; }
  .hh-mobile-root .hh-card p span { display: block !important; white-space: nowrap !important; }
  .hh-mobile-root .hh-card p span br { display: none !important; }
  .hh-mobile-root .hh-cta { background: #6b7a52 !important; grid-template-columns: 46px 1fr 104px !important; gap: 12px !important; padding: 8px 14px 8px 9px !important; min-height: 66px !important; }
  .hh-mobile-root .hh-cta-phone { width: 46px !important; height: 46px !important; }
  .hh-mobile-root .hh-cta-text h3 { font-size: 11.5px !important; white-space: normal !important; margin-bottom: 2px !important; }
  .hh-mobile-root .hh-cta-text p { font-size: 8px !important; line-height: 1.28 !important; }
  .hh-mobile-root .hh-callbox { height: 46px !important; padding: 4px 11px 4px 7px !important; grid-template-columns: 20px 1fr !important; gap: 5px !important; }
  .hh-mobile-root .hh-callbox img { width: 19px !important; height: 19px !important; }
  .hh-mobile-root .hh-number { font-size: 9px !important; letter-spacing: 0 !important; color: #6b7a52 !important; }
  .hh-mobile-root .hh-now { font-size: 8.5px !important; color: #6b7a52 !important; }
  .hh-mobile-root .hh-trust { padding: 18px 18px 22px !important; }
  .hh-mobile-root .hh-trust-item { padding: 0 6px !important; }
  .hh-mobile-root .hh-trust-item > div:first-child { height: 22px !important; margin-bottom: 6px !important; }
  .hh-mobile-root .hh-trust h4 { white-space: nowrap !important; font-size: 10px !important; line-height: 1.05 !important; letter-spacing: 0 !important; color: #50533D !important; }
  .hh-mobile-root .hh-trust p { font-size: 8px !important; line-height: 1.3 !important; max-width: 20ch !important; color: #7C7B6B !important; }
  .hh-mobile-root .hh-ansp { padding: 14px 14px 22px !important; }
  .hh-mobile-root .hh-ansp-name { white-space: nowrap !important; font-size: 11px !important; }
  .hh-mobile-root .hh-ansp-role { font-size: 9px !important; }
  .hh-mobile-root .hh-ansp-card { padding: 9px !important; grid-template-columns: 52px 1fr !important; gap: 9px !important; }
  .hh-mobile-root .hh-ansp-img { width: 52px !important; height: 52px !important; }
  .hh-mobile-root h2 { color: #50533D !important; }
}
@media (min-width: 641px) and (max-width: 1023.98px) {
  .hh-mobile-root .hh-card-icon { width: clamp(68px,12vw,108px) !important; height: clamp(68px,12vw,108px) !important; }
  .hh-mobile-root .hh-card-icon img { width: 72% !important; height: 72% !important; }
  .hh-mobile-root .hh-card h3 { font-size: clamp(14px,2.1vw,20px) !important; color: #50533D !important; }
  .hh-mobile-root .hh-card p { color: #7C7B6B !important; }
  .hh-mobile-root .hh-cta { background: #6b7a52 !important; gap: clamp(18px,3.4vw,32px) !important; padding-right: clamp(14px,2.6vw,26px) !important; }
  .hh-mobile-root .hh-cta-phone { width: clamp(56px,9vw,90px) !important; height: clamp(56px,9vw,90px) !important; }
  .hh-mobile-root .hh-callbox { padding-right: clamp(14px,2.6vw,26px) !important; }
  .hh-mobile-root .hh-callbox img { width: clamp(26px,4.5vw,40px) !important; height: clamp(26px,4.5vw,40px) !important; }
  .hh-mobile-root .hh-trust-item > div:first-child { height: clamp(32px,5vw,52px) !important; }
  .hh-mobile-root .hh-trust h4 { color: #50533D !important; }
  .hh-mobile-root .hh-trust p { color: #7C7B6B !important; }
  .hh-mobile-root h2 { color: #50533D !important; }
}

/* Make sure responsive visibility works regardless of WP base CSS */
.hidden { display: none !important; }
@media (min-width: 1024px) {
  .lg\:hidden { display: none !important; }
  .lg\:flex  { display: flex !important; }
  .lg\:block { display: block !important; }
  .hidden.lg\:flex  { display: flex !important; }
  .hidden.lg\:block { display: block !important; }
}
@media (max-width: 1023.98px) {
  .lg\:hidden:not(.flex):not(.inline-flex):not(.hidden) { display: block !important; }
  .flex.lg\:hidden:not(.hidden) { display: flex !important; }
  .inline-flex.lg\:hidden:not(.hidden) { display: inline-flex !important; }
}

/* Reveal-on-scroll fail-safe */
.reveal { opacity: 1; }
.reveal.in-view { opacity: 1; }

/* Startseite: Trustbar direkt unter dem Hero (nur Desktop-Layout betroffen) –
   entfernt ausschließlich für diese eine Sektion den ungewollten Versatz
   (transform: translateY(24px)), der durch die Reveal-Animation entsteht.
   Betrifft bewusst keine andere Sektion der Seite. */
#top + .reveal.border-y.bg-secondary\/40 { transform: none; }

/* Startseite: "Unsere Leistungen" (Alles aus einer Hand) direkt unter der
   Trustbar (nur Desktop-Layout betroffen) – derselbe Versatz-Fehler wie oben,
   nur an der nächsten Sektionsgrenze. Entfernt den ungewollten weißen Abstand
   zwischen Trustbar und dieser Sektion. Betrifft bewusst keine andere Sektion. */
#leistungen.reveal { transform: none; }

/* Icon hover micro-interactions */
.service-card:hover svg, [data-hover-icon]:hover svg,
article:hover svg, .hh-card:hover svg {
  transform: scale(1.08) rotate(-2deg);
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
a:hover svg, button:hover svg { transition: transform .25s ease; }

/* ---------- Mobile menu overlay ---------- */
#hh-mobile-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: none;
}
#hh-mobile-overlay.open { display: block; }
.hh-m-backdrop {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  background: rgba(15, 24, 23, .45);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.hh-m-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(360px, 86vw);
  background: #fbf7ef;
  box-shadow: -12px 0 40px rgba(0,0,0,.18);
  padding: 24px 22px 28px;
  display: flex; flex-direction: column;
  animation: hhSlideIn .25s ease-out;
}
@keyframes hhSlideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
.hh-m-close {
  align-self: flex-end;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(80,83,61,.2);
  background: #fff;
  color: #50533D;
  display: grid; place-items: center;
  cursor: pointer;
}
.hh-m-nav {
  margin-top: 18px;
  display: flex; flex-direction: column; gap: 4px;
}
.hh-m-nav a {
  display: block;
  padding: 14px 8px;
  font-size: 17px;
  font-weight: 500;
  color: #50533D !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(80,83,61,.1);
}
.hh-m-nav a:hover { color: #7a8a5a !important; }
.hh-m-nav a.hh-m-sub {
  padding-left: 24px;
  font-size: 15px;
  color: #6f725d !important;
  background: rgba(122, 132, 88, .06);
}
.hh-m-cta {
  margin-top: 22px;
  display: block;
  text-align: center;
  background: #7a8a5a;
  color: #fff !important;
  padding: 14px 18px;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none !important;
}

/* ---------- FAQ accordion: enable expanding wrapper ---------- */
#faq .grid.transition-all { transition: grid-template-rows .4s ease, opacity .35s ease; }
#faq .grid-rows-\[0fr\]  { grid-template-rows: 0fr !important; opacity: 0; }
#faq .grid-rows-\[1fr\]  { grid-template-rows: 1fr !important; opacity: 1; }
#faq button[aria-expanded] .grid > p { min-height: 0; }
#faq button[aria-expanded="true"] { box-shadow: 0 12px 32px -8px rgba(0,0,0,0.12); }

/* ---------- Einsatzgebiete: echte Google Maps im ursprünglichen Design-Look ---------- */
#gebiete .rounded-\[2rem\] { border-radius: 30px !important; }
#gebiete .grid.md\:grid-cols-\[340px_1fr\] { grid-template-columns: minmax(300px, 360px) minmax(0, 1fr) !important; }
#gebiete .grid.md\:grid-cols-\[340px_1fr\] > div:first-child {
  justify-content: center !important;
  padding: 46px 30px !important;
  gap: 18px !important;
}
#gebiete .grid.md\:grid-cols-\[340px_1fr\] > div:first-child .flex.items-start {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}
#gebiete .grid.md\:grid-cols-\[340px_1fr\] > div:first-child > .flex.items-start:first-child {
  padding-top: 0 !important;
  padding-bottom: 12px !important;
}
#gebiete .grid.md\:grid-cols-\[340px_1fr\] > div:first-child .size-12 {
  width: 56px !important;
  height: 56px !important;
}
#gebiete .grid.md\:grid-cols-\[340px_1fr\] > div:first-child svg.size-5 {
  width: 22px !important;
  height: 22px !important;
}
#gebiete .grid.md\:grid-cols-\[340px_1fr\] > div:first-child p.font-serif {
  font-size: 25px !important;
  line-height: 1.18 !important;
}
#gebiete .grid.md\:grid-cols-\[340px_1fr\] > div:first-child p.font-semibold {
  font-size: 18px !important;
  line-height: 1.25 !important;
}
#gebiete .grid.md\:grid-cols-\[340px_1fr\] > div:first-child p.text-sm {
  font-size: 15.5px !important;
  line-height: 1.42 !important;
}
#gebiete .hh-google-map,
#gebiete [aria-label="Karte Einsatzgebiete"] {
  position: relative;
  min-height: 700px !important;
  height: 700px !important;
  overflow: hidden;
  background: #dfead5;
}
#gebiete .hh-google-map::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(176, 211, 158, .32);
  mix-blend-mode: multiply;
}
#gebiete .hh-google-map .gm-style { font-family: 'Inter', system-ui, sans-serif !important; }
#gebiete .hh-google-map .gm-style-iw-c { border-radius: 10px !important; box-shadow: 0 10px 28px rgba(80,83,61,.18) !important; }
#gebiete .hh-map-iframe { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; border: 0; display: block; filter: saturate(.78) hue-rotate(28deg) brightness(1.03); pointer-events: none; }
/* Maskiert die "Open in Maps"-Pille des iframe oben-links */
#gebiete .hh-google-map::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 170px; height: 38px;
  z-index: 3;
  background: linear-gradient(135deg, #e8f0df 60%, rgba(232,240,223,0));
  pointer-events: none;
}
#gebiete .hh-map-overlay { position: absolute; inset: 0; z-index: 2; pointer-events: auto; opacity: 1; }
#gebiete .hh-map-overlay svg { width: 100%; height: 100%; display: block; }
#gebiete .hh-map-overlay iframe, #gebiete .hh-map-overlay path, #gebiete .hh-map-overlay circle, #gebiete .hh-map-overlay text { -webkit-tap-highlight-color: transparent; }
/* Google-Attribution unten-links sichtbar lassen */
#gebiete .hh-google-map .hh-attribution {
  position: absolute;
  left: 8px; bottom: 6px;
  z-index: 4;
  font: 600 11px/1 'Inter', system-ui, sans-serif;
  color: #4a5742;
  letter-spacing: .02em;
  opacity: .85;
  pointer-events: none;
}

#gebiete .hh-map-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #50533D;
  font-size: 14px;
  font-weight: 700;
  background: linear-gradient(135deg, #e8f0df, #cbdcbf);
}
#gebiete .hh-map-info { min-width: 220px; padding: 22px 20px 16px; color: #1f3828; font: 700 18px/1.35 'Inter', system-ui, sans-serif; }
#gebiete .hh-map-info strong { display: block; font-size: 22px; margin-bottom: 8px; }
#gebiete .hh-map-info a { color: #256b42 !important; text-decoration: underline !important; font-size: 17px; }
@media (max-width: 1023.98px) {
  #gebiete .grid.md\:grid-cols-\[340px_1fr\] { grid-template-columns: 1fr !important; }
  #gebiete .grid.md\:grid-cols-\[340px_1fr\] > div:first-child { padding: 28px !important; }
  #gebiete .hh-google-map,
  #gebiete [aria-label="Karte Einsatzgebiete"] { min-height: 520px !important; height: 520px !important; }
}
@media (max-width: 640px) {
  #gebiete .grid.md\:grid-cols-\[340px_1fr\] > div:first-child { padding: 22px !important; }
  #gebiete .hh-google-map,
  #gebiete [aria-label="Karte Einsatzgebiete"] { min-height: 430px !important; height: 430px !important; }
}

/* ---------- Tablet: 3 "Warum Helferhand" cards in one row ---------- */
@media (min-width: 768px) and (max-width: 1023.98px) {
  #ueber .grid.md\:grid-cols-2 { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
  #ueber .grid.lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
  /* Kontakt cards: equal width with the others */
  #kontakt .grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 16px !important; }
  #kontakt .grid > * { width: 100% !important; max-width: 100% !important; }
}
@media (max-width: 767.98px) {
  #kontakt .grid > * { width: 100% !important; max-width: 100% !important; }
}

/* ---------- Single-line headlines on desktop (Firefox 121+/Safari 15.4+/Chrome 105+) ---------- */
@supports selector(:has(*)) {
  @media (min-width: 1024px) {
    /* "Das sagen unsere Kunden." – einzeilig */
    section h2.font-serif:has(> span > .text-brand-coral) { white-space: nowrap; }
  }
}

/* Mobile menu button visible */
button[aria-label="Menü öffnen"] { cursor: pointer; }

/* ---------- Desktop Leistungen Dropdown: immer sichtbar bei Hover/Fokus ---------- */
@media (min-width: 1024px) {
  header nav .hh-service-menu,
  header nav .group.relative:has(> a[href*="leistungen"]) {
    position: relative !important;
  }
  header nav .hh-service-menu > a,
  header nav .group.relative:has(> a[href*="leistungen"]) > a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    color: rgba(80, 83, 61, .88) !important;
    cursor: pointer !important;
  }
  header nav .hh-service-menu:hover > a,
  header nav .hh-service-menu:focus-within > a,
  header nav .group.relative:has(> a[href*="leistungen"]):hover > a,
  header nav .group.relative:has(> a[href*="leistungen"]):focus-within > a {
    color: #7a8458 !important;
  }
  header nav .hh-service-dropdown,
  header nav .group.relative:has(> a[href*="leistungen"]) > div[class*="top-full"] {
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    width: 256px !important;
    padding-top: 12px !important;
    z-index: 9998 !important;
    transform: translateX(-50%) !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity .15s ease, visibility .15s ease !important;
  }
  header nav .hh-service-menu:hover > .hh-service-dropdown,
  header nav .hh-service-menu:focus-within > .hh-service-dropdown,
  header nav .group.relative:has(> a[href*="leistungen"]):hover > div[class*="top-full"],
  header nav .group.relative:has(> a[href*="leistungen"]):focus-within > div[class*="top-full"] {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  header nav .hh-service-dropdown-panel,
  header nav .group.relative:has(> a[href*="leistungen"]) > div[class*="top-full"] > div {
    overflow: hidden !important;
    border: 1px solid rgba(122, 132, 88, .28) !important;
    border-radius: 18px !important;
    background: #fbf7ef !important;
    box-shadow: 0 20px 55px rgba(63, 66, 50, .14) !important;
  }
  header nav .hh-service-dropdown a,
  header nav .group.relative:has(> a[href*="leistungen"]) > div[class*="top-full"] a {
    display: block !important;
    padding: 14px 20px !important;
    font-size: 15px !important;
    line-height: 1.25 !important;
    font-weight: 500 !important;
    color: #50533d !important;
    text-decoration: none !important;
  }
  header nav .hh-service-dropdown a:hover,
  header nav .group.relative:has(> a[href*="leistungen"]) > div[class*="top-full"] a:hover {
    background: rgba(122, 132, 88, .10) !important;
    color: #7a8458 !important;
  }
}

/* Mobile – "Wir sind für Sie da" auch voll breit */
@media (max-width: 767.98px) {
  #kontakt .inline-flex.items-center.gap-4.rounded-2xl {
    display: flex !important;
    width: 100% !important;
  }
}

/* ============================================================
   Tablet (768–1023) – Card-Layout-Korrekturen v23
   ============================================================ */
@media (min-width: 768px) and (max-width: 1023.98px) {

  /* Generic: any 3-card sm:grid-cols-2 / lg:grid-cols-3 grid → 3. Karte zentriert */
  div[class*="grid-cols-2"][class*="lg:grid-cols-3"] > *:nth-child(3):last-child,
  ul[class*="grid-cols-2"][class*="lg:grid-cols-3"] > *:nth-child(3):last-child {
    grid-column: 1 / -1 !important;
    width: calc((100% - 1.5rem) / 2) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-self: center !important;
  }

  /* "Mit Herz dabei" exakt-Selektor (Fallback) */
  .grid.sm\:grid-cols-2.lg\:grid-cols-3 > *:nth-child(3):last-child,
  .mt-6.grid.sm\:grid-cols-2.lg\:grid-cols-3 > *:nth-child(3):last-child {
    grid-column: 1 / -1 !important;
    width: calc((100% - 1.5rem) / 2) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-self: center !important;
  }

  /* Testimonials exakt-Selektor (Fallback) */
  .mt-14.grid.sm\:grid-cols-2.lg\:grid-cols-3 > *:nth-child(3):last-child {
    grid-column: 1 / -1 !important;
    width: calc((100% - 1.5rem) / 2) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-self: center !important;
  }

  /* Kontakt – "Wir sind für Sie da" Card auf volle Breite */
  #kontakt .inline-flex.items-center.gap-4.rounded-2xl {
    display: flex !important;
    width: 100% !important;
    margin-top: 1.5rem !important;
    padding: 1.25rem 1.5rem !important;
    box-shadow: 0 4px 24px -8px rgba(0,0,0,0.08) !important;
  }
  #kontakt .inline-flex.items-center.gap-4.rounded-2xl > div { flex: 1 !important; }
}

/* Mobile – "Wir sind für Sie da" auch voll breit */
@media (max-width: 767.98px) {
  #kontakt .inline-flex.items-center.gap-4.rounded-2xl {
    display: flex !important;
    width: 100% !important;
  }
}

/* ============================================================
   Marken-Farbpalette v28 – Headlines & Akzente (Marina)
   Primär (Serif-Headlines):   #82946E  – warmes Salbeigrün
   Sekundär (Sans-Subheads):   #93A082  – helleres Salbei
   Akzent (Eyebrows / Dividers/Highlight): #B69D7C – warmes Sand/Taupe
   ============================================================ */

/* Serif-Hauptüberschriften (h1–h3.font-serif inkl. Inline-Styles) */
h1, h2, h3,
h1.font-serif, h2.font-serif, h3.font-serif,
.font-serif,
[style*="Cormorant Garamond"],
[style*="Playfair Display"] {
  color: #82946E !important;
}

/* Ausnahme: Überschriften, die bewusst weiß auf dunklem Hintergrund stehen
   sollen (z. B. "Wir beantworten Ihre Fragen" im dunkelgrünen CTA-Bereich) –
   sonst überschreibt obige Regel die Lesbarkeit auf dunklem Grund. */
h1.text-white, h2.text-white, h3.text-white {
  color: #ffffff !important;
}

/* Sans-Subheadlines / Card-Titel */
h4, h5, h6,
article h3:not(.font-serif),
.hh-card h3,
[class*="font-semibold"][class*="text-"]:not(.text-sm):not(.text-xs) {
  color: #93A082 !important;
}

/* Ausnahme: Bildunterschriften in Galerien (z. B. "Einkaufsservice & Besorgungen"),
   die bewusst weiß auf einem dunklen Overlay stehen – sonst überschreibt obige
   Regel die Lesbarkeit auf dem Foto. Spezifität bewusst >= der Regel oben,
   damit die Ausnahme unabhängig von der Reihenfolge im Stylesheet gewinnt. */
[class*="font-semibold"][class*="text-"][style*="color:#FFFFFF"]:not(.text-sm):not(.text-xs),
[class*="font-semibold"][class*="text-"][style*="color: #FFFFFF"]:not(.text-sm):not(.text-xs),
[class*="font-semibold"][class*="text-"][style*="color:#ffffff"]:not(.text-sm):not(.text-xs),
[class*="font-semibold"][class*="text-"][style*="color: #ffffff"]:not(.text-sm):not(.text-xs) {
  color: #ffffff !important;
}

/* Eyebrows / Kicker / Uppercase-Labels & dekorative Divider */
.uppercase,
[class*="uppercase"],
p[style*="uppercase"],
p[style*="letter-spacing"] {
  color: #B69D7C !important;
}

/* Ausnahme: "Für Ihren Alltag"-Eyebrow über der Startseiten-Hero-Überschrift –
   Desktop-Variante bekommt durch die Sans-Subheadline-Regel oben (#93A082)
   eine höhere Spezifität als obige Uppercase-Regel; die eigenständige
   Mobil-Variante (ohne diese Klassen) würde sonst stattdessen #B69D7C
   erhalten und dadurch sichtbar anders aussehen als am Desktop. ID-Selektoren
   erzwingen hier auf beiden Varianten dieselbe Farbe. */
#hh-hero-eyebrow-desktop,
#hh-hero-eyebrow-mobile {
  color: #93A082 !important;
}

/* Ausnahme: Trennstrich unter der Startseiten-Hero-Überschrift – die Desktop-
   Variante nutzt eine Tailwind-Klasse (h-[2px]) statt eines Inline-Styles und
   bleibt daher unberührt von obiger Divider-Regel (#B69D7C); die Mobil-Variante
   hat ein Inline-"height:2px"-Style und würde sonst fälschlich Gold statt des
   dunklen Ton der Überschrift bekommen. */
#hh-hero-divider-mobile {
  background: #50533D !important;
}

/* Ausnahme: Sektions-Überschriften "Alles aus einer Hand" und "Ihre Ansprech-
   partner" auf der Mobil-/Tablet-Startseite – eine pauschale Regel weiter
   unten (".hh-mobile-root h2 { color:#50533D !important }") färbt ALLE
   Überschriften im mobilen Bereich dunkler ein als ihr jeweiliges Desktop-
   Gegenstück (dort greift stattdessen die hellere Sans-Subheadline-Farbe
   #93A082, z. B. durch die "font-semibold"-Klasse). ID-Selektoren stellen
   hier auf beiden Varianten dieselbe Farbe sicher. */
#hh-heading-leistungen-mobile,
#hh-heading-ansprechpartner-mobile {
  color: #93A082 !important;
}

/* Ausnahme: Vertrauens-Labels "Vertrauensvoll" / "Mit Herz" / "Lokal in
   Münster" im mobilen Bereich – die Regel ".hh-trust p { color:#7C7B6B }"
   weiter unten färbt sie fälschlich wie normalen Fließtext, das Desktop-
   Gegenstück (Klasse "font-semibold text-foreground") bekommt dagegen die
   hellere Sans-Subheadline-Farbe #93A082. ID-Selektoren stellen auf beiden
   Varianten dieselbe Farbe sicher. */
#hh-trust-vertrauensvoll-mobile,
#hh-trust-mitherz-mobile,
#hh-trust-lokal-mobile {
  color: #93A082 !important;
}

/* Ausnahme: Eyebrow-Badges, die bewusst auf dunklem Hintergrund weiß sein sollen
   (z. B. der "Jetzt kostenlos beraten lassen"-Badge im dunkelgrünen CTA-Bereich) –
   sonst überschreibt obige Regel die Lesbarkeit auf dunklem Grund. */
.uppercase.text-white,
[class*="uppercase"].text-white {
  color: #ffffff !important;
}

/* Dekorative Trennstriche unter Headlines (1–4px hohe Linien) */
section div[style*="height:2px"],
section div[style*="height: 2px"],
section div[style*="height:3px"],
section div[style*="height: 3px"] {
  background: #B69D7C !important;
}

/* Akzentfarbe in Headlines (.text-brand-coral wird für das Akzentwort verwendet) */
.text-brand-coral,
.text-brand-coral * {
  color: #B69D7C !important;
}

/* Footer / dunkler Hintergrund: Headlines hell halten für Kontrast */
footer h1, footer h2, footer h3, footer h4,
footer .font-serif,
[class*="bg-foreground"] h1, [class*="bg-foreground"] h2,
[class*="bg-foreground"] h3, [class*="bg-foreground"] h4,
[class*="bg-foreground"] .font-serif {
  color: #B69D7C !important;
}

/* Cookie banner safety: keeps exported static banner usable in all browsers */
.hh-cookie-open { overflow: hidden; }
body.hh-cookie-open div[class*="fixed"][class*="inset-0"] {
  z-index: 2147483000 !important;
  pointer-events: auto !important;
}
body.hh-cookie-open div[class*="fixed"][class*="inset-0"] button,
body.hh-cookie-open div[class*="fixed"][class*="inset-0"] a,
body.hh-cookie-open div[class*="fixed"][class*="inset-0"] input,
body.hh-cookie-open div[class*="fixed"][class*="inset-0"] label {
  pointer-events: auto !important;
}

/* ---------- Mobile card breathing room (iPhone / kleine Screens) ---------- */
@media (max-width: 640px) {
  /* Section-Padding auf iPhone reduzieren, damit die Karten mehr Platz haben */
  section:has(> h2):has(.hh-card),
  section:has(.hh-card) {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .hh-card {
    grid-template-columns: 44px 1fr !important;
    column-gap: 8px !important;
    padding: 10px 10px !important;
    min-height: 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }
  .hh-card-icon {
    width: 44px !important;
    height: 44px !important;
    flex-shrink: 0 !important;
  }
  .hh-card-icon img { width: 62% !important; height: 62% !important; }
  .hh-card > div:last-child { min-width: 0 !important; overflow: hidden !important; }
  .hh-card h3 {
    font-size: 12px !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
    margin: 0 0 3px !important;
    color: #50533D !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    hyphens: auto !important;
    -webkit-hyphens: auto !important;
  }
  .hh-card p {
    font-size: 10px !important;
    line-height: 1.3 !important;
    color: #7C7B6B !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    hyphens: auto !important;
    -webkit-hyphens: auto !important;
  }
  /* Vom Export erzeugte harte Umbrüche im Kartentext auf Mobil neutralisieren */
  .hh-card p br { display: none !important; }
  .hh-card p span { display: inline !important; white-space: normal !important; }
}

/* Sehr schmale Geräte (iPhone SE / 11 Portrait) */
@media (max-width: 400px) {
  .hh-card { padding: 9px 8px !important; column-gap: 7px !important; }
  .hh-card-icon { width: 40px !important; height: 40px !important; }
  .hh-card h3 { font-size: 11px !important; }
  .hh-card p { font-size: 9.2px !important; line-height: 1.28 !important; }
}


/* ---------- Gallery slider Buttons (Service-Unterseiten) ---------- */
button[aria-label="Vorheriges Bild"],
button[aria-label="Nächstes Bild"],
button[aria-label^="Bild "] {
  cursor: pointer;
}


/* --- v8.1.4: iPhone 11/13 card overflow + CTA "Wir sind für Sie da" Kontrast --- */
@media (max-width: 767px) {
  .hh-mobile-root .hh-card p span,
  .hh-card p span { display: inline !important; white-space: normal !important; }
  .hh-mobile-root .hh-card p br,
  .hh-card p br { display: none !important; }
  .hh-mobile-root .hh-card p,
  .hh-card p {
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    -webkit-hyphens: auto !important;
    padding-right: 4px !important;
  }
  .hh-mobile-root .hh-card > div:last-child,
  .hh-card > div:last-child { min-width: 0 !important; overflow: hidden !important; padding-right: 2px !important; }

  /* CTA – "Wir sind für Sie da" gut lesbar */
  .hh-mobile-root .hh-cta-text h3,
  .hh-cta .hh-cta-text h3 {
    color: #ffffff !important;
    opacity: 1 !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    line-height: 1.15 !important;
    text-shadow: 0 1px 1px rgba(0,0,0,.18) !important;
    white-space: normal !important;
  }
  .hh-mobile-root .hh-cta-text p,
  .hh-cta .hh-cta-text p {
    color: #ffffff !important;
    opacity: .95 !important;
    font-size: 9.5px !important;
    line-height: 1.32 !important;
  }
}

@media (max-width: 400px) {
  .hh-card p { font-size: 9.4px !important; line-height: 1.3 !important; padding-right: 3px !important; }
  .hh-card h3 { font-size: 10.5px !important; }
  .hh-mobile-root .hh-cta-text h3,
  .hh-cta .hh-cta-text h3 { font-size: 14px !important; }
}

/* ============================================================
   v8.1.6 – Cross-browser Fixes (Firefox/Chrome/Safari identisch)
   Karten-Text max. 3 Zeilen + Call-to-Action lesbar auf allen Größen
   ============================================================ */

/* Karten-Beschreibung: <br> raus, Spans inline mit Leerzeichen,
   sauberer Wortumbruch – gleich in Firefox & Chrome. */
.hh-mobile-root .hh-card p,
.hh-card p {
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  hyphens: manual !important;
  -webkit-hyphens: manual !important;
  -moz-hyphens: manual !important;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hh-mobile-root .hh-card p br,
.hh-card p br { display: none !important; }
.hh-mobile-root .hh-card p span,
.hh-card p span {
  display: inline !important;
  white-space: normal !important;
}
.hh-mobile-root .hh-card p span::after,
.hh-card p span::after {
  content: " ";
  white-space: normal;
}

/* Call to Action "Wir sind für Sie da!" – kräftig, weiß, groß genug
   in allen Browsern (Firefox rechnete opacity/transform anders). */
.hh-mobile-root .hh-cta,
.hh-cta {
  background: #6b7a52 !important;
}
.hh-mobile-root .hh-cta-text h3,
.hh-cta .hh-cta-text h3 {
  color: #ffffff !important;
  font-weight: 800 !important;
  opacity: 1 !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.22) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.hh-mobile-root .hh-cta-text p,
.hh-cta .hh-cta-text p {
  color: #ffffff !important;
  opacity: 1 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Mobile ≤640px */
@media (max-width: 640px) {
  .hh-mobile-root .hh-cta-text h3,
  .hh-cta .hh-cta-text h3 {
    font-size: 15px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
  }
  .hh-mobile-root .hh-cta-text p,
  .hh-cta .hh-cta-text p {
    font-size: 9.8px !important;
    line-height: 1.3 !important;
  }
  .hh-mobile-root .hh-card p,
  .hh-card p {
    font-size: 8.8px !important;
    line-height: 1.35 !important;
  }
}

/* Tablet 641–1023px – "Wir sind für Sie da" deutlich größer */
@media (min-width: 641px) and (max-width: 1023.98px) {
  .hh-mobile-root .hh-cta-text h3,
  .hh-cta .hh-cta-text h3 {
    font-size: clamp(20px, 3vw, 28px) !important;
    line-height: 1.1 !important;
    white-space: normal !important;
    letter-spacing: .005em !important;
  }
  .hh-mobile-root .hh-cta-text p,
  .hh-cta .hh-cta-text p {
    font-size: clamp(12px, 1.6vw, 15px) !important;
    line-height: 1.35 !important;
  }
}

/* CTA-Section schließt direkt an die vorherige Section an */
#cta, .hh-cta { margin-top: 0 !important; }

/* CTA-Section: Überschrift, Text und Weiter-Link auf Weiß erzwingen (überschreibt globale h2-Farbregel) */
#cta h2,
#cta h2.font-serif,
section#cta h1,
section#cta h2,
section#cta h3,
section#cta .font-serif {
  color: #ffffff !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35) !important;
}
#cta p {
  color: rgba(255, 255, 255, 0.92) !important;
}
#cta a[href*="alltagshilfe"],
#cta a[href*="betreuung"],
#cta a[href*="hauswirtschaft"],
#cta a[href*="gebaeudereinigung"] {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
#cta a[href*="alltagshilfe"] svg,
#cta a[href*="betreuung"] svg,
#cta a[href*="hauswirtschaft"] svg,
#cta a[href*="gebaeudereinigung"] svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* "Mehr anzeigen" show-more lists on service detail pages (mobile/tablet only) */
.hh-detail-more-wrap > .hh-detail-more-inner {
  overflow: hidden;
}
@media (min-width: 64rem) {
  .hh-detail-more-wrap {
    grid-template-rows: 1fr !important;
    opacity: 1 !important;
  }
}

/* Kleinere Sektionsabstände auf Mobilgeräten und Tablets: die Klasse
   „py-24“ (96px oben/unten) sowie die zugehörigen sm:/lg:-Stufen sind für
   große Bildschirme gedacht und wirken auf kleineren Geräten wie ein zu
   großer, leerer Abstand zwischen den Abschnitten. Betrifft alle Seiten
   (Startseite und Unterseiten), überall dort, wo die Startseite nicht schon
   eine eigene, feinere Anpassung über ihre ID hat. */
@media (max-width: 640px) {
  .py-24 {
    padding-top: clamp(28px, 7vw, 44px) !important;
    padding-bottom: clamp(28px, 7vw, 44px) !important;
  }
}
@media (min-width: 641px) and (max-width: 1023.98px) {
  .py-24,
  .sm\:py-32 {
    padding-top: clamp(40px, 6vw, 64px) !important;
    padding-bottom: clamp(40px, 6vw, 64px) !important;
  }
  #ueber,
  #ablauf,
  #faq,
  #gebiete,
  #kontakt {
    padding-block: clamp(40px, 6vw, 64px) !important;
  }
}