/* ══════════════════════════════════════════════════════════════
   Camper-Guide — eine Datei, keine Abhängigkeiten.
   Mobile-App-Optik: Bottom-Tabs, Bottom-Sheet, Telefon-Rahmen.
   Das Gespräch bleibt die Oberfläche.
   ══════════════════════════════════════════════════════════════ */

:root {
  --grund: #f4f2ee;
  --flaeche: #ffffff;
  --flaeche-2: #ebe8e2;
  --rand: #ddd8cf;
  --rand-stark: #c6bfb2;
  --text: #24211c;
  --text-leise: #6e675c;
  --akzent: #2f6f4e;
  --akzent-text: #ffffff;
  --akzent-leise: #e2efe7;
  --nutzer: #2f6f4e;
  --nutzer-text: #ffffff;
  --guide: #ffffff;
  --guide-text: #24211c;
  --warn: #a2530f;
  --warn-flaeche: #fdf0e0;
  --warn-rand: #e8bd85;
  --positiv: #2f6f4e;
  --neutral: #6e675c;
  --negativ: #9c3524;
  --frei: #d9ecdf;
  --frei-rand: #6ba884;
  --belegt: #ded9d1;
  --belegt-rand: #b9b1a3;
  --restplatz: #fdeccd;
  --restplatz-rand: #dfa94c;
  --unpassend: #f7ded7;
  --unpassend-rand: #cf8877;
  --rahmen: #d6d1c6;         /* Hintergrund um den Telefon-Rahmen (Desktop) */
  --schatten: 0 1px 2px rgba(30, 26, 20, .06), 0 8px 24px rgba(30, 26, 20, .07);
  --schatten-blatt: 0 -6px 24px rgba(30, 26, 20, .16);
  --radius: 16px;
  --radius-klein: 10px;
  --tabbar-h: 3.85rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund: #16150f;
    --flaeche: #211f19;
    --flaeche-2: #2c2921;
    --rand: #363228;
    --rand-stark: #4b4638;
    --text: #ece7dc;
    --text-leise: #a29a8a;
    --akzent: #6bb98d;
    --akzent-text: #10221a;
    --akzent-leise: #23392d;
    --nutzer: #33714f;
    --nutzer-text: #f2fbf5;
    --guide: #262319;
    --guide-text: #ece7dc;
    --warn: #f0b171;
    --warn-flaeche: #38281a;
    --warn-rand: #7a5326;
    --positiv: #6bb98d;
    --neutral: #a29a8a;
    --negativ: #e28a76;
    --frei: #26402f;
    --frei-rand: #4c8062;
    --belegt: #2a2721;
    --belegt-rand: #423d33;
    --restplatz: #3d3018;
    --restplatz-rand: #8a6c33;
    --unpassend: #3c231d;
    --unpassend-rand: #834f42;
    --rahmen: #050504;
    --schatten: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
    --schatten-blatt: 0 -6px 24px rgba(0, 0, 0, .5);
  }
}

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

/* Muss vor allem anderen stehen: sonst gewinnt jedes eigene `display: flex`
   gegen die Browser-Regel für das `hidden`-Attribut. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: var(--grund);
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: none;
  min-height: 100dvh;
}

button, input, textarea, select {
  font: inherit;
  color: inherit;
}

button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .5; }

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

/* ── Die App als Ganzes ──────────────────────────────────────── */

.app {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100dvh;
  background: var(--grund);
  isolation: isolate;
}

/* Ab ~600 px: zentrierter Telefon-Rahmen, neutraler Hintergrund drumherum. */
@media (min-width: 600px) {
  body {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: var(--rahmen);
  }
  .app {
    width: 420px;
    max-width: 100%;
    height: min(920px, calc(100dvh - 3rem));
    border: 1px solid var(--rand);
    border-radius: 2.4rem;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .28), 0 6px 18px rgba(0, 0, 0, .18);
  }
}

/* ── Kopfzeile ───────────────────────────────────────────────── */

.kopf {
  position: relative;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .6rem .8rem;
  padding-top: max(.6rem, env(safe-area-inset-top));
  border-bottom: 1px solid var(--rand);
  background: var(--grund);
}

.kopf-rechts {
  display: flex;
  align-items: center;
  gap: .35rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border: 1px solid var(--rand);
  background: var(--flaeche);
  color: var(--text);
  border-radius: 999px;
  padding: .38rem .7rem;
  font-size: .875rem;
  line-height: 1.2;
  min-height: 2.35rem;
  max-width: 100%;
  transition: background .15s ease, border-color .15s ease;
}

.chip:hover { border-color: var(--rand-stark); }

.chip-profil {
  min-width: 0;
  font-weight: 550;
}

.chip-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 11rem;
}

.chip-icon { font-size: 1.05rem; }

.chip-icon-only {
  padding: .38rem;
  width: 2.5rem;
  height: 2.5rem;
  justify-content: center;
}

.chip-icon-only svg { width: 1.15rem; height: 1.15rem; }

.chip-punkte { font-variant-numeric: tabular-nums; font-weight: 600; }
.punkte-zeichen { color: var(--akzent); }

.chip-punkte.gutschrift { animation: punkte-puls .9s ease; }

