/* ==========================================================================
   ES-PACKT-AN — Design-System
   Bildsprache: Übergabeprotokoll. Klare Linien, Monospace-Marker,
   Farben aus dem Logo. Eine Datei für alle Seiten.
   ========================================================================== */

/* --- 1. Tokens ---------------------------------------------------------- */
:root {
  /* Farben — direkt aus dem Logo abgeleitet */
  --gruen-900: #12301B;   /* Footer, dunkle Flächen */
  --gruen-700: #1D5A2E;   /* Markengrün, Logo-Ring */
  --gruen-500: #2F7D42;   /* Hover, Verläufe */
  --gruen-300: #8FBF4D;   /* helles Grün aus dem Logo-Feld */
  --gelb:      #F5C518;   /* Logo-Gelb, sparsam einsetzen */
  --gelb-tief: #C79B00;   /* Gelb auf hellem Grund, lesbar */

  --papier:    #F5F5F0;   /* Seitenhintergrund */
  --papier-2:  #EAEBE3;   /* abgesetzte Flächen */
  --stein:     #D5D8CC;   /* Linien, Rahmen */
  --tinte:     #141C16;   /* Fließtext */
  --tinte-70:  #4A544C;   /* Sekundärtext */
  --weiss:     #FFFFFF;

  /* Typografie */
  --schrift-display: "Bricolage Grotesque", "Arial Black", sans-serif;
  --schrift-text:    "Public Sans", -apple-system, "Segoe UI", sans-serif;
  --schrift-marker:  "JetBrains Mono", ui-monospace, "Courier New", monospace;

  --t-xs:   0.75rem;
  --t-sm:   0.875rem;
  --t-base: 1.0625rem;
  --t-lg:   1.1875rem;
  --t-xl:   clamp(1.35rem, 1.1rem + 1.1vw, 1.75rem);
  --t-2xl:  clamp(1.75rem, 1.3rem + 2.1vw, 2.6rem);
  --t-3xl:  clamp(2.3rem, 1.5rem + 3.6vw, 4.1rem);

  /* Raster */
  /* Waechst auf grossen Monitoren mit, bleibt auf Laptops unveraendert.
     Bis rund 1440 px Fensterbreite greift der Wert 1180 px wie bisher,
     darueber nutzt die Seite mehr Flaeche — maximal 1440 px. Laengere
     Textzeilen verhindert die Begrenzung auf 68 Zeichen bei p (unten). */
  --breite:   clamp(1180px, 82vw, 1440px);
  --breite-s: 760px;
  --luft:     clamp(3.5rem, 2rem + 6vw, 7rem);
  --radius:   3px;   /* Flächen: Karten, Kästen, Bilder — fast eckig */
  --radius-knopf: 999px;  /* Schaltflächen: rund, damit sie als klickbar auffallen */
  --radius-feld:  10px;   /* Antippbare Zeilen und Eingabefelder */
}

/* --- 2. Grundlagen ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--schrift-text);
  font-size: var(--t-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--gruen-700); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--gruen-500); }

:focus-visible {
  outline: 3px solid var(--gelb-tief);
  outline-offset: 3px;
}

h1, h2, h3, h4 {
  font-family: var(--schrift-display);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-xl); letter-spacing: -0.01em; }
h4 { font-size: var(--t-lg); font-weight: 700; }

p { margin: 0 0 1.1em; max-width: 68ch; }
p:last-child { margin-bottom: 0; }

/* Gelbe Auszeichnung — der eine Farbakzent, sparsam */
.hebt {
  background: linear-gradient(transparent 62%, rgba(245,197,24,.55) 62%);
  padding: 0 .06em;
}

/* --- 3. Layout ---------------------------------------------------------- */
.huelle { width: min(100% - 2.5rem, var(--breite)); margin-inline: auto; }
.huelle--schmal { width: min(100% - 2.5rem, var(--breite-s)); margin-inline: auto; }

.band { padding-block: var(--luft); }
.band--papier2 { background: var(--papier-2); }
.band--dunkel  { background: var(--gruen-900); color: var(--papier); }
.band--dunkel h2, .band--dunkel h3 { color: var(--weiss); }
.band--dunkel a { color: var(--gruen-300); }

