/* Spielplätze in Eschenburg. Vorlage: mockups/neugestaltung.html (#3).
   Farben und Schrift nach afd-fraktion-eschenburg.de (Theme Yuki). Jede Farbe steht hier einmal als Token;
   app.js und exportblatt.js lesen die Datenfarben von hier. Schrift 12, 14, 16, 20, 28 px, Radius 4 px. */

:root,
.thema-hell {
  color-scheme: light;
  --grund: #f7f8f9;
  --flaeche: #ffffff;
  --linie: #eaecee;
  --linie-stark: #dbdddf;
  /* Rand der Bedienelemente (#26): Felder, Segment und der ausgeschaltete Schalter brauchen 3 : 1 gegen --grund und --flaeche
     (WCAG 1.4.11). Trennlinien, Bildlaufleisten und Griffe bleiben bei --linie und --linie-stark. */
  --linie-feld: #878d96;
  --text: #000c2d;
  --leise: #687385;
  --blau: #00a4db;
  --blau-text: #0077a8;
  --auf-blau: #ffffff;
  --haupt: var(--blau-text);
  --segment-an: var(--flaeche);
  --rot: #db3333;
  --ok: #1d7a46;
  --hinweis: #9a6700;
  --fehler: #c0392b;
  /* Abdeckung (#17): Wege und Häuser nach dem Fußweg zum nächsten Platz. Grün bis zum Richtwert, dann Gelb über Orange
     nach Rot (app.js mischt sechs Stufen dazwischen) bis zum doppelten Richtwert, darüber grau. */
  --weg-gruen: #12935a;
  --weg-gelb: #e2b007;
  --weg-orange: #ec7a1c;
  --weg-rot: #d0352b;
  --weg-grau: #8d949f;
  --weg-rand: #ffffff;
  --haus-neben: #d9dce1;
  /* Einzugsgebiete als Flächen, nur noch für „Bild erstellen“ (exportblatt.js), bis #7 auf Wege umgestellt ist */
  --zone-u6: #08306b;
  --zone-u12: #2171b5;
  --zone-ab12: #86c5ea;
  --grenze-u6: var(--zone-u6);
  --grenze-u12: var(--zone-u12);
  --grenze-ab12: #4a9fd4;
  --kacheln: grayscale(0.8) brightness(1.04) contrast(0.9);
  --schleier: #f7f8f9;
  --marker: #000c2d;
  --marker-rand: #ffffff;
  --schatten-karte: 0 15px 18px -15px rgb(44 62 80 / 0.15), 0 0 0 1px rgb(44 62 80 / 0.04);
  --schatten-schwebend: 0 8px 24px rgb(44 62 80 / 0.18);
  --schatten-segment: 0 1px 3px rgb(44 62 80 / 0.2);
}

:root[data-thema="dunkel"],
.thema-dunkel {
  color-scheme: dark;
  --grund: #26262d;
  --flaeche: #32323a;
  --linie: #484852;
  --linie-stark: #656571;
  --linie-feld: #80808e;
  --text: #fefefe;
  --leise: #c2c3c8;
  --blau-text: #4cc3ea;
  --auf-blau: #000c2d;
  --haupt: var(--blau);
  --segment-an: var(--linie);
  --ok: #5bc78e;
  --hinweis: #e8b45e;
  --fehler: #f47c70;
  --weg-gruen: #3cc47c;
  --weg-gelb: #f0c93a;
  --weg-orange: #ff9447;
  --weg-rot: #ff6352;
  --weg-grau: #6a6e79;
  --weg-rand: #26262d;
  --haus-neben: #44464f;
  --zone-u6: #bfe9fb;
  --zone-u12: #3fb0e0;
  --zone-ab12: #1b6a99;
  --grenze-ab12: #2f86bd;
  --kacheln: invert(1) hue-rotate(180deg) grayscale(0.85) brightness(0.72) contrast(0.95);
  --schleier: #26262d;
  --marker: #fefefe;
  --marker-rand: #26262d;
  --schatten-karte: none;
  --schatten-schwebend: 0 8px 24px rgb(0 0 0 / 0.45);
}

:root {
  /* Gleich in Hell und Dunkel: Logo-Grund, Fotos und Lichtbox */
  --weiss: #ffffff;
  --tinte: #000c2d;
  --foto-schleier: rgb(0 12 45 / 0.6);
  --foto-schleier-stark: rgb(0 12 45 / 0.75);
  --foto-knopf: rgb(255 255 255 / 0.92);
  --lichtbox-grund: rgb(8 10 20 / 0.95);
  --lichtbox-leise: #c2c3c8;
  --lichtbox-hover: rgb(255 255 255 / 0.12);
  --schatten-blatt: 0 -8px 24px rgb(0 0 0 / 0.18);
  --schatten-pin: 0 1px 3px rgb(0 0 0 / 0.35);
  --schatten-punkt: 0 1px 4px rgb(0 0 0 / 0.4);
  --schatten-nadel: drop-shadow(0 1px 2px rgb(0 0 0 / 0.45));
  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --dauer-kurz: 120ms;
  --dauer: 200ms;
  --dauer-flaeche: 280ms;
  --kurve-hinein: cubic-bezier(0.2, 0, 0, 1);
  --kurve-hinaus: cubic-bezier(0.4, 0, 1, 1);
  --kopf-h: 60px;
  --unten-h: 64px;
}

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--grund);
}

/* Laptop: Die Seite scrollt als Ganzes, die Leiste am rechten Rand. Die Karte bleibt stehen. */
.app {
  position: relative;
  box-sizing: border-box;
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-columns: 400px minmax(0, 1fr);
  grid-template-areas: "spalte flaeche";
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--linie-stark) transparent;
  border-top: 4px solid var(--rot);
  background: var(--grund);
  color: var(--text);
  font: 400 14px/20px var(--schrift);
}
.app * { box-sizing: border-box; }
.app :focus-visible { outline: 2px solid var(--blau-text); outline-offset: 2px; }
:where(.app) button { font: inherit; color: inherit; }
:where(.app) :where(h1, h2, h3, p, ul, figure, blockquote, fieldset) { margin: 0; }
:where(.app) ul { padding: 0; list-style: none; }
[hidden] { display: none !important; }

