/* ============================================================
   Unser Camper — Design „80er-Camper-Lackierung"
   Elfenbein-Karosserie, Orange/Braun-Zierstreifen (Signatur),
   Fenster-runde Karten, Bordbuch-Mono für Daten, Opa-taugliche
   Schriftgrößen. Keine externen Fonts, keine Abhängigkeiten.
   ============================================================ */

:root {
  /* Karosserie & Kabine */
  --papier: #FAF4E8;
  --papier-tief: #F0E6D2;
  --karte: #FFFDF7;
  --kabine: #33291D;
  --kabine-60: #6E6152;
  /* Zierstreifen (Signatur) */
  --streifen: #D95F1E;
  --streifen-dunkel: #A64311;
  --braun: #8A5A2B;
  /* Funktionsfarben */
  --tanne: #40634C;
  --senf: #C98F2D;
  --senf-dunkel: #8F6212; /* Text-tauglich: 5,3:1 auf Kartenweiß (Status-Pille) */
  --rot: #A93B26;
  --linie: #E3D5BA;          /* dekorative Ränder (Karten, Listen) */
  --linie-stark: #9C8557;    /* Formularfeld-Ränder — 3,5:1 auf Weiß (WCAG 1.4.11) */
  /* Haushalts-Farben (Kalender) — alle ≥ 4,5:1 mit weißem Chip-Text */
  --haushalt-opa: #8A5A2B;
  --haushalt-nina: #40634C;
  --haushalt-max: #9C5A22;
  /* Schrift */
  --schrift-display: Georgia, "Times New Roman", serif;
  --schrift-text: "Segoe UI", system-ui, -apple-system, sans-serif;
  --schrift-daten: Consolas, "Courier New", monospace;
  /* Maße */
  --radius: 16px;
  --nav-hoehe: 64px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--kabine);
  font-family: var(--schrift-text);
  font-size: 17px;
  line-height: 1.55;
  min-height: 100dvh;
}

/* ---------- Kopf mit Zierstreifen (Signatur-Element) ---------- */

.kopf {
  background: var(--papier);
  padding: 14px 18px 0;
  max-width: 720px;
  margin: 0 auto;
}
.kopf-zeile {
  display: flex;
  align-items: center;
  gap: 12px;
}
.kopf-logo { width: 52px; height: 36px; flex: none; }
.kopf-titel {
  font-family: var(--schrift-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.02em;
  margin: 0;
}
.kopf-titel small {
  display: block;
  font-family: var(--schrift-text);
  font-weight: 400;
  font-size: 12px;
  color: var(--kabine-60);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.kopf-aktion {
  margin-left: auto;
  font-size: 15px;
  min-height: 44px;   /* Opa-taugliches Touch-Ziel */
  min-width: 44px;
  color: var(--kabine-60);
  background: none;
  border: none;
  font-family: inherit;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 8px;
}
.kopf-aktion:hover { color: var(--kabine); background: var(--papier-tief); }

/* Der Zierstreifen: zwei Bänder wie am Camper-Heck, mit Decal-Schräge */
.zierstreifen {
  height: 18px;
  margin-top: 10px;
  background:
    linear-gradient(to bottom,
      var(--streifen) 0 10px,
      var(--papier) 10px 13px,
      var(--braun) 13px 18px);
  clip-path: polygon(0 0, 76% 0, 82% 100%, 100% 100%, 100% 100%, 0 100%);
}

/* ---------- Inhalt ---------- */

main {
  max-width: 720px;
  margin: 0 auto;
  padding: 18px 18px calc(var(--nav-hoehe) + 28px);
}

.karte {
  background: var(--karte);
  border: 2px solid var(--linie);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 16px;
}
.karte h2 {
  font-family: var(--schrift-display);
  font-size: 20px;
  margin: 0 0 10px;
}
.karte p { margin: 0.4em 0; }

.eyebrow {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kabine-60);
  margin: 0 0 6px;
}

/* Daten (km, Datum, Countdown) immer in Bordbuch-Mono */
.daten { font-family: var(--schrift-daten); font-weight: 700; }

.countdown-zahl {
  font-family: var(--schrift-daten);
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  color: var(--streifen-dunkel);
  letter-spacing: -0.02em;
}
.countdown-einheit { font-size: 18px; color: var(--kabine-60); font-family: var(--schrift-text); font-weight: 400; }

/* ---------- Chips & Sticker ---------- */

.chip {
  display: inline-block;
  padding: 2px 12px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: var(--kabine-60);
}
.chip.opa { background: var(--haushalt-opa); }
.chip.nina { background: var(--haushalt-nina); }
.chip.max { background: var(--haushalt-max); }

/* Ovaler Länder-Sticker als Kategorie-Badge (wie am Heckfenster) */
.sticker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  height: 34px;
  padding: 0 10px;
  border: 2.5px solid var(--kabine);
  border-radius: 50%;
  background: #fff;
  font-family: var(--schrift-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.05em;
  flex: none;
}

.flammen { color: var(--streifen); letter-spacing: 2px; font-size: 14px; }

/* ---------- Listen ---------- */

.liste { list-style: none; margin: 0; padding: 0; }
.liste li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--linie);
}
.liste li:last-child { border-bottom: none; }
.liste .titel { font-weight: 600; }
.unter { font-size: 14px; color: var(--kabine-60); }

