/* ============================================================
   Alltagsdienst Sperling – Haupt-Stylesheet
   Farben aus dem Logobook: Grün #BDD959 (sRGB 189|217|89),
   Schwarz #1D1D1B. Schrift: Montserrat (lokal, DSGVO-konform;
   bis zur Einbindung System-Fallback).
   ============================================================ */

/* ---------- Schriften (lokal gehostet, keine Anfragen an Dritte) ---------- */
@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/montserrat-v31-latin-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/montserrat-v31-latin-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/montserrat-v31-latin-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/montserrat-v31-latin-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/montserrat-v31-latin-800.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}

/* ---------- Design-Tokens ---------- */
:root {
  --brand-green: #bdd959;
  --brand-green-dark: #93b32e;   /* abgedunkelt für Text auf hellem Grund (Kontrast) */
  --brand-green-deep: #5d7517;   /* für kleine Texte/Labels auf hellem Grund */
  --brand-black: #1d1d1b;

  --user-font-scale: 1;

  --font-sans: "Montserrat", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 22px;
  --shadow-1: 0 2px 10px rgba(29, 29, 27, 0.08);
  --shadow-2: 0 10px 30px rgba(29, 29, 27, 0.14);
  --container: 1180px;
  --transition: 180ms ease;
}

:root[data-theme="light"] {
  --bg: #fdfdfa;
  --bg-alt: #f4f6ec;
  --surface: #ffffff;
  --text: #1d1d1b;
  --text-soft: #4b4b47;
  --accent: var(--brand-green);
  --accent-text: #1d1d1b;          /* Text AUF grünen Flächen */
  --accent-strong: var(--brand-green-deep); /* grüner Text auf Hintergrund */
  --line: #e2e5d8;
  --line-bedienung: #767a6b;   /* Rahmen für Formularfelder, Kontrast 3,2 zu 1 */
  --stern: #a86a10;            /* Bewertungssterne, Kontrast 4,4 zu 1 auf Weiß */
  --header-bg: rgba(253, 253, 250, 0.92);
  --focus: #0f62fe;
}

:root[data-theme="dark"] {
  --bg: #161614;
  --bg-alt: #1f1f1c;
  --surface: #242422;
  --text: #f4f4ef;
  --text-soft: #c9c9c0;
  --accent: var(--brand-green);
  --accent-text: #1d1d1b;
  --accent-strong: #cfe382;
  --line: #3a3a36;
  --line-bedienung: #8e8e84;   /* Rahmen für Formularfelder im dunklen Design */
  --stern: #f0b95e;            /* Bewertungssterne, Kontrast 8,7 zu 1 auf der dunklen Karte */
  --header-bg: rgba(22, 22, 20, 0.92);
  --focus: #78a9ff;
}

/* ---------- Basis ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  font-size: calc(100% * var(--user-font-scale));
  scroll-behavior: smooth;
}

html.mode-bw { filter: grayscale(1); }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 {
  line-height: 1.2;
  margin: 0 0 0.6em;
  overflow-wrap: break-word;
  hyphens: auto;
  /* Die Trennung ist nur für lange Komposita wie „Haushaltshilfe" gedacht. Ohne diese
     Grenzen zerlegt der Browser auch kurze Wörter, „Hau-se" in einer Überschrift wirkt
     unsauber. Erst ab zehn Zeichen trennen, mit mindestens vier Zeichen je Teil. */
  -webkit-hyphenate-limit-before: 4;
  -webkit-hyphenate-limit-after: 4;
  hyphenate-limit-chars: 10 4 4;
}
h1 { font-size: clamp(1.65rem, 3.2vw, 2.35rem); font-weight: 800; }
h2 { font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 700; }
h3 { font-size: 1.08rem; font-weight: 700; }
p { margin: 0 0 1em; overflow-wrap: break-word; }
/* Dieselbe Regel für alle übrigen Textbehälter. Absätze hatten sie, Aufzählungen und
   Tabellen nicht. Lange deutsche Wörter wie „Datenübertragbarkeit" ragten dadurch bei
   großer Schrifteinstellung aus dem Bild. Sichtbar wird die Regel nur dann, wenn ein
   Wort sonst wirklich nicht passt. */
li, dd, dt, td, th, figcaption, summary, address, blockquote, label {
  overflow-wrap: break-word;
}

a { color: var(--accent-strong); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2.5px; }

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

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  top: -60px; left: 1rem;
  z-index: 100;
  background: var(--brand-black);
  color: #fff;
  padding: 0.7rem 1.2rem;
  border-radius: 0 0 var(--radius-s) var(--radius-s);
  transition: top var(--transition);
}
.skip-link:focus { top: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font: inherit;
  font-weight: 700;
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.btn-primary { background: var(--accent); color: var(--accent-text); }
.btn-secondary { background: transparent; color: var(--text); border-color: currentColor; }
.btn-dark { background: var(--brand-black); color: #fff; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.header-main {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-block: 0.6rem;
  flex-wrap: wrap;
}

/* Das Logo ist das einzige Element in der Kopfzeile, das nachgeben darf. Menü und
   Bedienknöpfe stehen fest (flex-shrink 0 weiter unten). Vorher durfte die Navigation
   schrumpfen, ihr Inhalt lief dann unter die Knöpfe und „Kontakt" war halb verdeckt
   (gemeldet am 03.08.2026). Jetzt wird zuerst das Logo kleiner, bis zur Untergrenze. */
.brand { flex: 0 1 auto; display: inline-flex; min-width: 168px; }
/* Auf Wunsch des Auftraggebers vergrößert (31.07., 02.08. und 03.08.2026). */
.brand-logo { width: clamp(212px, 26vw, 282px); max-width: 100%; height: auto; display: block; }
/* Der Schriftzug im Inline-Logo folgt der Textfarbe, der Vogel bleibt grün */
.brand .brand-logo,
.entry-header .entry-logo { color: var(--text); }
.site-footer .footer-logo { color: #f4f4ef; }

/* flex-shrink 0: die Navigation gibt nicht nach. Sonst schiebt sich ihr Inhalt bei
   engem Platz unter die Bedienknöpfe, statt dass das Logo kleiner wird. */
.main-nav { margin-left: auto; flex: 0 0 auto; }

/* Hat jemand die Schrift hochgestellt, wächst die Knopfreihe mit. Die Wortmarke
   „Barrierefrei" entfällt dann; Sinnbild, Titel und Vorlesebeschriftung bleiben,
   der Knopf ist also weiterhin auffindbar und benannt. */
html.schrift-vergroessert .a11y-open-label { display: none; }
.nav-list {
  display: flex;
  gap: 0.1rem;
  list-style: none;
  margin: 0; padding: 0;
  flex-wrap: wrap;
}
.nav-list a {
  display: block;
  padding: 0.55rem 0.85rem;
  border-radius: var(--radius-s);
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}
.nav-list a:hover { background: var(--bg-alt); }
.nav-list a[aria-current="page"] {
  background: var(--accent);
  color: var(--accent-text);
}

.nav-toggle { display: none; }
/* Die drei Balken im Menüknopf. Gehören zu den Grundregeln, nicht in einen
   Breakpoint: Der Knopf erscheint auch im barrierefreien Modus auf breiten
   Bildschirmen, dort blieb er sonst leer. */
.nav-toggle-bar { width: 22px; height: 2.5px; background: var(--text); border-radius: 2px; }

.header-tools {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex: 0 0 auto;
}
.tool-btn {
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text);
  background: var(--bg-alt);
  border: 1px solid var(--line-bedienung);
  border-radius: 999px;
  padding: 0.42rem 0.8rem;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition);
}
.tool-btn:hover { background: var(--accent); color: var(--accent-text); }

.icon { width: 1.15em; height: 1.15em; vertical-align: -0.2em; }
.tool-btn .icon { width: 1.05em; height: 1.05em; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }


/* ---------- Barrierefrei-Dialog ---------- */
.a11y-dialog {
  border: none;
  border-radius: var(--radius-l);
  padding: 1.4rem;
  max-width: min(430px, 92vw);
  width: 100%;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-2);
}
.a11y-dialog::backdrop { background: rgba(29, 29, 27, 0.5); }
.a11y-dialog-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.a11y-dialog-head h2 { margin: 0; font-size: 1.25rem; }
.a11y-close {
  font: inherit; font-size: 1.1rem;
  background: var(--bg-alt);
  border: 1px solid var(--line-bedienung);
  border-radius: 50%;
  width: 2.4rem; height: 2.4rem;
  cursor: pointer;
}
.a11y-controls { display: grid; gap: 0.6rem; }
.a11y-ctrl {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  padding: 0.8rem 1rem;
  border-radius: var(--radius-m);
  border: 1.5px solid var(--line-bedienung);
  background: var(--bg-alt);
  color: var(--text);
  cursor: pointer;
}
.a11y-ctrl strong { display: block; }
.a11y-ctrl span { font-size: 0.88rem; color: var(--text-soft); }
.a11y-ctrl[aria-pressed="true"] {
  border-color: var(--brand-green-dark);
  background: var(--accent);
  color: var(--accent-text);
}
.a11y-ctrl[aria-pressed="true"] span { color: var(--accent-text); }
.a11y-fontsize { cursor: default; }
.fontsize-btns { display: flex; gap: 0.4rem; margin-top: 0.4rem; }
.fontsize-btns button {
  font: inherit; font-weight: 700;
  padding: 0.35rem 1rem;
  border-radius: var(--radius-s);
  border: 1.5px solid var(--line-bedienung);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.fontsize-btns button:hover { background: var(--accent); color: var(--accent-text); }
.a11y-more { margin: 1rem 0 0; font-size: 0.9rem; }

/* ---------- Barrierefreier Modus ---------- */
html.mode-a11y { font-size: calc(112.5% * var(--user-font-scale)); }
html.mode-a11y body { line-height: 1.85; letter-spacing: 0.01em; }
html.mode-a11y a { text-decoration: underline !important; }
html.mode-a11y .btn { border: 2px solid currentColor; }
html.mode-a11y .page-summary { outline: 3px solid var(--accent-strong); }
/* Kürzere Zeilen lesen sich leichter, deshalb der schmalere Inhaltsbereich. Kopf- und
   Fußbereich sind davon ausgenommen: Dort steht kein Fließtext, sondern eine Reihe
   nebeneinander. Zusammen mit der größeren Schrift reichte die Breite sonst nicht und
   die Navigation lief in die Bedienknöpfe. */
html.mode-a11y .container { max-width: 900px; }
html.mode-a11y .site-header .container,
html.mode-a11y .site-footer .container { max-width: var(--container); }

/* ---------- Zusammenfassung in einfacher Sprache ---------- */
/* Der Kasten war ein umrandeter Block mit eigener Farbe und wirkte als Fremdkörper
   über der Überschrift (Rückmeldung 03.08.2026: „homogener einbetten", „freundlicher").
   Zugeklappt ist er jetzt nur noch eine ruhige grüne Zeile. Erst beim Aufklappen
   bekommt der Text einen weichen Untergrund, damit er sich gut liest. */
.page-summary {
  background: transparent;
  border: 0;
  margin: 1rem auto 0;
  max-width: var(--container);
  padding-inline: clamp(1rem, 4vw, 2rem);
}
.page-summary summary {
  cursor: pointer;
  display: inline-block;
  font-weight: 600;
  font-size: 0.97rem;
  color: var(--accent-strong);
  padding: 0.4rem 0;
  border-radius: var(--radius-s);
  list-style: none;
}
/* Eigenes Zeichen statt des Browser-Dreiecks: das native verschwindet, sobald die
   Zeile inline dargestellt wird. Ohne Zeichen sieht man nicht, dass sich hier
   etwas aufklappen lässt. */
.page-summary summary::-webkit-details-marker { display: none; }
.page-summary summary::before {
  content: "";
  display: inline-block;
  width: 0.42em; height: 0.42em;
  margin-right: 0.55em;
  border-right: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  transform: translateY(-0.12em) rotate(-45deg);
  transition: transform var(--transition);
}
.page-summary[open] summary::before { transform: translateY(-0.2em) rotate(45deg); }
.page-summary summary:hover { text-decoration: underline; }
.page-summary[open] summary { margin-bottom: 0.5rem; }
.page-summary p {
  margin: 0;
  padding: 0.95rem 1.2rem;
  font-size: 1.05em;
  background: var(--bg-alt);
  border-radius: var(--radius-m);
  border-left: 4px solid var(--brand-green);
}

/* ---------- Auswahlseite (Entry) ---------- */
.entry-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.entry-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1rem clamp(1rem, 4vw, 2rem);
  gap: 1rem;
}
.entry-logo { width: clamp(280px, 34vw, 400px); max-width: 100%; height: auto; display: block; }

.entry-page main {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.entry-intro {
  text-align: center;
  padding: 0 1.2rem 1.6rem;
  max-width: 640px;
  margin-inline: auto;
}
.entry-intro h1 { margin-bottom: 0.25em; }
.entry-intro p { color: var(--text-soft); font-size: 1.15rem; margin: 0; }

.entry-split {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(0.8rem, 2vw, 1.6rem);
  padding: 0 clamp(1rem, 4vw, 2rem) clamp(1rem, 3vw, 2rem);
  align-items: stretch;
}
.entry-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: min(62vh, 580px);
  border-radius: var(--radius-l);
  overflow: hidden;
  text-decoration: none;
  isolation: isolate;
  background: var(--bg-alt);
  border: 2px solid var(--line);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.entry-card:hover,
.entry-card:focus-visible {
  transform: translateY(-6px);
  box-shadow: var(--shadow-2);
  border-color: var(--brand-green);
}

/* Die Kacheln waren mit Fotos hinterlegt. Auf Wunsch des Auftraggebers (31.07.2026)
   sind sie jetzt einfarbig und tragen oben das Logo. Das hält die Auswahlseite ruhig
   und macht die Schrift auf jedem Bildschirm gleich gut lesbar. */
.entry-card-marke {
  padding: clamp(1.4rem, 3vw, 2.4rem) clamp(1.4rem, 3vw, 2.4rem) 0;
}
.entry-card-logo {
  width: clamp(180px, 26%, 260px);
  height: auto;
  display: block;
  opacity: 0.95;
}
/* Zwei Grüntöne aus der Marke statt Grün und Schwarz: die Jobs-Kachel wirkte
   schwarz zu hart (Rückmeldung 02.08.2026). Beide Töne sind dunkel genug für
   weiße Schrift und lassen den grünen Vogel im Logo stehen. */
.entry-card-kunden { background: #24300a; border-color: #24300a; }
.entry-card-jobs { background: #4c6118; border-color: #4c6118; }
/* Der Inhalt sitzt unten, das Logo oben. Der Zwischenraum wächst mit der Kachel. */
.entry-card { justify-content: space-between; }
/* Kachelinhalt sitzt unten, damit oben das Foto frei bleibt */
.entry-card-inhalt { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); }
.entry-card-inhalt {
  padding: clamp(1.4rem, 3vw, 2.4rem);
  color: #fff;
}
.entry-card-icon { display: block; margin-bottom: 0.9rem; }
.entry-card-icon .icon { width: clamp(38px, 5vw, 52px); height: clamp(38px, 5vw, 52px); color: #fff; }
.entry-card h2 { font-size: clamp(1.4rem, 2.8vw, 2.1rem); margin-bottom: 0.35em; color: #fff; }
.entry-card p { max-width: 46ch; margin-bottom: 1.2em; color: rgba(255, 255, 255, 0.93); }
.entry-card .btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 0.5rem; }
.entry-card-kunden .btn { background: #fff; color: var(--brand-black); }
.entry-card-jobs .btn { background: var(--brand-green); color: var(--brand-black); }

.entry-fuss {
  padding: 0 clamp(1rem, 4vw, 2rem) 1.4rem;
  max-width: 1000px;
  margin-inline: auto;
  text-align: center;
}
.entry-fuss-text {
  font-size: 0.95rem;
  color: var(--text-soft);
  max-width: 78ch;
  margin-inline: auto;
}
.entry-direkt {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.1rem;
  justify-content: center;
  align-items: center;
  margin-bottom: 0.9rem;
}
.entry-direkt-titel { font-size: 0.9rem; font-weight: 700; color: var(--text); }
/* Eigenständige Ziele, deshalb auf mindestens 24px Höhe gepolstert (WCAG 2.5.8) */
.entry-direkt a { font-size: 0.93rem; font-weight: 600; display: inline-block; padding: 0.2rem 0; }
.entry-tel { margin: 0; font-size: 0.93rem; }
.entry-tel a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
}
.entry-tel span { color: var(--text-soft); margin-left: 0.5rem; }

.entry-footer {
  padding: 0.8rem clamp(1rem, 4vw, 2rem);
  border-top: 1px solid var(--line);
}
.entry-footer nav { display: flex; gap: 1.2rem; flex-wrap: wrap; justify-content: center; }
/* Eigenständige Ziele, deshalb auf mindestens 24px Höhe gepolstert (WCAG 2.5.8) */
.entry-footer a { font-size: 0.88rem; color: var(--text-soft); display: inline-block; padding: 0.25rem 0; }

/* ---------- Hero (Strang-Startseiten) ---------- */
.hero {
  background: linear-gradient(160deg, var(--bg-alt) 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--line);
}
.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  padding-block: clamp(1.8rem, 4vw, 3.2rem);
}
.hero h1 { color: var(--text); }
.hero-text { font-size: 1.08rem; color: var(--text-soft); max-width: 54ch; }
.hero-ctas { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 1.4rem; }
.hero-kicker {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin-bottom: 0.5rem;
}
.hero-note { font-size: 0.9rem; color: var(--text-soft); margin-top: 0.8rem; }
.hero-media {
  margin: 0;
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: var(--shadow-2);
  aspect-ratio: 4 / 3;
  background: var(--bg-alt);
}
.hero-media picture { display: block; height: 100%; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-media p { margin: 0; padding: 1rem; text-align: center; color: var(--text-soft); }
.video-placeholder-inner { display: grid; place-items: center; height: 100%; }

.btn-phone {
  background: var(--surface);
  color: var(--text);
  border-color: var(--line);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 1.15rem;
}
.btn-phone .icon { width: 1.2em; height: 1.2em; color: var(--accent-strong); }

/* ---------- Vertrauensleiste ---------- */
.trust-bar {
  /* Dunkelgrün statt Schwarz, derselbe Ton wie die Kunden-Kachel auf der
     Auswahlseite. Schwarz wirkte zu hart (Rückmeldung 03.08.2026). */
  background: #24300a;
  color: #fff;
  padding-block: clamp(1.4rem, 3vw, 2.2rem);
}
.trust-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.2rem 1rem;
}
.trust-item { text-align: center; }
.trust-zahl {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 800;
  color: var(--brand-green);
  margin: 0 0 0.15em;
  line-height: 1.1;
}
.trust-text { margin: 0; font-size: 0.95rem; color: #d5d5cd; }

/* ---------- Zielgruppen-Weiche ---------- */
.section-head.center { margin-inline: auto; text-align: center; }
.section-more { margin-top: 1.6rem; }
.section-more.center { text-align: center; }
.zielgruppe-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.4rem;
}
.zielgruppe-card {
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--radius-l);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.zielgruppe-card:hover { border-color: var(--brand-green); box-shadow: var(--shadow-2); }
.zielgruppe-card .icon {
  width: 44px; height: 44px;
  color: var(--accent-strong);
  margin-bottom: 0.3rem;
}
.zielgruppe-card h3 { font-size: 1.35rem; margin: 0; }
.zielgruppe-card p { color: var(--text-soft); flex: 1; margin: 0; }
.zielgruppe-card .btn { align-self: flex-start; margin-top: 0.6rem; }

/* ---------- Split-Sektionen mit Bild ---------- */
.split-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.6rem, 4vw, 3.5rem);
  align-items: center;
}
.split-media {
  margin: 0;
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: var(--shadow-2);
  aspect-ratio: 3 / 2;
}
.split-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.split-media-hoch { aspect-ratio: 3 / 4; max-height: 520px; margin-inline: auto; }
.berufe-hinweis { color: var(--text-soft); font-size: 0.97rem; }
.hero-jobs .hero-kicker { color: var(--brand-green); }
.hero-jobs .btn-phone { background: transparent; color: #fff; border-color: rgba(255,255,255,0.35); }
.hero-jobs .btn-phone .icon { color: var(--brand-green); }

/* ---------- Ablauf ---------- */
.ablauf-liste {
  list-style: none;
  counter-reset: schritt;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.2rem;
}
.ablauf-liste li {
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-m);
  padding: 1.4rem;
}
.ablauf-nr {
  display: grid;
  place-items: center;
  width: 2.6rem; height: 2.6rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 800;
  font-size: 1.2rem;
  margin-bottom: 0.8rem;
}
.ablauf-liste h3 { margin-bottom: 0.35em; }
.ablauf-liste p { color: var(--text-soft); font-size: 0.97rem; margin: 0; }

