/* Zuweiser-Microsite – Pflege an der Amper
   Farben und Schriften wie auf pflege-amper.de. Keine externen Ressourcen. */

:root {
  --blau: #05316e;
  --blau-dunkel: #062e5e;
  --akzent: #34a5da;
  --gruen: #4b7f32;
  --gruen-dunkel: #3d6a28;
  --text: #405469;
  --text-leise: #5f7185;
  --flaeche: #f6f9fc;
  --flaeche-blau: #e9f4fb;
  --flaeche-gruen: #f0f6ec;
  --linie: #d6e2ee;
  --weiss: #ffffff;
  --rot: #b42318;
  --rot-flaeche: #fdf0ee;
  --rot-linie: #f2c4bd;
  --ok-flaeche: #eef6e9;
  --ok-linie: #bcd9ab;
  --orange: #c26a00;
  --orange-flaeche: #fff1d6;
  --orange-linie: #efc98f;
  --lila: #6b3fa0;
  --lila-flaeche: #f3edfa;
  --lila-linie: #d8c8ec;
  /* Grün der Kartenpunkte (src/Karte.php) */
  --karte-gruen: #3d7a28;

  --schrift-titel: Georgia, "Times New Roman", serif;
  --schrift-text: Verdana, Geneva, sans-serif;

  --radius: 16px;
  --radius-klein: 10px;
  --schatten: 0 1px 2px rgb(5 49 110 / 6%), 0 8px 24px rgb(5 49 110 / 7%);
  --breite: 1160px;
  --rand: 20px;
}

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

[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--weiss);
  color: var(--text);
  font-family: var(--schrift-text);
  font-size: 16px;
  line-height: 1.65;
}

img,
svg {
  max-width: 100%;
}

h1,
h2,
h3,
h4 {
  margin: 0 0 0.5em;
  color: var(--blau);
  font-family: var(--schrift-titel);
  font-weight: 500;
  line-height: 1.25;
}

h1 {
  font-size: clamp(2rem, 4.2vw + 0.8rem, 3.4rem);
}

h2 {
  font-size: clamp(1.6rem, 2.2vw + 0.9rem, 2.4rem);
}

h3 {
  font-size: 1.25rem;
}

h4 {
  font-size: 1rem;
  font-family: var(--schrift-text);
  font-weight: 700;
  letter-spacing: 0.02em;
}

p {
  margin: 0 0 1em;
}

a {
  color: var(--blau);
  text-underline-offset: 3px;
}

a:hover {
  color: var(--akzent);
}

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

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

.sprunglink {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  padding: 10px 18px;
  background: var(--blau);
  color: var(--weiss);
  border-radius: 50px;
  text-decoration: none;
}

.sprunglink:focus {
  top: 12px;
  color: var(--weiss);
}

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

.behaelter {
  width: 100%;
  max-width: var(--breite);
  margin: 0 auto;
  padding: 0 var(--rand);
}

.behaelter--schmal {
  max-width: 920px;
}

.abschnitt {
  padding: 72px 0;
}

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

.abschnitt--blau {
  background: var(--flaeche-blau);
}

.abschnitt--gruen {
  background: var(--flaeche-gruen);
}

.oberzeile {
  margin: 0 0 10px;
  color: var(--gruen);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.einleitung {
  max-width: 62ch;
  font-size: 1.08rem;
}

/* Knöpfe -------------------------------------------------------------------- */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 26px;
  border: 2px solid transparent;
  border-radius: 50px;
  font-family: var(--schrift-text);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.knopf--primaer {
  background: var(--blau);
  color: var(--weiss);
}

.knopf--primaer:hover {
  background: var(--akzent);
  color: var(--weiss);
}

.knopf--sekundaer {
  background: var(--weiss);
  border-color: var(--blau);
  color: var(--blau);
}

.knopf--sekundaer:hover {
  border-color: var(--akzent);
  color: var(--blau);
  background: var(--flaeche-blau);
}

.knopf--klein {
  min-height: 38px;
  padding: 7px 16px;
  font-size: 0.78rem;
}

.knopf--gross {
  min-height: 56px;
  padding: 14px 36px;
  font-size: 1rem;
}

.knopf--gefahr {
  background: var(--weiss);
  border-color: var(--rot-linie);
  color: var(--rot);
}

.knopf--gefahr:hover {
  background: var(--rot-flaeche);
  color: var(--rot);
}

.knopf:disabled {
  opacity: 0.6;
  cursor: progress;
}

.knopf__klein {
  display: block;
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  opacity: 0.85;
}

.knopfreihe {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px 0 20px;
}

.knopfreihe--mitte {
  justify-content: center;
}

.symbol {
  flex: none;
  width: 22px;
  height: 22px;
}

.symbol--gross {
  width: 34px;
  height: 34px;
}

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

.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgb(255 255 255 / 96%);
  border-bottom: 1px solid var(--linie);
  backdrop-filter: blur(6px);
}

