/* Normalisierung – enthaelt bewusst keine Gestaltung. */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%}
img,picture,svg,video{display:block;max-width:100%;height:auto}
input,button,textarea,select{font:inherit;color:inherit}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* ===================================================================
   Main Harmonie Tagespflege GmbH, Frankfurt am Main
   Stylesheet – handgeschrieben, gilt fuer alle Seiten
   =================================================================== */

:root {
  /* Flaechen */
  --papier:        #FFFFFF;
  --creme:         #F7F8F5;
  --gruen-hell:    #E3F3EA;
  --gruen-blass:   #DFF5E7;

  /* Anker + Akzente */
  --gruen:         #148068;   /* Hausfarbe */
  --gruen-tief:    #00473B;
  --gruen-nacht:   #003128;
  --gold:          #EFB42A;
  --gold-hell:     #F6C343;

  /* Schrift */
  --tinte:         #202522;
  --tinte-leise:   #5E6661;
  --tinte-hell:    #ECF2EE;
  --linie:         #DCE3DD;
  --linie-dunkel:  rgba(255,255,255,.18);

  --schrift-kopf:  "Poppins", "Segoe UI", sans-serif;
  --schrift-text:  "Manrope", "Segoe UI", sans-serif;

  /* Mass */
  --innen:         1220px;
  --rund:          12px;
  --rund-klein:    8px;
  --luft-s:        clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem);
  --luft-m:        clamp(2.2rem, 1.6rem + 2.2vw, 3.2rem);
  --luft-l:        clamp(3rem, 2rem + 3.4vw, 4.6rem);
  --schatten:      0 6px 22px rgba(0,45,36,.07);
  --schatten-hoch: 0 12px 30px rgba(0,45,36,.13);
}

/* ---------- Grundlagen ------------------------------------------- */

html { scroll-behavior: smooth; scroll-padding-top: 100px; }

body {
  font-family: var(--schrift-text);
  font-size: 17px;
  line-height: 1.62;
  color: var(--tinte);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  font-family: var(--schrift-kopf);
  color: var(--gruen-tief);
  line-height: 1.18;
  letter-spacing: -0.02em;
  font-weight: 600;
}

h1 { font-size: clamp(1.95rem, 1.35rem + 2.6vw, 3.1rem); }
h2 { font-size: clamp(1.6rem, 1.25rem + 1.5vw, 2.35rem); }
h3 { font-size: clamp(1.15rem, 1.05rem + .5vw, 1.4rem); }
h4 { font-size: 1.05rem; letter-spacing: -0.01em; }

p { max-width: 64ch; }
p + p { margin-top: .85rem; }

a { color: var(--gruen); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .3s ease; }
a:hover { color: var(--gruen-tief); }

strong { font-weight: 700; color: var(--gruen-tief); }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Layout ------------------------------------------------ */

.innen { width: min(100% - 2.4rem, var(--innen)); margin-inline: auto; }
.innen--schmal { width: min(100% - 2.4rem, 820px); margin-inline: auto; }

.abschnitt { padding-block: var(--luft-l); }
.abschnitt--eng { padding-block: var(--luft-s); }
.abschnitt--mittel { padding-block: var(--luft-m); }

.abschnitt--creme { background: var(--creme); }
.abschnitt--gruen-hell { background: var(--gruen-hell); }
.abschnitt--dunkel { background: var(--gruen-tief); }
.abschnitt--nacht { background: var(--gruen-nacht); }

/* Schrift auf dunklen Flaechen – ausdruecklich, inkl. Links */
.abschnitt--dunkel,
.abschnitt--dunkel p,
.abschnitt--dunkel li,
.abschnitt--dunkel span,
.abschnitt--dunkel small,
.abschnitt--nacht,
.abschnitt--nacht p,
.abschnitt--nacht li,
.abschnitt--nacht span,
.abschnitt--nacht small { color: var(--tinte-hell); }

.abschnitt--dunkel h1, .abschnitt--dunkel h2, .abschnitt--dunkel h3, .abschnitt--dunkel h4,
.abschnitt--nacht h1, .abschnitt--nacht h2, .abschnitt--nacht h3, .abschnitt--nacht h4 { color: #FFFFFF; }

.abschnitt--dunkel a:not(.knopf),
.abschnitt--nacht a:not(.knopf) { color: var(--gold-hell); }
.abschnitt--dunkel a:not(.knopf):hover,
.abschnitt--nacht a:not(.knopf):hover { color: #FFFFFF; }

.abschnitt--dunkel strong, .abschnitt--nacht strong { color: #FFFFFF; }

/* Kopfblock eines Abschnitts */
.rubrik {
  display: inline-block;
  font-family: var(--schrift-kopf);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gruen);
  margin-bottom: .6rem;
}
.abschnitt--dunkel .rubrik, .abschnitt--nacht .rubrik { color: var(--gold); }

.kopfblock { margin-bottom: var(--luft-s); }
.kopfblock--mitte { text-align: center; }
.kopfblock--mitte p { margin-inline: auto; }
.kopfblock p { color: var(--tinte-leise); margin-top: .7rem; }
.abschnitt--dunkel .kopfblock p, .abschnitt--nacht .kopfblock p { color: #D7E4DD; }

.strich {
  width: 54px; height: 3px; border: 0; margin: .9rem 0 0;
  background: var(--gold);
}
.kopfblock--mitte .strich { margin-inline: auto; }

/* Raster */
.raster { display: grid; gap: 1.4rem; }
.raster--2 { grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); }
.raster--3 { grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); }
.raster--4 { grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); }