/* ---------- Leistungskarten ---------- */
.card-claim {
  font-size: 0.9rem;
  font-weight: 700;
  /* Auf Wunsch gerade statt kursiv und im Grün der Seite (03.08.2026). */
  font-style: normal;
  color: var(--accent-strong);
  margin: 0 0 0.2em;
}
.card-badge {
  display: inline-block;
  align-self: flex-start;
  background: var(--bg-alt);
  border: 1.5px solid var(--accent-strong);
  border-radius: var(--radius-m);
  padding: 0.45rem 0.9rem;
  line-height: 1.4;
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 0.9rem;
}
.card-leistung h3 { margin-bottom: 0.4em; }

/* Der Auftraggeber wünscht die Telefonnummer „einen Absatz“ unter dem Knopf
   (Feedback 31.07.2026), damit beide nicht als ein Block gelesen werden. */
.cta-band-actions { display: flex; flex-direction: column; gap: 1.6rem; align-items: flex-start; }
.cta-band-tel {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 700;
  color: var(--brand-black);
}
.fact-list-single { grid-template-columns: minmax(0, 1fr); }
/* Ungerade Anzahl: letztes Element füllt die Zeile, sonst bleibt eine Lücke */
.fact-list > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.fact-list-single > li:last-child:nth-child(odd) { grid-column: auto; }
/* In zweispaltigen Split-Bereichen bleibt die Liste einspaltig */
.split-inner .fact-list { grid-template-columns: minmax(0, 1fr); }
.split-inner .fact-list > li:last-child:nth-child(odd) { grid-column: auto; }
.hero-jobs { background: linear-gradient(160deg, #232320 0%, var(--brand-black) 100%); border-bottom-color: #3a3a36; }
.hero-jobs h1, .hero-jobs .hero-text { color: #fff; }
.hero-jobs .hero-text { color: #cfcfc7; }

/* Raster- und Flexfelder dürfen schmaler werden als ihr Inhalt. Ohne das richtet sich
   eine Spalte nach dem längsten unteilbaren Wort. Bei 320px Bildschirmbreite und der
   größten Schrifteinstellung lief die Seite dadurch auf mehreren Unterseiten seitlich
   aus dem Bild. Betrifft genau die Nutzer, für die die Schriftvergrößerung gedacht ist. */
.card-grid > *, .split-inner > *, .karte-inner > *, .kontakt-grid > *, .stellen-liste > *,
.zielgruppe-grid > *, .belege-liste > li, .standort-grid > *, .ablauf-liste > li,
.trust-grid > *, .fact-list > li, .aufgaben-grid > li, .fsj-block > *, .mitglied-grid > * {
  min-width: 0;
}

/* ---------- Sektionen ---------- */
.section { padding-block: clamp(1.8rem, 3.4vw, 2.8rem); }
.section-alt { background: var(--bg-alt); }
.section-head { max-width: 68ch; margin-bottom: 1.5rem; }

.card-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.1rem;
}
.card {
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-m);
  padding: 1.1rem;
  box-shadow: var(--shadow-1);
  display: flex;
  flex-direction: column;
}
.card-icon {
  width: 64px; height: 64px;
  object-fit: contain;
  margin-bottom: 0.9rem;
  background: var(--bg-alt);
  border-radius: var(--radius-m);
  padding: 10px;
}
.card p { color: var(--text-soft); font-size: 0.94rem; flex: 1; }
.card-link { font-weight: 700; }

/* CTA-Band */
.cta-band {
  background: linear-gradient(120deg, var(--brand-green) 0%, #a5c73f 100%);
  color: var(--brand-black);
  border-radius: var(--radius-l);
  padding: clamp(1.6rem, 4vw, 2.8rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
}
.cta-band h2 { margin: 0 0 0.3em; }
.cta-band p { margin: 0; max-width: 60ch; }

/* Teamfoto unmittelbar über dem grünen Band (Wunsch des Auftraggebers, 31.07.2026).
   Unten eckig, damit Bild und Band als ein Element gelesen werden. */
.cta-band-bild {
  margin: 0;
  border-radius: var(--radius-l) var(--radius-l) 0 0;
  overflow: hidden;
  line-height: 0;
}
/* Das Foto ist 3:2. Über die volle Breite wäre es fast 800px hoch und würde das
   Band aus dem Bild schieben. Deshalb wird es auf Bandhöhe beschnitten, etwas
   oberhalb der Mitte, damit die Gesichter im Ausschnitt bleiben. */
.cta-band-bild img {
  width: 100%;
  height: auto;
  max-height: clamp(200px, 34vw, 480px);
  object-fit: cover;
  object-position: center 28%;
  display: block;
}
.cta-band-bild + .cta-band { border-radius: 0 0 var(--radius-l) var(--radius-l); }

/* Krankenkassen */
.kk-block { max-width: none; }
.kk-block > p { max-width: 70ch; }
.kk-gruppen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.6rem; align-items: start; }
.kk-group {
  border: 1.5px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface);
}
.kk-group summary {
  cursor: pointer;
  font-weight: 700;
  padding: 0.8rem 1.1rem;
}
.kk-count { color: var(--text-soft); font-weight: 600; }
.kk-list {
  columns: 1;
  gap: 2rem;
  padding: 0 1.6rem 1rem;
  margin: 0;
  font-size: 0.95rem;
}
.kk-list li {
  margin-bottom: 0.3rem;
  break-inside: avoid;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* FSJ-Fakten */
/* Die Listen standen zu dicht beieinander und wirkten gedrängt
   (Rückmeldung 03.08.2026: „mehr Abstand bzw. auflockern"). */
.fact-list {
  list-style: none;
  padding: 0;
  margin: 1.1rem 0 1.6rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.85rem;
}
.fact-list li {
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-m);
  padding: 0.95rem 1rem;
  font-weight: 600;
  line-height: 1.5;
}
.fact-list li {
  padding-left: 2.5rem;
  position: relative;
}
.fact-list li::before {
  content: "";
  position: absolute;
  left: 0.9rem;
  top: 1.2rem;
  width: 1.05em;
  height: 1.05em;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%235d7517" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>') center / contain no-repeat;
}

/* Stub / 404 */
.stub {
  text-align: center;
  padding-block: clamp(3rem, 8vw, 6rem);
  max-width: 620px;
  margin-inline: auto;
}
.stub .stub-icon { margin-bottom: 1rem; color: var(--accent-strong); }
.stub .stub-icon .icon { width: 56px; height: 56px; }
.video-placeholder-inner .icon { width: 48px; height: 48px; color: var(--accent-strong); }

/* ---------- Footer ---------- */
.site-footer {
  margin-top: clamp(2rem, 5vw, 4rem);
  background: var(--brand-black);
  color: #e8e8e2;
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.8rem;
  padding-block: clamp(2rem, 4vw, 3rem);
}
.footer-logo {
  width: min(240px, 100%);
  height: auto;
  display: block;
  color: #f4f4ef;
}
.footer-claim { font-size: 0.92rem; color: #b9b9b0; margin-top: 1rem; max-width: 34ch; }
.footer-title {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-green);
  margin-bottom: 0.6rem;
}
/* Eine Spalte trägt zwei Überschriften („Sprechzeiten" und „Folgen Sie uns").
   Ohne Abstand darüber klebte die zweite am Absatz davor und die Fußzeile wirkte
   unruhig (Rückmeldung 03.08.2026). */
.footer-title:not(:first-child) { margin-top: 1.7rem; }
.footer-col > p { margin-bottom: 0.9rem; }
.footer-col > p:last-child { margin-bottom: 0; }
.site-footer a { color: #fff; }
.footer-phone { font-size: 1.3rem; font-weight: 800; text-decoration: none; }
.footer-note, .footer-vera { font-size: 0.88rem; color: #b9b9b0; }
.footer-links { list-style: none; padding: 0; margin: 0; }
/* Die Verweise sind eigenständige Ziele, keine Wörter in einem Satz. Sie brauchen
   deshalb mindestens 24px Höhe (WCAG 2.5.8). Die Polsterung schafft das, ohne die
   Schrift zu vergrößern, der Abstand darunter wird entsprechend kleiner. */
.footer-links li { margin-bottom: 0.05rem; }
.footer-links a { display: inline-block; padding: 0.28rem 0; }
.footer-bottom {
  border-top: 1px solid #3a3a36;
  padding-block: 1rem;
  font-size: 0.85rem;
  color: #b9b9b0;
}

/* ---------- Vertrauensbelege ---------- */
.belege-band { padding-block: clamp(1.4rem, 2.4vw, 2rem); }
.belege-titel { text-align: center; font-size: 1.05rem; color: var(--text-soft); margin-bottom: 1.2rem; }
.belege-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}
.belege-liste li {
  text-align: center;
  padding: 1rem 0.8rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface);
}
.belege-liste img { width: 130px; height: auto; margin-bottom: 0.5rem; }
.belege-liste .icon { width: 30px; height: 30px; color: var(--accent-strong); margin-bottom: 0.4rem; }
.belege-name { font-weight: 700; margin: 0 0 0.15em; font-size: 0.98rem; }
.belege-text { margin: 0; font-size: 0.88rem; color: var(--text-soft); }

/* ---------- Erklärvideo ---------- */
.video-inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.4rem, 3vw, 2.5rem); align-items: center; }
.video-platzhalter, .video-figur {
  margin: 0;
  border-radius: var(--radius-l);
  overflow: hidden;
  border: 1.5px solid var(--line);
  background: var(--bg-alt);
  position: relative;
}
.video-platzhalter picture img, .video-figur video { display: block; width: 100%; height: auto; }
.video-platzhalter picture img { filter: saturate(0.75) brightness(0.92); }
.video-hinweis {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.8rem 1rem;
  font-size: 0.93rem;
  color: var(--text-soft);
  background: var(--surface);
  border-top: 1.5px solid var(--line);
}
.video-hinweis .icon { flex-shrink: 0; width: 22px; height: 22px; color: var(--accent-strong); }