.sym { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Kopf */
.kopf { grid-area: kopf; display: flex; align-items: center; gap: 12px; padding: 16px 24px; background: var(--flaeche); border-bottom: 4px solid var(--blau); }
.logo { flex: none; width: 56px; height: 56px; border-radius: 4px; background: var(--weiss); }
.kopf-text { flex: 1; min-width: 0; }
.kopf-titel { font-size: 20px; line-height: 28px; font-weight: 700; }
.kopf-unter { font-size: 12px; line-height: 16px; color: var(--leise); }
.kopf-unter a { color: inherit; }

/* Reiter */
.spalte { grid-area: spalte; display: flex; flex-direction: column; background: var(--grund); border-right: 1px solid var(--linie); }
.reiter { grid-area: reiter; position: sticky; top: 0; z-index: 2; display: flex; background: var(--flaeche); border-bottom: 1px solid var(--linie); }
.reiter button {
  flex: 1;
  height: 44px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: none;
  cursor: pointer;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--leise);
  transition: color var(--dauer-kurz), border-color var(--dauer-kurz);
}
.reiter button:hover { color: var(--text); }
.reiter button.ist-aktiv { color: var(--blau-text); border-bottom-color: var(--blau); }

/* Leiste */
.leiste { grid-area: leiste; flex: 1; display: flex; flex-direction: column; background: var(--grund); }
.griff, .blatt-zeile { display: none; }
.inhalt { padding: 24px; }
.tafel { display: none; }
.tafel.ist-aktiv { display: block; animation: einblenden var(--dauer) var(--kurve-hinein); }
@keyframes einblenden { from { opacity: 0; } }

/* Bausteine */
.kasten { background: var(--flaeche); border-radius: 4px; box-shadow: var(--schatten-karte); padding: 16px; }
.abschnitt { margin-top: 32px; }
.abschnitt:first-child { margin-top: 0; }
.abschnitt-titel { margin-bottom: 12px; padding-left: 8px; border-left: 4px solid var(--blau); font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; }
.titel { font-size: 20px; line-height: 28px; font-weight: 700; }
.lesetext { font-size: 16px; line-height: 24px; }
.meta { font-size: 12px; line-height: 16px; color: var(--leise); }
.tags { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--blau-text); }
.leise { color: var(--leise); }
.wert { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
.abstand { margin-top: 16px; }
.abstand-klein { margin-top: 8px; }

.feld { display: grid; gap: 4px; margin-top: 16px; }
.feld:first-child { margin-top: 0; }
.feld > label, .feld-name { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--leise); }
.eingabe { width: 100%; height: 42px; padding: 0 12px; border: 1px solid var(--linie-feld); border-radius: 4px; background: var(--flaeche); color: var(--text); font: inherit; }
textarea.eingabe { height: 112px; padding: 8px 12px; resize: vertical; }
.eingabe::placeholder { color: var(--leise); opacity: 0.8; }
.eingabe:focus { border-color: var(--blau-text); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--blau) 25%, transparent); }
.reihe { display: flex; gap: 8px; }
.reihe .eingabe { flex: 1; min-width: 0; }

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--dauer-kurz), filter var(--dauer-kurz);
}
.knopf:active { transform: translateY(1px); }
.knopf:disabled { cursor: progress; }
.knopf-haupt { background: var(--haupt); color: var(--auf-blau); }
.knopf-haupt:hover { filter: brightness(1.08); }
.knopf-zweit { background: var(--flaeche); color: var(--text); border-color: var(--linie-stark); }
.knopf-zweit:hover { background: var(--grund); }
.knopf-leise { height: 36px; padding: 0 8px; margin-left: -8px; background: none; color: var(--blau-text); }
.knopf-leise:hover { background: color-mix(in srgb, var(--blau) 10%, transparent); }
.knopf-symbol { width: 42px; padding: 0; background: var(--flaeche); color: var(--text); border-color: var(--linie-stark); }
.knopf-klein { width: 34px; height: 34px; border-color: transparent; background: none; }
.breit { width: 100%; }
#pruefen { min-width: 136px; }
.link { padding: 0; border: 0; background: none; color: var(--blau-text); font-weight: 600; cursor: pointer; text-align: left; }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }

.segment { display: flex; padding: 2px; border: 1px solid var(--linie-feld); border-radius: 4px; background: var(--grund); }
.segment button { flex: 1; height: 36px; border: 0; border-radius: 3px; background: none; color: var(--leise); font-weight: 600; cursor: pointer; transition: background-color var(--dauer-kurz), color var(--dauer-kurz); }
.segment button:hover { color: var(--text); }
.segment button[aria-pressed="true"] { background: var(--segment-an); color: var(--text); box-shadow: var(--schatten-segment); }

.marke { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); background: color-mix(in srgb, var(--c) 10%, transparent); color: color-mix(in srgb, var(--c) 85%, var(--text)); font-size: 12px; line-height: 16px; font-weight: 600; white-space: nowrap; }
.marken { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.farbpunkt { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 20%, transparent); }

.status { min-height: 20px; margin-top: 8px; font-size: 12px; line-height: 16px; color: var(--leise); }
.status[data-art="fehler"] { color: var(--fehler); }
.status[data-art="ok"] { color: var(--ok); }
.status[data-art="hinweis"] { color: var(--hinweis); }

/* Übersicht */
.ergebnis { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--linie); }
.ergebnis-kopf { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.ergebnis-ort { display: inline-flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.ergebnis-liste li { display: grid; grid-template-columns: 12px 112px 1fr; gap: 12px; align-items: start; padding: 8px 0; border-top: 1px solid var(--linie); }
.ergebnis-liste li:first-child { border-top: 0; }
.ergebnis-liste .farbpunkt { margin-top: 4px; }
.ergebnis-gruppe { display: grid; font-weight: 600; }
.kennzahl { font-size: 28px; line-height: 36px; font-weight: 700; color: var(--blau-text); font-variant-numeric: tabular-nums; }
.kennzahl-text { margin-top: 4px; }
.zahlen-liste { margin: 12px 0 8px; }
.zahlen-liste li, .zonen-liste li { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--linie); }
.bildraster { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bildkarte { display: grid; align-content: start; min-width: 0; padding: 0; border: 0; border-radius: 4px; overflow: hidden; background: var(--flaeche); box-shadow: var(--schatten-karte); text-align: left; cursor: pointer; }
.bildkarte img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--linie); }
.bildkarte-text { display: grid; gap: 4px; padding: 8px 12px 12px; }
.bildkarte-name { font-weight: 700; }
.bildkarte:hover .bildkarte-name { color: var(--blau-text); }
.stimme { position: relative; padding: 16px 16px 16px 48px; background: var(--flaeche); border-radius: 4px; box-shadow: var(--schatten-karte); }
.stimme + .stimme { margin-top: 12px; }
.stimme > .sym { position: absolute; left: 16px; top: 16px; color: var(--blau); }
.stimme blockquote { font-size: 16px; line-height: 24px; }
.stimme figcaption { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; font-size: 12px; line-height: 16px; color: var(--leise); }