@keyframes punkte-puls {
  0%   { transform: scale(1); background: var(--flaeche); }
  35%  { transform: scale(1.18); background: var(--akzent-leise); }
  100% { transform: scale(1); background: var(--flaeche); }
}

[aria-pressed="true"].chip {
  background: var(--akzent-leise);
  border-color: var(--akzent);
}

/* ── Menü ────────────────────────────────────────────────────── */

.menue {
  position: absolute;
  right: .8rem;
  top: calc(100% - .2rem);
  z-index: 30;
  display: flex;
  flex-direction: column;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein);
  box-shadow: var(--schatten);
  overflow: hidden;
  min-width: 13rem;
}

.menue button {
  border: 0;
  background: none;
  text-align: left;
  padding: .8rem .9rem;
  font-size: .95rem;
  min-height: 44px;
}

.menue button + button { border-top: 1px solid var(--rand); }
.menue button:hover { background: var(--flaeche-2); }

/* ── Bühne & Tab-Flächen ─────────────────────────────────────── */

.buehne {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}

.panel {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.panel:not(.panel-aktiv) { display: none; }

/* ── Gesprächsverlauf ────────────────────────────────────────── */

.verlauf {
  padding: 1rem .8rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  scroll-behavior: smooth;
}

.blase {
  max-width: 85%;
  padding: .65rem .9rem;
  border-radius: var(--radius);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  animation: rein .22s ease;
}

@keyframes rein {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.blase-guide {
  align-self: flex-start;
  background: var(--guide);
  color: var(--guide-text);
  border: 1px solid var(--rand);
  border-bottom-left-radius: 5px;
}

.blase-nutzer {
  align-self: flex-end;
  background: var(--nutzer);
  color: var(--nutzer-text);
  border-bottom-right-radius: 5px;
}

.blase-system {
  align-self: center;
  background: none;
  border: 0;
  color: var(--text-leise);
  font-size: .85rem;
  text-align: center;
  max-width: 100%;
}

.tippt {
  align-self: flex-start;
  display: inline-flex;
  gap: .25rem;
  padding: .8rem .9rem;
  background: var(--guide);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  border-bottom-left-radius: 5px;
}

.tippt span {
  width: .42rem;
  height: .42rem;
  border-radius: 50%;
  background: var(--text-leise);
  animation: huepf 1.1s infinite ease-in-out;
}

.tippt span:nth-child(2) { animation-delay: .15s; }
.tippt span:nth-child(3) { animation-delay: .3s; }

@keyframes huepf {
  0%, 60%, 100% { opacity: .35; transform: translateY(0); }
  30%           { opacity: 1;  transform: translateY(-3px); }
}

/* ── Karten im Gespräch ──────────────────────────────────────── */

.karte {
  align-self: stretch;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: .9rem;
  box-shadow: var(--schatten);
  animation: rein .25s ease;
}

.karte + .karte { margin-top: -.2rem; }

/* Empfehlungskarte im App-Listen-Stil: dominante Bildfläche, dann Inhalt. */
.karte-platz { padding: 0; overflow: hidden; }

.karte-bild {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  display: flex;
  align-items: flex-end;
  padding: .7rem .8rem;
  color: #fff;
  border: 0;
  text-align: left;
  cursor: pointer;
}

.karte-bild::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.05) 40%, rgba(0,0,0,.42) 100%);
}

.karte-bild-glyph {
  position: absolute;
  top: .5rem;
  right: .7rem;
  font-size: 1.5rem;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.4));
}

.karte-bild-titel {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 1.08rem;
  font-weight: 650;
  line-height: 1.25;
  text-shadow: 0 1px 3px rgba(0,0,0,.45);
}

.karte-bild-nummer {
  position: absolute;
  top: .55rem;
  left: .7rem;
  z-index: 1;
  font-size: .72rem;
  font-weight: 600;
  background: rgba(0,0,0,.42);
  color: #fff;
  border-radius: 999px;
  padding: .12rem .55rem;
  backdrop-filter: blur(2px);
}

.karte-koerper { padding: .8rem; }

.karte-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .6rem;
}

.karte-titel {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 650;
  line-height: 1.3;
}

.karte-ort {
  margin: .1rem 0 .6rem;
  color: var(--text-leise);
  font-size: .875rem;
}

.karte-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .7rem;
  margin: 0 0 .1rem;
  font-size: .9rem;
  color: var(--text-leise);
}

.karte-meta .preis { color: var(--text); font-weight: 600; }

.karte-nummer {
  flex: 0 0 auto;
  font-size: .75rem;
  color: var(--text-leise);
  border: 1px solid var(--rand);
  border-radius: 999px;
  padding: .1rem .5rem;
}

.karte-begruendung {
  margin: .5rem 0 0;
  font-size: .95rem;
}

.zeile-paare {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .8rem;
  margin: .55rem 0 0;
  font-size: .875rem;
}

.paar {
  display: flex;
  flex-direction: column;
  min-width: 7rem;
}

.paar dt { color: var(--text-leise); font-size: .78rem; }
.paar dd { margin: 0; font-weight: 560; }

.marke {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .78rem;
  border-radius: 999px;
  padding: .15rem .55rem;
  border: 1px solid var(--rand);
  background: var(--flaeche-2);
  color: var(--text-leise);
}