/* ---------- Formulare & Knöpfe ---------- */

label { display: block; font-weight: 600; margin: 14px 0 6px; }
input, select, textarea {
  width: 100%;
  font: inherit;
  color: inherit;
  padding: 12px 14px;
  border: 2px solid var(--linie-stark);
  border-radius: 10px;
  background: #fff;
}
input:focus-visible, select:focus-visible, textarea:focus-visible,
button:focus-visible, a:focus-visible {
  outline: 3px solid var(--streifen);
  outline-offset: 2px;
}

.knopf {
  display: inline-block;
  width: 100%;
  margin-top: 18px;
  padding: 14px 20px;
  font: inherit;
  font-weight: 700;
  color: #fff;
  /* dunkles Streifen-Orange: 6,1:1 auf Weiß (AA); das helle --streifen
     bleibt dem dekorativen Zierstreifen vorbehalten */
  background: var(--streifen-dunkel);
  border: none;
  border-radius: 12px;
  cursor: pointer;
}
.knopf:hover { background: #8C380E; }
.knopf[disabled] { opacity: 0.6; cursor: wait; }

.fehler {
  background: #F7E5DF;
  border: 2px solid var(--rot);
  color: var(--rot);
  border-radius: 10px;
  padding: 10px 14px;
  margin-top: 14px;
  font-weight: 600;
}
.fehler:empty { display: none; }

/* ---------- Login ---------- */

.login-buehne {
  max-width: 420px;
  margin: 4vh auto 0;
  padding: 0 16px 24px;
}
.login-buehne .karte { padding: 26px; }
.login-camper { width: 150px; height: 104px; display: block; margin: 0 auto 8px; }
.login-titel {
  font-family: var(--schrift-display);
  text-align: center;
  font-size: 26px;
  margin: 0 0 2px;
}
.login-unter { text-align: center; color: var(--kabine-60); margin: 0 0 12px; font-size: 15px; }

/* ---------- Campi-Knopf + Chat-Overlay (C-10) ---------- */

#campi-knopf {
  position: fixed;
  right: 14px;
  bottom: calc(var(--nav-hoehe) + env(safe-area-inset-bottom) + 14px);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 3px solid var(--senf-dunkel);
  background: var(--senf);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(42, 30, 18, 0.28);
  z-index: 30;
}
#campi-knopf:hover { transform: scale(1.05); }
#campi-overlay {
  position: fixed;
  right: 10px;
  left: 10px;
  bottom: calc(var(--nav-hoehe) + env(safe-area-inset-bottom) + 78px);
  max-width: 430px;
  margin-left: auto;
  max-height: min(66vh, 560px);
  display: flex;
  flex-direction: column;
  background: var(--karte);
  border: 2px solid var(--linie-stark);
  border-radius: 16px;
  box-shadow: 0 8px 28px rgba(42, 30, 18, 0.3);
  padding: 14px;
  z-index: 29;
}
#campi-overlay[hidden] { display: none; }
.campi-kopf { display: flex; align-items: baseline; gap: 8px; }
.campi-kopf .eyebrow { margin: 0; }
.campi-unter { flex: 1; margin: 0; font-size: 13px; }
#campi-zu { min-width: 44px; flex: none; }
#campi-overlay .frag-verlauf { flex: 1; overflow-y: auto; min-height: 120px; }

