/* ============================================================
   Design-System „Tanne & Terrakotta“ — zentrales Stylesheet
   für alle drei Portale (Vermieter / Mieter / Mietinteressenten).
   Warm, hell, seriös: Tannengrün als Vertrauensfarbe, Terrakotta
   als warmer Akzent, Papierton als Fläche. Überschriften: Fraunces.
   Fließtext: Inter. Beide selbst gehostet (kein externer Abruf).
   ============================================================ */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/fraunces-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/inter-latin.woff2') format('woff2');
}

:root {
  /* Kernpalette */
  --tanne: #2f4a3a;            /* Primärfarbe: Buttons, Überschriften */
  --tanne-dunkel: #23392c;     /* Kopfleiste, Hover */
  --tanne-tief: #182820;       /* sehr dunkle Flächen (Landing) */
  --terrakotta: #c05f33;       /* warmer Akzent: Links, Hervorhebungen */
  --terrakotta-dunkel: #a34d27;
  --sand: #f6f2e9;             /* Seitenhintergrund (warmes Papier) */
  --karte: #ffffff;
  --flaeche: #f1ecdf;          /* eingelassene Flächen/Boxen */
  --linie: #e4ddcc;            /* Rahmen/Trennlinien */
  --text: #2b2822;             /* warmes Fast-Schwarz */
  --text2: #57534a;
  --muted: #8b8577;

  /* Status */
  --ok-bg: #e9f1e4; --ok-text: #33683c; --ok-linie: #c9dcbf;
  --warn-bg: #f9f1d6; --warn-text: #8a6d1a; --warn-linie: #e6d49a;
  --rot-bg: #f9e8e1; --rot-text: #99381f; --rot-linie: #e6bfae;
  /* Punkt 6.1: ruhiges Blau fuer den AKTUELLEN Prozessschritt (Terrakotta bleibt fuer
     "gerade angesehen", Gelb fuer laufende Nicht-aktuelle Schritte und Warnhinweise). */
  --info-bg: #e8eef6; --info-text: #2c5a86; --info-linie: #b9cde4; --info: #3f6ea6;

  /* Legacy-Aliase (werden in Views referenziert) */
  --gruen: #2f4a3a;
  --beige: #f6f2e9;
  --orange: #c08a1e;
  --rot: #ad4526;

  --radius: 12px;
  --schatten: 0 1px 2px rgba(43, 40, 34, .05), 0 4px 14px rgba(43, 40, 34, .05);
  --schrift-kopf: 'Fraunces', Georgia, 'Times New Roman', serif;
  --schrift-text: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--schrift-text);
  font-size: 15px;
  line-height: 1.55;
  background: var(--sand);
  color: var(--text);
}