/* ---------- Kundenbewertungen ---------- */
.bewertung-kopf { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.bewertung-schnitt { margin: 0; color: var(--text-soft); font-size: 0.97rem; }
.bewertung-schnitt strong { font-size: 1.25rem; color: var(--text); }
.sterne { display: inline-flex; gap: 0.15rem; }
/* Voller und leerer Stern haben dieselbe Farbe und unterscheiden sich in der Form:
   gefüllt gegen Umriss. Der Unterschied bleibt damit auch im Schwarz-Weiß-Modus und
   bei Farbfehlsichtigkeit erkennbar und hängt nicht allein an der Farbe. */
.stern {
  width: 1.1rem; height: 1.1rem;
  background: var(--stern);
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m12 2 3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 17.8 5.8 21l1.2-6.8-5-4.9 6.9-1z" fill="none" stroke="black" stroke-width="2.2" stroke-linejoin="round"/></svg>') center / contain no-repeat;
}
.stern-voll {
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m12 2 3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 17.8 5.8 21l1.2-6.8-5-4.9 6.9-1z"/></svg>');
}
.bewertung-liste { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.bewertung {
  margin: 0;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-m);
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.bewertung blockquote { margin: 0; }
.bewertung blockquote p { margin: 0; color: var(--text-soft); font-size: 0.95rem; }
.bewertung figcaption { font-weight: 700; font-size: 0.93rem; margin-top: auto; }
.bewertung-datum { display: block; font-weight: 400; font-size: 0.85rem; color: var(--text-soft); }
.bewertung-aufruf {
  background: var(--bg-alt);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-m);
  padding: 1.2rem 1.3rem;
  max-width: 70ch;
}
.bewertung-aufruf p { margin-bottom: 1rem; }
.bewertung-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.4rem; }
.bewertung-profil { font-weight: 600; font-size: 0.95rem; }

/* ---------- Jobs: Aufgaben, Bildband und FSJ ----------
   Die Jobs-Seite hatte vier Abschnitte hintereinander in derselben Häkchenliste und
   las sich dadurch wie eine einzige lange Aufzählung. Die Aufgaben stehen jetzt als
   Karten mit Symbol, dazwischen liegt ein Bildband als Ruhepunkt und das FSJ hat einen
   eigenen abgesetzten Block, weil es eine andere Zielgruppe anspricht. */
.aufgaben-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.9rem;
}
.aufgabe {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  /* Rasterfelder richten sich sonst nach dem längsten unteilbaren Wort. Bei größter
     Schrifteinstellung sprengten Wörter wie „Betreuungssoftware" die Spalte und die
     Seite lief seitlich über. */
  min-width: 0;
  overflow-wrap: break-word;
  hyphens: auto;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-m);
  padding: 1.1rem 1.2rem;
  font-weight: 600;
  box-shadow: var(--shadow-1);
}
.aufgabe-symbol {
  flex: 0 0 auto;
  width: 3rem; height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bg-alt);
  color: var(--accent-strong);
}
.aufgabe-symbol .icon { width: 1.5rem; height: 1.5rem; }
.aufgabe > span:last-child { min-width: 0; }

/* Bildband über die volle Breite, bewusst ohne Container */
.bild-band { margin: 0; }
.bild-band img { display: block; width: 100%; height: clamp(180px, 26vw, 320px); object-fit: cover; }

.fsj-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.6rem;
  align-items: center;
  background: var(--bg-alt);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-l);
  padding: clamp(1.3rem, 3vw, 2.2rem);
}
.fsj-kicker {
  margin: 0 0 0.4rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--accent-strong);
}
.fsj-copy h2 { margin-bottom: 0.5em; }
.fsj-fakten {
  list-style: none;
  padding: 0;
  margin: 1.2rem 0 1.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem 1.2rem;
}
.fsj-fakten li {
  position: relative;
  padding-left: 1.6rem;
  font-size: 0.97rem;
}
.fsj-fakten li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 0.6rem; height: 0.6rem;
  border-radius: 50%;
  background: var(--accent-strong);
}
.fsj-bild { margin: 0; }
.fsj-bild img,
.fsj-bild picture { display: block; width: 100%; border-radius: var(--radius-m); }
.fsj-bild img { object-fit: cover; aspect-ratio: 4 / 3; }

/* Bausteine der Kooperationsseite: wie die Aufgabenkarten, aber mit Überschrift und
   erklärendem Satz, deshalb linksbündig und mit etwas mehr Luft. */
.koop-grid .aufgabe { align-items: flex-start; }
.koop-grid .aufgabe strong { display: block; margin-bottom: 0.25rem; }
.koop-grid .aufgabe span:last-child { font-weight: 400; color: var(--text-soft); font-size: 0.95rem; }
.koop-grid .aufgabe strong { font-weight: 700; color: var(--text); font-size: 1rem; }

/* Platzhalter für die rechtlichen Texte, die der Auftraggeber liefert */
.platzhalter-kasten {
  background: var(--bg-alt);
  border: 1.5px solid var(--line);
  border-left: 5px solid var(--accent-strong);
  border-radius: var(--radius-m);
  padding: clamp(1.2rem, 3vw, 2rem);
  max-width: 70ch;
}
.platzhalter-kasten h2 { margin-top: 0; }
.platzhalter-kasten p:last-child { margin-bottom: 0; }

/* ---------- Vorleseleiste ----------
   Erscheint erst, wenn vorgelesen wird. Sie liegt fest am oberen Rand, damit sie beim
   Mitlesen nicht wegscrollt. Der Kopfbereich rutscht so lange um ihre Höhe nach unten. */