/* ---------- Untere Navigation (Opa-tauglich: groß + beschriftet) ---------- */

.nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--nav-hoehe);
  background: var(--karte);
  border-top: 2px solid var(--linie);
  display: flex;
  justify-content: space-around;
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 10;
}
.nav a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-decoration: none;
  color: var(--kabine-60);
  font-size: 12px;
  font-weight: 600;
}
.nav a .ikon { font-size: 22px; line-height: 1; }
.nav a.aktiv { color: var(--streifen-dunkel); }
.nav a.aktiv .ikon { transform: translateY(-1px); }

/* ---------- Belegungskalender ---------- */

.kal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.kal-titel { font-size: 19px; }
.kal-pfeil {
  min-width: 48px;
  min-height: 44px;
  font-size: 26px;
  line-height: 1;
  border: 2px solid var(--linie);
  border-radius: 10px;
  background: var(--karte);
  color: var(--kabine);
  cursor: pointer;
}
.kal-pfeil:hover { border-color: var(--linie-stark); }

.kal-wochentage, .kal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}
.kal-wochentage span {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--kabine-60);
  padding: 4px 0;
}
.kal-tag {
  position: relative;
  min-height: 46px;
  border-radius: 8px;
  background: var(--papier-tief);
  padding: 4px 0 0 6px;
}
.kal-tag.fremd { opacity: 0.35; }
.kal-tag.heute { outline: 3px solid var(--kabine); outline-offset: -3px; }
.kal-zahl { font-family: var(--schrift-daten); font-size: 14px; font-weight: 700; }
.kal-tag.belegt .kal-zahl { color: #fff; }
.kal-tag.belegt.hh-opa { background: var(--haushalt-opa); }
.kal-tag.belegt.hh-nina { background: var(--haushalt-nina); }
.kal-tag.belegt.hh-max { background: var(--haushalt-max); }
/* Anschluss-Übergabe (C-04): links der zurückgebende, rechts der startende Haushalt */
.kal-tag.kal-geteilt.von-opa { --kal-von: var(--haushalt-opa); }
.kal-tag.kal-geteilt.von-nina { --kal-von: var(--haushalt-nina); }
.kal-tag.kal-geteilt.von-max { --kal-von: var(--haushalt-max); }
.kal-tag.kal-geteilt.zu-opa { --kal-zu: var(--haushalt-opa); }
.kal-tag.kal-geteilt.zu-nina { --kal-zu: var(--haushalt-nina); }
.kal-tag.kal-geteilt.zu-max { --kal-zu: var(--haushalt-max); }
.kal-tag.kal-geteilt { background: linear-gradient(135deg, var(--kal-von) 0 50%, var(--kal-zu) 50% 100%); }
.kal-uebergabe {
  position: absolute; right: 3px; bottom: 2px; font-size: 12px;
  /* auf farbigem Grund lesbar halten */
  text-shadow: 0 0 3px #fff, 0 0 6px #fff;
}
.kal-legende { margin-top: 10px; line-height: 2.2; }

.form-zeile {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 420px) {
  .form-zeile { grid-template-columns: minmax(0, 1fr); }
}

.zweitknopf {
  background: var(--karte);
  color: var(--kabine);
  border: 2px solid var(--linie-stark);
  margin-top: 10px;
}
.zweitknopf:hover { background: var(--papier-tief); }

.flex1 { flex: 1; min-width: 0; }
.buchung-aktionen { display: flex; flex-direction: column; gap: 6px; flex: none; }
.mini-knopf {
  min-height: 40px;
  min-width: 76px;
  padding: 6px 10px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  border: 2px solid var(--linie-stark);
  border-radius: 10px;
  background: var(--karte);
  color: var(--kabine);
  cursor: pointer;
}
.mini-knopf:hover { background: var(--papier-tief); }
.mini-knopf.rot { color: var(--rot); border-color: var(--rot); }

/* ---------- Anstehende Termine (C-03) ---------- */

.rep-termin-zeile { align-items: center; }
.rep-termin-datum {
  width: auto;
  min-height: 40px;
  margin-top: 0;
  padding: 6px 8px;
  font-size: 14px;
}

/* ---------- Foto-Nachrüst-Modus (C-06) ---------- */

.fn-einstieg {
  display: inline-flex;
  align-items: center;
  margin-top: 12px;
  text-decoration: none;
}
.fn-fortschritt { font-size: 18px; font-weight: 700; color: var(--tanne); }
.fn-schritt { gap: 10px; }
.fn-schritt .fehler:empty { display: none; }
.fn-knopf {
  display: inline-flex;
  align-items: center;
  flex: none;
  min-height: 44px;
  cursor: pointer;
}
.fn-knopf.fn-laedt { opacity: 0.6; pointer-events: none; }
.fn-dran { background: var(--papier-tief); border-radius: 10px; }

/* Entwurf: geknipst, aber noch nicht gespeichert (Zwei-Stufen-Prinzip) */
.fn-wartet { font-weight: 600; color: var(--senf-dunkel); }
.fn-hat-entwurf { background: var(--papier-tief); border-radius: 10px; }
.fn-entwurf-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.fn-vorschau {
  width: 72px;
  height: 54px;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid var(--linie-stark);
  flex: none;
}
.fn-haken {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-weight: 600;
  cursor: pointer;
}
.fn-haken input { width: 24px; height: 24px; accent-color: var(--tanne); }
.fn-rueckfrage {
  margin-top: 14px;
  padding: 12px 14px;
  border: 2px solid var(--senf-dunkel);
  border-radius: 10px;
  background: var(--papier-tief);
}
.fn-rueckfrage p { margin: 0; }

/* Bestätigungs-Leiste über der Navigation; rechts bleibt Platz für Campi */
.fn-leiste {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--nav-hoehe) + env(safe-area-inset-bottom));
  z-index: 20;
  background: var(--karte);
  border-top: 2px solid var(--linie-stark);
  padding: 8px 82px 10px 14px;
}
.fn-leiste-hinweis { margin: 0; font-size: 13px; color: var(--kabine-60); }
.fn-leiste .knopf { margin-top: 6px; }
.fn-mit-leiste { padding-bottom: 118px; }

