/* ═══════════════════════════════════════════════════════════════════════════
   Draußenkarte — style.css

   Hell, warm, einladend. Kein Dark Mode, keine Terminal-Anmutung.

   Zwei Vorgaben, die sich scheinbar widersprechen und deshalb ausgerechnet
   sind statt nach Gefühl gewählt:
     · freundlich und hell — warmes Papierweiß, weiche Rundungen, viel Luft
     · maximale Lesbarkeit — Fließtext durchweg AAA (über 7:1), nichts unter
       5:1, gefüllte Knöpfe bei 7,96:1, Ränder 2 px statt Haarlinien

   Nachgerechnet über alle Text-/Flächen-Kombinationen; die Zahlen stehen in
   docs/planning.md.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Flächen ── warmes Weiß statt Reinweiß, das nimmt die Härte raus */
  --bg-page:   #fffdf9;
  --bg-card:   #ffffff;
  --bg-sunken: #f2ece1;   /* Rillen, Balken, ausgeschaltete Chips */
  --bg-chip:   #f7f2e9;
  --bg-scrim:  rgba(28, 24, 20, .42);

  /* ── Schrift ── AAA auf allen vier Flächen */
  --ink:       #1c1814;   /* 17,4:1 auf der Seite */
  --ink-soft:  #413a31;   /* 11,0:1 */
  --ink-mute:  #5f564a;   /*  7,1:1 — auch „unwichtiger“ Text bleibt lesbar */

  /* ── Akzent ── warme Terrakotta: einladend, nicht technisch */
  --accent:      #a8451e;   /* 5,9:1 als Text auf Weiß */
  --accent-dark: #8a3716;   /* 8,0:1 — gefüllte Knöpfe, weißer Text */
  --accent-tint: #fdeee6;   /* zarter Hintergrund für Hervorhebungen */
  --accent-edge: #e8c4b0;

  /* ── Status ── */
  --ok:      #1f6f47;
  --ok-tint: #e8f4ed;
  --warn:      #8a5a08;
  --warn-tint: #fdf1dc;
  --err:      #b3311c;
  --err-tint: #fdece8;
  --info:      #255f8d;
  --info-tint: #e9f2f9;

  /* ── Ränder ── kräftig statt Haarlinie; Haarlinien sind der Techno-Look */
  --line:        #e2d8c8;
  --line-strong: #c9bba5;
  --line-ink:    #1c1814;

  /* ── Schriften ── weiche Serife für Namen, runde Grotesk für alles andere.
        Beide mit Latin Extended, sonst brechen ł ż ś ğ ş ı ı̇ weg. */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ── Nutzungsarten ── alle mindestens 4,5:1 auf Weiß, also auch als Text nutzbar */
  --cat-skate:   #a8451e;
  --cat-pump:    #9c5410;
  --cat-tt:      #255f8d;
  --cat-basket:  #b04a22;
  --cat-soccer:  #1f6f47;
  --cat-swing:   #8b4397;
  --cat-climb:   #8a6410;
  --cat-fitness: #1c6f75;
  --cat-parkour: #7a5730;
  --cat-boule:   #5c6626;
  --cat-beach:   #86690f;
  --cat-tramp:   #a83d64;
  --cat-slack:   #45569c;
  --cat-books:   #5e3fa6;
  --cat-post:    #806000; /* Post-Gelb, bis auf 4,5:1 abgedunkelt */
  --cat-graffiti:#b3311c;
  --cat-suspect: #6b6156;

  /* ── Maße ── größer und luftiger als üblich; die App wird draußen benutzt */
  --hdr-h: 62px;
  --seg-h: 56px;
  --tap:   48px;
  --r-lg:  18px;
  --r-md:  13px;
  --r-sm:  9px;
  --shadow-sm: 0 1px 2px rgba(60, 45, 30, .07), 0 2px 6px rgba(60, 45, 30, .05);
  --shadow-md: 0 2px 6px rgba(60, 45, 30, .09), 0 8px 20px rgba(60, 45, 30, .07);
  --shadow-lg: 0 4px 12px rgba(60, 45, 30, .11), 0 16px 40px rgba(60, 45, 30, .12);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

/* ── Reset ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg-page);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;          /* Grundgröße bewusst groß */
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: var(--accent-dark); text-underline-offset: 3px; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2;
      stroke-linecap: round; stroke-linejoin: round; }