/* --- 4. Abschnittsmarker (Signature) ------------------------------------ */
/* Jeder Abschnitt wird wie ein Protokolleintrag angekündigt. */
.marker {
  display: flex;
  align-items: center;
  gap: .9rem;
  font-family: var(--schrift-marker);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinte-70);
  margin-bottom: 1.4rem;
}
.marker::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--stein);
}
.marker__nr { color: var(--gruen-700); font-weight: 700; }
/* Kopfzeile über der Hauptüberschrift: auf dem Handy in einer Zeile, ohne Linie */
@media (max-width: 560px) {
  .marker--hero { font-size: min(var(--t-xs), 3.2vw); letter-spacing: .08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .marker--hero::after { display: none; }
}
.band--dunkel .marker { color: var(--gruen-300); }
.band--dunkel .marker::after { background: rgba(255,255,255,.18); }
.band--dunkel .marker__nr { color: var(--gelb); }

.vorspann {
  font-size: var(--t-lg);
  color: var(--tinte-70);
  max-width: 60ch;
  margin-bottom: 2.5rem;
}
.band--dunkel .vorspann { color: rgba(255,255,255,.78); }

/* --- 5. Buttons --------------------------------------------------------- */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .1rem .6rem;
  padding: .85rem 1.9rem;
  border: 2px solid var(--gruen-700);
  border-radius: var(--radius-knopf);
  background: var(--gruen-700);
  color: var(--weiss);
  font-family: var(--schrift-text);
  font-size: var(--t-base);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.knopf:hover { background: var(--gruen-500); border-color: var(--gruen-500); color: var(--weiss); transform: translateY(-1px); }

.knopf--klar { background: transparent; color: var(--gruen-700); }
.knopf--klar:hover { background: var(--gruen-700); color: var(--weiss); }

.knopf--gelb { background: var(--gelb); border-color: var(--gelb); color: var(--gruen-900); }
.knopf--gelb:hover { background: #FFD53D; border-color: #FFD53D; color: var(--gruen-900); }
/* .band--dunkel a hat höhere Spezifität als .knopf--gelb — ohne diese Zeile
   wird die Schrift auf dem gelben Button blass-grün statt dunkel (schlecht lesbar). */
.band--dunkel .knopf--gelb, .band--dunkel .knopf--gelb:hover { color: var(--gruen-900); }

.knopf svg { flex-shrink: 0; }

/* flex-basis: 100% zwingt den Zusatz in eine eigene Zeile unter die
   Beschriftung. Vorher stand er daneben und machte die Schaltflaeche
   unnoetig breit. */
.knopf__sub { flex-basis: 100%; text-align: center; font-size: var(--t-xs); font-weight: 400; opacity: .85; line-height: 1.3; }

.knopfreihe { display: flex; flex-wrap: wrap; gap: .9rem; }
/* Ersetzt den frueheren Zusatztext in jeder einzelnen Schaltflaeche.
   Einmal unter der Reihe statt in jedem Button — das haelt die
   Schaltflaechen schmal und die Aussage trotzdem sichtbar. */
.knopfreihe__hinweis {
  font-size: var(--t-sm);
  color: var(--tinte-70);
  margin-top: .8rem;
}
.band--dunkel .knopfreihe__hinweis { color: rgba(255,255,255,.7); }

/* --- 6. Kopfzeile ------------------------------------------------------- */
.kopf {
  position: sticky; top: 0; z-index: 50;
  background: rgba(245,245,240,.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--stein);
}
.kopf__innen {
  display: flex; align-items: center; gap: 1.5rem;
  padding-block: .8rem;
}
.kopf__logo { display: flex; align-items: center; gap: .7rem; text-decoration: none; flex-shrink: 0; }
.kopf__logo img { width: 52px; height: 52px; }
.kopf__wort { font-family: var(--schrift-display); font-weight: 800; font-size: 1.15rem; color: var(--gruen-900); letter-spacing: -.02em; line-height: 1; }
.kopf__claim { display: block; font-family: var(--schrift-marker); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tinte-70); font-weight: 400; margin-top: .25rem; }

.nav { display: flex; gap: 1.4rem; margin-left: auto; }
.nav a { font-size: var(--t-sm); font-weight: 600; color: var(--tinte); text-decoration: none; }
.nav a:hover { color: var(--gruen-700); }

.kopf__tel { font-family: var(--schrift-marker); font-weight: 700; font-size: var(--t-sm); color: var(--gruen-900); text-decoration: none; white-space: nowrap; }
.kopf__tel span { display: block; font-family: var(--schrift-text); font-size: .68rem; font-weight: 400; color: var(--tinte-70); }

.kopf__menue {
  display: none; align-items: center; gap: .5rem;
  background: var(--weiss); border: 1.5px solid var(--gruen-700); border-radius: var(--radius-knopf);
  padding: .6rem 1.1rem; font-family: var(--schrift-text); font-size: var(--t-sm); font-weight: 700;
  color: var(--gruen-900); cursor: pointer; margin-left: auto;
}
.kopf__menue:hover { background: var(--gruen-700); color: var(--weiss); }
.kopf__menue-icon { display: flex; }
.kopf__menue-icon--zu { display: none; }
.kopf--offen .kopf__menue-icon--auf { display: none; }
.kopf--offen .kopf__menue-icon--zu { display: flex; }
.kopf--offen .kopf__menue { background: var(--gruen-700); color: var(--weiss); }

/* --- 7. Hero ------------------------------------------------------------ */
.hero { padding-block: clamp(2.5rem, 1rem + 5vw, 4.5rem) var(--luft); }
/* Zwei Spalten: links Text, rechts Foto und darunter die Vorteilsliste.
   So sind beide Spalten ähnlich hoch und rechts entsteht keine Lücke. */
.hero__raster {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  grid-template-areas: "inhalt foto" "inhalt liste";
  align-items: start;
  column-gap: clamp(2rem, 1rem + 3vw, 4rem);
  row-gap: 1.6rem;
}
.hero__inhalt { grid-area: inhalt; }
.hero__foto { grid-area: foto; }
.hero__liste { grid-area: liste; }
/* Die Hauptüberschrift darf nicht über sieben Zeilen laufen */
.hero h1 { margin-bottom: .55em; font-size: clamp(2.05rem, 1.3rem + 2.1vw, 3.1rem); text-wrap: balance; }
.hero__zeile2 { color: var(--gruen-700); display: block; }
.hero__text { font-size: var(--t-lg); color: var(--tinte-70); margin-bottom: 1.8rem; }

/* Leistungen direkt unter der Hauptüberschrift: müssen klar als Knöpfe erkennbar sein */
.hero__leistungen-titel { font-size: var(--t-sm); font-weight: 600; color: var(--tinte-70); margin: -.2rem 0 .6rem; }

/* Bildergalerie auf den Leistungsseiten — quadratische Kacheln, damit Hoch- und
   Querformate nebeneinander ruhig wirken */
.galerie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.galerie__bild { margin: 0; }
.galerie__bild img {
  display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border: 1px solid var(--stein); border-radius: var(--radius); background: var(--weiss);
}
.galerie__bild figcaption { font-size: var(--t-sm); color: var(--tinte-70); margin-top: .6rem; }
@media (max-width: 900px) { .galerie { grid-template-columns: 1fr 1fr; gap: .9rem; } }

/* Erklärende Grafik (Illustration, kein Foto) — schlicht und mittig */
.motiv { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto 2rem; }
.hero__leistungen { display: flex; flex-wrap: wrap; gap: .55rem; list-style: none; padding: 0; margin: 0 0 1.7rem; }
.hero__leistungen a {
  display: flex; align-items: center; gap: .55rem;
  padding: .38rem 1rem .38rem .38rem;
  background: var(--weiss); color: var(--gruen-900);
  border: 1.5px solid var(--gruen-300); border-radius: var(--radius-knopf);
  box-shadow: 0 1px 2px rgba(18, 48, 27, .08), 0 3px 10px rgba(18, 48, 27, .07);
  font-size: var(--t-sm); font-weight: 700; line-height: 1.2; text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.hero__leistungen-icon {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--gruen-700); color: var(--weiss);
}
.hero__leistungen a::after { content: "›"; margin-left: .1rem; font-size: 1.2em; line-height: 1; color: var(--gruen-700); }
.hero__leistungen a:hover { background: var(--gruen-700); border-color: var(--gruen-700); color: var(--weiss); transform: translateY(-1px); }
.hero__leistungen a:hover .hero__leistungen-icon { background: var(--gelb); color: var(--gruen-900); }
.hero__leistungen a:hover::after { color: var(--weiss); }
.hero__leistungen a:focus-visible { outline: 3px solid var(--gelb-tief); outline-offset: 2px; }

@media (max-width: 560px) {
  /* Auf dem Handy: zweispaltige Kacheln, groß genug zum Antippen */
  .hero__leistungen { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
  .hero__leistungen a {
    height: 100%; min-height: 54px; padding: .45rem .55rem .45rem .45rem;
    border-radius: var(--radius-feld); font-size: .86rem; hyphens: auto;
  }
  .hero__leistungen-icon { width: 30px; height: 30px; }
  .hero__leistungen a::after { margin-left: auto; padding-left: .15rem; }
}

/* Abschlusssatz unter den Leistungskarten */
.leistungen__schluss {
  margin-top: 2.2rem; font-family: var(--schrift-display);
  font-size: var(--t-xl); font-weight: 700; color: var(--tinte);
}

.hero__liste { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; align-content: start; }
.hero__liste li { display: flex; gap: .7rem; align-items: flex-start; font-size: var(--t-sm); font-weight: 600; }
.hero__liste li::before {
  content: "✓"; color: var(--gruen-700); font-weight: 800; flex-shrink: 0;
}

/* Direktes Teamfoto im Hero */
.hero__foto {
  border: 1px solid var(--stein);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--papier-2);
}
.hero__foto img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 12%;
}

