/* ============================================================
   Sozialstation Ammerland-Wesermarsch GmbH — Template-Stylesheet
   Farben ausschließlich aus Logo & Vorlage:
   Rot (Herz/Linie), Gelb (Blütenmitte), Grau (Ihr Pflegedienst),
   Schwarz (Kontur), Weiß.
   ============================================================ */

:root {
  --rot: #C8191E;
  --rot-dunkel: #9E1014;
  --rot-hell: #FBEAEA;
  --gelb: #F4D90B;
  --grau: #9D9D9C;
  --grau-hell: #F4F4F3;
  --ink: #1D1D1B;
  --weiss: #FFFFFF;
  --gruen-1: #F4F8E4;   /* zarte Frische im Herz, wie das Blattgrün der Vorlage */
  --gruen-2: #DFEDBE;
  --schrift-basis: 17px;
  --font-kopf: "Jost", "Century Gothic", sans-serif;
  --font-text: "Source Sans 3", "Segoe UI", sans-serif;
  --font-hand: "Caveat", cursive;
  --max-breite: 1160px;
}

* { box-sizing: border-box; }

html { scroll-behavior: auto; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--schrift-basis);
  line-height: 1.65;
  color: var(--ink);
  background: var(--weiss);
  text-rendering: optimizeLegibility;
}

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

a { color: var(--rot); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Barrierefreiheit: Fokus, Skip-Link, SR-only ---------- */

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

.abschnitt-rot :focus-visible,
.site-footer :focus-visible,
.btn-rot:focus-visible {
  outline-color: var(--weiss);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -200px;
  z-index: 100;
  background: var(--rot);
  color: var(--weiss);
  font-family: var(--font-kopf);
  font-weight: 500;
  padding: 12px 22px;
  border-radius: 0 0 8px 8px;
}

.skip-link:focus {
  top: 0;
  outline: 3px solid var(--ink);
  text-decoration: none;
}

h1, h2, h3, h4 {
  font-family: var(--font-kopf);
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 0.5em 0;
  text-wrap: balance;
}

h1 { font-size: 2.6rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.35rem; }

p { margin: 0 0 1em 0; text-wrap: pretty; }

.container {
  max-width: var(--max-breite);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--weiss);
  border-bottom: 3px solid var(--rot);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 92px;
}

.logo-link { display: flex; align-items: center; flex-shrink: 0; }
.logo-link img { height: 72px; width: auto; }

.hauptnav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.hauptnav a {
  font-family: var(--font-kopf);
  font-weight: 500;
  font-size: 1.02rem;
  color: var(--ink);
  padding: 10px 14px;
  border-radius: 4px;
  text-decoration: none;
  border-bottom: 3px solid transparent;
}

.hauptnav a:hover { color: var(--rot); }

.hauptnav a.aktiv {
  color: var(--rot);
  border-bottom-color: var(--rot);
  border-radius: 0;
}

.nav-toggle-btn {
  display: none;
  font-family: var(--font-kopf);
  font-size: 1.6rem;
  line-height: 1;
  color: var(--rot);
  background: var(--weiss);
  border: 2px solid var(--rot);
  border-radius: 8px;
  cursor: pointer;
  padding: 8px 14px;
  min-width: 48px;
  min-height: 48px;
  user-select: none;
}

/* ---------- Hand-Schrift / Claim ---------- */

.handschrift {
  font-family: var(--font-hand);
  color: var(--rot);
  font-weight: 600;
  line-height: 1.1;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--weiss);
}

.hero .container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: 48px;
  padding-top: 56px;
  padding-bottom: 48px;
}

.hero-claim {
  font-size: clamp(2.6rem, 5vw, 3.8rem);
  margin: 0 0 28px 0;
}

.hero-liste {
  list-style: none;
  margin: 0 0 36px 0;
  padding: 0;
  display: grid;
  gap: 16px;
}

.hero-liste li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-kopf);
  font-weight: 500;
  font-size: 1.3rem;
}

.herz-punkt {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--rot);
  display: grid;
  place-items: center;
}

.herz-punkt svg { width: 20px; height: 20px; }

.punkte-zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 32px; }

