/* Immo-WebApp — Dark-UI (Konventionen: Buttons nie disabled; Hover nur Rahmen;
   Press nach unten; Primary dunkel mit weißer Schrift; Hover-Rahmen grün). */
:root {
  --bg1: #0f1115;
  --bg2: #171b22;
  --bg3: #20262f;
  --text: #e8eaed;
  --muted: #9aa3b2;
  --border: #2a313c;
  --accent-2: #2fbf71;
  --danger: #e06c5f;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* v1.0.63 (19.09., Axel: „In der mobile PWA rutschen die Fenster immer nach
   links und rechts beim scrollen“ — nur auf der Kalenderseite, der längsten
   Seite): KEIN horizontaler Overflow messbar (390/375/320 px, echte
   Live-Daten) — iOS nimmt diagonale Fingerbewegungen beim vertikalen Scrollen
   als horizontales Panning/Rubber-Banding auf und zieht die Seite seitwärts.
   overscroll-behavior killt das Seitwärts-Bounce + Pull-to-Refresh der PWA;
   touch-action: pan-y blockt horizontale Touch-Panning-Gesten, vertikales
   Scrollen bleibt voll erhalten. Bewusst NICHT overflow-x:hidden (bricht
   position:fixed-Bottom-Nav auf iOS); Layout unverändert. */
html, body { overscroll-behavior-x: none; overscroll-behavior-y: none; }
body { touch-action: pan-y; }
body {
  background: var(--bg1);
  color: var(--text);
  font-family: system-ui, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-bottom: 42px; /* Platz für die fixierte Fußzeile (v0.0.31) */
  /* v1.0.21: Safe-Area-OBEN auf den Body statt nur auf den Kopf — jenseits
     des Kopfs (z. B. ganz hochgescrollt) lag der Inhalt sonst unter der
     iOS-Statusbar (Kalender „Zeitraum blockieren“, Direktbuchung-Formular). */
  padding-top: env(safe-area-inset-top, 0px);
}

/* Fußzeile: immer sichtbar am unteren Rand (v0.0.31) */
.fuss {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  justify-content: center;
  gap: 12px;
  background: var(--bg3);
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 12px;
  padding: 10px 16px;
  max-width: none;
}
.fuss-version {
  color: var(--accent-2);
  font-weight: 600;
  white-space: nowrap;
}

.kopf {
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  /* v1.0.21: Safe-Area-TOP sitzt jetzt auf body (siehe dort) — hier nur
     noch 0, sonst doppelte Notch-Lücke. v1.0.6 hatte env() hier. */
  padding-top: 0;
}
.kopf-inhalt {
  max-width: 1300px;
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;  /* v1.0.9: Kopf-Version zentriert */
}
.kopf-version { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-size: 0.85rem; color: var(--muted, #9aa3b2); display: none; pointer-events: none; }
.marke { font-weight: 600; font-size: 1.05rem; }

/* v1.0.6: Überschriften kompakter (Browser-Default 2em war zu hoch) */
h1 { font-size: 1.45rem; margin: 0 0 12px; }

/* v0.0.195: Seitenbreite EINHEITLICH 1300px auf allen Seiten (vorher 1000px
   Default + Ausnahmen für Events/Zugangscodes — Axel: „Sehr schön, jetzt
   mach bitte, dass die Breite auf allen Seiten gleich ist“) */
.inhalt {
  max-width: 1300px;
  margin: 0 auto;
  padding: 16px 20px 24px;
  width: 100%;
  flex: 1;
}
.fuss {
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.8rem;
  padding: 12px 20px;
  text-align: center;
}

.karte {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 22px 26px;
}
.karte-schmal { max-width: 560px; margin: 0 auto; }
.hinweis { color: var(--muted); }

label {
  display: block;
  margin: 14px 0;
  color: var(--text);
  font-size: 0.95rem;
}
label.zeile { display: flex; align-items: center; gap: 8px; }
input, select, textarea {
  display: block;
  width: 100%;
  margin-top: 5px;
  background: var(--bg1);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 9px 11px;
  font-size: 1rem;
}
textarea {
  font-family: inherit;
  resize: vertical;
  min-height: 84px;
  line-height: 1.45;
}
label.zeile input { width: auto; margin: 0; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent-2); }

button {
  background: var(--bg3);
  color: #fff;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 1rem;
  cursor: pointer;
  margin-top: 10px;
}
button:hover { border-color: var(--accent-2); }
button:active { transform: translateY(1px); }

.fehlerliste {
  background: rgba(224, 108, 95, 0.12);
  border: 1px solid var(--danger);
  color: var(--danger);
  border-radius: 8px;
  padding: 10px 14px 10px 32px;
}
.erfolg {
  background: rgba(47, 191, 113, 0.12);
  border: 1px solid var(--accent-2);
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--accent-2);
}
/* v0.0.179: Links dezent statt grell (Axel 10.09.) — Konvention aus Atlas
   v0.0.164 (v0.0.107): #8fb2e6, dezente Unterstreichung, Hover #aac8f0. */