.marke-frei { background: var(--frei); border-color: var(--frei-rand); color: var(--text); }
.marke-restplatz { background: var(--restplatz); border-color: var(--restplatz-rand); color: var(--text); }
.marke-belegt { background: var(--belegt); border-color: var(--belegt-rand); color: var(--text-leise); }

/* Ausstattung als Icon-Chips statt Textwüste. */
.chips {
  list-style: none;
  margin: .6rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.chips li {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .78rem;
  color: var(--text);
  background: var(--flaeche-2);
  border: 1px solid var(--rand);
  border-radius: 999px;
  padding: .2rem .55rem;
}

.chips li svg { width: .95rem; height: .95rem; }
.chips .chip-emoji { font-size: .9rem; line-height: 1; }

.highlights {
  list-style: none;
  margin: .6rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.highlights li {
  font-size: .8rem;
  background: var(--akzent-leise);
  color: var(--text);
  border-radius: 999px;
  padding: .18rem .6rem;
}

/* Teilscores — aufklappbar, damit das Ranking nachvollziehbar bleibt */

.warum {
  margin-top: .7rem;
  border-top: 1px solid var(--rand);
  padding-top: .55rem;
}

.warum > summary {
  cursor: pointer;
  font-size: .875rem;
  color: var(--akzent);
  font-weight: 560;
  list-style: none;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.warum > summary::-webkit-details-marker { display: none; }
.warum > summary::before { content: "▸ "; margin-right: .3rem; }
.warum[open] > summary::before { content: "▾ "; }

.teil { margin-top: .55rem; }

.teil-kopf {
  display: flex;
  justify-content: space-between;
  gap: .6rem;
  font-size: .82rem;
}

.teil-name { font-weight: 560; }
.teil-wert { color: var(--text-leise); font-variant-numeric: tabular-nums; }

.balken {
  height: 5px;
  border-radius: 3px;
  background: var(--flaeche-2);
  overflow: hidden;
  margin: .22rem 0;
}

.balken > i {
  display: block;
  height: 100%;
  background: var(--akzent);
  border-radius: 3px;
}

.teil-grund {
  margin: 0;
  font-size: .8rem;
  color: var(--text-leise);
}

/* ── Warnhinweise: die proaktive Ehrlichkeit des Guides ──────── */

.warnung {
  align-self: stretch;
  background: var(--warn-flaeche);
  border: 1px solid var(--warn-rand);
  border-left: 5px solid var(--warn);
  border-radius: var(--radius);
  padding: .8rem .9rem;
  animation: rein .25s ease;
}

.warnung-kopf {
  display: flex;
  align-items: center;
  gap: .45rem;
  color: var(--warn);
  font-weight: 650;
  font-size: .82rem;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.warnung-text {
  margin: .35rem 0 0;
  font-size: .95rem;
}

/* ── Knöpfe ──────────────────────────────────────────────────── */

.knopf {
  border: 1px solid var(--rand-stark);
  background: var(--flaeche);
  border-radius: var(--radius-klein);
  padding: .6rem .9rem;
  min-height: 44px;
  font-size: .9rem;
  font-weight: 550;
  transition: background .15s ease, transform .1s ease;
}

.knopf:hover { background: var(--flaeche-2); }
.knopf:active { transform: translateY(1px); }

.knopf-primaer {
  background: var(--akzent);
  border-color: var(--akzent);
  color: var(--akzent-text);
}

.knopf-primaer:hover { filter: brightness(1.06); background: var(--akzent); }

.knopf-warnung {
  margin-top: .65rem;
  background: var(--warn);
  border-color: var(--warn);
  color: #fff;
}

@media (prefers-color-scheme: dark) {
  .knopf-warnung { color: #221607; }
}

.knopf-leise {
  border-color: transparent;
  background: none;
  color: var(--text-leise);
}

.knopf-leise:hover { background: var(--flaeche-2); }

.knopf-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: .8rem;
}

.knopf-rund {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 50%;
  border: 1px solid var(--rand);
  background: var(--flaeche);
  flex: 0 0 auto;
  position: relative;
}

.knopf-rund svg { width: 1.25rem; height: 1.25rem; }

.knopf-senden {
  background: var(--akzent);
  border-color: var(--akzent);
  color: var(--akzent-text);
}

/* ── Eingabeleiste ───────────────────────────────────────────── */

.unten {
  position: relative;
  z-index: 4;
  border-top: 1px solid var(--rand);
  background: var(--grund);
  padding: .5rem .8rem;
}

.vorschlaege {
  display: flex;
  gap: .4rem;
  overflow-x: auto;
  padding-bottom: .45rem;
  scrollbar-width: none;
}

.vorschlaege::-webkit-scrollbar { display: none; }
.vorschlaege:empty { display: none; }

.vorschlag {
  flex: 0 0 auto;
  border: 1px dashed var(--rand-stark);
  background: var(--flaeche);
  color: var(--text-leise);
  border-radius: 999px;
  padding: .4rem .8rem;
  min-height: 40px;
  font-size: .82rem;
  white-space: nowrap;
}

.vorschlag:hover { color: var(--text); border-style: solid; }

.eingabe {
  display: flex;
  align-items: flex-end;
  gap: .45rem;
}

.feld {
  flex: 1 1 auto;
  resize: none;
  max-height: 8rem;
  min-height: 2.9rem;
  border: 1px solid var(--rand);
  background: var(--flaeche);
  border-radius: 20px;
  padding: .7rem .9rem;
  line-height: 1.4;
}

.feld:focus { border-color: var(--akzent); outline: none; }

/* Mikrofon — der grosse Knopf. Aufnahme sichtbar animiert. */

.mikro {
  width: 3.1rem;
  height: 3.1rem;
  background: var(--flaeche);
  border-color: var(--rand-stark);
}

.mikro-gross { width: 3.4rem; height: 3.4rem; }

.mikro .mikro-ring {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid var(--akzent);
  opacity: 0;
  pointer-events: none;
}

.mikro.hoert {
  background: var(--akzent);
  border-color: var(--akzent);
  color: var(--akzent-text);
}

.mikro.hoert .mikro-ring { animation: welle 1.4s infinite ease-out; }

@keyframes welle {
  0%   { opacity: .7; transform: scale(1); }
  100% { opacity: 0;  transform: scale(1.55); }
}

.voice-hinweis {
  margin: 0 0 .45rem;
  font-size: .82rem;
  color: var(--text-leise);
  background: var(--flaeche-2);
  border-radius: var(--radius-klein);
  padding: .45rem .65rem;
}

/* ── Bottom-Tab-Bar ──────────────────────────────────────────── */

.tabbar {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--rand);
  background: var(--flaeche);
  padding-bottom: env(safe-area-inset-bottom);
}

.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .12rem;
  border: 0;
  background: none;
  color: var(--text-leise);
  min-height: var(--tabbar-h);
  padding: .35rem .2rem;
  font-size: .68rem;
  font-weight: 560;
  letter-spacing: .01em;
  transition: color .15s ease;
}

.tab svg { width: 1.5rem; height: 1.5rem; }

.tab-aktiv { color: var(--akzent); }
.tab-aktiv svg { stroke-width: 2.1; }

.tab:active { background: var(--flaeche-2); }

/* ── Entdecken-Tab: Segment-Control + Liste/Karte ────────────── */

.entdecken { padding: .9rem .8rem 1.4rem; }

.segment {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .2rem;
  background: var(--flaeche-2);
  border: 1px solid var(--rand);
  border-radius: 999px;
  padding: .22rem;
  margin: 0 0 1rem;
}

.segment button {
  border: 0;
  background: none;
  border-radius: 999px;
  padding: .5rem .6rem;
  min-height: 40px;
  font-size: .88rem;
  font-weight: 560;
  color: var(--text-leise);
}

.segment button[aria-pressed="true"] {
  background: var(--flaeche);
  color: var(--text);
  box-shadow: var(--schatten);
}

.entdecken-liste { display: flex; flex-direction: column; gap: .8rem; }

.entdecken-leer {
  text-align: center;
  color: var(--text-leise);
  padding: 2.5rem 1rem;
}

.entdecken-leer .emoji { font-size: 2rem; display: block; margin-bottom: .5rem; }

/* Karten-Platzhalter mit Pins — kein echtes Kartenmaterial (Out of Scope). */
.mini-karte {
  position: relative;
  aspect-ratio: 3 / 4;
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--rand);
  overflow: hidden;
  background:
    radial-gradient(circle at 22% 18%, rgba(107,168,132,.22), transparent 42%),
    radial-gradient(circle at 80% 72%, rgba(107,168,132,.18), transparent 40%),
    repeating-linear-gradient(0deg, var(--flaeche-2), var(--flaeche-2) 1px, transparent 1px, transparent 34px),
    repeating-linear-gradient(90deg, var(--flaeche-2), var(--flaeche-2) 1px, transparent 1px, transparent 34px),
    var(--flaeche);
}

.mini-karte-hinweis {
  position: absolute;
  left: .7rem;
  bottom: .6rem;
  font-size: .72rem;
  color: var(--text-leise);
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: 999px;
  padding: .18rem .55rem;
}

.pin {
  position: absolute;
  transform: translate(-50%, -100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 0;
  background: none;
  color: var(--akzent);
  max-width: 8rem;
}

.pin-nadel {
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50% 50% 50% 0;
  background: var(--akzent);
  transform: rotate(-45deg);
  border: 2px solid var(--flaeche);
  box-shadow: var(--schatten);
  display: grid;
  place-items: center;
}

.pin-nadel b {
  transform: rotate(45deg);
  color: var(--akzent-text);
  font-size: .8rem;
  font-weight: 700;
}

.pin-name {
  margin-top: .2rem;
  font-size: .68rem;
  font-weight: 600;
  color: var(--text);
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: 999px;
  padding: .1rem .4rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 8rem;
}

/* ── Bottom-Sheet ────────────────────────────────────────────── */

.blatt-huelle {
  position: absolute;
  inset: 0;
  z-index: 40;
  background: rgba(20, 18, 14, .45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: rein .18s ease;
}

.blatt {
  position: relative;
  width: 100%;
  height: 62%;                 /* Startzustand: Halb. Wird per JS gesetzt. */
  background: var(--grund);
  border: 1px solid var(--rand);
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
  box-shadow: var(--schatten-blatt);
  display: flex;
  flex-direction: column;
  transition: height .28s cubic-bezier(.22, .61, .36, 1);
  will-change: height;
}

.blatt.zieht { transition: none; }

@media (min-width: 600px) {
  /* Im Telefon-Rahmen sitzt das Sheet unten in der App, mit runden Ecken. */
  .blatt { border-radius: 20px 20px 0 0; }
}

.blatt-griff {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1.6rem;
  border: 0;
  background: none;
  touch-action: none;
  cursor: grab;
}

.blatt-griff-strich {
  width: 2.4rem;
  height: .3rem;
  border-radius: 999px;
  background: var(--rand-stark);
}

.blatt-kopf {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  padding: 0 .9rem .7rem;
  border-bottom: 1px solid var(--rand);
}

.blatt-kopf h2 { margin: 0; font-size: 1.1rem; }

.blatt-inhalt {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: .9rem .9rem 1.4rem;
  padding-bottom: max(1.4rem, calc(env(safe-area-inset-bottom) + .6rem));
}

.sektion[hidden] { display: none; }

.sektion h3 {
  margin: 1.2rem 0 .5rem;
  font-size: .8rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-leise);
}

.sektion h3:first-child { margin-top: 0; }

.hinweis-text {
  color: var(--text-leise);
  font-size: .9rem;
}

.website-zeile {
  margin: .2rem 0 .4rem;
  font-size: .85rem;
}

.website-zeile a { color: var(--akzent); text-decoration: none; overflow-wrap: anywhere; }
.website-zeile a:hover { text-decoration: underline; }

.attribution {
  margin: 1rem 0 0;
  font-size: .72rem;
  color: var(--text-leise);
}

/* ── Formular (Profil-Korrektur) ─────────────────────────────── */

.formular {
  display: grid;
  grid-template-columns: 1fr;
  gap: .7rem;
}

@media (min-width: 25rem) {
  .formular { grid-template-columns: 1fr 1fr; }
  .formular .breit { grid-column: 1 / -1; }
}

.feldgruppe { display: flex; flex-direction: column; gap: .25rem; }

.feldgruppe > label {
  font-size: .78rem;
  color: var(--text-leise);
}

.feldgruppe input[type="text"],
.feldgruppe input[type="number"],
.feldgruppe input[type="date"],
.feldgruppe select,
.feldgruppe textarea {
  border: 1px solid var(--rand);
  background: var(--flaeche);
  border-radius: var(--radius-klein);
  padding: .6rem;
  min-height: 44px;
  width: 100%;
}

.schalter-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.schalter {
  border: 1px solid var(--rand);
  background: var(--flaeche);
  border-radius: 999px;
  padding: .45rem .8rem;
  min-height: 40px;
  font-size: .84rem;
  color: var(--text-leise);
}

.schalter[aria-pressed="true"] {
  background: var(--akzent-leise);
  border-color: var(--akzent);
  color: var(--text);
  font-weight: 560;
}

.ja-nein {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
}

/* ── Platzplan ───────────────────────────────────────────────── */

.plan-rahmen {
  overflow-x: auto;
  padding: .3rem 0 .6rem;
}

.plan {
  display: grid;
  grid-template-columns: repeat(var(--spalten, 6), minmax(3.1rem, 1fr));
  grid-auto-rows: 3.1rem;
  gap: .3rem;
  min-width: min(100%, 20rem);
}

.platz {
  border-radius: 8px;
  border: 1.5px solid var(--belegt-rand);
  background: var(--belegt);
  color: var(--text-leise);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .1rem;
  font-size: .78rem;
  line-height: 1.1;
  padding: .2rem;
  text-align: center;
  overflow: hidden;
}

.platz-nummer { font-weight: 650; }
.platz-zusatz { font-size: .62rem; opacity: .85; }

.platz-frei {
  background: var(--frei);
  border-color: var(--frei-rand);
  color: var(--text);
}

.platz-restplatz {
  background: var(--restplatz);
  border-color: var(--restplatz-rand);
  color: var(--text);
  border-style: dashed;
}

.platz-belegt {
  background: var(--belegt);
  border-color: var(--belegt-rand);
  color: var(--text-leise);
  background-image: repeating-linear-gradient(
    45deg, transparent, transparent 5px,
    rgba(120, 112, 98, .22) 5px, rgba(120, 112, 98, .22) 10px);
}

.platz-gesperrt {
  background: var(--belegt);
  border-color: var(--belegt-rand);
  color: var(--text-leise);
  opacity: .65;
}

.platz-unpassend {
  background: var(--unpassend);
  border-color: var(--unpassend-rand);
  border-style: dotted;
  color: var(--text-leise);
}

button.platz:hover:not(:disabled) { filter: brightness(1.04); }

.platz.gewaehlt {
  outline: 3px solid var(--akzent);
  outline-offset: 1px;
  font-weight: 700;
}

.legende {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .9rem;
  margin: .5rem 0 .6rem;
  padding: 0;
  list-style: none;
  font-size: .78rem;
  color: var(--text-leise);
}

.legende li { display: flex; align-items: center; gap: .35rem; }

.legende i {
  width: .9rem;
  height: .9rem;
  border-radius: 4px;
  border: 1.5px solid var(--belegt-rand);
  background: var(--belegt);
  display: inline-block;
}

.legende .l-frei { background: var(--frei); border-color: var(--frei-rand); }
.legende .l-restplatz { background: var(--restplatz); border-color: var(--restplatz-rand); border-style: dashed; }
.legende .l-unpassend { background: var(--unpassend); border-color: var(--unpassend-rand); border-style: dotted; }

.plan-fuss {
  position: sticky;
  bottom: 0;
  background: var(--grund);
  border-top: 1px solid var(--rand);
  padding: .7rem 0 0;
  margin-top: .8rem;
}

.plan-auswahl {
  font-size: .9rem;
  margin: 0 0 .55rem;
}

/* ── Buchung & Check-in ──────────────────────────────────────── */

.code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.6rem;
  letter-spacing: .18em;
  font-weight: 700;
  background: var(--akzent-leise);
  border: 1px dashed var(--akzent);
  border-radius: var(--radius-klein);
  padding: .55rem .8rem;
  display: inline-block;
  margin: .3rem 0;
}

.dick { font-weight: 650; }

.liste { display: flex; flex-direction: column; gap: .7rem; }

/* ── Bewertung ───────────────────────────────────────────────── */

.aspekt-block {
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein);
  padding: .7rem .8rem;
  background: var(--flaeche);
}