/* ---------- Kopfleiste + Navigation ---------- */
.kopf {
  background: var(--tanne-dunkel);
  color: #f4efe4;
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  border-bottom: 3px solid var(--terrakotta);
}
.kopf a { color: #f4efe4; text-decoration: none; font-weight: 600; }
.kopf .marke, .kopf .marke a {
  font-family: var(--schrift-kopf);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: .2px;
  color: #fbf8f0;
}
.kopf .portal-chip {
  font-size: 11.5px; font-weight: 600; letter-spacing: .4px;
  background: rgba(255, 255, 255, .13); color: #ece5d3;
  padding: 3px 10px; border-radius: 999px; white-space: nowrap;
}
.kopf .nav { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.kopf .nav form { margin: 0; }
.kopf .nav > a {
  font-size: 13.5px; padding: 7px 10px; border-radius: 8px; opacity: .92;
}
.kopf .nav > a:hover { background: rgba(255, 255, 255, .12); opacity: 1; }
.kopf .nutzer { font-size: 12.5px; opacity: .8; padding: 0 6px; }

/* Mobil: Navigation hinter Menü-Knopf (CSS-only, kein JS) */
.nav-schalter, .nav-knopf { display: none; }
@media (max-width: 780px) {
  .kopf .nav {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 8px 0 4px;
    border-top: 1px solid rgba(255, 255, 255, .15);
    margin-top: 6px;
  }
  .kopf .nav > a { padding: 11px 10px; font-size: 15px; }
  .kopf .nutzer { padding: 8px 10px 2px; }
  .nav-knopf {
    display: inline-flex; align-items: center; gap: 8px;
    cursor: pointer; user-select: none;
    font-size: 13.5px; font-weight: 600; color: #f4efe4;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 8px; padding: 7px 12px;
  }
  .nav-schalter:checked ~ .nav { display: flex; }
}

/* ---------- Layout ---------- */
.inhalt { max-width: 760px; margin: 0 auto; padding: 26px 16px 60px; }
.fuss {
  max-width: 760px; margin: 0 auto; padding: 0 16px 28px;
  font-size: 12px; color: var(--muted); text-align: center;
}
.card {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 18px;
  box-shadow: var(--schatten);
}

/* ---------- Typografie ---------- */
h1, h2, h3 { font-family: var(--schrift-kopf); letter-spacing: .1px; }
h1 { font-size: 25px; font-weight: 600; margin: 0 0 14px; color: var(--tanne); line-height: 1.25; }
h2 { font-size: 18.5px; font-weight: 600; margin: 0 0 12px; color: var(--tanne); }
h3 { font-weight: 600; }
a { color: var(--terrakotta-dunkel); }
.klein { font-size: 12px; color: var(--muted); }
code { background: var(--flaeche); border-radius: 5px; padding: 1px 5px; }

/* ---------- Formulare ---------- */
label { display: block; font-size: 13px; font-weight: 600; margin: 12px 0 4px; color: var(--text2); }
input, select, textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid #cfc7b4;
  border-radius: 9px;
  font-size: 15px;
  font-family: inherit;
  background: #fffdf8;
  color: var(--text);
}
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--terrakotta);
  outline-offset: 1px;
}
input[type="radio"], input[type="checkbox"] { accent-color: var(--tanne); }
::placeholder { color: #a9a292; }

/* Teil 1: Kopier-Knopf direkt im Link-Feld (Zugangslinks). Der Knopf sitzt absolut am rechten Rand
   des readonly-Feldes; das Feld bekommt rechts Platz, damit der Text nicht darunter laeuft. */
.link-feld { position: relative; }
.link-feld input { padding-right: 48px; }
.link-feld .link-copy {
  position: absolute; top: 4px; right: 4px; bottom: 4px;
  width: 40px; min-height: 0; padding: 0; margin: 0;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 7px; cursor: pointer;
  background: var(--flaeche); color: var(--text2);
  font-size: 15px; line-height: 1;
}
.link-feld .link-copy:hover { background: #e7e0cf; }
.link-feld .link-copy.kopiert { background: var(--ok-bg); color: var(--ok-text); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 12px 18px;
  min-height: 44px;
  border: none;
  border-radius: 9px;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  color: #fdfbf5;
  background: var(--tanne);
  font-family: inherit;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .14);
  transition: background .15s;
}
.btn:hover { background: var(--tanne-dunkel); }
.btn.voll { width: 100%; margin-top: 16px; }
.btn.grau { background: #7c766a; }
.btn.grau:hover { background: #67614f; }
.btn.rot { background: var(--rot); }
.btn.rot:hover { background: #8f3116; }
.btn.akzent { background: var(--terrakotta); }
.btn.akzent:hover { background: var(--terrakotta-dunkel); }
.btn.mini { padding: 7px 12px; min-height: 0; font-size: 12.5px; box-shadow: none; }

/* ---------- Meldungen ---------- */
.hinweis { background: var(--warn-bg); border: 1px solid var(--warn-linie); border-radius: 10px; padding: 12px 14px; font-size: 13.5px; margin-bottom: 16px; }
.fehler { background: var(--rot-bg); border: 1px solid var(--rot-linie); border-radius: 10px; padding: 12px 14px; font-size: 13.5px; margin-bottom: 16px; color: var(--rot-text); }
.ok { background: var(--ok-bg); border: 1px solid var(--ok-linie); border-radius: 10px; padding: 12px 14px; font-size: 13.5px; margin-bottom: 16px; color: var(--ok-text); }

/* ---------- Tabellen ---------- */
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th, td { text-align: left; padding: 9px 8px; border-bottom: 1px solid var(--linie); }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); font-weight: 600; }

/* ---------- Badges ---------- */
.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.badge.gruen { background: var(--ok-bg); color: var(--ok-text); }
.badge.gelb { background: var(--warn-bg); color: var(--warn-text); }
.badge.rot { background: var(--rot-bg); color: var(--rot-text); }
.badge.grau { background: var(--flaeche); color: var(--text2); }

/* ---------- Aufklapper ---------- */
summary { color: var(--text2); }
details > summary { cursor: pointer; }

/* Teil 6: Zeitfenster-Eingabe (Datum + von/bis) responsiv. min-width:0 lässt die nativen date/time-
   Felder unter ihre intrinsische Breite schrumpfen (sonst ragen sie mobil rechts leicht heraus).
   Ab 480px: Datum volle Breite, von/bis je halbe Breite untereinander. */
.zf-felder { display: flex; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.zf-felder > div { display: flex; flex-direction: column; min-width: 0; }
.zf-felder .zf-datum { flex: 2 1 150px; }
.zf-felder .zf-zeit { flex: 1 1 90px; }
@media (max-width: 480px) {
  .zf-felder .zf-datum { flex-basis: 100%; }
  .zf-felder .zf-zeit { flex-basis: calc(50% - 5px); }
}

/* Teil 7: Foto-Upload-Vorschau mit dezentem Lade-Spinner. Der Thumb-Wrapper reserviert von Anfang an
   feste Masse (72x54), der Spinner liegt als Overlay darueber und dreht, bis der Server bestaetigt hat.
   Nach dem Upload wird der Wrapper durch das nackte Serverbild ersetzt, die Zeile springt also nicht. */
.foto-thumb { position: relative; width: 72px; height: 54px; flex: none; }
.foto-thumb > img { width: 72px; height: 54px; object-fit: cover; border-radius: 6px; display: block; }
.foto-spinner { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .5); border-radius: 6px; }
.foto-spinner::after { content: ''; width: 20px; height: 20px; border: 2px solid rgba(0, 0, 0, .2); border-top-color: var(--tanne); border-radius: 50%; animation: foto-spin .7s linear infinite; }
@keyframes foto-spin { to { transform: rotate(360deg); } }
.foto-status { margin-top: 2px; }
.foto-fehler { color: var(--rot); }

/* Aufklapp-Trigger (Teil 4): klar als aufklappbares Menü erkennbar — sichtbarer Button-Rahmen,
   Flächenhintergrund und ein Pfeil, der sich beim Öffnen dreht. So unterscheidet sich der Trigger
   eindeutig von einem echten Link, hinter dem sofort eine endgültige Aktion läge. Einheitlich für
   alle vergleichbaren Stellen (Termin abschließen, Zeit ändern/stornieren, Angaben korrigieren …). */
summary.aufklapp {
  cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  font-weight: 600; font-size: 13.5px; color: var(--text2);
  padding: 7px 12px; border: 1px solid var(--linie); border-radius: 8px;
  background: var(--flaeche); list-style: none; user-select: none;
}
summary.aufklapp::-webkit-details-marker { display: none; }
summary.aufklapp::before {
  content: '▸'; display: inline-block; color: var(--muted);
  transition: transform .15s ease; font-size: 12px;
}
details[open] > summary.aufklapp::before { transform: rotate(90deg); }
summary.aufklapp:hover { border-color: var(--tanne); }
summary.aufklapp.rot { color: var(--rot); background: var(--rot-bg); border-color: var(--rot-linie); }
summary.aufklapp.rot::before { color: var(--rot); }
summary.aufklapp.rot:hover { border-color: var(--rot); }
summary.aufklapp.gruen { color: var(--gruen); background: var(--ok-bg); border-color: var(--gruen); }
summary.aufklapp.gruen::before { color: var(--gruen); }

/* ---------- Toasts + Spinner ---------- */
.toast-wrap { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { background: var(--tanne); color: #fdfbf5; padding: 12px 18px; border-radius: 10px; font-size: 14px; font-weight: 600; box-shadow: 0 4px 16px rgba(24, 40, 32, .3); opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; max-width: 90vw; }
.toast.an { opacity: 1; transform: translateY(0); }
.toast.rot { background: var(--rot); }

/* Rabatt-Popup (Vermieter-Dashboard) */
.popup-hintergrund { position: fixed; inset: 0; background: rgba(24, 40, 32, .45); z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.popup { position: relative; background: var(--karte); border: 1px solid var(--linie); border-radius: 16px; padding: 26px 26px 22px; max-width: 460px; width: 100%; box-shadow: 0 18px 50px rgba(24, 40, 32, .28); }
.popup-pille { display: inline-block; background: var(--flaeche); border: 1px solid var(--linie); color: var(--terrakotta-dunkel); border-radius: 999px; padding: 4px 12px; font-size: 12.5px; font-weight: 700; }
.popup-x { position: absolute; top: 8px; right: 10px; background: none; border: 0; font-size: 26px; line-height: 1; color: var(--muted); cursor: pointer; padding: 4px 8px; }
.popup-x:hover { color: var(--text); }
.popup-aktionen { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.spinner { display: inline-block; width: 15px; height: 15px; margin-right: 8px; vertical-align: -2px; border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Prozessleiste (Stepper der Vermietungs-Detailseite) ---------- */
.prozessleiste-wrap { margin: 0 0 16px; }
.prozessleiste { display: flex; gap: 8px; overflow-x: auto; padding: 8px 0; -webkit-overflow-scrolling: touch; }
/* Nachlauf-Puffer im Scrollbereich: die letzte Kachel (Nr. 6) kann ganz unter dem rechten
   Scroll-Indikator hervorscrollen und wird nicht mehr ueberdeckt/abgeschnitten. */
.prozessleiste::after { content: ''; flex: 0 0 18px; }
.prozessleiste .schritt {
  position: relative;
  flex: 1 1 0; min-width: 120px; display: flex; flex-direction: column; gap: 3px;
  padding: 10px 12px; border-radius: 10px; border: 1px solid transparent;
  text-decoration: none; color: var(--text); transition: transform .12s, box-shadow .12s;
}
.prozessleiste .schritt:hover { transform: translateY(-1px); box-shadow: var(--schatten); }
.prozessleiste .schritt.erledigt { background: var(--ok-bg); color: var(--ok-text); }
.prozessleiste .schritt.laufend { background: var(--warn-bg); color: var(--warn-text); }
.prozessleiste .schritt.offen { background: var(--flaeche); color: #8b8577; }
/* Punkt 6.1: der aktuelle Schritt ist blau mit 2px-Akzentrahmen hervorgehoben (statt gelb). */
.prozessleiste .schritt.aktuell {
  background: var(--info-bg); color: var(--info-text);
  border: 2px solid var(--info); padding: 9px 11px;
}
.prozessleiste .schritt.aktiv { border-color: var(--terrakotta); box-shadow: 0 0 0 1px var(--terrakotta); }
/* Punkt 6.2: Warnsignal an einer Kachel — dort steht trotz "erledigt" noch eine
   Vermieter-Aktion aus (z. B. nachgereichte Zeitfenster, fehlender Buchungslink).
   An Schritt 3 zeigt die Pille zusaetzlich die Anzahl eigener offener Aufgaben
   ("3", "!" oder "! 3" — Statuslogik Punkt 3), daher flexible Breite. */
.prozessleiste .s-warnpunkt {
  position: absolute; top: -7px; right: -7px; z-index: 1;
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: #f0b429; color: #4d3a06; font-weight: 800; font-size: 12.5px; line-height: 1;
  white-space: nowrap;
  border: 2px solid var(--karte); box-shadow: 0 1px 3px rgba(43, 40, 34, .3);
}
/* Teil 1 (Vor-Ort-Fixes 2): der Warnpunkt wird IMMER gerendert und nur bei leerem Marker
   ausgeblendet. So bleibt die Kachel-Struktur (Reihenfolge der Spans) beim Fetch-Refresh
   invariant — der positionsbasierte DOM-Morph kann die gleichnamigen <span>-Geschwister
   dann nicht mehr gegeneinander verschieben (sonst scrambelt die Kachel, sobald ein Badge
   erscheint/verschwindet). */
.prozessleiste .s-warnpunkt.leer { display: none; }
.prozessleiste .s-kopf { display: flex; align-items: center; gap: 6px; }
.prozessleiste .s-nr {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; flex: none; border-radius: 50%;
  background: var(--tanne); color: #fdfbf5; font-family: var(--schrift-kopf);
  font-size: 12px; font-weight: 600;
}
.prozessleiste .schritt.erledigt .s-nr { background: var(--ok-text); }
.prozessleiste .schritt.laufend .s-nr { background: var(--warn-text); }
.prozessleiste .schritt.offen .s-nr { background: #b3ad9f; }
.prozessleiste .s-icon { font-size: 15px; }
.prozessleiste .s-label { font-size: 13px; font-weight: 600; line-height: 1.25; }
.prozessleiste .s-status { font-size: 11px; opacity: .85; }

/* Gesperrte Zukunftsschritte (Wizard): kein Link, kein Hover-Effekt. */
.prozessleiste .schritt.gesperrt { cursor: default; opacity: .75; }
.prozessleiste .schritt.gesperrt:hover { transform: none; box-shadow: none; }

.prozess-hinweis, .prozess-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-top: 10px; padding: 12px 14px; border-radius: 10px;
  background: var(--warn-bg); border: 1px solid var(--warn-linie);
}
.prozess-hinweis.fertig { background: var(--ok-bg); border-color: var(--ok-linie); }
/* Banner "Sie sehen Schritt N": neutraler Ton mit Terrakotta-Kante statt Warnfarbe. */
.prozess-banner { background: var(--flaeche); border: 1px solid var(--linie); border-left: 4px solid var(--terrakotta); }
/* Punkt 6.3/6.4: zweiter Hinweis-Kasten in Warnfarbe fuer Alt-Schritt-Aktionen. */
.prozess-zusatz {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-top: 8px; padding: 12px 14px; border-radius: 10px;
  background: var(--warn-bg); border: 1px solid var(--warn-linie); border-left: 4px solid var(--warn-text);
}
.prozess-hinweis .ph-text, .prozess-banner .ph-text, .prozess-zusatz .ph-text { display: flex; flex-direction: column; gap: 2px; min-width: 200px; flex: 1; }
.prozess-hinweis .ph-text strong, .prozess-banner .ph-text strong, .prozess-zusatz .ph-text strong { font-size: 14px; }
.prozess-hinweis .ph-text span, .prozess-banner .ph-text span, .prozess-zusatz .ph-text span { font-size: 13px; color: var(--text2); }
/* Statuslogik Punkt 2: Liste offener Einzelaufgaben unter dem Haupthinweis. */
.prozess-aufgaben { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--text2); }
.prozess-aufgaben li { margin: 3px 0; }
/* Statuslogik Punkt 3b/3c: Zaehler-Badge am "Vor-Ort-Ansicht"-Button (offene
   Anwesenheitsmarkierungen). */
.zahl-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; border-radius: 999px;
  background: #f0b429; color: #4d3a06; font-weight: 800; font-size: 11.5px; line-height: 1;
  vertical-align: 1px;
}
/* Punkt 4 (Vor-Ort): Anwesenheits-Kacheln "Kommt für mich infrage" / "Kommt nicht infrage". */
.anwesenheit-wahl { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; }
.anwesenheit-wahl form { margin: 0; }
/* Teil 2 (Vor-Ort-Fixes): der gewaehlte Button leuchtet als Toggle auf — doppelter Ring
   (Karte + Statusfarbe) hebt ihn deutlich vom nicht gewaehlten Nachbarn ab. */
.anwesenheit-wahl .btn.gewaehlt { background: var(--ok-text); box-shadow: 0 0 0 2px var(--karte), 0 0 0 4px var(--ok-text); }
.anwesenheit-wahl .btn.gewaehlt-nicht { background: var(--rot); box-shadow: 0 0 0 2px var(--karte), 0 0 0 4px var(--rot); }
.prozess-frei { margin-top: 10px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ---------- Dashboard: Archiv + Protokoll-Downloads + Schritt-Status ---------- */
.archiv summary {
  cursor: pointer; font-family: var(--schrift-kopf); font-weight: 600; font-size: 16px;
  color: var(--tanne); padding: 10px 12px; border-radius: 10px; background: var(--flaeche);
  border: 1px solid var(--linie); list-style-position: inside; user-select: none;
}
.archiv summary:hover { border-color: var(--tanne); }
.archiv[open] summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
/* Drei Download-Buttons: nebeneinander; auf schmalen Screens einheitlich volle Breite,
   sauber untereinander (Punkt 12.3 — vorher unterschiedlich breit). */
.protokoll-dl { display: flex; gap: 6px; flex-wrap: wrap; }
.protokoll-dl .btn { text-decoration: none; white-space: nowrap; }
@media (max-width: 720px) {
  .protokoll-dl { flex-direction: column; align-items: stretch; }
  /* Volle Breite gestapelt; lange Beschriftungen umbrechen lassen, statt (nowrap) ueber den
     schmalen Bildschirmrand hinauszulaufen (Archiv-Protokoll-Buttons, Teil 1). */
  .protokoll-dl .btn { width: 100%; text-align: center; white-space: normal; }
}
/* Status-Spalte "Schritt X: Name" — bei wenig Platz nur "Schritt X". */
.schritt-badge { white-space: nowrap; }
@media (max-width: 640px) {
  .schritt-badge .schritt-name { display: none; }
}

/* Punkt 12.1: Tabellen mit .tabelle-karten werden auf schmalen Screens zum Karten-Layout
   (Zeile = Karte, Zellen untereinander, Spaltenname per data-label davor). Die Kopfzeile
   traegt .nur-breit und verschwindet im Karten-Modus. */
@media (max-width: 640px) {
  .tabelle-karten, .tabelle-karten tbody { display: block; }
  .tabelle-karten tr {
    display: block; border: 1px solid var(--linie); border-radius: 10px;
    padding: 10px 12px; margin-bottom: 10px; background: #fffdf8;
  }
  .tabelle-karten tr.nur-breit { display: none; }
  .tabelle-karten td { display: block; border: none; padding: 3px 0; }
  .tabelle-karten td[data-label]::before {
    content: attr(data-label) ': ';
    font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase;
    color: var(--muted); margin-right: 4px;
  }
}

/* ---------- Rechtstexte (Impressum, Datenschutz, AGB, AVV) ---------- */
.rechtstext h1 { margin-bottom: 2px; }
.rechtstext-stand { font-size: 12.5px; color: var(--muted); margin: 0 0 18px; }
.rechtstext h2 { font-size: 19px; margin: 26px 0 8px; color: var(--tanne); }
.rechtstext h3 { font-size: 15.5px; margin: 18px 0 6px; }
.rechtstext p, .rechtstext li { font-size: 14.5px; line-height: 1.65; }
.rechtstext ul { padding-left: 20px; }
.rechtstext table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 10px 0 14px; }
/* Auf schmalen (mobilen) Screens laufen breite Rechtstext-Tabellen sonst rechts aus dem Bild.
   Der Scroll-Container macht sie horizontal scrollbar, ohne die Seite selbst zu verbreitern. */
.rechtstext .tabelle-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 10px 0 14px; }
.rechtstext .tabelle-scroll > table { margin: 0; min-width: 480px; }
.rechtstext th, .rechtstext td { border: 1px solid var(--linie); padding: 7px 10px; text-align: left; vertical-align: top; }
.rechtstext th { background: var(--flaeche); font-weight: 600; }
.rechtstext-hinweis { background: var(--flaeche); border-left: 4px solid var(--terrakotta); border-radius: 6px; padding: 10px 14px; font-size: 13.5px; }
.fuss a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.fuss a:hover { color: var(--tanne); }