.vorlese-leiste {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  background: var(--brand-black);
  color: #fff;
  border-bottom: 3px solid var(--brand-green);
}
.vorlese-leiste[hidden] { display: none; }
.vorlese-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  padding-block: 0.6rem;
}
.vorlese-status {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.95rem;
  font-weight: 600;
}
.vorlese-punkt {
  width: 0.7rem; height: 0.7rem;
  border-radius: 50%;
  background: var(--brand-green);
  flex-shrink: 0;
  animation: vorlese-puls 1.6s ease-in-out infinite;
}
@keyframes vorlese-puls { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.vorlese-knoepfe { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.vorlese-btn {
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  border: 1.5px solid #6a6a60;
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.vorlese-btn:hover { background: #2b2b28; }
.vorlese-btn .icon { width: 1.15rem; height: 1.15rem; }
.vorlese-btn-haupt { background: var(--brand-green); color: var(--brand-black); border-color: var(--brand-green); }
.vorlese-btn-haupt:hover { background: #cbe37a; }
/* Im Pausenzustand zeigt die Schaltfläche das Abspielzeichen */
.vorlese-btn-haupt .icon-play { display: none; }
.vorlese-btn-haupt[aria-pressed="true"] .icon-play { display: inline-block; }
.vorlese-btn-haupt[aria-pressed="true"] .icon-pause { display: none; }
.vorlese-beenden { border-color: #6a6a60; }

/* Der Kopfbereich klebt oben. Läuft die Leiste, beginnt er darunter. */
body.vorlesen-aktiv { padding-top: var(--vorlese-hoehe, 0px); }
body.vorlesen-aktiv .site-header { top: var(--vorlese-hoehe, 0px); }

/* Markierung des gerade gelesenen Satzes. Moderne Browser können Textstellen ohne
   Eingriff in die Seite hervorheben, ältere bekommen den ganzen Absatz markiert. */
::highlight(vorlese-satz) {
  background-color: #bdd959;
  color: #1d1d1b;
}
.vorlese-block {
  background: rgba(189, 217, 89, 0.35);
  border-radius: var(--radius-s);
  box-shadow: 0 0 0 4px rgba(189, 217, 89, 0.35);
}

/* ---------- Häufige Fragen ---------- */
.faq-liste { display: grid; gap: 0.6rem; }
.faq-eintrag {
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-m);
}
.faq-eintrag summary {
  cursor: pointer;
  font-weight: 700;
  padding: 0.9rem 1.1rem;
  list-style-position: inside;
}
.faq-eintrag summary:hover { color: var(--accent-strong); }
.faq-eintrag p { margin: 0; padding: 0 1.1rem 1rem; color: var(--text-soft); max-width: 80ch; }
.faq-eintrag[open] summary { border-bottom: 1px solid var(--line); margin-bottom: 0.8rem; }

/* ============================================================
   Responsive: Mobile First. Alle mehrspaltigen Bereiche brechen
   gleichmäßig um (1 dann 2 dann 4), nie 3 plus 1 oder 4 plus 1.
   Stufen: 560px (große Handys), 760px (Tablet hoch),
           1000px (Tablet quer), 1240px (Desktop)
   ============================================================ */

/* ---------- Ab 560px: zwei Spalten ---------- */


/* ---------- Ab 760px: Zielgruppen und Split-Bereiche nebeneinander ---------- */




/* ---------- Ab 1000px: Split-Layouts und vier Spalten ---------- */


/* ---------- Ab 1150px: waagerechte Hauptnavigation ---------- */


/* ---------- Ab 1240px: mehr Luft ---------- */
/* Zwischen 1240px und 1520px reicht der Platz nicht für alle Beschriftungen */






/* Sechs Karten (weitere Leistungen) laufen als 1 dann 2 dann 3 */
.card-grid-6 { grid-template-columns: minmax(0, 1fr); }



/* ---------- Mobile Feinschliff ---------- */




/* Sehr schmale Geräte (ab 360px abwärts) */




/* ---------- Druckansicht ---------- */


/* ---------- Lead-Absatz ---------- */
.lead { font-size: 1.06rem; color: var(--text-soft); }

/* ---------- Kontaktseite ---------- */
.kontakt-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.6rem, 4vw, 3rem);
  align-items: start;
}
.kontakt-block {
  background: var(--bg-alt);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-m);
  padding: 1rem 1.1rem;
  margin-bottom: 0.8rem;
}
.kontakt-block h2 { font-size: 0.85rem; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-soft); }
.kontakt-tel {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text);
  text-decoration: none;
}
.kontakt-tel .icon { color: var(--accent-strong); }
.kontakt-zeiten, .kontakt-mobil { font-size: 0.92rem; margin-top: 0.6rem; margin-bottom: 0; }
.vera-hinweis {
  display: flex;
  gap: 0.6rem;
  font-size: 0.93rem;
  color: var(--text-soft);
  background: var(--surface);
  border-left: 4px solid var(--brand-green);
  border-radius: var(--radius-s);
  padding: 0.9rem 1rem;
}
.vera-hinweis .icon { flex-shrink: 0; color: var(--accent-strong); }
.kontakt-media {
  margin: 1rem 0 0;
  border-radius: var(--radius-m);
  overflow: hidden;
  aspect-ratio: 3 / 2;
}
.kontakt-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Formular ---------- */
.kontakt-form-wrap {
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-l);
  padding: clamp(1.1rem, 2vw, 1.6rem);
  box-shadow: var(--shadow-1);
}
/* Steht ein Formular allein auf der Seite (Kooperationsseite), bekommt es eine
   begrenzte Breite. Über die volle Inhaltsbreite wären die Felder unangenehm lang. */
.kontakt-form-einzeln { max-width: 760px; margin-inline: auto; }
.kontakt-form { margin-top: 1.2rem; }
/* Senkrechter Abstand kommt allein aus dem margin-bottom der Felder, waagerecht aus der
   Spaltenlücke. Mit einer Zeilenlücke käme auf dem Handy, wo alles untereinander steht,
   beides zusammen und die Abstände wären abwechselnd eng und weit. */
/* align-items:end richtet die Eingabefelder aneinander aus. Ohne das rutschte ein
   Feld nach unten, sobald seine Beschriftung zweizeilig wurde („Zusage der
   Krankenkasse vorhanden?"), und die Zeile stand schief (Rückmeldung 03.08.2026). */