.aspekt-block + .aspekt-block { margin-top: .55rem; }

.aspekt-titel {
  margin: 0 0 .45rem;
  font-size: .82rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--text-leise);
}

.beobachtung { margin: 0 0 .7rem; }
.beobachtung:last-child { margin-bottom: 0; }

.ton {
  display: inline-block;
  font-size: .72rem;
  font-weight: 650;
  border-radius: 999px;
  padding: .1rem .5rem;
  margin-right: .4rem;
  vertical-align: 1px;
  border: 1px solid currentColor;
}

.ton-positiv { color: var(--positiv); }
.ton-neutral { color: var(--neutral); }
.ton-negativ { color: var(--negativ); }

.zitat {
  margin: .3rem 0 0;
  padding-left: .7rem;
  border-left: 3px solid var(--rand-stark);
  color: var(--text-leise);
  font-style: italic;
  font-size: .9rem;
}

.persona-zeile {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin: 0 0 .6rem;
}

.gutschrift-karte {
  text-align: center;
  border-color: var(--akzent);
  background: var(--akzent-leise);
}

.gutschrift-zahl {
  font-size: 2rem;
  font-weight: 750;
  color: var(--akzent);
  display: block;
  animation: gutschrift .7s ease;
}

@keyframes gutschrift {
  0%   { opacity: 0; transform: translateY(10px) scale(.85); }
  60%  { opacity: 1; transform: translateY(0) scale(1.1); }
  100% { transform: scale(1); }
}