/* --- 8. Vorher/Nachher-Schieber (Signature) ----------------------------- */
.vergleich {
  position: relative;
  border: 1px solid var(--stein);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--papier-2);
  --pos: 50%;
}
.vergleich__buehne { position: relative; aspect-ratio: 3 / 2; }
/* Hochformat für Handyfotos (3:4) — so bleibt der ganze Raum sichtbar,
   statt dass das Querformat oben und unten die Hälfte abschneidet. */
.vergleich--hoch .vergleich__buehne { aspect-ratio: 3 / 4; max-height: min(78vh, 760px); width: 100%; }
.vergleich__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vergleich__bild--nachher { clip-path: inset(0 0 0 var(--pos)); }

.vergleich__griff {
  position: absolute; top: 0; bottom: 0; left: var(--pos);
  width: 2px; background: var(--gelb);
  transform: translateX(-1px); pointer-events: none;
}
.vergleich__griff::after {
  content: "↔";
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 42px; height: 42px;
  display: grid; place-items: center;
  background: var(--gelb); color: var(--gruen-900);
  border-radius: 50%; font-size: 1.1rem; font-weight: 700;
}

.vergleich__regler {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: ew-resize;
  -webkit-appearance: none; appearance: none; background: transparent;
}
.vergleich__regler:focus-visible + .vergleich__griff::after { outline: 3px solid var(--gruen-900); }

.vergleich__schild {
  position: absolute; bottom: 12px;
  font-family: var(--schrift-marker); font-size: var(--t-xs);
  letter-spacing: .12em; text-transform: uppercase;
  background: var(--gruen-900); color: var(--weiss);
  padding: .35rem .7rem; border-radius: var(--radius);
  pointer-events: none;
}
.vergleich__schild--links  { left: 12px; }
.vergleich__schild--rechts { right: 12px; background: var(--gruen-300); color: var(--gruen-900); }