/* Fokus deutlich sichtbar — doppelter Ring, damit er auf jedem Grund steht */
:focus-visible {
  outline: 3px solid var(--accent-dark);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

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

.skip-link {
  position: absolute; left: 10px; top: -70px; z-index: 2000;
  background: var(--accent-dark); color: #fff; font-weight: 700;
  padding: 12px 18px; border-radius: var(--r-md); transition: top 150ms var(--ease);
}
.skip-link:focus { top: 10px; }

/* ── App-Gerüst ────────────────────────────────────────────────────────── */
.app {
  display: flex; flex-direction: column;
  height: 100dvh; max-width: 1600px; margin: 0 auto;
  background: var(--bg-page);
}

/* ── Kopfzeile ─────────────────────────────────────────────────────────── */
.hdr {
  display: flex; align-items: center; gap: 8px;
  height: var(--hdr-h); flex: 0 0 auto; padding: 0 12px;
  background: var(--bg-card); border-bottom: 2px solid var(--line);
}
/**
 * Die Kopfzeile ist eine Flex-Zeile, und auf Telefonen war mehr drin, als
 * hineinpasst. Flex hat dann alles zusammengedrückt, was nachgeben durfte:
 * die Knöpfe von 48 auf 38 px und die Regionsauswahl auf **null** Breite —
 * das Auswahlfeld ragte sichtbar aus seinem eigenen Container heraus und
 * überlagerte den Titel.
 *
 * Deshalb ist ab hier festgelegt, wer nachgibt: der Titel (mit Auslassung),
 * sonst niemand.
 */
.hdr__title {
  font-family: var(--font-display); font-size: 25px; font-weight: 600;
  letter-spacing: -.01em; white-space: nowrap; color: var(--ink);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto;
}
.hdr__region { display: flex; align-items: center; flex: 0 0 auto; }
.hdr__select {
  background: var(--bg-chip); border: 2px solid var(--line);
  /* 16 px sind Pflicht: darunter zoomt iOS beim Antippen in die Seite —
     und aus einer Karten-App kommt man aus dem Zoom nur per Pinch zurück. */
  color: var(--ink-soft); font-size: 16px; font-weight: 600;
  padding: 7px 10px; border-radius: var(--r-sm); max-width: 150px; cursor: pointer;
  min-height: 44px;
}
.hdr__select:hover { border-color: var(--accent); color: var(--accent-dark); }
.hdr__spacer { flex: 1; }
.hdr__btn {
  position: relative; display: grid; place-items: center;
  flex: 0 0 auto;   /* nie schmaler als --tap — sonst rutschen sie unter 44 px */
  width: var(--tap); height: var(--tap); border-radius: var(--r-md);
  color: var(--ink-soft); border: 2px solid transparent;
  transition: background 140ms var(--ease), color 140ms var(--ease), border-color 140ms var(--ease);
}
.hdr__btn:hover { background: var(--accent-tint); color: var(--accent-dark); border-color: var(--accent-edge); }
.hdr__btn.is-on { background: var(--accent-tint); color: var(--accent-dark); border-color: var(--accent); }
.hdr__btn--status { color: var(--warn); }
.hdr__badge {
  position: absolute; top: 2px; right: 1px; min-width: 20px; height: 20px;
  padding: 0 5px; border-radius: 10px; background: var(--accent-dark); color: #fff;
  font-size: 13px; font-weight: 700; line-height: 20px; text-align: center;
  border: 2px solid var(--bg-card);
}
@keyframes spin { to { transform: rotate(360deg); } }
.hdr__btn.is-busy svg { animation: spin 900ms linear infinite; }

/* ── Kontextzeile ─────────────────────────────────────────────────────── */
.ctxline {
  flex: 0 0 auto; min-height: 34px; padding: 6px 14px;
  background: var(--accent-tint); border-bottom: 2px solid var(--accent-edge);
  font-size: 14px; font-weight: 600; color: var(--ink-soft);
  display: flex; align-items: center; gap: 12px; overflow-x: auto;
  scrollbar-width: none;
}
.ctxline::-webkit-scrollbar { display: none; }
.ctxline b { color: var(--ink); font-weight: 800; }
.ctxline .ctx--warn { color: var(--warn); }
.ctxline .ctx--info { color: var(--info); }
/* Jeder Eintrag bleibt in einer Zeile; was nicht in die Breite passt, wird
   gewischt statt umgebrochen. Eine umbrechende Kontextzeile wächst im
   Telefonlayout in den Kopf des Blatts hinein und schiebt die Filterleiste
   unter die Bildschirmkante. */
.ctxline .ctx__bit { flex: 0 0 auto; white-space: nowrap; }
.ctxline .ctx__sep { flex: 0 0 auto; color: var(--line-strong); user-select: none; }

/* ── Chips ─────────────────────────────────────────────────────────────── */
.chips {
  flex: 0 0 auto; display: flex; gap: 8px; align-items: center;
  min-height: 54px; padding: 5px 12px;
  overflow-x: auto; overflow-y: hidden; white-space: nowrap;
  scroll-padding-inline: 12px;
  background: var(--bg-page); border-bottom: 2px solid var(--line);
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.chips::-webkit-scrollbar { display: none; }

/* Waagerechtes Scrollen muss man sehen. Ohne Hinweis wirkt ein am Rand
   angeschnittener Chip wie ein Darstellungsfehler — genau so ist es auf dem
   Telefon aufgefallen. Die Kante liegt über der Zeile und lässt Tipser durch. */
.chips__wrap { position: relative; flex: 0 0 auto; }
.chips__wrap::before,
.chips__wrap::after {
  content: ''; position: absolute; top: 0; bottom: 2px; width: 26px;
  pointer-events: none; z-index: 2; opacity: 0; transition: opacity 160ms var(--ease);
}
.chips__wrap::before { left: 0;  background: linear-gradient(to right, var(--bg-page), transparent); }
.chips__wrap::after  { right: 0; background: linear-gradient(to left,  var(--bg-page), transparent); }
.chips__wrap.has-left::before  { opacity: 1; }
.chips__wrap.has-right::after  { opacity: 1; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto;
  min-height: 44px; padding: 0 15px; border-radius: 22px;
  background: var(--bg-card); border: 2px solid var(--line-strong);
  color: var(--ink-soft); font-size: 15px; font-weight: 700;
  transition: background 140ms var(--ease), border-color 140ms var(--ease),
              color 140ms var(--ease), transform 100ms var(--ease);
}
.chip:hover { border-color: var(--ink-soft); color: var(--ink); }
.chip:active { transform: scale(.97); }
/* Eingeschaltet: kräftig gefüllt in der Farbe der Nutzungsart, weißer Text */
.chip.is-on {
  background: var(--c, var(--accent-dark)); border-color: var(--c, var(--accent-dark));
  color: #fff;
}
.chip.is-empty { opacity: .5; }
.chip__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--c, var(--ink-mute)); flex: 0 0 auto; }
.chip.is-on .chip__dot { background: #fff; }
.chip__n { font-size: 13px; font-weight: 800; color: var(--ink-mute); font-variant-numeric: tabular-nums; }
.chip.is-on .chip__n { color: #fff; opacity: .95; }
.chip--creative { border-style: dashed; }
/* Alltagsorte (Bücherschrank, Briefkasten): gepunktet, damit sichtbar bleibt,
   dass sie keine Sportart sind. */
.chip--everyday { border-style: dotted; }
.chip--action { color: var(--accent-dark); background: var(--accent-tint); border-color: var(--accent-edge); }

/* Die früher hier angeheftete „Alle/Keine"-Umschaltung ist entfallen — sie lag
   über dem rechten Ende der Chip-Zeile und verschluckte Tipps auf den dort
   sichtbaren Chip. Seit ein Tipp „nur diese" bedeutet, wird sie auch nicht
   mehr gebraucht; „Alle" und „Keine" stehen am Ende der Zeile und im
   Filter-Panel. */
.chip--playable.is-on { background: var(--accent-dark); border-color: var(--accent-dark); }
.chips__sep { flex: 0 0 auto; width: 2px; height: 26px; background: var(--line); margin: 0 4px; border-radius: 1px; }

/* ── Filterleiste ──────────────────────────────────────────────────────── */
.filterbar {
  flex: 0 0 auto; display: flex; align-items: center; gap: 12px;
  min-height: 44px; padding: 2px 14px;
  background: var(--bg-page); border-bottom: 2px solid var(--line);
}
.filterbar__toggle {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 14px; border-radius: var(--r-md);
  color: var(--ink); font-size: 15px; font-weight: 700;
  border: 2px solid var(--line-strong); background: var(--bg-card);
}
.filterbar__toggle:hover { border-color: var(--accent); color: var(--accent-dark); }
.filterbar__toggle .chev { width: 18px; height: 18px; transition: transform 160ms var(--ease); }
.filterbar__toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
.filterbar__badge {
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px;
  background: var(--accent-dark); color: #fff;
  font-size: 13px; font-weight: 800; line-height: 22px; text-align: center;
}
.filterbar__count { flex: 1; font-size: 14px; font-weight: 700; color: var(--ink-mute); font-variant-numeric: tabular-nums; }
.filterbar__reset {
  font-size: 14px; font-weight: 700; color: var(--accent-dark);
  padding: 8px 12px; border-radius: var(--r-sm); border: 2px solid transparent;
  min-height: 44px;
}
.filterbar__reset:hover { background: var(--accent-tint); border-color: var(--accent-edge); }

/* ── Filterpanel ───────────────────────────────────────────────────────── */
.filterpanel {
  flex: 0 0 auto; max-height: 58dvh; overflow-y: auto;
  padding: 14px 16px 20px; background: var(--bg-card);
  border-bottom: 2px solid var(--line);
}
.fgroup { padding: 14px 0; border-bottom: 2px solid var(--line); }
.fgroup:last-child { border-bottom: none; }
.fgroup--hero {
  padding: 14px; margin-bottom: 6px; border-bottom: none;
  background: var(--accent-tint); border: 2px solid var(--accent-edge); border-radius: var(--r-lg);
}
.fgroup__head {
  font-size: 14px; font-weight: 800; color: var(--ink-mute);
  text-transform: uppercase; letter-spacing: .07em; margin-bottom: 12px;
}
.fgroup__body { display: flex; flex-wrap: wrap; gap: 10px 16px; }
.fgroup__body--stack { flex-direction: column; align-items: stretch; gap: 14px; }
.fgroup__note { margin-top: 10px; font-size: 14px; color: var(--ink-mute); line-height: 1.5; }

.check { display: inline-flex; align-items: center; gap: 11px; min-height: var(--tap); cursor: pointer; font-size: 16px; }
.check input { width: 24px; height: 24px; accent-color: var(--accent-dark); flex: 0 0 auto; cursor: pointer; }
.check--sub { padding-left: 34px; color: var(--ink-soft); }
.check--sub input:disabled + span { opacity: .5; }

.pill {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  padding: 0 16px; border-radius: 22px; cursor: pointer;
  background: var(--bg-card); border: 2px solid var(--line-strong); font-size: 15px; font-weight: 700;
  color: var(--ink-soft); transition: all 140ms var(--ease);
}
.pill input { position: absolute; opacity: 0; width: 0; height: 0; }
.pill:hover { border-color: var(--ink-soft); color: var(--ink); }
.pill:has(input:checked) { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
.pill:has(input:focus-visible) { outline: 3px solid var(--accent-dark); outline-offset: 2px; }

.field { display: flex; flex-direction: column; gap: 7px; }
.field--row { flex-direction: row; align-items: center; justify-content: space-between; gap: 14px; }
.field label { font-size: 15px; font-weight: 700; color: var(--ink-soft); }
.field__val { color: var(--accent-dark); font-weight: 800; font-variant-numeric: tabular-nums; }
.field__hint { font-size: 13px; color: var(--ink-mute); }
.field input[type="range"] { width: 100%; accent-color: var(--accent-dark); height: 44px; }
.input, select:not(.hdr__select):not(.listhead__sort), textarea {
  width: 100%; min-height: 48px; padding: 11px 13px;
  background: var(--bg-card); color: var(--ink); font-size: 16px;
  border: 2px solid var(--line-strong); border-radius: var(--r-md);
}
.input::placeholder, textarea::placeholder { color: var(--ink-mute); opacity: 1; }
.input:focus, textarea:focus, select:focus { border-color: var(--accent-dark); outline-offset: 1px; }
textarea { min-height: 96px; resize: vertical; font-family: var(--font-body); line-height: 1.5; }
.field--row select { width: auto; min-width: 110px; }

.switch { display: flex; align-items: flex-start; gap: 14px; cursor: pointer; padding: 4px 0; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__track {
  flex: 0 0 auto; width: 56px; height: 32px; border-radius: 16px; margin-top: 2px;
  background: var(--bg-sunken); border: 2px solid var(--line-strong);
  position: relative; transition: background 160ms var(--ease), border-color 160ms var(--ease);
}
.switch__thumb {
  position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--ink-mute); transition: transform 160ms var(--ease), background 160ms var(--ease);
}
.switch input:checked + .switch__track { background: var(--accent-dark); border-color: var(--accent-dark); }
.switch input:checked + .switch__track .switch__thumb { transform: translateX(24px); background: #fff; }
.switch input:focus-visible + .switch__track { outline: 3px solid var(--accent-dark); outline-offset: 3px; }
.switch__label { display: flex; flex-direction: column; gap: 3px; font-size: 16px; }
.switch__label strong { font-weight: 800; }
.switch__label small { font-size: 14px; color: var(--ink-mute); line-height: 1.45; }

/* ── Hauptbereich ──────────────────────────────────────────────────────── */
.main { flex: 1 1 auto; position: relative; display: flex; min-height: 0; }
.pane { min-height: 0; position: relative; }
.pane--map { flex: 1 1 auto; }
.pane--list { flex: 1 1 auto; display: flex; flex-direction: column; overflow: hidden; background: var(--bg-page); }

.main[data-view="map"]  .pane--list { display: none; }
.main[data-view="list"] .pane--map  { display: none; }
.main[data-view="split"] .pane--map { flex: 1 1 auto; }
.main[data-view="split"] .pane--list {
  flex: 0 0 400px; border-left: 2px solid var(--line);
}

.map { position: absolute; inset: 0; background: var(--bg-sunken); }

/* ── Schwebende Knöpfe ─────────────────────────────────────────────────── */
.fabs {
  /* max(): im Querformat schiebt die Notch-Aussparung sonst in die Knöpfe */
  position: absolute; right: max(14px, env(safe-area-inset-right)); bottom: 16px; z-index: 500;
  display: flex; flex-direction: column; gap: 12px;
}
.fab {
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bg-card); border: 2px solid var(--line-ink);
  color: var(--ink); box-shadow: var(--shadow-md);
  transition: background 140ms var(--ease), color 140ms var(--ease), transform 100ms var(--ease);
}
.fab:hover { background: var(--ink); color: #fff; }
.fab:active { transform: scale(.94); }
.fab.is-on { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
#fab-add { background: var(--accent-dark); color: #fff; border-color: var(--accent-dark); width: 60px; height: 60px; }
#fab-add:hover { background: var(--ink); border-color: var(--ink); }
#fab-add svg { width: 28px; height: 28px; stroke-width: 2.6; }

/* ── Hinweis-Banner ────────────────────────────────────────────────────── */
.nudge {
  position: absolute; left: max(14px, env(safe-area-inset-left));
  right: calc(max(14px, env(safe-area-inset-right)) + 68px); bottom: 18px; z-index: 500;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: var(--r-lg);
  background: var(--bg-card); border: 2px solid var(--accent);
  box-shadow: var(--shadow-lg); font-size: 15px; font-weight: 600;
}
.nudge__go { color: #fff; background: var(--accent-dark); font-size: 15px; font-weight: 700;
  padding: 10px 14px; border-radius: var(--r-sm); white-space: nowrap; min-height: 44px; }
.nudge__close { color: var(--ink-mute); margin: -8px -6px -8px 0; font-size: 18px;
  flex: 0 0 auto; min-width: 44px; min-height: 44px; display: grid; place-items: center; }

/* ── Liste ─────────────────────────────────────────────────────────────── */
.listhead {
  flex: 0 0 auto; display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-bottom: 2px solid var(--line); background: var(--bg-card);
}
.listhead__sort {
  background: var(--bg-card); border: 2px solid var(--line-strong);
  /* 16 px wie bei .hdr__select: sonst zoomt iOS beim Antippen */
  border-radius: var(--r-md); padding: 9px 12px; font-size: 16px; font-weight: 700; min-height: 44px;
  color: var(--ink); cursor: pointer;
}
.listhead__sort:hover { border-color: var(--accent); }
.listhead__meta { flex: 1; text-align: right; font-size: 14px; font-weight: 700; color: var(--ink-mute); }

.list { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 10px; }
.li {
  display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center;
  padding: 14px; margin-bottom: 10px; width: 100%; text-align: left;
  background: var(--bg-card); border: 2px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  cursor: pointer; transition: border-color 140ms var(--ease), box-shadow 140ms var(--ease), transform 100ms var(--ease);
}
.li:hover, .li:focus-visible { border-color: var(--accent); box-shadow: var(--shadow-md); }
.li:active { transform: scale(.995); }
.li.is-active { border-color: var(--accent-dark); background: var(--accent-tint); }
.li__thumb {
  width: 60px; height: 60px; border-radius: var(--r-md); object-fit: cover;
  background: var(--bg-sunken); border: 2px solid var(--line); flex: 0 0 auto;
}
.li__thumb--ph { display: grid; place-items: center; color: var(--ink-mute); font-size: 24px; }
.li__mid { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.li__dots { display: flex; gap: 5px; align-items: center; }
.li__dot { width: 11px; height: 11px; border-radius: 50%; background: var(--c, var(--ink-mute)); }
.li__more { font-size: 14px; font-weight: 800; color: var(--ink-mute); }
.li__name {
  font-family: var(--font-display); font-size: 19px; font-weight: 600;
  color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.25;
}
.li__name--gen { color: var(--ink-soft); font-weight: 400; font-style: italic; }
.li__meta { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; font-size: 14px; color: var(--ink-soft); }
.li__fresh { font-size: 14px; font-weight: 600; color: var(--ink-mute); }
.li__fresh--old { color: var(--warn); font-weight: 700; }
.li__right { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; justify-content: center; }
.li__dist { font-size: 17px; font-weight: 800; color: var(--accent-dark); white-space: nowrap; font-variant-numeric: tabular-nums; }
.li__rate { font-size: 13px; font-weight: 700; color: var(--ink-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.list__more {
  display: block; width: calc(100% - 20px); margin: 6px 10px 16px; padding: 15px;
  background: var(--bg-card); border: 2px solid var(--line-ink); border-radius: var(--r-lg);
  color: var(--ink); font-size: 16px; font-weight: 700;
}
.list__more:hover { background: var(--ink); color: #fff; }
.list__empty { padding: 56px 24px; text-align: center; color: var(--ink-soft); font-size: 17px;
  display: flex; flex-direction: column; gap: 18px; align-items: center; }

.skel { padding: 14px; margin-bottom: 10px; border: 2px solid var(--line); border-radius: var(--r-lg);
  background: var(--bg-card); display: flex; gap: 14px; align-items: center; }
.skel__b { height: 14px; border-radius: 7px;
  background: linear-gradient(90deg, var(--bg-sunken), var(--bg-chip), var(--bg-sunken));
  background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ── Abzeichen ─────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 12px; font-size: 13px; font-weight: 800; line-height: 18px;
  background: var(--bg-sunken); color: var(--ink-soft); border: 2px solid var(--line-strong);
  white-space: nowrap;
}
.badge--free      { color: var(--ok);   background: var(--ok-tint);   border-color: var(--ok); }
.badge--school    { color: var(--info); background: var(--info-tint); border-color: var(--info); }
.badge--club,
.badge--fee       { color: var(--warn); background: var(--warn-tint); border-color: var(--warn); }
.badge--unknown   { color: var(--ink-soft); background: var(--bg-sunken); border-color: var(--line-strong); }
.badge--suspect   { color: var(--ink-soft); border-style: dashed; border-color: var(--ink-mute); }
.badge--community { color: var(--accent-dark); background: var(--accent-tint); border-color: var(--accent); }
.badge--stale     { color: var(--err); background: var(--err-tint); border-color: var(--err); }
.badge--cat       { color: var(--c); background: var(--bg-card); border-color: var(--c); }
.badge--cat::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--c); }

/* ── Marker ────────────────────────────────────────────────────────────── */
/* Sitzt mittig in der 44-px-Trefferfläche des divIcon (siehe markerIcon()).
   Der Versatz von 9 px ist im Ankerpunkt gegengerechnet. */
.mk { position: absolute; left: 9px; top: 9px; width: 32px; height: 32px; }
.mk__btn {
  width: 32px; height: 32px; border-radius: 50% 50% 50% 7px;
  transform: rotate(-45deg);
  background: var(--c, var(--accent-dark)); border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(40, 30, 20, .35); display: grid; place-items: center; padding: 0;
}
.mk__btn::after { content: ''; width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.9); }
.mk--suspect .mk__btn { background: #fff; border: 3px dashed var(--cat-suspect); }
.mk--suspect .mk__btn::after { background: var(--cat-suspect); }
.mk--community .mk__btn { box-shadow: 0 0 0 3px var(--accent), 0 2px 6px rgba(40,30,20,.35); }
.mk__n {
  position: absolute; top: -6px; right: -7px; min-width: 19px; height: 19px; padding: 0 4px;
  border-radius: 10px; background: var(--ink); border: 2px solid #fff;
  /* 12 px statt 11: die Zahl am Marker ist laut DOCS die Auskunft, wie viele
     Nutzungsarten es dort gibt — draußen bei Sonne war 11 px die Grenze. */
  color: #fff; font-size: 12px; font-weight: 800; line-height: 15px; text-align: center;
}
.mk__lock, .mk__ppl {
  position: absolute; bottom: -5px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 2px solid var(--ink); display: grid; place-items: center; font-size: 9px;
}
.mk__lock { left: -6px; color: var(--warn); }
.mk__ppl  { right: -6px; border-color: var(--accent); color: var(--accent-dark); }
.mk.is-active .mk__btn { box-shadow: 0 0 0 6px var(--accent-tint), 0 0 0 8px var(--accent), 0 2px 6px rgba(40,30,20,.35); }

.marker-cluster > div {
  background: var(--bg-card) !important; border: 3px solid var(--accent-dark) !important;
  color: var(--ink) !important; font-family: var(--font-body) !important;
  font-weight: 800 !important; box-shadow: var(--shadow-md);
  /* Leaflet setzt 12 px — draußen bei Sonne zu wenig für die Ortszahl */
  font-size: 14px !important;
}
.marker-cluster { background: transparent !important; }
.marker-cluster span { line-height: 30px !important; }
/* Trefferfläche ist 44 px (iconCreateFunction), der Kreis bleibt 30 px —
   deshalb 7 px Rand statt Leaflets 5 px, sonst sitzt er außermittig. */
.marker-cluster > div { margin-left: 7px !important; margin-top: 7px !important; }

.mypos { border-radius: 50%; background: var(--info); border: 3px solid #fff; box-shadow: 0 0 0 4px rgba(37,95,141,.28); }

/* Leaflet an die Palette angleichen */
.leaflet-container { background: var(--bg-sunken); font-family: var(--font-body); }
.leaflet-control-attribution {
  background: rgba(255,255,255,.94) !important; color: var(--ink-soft) !important;
  font-size: 12px !important; padding: 4px 8px !important; border-radius: var(--r-sm) 0 0 0;
}
.leaflet-control-attribution a { color: var(--accent-dark) !important; }
.leaflet-bar a {
  background: var(--bg-card) !important; color: var(--ink) !important;
  border-color: var(--line-strong) !important; font-weight: 700;
}
.leaflet-bar a:hover { background: var(--ink) !important; color: #fff !important; }
.leaflet-touch .leaflet-bar a { width: 44px; height: 44px; line-height: 44px; }
.leaflet-touch .leaflet-bar { border: 2px solid var(--line-strong) !important; border-radius: var(--r-md) !important; }

/* iOS: langer Druck auf eine Kartenkachel (ein <img>) öffnet sonst die
   System-Bildvorschau — mitten in der 600-ms-Geste „Ort hinzufügen".
   Leaflets eigenes CSS unterbindet nur die Textauswahl, nicht das Callout. */
.leaflet-container, .leaflet-container * { -webkit-touch-callout: none; }

/* ── Tour ──────────────────────────────────────────────────────────────── */
.tourbar { flex: 0 0 auto; background: var(--bg-card); border-top: 2px solid var(--line); }
.tourbar__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 50px; padding: 0 16px; font-size: 15px; font-weight: 700; color: var(--ink);
}
.tourbar__head .chev { width: 20px; height: 20px; transition: transform 160ms var(--ease); }
.tourbar__head[aria-expanded="true"] .chev { transform: rotate(180deg); }
.tourbar__body { padding: 6px 16px 16px; max-height: 42dvh; overflow-y: auto; }
.tourbar__list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.tourbar__item {
  display: flex; align-items: center; gap: 12px; padding: 12px;
  background: var(--bg-page); border: 2px solid var(--line); border-radius: var(--r-md); font-size: 15px;
}
.tourbar__item[draggable="true"] { cursor: grab; }
.tourbar__item.is-drag { opacity: .45; }
.tourbar__num {
  font-size: 14px; font-weight: 800; color: #fff; background: var(--accent-dark);
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto;
}
.tourbar__nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
/* Umsortieren per Knopf: HTML5-Drag-and-drop feuert auf Touch schlicht nicht —
   „per Ziehen ändern" galt nur für die Maus. Die Pfeile sind zugleich der
   Tastaturweg. */
.tourbar__updown { display: flex; flex: 0 0 auto; }
.tourbar__mv {
  min-width: 44px; min-height: 44px; display: grid; place-items: center;
  font-size: 13px; color: var(--ink-soft); border-radius: var(--r-sm);
}
.tourbar__mv:hover { background: var(--bg-sunken); color: var(--ink); }
.tourbar__mv[disabled] { opacity: .3; pointer-events: none; }
.tourbar__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ── Ansichtsumschalter ────────────────────────────────────────────────── */
.segmented {
  flex: 0 0 auto; display: flex; gap: 6px; height: var(--seg-h); padding: 6px 10px;
  padding-bottom: calc(6px + var(--safe-b)); box-sizing: content-box;
  background: var(--bg-card); border-top: 2px solid var(--line);
}
.segmented__btn {
  flex: 1; font-size: 15px; font-weight: 700; color: var(--ink-soft);
  border: 2px solid transparent; border-radius: var(--r-md);
  transition: background 140ms var(--ease), color 140ms var(--ease);
}
.segmented__btn:hover { background: var(--bg-chip); color: var(--ink); }
.segmented__btn.is-active { background: var(--accent-dark); color: #fff; border-color: var(--accent-dark); }
.segmented__btn--split { display: none; }

/* ── Verdunkelung / Drawer ─────────────────────────────────────────────── */
/* ── Stapelreihenfolge ──────────────────────────────────────────────────────
   500  Karten-Knöpfe · 700 schwebende Kopfzeile und Chips (Telefon)
   1000 Leaflets eigene Bedienelemente — von Leaflet vorgegeben, nicht änderbar
   1001 das Blatt (muss über Leaflets Attributionszeile liegen, sonst schneidet
        die quer durch die Liste)
   1002 der ⓘ-Knopf, sobald das Blatt aufgezogen ist
   1010 Abdunklung · 1020 Detailfenster — beide MÜSSEN über dem Blatt liegen,
        sonst ragen Greifleiste und Filterzeile in den geöffneten Ort hinein
   1050 Vollbildblatt · 1100 Dialog · 1200 Fortschritt · 1300 Meldungen        */
.scrim { position: fixed; inset: 0; background: var(--bg-scrim); z-index: 1010; }

.drawer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1020;
  max-height: 90dvh; display: flex; flex-direction: column;
  background: var(--bg-card);
  border-top: 2px solid var(--line-strong);
  border-radius: 24px 24px 0 0; box-shadow: var(--shadow-lg);
  animation: drawerUp 240ms var(--ease);
}
@keyframes drawerUp { from { transform: translateY(100%); } to { transform: none; } }
.drawer__close {
  position: absolute; top: 10px; right: 10px;
  flex: 0 0 auto; min-width: 44px; min-height: 44px;
  width: var(--tap); height: var(--tap);
  display: grid; place-items: center; color: var(--ink); border-radius: 50%; z-index: 2;
  background: var(--bg-sunken); border: 2px solid var(--line-strong); font-size: 18px; font-weight: 700;
}
.drawer__close:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.drawer__body { overflow-y: auto; padding: 8px 20px calc(28px + var(--safe-b)); -webkit-overflow-scrolling: touch; }

/* Drawer-Inhalt */
.dw__head { padding-right: 56px; margin-bottom: 6px; }
.dw__name { font-family: var(--font-display); font-size: 26px; font-weight: 600; line-height: 1.2; color: var(--ink); }
.dw__gen { font-size: 13px; font-weight: 700; color: var(--ink-mute); margin-left: 8px; white-space: nowrap; font-style: italic; }
.dw__badges { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.dw__fresh {
  margin-top: 14px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  font-size: 16px; font-weight: 700; color: var(--ink-soft);
  background: var(--bg-chip); border: 2px solid var(--line); border-radius: var(--r-md); padding: 12px 14px;
}
.dw__fresh--old { color: var(--warn); background: var(--warn-tint); border-color: var(--warn); }
.dw__freshtxt { flex: 1; }
.dw__addr { margin-top: 10px; font-size: 16px; color: var(--ink-soft); }
.dw__sec { margin-top: 24px; padding-top: 20px; border-top: 2px solid var(--line); }
.dw__sec:first-of-type { border-top: none; }
.dw__h { font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-mute); margin-bottom: 14px; }
.dw__row { display: flex; flex-wrap: wrap; gap: 10px; }
.dw__note { font-size: 14px; color: var(--ink-mute); margin-top: 10px; line-height: 1.5; }
.dw__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.dw__tags { margin-top: 22px; }
.dw__tags summary { cursor: pointer; font-size: 15px; font-weight: 700; color: var(--ink-soft); padding: 12px 0; }
.dw__tags table { width: 100%; border-collapse: collapse; font-size: 13px; }
.dw__tags td { padding: 6px 8px; border-bottom: 2px solid var(--line); vertical-align: top; word-break: break-word; }
.dw__tags td:first-child { color: var(--ink-mute); white-space: nowrap; font-weight: 700; }
/* Der Rohtag-Kasten steckt jetzt im Kasten „Was OSM sonst noch weiß" —
   verschachtelt bekommt er weniger Abstand, sonst rutscht er weit weg. */
.dw__tags .dw__tags { margin-top: 10px; }
.dw__desc { font-size: 15px; line-height: 1.55; color: var(--ink); margin: 6px 0 12px; }
.dw__link {
  display: inline-block; margin-top: 10px; min-height: var(--tap);
  line-height: var(--tap); font-size: 15px; font-weight: 700;
  color: var(--accent-dark); text-decoration: underline; word-break: break-word;
}
/* Der Leerzustand trägt jetzt eine Begründung und zwei Knöpfe statt einem.
   Die Grundregel (zentriert, Spalte) steht weiter oben; hier nur der engere
   Abstand und eine Breitengrenze, damit „„Nur mit Foto" ausschalten" nicht
   quer über die ganze Liste läuft. */
/* ── Bezugspunkt (Standort oder Postleitzahl) ──────────────────────────── */
.anchor {
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px; border-radius: var(--r-md);
  background: var(--bg-sunken); border: 2px solid var(--line);
}
.anchor__now { font-size: 14px; font-weight: 700; color: var(--ink-mute); }
.anchor__now--set { color: var(--accent-dark); }
.anchor__row { display: flex; gap: 8px; flex-wrap: wrap; }
.anchor__form { display: flex; gap: 8px; align-items: stretch; }
/* Das Eingabefeld bekommt den Platz, der Knopf behält seine Breite.
   16 px Schriftgröße ist Pflicht: darunter zoomt iOS beim Antippen hinein. */
.anchor__form .input { flex: 1 1 auto; min-width: 0; font-size: 16px; }
.anchor__form .btn { flex: 0 0 auto; }
.anchorpin {
  display: grid; place-items: center; width: 28px; height: 28px;
  font-size: 22px; line-height: 1; color: var(--accent-dark);
  text-shadow: 0 0 3px #fff, 0 0 6px #fff;
}

/* ── Übersicht statt Liste ─────────────────────────────────────────────── */
.overview {
  flex: 0 0 auto; padding: 14px 14px 10px;
  background: var(--accent-tint); border-bottom: 2px solid var(--accent-edge);
}
.overview__lead { font-size: 14px; font-weight: 600; color: var(--ink-soft); margin-bottom: 10px; line-height: 1.45; }
.overview__row { display: flex; flex-wrap: wrap; gap: 8px; }
.overview__chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--tap); padding: 0 14px; border-radius: 22px;
  background: var(--bg-card); border: 2px solid var(--line-strong);
  font-size: 15px; font-weight: 700; color: var(--ink);
}
.overview__chip:hover { border-color: var(--accent); color: var(--accent-dark); }
.overview__n { font-variant-numeric: tabular-nums; color: var(--ink-mute); font-weight: 800; }
/* Der Rest, der zu keinem Viertel gehört — gezählt, aber nicht anspringbar */
.overview__rest { margin-top: 10px; font-size: 13.5px; color: var(--ink-mute); }

/* ── Herkunft einer Angabe ─────────────────────────────────────────────────
   Nur die eigene Angabe wird gekennzeichnet. Alles ohne Marke kommt aus der
   Datenbank — das steht als Legende unter den Attributchips, damit die
   Abwesenheit eines Zeichens auch etwas bedeutet. */
.src {
  display: inline-block; margin-left: 6px; padding: 1px 6px;
  border-radius: 8px; font-size: 11px; font-weight: 800;
  letter-spacing: .03em; vertical-align: middle;
}
.src--du { background: var(--accent-dark); color: #fff; }
.attrchip.is-on .src--du,
.attrchip.is-off .src--du { background: #fff; color: var(--accent-dark); }
.attrchip--du { box-shadow: inset 0 0 0 1px var(--accent-dark); }
.attrchips__legend { flex-basis: 100%; margin-top: 10px; font-size: 13px; color: var(--ink-mute); line-height: 1.45; }
.dw__tags td .src { margin-left: 8px; }

.list__empty { gap: 14px; padding-top: 40px; }
.list__empty .dw__note { margin-top: 0; max-width: 34ch; }
.list__empty .btn { max-width: 34ch; }

.gallery { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; }
.gallery figure { flex: 0 0 auto; width: 220px; margin: 0; }
.gallery img { width: 220px; height: 148px; object-fit: cover; border-radius: var(--r-md);
  background: var(--bg-sunken); border: 2px solid var(--line); display: block; }
.gallery figcaption { font-size: 13px; color: var(--ink-mute); margin-top: 6px; line-height: 1.4; }
/* Sichtbar klein, Trefffläche 44 px: das Pseudo-Element vergrößert nur den
   Tap-Bereich — ein sichtbar großer Löschknopf läge auf dem Foto. */
.gallery__del { position: relative; font-size: 13px; font-weight: 700; color: var(--err); padding: 4px 0; }
.gallery__del::after { content: ''; position: absolute; inset: -10px -8px; }

.rate { display: flex; flex-direction: column; gap: 8px; }
.rate__hd { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.rate__ttl { font-size: 17px; font-weight: 800; }
.rate__cm { font-size: 14px; font-weight: 700; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.stars { display: flex; gap: 6px; align-items: center; }
.star {
  width: 52px; height: 52px; display: grid; place-items: center;
  font-size: 28px; color: var(--ink-mute); border-radius: var(--r-md);
  border: 2px solid var(--line); background: var(--bg-card);
  transition: color 140ms var(--ease), background 140ms var(--ease), border-color 140ms var(--ease);
}
.star:hover { background: var(--accent-tint); border-color: var(--accent); }
.star.is-on { color: var(--accent-dark); border-color: var(--accent); background: var(--accent-tint); }
.star--clear { font-size: 14px; font-weight: 700; color: var(--ink-soft); width: auto; padding: 0 14px; border-style: dashed; }
.rate__meta { font-size: 14px; color: var(--ink-mute); }
.rate__meta--warn { color: var(--warn); font-weight: 700; }

.attrchips { display: flex; flex-wrap: wrap; gap: 9px; }
.attrchip {
  min-height: 44px; padding: 0 16px; border-radius: 22px;
  background: var(--bg-card); border: 2px solid var(--line-strong);
  color: var(--ink-soft); font-size: 15px; font-weight: 700;
  transition: all 140ms var(--ease);
}
.attrchip:hover { border-color: var(--ink-soft); color: var(--ink); }
.attrchip.is-on { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
.attrchip.is-off { border-style: dashed; color: var(--ink-mute); text-decoration: line-through; }

.hl { padding: 16px; border-radius: var(--r-lg); background: var(--accent-tint); border: 2px solid var(--accent); }
.hl--warn { background: var(--warn-tint); border-color: var(--warn); }
.hl--err  { background: var(--err-tint);  border-color: var(--err); }
.hl__h { font-size: 18px; font-weight: 800; margin-bottom: 10px; color: var(--ink); }
.hl__t { font-size: 16px; line-height: 1.55; color: var(--ink-soft); }

.copybox {
  display: flex; align-items: center; gap: 12px; margin-top: 12px;
  padding: 12px 14px; background: var(--bg-card); border: 2px solid var(--line-strong);
  border-radius: var(--r-md); font-size: 15px; font-weight: 600; word-break: break-all;
}
.copybox code { flex: 1; white-space: pre-wrap; }
.copybox button { color: #fff; background: var(--accent-dark); font-size: 14px; font-weight: 700;
  white-space: nowrap; padding: 9px 14px; border-radius: var(--r-sm); min-height: 44px; }

/* ── Knöpfe ── kräftig gefüllt, 2 px Rand, nichts Zartes ───────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: var(--tap); padding: 0 20px; border-radius: var(--r-md);
  background: var(--bg-card); border: 2px solid var(--line-ink);
  color: var(--ink); font-size: 16px; font-weight: 700; text-decoration: none;
  transition: background 140ms var(--ease), color 140ms var(--ease),
              border-color 140ms var(--ease), transform 100ms var(--ease);
}
.btn:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn:active { transform: scale(.97); }
.btn--primary { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
.btn--primary:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn--ghost { background: var(--bg-card); border-color: var(--line-strong); color: var(--ink-soft); }
.btn--ghost:hover { background: var(--bg-sunken); color: var(--ink); border-color: var(--ink-soft); }
.btn--danger { background: var(--bg-card); color: var(--err); border-color: var(--err); }
.btn--danger:hover { background: var(--err); color: #fff; }
/* 44 px, nicht 42: „Ich war da" und die ganze Aktionszeile im Drawer hängen
   an dieser Klasse — ausgerechnet die meistgedrückten Knöpfe lagen unter der
   eigenen 48-px-Regel UND unter der 44-px-Untergrenze. */
.btn--sm { min-height: 44px; padding: 0 15px; font-size: 15px; border-radius: var(--r-sm); }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .45; pointer-events: none; }

/* ── Dialog ────────────────────────────────────────────────────────────── */
.modal { position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center; padding: 18px;
  background: var(--bg-scrim); }
.modal__box {
  width: 100%; max-width: 600px; max-height: 90dvh; display: flex; flex-direction: column;
  background: var(--bg-card); border: 2px solid var(--line-strong);
  border-radius: 22px; box-shadow: var(--shadow-lg);
}
.modal__head { display: flex; align-items: center; gap: 12px; padding: 20px 20px 14px; border-bottom: 2px solid var(--line); }
.modal__title { flex: 1; font-family: var(--font-display); font-size: 22px; font-weight: 600; }
.modal__close { width: 44px; height: 44px; display: grid; place-items: center; color: var(--ink);
  border-radius: 50%; background: var(--bg-sunken); border: 2px solid var(--line-strong); font-size: 17px; }
.modal__close:hover { background: var(--ink); color: #fff; }
.modal__body { flex: 1; overflow-y: auto; padding: 20px; }
.modal__foot { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end;
  padding: 16px 20px calc(20px + var(--safe-b)); border-top: 2px solid var(--line); }

/* ── Vollbildfläche ────────────────────────────────────────────────────── */
.sheet { position: fixed; inset: 0; z-index: 1050; display: flex; flex-direction: column; background: var(--bg-page); }
.sheet__head {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
  /* safe-area-top wie bei .hdr: heute 0 (Statusleisten-Stil „default"), aber
     Android 15+ liefert im installierten Vollbild einen echten Wert — der
     Zurück-Knopf des Formulars säße sonst unter der Statusleiste. */
  height: calc(var(--hdr-h) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) 10px 0;
  background: var(--bg-card); border-bottom: 2px solid var(--line);
}
.sheet__back { width: var(--tap); height: var(--tap); display: grid; place-items: center; font-size: 30px;
  color: var(--ink); border-radius: 50%; background: var(--bg-sunken); border: 2px solid var(--line-strong); }
.sheet__back:hover { background: var(--ink); color: #fff; }
.sheet__title { font-family: var(--font-display); font-size: 23px; font-weight: 600; }
.sheet__body { flex: 1; overflow-y: auto; padding: 20px 18px calc(40px + var(--safe-b));
  max-width: 760px; width: 100%; margin: 0 auto; }

.sec { margin-bottom: 32px; }
.sec__h { font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-mute); margin-bottom: 14px; }
.card { background: var(--bg-card); border: 2px solid var(--line); border-radius: var(--r-lg);
  padding: 16px; box-shadow: var(--shadow-sm); }
.card + .card { margin-top: 10px; }

.bar { display: flex; flex-direction: column; gap: 8px; padding: 14px 0; border-bottom: 2px solid var(--line); }
.bar:last-child { border-bottom: none; }
.bar__top { display: flex; justify-content: space-between; gap: 12px; font-size: 16px; font-weight: 700; }
.bar__n { font-size: 15px; font-weight: 700; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.bar__track { height: 12px; border-radius: 6px; background: var(--bg-sunken); overflow: hidden; border: 2px solid var(--line); }
.bar__fill { height: 100%; background: var(--accent-dark); transition: width 260ms var(--ease); }
.bar__fill--done { background: var(--ok); }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.stat { background: var(--bg-card); border: 2px solid var(--line); border-radius: var(--r-lg);
  padding: 18px 14px; text-align: center; box-shadow: var(--shadow-sm); }
.stat__n { font-family: var(--font-display); font-size: 34px; font-weight: 600; color: var(--accent-dark);
  display: block; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat__l { font-size: 14px; font-weight: 600; color: var(--ink-soft); }

/* ── Formular ──────────────────────────────────────────────────────────── */
.form { display: flex; flex-direction: column; gap: 24px; }
.form__step { display: flex; flex-direction: column; gap: 10px; }
.form__lbl { font-size: 17px; font-weight: 800; color: var(--ink); }
.form__lbl small { display: block; font-weight: 500; color: var(--ink-mute); font-size: 14px; margin-top: 4px; line-height: 1.45; }
.form__req { color: var(--err); }
.form__map { height: 220px; border-radius: var(--r-lg); overflow: hidden; border: 2px solid var(--line-strong); }
.form__coords { font-size: 13px; font-weight: 700; color: var(--ink-mute); font-variant-numeric: tabular-nums; }
.form__err { font-size: 15px; font-weight: 700; color: var(--err); }
.form__err:not(:empty) { padding: 12px 14px; background: var(--err-tint); border: 2px solid var(--err); border-radius: var(--r-md); }
.usecount { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 600; color: var(--ink-soft); }
.usecount input { width: 72px; min-height: 44px; text-align: center; font-weight: 700; }
.thumbs { display: flex; flex-wrap: wrap; gap: 12px; }
.thumbs figure { position: relative; margin: 0; }
.thumbs img { width: 100px; height: 100px; object-fit: cover; border-radius: var(--r-md); border: 2px solid var(--line-strong); }
.thumbs button { position: absolute; top: -8px; right: -8px; width: 30px; height: 30px; border-radius: 50%;
  background: var(--err); border: 2px solid #fff; color: #fff; font-size: 14px; font-weight: 700;
  display: grid; place-items: center; box-shadow: var(--shadow-sm); }
/* 30 px sichtbar, 44 px treffbar — es ist ein zerstörender Knopf */
.thumbs button::after { content: ''; position: absolute; inset: -8px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ── Fortschritt und Meldungen ─────────────────────────────────────────── */
.progress {
  position: fixed; left: 50%; bottom: calc(24px + var(--safe-b)); transform: translateX(-50%);
  z-index: 1200; width: min(440px, calc(100vw - 32px));
  padding: 16px 18px; border-radius: var(--r-lg);
  background: var(--bg-card); border: 2px solid var(--line-ink); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; gap: 10px;
}
.progress__label { font-size: 16px; font-weight: 700; color: var(--ink); }
.progress__track { height: 10px; border-radius: 5px; background: var(--bg-sunken); overflow: hidden; border: 2px solid var(--line); }
.progress__bar { height: 100%; width: 0; background: var(--accent-dark); transition: width 220ms var(--ease); }
/* 44 px: der einzige Weg, einen minutenlangen Abruf abzubrechen, war 33 px hoch */
.progress__cancel { align-self: flex-end; font-size: 14px; font-weight: 700; color: var(--ink-soft); padding: 6px 10px; border-radius: var(--r-sm); min-height: 44px; min-width: 44px; }
.progress__cancel:hover { color: var(--err); background: var(--err-tint); }

.toasts {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(96px + var(--safe-b)); z-index: 1300;
  display: flex; flex-direction: column; gap: 10px; align-items: center;
  width: min(480px, calc(100vw - 24px)); pointer-events: none;
}
.toast {
  pointer-events: auto; width: 100%; padding: 15px 17px; border-radius: var(--r-lg);
  background: var(--bg-card); border: 2px solid var(--line-ink);
  box-shadow: var(--shadow-lg); font-size: 16px; font-weight: 600; color: var(--ink);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  animation: toastIn 200ms var(--ease);
}
/* Der Text bekommt den Platz, den er braucht, und darf den Knopf notfalls in
   die nächste Zeile schieben. Vorher stand der Knopf starr daneben und presste
   längere Meldungen auf dem Telefon in eine zwei Wörter breite Spalte —
   „Der lokale / Speicher ist / voll." über acht Zeilen. */
.toast__msg { flex: 1 1 12rem; min-width: 0; }
.toast__act { flex: 0 0 auto; }
@media (max-width: 520px) {
  .toast { padding: 13px 14px; gap: 9px; }
  /* Reicht der Platz nicht, rutscht der Knopf auf eine eigene volle Zeile —
     das liest sich besser als eine Textspalte von 90 px. */
  .toast__act { flex: 1 1 100%; text-align: center; }
}
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.toast--ok   { border-color: var(--ok);   background: var(--ok-tint); }
.toast--warn { border-color: var(--warn); background: var(--warn-tint); }
.toast--err  { border-color: var(--err);  background: var(--err-tint); }
.toast__x { margin-left: auto; color: var(--ink-soft); font-size: 17px; font-weight: 700;
  flex: 0 0 auto; min-width: 44px; min-height: 44px; display: grid; place-items: center; }
.toast__act { color: #fff; background: var(--accent-dark); font-weight: 700; white-space: nowrap;
  padding: 9px 14px; border-radius: var(--r-sm); min-height: 44px; }

/* ── Attribution ───────────────────────────────────────────────────────── */
.attrib-btn {
  /* Die Attribution MUSS erreichbar bleiben (Lizenzpflicht) — auch neben der Notch */
  position: fixed; left: max(12px, env(safe-area-inset-left)); bottom: calc(var(--seg-h) + 18px + var(--safe-b)); z-index: 600;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--bg-card); border: 2px solid var(--line-ink);
  color: var(--ink); font-size: 17px; font-weight: 700; display: grid; place-items: center;
  box-shadow: var(--shadow-sm);
}
.attrib-btn:hover { background: var(--ink); color: #fff; }

/* ── Sprachwahl ────────────────────────────────────────────────────────── */
.langgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.langbtn {
  display: flex; align-items: center; gap: 10px; min-height: var(--tap);
  padding: 12px 16px; border-radius: var(--r-md);
  background: var(--bg-card); border: 2px solid var(--line-strong);
  color: var(--ink); font-size: 16px; font-weight: 700; text-align: left;
  transition: all 140ms var(--ease);
}
.langbtn:hover { border-color: var(--ink-soft); background: var(--bg-chip); }
.langbtn.is-on { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
.langbtn__flag { font-size: 22px; line-height: 1; }

/* ── Breitere Bildschirme ──────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════════════
   BOTTOM-SHEET — die Telefonfassung der App

   Am Schreibtisch stehen Kopfzeile, Chips, Filterzeile und Liste in einer
   Spalte übereinander. Auf dem Telefon war das der teuerste Teil: fixe Zonen
   fraßen ein Drittel des Bildschirms, und die meistbenutzten Knöpfe saßen
   oben rechts — die Ecke, die man einhändig auf einem 6,7-Zoll-Gerät am
   schlechtesten erreicht.

   Deshalb hier: die Karte füllt den ganzen Bildschirm, Kopfzeile und Chips
   schweben darüber, und Liste samt Filtern liegt in einem ziehbaren Blatt am
   unteren Rand — mit drei Rastpunkten (Spalt, halb, ganz). Das Blatt ersetzt
   die Umschaltung „Karte / Liste": seine Höhe *ist* die Ansicht.

   Alles hier gilt ausschließlich unter 900 px. Die Schreibtischfassung bleibt
   unangetastet.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Am Schreibtisch gibt es keinen Griff: dort wäre er ein fokussierbarer Knopf
   ohne Wirkung (setSheet steigt über 900 px sofort aus). Der Telefonblock
   unten schaltet ihn wieder ein. */
.sheet-grip { display: none; }

@media (max-width: 899px) {

  /* Karte randlos: sie liegt unter allem und wird nie verkleinert. Dadurch
     muss Leaflet beim Ziehen des Blatts auch nichts neu berechnen. */
  .app  { position: relative; overflow: hidden; }
  .main { position: absolute; inset: 0; display: block; }
  .pane--map { position: absolute; inset: 0; }
  .main[data-view] .pane--map { display: block; }

  /* Kopfzeile und Chips schweben über der Karte */
  .hdr {
    position: absolute; top: 0; left: 0; right: 0; z-index: 700;
    padding-top: env(safe-area-inset-top, 0px);
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
    height: calc(var(--hdr-h) + env(safe-area-inset-top, 0px));
    background: rgba(255, 253, 249, .93);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
  }
  .chips__wrap {
    position: absolute; z-index: 700; left: 0; right: 0;
    top: calc(var(--hdr-h) + env(safe-area-inset-top, 0px));
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }
  .chips {
    background: transparent; border-bottom: none;
    padding-top: 8px; padding-bottom: 8px;
  }
  /* Der durchsichtige Streifen ließ die Karte sehen, schluckte aber jede
     Berührung — ein toter Querstreifen in bester Daumenlage. Ereignisse
     nehmen nur noch die Chips selbst an; wer daneben tippt oder wischt,
     trifft die Karte. Horizontal scrollen geht weiter: die Geste beginnt
     praktisch immer AUF einem Chip, und der reicht sie an den Container. */
  .chips__wrap, .chips { pointer-events: none; }
  .chip { pointer-events: auto; }
  /* Chips liegen auf der Karte — ohne eigenen Grund wären sie unlesbar */
  .chip { box-shadow: var(--shadow-sm); }
  .chips__wrap::before, .chips__wrap::after { background: none; }

  /* Die Umschaltung entfällt: die Höhe des Blatts ist die Ansicht. */
  .segmented { display: none; }

  /* Leaflets Zoomknöpfe werden in initMap() nur auf Touchgeräten weggelassen.
     Unter 900 px sollen sie in jedem Fall weg: sie säßen sonst oben links
     direkt unter der schwebenden Kopfzeile und verdeckten sie teilweise. */
  .leaflet-control-zoom { display: none !important; }

  /* ── Das Blatt ──────────────────────────────────────────────────────────
     Volle Höhe 88 dvh, verschoben per --sheet-ty. Rastpunkte setzt das
     Skript; hier steht nur, wie es aussieht und wie es sich bewegt. */
  /* z-index 1001: Leaflets eigene Bedienelemente (Zoom, Attribution) liegen
     bei 1000. Mit 800 lag die Attributionszeile ÜBER dem Blatt und schnitt
     quer durch den ersten Listeneintrag und den Knopf „Mehr laden". */
  .pane--list {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1001;
    height: 88dvh; max-height: 88dvh;
    display: flex; flex-direction: column;
    background: var(--bg-card);
    border-left: none; border-top: 1px solid var(--line);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -2px 10px rgba(60,45,30,.10), 0 -12px 40px rgba(60,45,30,.14);
    transform: translateY(var(--sheet-ty, 100%));
    touch-action: none;   /* Ziehen gehört dem Blatt, nicht dem Browser */
  }

  /* ── Filterpanel im Blatt ────────────────────────────────────────────────
     Es zieht per placeSheetParts() hierher um — zwischen Kopf und Liste.
     Vorher blieb es im normalen Fluss von .app stehen, wo .main (absolut,
     randlos) es vollständig überdeckte: der Filterknopf setzte brav
     aria-expanded, und sichtbar passierte nichts. Sämtliche Filter waren auf
     dem Telefon unerreichbar. */
  .pane--list > .filterpanel {
    /* `0 0 auto` statt `0 1 auto`: mit Schrumpffaktor 1 hat die Liste daneben
       das Panel auf 89 px zusammengedrückt — sichtbar war dann der halbe
       Schalter „Jetzt spielbar" und sonst nichts. Nachgeben soll die Liste. */
    flex: 0 0 auto;
    max-height: 46dvh; overflow-y: auto;
    -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    touch-action: pan-y;              /* das Blatt zieht hier nicht mit */
    border-bottom: 2px solid var(--line);
    border-radius: 0;
  }
  /* Ohne `min-height: 0` weigert sich ein Flex-Kind, unter seine Inhaltshöhe
     zu schrumpfen — dann wächst das Blatt über seine eigene Höhe hinaus. */
  .pane--list > .list { min-height: 0; }
  .main[data-view] .pane--list { display: flex; }
  .pane--list.is-animating { transition: transform 260ms var(--ease); }

  .sheet-grip {
    display: block; width: 100%; padding: 10px 0 6px; flex: 0 0 auto;
    min-height: 44px;               /* Griff ist auch ein Tap-Ziel */
    background: none; border: none; border-radius: 20px 20px 0 0;
  }
  .sheet-grip__bar {
    display: block; width: 44px; height: 5px; margin: 0 auto;
    border-radius: 3px; background: var(--line-strong);
  }
  .sheet-head { flex: 0 0 auto; }
  /* Kontext- und Filterzeile ziehen im Telefonlayout hier ein */
  .sheet-head .ctxline   { border-bottom: 1px solid var(--line); background: var(--accent-tint); }
  .sheet-head .filterbar { border-bottom: 1px solid var(--line); background: var(--bg-card); }

  /* Nur der Listenkörper scrollt; der Kopf bleibt greifbar */
  .list { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
          overscroll-behavior: contain; touch-action: pan-y;
          padding-bottom: calc(24px + var(--safe-b)); }

  /* ── Bedienung in die Daumenzone ─────────────────────────────────────────
     Die schwebenden Knöpfe sitzen knapp über dem Blatt und wandern mit ihm,
     solange es unten steht. --sheet-peek pflegt das Skript. */
  .fabs {
    position: fixed; right: max(14px, env(safe-area-inset-right)); z-index: 790;
    bottom: calc(var(--sheet-peek, 140px) + 14px);
    transition: bottom 200ms var(--ease);
  }
  .attrib-btn { bottom: calc(var(--sheet-peek, 140px) + 14px); z-index: 790; }
  .nudge { bottom: calc(var(--sheet-peek, 140px) + 78px); }
  /* Ohne `position: fixed` war das `bottom` hier ein toter Wert: die Leiste
     ist am Schreibtisch ein Flex-Kind, auf dem Telefon sind aber alle ihre
     Geschwister absolut gesetzt — sie rutschte als einziges Fluss-Element an
     den OBEREN Rand, unter die schwebende Kopfzeile. Die ganze Tour (GPX,
     Maps, Teilen, Umsortieren) war damit auf jedem Telefon begraben. */
  .tourbar {
    position: fixed; z-index: 790;
    left: max(10px, env(safe-area-inset-left));
    right: calc(max(14px, env(safe-area-inset-right)) + 68px);
    bottom: calc(var(--sheet-peek, 140px) + 14px);
    transition: bottom 200ms var(--ease);
    border: 2px solid var(--line-ink); border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
  }

  /* Hinweise gehören über das Blatt, nicht darauf. Am unteren Rand verankert
     lagen sie genau auf Greifleiste und Filterzeile und schluckten jede
     Berührung — der Griff war dann schlicht nicht bedienbar. */
  .toasts { bottom: calc(var(--sheet-peek, 140px) + 14px); }   /* z-index bleibt 1300 */

  /* Leaflets Attributionszeile sitzt am unteren Rand der Karte, die bis unter
     das Blatt reicht. Im Spalt wird sie darüber geschoben; ist das Blatt
     aufgezogen, liegt sie dahinter — dann tritt der ⓘ-Knopf an ihre Stelle. */
  .leaflet-bottom { bottom: var(--sheet-peek, 140px); }

  /* Attribution ist Lizenzpflicht und muss in JEDER Ansicht erreichbar sein.
     Vorher war der ⓘ-Knopf bei ganz aufgezogenem Blatt ausgeblendet und die
     Attributionszeile lag dahinter — in dieser einen Stellung gab es also
     überhaupt keinen Weg mehr zur Quellenangabe. Jetzt wandert der Knopf
     stattdessen über das Blatt. */
  .app.sheet-half .attrib-btn,
  .app.sheet-full .attrib-btn {
    bottom: calc(14px + var(--safe-b)); z-index: 1002;
  }

  /* Ist das Blatt oben, stören die Kartenknöpfe nur — die gehören zur Karte. */
  .app.sheet-full .fabs { opacity: 0; pointer-events: none; }
  .app.sheet-full .toasts { bottom: calc(24px + var(--safe-b)); }
}

/* ── Schmale Telefone ───────────────────────────────────────────────────────
   Unter 420 px konkurrieren Titel, Regionsauswahl und vier Knöpfe um eine
   Zeile. Gemessen bei 393 px: Titel 168 + Knöpfe 4×48 + Auswahl — deutlich
   mehr als die verfügbaren 392. Statt alles schrumpfen zu lassen (das war der
   Fehler), wird hier gezielt weniger verlangt. */
@media (max-width: 419px) {
  /* Längshand statt `padding: 0 6px`: die Kurzform hätte das padding-top mit
     dem safe-area-inset-top aus dem 899-px-Block wieder auf 0 gesetzt — auf
     einem iPhone 13 mini (375 px, Notch) säße der Titel in der Aussparung. */
  .hdr { gap: 2px;
         padding-left: max(6px, env(safe-area-inset-left));
         padding-right: max(6px, env(safe-area-inset-right)); }
  .hdr__title { font-size: 20px; }
  :root { --tap: 44px; }          /* immer noch über der 44-px-Grenze */
  .ctxline { padding: 5px 12px; font-size: 13.5px; }
  .filterbar { gap: 8px; padding: 2px 10px; }

  /* Der Aktualisieren-Knopf verlässt die Kopfzeile.
     Bei 393 px standen dort Titel plus fünf Knöpfe zu je 44 px; der Titel gab
     als einziger nach und stand als „Draußenka…" da — der Name der App,
     abgeschnitten, auf der verbreitetsten Telefonbreite. „Aktualisieren" ist
     der seltenste der fünf (die Daten kommen von selbst) und steht ohnehin
     zusätzlich in den Einstellungen. */
  #btn-refresh { display: none; }
}

/* Sehr niedrige Fenster (Telefon quer, oder Browserleiste sichtbar):
   die Karte darf nicht auf einen Streifen zusammenschrumpfen. */
@media (max-height: 700px) {
  :root { --hdr-h: 54px; --seg-h: 50px; }
  .chips { min-height: 50px; padding: 3px 12px; }
  .ctxline { min-height: 30px; padding: 4px 12px; }
}

@media (min-width: 900px) {
  .segmented__btn--split { display: block; }
  .drawer {
    left: auto; right: 0; top: 0; bottom: 0; width: 460px;
    max-height: none; border-radius: 0; border-left: 2px solid var(--line-strong); border-top: none;
    animation: drawerIn 240ms var(--ease);
  }
  @keyframes drawerIn { from { transform: translateX(100%); } to { transform: none; } }
  .drawer__body { padding-top: 22px; }
  .main[data-view="split"].has-drawer .pane--list { display: none; }
  .nudge { right: 92px; max-width: 460px; }
}

@media (min-width: 1200px) {
  .drawer { width: 500px; }
  .main[data-view="split"] .pane--list { flex: 0 0 440px; }
}

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

/* Hoher Kontrast im Betriebssystem: Ränder noch kräftiger */
@media (prefers-contrast: more) {
  :root { --line: #b8a88e; --line-strong: #8a7a60; --ink-mute: #4a4238; }
}

/* ── Druck ── nur die Liste, A4 hoch, schwarz auf weiß ─────────────────── */
@media print {
  @page { size: A4 portrait; margin: 14mm; }
  body { background: #fff; color: #000; font-size: 10pt; }
  .hdr, .ctxline, .chips, .filterbar, .filterpanel, .pane--map, .segmented,
  .tourbar, .fabs, .drawer, .scrim, .modal, .sheet, .progress, .toasts,
  .attrib-btn, .skip-link, .listhead, .list, .list__more, .list__empty,
  .nudge { display: none !important; }
  .app { height: auto; max-width: none; }
  .main, .pane--list { display: block !important; overflow: visible !important; flex: none !important; }
  .print-only { display: block !important; }
  .print-head { display: block !important; margin-bottom: 6mm; }
  .print-head h2 { font-family: Georgia, serif; font-size: 16pt; }
  .print-head p { font-size: 9pt; color: #444; }
  table.print-table { width: 100%; border-collapse: collapse; }
  table.print-table th, table.print-table td {
    border: 0.4pt solid #999; padding: 1.5mm 2mm; text-align: left; vertical-align: top;
    font-size: 9pt; page-break-inside: avoid;
  }
  table.print-table th { background: #eee; font-weight: 700; }
  .print-attrib { margin-top: 6mm; font-size: 8pt; color: #444; }
}
.print-head, .print-only { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   Rechtstexte (impressum.html, datenschutz.html)

   Eigenständige Seiten, kein Teil der App: sie müssen auch dann lesbar sein,
   wenn JavaScript scheitert oder der Service Worker klemmt. Deshalb nur
   Grundtypografie auf derselben Palette.
   ═══════════════════════════════════════════════════════════════════════════ */
body.doc { background: var(--bg-page); color: var(--ink); }
.doc__wrap {
  max-width: 46rem; margin: 0 auto;
  padding: 28px 20px calc(56px + var(--safe-b));
}
.doc h1 {
  font-family: var(--font-display); font-size: clamp(28px, 6vw, 40px);
  font-weight: 600; letter-spacing: -.015em; margin: 8px 0 16px;
}
.doc h2 {
  font-family: var(--font-display); font-size: clamp(19px, 3.6vw, 23px);
  font-weight: 600; margin: 32px 0 10px; color: var(--ink);
}
.doc p, .doc li { font-size: 16px; line-height: 1.62; color: var(--ink-soft); }
.doc ul { margin: 10px 0; padding-left: 22px; list-style: disc; }
.doc li { margin-bottom: 7px; }
.doc strong { color: var(--ink); font-weight: 800; }
.doc code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px;
  background: var(--bg-sunken); padding: 1px 5px; border-radius: 5px;
}
.doc__lead { font-size: 18px; color: var(--ink); border-left: 4px solid var(--accent);
  padding-left: 14px; margin: 18px 0 6px; }
.doc__note { font-size: 15px; color: var(--ink-mute); }
.doc__stand { margin-top: 34px; font-size: 15px; color: var(--ink-mute); }
.doc__back { font-size: 16px; font-weight: 700; margin: 18px 0; }
.doc__back a { text-decoration: none; }
.doc__back a:hover { text-decoration: underline; }

/* Tabellen laufen auf schmalen Telefonen sonst über den Rand */
.doc__table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 15px;
  display: block; overflow-x: auto; }
.doc__table th, .doc__table td {
  border: 1px solid var(--line); padding: 9px 11px; text-align: left; vertical-align: top;
}
.doc__table th { background: var(--bg-sunken); color: var(--ink); font-weight: 800; }
.doc__table td { color: var(--ink-soft); }

/* ── Nutzungsarten-Raster im Filter-Panel ──────────────────────────────────
   Gegenstück zur Chip-Zeile: dort bedeutet ein Tipp „nur diese", hier lassen
   sich mehrere gleichzeitig ankreuzen. Alle fünfzehn auf einen Blick, keine
   waagerechte Wischerei. */
.usegrid { display: flex; flex-direction: column; gap: 2px; }
.usegrid__item {
  display: flex; align-items: center; gap: 11px;
  min-height: 44px; padding: 4px 8px; border-radius: var(--r-sm);
  cursor: pointer; font-size: 16px; color: var(--ink);
}
.usegrid__item:hover { background: var(--bg-sunken); }
.usegrid__item input { width: 22px; height: 22px; flex: 0 0 auto; accent-color: var(--accent-dark); }
.usegrid__dot {
  width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto;
  background: var(--c, var(--ink-mute));
}
.usegrid__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usegrid__n {
  flex: 0 0 auto; font-size: 14px; font-weight: 800; color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}
/* Nutzungsarten ohne einen einzigen Ort in dieser Region bleiben sichtbar,
   treten aber zurück — sie zu verstecken wäre eine stille Lüge über den
   Datenbestand. */
.usegrid__item.is-empty { opacity: .55; }
.usegrid__actions { display: flex; gap: 8px; margin-top: 8px; }