/* ── Einstiegs-Overlay ───────────────────────────────────────── */

.einstieg {
  position: absolute;
  inset: 0;
  z-index: 60;
  background: var(--grund);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
  padding-top: max(1.2rem, env(safe-area-inset-top));
  overflow-y: auto;
}

.einstieg-karte {
  width: 100%;
  max-width: 32rem;
}

.einstieg-gruss {
  margin: 0;
  color: var(--akzent);
  font-weight: 650;
}

.einstieg-titel {
  margin: .2rem 0 .6rem;
  font-size: 1.6rem;
  line-height: 1.2;
  letter-spacing: -.01em;
}

.einstieg-hilfe {
  margin: 0 0 1.1rem;
  color: var(--text-leise);
  font-size: .95rem;
}

.einstieg-eingabe {
  display: flex;
  align-items: flex-end;
  gap: .6rem;
}

.einstieg-eingabe textarea {
  flex: 1 1 auto;
  resize: none;
  border: 1px solid var(--rand);
  background: var(--flaeche);
  border-radius: var(--radius);
  padding: .7rem .9rem;
  line-height: 1.45;
}

.einstieg-eingabe textarea:focus { border-color: var(--akzent); outline: none; }

.einstieg-status {
  margin: .6rem 0 0;
  font-size: .85rem;
  color: var(--text-leise);
}