.vergleich__fuss {
  display: flex; flex-wrap: wrap; gap: .5rem 1.2rem;
  padding: .8rem 1rem;
  border-top: 1px solid var(--stein);
  background: var(--weiss);
  font-family: var(--schrift-marker); font-size: var(--t-xs);
  color: var(--tinte-70);
}

/* --- 9. Vertrauensleiste ------------------------------------------------ */
.beleg {
  border-block: 1px solid var(--stein);
  background: var(--weiss);
}
.beleg__raster {
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding-block: 1.5rem;
}
/* min-width: 0 hebt die Standardregel auf, dass Rasterelemente nicht unter
   ihre Inhaltsbreite schrumpfen duerfen. Ohne sie wird das Raster auf
   schmalen Bildschirmen breiter als der Container. */
.beleg__punkt { padding-inline: 1.2rem; border-left: 1px solid var(--stein); min-width: 0; }
.beleg__punkt:first-child { border-left: 0; padding-left: 0; }
.beleg__titel { font-family: var(--schrift-display); font-weight: 700; font-size: var(--t-base); margin-bottom: .15rem; }
.beleg__text { font-size: var(--t-sm); color: var(--tinte-70); margin: 0; }

/* --- 10. Karten --------------------------------------------------------- */
.karten { display: grid; gap: 1.2rem; }
.karten--3 { grid-template-columns: repeat(3, 1fr); }
.karten--2 { grid-template-columns: repeat(2, 1fr); }

.karte {
  display: flex; flex-direction: column;
  background: var(--weiss);
  border: 1px solid var(--stein);
  border-radius: var(--radius);
  text-decoration: none; color: inherit;
  overflow: hidden;
  transition: border-color .15s ease, transform .15s ease;
}
a.karte:hover { border-color: var(--gruen-700); transform: translateY(-2px); color: inherit; }

.karte__bild { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; background: var(--papier-2); }
.karte__innen { padding: 1.3rem 1.4rem 1.5rem; flex: 1; display: flex; flex-direction: column; }
.karte__marker { display: flex; align-items: center; gap: .4rem; font-family: var(--schrift-marker); font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--gruen-700); margin-bottom: .5rem; }
.karte__marker svg { flex-shrink: 0; }
.karte h3 { margin-bottom: .4rem; }
.karte p { font-size: var(--t-sm); color: var(--tinte-70); margin-bottom: 1rem; }
.karte__mehr { margin-top: auto; font-size: var(--t-sm); font-weight: 700; color: var(--gruen-700); }
a.karte:hover .karte__mehr { text-decoration: underline; text-underline-offset: 3px; }

/* --- 11. Ablauf (echte Reihenfolge, darum nummeriert) ------------------- */
.ablauf { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.5rem; counter-reset: schritt; }
.schritt { position: relative; padding-top: 2.6rem; }
.schritt::before {
  counter-increment: schritt;
  content: counter(schritt, decimal-leading-zero);
  position: absolute; top: 0; left: 0;
  font-family: var(--schrift-marker); font-size: var(--t-sm); font-weight: 700;
  color: var(--gruen-900); background: var(--gelb);
  padding: .2rem .5rem; border-radius: var(--radius);
}
.schritt::after {
  content: ""; position: absolute; top: 1.05rem; left: 3.2rem; right: -1.5rem;
  height: 1px; background: var(--stein);
}
.schritt:last-child::after { display: none; }
.schritt h3 { font-size: var(--t-lg); margin-bottom: .3rem; }
.schritt p { font-size: var(--t-sm); color: var(--tinte-70); }
.band--dunkel .schritt::after { background: rgba(255,255,255,.2); }
.band--dunkel .schritt p { color: rgba(255,255,255,.75); }

/* --- 12. Faktenliste (Preis, Vertrauen) --------------------------------- */
.fakten { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.fakten li {
  display: grid; grid-template-columns: 1fr auto; gap: 1rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--stein);
  align-items: baseline;
}
.fakten li:first-child { border-top: 1px solid var(--stein); }
.fakten__wert { font-family: var(--schrift-marker); font-weight: 700; color: var(--gruen-700); white-space: nowrap; }
.fakten__hinweis { display: block; font-size: var(--t-sm); color: var(--tinte-70); }

/* --- 13. Ortsliste ------------------------------------------------------ */
.orte { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0; list-style: none; }
.orte a {
  display: inline-block;
  padding: .45rem .9rem;
  border: 1px solid var(--stein);
  border-radius: 100px;
  background: var(--weiss);
  font-size: var(--t-sm); font-weight: 600;
  text-decoration: none; color: var(--tinte);
}
.orte a:hover { border-color: var(--gruen-700); background: var(--gruen-700); color: var(--weiss); }

/* --- 14. FAQ ------------------------------------------------------------ */
.faq { border-top: 1px solid var(--stein); }
.faq details { border-bottom: 1px solid var(--stein); }
.faq summary {
  display: flex; justify-content: space-between; gap: 1rem; align-items: center;
  padding: 1.15rem 0;
  font-family: var(--schrift-display); font-weight: 700; font-size: var(--t-lg);
  cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--schrift-marker); font-size: 1.4rem; color: var(--gruen-700); flex-shrink: 0; }
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding-bottom: 1.3rem; }

/* --- 15. Abschluss-Aufruf ----------------------------------------------- */
.aufruf { background: var(--gruen-900); color: var(--papier); }
.aufruf h2 { color: var(--weiss); }
.aufruf p { color: rgba(255,255,255,.8); }