.link {
  color: #8fb2e6;
  text-decoration: underline rgba(143, 178, 230, 0.38) 1px;
  text-underline-offset: 2.5px;
}
.link:hover { color: #aac8f0; }
.inline { display: inline; }
.nav { display: flex; align-items: center; gap: 14px; }
/* Nav-Links OHNE Unterstreichung (Browser-Default aus) — auch Hover/Fokus/
   Aktiv; sonst wirken die festen Punkte dauerhaft und nach Klick doppelt
   unterstrichen (Default-underline + border, Axel 05.09.) */
.nav a { text-decoration: none; }
.nav a:hover, .nav a:focus, .nav a:active { text-decoration: none; }
/* Feste Nav-Punkte (Belegung/Gäste): normal weiß wie die Gruppe-Titel,
   Hover grün, aktiv grün — Markierung NUR über Farbe, keine Linie */
.nav > a.link { color: var(--text, #e8eaed); }
.nav > a.link:visited { color: var(--text, #e8eaed); }
.nav > a.link:hover { color: var(--accent-2, #2fbf71); }
.nav > a.link.nav-aktiv { color: var(--accent-2, #2fbf71); border-bottom: 0; }

/* Nav-Gruppen-Dropdowns (v0.0.51): details/summary als Menü */
.nav-gruppe { position: relative; }
.nav-gruppe summary {
  list-style: none;
  cursor: pointer;
  color: var(--text, #e8eaed);
  padding: 6px 2px;
  white-space: nowrap;
}
.nav-gruppe summary::-webkit-details-marker { display: none; }
.nav-drop {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 12em;
  padding: 10px;
  background: var(--bg3, #20262f);
  border: 1px solid var(--border, #2a313c);
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}
.nav-aktiv {
  border-bottom: 2px solid var(--accent-2, #2fbf71);
  padding-bottom: 1px;
}

.btn-klein {
  padding: 6px 12px;
  font-size: 0.88rem;
  margin-top: 0;
}
/* M11.21: SMTP-Test-Zeile — Test-Empfänger-Feld + Test-Button nebeneinander.
   Label nicht auf volle Breite (flex:1 der .feld-reihe verdrängte den
   Button), align-items: flex-end = Feld- und Button-Unterkante bündig. */
.feld-reihe.smtp-test-zeile { align-items: flex-end; flex-wrap: nowrap; }
.feld-reihe.smtp-test-zeile label { flex: 0 1 400px; min-width: 240px; }
.feld-reihe.smtp-test-zeile .btn-klein { flex: 0 0 auto; margin-top: 0; margin-bottom: 0;
                                         height: 38px; }  /* = Input-Höhe, Unterkante bündig (Axel 06.09.) */
/* Eingabefeld in der Test-Zeile: Breite wie das Label (kein width:100%),
   Block-Margins nullen, damit Feld-/Button-Unterkante bündig sind und der
   Button NICHT in eine zweite Flex-Zeile umbricht (flex-wrap: wrap der
   .feld-reihe — Axel-Befund 06.09. 21:36 „Button nicht direkt neben dem Feld“). */
.feld-reihe.smtp-test-zeile input { flex: 0 1 400px; min-width: 160px;
                                    margin-top: 0; margin-bottom: 0; }
.btn-danger { color: #fff; }
.btn-danger:hover { border-color: var(--danger); }
.btn-schluessel { width: 100%; margin-top: 6px; }
.btn-aktiv { border-color: var(--accent-2); }
/* Zurück-Navigation als Button-Link (v0.0.38) — gleiche Optik wie button */
a.btn-klein {
  display: inline-block;
  background: var(--bg3);
  color: #fff;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
}
a.btn-klein:hover { border-color: var(--accent-2); color: #fff; }

.trenner-zeile {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  margin: 16px 0 4px;
}
.trenner-zeile::before, .trenner-zeile::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--border);
}
.trenner-zeile span { font-size: 0.85rem; }

.code-feld {
  font-family: ui-monospace, monospace;
  font-size: 1.25rem;
  letter-spacing: 0.25em;
  width: 220px;
}
.zeile-form { display: flex; align-items: center; gap: 10px; }
.zeile-form .code-feld { margin-top: 0; }
.sicherheits-block {
  background: var(--bg1);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  margin: 14px 0;
}
.sicherheits-block.warn { border-color: var(--accent-2); }
.sicherheits-block h3 { margin-top: 0; }
.qr-box {
  background: #fff;
  border-radius: 8px;
  padding: 8px;
  display: inline-block;
  margin: 8px 0;
}
.qr-box svg { display: block; }
.code-info { color: var(--muted); font-size: 0.85rem; }
.code-info code { color: var(--text); }

.codes-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 6px 14px;
  padding-left: 4px;
  list-style: none;
}
.codes-liste code {
  background: var(--bg3);
  border-radius: 6px;
  padding: 5px 9px;
  font-family: ui-monospace, monospace;
  letter-spacing: 0.06em;
}

.tabelle {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 18px;
}
.tabelle th, .tabelle td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 0.92rem;
}
.tabelle th {
  color: var(--muted);
  font-weight: 500;
  white-space: nowrap;
}
.hinweis.klein { font-size: 0.82rem; }

/* Modal (Design-Popup, z. B. Passkey umbenennen) — IMMER dunkles Theme, nie Browser-Weiß */
dialog.modal {
  background: var(--bg2, #171b22);
  color: var(--text, #e8eaed);
  border: 1px solid var(--accent-2, #2fbf71);
  border-radius: 8px;
  padding: 18px 20px;
  min-width: 320px;
  max-width: min(90vw, 480px);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(47, 191, 113, 0.15);
}
dialog.modal::backdrop {
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(2px);
}
dialog.modal h3 {
  margin: 0 0 14px;
  color: var(--text, #e8eaed);
  font-size: 1.05rem;
}
dialog.modal label {
  display: block;
  margin: 0 0 16px;
  color: var(--muted, #9aa3b2);
  font-size: 0.9rem;
}
dialog.modal input[type="text"],
dialog.modal input[type="email"] {
  width: 100%;
  margin-top: 6px;
  background: var(--bg1, #0f1115);
  color: var(--text, #e8eaed);
  border: 1px solid var(--border, #2a313c);
  border-radius: 7px;
  padding: 9px 11px;
  font-size: 1rem;
}
dialog.modal input[type="text"]:focus {
  outline: none;
  border-color: var(--accent-2, #2fbf71);
}
dialog.modal .modal-aktionen { display: flex; gap: 10px; justify-content: flex-end; }
dialog.modal .modal-aktionen button { margin-top: 0; }

/* v0.0.107: Tabellen-Links dezent statt grellem Browser-Blau (Axel 08.09.) —
   Konvention aus Atlas v0.0.164: #8fb2e6, dezente Unterstreichung, Hover #aac8f0. */
table a {
    color: #8fb2e6;
    text-decoration: underline rgba(143, 178, 230, 0.38) 1px;
    text-underline-offset: 2.5px;
}
table a:hover { color: #aac8f0; }

/* v0.0.107: Bearbeiten+Aufheben nebeneinander in der Blockaden-Tabelle. */
.aktionen-zeile { display: flex; align-items: center; gap: 6px; }
.aktionen-zeile form { margin: 0; }

/* ── Schieberegler (Switch) — v0.0.29 ─────────────────────────────────────── */
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
          user-select: none; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .bahn { position: relative; width: 42px; height: 24px; border-radius: 12px;
                background: var(--bg3); border: 1px solid var(--border); flex: none;
                transition: background .18s ease, border-color .18s ease; }
.switch .bahn::after { content: ""; position: absolute; top: 2px; left: 2px;
                       width: 18px; height: 18px; border-radius: 50%;
                       background: #aab3bf; transition: transform .18s ease, background .18s ease; }
.switch input:checked + .bahn { background: var(--accent-2); border-color: var(--accent-2); }
.switch input:checked + .bahn::after { transform: translateX(18px); background: #fff; }
.switch:hover .bahn { border-color: var(--accent-2); }
.switch:active .bahn::after { width: 20px; height: 20px; top: 1px; left: 1px; }
.switch:active input:checked + .bahn::after { width: 20px; height: 20px; top: 1px;
                                              left: -1px; transform: translateX(18px); }
.switch:focus-visible .bahn { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.switch-text { font-weight: 600; }

/* v0.0.116: Einstellungsseite-Buchungswebseite — Toggles stehen im .formular;
   dort überschrieb `.formular label { display:block }` (0-1-1) das flex-Layout
   (0-1-0) → Bahn kollabierte, Knopf lag auf der Beschriftung. Ausnahme: */
.formular label.switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: auto;
  margin: 8px 14px 8px 0;
}
.formular label.switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* ---------- M11.4 Gäste-Inbox ---------- */
.inbox-karte {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  margin: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.inbox-gast { font-size: 1.1em; }
.inbox-kanal { display: flex; align-items: center; gap: 6px; font-size: 0.95em; }
.inbox-aktion { margin-top: 8px; }
.einnahme-erledigt { margin-top: 8px; font-size: 0.92em; }
.inbox-aktion .btn, .inbox-antwort .btn {
  border: 1px solid var(--border);
  background: var(--bg3);
  color: var(--text);
  cursor: pointer;
  padding: 8px 14px;
  border-radius: 6px;
}
.inbox-aktion .btn:hover, .inbox-antwort .btn:hover {
  border-color: var(--accent-2);
  background: var(--bg3);
}
.inbox-verlauf {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 12px 0 20px;
}
.blase {
  max-width: 85%;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--bg3);
  border: 1px solid var(--border);
}
.blase.eingehend { align-self: flex-start; }
.blase.ausgehend {
  align-self: flex-end;
  border: 1px solid var(--accent-2);
  background: var(--bg2);
  text-align: right;
}
.blase-kopf {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.8em;
  opacity: 0.75;
  margin-bottom: 4px;
}
.blase.ausgehend .blase-kopf { flex-direction: row-reverse; }
.blase-text { white-space: pre-wrap; word-break: break-word; }
/* v0.0.183: Chat-Links klickbar — Farbe ERBT die Blase (ausgehend grün/dunkel,
   eingehend dunkel/hell), Unterstreichung als Erkennungsmerkmal. */
.blase-text a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.blase-text a:hover { text-decoration-thickness: 2px; }
.inbox-antwort {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 16px 0;
}
.inbox-antwort textarea {
  width: 100%;
  background: var(--bg2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px;
  font: inherit;
}
.inbox-antwort label { font-weight: 600; }
.leer-hinweis { opacity: 0.8; }

.kalender-nav { display: flex; align-items: center; gap: 0.6em; margin: 0.8em 0; }
/* v1.0.10: Überschrift-Name (Desktop „Belegungskalender“, Handy „Kalender“) + Monats-Navigation in zwei Zeilen */
.kal-txt-desktop { display: inline; }
.kal-txt-mobil { display: none; }
.wohnung-filter select { flex: 1 1 auto; min-width: 0; }
.wohnung-filter { align-items: center; }
.wohnung-filter label { white-space: nowrap; font-weight: 600; align-self: center; display: inline-flex; align-items: center; line-height: 1; }
.kalender-monat-block { display: block; margin: 0.8em 0; }
.kalender-monat-titel { font-size: 1.15rem; font-weight: 600; text-align: center; margin: 0 0 0.45em; }
.kalender-monat-buttons { display: flex; align-items: center; justify-content: space-between; gap: 0.6em; position: relative; }
.kalender-monat-buttons .btn-klein { white-space: nowrap; margin: 0; }
/* v1.0.13: a.heute-symbol (0,1,1) schlägt a.btn-klein inline-block → Flex-Zentrierung greift wirklich;
   padding/line-height des btn-klein raus, sonst sitzt das SVG an der Textbaseline statt mittig (IMG_5940) */
a.heute-symbol, .heute-platzhalter { display: inline-flex; align-items: center; justify-content: center; width: 2.5em; height: 2.5em; padding: 0; line-height: 1; position: absolute; left: 50%; transform: translateX(-50%); }
a.heute-symbol svg { display: block; width: 16px; height: 16px; }
.kalender-titel { font-weight: 700; font-size: 1.1em; min-width: 11em; text-align: center; }
.belegungs-grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.belegungs-grid th { padding: 0.35em 0.2em; font-size: 0.85em; color: var(--muted);
                     border-bottom: 1px solid var(--border); background: var(--bg2); }
.belegungs-grid th.kw-spalte, .belegungs-grid td.kw-spalte { width: 2.6em; text-align: center;
                     color: var(--muted); font-size: 0.8em; background: var(--bg2); }
/* M11.23 (v0.0.79): EIN Balken je Buchung/Blockade pro Woche statt
   Tages-Stücke (Axel-Befund 06.09.: „…als einen Balken erzeugen, Umbruch
   nur wenn Sonntag auf Montag“). Die Woche ist EIN colspan-Td mit
   7er-Grid (Tageszahlen) + absolut positionierten Balken. */
.kal-wochenzelle { border: 1px solid var(--border); padding: 0; vertical-align: top; }
.kal-raster { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); }
.kal-tag-zelle { position: relative; background: var(--bg1);
                 border-left: 1px solid var(--border); }
.kal-tag-zelle:first-child { border-left: none; }
.kal-tag-zelle.fremd { background: var(--bg2); opacity: 0.55; }
.tageszahl { position: absolute; top: 3px; left: 5px; z-index: 3;
             font-size: 0.8em; color: var(--muted); }
/* v1.0.62: Heute-Zelle — grüner Ring (--accent-2). box-shadow statt border,
   damit die Kalenderzellen-Maße unverändert bleiben (Wochenhöhe fest);
   opacity:1 überschreibt fremd-Randzellen (heute in der Nachbarwoche). */
.kal-tag-zelle.heute { box-shadow: inset 0 0 0 2px var(--accent-2);
                       background: var(--bg3); opacity: 1; }
.kal-tag-zelle.heute .tageszahl { color: var(--accent-2); font-weight: 700; }
.buchungs-balken { display: block; color: #f2f4f7; text-decoration: none;
                   font-size: 0.72em; line-height: 1.25; border-radius: 4px; }
.balken-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
                min-width: 0; }
.balken-block-gast { display: flex; justify-content: space-between; gap: 10px;
                     padding: 0 5px; font-weight: 600; }
.balken-block-kanal { padding: 0 5px; font-size: 0.92em; opacity: 0.88; }
.buchungs-balken:hover { outline: 1px solid var(--accent-2); }
.buchungs-balken.storniert { text-decoration: line-through; opacity: 0.55; }
.kal-balken { position: absolute; box-sizing: border-box; overflow: hidden;
              height: 32px; display: flex; flex-direction: column;
              justify-content: center; border-radius: 0; }
.kal-balken.b-anfang { border-radius: 4px 0 0 4px; }
.kal-balken.b-ende { border-radius: 0 4px 4px 0; }
.kal-balken.b-anfang.b-ende { border-radius: 4px; }  /* Ein-Wochen-Buchung (kein So-Mo-Umbruch): alle 4 Ecken — sonst überschreibt .b-ende den linken Radius */
/* Blockaden (v0.0.56, M11.8): dunkel-gestreift, klar von Buchungen unterscheidbar */
.blockade-balken { background: repeating-linear-gradient(45deg, #3d434a 0 6px, #33383e 6px 12px);
                  border: 1px solid #565d66; cursor: default; }
.blockade-balken.blockade-offen { border-color: #a0643f; }
.legende { display: flex; flex-wrap: wrap; gap: 0.8em; align-items: center;
           margin: 0.9em 0 1.2em; color: var(--muted); font-size: 0.9em; }
.legende-titel { font-weight: 600; }
.legende-eintrag { display: inline-flex; align-items: center; gap: 0.35em; }
.farbe-punkt { width: 0.8em; height: 0.8em; border-radius: 3px; display: inline-block; }
.blockade-punkt { background: repeating-linear-gradient(45deg, #3d434a 0 3px, #33383e 3px 6px); }
/* Blockade-Formulare + Verwaltungsliste (v0.0.56, M11.8) */
.blockade-panel { margin: 0.9em 0 1.4em; border: 1px solid var(--border); border-radius: 10px; background: var(--bg2); }
.blockade-panel summary { cursor: pointer; padding: 0.7em 0.9em; font-weight: 600; color: var(--text); }
.blockade-panel summary:hover { color: var(--accent-2); }
.blockade-panel form { margin-bottom: 0; }
.blockade-formen { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; padding: 0.2em 0.9em 0.9em; }
.blockade-form { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--border); border-radius: 10px; padding: 12px; background: var(--bg1); }
.blockade-form label { font-size: 0.85em; color: var(--muted); display: flex; flex-direction: column; gap: 3px; }
.blockade-form input, .blockade-form select { padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg3); color: var(--text); height: 38px; box-sizing: border-box; }
.blockade-form .btn-klein { align-self: flex-start; margin-top: 4px; }
.blockade-titel { font-size: 1.05em; margin: 1.1em 0 0.4em; }
.tabelle-blockaden { width: 100%; border-collapse: collapse; margin-bottom: 1.4em; font-size: 0.9em; }
.tabelle-blockaden th, .tabelle-blockaden td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tabelle-blockaden th { color: var(--muted); font-weight: 600; }
.btn-gefahr { border-color: #7a3a34; color: #e8b4ae; }
.btn-gefahr:hover { outline-color: #c96a60; }

/* M11.30 (v0.0.134): Abgleich-Zeile — Buchung wählen + Zuordnen + Ignorieren
   in EINER Zeile, Dropdown nutzt die verfügbare Breite (Axel-Spezifikation
   „alles in eine Zeile, mehr von der Breite des Bildschirms nutzen"). */
.abgleich-tabelle { table-layout: fixed; width: 100%; }   /* nur Abgleich-Block */
.abgleich-aktionen {
  display: flex; align-items: center; gap: 6px;
  min-width: 0; flex-wrap: nowrap;
}
.abgleich-aktionen form { margin: 0; }
.abgleich-zuordnen-form {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 6px;
  justify-content: flex-end; flex-wrap: nowrap;
}
.abgleich-zuordnen-form select { flex: 1 1 auto; min-width: 160px; }
/* M11.31 (v0.0.135): LANGE Verwendungszwecke/Zahler in der fixen Tabelle
   brechen um, statt überzulaufen (table-layout:fixed bricht sonst nur an
   Spaces — zusammenhängende CAMT-Zwecke quollen über die Zelle). */
.abgleich-tabelle td { overflow-wrap: anywhere; }
/* Ignoriert-Kachel: zuklappbar (details), per Default zu */
.ignoriert-kachel { margin: 1.4em 0; }
.ignoriert-kachel summary {
  cursor: pointer; font-size: 1.1em; font-weight: 600;
  color: var(--text); list-style-position: inside;
}
.ignoriert-kachel summary::marker { color: var(--muted); }
.ignoriert-kachel[open] summary { margin-bottom: 0.6em; }


/* ---- Gäste-Chat (v0.0.52): Konversations-Liste + Chatfenster ---- */
.gaeste-chat { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 16px; align-items: start; }
.chat-liste { display: flex; flex-direction: column; gap: 6px; max-height: 72vh; overflow-y: auto; padding-right: 4px; }
/* v1.0.87 (Axel 26.09.): Desktop — beide Spalten volle Höhe, Unterkanten
   bündig: Kachel-Unterkante == Chatfenster-Unterkante; die Konversationsliste
   nutzt den gesamten Raum über der Kachel (vorher Liste 72vh / Chat nur
   so hoch wie sein Inhalt). Mobile (<861px) bleibt unberührt. */
@media (min-width: 861px) {
  .gaeste-chat { align-items: stretch; height: 100%; }
  .chat-liste { max-height: none; height: 100%; }
  .chat-fenster { min-height: 0; height: 100%; }
  .chat-verlauf { max-height: none; height: auto; }
}

.chat-liste-kopf { font-size: 0.85em; color: var(--muted); margin-bottom: 4px; }
.anfragen-kopf { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 10px; }
/* v0.0.162: Tabs „Buchungen / Anfragen“ in der Gäste-Liste */
.chat-liste-tabs { display: flex; gap: 6px; margin-bottom: 2px; }
.liste-tab { flex: 1; padding: 7px 10px; font-size: 0.85em; font-weight: 600;
             border: 1px solid var(--border); border-radius: 10px; background: transparent;
             color: var(--muted); cursor: pointer; text-align: center; font-family: inherit;
             transition: border-color .15s, background .15s, color .15s; }
.liste-tab:hover:not(.tab-aktiv) { border-color: var(--accent-2, #4ade80); color: var(--text); }
.liste-tab.tab-aktiv { background: var(--bg3); color: #fff; border-color: var(--bg3); }
.tabs-block { display: none; flex-direction: column; gap: 6px; }
.tabs-block.block-sichtbar { display: flex; }
.tabs-block .anfragen-kopf { margin-top: 2px; border-top: none; padding-top: 0; }
.chat-eintrag { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg2); text-decoration: none; color: var(--text); }
.chat-eintrag:hover { border-color: var(--accent-2); }
.chat-eintrag.chat-aktiv { border-color: var(--accent-2); background: var(--bg3); }
.chat-eintrag-kopf { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.chat-eintrag-name { font-weight: 600; }
.chat-eintrag-zeit { font-size: 0.72em; color: var(--muted); white-space: nowrap; }
.chat-eintrag-meta { font-size: 0.8em; color: var(--muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chat-eintrag .nachricht-auszug { font-size: 0.85em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kanal-chip { border: 1px solid var(--muted); border-radius: 999px; padding: 0 8px; font-size: 0.72em; line-height: 1.7; white-space: nowrap; color: #fff; } /* v0.0.52: volle Kanal-Fläche + weiße Schrift (wie Kalender-Balken; Inline-Color setzt Hintergrund) */
.auto-kennung { border: 1px solid var(--accent-2); border-radius: 999px; padding: 0 8px; font-size: 0.72em; line-height: 1.7; white-space: nowrap; color: var(--accent-2); } /* v1.0.94: Heizöl-Einträge/Tankquellen aus dem HA-Automatik-Sync */
.chat-fenster { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 12px; background: var(--bg2); min-height: 62vh; }
.chat-kopf { padding: 12px 16px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; }
.chat-kopf-zeile1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.chat-kopf-zeile2 { font-size: 0.85em; }
.chat-verlauf { flex: 1; padding: 16px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; max-height: 50vh; }
.blase { max-width: 75%; padding: 8px 12px; border-radius: 12px; font-size: 0.92em; }
.blase-ausgehend { align-self: flex-end; background: #0e7a5f; color: #f7faf8; border-bottom-right-radius: 4px; }
/* v1.0.58 (Axel 18.09.): WhatsApp-Stil — dunkles Grün + weiße Schrift; Links
   hell-blau auf Grün (vorher hellblau auf Hellgrün = kaum lesbar). */
.blase-ausgehend .blase-text a { color: #aee9ff; }
.blase-ausgehend .blase-zeit { color: #cfe9df; opacity: 1; }
.blase-ausgehend .blase-haken { color: #cdeee0; }
.blase-eingehend { align-self: flex-start; background: var(--bg3); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.blase-zeit { font-size: 0.7em; opacity: 0.75; margin-top: 4px; text-align: right; }
/* v1.0.16: WhatsApp-Stil „✓ gesendet“ — grau, kein Balken mehr nach dem Senden */
.blase-haken { color: #8b93a3; font-size: 1.05em; font-weight: 700; opacity: 1; }
.chat-eingabe { display: flex; flex-direction: column; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--border); }
.chat-eingabe-zeile { display: flex; gap: 8px; align-items: flex-end; align-self: stretch; justify-content: flex-start; }
.chat-eingabe-zeile .chat-text { flex: 1 1 auto; min-width: 0; }
/* Senden als Icon (Papierflieger, v1.0.5): dunkler Primary-Quadrat, weiße Schrift,
   Hover nur grüner Rahmen, Press 1px nach unten (Axel-Button-Stil) */
.chat-senden {
  flex: 0 0 auto; width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; margin: 0;
  border: 1px solid transparent; border-radius: 10px;
  background: var(--bg3, #20262f); color: #fff; cursor: pointer;
}
.chat-senden:hover { border-color: var(--accent-2, #2fbf71); }
.chat-senden:active { transform: translateY(1px); }
/* Aktionszeile unter dem Eingabefeld: 📷 Foto + ↻ Nachrichten laden, nur Symbole */
.chat-aktionen { display: flex; gap: 8px; align-self: stretch; justify-content: flex-start; }
.chat-aktionen .btn-klein { padding: 3px 10px; font-size: 15px; line-height: 1.2; }
.chat-laden { padding: 0; }
.chat-text {
  flex: 1;
  min-height: 42px;   /* eine Zeile */
  max-height: 126px;  /* ~5–6 Zeilen, dann Scrollbar (Axel 11.09.) */
  resize: none;
  overflow-y: auto;
  margin-top: 0;
}
/* Scrollbar des Eingabefelds im Webdesign (Muster chat-liste/-verlauf, v0.0.188) */
.chat-text::-webkit-scrollbar { width: 8px; height: 8px; }
.chat-text::-webkit-scrollbar-track { background: transparent; }
.chat-text::-webkit-scrollbar-thumb { background: var(--bg3, #20262f); border-radius: 8px; border: 2px solid var(--bg2, #171b22); }
.chat-text::-webkit-scrollbar-thumb:hover { background: var(--accent-2, #2fbf71); }
.chat-text { scrollbar-width: thin; scrollbar-color: var(--bg3, #20262f) transparent; }
.chat-text:focus { border-color: var(--accent-2, #2fbf71); }
.chat-laden { padding: 0 16px 12px; }
@media (max-width: 860px) {
  .gaeste-chat { grid-template-columns: 1fr; }
  .chat-eintrag .nachricht-auszug { white-space: normal; }
}

.chat-liste::-webkit-scrollbar, .chat-verlauf::-webkit-scrollbar { width: 8px; height: 8px; }
.chat-liste::-webkit-scrollbar-track, .chat-verlauf::-webkit-scrollbar-track { background: transparent; }
.chat-liste::-webkit-scrollbar-thumb, .chat-verlauf::-webkit-scrollbar-thumb { background: var(--bg3, #20262f); border-radius: 8px; border: 2px solid var(--bg2, #171b22); }
.chat-liste::-webkit-scrollbar-thumb:hover, .chat-verlauf::-webkit-scrollbar-thumb:hover { background: var(--accent-2, #2fbf71); }
.chat-liste, .chat-verlauf { scrollbar-width: thin; scrollbar-color: var(--bg3, #20262f) transparent; }

/* Gäste-Chat: Fenster füllt exakt zwischen Kopf und Fuß (Axel 05.09.),
   kein Seiten-Scroll mehr — nur die Panes scrollen intern.
   v1.0.1 (12.09.): auch hier einheitliche Seitenbreite 1300px (Axel:
   „Bitte auch die Gäste-Chat-Seite auf diese Breite anpassen") —
   vorher max-width: none (vollbreit, seit 05.09.). */
body.seite-chat { height: 100vh; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
body.seite-chat .kopf { flex: 0 0 auto; }
body.seite-chat .inhalt { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column;
  max-width: 1300px; width: 100%; margin: 0 auto; padding: 6px 12px 0; }
body.seite-chat h1 { font-size: 1.15em; margin: 0 0 6px; }  /* Überschrift kleiner */
body.seite-chat .inhalt > * { flex-shrink: 0; }
body.seite-chat .gaeste-chat { flex: 1 1 auto; min-height: 0; margin-bottom: 16px; }  /* Platz zur Fußzeile */
body.seite-chat .fuss { flex: 0 0 auto; }

/* -------------------------------------------------------------
   Direktbuchungen (M11.8, v0.0.58): Liste + Maske
   Eigene Klassen — keine Übernahme von base-Markup-Namen. */
.nav .nav-drop a.nav-aktiv { color: var(--accent-2); border-bottom: 0; }
.muted-klein { font-size: 0.82em; color: var(--muted, #9aa3b2); }
.aktionen-zeile { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fehler-box {
  background: rgba(224, 108, 95, 0.14);
  border: 1px solid var(--danger, #e06c5f);
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--danger, #e06c5f);
}
.status-ok { color: var(--accent-2, #2fbf71); font-weight: 600; }
.status-todo { color: #d8a13a; font-weight: 600; }
/* v0.0.88 (M11.25): Storno-Status flächig wie Kalender-Balken (Design-Regel) */
.status-gu {
  display: inline-block; padding: 3px 10px; border-radius: 4px;
  background: #c96f4a; color: #fff; font-weight: 600; font-size: 13px;
}
.status-rot {
  display: inline-block; padding: 3px 10px; border-radius: 4px;
  background: #8a3b30; color: #fff; font-weight: 600; font-size: 13px;
}
.direkt-block {
  background: var(--bg2, #171b22);
  border: 1px solid var(--border, #2a313c);
  border-radius: 8px;
  padding: 12px 14px;
  margin: 12px 0;
}
.direkt-block h2 { margin: 0 0 8px; font-size: 1.02em; }
.direkt-zeile { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
/* v1.0.21: Zeitspanne & Gäste (Direktbuchung) — drei Felder gleich breit;
   auf schmalen Handys rutscht „Anzahl Gäste“ in eine eigene Zeile, damit
   Anreise/Abreise nicht mehr überlappen (Axel: „Evtl. Gäste in neue Zeile“). */
.zeitraum-gaeste label { flex: 1 1 0; min-width: 0; }
.zeitraum-gaeste input { width: 100%; box-sizing: border-box; }
@media (max-width: 640px) {
  .zeitraum-gaeste label:nth-child(3) { flex: 1 1 100%; }
  .zeitraum-gaeste label:nth-child(1) { min-width: 0; }
}
/* v1.0.66: Manueller Voucher — Formular als eigene Zeile je Gruppe;
   Desktop: Name/Tage/Anzahl/Button in EINER Zeile, Handy: Name volle Breite,
   Gültigkeit+Anzahl halb/halb nebeneinander, Button volle Breite (Axel-Screenshot
   IMG_6062: „Felder liegen komplett übereinander“). Label-Spalte über dem Input
   (column), Höhe 38 px wie alle Formularfelder; kein Umbruch-Flattertext mehr. */
.voucher-form { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; }
.voucher-form label { display: flex; flex-direction: column; gap: 4px;
  flex: 1 1 8rem; min-width: 0; margin: 0; }
.voucher-form label input { width: 100%; min-width: 0; height: 38px;
  box-sizing: border-box; }
.voucher-form .btn-klein { height: 38px; white-space: nowrap; }
@media (max-width: 640px) {
  .voucher-form label:first-child { flex-basis: 100%; }
  .voucher-form label { flex: 1 1 calc(50% - 8px); }
  .voucher-form .btn-klein { flex: 1 1 100%; }
}
/* v1.0.21: Blockieren-Formular (Kalender) — Von/Bis nebeneinander im 2er-Raster,
   damit die Von-/Bis-Felder auf dem Handy „angepasst“ stehen (Axel 13.09.).
   v1.0.26: min-width:0 + box-sizing — die Date-Felder (native min-width ~150 px)
   ragten auf schmalen Handys in den Nachbar-Track („überlappen leicht, bis
   steht rechts über“, Axel-Screenshot 13.09.); height:38px = Grund-Feld-Höhe
   (Muster direktbuchung_form v1.0.13/14, IMG_5942). */
.von-bis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.von-bis > label { min-width: 0; }
.von-bis input[type=date] { width: 100%; min-width: 0; box-sizing: border-box; }
/* v1.0.26: Safari/iOS-hart — date-Inputs nur mit appearance:none + expliziter
   Höhe/Min-Breite steuerbar (Axel IMG_6021: „immer noch höher, überlappend,
   bis ragt rechts raus“); gilt für Blockieren- UND Direktbuchungs-Formular. */
.blockade-form input[type=date],
.blockade-form input[type=time],
.zeitraum-gaeste input[type=date],
.zeitraum-gaeste input[type=time] {
  -webkit-appearance: none;
  appearance: none;
  height: 38px;
  min-width: 0;
}
.zeitraum-gaeste input, .zeitraum-gaeste select {
  height: 38px; box-sizing: border-box; min-width: 0;
}
.direkt-block label { display: flex; flex-direction: column; gap: 3px; font-size: 0.9em; }
.direkt-block input, .direkt-block select, .direkt-block textarea {
  background: var(--bg1, #0f1115);
  color: var(--text, #e8eaed);
  border: 1px solid var(--border, #2a313c);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 0.95rem;
}
.hinweis-klein { font-size: 0.84em; color: var(--muted, #9aa3b2); margin: 4px 0 8px; }
.summe-gesamt {
  font-size: 1.05em;
  font-weight: 600;
  margin: 10px 0;
  padding: 10px 12px;
  border: 1px dashed var(--border, #2a313c);
  border-radius: 8px;
}
.tabelle-positionen {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0;
}
.tabelle-positionen th {
  text-align: left;
  font-size: 0.82em;
  color: var(--muted, #9aa3b2);
  padding: 4px 8px;
  border-bottom: 1px solid var(--border, #2a313c);
}
.tabelle-positionen td { padding: 4px 8px; }
.tabelle-positionen input {
  width: 100%;
  min-width: 8em;
}
.tabelle-positionen .zeile-summe { white-space: nowrap; }
.tabelle-positionen input[name^="staffel_ab_gaeste"] { max-width: 7em; }
.tabelle-positionen input[name^="pos_menge"] { max-width: 7em; }

/* ---------- Bestätigungs-Modal (v0.0.60): kein Systemfenster ---------- */
.modal-ueberlagerung {
  position: fixed; inset: 0;
  background: rgba(8, 10, 13, 0.74);
  backdrop-filter: blur(3px);
  display: none;
  align-items: center; justify-content: center;
  z-index: 900;
}
.modal-ueberlagerung.offen { display: flex; }
.modal-karte {
  background: var(--bg2);
  border: 1px solid var(--accent-2);
  border-radius: 14px;
  max-width: 430px; width: calc(100% - 32px);
  padding: 22px 24px 20px;
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
  text-align: center;
}
.modal-karte .modal-icon { color: var(--danger); margin-bottom: 10px; display: flex; justify-content: center; }
.modal-karte h3 { margin: 0 0 10px; font-size: 17px; color: var(--text); }
.modal-karte p { margin: 0 0 18px; color: var(--muted); font-size: 14px; line-height: 1.45; }
.modal-aktionen { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.modal-aktionen button {
  font: inherit; font-size: 14px; cursor: pointer;
  border-radius: 8px; padding: 9px 18px;
  background: var(--bg3); color: var(--text);
  border: 1px solid transparent;
}
.modal-aktionen button:hover { border-color: var(--accent-2); }
.modal-aktionen button:active { transform: translateY(1px); }
.modal-aktionen .modal-abbrechen { background: var(--bg1); color: var(--muted); border-color: var(--border); }
.modal-aktionen .modal-abbrechen:hover { border-color: var(--muted); }
.modal-aktionen .modal-ok { color: #fff; }
.modal-aktionen .modal-ok.modal-gefahr { border-color: var(--danger); }
.modal-aktionen .modal-ok.modal-gefahr:hover { border-color: var(--danger); }

/* M11.16: Zahlungsabgleich (Direktbuchungen) */
.status-ausstehend { color: var(--warn, #c99a2e); font-weight: 600; }
.zahlung-form { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.zahlung-form input[type=date],
.zahlung-form input[type=text] { padding: 4px 6px; font-size: 0.8rem;
  background: var(--bg1); color: var(--text); border: 1px solid var(--border);
  border-radius: 4px; }
.zahlung-form .zahlung-ref { width: 130px; }

/* M11.17: Events-Seite — Karte je Event mit Trigger + Toggles + Betreff/Text */
/* v0.0.185 (Axel 11.09.: „Bei Buchung über Plattform – Wohnung 2 ist eine
   Unterkachel in der Kachel 'Event'. So sollst du alle da rein bauen.“):
   Hauptkachel .karte = die Kachel „⚙️ Events“ (bg2); JEDES Event ist eine
   UNTERKACHEL darin — eine Stufe heller (bg3) + hellerer Rand, damit die
   Hauptkachel als Container erkennbar ist und die Events als Kacheln
   erscheinen (vorher bg2 auf bg2 → flache Zeilen). Alle standardmäßig zu. */
.event-karte {
  background: var(--bg3, #232a33);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 10px; padding: 14px 16px; margin-bottom: 14px;
}
/* M11.19 (F5): Karten standardmäßig zugeklappt — summary zeigt nur den Namen */
.event-summary {
  list-style: none; display: flex; align-items: center; gap: 8px;
  cursor: pointer; user-select: none; font-size: 1.05em;
}
.event-summary .event-pfeil {
  display: inline-block; color: var(--accent-2, #2fbf71);
  transition: transform 0.15s ease; font-size: 0.85em;
}
details.event-karte[open] > .event-summary .event-pfeil { transform: rotate(90deg); }
.event-summary-name { font-weight: 600; color: var(--text, #e8eaed); }
details.event-summary::-webkit-details-marker,
.event-summary::-webkit-details-marker { display: none; }
.event-karte-inhalt { margin-top: 12px; }
.event-karte h3 { margin: 0 0 10px; }
.event-karte .muted { font-weight: normal; font-size: 0.85em; color: var(--muted, #9aa3b2); }
.meldung { background: rgba(47, 191, 113, 0.12); border: 1px solid var(--accent-2, #2fbf71);
  color: var(--text, #e8eaed); padding: 8px 12px; border-radius: 8px; margin: 10px 0; }
.wohnung-auswahl { margin: 12px 0 16px; display: flex; gap: 10px; align-items: center; }
.wohnung-auswahl select { max-width: 640px; }  /* breiter, damit lange Objektnamen nicht abgeschnitten werden (Axel 06.09.) */
.event-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.event-name { flex: 1; min-width: 220px; }
.event-channels { display: flex; gap: 18px; flex-wrap: wrap; }
.event-channels .switch, .event-channels-margin .switch { display: inline-flex; }
.trigger-zeile { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 12px; }
.trigger-zeile label { display: flex; flex-direction: column; gap: 4px; font-size: 0.85em; }
.trigger-select { min-width: 190px; }
.offset-input, .uhrzeit-input { max-width: 100px; }
.ausgeblendet { display: none !important; }
.event-texte { display: grid; grid-template-columns: 1fr 3fr; gap: 12px; margin-bottom: 10px; }
.event-texte label { display: flex; flex-direction: column; gap: 4px; font-size: 0.9em; }
.event-form input[type="text"], .event-form textarea { width: 100%; }
.event-form textarea { resize: vertical; }
.ph-chips { display: flex; flex-wrap: wrap; gap: 0.35em; margin-top: 2px; }
.ph-chip { border: 1px solid var(--accent-2, #2fbf71); background: transparent;
           color: var(--accent-2, #2fbf71); font-size: 0.78em; padding: 0.15em 0.5em;
           border-radius: 999px; cursor: pointer; white-space: nowrap; }
.ph-chip:hover { outline: 1px solid var(--accent-2, #2fbf71); }
.switch-hinweis { display: block; font-weight: 400; font-size: 0.8em; color: var(--muted); }
/* v0.0.184: Event-Karten-Button-Reihe (Axel 11.09.: „Räum das Button-Chaos
   auf“) — Speichern + Löschen UNTEN in einer Reihe, gleich groß; Duplizieren
   in der rechten unteren Ecke; doppeltes ⧉ (HTML-summary + ::before) entfernt. */
.event-aktionen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-top: 12px; }
.event-aktionen .btn-klein, .event-aktionen .btn-gefahr-klein { width: 100%; }
.event-aktionen summary { cursor: pointer; color: var(--accent-2, #2fbf71); list-style: none; }
/* Duplizieren: eigene Zeile UNTER der Button-Reihe, rechts (untere Ecke) —
   in der Flex-Reihe hätte margin-left:auto die 1:1-Verteilung verzerrt
   (Layout-Beweis 11.09.: ±13px Differenz). */
.duplizieren { margin-top: 10px; margin-left: auto; width: max-content; }
.duplizieren .duplizieren-form { margin-top: 8px; text-align: left; }
/* Löschen-Button: wie die übrigen Buttons (dunkel, --bg3), aber ROT umrandet
   (Axel 11.09.); Hover NUR Rahmen-Intensivierung (Dark-UI-Konvention). */
.btn-gefahr-klein {
  padding: 6px 12px; font-size: 0.88rem; margin-top: 0;
  background: var(--bg3, #232a33); color: #fff;
  border: 1px solid var(--danger, #e06c5f); border-radius: 8px; cursor: pointer;
}
.btn-gefahr-klein:hover { border-color: #f08b7e; outline: 1px solid #f08b7e; }
/* Optionen-Popup (native <dialog>, mittig im Seitendesign): Kanal-/
   Verhalten-Schalter untereinander statt flex-Zeile — dialog.modal
   label-Regeln (block, margin-bottom) für .switch gezielt überschreiben. */
.event-optionen { max-width: min(92vw, 560px); width: 100%; }
.event-optionen .event-channels { display: grid; gap: 14px; margin: 4px 0 20px; }
.event-optionen label.switch { display: inline-flex; margin-bottom: 0; }
.duplizieren-form { display: grid; gap: 8px; padding: 10px 0 4px; max-width: 380px; }
.duplizieren-form select { max-width: 340px; }
.event-channels-margin { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.event-neu { border-style: dashed; }
@media (max-width: 860px) { .event-texte { grid-template-columns: 1fr; } }

/* Statusnachrichten-OK-Button (v0.0.143, Axel: wie Starface-WebApp) */
.status-ok-btn { margin-left: 0.9em; padding: 0.18em 0.9em; border: 1px solid var(--muted, #9aa3b2);
  border-radius: 6px; background: transparent; color: inherit; font: inherit; font-size: 0.82em;
  cursor: pointer; vertical-align: middle; }
.status-ok-btn:hover { border-color: var(--accent-2, #2fbf71); }

/* Storno-Modal Direktbuchungen (v0.0.148, Axel 08.09.: Popup im Seitendesign) */
.storno-art-wahl { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.8rem 0; }
.storno-option { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.5rem 0.7rem;
  border: 1px solid var(--bg3, #2a2f3a); border-radius: 8px; cursor: pointer; }
.storno-option:has(input:checked) { border-color: var(--accent-2, #2fbf71); }
.storno-option small { color: var(--muted, #9aa3b2); font-size: 0.8em; }
.storno-option input { margin-right: 0; }
.storno-positionen { width: 100%; margin: 0.6rem 0 0.4rem; }
.storno-positionen td { vertical-align: middle; }
.storno-positionen input[type="number"] { width: 5.5rem; padding: 0.25rem 0.4rem; }
.modal-hinweis { font-size: 0.85em; color: var(--muted, #9aa3b2); margin: 0.4rem 0; }
.modal-summe { font-size: 1.05em; margin: 0.5rem 0 0.2rem; }
.storno-bestaetigen { background: var(--bg3, #2a2f3a); color: #fff; }
.storno-bestaetigen:hover { border-color: var(--accent-2, #2fbf71); }

/* v0.0.170 — Schlüsselbox-Zuordnung: ausgegraut ohne Kurzzeit-Status
   (Feld + Button bewusst disabled, Hinweistext erklärt den Grund). */
.igloohome-form select:disabled,
.igloohome-form button:disabled { opacity: 0.5; cursor: not-allowed; }

/* v0.0.180 — Besuchte Links behalten ihre App-Farbe statt Browser-Lila
   (Axel 10.09.: „Farbe für schonmal angeklickte Links weg“); Hover bleibt
   für besuchte Links sichtbar. */
.link:visited,
table a:visited { color: #8fb2e6; }
.link:visited:hover,
table a:visited:hover { color: #aac8f0; }

/* v0.0.181 — Auch Links OHNE Klasse konsistent (Fund: Zugangscodes-
   Hinweis war ein roher <a> → Browser-Lila bei Besuch). Unbesucht und
   besucht = #8fb2e6; nav-Regeln (weiß/aktiv) und die spezifischeren
   link-/hover-/table-a-Regeln oben bleiben unberührt. */
a:link,
a:visited { color: #8fb2e6; }
a:hover { color: #aac8f0; }

/* v0.0.190: Zahlen-Kachel „Letzte 7 Tage“ (Schlüsselbox) — Zähler-Gruppen */
.kachel-zaehler { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem;
  padding: 0.7rem 1rem 0.9rem; align-items: baseline; }
.kachel-zaehler .zaehler { color: var(--text, #c9d1d9); font-size: 0.92rem; }
.kachel-zaehler .zaehler strong { font-size: 1.25rem; margin-right: 0.25rem;
  color: var(--text, #e6edf3); }

/* v0.0.191: Manuell-Formular Zugangscodes — Box -> Bezeichnung -> [Start|Ende] */
/* v0.0.192: Abstände enger (Axel: „Nicht so viel Abstand zwischen den Zeilen“) */
.manuell-form { display: flex; flex-direction: column; gap: .3rem; max-width: 34rem; }
.manuell-form label { font-size: .85rem; }
.manuell-form select, .manuell-form input { width: 100%; margin-top: .05rem; }
.manuell-zeile { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.manuell-zeile label { flex: 1 1 0; min-width: 0; }
.manuell-zeile input { width: 100%; min-width: 0; }
.manuell-form input[type="datetime-local"] { color-scheme: dark; }
.manuell-form .btn { align-self: flex-start; margin-top: .1rem; }

/* v0.0.194: Breite voll nutzen statt anywhere-Umbruch — Datum/IDs/PIN
   bleiben ab Desktop eine Zeile; auf schmalen Screens normaler Umbruch */
.codes-tabelle { table-layout: fixed; width: 100%; }
.codes-tabelle th, .codes-tabelle td { overflow-wrap: break-word; }
.codes-tabelle thead th:last-child,
.codes-tabelle tbody td:last-child { width: 7.5rem; white-space: nowrap; }
@media (min-width: 861px) {
  .codes-tabelle thead th, .codes-tabelle tbody td { white-space: nowrap; }
}
/* v1.0.8: Codes-Tabelle auf dem Handy als Karten (Stacked Rows) —
   table-layout:fixed + 10 Spalten brach auf 390px jede Zelle
   Buchstabe für Buchstabe um („Schlüsselbox" vertikal). */
@media (max-width: 860px) {
  .codes-tabelle { table-layout: auto; }
  .codes-tabelle thead { display: none; }
  .codes-tabelle, .codes-tabelle tbody, .codes-tabelle tr, .codes-tabelle td {
    display: block; width: 100%; box-sizing: border-box;
  }
  .codes-tabelle tr {
    border: 1px solid var(--border); border-radius: 10px;
    padding: 8px 12px; margin-bottom: 10px; background: var(--bg2);
  }
  .codes-tabelle td {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 12px; padding: 3px 0; white-space: normal; width: auto;
  }
  .codes-tabelle td::before {
    content: attr(data-label); flex-shrink: 0;
    color: var(--muted, #9aa3b2); font-size: .8rem;
  }
  .codes-tabelle td:last-child { justify-content: flex-end; padding-top: 6px; }
}

/* v1.0.20: Blockierungen/Direktbuchungen (Kalender) + Buchungen-Tabellen
   auf dem Handy als Karten — gleiches Muster wie .codes-tabelle (v1.0.8):
   thead weg, jede Zeile eine Karte, Label links + Wert rechts je Zelle.
   Nur Seiten mit Klasse .tabelle-mobil (belegungskalender.html,
   buchungen.html); .tabelle-blockaden an anderen Seiten bleibt Tabelle. */
@media (max-width: 860px) {
  .tabelle-mobil thead { display: none; }
  .tabelle-mobil, .tabelle-mobil tbody, .tabelle-mobil tr, .tabelle-mobil td {
    display: block; width: 100%; box-sizing: border-box;
  }
  .tabelle-mobil tr {
    border: 1px solid var(--border, #2a313c); border-radius: 10px;
    padding: 8px 12px; margin-bottom: 10px; background: var(--bg2, #171b22);
  }
  .tabelle-mobil td {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 12px; padding: 3px 0; border-bottom: none; white-space: normal;
  }
  .tabelle-mobil td::before {
    content: attr(data-label); flex-shrink: 0;
    color: var(--muted, #9aa3b2); font-size: .8rem;
  }
  .tabelle-mobil td .zellen-wert { flex: 1 1 auto; min-width: 0; }
  /* Aktionen-Zeile: kein Label, Buttons linksbündig in einer Reihe */
  .tabelle-mobil td.ohne-label { justify-content: flex-start; }
  .tabelle-mobil td.ohne-label::before { content: none; }
  /* v1.0.21: „Weitere Positionen“ (Direktbuchung) als Karten im 2er-Raster:
     Bezeichnung volle Breite, Preis+Menge bzw. Summe+Vorlage nebeneinander,
     ×-Button drunter (Axel: „Evtl. hier auch Kacheln machen“). Die generelle
     .tabelle-mobil-Regel prägt das Label/Wert-Muster je Zelle. */
  .tabelle-positionen.tabelle-mobil tr { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
  .tabelle-positionen.tabelle-mobil td { min-width: 0; }
  .tabelle-positionen.tabelle-mobil td[data-label="Bezeichnung"] { grid-column: 1 / -1; }
  .tabelle-positionen.tabelle-mobil td.ohne-label { grid-column: 1 / -1; justify-content: flex-start; }
  .tabelle-positionen.tabelle-mobil td input[type="text"],
  .tabelle-positionen.tabelle-mobil td input[type="number"] {
    /* v1.0.28: NICHT width:100% (Safari zwingt den Input über die halbe Zelle
       hinaus → Label „Menge“ ragt in die Preiszelle, Feld ragt rechts raus);
       stattdessen begrenzte Breite, füllt die Zell-Zeile sauber aus. */
    width: auto; flex: 1 1 auto; min-width: 0; max-width: 7em;
    box-sizing: border-box;
  }
  .tabelle-positionen.tabelle-mobil td[data-label="Menge"] input { max-width: 5em; }
}

/* -------------------------------------------------------------
   Heute-Übersicht (v1.0.2, Startseite): Ankünfte / Abreisen /
   Gäste im Haus — Karten pro Wohnung, Badges in Dark-UI-Farben. */
.heute-datum { margin-top: -8px; }
.heute-zaehler { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; }
.heute-zahl {
  padding: 4px 12px; border-radius: 999px; font-size: 0.84rem;
  border: 1px solid var(--border, #2a313c); background: var(--bg2, #171b22);
}
.heute-zahl-ankunft { color: var(--accent-2, #2fbf71); border-color: rgba(47, 191, 113, 0.55); }
.heute-zahl-abreise { color: var(--danger, #e06c5f); border-color: rgba(224, 108, 95, 0.55); }
.heute-zahl-aufenthalt { color: #7cb3e8; border-color: rgba(124, 179, 232, 0.55); }
.heute-karte { margin-bottom: 14px; }
.heute-wohnung { font-size: 1.05em; margin: 0 0 4px; }
.heute-ereignis { padding: 10px 0; }
.heute-ereignis + .heute-ereignis { border-top: 1px solid var(--border, #2a313c); }
.heute-badge {
  display: inline-block; padding: 2px 10px; border-radius: 4px;
  font-size: 0.76rem; font-weight: 600;
}
.heute-badge-ankunft { background: rgba(47, 191, 113, 0.16); color: var(--accent-2, #2fbf71); border: 1px solid rgba(47, 191, 113, 0.5); }
.heute-badge-abreise { background: rgba(224, 108, 95, 0.16); color: var(--danger, #e06c5f); border: 1px solid rgba(224, 108, 95, 0.5); }
.heute-badge-aufenthalt { background: rgba(124, 179, 232, 0.16); color: #7cb3e8; border: 1px solid rgba(124, 179, 232, 0.5); }
.heute-ereignis-zeile { display: flex; align-items: center; gap: 10px; margin-top: 5px; flex-wrap: wrap; }
.heute-gast { font-weight: 600; }
.heute-details { color: var(--muted, #9aa3b2); font-size: 0.85rem; margin-top: 4px; }

/* -------------------------------------------------------------
   Mobile Bottom-Navigation (v1.0.2, Airbnb-Stil): fixierte Leiste
   mit 4 Zielen (Heute/Kalender/Buchungen/Chat), nur ≤860px.
   body:has(.bottom-nav) hebt Inhalt + Fußzeile über die Bar. */
.bottom-nav { display: none; }
@media (max-width: 860px) {
  body:has(.bottom-nav) { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
  /* v1.0.6: Header/Inhalt auf dem Handy kompakter */
  .kopf-inhalt { padding: 8px 16px; }
  .kopf-logout { margin: 0; align-items: center; }
  .kopf-logout button { padding: 4px 8px; margin-top: 0; }
  .inhalt { padding: 12px 16px 20px; }
  /* v1.0.35: SMTP-Test-Zeile mobil umbrechen — Desktop-min-widths
     (400/240/160 px) schieben die Profil-Seite auf 390 px auf 610 px
     Überbreite → horizontales Scrollen (Befund 14.09., mess_165). */
  .feld-reihe.smtp-test-zeile { flex-wrap: wrap; }
  .feld-reihe.smtp-test-zeile label,
  .feld-reihe.smtp-test-zeile input {
    flex: 1 1 100%; min-width: 0; max-width: none;
  }
  /* Footer ist fixed (z-index 50) und würde die Bottom-Nav überdecken —
     auf Mobile ausblenden (Airbnb-Stil: die Leiste ersetzt ihn). */
  .fuss { display: none; }
  .bottom-nav {
    display: flex; position: fixed; z-index: 40;
    left: 0; right: 0; bottom: 0;
    height: calc(60px + env(safe-area-inset-bottom, 0px));
    padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    background: var(--bg2, #171b22);
    border-top: 1px solid var(--border, #2a313c);
  }
  .bottom-item {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 3px; text-decoration: none;
    color: var(--muted, #9aa3b2); font-size: 0.68rem; line-height: 1.1;
    border: 0; background: transparent;
  }
  .bottom-item svg { width: 22px; height: 22px; }
  .bottom-item:hover { color: var(--text, #e8eaed); background: rgba(255, 255, 255, 0.045); }
  .bottom-item.bottom-aktiv { color: var(--accent-2, #2fbf71); }
  .bottom-item.bottom-aktiv svg { stroke-width: 2.4; }
}

/* -------------------------------------------------------------
   v1.0.3 (12.09., Axel-Feedback): Header mobil nur 🏠 + Logout,
   Zurück-/Import-Buttons mobil ausblenden, Gäste-Chat: Liste als
   Overlay per Pfeil (Atlas-Muster) + Eingabefeld über der Bar. */
.mobil-aus { }
.kopf-aktionen { display: none; }
.kopf-logout { display: none; }
.kopf-profil { display: none; }
.chat-liste-toggle { display: none; }

@media (max-width: 860px) {
  /* 1. Header: Navigation obsolet (Bottom-Nav), nur Haus-Symbol + Logout */
  .nav { display: none; }
  .marke-text { display: none; }
  /* v1.0.32: Profil neben Logout fest im Header (vorher nur im Konto-Dropdown,
     das mobil ausgeblendet ist) */
  .kopf-aktionen {
    display: flex; align-items: center; gap: 6px; margin-left: auto;
  }
  .kopf-logout { display: flex; align-items: center; margin: 0; }
  .kopf-profil {
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; color: var(--muted, #9aa3b2);
    border: 1px solid var(--border, #2a313c); border-radius: 8px;
    padding: 5px 8px; line-height: 1; text-decoration: none;
  }
  .kopf-profil:hover { color: var(--accent-2, #7fd18a); border-color: var(--accent-2, #7fd18a); }
  /* v1.0.9: Versionsnummer mittig im mobilen Header (Axel-Wunsch) */
  .kopf-version { display: block; }
  /* v1.0.10: Handy-Überschrift „Kalender“ + Start/Ende mobil gestapelt (iOS datetime-local schrumpft nicht unter native Mindestbreite → Überhang) */
  /* v1.0.12: Start/Ende wieder NEBENEINANDER + kompakt (9rem): appearance:none entschärft die iOS-Mindestbreite; wrap-Fallback = Sicherheitsnetz */
  .kal-txt-desktop { display: none; }
  .kal-txt-mobil { display: inline; }
  .manuell-zeile { flex-direction: row; flex-wrap: wrap; }
  .manuell-zeile label { flex: 0 1 9rem; min-width: 0; max-width: 9rem; }
  /* v1.0.14 (IMG_5942): Höhe EXAKT wie andere Felder (font-size 1rem + padding 9px 11px =
     globale input/select-Regel) + gut sichtbares Kalender-Icon (SVG-Data-URI, hellblau #8fb2e6);
     -webkit-appearance:none bleibt (iOS-native Mindestbreite entkoppelt, sonst Wrap-Fallback) */
  .manuell-zeile input[type="datetime-local"] {
    -webkit-appearance: none; appearance: none;
    width: 100%; min-width: 0;
    font-size: 1rem; line-height: normal; padding: 0 34px 0 11px;
    height: 38px; box-sizing: border-box; /* = Bezeichnung-Feld (IMG_5942) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238fb2e6' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='4' width='18' height='17' rx='2'/%3E%3Cpath d='M8 2v4M16 2v4M3 9h18'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 9px center;
    background-size: 17px 17px;
  }
  .kopf-logout button {
    background: transparent; color: var(--muted, #9aa3b2);
    border: 1px solid var(--border, #2a313c); border-radius: 8px;
    padding: 6px 10px; cursor: pointer; line-height: 1;
  }
  .kopf-logout button:hover { color: var(--danger, #e06c5f); border-color: var(--danger, #e06c5f); }

  /* 3.+4. Kalender/Buchungen: Zurück- und CSV-Import-Buttons sind auf dem
     Handy überflüssig (Navigation läuft über die Bottom-Leiste). */
  .mobil-aus { display: none !important; }

  /* 5. Gäste-Chat: Chatliste standardmäßig zu, per Pfeil als Overlay VON LINKS
     (Atlas-Muster Session-Liste); Eingabefeld endet über der Bar. v1.0.4:
     Pfeil links VOR der Sprechblase + Chevron-Right, Liste gleitet von links. */
  .chat-liste-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; padding: 0;  /* padding:0 nötig — sonst gewinnt
    die globale Button-Regel (10px 18px) und das Icon wird auf 0 gequetscht */
    border: 1px solid var(--border, #2a313c);
    border-radius: 8px; background: transparent; color: var(--muted, #9aa3b2);
    cursor: pointer; vertical-align: middle; margin-right: 8px; /* links der 💬-Sprechblase */
  }
  .chat-liste-toggle svg { transition: transform 0.25s ease; }
  .chat-liste-toggle.aktiv svg { transform: rotate(180deg); } /* → ‹ = schließen */
  .chat-liste-toggle:hover,
  .chat-liste-toggle.aktiv { color: var(--accent-2, #2fbf71); border-color: var(--accent-2, #2fbf71); }
  /* v1.0.98 (Live-Befund Axel 29.09.: Buttons/Kachel hinter der Fußzeile):
     iPhone-Home-Bar (safe-area-inset-bottom) in die Panel-Unterkante
     einrechnen — ohne sie endet das Panel um ~23px zu tief in der Nav,
     verdeckt Aktions-Zeile, letzten Listeneintrag und die Mail-Kachel.
     v1.0.99 (Live-Befund Axel 29.09., 01:01): Kachel ragte TROTZ safe-area
     noch ~15–25px in die Fußzeile (Panel-Unterkante == Nav-Oberkante, kein
     Luftspalt) → fester 16px-Puffer zusätzlich zur safe-area. */
  body.seite-chat .gaeste-chat { position: relative; margin-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  /* v1.0.100: E-Mail-Anhänge — Chips unter dem Eingabefeld (Bilder/PDF) */
  .chat-aktionen-spacer { flex: 1 1 auto; }
  .chat-anhaenge { display: flex; flex-wrap: wrap; gap: 6px;
    padding: 2px 12px 4px; max-height: 60px; overflow-y: auto; }
  .anhang-chip { display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 20px; padding: 2px 8px 2px 10px; font-size: 12px;
    color: var(--text, #e8e8e8); max-width: 100%; }
  .anhang-chip .chip-name { overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; }
  .anhang-chip .chip-x { cursor: pointer; opacity: 0.65; font-size: 11px;
    padding: 0 2px; }
  .anhang-chip .chip-x:hover { opacity: 1; color: #ff6b6b; }
  .chat-anhaenge-btn { font-size: 15px; padding: 3px 10px; }
  .chat-liste {
    display: flex;                     /* nie display:none → transform animierbar */
    position: absolute; top: 0; bottom: 0; left: 0;
    width: min(330px, 86vw); max-height: none; z-index: 30;
    background: var(--bg2, #171b22); border: 1px solid var(--border, #2a313c);
    border-radius: 12px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
    padding: 10px 8px;
    transform: translateX(-105%);      /* aus dem Bild nach links */
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: transform 0.28s ease, opacity 0.28s ease, visibility 0s linear 0.28s;
  }
  .gaeste-chat.chat-liste-offen .chat-liste {
    transform: translateX(0); opacity: 1; visibility: visible; pointer-events: auto;
    transition: transform 0.28s ease, opacity 0.28s ease;
  }
  /* Fenster füllt exakt den Platz (kein 62vh-Minimum / 50vh-Verlauf mehr):
     sonst rutscht die Chat-Eingabe hinter die Bottom-Leiste. Der Verlauf
     bekommt die feste Resthöhe und scrollt INNEN (v1.0.4: „kann nicht
     scrollen“ war die fehlende feste Höhe — min-height:0 + overflow-y). */
  body.seite-chat .chat-fenster { min-height: 0; height: 100%; }
  /* Grid-Zelle fest klemmen (statt align-items:start + auto-Zeile): sonst
     wächst das Fenster mit dem Verlauf-INHALT aus der Zelle heraus (v1.0.4-
     Befund: Verlauf/Seite wurden bei langen Chats ~2300px hoch und die
     Eingabe rutschte unter die Bar). */
  body.seite-chat .gaeste-chat { grid-template-rows: minmax(0, 1fr); }
  /* v1.0.21: Obergrenze für das Chat-Fenster — ohne sie wächst das Fenster
     mit dem Verlauf über die .inhalt-Unterkante, und die Aktionszeile
     (📷 / ↻) verschwindet HINTER der Bottom-Nav (Axel 13.09.: „Buttons
     hinter dem Eingabefeld und noch klickbar“). Verlauf scrollt innen. */
  /* v1.0.96: KEINE feste max-height-Kappe mehr — die Klemme übernimmt
     .inhalt (flex) + die minmax(0,1fr)-Grid-Zelle; die alte 141px-Formel
     ließ Eingabefeld/Buttons hinter der Bottom-Nav verschwinden (Axel 28.09.). */
  body.seite-chat .chat-verlauf { max-height: none; flex: 1 1 0%; min-height: 0; overflow-y: auto; }
  body.seite-chat .chat-kopf,
  body.seite-chat .chat-eingabe { flex-shrink: 0; }
}

/* ---- v1.0.34b: Toggle-Switcher (Axel 14.09.: „schöne Toggles, keine
   Checkboxen“ + Ausrichtung) --------------------------------------------
   Zeile: Label links, Toggle-Pill rechts bündig (space-between, fixe
   Breite → alle Schalter liegen auf EINER vertikalen Kante). */
.toggle-zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0.95rem 0;
  cursor: pointer;
  user-select: none;
}
.toggle-zeile .toggle-label-text { flex: 1 1 auto; min-width: 0; }
.toggle {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: 3.1rem;      /* 49,6 px */
  height: 1.75rem;    /* 28 px  */
}
.toggle input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}
.toggle .bahn {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #39414d;
  border: 1px solid #4a5462;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.toggle .knopf {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(1.75rem - 8px);
  height: calc(1.75rem - 8px);
  border-radius: 50%;
  background: #d9dee5;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  transition: transform 0.18s ease;
}
.toggle input:checked ~ .bahn {
  background: var(--accent-2, #2fbf71);
  border-color: var(--accent-2, #2fbf71);
}
.toggle input:checked ~ .knopf { transform: translateX(calc(3.1rem - 1.75rem)); }
.toggle input:focus-visible ~ .bahn { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.toggle input:disabled ~ .bahn { opacity: 0.45; }
.toggle input:disabled ~ .knopf { opacity: 0.7; }

/* ---- v1.0.96: Gäste-Chat mobil (Fixes aus Axel-Report 28.09.) ---- */

/* Das Chat-Panel darf im .inhalt wirklich schrumpfen, damit Eingabefeld und
   Aktions-Buttons (📷/↻) exakt über der Bottom-Nav enden. Die alte
   „.inhalt > * { flex-shrink: 0 }“-Regel blockierte genau das. */
body.seite-chat .inhalt > .gaeste-chat { flex-shrink: 1; min-height: 0; }

/* E-Mail-Kachel (war im HTML, aber völlig ohne Stil → „Kachel ist nicht da“) */
.unzugeordnet-kachel {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 9px 12px;
  border: 1px dashed var(--accent-2, #4caf50); border-radius: 10px;
  background: var(--bg2, #171b22); color: var(--text, #e8edf5);
  font: inherit; text-align: left; cursor: pointer;
}
.unzugeordnet-kachel:hover { border-style: solid; box-shadow: 0 0 0 1px var(--accent-2, #4caf50); }
.uk-icon { font-size: 17px; }
.uk-text { flex: 1; font-size: 13px; }
.uk-zahl {
  background: var(--accent-2, #4caf50); color: #06120a; font-weight: 700;
  border-radius: 999px; min-width: 20px; padding: 1px 7px;
  text-align: center; font-size: 12px;
}
.uk-zahl.uk-leer { background: rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.6); }

/* v1.0.97 (Axel 28.09.): nur EINE Kachel — unten in der Chatliste fixiert
   (wie auf dem PC; keine Duplikate im Chat-Fenster). Sticky hält sie am
   Listen-Boden, auch wenn viele Konversationen scrollen. */
.chat-liste .unzugeordnet-kachel { position: sticky; bottom: 0; }