.einstieg-knoepfe {
  display: flex;
  gap: .5rem;
  margin-top: 1rem;
}

/* ── Toast ───────────────────────────────────────────────────── */

.toast {
  position: absolute;
  left: 50%;
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 4.2rem);
  transform: translateX(-50%);
  z-index: 80;
  max-width: min(28rem, 88%);
  background: var(--flaeche);
  color: var(--text);
  border: 1px solid var(--rand-stark);
  border-radius: var(--radius-klein);
  box-shadow: var(--schatten);
  padding: .6rem .85rem;
  font-size: .88rem;
  animation: rein .18s ease;
}

/* ── Bewegung reduzieren ─────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .mikro.hoert .mikro-ring { animation: none; opacity: .7; }
  .verlauf { scroll-behavior: auto; }
  .blase, .karte, .warnung { animation: none; }
  .blatt { transition: none; }
}

/* ══════════════════════════════════════════════════════════════
   Iteration 3 — Karte, Bottom-Sheet-Fuss, Treffen, Postfach
   ══════════════════════════════════════════════════════════════ */

/* ── Selbst gerenderte SVG-Karte (keine Kacheln, keine Fremdlib) ─ */

.karte-behaelter {
  position: relative;
  margin-top: .7rem;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--flaeche-2);
  overflow: hidden;
}