/* --- 16. Fußzeile ------------------------------------------------------- */
.fuss { background: var(--gruen-900); color: rgba(255,255,255,.72); border-top: 1px solid rgba(255,255,255,.12); padding-block: 3rem 2rem; font-size: var(--t-sm); }
.fuss__raster { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; }
.fuss h4 { color: var(--weiss); font-family: var(--schrift-marker); font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; font-weight: 500; margin-bottom: .9rem; }
.fuss ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.fuss a { color: rgba(255,255,255,.72); text-decoration: none; }
.fuss a:hover { color: var(--gelb); }
.fuss__kontakt-zeile { display: flex; align-items: center; gap: .55rem; }
.fuss__kontakt-zeile svg { flex-shrink: 0; color: var(--gruen-300); }
.fuss__unten { margin-top: 2.5rem; padding-top: 1.3rem; border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: var(--t-xs); }

/* --- 17. Mobiler Sofort-Anruf ------------------------------------------- */
.sofort { display: none; }

/* --- 18. Umbrüche ------------------------------------------------------- */
@media (max-width: 960px) {
  /* Auf schmalen Bildschirmen untereinander: Text, Vorteile, Foto */
  .hero__raster { grid-template-columns: 1fr; grid-template-areas: "inhalt" "liste" "foto"; row-gap: 2rem; }
  .karten--3 { grid-template-columns: repeat(2, 1fr); }
  .ablauf { grid-template-columns: repeat(2, 1fr); }
  .schritt::after { display: none; }
  .beleg__raster { grid-template-columns: repeat(2, 1fr); gap: 1.2rem .9rem; }
  .beleg__punkt { padding-inline: .9rem; }
  .beleg__punkt:nth-child(odd) { border-left: 0; padding-left: 0; }
  .fuss__raster { grid-template-columns: repeat(2, 1fr); }
}

/* Kopfzeile: eigener Umbruchpunkt. Sechs Navigationslinks plus Telefonnummer
   brauchen mehr Platz als das übrige Layout — deshalb klappt das Menü schon
   ab 900 px zusammen und nicht erst bei 680 px. */
@media (max-width: 900px) {
  .nav { display: none; }
  .kopf--offen .nav {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--papier);
    border-top: 1px solid var(--stein);
    border-bottom: 1px solid var(--stein);
    padding: .5rem 1.25rem 1rem;
    gap: 0;
    box-shadow: 0 10px 20px rgba(0,0,0,.1);
  }
  .kopf--offen .nav a {
    padding: .9rem .1rem;
    border-bottom: 1px solid var(--stein);
    font-size: var(--t-base);
  }
  .kopf--offen .nav a:last-child { border-bottom: 0; }
  .kopf__menue { display: flex; }
}

@media (max-width: 680px) {
  .kopf__tel { display: none; }

  /* Der Claim ist rund 280 px breit und passt damit nicht neben Logo und
     Menue-Button auf ein Handy. Ohne diese Regel liesse sich die gesamte
     Seite seitlich verschieben. Die Wortmarke traegt die Marke auch allein. */
  .kopf__claim { display: none; }
  .kopf__logo img { width: 44px; height: 44px; }
  .kopf__innen { gap: .75rem; }

  /* Eine Spalte: Zwei Kacheln nebeneinander liessen auf einem 375-px-Handy
     nur rund 13 Zeichen pro Zeile uebrig — unlesbar. Stattdessen werden die
     Kacheln flacher, damit mehr davon auf den Bildschirm passen. */
  .karten--3, .karten--2 { grid-template-columns: 1fr; gap: .9rem; }
  .karte__bild { aspect-ratio: 2 / 1; }
  .karte__innen { padding: 1rem 1.1rem 1.2rem; }
  .karte p { margin-bottom: .7rem; }
  .ablauf { grid-template-columns: 1fr; gap: 1.1rem; }
  .schritt { padding-top: 0; padding-left: 3.4rem; }
  .schritt::before { top: .2rem; }
  .fuss__raster { grid-template-columns: 1fr; }

  /* Anrufleiste am unteren Rand — auf dem Handy der wichtigste Weg */
  .sofort {
    display: grid; grid-template-columns: 1fr 1fr;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
    border-top: 1px solid var(--gruen-900);
  }
  .sofort a { display: flex; align-items: center; justify-content: center; gap: .45rem; padding: .9rem; text-align: center; font-weight: 700; text-decoration: none; font-size: var(--t-sm); }
  .sofort a:first-child { background: var(--gruen-700); color: var(--weiss); }
  .sofort a:last-child { background: var(--gelb); color: var(--gruen-900); }
  body { padding-bottom: 3.5rem; }
}

/* Ab 560 px ist genug Platz fuer zwei Kacheln nebeneinander: jede rund
   250 px breit, das ergibt gut lesbare Zeilen. Darunter bleibt es bei
   einer Spalte. Muss nach dem 680-px-Block stehen, um zu greifen. */
@media (min-width: 560px) and (max-width: 680px) {
  .karten--3, .karten--2 { grid-template-columns: 1fr 1fr; }
  .karte__bild { aspect-ratio: 16 / 10; }
}

/* --- 19. Unterseiten ---------------------------------------------------- */
.krumen { font-family: var(--schrift-marker); font-size: var(--t-xs); letter-spacing: .08em; color: var(--tinte-70); padding-top: 1.4rem; }
.krumen a { color: var(--tinte-70); text-decoration: none; }
.krumen a:hover { color: var(--gruen-700); text-decoration: underline; }