.kopf__innen {
  display: flex;
  align-items: center;
  gap: 24px;
  max-width: var(--breite);
  margin: 0 auto;
  padding: 10px var(--rand);
}

/* Das Logo nie zusammendrücken: img hat max-width: 100 % und würde sonst im Flex-Kopf schrumpfen */
.kopf__logo {
  flex: none;
}

.kopf__logo img {
  display: block;
  width: auto;
  height: 50px;
}

.kopf__nav {
  display: none;
  gap: 22px;
  margin-left: auto;
  font-size: 0.9rem;
}

.kopf__nav a {
  color: var(--text);
  text-decoration: none;
}

.kopf__nav a:hover {
  color: var(--blau);
  text-decoration: underline;
}

.kopf__zusatz {
  margin-left: auto;
  color: var(--text-leise);
  font-size: 0.9rem;
}

.knopf--telefon {
  margin-left: auto;
  padding: 8px 18px;
  text-transform: none;
  letter-spacing: 0.02em;
  text-align: left;
}

.kopf__nav + .knopf--telefon {
  margin-left: 0;
}

.knopf--telefon .knopf__lang {
  white-space: nowrap;
}

.knopf__kurz {
  display: none;
}

/* Statusleiste (Kapazität) ------------------------------------------------------ */

.statusleiste {
  --status-farbe: #5f7185;
  --status-flaeche: #eef3f8;
  background: var(--status-flaeche);
  border-bottom: 4px solid var(--status-farbe);
}

.statusleiste--frei {
  --status-farbe: var(--gruen);
  --status-flaeche: #e6f2df;
}

.statusleiste--begrenzt {
  --status-farbe: #c26a00;
  --status-flaeche: #fff1d6;
}

.statusleiste--keine {
  --status-farbe: var(--rot);
  --status-flaeche: #fde8e5;
}

.statusleiste__innen {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 16px;
  align-items: center;
  padding-top: 18px;
  padding-bottom: 18px;
}

.statusleiste__symbol {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--status-farbe);
  color: var(--weiss);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
}

.statusleiste__symbol::before {
  content: "?";
}

.statusleiste--frei .statusleiste__symbol::before {
  content: "✓";
}

.statusleiste--begrenzt .statusleiste__symbol::before {
  content: "!";
}

.statusleiste--keine .statusleiste__symbol::before {
  content: "✕";
}

.statusleiste__titel {
  margin: 0;
  color: var(--blau);
  font-family: var(--schrift-titel);
  font-size: clamp(1.2rem, 1.2vw + 0.9rem, 1.55rem);
  line-height: 1.25;
}

.statusleiste__text,
.statusleiste__hinweis,
.statusleiste__stand {
  margin: 2px 0 0;
  font-size: 0.95rem;
}

.statusleiste__hinweis {
  color: var(--blau);
  font-weight: 700;
}

.statusleiste__stand {
  color: var(--text-leise);
  font-size: 0.85rem;
}

.statusleiste__knopf {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 8px;
}

@media (min-width: 900px) {
  .statusleiste__innen {
    grid-template-columns: auto 1fr auto;
  }

  .statusleiste__knopf {
    grid-column: auto;
    grid-row: 1;
    grid-column-start: 3;
    margin-top: 0;
  }
}

/* Einstieg -------------------------------------------------------------------- */

.held {
  padding: 64px 0 72px;
  background:
    radial-gradient(1100px 420px at 95% -10%, var(--flaeche-blau) 0%, transparent 70%),
    radial-gradient(700px 360px at -10% 110%, var(--flaeche-gruen) 0%, transparent 70%),
    var(--weiss);
}

.held__raster {
  display: grid;
  gap: 40px;
  align-items: center;
}

.bewertung {
  color: var(--text-leise);
  font-size: 0.92rem;
}

.bewertung__sterne {
  color: #e6a700;
  letter-spacing: 2px;
}

.held__bild {
  position: relative;
  margin: 0;
}

.held__bild::before {
  content: "";
  position: absolute;
  inset: 14px -8px -8px 14px;
  background: var(--flaeche-gruen);
  border: 1px solid var(--ok-linie);
  border-radius: 24px;
}

.held__bild img,
.ablauf__bild img,
.kontakt__bild img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  border-radius: 24px;
  box-shadow: var(--schatten);
}