.karte-flaeche {
  position: relative;
  width: 100%;
  height: clamp(17rem, 56vh, 32rem);
  touch-action: none;            /* Ziehen und Kneifen gehören der Karte */
  cursor: grab;
  background:
    radial-gradient(120% 90% at 50% 0%, var(--flaeche) 0%, var(--flaeche-2) 70%, var(--belegt) 100%);
}

.karte-flaeche:active { cursor: grabbing; }

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

.karte-netz line {
  stroke: var(--rand-stark);
  stroke-width: 1;
  opacity: .35;
}

.karte-treffer { fill: transparent; }

.karte-punkt { cursor: pointer; }
.karte-punkt-kreis { stroke: var(--flaeche); stroke-width: 2; }
.karte-punkt-kern { fill: var(--flaeche); }

.karte-punkt-frei .karte-punkt-kreis { fill: var(--frei-rand); }
.karte-punkt-belegt .karte-punkt-kreis { fill: var(--belegt-rand); }
.karte-punkt-offen .karte-punkt-kreis { fill: var(--akzent); }

.karte-punkt:hover .karte-punkt-kreis,
.karte-punkt:focus-visible .karte-punkt-kreis { stroke: var(--text); }

.karte-cluster { cursor: pointer; }
.karte-cluster-hof { fill: var(--akzent); opacity: .16; }
.karte-cluster-kreis { fill: var(--akzent); stroke: var(--flaeche); stroke-width: 2; }
.karte-cluster-zahl {
  fill: var(--akzent-text);
  font: 600 .8rem/1 system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.karte-zoom {
  position: absolute;
  top: .6rem;
  right: .6rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.karte-zoom-knopf {
  width: 2.75rem;                /* 44 px Touch-Ziel */
  height: 2.75rem;
  border: 1px solid var(--rand-stark);
  border-radius: var(--radius-klein);
  background: var(--flaeche);
  color: var(--text);
  font-size: 1.25rem;
  line-height: 1;
  box-shadow: var(--schatten);
}

.karte-zoom-knopf:hover { background: var(--flaeche-2); }

.karte-status {
  position: absolute;
  left: .6rem;
  right: 3.9rem;
  top: .6rem;
  margin: 0;
  padding: .45rem .6rem;
  border-radius: var(--radius-klein);
  background: var(--flaeche);
  border: 1px solid var(--rand);
  box-shadow: var(--schatten);
  font-size: .8rem;
  color: var(--text-leise);
}

.karte-legende {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .8rem;
  list-style: none;
  margin: 0;
  padding: .5rem .7rem 0;
  font-size: .76rem;
  color: var(--text-leise);
}

.karte-legende li { display: flex; align-items: center; gap: .3rem; }

.karte-legende i {
  width: .7rem;
  height: .7rem;
  border-radius: 50%;
  border: 1px solid var(--rand-stark);
}

.karte-legende .l-frei { background: var(--frei-rand); }
.karte-legende .l-belegt { background: var(--belegt-rand); }
.karte-legende .l-offen { background: var(--akzent); }
.karte-legende .l-cluster { background: var(--akzent); opacity: .45; }

.karte-attribution { padding: .35rem .7rem .6rem; margin: 0; }

/* ── Bottom-Sheet: klebender Fuss, nur in der vollen Höhe ────── */

.blatt-fuss {
  margin-top: .9rem;
  padding-top: .6rem;
  background: var(--flaeche);
}

.blatt-voll .blatt-fuss {
  position: sticky;
  bottom: 0;
  z-index: 2;
  border-top: 1px solid var(--rand);
  padding-bottom: max(.4rem, env(safe-area-inset-bottom));
}

/* Nur Knöpfe — `.feldgruppe.breit` gehört weiter dem Formularraster oben. */
.knopf.breit { width: 100%; }
.knopf-reihe .knopf.breit { flex: 1 1 100%; }

.ort-peek { margin-bottom: .6rem; }
.ort-rumpf > * + * { margin-top: .7rem; }

/* ── Bottom-Tab: Ungelesen-Punkt ─────────────────────────────── */

.tab-zeichen { position: relative; display: inline-flex; }

.tab-punkt {
  position: absolute;
  top: -.25rem;
  right: -.45rem;
  min-width: 1.05rem;
  height: 1.05rem;
  padding: 0 .25rem;
  border-radius: .6rem;
  background: var(--negativ);
  color: #fff;
  font-size: .66rem;
  font-weight: 700;
  line-height: 1.05rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ── Postfach ────────────────────────────────────────────────── */

.postfach-knopf {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  min-height: 2.75rem;
  margin-bottom: .8rem;
  padding: .6rem .8rem;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--flaeche);
  color: var(--text);
  font-weight: 560;
  text-align: left;
}

.postfach-knopf:hover { background: var(--flaeche-2); }
.postfach-zeichen { font-size: 1.05rem; }

.postfach-knopf .punkt {
  margin-left: auto;
  min-width: 1.35rem;
  padding: .05rem .35rem;
  border-radius: .7rem;
  background: var(--negativ);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.nachricht-neu { border-left: 3px solid var(--akzent); }
.nachricht-zeichen { margin-right: .35rem; }

/* ── Treffen ─────────────────────────────────────────────────── */

.aufenthalt-block {
  margin: .2rem 0 .4rem;
  padding: .8rem;
  border: 1px dashed var(--rand-stark);
  border-radius: var(--radius);
  background: var(--flaeche-2);
}

.aufenthalt-block > h3 { margin: .9rem 0 .5rem; font-size: .95rem; }

.kontakt-karte { background: var(--flaeche); }

.kontakt-feld { border-top: 1px solid var(--rand); padding-top: .7rem; }

.treffen-zeit {
  margin: .1rem 0 .4rem;
  font-weight: 600;
  color: var(--text);
}

.zaehler {
  margin: .3rem 0;
  display: inline-block;
  padding: .18rem .5rem;
  border-radius: 999px;
  border: 1px solid var(--akzent);
  background: var(--akzent-leise);
  color: var(--text);
  font-size: .8rem;
  font-variant-numeric: tabular-nums;
}

.skript {
  margin: .6rem 0 .2rem;
  padding: .6rem .7rem;
  border-radius: var(--radius-klein);
  background: var(--flaeche-2);
  border: 1px solid var(--rand);
}

.skript-titel { margin: 0 0 .35rem; font-weight: 650; font-size: .85rem; }

.skript-liste {
  margin: 0;
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  font-size: .88rem;
}

.skript-zeit {
  display: inline-block;
  min-width: 3.4rem;
  color: var(--text-leise);
  font-variant-numeric: tabular-nums;
}

.eisbrecher {
  margin: .5rem 0 0;
  font-size: .85rem;
  color: var(--text-leise);
  font-style: italic;
}

.frist {
  margin: .4rem 0 0;
  font-size: .82rem;
  color: var(--warn);
  background: var(--warn-flaeche);
  border: 1px solid var(--warn-rand);
  border-radius: var(--radius-klein);
  padding: .35rem .5rem;
}

.zusage-fluss {
  margin-top: .7rem;
  padding-top: .7rem;
  border-top: 1px solid var(--rand);
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.zusage-fluss input[type="time"],
.zusage-fluss input[type="text"] {
  min-height: 2.75rem;
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein);
  background: var(--flaeche);
  padding: .5rem .65rem;
  width: 100%;
}

.knopf-melden { margin-left: auto; }

.teilen-karte { border-color: var(--akzent); }

/* Bestätigungskarte beim Anlegen: drei antippbare Zeilen statt Formular. */

.zeilen {
  display: flex;
  flex-direction: column;
  margin: .6rem 0 .4rem;
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein);
  overflow: hidden;
}

.zeile-knopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  min-height: 2.75rem;
  padding: .55rem .7rem;
  border: 0;
  background: var(--flaeche);
  color: var(--text);
  text-align: left;
}

.zeile-knopf + .zeile-knopf { border-top: 1px solid var(--rand); }
.zeile-knopf:hover { background: var(--flaeche-2); }
.zeile-label { color: var(--text-leise); font-size: .85rem; }
.zeile-wert { font-weight: 600; }

.hinweis-text.ruhig {
  margin-top: 1rem;
  padding-top: .8rem;
  border-top: 1px solid var(--rand);
}

/* Schalter bleiben auch als Interessen-Chips ein 44-px-Ziel. */
.schalter { min-height: 2.75rem; }

@media (prefers-reduced-motion: reduce) {
  .karte-flaeche { cursor: default; }
}

/* ── „Neue Version verfügbar" ─────────────────────────────────
   Der Hinweis nach einem Deploy. Sichtbar genug, dass ein Tester
   ihn nicht übersieht — leise genug, dass er das Gespräch nicht
   unterbricht. Er sitzt über der Tab-Leiste, nicht darüber gelegt. */

.neue-version {
  position: absolute;
  left: 50%;
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + .6rem);
  transform: translateX(-50%);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: .5rem;
  max-width: min(30rem, 92%);
  padding: .45rem .5rem .45rem .85rem;
  background: var(--flaeche);
  color: var(--text);
  border: 1px solid var(--rand-stark);
  border-radius: 999px;
  box-shadow: var(--schatten);
  font-size: .86rem;
  animation: rein .18s ease;
}

.neue-version-text { white-space: nowrap; }

.neue-version-knopf {
  min-height: 2.75rem;
  padding: 0 .95rem;
  border: 0;
  border-radius: 999px;
  background: var(--akzent);
  color: var(--akzent-text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.neue-version-knopf:hover { filter: brightness(1.06); }

.neue-version-zu {
  min-width: 2.75rem;
  min-height: 2.75rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-leise);
  font: inherit;
  cursor: pointer;
}

.neue-version-zu:hover { background: var(--flaeche-2); }

@media (max-width: 22rem) {
  .neue-version-text { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .neue-version { animation: none; }
}