.seitenkopf { padding-block: 2rem var(--luft); border-bottom: 1px solid var(--stein); }
.seitenkopf__raster { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(2rem,1rem + 3vw,4rem); align-items: center; }
.seitenkopf p.lead { font-size: var(--t-lg); color: var(--tinte-70); }

.hinweisbox {
  border-left: 4px solid var(--gelb);
  background: var(--weiss);
  border-radius: var(--radius);
  padding: 1.3rem 1.5rem;
  margin: 2rem 0;
}
.hinweisbox h4 { margin-bottom: .4rem; }
.hinweisbox p { font-size: var(--t-sm); margin-bottom: 0; }

.haken { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .5rem; }
.haken li { display: flex; gap: .7rem; align-items: flex-start; }
.haken li::before { content: "✓"; color: var(--gruen-700); font-weight: 800; flex-shrink: 0; }
.band--dunkel .haken li::before { color: var(--gelb); }

.spalten2 { columns: 2; column-gap: 2.5rem; }
.spalten2 .haken { display: block; }
.spalten2 .haken li { break-inside: avoid; margin-bottom: .5rem; }
@media (max-width: 680px) { .spalten2 { columns: 1; } .seitenkopf__raster { grid-template-columns: 1fr; } }

/* --- 20. Kundenstimmen -------------------------------------------------- */
.bewertung__kopf { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; margin-bottom: 2rem; }
.bewertung__note { font-family: var(--schrift-display); font-weight: 800; font-size: 2.6rem; line-height: 1; color: var(--gruen-900); }
.bewertung__sterne { color: var(--gelb-tief); letter-spacing: .1em; font-size: 1.1rem; }
.bewertung__meta { font-size: var(--t-sm); color: var(--tinte-70); }

.stimme { background: var(--weiss); border: 1px solid var(--stein); border-radius: var(--radius); padding: 1.4rem 1.5rem; display: flex; flex-direction: column; }
.stimme__sterne { color: var(--gelb-tief); letter-spacing: .08em; margin-bottom: .7rem; }
.stimme blockquote { margin: 0 0 1rem; font-size: var(--t-sm); }
.stimme figcaption { margin-top: auto; font-size: var(--t-xs); font-family: var(--schrift-marker); letter-spacing: .06em; text-transform: uppercase; color: var(--tinte-70); }

/* --- 20b. Deutschlandkarte (Fernbetreuung) ------------------------------ */
.dekarte {
  display: grid;
  grid-template-columns: minmax(180px, 260px) 1fr;
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  align-items: center;
  margin: 2rem 0 2.5rem;
  padding: 1.5rem;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius);
  background: rgba(255,255,255,.03);
}
.dekarte__bild {
  background: var(--papier);
  border-radius: var(--radius);
  padding: .8rem;
}
.dekarte__bild img { width: 100%; height: auto; display: block; }
.dekarte__legende { list-style: none; padding: 0; margin: 0 0 1.2rem; display: grid; gap: .5rem; }
.dekarte__legende li { display: flex; align-items: baseline; gap: .6rem; font-size: var(--t-sm); color: rgba(255,255,255,.85); }
.dekarte__legende strong { color: var(--weiss); }
.dekarte__punkt { width: 10px; height: 10px; border-radius: 50%; background: #E5484D; flex-shrink: 0; }
.dekarte__caption { font-size: var(--t-lg); color: rgba(255,255,255,.85); margin: 0; max-width: 42ch; }
@media (max-width: 760px) {
  .dekarte { grid-template-columns: 1fr; text-align: left; }
  .dekarte__bild { max-width: 220px; margin-inline: auto; }
  .dekarte__caption { max-width: none; }
}

/* --- 21. Team ----------------------------------------------------------- */
.team { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem,1rem + 3vw,4rem); align-items: center; }
.team__bild { border-radius: var(--radius); border: 1px solid var(--stein); width: 100%; aspect-ratio: 4/3; object-fit: cover; object-position: center 8%; }
.team__namen { display: flex; gap: 2rem; flex-wrap: wrap; margin-top: 1.6rem; }
.team__name { font-family: var(--schrift-marker); font-size: var(--t-sm); font-weight: 700; color: var(--gruen-700); }
.team__name span { display: block; font-family: var(--schrift-text); font-size: var(--t-xs); font-weight: 400; color: var(--tinte-70); letter-spacing: 0; text-transform: none; }
@media (max-width: 760px) { .team { grid-template-columns: 1fr; } }

/* --- 22. Formular ------------------------------------------------------- */
.formular { display: grid; gap: 1rem; margin-top: 1.6rem; }
.formular label { display: grid; gap: .35rem; font-size: var(--t-sm); font-weight: 600; }
.formular__zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.formular input[type="text"], .formular input[type="tel"], .formular input[type="email"],
.formular select, .formular textarea {
  font-family: var(--schrift-text); font-size: var(--t-base); font-weight: 400;
  padding: .8rem 1rem; border: 1px solid var(--stein); border-radius: var(--radius-feld);
  background: var(--weiss); color: var(--tinte); width: 100%;
}
.formular textarea { resize: vertical; }
.formular input:focus, .formular select:focus, .formular textarea:focus { border-color: var(--gruen-700); outline: 2px solid var(--gelb-tief); outline-offset: 1px; }
.formular__zustimmung { grid-template-columns: auto 1fr; align-items: start; gap: .7rem; font-weight: 400; font-size: var(--t-sm); }
.formular__zustimmung input { margin-top: .3rem; width: 18px; height: 18px; flex-shrink: 0; }
.formular button { justify-self: start; }
.formular button[disabled] { opacity: .65; cursor: progress; transform: none; }