.fakten {
  display: grid;
  gap: 14px;
  margin: 44px 0 0;
  padding: 0;
  list-style: none;
}

.fakt {
  display: grid;
  gap: 4px;
  padding: 20px 24px;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-left: 5px solid var(--gruen);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}

.fakt__wert {
  color: var(--blau);
  font-family: var(--schrift-titel);
  font-size: 1.6rem;
  line-height: 1.2;
}

.fakt__text {
  font-size: 0.95rem;
}

/* Kacheln „Warum wir“ ----------------------------------------------------------- */

.kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

.kachel {
  padding: 26px 26px 20px;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}

.kachel .symbol {
  margin-bottom: 12px;
  color: var(--gruen);
}

.kachel h3 {
  margin-bottom: 0.4em;
}

.kachel p {
  margin: 0;
  font-size: 0.95rem;
}

/* Aufnahme-Check ---------------------------------------------------------------- */

.check-karte {
  margin-top: 28px;
  padding: 28px 22px;
  background: var(--weiss);
  border-radius: 20px;
  box-shadow: 0 2px 4px rgb(5 49 110 / 6%), 0 18px 40px rgb(5 49 110 / 10%);
}

.schrittanzeige {
  display: flex;
  gap: 8px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-leise);
}

.schrittanzeige__schritt {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 3px solid var(--linie);
}

.schrittanzeige__schritt.ist-aktiv {
  color: var(--blau);
  border-color: var(--blau);
}

.schrittanzeige__schritt.ist-erledigt {
  color: var(--gruen);
  border-color: var(--gruen);
}

.schrittanzeige__nr {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--flaeche-blau);
  color: var(--blau);
}

.ist-aktiv .schrittanzeige__nr {
  background: var(--blau);
  color: var(--weiss);
}

.ist-erledigt .schrittanzeige__nr {
  background: var(--gruen);
  color: var(--weiss);
}

.formular fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.schritt + .schritt {
  margin-top: 36px;
  padding-top: 32px;
  border-top: 1px dashed var(--linie);
}

.schritt__titel {
  font-size: 1.6rem;
}

.schritt__titel:focus {
  outline: none;
}

.uebernommen {
  padding: 12px 16px;
  background: var(--flaeche-gruen);
  border-radius: var(--radius-klein);
  font-size: 0.95rem;
}

.feld {
  display: grid;
  gap: 6px;
  align-content: start;
}

.feld__label {
  color: var(--blau);
  font-size: 0.95rem;
  font-weight: 700;
}

legend.feld__label {
  margin-bottom: 6px;
  padding: 0;
}

.feld__optional,
.gruppe__zusatz {
  color: var(--text-leise);
  font-weight: 400;
}

.feld__eingabe {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  background: var(--weiss);
  border: 1.5px solid #b9c9da;
  border-radius: var(--radius-klein);
  color: var(--text);
  font-family: var(--schrift-text);
  font-size: 1rem;
  line-height: 1.4;
}

.feld__eingabe:hover {
  border-color: var(--akzent);
}

.feld__eingabe:focus {
  border-color: var(--blau);
  outline: 3px solid rgb(52 165 218 / 35%);
  outline-offset: 0;
}

textarea.feld__eingabe {
  min-height: 110px;
  resize: vertical;
}

select.feld__eingabe {
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%2305316e' stroke-width='2'/%3E%3C/svg%3E");
  background-position: right 14px center;
  background-repeat: no-repeat;
}

.feld__eingabe[aria-invalid="true"] {
  border-color: var(--rot);
  background-color: var(--rot-flaeche);
}

.feld__hilfe {
  margin: 0;
  color: var(--text-leise);
  font-size: 0.85rem;
}

.feld__fehler {
  margin: 0;
  color: var(--rot);
  font-size: 0.88rem;
  font-weight: 700;
}

.feld__fest {
  display: flex;
  align-items: center;
  min-height: 48px;
  margin: 0;
  padding: 11px 14px;
  background: var(--flaeche);
  border: 1.5px dashed var(--linie);
  border-radius: var(--radius-klein);
  font-weight: 700;
}

.pflicht {
  color: var(--rot);
}

.feld--plz {
  max-width: 520px;
  margin-bottom: 26px;
}

.plz-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.plz-zeile .feld__eingabe {
  width: 150px;
  font-size: 1.3rem;
  letter-spacing: 0.15em;
}

.plz-status {
  font-size: 0.95rem;
  font-weight: 700;
}

.plz-status--ok {
  color: var(--gruen-dunkel);
}

.plz-status--nein {
  color: var(--rot);
}

.plz-status--begrenzt {
  color: #8a4b00;
}

.plz-status--voll {
  color: var(--rot);
}