.hero-buttons { display: flex; flex-wrap: wrap; gap: 14px; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-kopf);
  font-weight: 500;
  font-size: 1.05rem;
  padding: 13px 28px;
  border-radius: 999px;
  text-decoration: none;
  border: 2px solid var(--rot);
  transition: background 0.15s ease, color 0.15s ease;
}

.btn-rot { background: var(--rot); color: var(--weiss); }
.btn-rot:hover { background: var(--rot-dunkel); border-color: var(--rot-dunkel); text-decoration: none; }

.btn-kontur { background: var(--weiss); color: var(--rot); }
.btn-kontur:hover { background: var(--rot-hell); text-decoration: none; }

/* Großes Herz */

.hero-herz {
  width: min(100%, 560px);
  margin-left: auto;
  transform: rotate(-2deg);
}

.hero-herz svg { width: 100%; height: auto; display: block; }

/* Foto im Herz (Drag & Drop) */
.herz-foto { position: relative; aspect-ratio: 100 / 92; }
.herz-foto > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.herz-foto .herz-bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: url(#herzclip);
}
.herz-kontur { pointer-events: none; z-index: 3; }

/* ---------- Wellen ---------- */

.welle {
  display: block;
  width: 100%;
  height: 90px;
  margin-bottom: -1px;
}

.welle svg { display: block; width: 100%; height: 100%; }

.welle-flip { transform: scaleY(-1); }

/* ---------- Abschnitte ---------- */

.abschnitt { padding: 72px 0; }

.abschnitt-rot {
  background: var(--rot);
  color: var(--weiss);
}

.abschnitt-rot h2, .abschnitt-rot h3 { color: var(--weiss); }
.abschnitt-rot a { color: var(--weiss); text-decoration: underline; }

.abschnitt-grau { background: var(--grau-hell); }

.vorzeile {
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: 1.9rem;
  color: var(--rot);
  display: block;
  margin-bottom: 4px;
}

.abschnitt-rot .vorzeile { color: var(--gelb); }

.einleitung {
  max-width: 720px;
  font-size: 1.12rem;
}

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

.karten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin-top: 40px;
}

.karte {
  background: var(--weiss);
  border: 1px solid #E6E6E5;
  border-top: 5px solid var(--rot);
  border-radius: 10px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.karte .herz-punkt { margin-bottom: 14px; }

.karte h3 { margin-bottom: 4px; }

.karte p { color: #4A4A48; flex-grow: 1; }

.karte .mehr-link {
  font-family: var(--font-kopf);
  font-weight: 500;
}

/* ---------- Berufsbild-Raster (vier Karten) ---------- */

.berufsbild-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin-top: 40px;
}

@media (max-width: 980px) {
  .berufsbild-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .berufsbild-grid { grid-template-columns: 1fr; }
}

/* ---------- Zweispalter ---------- */

.zweispalter {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 56px;
  align-items: center;
}

/* ---------- Jobs-Banner ---------- */

.jobs-banner .container {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  gap: 48px;
  align-items: center;
}

.jobs-vorteile {
  list-style: none;
  margin: 24px 0 32px 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 28px;
}

.jobs-vorteile li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 1.05rem;
}

.jobs-vorteile li::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gelb);
  flex-shrink: 0;
  transform: translateY(-1px);
}

.btn-weiss {
  background: var(--weiss);
  color: var(--rot);
  border-color: var(--weiss);
}
.btn-weiss:hover { background: var(--gelb); border-color: var(--gelb); color: var(--ink); text-decoration: none; }

/* Buttons in roten Abschnitten: Link-Regeln des Abschnitts übersteuern */
.abschnitt-rot a.btn { text-decoration: none; }
.abschnitt-rot a.btn-weiss { color: var(--rot); }
.abschnitt-rot a.btn-weiss:hover { color: var(--ink); }

/* ---------- Gesellschafter ---------- */

.gesellschafter {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: 36px;
}

.gesellschafter a {
  font-family: var(--font-kopf);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--ink);
  padding: 12px 8px;
  text-align: center;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.gesellschafter a:hover { color: var(--rot); }

.gesellschafter img {
  display: block;
  width: 180px;
  height: 96px;
  object-fit: contain;
  filter: grayscale(1) opacity(0.7);
  transition: filter 0.15s ease;
}

.gesellschafter a:hover img,
.gesellschafter a:focus-visible img {
  filter: none;
}

/* ---------- Standort-Fotos (Tagespflege) ---------- */