/* Listen */
.kasten-liste { padding: 0; overflow: hidden; }
.zeile { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 12px; border: 0; border-top: 1px solid var(--linie); background: none; color: var(--text); text-align: left; text-decoration: none; cursor: pointer; transition: background-color var(--dauer-kurz); }
.zeile:first-child { border-top: 0; }
.zeile:hover { background: color-mix(in srgb, var(--blau) 6%, var(--flaeche)); }
div.zeile { cursor: default; }
div.zeile:hover { background: none; }
.zeile > .sym:last-child { color: var(--leise); }
.vorschau { flex: none; display: grid; place-items: center; width: 60px; height: 40px; border-radius: 3px; overflow: hidden; background: var(--grund); color: var(--leise); }
.zeile-bild { flex: none; display: block; width: 60px; height: 40px; border-radius: 3px; object-fit: cover; background: var(--linie); }
.zeile-text { display: grid; flex: 1; min-width: 0; }
.zeile-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zeile-meta { font-size: 12px; line-height: 16px; color: var(--leise); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gruppe { margin-top: 24px; }
.gruppe .tags { display: flex; gap: 8px; margin-bottom: 8px; }
.anzahl { color: var(--leise); }
/* Schalter in einer Zeile (#15): Die ganze Zeile ist die Fläche zum Tippen */
.zeile-schalter { cursor: pointer; }
.schalter { appearance: none; flex: none; position: relative; width: 40px; height: 24px; margin: 0; border-radius: 12px; background: var(--linie-feld); cursor: pointer; transition: background-color var(--dauer-kurz); }
.schalter::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--weiss); box-shadow: var(--schatten-pin); transition: transform var(--dauer-kurz); }
.schalter:checked { background: var(--haupt); }
.schalter:checked::after { transform: translateX(16px); }
.schalter:disabled { cursor: progress; opacity: 0.5; }

/* Platzdetail und Unterseiten */
.zurueck { margin-bottom: 12px; }
.foto { position: relative; aspect-ratio: 3 / 2; margin-bottom: 16px; border-radius: 4px; overflow: hidden; background: var(--linie); }
.foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.foto-gross { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.foto-lupe { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--foto-schleier); color: var(--weiss); }
.foto-knopf { position: absolute; top: 50%; width: 36px; height: 36px; margin-top: -18px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--foto-knopf); color: var(--tinte); box-shadow: var(--schatten-schwebend); cursor: pointer; }
.foto-zurueck { left: 8px; }
.foto-vor { right: 8px; }
.foto-zaehler { position: absolute; right: 8px; bottom: 8px; padding: 0 8px; border-radius: 999px; background: var(--foto-schleier-stark); color: var(--weiss); font-size: 12px; line-height: 20px; font-variant-numeric: tabular-nums; }
.detail-kopf { display: grid; gap: 4px; }
.blatt-vorschau { display: block; width: 100%; height: auto; border-radius: 4px; box-shadow: var(--schatten-karte); }

/* Abdeckung */
.balken-zeile { display: grid; grid-template-columns: 112px 1fr 48px; gap: 12px; align-items: center; width: 100%; min-height: 44px; padding: 8px 12px; border: 0; border-top: 1px solid var(--linie); background: none; text-align: left; cursor: pointer; }
.balken-zeile:first-child { border-top: 0; }
.balken-zeile:hover { background: color-mix(in srgb, var(--blau) 6%, var(--flaeche)); }
.balken-zeile.ist-gewaehlt { background: color-mix(in srgb, var(--blau) 12%, var(--flaeche)); }
.balken { height: 8px; border-radius: 4px; background: var(--linie); overflow: hidden; }
.balken > span { display: block; height: 100%; border-radius: 4px; transition: width var(--dauer) var(--kurve-hinein); }
.grundlage { margin-top: 16px; }
.steckbrief { margin: 12px 0 4px; }
.steckbrief li { display: grid; grid-template-columns: 112px 1fr 48px; gap: 12px; align-items: center; min-height: 36px; border-top: 1px solid var(--linie); color: var(--leise); }
.steckbrief li.ist-gewaehlt { color: var(--text); font-weight: 600; }

/* Mitmachen */
.nur-leser { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.anhang { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.nur-leser:focus-visible + .anhang .knopf { outline: 2px solid var(--blau); outline-offset: 2px; }
.anhang-bild { flex: none; width: 60px; height: 40px; border-radius: 3px; object-fit: cover; background: var(--linie); }
.anhang-text { display: grid; flex: 1; min-width: 0; }
.haken { display: flex; gap: 8px; align-items: flex-start; margin-top: 16px; cursor: pointer; }
.haken input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--blau-text); }
.haken-text { display: grid; gap: 2px; }

/* Lichtbox: liegt über der ganzen Seite, immer dunkel */
.lichtbox { position: fixed; inset: 0; z-index: 3000; display: grid; grid-template-rows: auto minmax(0, 1fr) 48px; background: var(--lichtbox-grund); color: var(--weiss); font: 400 14px/20px var(--schrift); animation: einblenden var(--dauer) var(--kurve-hinein); }
.lichtbox :focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }
.lichtbox-kopf { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 24px; }
.lichtbox-titel { flex: 1; min-width: 0; font-weight: 600; }
.lichtbox-meta { font-size: 12px; line-height: 16px; color: var(--lichtbox-leise); }
.lichtbox-zu { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: var(--weiss); cursor: pointer; }
.lichtbox-zu:hover { background: var(--lichtbox-hover); }
.lichtbox-bild { position: relative; min-height: 0; }
.lichtbox-bild img { position: absolute; inset: 0; box-sizing: border-box; width: 100%; height: 100%; padding: 0 80px; object-fit: contain; pointer-events: none; }
.lichtbox .foto-zurueck { left: 16px; }
.lichtbox .foto-vor { right: 16px; }
.lichtbox-zaehler { align-self: center; text-align: center; font-variant-numeric: tabular-nums; color: var(--lichtbox-leise); }