.plz-status--bald {
  color: var(--lila);
}

.laden {
  color: var(--text-leise);
}

.leistungsgruppen {
  display: grid;
  gap: 22px;
  margin-top: 14px;
}

.leistungsgruppe__titel {
  margin: 0 0 10px;
  color: var(--text-leise);
  font-family: var(--schrift-text);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.auswahl-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.auswahl {
  position: relative;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  height: 100%;
  padding: 13px 14px;
  background: var(--weiss);
  border: 1.5px solid var(--linie);
  border-radius: var(--radius-klein);
  cursor: pointer;
  transition: border-color 0.12s ease, background-color 0.12s ease;
}

.auswahl:hover {
  border-color: var(--akzent);
}

.auswahl input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--blau);
}

.auswahl__text {
  display: grid;
  gap: 2px;
  font-size: 0.95rem;
  line-height: 1.35;
}

.auswahl__label {
  color: var(--blau);
  font-weight: 700;
}

.auswahl__hinweis {
  color: var(--text-leise);
  font-size: 0.82rem;
}

.auswahl:has(input:checked) {
  background: var(--flaeche-blau);
  border-color: var(--blau);
}

.auswahl.ist-ausgeschlossen:has(input:checked) {
  background: var(--rot-flaeche);
  border-color: var(--rot);
}

.auswahl:has(input:focus-visible) {
  outline: 3px solid var(--akzent);
  outline-offset: 2px;
}

/* Ergebnis des Checks */

.ergebnis {
  margin-top: 26px;
  padding: 20px 22px;
  border: 1.5px solid var(--linie);
  border-radius: var(--radius);
  background: var(--flaeche);
}

.ergebnis__titel {
  margin: 0;
  font-weight: 700;
}

.ergebnis--ok {
  background: var(--ok-flaeche);
  border-color: var(--ok-linie);
}

.ergebnis--ok .ergebnis__titel {
  color: var(--gruen-dunkel);
  font-family: var(--schrift-titel);
  font-size: 1.35rem;
  font-weight: 500;
}

.ergebnis--nein {
  background: var(--rot-flaeche);
  border-color: var(--rot-linie);
}

.ergebnis--nein .ergebnis__titel {
  color: var(--rot);
  font-family: var(--schrift-titel);
  font-size: 1.35rem;
  font-weight: 500;
}

/* Keine freien Kapazitäten: Anfrage möglich, aber deutlich gekennzeichnet */
.ergebnis--warteliste {
  background: var(--orange-flaeche);
  border-color: #e2a64b;
  border-left: 6px solid var(--rot);
}

.ergebnis--warteliste .ergebnis__titel {
  color: var(--rot);
  font-family: var(--schrift-titel);
  font-size: 1.35rem;
  font-weight: 500;
}

.ergebnis__gruende {
  margin: 12px 0 0;
  padding-left: 1.2em;
}

.ergebnis__gruende li + li {
  margin-top: 4px;
}

.ergebnis__text {
  margin: 12px 0 0;
  font-size: 0.95rem;
}

.ergebnis .knopf {
  margin-top: 16px;
}

/* Schritt 2 */

.gruppe {
  margin-top: 28px !important;
}

.gruppe__titel {
  margin-bottom: 14px;
  padding: 0;
  color: var(--blau);
  font-family: var(--schrift-titel);
  font-size: 1.25rem;
}

.raster {
  display: grid;
  gap: 18px 20px;
}

.optionen {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px 22px;
}

.optionen legend {
  width: 100%;
}

.option {
  display: inline-flex;
  gap: 10px;
  align-items: flex-start;
  min-height: 32px;
  cursor: pointer;
  line-height: 1.45;
}

.option input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--blau);
}

.option--karte {
  width: 100%;
  padding: 14px 16px;
  background: var(--flaeche);
  border: 1.5px solid var(--linie);
  border-radius: var(--radius-klein);
}

.option--karte:has(input:checked) {
  background: var(--flaeche-blau);
  border-color: var(--blau);
}

.optionen.ist-fehlerhaft,
.feld.ist-fehlerhaft .option--karte {
  border-color: var(--rot);
}

.gruppe--bestaetigung {
  display: grid !important;
  gap: 12px;
}

.fehlerliste {
  margin: 20px 0 0;
  padding: 16px 20px;
  background: var(--rot-flaeche);
  border: 1.5px solid var(--rot-linie);
  border-radius: var(--radius-klein);
}

.fehlerliste:focus {
  outline: 3px solid var(--rot);
}

.fehlerliste__titel {
  margin: 0 0 6px;
  color: var(--rot);
  font-weight: 700;
}