/* Bestätigung nach dem Absenden des Kontaktformulars (Fenster über der Seite) */
.meldung {
  width: min(92vw, 30rem); padding: 0; border: 0;
  border-radius: var(--radius-feld);
  background: var(--weiss); color: var(--tinte);
  box-shadow: 0 24px 60px rgba(18, 48, 27, .28);
}
.meldung::backdrop { background: rgba(18, 48, 27, .55); }
.meldung__innen { padding: 2.2rem 1.8rem 1.8rem; text-align: center; }
.meldung__zeichen {
  display: inline-flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; margin-bottom: 1rem; border-radius: 50%;
  background: var(--gruen-300); color: var(--gruen-900);
  font-size: 1.9rem; font-weight: 700; line-height: 1;
}
.meldung--fehler .meldung__zeichen { background: #FBE7C2; color: #8A5A00; }
.meldung h3 { margin: 0 0 .7rem; font-size: var(--t-xl); }
.meldung p { margin: 0 0 .7rem; }
.meldung__klein { font-size: var(--t-sm); color: var(--tinte-70); }
.meldung__klein a { white-space: nowrap; }
.meldung .knopfreihe { justify-content: center; margin-top: 1.4rem; }
@media (max-width: 560px) { .formular__zwei { grid-template-columns: 1fr; } }

/* --- 23. Rechtstexte ---------------------------------------------------- */
.recht h2 { font-size: var(--t-xl); margin-top: 2.5rem; }
.recht h3 { font-size: var(--t-lg); margin-top: 1.8rem; }
.recht p, .recht li { font-size: var(--t-sm); }
.recht ul { padding-left: 1.2rem; }
.recht li { margin-bottom: .4rem; }

/* --- 22a. Ersparnis-Vergleich (Fernbetreuung) ---------------------------- */
.ersparnis {
  margin-top: 2.4rem;
  padding: clamp(1.4rem, 1rem + 2vw, 2.4rem);
  background: var(--gruen-900);
  color: var(--papier);
  border-radius: var(--radius);
  border-left: 5px solid var(--gelb);
}
.ersparnis h3 { color: var(--weiss); font-size: var(--t-2xl); margin-bottom: .6rem; }
.ersparnis__beispiel {
  display: flex; align-items: center; gap: .45rem;
  font-family: var(--schrift-marker); font-size: var(--t-xs);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--gruen-300); margin-bottom: .9rem;
}
.ersparnis__intro { color: rgba(255,255,255,.8); max-width: 62ch; }

/* Drei große Kennzahlen: vorher durchgestrichen, danach die Null in Gelb */
.ersparnis__zahlen {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
  margin: 1.8rem 0;
}
.ersparnis__zahl {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
}
.ersparnis__was {
  display: block; font-family: var(--schrift-marker); font-size: var(--t-xs);
  letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.65);
  margin-bottom: .5rem;
}
.ersparnis__werte { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem; }
.ersparnis__ohne {
  font-family: var(--schrift-display); font-weight: 700; font-size: var(--t-xl);
  color: rgba(255,255,255,.5); text-decoration: line-through; text-decoration-color: #E5484D;
  text-decoration-thickness: 2px;
}
.ersparnis__pfeil { color: rgba(255,255,255,.5); }
.ersparnis__mit {
  font-family: var(--schrift-display); font-weight: 800; font-size: var(--t-3xl);
  line-height: 1; color: var(--gelb);
}

/* Schritt-für-Schritt-Vergleich */
.ersparnis__vergleich { border-top: 1px solid rgba(255,255,255,.14); }
.ersparnis__kopf, .ersparnis__zeile {
  display: grid; grid-template-columns: 1fr 1.4fr 1.4fr; gap: 1rem;
  padding: .9rem 0; border-bottom: 1px solid rgba(255,255,255,.14); align-items: center;
}
.ersparnis__kopf { font-family: var(--schrift-marker); font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; }
.ersparnis__spalte { display: flex; align-items: center; gap: .45rem; }
.ersparnis__spalte--ohne { color: #F4A3A6; }
.ersparnis__spalte--mit { color: var(--gelb); }
.ersparnis__schritt { font-family: var(--schrift-display); font-weight: 700; color: var(--weiss); }
.ersparnis__zelle { display: flex; align-items: center; gap: .5rem; font-size: var(--t-sm); }
.ersparnis__zelle svg { flex-shrink: 0; }
.ersparnis__zelle--ohne { color: rgba(255,255,255,.55); }
.ersparnis__zelle--ohne svg { color: #F4A3A6; }
.ersparnis__zelle--mit { color: var(--weiss); font-weight: 600; }
.ersparnis__zelle--mit svg { color: var(--gelb); }
.ersparnis__etikett { display: none; }
.ersparnis__fazit { margin-top: 1.4rem; margin-bottom: 0; color: rgba(255,255,255,.85); font-weight: 600; }

@media (max-width: 680px) {
  .ersparnis__zahlen { grid-template-columns: 1fr; gap: .6rem; }
  .ersparnis__zahl { display: flex; justify-content: space-between; align-items: center; gap: .8rem; }
  .ersparnis__was { margin-bottom: 0; }
  .ersparnis__mit { font-size: var(--t-2xl); }
  /* Tabelle wird zur Kartenliste: Schritt oben, darunter ohne / mit */
  .ersparnis__kopf { display: none; }
  .ersparnis__zeile { grid-template-columns: 1fr; gap: .35rem; }
  .ersparnis__etikett { display: inline; font-family: var(--schrift-marker); font-size: var(--t-xs); letter-spacing: .06em; text-transform: uppercase; min-width: 4.6rem; }
  .ersparnis__zelle { align-items: flex-start; }
}

/* --- 22b. Instagram-Hinweis ---------------------------------------------- */
.insta {
  display: flex;
  gap: 1.2rem;
  align-items: flex-start;
  margin-top: 2.2rem;
  padding: 1.5rem 1.6rem;
  border: 1px solid var(--stein);
  border-radius: var(--radius);
  background: var(--weiss);
}
.insta__zeichen {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--gruen-700);
  color: var(--weiss);
}
.insta h3 { margin-bottom: .4rem; }
.insta p { font-size: var(--t-sm); color: var(--tinte-70); margin-bottom: 1.1rem; }
/* Auf dunklem Grund (Referenzen-Hinweis) mitspielen */
.band--dunkel .insta { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); }
.band--dunkel .insta__zeichen { background: var(--gelb); color: var(--gruen-900); }
.band--dunkel .insta p { color: rgba(255,255,255,.78); }
@media (max-width: 560px) {
  .insta { flex-direction: column; gap: .9rem; padding: 1.2rem 1.2rem 1.4rem; }
}