.standort-fotos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 22px;
}

.standort-fotos img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--rot);
  color: var(--weiss);
  padding: 48px 0 36px 0;
}

.site-footer a { color: var(--weiss); }

.footer-spalten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  margin-bottom: 40px;
}

.site-footer h4,
.site-footer .footer-titel {
  font-family: var(--font-kopf);
  font-weight: 500;
  line-height: 1.2;
  color: var(--weiss);
  font-size: 1.15rem;
  margin: 0 0 12px 0;
}

.site-footer p { color: #FFE9E9; margin-bottom: 0.4em; }

.footer-unten {
  border-top: 1px solid rgba(255, 255, 255, 0.35);
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  font-family: var(--font-kopf);
}

.footer-copy { color: #FFE9E9; font-size: 0.95rem; }

/* ---------- Unterseiten-Kopf ---------- */

.seitenkopf { padding: 56px 0 72px 0; }

.seitenkopf .container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 40px;
}

.seitenkopf-herz { width: 180px; transform: rotate(-3deg); flex-shrink: 0; }

/* ---------- Leistungs-Zeilen ---------- */

.leistung {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 28px;
  padding: 36px 0;
  border-bottom: 1px solid #E6E6E5;
}

.leistung:last-child { border-bottom: none; }

.leistung-symbol {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--gruen-1), var(--gruen-2));
  border: 3px solid var(--rot);
  display: grid;
  place-items: center;
}

.leistung-symbol svg { width: 44px; height: 44px; }

.leistung ul {
  margin: 8px 0 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 28px;
}

.leistung ul li {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.leistung ul li::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--rot);
  flex-shrink: 0;
  transform: translateY(-1px);
}

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

.kontakt-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px;
  margin-top: 36px;
}

.standort-karte {
  background: var(--weiss);
  border: 1px solid #E6E6E5;
  border-top: 5px solid var(--rot);
  border-radius: 10px;
  padding: 32px 28px;
}

.standort-karte h3 { display: flex; align-items: center; gap: 12px; }

.standort-karte .herz-punkt { width: 34px; height: 34px; }
.standort-karte .herz-punkt svg { width: 16px; height: 16px; }

.standort-karte dl { margin: 16px 0 0 0; }
.standort-karte dt {
  font-family: var(--font-kopf);
  font-weight: 500;
  font-size: 0.92rem;
  color: #6E6E6D;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 14px;
}
.standort-karte dd { margin: 2px 0 0 0; font-size: 1.08rem; }

.formular {
  background: var(--weiss);
  border: 1px solid #E6E6E5;
  border-radius: 10px;
  padding: 40px;
  margin-top: 40px;
}

.formular-raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 24px;
}

.feld { display: flex; flex-direction: column; gap: 6px; }
.feld-voll { grid-column: 1 / -1; }

.feld label {
  font-family: var(--font-kopf);
  font-weight: 500;
  font-size: 0.98rem;
}

.feld input[type="text"],
.feld input[type="email"],
.feld input[type="tel"],
.feld select,
.feld textarea {
  font-family: var(--font-text);
  font-size: 1rem;
  padding: 12px 14px;
  border: 1px solid #CFCFCE;
  border-radius: 6px;
  background: var(--weiss);
  color: var(--ink);
}

.feld input:focus, .feld select:focus, .feld textarea:focus {
  outline: 2px solid var(--rot);
  outline-offset: 1px;
  border-color: var(--rot);
}

.feld textarea { min-height: 140px; resize: vertical; }

.checkzeile {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 0.95rem;
  color: #4A4A48;
}

.checkzeile input { margin-top: 4px; accent-color: var(--rot); }

.pflicht-hinweis { font-size: 0.9rem; color: #6E6E6D; margin-top: 16px; }

.formular-meldung {
  border-radius: 8px;
  padding: 14px 18px;
  margin: 0 0 20px 0;
}

.formular-meldung-ok {
  background: var(--gruen-1);
  border: 1px solid var(--gruen-2);
}

.formular-meldung-fehler {
  background: var(--rot-hell);
  border: 1px solid var(--rot);
}

/* ---------- Textseiten (Impressum, Datenschutz, Geschichte) ---------- */

.textseite { max-width: 800px; }

.textseite h2 { margin-top: 48px; }

.textseite h3 { font-size: 1.15rem; margin-top: 32px; }

.textseite h4 { font-size: 1.02rem; margin-top: 24px; }

.zeitleiste {
  list-style: none;
  margin: 40px 0 0 0;
  padding: 0;
  position: relative;
}

.zeitleiste::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  background: var(--rot-hell);
}