/* ---------- Bordbuch ---------- */

.bb-suchzeile { display: flex; gap: 10px; align-items: stretch; }
.bb-suchzeile input { flex: 1; }
.bb-neu { width: auto; margin-top: 0; padding: 12px 16px; flex: none; }

.bb-filter {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 12px 2px 2px;
  -webkit-overflow-scrolling: touch;
}
.bb-chip {
  flex: none;
  min-height: 40px;
  padding: 6px 14px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  border: 2px solid var(--linie-stark);
  border-radius: 999px;
  background: var(--karte);
  color: var(--kabine);
  cursor: pointer;
}
.bb-chip.aktiv { background: var(--kabine); color: var(--papier); border-color: var(--kabine); }

a.bb-karte {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: inherit;
}
a.bb-karte:hover { border-color: var(--linie-stark); }
.bb-pfeil { font-size: 26px; color: var(--kabine-60); flex: none; }

.bb-kopf { display: flex; gap: 14px; align-items: flex-start; margin-top: 8px; }
.bb-kopf h2 { margin: 0; }

.bb-warnung {
  background: #F7EDD8;
  border: 2px solid var(--senf);
  border-radius: 10px;
  padding: 10px 14px;
  margin: 12px 0;
  font-weight: 600;
}
.bb-tipp {
  background: var(--papier-tief);
  border-radius: 10px;
  padding: 10px 14px;
  margin-top: 12px;
}