/* --- 23a. Bildkennzeichnung ---------------------------------------------- */
/* Wird nur ausgegeben, wenn in den Daten ein "bildHinweis" gesetzt ist —
   etwa bei Symbolbildern oder KI-generierten Platzhaltern. */
.bildfeld { position: relative; display: block; }
.bildfeld__hinweis {
  position: absolute;
  left: 10px;
  bottom: 10px;
  background: rgba(20, 28, 22, .82);
  color: var(--weiss);
  font-family: var(--schrift-marker);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .3rem .6rem;
  border-radius: var(--radius);
  pointer-events: none;
}
/* In Kacheln sitzt das Bild oben — Hinweis dort etwas kompakter */
.karte .bildfeld__hinweis { left: 8px; bottom: 8px; font-size: .64rem; padding: .25rem .5rem; }

/* --- 23b. Partnernetzwerk ------------------------------------------------ */
/* Logos sind unterschiedlich hoch und breit. Damit die Kacheln trotzdem
   gleichmäßig wirken, bekommt jedes Logo eine Fläche fester Höhe, in der
   es zentriert und proportional eingepasst wird. */
.partner__logofeld {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 72px;
  margin-bottom: 1.1rem;
}
.partner__logofeld--klein { height: 52px; }
.partner__logo {
  max-height: 100%;
  max-width: 78%;
  width: auto;
  object-fit: contain;
}
.partner__wer {
  font-family: var(--schrift-marker);
  font-size: var(--t-xs);
  letter-spacing: .04em;
  color: var(--tinte-70);
  margin-top: -.5rem;
}
a.partner__karte:hover .partner__logo { opacity: .85; }

/* Logo im Kopf der Partner-Unterseite */
.partner__buehne {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--weiss);
  border: 1px solid var(--stein);
  border-radius: var(--radius);
  padding: 2.5rem 2rem;
  min-height: 220px;
}
.partner__buehne img { max-width: 100%; max-height: 180px; width: auto; object-fit: contain; }

/* Portrait eines Partners auf dessen Unterseite */
.partner__person {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: 2.4rem;
  align-items: start;
  margin-top: 1.6rem;
}
.partner__portrait {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--stein);
  background: var(--weiss);
}
.partner__person h2 { margin-bottom: .8rem; }
@media (max-width: 760px) {
  .partner__person { grid-template-columns: 1fr; gap: 1.6rem; }
  .partner__portrait { max-width: 240px; }
}

/* Netzwerk-Symbol im Abschnittsmarker der Partnerseite */
.marker__nr svg { display: block; }

/* Kontaktmöglichkeiten auf der Partnerseite */
.partner__kontakt { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; gap: .6rem; }
.partner__kontakt a {
  display: flex; align-items: center; gap: .8rem;
  padding: .8rem 1.1rem;
  border: 1px solid var(--stein);
  border-radius: var(--radius-feld);
  background: var(--papier);
  text-decoration: none;
  color: var(--tinte);
}
.partner__kontakt a:hover { border-color: var(--gruen-700); background: var(--weiss); color: var(--tinte); }
.partner__kontakt svg { flex-shrink: 0; color: var(--gruen-700); }
.partner__kontakt strong { display: block; font-size: var(--t-sm); font-weight: 700; word-break: break-word; }
.partner__kontakt small { display: block; font-size: var(--t-xs); color: var(--tinte-70); font-weight: 400; }

/* --- 24. Preiskarte ------------------------------------------------------ */
.preiskarte {
  background: var(--weiss);
  border: 1px solid var(--stein);
  border-radius: var(--radius);
  padding: 1.6rem 1.7rem 1.8rem;
}
.preiskarte h4 { margin-bottom: 0; }
.preiskarte .fakten { margin-top: 1rem; }
.preiskarte + .hinweisbox { margin-top: 1.4rem; margin-bottom: 0; }