/* Anmelden, Konten und Einladung */
.unterseite-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.knopf-reihe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.anmeldung .knopf-reihe { margin-top: 8px; }
.marke-leise { --c: var(--leise); }
.zeile-wert { flex: none; color: var(--leise); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fakten li { display: flex; align-items: baseline; gap: 12px; padding: 8px 0; border-top: 1px solid var(--linie); }
.fakten li:first-child { border-top: 0; padding-top: 0; }
.fakten li:last-child { padding-bottom: 0; }
.fakten-name { color: var(--leise); }
.code-eingabe { width: 8em; max-width: 100%; font-size: 20px; letter-spacing: 0.25em; font-variant-numeric: tabular-nums; }
.knopf-gefahr { background: none; color: var(--fehler); border-color: color-mix(in srgb, var(--fehler) 45%, transparent); }
.knopf-gefahr:hover { background: color-mix(in srgb, var(--fehler) 8%, transparent); }
.knopf-gefahr.ist-scharf { background: var(--fehler); color: var(--flaeche); }
.link-feld { display: flex; align-items: center; gap: 8px; padding: 12px; border: 1px solid var(--linie-feld); border-radius: 4px; background: var(--grund); font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 13px; line-height: 20px; word-break: break-all; user-select: all; }
.link-feld.schluessel { word-break: normal; overflow-wrap: anywhere; }
.qr { display: block; width: 176px; height: 176px; padding: 8px; border-radius: 4px; background: #fff; }
.qr svg { display: block; width: 100%; height: 100%; }
.schritt { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 4px 12px; padding: 12px 0; border-top: 1px solid var(--linie); }
.schritt:first-child { border-top: 0; padding-top: 0; }
.schritt-nr { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 12px; background: var(--grund); font-size: 12px; font-weight: 700; }
.schritt-inhalt { display: grid; gap: 8px; min-width: 0; }
.schritt-inhalt .feld { margin-top: 0; }
.schritt-inhalt .status { margin-top: 0; }
@media (min-width: 640px) { .nur-handy { display: none !important; } }

/* Fuß */
.fuss { display: flex; gap: 12px; align-items: center; margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--linie); font-size: 12px; line-height: 16px; color: var(--leise); }
.fuss img { flex: none; width: 32px; height: 32px; border-radius: 4px; background: var(--weiss); }
.fuss a, .fuss button { color: inherit; text-underline-offset: 2px; }
.fuss button { padding: 0; border: 0; background: none; font: inherit; text-decoration: none; cursor: pointer; }
.fuss button:hover, .fuss button:focus-visible { text-decoration: underline; }
/* Jedes Ziel mindestens 24 px hoch (WCAG 2.5.8), die Zeilen stehen untereinander ohne Überschneidung; Schrift und Farbe bleiben */
.fuss a, .fuss button { display: inline-block; min-height: 24px; line-height: 24px; }
.fuss a:hover, .fuss button:hover { color: var(--blau-text); }

/* ---------- Ganze Seiten (#22) ----------
   Alles aus dem Fuß öffnet über der Karte, mit eigenem Pfad. Kopf über die ganze Breite, Inhalt höchstens 1200 px, Lesetext 680 px,
   der Fuß am Ende. Karte und Seitenleiste bleiben darunter stehen (inert); „‹ Karte“ legt nur diese Hülle wieder ab. Vorlage:
   mockups/ganze-seiten/seite.html. */
/* Direkter Aufruf einer Seite: Die Karte darunter blitzt nicht kurz auf, bevor app.js die Seite öffnet */
html.seite-laedt .spalte, html.seite-laedt .flaeche { visibility: hidden; }
.seite { position: fixed; z-index: 1200; inset: 0; display: block; overflow-x: hidden; overflow-y: auto; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: var(--linie-stark) transparent; border-top: 4px solid var(--rot); background: var(--grund); color: var(--text); animation: einblenden var(--dauer) var(--kurve-hinein); }
.seite.ohne-bewegung { animation: none; }
.seite.ist-zu { animation: ausblenden var(--dauer-kurz) var(--kurve-hinaus) forwards; pointer-events: none; }
@keyframes ausblenden { to { opacity: 0; } }
@keyframes von-rechts { from { transform: translateX(100%); } }
@keyframes nach-rechts { to { transform: translateX(100%); } }
@keyframes von-links { from { transform: translateX(-25%); opacity: 0.5; } }
/* Wechsel zwischen Seiten: Laptop überblendet nur, am Handy gleitet der Inhalt wie bei iOS (vor von rechts, zurück von links) */
.gleitet-vor, .gleitet-zurueck, .gleitet-wechsel { animation: einblenden var(--dauer) var(--kurve-hinein); }
.kopf-marke { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.kopf-marke:hover .kopf-titel { color: var(--blau-text); }
.seite .kopf-titel, .seite .kopf-unter { display: block; }
.handy-kopf { display: none; }
.seite-haupt { outline: none; }
.rahmen { max-width: 1200px; margin: 0 auto; padding: 24px 24px 40px; }
.ansicht { display: none; }
.ansicht.ist-aktiv { display: block; }
.ganz-titel { font-size: 28px; line-height: 36px; font-weight: 700; }
.seiten-kopf { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; margin-bottom: 24px; }
.seiten-kopf-text { display: grid; gap: 4px; flex: 1; min-width: 0; }
.seiten-kopf .knopf-reihe { margin-top: 0; }
.lesespalte { max-width: 680px; }
.lesespalte p { font-size: 16px; line-height: 24px; }
.lesespalte p + p { margin-top: 16px; }
.lesespalte .abschnitt { margin-top: 40px; }
.lesespalte .abschnitt-titel { margin-bottom: 16px; }
.schmal { max-width: 440px; }
.bild-raster { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 24px; align-items: start; }

/* Verwaltung: Spalte links wie die Einstellungen von macOS, Inhalt rechts */
.verwaltung { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 40px; align-items: start; }
.vw-spalte { position: sticky; top: 24px; }
.vw-spalte .titel { margin-bottom: 8px; }
.vw-gruppe { margin-top: 24px; }
.vw-gruppe .abschnitt-titel { margin-bottom: 8px; }
.vw-nav { display: grid; gap: 4px; }
.vw-nav a { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px; border-radius: 4px; color: var(--text); text-decoration: none; font-weight: 600; transition: background-color var(--dauer-kurz); }
.vw-nav a .sym { color: var(--leise); }
.vw-nav a:hover { background: color-mix(in srgb, var(--blau) 6%, var(--grund)); }
.vw-nav a.ist-aktiv { background: color-mix(in srgb, var(--blau) 12%, var(--flaeche)); }
.vw-nav a.ist-aktiv .sym { color: var(--blau-text); }
.vw-zahl { margin-left: auto; color: var(--leise); font-weight: 400; font-variant-numeric: tabular-nums; }
/* Auf der getönten Fläche reicht das Grau der Zahl in Hell nicht für 4,5 : 1 */
.vw-nav a:hover .vw-zahl, .vw-nav a.ist-aktiv .vw-zahl { color: var(--text); }
.vw-inhalt { min-width: 0; max-width: 780px; }
/* Einstellungen: „Gespeichert“ hat seinen festen Platz in der Zeile, damit nichts springt */
.gespeichert { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; min-width: 104px; color: var(--ok); font-size: 12px; line-height: 16px; font-weight: 600; opacity: 0; transition: opacity var(--dauer); }
.gespeichert.ist-an { opacity: 1; }

/* Verwaltung von Fotos und Stimmen (#16): Bausteine aus dem freigegebenen Mockup mockups/ganze-seiten.html */
.text-hinweis { color: var(--hinweis); }
#fotos-zahl { min-height: 16px; }
.felder-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.felder-2 .feld { margin-top: 16px; }
.abgesetzt { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--linie); }
.abgesetzt .knopf { min-width: 152px; }
.leer { display: grid; justify-items: center; gap: 12px; padding: 40px 16px; text-align: center; }
.leer .vorschau { width: 48px; height: 48px; border-radius: 50%; }
.zeile .marke { flex: none; }
.zeile.ist-gewaehlt { background: color-mix(in srgb, var(--blau) 12%, var(--flaeche)); }
/* Auf der getönten Zeile reicht das Grau der Metazeile in Hell nicht für 4,5 : 1 */
.zeile.ist-gewaehlt .zeile-meta { color: var(--text); }
.marke-ok { --c: var(--ok); }
.marke-blau { --c: var(--blau-text); }
a.marke { text-decoration: none; }
/* Veröffentlichen ohne Haken: Der Knopf ist aus, die Hülle trägt den Hinweis zum Darüberfahren */
.blatt-huelle { display: flex; }
.blatt-huelle .knopf { flex: 1; }
/* Die Dateiauswahl ist im Knopf versteckt: den Fokusring trägt der Knopf */
.knopf:has(> .nur-leser:disabled) { opacity: 0.45; cursor: not-allowed; filter: none; transform: none; }
.knopf:has(> .nur-leser:focus-visible) { outline: 2px solid var(--blau-text); outline-offset: 2px; }
/* „Bearbeiten“ im Platzdetail (nur angemeldet): neben „Alle Plätze“ */
.detail-reihe { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.detail-reihe .zurueck { margin-bottom: 0; }

/* Mängel und Gefahren, geplante Plätze (#16, Lauf 3): Bausteine aus dem freigegebenen Mockup mockups/ganze-seiten.html */
.vorschau.ist-mangel { color: var(--hinweis); }
.vorschau.ist-gefahr { color: var(--fehler); }
.vorschau.ist-geplant { color: var(--blau-text); }
.einheit-feld { position: relative; }
.einheit-feld .eingabe { padding-right: 40px; }
.einheit-feld > span { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--leise); pointer-events: none; }
/* Lage im Blatt: eine kleine Karte, Tippen setzt die Lage, das Zeichen lässt sich ziehen */
.minikarte { height: 200px; border: 1px solid var(--linie-stark); border-radius: 4px; overflow: hidden; background: var(--grund); }
.minikarte .leaflet-control-attribution { font-size: 12px; }
.minikarte .leaflet-bottom.leaflet-right { top: auto; bottom: 0; left: auto; right: 0; }
/* Zeichen auf der Karte: Mangel in Ocker mit Werkzeug, Gefahr in Rot mit Warndreieck; geplante Plätze als gestrichelter Kreis */
.mk-punkt { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: var(--flaeche); border: 2px solid currentColor; box-shadow: var(--schatten-pin); }
.mk-punkt.ist-mangel { color: var(--hinweis); }
.mk-punkt.ist-gefahr { color: var(--fehler); }
.mk-geplant { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; border: 2px dashed var(--marker); background: color-mix(in srgb, var(--flaeche) 60%, transparent); }

/* Fotos eines Platzes: Kacheln mit fester Größe, auch während des Hochladens */
.fotoraster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ft { position: relative; display: grid; align-content: start; min-width: 0; padding: 0; border: 0; border-radius: 4px; overflow: hidden; background: var(--flaeche); box-shadow: var(--schatten-karte); color: var(--text); text-align: left; cursor: pointer; transition: opacity var(--dauer-kurz); }
.ft[draggable="true"] { cursor: grab; }
.ft-bild { position: relative; display: block; aspect-ratio: 3 / 2; background: var(--linie); }
.ft-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ft-vorschau { position: absolute; left: 8px; top: 8px; padding: 0 8px; border-radius: 999px; background: var(--foto-schleier-stark); color: var(--weiss); font-size: 12px; line-height: 20px; font-weight: 600; }
.ft-fortschritt { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: color-mix(in srgb, var(--blau-text) 25%, transparent); }
.ft-fortschritt > span { display: block; height: 100%; background: var(--blau-text); transition: width var(--dauer) linear; }
.ft-text { display: grid; gap: 4px; padding: 8px 12px 12px; }
.ft-text .meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft:hover .ft-text { background: color-mix(in srgb, var(--blau) 6%, var(--flaeche)); }
.ft.ist-gewaehlt { outline: 2px solid var(--blau-text); outline-offset: 2px; }
.ft.ist-ziel { outline: 2px dashed var(--blau-text); outline-offset: 2px; }
.ft.ist-gezogen { opacity: 0.4; }

/* Detailblatt: legt sich rechts über den Inhalt, nichts darunter verschiebt sich. Handy: Blatt von unten, volle Höhe. */
.blatt { position: fixed; z-index: 2000; top: 0; right: 0; bottom: 0; width: 440px; display: flex; flex-direction: column; background: var(--flaeche); color: var(--text); box-shadow: var(--schatten-schwebend); font: 400 14px/20px var(--schrift); animation: blatt-rein var(--dauer-flaeche) var(--kurve-hinein); }
.blatt * { box-sizing: border-box; }
.blatt :focus-visible { outline: 2px solid var(--blau-text); outline-offset: 2px; }
:where(.blatt) button { font: inherit; color: inherit; }
:where(.blatt) :where(h2, p) { margin: 0; }
.blatt.ohne-bewegung { animation: none; }
.blatt.ist-zu { animation: blatt-raus calc(var(--dauer-flaeche) * 0.67) var(--kurve-hinaus) forwards; }
@keyframes blatt-rein { from { transform: translateX(100%); } }
@keyframes blatt-raus { to { transform: translateX(100%); } }
.blatt-griff { display: none; }
.blatt-kopf { display: flex; align-items: center; gap: 4px; min-height: 64px; padding: 12px 12px 12px 24px; border-bottom: 1px solid var(--linie); }
.blatt-titel { flex: 1; min-width: 0; font-size: 16px; line-height: 24px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blatt-titel:focus, .ganz-titel:focus, .hk-titel:focus { outline: none; }
.blatt-inhalt { flex: 1; min-height: 0; overflow-y: auto; padding: 24px; scrollbar-width: thin; scrollbar-color: var(--linie-stark) transparent; }
.blatt-fuss { padding: 8px 24px 16px; border-top: 1px solid var(--linie); }
.blatt-fuss .status { margin: 0 0 8px; }
.blatt-knoepfe { display: flex; justify-content: flex-end; gap: 8px; }
.blatt-knoepfe .knopf { min-width: 176px; }
/* Drei Knöpfe (öffentlicher Punkt: Von der Seite nehmen, Erledigt, Speichern) passen nur ohne Mindestbreite in eine Reihe */
.blatt-knoepfe:has(> .knopf:nth-child(3)) .knopf { min-width: 0; }
.blatt .knopf:disabled { opacity: 0.45; cursor: not-allowed; filter: none; }
.blatt .foto { margin-bottom: 16px; }
.blatt-zustand { display: flex; align-items: center; gap: 12px; min-height: 36px; margin-bottom: 8px; }
.blatt-zustand .knopf-leise { margin-left: auto; margin-right: -8px; }
.blatt-ordnen { display: flex; gap: 8px; margin-bottom: 16px; }
/* Gesperrt mit aria-disabled statt disabled: bleibt fokussierbar (der Fokus geht beim Speichern nicht verloren), der Tooltip sagt warum */
.blatt .knopf[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; filter: none; }
.blatt .knopf-zweit[aria-disabled="true"]:hover { background: var(--flaeche); }
.blatt .knopf[aria-disabled="true"]:active { transform: none; }
.blatt-ordnen .knopf { flex: 1; min-width: 0; }

/* Karte */
.flaeche { grid-area: flaeche; position: sticky; top: 0; align-self: start; height: calc(100vh - 4px); height: calc(100dvh - 4px); }
#karte { position: absolute; inset: 0; background: var(--grund); }
.leaflet-container { font: inherit; }
.leaflet-container.ist-waehlen, .ist-waehlen .leaflet-interactive { cursor: crosshair; }
/* Flächen der Ortsteile bekommen beim Klicken den Fokus; ohne Tastaturbedienung kein Rahmen darum */
path.leaflet-interactive:focus { outline: none; }
.kacheln { filter: var(--kacheln); }
/* Solange Wege gefärbt sind, treten die Kacheln etwas zurück */
.wege-an .kacheln { filter: var(--kacheln) opacity(0.7); }
.karten-knoepfe { position: absolute; z-index: 900; top: 16px; right: 16px; display: grid; gap: 8px; }
.zoom { display: grid; border-radius: 4px; box-shadow: var(--schatten-schwebend); overflow: hidden; }
.zoom .knopf-symbol { border: 0; border-radius: 0; }
.zoom .knopf-symbol + .knopf-symbol { border-top: 1px solid var(--linie); }
.karten-knoepfe > .knopf-symbol { border: 0; box-shadow: var(--schatten-schwebend); }
.legende { position: absolute; z-index: 900; left: 16px; bottom: 32px; display: grid; gap: 4px; padding: 8px 12px; border-radius: 4px; background: var(--flaeche); box-shadow: var(--schatten-schwebend); font-size: 12px; line-height: 16px; }
.legende-titel { font-weight: 600; }
.legende p { display: flex; align-items: center; gap: 8px; }
.farbfeld { width: 16px; height: 12px; border-radius: 2px; background: var(--c); }
/* Balkenlegende der Abdeckung: grün, Verlauf, grau im Verhältnis 5 : 4 : 1, Marken bei 0, Richtwert und doppeltem Richtwert */
.wl-balken { display: flex; width: 168px; height: 8px; margin-top: 4px; border-radius: 4px; overflow: hidden; }
.wl-g { flex: 5; background: var(--weg-gruen); }
.wl-v { flex: 4; background: linear-gradient(90deg, var(--weg-gelb), var(--weg-orange), var(--weg-rot)); }
.wl-x { flex: 1; background: var(--weg-grau); }
.wl-marken { position: relative; display: block; width: 168px; height: 16px; color: var(--leise); font-variant-numeric: tabular-nums; }
.wl-marken span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.wl-marken span:first-child { transform: none; }
/* Platzdetail: die gewählte Altersgruppe fett, die anderen leise */
.zonen-liste li:not(.ist-gewaehlt) { color: var(--leise); }
.zonen-liste li.ist-gewaehlt { font-weight: 600; }
.zonen-liste .meta { min-width: 56px; text-align: right; }
.leaflet-control-attribution { font-size: 12px; line-height: 16px; background: color-mix(in srgb, var(--flaeche) 85%, transparent) !important; color: var(--leise) !important; }
.leaflet-control-attribution a { color: var(--blau-text) !important; }
.pin-huelle { background: none; border: 0; }
.pin { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--marker); border: 2px solid var(--marker-rand); box-shadow: var(--schatten-pin); transition: transform var(--dauer-kurz); }
.pin-bolz { border-radius: 3px; }
.pin-kita { background: var(--marker-rand); border-color: var(--marker); }
.pin.ist-fern { opacity: 0.35; }
.pin.ist-hervor, .pin-huelle:hover .pin { transform: scale(1.35); }
/* Der gewählte Platz steht als Nadel, die Spitze auf dem Ort. Der blaue Punkt bleibt Standort und geprüfter Adresse vorbehalten. */
.nadel { position: absolute; left: 50%; top: 50%; width: 30px; height: 40px; margin: -40px 0 0 -15px; overflow: visible; filter: var(--schatten-nadel); }
.nadel path { fill: var(--marker); stroke: var(--marker-rand); stroke-width: 1.5; }
.nadel circle, .nadel rect { fill: var(--marker-rand); }
/* Eigener Standort und geprüfte Adresse: der blaue Punkt, wie man ihn aus Karten-Apps kennt */
.punkt { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--blau); border: 3px solid var(--weiss); box-shadow: 0 0 0 7px color-mix(in srgb, var(--blau) 28%, transparent), var(--schatten-punkt); }
.leaflet-tooltip.tipp { padding: 4px 8px; border: 0; border-radius: 4px; background: var(--text); color: var(--grund); box-shadow: none; font-size: 12px; line-height: 16px; font-weight: 600; }
.leaflet-tooltip.tipp::before { display: none; }