/* Zweispalter mit Bild – bewusst asymmetrisch */
.medien { display: grid; gap: clamp(1.6rem, 4vw, 3rem); align-items: center; }
@media (min-width: 900px) {
  .medien { grid-template-columns: 1.05fr .95fr; }
  .medien--textzuerst { grid-template-columns: .95fr 1.05fr; }
  .medien--breit-bild { grid-template-columns: 1.2fr .8fr; }
}
.medien__bild { position: relative; }
.medien__bild img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--rund); display: block;
}
.medien__bild--gerahmt img { border: 4px solid var(--gold); }
.medien__text p { color: var(--tinte-leise); }
.abschnitt--dunkel .medien__text p { color: #D7E4DD; }

/* ---------- Schaltflaechen ---------------------------------------- */

.knopf {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--schrift-kopf);
  font-size: 15px; font-weight: 600; line-height: 1;
  padding: 15px 28px;
  border-radius: 999px;
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  min-height: 46px;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.knopf--gruen { background: var(--gruen); color: #FFFFFF; }
.knopf--gruen:hover { background: var(--gruen-tief); color: #FFFFFF; transform: translateY(-2px); box-shadow: var(--schatten); }

.knopf--dunkel { background: var(--gruen-tief); color: #FFFFFF; }
.knopf--dunkel:hover { background: var(--gruen); color: #FFFFFF; transform: translateY(-2px); }

.knopf--gold { background: var(--gold); color: #201800; }
.knopf--gold:hover { background: var(--gold-hell); color: #201800; transform: translateY(-2px); box-shadow: var(--schatten); }

.knopf--rand { background: transparent; color: var(--gruen-tief); border-color: var(--gruen); }
.knopf--rand:hover { background: var(--gruen); color: #FFFFFF; }

.knopf--hell { background: #FFFFFF; color: var(--gruen-tief); }
.knopf--hell:hover { background: var(--gruen-blass); color: var(--gruen-tief); transform: translateY(-2px); }

.knopf-reihe { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }

/* Textlink mit Pfeil */
.mehr {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--schrift-kopf); font-weight: 600; font-size: .9rem;
  color: var(--gruen); text-decoration: none;
}
.mehr [data-symbol] { transition: transform .3s ease; }
.mehr:hover [data-symbol] { transform: translateX(4px); }

/* ---------- Symbole und Listen ------------------------------------ */

[data-symbol] {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.15em; height: 1.15em; flex: none;
}
[data-symbol] svg { width: 100%; height: 100%; display: block; }

.symbol-kreis {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--gold); color: #201800; flex: none;
}
.symbol-kreis--gruen { background: var(--gruen-blass); color: var(--gruen-tief); }
.symbol-kreis [data-symbol] { width: 1.4rem; height: 1.4rem; }
.symbol-halter--gross [data-symbol] { width: 2rem; height: 2rem; }

.hakenliste { list-style: none; display: grid; gap: .65rem; margin-top: 1.2rem; }
.hakenliste li { display: flex; align-items: flex-start; gap: .65rem; line-height: 1.5; }
.hakenliste li [data-symbol] { color: var(--gruen); margin-top: .18em; }
.abschnitt--dunkel .hakenliste li [data-symbol],
.abschnitt--nacht .hakenliste li [data-symbol] { color: var(--gold); }
@media (min-width: 760px) {
  .hakenliste--2 { grid-template-columns: 1fr 1fr; column-gap: 2rem; }
}

.daten-liste { list-style: none; display: grid; gap: .9rem; }
.daten-liste li { display: flex; align-items: flex-start; gap: .8rem; }
.daten-liste a { text-decoration: none; }

/* ---------- Infoleiste + Kopfzeile -------------------------------- */

.infoleiste { background: var(--gruen-nacht); font-size: .82rem; }
.infoleiste__innen {
  display: flex; flex-wrap: wrap; gap: .4rem 1.6rem;
  align-items: center; padding-block: .5rem;
}
.infoleiste__punkt {
  display: inline-flex; align-items: center; gap: .45rem;
  color: #D7E4DD; text-decoration: none;
}
a.infoleiste__punkt:hover { color: var(--gold-hell); }
.infoleiste__punkt [data-symbol] { color: var(--gold); }

.kopf {
  position: sticky; top: 0; z-index: 60;
  background: #FFFFFF;
  border-bottom: 1px solid var(--linie);
  transition: box-shadow .3s ease, padding .3s ease;
}
.kopf.gescrollt { box-shadow: 0 4px 18px rgba(0,45,36,.10); }

.kopf__innen {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 76px;
}
.kopf.gescrollt .kopf__innen { min-height: 66px; }

.marke { display: inline-flex; align-items: center; }
.marke img { height: 44px; width: auto; object-fit: contain; display: block; }
.kopf.gescrollt .marke img { height: 38px; transition: height .3s ease; }

/* Menuetaste (nur mobil) */
.menue-taste {
  display: inline-flex; align-items: center; gap: .55rem;
  background: var(--gruen); color: #FFFFFF; border: 0;
  font-family: var(--schrift-kopf); font-size: 14px; font-weight: 600;
  padding: 12px 18px; border-radius: 999px; cursor: pointer;
  min-height: 44px;
  transition: background-color .3s ease;
}
.menue-taste:hover { background: var(--gruen-tief); }
.menue-taste .balken { position: relative; width: 18px; height: 2px; background: #FFFFFF; display: block; }
.menue-taste .balken::before,
.menue-taste .balken::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: #FFFFFF;
}
.menue-taste .balken::before { top: -6px; }
.menue-taste .balken::after { top: 6px; }

/* Navigation – Grundzustand: mobil */
.nav { display: none; }
.nav.offen {
  display: block;
  position: absolute; left: 0; right: 0; top: 100%;
  background: #FFFFFF;
  border-bottom: 1px solid var(--linie);
  box-shadow: 0 14px 26px rgba(0,45,36,.12);
  padding: 1rem 1.2rem 1.4rem;
  max-height: calc(100vh - 120px); overflow-y: auto;
}
.nav__liste { list-style: none; }
.nav__liste > li { border-bottom: 1px solid var(--linie); }
.nav__liste > li:last-child { border-bottom: 0; }
.nav__liste a {
  display: block; padding: 12px 2px;
  font-family: var(--schrift-kopf); font-weight: 600; font-size: 15px;
  color: var(--gruen-tief); text-decoration: none;
  transition: color .3s ease;
}
.nav__liste a:hover, .nav__liste a[aria-current="page"] { color: var(--gruen); }
.unter { list-style: none; padding: 0 0 .6rem .9rem; border-left: 2px solid var(--gruen-blass); margin-left: .2rem; }
.unter a { font-weight: 500; font-size: 14.5px; color: var(--tinte-leise); padding: 9px 2px; }
.kopf__cta { margin-top: 1rem; width: 100%; justify-content: center; }

@media (min-width: 1000px) {
  .menue-taste { display: none; }
  .nav { display: flex !important; align-items: center; gap: 1.6rem; position: static; box-shadow: none; padding: 0; border: 0; max-height: none; overflow: visible; }
  .nav__liste { display: flex; align-items: center; gap: 1.5rem; }
  .nav__liste > li { border: 0; position: relative; }
  .nav__liste a { padding: 8px 0; font-size: 15px; }
  }




.nav .nav__mit-unter > a::after:not(#\9){ content: ""; display: inline-block; margin-left: .4rem; border: 4px solid transparent; border-top-color: currentColor; transform: translateY(2px); }
  .unter {
    position: absolute; top: 100%; left: -1rem;
    min-width: 16rem; background: #FFFFFF;
    border: 1px solid var(--linie); border-left: 1px solid var(--linie);
    border-radius: var(--rund-klein);
    box-shadow: var(--schatten-hoch);
    padding: .5rem 0; margin: 0;
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity .3s ease, transform .3s ease, visibility .3s;
  }
  .nav__mit-unter:hover .unter,
  .nav__mit-unter:focus-within .unter { opacity: 1; visibility: visible; transform: translateY(0); }
  .unter a { padding: 10px 1.1rem; font-size: 14.5px; }
  .unter a:hover { background: var(--gruen-hell); color: var(--gruen-tief); }
  .kopf__cta { margin-top: 0; width: auto; }


/* ---------- Aufmacher --------------------------------------------- */

.hero {
  position: relative;
  display: flex; align-items: center;
  min-height: clamp(430px, 62vh, 640px);
  padding-block: var(--luft-l);
  background-color: var(--gruen-tief);
  background-size: cover; background-position: center;
  overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(0,49,40,.86) 0%, rgba(0,71,59,.70) 55%, rgba(0,71,59,.45) 100%);
}
.hero > .innen { position: relative; z-index: 1; }
.hero__inhalt { max-width: 40rem; }
.hero .rubrik { color: var(--gold); }
.hero h1 { color: #FFFFFF; }
.hero p { color: #E6EFEA; font-size: clamp(1rem, .95rem + .35vw, 1.12rem); margin-top: 1rem; }

.hero--klein { min-height: clamp(300px, 40vh, 400px); }
.hero--klein h1 { max-width: 22ch; }

.brotkrumen { font-size: .82rem; color: #C9DBD3; margin-top: 1.1rem; }
.brotkrumen a { color: #C9DBD3; text-decoration: none; }
.brotkrumen a:hover { color: var(--gold-hell); }

/* Pillen unter dem Aufmacher */
.pillen { list-style: none; display: flex; flex-wrap: wrap; gap: .7rem; }
.pille {
  display: inline-flex; align-items: center; gap: .55rem;
  background: #FFFFFF; color: var(--gruen-tief);
  border: 1px solid var(--linie); border-radius: 999px;
  padding: 11px 18px; text-decoration: none;
  font-family: var(--schrift-kopf); font-weight: 600; font-size: 14px;
  min-height: 44px;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease, background-color .3s ease;
}
.pille [data-symbol]:first-child { color: var(--gruen); }
.pille:hover { transform: translateY(-2px); border-color: var(--gruen); box-shadow: var(--schatten); color: var(--gruen-tief); }

/* ---------- Vertrauensband ---------------------------------------- */

.vertrauen { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
.vertrauen__punkt { display: flex; gap: .9rem; align-items: flex-start; }
.vertrauen__punkt h3 { font-size: 1.02rem; margin-bottom: .2rem; }
.vertrauen__punkt p { font-size: .92rem; color: var(--tinte-leise); }

/* ---------- Karten / Leistungen ----------------------------------- */

.karte {
  background: #FFFFFF;
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.karte:hover { transform: translateY(-4px); box-shadow: var(--schatten-hoch); border-color: var(--gruen-blass); }
.karte__bild { overflow: hidden; }
.karte__bild img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block;
  transition: transform .4s ease;
}
.karte:hover .karte__bild img { transform: scale(1.05); }
.karte__text { padding: 1.3rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.karte__text h3 { margin-bottom: .1rem; }
.karte__text p { font-size: .95rem; color: var(--tinte-leise); }
.karte__hinweis {
  font-family: var(--schrift-kopf); font-size: .78rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--gruen);
}
.karte__text .mehr { margin-top: auto; padding-top: .5rem; }
.karte--symbol .karte__text { padding-top: 1.6rem; }

/* schlichte Textkarte, z.B. Werte */
.werte-karte {
  background: rgba(255,255,255,.06);
  border: 1px solid var(--linie-dunkel);
  border-radius: var(--rund);
  padding: 1.4rem 1.5rem;
  display: flex; gap: 1rem; align-items: flex-start;
}
.werte-karte h3 { font-size: 1.05rem; margin-bottom: .25rem; }
.werte-karte p { font-size: .93rem; }

/* ---------- Ablauf in Schritten ----------------------------------- */

.schritte { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); position: relative; }
.schritt {
  border-radius: var(--rund);
  padding: 1.6rem 1.4rem;
  background: #FFFFFF;
  border: 1px solid var(--linie);
  transition: transform .3s ease, box-shadow .3s ease;
}
.schritt:hover { transform: translateY(-4px); box-shadow: var(--schatten); }
.schritt--gruen { background: var(--gruen-blass); border-color: #C6E7D3; }
.schritt--dunkel { background: var(--gruen-tief); border-color: var(--gruen-tief); }
.schritt--dunkel h3 { color: #FFFFFF; }
.schritt--dunkel p { color: #D7E4DD; }
.schritt__nummer {
  font-family: var(--schrift-kopf); font-size: .78rem; font-weight: 700;
  letter-spacing: .14em; color: var(--gruen); display: block; margin-bottom: .5rem;
}
.schritt--dunkel .schritt__nummer { color: var(--gold); }
.schritt h3 { margin: .5rem 0 .45rem; }
.schritt p { font-size: .93rem; color: var(--tinte-leise); }

/* Tagesablauf als Zeitleiste */
.zeitleiste { list-style: none; display: grid; gap: 0; margin-top: 1rem; }
.zeitleiste li {
  display: grid; gap: .3rem 1.2rem; padding: 1rem 0;
  border-bottom: 1px solid var(--linie);
}
@media (min-width: 700px) { .zeitleiste li { grid-template-columns: 9rem 1fr; align-items: baseline; } }
.zeitleiste__zeit {
  font-family: var(--schrift-kopf); font-weight: 600; color: var(--gruen);
  font-variant-numeric: tabular-nums;
}
.zeitleiste p { font-size: .95rem; color: var(--tinte-leise); }

/* ---------- Zahlen ------------------------------------------------ */

.zahlen { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); }
.zahl__wert {
  display: block; font-family: var(--schrift-kopf); font-weight: 700;
  font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem); color: var(--gold);
  line-height: 1.1; font-variant-numeric: tabular-nums;
}
.zahl p { font-size: .92rem; }

/* ---------- Galerie / Bildstreifen -------------------------------- */

.galerie { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
.galerie a { display: block; overflow: hidden; border-radius: var(--rund-klein); position: relative; }
.galerie img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform .4s ease; }
.galerie a:hover img { transform: scale(1.05); }
.galerie figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(rgba(0,49,40,0), rgba(0,49,40,.85));
  color: #FFFFFF; font-size: .85rem; padding: 1.4rem .9rem .7rem;
  transform: translateY(100%);
  transition: transform .4s ease;
}
.galerie figure { position: relative; overflow: hidden; border-radius: var(--rund-klein); margin: 0; }
.galerie figure:hover figcaption { transform: translateY(0); }

.bildstreifen { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); }
.bildstreifen img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--rund-klein); display: block; transition: transform .4s ease; }
.bildstreifen figure { overflow: hidden; border-radius: var(--rund-klein); margin: 0; }
.bildstreifen figure:hover img { transform: scale(1.05); }

/* ---------- Bildflaechen mit Schleier ----------------------------- */

.bildflaeche {
  position: relative;
  background-size: cover; background-position: center;
  background-color: var(--gruen-tief);
  color: #FFFFFF;
  padding-block: clamp(3.2rem, 2rem + 5vw, 5.5rem);
}
.bildflaeche::before { content: ""; position: absolute; inset: 0; background: rgba(0,49,40,.74); }
.bildflaeche > .innen, .bildflaeche > .innen--schmal { position: relative; z-index: 1; }
.bildflaeche h2 { color: #FFFFFF; }
.bildflaeche p { color: #E6EFEA; }
.bildflaeche a:not(.knopf) { color: var(--gold-hell); }

/* ---------- Kundenstimmen ----------------------------------------- */

.stimmen__liste { list-style: none; display: grid; gap: 1.3rem; grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); }
.stimme {
  background: #FFFFFF; border: 1px solid var(--gold);
  border-radius: var(--rund); padding: 1.8rem 1.6rem;
}
.stimme__zeichen { font-family: var(--schrift-kopf); font-size: 2.4rem; line-height: 1; color: var(--gold); display: block; margin-bottom: .4rem; }
.stimme__text { font-size: 1rem; color: var(--tinte); }
.stimme__wer { margin-top: .9rem; font-size: .85rem; color: var(--tinte-leise); }
.stimme.platzhalter .stimme__text { color: var(--tinte-leise); font-style: italic; }

/* ---------- Partner- und Kassenlogos ------------------------------ */

.logo-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.6rem 2.4rem; }
.logo-band img { max-height: 62px; width: auto; opacity: .92; transition: opacity .3s ease, transform .3s ease; }
.logo-band img:hover { opacity: 1; transform: translateY(-2px); }

/* ---------- Fragen (details/summary) ------------------------------ */

.fragen { display: grid; gap: .7rem; }
.frage { border: 1px solid var(--linie); border-radius: var(--rund-klein); background: #FFFFFF; }
.frage summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.05rem 1.2rem;
  font-family: var(--schrift-kopf); font-weight: 600; color: var(--gruen-tief);
  transition: color .3s ease, background-color .3s ease;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after {
  content: "+"; font-size: 1.4rem; line-height: 1; color: var(--gruen); flex: none;
  transition: transform .3s ease;
}
.frage[open] summary::after { content: "–"; }
.frage summary:hover { background: var(--creme); }
.frage > div, .frage > p { padding: 0 1.2rem 1.2rem; color: var(--tinte-leise); font-size: .96rem; }

/* ---------- Kontakt ----------------------------------------------- */

.kontakt-karte {
  border-radius: var(--rund); padding: 1.8rem 1.7rem;
  background: var(--gruen-tief); color: var(--tinte-hell);
}
.kontakt-karte h3 { color: #FFFFFF; }
.kontakt-karte a:not(.knopf) { color: var(--gold-hell); text-decoration: none; }
.kontakt-karte a:not(.knopf):hover { color: #FFFFFF; text-decoration: underline; }
.kontakt-karte .symbol-kreis { width: 2.4rem; height: 2.4rem; }
.kontakt-karte .symbol-kreis [data-symbol] { width: 1.1rem; height: 1.1rem; }
.kontakt-karte .ruf { font-family: var(--schrift-kopf); font-size: 1.25rem; font-weight: 600; }

.zeiten { list-style: none; display: grid; gap: .45rem; }
.zeiten li { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: .45rem; border-bottom: 1px solid var(--linie); font-size: .95rem; }
.abschnitt--dunkel .zeiten li, .kontakt-karte .zeiten li { border-color: var(--linie-dunkel); }

/* Karte (wird erst nach Klick geladen) */
[data-karte] {
  min-height: 320px; height: 100%;
  border-radius: var(--rund); overflow: hidden;
  background: var(--gruen-hell);
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 1.5rem;
}
[data-karte] iframe { width: 100%; height: 100%; min-height: 320px; border: 0; display: block; }

/* ---------- Formular ---------------------------------------------- */

.formular { display: grid; gap: 1rem; }
@media (min-width: 700px) { .formular__paar { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } }
.feld { display: grid; gap: .35rem; }
.feld > span, .feld > label {
  font-family: var(--schrift-kopf); font-size: .85rem; font-weight: 600; color: var(--gruen-tief);
}
.formular input[type="text"],
.formular input[type="email"],
.formular input[type="tel"],
.formular textarea {
  width: 100%; font-family: var(--schrift-text); font-size: 16px; color: var(--tinte);
  background: #FFFFFF; border: 1px solid var(--linie); border-radius: var(--rund-klein);
  padding: 13px 14px; min-height: 46px;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.formular textarea { min-height: 150px; resize: vertical; }
.formular input:focus, .formular textarea:focus {
  border-color: var(--gruen); box-shadow: 0 0 0 3px rgba(20,128,104,.14); outline: none;
}
.einwilligung { display: block; font-size: .88rem; color: var(--tinte-leise); line-height: 1.5; }
.einwilligung input { margin-right: .5rem; width: 20px; height: 20px; vertical-align: -4px; accent-color: var(--gruen); }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.formular-hinweis {
  border-radius: var(--rund-klein); padding: .9rem 1.1rem; font-size: .95rem;
  border: 1px solid var(--linie); background: var(--creme);
}
.hinweis-ok { background: #E7F5EC; border-color: #9CCFB2; color: #14532D; }
.hinweis-fehler { background: #FBE9E9; border-color: #E0A2A2; color: #7A1F1F; }

/* ---------- Fusszeile --------------------------------------------- */

.fuss { background: var(--gruen-nacht); color: #D7E4DD; padding-block: var(--luft-m) 1.4rem; }
.fuss h4 { color: #FFFFFF; font-family: var(--schrift-kopf); font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: .9rem; }
.fuss__raster { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); }
.fuss__marke img { height: 52px; width: auto; object-fit: contain; background: #FFFFFF; border-radius: var(--rund-klein); padding: .5rem .7rem; }
.fuss p { font-size: .92rem; color: #C2D3CB; margin-top: .9rem; }
.fuss ul { list-style: none; display: grid; gap: .55rem; }
.fuss a:not(.knopf) { color: #D7E4DD; text-decoration: none; font-size: .93rem; transition: color .3s ease; }
.fuss a:not(.knopf):hover { color: var(--gold-hell); }
.fuss li { display: flex; align-items: flex-start; gap: .55rem; font-size: .93rem; }
.fuss li [data-symbol] { color: var(--gold); margin-top: .2em; }
.fuss__schluss {
  margin-top: var(--luft-s); padding-top: 1.1rem;
  border-top: 1px solid var(--linie-dunkel);
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; justify-content: space-between;
  font-size: .84rem; color: #A9BFB7;
}

/* ---------- Rechtstexte ------------------------------------------- */

.rechtstext { padding-block: var(--luft-l); width: min(100% - 2.4rem, 780px); margin-inline: auto; }
.rechtstext h1 { margin-bottom: 1.4rem; }
.rechtstext h2 { font-size: 1.35rem; margin: 2.2rem 0 .7rem; }
.rechtstext h3 { font-size: 1.08rem; margin: 1.5rem 0 .5rem; }
.rechtstext p, .rechtstext li { color: var(--tinte-leise); font-size: 1rem; max-width: none; }
.rechtstext p { margin-bottom: .9rem; }
.rechtstext ul, .rechtstext ol { margin: 0 0 1rem 1.2rem; display: grid; gap: .4rem; }
.rechtstext a { word-break: break-word; }

/* ---------- Bewegung ---------------------------------------------- */

.js-zeigen [data-zeigen]{
  opacity: 0; transform: translateY(20px);
  transition: opacity .4s ease, transform .4s ease;
}
.js-zeigen [data-zeigen].sichtbar{ opacity: 1; transform: none; }

.hero { animation: heranfahren 13s ease-out both; }
@keyframes heranfahren { from { background-size: 108%; } to { background-size: 100%; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .js-zeigen [data-zeigen]:not(#\9){ opacity: 1; transform: none; }
}

/* ---------- Kleinkram --------------------------------------------- */

.mitte { text-align: center; }
.breit-scroll { overflow-x: auto; }
.trenner { border: 0; border-top: 1px solid var(--linie); margin-block: var(--luft-s); }
.abschnitt--dunkel .trenner, .abschnitt--nacht .trenner { border-color: var(--linie-dunkel); }

/* Hakenliste im Willkommen-Abschnitt: volle Breite, damit die Punkte
   moeglichst in einer Zeile stehen */
#willkommen .willkommen__haken { grid-template-columns: 1fr; max-width: none; }
#willkommen .willkommen__haken li { overflow-wrap: anywhere; }

/* === Textfarbe Zustände: zlpoz7h === */
[data-zustand="zlpoz7h"], [data-zustand="zlpoz7h"] *:not([data-farbe]):not([data-farbe] *):not([data-symbol-eigen]):not([data-symbol-eigen] *) { color: #f7f8f5 !important; }
/* === Ende Textfarbe Zustände zlpoz7h === */



/* === Textfarbe Zustände: zc1mywb === */
[data-zustand="zc1mywb"], [data-zustand="zc1mywb"] *:not([data-farbe]):not([data-farbe] *):not([data-symbol-eigen]):not([data-symbol-eigen] *) { color: #f6c343 !important; }
/* === Ende Textfarbe Zustände zc1mywb === */

/* === Textfarbe Zustände: z340hdw === */
[data-zustand="z340hdw"], [data-zustand="z340hdw"] *:not([data-farbe]):not([data-farbe] *):not([data-symbol-eigen]):not([data-symbol-eigen] *) { color: #efb42a !important; }
/* === Ende Textfarbe Zustände z340hdw === */



/* === Textfarbe Zustände: znc66xc === */
[data-zustand="znc66xc"], [data-zustand="znc66xc"] *:not([data-farbe]):not([data-farbe] *):not([data-symbol-eigen]):not([data-symbol-eigen] *) { color: #efb42a !important; }
/* === Ende Textfarbe Zustände znc66xc === */

/* === Textfarbe Zustände: z5v0nnq === */
[data-zustand="z5v0nnq"], [data-zustand="z5v0nnq"] *:not([data-farbe]):not([data-farbe] *):not([data-symbol-eigen]):not([data-symbol-eigen] *) { color: #efb42a !important; }
/* === Ende Textfarbe Zustände z5v0nnq === */

/* === Schrift: serkvp7 === */
@media (max-width: 600px) { [data-schrift="serkvp7"] { font-size: 16px !important; } }
/* === Ende Schrift serkvp7 === */

/* === Angepasst über das Wunsch-Feld === */
/* Kopfzeile: Chevron am Menuepunkt "Leistungen" entfernen */
.nav .nav__mit-unter > a::after { content: none; display: none; margin-left: 0; border: 0; }

/* Infoleiste mobil: nur die Telefonnummer zeigen */
@media (max-width: 899px) {
  .infoleiste .infoleiste__innen > span.infoleiste__punkt { display: none; }
  .infoleiste .infoleiste__innen { flex-wrap: nowrap; gap: 0; }
}

/* Infoleiste: weicheres, helleres Gruen im Ton des Logos */
.infoleiste { background: #136F5B; }
.infoleiste .infoleiste__punkt { color: #E4F1EB; }
.infoleiste a.infoleiste__punkt:hover { color: var(--gold-hell); }
.infoleiste .infoleiste__punkt [data-symbol] { color: var(--gold-hell); }
/* === Ende Anpassungen === */

/* === Angepasst über das Wunsch-Feld (Fuß) === */
/* Fusszeile: hellerer, weicherer Gruenton im Logo-Ton */
.fuss { background: #0F6050; color: #E4F1EB; }
.fuss p { color: #D3E5DD; }
.fuss a:not(.knopf) { color: #E4F1EB; }
.fuss a:not(.knopf):hover { color: var(--gold-hell); }
.fuss li [data-symbol] { color: var(--gold-hell); }
.fuss__schluss { border-top: 1px solid rgba(255,255,255,.22); color: #C3DBD2; }

/* Fusszeile: drei Spalten gleich hoch und ruhig ausgerichtet */
.fuss__raster {
  align-items: stretch;
  gap: 2rem clamp(1.6rem, 3vw, 3rem);
}
.fuss__raster > div {
  display: flex;
  flex-direction: column;
}
.fuss__raster > div > h4 { margin-bottom: .9rem; }
.fuss__raster > div > ul { gap: .6rem; }

/* Kachel "Seiten": Logo allein oben, darunter die Menuepunkte */
.fuss .fuss__seiten .hat-logo {
  display: block;
  width: fit-content;
  margin: 0 0 clamp(.9rem, 1.8vw, 1.3rem);
}
.fuss .fuss__seiten .hat-logo img {
  height: clamp(68px, 6.5vw, 92px);
  width: auto;
  max-width: 100%;
  display: block;
  /* weisser Hintergrund hinter dem Logo */
  box-sizing: content-box;
  background: #FFFFFF;
  border-radius: var(--rund-klein);
  padding: .5rem .7rem;
}

/* Menuepunkte in zwei Zeilen zu je drei Punkten, unten buendig */
.fuss .fuss__seiten ul {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  align-items: center;
  gap: .6rem 1.6rem;
}
.fuss .fuss__seiten ul > li { white-space: nowrap; }

/* dritte Spalte: Zusatzzeile nach unten ausrichten */
.fuss__raster > div > p:last-child { margin-top: .9rem; }

@media (min-width: 700px) {
  .fuss .fuss__seiten ul { margin-top: auto; }
  .fuss__raster > div > p:last-child { margin-top: auto; padding-top: .9rem; }
}

@media (max-width: 600px) {
  .fuss .fuss__seiten .hat-logo img { height: 80px; }
}
@media (max-width: 520px) {
  .fuss .fuss__seiten ul { gap: .55rem 1rem; }
  .fuss .fuss__seiten ul > li { white-space: normal; }
}
/* === Ende Anpassungen (Fuß) === */


/* ---------- Vorschalt-Bild ---------- */
html.laedt { overflow: hidden; }
.lader {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  /* Halbdurchsichtig mit Weichzeichner: die Seite ist dahinter zu erahnen
     und kommt beim Ausblenden zum Vorschein - statt einer toten Flaeche. */
  background: color-mix(in srgb, var(--lader-farbe, var(--papier, var(--paper, #fff))) var(--lader-deckung, 68%), transparent);
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
  backdrop-filter: blur(22px) saturate(1.15);
  transition: opacity .7s cubic-bezier(.4,0,.2,1),
              visibility .7s,
              -webkit-backdrop-filter .7s ease,
              backdrop-filter .7s ease;
}
/* Kein Weichzeichner im Browser? Dann deckend, damit nichts flackert. */
@supports not (backdrop-filter: blur(2px)) {
  .lader { background: var(--lader-farbe, var(--papier, var(--paper, #fff))); }
}
.lader--fertig {
  opacity: 0; visibility: hidden;
  /* Sobald das Vorschaltbild fertig ist, darf es KEINE Klicks mehr
     abfangen. Bisher haing das allein an visibility:hidden - und das
     wird ueber 0,7 s hinweg uebergeblendet. In dieser Zeit lag eine
     unsichtbare Flaeche mit z-index 9999 ueber der ganzen Seite, und
     jeder Fingertipp landete dort statt auf dem Menue.
     pointer-events wird nicht uebergeblendet, gilt also sofort. */
  pointer-events: none;
  -webkit-backdrop-filter: blur(0) saturate(1);
  backdrop-filter: blur(0) saturate(1);
}
/* Das Sicherheitsnetz der Laufzeit setzt nach 700 ms das hidden-Attribut.
   Ohne diese Regel bleibt es wirkungslos: .lader mit display:grid hat
   dieselbe Gewichtung und steht spaeter, gewinnt also. Auf der Seite von
   Motorgeraete Freitag war genau das zu messen - hidden gesetzt, display
   trotzdem grid. */
.lader[hidden] { display: none !important; }
.lader--fertig .lader-inhalt { transform: scale(1.04); opacity: 0; }
.lader-inhalt { transition: transform .7s cubic-bezier(.4,0,.2,1), opacity .5s ease; }
.lader-inhalt { display: grid; justify-items: center; gap: 1.5rem; }
.lader-logo { height: clamp(40px, 8vw, 72px); width: auto; }

/* SVG-Logo: wird von links mit der Akzentfarbe gefuellt */
.lader-logo--svg svg { height: 100%; width: auto; display: block; }
.lader-logo--svg svg * { fill: color-mix(in srgb, currentColor 16%, transparent) !important; stroke: none !important; }
.lader-logo--svg .lader-fuellung * { fill: var(--gold, var(--accent, #C8901F)) !important; }
.lader-logo--svg .lader-fuellung {
  position: absolute; inset: 0;
  clip-path: inset(0 100% 0 0);
  animation: logoFuellen 1.25s cubic-bezier(.5,0,.2,1) forwards;
}
.lader-logo--svg { position: relative; display: inline-block; }
@keyframes logoFuellen { to { clip-path: inset(0 0 0 0); } }

/* Bild-Logo: Graustufen, wird farbig aufgedeckt */
.lader-logo--bild { position: relative; display: inline-block; height: clamp(40px, 8vw, 72px); }
.lader-logo--bild img { height: 100%; width: auto; display: block; }
.lader-logo--bild > img:first-child { filter: grayscale(1) opacity(.22); }
.lader-logo__farbe {
  position: absolute; inset: 0;
  clip-path: inset(0 100% 0 0);
  animation: logoFuellen 1.25s cubic-bezier(.5,0,.2,1) forwards;
}
@media (prefers-reduced-motion: reduce) {
  .lader-logo--svg .lader-fuellung, .lader-logo__farbe { clip-path: none; }
  .lader-logo--bild > img:first-child { filter: none; }
}
.lader-wort {
  font-family: var(--font-display, var(--schrift-display, serif));
  font-size: clamp(1.5rem, 1rem + 2.6vw, 2.75rem);
  font-weight: 700; letter-spacing: -.03em;
  color: color-mix(in srgb, var(--tinte, var(--ink, #222)) 18%, transparent);
  background-image: linear-gradient(90deg,
    var(--gold, var(--accent, #C8901F)) 0 50%,
    color-mix(in srgb, var(--tinte, var(--ink, #222)) 18%, transparent) 50% 100%);
  background-size: 200% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: laderFuellen 1.15s cubic-bezier(.5,0,.2,1) forwards;
}
@keyframes laderFuellen { to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  .lader-wort { -webkit-text-fill-color: currentColor; color: var(--tinte, var(--ink, #222)); }
}

/* ---------- Cookie-Hinweis ---------- */
.cookie {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 9000;
  max-width: 34rem; margin-inline: auto;
  display: grid; gap: 1rem;
  padding: 1.25rem 1.4rem;
  background: var(--tinte, var(--paper-deep, #1b1b1b)); color: #fff;
  border-radius: var(--radius-lg, 10px);
  box-shadow: 0 24px 60px -24px rgba(0,0,0,.55);
  transform: translateY(130%); transition: transform .45s cubic-bezier(.16,1,.3,1);
  font-size: .9375rem;
}
.cookie.sichtbar { transform: none; }
.cookie b { display: block; margin-bottom: .4rem; }
.cookie p { color: rgba(255,255,255,.78); line-height: 1.55; margin: 0; max-width: none; }
.cookie a { color: #fff; }
.cookie-knoepfe { display: flex; gap: .6rem; flex-wrap: wrap; }
.cookie-knoepfe button { padding: .65rem 1.2rem; border-radius: var(--radius, 5px); border: 1px solid rgba(255,255,255,.3); background: none; color: #fff; cursor: pointer; font-size: .9rem; }
.cookie-ok { background: var(--gold, var(--accent, #C8901F)) !important; border-color: transparent !important; color: #1b1b1b !important; font-weight: 600; }
@media (min-width: 620px) { .cookie { grid-template-columns: 1fr auto; align-items: center; } }

/* ---------- WhatsApp ---------- */
.wa-knopf {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 8000;
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  background: #25D366; color: #fff;
  box-shadow: 0 10px 26px -8px rgba(37,211,102,.7);
  transition: transform .2s ease;
}
.wa-knopf:hover { transform: scale(1.07); }
.wa-knopf svg { width: 28px; height: 28px; }

/* ---------- Nach oben ---------- */
.nach-oben {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 7900;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: var(--tinte, var(--paper-deep, #1b1b1b)); color: #fff; border: 0;
  opacity: 0; pointer-events: none; transform: translateY(10px);
  transition: opacity .3s ease, transform .3s ease;
}
.nach-oben.sichtbar { opacity: 1; pointer-events: auto; transform: none; }
.nach-oben svg { width: 20px; height: 20px; }

/* Sicherheitsnetz gegen riesige Symbole. Ein eingebettetes SVG ohne Breite
   und Hoehe waechst auf die volle Zeilenbreite - bei Jacob fuellte eine Uhr
   den halben Bildschirm, nachdem ein Umbau den Abschnitt mit Klassen
   versehen hatte, fuer die das Stylesheet keine Regel kennt. :where() haelt
   die Gewichtung bei null, damit jede echte Gestaltungsregel gewinnt. */
main :where(svg.symbol:not([width]):not([height])) { width: 1.25em; height: 1.25em; vertical-align: -0.2em; }
main :where(svg:not([width]):not([height]):not([class])) { width: 2.25rem; height: 2.25rem; max-width: 100%; }
.wa-knopf ~ .nach-oben, body:has(.wa-knopf) .nach-oben { bottom: 4.9rem; }

/* ---------- Einblenden ---------- */
.js-zeigen [data-zeigen] {
  opacity: 0; transform: translateY(18px);
  transition:opacity 0.45s cubic-bezier(.16,1,.3,1), transform 0.45s cubic-bezier(.16,1,.3,1);
  transition-delay: var(--verzug, 0ms);
}
.js-zeigen [data-zeigen].sichtbar { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-zeigen [data-zeigen] { opacity: 1 !important; transform: none !important; transition: none; }
}

/* ---------- Lightbox ---------- */
dialog.lichtkasten { border: 0; padding: 0; background: transparent; max-width: 94vw; max-height: 94vh; overflow: visible; }
dialog.lichtkasten::backdrop { background: rgba(0,0,0,.9); }
dialog.lichtkasten img { max-height: 88vh; max-width: 90vw; width: auto; border-radius: 4px; }
dialog.lichtkasten button { position: absolute; background: none; border: 0; color: #fff; cursor: pointer; line-height: 1; }
.lk-zu { top: -2.6rem; right: 0; font-size: 2.2rem; }
.lk-vor, .lk-nach { top: 50%; transform: translateY(-50%); font-size: 3.2rem; padding: 0 1rem; opacity: .7; }
.lk-vor { left: -3.5rem; } .lk-nach { right: -3.5rem; }
.lk-vor:hover, .lk-nach:hover { opacity: 1; }
@media (max-width: 780px) { .lk-vor { left: -.5rem; } .lk-nach { right: -.5rem; } }


/* Kontrast nachgezogen – spezifischere Regeln hatten die
   Schriftfarbe überschrieben, ohne den Grund mitzunehmen. */
.kontakt-karte h4.zeiten__titel{ color:#fff; }
.werte-karte span.symbol-kreis{ color:#1a1a1a; }
.symbol-kreis span.symbol-halter{ color:#1a1a1a; }
.laedt a.wa-knopf{ color:#1a1a1a; }
.infoleiste span.symbol-halter{ color:#fff; }
.schritt--gruen span.schritt__nummer{ color:#1a1a1a; }
.abschnitt--gruen-hell span.rubrik{ color:#1a1a1a; }
.abschnitt--gruen-hell span.symbol-halter{ color:#1a1a1a; }
.schritt--dunkel p{ color:#fff; }
.austausch-punkte span.symbol-kreis{ color:#1a1a1a; }
.kontakt-karte strong{ color:#fff; }
.knopf--hell span.symbol-halter{ color:#1a1a1a; }
.knopf--gold span.symbol-halter{ color:#1a1a1a; }