.form-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 0.8rem; align-items: end; }
.form-feld { display: flex; flex-direction: column; gap: 0.28rem; margin-bottom: 0.8rem; }
.form-feld label { font-weight: 600; font-size: 0.92rem; }
.form-feld input,
.form-feld select,
.form-feld textarea {
  font: inherit;
  font-size: 0.97rem;
  padding: 0.55rem 0.75rem;
  border: 1.5px solid var(--line-bedienung);
  border-radius: var(--radius-s);
  background: var(--bg);
  color: var(--text);
  width: 100%;
}
.form-feld input:focus-visible,
.form-feld select:focus-visible,
.form-feld textarea:focus-visible { border-color: var(--brand-green-dark); }
.form-feld textarea { resize: vertical; min-height: 6rem; }
.pflicht { color: #b3261e; font-weight: 700; }
:root[data-theme="dark"] .pflicht { color: #ff8a80; }
.form-check {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: 0.93rem;
  margin-bottom: 0.9rem;
}
/* Der Einwilligungstext ist lang. Ohne diese Angabe kann er im Flexfeld nicht schmaler
   werden als sein längstes Wort und ragt bei großer Schrift aus dem Bild. */
.form-check label { min-width: 0; overflow-wrap: break-word; hyphens: auto; }
.form-check input {
  width: 1.3rem; height: 1.3rem;
  flex-shrink: 0;
  margin-top: 0.15rem;
  accent-color: var(--brand-green-deep);
  border: 1.5px solid var(--line-bedienung);
}
.form-hinweis { font-size: 0.88rem; color: var(--text-soft); }

/* ---------- Rückmeldung am Formular ----------
   Fehlt eine Pflichtangabe, erscheint eine Meldung über dem Absendeknopf und das
   betroffene Feld wird rot umrandet. Nach erfolgreichem Versand steht an derselben
   Stelle eine kurze Bestätigung, ohne dass die Seite gewechselt wird. */
.form-meldung {
  border-radius: var(--radius-m);
  padding: 0.9rem 1.1rem;
  margin-bottom: 1rem;
  font-size: 0.97rem;
  line-height: 1.5;
  border-left: 5px solid;
}
.form-meldung strong { display: block; }
.form-meldung-fehler {
  background: #fdf0ef;
  border-color: #b3261e;
  color: #6b1710;
}
.form-meldung-erfolg {
  background: #eef4dd;
  border-color: var(--brand-green-deep);
  color: #33420c;
}
:root[data-theme="dark"] .form-meldung-fehler { background: #33201e; color: #ffb4ab; }
:root[data-theme="dark"] .form-meldung-erfolg { background: #232a15; color: #cfe39a; }

/* Das Feld selbst markieren, damit man ohne Suchen sieht, worum es geht. */
.feld-fehlt input,
.feld-fehlt select,
.feld-fehlt textarea { border-color: #b3261e; }
.feld-fehlt.form-anliegen { border-color: #b3261e; }
.feld-hinweis {
  display: block;
  font-size: 0.86rem;
  font-weight: 600;
  color: #b3261e;
  margin-top: 0.25rem;
}
:root[data-theme="dark"] .feld-hinweis { color: #ff8a80; }
:root[data-theme="dark"] .feld-fehlt input,
:root[data-theme="dark"] .feld-fehlt select,
:root[data-theme="dark"] .feld-fehlt textarea { border-color: #ff8a80; }
.hp-feld { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Kontaktformular: Wahl des Anliegens ----------
   Zwei Fälle, die sich fachlich unterscheiden (Pflegekasse oder Krankenkasse).
   Bewusst als Radioknöpfe und nicht als Auswahlliste: beide Möglichkeiten stehen
   damit gleichzeitig lesbar da, das hilft besonders älteren Besuchern. */
.form-anliegen {
  border: 1.5px solid var(--line);
  border-radius: var(--radius-m);
  padding: 0.9rem 1rem 0.4rem;
  margin: 0 0 1.1rem;
}
.form-anliegen legend { font-weight: 700; font-size: 0.98rem; padding-inline: 0.35rem; }
.form-anliegen-hinweis { font-size: 0.88rem; color: var(--text-soft); margin: 0 0 0.7rem; }
.form-anliegen-wahl {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  margin: 0 0 0.7rem;
}
.form-anliegen-wahl input {
  width: 1.3rem; height: 1.3rem;
  flex-shrink: 0;
  margin-top: 0.12rem;
  accent-color: var(--brand-green-deep);
}
.form-anliegen-wahl label { min-width: 0; cursor: pointer; }
.form-anliegen-titel { display: block; font-weight: 600; font-size: 0.95rem; }
.form-anliegen-text { display: block; font-size: 0.87rem; color: var(--text-soft); }
.form-anliegen-wahl input:checked ~ label .form-anliegen-titel { color: var(--accent-strong); }
/* Der ausgeblendete Fragenblock ist selbst eine .form-row mit display:grid. Eine
   Klassenregel im eigenen Stylesheet schlägt das [hidden] aus dem Browser-Standard,
   deshalb muss das Ausblenden hier ausdrücklich stehen. Ohne diese Zeile standen
   beide Blöcke gleichzeitig da (bemerkt am 02.08.2026). */
[data-anliegen-block][hidden] { display: none; }



/* ---------- Textseiten (Impressum, Datenschutz) ---------- */
.text-seite { max-width: 780px; }
.text-seite h2 { margin-top: 2.2rem; padding-top: 1.4rem; border-top: 1.5px solid var(--line); }
.text-seite h3 { margin-top: 1.6rem; }
.hinweis-offen {
  background: var(--bg-alt);
  border-left: 4px solid var(--brand-green);
  border-radius: var(--radius-s);
  padding: 0.9rem 1.1rem;
  font-size: 0.93rem;
  color: var(--text-soft);
}

/* ---------- Standorte ---------- */
.standort-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.2rem;
}
.standort-card {
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-m);
  padding: 1rem 1.1rem;
}
.standort-card h2 { font-size: 1.02rem; margin-bottom: 0.4em; }
.standort-card address { font-style: normal; color: var(--text-soft); line-height: 1.55; font-size: 0.93rem; }
.standort-links { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; align-items: center; margin: 0.7rem 0 0; }
/* Eigenständige Schaltfläche, deshalb auf mindestens 24px Höhe gepolstert */
.standort-route { font-size: 0.9rem; font-weight: 600; display: inline-block; padding: 0.15rem 0; }
.standort-tel {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  font-size: 0.97rem;
  color: var(--text);
  text-decoration: none;
}
.standort-tel .icon { color: var(--accent-strong); }
.standort-card-tuebingen { border-color: var(--accent-strong); }

/* ---------- Karten-Einwilligung ---------- */
.karte-consent {
  border-radius: var(--radius-l);
  overflow: hidden;
  border: 1.5px solid var(--line);
  background: var(--bg-alt);
  min-height: 340px;
  display: grid;
}
.karte-platzhalter {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1rem;
  text-align: center;
  padding: 2rem;
  max-width: 46ch;
  margin-inline: auto;
}
.karte-consent iframe { width: 100%; height: 100%; min-height: 340px; border: 0; display: block; }

/* ---------- Stellenangebote ---------- */
.stellen-liste { display: grid; gap: 1.6rem; }
.stelle {
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-l);
  padding: clamp(1.4rem, 3vw, 2.2rem);
}
.stelle-badge {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-text);
  border-radius: 999px;
  padding: 0.25rem 0.9rem;
  font-size: 0.83rem;
  font-weight: 700;
  margin: 0 0 0.7rem;
}
.stelle-meta { color: var(--text-soft); font-weight: 600; }
.stelle h3 { margin-top: 2.2rem; margin-bottom: 0.2rem; }
.stelle > .fact-list:last-of-type { margin-bottom: 0.6rem; }
.stelle-fsj { border-color: var(--accent-strong); border-width: 2px; }

/* ---------- Kennzeichnung KI-erzeugter Bilder ---------- */
/* Kleines Zeichen unten links im Bild. Unten rechts sitzt auf den
   Leistungskarten bereits .card-icon-badge, deshalb die linke Seite.
   Absolut gesetzt und damit ausserhalb des Textflusses: die Bildmasse der
   verschiedenen Container bleiben unberuehrt. */
.hero-media, .split-media, .cta-band-bild,
.kontakt-media, .stelle-bild, .fsj-bild, .bild-band { position: relative; }

.ki-hinweis {
  position: absolute;
  left: 0.5rem;
  bottom: 0.5rem;
  z-index: 1;
  padding: 0.08rem 0.42rem;
  border-radius: 999px;
  background: rgba(20, 26, 10, 0.5);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.6;
  pointer-events: none;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

/* Im Bildband laeuft das Foto bis an den Fensterrand, dort etwas mehr Abstand. */
.bild-band .ki-hinweis { left: clamp(1rem, 4vw, 2rem); }

/* Kopfbild der Stellenanzeige. Lockert die langen Aufzaehlungen auf.
   Der negative Rand entspricht genau dem Innenabstand von .stelle, sonst
   bliebe rund um das Bild ein heller Streifen stehen. Radius minus
   Rahmenbreite, damit die Ecke buendig zum Kartenrand sitzt. */
.stelle-bild {
  /* entspricht dem Innenabstand von .stelle; in der Handy-Regel weiter unten
     wird nur dieser eine Wert geaendert, die Raender rechnen sich neu */
  --stelle-innen: clamp(1.4rem, 3vw, 2.2rem);
  margin-inline: calc(-1 * var(--stelle-innen));
  margin-top: calc(-1 * var(--stelle-innen));
  margin-bottom: clamp(1.1rem, 2.4vw, 1.6rem);
  border-radius: calc(var(--radius-l) - 1.5px) calc(var(--radius-l) - 1.5px) 0 0;
  overflow: hidden;
}

/* Bildband mitten in der Anzeige, direkt vor "Das bieten wir dir". Es bricht die
   lange Aufzaehlung auf. Laeuft wie das Kopfbild bis an den Kartenrand, hat aber
   keine runden Ecken, weil es nicht an der Kartenkante sitzt. */
.stelle-bild-mitte {
  margin-top: clamp(1.8rem, 3.2vw, 2.6rem);
  margin-bottom: clamp(1.4rem, 2.6vw, 2rem);
  border-radius: 0;
}
.stelle-bild img {
  display: block;
  width: 100%;
  height: clamp(150px, 24vw, 260px);
  object-fit: cover;
}
/* Das Band in der Mitte. Muss nach der Regel darueber stehen: gleiche
   Spezifitaet, die spaetere gewinnt.
   Der Ausschnitt sitzt bewusst oberhalb der Mitte. Bei einem so breiten Band
   bleibt nur gut ein Drittel der Bildhoehe stehen; mittig zentriert wuerde die
   hintere Reihe der Gruppe an den Koepfen abgeschnitten. */
.stelle-bild-mitte img {
  height: clamp(160px, 23vw, 260px);
  object-position: center 42%;
}

/* ---------- Über uns ---------- */
.zitat {
  margin: 1.5rem 0;
  padding: 1.2rem 1.4rem;
  border-left: 5px solid var(--brand-green);
  background: var(--surface);
  border-radius: var(--radius-s);
  font-size: 1.1rem;
  font-style: italic;
}
.zitat p { margin: 0 0 0.5em; }
.zitat footer { font-size: 0.9rem; font-style: normal; color: var(--text-soft); }
.gf-name { margin-top: 1.2rem; }
.gf-rolle { color: var(--text-soft); font-size: 0.95rem; }
.mitglied-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  align-items: center;
}
.mitglied-logo { margin: 0; background: #fff; padding: 1rem; border-radius: var(--radius-m); border: 1.5px solid var(--line); }
.mitglied-logo img { display: block; width: 100%; height: auto; }



/* ---------- Landkreiskarte Baden-Württemberg ---------- */
.karte-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.6rem, 4vw, 3.5rem);
  align-items: center;
}
.karte-figur { margin: 0; }
.karte-figur-klein { max-width: 420px; margin-inline: auto; }
.bw-karte { width: 100%; height: auto; max-height: 560px; display: block; }
/* Drei Flächenstufen mit geprüftem Helligkeitsabstand. Die Kernkreise tragen
   zusätzlich eine Schraffur, damit sie auch ohne Farbwahrnehmung erkennbar sind. */
.bw-karte .kreis {
  fill: #f7f8f1;
  stroke: #9aa38a;
  stroke-width: 1.4;
  stroke-linejoin: round;
  transition: fill var(--transition);
}
/* Alle betreuten Landkreise tragen dieselbe Farbe. Die Schraffur darauf sorgt dafür,
   dass betreut und nicht betreut auch ohne Farbwahrnehmung unterscheidbar bleibt.
   Seit dem 03.08.2026 auf Wunsch des Auftraggebers hell im Markengrün, die
   Standortpunkte dagegen dunkelgrün. */
.bw-karte .kreis-gebiet { fill: var(--brand-green); stroke: #4c6118; stroke-width: 2.4; }
.bw-karte .kreis-muster { pointer-events: none; }
:root[data-theme="dark"] .bw-karte .kreis { fill: #2b2b28; stroke: #6a6a60; }
:root[data-theme="dark"] .bw-karte .kreis-gebiet { fill: var(--brand-green); stroke: #4c6118; }
:root[data-theme="dark"] .bw-karte .kreis-muster { opacity: 0.45; }
/* Standortpunkte in Dunkelgrün auf der hellen Fläche (Wunsch vom 03.08.2026).
   In beiden Designs sind die Flächen hell, die Punkte bleiben deshalb überall dunkel. */
.bw-karte .marker circle { fill: #24300a; opacity: 1; }
.bw-karte .marker .marker-dot { fill: var(--brand-green); opacity: 1; }

.kreis-label {
  font-family: var(--font-sans);
  font-size: 19px;
  font-weight: 700;
  fill: #1d1d1b;
  paint-order: stroke;
  stroke: #ffffff;
  stroke-width: 4.5px;
  stroke-linejoin: round;
}
.kreis-label-links { text-anchor: end; }
.kreis-label-mitte { text-anchor: middle; }
/* Die Gebietsflächen sind in beiden Designs hell. Helle Schrift wäre darauf nicht
   lesbar, die Beschriftung bleibt deshalb überall dunkel mit hellem Rand. */
:root[data-theme="dark"] .kreis-label { fill: #1d1d1b; stroke: #ffffff; }

.karte-legende { list-style: none; padding: 0; margin: 1.2rem 0; display: grid; gap: 0.55rem; }
.karte-legende li { display: flex; align-items: center; gap: 0.7rem; font-size: 0.95rem; }
.legende-farbe {
  width: 1.35rem; height: 1.35rem;
  border-radius: 5px;
  border: 1.5px solid var(--line);
  flex-shrink: 0;
}
.legende-gebiet { background: var(--brand-green); border-color: #4c6118; }
/* Genau wie der Marker auf der Karte: grüner Kreis mit dunklem Punkt in der Mitte.
   Das Größenverhältnis entspricht dem im SVG, Radius 4,5 zu 11. */
.legende-marker {
  border-radius: 50%;
  border-color: #24300a;
  background: radial-gradient(circle at 50% 50%, var(--brand-green) 0 41%, #24300a 41%);
}
:root[data-theme="dark"] .legende-gebiet { background: var(--brand-green); border-color: #4c6118; }

.karte-platzhalter .icon { width: 40px; height: 40px; color: var(--accent-strong); }
.route-liste { margin-top: 1.6rem; }
.route-liste ul { list-style: none; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
.route-liste li a {
  display: block;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-s);
  padding: 0.75rem 1rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--text);
}
.route-liste li a:hover { border-color: var(--brand-green); }



/* ---------- Bild in Leistungskarten ---------- */
/* Symmetrie der Leistungskarten (Wunsch vom 03.08.2026: „mehr Symmetrie, von oben
   nach unten"). Die Karten standen ungleich, weil Kurzzeile, Überschrift und Text
   unterschiedlich viele Zeilen brauchen. Mit subgrid teilen sich alle Karten
   dieselben Zeilen des Rasters, dadurch stehen Bild, Kurzzeile, Überschrift, Text,
   Betrag und Verweis in jeder Karte auf derselben Höhe. */
@supports (grid-template-rows: subgrid) {
  .card-grid > .card-leistung {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 6;
    align-content: start;
  }
}
/* Rückfall für Browser ohne subgrid: Betrag und Verweis werden nach unten gedrückt,
   dann schließen wenigstens alle Karten unten bündig ab. */
@supports not (grid-template-rows: subgrid) {
  .card-leistung > .card-badge { margin-top: auto; }
}
.card-leistung { padding: 0; overflow: hidden; }
.card-leistung > :not(.card-bild) { margin-left: 1.1rem; margin-right: 1.1rem; }
.card-leistung > .card-badge { margin-bottom: 1.1rem; }
/* Der Verweis ist das letzte Element der Karte und braucht denselben Abstand
   nach unten wie zu den Seiten, sonst klebt er am Rand. */
.card-leistung > .card-link { margin-bottom: 1.1rem; }
.card-bild {
  position: relative;
  margin: 0 0 1.1rem;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--bg-alt);
}
.card-bild picture img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-icon-badge {
  position: absolute;
  right: 0.8rem;
  bottom: 0.8rem;
  width: 54px;
  height: 54px;
  object-fit: contain;
  background: var(--surface);
  border-radius: 50%;
  padding: 9px;
  box-shadow: var(--shadow-1);
}
.card-leistung .card-claim { margin-top: 0; }

/* Heller Jobs-Hero (ersetzt den dunklen Block) */
.hero-jobs-hell {
  background: linear-gradient(160deg, var(--bg-alt) 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--line);
}
.hero-jobs-hell .hero-kicker { color: var(--accent-strong); }

/* ---------- Google-Karten je Standort ---------- */
.karten-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
.karte-standort {
  margin: 0;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-m);
  overflow: hidden;
  background: var(--bg-alt);
}
.karte-standort iframe { width: 100%; height: 280px; border: 0; display: block; }
.karte-standort figcaption {
  padding: 0.7rem 1rem;
  font-weight: 700;
  font-size: 0.95rem;
  border-top: 1.5px solid var(--line);
  background: var(--surface);
}
.karten-hinweis {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  margin-top: 1rem;
  font-size: 0.9rem;
  color: var(--text-soft);
}
.karten-hinweis .icon { flex-shrink: 0; color: var(--accent-strong); }
.standort-card-haupt { border-color: var(--accent-strong); }




/* ---------- Pflegegrad-Liste im Ratgeber ---------- */
/* minmax(0, 1fr) statt der Voreinstellung: Rasterspalten richten sich sonst nach dem
   Inhalt und können nicht schmaler werden als das längste Wort plus die Nummernscheibe.
   Bei 320px Bildschirmbreite und vergrößerter Schrift lief die Liste dadurch seitlich
   aus dem Bild. */
.pflegegrad-liste { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.7rem; }
.pflegegrad-liste li {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-m);
  padding: 1rem 1.2rem;
}
.pflegegrad-liste p { margin: 0; min-width: 0; overflow-wrap: break-word; }
.pflegegrad-liste li > div { min-width: 0; }
.pg-nr {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.4rem; height: 2.4rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 800;
}
.ablauf-liste p { color: var(--text-soft); margin: 0; }

.vcard-link { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 600; font-size: 0.95rem; }

/* ---------- Gesellschaftsauswahl ---------- */
.gesellschaft-wahl { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.7rem; }
.gesellschaft-wahl[hidden] { display: none; }
.gesellschaft-hinweis {
  max-width: 70ch;
  margin: 0 0 1.4rem;
  font-size: 0.95rem;
  color: var(--text-soft);
}
.standort-card[hidden] { display: none; }

/* ---------- Standortkarte mit Umschalter ---------- */
.karten-wahl { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.8rem; }
.karten-wahl[hidden] { display: none; }
.karten-btn {
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  border: 1.5px solid var(--line-bedienung);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.karten-btn:hover { border-color: var(--brand-green); }
.karten-btn[aria-pressed="true"] {
  background: var(--brand-black);
  color: #fff;
  border-color: var(--brand-black);
}
:root[data-theme="dark"] .karten-btn[aria-pressed="true"] {
  background: var(--accent); color: var(--accent-text); border-color: var(--accent);
}

.standort-karte {
  margin: 0;
  border-radius: var(--radius-l);
  border: 1.5px solid var(--line);
  overflow: hidden;
  background: var(--bg-alt);
}
.standort-karte iframe {
  display: block;
  width: 100%;
  height: clamp(320px, 45vh, 460px);
  border: 0;
}
/* Fläche vor der Einwilligung: gleiche Höhe wie die spätere Karte, damit beim
   Laden nichts springt. */
.standort-karte .karte-consent {
  display: grid;
  min-height: clamp(320px, 45vh, 460px);
  background: var(--bg-alt);
}
.standort-karte .karte-consent.karte-geladen { display: block; min-height: 0; }
/* Textfassung des Karteninhalts. Der Inhalt eines fremden Rahmens ist für
   Screenreader nicht zuverlässig erreichbar, deshalb steht er zusätzlich als Text. */
.standort-karte-text {
  padding: 0.7rem 0.9rem;
  font-size: 0.9rem;
  color: var(--text-soft);
  background: var(--surface);
  border-top: 1.5px solid var(--line);
}

/* ============================================================
   Alle Breakpoint-Regeln stehen gesammelt am Dateiende, damit sie
   die Grundregeln zuverlässig überschreiben.
   ============================================================ */

@media (min-width: 560px) {
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-grid { grid-template-columns: repeat(2, minmax(0, 15rem)); justify-content: center; }
  .belege-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bewertung-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact-list-single { grid-template-columns: minmax(0, 1fr); }
/* Ungerade Anzahl: letztes Element füllt die Zeile, sonst bleibt eine Lücke */
.fact-list > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.fact-list-single > li:last-child:nth-child(odd) { grid-column: auto; }
/* In zweispaltigen Split-Bereichen bleibt die Liste einspaltig */
.split-inner .fact-list { grid-template-columns: minmax(0, 1fr); }
.split-inner .fact-list > li:last-child:nth-child(odd) { grid-column: auto; }
  .ablauf-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .standort-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .route-liste ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 680px) and (max-width: 999px) {
  .kk-list { columns: 2; }
}

@media (min-width: 680px) {
  .fact-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact-list-single { grid-template-columns: minmax(0, 1fr); }
/* Ungerade Anzahl: letztes Element füllt die Zeile, sonst bleibt eine Lücke */
.fact-list > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.fact-list-single > li:last-child:nth-child(odd) { grid-column: auto; }
/* In zweispaltigen Split-Bereichen bleibt die Liste einspaltig */
.split-inner .fact-list { grid-template-columns: minmax(0, 1fr); }
.split-inner .fact-list > li:last-child:nth-child(odd) { grid-column: auto; }
}

@media (min-width: 620px) {
  .aufgaben-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fsj-fakten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .fsj-block { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 2.2rem; }
}

@media (min-width: 1240px) {
  .aufgaben-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .aufgabe { flex-direction: column; align-items: flex-start; gap: 0.8rem; }
}

@media (min-width: 760px) {
  .zielgruppe-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .entry-split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cta-band { flex-wrap: nowrap; }
}

@media (min-width: 1000px) {
  .kk-gruppen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
  .split-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .video-inner { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .split-reverse .split-media { order: -1; }
  .karte-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); }
  .kontakt-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
  .mitglied-grid { grid-template-columns: minmax(180px, 260px) 1fr; }

  /* Der Kunden-Strang hat vier Kacheln, der Jobs-Strang drei. Feste vier Spalten
     ließen im Jobs-Strang rechts eine Lücke und alles saß links. */
  .trust-grid { grid-template-columns: repeat(auto-fit, minmax(0, 15rem)); justify-content: center; }
  .belege-liste { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .card-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ablauf-liste { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .standort-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .route-liste ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1240px) {
  .site-header { position: sticky; }
  .nav-toggle { display: none; }
  .nav-list { display: flex; flex-direction: row; width: auto; flex-wrap: nowrap; }
  .main-nav { margin-left: auto; order: 0; width: auto; }
  /* Navigation und Bedienknöpfe sind zwei verschiedene Dinge und brauchen sichtbar
     Abstand. Innerhalb der Navigation liegen die Punkte nur 1,6px auseinander, ohne
     Trennung wirkt die ganze Zeile wie eine einzige Gruppe und das grün hinterlegte
     aktive Feld klebt am Knopf daneben. */
  .header-tools {
    margin-left: 0.9rem;
    padding-left: 1.1rem;
    border-left: 1.5px solid var(--line);
  }
  /* Eine Zeile. Umbruch geht hier nicht: die Navigation schiebt sich mit
     margin-left:auto nach rechts, das verbraucht bei erlaubtem Umbruch den ganzen
     freien Platz und die Bedienknöpfe fielen immer in eine zweite Zeile.
     Reicht der Platz nicht, wird stattdessen das Logo kleiner (siehe .brand). */
  .header-main { flex-wrap: nowrap; }
  .brand-logo { width: 214px; }
  .nav-list a { font-size: 0.97rem; padding: 0.5rem 0.5rem; }
  .tool-btn { font-size: 0.85rem; padding: 0.4rem 0.65rem; }
}

@media (min-width: 1240px) and (max-width: 1519px) {
  .a11y-open-label { display: none; }
  .strand-switch { font-size: 0.8rem; padding-inline: 0.55rem; }
}

/* Kein eigener Logo-Sprung mehr ab 1520px: Der Inhaltsbereich hört bei 1180px auf,
   ein breiterer Bildschirm bringt also keinen zusätzlichen Platz. Das größere Logo
   dort hat nur den Platz für Menü und Bedienknöpfe weggenommen, bis „Kontakt" halb
   verdeckt war (gemeldet 03.08.2026). Größer wird das Logo jetzt dort, wo wirklich
   Platz ist: auf dem Handy und auf der Auswahlseite. */

@media (min-width: 1400px) {
  .card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .standort-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .route-liste ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 560px) { .card-grid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (min-width: 1000px) { .card-grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

@media (max-width: 1239px) {
  .header-main { position: relative; padding-right: 4.2rem; flex-wrap: wrap; }
  .main-nav { order: 3; margin-left: 0; width: 100%; }
  .nav-toggle {
    display: inline-flex;
    flex-direction: column;
    gap: 5px;
    background: var(--bg-alt);
    border: 1px solid var(--line-bedienung);
    border-radius: var(--radius-s);
    padding: 0.6rem;
    cursor: pointer;
    position: absolute;
    right: clamp(1rem, 4vw, 2rem);
    top: 0.9rem;
  }
  .nav-list { display: none; flex-direction: column; padding-block: 0.4rem; width: 100%; }
  .nav-list.open { display: flex; }
  .nav-list a { font-size: 1.05rem; padding: 0.85rem 0.6rem; }
  .site-header { position: static; }
  .header-tools { flex-wrap: wrap; gap: 0.35rem; }
  .tool-btn { font-size: 0.85rem; padding: 0.4rem 0.7rem; }
  .hero-media { aspect-ratio: 16 / 10; }
  .split-media-hoch { max-height: 420px; }
  .cta-band-actions { width: 100%; }
}

/* Im barrierefreien Modus ist die Schrift um ein Achtel größer. Nachgemessen braucht die
   waagerechte Navigation dort 1314px, der Inhaltsbereich ist aber auf 1180px begrenzt.
   Sie passt also bei keiner Bildschirmbreite. Deshalb bleibt sie in diesem Modus
   durchgehend im Menü. Das ist für diese Nutzer ohnehin die bessere Bedienung:
   große Ziele untereinander statt gequetschter Zeile. */
/* Dieselbe Umschaltung greift, sobald jemand die Schrift auf 125 % oder mehr
   stellt (Klasse kommt aus main.js). Die waagerechte Navigation passt dann
   nicht mehr neben Logo und Knöpfe, gemessen am 03.08.2026. */
@media (min-width: 1240px) {
  html.mode-a11y .header-main,
  html.schrift-sehr-gross .header-main { flex-wrap: wrap; }
  html.mode-a11y .main-nav,
  html.schrift-sehr-gross .main-nav { order: 3; margin-left: 0; width: 100%; }
  /* Anders als auf dem Handy sitzt der Knopf hier im Fluss neben den Bedienknöpfen.
     Absolut am oberen Rand klebte er sonst über der Zeile, weil die Kopfzeile im
     barrierefreien Modus höher ist. */
  html.mode-a11y .brand,
  html.schrift-sehr-gross .brand { order: 0; }
  html.mode-a11y .header-tools,
  html.schrift-sehr-gross .header-tools { order: 1; }
  html.mode-a11y .nav-toggle,
  html.schrift-sehr-gross .nav-toggle {
    display: inline-flex;
    flex-direction: column;
    gap: 5px;
    background: var(--bg-alt);
    border: 1px solid var(--line-bedienung);
    border-radius: var(--radius-s);
    padding: 0.6rem;
    cursor: pointer;
    position: static;
    order: 2;
    margin-left: 0.5rem;
    align-self: center;
  }
  html.mode-a11y .nav-list,
  html.schrift-sehr-gross .nav-list { display: none; flex-direction: column; padding-block: 0.4rem; width: 100%; }
  html.mode-a11y .nav-list.open,
  html.schrift-sehr-gross .nav-list.open { display: flex; }
  html.mode-a11y .nav-list a,
  html.schrift-sehr-gross .nav-list a { font-size: 1.05rem; padding: 0.85rem 0.6rem; }
  html.mode-a11y .site-header,
  html.schrift-sehr-gross .site-header { position: static; }
  html.mode-a11y .a11y-open-label { display: inline; }
}

@media (max-width: 559px) {
  body { font-size: 1.02rem; }
  .fact-list li { padding-left: 2.3rem; word-break: break-word; hyphens: auto; }
  .stelle-meta { word-break: break-word; }
  .brand-logo { width: 236px; }
  .a11y-open-label { display: none; }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { text-align: center; justify-content: center; }
  .btn { padding: 0.8rem 1.3rem; }
  .cta-band { flex-direction: column; align-items: flex-start; }
  .cta-band-actions .btn { width: 100%; text-align: center; }
  .entry-card { min-height: 0; padding: 1.3rem; }
  .entry-card-icon .icon { width: 38px; height: 38px; }
  .trust-zahl { font-size: 1.55rem; }
  .kk-list { columns: 1; }
  .bw-karte { max-height: 400px; }
  .stelle { padding: 1.2rem; }
  .stelle-bild { --stelle-innen: 1.2rem; margin-bottom: 1.1rem; }
  .kontakt-form-wrap { padding: 1.1rem; }
  .text-seite h2 { margin-top: 1.7rem; }
}

@media (max-width: 380px) {
  .header-tools .lang-switch { display: none; }
}

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

@media print {
  .site-header, .site-footer, .entry-footer, .header-tools,
  .a11y-dialog, .skip-link, .hero-ctas, .cta-band, .nav-toggle, .vorlese-leiste { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  a { color: #000; text-decoration: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
}

@media (max-width: 920px) {
  .kontakt-grid { grid-template-columns: minmax(0, 1fr); }
  .form-row { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 920px) {
  .mitglied-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 920px) {
  .karte-inner { grid-template-columns: minmax(0, 1fr); }
  .bw-karte { max-height: 440px; }
}

@media (min-width: 760px) { .karten-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (min-width: 1240px) { .karte-standort iframe { height: 320px; } }