/* Hinweis „in Entwicklung“ (#15): ein Streifen über dem oberen Rand der Karte, ganze Kartenbreite. Die Karte behält ihre
   Größe, die Seite springt also nicht. Neutral mit etwas Blau; Ocker bleibt Abweichungen von der Norm vorbehalten (#4).
   Die schwebenden Dinge rücken darunter; app.js setzt --entwicklung-h auf die gemessene Höhe (zwei Zeilen auf sehr
   schmalen Handys), ohne Messung gilt eine Zeile. */
.entwicklung { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 32px; padding: 8px 16px; background: color-mix(in srgb, var(--blau) 12%, var(--flaeche)); border-bottom: 1px solid var(--linie); color: var(--text); font-size: 12px; line-height: 16px; font-weight: 600; text-align: center; }
.entwicklung .sym { color: var(--blau-text); }
.flaeche > .entwicklung { position: absolute; z-index: 950; top: 0; left: 0; right: 0; }
.flaeche.mit-hinweis .karten-knoepfe { top: calc(var(--entwicklung-h, 32px) + 16px); }

.unten { display: none; }

/* ---------- Handy (bis 639 px) ---------- */
@media (max-width: 639px) {
  .app { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "kopf" "flaeche" "unten"; overflow: hidden; scrollbar-gutter: auto; }
  .spalte { display: contents; }
  .flaeche { position: relative; align-self: stretch; height: auto; }
  .kopf { height: var(--kopf-h); padding: 8px 16px; gap: 8px; }
  .logo { width: 40px; height: 40px; }
  .kopf-titel { font-size: 16px; line-height: 24px; }
  .reiter { display: none; }
  .leiste {
    position: absolute;
    z-index: 1100;
    left: 0;
    right: 0;
    bottom: var(--unten-h);
    height: 48%;
    border: 0;
    border-radius: 12px 12px 0 0;
    box-shadow: var(--schatten-blatt);
    transition: height var(--dauer-flaeche) var(--kurve-hinein);
  }
  /* Eingeklappt (#20): nur Griff und eine Zeile mit dem Bereich, die Karte bleibt fast ganz frei. Der Name „klein“
     bleibt, weil app.js ihn an mehreren Stellen setzt. Beim Ziehen (ist-gezogen) folgt das Blatt dem Finger ohne Übergang. */
  .leiste[data-hoehe="klein"] { height: 72px; }
  .leiste[data-hoehe="ganz"] { height: calc(100% - var(--kopf-h) - var(--unten-h) - 8px); }
  .leiste.ist-gezogen { transition: none !important; }
  .griff { display: flex; justify-content: center; align-items: center; flex: none; height: 28px; border: 0; background: none; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
  .griff::before { content: ""; width: 40px; height: 4px; border-radius: 2px; background: var(--linie-stark); }
  .inhalt { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: var(--linie-stark) transparent; padding: 4px 16px 16px; }
  .leiste[data-hoehe="klein"]:not(.ist-gezogen) .inhalt { position: absolute; visibility: hidden; }
  .blatt-zeile { display: none; align-items: center; gap: 8px; width: 100%; height: 40px; margin-top: -4px; padding: 0 16px 4px; border: 0; background: none; color: var(--text); font: 600 16px/24px var(--schrift); text-align: left; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
  .blatt-zeile-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .blatt-zeile .sym { color: var(--leise); }
  .leiste[data-hoehe="klein"] .blatt-zeile { display: flex; }
  /* Beim Ziehen ist die Zeile nicht zu sehen, bleibt aber im Baum: ein Zug, der auf ihr begann, soll nicht abreißen */
  .leiste.ist-gezogen .blatt-zeile { position: absolute; opacity: 0; pointer-events: none; }
  .eingabe { height: 44px; font-size: 16px; }
  .knopf { height: 44px; }
  .knopf-symbol { width: 44px; }
  .segment button { height: 40px; }
  .vw-inhalt .segment button, #blatt .segment button { height: 44px; }
  .foto-knopf { width: 44px; height: 44px; margin-top: -22px; }
  .lichtbox-bild img { padding: 0; }
  .lichtbox .foto-zurueck { left: 8px; }
  .lichtbox .foto-vor { right: 8px; }
  .reihe-handy { flex-direction: column; }
  .nur-laptop { display: none !important; }
  .karten-knoepfe { top: 12px; right: 12px; }
  .zoom { display: none; }
  .legende { left: 12px; top: 32px; bottom: auto; }
  .wl-balken, .wl-marken { width: 140px; }
  .leaflet-bottom.leaflet-right { top: 0; bottom: auto; left: 0; right: auto; }
  /* Mit Hinweis rücken Knöpfe, Legende und der OSM-Hinweis (der hier oben links steht und immer sichtbar bleibt) darunter */
  .flaeche > .entwicklung { padding: 8px 12px; }
  .flaeche.mit-hinweis .karten-knoepfe { top: calc(var(--entwicklung-h, 32px) + 12px); }
  .flaeche.mit-hinweis .legende { top: calc(var(--entwicklung-h, 32px) + 32px); }
  .flaeche.mit-hinweis .leaflet-bottom.leaflet-right { top: var(--entwicklung-h, 32px); }
  .unten { grid-area: unten; display: grid; grid-template-columns: repeat(4, 1fr); height: var(--unten-h); background: var(--flaeche); border-top: 1px solid var(--linie); position: relative; z-index: 1101; }
  .unten button { display: grid; justify-items: center; align-content: center; gap: 4px; border: 0; border-top: 3px solid transparent; background: none; color: var(--leise); font-size: 12px; line-height: 16px; font-weight: 600; cursor: pointer; }
  .unten button.ist-aktiv { color: var(--blau-text); border-top-color: var(--blau); }

  /* Ganze Seiten (#22): Die Seite liegt über der Karte, die untere Leiste bleibt frei und führt in die Bereiche der Karte.
     Kopf „‹ Karte · Titel“ (DESIGN.md §7); die Seite gleitet von rechts herein und nach rechts hinaus. */
  .mit-seite .unten button.ist-aktiv { color: var(--leise); border-top-color: transparent; }
  .seite { bottom: var(--unten-h); display: flex; flex-direction: column; overflow: hidden; scrollbar-gutter: auto; animation: von-rechts var(--dauer-flaeche) var(--kurve-hinein); }
  .seite.ist-zu { animation: nach-rechts calc(var(--dauer-flaeche) * 0.67) var(--kurve-hinaus) forwards; }
  .gleitet-vor { animation: von-rechts var(--dauer-flaeche) var(--kurve-hinein); }
  .gleitet-zurueck { animation: von-links var(--dauer-flaeche) var(--kurve-hinein); }
  .seite-kopf { display: none; }
  .handy-kopf { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 4px; flex: none; height: var(--kopf-h); padding: 0 8px; background: var(--flaeche); border-bottom: 4px solid var(--blau); }
  .hk-zurueck { justify-self: start; display: inline-flex; align-items: center; gap: 4px; height: 44px; max-width: 100%; padding: 0 8px 0 4px; border: 0; border-radius: 4px; background: none; color: var(--blau-text); font-weight: 600; cursor: pointer; }
  .hk-zurueck span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hk-zurueck:hover { background: color-mix(in srgb, var(--blau) 10%, transparent); }
  .hk-titel { max-width: 200px; font-size: 16px; line-height: 24px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
  .hk-rechts { justify-self: end; }
  .seite > .entwicklung { flex: none; padding: 8px 12px; }
  .seite-haupt { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--linie-stark) transparent; }
  .rahmen { padding: 16px 16px 32px; }
  .lesespalte .abschnitt { margin-top: 32px; }
  .verwaltung { display: block; }
  .vw-spalte { display: none; }
  .bild-raster { grid-template-columns: 1fr; gap: 16px; }
  .seiten-kopf { margin-bottom: 16px; }
  .seiten-kopf .knopf-reihe { width: 100%; }
  .seiten-kopf .knopf-reihe .knopf { flex: 1; }
  .seite .fuss { margin-top: 40px; }
  .gespeichert { min-width: 0; }
  .fotoraster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .felder-2 { grid-template-columns: 1fr; }
  .minikarte { height: 180px; }
  .blatt { top: 8px; left: 0; width: auto; border-radius: 12px 12px 0 0; animation-name: blatt-hoch; }
  .blatt.ist-zu { animation-name: blatt-runter; }
  @keyframes blatt-hoch { from { transform: translateY(100%); } }
  @keyframes blatt-runter { to { transform: translateY(100%); } }
  .blatt-griff { display: flex; justify-content: center; align-items: center; flex: none; height: 20px; border: 0; background: none; cursor: pointer; }
  .blatt-griff::before { content: ""; width: 40px; height: 4px; border-radius: 2px; background: var(--linie-stark); }
  .blatt-kopf { min-height: 52px; padding: 0 8px 8px 16px; }
  .blatt-inhalt { padding: 16px; }
  .blatt-fuss { padding: 8px 16px calc(12px + env(safe-area-inset-bottom)); }
  /* Zwei gleich breite Spalten: Mit flex: 1 wäre der Knopf mit Innenabstand breiter als die Hülle des gesperrten */
  .blatt-knoepfe { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .blatt-knoepfe .knopf { min-width: 0; }
  /* Bei drei Knöpfen steht der erste über die ganze Breite, die beiden anderen darunter */
  .blatt-knoepfe:has(> .knopf:nth-child(3)) { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blatt-knoepfe:has(> .knopf:nth-child(3)) > .knopf:first-child { grid-column: 1 / -1; }
  .blatt .haken { align-items: center; min-height: 44px; }
  a.marke { position: relative; }
  a.marke::after { content: ""; position: absolute; inset: -12px -8px; }
}

@media (prefers-reduced-motion: reduce) {
  .app *, .app *::before { transition-duration: 100ms !important; animation-duration: 100ms !important; }
  .leiste { transition: none !important; }
  /* Mit „Bewegung reduzieren“ nur ein kurzes Überblenden, kein Gleiten */
  .seite, .gleitet-vor, .gleitet-zurueck, .gleitet-wechsel, .blatt { animation: einblenden 100ms linear !important; }
  .seite.ist-zu, .blatt.ist-zu { animation: ausblenden 100ms linear forwards !important; }
  .blatt.ohne-bewegung { animation: none !important; }
}