.fehlerliste ul {
  margin: 0;
  padding-left: 1.2em;
}

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

/* Uploads */

.ablage {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 26px 20px;
  background: var(--flaeche);
  border: 2px dashed #b9c9da;
  border-radius: var(--radius);
  color: var(--text-leise);
  text-align: center;
}

.ablage p {
  margin: 0;
}

.ablage .symbol {
  color: var(--akzent);
}

.ablage.ist-aktiv {
  background: var(--flaeche-blau);
  border-color: var(--blau);
}

.ablage:has(input:focus-visible) {
  outline: 3px solid var(--akzent);
  outline-offset: 2px;
}

.dateiliste {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.datei {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  align-items: center;
  padding: 10px 14px;
  background: var(--weiss);
  border: 1.5px solid var(--linie);
  border-radius: var(--radius-klein);
}

.datei__name {
  overflow: hidden;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.datei__groesse {
  color: var(--text-leise);
  font-size: 0.85rem;
  font-weight: 400;
}

.datei select {
  min-height: 40px;
  padding-top: 6px;
  padding-bottom: 6px;
  font-size: 0.9rem;
}

/* Absenden */

.absenden {
  display: grid;
  gap: 12px;
  justify-items: start;
  margin-top: 30px;
}

.fortschritt {
  width: 100%;
}

.fortschritt__balken {
  overflow: hidden;
  height: 10px;
  background: var(--flaeche-blau);
  border-radius: 10px;
}

.fortschritt__wert {
  width: 0;
  height: 100%;
  background: var(--blau);
  transition: width 0.2s ease;
}

.fortschritt__text {
  margin: 6px 0 0;
  font-size: 0.9rem;
}

.honig {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Meldungen */

.meldung {
  padding: 14px 18px;
  background: var(--flaeche);
  border: 1.5px solid var(--linie);
  border-radius: var(--radius-klein);
}

.meldung--fehler {
  background: var(--rot-flaeche);
  border-color: var(--rot-linie);
  color: #7a1a10;
}

.meldung--ok {
  background: var(--ok-flaeche);
  border-color: var(--ok-linie);
  color: #2f5520;
}

.meldung--warnung {
  margin: 0 0 14px;
  background: var(--orange-flaeche);
  border-color: #e2a64b;
  border-left: 6px solid var(--rot);
  color: #6e3d00;
}

/* Erfolg */

.erfolg {
  padding: 10px 4px;
  text-align: center;
}

.erfolg__symbol {
  width: 64px;
  height: 64px;
  color: var(--gruen);
}

.erfolg__titel {
  margin-top: 10px;
  font-size: clamp(1.4rem, 2vw + 0.8rem, 1.9rem);
}

.erfolg__titel:focus {
  outline: none;
}

.erfolg__vorgang {
  display: inline-block;
  padding: 10px 22px;
  background: var(--flaeche-blau);
  border-radius: 50px;
  font-size: 1.05rem;
}

.erfolg__vorgang strong {
  color: var(--blau);
  letter-spacing: 0.05em;
}

.erfolg__eingang,
.erfolg__kontakt {
  color: var(--text-leise);
  font-size: 0.92rem;
}

.erfolg p {
  max-width: 62ch;
  margin-left: auto;
  margin-right: auto;
}

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

.leistungen-raster {
  display: grid;
  gap: 20px;
  margin-top: 30px;
}

.leistungskarte {
  padding: 28px 26px;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}

.leistungskarte__spalten {
  display: grid;
  gap: 8px 28px;
}

.leistungskarte--nein {
  background: var(--flaeche);
  box-shadow: none;
}

.liste {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.liste li {
  position: relative;
  padding: 5px 0 5px 30px;
  font-size: 0.95rem;
}

.liste li::before {
  position: absolute;
  top: 5px;
  left: 0;
  font-weight: 700;
}

.liste--ja li::before {
  content: "✓";
  color: var(--gruen);
}

.liste--nein li::before {
  content: "✕";
  color: var(--rot);
}

/* Einsatzgebiet ------------------------------------------------------------------ */

.gebiet {
  display: grid;
  gap: 36px;
  align-items: center;
}

.orte__titel {
  margin: 22px 0 10px;
  font-family: var(--schrift-text);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-leise);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chips li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: 50px;
  font-size: 0.88rem;
}

/* Stufen wie auf der Karte: grüner Punkt, orange (halb gefüllt), lila Stern – auf leicht getönter Fläche */
.chips li.chip--frei {
  background: var(--ok-flaeche);
  border-color: var(--ok-linie);
}

.chips li.chip--begrenzt {
  background: var(--orange-flaeche);
  border-color: var(--orange-linie);
}

.chips li.chip--bald {
  background: var(--lila-flaeche);
  border-color: var(--lila-linie);
}

.chip--frei::before,
.chip--begrenzt::before,
.orte__zeichen--frei::before,
.orte__zeichen--begrenzt::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.chip--frei::before,
.orte__zeichen--frei::before {
  background: var(--karte-gruen);
}

/* halb gefüllt, damit „eingeschränkt“ auch ohne Farbe von „frei“ zu unterscheiden ist */
.chip--begrenzt::before,
.orte__zeichen--begrenzt::before {
  border: 2px solid var(--orange);
  background: linear-gradient(90deg, var(--orange) 50%, transparent 50%);
}

.chip--bald::before {
  content: "★";
  color: var(--lila);
  line-height: 1;
}

.orte__legende {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 14px 0 0;
  font-size: 0.8rem;
  color: var(--text-leise);
}

.orte__legende span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.orte__stufe {
  margin: 18px 0 0;
  padding: 10px 14px;
  border-left: 4px solid;
  border-radius: 6px;
  font-size: 0.9rem;
}

.orte__stufe--keine {
  background: var(--rot-flaeche);
  border-color: var(--rot);
  color: #7a1a12;
}

.gebiet__karte {
  margin: 0;
  padding: 16px;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}

.gebiet__karte img {
  display: block;
  width: 100%;
  height: auto;
}

.gebiet__karte figcaption {
  margin-top: 8px;
  color: var(--text-leise);
  font-size: 0.82rem;
  text-align: center;
}

/* Ablauf ------------------------------------------------------------------------- */

.ablauf,
.kontakt {
  display: grid;
  gap: 36px;
  align-items: center;
}

.ablauf__bild,
.kontakt__bild {
  margin: 0;
}

.kontakt__bild img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 28%;
}

.schritte {
  display: grid;
  gap: 14px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.schritte__eintrag {
  display: grid;
  grid-template-columns: 56px 1fr;
  column-gap: 16px;
  padding: 20px 22px;
  background: var(--flaeche);
  border-radius: var(--radius);
}

.schritte__nr {
  grid-row: 1 / span 2;
  color: var(--akzent);
  font-family: var(--schrift-titel);
  font-size: 2.2rem;
  line-height: 1;
}

.schritte__eintrag h3 {
  margin-bottom: 0.25em;
}

.schritte__eintrag p {
  margin: 0;
  font-size: 0.95rem;
}

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

.kontakt-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.kontakt-karte {
  display: grid;
  gap: 4px;
  align-content: start;
  padding: 20px 22px;
  background: var(--weiss);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}

.kontakt-karte__label {
  color: var(--gruen);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.kontakt-karte__wert {
  color: var(--blau);
  font-size: 1.02rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

/* Fuß ---------------------------------------------------------------------------- */

.fuss {
  padding: 28px 0;
  background: var(--blau-dunkel);
  color: #d9e6f5;
  font-size: 0.88rem;
}

.fuss__innen {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  align-items: center;
  justify-content: space-between;
}

.fuss p {
  margin: 0;
}

.fuss nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}

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

.fuss a:hover {
  color: var(--akzent);
}

/* Textseiten (z. B. Browser-Testseite) -------------------------------------------- */

.textseite {
  max-width: 820px;
  padding-top: 48px;
  padding-bottom: 72px;
}

.textseite h2 {
  margin-top: 1.6em;
  font-size: 1.5rem;
}

.textseite h3 {
  margin-top: 1.2em;
}

.textseite ul {
  padding-left: 1.3em;
}

/* Admin-Bereich ------------------------------------------------------------------- */

.admin-haupt {
  max-width: 1040px;
  margin: 0 auto;
  padding: 36px var(--rand) 72px;
}

.admin-karte {
  padding: 28px 24px;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: 20px;
  box-shadow: var(--schatten);
}

.admin-karte--schmal {
  max-width: 460px;
  margin: 40px auto 0;
}

.admin-karte h2 {
  margin-top: 1.6em;
  font-size: 1.35rem;
}

.admin-hinweis {
  color: var(--text-leise);
}

.admin-leiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--linie);
}

.admin-leiste p {
  margin: 0;
}

.admin-formular {
  display: grid;
  gap: 16px;
}

.admin-neu {
  display: grid;
  gap: 14px;
  align-items: end;
}

.admin-suche {
  max-width: 360px;
  margin-bottom: 14px;
}

.admin-tabelle-rahmen {
  overflow-x: auto;
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
}

.admin-tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.admin-tabelle th,
.admin-tabelle td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--linie);
  text-align: left;
  vertical-align: middle;
}