.bb-schritte { list-style: none; margin: 14px 0 0; padding: 0; }
.bb-schritt {
  display: flex;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--linie);
}
.bb-schritt:last-child { border-bottom: none; }
.bb-schritt p { margin: 4px 0 10px; }
.bb-nr {
  flex: none;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--streifen-dunkel);
  color: #fff;
  font-size: 16px;
}
.bb-bild {
  width: 100%;
  max-width: 480px;
  border-radius: 10px;
  border: 2px solid var(--linie);
  display: block;
}
.bb-video { width: 100%; aspect-ratio: 16 / 9; border: none; border-radius: 10px; background: #000; }
.bb-aktionen { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.bb-aktionen .zweitknopf { width: auto; margin-top: 0; }

.bb-form-schritt {
  border: 2px solid var(--linie);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 12px;
  background: var(--karte);
}
.bb-form-schritt textarea { margin-top: 8px; }
.bb-form-schritt-kopf { display: flex; justify-content: space-between; align-items: center; }
.bb-form-foto { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.bb-foto-knopf { display: inline-flex; align-items: center; cursor: pointer; }
.bb-mini {
  width: 72px;
  height: 54px;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid var(--linie);
}

.liste-link { color: inherit; text-decoration: none; }
.liste-link:hover { text-decoration: underline; }

/* Rückweg-Links: gleiche Optik, aber 44-px-Trefferfläche (Opa-tauglich) */
.bb-zurueck {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  margin: -8px 0 0 -12px;
  text-decoration: none;
}
.bb-zurueck:hover { text-decoration: underline; }

/* ---------- Checklisten & Abstellen ---------- */

.cl-knoepfe { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.cl-gross {
  flex: 1;
  min-width: 200px;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  border: 2px solid var(--linie-stark);
  border-radius: 12px;
  background: var(--karte);
  color: var(--kabine);
  font-weight: 700;
  text-decoration: none;
}
.cl-gross:hover { border-color: var(--kabine); }
.cl-gross .daten { color: var(--streifen-dunkel); font-size: 18px; }

.cl-balken {
  height: 14px;
  border-radius: 999px;
  background: var(--papier-tief);
  border: 2px solid var(--linie);
  overflow: hidden;
  margin-top: 12px;
}
.cl-balken-innen { height: 100%; background: var(--streifen); transition: width 0.25s ease; }

.cl-feier {
  background: #EAF2EC;
  border: 2px solid var(--tanne);
  color: var(--tanne);
  border-radius: 12px;
  padding: 14px;
  margin-top: 12px;
  font-weight: 700;
  font-size: 18px;
  text-align: center;
}

.cl-punkte { list-style: none; margin: 14px 0 0; padding: 0; }
.cl-punkte li { border-bottom: 1px solid var(--linie); }
.cl-punkte li:last-child { border-bottom: none; }
.cl-punkt {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 56px;
  padding: 10px 4px;
  font: inherit;
  text-align: left;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}
.cl-punkt .cl-box {
  flex: none;
  width: 32px;
  height: 32px;
  border: 3px solid var(--linie-stark);
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  background: var(--karte);
}
.cl-punkt.an .cl-box { background: var(--tanne); border-color: var(--tanne); }
.cl-punkt.an .flex1 { color: var(--kabine-60); text-decoration: line-through; text-decoration-thickness: 1px; }

.cl-fotozeile { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.cl-checkzeile { display: flex; align-items: center; gap: 10px; font-weight: 600; margin: 14px 0 6px; }
.cl-checkzeile input { width: 24px; height: 24px; accent-color: var(--tanne); }

.cl-status {
  flex: none;
  min-width: 96px;
  min-height: 40px;
  padding: 4px 10px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  border-radius: 999px;
  border: 2px solid;
  cursor: pointer;
  background: var(--karte);
}
.cl-status-offen { color: var(--rot); border-color: var(--rot); }
.cl-status-beobachten { color: var(--senf-dunkel); border-color: var(--senf-dunkel); }
.cl-status-repariert { color: var(--tanne); border-color: var(--tanne); }

/* ---------- Notfall, Steckbrief, Mehr ---------- */

.nf-hoehe {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 14px 16px;
  border: 3px solid var(--rot);
  border-radius: 12px;
  background: #F9EFEA;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.nf-hoehe-zahl { font-size: 46px; font-weight: 700; color: var(--rot); line-height: 1; }
.nf-hoehe-label { font-weight: 700; color: var(--rot); letter-spacing: 0.04em; }

.nf-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 420px) { .nf-knoepfe { grid-template-columns: minmax(0, 1fr); } }
.nf-knopf {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 72px;
  justify-content: center;
  padding: 12px 16px;
  border: 2px solid var(--linie-stark);
  border-radius: 12px;
  background: var(--karte);
  color: var(--kabine);
  font-weight: 700;
  font-size: 18px;
  text-decoration: none;
}
a.nf-knopf:hover { border-color: var(--rot); }
.nf-knopf-leer { opacity: 0.65; }

.sb-portrait {
  width: 100%;
  max-width: 420px;
  border-radius: 12px;
  border: 2px solid var(--linie);
  display: block;
  margin-bottom: 12px;
}

.mehr-zeile { display: flex; align-items: center; gap: 14px; width: 100%; }
.mehr-zeile .titel, .mehr-bald .titel { display: block; }
.mehr-ikon { font-size: 26px; flex: none; }
.mehr-bald { opacity: 0.6; }
li.mehr-bald { display: flex; align-items: center; gap: 14px; }

/* ---------- Frag den Camper (Chat) ---------- */

.frag-verlauf {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 55vh;
  overflow-y: auto;
  padding: 8px 2px;
}
.frag-bubble {
  max-width: 88%;
  padding: 12px 14px;
  border-radius: 14px;
  line-height: 1.5;
}
.frag-ich {
  align-self: flex-end;
  background: var(--kabine);
  color: var(--papier);
  border-bottom-right-radius: 4px;
}
.frag-camper {
  align-self: flex-start;
  background: var(--papier-tief);
  border: 2px solid var(--linie);
  border-bottom-left-radius: 4px;
}
.frag-guide {
  display: block;
  margin-top: 8px;
  padding: 8px 12px;
  border: 2px solid var(--linie-stark);
  border-radius: 10px;
  background: var(--karte);
  color: inherit;
  font-weight: 600;
  text-decoration: none;
}
.frag-guide:hover { border-color: var(--kabine); }
.frag-beispiele { display: flex; flex-wrap: wrap; gap: 8px; }
.frag-zeile { display: flex; gap: 10px; margin-top: 12px; }
.frag-zeile input { flex: 1; }
.frag-senden { width: auto; margin-top: 0; padding: 12px 18px; flex: none; }

/* ---------- Stub-/Leerzustände ---------- */

.stub {
  text-align: center;
  padding: 40px 18px;
  color: var(--kabine-60);
}
.stub .ikon { font-size: 40px; display: block; margin-bottom: 8px; }
.stub strong { color: var(--kabine); }

/* ---------- Kleinkram ---------- */

#offline-banner {
  background: var(--kabine);
  color: var(--papier);
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 12px;
}

.versteckt { display: none !important; }
[hidden] { display: none !important; } /* Portal-Lehre: gewinnt gegen display:flex */

@media (min-width: 720px) {
  body { font-size: 18px; }
  .nav { max-width: 720px; margin: 0 auto; border-left: 2px solid var(--linie); border-right: 2px solid var(--linie); border-radius: 14px 14px 0 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .karte { transition: border-color 0.15s ease; }
  .nav a .ikon { transition: transform 0.15s ease; }
}