.zeitleiste li {
  position: relative;
  padding: 0 0 32px 48px;
}

.zeitleiste li:last-child { padding-bottom: 0; }

.zeitleiste li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 7px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--rot);
  border: 3px solid var(--weiss);
  box-shadow: 0 0 0 2px var(--rot-hell);
}

.zeitleiste .jahr {
  display: block;
  font-family: var(--font-kopf);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--rot);
}

/* ---------- Rechner (Pflegeleistungen & Tagespflege) ---------- */

.rechner-karte {
  background: var(--weiss);
  border: 1px solid #E6E6E5;
  border-top: 5px solid var(--rot);
  border-radius: 10px;
  padding: 32px 28px;
}

.rechner-karte h2 { font-size: 1.35rem; }

.rechner-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  margin-top: 36px;
}

.rechner-raster .rechner-ergebnis { position: sticky; top: 116px; }

.rechner-hinweis {
  font-size: 0.95rem;
  color: #4A4A48;
  background: var(--grau-hell);
  border-radius: 6px;
  padding: 12px 16px;
  margin: 16px 0 0 0;
}

.hinweis-klein { font-size: 0.88rem; color: #6E6E6D; }

/* Auswahl-Kacheln (Radio-Gruppen) */

.wahl-gruppe { border: 0; padding: 0; margin: 0 0 20px 0; min-width: 0; }

.wahl-gruppe legend {
  font-family: var(--font-kopf);
  font-weight: 500;
  font-size: 0.98rem;
  padding: 0;
  margin-bottom: 8px;
}

.wahl-optionen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.wahl-option { position: relative; }

.wahl-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.wahl-option label {
  display: block;
  text-align: center;
  padding: 10px 12px;
  border: 2px solid #CFCFCE;
  border-radius: 10px;
  background: var(--weiss);
  cursor: pointer;
}

.wahl-option label:hover { border-color: var(--rot); }

.wahl-option input:checked + label {
  border-color: var(--rot);
  background: var(--rot-hell);
}

.wahl-option input:focus-visible + label {
  outline: 3px solid var(--rot);
  outline-offset: 2px;
}

.wahl-name {
  display: block;
  font-family: var(--font-kopf);
  font-weight: 500;
}

.wahl-preis { display: block; font-size: 0.88rem; color: #6E6E6D; }

/* Besuchstage-Regler */

.tage-regler { display: flex; align-items: center; gap: 18px; }

.tage-regler input[type="range"] { flex: 1; accent-color: var(--rot); min-height: 32px; }

.tage-wert {
  font-family: var(--font-kopf);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--rot);
  min-width: 76px;
  text-align: center;
}

/* Ergebnis-Karte */

.rechner-ergebnis {
  background: var(--weiss);
  border: 1px solid #E6E6E5;
  border-radius: 10px;
  overflow: hidden;
}

.rechner-ergebnis-kopf {
  background: var(--rot);
  color: var(--weiss);
  text-align: center;
  padding: 22px 24px;
}

.rechner-ergebnis-kopf h2 { color: var(--weiss); font-size: 1.35rem; margin: 0; }

.rechner-ergebnis-kopf p { margin: 0; color: #FFE9E9; }

.eigenanteil-betrag {
  display: block;
  font-family: var(--font-kopf);
  font-weight: 600;
  font-size: 2.4rem;
  line-height: 1.15;
  color: var(--weiss);
}

.rechner-ergebnis-inhalt { padding: 24px 28px 28px 28px; }

.rechner-gruppe + .rechner-gruppe { margin-top: 28px; }

.rechner-gruppe-titel {
  font-family: var(--font-kopf);
  font-weight: 500;
  font-size: 0.92rem;
  color: #6E6E6D;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 4px 0;
}

.rechner-zeile {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px dashed #E6E6E5;
}

.rechner-zeile:last-child { border-bottom: none; }

.rechner-zeile-titel { margin: 0; }

.rechner-zeile-titel .untertitel {
  display: block;
  font-size: 0.85rem;
  color: #6E6E6D;
}

.rechner-wert {
  font-family: var(--font-kopf);
  font-weight: 600;
  white-space: nowrap;
}

.rechner-wert.gedimmt { color: #6E6E6D; font-weight: 400; }

.rechner-zeile-summe { border-top: 2px solid #E6E6E5; }

.rechner-summe {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  background: var(--gruen-1);
  border-radius: 10px;
  padding: 16px 20px;
  margin-top: 20px;
}

.rechner-summe .rechner-wert { font-size: 1.35rem; color: var(--rot); }

/* Kostenverteilung (Balken) */

.kosten-balken {
  display: flex;
  height: 28px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--grau-hell);
  margin: 22px 0 10px 0;
}

.kosten-balken span { display: block; height: 100%; transition: width 0.4s ease; }

.balken-kasse { background: var(--gruen-2); }
.balken-entlastung { background: var(--gelb); }
.balken-eigen { background: var(--rot); }

.kosten-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  font-size: 0.9rem;
  color: #4A4A48;
  list-style: none;
  margin: 0;
  padding: 0;
}

.kosten-legende li { display: flex; align-items: center; gap: 7px; }

.legende-punkt { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }

/* Tipp & rechtliche Hinweise */

.rechner-tipp {
  background: var(--gruen-1);
  border-left: 4px solid var(--gelb);
  border-radius: 6px;
  padding: 14px 18px;
  margin-top: 20px;
  font-size: 0.95rem;
}

.rechner-tipp p { margin: 0; }

.rechner-rechtliches {
  background: var(--grau-hell);
  border-left: 4px solid var(--rot);
  border-radius: 6px;
  padding: 24px 28px;
  margin-top: 48px;
  font-size: 0.95rem;
  color: #4A4A48;
}

.rechner-rechtliches h2 { font-size: 1.15rem; }

.rechner-rechtliches ul { margin: 0 0 14px 0; padding-left: 20px; }

.rechner-rechtliches li { margin-bottom: 8px; }

.rechner-rechtliches p:last-child { margin-bottom: 0; }

@media (max-width: 980px) {
  .rechner-raster { grid-template-columns: 1fr; }
  .rechner-raster .rechner-ergebnis { position: static; }
}

/* ---------- Service-Leiste (Zugänglichkeit) ---------- */

.service-leiste {
  background: var(--grau-hell);
  border-bottom: 1px solid #E6E6E5;
  font-family: var(--font-kopf);
  font-size: 0.92rem;
}

.service-leiste .container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 20px;
  min-height: 42px;
  padding-top: 5px;
  padding-bottom: 5px;
}

.service-leiste > .container > a {
  color: var(--ink);
  text-decoration: none;
  padding: 4px 2px;
}

.service-leiste > .container > a:hover { color: var(--rot); text-decoration: underline; }

.schrift-schalter { display: flex; gap: 5px; align-items: center; }

.schrift-schalter button,
.vorlesen-knopf {
  font-family: var(--font-kopf);
  font-weight: 500;
  background: var(--weiss);
  border: 1px solid #CFCFCE;
  border-radius: 6px;
  color: var(--ink);
  cursor: pointer;
  padding: 3px 10px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.schrift-schalter button:hover,
.vorlesen-knopf:hover { border-color: var(--rot); color: var(--rot); }

.schrift-schalter button[aria-pressed="true"] {
  background: var(--rot);
  border-color: var(--rot);
  color: var(--weiss);
}

.schrift-a { font-size: 0.82rem; }
.schrift-b { font-size: 0.95rem; }
.schrift-c { font-size: 1.1rem; }

.vorlesen-knopf[aria-pressed="true"] {
  background: var(--gelb);
  border-color: var(--gelb);
}

/* Schriftgrößen-Stufen: skalieren rem-Maße und die Basisgröße zugleich */
html.schrift-gross { font-size: 112.5%; --schrift-basis: 19px; }
html.schrift-sehr-gross { font-size: 125%; --schrift-basis: 21px; }

/* ---------- FAQ (Akkordeon) ---------- */

.faq-thema { margin-top: 48px; }

.faq-thema:first-of-type { margin-top: 8px; }

.faq-thema > h2 {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.faq-thema > h2 .herz-punkt { flex-shrink: 0; }

.faq-eintrag {
  background: var(--weiss);
  border: 1px solid #E6E6E5;
  border-radius: 10px;
  margin-bottom: 12px;
  overflow: hidden;
}

.faq-eintrag[open] {
  border-color: var(--rot);
  box-shadow: 0 2px 12px rgba(200, 25, 30, 0.08);
}

.faq-eintrag summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 18px 24px;
  cursor: pointer;
  font-family: var(--font-kopf);
  font-weight: 500;
  font-size: 1.12rem;
  color: var(--ink);
  list-style: none;
}

.faq-eintrag summary::-webkit-details-marker { display: none; }

.faq-eintrag summary:hover { color: var(--rot); }

.faq-eintrag summary::after {
  content: "";
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border-right: 3px solid var(--rot);
  border-bottom: 3px solid var(--rot);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.faq-eintrag[open] summary { color: var(--rot); }

.faq-eintrag[open] summary::after { transform: rotate(-135deg); }

.faq-antwort {
  padding: 0 24px 20px 24px;
  color: #4A4A48;
}

.faq-antwort p { margin: 0 0 0.8em 0; }

.faq-antwort p:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .faq-eintrag summary::after { transition: none; }
}

/* ---------- Leichte Sprache ---------- */

.leichte-sprache {
  font-size: 1.18rem;
  line-height: 1.95;
}

.leichte-sprache h2 { margin-top: 44px; }

.leichte-sprache ul { padding-left: 24px; }

.leichte-sprache li { margin-bottom: 8px; }

/* ---------- Druck ---------- */

@media print {
  .site-header, .site-footer, .welle, .skip-link,
  .btn, .hero-buttons, .seitenkopf-herz, .kein-druck { display: none !important; }

  body { font-size: 11pt; }
  .seitenkopf { padding: 0 0 8px 0; }
  .abschnitt { padding: 12px 0; }

  .rechner-raster { display: block; }
  .rechner-raster .rechner-ergebnis { position: static; margin-top: 18px; }
  .rechner-karte, .rechner-ergebnis { border: 1px solid #9D9D9C; break-inside: avoid; }
  .rechner-ergebnis-kopf { background: none; border-bottom: 2px solid var(--ink); }
  .rechner-ergebnis-kopf h2, .rechner-ergebnis-kopf p, .eigenanteil-betrag { color: var(--ink); }
  .rechner-summe { background: none; border: 1px solid #9D9D9C; }
  .kosten-balken, .kosten-legende { display: none; }
  .rechner-rechtliches { background: none; border: 1px solid #9D9D9C; }
}

/* ---------- Responsiv ---------- */

@media (max-width: 980px) {
  .hero .container { grid-template-columns: 1fr; padding-bottom: 40px; }
  .hero-herz { margin: 0 auto; width: min(100%, 420px); }
  .karten { grid-template-columns: 1fr; }
  .zweispalter { grid-template-columns: 1fr; gap: 32px; }
  .jobs-banner .container { grid-template-columns: 1fr; }
  .gesellschafter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-spalten { grid-template-columns: 1fr; gap: 28px; }
  .kontakt-raster { grid-template-columns: 1fr; }
  .punkte-zwei { grid-template-columns: 1fr; }
  .seitenkopf .container { grid-template-columns: 1fr; }
  .seitenkopf-herz { display: none; }
  .leistung { grid-template-columns: 72px minmax(0, 1fr); }
  .leistung-symbol { width: 72px; height: 72px; }
  .leistung ul { grid-template-columns: 1fr; }

  .nav-toggle-btn { display: block; }
  .hauptnav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--weiss);
    border-bottom: 3px solid var(--rot);
    flex-direction: column;
    align-items: stretch;
    padding: 12px 24px 20px 24px;
    gap: 2px;
  }
  .hauptnav a { padding: 12px 8px; border-bottom: 1px solid #EEEEED; }
  .hauptnav a.aktiv { border-bottom-color: var(--rot); }
  .hauptnav.offen { display: flex; }
}

@media (max-width: 560px) {
  .formular-raster { grid-template-columns: 1fr; }
  .jobs-vorteile { grid-template-columns: 1fr; }
  .gesellschafter { grid-template-columns: 1fr; }
  .formular { padding: 28px 20px; }
}