.admin-tabelle th {
  background: var(--flaeche);
  color: var(--blau);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.admin-tabelle tr:last-child td {
  border-bottom: 0;
}

.admin-tabelle__plz {
  color: var(--blau);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.admin-tabelle form {
  margin: 0;
}

/* PLZ-Stufen: farbige Kante nach der Stufe, die gerade gilt */
.stufe-zeile--frei {
  --stufe-farbe: var(--gruen);
}

.stufe-zeile--begrenzt {
  --stufe-farbe: var(--orange);
}

.stufe-zeile--keine {
  --stufe-farbe: var(--rot);
}

.stufe-zeile--bald {
  --stufe-farbe: var(--lila);
}

.stufe-zeile td:first-child {
  box-shadow: inset 5px 0 0 var(--stufe-farbe, transparent);
}

.admin-tabelle .stufe-zeile--keine td {
  background: #fffafa;
}

.admin-tabelle .stufe-zeile--bald td {
  background: #fbf8fe;
}

.stufen-wahl {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.stufen-knopf {
  min-height: 34px;
  padding: 5px 11px;
  background: var(--weiss);
  border: 1.5px solid #c8d5e3;
  border-radius: 50px;
  color: var(--text-leise);
  font-family: var(--schrift-text);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}

.stufen-knopf:hover {
  border-color: var(--akzent);
}

.stufen-knopf:focus-visible {
  outline: 3px solid var(--akzent);
  outline-offset: 2px;
}

.stufen-knopf--bald::before {
  content: "★ ";
}

.stufen-knopf[aria-pressed="true"] {
  color: var(--weiss);
}

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

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

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

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

/* Statusleiste „keine“: die gespeicherte Stufe bleibt sichtbar, gilt aber gerade nicht */
.ist-uebersteuert .stufen-wahl {
  opacity: 0.5;
}

.stufe-marke {
  display: block;
  width: fit-content;
  margin: 0 0 6px;
  padding: 2px 10px;
  background: var(--rot);
  border-radius: 50px;
  color: var(--weiss);
  font-size: 0.78rem;
  font-weight: 700;
}

.stufen-erklaerung {
  display: grid;
  gap: 6px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
  font-size: 0.88rem;
}

.stufen-erklaerung li {
  display: flex;
  gap: 10px;
  align-items: baseline;
}

.stufe-zeichen {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--stufe-farbe);
}

.stufe-zeichen--frei {
  --stufe-farbe: var(--gruen);
}

.stufe-zeichen--begrenzt {
  --stufe-farbe: var(--orange);
}

.stufe-zeichen--keine {
  --stufe-farbe: var(--rot);
}

.stufe-zeichen--bald {
  width: 12px;
  height: auto;
  background: none;
  border-radius: 0;
  color: var(--lila);
  line-height: 1;
}

.stufe-zeichen--bald::before {
  content: "★";
}

.admin-ohne-karte {
  color: var(--text-leise);
  font-size: 0.8rem;
  font-weight: 400;
}

.status-formular {
  display: grid;
  gap: 14px;
  margin-bottom: 10px;
}

.status-formular .knopf {
  justify-self: start;
}

.status-wahl {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}

.status-option {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  background: var(--weiss);
  border: 2px solid var(--linie);
  border-radius: var(--radius-klein);
  cursor: pointer;
}

.status-option input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
}

.status-option strong {
  display: block;
  color: var(--blau);
}

.status-option span span {
  display: block;
  margin-top: 2px;
  color: var(--text-leise);
  font-size: 0.85rem;
}

.status-option--frei:has(input:checked) {
  background: #e6f2df;
  border-color: var(--gruen);
}

.status-option--begrenzt:has(input:checked) {
  background: #fff1d6;
  border-color: #c26a00;
}

.status-option--keine:has(input:checked) {
  background: #fde8e5;
  border-color: var(--rot);
}

@media (min-width: 900px) {
  .status-wahl {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Handy: jede PLZ als kleine Karte statt Tabellenzeile, Knöpfe ohne seitliches Wischen erreichbar */
@media (max-width: 639px) {
  .admin-tabelle-rahmen {
    overflow-x: visible;
  }

  .admin-tabelle thead {
    display: none;
  }

  .admin-tabelle,
  .admin-tabelle tbody {
    display: block;
  }

  .admin-tabelle tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--linie);
  }

  .admin-tabelle tr:last-child {
    border-bottom: 0;
  }

  .admin-tabelle tr.stufe-zeile {
    box-shadow: inset 5px 0 0 var(--stufe-farbe, transparent);
  }

  .admin-tabelle tr.stufe-zeile--keine {
    background: #fffafa;
  }

  .admin-tabelle tr.stufe-zeile--bald {
    background: #fbf8fe;
  }

  .admin-tabelle td,
  .admin-tabelle .stufe-zeile td {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
  }

  /* Zeile 1: PLZ und Ort · Zeile 2: Ortsteile (volle Breite, erzwingt den Umbruch) · Zeile 3: Knöpfe */
  .admin-tabelle td:nth-child(2) {
    flex: 1 1 auto;
    font-weight: 700;
  }

  .admin-tabelle td:nth-child(3) {
    flex: 1 1 100%;
    color: var(--text-leise);
    font-size: 0.85rem;
  }

  .admin-tabelle td:nth-child(4),
  .admin-tabelle td:nth-child(5) {
    margin-top: 8px;
  }
}

.admin-protokoll {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.88rem;
}

.admin-protokoll li {
  padding: 6px 0;
  border-bottom: 1px solid var(--linie);
}

.admin-protokoll__zeit {
  color: var(--text-leise);
}

/* Größere Bildschirme ------------------------------------------------------------- */

@media (min-width: 640px) {
  .raster {
    grid-template-columns: 1fr 1fr;
  }

  .feld--breit,
  .raster > .optionen {
    grid-column: 1 / -1;
  }

  .check-karte {
    padding: 36px 40px;
  }

  .datei {
    grid-template-columns: minmax(0, 1fr) 220px auto;
  }

  .admin-neu {
    grid-template-columns: 110px 1fr 1fr 220px auto;
  }
}

/* Kopf: Das Menü erscheint erst, wenn es mit Logo und Hotline-Knopf in eine Zeile passt
   (gemessen: 1008 px plus Bildlaufleiste, dazu Reserve für andere Schriften). Darunter wie auf dem Handy
   nur Logo und Knopf; ab 900 px steht der Knopf dann rechts. */
@media (min-width: 900px) and (max-width: 1059px) {
  .kopf__nav + .knopf--telefon {
    margin-left: auto;
  }
}

@media (min-width: 1060px) {
  .kopf__nav {
    display: flex;
  }
}

@media (min-width: 900px) {
  .held {
    padding: 88px 0 96px;
  }

  .held__raster {
    grid-template-columns: 1.1fr 1fr;
    gap: 64px;
  }

  .held__bild::before {
    inset: 22px -18px -18px 22px;
  }

  .fakten {
    grid-template-columns: repeat(3, 1fr);
  }

  /* minmax(0, …): lange Wörter dürfen die Spalten nicht über den Rand drücken (sonst seitlicher Bildlauf).
     Die langen Wörter in index.html haben weiche Trennstellen (­); break-word nur als letzte Rettung. */
  .leistungen-raster {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  }

  .leistungskarte__spalten {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow-wrap: break-word;
  }

  .gebiet {
    grid-template-columns: 1fr 1fr;
    gap: 56px;
  }

  .ablauf {
    grid-template-columns: 1fr 1.05fr;
    gap: 56px;
  }

  .kontakt {
    grid-template-columns: minmax(260px, 0.75fr) 1.6fr;
    gap: 56px;
  }

  .kontakt__bild img {
    aspect-ratio: auto;
    max-height: 560px;
  }

  .abschnitt {
    padding: 96px 0;
  }
}

@media (max-width: 480px) {
  :root {
    --rand: 16px;
  }

  .kopf__innen {
    gap: 12px;
  }

  .kopf__logo img {
    height: 40px;
  }

  .knopf--telefon .knopf__lang {
    display: none;
  }

  .knopf--telefon .knopf__kurz {
    display: inline;
  }

  .knopf--telefon {
    padding: 8px 16px;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  .knopfreihe .knopf {
    width: 100%;
  }

  .check-karte {
    padding: 22px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    transition: none !important;
  }
}

/* Druck: nur die Bestätigung ------------------------------------------------------- */

@media print {
  body {
    font-size: 11pt;
  }

  .kopf {
    position: static;
    border: 0;
  }

  .kopf__nav,
  .knopf--telefon,
  .sprunglink,
  .statusleiste,
  .held,
  #warum,
  #leistungen,
  #einsatzgebiet,
  #ablauf,
  #kontakt,
  .fuss,
  .nicht-drucken,
  #check > .behaelter > .oberzeile,
  #check-titel,
  #check > .behaelter > .einleitung,
  .schrittanzeige {
    display: none !important;
  }

  .abschnitt,
  .abschnitt--blau {
    padding: 0;
    background: none;
  }

  .check-karte {
    margin: 0;
    padding: 0;
    box-shadow: none;
  }
}