:root {
  color-scheme: light;
  --surface-1:      #ffffff;
  /* v113 (Hostapia-Rebranding): warmes Creme wie im Logo-Hintergrund. */
  --page-plane:     #f6f3ec;
  --text-primary:   #1a2233;
  --text-secondary: #4c5568;
  --text-muted:     #8b8c95;
  --gridline:       #e8e3d6;
  --baseline:       #c3c2b7;
  --border:         rgba(20,19,15,0.08);
  --series-1:       #2a78d6; /* blue - allgemeine Akzentfarbe + Kalender: Booking.com */
  --series-1-dark:  #1d5db0;
  --series-2:       #eb6834; /* orange/rötlich - Kalender: Airbnb */
  --series-3:       #1baf7a; /* grün - Kalender: Direkt */
  --series-4:       #eda100; /* gelb - Kalender: Expedia */
  --series-7:       #4a3aa7; /* violett - Kalender: Sonstige Kanäle */
  --good:           #0ca30c;
  --critical:       #d03b3b;
  /* v113 (Hostapia): Navy als Haupt-Akzent, Gold als Schmuckfarbe - aus
     dem Logo (goldenes Steuerrad, Navy-Wortmarke "Host", Gold "Api"). Die
     --series-*-Farben bleiben unveraendert (funktionale Kanal-/Diagramm-
     Farben in Kalender & Statistik). */
  --navy:           #1d2c49;
  --navy-deep:      #131f36;
  --gold:           #c8961e;
  --gold-deep:      #9c7212;
  --gold-gradient:  linear-gradient(135deg, #d9ab2e 0%, #a87b12 100%);
  --accent-gradient: linear-gradient(135deg, #2c3f66 0%, #16233f 100%);
  --radius-sm: 8px;
  --radius-md: 13px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(20,19,15,0.05), 0 1px 1px rgba(20,19,15,0.04);
  --shadow-md: 0 6px 20px rgba(20,19,15,0.07), 0 1px 3px rgba(20,19,15,0.05);
  --shadow-lg: 0 16px 48px rgba(20,19,15,0.20);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background:
    radial-gradient(1100px 500px at 15% -10%, rgba(200,150,30,0.07), transparent 60%),
    var(--page-plane);
  background-attachment: fixed;
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}

/* Seit v135 (Wilhelms Wunsch): die Seiten nutzen die VOLLE Browserbreite -
   vorher blieb rechts und links viel Platz frei und breite Tabellen mussten
   seitlich geschoben werden. Reine Lesebereiche behalten trotzdem eine
   angenehme Breite (siehe .app > .detail-note weiter unten). */
.app {
  max-width: none;
  margin: 0 auto;
  padding: 24px 24px 70px;
}

.app-wide {
  max-width: none;
}

/* Fließtext-Kästen und Formularbereiche werden auf sehr breiten Bildschirmen
   nicht unangenehm lang gezogen. */
.app > .detail-note,
.app > section.detail-note {
  max-width: 1100px;
}

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 26px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--gridline);
}

.app-header h1 {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Logo/Wortmarke "Smart Apility" - erscheint im Header jeder Seite. */
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
}
.brand-mark {
  /* Seit v225 ist das Wilhelms echtes Logo als Bild (Rad mit Haus und
     Welle), nicht mehr die Nachzeichnung aus v224. Bei 40 px ist das Haus
     darin noch zu erkennen - darunter wird es zum Fleck, deshalb nicht
     kleiner setzen. */
  flex: 0 0 auto;
  display: block;
  width: 44px;
  height: 44px;
  object-fit: contain;
}

/* Auf der Anmeldeseite steht das Logo als Ganzes - mit Wortzeichen und der
   Zeile darunter. Dort ist Platz dafür, und dort begegnet es einem zuerst. */
.login-logo {
  display: block;
  margin: 0 auto;
  width: auto;
  max-width: 260px;
  height: auto;
}
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.brand-word {
  /* Serifen-Wortmarke wie im Hostapia-Logo. */
  font-family: Georgia, "Times New Roman", serif;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.005em;
  white-space: nowrap;
}
.brand-host {
  color: var(--navy);
}
.brand-api {
  color: var(--gold);
  font-style: italic;
}
.brand-page {
  font-size: 11px;
  font-weight: 700;
  color: var(--gold-deep);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-top: 2px;
}
.brand-slogan {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  margin-top: 3px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.page-nav {
  display: flex;
  gap: 4px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  border-radius: 11px;
  padding: 3px;
}

.page-nav-link {
  display: inline-block;
  padding: 7px 15px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}

.page-nav-link:hover { color: var(--text-primary); }

.page-nav-link.active {
  background: var(--accent-gradient);
  color: #fff;
  box-shadow: 0 2px 8px rgba(19,31,54,0.35);
}

/* Zusammengefasste Nav-Gruppen mit Unterregister (seit v107) - z.B.
   "Buchungen" (mit Statistik als Unterpunkt) und "Organisation" (mit
   Mitarbeiter/Schichtpläne) - hält die Kopfleiste bei vielen Menüpunkten
   übersichtlich. Technisch ein <details>/<summary> genau wie .user-menu. */
.page-nav-group {
  position: relative;
}

summary.page-nav-group-summary {
  cursor: pointer;
  list-style: none;
}

summary.page-nav-group-summary::-webkit-details-marker {
  display: none;
}

summary.page-nav-group-summary::after {
  content: "▾";
  margin-left: 5px;
  font-size: 9px;
  opacity: .7;
}

.page-nav-group[open] > summary.page-nav-group-summary:not(.active) {
  background: var(--page-plane);
  color: var(--text-primary);
}

.page-nav-group-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  min-width: 170px;
  background: var(--surface, #fff);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(20, 30, 50, 0.14);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.page-nav-group-item {
  display: block;
  padding: 8px 10px;
  border-radius: 7px;
  font-size: 13px;
  color: var(--text-primary);
  text-decoration: none;
  white-space: nowrap;
}

.page-nav-group-item:hover { background: var(--page-plane); }

/* Seit v224: Überschriften INNERHALB der Gruppe „Kommunikation". Sechs
   Einträge untereinander liest niemand - oben steht, was du selbst
   schreibst, unten, was Hostapia ohne dich verschickt. Steht nur eine
   Rubrik zur Verfügung (eingeschränkte Rolle), fällt die Überschrift der
   anderen mangels Einträgen ohnehin nicht auf. */
.page-nav-group-titel {
  display: block;
  padding: 8px 10px 3px;
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-secondary, #6b7280);
}
.page-nav-group-titel + .page-nav-group-titel { display: none; }
.page-nav-group-dropdown { min-width: 214px; }

/* Das gezeichnete Rad aus dem Logo (v224). Die Formen liegen in
   templates/_rad.html; hier steht nur, wie sie sich verhalten. */
.hostapi-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.page-nav-group-item.active {
  background: var(--accent-gradient);
  color: #fff;
}

.btn {
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  cursor: pointer;
  background: var(--surface-1);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.btn-primary {
  background: var(--accent-gradient);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 3px 12px rgba(19,31,54,0.32);
}

.btn-secondary {
  background: var(--surface-1);
}

.btn-danger {
  background: #fdf1f1;
  border-color: #e3b3b3;
  color: #a02a2a;
}

.btn-logout {
  background: none;
  box-shadow: none;
  color: var(--text-secondary);
}

.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn:disabled { opacity: .5; cursor: default; transform: none; box-shadow: none; }

.btn-xs {
  font-size: 12px;
  padding: 6px 10px;
}

.invoice-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.invoice-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.invoice-action-btn .icon-svg { flex: 0 0 auto; }

/* Kunden-Spalte: kleiner Farbkreis mit Initialen vor dem Namen (dieselbe
   Grundidee wie der Absender-Kreis in der Webmail, siehe .webmail-avatar) -
   macht die Tabelle auf einen Blick lesbarer, gerade bei vielen Zeilen. */
.invoice-customer-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.invoice-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
}
.invoice-customer-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Unterkunft-Spalte: klickbarer "Chip" mit Haus-Icon - ein Klick filtert die
   ganze Tabelle sofort auf diese Unterkunft (siehe invoices.js, Klick-
   Handler auf .invoice-apartment-chip), als schnellere Alternative zum
   Unterkunft-Dropdown im Suchfenster oben. */
.invoice-apartment-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 3px 7px;
  margin: -3px -7px;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  font: inherit;
  color: var(--text-primary);
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.invoice-apartment-chip:hover {
  background: rgba(42,120,214,0.09);
  color: var(--series-1);
}
.invoice-apartment-chip .icon-svg { flex: 0 0 auto; color: var(--text-muted); }
.invoice-apartment-chip:hover .icon-svg { color: var(--series-1); }
.invoice-apartment-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.invoice-apartment-empty { color: var(--text-muted); }

/* Klein, kompakter Icon-Link ganz links in der Rechnungen-Tabelle, der
   direkt zur passenden Hostaway-Reservierung führt - bewusst als erste
   Spalte, damit er immer sichtbar ist, ohne die Tabelle nach rechts
   scrollen zu müssen. */
.hostaway-icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--series-1);
  font-weight: 700;
  font-size: 11px;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease;
}
.hostaway-icon-link:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
th.col-hostaway, td.col-hostaway { text-align: center; }

/* Ziehbare Spaltenbreiten (Rechnungen-Tabelle): fester Tabellen-Layout-
   Modus, damit die <col>-Breiten wirklich greifen; Inhalte, die nicht
   hineinpassen, werden mit "…" abgeschnitten - genau dafür lässt sich die
   Spalte ja breiter ziehen. */
table.resizable-table {
  table-layout: fixed;
}
table.resizable-table th,
table.resizable-table td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
table.resizable-table thead th {
  position: relative;
}
.col-resizer {
  position: absolute;
  top: 0;
  right: -4px;
  bottom: 0;
  width: 8px;
  cursor: col-resize;
  z-index: 2;
}
.col-resizer:hover {
  background: rgba(200, 150, 30, 0.35);
}
body.col-resizing {
  cursor: col-resize;
  user-select: none;
}
body.col-resizing .col-resizer {
  background: rgba(200, 150, 30, 0.5);
}

.error-banner {
  background: #fdecea;
  border: 1px solid var(--critical);
  color: var(--critical);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
  font-size: 14px;
  box-shadow: var(--shadow-sm);
}
.hidden { display: none !important; }

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: end;
  background: var(--surface-1);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-md);
  padding: 18px;
  margin-bottom: 22px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field label {
  font-size: 12px;
  color: var(--text-secondary);
}

.field input[type="date"],
.field input[type="month"],
.field input[type="text"],
.field select,
.field textarea {
  font-family: inherit;
  font-size: 14px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--baseline);
  background: var(--surface-1);
  color: var(--text-primary);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.field textarea {
  resize: vertical;
  min-height: 70px;
}

.field input[type="date"]:focus,
.field input[type="month"]:focus,
.field input[type="text"]:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--series-1);
  box-shadow: 0 0 0 3px rgba(42,120,214,0.15);
}

.field-verteilung-gruppe {
  flex-basis: 100%;
}

.verteilung-tage-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.verteilung-tag {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 44px;
}

.verteilung-tag-label {
  font-size: 11px;
  color: var(--text-secondary);
}

.verteilung-tag input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  font-family: inherit;
  font-size: 14px;
  padding: 8px 4px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--baseline);
  background: var(--surface-1);
  color: var(--text-primary);
}

.verteilung-tag input[type="text"]:focus {
  outline: none;
  border-color: var(--series-1);
  box-shadow: 0 0 0 3px rgba(42,120,214,0.15);
}

/* Seit v93: Live-Summenanzeige unter der Wochentage-Zeile (siehe employees.js
   wireVerteilungValidierung) - zeigt "Summe: X von Y Std." an und färbt sich
   rot, sobald die eingetragenen Wochentage-Stunden nicht exakt der
   vereinbarten wöchentlichen Arbeitszeit entsprechen (Wilhelms Wunsch:
   "exakt nur 10 Stunden, nicht weniger oder mehr"). Bleibt neutral, solange
   keine wöchentliche Arbeitszeit eingetragen ist. */
.verteilung-summe {
  flex-basis: 100%;
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 2px;
}
.verteilung-summe.verteilung-ok {
  color: var(--positive, #1e8e3e);
  font-weight: 600;
}
.verteilung-summe.verteilung-fehler {
  color: var(--critical);
  font-weight: 600;
}
.verteilung-tag input.verteilung-tag-fehler {
  border-color: var(--critical);
  background: rgba(220,53,69,0.06);
}

.checkbox-field label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-secondary);
}

.search-field input { min-width: 220px; }

/* Rechnungen-Seite: überarbeitetes, übersichtlicheres Suchfenster - Suchfeld
   mit Lupen-Icon links im Eingabefeld, plus Unterkunft-Dropdown und
   "Zurücksetzen"-Button in derselben Filterleiste (siehe invoices.html/js). */
.invoice-filters { align-items: end; }
.invoice-search-field { flex: 1 1 260px; min-width: 220px; }
.invoice-filters-reset-field,
.invoice-filters-count-field { justify-content: flex-end; }

.input-icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.input-icon-wrap .input-icon {
  position: absolute;
  left: 10px;
  display: inline-flex;
  color: var(--text-muted);
  pointer-events: none;
}
.input-icon-wrap input[type="text"] {
  width: 100%;
  padding-left: 32px;
}

.invoice-filters-reset-field .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.result-count-badge {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--page-plane);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

.cal-channel-filters {
  padding: 10px 18px;
  margin-top: -12px;
}
.channel-filter-field {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 18px;
}
.channel-filter-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
}
.channel-filter-label input[type="checkbox"] { accent-color: var(--text-secondary); }
.channel-cat-booking input[type="checkbox"] { accent-color: var(--series-1); }
.channel-cat-airbnb input[type="checkbox"] { accent-color: var(--series-2); }
.channel-cat-expedia input[type="checkbox"] { accent-color: var(--series-4); }
.channel-cat-direct input[type="checkbox"] { accent-color: var(--series-3); }
.channel-cat-other input[type="checkbox"] { accent-color: var(--series-7); }

.kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}

.kpi-tile {
  position: relative;
  background: var(--surface-1);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  overflow: hidden;
  transition: box-shadow .15s ease, transform .15s ease;
}
.kpi-tile:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }

.kpi-tile::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--series-1);
}
.kpi-tile:nth-of-type(2)::before { background: var(--series-3); }
.kpi-tile:nth-of-type(3)::before { background: var(--series-4); }
.kpi-tile:nth-of-type(4)::before { background: var(--series-7); }

.kpi-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.kpi-value {
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: proportional-nums;
}

.kpi-note {
  font-size: 12px;
  color: var(--text-muted);
  margin: -12px 0 24px;
  max-width: 720px;
  line-height: 1.5;
}

.chart-section {
  background: var(--surface-1);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-md);
  padding: 18px 22px;
  margin-bottom: 24px;
}

.chart-section h2 {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0 0 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.table-section {
  background: var(--surface-1);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-md);
  padding: 8px 0;
  overflow-x: auto;
  margin-bottom: 24px;
}

.section-heading {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-secondary);
  margin: 0 0 12px;
}

.section-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.section-heading-row .section-heading {
  margin: 0;
}

.add-link-btn {
  background: none;
  border: none;
  color: var(--gold-deep);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  padding: 4px 2px;
  white-space: nowrap;
}

.add-link-btn:hover { text-decoration: underline; }

/* --- "Mitarbeiterorganisation"-Kopfzeile: Button links (Arbeitgeber-Profile) /
   Überschrift mittig / Button rechts (Arbeitsvertragsmuster) - öffnen jeweils
   das dazugehörige Fensterchen, statt die Abschnitte dauerhaft anzuzeigen. */
.mitarbeiterorg-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 28px 0 18px;
}

.mitarbeiterorg-header .section-heading {
  text-align: center;
  flex: 1 1 auto;
}

/* --- Modale ("kleines Fensterchen") für Anlegen/Bearbeiten-Formulare ------ */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 19, 15, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1000;
}

.modal-overlay.hidden { display: none !important; }

.modal-box {
  position: relative;
  background: var(--surface-1);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 24px;
  width: 100%;
  max-width: 760px;
  max-height: 88vh;
  overflow-y: auto;
}

.modal-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 14px;
  padding-right: 28px;
}

.modal-subtitle {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  margin: 0 0 8px;
}

.modal-close-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  background: none;
  border: none;
  font-size: 20px;
  line-height: 1;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px 8px;
}

.modal-close-btn:hover { color: var(--text-primary); }

/* --- Unterschriften-Fenster (seit v90) --------------------------------------
   Digitale Unterschrift per Zeichenfeld (siehe signature-pad.js) - wird an
   ZWEI Stellen gebraucht: im öffentlichen Mitarbeiter-Wizard (Mitarbeiter
   unterschreibt beim Abschicken) UND auf der Mitarbeiter-Seite bei Wilhelm
   ("Unterschreiben und anlegen", seine eigene Gegen-Unterschrift) - deshalb
   hier zentral statt in einem der beiden seitenspezifischen CSS-Dateien. */
.signature-pad-wrap {
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  margin-bottom: 14px;
  overflow: hidden;
}
.signature-pad-canvas {
  display: block;
  width: 100%;
  height: 200px;
  cursor: crosshair;
}
.signature-pad-hint {
  font-size: 13px;
  color: var(--text-muted);
  margin: -6px 0 16px;
}
.signature-modal-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Badge im "Eingeladen"-Tabelle, wenn ein Mitarbeiter bereits
   abgeschickt+unterschrieben hat und nur noch auf Wilhelms eigene
   Unterschrift wartet (siehe employees.js: renderPendingInvitations). */
.badge-warten {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(214, 158, 46, 0.14);
  color: #8a5a00;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}

/* --- Arbeitsvertragsmuster-Editor: komplettes Vertragsformular + Platzhalter-Panel --- */

.modal-box-wide {
  max-width: 1180px;
}

/* --- Smarter Upload: Vorschau links, Bearbeitung rechts (seit v87) --- */

/* Seit v89: eigenes, größeres Format speziell für dieses Modal (statt nur
   der allgemeinen .modal-box-wide) - Wilhelm empfand die Vorschau als zu
   klein, um ein gescanntes Dokument bequem zu lesen. */
#smart-upload-modal-box.modal-box-wide {
  max-width: 1420px;
  max-height: 94vh;
}

.smart-upload-step2-layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.smart-upload-step2-preview-col {
  flex: 1 1 62%;
  min-width: 0;
}

.smart-upload-step2-form-col {
  flex: 1 1 38%;
  min-width: 0;
}

.smart-upload-preview-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

/* Seit v100: zusätzliche KI-Einschätzung im smarten Upload (siehe
   ai_document_analysis.py) - bewusst optisch von der bisherigen, schlichten
   "Erkannt als: ..."-Zeile abgesetzt (eigener Kasten mit violettem Akzent,
   passend zur bestehenden --series-7-Farbe), damit auf einen Blick klar
   ist, dass das ein ZUSÄTZLICHER, separater Vorschlag ist. */
.smart-upload-ki-box {
  background: rgba(74,58,167,0.06);
  border: 1px solid rgba(74,58,167,0.25);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 14px;
}
.smart-upload-ki-box-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.smart-upload-ki-badge {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--series-7);
}

#smart-upload-preview-box {
  border: 1px solid var(--border-color, #ddd);
  border-radius: var(--radius-md);
  min-height: 320px;
  height: 100%;
  max-height: 84vh;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fafafa;
}

#smart-upload-preview-iframe {
  width: 100%;
  height: 82vh;
  border: 0;
  /* Zoom-Ausgangspunkt oben links, siehe smartUploadWendeZoomAn() in
     smartcloud.js - die "zoom"-CSS-Eigenschaft (statt transform: scale())
     lässt den Scroll-Container in #smart-upload-preview-box die vergrößerte
     Größe korrekt mitverfolgen. */
  transform-origin: top left;
}

#smart-upload-preview-img {
  max-width: 100%;
  max-height: 82vh;
  transform-origin: top left;
}

@media (max-width: 1100px) {
  .smart-upload-step2-layout {
    flex-direction: column;
  }
  #smart-upload-preview-box, #smart-upload-preview-iframe, #smart-upload-preview-img {
    max-height: 45vh;
  }
}

/* --- Mehrteiliger smarter Upload: eine Karte pro erkanntem Teilstück (seit
   v103, siehe #smart-upload-step2-multi in smartcloud.html) --- */
#smart-upload-multi-teile {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 10px;
}

.smart-upload-multi-teil-card {
  border: 1px solid var(--border-color, #ddd);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}

.smart-upload-multi-teil-head {
  margin-bottom: 10px;
}

.smart-upload-multi-teil-body {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

.smart-upload-multi-teil-preview {
  flex: 1 1 45%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.smart-upload-multi-teil-iframe {
  width: 100%;
  height: 320px;
  border: 1px solid var(--border-color, #ddd);
  border-radius: var(--radius-sm);
}

.smart-upload-multi-teil-fields {
  flex: 1 1 55%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media (max-width: 900px) {
  .smart-upload-multi-teil-body {
    flex-direction: column;
  }
  .smart-upload-multi-teil-iframe {
    height: 260px;
  }
}

/* Seit v123: drei Spalten - Abschnitte | Live-PDF-Vorschau | Platzhalter -
   und ein größeres Fenster (wie der Fassungs-Editor seit v119), damit die
   Vorschau rechts wirklich lesbar ist. */
#muster-modal-box {
  max-width: 1560px;
  max-height: 94vh;
}

.muster-editor-layout {
  display: grid;
  /* Seit v132: schmale Platzhalter-Chip-Spalte - die frei gewordene Breite
     bekommt die PDF-Vorschau (mittlere Spalte deutlich breiter). */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) 170px;
  gap: 18px;
  margin-top: 16px;
  align-items: start;
}

@media (max-width: 1100px) {
  .muster-editor-layout {
    grid-template-columns: 1fr;
  }
}

.muster-editor-abschnitte {
  max-height: 66vh;
  overflow-y: auto;
  padding-right: 4px;
}

.muster-vorschau-spalte {
  min-width: 0;
  position: sticky;
  top: 0;
}

#muster-vorschau-iframe {
  width: 100%;
  height: 60vh;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  background: #fafafa;
}

/* Professionellere Muster-Übersicht (v123) */
.muster-uebersicht-tabelle .muster-name {
  font-weight: 700;
  color: var(--navy, #1d2c49);
}

.muster-uebersicht-tabelle .muster-beschreibung {
  display: block;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--text-muted);
  white-space: normal;
  margin-top: 2px;
}

.muster-typ-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: rgba(29, 44, 73, 0.08);
  color: var(--navy, #1d2c49);
}

.muster-typ-badge.eigenes {
  background: rgba(200, 150, 30, 0.14);
  color: var(--gold-deep, #9c7212);
}

.muster-editor-abschnitte {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.muster-abschnitt-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.muster-abschnitt-field label {
  font-weight: 700;
  font-size: 13px;
  color: var(--text-primary);
}

.muster-abschnitt-field textarea {
  width: 100%;
  font: inherit;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  resize: vertical;
}

.muster-reset-btn {
  align-self: flex-start;
}

.muster-fest-details {
  margin-top: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  padding: 10px 12px;
  background: var(--surface-2, #f7f7f5);
}

.muster-fest-details summary {
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
}

.muster-fest-text {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 12.5px;
  color: var(--text-secondary);
}

.muster-fest-text .muster-fest-heading {
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.muster-platzhalter-panel {
  position: sticky;
  top: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  padding: 12px 14px;
  background: var(--surface-2, #f7f7f5);
  max-height: 70vh;
  overflow-y: auto;
}

.muster-platzhalter-panel h4 {
  margin: 0 0 6px;
  font-size: 13px;
}

.muster-platzhalter-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.muster-platzhalter-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 5px 7px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  font: inherit;
}

.muster-platzhalter-item:hover {
  border-color: var(--accent, #23c6c8);
}

.muster-platzhalter-item code {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent, #1a8f91);
  white-space: nowrap;
}

.muster-platzhalter-item .muster-platzhalter-label {
  font-size: 11.5px;
  color: var(--text-secondary);
  flex: 1;
}

.muster-platzhalter-item .muster-copy-icon {
  font-size: 13px;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.muster-platzhalter-item.copied .muster-copy-icon::after {
  content: "✓";
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

thead th {
  text-align: left;
  padding: 11px 14px;
  color: var(--text-secondary);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: var(--page-plane);
  border-bottom: 1px solid var(--gridline);
  cursor: pointer;
  white-space: nowrap;
}

thead th:hover { color: var(--text-primary); }

/* Kleine Icon-Bibliothek, die an mehreren Stellen eingesetzt wird (z.B.
   Rechnungen-Tabelle: Spaltenüberschriften, Suchfeld, Zurücksetzen-Button,
   Zeilen-Icons - siehe invoices.js ICON_SVGS/initStaticIcons). Immer
   "currentColor", damit ein Icon automatisch die Textfarbe der jeweiligen
   Stelle übernimmt, statt fest eingefärbt zu sein. */
.icon-svg { width: 13px; height: 13px; display: block; }
.th-icon {
  display: inline-flex;
  margin-right: 6px;
  vertical-align: -2px;
  color: var(--text-muted);
}
thead th:hover .th-icon { color: var(--series-1); }

thead th.sorted::after {
  content: attr(data-dir);
  margin-left: 4px;
  color: var(--series-1);
}

tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--gridline);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

tbody tr.booking-row {
  cursor: pointer;
  transition: background .1s ease;
}

tbody tr.booking-row:nth-child(4n+1) {
  background: rgba(20,19,15,0.012);
}

tbody tr.booking-row:hover {
  background: rgba(42,120,214,0.06);
}

tbody tr.detail-row td {
  background: var(--page-plane);
  cursor: default;
  padding: 18px 22px;
}

.detail-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  white-space: normal;
}

.detail-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 18px;
}

.detail-group-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 0 0 8px;
}

.detail-field {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px dashed var(--gridline);
  font-size: 13px;
}
.detail-field:last-child { border-bottom: none; }

.detail-field-label { color: var(--text-secondary); }
.detail-field-value {
  color: var(--text-primary);
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.detail-field-value.muted { color: var(--text-muted); font-weight: 400; }

.detail-note {
  background: var(--page-plane);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 13px;
  color: var(--text-secondary);
}

.source-toggle {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.source-toggle-btn {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

.source-toggle-btn.active {
  background: var(--accent-gradient);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(19,31,54,0.35);
}

.field input[type="file"] {
  font-family: inherit;
  font-size: 13px;
  padding: 6px 0;
  color: var(--text-primary);
}

.detail-messages {
  border-top: 1px solid var(--gridline);
  padding-top: 14px;
}

.chat-thread {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 340px;
  overflow-y: auto;
  padding: 4px 2px;
}

.chat-hint {
  margin: 4px 0;
  font-size: 13px;
  color: var(--text-muted);
}
.chat-hint.chat-error { color: var(--critical); }

.chat-bubble {
  max-width: 78%;
  padding: 9px 13px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

.chat-bubble.chat-in {
  align-self: flex-start;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
  color: var(--text-primary);
}

.chat-bubble.chat-out {
  align-self: flex-end;
  background: var(--series-1);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.chat-subject {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  opacity: 0.75;
  margin-bottom: 4px;
}

.detail-raw {
  border-top: 1px solid var(--gridline);
  padding-top: 10px;
}
.detail-raw summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--text-muted);
  user-select: none;
}
.detail-raw pre {
  margin: 10px 0 0;
  white-space: pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: var(--text-secondary);
  max-height: 260px;
  overflow: auto;
}

.country-row { cursor: pointer; transition: background .1s ease; }
.country-row:hover { background: rgba(42,120,214,0.06); }

.country-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--text-muted);
  transition: transform .15s ease;
}
.country-row.expanded .country-toggle { transform: rotate(90deg); color: var(--series-1); }

.country-detail-row td {
  background: var(--page-plane);
  padding: 14px 18px 18px;
}

/* Dasselbe Auf-/Zuklapp-Prinzip wie oben (.country-*), seit v90 auch für die
   "Aktive Mitarbeiter"-Tabelle (siehe employees.js: renderActiveInvitations,
   Wilhelms Punkt 4: schmalere Tabelle, Aktionen erst nach Klick auf die
   Zeile sichtbar). */
.employee-row { cursor: pointer; transition: background .1s ease; }
.employee-row:hover { background: rgba(42,120,214,0.06); }

.employee-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--text-muted);
  transition: transform .15s ease;
}
.employee-row.expanded .employee-toggle { transform: rotate(90deg); color: var(--series-1); }

/* Seit v105 (Wilhelms Wunsch: Kürzel + zufällig zugeteilte Farbe, dieselbe
   wie auf der Schichtpläne-Seite, siehe schichtplan_store.farbe_fuer) - eine
   kleine, fett beschriftete Farb-Badge in der Mitarbeiter-Übersicht, analog
   zu .mitarbeiter-chip-kuerzel dort, nur kompakter für eine Tabellenzelle. */
.mitarbeiter-kuerzel-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 26px;
  padding: 0 6px;
  border-radius: 999px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.employee-detail-row td {
  background: var(--page-plane);
  padding: 14px 18px 18px;
}

/* Seit v90 (Wilhelms Rückmeldung "sieht total unübersichtlich aus"): die
   aufgeklappte Detailzeile gliedert sich klar in Stammdaten-Felder oben und
   danach zwei beschriftete Abschnitte ("Dokumente"/"Aktionen") mit Abstand
   dazwischen, statt alles ungeordnet untereinander zu zeigen. */
.employee-detail-felder {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.employee-detail-abschnitt {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--gridline);
}
.employee-detail-titel {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  margin: 0 0 8px;
}

.mini-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  background: var(--surface-1);
  border: 1px solid var(--gridline);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.mini-table th {
  text-align: left;
  padding: 8px 12px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  background: var(--page-plane);
  border-bottom: 1px solid var(--gridline);
  white-space: nowrap;
}
.mini-table td {
  padding: 7px 12px;
  border-bottom: 1px solid var(--gridline);
  white-space: nowrap;
}
.mini-table tr:last-child td { border-bottom: none; }

.empty-row {
  text-align: center;
  color: var(--text-muted);
  padding: 30px !important;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.match-by-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  background: rgba(12,163,12,0.12);
  color: var(--good);
  white-space: nowrap;
}
.status-ok { background: rgba(12,163,12,0.12); color: var(--good); }
.status-cancelled { background: rgba(208,59,59,0.12); color: var(--critical); }
.status-other { background: var(--gridline); color: var(--text-secondary); }
.status-warning { background: rgba(237,161,0,0.15); color: #8a6000; }

.pagination {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
  padding: 12px 16px;
  font-size: 13px;
  color: var(--text-secondary);
}

.pagination button {
  font-family: inherit;
  font-weight: 600;
  border: 1px solid var(--baseline);
  background: var(--surface-1);
  border-radius: var(--radius-sm);
  padding: 5px 12px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease;
}
.pagination button:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--shadow-md); }

.pagination button:disabled {
  opacity: 0.4;
  cursor: default;
  box-shadow: none;
}

@media (max-width: 720px) {
  .kpis { grid-template-columns: repeat(2, 1fr); }
}

/* ------------------------------------------------------------------ */
/* Kalender-Ansicht                                                    */
/* ------------------------------------------------------------------ */
.cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  margin: -6px 0 16px;
  font-size: 12px;
  color: var(--text-secondary);
}
.cal-legend-item { display: flex; align-items: center; gap: 6px; }
.cal-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.cal-dot-blocked {
  background: repeating-linear-gradient(45deg, #c3c2b7, #c3c2b7 2px, #ffffff 2px, #ffffff 4px);
  border: 1px solid var(--baseline);
}

.cal-wrapper {
  background: var(--surface-1);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.cal-scroll {
  overflow: auto;
  max-height: 74vh;
}

.cal-loading {
  padding: 60px 20px;
  text-align: center;
  color: var(--text-muted);
}

.cal-grid { min-width: max-content; }

.cal-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--surface-1);
  box-shadow: 0 2px 6px rgba(20,19,15,0.05);
}

.cal-header-row { display: flex; }

.cal-corner {
  position: sticky;
  left: 0;
  z-index: 6;
  width: 180px;
  min-width: 180px;
  flex: 0 0 180px;
  background: var(--surface-1);
  border-bottom: 1px solid var(--gridline);
  border-right: 1px solid var(--gridline);
}

.cal-month-cell {
  flex: 0 0 auto;
  padding: 9px 10px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.01em;
  background: var(--page-plane);
  border-bottom: 1px solid var(--gridline);
  border-left: 1px solid var(--gridline);
  white-space: nowrap;
}

.cal-day-cell {
  flex: 0 0 var(--day-w, 92px);
  width: var(--day-w, 92px);
  text-align: center;
  padding: 7px 4px;
  font-size: 12px;
  border-bottom: 1px solid var(--gridline);
  border-left: 1px solid var(--gridline);
  color: var(--text-secondary);
  transition: background .15s ease;
}
.cal-day-cell.weekend { color: var(--series-1); background: var(--page-plane); }
.cal-day-cell.today { background: rgba(42,120,214,0.07); }
.cal-day-cell .cal-weekday { display: block; font-size: 11px; margin-bottom: 3px; letter-spacing: 0.03em; text-transform: uppercase; }
.cal-day-cell .cal-day-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  font-weight: 600;
  color: var(--text-primary);
  transition: background .15s ease, box-shadow .15s ease;
}
.cal-day-cell.today .cal-day-number { background: var(--series-1); color: #fff; box-shadow: 0 2px 6px rgba(42,120,214,0.4); }

.cal-row { display: flex; border-bottom: 1px solid var(--gridline); transition: background .1s ease; }
.cal-row:nth-of-type(even) { background: rgba(20,19,15,0.012); }
.cal-row:hover { background: rgba(42,120,214,0.035); }
.cal-row:hover .cal-row-name { background: var(--page-plane); }
.cal-row.cal-row-dragging { opacity: 0.45; }
.cal-row.cal-row-dragover { box-shadow: inset 0 2px 0 var(--series-1), inset 0 -2px 0 var(--series-1); }

.cal-row-name {
  flex: 0 0 180px;
  width: 180px;
  min-width: 180px;
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--surface-1);
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  border-right: 1px solid var(--gridline);
  cursor: grab;
}
.cal-row-name:active { cursor: grabbing; }

.cal-row-drag-handle {
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1;
  flex: 0 0 auto;
  user-select: none;
}

.cal-row-name-text {
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal-row-days {
  position: relative;
  flex: 0 0 auto;
}

.cal-daybg {
  position: absolute;
  top: 0;
  bottom: 0;
  border-left: 1px solid var(--gridline);
}
.cal-daybg.weekend { background: rgba(20,19,15,0.018); }
.cal-daybg.today { background: rgba(42,120,214,0.05); }

.cal-bar {
  position: absolute;
  border-radius: 9px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(11, 11, 11, 0.18), inset 0 1px 0 rgba(255,255,255,0.18);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.cal-bar:hover {
  filter: brightness(0.95);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(11, 11, 11, 0.22), inset 0 1px 0 rgba(255,255,255,0.18);
}

.cal-bar-badge {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  flex: 0 0 auto;
}

/* Seit v162: P / L / E statt Sanduhr und Kanalbuchstabe. Wilhelm: "Mach
   lieber P für Parkplatz oder L für Late Check-out als Symbol oder E für
   Early Check-in. Aber nicht A oder B für was?" - der Kanal steht ohnehin in
   der Balkenfarbe und in der Legende. */
.cal-bar-mark {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  font-weight: 800;
  flex: 0 0 auto;
  background: #fff;
  color: #1d2c49;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}
.cal-bar-mark-p { background: #f5c542; color: #4a3600; }
.cal-bar-mark-l { background: #ffffff; color: #1d2c49; }
.cal-bar-mark-e { background: #b8f0d4; color: #0b4d31; }
.cal-bar-mark-z { background: #d9d0f2; color: #34257a; }
/* Seit v180: N wie Nichtanreise - dunkelgrau, damit es als Entwertung und
   nicht als weiterer Verkauf gelesen wird. */
.cal-bar-mark-n { background: #55534c; color: #fff; }
/* Verkauft, aber noch nicht im Stellplatzkalender: hohl statt gefüllt. */
.cal-bar-mark.offen {
  background: transparent;
  color: #fff;
  border: 1.5px dashed rgba(255, 255, 255, .85);
  box-shadow: none;
}

/* Die Vorauswahl im Rechnungsfenster (v180). */
.re-noshow { background: #fbf7ef; border: 1px solid #e8ddc4; border-radius: 13px;
             padding: 14px 17px; }
.re-noshow.hidden { display: none; }
.re-noshow-kopf { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; }
.re-noshow-kopf b { font-size: 14.5px; color: var(--text-primary, #1d2c49); }
.re-marke { background: #55534c; color: #fff; border-radius: 6px; font-size: 10.5px;
            font-weight: 800; padding: 2px 7px; }
.re-wahl { display: flex; gap: 10px; margin-top: 11px; flex-wrap: wrap; }
.re-wahl-k { flex: 1 1 230px; border: 1px solid var(--border, #e5e3da); background: #fff;
             border-radius: 12px; padding: 11px 14px; cursor: pointer; text-align: left;
             font-family: inherit; }
.re-wahl-k.an { border-color: var(--text-primary, #1d2c49);
                box-shadow: 0 0 0 2px rgba(29,44,73,.13); }
.re-wahl-k b { display: block; font-size: 13.5px; color: var(--text-primary, #1d2c49); }
.re-wahl-k em { display: block; font-style: normal; font-size: 12px;
                color: var(--text-secondary); margin-top: 3px; line-height: 1.45; }
.re-wahl-k .betrag { display: block; margin-top: 6px; font-size: 12.5px;
                     font-weight: 800; color: #0b6b45; }

/* Der Kasten im Buchungsfenster (v180): wer hat gemeldet, wann und warum. */
.cal-na-kasten { display: flex; gap: 13px; align-items: flex-start;
                 background: #fdf4f2; border: 1px solid #f0d6cf; border-radius: 13px;
                 padding: 13px 16px; margin: 12px 0; }
.cal-na-sym { font-size: 21px; line-height: 1.2; }
.cal-na-titel { margin: 0 0 3px; font-size: 14.5px; font-weight: 800; color: #7a1a15; }
.cal-na-zeile { margin: 0; font-size: 13.5px; color: var(--text-secondary); line-height: 1.55; }
.cal-na-zeile b { color: var(--text-primary, #1d2c49); }
.cal-na-zitat { margin: 6px 0 0; padding-left: 11px; border-left: 3px solid #e6cfc8;
                font-style: italic; font-size: 13px; color: #6b675c; }

/* Seit v180: eine gemeldete Nichtanreise. Der Balken bleibt stehen - die
   Buchung ist ja noch da und kann Geld wert sein -, wird aber sichtbar
   entwertet: grau schraffiert statt in der Kanalfarbe. */
.cal-bar-na {
  background: repeating-linear-gradient(135deg, #b9b6ad 0 7px, #a9a69d 7px 14px) !important;
  color: #fff;
  box-shadow: none;
  outline: 1.5px dashed rgba(255, 255, 255, .8);
  outline-offset: -3px;
}

/* Seit v167: eine eingeblendete Anfrage ist sofort als solche zu erkennen -
   schraffiert, blasser und mit dem Wort "Anfrage" im Balken. */
.cal-bar-anfrage {
  opacity: .82;
  box-shadow: none;
  outline: 1.5px dashed rgba(255, 255, 255, .8);
  outline-offset: -3px;
}
.cal-bar-anfrage-kennung {
  flex: 0 0 auto;
  background: rgba(255, 255, 255, .3);
  border-radius: 4px;
  padding: 0 5px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .3px;
  text-transform: uppercase;
}
/* Zwei bestätigte Buchungen überlappen sich - das ist keine Anfrage, sondern
   ein Fehler im Bestand. */
.cal-row-doppelt-marke {
  margin-left: 7px;
  background: rgba(208, 59, 59, .12);
  color: var(--critical, #d03b3b);
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.cal-bar-blocked {
  background: repeating-linear-gradient(45deg, #c3c2b7, #c3c2b7 6px, #e1e0d9 6px, #e1e0d9 12px);
  color: var(--text-secondary);
}
.cal-bar-blocked .cal-bar-badge { background: rgba(11, 11, 11, 0.08); color: var(--text-secondary); }

/* Modal für Buchungsdetails im Kalender */
.cal-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cal-modal.hidden { display: none !important; }
.cal-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 11, 11, 0.45);
}
.cal-modal-panel {
  position: relative;
  background: var(--surface-1);
  border-radius: var(--radius-lg);
  padding: 22px 26px;
  max-width: 640px;
  width: 92%;
  max-height: 80vh;
  overflow: auto;
  box-shadow: var(--shadow-lg);
}
.cal-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  border: none;
  background: none;
  font-size: 16px;
  cursor: pointer;
  color: var(--text-muted);
  line-height: 1;
  padding: 4px;
}
.cal-modal-close:hover { color: var(--text-primary); }

/* Aufklappbare Karten je gespeicherter Auszahlung (Rechnungen -> Zuweisungen) */
.payout-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
  overflow: hidden;
}
.payout-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  cursor: pointer;
  user-select: none;
}
.payout-card-header:hover { background: var(--page-plane); }
.payout-card-chevron {
  display: inline-block;
  transition: transform 0.15s ease;
  color: var(--text-muted);
  flex: 0 0 auto;
}
.payout-card.expanded .payout-card-chevron { transform: rotate(90deg); }
.payout-card-title {
  font-weight: 700;
  flex: 0 0 auto;
}
.payout-card-summary {
  color: var(--text-secondary);
  font-size: 13px;
  flex: 1 1 auto;
}
.payout-card-tag {
  flex: 0 0 auto;
}
.payout-card-body {
  border-top: 1px solid var(--border);
  padding: 14px 18px;
  overflow-x: auto;
}
.payout-detail-table {
  table-layout: fixed;
  min-width: 860px;
}
.payout-detail-table th,
.payout-detail-table td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Kurze Zusammenfassung statt einer langen Kommaliste, wenn mehrere
   Rechnungen/Apartments in Frage kommen (siehe renderCandidateSummary in
   invoices.js) - gepunktet unterstrichen als Hinweis, dass ein Tooltip mit
   der vollständigen Liste beim Hovern erscheint. */
.candidate-list {
  cursor: help;
  border-bottom: 1px dotted var(--text-muted);
}

/* Statistiken-Tab (Rechnungen): aufklappbare Karte je Nummernkreis, gleiches
   Muster wie die Auszahlungs-Karten im Zuweisungen-Tab (.payout-card-*) -
   Klick auf den Kopf zeigt die zugrundeliegenden Rechnungen inkl. Betrag und
   Steuersatz, statt nur eine blanke Summe anzuzeigen. */
.stats-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
  overflow: hidden;
}
.stats-card-total {
  border-color: var(--series-1);
  box-shadow: var(--shadow-sm);
}
.stats-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  cursor: pointer;
  user-select: none;
}
.stats-card-header:hover { background: var(--page-plane); }
.stats-card-chevron {
  display: inline-block;
  transition: transform 0.15s ease;
  color: var(--text-muted);
  flex: 0 0 auto;
}
.stats-card.expanded .stats-card-chevron { transform: rotate(90deg); }
.stats-card-title {
  font-weight: 700;
  flex: 0 0 auto;
  min-width: 70px;
}
.stats-card-total .stats-card-title { color: var(--series-1); }
.stats-card-summary {
  color: var(--text-secondary);
  font-size: 13px;
  flex: 1 1 auto;
}
.stats-card-body {
  border-top: 1px solid var(--border);
  padding: 14px 18px;
  overflow-x: auto;
}
.stats-card-body.hidden { display: none !important; }
.stats-detail-table {
  min-width: 640px;
}
.stats-detail-table th,
.stats-detail-table td {
  white-space: nowrap;
}

/* Rechnungsnummer bei "eindeutig" zugeordneten Zuweisungen (Booking.com UND
   Airbnb) - Klick öffnet die Rechnungs-PDF in einem neuen Tab. */
.matched-invoice-link {
  color: var(--series-1);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.matched-invoice-link:hover {
  border-bottom-color: var(--series-1);
}
.payout-card-body.hidden { display: none !important; }
.payout-card-delete,
.payout-card-refresh {
  flex: 0 0 auto;
  font-size: 12px;
  padding: 6px 12px;
}
.payout-month-group { margin-bottom: 22px; }
.payout-month-heading {
  margin: 0 0 8px 2px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

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

.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.login-box {
  background: var(--surface-1);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 32px;
  width: 100%;
  max-width: 380px;
}

.login-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 22px;
}

.login-title {
  font-size: 19px;
  font-weight: 700;
  margin: 0 0 16px;
}

.login-error {
  background: #fdf1f1;
  border: 1px solid #e3b3b3;
  color: #a02a2a;
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 13.5px;
  margin: 0 0 16px;
}

/* Seit v159: Häkchen mit Beschriftung in einer Zeile */
.checkbox-zeile {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  font-weight: 500;
}
.checkbox-zeile input { width: 16px; height: 16px; flex: none; }

/* Seit v159: zweiter Faktor per E-Mail */
.login-hinweis {
  font-size: 13px; color: var(--text-secondary); margin: 0 0 16px; line-height: 1.5;
}
.login-code-feld {
  font-size: 26px; letter-spacing: .35em; text-align: center; font-weight: 700;
}

.login-form .field {
  margin-bottom: 14px;
}

.login-form input {
  width: 100%;
}

.login-submit {
  width: 100%;
  margin-top: 4px;
}

/* --- Benutzerverwaltung / aktueller Benutzer im Header --------------------- */

.current-user-label {
  font-size: 12.5px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Der Name im Header ist jetzt ein <summary> (siehe .user-menu) - Browser
   zeigen davor sonst von sich aus ein Dreieck/Pfeil-Symbol an, das wir durch
   ein eigenes ersetzen. */
summary.current-user-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  list-style: none;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid transparent;
}

/* Benutzersymbol vor dem Namen (seit v107) - macht auf einen Blick klar,
   dass sich hinter der Box das Benutzerkonto-Menü verbirgt (Einstellungen,
   Abmelden, seit v107 auch SmartCloud), statt nur ein Namensschild zu sein. */
.user-menu-icon {
  flex: 0 0 auto;
  color: var(--text-muted);
}

summary.current-user-label::-webkit-details-marker {
  display: none;
}

summary.current-user-label::after {
  content: "▾";
  margin-left: 5px;
  font-size: 10px;
  color: var(--text-muted);
}

summary.current-user-label:hover {
  background: var(--page-plane);
  border-color: var(--border);
}

.user-menu {
  position: relative;
}

.user-menu[open] > summary.current-user-label {
  background: var(--page-plane);
  border-color: var(--border);
}

.user-menu-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  min-width: 160px;
  background: var(--surface, #fff);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(20, 30, 50, 0.14);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.user-menu-item {
  display: block;
  padding: 8px 10px;
  border-radius: 7px;
  font-size: 13px;
  color: var(--text-primary, #1c2733);
  text-decoration: none;
  white-space: nowrap;
}

.user-menu-item:hover {
  background: var(--page-plane);
}

.role-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  background: var(--page-plane);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  white-space: nowrap;
}

.role-badge-full {
  background: rgba(42,120,214,0.10);
  border-color: rgba(42,120,214,0.35);
  color: var(--series-1-dark);
}

/* To-Do's: Prioritäts-Ampel (seit v70) */
.priority-dot {
  display: inline-block;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  vertical-align: middle;
}
.priority-dot.priority-gruen { background: #2fa84f; }
.priority-dot.priority-gelb { background: #e0a800; }
.priority-dot.priority-rot { background: #c0392b; }

/* Ladebalken für die Buchungen-Seite (seit v71) */
.loading-progress { margin-bottom: 14px; }
.loading-progress-kopf {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.loading-progress.hidden { display: none; }
.loading-progress-track {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: var(--page-plane, #eef1f5);
  border: 1px solid var(--border, #dde2e8);
  overflow: hidden;
}
.loading-progress-fill {
  height: 100%;
  width: 4%;
  border-radius: 999px;
  background: linear-gradient(90deg, #3384e6, #1d5db0);
  transition: width 0.35s ease;
}

/* --- Webmail: dreispaltiges Postfach-Layout (seit v75) ------------------- */
/* Ersetzt die anfängliche modal-basierte v74-Ansicht durch ein Layout wie
   bei jedem gängigen Mail-Programm: Seitenleiste (Konten + Ordner) /
   Nachrichtenliste / Lese-Bereich nebeneinander in einer Ansicht. */

.webmail-shell {
  display: grid;
  grid-template-columns: 220px 360px minmax(0, 1fr);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  min-height: 560px;
  background: var(--surface-1);
}
.webmail-shell.hidden { display: none; }

.webmail-sidebar {
  background: var(--page-plane);
  border-right: 1px solid var(--border);
  padding: 16px 14px;
  overflow-y: auto;
}
.webmail-sidebar-section + .webmail-sidebar-section { margin-top: 22px; }

.webmail-account-list, .webmail-folder-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.webmail-side-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  width: 100%;
}
.webmail-side-btn:hover { background: rgba(20,19,15,0.05); }
.webmail-side-btn.active {
  background: var(--accent-gradient, var(--series-1));
  color: #fff;
}
.webmail-side-btn .webmail-standard-star { font-size: 11px; opacity: 0.8; }

.webmail-message-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-right: 1px solid var(--border);
}

.webmail-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.webmail-toolbar select {
  font-family: inherit;
  font-size: 13px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-secondary);
}
.webmail-toolbar select:disabled,
.webmail-toolbar button:disabled { opacity: 0.45; cursor: not-allowed; }

.webmail-message-list {
  flex: 1 1 auto;
  overflow-y: auto;
}

.webmail-message-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--gridline);
  cursor: pointer;
}
.webmail-message-row:hover { background: rgba(42,120,214,0.05); }
.webmail-message-row.active { background: rgba(42,120,214,0.10); }
.webmail-message-row.unread .webmail-message-from,
.webmail-message-row.unread .webmail-message-subject { font-weight: 700; }
.webmail-message-row-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1 1 auto;
}
.webmail-message-row-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
}
.webmail-message-from { color: var(--text-primary); display: flex; align-items: center; gap: 6px; }
.webmail-message-date { color: var(--text-muted); font-size: 12px; white-space: nowrap; }
.webmail-message-subject {
  font-size: 13px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.webmail-message-row input[type="checkbox"] { margin-right: 8px; }

.webmail-attachment-flag { margin-right: 4px; font-size: 11px; }

.webmail-unread-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--series-1, #2a78d6);
  flex: 0 0 auto;
}

/* Absender-Kürzel-Kreis (seit v80) - in Nachrichtenliste und Lese-Ansicht */
.webmail-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--accent-gradient, var(--series-1));
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}
.webmail-avatar-sm { width: 30px; height: 30px; font-size: 12px; margin-top: 2px; }

.webmail-reading-pane {
  padding: 22px 26px;
  overflow-y: auto;
  min-width: 0;
}
.webmail-reading-empty {
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
  margin-top: 60px;
}
.webmail-reading-subject {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 14px;
}
.webmail-reading-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--gridline);
}
.webmail-reading-meta-text { min-width: 0; flex: 1 1 auto; font-size: 13px; }
.webmail-reading-meta-muted { color: var(--text-muted); font-size: 12px; }
.webmail-reading-meta-date { color: var(--text-muted); font-size: 12px; white-space: nowrap; }

.webmail-reading-body-html.hidden, .webmail-reading-body-html { }
.webmail-reading-iframe {
  width: 100%;
  border: none;
  display: block;
}

.webmail-attachment-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.webmail-attachment-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--page-plane);
  text-decoration: none;
  color: inherit;
  min-width: 160px;
}
.webmail-attachment-card:hover { background: rgba(42,120,214,0.08); border-color: var(--series-1, #2a78d6); }
.webmail-attachment-card-icon { font-size: 22px; }
.webmail-attachment-card-info { display: flex; flex-direction: column; min-width: 0; }
.webmail-attachment-card-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
}
.webmail-attachment-card-size { font-size: 11px; color: var(--text-muted); }

@media (max-width: 1100px) {
  .webmail-shell { grid-template-columns: 170px minmax(0, 1fr); }
  .webmail-reading-pane { display: none; }
}

/* Anhang-Chips im Schreiben-Dialog (seit v79) */
.webmail-attachment-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.webmail-attachment-chips:empty { display: none; }
.webmail-attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 6px 4px 10px;
  border-radius: 999px;
  background: var(--page-plane);
  border: 1px solid var(--border);
  color: var(--text-secondary);
}
.webmail-attachment-chip button {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  color: var(--text-muted);
  padding: 2px 4px;
}
.webmail-attachment-chip button:hover { color: var(--text-primary); }

/* Seit v88: Mitarbeiter-Name in der Übersichtstabelle ist klickbar (öffnet
   die "Wissensdatenbank", siehe employees.js: openWissensdatenbank) - soll
   wie ein Link aussehen, nicht wie ein Button. */
.link-button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--series-1, #2a78d6);
  text-decoration: underline;
  cursor: pointer;
  text-align: left;
}
.link-button:hover { color: var(--text-primary); }

/* Wissensdatenbank-Modal (v88): zwei Modi (Ansicht/Bearbeiten), Felder
   gruppiert wie beim bestehenden Arbeitgeber-Angaben-Formular. */
#wissensdatenbank-modal .modal-box { max-width: 760px; max-height: 85vh; overflow-y: auto; }
.wissensdatenbank-ansicht-feld { margin-bottom: 10px; }
.wissensdatenbank-ansicht-feld .wdb-label { font-size: 12px; color: var(--text-secondary); margin-bottom: 2px; }
.wissensdatenbank-ansicht-feld .wdb-wert { font-size: 14px; }
/* Seit v96: Unterschriften-Vorschau in der Wissensdatenbank (siehe
   wissensdatenbankAnsichtHtml) - schlicht gerahmt, damit eine (meist fast
   weiße) Unterschrift auf dem Untergrund erkennbar bleibt. */
.wdb-unterschrift-bild { max-width: 220px; max-height: 90px; border: 1px solid var(--border); border-radius: 6px; background: #fff; padding: 4px; }
/* Seit v102: "Protokoll" ganz unten in der Wissensdatenbank (siehe
   wissensdatenbankAnsichtHtml) - listet Abweichungen zwischen einem per KI
   ausgelesenen Personalfragebogen-Wert und einer bereits vorhandenen
   Wissensdatenbank-Angabe auf. Dezent amberfarben (Warnhinweis), nicht rot -
   es ist keine Fehlermeldung, nur ein Hinweis zur eigenen Prüfung. */
.wissensdatenbank-protokoll .employee-detail-titel { color: #b8860b; }
.wdb-protokoll-eintrag {
  background: #fff8e6;
  border: 1px solid #f0d998;
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 6px;
}
.wdb-protokoll-eintrag .wdb-label { color: #8a6400; font-weight: 600; }
.wdb-protokoll-zeit { color: var(--text-secondary); font-size: 12px; }
.wissensdatenbank-gruppe-titel { flex-basis: 100%; margin: 14px 0 6px; font-weight: 600; }
/* Seit v94: die Wissensdatenbank-Ansicht nutzt dieselben Abschnitts-Klassen
   wie die aufgeklappte Detailzeile bei "Aktive Mitarbeiter"
   (.employee-detail-abschnitt/-titel, siehe oben) - der erste Abschnitt
   ("Stammdaten") bekommt aber keinen oberen Rand/Abstand, da direkt darüber
   bereits der Rand der Modal-Box liegt. */
#wissensdatenbank-ansicht-inhalt .employee-detail-abschnitt:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* --- Arbeitsvertrag-Entwurf-Modal (seit v96): Bearbeitung der Abschnitte
   links, live PDF-Vorschau rechts - analog zum bestehenden
   .muster-editor-layout/.smart-upload-step2-layout, aber als eigene Klasse,
   da hier (anders als beim Musterformular) die rechte Seite eine echte
   PDF-Vorschau statt eines schmalen Platzhalter-Panels ist. --- */

/* Seit v119 (Wilhelms Wunsch: "das Ansichtsfenster rechts ist ziemlich
   klein... vergrößern, dass das angenehmer ist zu bearbeiten"): das
   Arbeitsvertrag-Fenster nutzt jetzt fast die volle Bildschirmbreite/-höhe
   (dasselbe Prinzip wie #smart-upload-modal-box seit v89), und beide
   Spalten (Angaben links, PDF-Vorschau rechts) sind entsprechend höher. */
#vertrag-entwurf-modal-box {
  max-width: 1500px;
  max-height: 94vh;
}

/* Seit v119: einklappbare Rubrik "Archivierte Mitarbeiter" (standardmäßig
   zu) - die Überschrift ist klickbar, der Pfeil zeigt den Zustand, die
   Anzahl steht dezent daneben. */
.archiv-einklapp-kopf {
  cursor: pointer;
  user-select: none;
}

.archiv-einklapp-kopf:hover {
  color: var(--gold-deep, #9c7212);
}

.archiv-anzahl-badge {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-muted);
  margin-left: 6px;
}

/* --- Hostapia-Ladeanzeige (seit v120): drehendes Steuerrad aus dem Logo +
   "Bitte warten…" + Prozentzahl - überall dort, wo auf Daten von API/
   SmartCloud gewartet wird (siehe user-menu.js: hostapiLadeStart). --- */
@keyframes hostapi-rad-drehen {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.hostapi-lade {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 2px;
}

.hostapi-lade-rad {
  /* Seit v224 etwas ruhiger: 2,4 s wirkten hektisch, das Rad eines Schiffes
     dreht sich nicht wie ein Ventilator. */
  animation: hostapi-rad-drehen 3.2s linear infinite;
  flex: 0 0 auto;
  transform-origin: 50% 50%;
}
.hostapi-lade-rad.gross { animation-duration: 4s; }

/* Seit v224: eine ganze wartende Fläche - Kalender, Postfach, Fenster. */
.hostapi-lade-gross {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 46px 16px;
  text-align: center;
  color: var(--text-secondary, #6b7280);
}
.hostapi-lade-gross b {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: 17px;
  color: var(--text-primary, #1f2937);
}
.hostapi-lade-gross span { font-size: 12.5px; }

/* Seit v224: ein arbeitender Knopf. Die Beschriftung bleibt stehen und
   hält die Breite; unsichtbar wird sie nur, damit das Rad allein wirkt.
   Ein Rad NEBEN dem Text machte den Knopf um zwanzig Pixel breiter - und
   die ganze Leiste rutschte, ausgerechnet während man hinsieht. */
.hostapi-knopf-laedt { position: relative; }
.hostapi-knopf-laedt .hostapi-knopf-text { visibility: hidden; }
.hostapi-knopf-laedt .hostapi-knopf-rad {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Bewegung ist ein Angebot, keine Pflicht: Wer sie im Betriebssystem
   abgeschaltet hat, bekommt ein stehendes Rad statt eines drehenden. */
@media (prefers-reduced-motion: reduce) {
  .hostapi-lade-rad { animation: none; }
}

.hostapi-lade-text {
  font-size: 13.5px;
  color: var(--text-secondary);
}

.hostapi-lade-prozent {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--gold-deep, #9c7212);
  min-width: 38px;
}

/* --- Mitarbeiter-Detail (seit v120): Dokumente in klar beschriftete
   Gruppen ("Vom Generator erstellt" / "Manuell hochgeladen") statt einer
   langen Chip-Reihe mit horizontalem Scrollbalken - lange Dateinamen
   brechen jetzt um, statt die Tabelle in die Breite zu drücken. --- */
.dok-gruppe {
  margin-bottom: 10px;
}

.dok-gruppe:last-child { margin-bottom: 0; }

.dok-gruppe-titel {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin: 0 0 5px;
}

.dok-gruppe .invoice-actions .btn {
  white-space: normal;
  text-align: left;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.vertrag-fassungen-inline .mini-table {
  margin-top: 2px;
}

/* Breiten-neutraler Wrapper für die aufgeklappte Detailzeile (v120): die
   Spaltenbreiten der Mitarbeiter-Tabelle richten sich so ausschließlich
   nach den normalen Zeilen - lange Inhalte in der Detailzeile brechen um,
   statt die Tabelle über den Rand hinaus zu verbreitern. */
.employee-detail-inhalt {
  width: 0;
  min-width: 100%;
  /* Die allgemeine Tabellenregel "tbody td { white-space: nowrap; }" wird
     hier bewusst aufgehoben - SIE war die eigentliche Ursache des
     horizontalen Scrollbalkens: alles in der Detailzeile (lange Dateinamen,
     Hinweise) stand auf einer einzigen, nicht umbrechenden Zeile. */
  white-space: normal;
}

.vertrag-entwurf-editor-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  margin-top: 14px;
  align-items: start;
}

@media (max-width: 900px) {
  .vertrag-entwurf-editor-layout {
    grid-template-columns: 1fr;
  }
}

.vertrag-entwurf-bloecke {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  max-height: 76vh; /* v119: höher, passend zum größeren Fenster */
  overflow-y: auto;
  padding-right: 4px;
}

.vertrag-entwurf-bloecke textarea,
.vertrag-entwurf-bloecke input[type="text"] {
  width: 100%;
  font: inherit;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  resize: vertical;
}

/* Seit v121: jeder Block hat eine kleine Werkzeugzeile (Ausrichtung,
   Schriftart, KI-Korrektur, Einfügen, Löschen). */
.vertrag-entwurf-block {
  border: 1px solid var(--gridline);
  border-radius: var(--radius-sm, 6px);
  padding: 8px 10px 10px;
  background: var(--surface-1);
}

.vertrag-block-kopf {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.vertrag-block-label {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  margin-right: auto;
}

.vertrag-block-kopf select {
  font-size: 12px;
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  background: var(--surface-1);
}

.vertrag-block-ki-btn {
  color: var(--gold-deep, #9c7212);
}

/* Seit v122: dieselbe Werkzeugzeile auch im Arbeitsvertragsmuster-Editor
   (Ausrichtung/Schriftart/B/✨ je Abschnitt + eigene Zusatz-Paragrafen). */
.muster-block-toolbar,
.muster-block-toolbar-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 2px 0 6px;
}

.muster-block-toolbar select,
.muster-block-toolbar-inline select {
  font-size: 12px;
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  background: var(--surface-1);
}

.muster-ki-btn {
  color: var(--gold-deep, #9c7212);
}

.muster-zusatz-karte {
  margin-bottom: 10px;
}

.muster-zusatz-karte .muster-zusatz-ueberschrift {
  width: 100%;
  font: inherit;
  font-weight: 700;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
}

.muster-zusatz-karte textarea {
  width: 100%;
  font: inherit;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  resize: vertical;
}

/* --- Grundform-Editor (v126) ------------------------------------------- */
#muster-grundform-bereich .vertrag-entwurf-block {
  margin-bottom: 10px;
}

#muster-kopf-karte textarea,
.muster-paragraf-karte textarea {
  width: 100%;
  font: inherit;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  resize: vertical;
}

.muster-paragraf-nummer {
  margin-right: 0;
  flex: 0 0 auto;
  color: var(--navy, #1d2c49);
}

.muster-paragraf-ueberschrift {
  flex: 1 1 160px;
  min-width: 120px;
  font: inherit;
  font-weight: 700;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
}

/* Aus dem PDF ergänzte Stellen: goldene Markierung + Abzeichen */
.muster-ergaenzt {
  border-color: var(--gold, #c8961e) !important;
  box-shadow: 0 0 0 1px rgba(200, 150, 30, 0.35);
}

.muster-ergaenzt-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(200, 150, 30, 0.16);
  color: var(--gold-deep, #9c7212);
  white-space: nowrap;
}

.vertrag-entwurf-vorschau {
  min-width: 0;
  height: 76vh; /* v119: höher, passend zum größeren Fenster */
}

/* Seit v98: dieselbe Iframe-Optik wird auch vom Kündigungs-Entwurf-Editor
   genutzt (#kuendigung-entwurf-pdf-iframe, siehe employees.js) - deshalb
   beide IDs gemeinsam statt die Regel zu duplizieren. */
#vertrag-entwurf-pdf-iframe,
#kuendigung-entwurf-pdf-iframe {
  width: 100%;
  height: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  background: #fafafa;
}

/* --- Urlaubsrechner (seit v97) --------------------------------------- */
.urlaub-rechner-ergebnis {
  background: var(--surface-2, #f7f7f5);
  margin-bottom: 0;
}

/* --- Schichtpläne (seit v104) -----------------------------------------
   Wilhelms Seite gliedert sich in drei nummerierte Blöcke: (1) Mitarbeiter-
   Leiste mit Kürzel-Chips, (2) Standort-Karten zum manuellen Zuordnen,
   (3) Wochen-Raster je Standort mit Speichern/PDF/KI. Optik lehnt sich an
   bestehende Muster an: Chips wie .invoice-apartment-chip/.webmail-
   attachment-chip, Karten wie .payout-card/.stats-card. */

.schichtplan-block {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 20px 22px;
  margin-bottom: 22px;
}

.schichtplan-block-title {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 14px;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

/* Block 1: horizontale Mitarbeiter-Leiste ------------------------------ */
.mitarbeiter-leiste {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 4px;
}

.mitarbeiter-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--page-plane);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.mitarbeiter-chip:hover {
  background: rgba(42,120,214,0.08);
  border-color: var(--series-1);
}

.mitarbeiter-chip-kuerzel {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--accent-gradient);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.mitarbeiter-chip-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 1px;
}

.mitarbeiter-chip-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 190px;
}

.mitarbeiter-chip-standort {
  font-size: 11.5px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 190px;
}

/* Block 2: Standort-Karten ---------------------------------------------- */
.standort-karten {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.standort-karte {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--page-plane);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.standort-karte-unzugeordnet {
  background: none;
  border-style: dashed;
}

.standort-karte-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 14px;
}

.standort-karte-mitglieder {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.standort-mitglied-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 6px 4px 10px;
  border-radius: 999px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  color: var(--text-secondary);
}

.standort-mitglied-entfernen-btn {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  color: var(--text-muted);
  padding: 2px 4px;
}
.standort-mitglied-entfernen-btn:hover { color: var(--critical); }

.standort-karte-zuordnen { margin-top: 2px; }

.standort-zuordnen-select {
  width: 100%;
  font: inherit;
  font-size: 12.5px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-1);
  color: var(--text-secondary);
}

/* Block 3: Wochen-Raster je Standort ------------------------------------ */
.schichtplan-standort-gruppe {
  margin-bottom: 20px;
}
.schichtplan-standort-gruppe:last-child { margin-bottom: 0; }

.schichtplan-standort-titel {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--series-1-dark);
  margin: 0 0 8px;
}

.schichtplan-tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

.schichtplan-tabelle th,
.schichtplan-tabelle td {
  border: 1px solid var(--gridline);
  padding: 7px 9px;
}

.schichtplan-tabelle thead th {
  background: var(--page-plane);
  color: var(--text-secondary);
  font-weight: 700;
  text-align: left;
}

.schichtplan-tabelle thead th.schichtplan-tag-zelle {
  text-align: center;
}

.schichtplan-tabelle tbody tr:nth-child(even) { background: var(--page-plane); }

.schichtplan-tag-zelle {
  text-align: center;
  width: 42px;
}

.schichtplan-tag-zelle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--series-1); /* Fallback - überschrieben je Zeile per Inline-Style mit der Mitarbeiterfarbe, seit v109 */
}

/* Kalendertag unter der Wochentags-Abkürzung im Tabellenkopf (seit v109,
   Wilhelms Wunsch: "unter Montag, Dienstag... ebenfalls die Kalendertage
   ersichtlich, um eine bessere Übersicht zu erhalten") - dieselbe Klasse wird
   auch auf der öffentlichen Live-Ansicht (schichtplan_live.js) verwendet. */
.schichtplan-tag-datum {
  display: inline-block;
  margin-top: 2px;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: normal;
}

/* Wöchentlich/Zeitraum-Umschalter (seit v106, Beschriftung seit v108) ----- */
.schichtplan-modus-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--page-plane);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.schichtplan-modus-btn {
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 14px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}

.schichtplan-modus-btn:hover { color: var(--text-primary); }

.schichtplan-modus-btn.active {
  background: var(--accent-gradient);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

/* Standort-Kopf mit Titel + Generator-/PDF-Button (seit v106, Generator-Button
   seit v108) --------------------------------------------------------------- */
.schichtplan-standort-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.schichtplan-standort-kopf .schichtplan-standort-titel { margin: 0; }

.schichtplan-standort-kopf-aktionen {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.schichtplan-standort-pdf-btn,
.schichtplan-standort-generator-btn { flex: 0 0 auto; white-space: nowrap; }

.schichtplan-kw-titel {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  margin: 14px 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.schichtplan-kw-titel:first-of-type { margin-top: 4px; }

/* Inline-PDF-Vorschau je Standort (seit v106) ------------------------------ */
.schichtplan-standort-pdf-vorschau {
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--page-plane);
}

.schichtplan-pdf-iframe {
  display: block;
  width: 100%;
  height: 640px;
  border: none;
  background: #fff;
}

/* Schichtplan-Generator (seit v108) - Schritt-Anzeige, Arbeitstage- und
   Ausnahmen-Listen im mehrstufigen Popup-Assistenten je Standort. -------- */
.generator-schritte {
  display: flex;
  gap: 6px;
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  flex-wrap: wrap;
}
.generator-schritt-label {
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--page-plane);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.generator-schritt-label.active {
  background: var(--accent-gradient);
  color: #fff;
  border-color: transparent;
}

.generator-schritt.hidden { display: none; }

.generator-arbeitstage-liste,
.generator-ausnahmen-liste {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 360px;
  overflow-y: auto;
  margin-bottom: 4px;
}

.generator-arbeitstage-zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--page-plane);
}

.generator-arbeitstage-person {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.generator-arbeitstage-tage {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.generator-tag-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
}

/* Seit v109 als beschriftete Karte statt einer engen Einzeiler-Reihe
   (Wilhelms Wunsch: die Ausnahmen-Liste war "ein bisschen unübersichtlich") -
   jedes Feld mit eigenem Label übereinander, in einem responsiven Grid. */
.generator-ausnahme-zeile {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  padding: 14px 40px 14px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--page-plane);
}

.generator-ausnahme-feld {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.generator-ausnahme-feld label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}

.generator-ausnahme-zeile select,
.generator-ausnahme-zeile input[type="date"] {
  font: inherit;
  font-size: 12.5px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-1);
  width: 100%;
}

.generator-ausnahme-entfernen-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: none;
  border: none;
  font-size: 17px;
  line-height: 1;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 2px 6px;
}
.generator-ausnahme-entfernen-btn:hover { color: var(--text-primary); }

/* Deutlich sichtbarer Hinweis-Kasten, wenn die Mikrofon-Aufnahme im
   Generator nicht verfügbar ist (seit v109 - Wilhelms Rückmeldung, dass die
   Aufnahme "gar nicht reagiert": meist fehlendes HTTPS, siehe README - vorher
   eine unauffällige graue Notiz, jetzt ein Hinweis-Kasten, der nicht
   übersehen werden kann). */
#generator-aufnahme-nicht-verfuegbar {
  background: rgba(237, 161, 0, 0.12);
  border: 1px solid rgba(237, 161, 0, 0.4);
  border-left: 4px solid var(--series-4);
  color: var(--text-primary);
  font-weight: 500;
}

/* Standort-Karte: "🔗 Live-Link kopieren"-Zeile (seit v109) -------------- */
.standort-karte-live-link {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.standort-karte-live-link-status {
  font-size: 12px;
  color: var(--good);
}

/* Öffentliche Live-Ansicht eines Standort-Schichtplans (seit v109,
   static/schichtplan_live.js) - Tages-Spalten mit gestapelten, farbigen
   Kürzel-Badges je Person, bewusst an die PDF-Optik angelehnt (dieselben
   Mitarbeiterfarben wie überall sonst im Programm). */
.schichtplan-live-tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  margin-bottom: 26px;
}
.schichtplan-live-tabelle th,
.schichtplan-live-tabelle td {
  border: 1px solid var(--gridline);
  padding: 8px;
  text-align: center;
  vertical-align: top;
}
.schichtplan-live-tabelle thead th {
  background: var(--page-plane);
  color: var(--text-secondary);
  font-weight: 700;
}
.schichtplan-live-wochenende { background: var(--page-plane); }
.schichtplan-live-zelle { height: 34px; }
.schichtplan-live-badge {
  display: inline-block;
  margin: 2px;
  padding: 3px 9px;
  border-radius: 999px;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  white-space: nowrap;
}

/* ===========================================================================
   To Do's - Aufgabenverwaltung (seit v110): Karten-Optik wie die Standort-
   Karten im Schichtplan, Mitarbeiterfarben-Badges wie die Kürzel-Badges der
   Schichtplan-Live-Ansicht, eigene Farbcodierung je Status.
   =========================================================================== */

.todo-karte {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--page-plane);
  padding: 14px 16px;
  margin-bottom: 12px;
}

.todo-karte-erledigt { opacity: 0.72; }
.todo-regel-pausiert { opacity: 0.6; }

.todo-karte-kopf {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.todo-karte-titel {
  font-weight: 700;
  font-size: 14.5px;
  color: var(--text-primary);
  flex: 1 1 auto;
}

.todo-karte-erledigt .todo-karte-titel { text-decoration: line-through; color: var(--text-muted); }

.todo-karte-aktionen { display: flex; gap: 6px; flex-wrap: wrap; }

.todo-karte-beschreibung { margin: 8px 0 0; }

.todo-karte-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.todo-meta-chip {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-secondary);
  background: rgba(20, 19, 15, 0.05);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}

.todo-ueberfaellig { color: #c0392b; font-weight: 700; }

/* Status-Farbcodierung - konsistent auf Admin- UND Mitarbeiterseite:
   Offen = neutral, Angenommen = Blau (Akzent), In Arbeit = Amber
   (--series-4, wie die Warnhinweise), Erledigt = Grün (--good). */
.todo-status-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}

.todo-status-offen { background: rgba(20, 19, 15, 0.07); color: var(--text-secondary); }
.todo-status-angenommen { background: rgba(29, 44, 73, 0.12); color: var(--navy); }
.todo-status-in_arbeit { background: rgba(237, 161, 0, 0.16); color: #9a6b00; }
.todo-status-erledigt { background: rgba(12, 163, 12, 0.14); color: #1f7a44; }

.todo-kuerzel-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  color: #fff;
  font-weight: 700;
  font-size: 11.5px;
  white-space: nowrap;
}

.todo-karte-mitarbeiter { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }

.todo-mitarbeiter-zeile {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.todo-mitarbeiter-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }

.todo-foto-reihe { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }

.todo-foto-thumb {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--gridline);
  vertical-align: middle;
}

/* Mehrfachauswahl der Mitarbeiter (Aufgabe/Regel/Tonnenplan) - Checkboxen
   in der jeweiligen Mitarbeiterfarbe (accent-color inline gesetzt). */
.todo-mitarbeiter-auswahl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 6px;
  border: 1px solid var(--gridline);
  border-radius: 10px;
  padding: 10px;
  background: #fff;
}

.todo-mitarbeiter-option {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  cursor: pointer;
}

.todo-wochentage-auswahl { display: flex; gap: 12px; flex-wrap: wrap; }

.todo-wochentag-option { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; cursor: pointer; }

/* Tonnenplan-Vorschau */
.todo-tonne-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid var(--gridline);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: #fff;
  cursor: pointer;
}

.todo-tonne-icon { font-size: 20px; line-height: 1.2; }

/* Mitarbeiter-Links-Liste */
.todo-link-zeile {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 0;
  border-bottom: 1px solid var(--gridline);
}

.todo-link-zeile:last-child { border-bottom: none; }

.todo-link-status { color: var(--good); }

/* --- Öffentliche Mitarbeiterseite (/aufgaben/<token>) - mobil zuerst --- */
.todo-ma-app { max-width: 720px; }

.todo-ma-tabs { display: flex; gap: 8px; margin-bottom: 14px; }

.todo-ma-tab.aktiv {
  background: var(--accent-gradient);
  color: #fff;
  border-color: transparent;
}

.todo-ma-aktionen {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.todo-ma-kollegen { margin-top: 8px; }

.todo-ma-kollege { display: inline-flex; align-items: center; gap: 5px; margin-right: 8px; }

.todo-ma-upload { margin-top: 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.todo-ma-foto-label { cursor: pointer; }

.todo-ma-fotos { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }

.todo-ma-fotos .todo-foto-thumb { width: 64px; height: 64px; }

@media (max-width: 560px) {
  .todo-ma-aktionen .btn { flex: 1 1 100%; text-align: center; }
  .todo-karte-kopf { align-items: flex-start; }
}

/* ===========================================================================
   Digitale Mitarbeitermappe (seit v111): Kachel-Übersicht der öffentlichen
   Mappen-Seite + Admin-Registerkarte "Mitarbeitermappen". Nutzt die
   To-Do-Bausteine (Status-Badges, Kürzel-Badges, Zeilen) weiter.
   =========================================================================== */

.mappe-kachel {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--page-plane);
  margin-bottom: 12px;
  overflow: hidden;
}

.mappe-kachel-kopf {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.mappe-kachel-kopf::-webkit-details-marker { display: none; }

.mappe-kachel[open] .mappe-kachel-kopf { border-bottom: 1px solid var(--gridline); }

/* v113: Symbol im goldenen Ring - einheitliche Hostapia-Optik. */
.mappe-kachel-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(156, 114, 18, 0.35);
  font-size: 19px;
  line-height: 1;
  flex: 0 0 auto;
}
.mappe-kachel-icon svg { display: block; }

.mappe-kachel-name {
  font-weight: 700;
  font-size: 14.5px;
  color: var(--text-primary);
  flex: 1 1 auto;
}

.mappe-kachel-anzahl {
  display: inline-block;
  min-width: 22px;
  text-align: center;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--gold-gradient);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
}

.mappe-kachel-inhalt { padding: 14px 16px; }

.mappe-doku-liste { display: flex; flex-direction: column; gap: 6px; }

.mappe-doku-link {
  display: block;
  padding: 8px 10px;
  border: 1px solid var(--gridline);
  border-radius: 10px;
  background: #fff;
  color: var(--text-primary);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
}

.mappe-doku-link:hover { border-color: var(--gold); }

/* Sichtbarkeits-Häkchen + Stammdaten-Vergleich in der Admin-Registerkarte */
.mappe-haken-bereich { margin-top: 4px; }

.mappe-stammdaten-diff {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  padding: 4px 0;
  font-size: 13px;
}

.mappe-stammdaten-feld { font-weight: 700; min-width: 150px; }

.mappe-stammdaten-alt { color: var(--text-muted); text-decoration: line-through; }

.mappe-stammdaten-neu { color: #1f7a44; font-weight: 700; }

/* v112: freundlicher Mappen-Kopf (Begrüßung + Firmenlogo), aufgeräumte
   Mitarbeiter-Karten in der Admin-Registerkarte (Name oben, Buttons in
   eigener Zeile), deaktivierte Formulare in der Admin-Ansicht. */
.mappe-willkommen {
  display: flex;
  align-items: center;
  gap: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--page-plane);
  padding: 18px 20px;
  margin-bottom: 16px;
}

.mappe-logo {
  max-height: 64px;
  max-width: 140px;
  object-fit: contain;
  flex: 0 0 auto;
}

.mappe-logo-login { display: block; margin: 14px auto 4px; }

.mappe-willkommen-titel {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
}

.mappe-willkommen-text p { margin: 0; font-size: 13.5px; color: var(--text-secondary); line-height: 1.55; }

/* Der einzige Aufgaben-Bezug, der in der Mappe bleibt (v179): ein Verweis. */
.mappe-aufgaben-link { display: inline-block; margin-top: 11px; padding: 9px 15px;
                       border-radius: 11px; background: var(--text-primary, #1d2c49);
                       color: #fff; font-size: 13px; font-weight: 700;
                       text-decoration: none; }
.mappe-aufgaben-link:hover { opacity: .9; }

@media (max-width: 560px) {
  .mappe-willkommen { flex-direction: column; text-align: center; }
}

.mappe-karte-namenszeile {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.mappe-karte-aktionszeile {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--gridline);
}

.mappe-deaktiviert { opacity: 0.55; pointer-events: none; }

/* ===========================================================================
   Hostapia-Rebranding (v113): goldene Copy-Buttons (nur Symbol, kein Popup),
   Feinschliff der eleganteren Optik.
   =========================================================================== */

.copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(156, 114, 18, 0.35);
  background: #fff;
  color: var(--gold-deep);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.copy-btn:hover { background: rgba(200, 150, 30, 0.10); transform: translateY(-1px); }
.copy-btn:active { transform: translateY(0); }
.copy-btn svg { display: block; }

/* Falls das Kopieren technisch nicht klappt (sehr alte Browser), erscheint
   der Link stattdessen in diesem Feld zum Markieren/Kopieren von Hand -
   KEIN Popup-Fenster mehr (Wilhelms Rückmeldung v113). */
.copy-fallback-feld {
  font-size: 12px;
  padding: 5px 8px;
  border: 1px solid var(--gridline);
  border-radius: 7px;
  min-width: 220px;
  max-width: 100%;
  color: var(--text-secondary);
  background: #fff;
}

.section-heading { font-family: Georgia, "Times New Roman", serif; letter-spacing: 0.01em; }

.login-brand .brand-word { font-size: 26px; }

/* ===========================================================================
   v114: Aufgaben-Tabelle (Admin), Müllplan-Übersicht, sauber umbrechender
   Kollegen-Block auf der Mitarbeiter-Aufgabenseite.
   =========================================================================== */

.todo-tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: #fff;
  border: 1px solid var(--gridline);
  border-radius: 10px;
  overflow: hidden;
}

.todo-tabelle th {
  text-align: left;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  background: var(--page-plane);
  padding: 9px 10px;
  border-bottom: 1px solid var(--gridline);
  white-space: nowrap;
}

.todo-tabelle td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--gridline);
  vertical-align: top;
}

.todo-tabelle tbody tr:last-child td { border-bottom: none; }
.todo-tabelle tbody tr:hover { background: rgba(200, 150, 30, 0.05); }
.todo-zeile-erledigt td { opacity: 0.65; }
.todo-zeile-erledigt td:first-child strong { text-decoration: line-through; color: var(--text-muted); }
.todo-zelle-schmal { white-space: nowrap; }

.todo-tabelle-person {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0 8px 4px 0;
}

.todo-foto-thumb-klein { width: 34px; height: 34px; }

/* Kollegen-Hinweis auf der Mitarbeiter-Aufgabenseite: eigener Block mit
   Hintergrund, bricht sauber um, überdeckt keine Buttons mehr (v114). */
.todo-ma-kollegen {
  margin-top: 10px;
  padding: 8px 12px;
  background: var(--page-plane);
  border: 1px solid var(--gridline);
  border-radius: 8px;
}

.todo-ma-kollegen-zeile {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 13px;
}

/* v115: Hinweis-Banner auf der Rechnungen-Seite, wenn sevDesk nicht
   erreichbar ist und der SmartCloud-Zwischenspeicher angezeigt wird. */
.cache-banner {
  background: rgba(237, 161, 0, 0.12);
  border: 1px solid rgba(237, 161, 0, 0.4);
  border-left: 4px solid var(--series-4);
  border-radius: 10px;
  color: var(--text-primary);
  font-size: 13.5px;
  font-weight: 500;
  padding: 12px 16px;
  margin-bottom: 16px;
}

/* ===========================================================================
   v117: Professionelle Auswertungen auf der Rechnungen-Seite (Statistiken-
   Tab): KPI-Kacheln, Verteilungs-Balken (ein Farbton = Größenvergleich),
   sortierbare Auswertungs-Tabellen, Ring-Diagramm mit Legende.
   =========================================================================== */

.stats-kpi-reihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}

.stats-kpi {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
}

.stats-kpi-wert {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.15;
}

.stats-kpi-label {
  margin-top: 4px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.stats-balken-zeile {
  display: grid;
  grid-template-columns: minmax(120px, 220px) 1fr minmax(150px, auto);
  align-items: center;
  gap: 12px;
  padding: 5px 0;
}

.stats-balken-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stats-balken-spur {
  display: block;
  background: rgba(20, 19, 15, 0.05);
  border-radius: 4px;
  height: 18px;
  overflow: hidden;
}

.stats-balken {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #2c3f66 0%, #1d2c49 100%);
  border-radius: 0 4px 4px 0;
}

.stats-balken-wert {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  text-align: right;
}

.stats-auswertung-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}

.stats-auswertung-raster .table-section { overflow-x: auto; }

.stats-balken-anteil { color: var(--text-muted); font-weight: 500; }

.stats-sortier-tabelle th { cursor: pointer; user-select: none; }
.stats-sortier-tabelle th:hover { color: var(--gold-deep); }
.stats-sortier-tabelle td:nth-child(n+2), .stats-sortier-tabelle th:nth-child(n+2) { text-align: right; }
.stats-sortier-tabelle tfoot td { background: var(--page-plane); border-top: 2px solid var(--gridline); }

.diagramm-ring-layout {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}

.diagramm-legende { display: flex; flex-direction: column; gap: 7px; min-width: 240px; }

.diagramm-legende-zeile {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-primary);
}

.diagramm-legende-chip {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex: 0 0 auto;
}

.diagramm-legende-wert { margin-left: auto; color: var(--text-secondary); font-weight: 600; }

/* --- Seit v127: geführtes Vergleichsfenster (Grundform vs. ausgelesener
   Arbeitsvertrag) - links die Grundform, rechts die per KI ausgelesenen
   Paragrafen mit Badges, Übernahme per Knopf oder Drag & Drop. --- */
#muster-vergleich-modal-box {
  max-width: 1500px;
  width: 96vw;
  max-height: 94vh;
  overflow-y: auto;
}

.vergleich-spalten {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}

.vergleich-spalte {
  background: var(--page-plane);
  border: 1px solid var(--gridline);
  border-radius: 8px;
  padding: 10px;
  max-height: 62vh;
  overflow-y: auto;
}

.vergleich-spalte-titel {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.vergleich-links-karte,
.vergleich-rechts-karte {
  background: var(--surface, #fff);
  border: 1px solid var(--gridline);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 4px;
}

.vergleich-links-karte.muster-ergaenzt {
  border-color: var(--gold-deep, #c8961e);
  box-shadow: 0 0 0 1px var(--gold-deep, #c8961e);
}

.vergleich-rechts-karte { cursor: grab; }
.vergleich-rechts-karte.vergleich-dragging { opacity: 0.5; cursor: grabbing; }
.vergleich-rechts-karte.vergleich-uebernommen { opacity: 0.55; cursor: default; }

.vergleich-karte-kopf {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.vergleich-karte-kopf input[type="text"] {
  flex: 1 1 160px;
  min-width: 120px;
  font-weight: 600;
}

.vergleich-drag-griff {
  color: var(--text-muted);
  font-size: 15px;
  cursor: grab;
  user-select: none;
}

.vergleich-links-text,
.vergleich-rechts-text {
  width: 100%;
  box-sizing: border-box;
  font-size: 12.5px;
  line-height: 1.45;
}

.vergleich-rechts-aktionen {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.vergleich-rechts-aktionen select {
  max-width: 220px;
  font-size: 12px;
}

.vergleich-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.vergleich-badge-neu {
  background: rgba(200, 150, 30, 0.16);
  color: var(--gold-deep, #a4780e);
  border: 1px solid var(--gold-deep, #c8961e);
}

.vergleich-badge-abgedeckt {
  background: rgba(45, 122, 62, 0.12);
  color: #2d7a3e;
  border: 1px solid #2d7a3e;
}

.vergleich-badge-uebernommen {
  background: rgba(29, 44, 73, 0.1);
  color: var(--text-secondary);
  border: 1px solid var(--text-muted);
}

.vergleich-drop-zone {
  height: 10px;
  border-radius: 5px;
  margin: 2px 0 6px;
  border: 1px dashed transparent;
  transition: all 0.12s ease;
}

.vergleich-drop-zone.vergleich-drop-aktiv {
  height: 26px;
  border-color: var(--gold-deep, #c8961e);
  background: rgba(200, 150, 30, 0.12);
}

.vergleich-links-karte.vergleich-drop-aktiv {
  border-color: var(--gold-deep, #c8961e);
  box-shadow: 0 0 0 2px var(--gold-deep, #c8961e);
}

#vergleich-lade .hostapi-lade { padding: 4px 0; }

/* --- Seit v128: größere, präsentere Vorschau-Aktualisierungs-Buttons im
   Muster-Editor (Wilhelms Wunsch) - die Vorschau lädt zusätzlich nach jeder
   Änderung automatisch neu. --- */
.muster-vorschau-aktionen { flex-wrap: wrap; gap: 8px; }

.muster-vorschau-aktionen .btn {
  font-size: 14px;
  font-weight: 700;
  padding: 10px 18px;
  line-height: 1.25;
  flex: 1 1 auto;
  text-align: center;
}

.muster-vorschau-aktionen .btn small {
  display: block;
  font-size: 11px;
  font-weight: 500;
  opacity: 0.75;
}

/* --- Seit v128: professionelle Buchungs-Detailansicht im Kalender
   (Wilhelms Wunsch) - Kopf mit Gastname + Portal-/Status-Abzeichen,
   Symbol-Karten (Aufenthalt, Unterkunft & Gäste, Zahlung, Kontakt) und
   Gästekommunikation als Chat mit Absender/Datum. --- */
.cal-detail-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--gridline);
}

.cal-detail-name {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  color: var(--text-primary);
}

.cal-detail-chips { display: flex; gap: 8px; flex-wrap: wrap; }

.cal-detail-chip {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.cal-detail-chip-kanal {
  color: #fff;
  background: var(--kanal-farbe, var(--series-7));
}

.cal-detail-chip-ok {
  background: rgba(45, 122, 62, 0.12);
  color: #2d7a3e;
  border: 1px solid #2d7a3e;
}

.cal-detail-chip-storno {
  background: rgba(179, 38, 30, 0.1);
  color: #b3261e;
  border: 1px solid #b3261e;
}

.cal-detail-karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.cal-detail-karte {
  background: var(--page-plane);
  border: 1px solid var(--gridline);
  border-radius: 10px;
  padding: 10px 12px;
}

.cal-detail-karte-titel {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 8px;
}

.cal-detail-symbol { font-size: 16px; }

.cal-detail-zeile {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 2px 0;
  font-size: 13px;
}

.cal-detail-zeile-label { color: var(--text-muted); flex: 0 0 auto; }
.cal-detail-zeile-wert { text-align: right; color: var(--text-primary); overflow-wrap: anywhere; }
.cal-detail-zeile-wert a { color: var(--gold-deep, #a4780e); font-weight: 600; text-decoration: none; }
.cal-detail-zeile-wert a:hover { text-decoration: underline; }

.chat-meta {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 3px;
}

.chat-bubble.chat-out .chat-meta { color: rgba(255, 255, 255, 0.85); }

/* --- Seit v131: Ziehen nur noch am ⠿-Griff (Text bleibt markier-/kopierbar),
   dazu ↩ Rückgängig und "⬅ § ersetzen". --- */
.vergleich-rechts-karte { cursor: default; }

.vergleich-drag-griff {
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px dashed var(--gridline);
  font-size: 16px;
}

.vergleich-drag-griff:hover {
  color: var(--gold-deep, #a4780e);
  border-color: var(--gold-deep, #c8961e);
  background: rgba(200, 150, 30, 0.08);
}

#vergleich-undo-btn:disabled { opacity: 0.45; }

/* --- Seit v132: Paragrafen im Muster-Editor per ⠿-Griff sortierbar,
   Platzhalter als kompakte Chips mit Mini-Popup, größere PDF-Vorschau. --- */
.muster-paragraf-griff {
  cursor: grab;
  user-select: none;
  color: var(--text-muted);
  font-size: 15px;
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px dashed var(--gridline);
  flex: 0 0 auto;
}

.muster-paragraf-griff:hover {
  color: var(--gold-deep, #a4780e);
  border-color: var(--gold-deep, #c8961e);
  background: rgba(200, 150, 30, 0.08);
}

.muster-paragraf-karte.muster-sortier-dragging {
  opacity: 0.55;
  outline: 2px dashed var(--gold-deep, #c8961e);
  outline-offset: 2px;
}

#muster-vorschau-iframe { height: 68vh; }

.muster-platzhalter-panel { position: relative; }

.muster-platzhalter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.muster-platzhalter-chip {
  border: 1px solid var(--gridline);
  background: var(--page-plane);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.muster-platzhalter-chip:hover {
  border-color: var(--gold-deep, #c8961e);
  color: var(--gold-deep, #a4780e);
  background: rgba(200, 150, 30, 0.08);
}

.platzhalter-popup {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 40;
  background: var(--surface, #fff);
  border: 1px solid var(--gold-deep, #c8961e);
  border-radius: 10px;
  box-shadow: 0 10px 26px rgba(29, 44, 73, 0.22);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.platzhalter-popup-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
}

.platzhalter-popup code {
  font-size: 12px;
  background: var(--page-plane);
  border: 1px solid var(--gridline);
  border-radius: 6px;
  padding: 3px 8px;
  display: inline-block;
}

/* Während des Sortierens: Cursor bleibt "greifend", keine Textmarkierung */
body.muster-sortieren-aktiv, body.muster-sortieren-aktiv * {
  cursor: grabbing !important;
  user-select: none !important;
}

/* --- Seit v134: Verwaltung der digitalen Gästemappen --- */
.gm-admin-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.gm-admin-tab{border:1px solid var(--gridline);background:#fff;border-radius:999px;padding:9px 18px;
  font-size:13.5px;font-weight:700;color:var(--text-secondary);cursor:pointer;font-family:inherit}
.gm-admin-tab.active{background:var(--navy,#1d2c49);border-color:var(--navy,#1d2c49);color:#fff}

.gm-ampel{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px}
.gm-ampel.ok{background:#2d7a3e}
.gm-ampel.warn{background:var(--gold-deep,#c8961e)}
.gm-ampel.neutral{background:#c9c6bd}
.gm-mini{font-size:11.5px;color:var(--text-muted);white-space:normal}
.gm-aktionen{white-space:nowrap}
.gm-aktionen .btn{margin-right:4px;text-decoration:none}

.gm-kachel-zeile{background:#fff;border:1px solid var(--gridline);border-radius:12px;padding:11px 13px;margin-bottom:9px}
.gm-kachel-zeile.eigen{border-color:var(--gold-deep,#c8961e);background:#fffdf6}
.gm-kachel-zeile.zieht{opacity:.6;outline:2px dashed var(--gold-deep,#c8961e)}
.gm-kachel-kopf{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.gm-kachel-griff{cursor:grab;user-select:none;color:var(--text-muted);font-size:15px;padding:2px 6px;
  border:1px dashed var(--gridline);border-radius:6px}
.gm-kachel-griff:hover{color:var(--gold-deep,#a4780e);border-color:var(--gold-deep,#c8961e)}
.gm-kachel-kopf .gm-k-symbol{width:56px;text-align:center;font-size:18px}
.gm-kachel-kopf input[type="text"]{padding:7px 9px;border:1px solid var(--gridline);border-radius:8px;font-size:13px}
.gm-kachel-kopf .gm-k-titel-de,.gm-kachel-kopf .gm-k-titel-en{flex:1 1 160px;min-width:120px;font-weight:600}
.gm-kachel-kopf select{padding:7px;border:1px solid var(--gridline);border-radius:8px;font-size:12.5px}
.gm-k-aktiv{background:#f1efe9 !important;color:var(--text-muted) !important}
.gm-k-aktiv.an{background:rgba(45,122,62,.12) !important;color:#2d7a3e !important;border-color:#2d7a3e !important}
.gm-kachel-felder{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:9px}
.gm-kachel-felder input,.gm-kachel-felder textarea{width:100%;padding:9px;border:1px solid var(--gridline);
  border-radius:8px;font-size:13px;font-family:inherit}
@media (max-width:820px){.gm-kachel-felder{grid-template-columns:1fr}}

/* --- Seit v135: Sortieren + Filtern in ALLEN Tabellen (tabellen.js) --- */
.tab-leiste{display:flex;align-items:center;gap:10px;margin:0 0 8px;flex-wrap:wrap}
.tab-zaehler{font-size:12px;color:var(--text-muted)}
.tab-reset{background:#fff;border:1px solid var(--gridline);border-radius:8px;padding:4px 11px;
  font-size:12px;font-weight:700;color:var(--text-secondary);cursor:pointer}
.tab-reset:hover{border-color:var(--gold-deep,#c8961e);color:var(--gold-deep,#a4780e)}
.tab-trichter{display:none;background:#fff;border:1px solid var(--gridline);border-radius:8px;
  padding:4px 11px;font-size:12px;font-weight:700;cursor:pointer;margin-left:auto}

.tab-sortier-kopf{cursor:pointer;user-select:none;white-space:nowrap}
.tab-sortier-kopf:hover{color:var(--gold-deep,#a4780e)}
.tab-sortier-kopf::after{content:"⇅";font-size:10px;opacity:.35;margin-left:5px}
.tab-sortier-kopf.sort-auf::after{content:"▲";opacity:1;color:var(--gold-deep,#c8961e)}
.tab-sortier-kopf.sort-ab::after{content:"▼";opacity:1;color:var(--gold-deep,#c8961e)}

.tab-filterzeile th{padding:4px 6px 8px;background:var(--page-plane);border-bottom:1px solid var(--gridline);
  vertical-align:top;position:relative}
/* Die Filterzeile selbst darf nicht beschnitten werden - "resizable-table"
   setzt sonst overflow:hidden und white-space:nowrap auf JEDE Zelle. */
table.resizable-table thead .tab-filterzeile th{overflow:visible;white-space:normal}
.tab-filter-text,.tab-filter-klein{width:100%;padding:5px 8px;border:1px solid var(--gridline);
  border-radius:7px;font-size:12px;font-family:inherit;background:#fff;color:var(--text-primary)}
.tab-filter-text::placeholder,.tab-filter-klein::placeholder{color:var(--text-muted);font-size:11.5px}
.tab-filter-bereich{display:flex;gap:4px}
.tab-filter-bereich .tab-filter-klein{min-width:0}
.tab-filter-auswahl-btn{width:100%;padding:5px 8px;border:1px solid var(--gridline);border-radius:7px;
  background:#fff;font-size:12px;cursor:pointer;color:var(--text-secondary);text-align:left;font-family:inherit}
.tab-filter-auswahl-btn.aktiv{border-color:var(--gold-deep,#c8961e);color:var(--gold-deep,#a4780e);font-weight:700}
/* Seit v159 hängt die Klappliste am Seitenkörper und liegt deshalb "fixed"
   auf dem Bildschirm statt in der Tabellenzelle. Vorher stand sie mit
   "position:absolute; top:100%" unterhalb ihrer Zelle - und wurde vom
   "overflow:hidden" der ziehbaren Spalten (siehe table.resizable-table oben)
   restlos weggeschnitten: vorhanden, aber unsichtbar und nicht anklickbar. */
.tab-filter-auswahl{position:fixed;z-index:2000;max-height:min(320px,50vh);overflow-y:auto;
  min-width:170px;max-width:min(420px,92vw);
  background:#fff;border:1px solid var(--gold-deep,#c8961e);border-radius:9px;
  box-shadow:0 10px 26px rgba(29,44,73,.2);padding:6px}
.tab-filter-auswahl.hidden{display:none}
.tab-filter-auswahl label{display:flex;gap:7px;align-items:center;padding:5px 6px;font-size:12.5px;
  color:var(--text-secondary);cursor:pointer;border-radius:6px;font-weight:400;white-space:normal}
.tab-filter-auswahl label:hover{background:var(--page-plane)}
.tab-filter-auswahl input{width:15px;height:15px;flex:0 0 auto}

@media (max-width:820px){
  .tab-trichter{display:inline-block}
  .tab-filterzeile{display:none}
  .tab-filter-offen .tab-filterzeile{display:table-row}
}

/* ------------------------------------------------------------------ */
/* Gästemappen-Link in Buchungstabelle und Kalender (seit v135)         */
/* Wilhelm: "einfach immer mit button copy und paste einfach zu         */
/* klicken" - deshalb ein eigener, gut sichtbarer Block direkt in der   */
/* aufgeklappten Buchung.                                              */
/* ------------------------------------------------------------------ */
.btn-sm { font-size: 13px; padding: 8px 12px; }

.gm-link-block {
  margin: 14px 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius-sm);
  background: var(--surface-1);
  box-shadow: var(--shadow-sm);
}
.gm-link-titel {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--text-primary);
  margin-bottom: 10px;
}
.gm-link-symbol { font-size: 16px; }

.gm-link-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.gm-link-feld {
  flex: 1 1 260px;
  min-width: 0;
  font-size: 13px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: 8px 10px;
  border: 1px solid var(--gridline);
  border-radius: var(--radius-sm);
  background: var(--page-plane);
  color: var(--text-secondary);
}
.gm-link-kopieren.kopiert {
  background: var(--good);
  border-color: var(--good);
  color: #fff;
}
.gm-link-oeffnen { text-decoration: none; }

.gm-link-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.gm-link-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--gridline);
  background: var(--page-plane);
  color: var(--text-secondary);
}
.gm-link-chip.erledigt { border-color: rgba(12,163,12,.35); color: #0a7d0a; background: rgba(12,163,12,.08); }
.gm-link-chip.offen    { border-color: rgba(237,161,0,.45); color: #8a6000; background: rgba(237,161,0,.10); }
.gm-link-chip.wartet   { border-color: var(--gridline); color: var(--text-muted); }

.gm-link-hinweis {
  margin: 9px 0 0;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.45;
}

@media (max-width: 640px) {
  .gm-link-zeile { flex-direction: column; align-items: stretch; }
  .gm-link-zeile .btn { width: 100%; justify-content: center; }
}

/* ==================================================================== */
/* Kommunikation (seit v136)                                            */
/* Wilhelm: "ein neuer menüpunkt namens kommunikation, wo ich jede       */
/* einzelne buchung meine eigenständige vorlagen senden kann"           */
/* ==================================================================== */
.komm-raster {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr) 320px;
  gap: 14px;
  height: calc(100vh - 190px);
  min-height: 520px;
}
.komm-spalte {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.komm-leer { color: var(--text-muted); font-size: 13px; padding: 16px; text-align: center; }

/* --- Spalte 1: Buchungen --- */
.komm-suche { display: flex; gap: 6px; padding: 11px; border-bottom: 1px solid var(--gridline); }
.komm-suche input {
  flex: 1; min-width: 0; border: 1px solid var(--gridline); border-radius: var(--radius-sm);
  padding: 7px 9px; font: inherit; font-size: 12.5px;
}
.komm-reiter {
  display: flex; gap: 5px; flex-wrap: wrap; padding: 8px 11px;
  border-bottom: 1px solid var(--gridline); background: var(--page-plane);
}
.komm-reiter-btn {
  font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--gridline); background: var(--surface-1);
  color: var(--text-secondary); cursor: pointer;
}
.komm-reiter-btn.aktiv { background: var(--navy); border-color: var(--navy); color: #fff; }
.komm-eintraege { overflow: auto; flex: 1; }
.komm-eintrag {
  display: flex; gap: 10px; width: 100%; text-align: left; align-items: center;
  padding: 11px 12px; border: none; border-bottom: 1px solid var(--gridline);
  background: none; cursor: pointer; font: inherit;
}
.komm-eintrag:hover { background: var(--page-plane); }
.komm-eintrag.aktiv { background: rgba(42,120,214,.08); box-shadow: inset 3px 0 0 var(--series-1); }
.komm-av {
  width: 36px; height: 36px; border-radius: 999px; flex: none; color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12.5px;
}
.komm-et { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.komm-n { font-weight: 700; font-size: 13px; }
.komm-u { font-size: 11.5px; color: var(--text-secondary); }
.komm-v { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --- Spalte 2: Verlauf --- */
.komm-thread-kopf {
  padding: 12px 14px; border-bottom: 1px solid var(--gridline);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.komm-thread-kopf h2 { margin: 0; font-size: 15px; }
.komm-thread-zeile2 { margin: 2px 0 0; font-size: 12px; color: var(--text-secondary); }
.komm-chips { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.komm-chip {
  font-size: 11px; font-weight: 600; border-radius: 999px; padding: 3px 9px;
  border: 1px solid var(--gridline); background: var(--page-plane); color: var(--text-secondary);
}
.komm-chip.ok { color: #0a7d0a; background: rgba(12,163,12,.09); border-color: rgba(12,163,12,.3); }
.komm-chip.kanal { color: #fff; border-color: transparent; }
.komm-chip.link { text-decoration: none; }
.komm-verlauf { flex: 1; overflow: auto; padding: 14px; background: linear-gradient(var(--page-plane), var(--surface-1) 70px); }
.komm-tagtrenner { text-align: center; font-size: 11px; color: var(--text-muted); margin: 12px 0 9px; }
.komm-msg { max-width: 76%; margin-bottom: 11px; }
.komm-msg.ich { margin-left: auto; }
.komm-bubble {
  padding: 9px 12px; border-radius: 14px; font-size: 12.5px; line-height: 1.45;
  box-shadow: var(--shadow-sm); word-break: break-word;
}
.komm-msg.gast .komm-bubble { background: var(--surface-1); border: 1px solid var(--gridline); border-bottom-left-radius: 4px; }
.komm-msg.ich .komm-bubble { background: var(--navy); color: #fff; border-bottom-right-radius: 4px; }
.komm-meta { font-size: 10.5px; color: var(--text-muted); margin-top: 3px; }
.komm-msg.ich .komm-meta { text-align: right; }
.komm-fehler {
  border: 1px solid rgba(208,59,59,.35); background: rgba(208,59,59,.06);
  border-radius: var(--radius-sm); padding: 12px 14px; font-size: 13px;
}
.komm-fehler p { margin: 6px 0 0; }
.komm-senden { padding: 11px 14px; border-top: 1px solid var(--gridline); }
.komm-senden textarea {
  width: 100%; border: 1px solid var(--gridline); border-radius: var(--radius-sm);
  padding: 9px; font: inherit; font-size: 12.5px; resize: vertical; min-height: 66px;
}
.komm-senden-fuss { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.komm-senden-fuss select {
  border: 1px solid var(--gridline); border-radius: var(--radius-sm);
  padding: 6px 8px; font-size: 12px; background: var(--surface-1);
}
.komm-senden-fuss .btn-primary { margin-left: auto; }
.komm-hinweis { font-size: 11.5px; color: var(--text-muted); margin: 7px 0 0; }
.komm-vorschau {
  background: var(--page-plane); border: 1px solid var(--gridline); border-radius: var(--radius-sm);
  padding: 11px; font: inherit; font-size: 12.5px; white-space: pre-wrap;
  max-height: 320px; overflow: auto; margin: 8px 0 14px;
}

/* --- Spalte 3: Vorlagen --- */
.komm-vorlagen-kopf {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 13px; border-bottom: 1px solid var(--gridline);
}
.komm-vorlagen-kopf h3 { margin: 0; font-size: 14px; }
.komm-vorlagen-kopf .btn { margin-left: auto; }
.komm-vorlagen-liste { flex: 1; overflow: auto; padding: 9px; }
.komm-v {
  border: 1px solid var(--gridline); border-radius: var(--radius-sm);
  padding: 9px 10px; margin-bottom: 8px; background: var(--surface-1);
}
.komm-v.gold { border-color: var(--gold); background: rgba(200,150,30,.06); }
.komm-v-titel { font-weight: 700; font-size: 12.5px; }
.komm-v-text {
  font-size: 11.5px; color: var(--text-secondary); margin: 3px 0 7px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.komm-v-akt { display: flex; gap: 5px; }
.komm-platzhalter {
  padding: 10px 13px; border-top: 1px solid var(--gridline);
  background: var(--page-plane); font-size: 11px; color: var(--text-secondary); line-height: 2;
}
.komm-platzhalter code {
  background: var(--surface-1); border: 1px solid var(--gridline);
  border-radius: 4px; padding: 1px 5px; font-size: 10.5px;
}

@media (max-width: 1200px) {
  .komm-raster { grid-template-columns: 280px minmax(0, 1fr); height: auto; }
  .komm-vorlagen { grid-column: 1 / -1; max-height: 420px; }
}
@media (max-width: 760px) {
  .komm-raster { grid-template-columns: 1fr; }
  .komm-liste { max-height: 340px; }
  .komm-thread { min-height: 460px; }
}

/* ==================================================================== */
/* Kalender v136: Kommunikationsrand rechts, schönere Balken, Parkplätze */
/* ==================================================================== */
.cal-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 16px;
  align-items: start;
}
.cal-split-links { min-width: 0; }

/* ==================================================================== */
/* Kalender v140: EINE kompakte Werkzeugleiste                          */
/* ==================================================================== */
/* Wilhelm: "Da ist total verschwendeter Platz oben ... vielleicht kannst  */
/* Du das einfach kompakt halten oben auf einer Zeile, sodass der Kalender */
/* noch mal weiter nach oben rutscht." Aus vier Kästen (Register,         */
/* Navigation, Kanal-Häkchen, Legende) mit je eigenem Rahmen und Schatten  */
/* wird eine Zeile mit rund 150 statt 480 Pixeln Höhe.                    */
.cal-leiste {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  padding: 8px 11px;
  margin-bottom: 0;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  box-shadow: var(--shadow-sm);
}
.cal-leiste .cal-register { display: flex; gap: 4px; flex-wrap: wrap; }
.cal-leiste-trenner { width: 1px; height: 20px; background: var(--gridline); flex: none; }
.cal-nav { display: flex; }
.cal-nav .btn { border-radius: 0; padding: 5px 10px; font-size: 12.5px; }
.cal-nav .btn:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.cal-nav .btn:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.cal-nav .btn + .btn { border-left: none; }
.cal-zeitraum { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-secondary); }
.cal-zeitraum input {
  border: 1px solid var(--gridline); border-radius: var(--radius-sm);
  padding: 5px 7px; font: inherit; font-size: 12.5px; background: var(--surface-1);
}
.cal-leiste select {
  border: 1px solid var(--gridline); border-radius: var(--radius-sm);
  padding: 5px 8px; font-size: 12.5px; background: var(--surface-1); max-width: 210px;
}
.cal-filter-knopf {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  border: 1px solid var(--gridline); background: var(--surface-1);
  border-radius: var(--radius-sm); padding: 5px 11px; font-size: 12.5px; font-weight: 600;
  color: var(--text-primary);
}
.cal-filter-knopf.aktiv { background: var(--navy, #1d2c49); border-color: var(--navy, #1d2c49); color: #fff; }
.cal-filter-zahl {
  font-size: 10.5px; font-weight: 800; border-radius: 999px; padding: 1px 7px;
  background: var(--page-plane); color: var(--text-secondary);
}
.cal-filter-knopf.aktiv .cal-filter-zahl { background: rgba(255,255,255,.2); color: #fff; }

.cal-filterbox {
  display: flex; align-items: center; gap: 15px; flex-wrap: wrap;
  padding: 8px 11px;
  background: var(--surface-1);
  border: 1px solid var(--border); border-top: none;
  font-size: 12px; color: var(--text-secondary);
}
.cal-filterbox label { display: flex; align-items: center; gap: 5px; font-weight: 600; }

/* Schmale Dauerlegende + ausführliche Erklärung (v140) */
.cal-legende {
  /* Seit v165 stehen hier vier Zeichen mehr (Sanduhr, P, L, E, Z). Damit die
     Legende trotzdem EINE Zeile bleibt - Wilhelm hatte in v140 zu Recht den
     verschwendeten Platz über dem Kalender bemängelt -, sind Abstand und
     Schrift etwas enger. */
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 4px 11px;
  background: var(--page-plane);
  border: 1px solid var(--border); border-top: none;
  font-size: 11px; color: var(--text-secondary); line-height: 1.25;
}
.cal-legende-e { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.cal-legende-kasten { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.cal-legende-marke { display: inline-block; width: 4px; height: 14px; border-radius: 2px; flex: none; }
/* Seit v168: der Riegel der Zeitleiste als Legendenzeichen */
.cal-legende-riegel { display: inline-block; width: 22px; height: 8px; border-radius: 4px; flex: none; }
.cal-legende-balken { display: inline-block; width: 22px; height: 12px; border-radius: 7px; }
.cal-hilfe-knopf {
  margin-left: auto; flex: none; cursor: pointer;
  width: 20px; height: 20px; border-radius: 999px;
  border: 1px solid var(--gridline); background: var(--surface-1);
  font-size: 11px; font-weight: 800; color: var(--text-secondary);
  display: inline-flex; align-items: center; justify-content: center;
}
.cal-hilfe-knopf.aktiv { background: var(--navy, #1d2c49); border-color: var(--navy, #1d2c49); color: #fff; }

.cal-erklaerung {
  padding: 12px 14px;
  background: var(--surface-1);
  border: 1px solid var(--border); border-top: none;
}
.cal-erklaerung h2 {
  margin: 0 0 9px; font-size: 12px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-secondary);
}
.cal-erklaerung-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px 20px; }
.cal-erklaerung-punkt { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; }
.cal-erklaerung-symbol { flex: none; width: 26px; text-align: center; font-size: 14px; padding-top: 1px; }
.cal-erklaerung-punkt b { display: block; font-size: 12px; }
.cal-erklaerung-punkt span span { color: var(--text-secondary); }
.cal-erklaerung-punkt > span:last-child { font-size: 11.5px; color: var(--text-secondary); }
.cal-erklaerung-fuss { margin: 10px 0 0; font-size: 11.5px; color: var(--text-secondary); }

@media (max-width: 1100px) {
  .cal-erklaerung-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .cal-erklaerung-raster { grid-template-columns: 1fr; }
}

/* Der Kalender schließt seit v140 direkt an die Leiste an */
.cal-leiste + .cal-wrapper,
.cal-filterbox + .cal-legende + .cal-wrapper,
.cal-legende + .cal-wrapper,
.cal-erklaerung + .cal-wrapper {
  border-top-left-radius: 0; border-top-right-radius: 0;
}

.cal-stand {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  padding: 0;
  font-size: 11.5px;
  color: var(--text-muted);
  border-bottom: none;
}
.cal-stand-text { white-space: nowrap; }
.cal-stand-punkt {
  width: 8px; height: 8px; border-radius: 999px; background: var(--good);
  box-shadow: 0 0 0 3px rgba(12,163,12,.15); flex: none;
}
.cal-stand-punkt.alt { background: var(--gold); box-shadow: 0 0 0 3px rgba(200,150,30,.18); }
/* Rad, solange im Hintergrund aufgefrischt wird (v140) */
.cal-stand-rad {
  width: 13px; height: 13px; flex: none; border-radius: 999px;
  border: 2px solid var(--gridline); border-top-color: var(--gold);
  animation: cal-stand-dreh 900ms linear infinite;
}
@keyframes cal-stand-dreh { to { transform: rotate(360deg); } }
.cal-stand .btn { margin-left: 0; }

/* Balken: Initialen-Kreis + Abzeichen */
.cal-bar-av {
  flex: none;
  width: 18px; height: 18px; border-radius: 999px;
  background: rgba(255,255,255,.25);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9.5px; font-weight: 800; letter-spacing: .02em;
}
.cal-bar-abzeichen {
  margin-left: auto;
  background: rgba(255,255,255,.22);
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}
.cal-bar.aktiv { outline: 3px solid rgba(200,150,30,.6); outline-offset: 1px; }

/* Kommunikationsrand */
.komm-rand {
  position: sticky;
  top: 14px;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 40px);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.komm-rand.aktiv { border-color: rgba(200,150,30,.5); }
.komm-rand-kopf { padding: 13px 14px; border-bottom: 1px solid var(--gridline); }
.komm-rand-kopf h2 { margin: 0 0 2px; font-size: 15px; }
.komm-rand .komm-chips { margin-left: 0; margin-top: 9px; }
.komm-rand .komm-verlauf { min-height: 240px; }
.komm-vorlagen-leiste {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 9px 14px; border-top: 1px solid var(--gridline);
  background: var(--page-plane);
}
.komm-vorlage-chip {
  font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--gridline); background: var(--surface-1);
  color: var(--text-secondary); cursor: pointer; text-decoration: none;
}
.komm-vorlage-chip.gold { border-color: var(--gold); color: var(--gold-deep); background: rgba(200,150,30,.08); }

/* Parkplatz-Block */
.park-wrapper { margin-top: 16px; }
.park-wrapper.hidden { display: none !important; }
.park-kopf {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 11px 14px; border-bottom: 1px solid var(--gridline);
  background: linear-gradient(90deg, rgba(200,150,30,.10), transparent);
}
.park-kopf h2 { margin: 0; font-size: 15px; }
.park-ampel { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); }
.park-zahl { font-weight: 800; font-size: 16px; }
.park-zahl.frei { color: var(--good); }
.park-zahl.voll { color: var(--critical); }
.park-row .cal-row-name { background: #fdfaf2; }
.park-nr {
  width: 28px; height: 26px; border-radius: 7px; background: var(--gold); color: #241a02;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 11.5px; margin-right: 8px; flex: none;
}
.park-bar { background: linear-gradient(135deg, #8d99ad, #6b7789); cursor: pointer; }
.park-bar.gesperrt {
  background: repeating-linear-gradient(45deg, #b9b3a4, #b9b3a4 7px, #a8a294 7px, #a8a294 14px);
  color: #3d3a32; cursor: default;
}
.park-legende {
  display: flex; gap: 16px; flex-wrap: wrap;
  padding: 9px 14px; border-top: 1px solid var(--gridline);
  font-size: 11.5px; color: var(--text-secondary);
}

@media (max-width: 1300px) {
  .cal-split { grid-template-columns: 1fr; }
  .komm-rand { position: static; max-height: 620px; }
}

/* ==================================================================== */
/* v137: Buchung bearbeiten (Stift), Zusatzverkäufe, Parkplatz-Häkchen  */
/* ==================================================================== */
.bb-stift {
  border: 1px solid var(--gridline);
  background: var(--surface-1);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 4px 8px;
  margin-left: 8px;
  vertical-align: middle;
}
.bb-stift:hover { border-color: var(--gold); background: rgba(200,150,30,.08); }

.bb-geaendert {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--gold-deep);
  background: rgba(200,150,30,.12);
  border: 1px solid rgba(200,150,30,.4);
  border-radius: 999px;
  padding: 1px 7px;
  margin-left: 7px;
  vertical-align: middle;
}
.bb-original { display: block; margin-top: 4px; font-size: 11px; color: var(--text-muted); }

.detail-kopf { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.detail-kopf-name { margin: 0; font-size: 16px; }

/* Karte Zusatzverkäufe */
.bb-zusatz {
  margin: 14px 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--series-3);
  border-radius: var(--radius-sm);
  background: var(--surface-1);
  box-shadow: var(--shadow-sm);
}
.bb-zusatz-titel {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; margin-bottom: 10px;
}
.bb-zusatz-symbol { font-size: 16px; }
.bb-posten { width: 100%; border-collapse: collapse; font-size: 13px; }
.bb-posten td { padding: 6px 4px; border-bottom: 1px solid var(--gridline); vertical-align: middle; }
.bb-p-sym { width: 26px; font-size: 15px; }
.bb-p-titel { font-weight: 600; }
.bb-p-mini { font-size: 11.5px; color: var(--text-secondary); font-weight: 400; }
.bb-p-status { width: 150px; }
.bb-p-betrag { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bb-summe {
  display: flex; align-items: baseline; gap: 8px;
  margin-top: 9px; font-size: 13px;
}
.bb-summe b { font-size: 15px; }

.bb-parkplatz {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 11px; border-top: 1px dashed var(--gridline);
}
.bb-park-label { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 13px; cursor: pointer; }
.bb-park-label.aus { opacity: .55; cursor: not-allowed; }
.bb-park-label input { width: 17px; height: 17px; accent-color: var(--gold); }
.bb-park-info { font-size: 12.5px; color: var(--text-secondary); }
.bb-park-fehler { color: var(--critical); font-weight: 600; }
.bb-parkplatz .btn { margin-left: auto; }

/* ==================================================================== */
/* v138: Standorte (Nummernkreise) und Regionen                          */
/* ==================================================================== */
.nk-warnung {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 15px; margin-bottom: 14px;
  border-radius: var(--radius-md);
  background: rgba(237,161,0,.10);
  border: 1px solid rgba(237,161,0,.45);
  font-size: 13px;
}
.nk-warnung.hidden { display: none !important; }
.nk-warn-symbol { font-size: 20px; }
.nk-warnung b { color: #8a6000; }

.nk-regionen {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.nk-region {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  box-shadow: var(--shadow-sm);
  padding: 12px 14px;
}
.nk-region-kopf {
  display: flex; align-items: center; gap: 8px;
  font-size: 14.5px; font-weight: 800; margin-bottom: 2px;
}
.nk-region-kopf .btn { margin-left: auto; }
.nk-ort { font-size: 17px; }
.nk-neu {
  border: 2px dashed var(--gridline);
  background: var(--page-plane);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; min-height: 130px; cursor: pointer; color: var(--text-secondary);
  font: inherit;
}
.nk-neu:hover { border-color: var(--gold); background: rgba(200,150,30,.06); }
.nk-plus { font-size: 24px; color: var(--gold); }

.nk-kreis {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; margin-top: 8px;
  border: 1px solid var(--gridline); border-radius: var(--radius-sm);
  background: var(--page-plane);
}
.nk-kreis-txt { flex: 1; min-width: 0; font-size: 12.5px; }
.nk-kreis-txt b { display: block; }
.nk-zahl { font-size: 11.5px; color: var(--text-secondary); white-space: nowrap; }
.nk-chip {
  display: inline-flex; width: max-content; flex: none; align-items: center;
  font-size: 11px; font-weight: 800; letter-spacing: .03em;
  border-radius: 999px; padding: 3px 9px; color: #fff;
}

.nk-massen {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 10px 12px; font-size: 12.5px;
  background: rgba(237,161,0,.07);
  border: 1px solid var(--gridline); border-bottom: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.nk-massen select {
  border: 1px solid var(--gridline); border-radius: var(--radius-sm);
  padding: 5px 8px; font-size: 12px; background: var(--surface-1);
}
#nk-tabelle tr.nk-gruppe td {
  background: var(--page-plane); font-weight: 700; font-size: 12px;
  letter-spacing: .04em; padding: 7px 12px;
}
#nk-tabelle tr.nk-gruppe.warn td { background: rgba(237,161,0,.10); color: #8a6000; }
#nk-tabelle tr.nk-offen td { background: rgba(237,161,0,.04); }
.nk-wahl {
  width: 100%; border: 1px solid var(--gridline); border-radius: var(--radius-sm);
  padding: 5px 7px; font-size: 12.5px; background: var(--surface-1);
}

/* v138: Nummernkreis-Abzeichen im Schichtplan */
.sp-kreis {
  display: inline-flex; align-items: center;
  font-size: 9.5px; font-weight: 800; letter-spacing: .03em;
  border-radius: 999px; padding: 1px 6px; color: #fff; margin-left: 4px;
}
.sp-auch {
  font-size: 10px; font-weight: 700; color: #8a6000;
  background: rgba(237,161,0,.14); border: 1px solid rgba(237,161,0,.4);
  border-radius: 999px; padding: 1px 7px; margin-left: 5px;
}

/* ==================================================================== */
/* v139: Wechseltage im Kalender (Ampel + Reinigungs-Vorrang)            */
/* ==================================================================== */
.cal-bar-status {
  flex: none;
  font-size: 12px;
  line-height: 1;
}
.cal-bar-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Am Rand abgeschnittene Balken bekommen keine runde Kappe */
.cal-bar-offen-links { border-top-left-radius: 2px; border-bottom-left-radius: 2px; }
.cal-bar-offen-rechts { border-top-right-radius: 2px; border-bottom-right-radius: 2px; }

/* ==================================================================== */
/* v168: Der Wechseltag als Zeitleiste unter den Buchungen               */
/* ==================================================================== */
/* Die senkrechte Marke von v139 ist weg. Wilhelm: "Mach lieber einen
   richtigen roten Balken, wo man besser erkennt, welche Buchung nunmal Late
   Check-out bis wie viel Uhr, und genauso Early Check-in - ein roter Balken
   etwas unter den Buchungen mit Zeitangabe von 10, 11, 12, 13, 14, 15 unter
   der Schnittstelle zur anderen Buchung. Und man muss es gut erkennen
   können im Kalender."
   Die Skala läuft von 10 bis 16 Uhr über zwei Tagesspalten (184 px), mittig
   unter der Naht zwischen abreisendem und anreisendem Gast. */
.cal-zeitleiste {
  position: absolute;
  top: var(--zl-oben, 40px);
  z-index: 5;
  pointer-events: auto;
}
.cal-zl-grund {
  position: absolute;
  left: 0; right: 0; top: 3px;
  height: 9px;
  border-radius: 5px;
  background: #eceae2;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05);
}
.cal-zl-tick {
  position: absolute;
  top: 3px;
  width: 1px;
  height: 9px;
  background: rgba(0, 0, 0, .13);
}
.cal-zl-zahl {
  position: absolute;
  top: 13px;
  transform: translateX(-50%);
  font-size: 8.5px;
  font-weight: 700;
  color: var(--text-tertiary, #8b8880);
  letter-spacing: -.2px;
}
/* Der Riegel: vom Weggehen des einen bis zum Kommen des anderen. */
.cal-zl-riegel {
  position: absolute;
  top: 1px;
  height: 13px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 9px;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.cal-zl-zeit {
  position: absolute;
  top: 1px;
  font-size: 9px;
  font-weight: 800;
  white-space: nowrap;
  background: #fff;
  border-radius: 5px;
  padding: 0 4px;
  line-height: 13px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
}
.cal-zl-links { transform: translateX(-100%); margin-left: -3px; }
.cal-zl-rechts { margin-left: 3px; }
/* Die senkrechte Naht verbindet die Leiste mit der Stelle im Balken, an der
   der Wechsel wirklich stattfindet. */
.cal-zl-naht {
  position: absolute;
  top: -7px;
  width: 2px;
  height: 11px;
  background: rgba(0, 0, 0, .18);
  transform: translateX(-1px);
}
/* Farbe = wie viel Zeit die Reinigung hat (siehe wechseltag.py):
   rot höchstens die Mindestzeit, gelb weniger als eine Stunde Luft, grün genug. */
.cal-zl-rot .cal-zl-riegel { background: var(--critical); }
.cal-zl-rot .cal-zl-zeit { color: var(--critical); }
.cal-zl-rot .cal-zl-grund { background: rgba(208, 59, 59, .12); }
.cal-zl-gelb .cal-zl-riegel { background: var(--warn, #eda100); color: #3a2a00; }
.cal-zl-gelb .cal-zl-zeit { color: #7a5a00; }
.cal-zl-gruen .cal-zl-riegel { background: var(--series-3, #1baf7a); }
.cal-zl-gruen .cal-zl-zeit { color: #0b4d31; }

/* ==================================================================== */
/* v139: Buchungsfenster zweispaltig mit Kommunikation + KI-Prüfung      */
/* ==================================================================== */
.cal-modal-panel { max-width: 1340px; }
/* Seit v140 ist die Kommunikationsspalte 20 % breiter (400 -> 480 px):
   "die Gästekommunikation kann ein bisschen größer gemacht werden nach
   links. Ich würd sagen, vielleicht noch mal zwanzig Prozent breiter." */
.cal-modal-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 480px;
  gap: 18px;
  align-items: start;
}
.cal-modal-raster.einspaltig { grid-template-columns: minmax(0, 1fr); }
.cal-modal-links { min-width: 0; }
.cal-modal-rechts { min-width: 0; }

.fk-spalte {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: #fbfaf7;
  overflow: hidden;
  max-height: 62vh;
  position: sticky;
  top: 0;
}
.fk-kopf {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 11px 13px; border-bottom: 1px solid var(--gridline);
  background: var(--surface-1); font-size: 13.5px;
}
.fk-kopf .fk-ki {
  margin-left: auto;
  background: linear-gradient(135deg, #d9ab2e, #a87b12);
  border-color: #a87b12; color: #fff;
}
.fk-anzahl { font-size: 11.5px; }
.fk-inhalt {
  flex: 1; overflow: auto; padding: 12px 13px;
  background: linear-gradient(var(--page-plane), var(--surface-1) 60px);
  min-height: 180px;
}
.fk-senden { padding: 10px 13px; border-top: 1px solid var(--gridline); background: var(--surface-1); }
.fk-senden textarea {
  width: 100%; border: 1px solid var(--gridline); border-radius: var(--radius-sm);
  padding: 8px; font: inherit; font-size: 12.5px; resize: vertical;
}
.fk-senden-fuss { display: flex; gap: 7px; align-items: center; margin-top: 7px; }
.fk-senden-fuss select {
  border: 1px solid var(--gridline); border-radius: var(--radius-sm);
  padding: 5px 8px; font-size: 12px; background: var(--surface-1);
}
.fk-senden-fuss .btn-primary { margin-left: auto; }
.fk-hinweis { margin-top: 6px; }

/* KI-Ergebnis */
.fk-ki-ergebnis {
  margin: 11px 13px 0;
  border: 1px solid rgba(200,150,30,.5);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, rgba(200,150,30,.10), rgba(200,150,30,.03));
  padding: 10px 11px;
}
.fk-ki-kopf {
  display: flex; align-items: center; gap: 8px; justify-content: space-between;
  font-size: 12.5px; font-weight: 800; margin-bottom: 8px;
}
.fk-fund {
  display: flex; gap: 9px; padding: 8px 9px; margin-bottom: 6px; cursor: pointer;
  border: 1px solid var(--gridline); border-radius: var(--radius-sm); background: var(--surface-1);
}
.fk-fund:hover { border-color: var(--gold); }
.fk-fund.rot { border-color: rgba(208,59,59,.5); background: rgba(208,59,59,.04); }
.fk-fund.gruen { border-color: rgba(12,163,12,.4); background: rgba(12,163,12,.04); }
.fk-fund-sym { font-size: 16px; flex: none; }
.fk-fund-txt { flex: 1; min-width: 0; }
.fk-fund-txt b { display: block; font-size: 12.5px; }
.fk-fund-tag {
  font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: #0a7d0a; background: rgba(12,163,12,.10);
  border: 1px solid rgba(12,163,12,.35); border-radius: 999px; padding: 1px 6px;
}
.fk-zitat {
  display: block; font-size: 11.5px; color: var(--text-secondary); font-style: italic;
  margin: 3px 0 4px; border-left: 2px solid var(--gridline); padding-left: 7px;
}
.fk-hostapi { display: block; font-size: 11.5px; font-weight: 600; color: var(--text-secondary); }
.fk-hostapi.warn { color: #a12626; }
.komm-msg.treffer .komm-bubble { outline: 2px solid var(--gold); outline-offset: 2px; }

@media (max-width: 1100px) {
  .cal-modal-raster { grid-template-columns: minmax(0, 1fr); }
  .fk-spalte { position: static; max-height: 420px; }
}


/* ==================================================================== */
/* v140: Buchungsfenster - großer Kopf, Eckdaten, Zahlungsdetails,      */
/*       Gastdaten, Rechnungen, Rohdaten-Miniknöpfe                     */
/* ==================================================================== */
.cal-detail-kopf.cal-detail-gross { padding-bottom: 4px; }
.cal-detail-gross .cal-detail-name {
  font-size: 22px; font-weight: 800; letter-spacing: -.2px;
}
.cal-detail-gross .cal-detail-chip { font-size: 12px; padding: 4px 11px; }

.cal-detail-eckdaten {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 10px 0 15px;
}
.cal-eck {
  background: var(--page-plane);
  border: 1px solid var(--gridline);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 14px;
  color: var(--text-secondary);
}
.cal-eck b { color: var(--text-primary); font-weight: 700; }

/* Große Karte (Zahlungsdetails, Kontakt, Rechnungsadresse, Rechnungen) */
.zd-karte {
  border: 1px solid var(--gridline);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  box-shadow: var(--shadow-sm);
  margin-bottom: 12px;
  overflow: hidden;
}
.zd-kopf {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 11px 13px;
  border-bottom: 1px solid var(--gridline);
  background: linear-gradient(90deg, rgba(42,120,214,.07), transparent);
  font-size: 13.5px; font-weight: 800;
}
.zd-sym { font-size: 15px; }
.zd-quelle {
  margin-left: auto; font-size: 11px; font-weight: 600; color: var(--text-muted);
}
.zd-quelle.warn { color: #a12626; }
.zd-inhalt { padding: 11px 13px; }
.zd-spalten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; }
.zd-untertitel {
  font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted); margin: 9px 0 3px;
}
.zd-spalten > div > .zd-untertitel:first-child { margin-top: 0; }
.zd-zeile {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 12.5px; padding: 4px 0;
  border-bottom: 1px dotted var(--gridline);
}
.zd-zeile:last-child { border-bottom: none; }
.zd-zeile > span:first-child { color: var(--text-secondary); }
.zd-wert { font-weight: 600; text-align: right; }
.zd-summe {
  border-top: 1px solid var(--gridline); border-bottom: none;
  margin-top: 5px; padding-top: 8px; font-size: 13.5px;
}
.zd-summe .zd-wert { font-weight: 800; }
.zd-minus .zd-wert { color: var(--critical, #d03b3b); }
.zd-status .zd-wert { color: var(--good); }
.zd-netto {
  background: rgba(12,163,12,.07); border-radius: var(--radius-sm);
  border-bottom: none; margin-top: 7px; padding: 7px 9px;
}
.zd-netto .zd-wert { font-weight: 800; color: #0a7a0a; }
.zd-fuss {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-top: 9px; font-size: 11.5px; color: var(--text-secondary);
}
.zd-knopfzeile { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 9px; }
.zd-quelle-tag {
  font-size: 9.5px; font-weight: 700; border-radius: 5px; padding: 1px 5px;
  margin-left: 5px; vertical-align: 1px;
}
.zd-quelle-tag.ci { background: rgba(12,163,12,.13); color: #0a7a0a; }
.zd-quelle-tag.ha { background: rgba(42,120,214,.12); color: #1c5ea8; }

/* Rechnungen zur Buchung */
.rg-zeile {
  display: flex; align-items: center; gap: 11px;
  font-size: 12.5px; padding: 7px 0;
  border-bottom: 1px dotted var(--gridline);
}
.rg-zeile:last-child { border-bottom: none; }
.rg-nr { font-weight: 800; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.rg-datum { color: var(--text-secondary); }
.rg-betrag { margin-left: auto; font-weight: 700; text-align: right; }
.rg-betrag small { display: block; font-weight: 500; font-size: 10.5px; color: var(--text-muted); }
.rg-status { font-size: 11px; color: var(--text-secondary); }

/* Rohdaten: zwei Miniknöpfe statt drei Aufklapp-Zeilen */
.roh-leiste {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin-top: 14px; padding-top: 11px; border-top: 1px solid var(--gridline);
}
.roh-hinweis { font-size: 11px; color: var(--text-muted); }
.roh-knopf {
  border: 1px solid var(--gridline); background: var(--surface-1);
  border-radius: 7px; padding: 3px 9px; cursor: pointer;
  font-size: 10.5px; font-weight: 600; color: var(--text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.roh-knopf:hover { border-color: var(--gold); color: var(--text-primary); }
.roh-fenster {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(20,19,15,.45);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.roh-fenster-kasten {
  background: var(--surface-1); border-radius: var(--radius-md);
  box-shadow: 0 18px 50px rgba(20,19,15,.28);
  width: min(900px, 100%); max-height: 82vh; display: flex; flex-direction: column;
  overflow: hidden;
}
.roh-fenster-kopf {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-bottom: 1px solid var(--gridline);
  font-size: 13px;
}
.roh-fenster-kopf .btn { margin-left: auto; }
.roh-fenster-zu {
  border: none; background: none; cursor: pointer;
  font-size: 17px; color: var(--text-muted); line-height: 1;
}
.roh-fenster pre {
  margin: 0; padding: 13px 14px; overflow: auto; flex: 1;
  font-size: 11.5px; line-height: 1.45; white-space: pre-wrap; word-break: break-word;
  background: var(--page-plane);
}

@media (max-width: 900px) {
  .zd-spalten { grid-template-columns: minmax(0, 1fr); }
}


/* ==================================================================== */
/* v141: Zusatzverkäufe (Herkunft, Bezahlstatus, "＋") + Auszahlung     */
/* ==================================================================== */
.zd-ignoriert { background: var(--page-plane); border-radius: var(--radius-sm);
  border-bottom: none; margin-top: 6px; padding: 7px 9px; font-size: 11.5px; }
.zd-ignoriert .zd-wert { color: var(--text-muted); font-weight: 600; text-decoration: line-through; }
.zd-warnung {
  margin: 9px 0 0; padding: 8px 10px; font-size: 11.5px;
  border: 1px solid rgba(237,161,0,.45); border-radius: var(--radius-sm);
  background: rgba(237,161,0,.08); color: #7a5500;
}

.bb-zusatz-rand { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--text-muted); }
.bb-zv-gruppe {
  font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted); margin: 10px 0 2px;
}
.bb-zv-zeile {
  display: flex; align-items: center; gap: 10px; font-size: 12.5px;
  padding: 8px 0; border-bottom: 1px dotted var(--gridline);
}
.bb-zv-zeile:last-of-type { border-bottom: none; }
.bb-zv-zeile.aus { opacity: .62; }
/* Seit v159: erkannte Leistungen (aus Hostaway oder aus einer Rechnung) sind
   noch keine Posten - sie stehen deshalb sichtbar abgesetzt. */
.bb-zv-erkannt-kopf { color: var(--gold-deep, #a4780e); }
.bb-zv-zeile.bb-zv-erkannt {
  background: rgba(200, 150, 30, .07); border-radius: 8px;
  padding: 8px 10px; margin: 2px 0; border-bottom: none;
}
.bb-zv-sym { font-size: 16px; flex: none; width: 22px; text-align: center; }
.bb-zv-txt { flex: 1; min-width: 0; }
.bb-zv-txt b { display: block; font-size: 12.5px; }
.bb-zv-txt small { color: var(--text-muted); font-size: 11px; }
.bb-zv-betrag { font-weight: 700; white-space: nowrap; }
.bb-zv-knoepfe { display: flex; gap: 5px; flex: none; }
.bb-zv-aktionen { margin-top: 11px; display: flex; gap: 8px; flex-wrap: wrap; }
.bb-zv-bilanz {
  display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
  margin-top: 11px; padding: 9px 11px; background: var(--page-plane);
  border-radius: var(--radius-sm); font-size: 12.5px;
}
.bb-zv-bilanz b { font-size: 14px; }
.bb-zv-gruen { color: #0a7a0a; }
.bb-zv-gelb { color: #8a6100; }
.bb-zv-rot { color: #a12626; }
.bb-zv-rand { margin-left: auto; font-size: 11px; color: var(--text-muted); }

/* Dialog "Zusatzverkauf hinzufügen" */
.bb-zv-dialog {
  position: fixed; inset: 0; z-index: 220; background: rgba(20,19,15,.45);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.bb-zv-kasten {
  background: var(--surface-1); border-radius: 16px; width: min(620px, 100%);
  max-height: 86vh; display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 18px 50px rgba(20,19,15,.28);
}
.bb-zv-kopf {
  display: flex; align-items: center; gap: 10px; padding: 12px 15px;
  border-bottom: 1px solid var(--gridline); font-weight: 800; font-size: 14px;
}
.bb-zv-zu { margin-left: auto; border: none; background: none; cursor: pointer;
  font-size: 17px; color: var(--text-muted); line-height: 1; }
.bb-zv-inhalt { padding: 13px 15px; overflow: auto; }
.bb-zv-feld { display: block; margin-bottom: 11px; }
.bb-zv-feld > span {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px;
}
.bb-zv-feld select, .bb-zv-feld input {
  width: 100%; border: 1px solid var(--gridline); border-radius: var(--radius-sm);
  padding: 7px 9px; font: inherit; font-size: 13px; background: var(--surface-1);
}
.bb-zv-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.bb-zv-wege { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.bb-zv-weg-knopf {
  text-align: left; border: 1px solid var(--gridline); border-radius: var(--radius-sm);
  padding: 9px 10px; cursor: pointer; background: var(--surface-1); font: inherit; font-size: 12px;
}
.bb-zv-weg-knopf.an { border-color: var(--navy); box-shadow: 0 0 0 2px rgba(29,44,73,.12); }
.bb-zv-weg-knopf b { display: block; font-size: 12.5px; margin-bottom: 2px; }
.bb-zv-weg-knopf span { color: var(--text-secondary); font-size: 11px; }
.bb-zv-vorschau {
  background: var(--page-plane); border: 1px solid var(--gridline); border-radius: var(--radius-sm);
  padding: 9px 11px; font-size: 11.5px; white-space: pre-wrap; margin-top: 11px;
}
.bb-zv-senden { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 9px; }
.bb-zv-fuss {
  display: flex; gap: 9px; align-items: center; padding: 11px 15px;
  border-top: 1px solid var(--gridline); background: #fbf9f4;
}
.bb-zv-meldung { font-size: 11.5px; }

/* Prüfliste "Auszahlungen prüfen" */
.pruef-tabelle { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 10px; }
.pruef-tabelle th {
  text-align: left; font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-muted); padding: 7px 9px; border-bottom: 1px solid var(--gridline);
}
.pruef-tabelle td { padding: 7px 9px; border-bottom: 1px dotted var(--gridline); }
.pruef-tabelle td.r { text-align: right; white-space: nowrap; }
.pruef-tabelle tr.unklar td { background: rgba(237,161,0,.08); }


/* v143: Kulanz-Leistungen, Sende-Leiste, Stellplatz-Hinweis */
.gm-link-chip.gratis {
  background: rgba(42,120,214,.12); border-color: rgba(42,120,214,.3); color: #1c5ea8;
}
.bb-zv-blau { color: #1c5ea8; }
.bb-zv-park { margin: 10px 0 0; }
.bb-zv-senden { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; margin-top: 9px; }
.bb-zv-kanal {
  border: 1px solid var(--gridline); border-radius: var(--radius-sm);
  padding: 4px 8px; font-size: 12px; background: var(--surface-1);
}
.bb-zv-wege { grid-template-columns: repeat(2, minmax(0, 1fr)); }


/* v144: Bezahlwege zum Ankreuzen, Kulanz-Belegung im Parkplatz-Kalender */
.bb-zv-weg-knopf.an::after { content: "✓"; position: absolute; top: 7px; right: 9px;
  font-weight: 800; color: var(--navy); }
.bb-zv-weg-knopf { position: relative; }
.bb-zv-weg-knopf.alle.an {
  border-color: var(--gold); box-shadow: 0 0 0 2px rgba(200,150,30,.22);
  background: linear-gradient(180deg, rgba(200,150,30,.10), rgba(200,150,30,.03));
}
.bb-zv-weg-knopf.alle.an::after { color: #a87b12; }
.bb-zv-weg-knopf.weg-still, .bb-zv-weg-knopf.weg-aus {
  opacity: .45; cursor: not-allowed; background: var(--page-plane);
}
.park-bar.kulanz { background: linear-gradient(135deg, #3a86e0, #2a78d6) !important; }


/* ==================================================================== */
/* v144: Einstellungen als aufklappbare Bereiche mit eigenem Speichern   */
/* ==================================================================== */
.ea-liste { max-width: 980px; }
.ea {
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface-1); box-shadow: var(--shadow-sm);
  margin-bottom: 10px; overflow: hidden;
}
.ea-kopf {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 13px 15px; cursor: pointer; text-align: left;
  border: none; background: none; font: inherit; color: inherit;
}
.ea.werkzeug .ea-kopf { background: linear-gradient(90deg, rgba(42,120,214,.06), transparent); }
.ea-pfeil { color: var(--text-muted); font-size: 12px; width: 12px; flex: none; transition: transform .15s; }
.ea.offen .ea-pfeil { transform: rotate(90deg); }
.ea-sym { font-size: 17px; }
.ea-kopf b { font-size: 14px; }
.ea-sub { font-size: 11.5px; color: var(--text-muted); }
.ea-zustand {
  margin-left: auto; flex: none; font-size: 10.5px; font-weight: 700;
  border-radius: 999px; padding: 3px 10px; white-space: nowrap;
  border: 1px solid var(--gridline); background: var(--page-plane); color: var(--text-secondary);
}
.ea-zustand.ok { background: rgba(12,163,12,.12); border-color: rgba(12,163,12,.3); color: #0a7a0a; }
.ea-zustand.fehlt { background: rgba(237,161,0,.14); border-color: rgba(237,161,0,.34); color: #8a6100; }
.ea-zustand.leer { color: var(--text-muted); }
.ea-koerper { display: none; padding: 0 15px 14px; border-top: 1px solid var(--gridline); }
.ea.offen .ea-koerper { display: block; }
.ea-info { font-size: 11.5px; color: var(--text-secondary); margin: 12px 0; }
.ea-info a { color: #1c5ea8; }
.ea-reihe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ea-feld { margin-bottom: 6px; }
.ea-feld.voll { grid-column: 1 / -1; }
.ea-feld label {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px;
}
.ea-feld input, .ea-feld select {
  width: 100%; border: 1px solid var(--gridline); border-radius: var(--radius-sm);
  padding: 8px 10px; font: inherit; font-size: 13px; background: var(--surface-1);
}
.ea-status { font-size: 11px; color: var(--text-muted); margin: 5px 0 0; }
.ea-ok { color: #0a7a0a; font-weight: 600; }
.ea-fuss {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 8px; padding-top: 12px; border-top: 1px dotted var(--gridline);
}
.ea-meldung { font-size: 11.5px; font-weight: 600; }
.ea-meldung.ok { color: #0a7a0a; }
.ea-meldung.fehler { color: #a12626; }
.ea-meldung.warn { color: #8a6100; }
.ea-fuss .ea-rand { margin-left: auto; font-size: 11px; color: var(--text-muted); font-weight: 400; }

@media (max-width: 760px) {
  .ea-reihe { grid-template-columns: minmax(0, 1fr); }
  .ea-sub { display: none; }
}


/* v145: Farbe sagt, wie es um das Geld steht */
.park-bar.bezahlt { background: linear-gradient(135deg, #25c489, #1baf7a) !important; }
.park-bar.vorgemerkt {
  background: repeating-linear-gradient(45deg, #9aa2ad, #9aa2ad 7px, #8b93a0 7px, #8b93a0 14px) !important;
}

.ea-frist { display: flex; gap: 8px; }
.ea-frist input { flex: 1 1 90px; }
.ea-frist select { flex: 0 0 120px; }


/* ===========================================================================
   v146: Eigene Rechnungen - das Rechnungsfenster mit der mitlaufenden Vorschau
   ---------------------------------------------------------------------------
   Wilhelm: "Bei der Erstellung der Rechnungen will ich auch, dass eine
   Vorschau des Dokuments sichtbar ist ... damit wir immer das Dokument im Auge
   haben, wenn wir die Angaben ausfüllen." Deshalb zwei Spalten: links die
   Felder (scrollbar), rechts das PDF, das beim Scrollen stehen bleibt.
   =========================================================================== */

#rechnung-modal-box.modal-box-wide {
  max-width: 1320px;
  max-height: 94vh;
}

.rechnung-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 22px;
  align-items: start;
}

.rechnung-formular {
  min-width: 0;
  max-height: 68vh;
  overflow-y: auto;
  padding-right: 6px;
}

.rechnung-vorschau-spalte {
  min-width: 0;
  position: sticky;
  top: 0;
}

.rechnung-vorschau-kopf {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.rechnung-vorschau-kopf .detail-note { flex: 1 1 auto; }

#re-vorschau-iframe {
  width: 100%;
  height: 64vh;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  background: #fafafa;
}

.rechnung-felder {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
}

.rechnung-felder .field { margin: 0; }
.rechnung-feld-breit { grid-column: 1 / -1; }

/* Eine Positionszeile: Nummer, Beschreibung, Menge, Mengentext, Preis, Steuer,
   Weg-Knopf. Bewusst eine Zeile - eine Rechnung liest sich zeilenweise. */
.re-pos-zeile {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 62px 78px 88px 74px 30px;
  gap: 6px;
  align-items: center;
  margin-bottom: 6px;
}

.re-pos-nr {
  font-size: 12px;
  color: var(--text-muted);
  text-align: right;
}

.re-pos-zeile input,
.re-pos-zeile select {
  width: 100%;
  min-width: 0;
  font-size: 12.5px;
  padding: 5px 6px;
}

.re-pos-zeile .re-pos-preis,
.re-pos-zeile .re-pos-menge { text-align: right; }

.re-pos-weg { padding: 4px 6px; line-height: 1; }

/* Nummernkreis-Karten in der Einrichtung */
.kreis-karte {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  padding: 12px 14px;
  margin-bottom: 10px;
  background: var(--surface-1);
}

.kreis-karte.kreis-still { opacity: 0.6; }

.kreis-kopf {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

@media (max-width: 1100px) {
  .rechnung-layout { grid-template-columns: minmax(0, 1fr); }
  .rechnung-formular { max-height: none; overflow: visible; }
  .rechnung-vorschau-spalte { position: static; }
  #re-vorschau-iframe { height: 70vh; }
  .re-pos-zeile { grid-template-columns: 22px minmax(0, 1fr) 60px 70px 80px 70px 28px; }
}

@media (max-width: 700px) {
  .rechnung-felder { grid-template-columns: minmax(0, 1fr); }
  .re-pos-zeile {
    grid-template-columns: minmax(0, 1fr) 70px 80px 70px 28px;
  }
  .re-pos-nr, .re-pos-mengetext { display: none; }
}

/* v146: die beiden Knöpfe unter "Rechnungen zu dieser Buchung" */
.rg-knoepfe {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}


/* ===========================================================================
   v147: der Rechnungsablauf - Buchungsliste, Sammelrechnung, Profile
   =========================================================================== */

.bl-filterzeile {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.bl-filterlabel {
  font-size: 12.5px;
  color: var(--text-muted);
  font-weight: 600;
}

.bl-filterzeile .source-toggle { margin: 0; }
.bl-ohne { font-size: 13px; }

.btn-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 12.5px;
  color: var(--navy, #1d2c49);
  text-decoration: underline;
  cursor: pointer;
}

.bl-auswahlleiste {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px;
  margin-bottom: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  background: var(--surface-2, #f7f7f5);
  font-size: 13px;
}

.bl-vorschlag {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px;
  margin-bottom: 10px;
  border: 1px solid #cfe3d4;
  border-left: 3px solid #1baf7a;
  border-radius: var(--radius-sm, 6px);
  background: #f4faf6;
  font-size: 13px;
}

.bl-vorschlag button { margin-left: auto; }

#bl-body td small {
  display: block;
  font-size: 11.5px;
  color: var(--text-muted);
  font-weight: 400;
}

.bl-zeitraum { font-variant-numeric: tabular-nums; white-space: nowrap; }

.bl-kanal {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--surface-2, #f0f0ee);
  font-size: 11.5px;
  color: var(--text-secondary);
}

.bl-unterzeile > td { background: #f7faf8; }
.bl-unterzeile > td:first-child { padding-left: 34px; border-left: 3px solid #1baf7a; }
.bl-ignoriert > td { opacity: 0.55; }

.bl-marke {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 10px;
  background: #e4f2ea;
  color: #10693f;
  font-size: 11px;
  font-weight: 600;
}

.bl-marke-warn { background: #fdf0dc; color: #8a6100; }

.bl-rg {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11.5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.bl-rg-gut { background: #e4f2ea; color: #10693f; }
.bl-rg-weg { background: #eee; color: #888; text-decoration: line-through; }
.bl-rg-storno { background: #fdf0dc; color: #8a6100; }
.bl-rg-entwurf { background: #eef2f8; color: #40506b; }

.bl-aktionen { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bl-haken { margin-right: 8px; }

/* Kästen oben in der Rechnungsmaske */
.re-kasten {
  padding: 12px 16px;
  border-radius: var(--radius-sm, 6px);
  margin-bottom: 12px;
  font-size: 13px;
}

.re-kasten-info { background: #eef4fb; border: 1px solid #cfdff2; }
.re-kasten-gruen { background: #f1f9f4; border: 1px solid #c9e5d3; }

/* ---------------------------------------------------------------------------
   Seit v184: der Zusatzverkauf als eigene Rechnung.
   Warm getönt wie der Nichtanreise-Kasten, weil beide dasselbe tun: sie
   treffen eine Vorauswahl, die Wilhelm bestätigt oder abwählt.
   --------------------------------------------------------------------------- */
.re-kasten-zusatz { background: #fdf5e0; border: 1px solid #e8d49a; }
.re-kasten-zusatz.hidden { display: none; }
.re-zusatz-kopf { display: flex; gap: 10px; align-items: flex-start; }
.re-zusatz-kopf input { margin-top: 3px; flex: none; }
.re-zusatz-kopf b { font-size: 14px; color: var(--text-primary, #1d2c49); display: block; }
.re-zusatz-liste {
  margin: 10px 0 0;
  background: #fff;
  border: 1px solid #eee7d4;
  border-radius: var(--radius-sm, 6px);
  padding: 2px 0;
}
.re-zusatz-posten {
  display: flex; justify-content: space-between; gap: 10px; align-items: baseline;
  padding: 7px 12px; font-size: 12.5px; border-top: 1px solid #f5f2e9;
}
.re-zusatz-posten:first-child { border-top: none; }
.re-zusatz-posten small { display: block; color: var(--text-muted); font-size: 11.5px; }
.re-zusatz-posten .betrag { font-weight: 700; white-space: nowrap; }

/* Der Umschalter zwischen Übernachtungs- und Zusatzblatt. */
.re-blaetter { display: flex; gap: 8px; margin-bottom: 12px; }
.re-blaetter.hidden { display: none; }
.re-blatt-knopf {
  flex: 1;
  text-align: left;
  border: 1px solid var(--border, #e0ddd2);
  border-radius: var(--radius-sm, 6px);
  background: #fff;
  padding: 8px 13px;
  font: inherit;
  cursor: pointer;
}
.re-blatt-knopf b { display: block; font-size: 13.5px; color: var(--text-primary, #1d2c49); }
.re-blatt-knopf small { font-size: 11.5px; color: var(--text-muted); }
.re-blatt-knopf.aktiv { background: #1d2c49; border-color: #1d2c49; }
.re-blatt-knopf.aktiv b, .re-blatt-knopf.aktiv small { color: #fff; }
.re-blatt-knopf.aus { opacity: .5; }

/* Woher ein erkannter Zusatzverkauf stammt - klein unter dem Betrag. */
.bl-zusatz-quelle { display: block; font-size: 11px; color: var(--text-muted); margin-top: 2px; }

.re-sammel-liste { margin: 6px 0 0; padding-left: 20px; }
.re-sammel-liste li { margin-bottom: 2px; }

.re-vorhanden-zeile {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.re-nummer-zeile { display: flex; gap: 6px; }
.re-nummer-zeile input { flex: 1 1 auto; min-width: 0; }
.re-nummer-zeile input[readonly] { background: var(--surface-2, #f5f5f3); color: var(--text-secondary); }

.re-fusstext-wahl { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.re-fusstext-option { font-size: 12.5px; display: flex; align-items: center; gap: 5px; }

.re-pos-zeile { grid-template-columns: 22px minmax(0, 1fr) 62px 78px 88px 74px 30px; }
.re-pos-netto {
  grid-column: 2 / -1;
  font-size: 11px;
  color: var(--text-muted);
  margin: -2px 0 4px;
}

/* Gastgeber-Profile */
.pr-logo-zeile { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pr-logo-bild { max-height: 56px; max-width: 180px; }
.pr-logo-mini { max-height: 26px; max-width: 80px; }

/* Innerhalb der Kästen oben in der Maske soll ein Hinweis kein zweites
   Kästchen bilden - er gehört zum Kasten, nicht daneben. */
.re-kasten .detail-note {
  background: none;
  border: none;
  padding: 0;
  margin: 6px 0 0;
}

.re-sammel-liste .detail-note { display: inline; margin: 0; }

/* v147, nach Wilhelms Rueckmeldung "die Felder sehen komisch aus": ohne
   Spaltenueberschriften weiss niemand, was "1" und "pauschal" bedeuten.
   Der Kopf benutzt exakt dasselbe Raster wie eine Positionszeile, damit
   Ueberschrift und Feld buendig untereinander stehen. */
.re-pos-kopf {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 54px 72px 86px 62px 28px;
  gap: 6px;
  align-items: end;
  margin-bottom: 4px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
}

.re-pos-rechts { text-align: right; }

.re-pos-zeile {
  grid-template-columns: 20px minmax(0, 1fr) 54px 72px 86px 62px 28px;
  align-items: start;
  margin-bottom: 2px;
}

.re-pos-zeile .re-pos-nr { padding-top: 6px; }

/* Der Nettobetrag gehoert unter die Zeile, buendig zum Preis - nicht
   ueber die ganze Breite. */
.re-pos-netto {
  grid-column: 2 / -1;
  text-align: right;
  font-size: 11px;
  color: var(--text-muted);
  margin: 0 0 6px;
}

@media (max-width: 1100px) {
  .re-pos-kopf,
  .re-pos-zeile { grid-template-columns: 20px minmax(0, 1fr) 54px 74px 78px 62px 26px; }
}

@media (max-width: 700px) {
  .re-pos-kopf { display: none; }
  .re-pos-zeile { grid-template-columns: minmax(0, 1fr) 64px 76px 62px 26px; }
}


/* ===========================================================================
   v148: Abrechnungsstand je Buchung, zwei Knoepfe, Vorschlag in der Tabelle
   ---------------------------------------------------------------------------
   Wilhelm: "Sollte nur die Rechnung erstellt werden und die Zusatzverkaeufe
   nicht, oder umgekehrt, muss klar ersichtlich sein in der Liste, dass diese
   Buchung noch nicht vollstaendig abgerechnet ist."
   =========================================================================== */

.bl-stand { display: flex; flex-direction: column; gap: 4px; }

.bl-stand-zeile {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  white-space: nowrap;
}

/* Seit v161: In der Buchungsliste haben die Spalten feste Breiten (siehe
   colgroup in invoices.html). Damit dort nichts abgeschnitten wird, dürfen
   die Rechnungsnummern und die Knöpfe umbrechen - "resizable-table" setzt
   sonst nowrap und overflow:hidden auf jede Zelle. */
#bl-tabelle td { white-space: normal; overflow: visible; }
#bl-tabelle .bl-stand-zeile { white-space: normal; flex-wrap: wrap; align-items: baseline; }
#bl-tabelle .bl-stand-zeile .punkt { position: relative; top: 3px; }
#bl-tabelle .bl-aktionen { flex-wrap: wrap; }

/* Seit v159: das Zeichen für eine sevDesk-Altbestandsrechnung, direkt vor
   der Nummer. Wilhelm wollte es sehen, ohne den Tooltip aufzurufen. */
.bl-altbestand { margin-right: 3px; font-size: 11px; opacity: .85; }

.punkt { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; }
.p-gruen { background: #1baf7a; }
.p-gelb { background: #e0a419; }
.p-grau { background: #c8c8c4; }

.bl-fehlt { font-weight: 700; }
.bl-nichts { color: var(--text-muted); }

.bl-marke.bl-m-gruen { background: #e4f2ea; color: #10693f; }
.bl-marke.bl-m-gelb { background: #fdf3e2; color: #8a6100; }

/* Der Knopf sagt selbst, in welchem Zustand er ist. */
.btn.bl-fertig,
a.btn.bl-fertig {
  background: #e4f2ea;
  border-color: #bfe0cd;
  color: #10693f;
}

.btn.bl-offen {
  background: #fff8ea;
  border-color: #e8cf9e;
  color: #7a5500;
  font-weight: 600;
}

/* Der Sammelrechnungs-Vorschlag steht jetzt IN der Tabelle, direkt unter den
   betroffenen Buchungen - vorher stapelte er sich ueber der Liste und zeigte
   dort Buchungen aus ganz anderen Monaten. */
.bl-vorschlagzeile > td {
  background: #f4faf6;
  border-left: 3px solid #1baf7a;
  font-size: 12.5px;
  padding-top: 9px;
  padding-bottom: 9px;
}

.bl-vorschlagzeile .btn { margin-left: 10px; }

.bl-legende {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  padding: 12px 4px 0;
  font-size: 12px;
  color: var(--text-muted);
}

.bl-legende span { display: flex; align-items: center; gap: 6px; }

/* Faelligkeitsdatum mit Abkuerzungen */
.re-frist-chips { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }

.re-chip {
  font: inherit;
  font-size: 11.5px;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-muted);
  cursor: pointer;
}

.re-chip.an {
  background: var(--navy, #1d2c49);
  border-color: var(--navy, #1d2c49);
  color: #fff;
}

/* Die Buchungsliste hat sieben Spalten - ohne feste Breiten quetscht der
   Browser ausgerechnet die beiden wichtigsten (Abrechnung und Aktionen)
   zusammen. Deshalb hier die Aufteilung von Hand. */
#bl-tabelle th:nth-child(1) { width: 16%; }
#bl-tabelle th:nth-child(2) { width: 13%; }
#bl-tabelle th:nth-child(3) { width: 13%; }
#bl-tabelle th:nth-child(4) { width: 8%; }
#bl-tabelle th:nth-child(5) { width: 10%; }
#bl-tabelle th:nth-child(6) { width: 22%; }
#bl-tabelle th:nth-child(7) { width: 18%; }

#bl-body td { vertical-align: top; padding-top: 12px; padding-bottom: 12px; }

/* Die Marke gehoert unter den Namen, nicht daneben - sonst wird der Name
   abgeschnitten. */
#bl-body .bl-marke { display: inline-block; margin: 4px 4px 0 0; }
#bl-body td:first-child strong { display: block; }

/* Der Abrechnungsstand darf umbrechen, statt abgeschnitten zu werden. */
.bl-stand-zeile { white-space: normal; flex-wrap: wrap; align-items: baseline; }
.bl-stand-zeile .punkt { position: relative; top: 3px; }

.bl-aktionen { justify-content: flex-end; gap: 5px; }
.bl-aktionen .btn { font-size: 11.5px; padding: 5px 9px; }
.bl-aktionen .btn-link { flex-basis: 100%; text-align: right; }

@media (max-width: 1400px) {
  #bl-tabelle th:nth-child(2),
  #bl-body td:nth-child(2) { display: none; }
}

/* v150: die Auswahl der Haupt-Buchung beim Bilden einer Sammelrechnung.
   Sie bestimmt den Rechnungsempfaenger - deshalb ein eigener Schritt. */
#sammel-body td { vertical-align: middle; }
#sammel-body td small { display: block; font-size: 11.5px; color: var(--text-muted); }
.sammel-haupt { display: flex; align-items: center; gap: 7px; font-size: 12.5px; }
.sammel-gewaehlt > td { background: #f1f9f4; }
.sammel-gewaehlt > td:first-child { border-left: 3px solid #1baf7a; }
#sammel-body .bl-marke { margin-left: 8px; }

/* Die Gast-Spalte im Sammelrechnungs-Fenster darf umbrechen - sonst wird das
   Kennzeichen "Rechnungsdaten hinterlegt!" abgeschnitten. */
#sammel-body td:nth-child(2) { white-space: normal; max-width: none; }
#sammel-body td:nth-child(2) strong { display: block; }
#sammel-body .bl-marke { margin: 4px 0 0; }
#sammel-tabelle th:nth-child(2) { width: 30%; }

/* =====================================================================
   v151: Trockenlauf - die Pruefseite fuer die Hostaway-Finanzfelder.
   Sie schreibt nichts, deshalb ist sie bewusst nuechtern gehalten:
   ein Warnhinweis oben, klare Farben nur dort, wo etwas nicht aufgeht.
   ===================================================================== */
.tl-warnung {
  border-left: 3px solid #2f6fdb;
  background: #f2f7ff;
}
.tl-ok { border-left: 3px solid #1baf7a; background: #f1f9f4; }
.tl-warn { border-left: 3px solid #d1462f; background: #fdf3f1; }

.tl-kopf {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 14px;
}
.tl-klein { font-size: 11.5px; color: var(--text-muted); font-weight: 400; }
.tl-kopf .tl-klein { display: block; margin-top: 3px; }

.tl-marke-ok, .tl-marke-warn {
  font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
  white-space: nowrap;
}
.tl-marke-ok { background: #e6f6ee; color: #157a55; }
.tl-marke-warn { background: #fdeae6; color: #a5321f; }

.tl-tabelle td, .tl-tabelle th { vertical-align: top; }
.tl-tabelle .num { text-align: right; white-space: nowrap; }
.tl-tabelle code { font-size: 11.5px; background: #f4f4f6; padding: 1px 5px; border-radius: 4px; }
.tl-tabelle tfoot td { border-top: 2px solid var(--border); }

/* Die Einordnung eines Postens - die Farbe sagt, ob er auf die Rechnung
   kommt (gruen/blau), ob er uns nichts angeht (grau) oder ob Hostapia ihn
   nicht kennt (rot). Rot heisst hier immer: bitte einmal ansehen. */
.tl-ein {
  display: inline-block; font-size: 11.5px; font-weight: 600;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
.tl-ein-uebernachtung { background: #e6f6ee; color: #157a55; }
.tl-ein-zusatz { background: #eef3fd; color: #2f5fbd; }
.tl-ein-steuer { background: #fdf6e3; color: #8a6d1f; }
.tl-ein-gebuehr, .tl-ein-storno, .tl-ein-info { background: #f1f1f4; color: #666; }
.tl-ein-unbekannt { background: #fdeae6; color: #a5321f; }

.tl-proben { margin: 0; padding-left: 2px; list-style: none; }
.tl-proben li { margin: 6px 0; font-size: 13px; line-height: 1.5; }
.tl-proben li.tl-warn { background: none; border: 0; padding: 0; color: #a5321f; }

.tl-zeile-warn > td { background: #fdf6f4; }

/* Den fehlenden Steuersatz gleich im Trockenlauf festlegen (v151) - der
   Umweg ueber die Einrichtung waere unnoetig, weil Wilhelm den Posten
   gerade vor sich hat. */
.tl-satz-zeile { margin-top: 5px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tl-satz-zeile select { font-size: 11.5px; padding: 2px 4px; }

/* Zurueck zur Liste + CSV (v153) */
.tl-kopf-rechts { display: flex; align-items: center; gap: 10px; }
.tl-listenfuss { margin: 10px 0 0; display: flex; align-items: center;
  justify-content: space-between; gap: 14px; flex-wrap: wrap; }

/* v154: eine sevDesk-Rechnung, die nur noch zum Ansehen da ist, weil die
   Betriebsart auf "nur eigene Rechnungen" steht. Sie bleibt sichtbar -
   genau darin liegt der Schutz vor einer zweiten Rechnung. */
.rg-zeile.rg-altbestand { opacity: 0.82; }
.rg-zeile.rg-altbestand .rg-nr small { font-style: italic; }

/* v156: Listenbeginn und Fortschritt ueber der Buchungsliste. */
.bl-beginn-zeile {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 12px; font-size: 13px;
}
.bl-beginn-zeile label { color: var(--text-muted); }
.bl-beginn-zeile input[type="date"] { padding: 5px 8px; font-size: 13px; }
.bl-beginn-hinweis { margin: 0; padding: 0; border: 0; background: none; font-size: 12px; }

/* Seit v160: Parkplätze auf einmal nachtragen, mit ehrlichem Bericht danach */
.bl-park-titel { font-weight: 700; color: var(--text-secondary); }
.bl-park-bericht {
  border: 1px solid var(--gridline); border-radius: 10px; background: var(--page-plane);
  padding: 12px 14px; margin: 0 0 14px; font-size: 13px; max-height: 420px; overflow-y: auto;
}
.bl-park-bericht.hidden { display: none; }
.bl-park-kopf { margin: 0 0 10px; }
.bl-park-gruppe {
  font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted); margin: 12px 0 4px;
}
.bl-park-gruppe.bl-park-warn { color: #a02a2a; }
.bl-park-bericht ul { margin: 0 0 6px; padding-left: 18px; }
.bl-park-bericht li { margin: 2px 0; line-height: 1.45; }
.bl-park-bericht .detail-note { margin: 0 0 6px; }
.bl-park-bericht li small { display: block; color: var(--text-muted); font-size: 11.5px; }

/* Seit v163: Fortschritt des Hintergrundlaufs */
.bl-park-fortschritt {
  display: flex; align-items: center; gap: 12px; margin: 0 0 14px;
  padding: 10px 14px; border: 1px solid var(--gridline); border-radius: 10px;
  background: var(--page-plane); font-size: 12.5px;
}
.bl-park-fortschritt.hidden { display: none; }
.bl-park-balken {
  flex: 1; height: 8px; border-radius: 999px; background: var(--gridline);
  overflow: hidden; min-width: 120px;
}
.bl-park-balken span {
  display: block; height: 100%; background: var(--gold-deep, #c8961e);
  transition: width .3s ease;
}
.bl-park-zahl { color: var(--text-secondary); white-space: nowrap; }

/* ===================================================================== */
/* Reiter „Zusatzleistungen" (seit v164)                                  */
/* Wilhelms Probe: steht jede verkaufte Zusatzleistung im Kalender?       */
/* ===================================================================== */
.zl-schritt {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 18px 20px; margin: 0 0 18px;
  box-shadow: var(--shadow-sm);
}
.zl-schritt-kopf { display: flex; align-items: center; gap: 9px; margin: 0 0 6px; }
.zl-schritt-kopf h2 { margin: 0; font-size: 15px; }
.zl-schritt-zahl {
  width: 24px; height: 24px; border-radius: 50%; background: var(--navy, #1d2c49);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; flex: none;
}
.zl-erklaerung { max-width: 96ch; margin: 0 0 14px; }
.zl-zeile { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; }
.zl-zeile label[for] { color: var(--text-muted); }
.zl-zeile input[type="date"] { padding: 5px 9px; font-size: 13px; }

.zl-leiste { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 14px; }

.zl-marke {
  display: inline-flex; align-items: center; gap: 4px; border-radius: 999px;
  padding: 2px 9px; font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.zl-m-park { background: #fdf3d8; color: #7a5c00; border: 1px solid #ecd08f; }
.zl-m-late { background: #e7effb; color: #1d4a8a; border: 1px solid #b9cef0; }
.zl-m-early { background: #e2f6ec; color: #0b6a45; border: 1px solid #a9e0c6; }
.zl-m-sonst { background: #f3eefb; color: #4a3aa7; border: 1px solid #cfc2ea; }
.zl-m-unklar { background: #fdeeee; color: #9c2b2b; border: 1px solid #eec0c0; }
.zl-m-gruen { background: #e6f7f0; color: #0b6a45; border: 1px solid #a9e0c6; }
.zl-m-offen { background: #fdf3d8; color: #7a5c00; border: 1px solid #ecd08f; }
.zl-m-grau { background: var(--page-plane); color: var(--text-muted); border: 1px solid var(--gridline); }

.zl-quelle { display: block; color: var(--text-muted); font-size: 11px; margin-top: 4px; line-height: 1.45; }
.zl-fehlt { color: #a02a2a; font-weight: 600; font-size: 12.5px; }
.zl-rg {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
  background: #eef6f1; border: 1px solid #cbe5d8; border-radius: 6px;
  padding: 1px 7px; color: #0b6a45; text-decoration: none;
}
.zl-rg:hover { border-color: var(--gold-deep, #c8961e); }
.zl-rg.alt::before { content: "🗄️ "; font-family: inherit; }
.zl-aktionen { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }

#zl-tabelle td { white-space: normal; overflow: visible; vertical-align: top; }
#zl-tabelle .zl-panel td { background: var(--page-plane); }
.zl-panel h4 { margin: 0 0 6px; font-size: 12.5px; }
.zl-rg-liste { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 10px; }
.zl-rg-liste label {
  display: flex; gap: 9px; align-items: center; font-size: 12.5px; background: #fff;
  border: 1px solid var(--gridline); border-radius: 8px; padding: 7px 11px; cursor: pointer;
}
.zl-rg-liste label:hover { border-color: var(--gold-deep, #c8961e); }
.zl-passt {
  margin-left: auto; background: #e6f7f0; color: #0b6a45; border-radius: 999px;
  padding: 1px 9px; font-size: 11px; font-weight: 700;
}

/* Die Zählerzeile - dieselbe Optik wie der Fortschritt im Arbeitsvorrat */
.bl-fort-zahl { display: inline-flex; flex-direction: column; margin-right: 30px; }
.bl-fort-zahl b { font-size: 24px; line-height: 1.1; font-weight: 800; }
.bl-fort-zahl small { font-size: 11px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .05em; }
.bl-fort-zahl.gruen b { color: #1baf7a; }
.bl-fort-zahl.gelb b { color: #eda100; }
.bl-fort-zahl.rot b { color: #d03b3b; }
.bl-fort-satz { color: var(--text-secondary); font-size: 12.5px; max-width: 42ch; }

/* --- Der Katalog der Zusatzverkäufe (seit v166) ---------------------- */
.zl-katalog {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 16px 18px; margin: 0 0 18px;
  box-shadow: var(--shadow-sm);
}
.zl-katalog-kopf { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 12px; }
.zl-katalog-kopf h3 { margin: 0; font-size: 14.5px; }
.zl-katalog-kopf .detail-note { margin: 0; flex: 1 1 260px; }
.zl-angebote { display: flex; flex-wrap: wrap; gap: 10px; }
.zl-karte {
  display: flex; align-items: center; gap: 11px; text-align: left;
  background: #fff; border: 1px solid var(--gridline); border-radius: 11px;
  padding: 10px 14px; font: inherit; cursor: pointer; min-width: 240px;
  color: var(--text-primary);
}
.zl-karte:hover { border-color: var(--gold-deep, #c8961e); box-shadow: var(--shadow-sm); }
.zl-karte.aus { opacity: .55; }
.zl-karte.vorschlag { border-style: dashed; background: var(--page-plane); }
.zl-karte-symbol { font-size: 22px; flex: none; }
.zl-karte-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.zl-karte-text b { font-size: 13px; }
.zl-karte-text small { font-size: 11.5px; color: var(--text-muted); }
.zl-karte-art {
  margin-left: auto; width: 20px; height: 20px; border-radius: 6px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--page-plane); border: 1px solid var(--gridline);
  font-size: 11px; font-weight: 800; color: var(--text-secondary);
}
.zl-karte-plus { margin-left: auto; font-size: 18px; color: var(--gold-deep, #a4780e); }

.zl-vorschlaege { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--gridline); }
.zl-vorschlaege.hidden { display: none; }
.zl-vor-kopf {
  font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted); margin: 0 0 4px;
}
.zl-vorschlaege .detail-note { margin: 0 0 10px; }

.zl-katalog-fenster { max-width: 700px; }
.zl-symbole { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.zl-symbol {
  width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--gridline);
  background: #fff; font-size: 18px; cursor: pointer; line-height: 1;
}
.zl-symbol:hover { border-color: var(--gold-deep, #c8961e); }
.zl-symbol.aktiv { border-color: var(--gold-deep, #c8961e); background: #fdf3d8;
  box-shadow: 0 0 0 2px rgba(200, 150, 30, .2); }
.zl-symbol-feld { width: 110px; text-align: center; font-size: 18px; }

/* Der Fortschritt ist die Zahl, auf die es beim Umstieg ankommt: wird
   "offen" null, ist die Arbeit durch. */
.bl-fortschritt {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 12px 16px; margin-bottom: 14px; border-radius: 10px;
  background: #f4f6fa; border-left: 3px solid #2f6fdb;
}
.bl-fz { display: flex; flex-direction: column; line-height: 1.25; }
.bl-fz b { font-size: 19px; font-variant-numeric: tabular-nums; }
.bl-fz span { font-size: 11.5px; color: var(--text-muted); }
.bl-fz-offen b { color: #a5321f; }
.bl-fz-fertig b { color: #157a55; }
.bl-fortschritt.bl-geschafft { background: #f1f9f4; border-left-color: #1baf7a; }
.bl-fortschritt-text { font-size: 13px; color: var(--text-muted); flex: 1; min-width: 220px; }
.bl-ign-grund { display: block; font-size: 11.5px; color: var(--text-muted); margin-bottom: 5px; }

/* v157: die Rechnungsnummer ist der Weg zum PDF. Hängen an einer Buchung
   mehrere Rechnungen, kam man vorher nur an die erste heran. */
a.bl-rg-link { text-decoration: none; cursor: pointer; }
a.bl-rg-link:hover { filter: brightness(0.94); text-decoration: underline; }
a.bl-rg-link.bl-rg-weg:hover { text-decoration: line-through underline; }

/* v158: die Einordnung einer sevDesk-Rechnung von Hand umlegen. Bewusst
   unauffaellig - man braucht ihn selten, aber wenn, dann sofort. */
.bl-art-tausch {
  border: 0; background: none; cursor: pointer; padding: 0 3px;
  font-size: 12px; color: var(--text-muted); line-height: 1;
}
.bl-art-tausch:hover { color: var(--text-primary); }

/* ==================================================================== */
/* v170: Nummernkreis-Einrichtung - wo hört sevDesk auf?                 */
/* ==================================================================== */
/* Wilhelm: "Gleiche erstmal immer ab, welche die letzte geschriebene
   Rechnung aus sevDesk ist ... das soll schon bei der Einrichtung
   erkennbar sein." */
.kr-bestand {
  margin: 12px 0 0;
  padding: 12px 14px;
  border-radius: 11px;
  background: rgba(42, 120, 214, .07);
  border: 1px solid rgba(42, 120, 214, .22);
  font-size: 13.5px;
  line-height: 1.55;
}
.kr-bestand-neu {
  background: rgba(27, 175, 122, .08);
  border-color: rgba(27, 175, 122, .25);
}
.kr-bestand-kopf { color: var(--text-primary); }
/* Das hidden-Attribut muss die display-Regel schlagen - sonst bleibt der
   Kasten sichtbar, obwohl er versteckt sein soll. */
.kr-bestand-wahl[hidden], .kr-bestand-warnung[hidden] { display: none; }
.kr-bestand-wahl {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px dashed rgba(0, 0, 0, .12);
}
.kr-wahl {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  cursor: pointer;
}
.kr-wahl input { margin-top: 3px; flex: none; }
.kr-wahl strong { display: block; font-size: 13.5px; }
.kr-wahl em {
  display: block;
  font-style: normal;
  font-size: 12.5px;
  color: var(--text-secondary);
}
.kr-bestand-warnung {
  margin: 11px 0 0;
  padding: 9px 11px;
  border-radius: 9px;
  font-size: 13px;
}
.kr-bestand-warnung.kr-kollision {
  background: rgba(208, 59, 59, .1);
  border: 1px solid rgba(208, 59, 59, .3);
  color: #7a1a15;
}
.kr-bestand-warnung.kr-luecke {
  background: rgba(237, 161, 0, .12);
  border: 1px solid rgba(237, 161, 0, .3);
  color: #5a4300;
}
/* Die Startnummer ist gesperrt, solange „anschließen" gewählt ist. */
.kr-feld-fest { background: #f1efe8; color: var(--text-secondary); }

/* Die Zeile unter jedem Kreis in der Liste */
.kr-zeile {
  margin: 7px 0 0;
  padding: 6px 9px;
  border-radius: 8px;
  background: rgba(11, 11, 11, .035);
  font-size: 12.5px;
  color: var(--text-secondary);
}
.kr-zeile-neu { background: rgba(27, 175, 122, .1); color: #0b4d31; }
.kr-zeile-kollision {
  background: rgba(208, 59, 59, .11);
  color: #7a1a15;
  border: 1px solid rgba(208, 59, 59, .28);
}
.kr-zeile-luecke { background: rgba(237, 161, 0, .13); color: #5a4300; }
.kr-luecke-hinweis { color: #7a5a00; font-weight: 700; }

/* v171: Zeiträume im Nummernkreis (Jahr / Halbjahr) */
.kr-erkannt {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(237, 161, 0, .12);
  border: 1px solid rgba(237, 161, 0, .32);
  font-size: 13px;
  color: #5a4300;
}
.kr-erkannt[hidden] { display: none; }
.kr-erkannt .btn { margin-left: 8px; }
.kr-zeitraum {
  display: inline-block;
  margin-top: 4px;
  background: rgba(11, 11, 11, .06);
  border-radius: 6px;
  padding: 1px 7px;
  font-size: 12px;
  font-weight: 700;
}
.kr-wechsel {
  margin: 8px 0 0;
  font-size: 12.5px;
  color: var(--text-secondary);
}
.kr-zeitraeume {
  margin: 6px 0 0;
  font-size: 12.5px;
  color: var(--text-secondary);
}

/* ==================================================================== */
/* v172: Nummernkreis-Einrichtung in drei Schritten                      */
/* ==================================================================== */
.kr-schrittleiste { display: flex; gap: 6px; margin: 0 0 16px; }
.kr-punkt {
  width: 22px; height: 22px; border-radius: 50%;
  background: #eceae2; color: var(--text-tertiary, #8b8880);
  display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 800;
}
.kr-punkt.an { background: #1d2c49; color: #fff; }
.kr-punkt.fertig { background: var(--series-3, #1baf7a); color: #fff; }

.kr-wege { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.kr-weg {
  position: relative; text-align: left; cursor: pointer;
  border: 2px solid var(--border, #e5e3da); border-radius: 14px;
  padding: 15px 16px; background: #fff; font: inherit; color: inherit;
}
.kr-weg.gewaehlt { border-color: var(--series-1, #2a78d6); background: rgba(42,120,214,.05); }
.kr-weg-marke {
  position: absolute; top: -9px; right: 13px; background: var(--series-3, #1baf7a);
  color: #fff; border-radius: 999px; padding: 1px 9px; font-size: 10.5px; font-weight: 800;
}
.kr-weg-kopf { display: flex; align-items: center; gap: 9px; margin-bottom: 5px; }
.kr-weg-kopf strong { font-size: 15px; }
.kr-weg-zeichen {
  width: 28px; height: 28px; border-radius: 8px; background: #f1efe8;
  display: flex; align-items: center; justify-content: center; font-size: 14px; flex: none;
}
.kr-weg.gewaehlt .kr-weg-zeichen { background: rgba(42,120,214,.14); }
.kr-weg-text { display: block; font-size: 13px; color: var(--text-secondary); }

/* Die gefundenen Kreise */
/* Das Fenster braucht mehr Breite als die anderen - hier stehen vier
   Nummernkreise nebeneinander. */
#kreis-modal .modal-box { max-width: 1000px; }
.kr-fund {
  display: grid;
  /* Die letzte Spalte richtet sich nach den Knöpfen (max-content), damit sie
     nie in die Nummern hineinragt; die Nummernspalte darf dafür schrumpfen. */
  grid-template-columns: 92px minmax(0, 1fr) minmax(0, 186px) max-content;
  gap: 12px 16px; align-items: center; padding: 12px 14px;
  border-top: 1px solid var(--border-light, #f0eee6);
}
@media (max-width: 900px) {
  .kr-fund { grid-template-columns: 84px minmax(0, 1fr); }
  .kr-fund-letzte { text-align: left; grid-column: 2; }
  .kr-fund-tat { grid-column: 2; justify-content: flex-start; }
}
.kr-fund:first-child { border-top: none; }
.kr-funde-kasten { border: 1px solid var(--border, #e5e3da); border-radius: 12px; overflow: hidden; }
.kr-fund.gewaehlt { background: rgba(42,120,214,.07); box-shadow: inset 3px 0 0 var(--series-1, #2a78d6); }
.kr-fund.still { opacity: .55; background: #faf9f5; }
.kr-fund.angedockt { background: rgba(27,175,122,.06); }
.kr-fund-code { font-size: 17px; font-weight: 800; letter-spacing: -.3px; }
.kr-fund-code em { display: block; font-style: normal; font-size: 11.5px; font-weight: 600;
                   color: var(--text-tertiary, #8b8880); letter-spacing: 0; }
.kr-fund-info { font-size: 13px; color: var(--text-secondary); }
.kr-fund-info b { color: var(--text-primary); }
.kr-fund-letzte { font-size: 12px; color: var(--text-secondary); text-align: right; line-height: 1.5;
                  min-width: 0; overflow-wrap: anywhere; }
.kr-fund-letzte b { display: block; font-size: 13.5px; color: var(--text-primary); }
.kr-fund-tat { display: flex; gap: 6px; justify-content: flex-end; align-items: center;
               flex-wrap: wrap; }
.kr-fund-tat .btn { white-space: nowrap; }

.kr-marke { display: inline-block; border-radius: 6px; padding: 1px 7px; font-size: 11px; font-weight: 800; }
.kr-m-fest { background: rgba(27,175,122,.14); color: #0b6b45; }
.kr-m-entwurf { background: rgba(237,161,0,.18); color: #5a4300; }
.kr-m-still { background: #eceae2; color: var(--text-tertiary, #8b8880); }

/* Woher die Zahlen stammen (v173) */
.kr-stand { display: block; margin-top: 6px; font-size: 12px;
            color: var(--text-tertiary, #8b8880); }
.kr-stand:empty { display: none; }

/* "Dabei wurde Folgendes erkannt" */
.kr-erkannt-kasten {
  background: rgba(42,120,214,.06); border: 1px solid rgba(42,120,214,.2);
  border-radius: 13px; padding: 14px 16px; margin-bottom: 14px;
}
.kr-erkannt-kasten h4 {
  margin: 0 0 10px; font-size: 12px; letter-spacing: .4px; text-transform: uppercase;
  color: var(--text-tertiary, #8b8880);
}
.kr-ez { display: grid; grid-template-columns: 190px 1fr; gap: 12px; padding: 6px 0;
         border-top: 1px dashed rgba(0,0,0,.08); font-size: 13.5px; }
.kr-ez:first-of-type { border-top: none; }
.kr-ez .k { color: var(--text-secondary); }
.kr-zerlegung { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 4px; }
.kr-teil { border-radius: 7px; padding: 2px 9px; font-size: 12px; font-weight: 700; }
.kr-t-praefix { background: rgba(74,58,167,.13); color: #332480; }
.kr-t-jahr { background: rgba(42,120,214,.14); color: #12457f; }
.kr-t-halb { background: rgba(237,161,0,.2); color: #5a4300; }
.kr-t-lauf { background: rgba(27,175,122,.16); color: #0b6b45; }
.kr-teil em { font-style: normal; font-weight: 600; opacity: .8; }

.kr-wahlkasten { border: 1px solid var(--border, #e5e3da); border-radius: 13px;
                 overflow: hidden; margin-bottom: 14px; }
.kr-wahlkopf { padding: 10px 14px; background: #faf9f5; border-bottom: 1px solid var(--border, #e5e3da);
               font-size: 12px; text-transform: uppercase; letter-spacing: .4px;
               color: var(--text-tertiary, #8b8880); font-weight: 700; }
.kr-wahl { display: flex; gap: 11px; align-items: flex-start; padding: 12px 14px;
           border-top: 1px solid var(--border-light, #f0eee6); cursor: pointer; }
.kr-wahl:first-of-type { border-top: none; }
.kr-wahl.gewaehlt { background: rgba(27,175,122,.07); }
.kr-wahl input { margin-top: 4px; flex: none; }
.kr-wahl .gross { font-size: 16.5px; font-weight: 800; letter-spacing: -.2px; }
.kr-wahl p { margin: 3px 0 0; font-size: 12.5px; color: var(--text-secondary); }
.kr-wahl .warn { color: #7a1a15; }
.kr-schritt.hidden { display: none; }

/* =====================================================================
   Reinigungen (v174)
   Die Farben sind dieselben wie in der Kalender-Zeitleiste - eine Logik,
   zwei Ansichten. Rot = Vorrang, Gelb = knapp, Grün = normal, Grau = Leerstand.
   ===================================================================== */

.rn-pille { display: inline-block; border-radius: 7px; padding: 2px 9px;
            font-size: 11.5px; font-weight: 800; white-space: nowrap; }
.rn-p-vorrang   { background: rgba(208,59,59,.13); color: #7a1a15; }
.rn-p-knapp     { background: rgba(237,161,0,.18); color: #5a4300; }
.rn-p-normal    { background: rgba(27,175,122,.14); color: #0b6b45; }
.rn-p-leerstand { background: #f1efe8; color: #55534c; }

.rn-s-vorrang   { background: #d03b3b; }
.rn-s-knapp     { background: #eda100; }
.rn-s-normal    { background: #1baf7a; }
.rn-s-leerstand { background: #c9c6bb; }

.rn-legende { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
              margin-bottom: 14px; }
.rn-legende .detail-note { margin-right: 8px; }

.rn-tag { margin: 18px 0 8px; font-size: 12px; font-weight: 800;
          letter-spacing: .09em; text-transform: uppercase;
          color: var(--text-tertiary, #8b8880); }
.rn-tag:first-child { margin-top: 0; }

/* Seit v181 fuenf Spalten in fester Breite - dieselbe Aufteilung wie in
   .rn-kopfzeile, damit alles untereinander steht. */
.rn-zeile { display: grid;
            grid-template-columns: 8px minmax(0, 1fr) 150px 120px 200px 212px;
            gap: 14px; align-items: center; padding: 11px 14px 11px 0;
            border-top: 1px solid var(--border-light, #f0eee6);
            background: #fff; border-radius: 11px; margin-bottom: 6px;
            overflow: hidden; }
.rn-zeile:first-of-type { border-top: none; }
.rn-streifen { align-self: stretch; width: 8px; border-radius: 0; }
.rn-objekt b { display: block; font-size: 14.5px; }
.rn-objekt em { display: block; font-style: normal; font-size: 12px;
                color: var(--text-secondary); }
.rn-zeit b { display: block; font-size: 15px; font-weight: 800;
             font-variant-numeric: tabular-nums; }
.rn-zeit em { display: block; font-style: normal; font-size: 11.5px;
              color: var(--text-secondary); }
.rn-prio { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.rn-zustand { font-size: 11.5px; color: var(--text-secondary); }
.rn-fortschritt { font-size: 11.5px; font-weight: 700; color: var(--text-secondary); }
.rn-tat { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
          justify-content: flex-end; }
.rn-name { font-size: 12.5px; margin-right: 4px; }
.rn-niemand { font-size: 12.5px; color: var(--text-tertiary, #8b8880); }
.rn-zeile.rn-status-erledigt { opacity: .6; }
.rn-zeile.rn-status-entfallen { opacity: .5; text-decoration: line-through; }

@media (max-width: 1200px) {
  .rn-zeile { grid-template-columns: 8px minmax(0, 1fr); }
  .rn-zeit, .rn-prio, .rn-tat, .rn-stand-spalte {
    grid-column: 2; justify-content: flex-start; align-items: flex-start; }
  .rn-prio { flex-direction: row; align-items: center; }
}

/* Das Ansehen-Fenster */
.rn-detail-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.rn-ez { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 10px;
         padding: 7px 0; border-top: 1px solid var(--border-light, #f0eee6);
         font-size: 13.5px; }
.rn-ez .k { color: var(--text-secondary); }
.rn-unter { margin: 16px 0 6px; font-size: 12px; font-weight: 800;
            letter-spacing: .08em; text-transform: uppercase;
            color: var(--text-tertiary, #8b8880); }
.rn-punkte { margin: 0; padding-left: 2px; list-style: none; font-size: 13.5px; }
.rn-punkte li { padding: 3px 0; }
.rn-punkte li.rn-ab { color: var(--text-tertiary, #8b8880); text-decoration: line-through; }
.rn-frei { font-style: normal; font-size: 11px; color: var(--text-tertiary, #8b8880); }
.rn-fotos { display: flex; flex-wrap: wrap; gap: 8px; }

/* --- Mitarbeiter: die Reinigungen in der Aufgabenliste --- */
.rma-ueberschrift { margin: 0 0 10px; font-size: 17px; }
.rma-karte { display: block; text-decoration: none; color: inherit; background: #fff;
             border: 1px solid var(--border, #e5e3da); border-left-width: 5px;
             border-radius: 13px; padding: 13px 15px; margin-bottom: 10px; }
.rma-p-vorrang   { border-left-color: #d03b3b; }
.rma-p-knapp     { border-left-color: #eda100; }
.rma-p-normal    { border-left-color: #1baf7a; }
.rma-p-leerstand { border-left-color: #c9c6bb; }
.rma-spaeter { opacity: .7; }
.rma-fertig { opacity: .6; }
.rma-titel { font-size: 16.5px; font-weight: 800; }
.rma-zeit { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums;
            margin: 4px 0 2px; }
.rma-notiz { font-size: 12.5px; color: var(--text-secondary); }
.rma-fuss { display: flex; align-items: center; justify-content: space-between;
            gap: 10px; margin-top: 8px; }
.rma-stand { font-size: 12px; color: var(--text-secondary); }
.rma-pfeil { font-size: 13px; font-weight: 700; color: var(--series-1, #2a78d6); }
.rma-fertig-marke { font-size: 12.5px; font-weight: 700; color: #0b6b45; }

/* --- Mitarbeitermappe: die Kachel "Meine Reinigungen" --- */
.mappe-rn { display: flex; align-items: center; gap: 10px; text-decoration: none;
            color: inherit; padding: 9px 0;
            border-top: 1px solid var(--border-light, #f0eee6); }
.mappe-rn:first-child { border-top: none; }
.mappe-rn-streifen { width: 6px; align-self: stretch; border-radius: 3px; }
.mappe-rn-text { flex: 1 1 auto; min-width: 0; }
.mappe-rn-text b { display: block; font-size: 14px; }
.mappe-rn-text em { display: block; font-style: normal; font-size: 12px;
                    color: var(--text-secondary); }
.mappe-rn-stand { font-size: 12px; font-weight: 700; color: var(--text-secondary); }
.mappe-rn-fertig { font-size: 12px; font-weight: 700; color: #0b6b45; }

/* --- Die Reinigung von innen (Handy-Detailseite) --- */
.rd-app { max-width: 620px; }
.rd-zurueck { display: inline-block; margin-bottom: 12px; font-size: 14px;
              font-weight: 700; text-decoration: none; color: var(--text-secondary); }
.rd-titel { margin: 0; font-size: 26px; letter-spacing: -.4px; }
.rd-unter { margin: 4px 0 18px; font-size: 13px; color: var(--text-secondary); }
.rd-pille { display: inline-block; border-radius: 7px; padding: 2px 9px;
            font-size: 11.5px; font-weight: 800; }
.rd-p-vorrang   { background: rgba(208,59,59,.13); color: #7a1a15; }
.rd-p-knapp     { background: rgba(237,161,0,.18); color: #5a4300; }
.rd-p-normal    { background: rgba(27,175,122,.14); color: #0b6b45; }
.rd-p-leerstand { background: #f1efe8; color: #55534c; }
.rd-block { background: #fff; border: 1px solid var(--border, #e5e3da);
            border-radius: 15px; padding: 15px 17px; margin-bottom: 14px; }
.rd-h2 { margin: 0 0 10px; font-size: 12px; font-weight: 800; letter-spacing: .09em;
         text-transform: uppercase; color: var(--text-tertiary, #8b8880); }
.rd-zeit { font-size: 30px; font-weight: 800; letter-spacing: -.6px;
           font-variant-numeric: tabular-nums; }
.rd-notiz { margin: 6px 0 0; font-size: 13px; color: var(--text-secondary); }
.rd-punkt { display: flex; align-items: center; gap: 11px; width: 100%;
            background: none; border: none; text-align: left; cursor: pointer;
            padding: 9px 0; font-size: 15px; font-family: inherit; color: inherit; }
.rd-punkt:disabled { cursor: default; }
.rd-kasten { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px;
             border: 2px solid var(--border, #d8d5cb); display: flex;
             align-items: center; justify-content: center; font-size: 15px;
             font-weight: 800; color: #fff; }
.rd-punkt.ab .rd-kasten { background: #1baf7a; border-color: #1baf7a; }
.rd-punkt.ab .rd-punkt-text { color: var(--text-tertiary, #8b8880);
                              text-decoration: line-through; }
.rd-punkt-text { flex: 1 1 auto; }
.rd-frei { font-size: 11px; color: var(--text-tertiary, #8b8880); }
.rd-balken { height: 6px; border-radius: 3px; background: #eceae2; margin-top: 10px;
             overflow: hidden; }
.rd-balken span { display: block; height: 100%; width: 0; background: #1baf7a;
                  border-radius: 3px; transition: width .2s ease; }
.rd-fotos { display: flex; flex-wrap: wrap; gap: 9px; }
.rd-foto { width: 64px; height: 64px; object-fit: cover; border-radius: 11px; }
.rd-foto-plus { width: 64px; height: 64px; border-radius: 11px; cursor: pointer;
                border: 2px dashed var(--border, #d8d5cb); display: flex;
                align-items: center; justify-content: center; font-size: 24px;
                color: var(--text-tertiary, #8b8880); }
.rd-knopf { display: block; width: 100%; border: none; border-radius: 13px;
            padding: 16px; font-size: 16.5px; font-weight: 800; cursor: pointer;
            font-family: inherit; }
.rd-knopf-gruen { background: #1baf7a; color: #fff; }
.rd-knopf-grau, .rd-knopf:disabled { background: #dcd9cf; color: #8b8880; cursor: default; }
.rd-knopf-fertig { background: rgba(27,175,122,.14); color: #0b6b45; }
.rd-hinweis { margin: 8px 0 0; text-align: center; font-size: 12.5px;
              color: var(--text-secondary); }
.rn-set-zeile { display: grid; grid-template-columns: minmax(0,1fr) 92px 82px max-content;
                gap: 8px; align-items: center; margin-bottom: 7px; }
.rn-set-mini { display: flex; align-items: center; gap: 5px; font-size: 12px;
               text-transform: none; letter-spacing: 0; color: var(--text-secondary); }
.rn-set-mini input { width: auto; }
@media (max-width: 700px) {
  .rn-set-zeile { grid-template-columns: minmax(0,1fr) max-content; }
}

/* Reinigungen nach Standort (v175) */
.rn-orte-reiter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.rn-ort-reiter { border: 1px solid var(--border, #e5e3da); background: #fff; border-radius: 10px;
                 padding: 7px 14px; font-size: 13.5px; font-weight: 700;
                 color: var(--text-secondary); cursor: pointer; font-family: inherit; }
.rn-ort-reiter.an { background: var(--text-primary, #1d2c49); color: #fff;
                    border-color: var(--text-primary, #1d2c49); }
.rn-ort-reiter .z { opacity: .6; font-weight: 600; margin-left: 6px; }
.rn-ort-reiter.an .z { opacity: .78; }

.rn-ortkopf { display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
              padding: 9px 14px; margin: 4px 0 2px; background: #faf9f5;
              border-top: 1px solid var(--border, #e5e3da);
              border-bottom: 1px solid var(--border, #e5e3da); }
.rn-ortkopf b { font-size: 14px; }
.rn-adr { font-size: 12.5px; color: var(--text-secondary); }
.rn-kreis { display: inline-block; border-radius: 5px; padding: 1px 7px; font-size: 10.5px;
            font-weight: 800; color: #fff; }

.rma-ort { display: block; font-size: 12.5px; font-weight: 600;
           color: var(--text-secondary); margin-top: 2px; }
.rma-mir { background: rgba(42,120,214,.12); color: #124a86; border-radius: 6px;
           padding: 2px 8px; font-size: 11px; font-weight: 800; }
.rma-offen { background: #f1efe8; color: #55534c; border-radius: 6px; padding: 2px 8px;
             font-size: 11px; font-weight: 800; }
.mappe-rn-offen { font-size: 12px; font-weight: 700; color: var(--text-secondary); }

.rd-ort { display: inline-block; background: #f1efe8; color: #55534c; border-radius: 6px;
          padding: 2px 8px; font-size: 11px; font-weight: 800; margin-left: 4px; }
.rd-knopf-blau { background: var(--series-1, #2a78d6); color: #fff; }
.rd-knopf.hidden { display: none; }
.rn-kraefte { font-size: 12.5px; color: var(--text-secondary); margin-left: auto; }
.rn-warnung { font-size: 12.5px; font-weight: 700; color: #7a1a15; margin-left: auto; }
.rn-ortkopf-schmal { justify-content: flex-end; }

/* Aufgabe starten, Uhr, Nichtanreise (v177) */
.rd-uhr { display: flex; align-items: center; gap: 12px; background: rgba(42,120,214,.07);
          border: 1px solid rgba(42,120,214,.28); border-radius: 15px;
          padding: 12px 15px; margin-bottom: 12px; }
.rd-uhr.fertig { background: rgba(27,175,122,.08); border-color: rgba(27,175,122,.3); }
.rd-uhr.hidden { display: none; }
.rd-uhr-punkt { width: 9px; height: 9px; border-radius: 50%; background: var(--series-1, #2a78d6);
                flex: 0 0 auto; }
.rd-uhr.fertig .rd-uhr-punkt { background: #1baf7a; }
.rd-uhr-text { flex: 1 1 auto; min-width: 0; }
.rd-uhr-text b { display: block; font-size: 19px; font-weight: 800;
                 font-variant-numeric: tabular-nums; letter-spacing: -.3px; }
.rd-uhr-text em { display: block; font-style: normal; font-size: 11.5px;
                  color: var(--text-secondary); }
.rd-uhr-rechts { margin-left: auto; text-align: right; font-size: 11.5px;
                 color: var(--text-secondary); }
.rd-pause { display: block; margin-top: 3px; background: none; border: none; padding: 0;
            font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
            color: var(--series-1, #2a78d6); }
.rd-pause.hidden { display: none; }

.rd-aus { opacity: .5; }
.rd-schloss { float: right; font-size: 10px; font-weight: 700; text-transform: none;
              letter-spacing: 0; color: var(--text-tertiary, #8b8880); }
.rd-schloss.hidden { display: none; }
/* =====================================================================
   Eine laufende Reinigung abbrechen (v183)
   Wilhelm: "es muss so sein, dass man auch die Aufgabe abbrechen kann" -
   moeglich, aber bewusst kein grosser Knopf.
   ===================================================================== */
.rd-abbruch-link { display: block; width: 100%; box-sizing: border-box;
                   margin-top: 9px; background: transparent; border: none;
                   color: var(--text-tertiary, #8b8880); font-size: 13px;
                   font-weight: 700; padding: 11px; font-family: inherit;
                   text-decoration: underline; cursor: pointer; }
.rd-abbruch-link.hidden, .rd-versuche.hidden { display: none; }
.rd-warn { background: #fdf4f2; border: 1px solid #f0d6cf; border-radius: 13px;
           padding: 12px 15px; font-size: 13px; color: #7a1a15; line-height: 1.55; }
.rd-wahl.gewaehlt { border-color: var(--text-primary, #1d2c49);
                    box-shadow: 0 0 0 2px rgba(29,44,73,.13); }
.rd-versuche { background: #faf8f2; border: 1px solid #eceadf; border-radius: 12px;
               padding: 11px 14px; margin-top: 12px; font-size: 12.5px;
               color: var(--text-secondary); }
.rd-versuche b { color: var(--text-primary, #1d2c49); }
.rd-versuch { padding: 5px 0; border-top: 1px solid #f2f0e8; line-height: 1.5; }
.rd-versuch:first-of-type { border-top: none; }

/* Der Verlauf im Ansehen-Fenster (v183). */
.rn-abbruch-kasten { background: #fdf7f5; border: 1px solid #f0dcd6; border-radius: 12px;
                     padding: 11px 14px; margin-top: 14px; font-size: 13px;
                     color: var(--text-secondary); }
.rn-abbruch-kasten b { color: #7a1a15; }
.rn-abbruch-zeile { padding: 6px 0; border-top: 1px solid #f4e6e1; line-height: 1.5; }
.rn-abbruch-zeile:first-of-type { border-top: none; }

/* In der Betreiber-Liste: der abgebrochene Versuch als Zusatzzeile. */
.rn-stand-abgebrochen { color: #7a1a15; font-weight: 700; }
.rn-abbruch-text { font-size: 11.5px; color: var(--text-secondary); }
.btn-abbruch { background: #fff; border: 1px solid rgba(208,59,59,.4); color: #b0392f; }
.btn-abbruch:hover { background: rgba(208,59,59,.06); }

/* Seit v181: aus welcher Reinigungsliste stammen die Punkte? */
.rd-quelle { float: right; margin-left: 8px; font-size: 10px; font-weight: 800;
             text-transform: none; letter-spacing: 0; color: #0b6b45;
             background: rgba(27,175,122,.12); border-radius: 6px; padding: 2px 7px; }
.rd-quelle.hidden { display: none; }
.rd-knopf-dunkel { background: var(--text-primary, #1d2c49); color: #fff; }
.rd-knopf-rotlinie { background: #fff; color: #d03b3b;
                     border: 2px solid rgba(208,59,59,.38); }

.rd-pruef { background: rgba(237,161,0,.1); border: 1px solid rgba(237,161,0,.35);
            border-radius: 13px; padding: 13px 15px; }
.rd-pruef ul { margin: 7px 0 0; padding-left: 19px; font-size: 13.5px;
               color: var(--text-secondary); }
.rd-pruef li { margin-bottom: 3px; }
.rd-wahl { display: block; width: 100%; text-align: left; background: #fff;
           border: 2px solid var(--border, #e5e3da); border-radius: 13px;
           padding: 11px 14px; margin-bottom: 9px; font-family: inherit; cursor: pointer;
           color: inherit; }
.rd-wahl.an { border-color: var(--series-1, #2a78d6); background: rgba(42,120,214,.05); }
.rd-wahl b { display: block; font-size: 14.5px; }
.rd-wahl em { display: block; font-style: normal; font-size: 12px;
              color: var(--text-secondary); margin-top: 2px; }
.rd-feld { width: 100%; border: 1px solid var(--border, #e5e3da); border-radius: 11px;
           padding: 10px 12px; font-family: inherit; font-size: 14px; resize: vertical; }

/* Mitarbeiterseite mit vier Reitern (v177) */
.brand-ort { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
             color: var(--text-secondary); margin-top: 2px; text-transform: none; }
.ma-reiter { display: flex; gap: 7px; margin-bottom: 14px; }
.ma-reiter-knopf { flex: 1 1 0; border: 1px solid var(--border, #e5e3da); background: #fff;
                   border-radius: 12px; padding: 8px 4px 7px; text-align: center;
                   font-size: 11px; font-weight: 700; color: var(--text-secondary);
                   line-height: 1.25; font-family: inherit; cursor: pointer; }
.ma-reiter-knopf .sym { display: block; font-size: 16px; margin-bottom: 2px; }
.ma-reiter-knopf .z { display: block; font-size: 14px; font-weight: 800;
                      color: var(--text-primary, #1d2c49); }
.ma-reiter-knopf.aktiv { background: var(--text-primary, #1d2c49); color: #fff;
                         border-color: var(--text-primary, #1d2c49); }
.ma-reiter-knopf.aktiv .z { color: #fff; }

.ma-tag { margin: 16px 2px 8px; font-size: 11px; font-weight: 800; letter-spacing: .09em;
          text-transform: uppercase; color: var(--text-tertiary, #8b8880); }
.ma-tag:first-child { margin-top: 2px; }

.ma-karte { display: flex; background: #fff; border: 1px solid var(--border, #e5e3da);
            border-radius: 15px; overflow: hidden; margin-bottom: 9px;
            text-decoration: none; color: inherit; cursor: pointer; }
.ma-karte.fertig { background: #f6f5f1; border-color: #eceae2; }
.ma-streif { width: 5px; flex: 0 0 5px; }
.ma-s-vorrang { background: #d03b3b; }
.ma-s-knapp { background: #eda100; }
.ma-s-normal { background: #1baf7a; }
.ma-s-leerstand { background: #c9c6bb; }
.ma-s-aufgabe { background: #2a78d6; }
.ma-in { flex: 1 1 auto; min-width: 0; padding: 11px 13px 11px 12px; }
.ma-oben { display: flex; align-items: baseline; gap: 8px; }
.ma-titel { flex: 1 1 auto; min-width: 0; font-size: 15.5px; font-weight: 800;
            letter-spacing: -.2px; overflow: hidden; text-overflow: ellipsis;
            white-space: nowrap; }
.ma-zeit { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums;
           white-space: nowrap; }
.ma-karte.fertig .ma-titel { color: var(--text-tertiary, #8b8880);
                             text-decoration: line-through; }
.ma-karte.fertig .ma-zeit { color: var(--text-tertiary, #8b8880); }
.ma-notiz { display: block; font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.ma-fuss { display: flex; align-items: center; gap: 7px; margin-top: 9px; }
.ma-m { border-radius: 6px; padding: 2px 8px; font-size: 10.5px; font-weight: 800;
        white-space: nowrap; }
.ma-m-mir { background: rgba(42,120,214,.12); color: #124a86; }
.ma-m-offen { background: #f1efe8; color: #55534c; }
.ma-m-laeuft { background: rgba(237,161,0,.18); color: #5a4300;
               font-variant-numeric: tabular-nums; }
.ma-m-fertig { background: rgba(27,175,122,.14); color: #0b6b45; }
.ma-m-na { background: #5c5a52; color: #fff; }
.ma-fortschritt { flex: 1 1 auto; max-width: 90px; height: 5px; border-radius: 3px;
                  background: #eceae2; overflow: hidden; }
.ma-fortschritt span { display: block; height: 100%; background: #1baf7a; }
.ma-pfeil { margin-left: auto; font-size: 12.5px; font-weight: 800;
            color: var(--series-1, #2a78d6); white-space: nowrap; }
.ma-stand { margin-left: auto; font-size: 12px; color: var(--text-secondary); }
.ma-leer { text-align: center; color: var(--text-tertiary, #8b8880); font-size: 13.5px;
           padding: 34px 10px; }
.ma-leer .gross { display: block; font-size: 32px; margin-bottom: 8px; }

/* Müllplan-Reiter auf der Aufgabenseite (v179) - der Plan stand bis v178 in
   der Mitarbeitermappe, gehoert aber zu den Aufgaben. */
.ma-muell-tag { margin: 15px 2px 6px; font-size: 11px; font-weight: 800;
                letter-spacing: .09em; text-transform: uppercase;
                color: var(--text-tertiary, #8b8880); }
.ma-muell-zeile { display: flex; align-items: center; gap: 9px; overflow: hidden;
                  border: 1px solid var(--border, #e5e3da); border-radius: 12px;
                  background: #fff; padding: 11px 13px 11px 0; margin-bottom: 7px; }
.ma-muell-zeile.heute { border-color: var(--text-primary, #1d2c49); }
.ma-muell-streifen { flex: 0 0 auto; width: 5px; align-self: stretch;
                     margin: -11px 4px -11px 0; border-radius: 0 3px 3px 0; }
.ma-muell-icon { flex: 0 0 auto; font-size: 15px; }
.ma-muell-name { font-size: 14px; font-weight: 700; color: var(--text-primary, #1d2c49); }
.ma-muell-frist { margin-left: auto; font-size: 12.5px; color: var(--text-secondary);
                  white-space: nowrap; }
.ma-muell-zeile.heute .ma-muell-frist { font-weight: 800; color: var(--text-primary, #1d2c49); }
.ma-muell-pdf { display: block; margin-top: 14px; text-align: center;
                border: 1px solid var(--border, #e5e3da); border-radius: 12px;
                background: #fff; padding: 12px; font-size: 13.5px; font-weight: 700;
                color: var(--text-primary, #1d2c49); text-decoration: none; }
.ma-muell-pdf:hover { background: var(--bg-subtle, #f7f6f2); }

/* Die Seite einer einzelnen Aufgabe (v180) - sie borgt sich das Aussehen der
   Reinigungsseite (.rd-*), braucht aber nur einen eigenen Fliesstext. */
.ad-text { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-primary, #1d2c49);
           white-space: pre-wrap; }

/* =====================================================================
   Muellplan: die Aufgabe am Vortag (v182)
   Wilhelm: "bitte automatisch die Aufgabe einen Tag vor Abholung,
   Muelltonne vorbereiten fuer Abholung. Immer einen Tag."
   ===================================================================== */
.mp-schalter { display: flex; align-items: center; gap: 12px; margin: 12px 0 0;
               background: #faf8f2; border: 1px solid #eceadf; border-radius: 12px;
               padding: 11px 14px; cursor: pointer; }
.mp-schalter.an { background: #f7fbf8; border-color: #d8ecdf; }
.mp-schalter input { position: absolute; opacity: 0; pointer-events: none; }
.mp-schieber { flex: 0 0 auto; width: 42px; height: 24px; border-radius: 999px;
               background: #c9c6bb; position: relative; transition: background .15s ease; }
.mp-schieber::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px;
                      height: 18px; border-radius: 50%; background: #fff;
                      transition: transform .15s ease; }
.mp-schalter.an .mp-schieber { background: #1baf7a; }
.mp-schalter.an .mp-schieber::after { transform: translateX(18px); }
.mp-schalter-text b { display: block; font-size: 13.5px; color: var(--text-primary, #1d2c49); }
.mp-schalter-text em { display: block; font-style: normal; margin-top: 2px;
                       font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }

.mp-plan { margin-top: 10px; }
.mp-zeile { display: grid; grid-template-columns: 28px minmax(0, 1fr) 180px 200px 150px;
            gap: 12px; align-items: center; padding: 7px 12px;
            border-top: 1px solid var(--border-light, #f2f0e8); font-size: 13px; }
.mp-zeile.kopf { border-top: none; padding-bottom: 3px; font-size: 10.5px; font-weight: 800;
                 letter-spacing: .09em; text-transform: uppercase;
                 color: var(--text-tertiary, #a5a196); }
.mp-zeile b { color: var(--text-primary, #1d2c49); }
.mp-vortag { font-weight: 700; color: var(--text-primary, #1d2c49); }
.mp-stand { justify-self: start; font-size: 11.5px; font-weight: 800;
            border-radius: 7px; padding: 3px 9px; }
.mp-stand-offen { background: #f1efe8; color: #55534c; }
.mp-stand-heute { background: rgba(237,161,0,.18); color: #5a4300; }
.mp-stand-fertig { background: rgba(27,175,122,.14); color: #0b6b45; }
.mp-stand-spaeter { background: #f1efe8; color: #a5a196; }
.mp-stand-aus { background: transparent; color: #a5a196; font-weight: 400; font-style: italic; }

@media (max-width: 1100px) {
  .mp-zeile { grid-template-columns: 28px minmax(0, 1fr); }
  .mp-zeile.kopf { display: none; }
  .mp-zeile > *:nth-child(n+3) { grid-column: 2; }
}

/* =====================================================================
   Aufgeraeumte Aufgaben-Tabelle (v182)
   Wilhelm: "bitte die Bereiche aufraeumen, alles ist verzerrt." Zwei
   Ursachen: die Tabelle war breiter als das Fenster (dadurch rutschte der
   ganze Bereich mit Ueberschrift und Filtern nach links weg), und jede
   Zeile war durch Beschreibungs-Kasten und Status-Etiketten dreimal so
   hoch wie noetig.
   ===================================================================== */
.todo-tabelle-scroll { width: 100%; overflow-x: auto; }
.todo-tabelle-fest { table-layout: fixed; min-width: 1080px; }
.todo-tabelle-fest th:nth-child(1) { width: auto; }
.todo-tabelle-fest th:nth-child(2) { width: 160px; }
.todo-tabelle-fest th:nth-child(3) { width: 130px; }
.todo-tabelle-fest th:nth-child(4) { width: 230px; }
.todo-tabelle-fest th:nth-child(5) { width: 96px; }
.todo-tabelle-fest th:nth-child(6) { width: 74px; }
.todo-tabelle-fest th:nth-child(7) { width: 250px; }
/* Die Filterzeile (tabellen.js) muss in die schmalen Spalten passen. */
.todo-tabelle-fest .tab-filterzelle { padding: 5px 6px; }
.todo-tabelle-fest .tab-filter-klein,
.todo-tabelle-fest .tab-filter-text { min-width: 0; max-width: 100%; }
.todo-tabelle-fest td { vertical-align: middle; }
.todo-zelle-titel { min-width: 0; }
.todo-zelle-titel strong { font-size: 13.5px; }
.todo-zeile-beschr { display: block; margin-top: 2px; font-size: 11.5px;
                     color: var(--text-tertiary, #8b8880);
                     white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.todo-zelle-personen { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.todo-kopf-ring { display: inline-flex; border-radius: 50%; padding: 2px;
                  box-shadow: 0 0 0 2px transparent inset; }
.todo-kopf-ring .todo-kuerzel-badge { width: 24px; min-width: 24px; height: 24px;
                                      line-height: 24px; font-size: 10px; padding: 0;
                                      text-align: center; }
.todo-ring-offen { background: #eceadf; }
.todo-ring-angenommen { background: #dbe6f3; }
.todo-ring-in_arbeit { background: rgba(237,161,0,.35); }
.todo-ring-erledigt { background: rgba(27,175,122,.4); }
.todo-regel-mini { font-size: 10.5px; color: var(--text-tertiary, #a5a196);
                   white-space: nowrap; }

/* Die Aufgaben-Karte selbst scrollt nicht mehr - nur die Tabelle darin. */
#todo-tab-aufgaben > .table-section { overflow-x: visible; }

/* =====================================================================
   Die Reinigungsliste aufgeraeumt (v181)
   Wilhelm: "diesen Bereich uebersichtlicher gestalten und etwas
   symmetrischer und professioneller." Feste Spalten, ein schlanker
   Tageskopf mit Zahlen, die Kraefte und die Legende eingeklappt.
   ===================================================================== */
.rn-legende-klapp { margin-bottom: 12px; }
.rn-legende-klapp > summary { list-style: none; cursor: pointer; display: inline-block; }
.rn-legende-klapp > summary::-webkit-details-marker { display: none; }
.rn-legende-knopf { display: inline-block; border: 1px solid var(--border, #e5e3da);
                    background: #fff; border-radius: 9px; padding: 5px 11px;
                    font-size: 12px; color: var(--text-secondary); }
.rn-legende-klapp[open] .rn-legende { margin-top: 9px; }

.rn-tagkopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
              margin: 20px 0 2px; padding: 8px 4px 8px 14px;
              border-bottom: 2px solid #ece8dc; }
.rn-tagkopf:first-child { margin-top: 0; }
.rn-tagname { font-size: 13px; font-weight: 800; letter-spacing: .06em;
              text-transform: uppercase; color: var(--text-primary, #1d2c49); }
.rn-tagzahlen { display: flex; gap: 7px; margin-left: auto; }
.rn-tz { font-size: 11.5px; font-weight: 800; border-radius: 7px; padding: 3px 9px; }
.rn-tz-offen { background: #f1efe8; color: #55534c; }
.rn-tz-laeuft { background: rgba(237,161,0,.18); color: #5a4300; }
.rn-tz-fertig { background: rgba(27,175,122,.14); color: #0b6b45; }

/* Seit v182 hat die letzte Spalte eine FESTE Breite. Vorher war sie
   "so breit wie noetig" - und weil jede Zeile ihr eigenes Raster ist,
   bekam eine Zeile mit drei Knoepfen andere Spaltenpositionen als eine mit
   zweien. Genau das sah verzerrt aus. */
.rn-kopfzeile { display: grid;
                grid-template-columns: 8px minmax(0, 1fr) 150px 120px 200px 212px;
                gap: 14px; align-items: center; padding: 8px 14px 5px 0;
                font-size: 10.5px; font-weight: 800; letter-spacing: .09em;
                text-transform: uppercase; color: var(--text-tertiary, #a5a196); }
.rn-stand-spalte { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.rn-balken { display: block; width: 100%; max-width: 170px; height: 5px;
             border-radius: 3px; background: #f0eee6; overflow: hidden; }
.rn-balken > span { display: block; height: 100%; background: #1baf7a; }
.rn-koepfe { display: inline-flex; gap: 4px; }
.rn-koepfe .todo-kuerzel-badge { width: 24px; min-width: 24px; height: 24px;
                                 line-height: 24px; font-size: 10px; padding: 0;
                                 text-align: center; }

.rn-kraefte-klapp { display: inline-block; }
.rn-kraefte-klapp > summary { list-style: none; cursor: pointer; }
.rn-kraefte-klapp > summary::-webkit-details-marker { display: none; }
.rn-kraefte-chip { display: inline-flex; align-items: center; gap: 4px;
                   font-size: 11.5px; font-weight: 700; color: var(--text-secondary);
                   background: #f7f5ee; border: 1px solid #eceadf;
                   border-radius: 999px; padding: 3px 10px; }
.rn-kraefte-namen { display: block; margin-top: 5px; font-size: 12px;
                    color: var(--text-secondary); }

/* Unter 1200 px wird es eng - dann klappt jede Zeile untereinander, statt
   die Spalten zu quetschen. */
@media (max-width: 1200px) {
  .rn-kopfzeile { display: none; }
  .rn-stand-spalte { grid-column: 2; }
}

/* =====================================================================
   Reinigungslisten (v181) - Wilhelms eigene Listen: eine allgemeine und
   beliebig viele Vorlagen, die fuer Unterkuenfte und/oder ganze
   Nummernkreise gelten.
   ===================================================================== */
.rl-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
             gap: 13px; }
.rl-kachel { border: 1px solid var(--border, #e5e3da); border-radius: 14px;
             background: #fff; padding: 14px 16px; overflow: hidden; }
.rl-kachel.standard { border-color: #d9c58e; background: #fffdf6; }
.rl-kopf { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
.rl-name { font-size: 14.5px; font-weight: 800; color: var(--text-primary, #1d2c49); }
.rl-marke { font-size: 10.5px; font-weight: 800; border-radius: 6px; padding: 2px 7px;
            background: #e7dfc4; color: #5a4300; }
.rl-marke.grau { background: #f1efe8; color: #55534c; }
.rl-werkzeug { margin-left: auto; display: flex; gap: 5px; flex: 0 0 auto; }
.rl-zahl { font-size: 12px; color: var(--text-secondary); margin: 0 0 8px; }
.rl-vorschau { margin: 0; padding: 0; list-style: none; }
.rl-vorschau li { font-size: 12.5px; color: var(--text-secondary); padding: 2px 0; }
.rl-vorschau li::before { content: "✓ "; color: #1baf7a; font-weight: 800; }
.rl-vorschau li.mehr { color: var(--text-tertiary, #a5a196); font-style: italic; }
.rl-vorschau li.mehr::before { content: ""; }
.rl-fuer { margin: 9px 0 0; display: flex; flex-wrap: wrap; gap: 5px; }
.rl-chip { font-size: 11.5px; background: #f4f2ea; border: 1px solid #eceadf;
           border-radius: 999px; padding: 2px 9px; color: var(--text-secondary); }
.rl-chip.kreis { background: #eef4fb; border-color: #dbe6f3; color: #2a4f7d; font-weight: 700; }
.rl-chip.leer { color: var(--text-tertiary, #a5a196); font-style: italic; }

.rl-editor { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; }
.rl-editor > div { min-width: 0; }
.rl-block { margin-bottom: 16px; }
.rl-block.hidden, #rl-rechts.hidden { display: none; }
.rl-label { display: block; font-size: 11px; font-weight: 800; letter-spacing: .07em;
            text-transform: uppercase; color: var(--text-tertiary, #a5a196); margin: 0 0 5px; }
.rl-feld { width: 100%; border: 1px solid var(--border, #e5e3da); border-radius: 10px;
           padding: 9px 12px; font-size: 13.5px; font-family: inherit;
           color: var(--text-primary, #1d2c49); box-sizing: border-box; }
.rl-punkt { display: flex; align-items: center; gap: 8px; border: 1px solid var(--border, #e5e3da);
            border-radius: 11px; background: #fff; padding: 7px 10px; margin-bottom: 6px; }
.rl-punkt-neu { border-style: dashed; }
.rl-griff { color: #c9c6bb; cursor: pointer; font-size: 15px; }
.rl-nr { font-size: 11.5px; font-weight: 800; color: var(--text-tertiary, #a5a196);
         width: 20px; text-align: center; flex: 0 0 auto; }
.rl-punkt-feld { flex: 1 1 auto; min-width: 0; border: none; background: transparent;
                 font-size: 13.5px; font-family: inherit; color: var(--text-primary, #1d2c49);
                 padding: 3px 2px; }
.rl-punkt-feld:focus { outline: none; border-bottom: 1px solid var(--border, #e5e3da); }
.rl-pflicht { flex: 0 0 auto; font-size: 11px; font-weight: 800; border-radius: 6px;
              padding: 3px 9px; background: rgba(208,59,59,.11); color: #7a1a15;
              border: none; cursor: pointer; font-family: inherit; }
.rl-pflicht.kann { background: #f1efe8; color: #55534c; }
.rl-hoch, .rl-runter, .rl-weg { flex: 0 0 auto; border: none; background: transparent;
                                color: #b9b6ad; cursor: pointer; font-size: 13px;
                                font-family: inherit; padding: 2px 4px; }
.rl-hoch:disabled, .rl-runter:disabled { opacity: .3; cursor: default; }
.rl-zuord { border: 1px solid var(--border, #e5e3da); border-radius: 12px;
            padding: 9px 12px; max-height: 190px; overflow: auto; background: #fff; }
.rl-zeile-u { display: flex; align-items: center; gap: 9px; padding: 4px 0;
              font-size: 13px; color: var(--text-primary, #1d2c49); cursor: pointer; }
.rl-mini-chip { margin-left: auto; font-size: 10.5px; font-weight: 700; color: #2a4f7d;
                background: #eef4fb; border-radius: 5px; padding: 1px 6px; }
.rl-hinw { background: #f7f5ee; border: 1px solid #eceadf; border-radius: 12px;
           padding: 11px 13px; font-size: 12.5px; color: var(--text-secondary);
           line-height: 1.55; }

@media (max-width: 980px) {
  .rl-editor { grid-template-columns: minmax(0, 1fr); }
}

/* =====================================================================
   Erledigte Reinigungen: wer hat sie gemacht? (v180)
   Wilhelm: "ich moechte, dass nur dort sichtbar ist, wer tatsaechlich die
   Aufgabe erledigt hat" - und bei elf Reinigungen an einem Sonntag
   zusaetzlich nach Person gruppiert statt nach Uhrzeit.
   ===================================================================== */
.rn-sort { display: flex; align-items: center; gap: 8px; margin: 2px 0 12px; }
.rn-sort.hidden { display: none; }
.rn-sort-label { font-size: 12.5px; color: var(--text-tertiary, #8b8880); }
.rn-sort-knopf { border: 1px solid var(--border, #e5e3da); background: #fff;
                 border-radius: 10px; padding: 6px 13px; font-size: 13px;
                 font-weight: 700; color: var(--text-secondary); cursor: pointer;
                 font-family: inherit; }
.rn-sort-knopf.an { background: var(--text-primary, #1d2c49); color: #fff;
                    border-color: var(--text-primary, #1d2c49); }

.rn-person { display: flex; align-items: center; gap: 10px; margin: 20px 0 8px;
             padding: 9px 14px; background: #fbfaf5;
             border: 1px solid var(--border-light, #eeebe0); border-radius: 12px; }
.rn-person:first-child { margin-top: 2px; }
.rn-person.ohne { background: #fdf7f1; border-color: #f0e2d2; }
.rn-person .todo-kuerzel-badge { flex: 0 0 auto; width: 28px; min-width: 28px;
                                 height: 28px; line-height: 28px; font-size: 11px;
                                 padding: 0; text-align: center; }
.rn-person-name { font-size: 14.5px; font-weight: 800; color: var(--text-primary, #1d2c49); }
.rn-person-zahl { font-size: 12.5px; color: var(--text-secondary); }
.rn-person-summe { margin-left: auto; font-size: 12.5px; color: var(--text-secondary);
                   font-variant-numeric: tabular-nums; }
.rn-person-summe b { color: var(--text-primary, #1d2c49); }

.rn-macher { display: inline-flex; align-items: center; gap: 6px;
             background: rgba(27,175,122,.12); border-radius: 999px;
             padding: 3px 11px 3px 3px; }
.rn-macher .todo-kuerzel-badge { flex: 0 0 auto; width: 22px; min-width: 22px;
                                 height: 22px; line-height: 22px; font-size: 9.5px;
                                 padding: 0; text-align: center; }
.rn-macher-name { font-size: 12.5px; font-weight: 700; color: #0b6b45; }
.rn-mitgeholfen { font-size: 11.5px; color: var(--text-tertiary, #8b8880); }
.rn-keiner { font-size: 12.5px; color: var(--text-tertiary, #8b8880); font-style: italic; }

/* Umschalter offen/erledigt und sprechender Stand (v177) */
.rn-sicht-reiter { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 10px; }
.rn-sicht { border: 1px solid var(--border, #e5e3da); background: #fff; border-radius: 10px;
            padding: 6px 13px; font-size: 13px; font-weight: 700;
            color: var(--text-secondary); cursor: pointer; font-family: inherit; }
.rn-sicht.an { background: var(--text-primary, #1d2c49); color: #fff;
               border-color: var(--text-primary, #1d2c49); }
.rn-sicht .z { opacity: .6; margin-left: 5px; }
.rn-sicht.an .z { opacity: .78; }

.rn-stand { font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rn-stand-offen { color: var(--text-tertiary, #8b8880); font-weight: 600; }
.rn-stand-laeuft { color: #5a4300; }
.rn-stand-fertig { color: #0b6b45; }
.rn-stand-na { color: #5c5a52; }
.rn-fortschritt { font-size: 11px; color: var(--text-secondary); font-weight: 600; }

.rn-na-kasten { background: #f1efe8; border-radius: 12px; padding: 12px 14px; margin-top: 14px;
                font-size: 13.5px; }
.rn-na-kasten b { display: block; margin-bottom: 3px; }
.rn-na-notiz { margin-top: 6px; font-style: italic; color: var(--text-secondary); }
.todo-fremd-marke { display: inline-block; margin-left: 7px; background: #eceae2;
                    color: #55534c; border-radius: 6px; padding: 1px 7px;
                    font-size: 10.5px; font-weight: 800; }

/* ===========================================================================
   Kündigung vorbereiten (seit v188)

   Schritt 1 klärt Absender und Termin, bevor überhaupt ein Brief entsteht.
   Farbwelt wie die übrigen Vorschaltkästen: der Fristvorschlag blau (eine
   Rechnung, die man prüfen soll), die KI-Rückfrage warm (ein Angebot, kein
   Ergebnis), die Warnung rot.
   =========================================================================== */

.kf-schritte { display: flex; gap: 8px; margin-bottom: 14px; }
.kf-schritt {
  flex: 1;
  border-radius: var(--radius-sm, 6px);
  padding: 8px 12px;
  font-size: 12.5px;
  background: var(--surface-2, #f6f4ed);
  color: var(--text-muted);
}
.kf-schritt b { display: block; font-size: 13px; color: var(--text-secondary); }
.kf-schritt-an { background: #1d2c49; }
.kf-schritt-an, .kf-schritt-an b { color: #fff; }
.kf-schritt-fertig { background: #f1f9f4; border: 1px solid #c9e5d3; cursor: pointer; }
.kf-schritt-fertig b { color: #12764f; }

.kf-spalten { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; align-items: start; }
@media (max-width: 1100px) { .kf-spalten { grid-template-columns: minmax(0, 1fr); } }

.kf-frist {
  background: #eef4fb;
  border: 1px solid #cfdff2;
  border-radius: 13px;
  padding: 15px 17px;
}
.kf-frist h4 { margin: 0 0 10px; font-size: 15px; color: var(--text-primary, #1d2c49); }
.kf-rechnung {
  background: #fff;
  border: 1px solid #dce7f5;
  border-radius: 10px;
  padding: 3px 0;
  margin-bottom: 12px;
}
.kf-rz {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 7px 13px; font-size: 12.5px; color: var(--text-secondary);
  border-top: 1px solid #eef2f8;
}
.kf-rz:first-child { border-top: none; }
.kf-rz b { color: var(--text-primary, #1d2c49); text-align: right; }
.kf-rz.kf-ergebnis { background: #f7fafd; font-size: 13.5px; }

.kf-wahl {
  display: flex; gap: 9px; align-items: flex-start;
  background: #fff; border: 1px solid #dce7f5; border-radius: 11px;
  padding: 10px 13px; margin-bottom: 8px; cursor: pointer;
}
.kf-wahl.kf-an { border-color: #1d2c49; box-shadow: 0 0 0 1px #1d2c49 inset; }
.kf-wahl input { margin-top: 3px; flex: none; }
.kf-wahl b { display: block; font-size: 13.5px; color: var(--text-primary, #1d2c49); }
.kf-wahl em { display: block; font-style: normal; font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.kf-feld { width: 100%; }

.kf-warn {
  background: #fdf4f2; border: 1px solid #f0d6cf; border-radius: 11px;
  padding: 11px 14px; font-size: 12.5px; color: #7a1a15; line-height: 1.55;
  margin: 12px 0 0;
}

/* Die Rückfrage zur Frist */
.kf-ki {
  background: #fbf7ef; border: 1px solid #e8ddc4; border-radius: 13px;
  padding: 14px 16px; margin-top: 18px;
}
.kf-ki h4 { margin: 0 0 3px; font-size: 14.5px; color: var(--text-primary, #1d2c49); }
.kf-chat {
  background: #fff; border: 1px solid #eee7d4; border-radius: 10px;
  padding: 12px 13px; margin-top: 10px; max-height: 320px; overflow-y: auto;
}
.kf-msg { font-size: 12.5px; line-height: 1.6; margin-bottom: 11px; }
.kf-msg:last-child { margin-bottom: 0; }
.kf-msg .kf-wer {
  display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 3px;
}
.kf-msg-du { background: var(--surface-2, #f6f4ed); border-radius: 9px; padding: 8px 11px; }
.kf-vorschlaege { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 9px; }
.kf-fragezeile { display: flex; gap: 8px; margin-top: 10px; }
.kf-fragezeile input { flex: 1; min-width: 0; }

/* Schritt 2: die Zeile, die festhält, was in Schritt 1 entschieden wurde */
.kf-kopfzeile {
  display: flex; gap: 10px; align-items: center;
  background: #f1f9f4; border: 1px solid #c9e5d3; border-radius: 11px;
  padding: 9px 14px; margin-bottom: 12px; font-size: 12.5px; color: #14663f;
}
.kf-kopfzeile strong { color: #0f5c37; }
.kf-kopfzeile .btn-link { margin-left: auto; color: #14663f; }

.kf-vorschaukopf { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.kf-vorschaukopf .detail-note { flex: 1; }

/* ===========================================================================
   Mängel und der Reiter „Hausmeister" (seit v189)

   Aufbau wie die Reinigungsliste: fester Spaltenraster, Farbstreifen links,
   Fotos vorne. Der Streifen benutzt dieselbe Sprache wie überall in Hostapia -
   rot heißt dringend, grau kann warten.
   =========================================================================== */

.hm-zaehler {
  display: inline-block; background: #b0392f; color: #fff; border-radius: 999px;
  font-size: 11px; font-weight: 800; padding: 1px 7px; margin-left: 6px;
}
.hm-zaehler.hidden { display: none; }

/* Kopfzeile mit den Kennzahlen (v190). Sie beantwortet in einem Blick, wie
   es steht - „die älteste liegt neun Tage" ist die Zahl, die zum Handeln
   führt, nicht die Gesamtzahl. */
.hm-titelzeile {
  display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap;
  border-bottom: 1px solid #f2f0e8; padding-bottom: 15px; margin-bottom: 15px;
}
.hm-titelzeile > div:first-child { flex: 1; min-width: 320px; max-width: 720px; }
.hm-kennzahlen {
  display: flex; margin-left: auto; border-left: 3px solid var(--text-primary, #1d2c49);
  padding-left: 15px;
}
.hm-kpi { padding: 0 17px; border-right: 1px solid #f0eee6; }
.hm-kpi:last-child { border-right: none; padding-right: 0; }
.hm-kpi b {
  display: block; font-size: 24px; font-weight: 800; line-height: 1.1;
  color: var(--text-primary, #1d2c49);
}
.hm-kpi span { font-size: 11.5px; color: var(--text-muted); }
.hm-kpi.rot b { color: #b0392f; }
.hm-kpi.gelb b { color: #a67c00; }
.hm-kpi.lila b { color: #5b2d8a; }

/* Die Filter stehen in EINER Zeile als zusammenhängende Gruppen - vorher
   standen sie als Knopfsäule untereinander (Wilhelm: „laienhaft"). */
.hm-filterzeile {
  display: flex; gap: 9px; flex-wrap: wrap; align-items: center; margin-bottom: 14px;
}
.hm-fgruppe {
  display: flex; border: 1px solid var(--border, #e0ddd2); border-radius: 10px;
  overflow: hidden;
}
.hm-fgruppe .hm-f {
  border: none; background: #fff; padding: 7px 14px; font-size: 12.5px;
  color: var(--text-secondary, #55534c); border-right: 1px solid #f0eee6;
  font-family: inherit; cursor: pointer;
}
.hm-fgruppe .hm-f:last-child { border-right: none; }
.hm-fgruppe .hm-f.an { background: var(--text-primary, #1d2c49); color: #fff; }
.hm-w, .hm-suche {
  border: 1px solid var(--border, #e0ddd2); border-radius: 10px; padding: 7px 11px;
  font-size: 12.5px; font-family: inherit; color: var(--text-secondary, #55534c);
  background: #fff; max-width: 190px;
}
.hm-suche { min-width: 180px; }
.hm-fknoepfe { margin-left: auto; display: flex; gap: 8px; }
.hm-trenner { color: var(--border, #c8c5bb); margin: 0 3px; }

/* Die Tabelle. Seit v190 eine echte <table> statt eines Rasters aus <span>:
   Die Spalten stehen damit über alle Gruppen hinweg bündig, auch wenn ein
   Wohnungsname lang ist. */
.hm-tabelle { width: 100%; border-collapse: collapse; }
.hm-tabelle th {
  text-align: left; font-size: 10.5px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-muted); padding: 10px 12px 8px;
  border-bottom: 1px solid #f0eee6;
}
.hm-tabelle td {
  padding: 12px; font-size: 13px; color: var(--text-primary, #2f2d28);
  vertical-align: middle; border-bottom: 1px solid #f5f3ec;
}
.hm-tabelle tr:last-child td { border-bottom: none; }
.hm-gruppe {
  font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-muted); background: var(--surface-2, #faf8f2); padding: 7px 12px;
}
.hm-inarbeit { background: #fdfbf3; }
.hm-erledigt { opacity: .62; }
.hm-erledigt .hm-mangel b { text-decoration: line-through; }
.hm-streifzelle { width: 4px; padding: 0 !important; }
.hm-streif { display: block; width: 4px; height: 52px; border-radius: 2px; }

.hm-bilder { white-space: nowrap; }
.hm-bild {
  width: 38px; height: 38px; border-radius: 6px; border: 1px solid #ddd8c8;
  background: #e9e5d8 center/cover no-repeat; display: inline-block; margin-right: 3px;
  vertical-align: middle;
}
.hm-bild-leer {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-muted); font-size: 15px; background: #f6f4ed;
}
.hm-bild-gross { width: 148px; height: 112px; border-radius: 10px; margin-right: 8px; }

.hm-mangel b { display: block; font-size: 13.5px; color: var(--text-primary, #1d2c49); }
.hm-mangel em {
  display: block; font-style: normal; font-size: 11.5px; color: var(--text-muted);
  margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 380px;
}
.hm-obj b { display: block; font-size: 13px; }
.hm-obj em { display: block; font-style: normal; font-size: 11px; color: var(--text-muted); }

/* Zuständig: niemand / eigener Mitarbeiter / externe Firma. */
.hm-zust { min-width: 168px; }
.hm-niemand { font-size: 12.5px; color: var(--text-muted); font-style: italic; }
.hm-zuweisen {
  display: block; margin-top: 4px; border: 1px solid #cfdff2; background: #f4f8fd;
  color: var(--text-primary, #1d2c49); border-radius: 8px; padding: 5px 11px;
  font-size: 12px; font-weight: 700; font-family: inherit; cursor: pointer;
}
.hm-person { display: flex; gap: 7px; align-items: center; }
.hm-kreis {
  width: 26px; height: 26px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; font-size: 9.5px; font-weight: 800;
  color: #fff; flex: none;
}
.hm-kreis-gross { width: 34px; height: 34px; font-size: 11px; }
.hm-person b { font-size: 12.5px; display: block; }
.hm-person em {
  font-style: normal; font-size: 10.5px; color: var(--text-muted); display: block;
}

.hm-tat { text-align: right; white-space: nowrap; }
.hm-marke {
  display: inline-block; border-radius: 999px; padding: 2px 10px;
  font-size: 11px; font-weight: 800; white-space: nowrap;
}
.hm-m-dringend { background: #fdeceb; color: #8a2b21; }
.hm-m-bald { background: #fdf5e0; color: #7a5a00; }
.hm-m-warten { background: #f2efe6; color: #55534c; }
.hm-m-arbeit { background: #eef4fb; color: #1d4e89; }
.hm-m-fertig { background: #eaf6f0; color: #12764f; }
/* Eine beauftragte Firma bekommt eine eigene Farbe: „beauftragt und wartet
   auf Termin" ist etwas anderes als „Jörg macht es morgen". */
.hm-m-firma { background: #f4eefb; color: #5b2d8a; }

/* --- Das Detailfenster --------------------------------------------------- */
.hm-detail-fotos { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.hm-detail-text { font-size: 14.5px; line-height: 1.6; color: var(--text-primary); margin: 0 0 16px; }
.hm-abschnitt {
  font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted); margin: 0 0 9px;
}
.hm-zuweisung {
  background: var(--surface-2, #faf8f2); border: 1px solid var(--border, #eceadf);
  border-radius: 13px; padding: 14px 16px; margin-bottom: 16px;
}
.hm-zstufen { display: flex; gap: 8px; margin-bottom: 11px; }
.hm-zw {
  flex: 1; border: 1px solid var(--border, #e0ddd2); border-radius: 10px; background: #fff;
  padding: 9px 12px; font-size: 12.5px; color: var(--text-secondary, #55534c);
  text-align: center; font-family: inherit; cursor: pointer;
}
.hm-zw.an { background: var(--text-primary, #1d2c49); border-color: var(--text-primary, #1d2c49); color: #fff; }
.hm-zwahl {
  width: 100%; border: 1px solid var(--border, #e0ddd2); border-radius: 9px;
  padding: 9px 12px; font-size: 13px; background: #fff; font-family: inherit;
}
.hm-zpaar { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 9px; }
.hm-zfeld { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; color: var(--text-muted); }
.hm-zfeld input {
  border: 1px solid var(--border, #e0ddd2); border-radius: 9px; padding: 8px 11px;
  font-size: 13px; background: #fff; font-family: inherit;
}
.hm-firmenkasten {
  margin-top: 10px; background: #f9f4fd; border: 1px solid #e0d0f0; border-radius: 11px;
  padding: 11px 13px; font-size: 12.5px; color: #4a2472; line-height: 1.55;
}
.hm-firmenkasten b { color: #3d1c60; }

/* Der Verlauf schreibt sich von selbst mit - Wilhelm: „dort soll die
   dokummentation sichtbar werden und von wenn die dokumentation stamm." */
.hm-verlauf { border-left: 2px solid var(--border, #eceadf); padding-left: 15px; margin: 0 0 14px 5px; }
.hm-v { position: relative; padding: 0 0 13px; font-size: 12.5px; line-height: 1.5; }
.hm-v:last-child { padding-bottom: 0; }
.hm-v::before {
  content: ""; position: absolute; left: -20px; top: 5px; width: 8px; height: 8px;
  border-radius: 50%; background: #c8c5bb;
}
.hm-v.jetzt::before { background: var(--text-primary, #1d2c49); }
.hm-v b { display: block; color: var(--text-primary, #1d2c49); font-size: 13px; }
.hm-v em { font-style: normal; color: var(--text-muted); font-size: 11.5px; }

.hm-notizzeile { display: flex; gap: 8px; margin-top: 4px; }
.hm-notizzeile input {
  flex: 1; border: 1px solid var(--border, #e0ddd2); border-radius: 9px;
  padding: 8px 11px; font-size: 13px; font-family: inherit;
}

/* --- Handwerker verwalten ------------------------------------------------ */
.hm-hz {
  display: flex; gap: 12px; align-items: center; padding: 11px 0;
  border-top: 1px solid #f2f0e8;
}
.hm-hz:first-child { border-top: none; }
.hm-hz > span:nth-child(2) { flex: 1; }
.hm-hz b { display: block; font-size: 14px; color: var(--text-primary, #1d2c49); }
.hm-hz em { display: block; font-style: normal; font-size: 12px; color: var(--text-secondary); }
.hm-nfzeile { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 9px; }
.hm-nfzeile input, .hm-nfzeile select, .hm-nfzeile textarea {
  width: 100%; border: 1px solid var(--border, #e0ddd2); border-radius: 9px;
  padding: 9px 12px; font-size: 13px; font-family: inherit; background: #fff;
}
.hm-feld { display: flex; flex-direction: column; gap: 4px; }
.hm-feld > span { font-size: 11.5px; color: var(--text-muted); }
.hm-gewerke { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 4px 0 12px; }
.hm-gw { font-size: 12.5px; color: var(--text-secondary); display: inline-flex; gap: 5px; align-items: center; }

/* --- Die eigene Rückfrage statt window.confirm (v190) -------------------- */
.modal-untertitel { margin: -6px 0 14px; font-size: 13px; color: var(--text-muted); }
.modal-untertitel.hidden { display: none; }
.frage-folgen { margin-bottom: 4px; }
.frage-folge {
  display: flex; gap: 9px; align-items: flex-start; padding: 8px 0; font-size: 13px;
  color: var(--text-secondary, #55534c); line-height: 1.5;
}
.frage-zeichen { flex: none; width: 18px; text-align: center; }
.frage-folge b { color: var(--text-primary, #1d2c49); }

/* Die Marke an einer Reinigung, aus der ein Mangel gemeldet wurde. */
.rn-maengel-marke {
  display: inline-block; margin-top: 5px; background: #fdf5e0; border: 1px solid #e8d49a;
  color: #7a5a00; border-radius: 999px; padding: 2px 10px; font-size: 11px;
  font-weight: 800; cursor: pointer; font-family: inherit;
}

/* Das Zurückholen steht seit v189 direkt in der Zeile - vorher lag es zwei
   Klicks tief im Ansehen-Fenster und wurde deshalb nicht gefunden. */
.rn-zurueckholen-btn { border-color: #cfdff2; background: #f4f8fd; color: #1d2c49; }

/* Mängel melden auf dem Handy (v189) - dieselbe große, mit einem Daumen
   bedienbare Sprache wie der Rest der Reinigungsansicht. */
.rd-feldname { font-size: 13px; color: var(--text-muted, #8b8880); margin: 16px 4px 6px; }
.rd-chips { display: flex; gap: 7px; flex-wrap: wrap; }
.rd-chip {
  border: 1px solid #e0ddd2; border-radius: 999px; padding: 9px 15px;
  font-size: 14px; background: #fff; color: #55534c; font-family: inherit; cursor: pointer;
}
.rd-chip.an { background: #1d2c49; border-color: #1d2c49; color: #fff; }
.rd-textfeld {
  width: 100%; box-sizing: border-box; border: 1px solid #e0ddd2; border-radius: 12px;
  padding: 12px 14px; font-size: 15px; font-family: inherit; color: #2f2d28;
}
.rd-mangel-fotos { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.rd-mangel-foto {
  position: relative; width: 74px; height: 74px; border-radius: 12px;
  border: 1px solid #ddd8c8; background: #e9e5d8 center/cover no-repeat; display: block;
}
.rd-mangel-foto-leer {
  display: flex; align-items: center; justify-content: center; background: #fff;
  border-style: dashed; font-size: 11px; color: #a5a196; text-align: center; padding: 4px;
}
.rd-mangel-foto-weg {
  position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%;
  border: none; background: #b0392f; color: #fff; font-size: 14px; line-height: 1; cursor: pointer;
}
.rd-fotoknopf {
  display: block; text-align: center; border: 1px dashed #d0ccc0; border-radius: 12px;
  padding: 12px; font-size: 14px; color: #55534c; margin-bottom: 16px; cursor: pointer;
}
.rd-knopf-dunkel { background: #1d2c49; color: #fff; }
.rd-mangel-hinweis { font-size: 13px; color: #6b675c; text-align: center; margin: 10px 0 0; }
.rd-wahl-ja { border-color: #e8d49a; background: #fdf5e0; }
.rd-erfasst {
  background: #f6fdf9; border: 1px solid #b9e2ce; border-radius: 13px;
  padding: 12px 14px; margin-bottom: 14px;
}
.rd-erfasst-zeile { padding: 6px 0; border-top: 1px solid #d7ecdf; }
.rd-erfasst-zeile:first-child { border-top: none; }
.rd-erfasst-zeile b { display: block; font-size: 14.5px; color: #0f5c37; }
.rd-erfasst-zeile em { font-style: normal; font-size: 12.5px; color: #14663f; }
.rd-erfasst-weg {
  display: block; background: none; border: none; padding: 4px 0 0; font-size: 12.5px;
  color: #14663f; text-decoration: underline; font-family: inherit; cursor: pointer;
}
.rd-erfasst-fuss { font-size: 12.5px; color: #14663f; margin: 8px 0 0; }
.rd-knopf-linie { background: #fff; border: 1px solid #e8d49a; color: #7a5a00; }

/* Kurz hervorheben, wenn aus dem Mangel-Fenster zur Reinigung gesprungen
   wird (v190) - sonst sucht man in einer langen Liste die eine Zeile. */
.rn-hervor {
  outline: 2px solid #1d2c49; outline-offset: 2px; border-radius: 12px;
  transition: outline-color .4s ease;
}

/* ===========================================================================
   Mitarbeiterseite: „schon vergeben" (v192)

   Wilhelm: „In dem Moment, wo jeder Mitarbeiter die Aufgabe angenommen hat,
   soll dort schon die Möglichkeit nicht mehr geboten werden, diese Aufgabe
   anzunehmen und es soll schon etwas grau dargestellt sein, Aufgabe bereits
   von Sejla in Arbeit."

   Grau, aber lesbar: Der Name der Person, die daran arbeitet, ist genau das,
   was eine zweite Kraft davon abhält, dieselbe Wohnung zu putzen - und was
   ihr sagt, wen sie anrufen kann.
   =========================================================================== */

.ma-karte.vergeben { background: #f7f5ef; border-color: #eceae2; }
.ma-karte.vergeben .ma-titel { color: var(--text-tertiary, #8b8880); }
.ma-karte.vergeben .ma-notiz, .ma-karte.vergeben .ma-zeit { color: #a5a196; }
.ma-karte.vergeben .ma-streif { opacity: .35; }

.ma-belegt {
  display: flex; gap: 8px; align-items: center; margin-top: 8px;
  background: #efece3; border-radius: 9px; padding: 7px 10px;
}
.ma-belegt.gruen { background: rgba(27,175,122,.12); }
.ma-belegt.gruen span { color: #0b6b45; }
.ma-belegt > span:last-child {
  font-size: 11.5px; color: var(--text-secondary, #6b675c); line-height: 1.4;
}
.ma-belegt b { color: var(--text-primary, #55534c); }
.ma-belegt-kreis {
  width: 22px; height: 22px; border-radius: 50%; display: inline-flex; flex: none;
  align-items: center; justify-content: center; font-size: 8.5px; font-weight: 800;
  color: #fff;
}

.ma-m-grau { background: #e7e3d8; color: #8b8880; }
/* Teamaufgabe: sonst sieht eine Aufgabe an vier Leute aus wie eine an einen,
   und jeder fragt sich, ob er gemeint ist. */
.ma-m-team { background: rgba(237,161,0,.14); color: #6b5200; }
.ma-pfeil.aus { color: #b3afa3; }

.ma-vergeben { margin-top: 20px; }
.ma-vergeben > summary {
  cursor: pointer; font-size: 11px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-tertiary, #8b8880);
  padding: 9px 2px; list-style: none;
}
.ma-vergeben > summary::-webkit-details-marker { display: none; }
.ma-vergeben > summary::before { content: "▸ "; }
.ma-vergeben[open] > summary::before { content: "▾ "; }

/* Die Zählzeile über der Reinigungsliste: bei elf Reinigungen ist „wie viele
   sind noch frei" die eigentliche Frage. */
.ma-zaehlzeile {
  display: flex; gap: 8px; background: #fff; border: 1px solid var(--border, #e9e6dc);
  border-radius: 12px; padding: 9px 12px; margin-bottom: 4px;
}
.ma-zz { flex: 1; text-align: center; }
.ma-zz b { display: block; font-size: 17px; color: var(--text-primary, #1d2c49); line-height: 1.1; }
.ma-zz span { font-size: 10px; color: var(--text-tertiary, #8b8880); }
.ma-zz.frei b { color: #b0392f; }
.ma-zz.meins b { color: #1d4e89; }
.ma-zz.weg b { color: #a5a196; }

/* Eine Aufgabe, die eine Kollegin schon erledigt hat (Aufgabenseite). */
.ad-gesperrt {
  background: rgba(27,175,122,.10); border: 1px solid rgba(27,175,122,.28);
  border-radius: 14px; padding: 14px 16px; margin-bottom: 14px;
}
.ad-gesperrt .zeile { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.ad-gesperrt h4 { margin: 0; font-size: 14.5px; color: #0b6b45; }
.ad-gesperrt p { margin: 0; font-size: 12.5px; color: #2f6f55; line-height: 1.55; }
.ad-gesperrt .kreis {
  width: 30px; height: 30px; border-radius: 50%; display: inline-flex; flex: none;
  align-items: center; justify-content: center; font-size: 10px; font-weight: 800; color: #fff;
}

/* Ein gesperrter Knopf: grau, aber sichtbar. Ein FEHLENDER Knopf wirkt wie
   ein Fehler; ein grauer mit Begründung darüber erklärt sich selbst (v192). */
.rd-knopf-aus {
  background: #efece3; color: #b3afa3; cursor: not-allowed;
}

/* Wer hat die Aufgabe erledigt (v192) – auf Wilhelms Seite unter dem
   Status-Etikett. */
.todo-macher {
  display: flex; gap: 6px; align-items: center; margin-top: 6px;
}
.todo-macher-text {
  font-size: 11.5px; color: var(--text-secondary, #55534c); line-height: 1.35;
}
.todo-macher-text b { color: var(--text-primary, #1d2c49); display: block; }
.todo-macher-text em {
  font-style: normal; color: var(--text-tertiary, #8b8880); font-size: 11px;
}
/* Der Ring um die Person, die gedrückt hat – die anderen treten zurück. */
.todo-kopf-ring.todo-ring-macher { box-shadow: 0 0 0 2px #1baf7a; border-radius: 50%; }
.todo-kopf-ring.blass { opacity: .38; }

/* ===========================================================================
   Die Tagesansicht unter „Demnächst" und der Belegungskalender (v193)
   =========================================================================== */

.ma-tag .ma-tagzahlen { float: right; display: flex; gap: 5px; }
.ma-tz { border-radius: 999px; padding: 2px 9px; font-size: 10.5px; font-weight: 800; }
.ma-tz-an { background: rgba(27,175,122,.14); color: #0b6b45; }
.ma-tz-ab { background: #fdeceb; color: #8a2b21; }
.ma-tz-frei { background: rgba(42,120,214,.12); color: #124a86; }

.ma-tzeile {
  display: flex; gap: 10px; align-items: stretch; background: #fff;
  border: 1px solid var(--border, #e9e6dc); border-radius: 12px;
  padding: 10px 12px; margin-bottom: 7px; text-decoration: none;
}
.ma-tzeile.vergeben { background: #f7f5ef; }
.ma-tstreif { width: 4px; border-radius: 2px; flex: none; background: #c8c5bb; }
.ma-tstreif.an { background: #1baf7a; }
.ma-tstreif.ab { background: #b0392f; }
.ma-tstreif.wechsel { background: linear-gradient(#b0392f 50%, #1baf7a 50%); }
.ma-tin { flex: 1; min-width: 0; }
.ma-toben { display: flex; align-items: baseline; gap: 8px; }
.ma-tobj { font-size: 13.5px; font-weight: 800; color: var(--text-primary, #1d2c49); }
.ma-tzeit {
  margin-left: auto; font-size: 11.5px; color: var(--text-tertiary, #8b8880);
  white-space: nowrap;
}
.ma-tgast {
  display: block; font-size: 12.5px; color: var(--text-secondary, #55534c);
  margin-top: 3px; line-height: 1.45;
}
.ma-tgast b { color: var(--text-primary, #1d2c49); }
.ma-pf { font-weight: 800; }
.ma-pf.ab { color: #b0392f; }
.ma-pf.an { color: #12764f; }
.ma-tmarken { display: flex; gap: 4px; margin-top: 6px; align-items: center; flex-wrap: wrap; }
.ma-tklein { font-size: 11.5px; color: var(--text-secondary, #6b675c); }
.ma-mk {
  width: 19px; height: 19px; border-radius: 5px; display: inline-flex; flex: none;
  align-items: center; justify-content: center; font-size: 10.5px; font-weight: 800; color: #fff;
}
.ma-mk.p { background: #2f6bb5; } .ma-mk.l { background: #b0392f; } .ma-mk.e { background: #a67c00; }
.ma-taufgabe {
  display: block; background: #fbfaf6; border: 1px dashed #e5e1d4; border-radius: 12px;
  padding: 9px 12px; margin-bottom: 7px; font-size: 12.5px;
  color: var(--text-secondary, #6b675c); text-decoration: none;
}
.ma-taufgabe b { color: var(--text-primary, #1d2c49); }
.ma-taufgabe.vergeben { opacity: .6; }

/* --- Der Kalender ------------------------------------------------------- */
.ma-ksteuer { display: flex; gap: 6px; align-items: center; margin-bottom: 9px; }
.ma-kpfeil {
  border: 1px solid var(--border, #e0ddd2); background: #fff; border-radius: 8px;
  padding: 4px 12px; font-size: 15px; color: var(--text-secondary, #55534c); font-family: inherit;
}
.ma-kmonat { font-size: 12.5px; font-weight: 800; color: var(--text-primary, #1d2c49); }
.ma-kheute {
  margin-left: auto; border: 1px solid #cfdff2; background: #f4f8fd;
  color: var(--text-primary, #1d2c49); border-radius: 8px; padding: 5px 12px;
  font-size: 11.5px; font-weight: 700; font-family: inherit;
}
.ma-kal { background: #fff; border: 1px solid var(--border, #e9e6dc); border-radius: 12px; overflow: hidden; }
.ma-krolle { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ma-kgitter { display: grid; }
.ma-kz { border-bottom: 1px solid #f2f0e8; border-right: 1px solid #f5f3ec; }
.ma-kkopf { padding: 6px 0 5px; text-align: center; background: #faf8f2; border-bottom: 1px solid #eceadf; }
.ma-kkopf b {
  display: block; font-size: 10px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-tertiary, #a5a196);
}
.ma-kkopf em {
  display: block; font-style: normal; font-size: 13px; font-weight: 800;
  color: var(--text-primary, #1d2c49);
}
.ma-kkopf.heute { background: var(--text-primary, #1d2c49); }
.ma-kkopf.heute b, .ma-kkopf.heute em { color: #fff; }
.ma-kkopf.we { background: #f4f2ea; }
/* Die Wohnungsspalte bleibt beim seitlichen Schieben stehen. */
.ma-kobjkopf, .ma-kobj { position: sticky; left: 0; z-index: 3; }
.ma-kobj {
  padding: 8px 9px; font-size: 11.5px; font-weight: 700; color: var(--text-primary, #1d2c49);
  background: #fbfaf6; border-right: 1px solid #eceadf; display: flex; align-items: center;
  line-height: 1.25;
}
.ma-kreihe { position: relative; display: grid; grid-template-columns: inherit; }
.ma-kreihe { grid-auto-flow: column; grid-auto-columns: 58px; }
.ma-kzelle { height: 42px; }
.ma-kzelle.we { background: #fbfaf5; }
.ma-kzelle.heute { background: #f4f8fd; }
.ma-kbalken { position: absolute; inset: 0; pointer-events: none; }
.ma-kbal {
  position: absolute; top: 6px; height: 30px; border-radius: 8px; color: #fff;
  display: flex; align-items: center; gap: 4px; padding: 0 6px; font-size: 11px;
  font-weight: 700; overflow: hidden; white-space: nowrap;
}
.ma-kpers {
  background: rgba(255,255,255,.26); border-radius: 5px; padding: 1px 5px;
  font-size: 10px; font-weight: 800; flex: none;
}
.ma-knam { overflow: hidden; text-overflow: ellipsis; }
.ma-kmk {
  background: rgba(255,255,255,.92); border-radius: 4px; width: 15px; height: 15px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 800; flex: none;
}
.ma-kmk.p { color: #2f6bb5; } .ma-kmk.l { color: #b0392f; } .ma-kmk.e { color: #a67c00; }
.ma-klegende {
  background: #fff; border: 1px solid var(--border, #e9e6dc); border-radius: 12px;
  padding: 11px 13px; margin-top: 12px;
}
.ma-klegende h4 {
  margin: 0 0 8px; font-size: 10.5px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-tertiary, #a5a196);
}
.ma-lz {
  display: flex; gap: 8px; align-items: center; font-size: 12px;
  color: var(--text-secondary, #55534c); padding: 3px 0;
}
.ma-lz .ma-kmk { color: #fff; }
.ma-lz .ma-kmk.p { background: #2f6bb5; }
.ma-lz .ma-kmk.l { background: #b0392f; }
.ma-lz .ma-kmk.e { background: #a67c00; }
.ma-lz .ma-kmk.pers { background: #55534c; font-size: 8.5px; }
.ma-khinweis {
  margin: 9px 0 0; font-size: 11.5px; color: var(--text-tertiary, #8b8880); line-height: 1.5;
}

/* --- „Wer raus, wer rein" auf der Reinigungsseite ------------------------ */
.rd-wechsel.hidden { display: none; }
.rd-wechselliste { display: flex; flex-direction: column; }
.rd-wz { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; }
.rd-wz + .rd-wz { border-top: 1px dashed #eceadf; }
.rd-wpfeil {
  width: 30px; height: 30px; border-radius: 9px; flex: none; display: inline-flex;
  align-items: center; justify-content: center; font-size: 15px; font-weight: 800; color: #fff;
}
.rd-wpfeil.raus { background: #b0392f; }
.rd-wpfeil.rein { background: #1baf7a; }
.rd-wtext { flex: 1; min-width: 0; }
.rd-woben { display: flex; align-items: baseline; gap: 8px; }
.rd-woben b { font-size: 14px; color: var(--text-primary, #1d2c49); }
.rd-wuhr {
  margin-left: auto; font-size: 12px; font-weight: 800;
  color: var(--text-secondary, #55534c); white-space: nowrap;
}
.rd-wtext em {
  display: block; font-style: normal; font-size: 12.5px;
  color: var(--text-secondary, #6b675c); margin-top: 3px; line-height: 1.45;
}
.rd-wbetten {
  display: inline-flex; align-items: center; gap: 5px; background: #f2efe6;
  border-radius: 7px; padding: 2px 8px; font-size: 12px; font-weight: 800;
  color: var(--text-secondary, #55534c); margin-top: 6px;
}
.rd-wbetten.rein { background: rgba(27,175,122,.14); color: #0b6b45; }
.rd-wmeldung {
  display: flex; gap: 9px; align-items: flex-start; background: #fdf5e0;
  border: 1px solid #e8d49a; border-radius: 11px; padding: 10px 12px; margin-top: 10px;
}
.rd-wmeldung .z { font-size: 16px; flex: none; }
.rd-wmeldung span:last-child { font-size: 12.5px; color: #6b4e00; line-height: 1.5; }
.rd-wmeldung.gruen { background: rgba(27,175,122,.10); border-color: rgba(27,175,122,.3); }
.rd-wmeldung.gruen span:last-child { color: #0b6b45; }
.rd-wmk {
  display: inline-flex; align-items: center; justify-content: center; width: 19px;
  height: 19px; border-radius: 5px; font-size: 10.5px; font-weight: 800; color: #fff;
  vertical-align: -4px;
}
.rd-wmk.l { background: #b0392f; } .rd-wmk.e { background: #a67c00; } .rd-wmk.p { background: #2f6bb5; }

/* Die zwei weiteren Meldungen auf der Reinigungsseite (v195). Jede Sorte
   ihre Farbe: Hausmeister gelb wie bisher, Fundsache blau, Extrareinigung
   violett - sie gehen im Büro an verschiedene Leute. */
.rd-knopf-blaulinie { background: #fff; border: 1px solid #cfdff2; color: #1d4e89; }
.rd-knopf-lilalinie { background: #fff; border: 1px solid #e0d0f0; color: #5b2d8a; }
.rd-gastkasten {
  background: #f4f8fd; border: 1px solid #d9e6f5; border-radius: 11px;
  padding: 10px 12px; font-size: 12.5px; color: #1d4e89; line-height: 1.5;
  margin: 12px 0;
}
.rd-gastkasten b { color: #123a66; }
.rd-gastkasten.hidden { display: none; }

/* ===========================================================================
   Die drei Unterrubriken unter „Meldungen" (v195)

   Wilhelm: „unter der Kategorie Meldungen hätten wir die Unterkategorie
   Hausmeister, vergessene Gegenstände, Extrareinigung." Jede Sorte hat ihre
   Farbe, weil sie im Büro an verschiedene Leute geht.
   =========================================================================== */
.hm-sortenzeile { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.hm-ur {
  border: 1px solid var(--border, #e0ddd2); border-radius: 11px; background: #fff;
  padding: 10px 16px; font-size: 13px; font-weight: 700;
  color: var(--text-secondary, #55534c); display: flex; gap: 8px; align-items: center;
  font-family: inherit; cursor: pointer;
}
.hm-ur .z {
  background: #f2efe6; color: var(--text-secondary, #55534c); border-radius: 999px;
  padding: 1px 8px; font-size: 11px; font-weight: 800;
}
.hm-ur.an-hm { background: #fdf5e0; border-color: #e8d49a; color: #7a5a00; }
.hm-ur.an-hm .z { background: #7a5a00; color: #fff; }
.hm-ur.an-fund { background: #f4f8fd; border-color: #cfdff2; color: #1d4e89; }
.hm-ur.an-fund .z { background: #1d4e89; color: #fff; }
.hm-ur.an-extra { background: #f9f4fd; border-color: #e0d0f0; color: #5b2d8a; }
.hm-ur.an-extra .z { background: #5b2d8a; color: #fff; }

.hm-kpi.blau b { color: #1d4e89; }

/* Der Gast an einer Fundsache oder Extrareinigung. */
.hm-gastkasten {
  background: #f4f8fd; border: 1px solid #d9e6f5; border-radius: 12px;
  padding: 12px 14px; margin-bottom: 16px;
}
.hm-gastkasten b { font-size: 14.5px; color: #123a66; }
.hm-gastkasten em {
  font-style: normal; font-size: 12px; color: #1d4e89; display: block; margin-top: 2px;
}
.hm-staende { flex-wrap: wrap; }
.hm-staende .hm-zw { flex: 0 1 auto; }

/* Geschätzt gegen gemessen - die Zahl, die zählt, wenn ein Gast widerspricht. */
.hm-extrakasten {
  background: #f9f4fd; border: 1px solid #e0d0f0; border-radius: 13px;
  padding: 14px 16px; margin-bottom: 16px;
}
.hm-extrakasten .hm-abschnitt { color: #8a6ab0; }
.hm-zpaar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hm-zk { background: #fff; border: 1px solid #e6dcf2; border-radius: 10px; padding: 10px 12px; }
.hm-zk span { display: block; font-size: 11px; color: var(--text-tertiary, #8b8880); }
.hm-zk b { font-size: 18px; color: #3d1c60; }
.hm-zk em { font-style: normal; font-size: 11.5px; color: var(--text-secondary, #6b675c); }
.hm-betragzeile { display: flex; gap: 10px; align-items: center; }
.hm-betragfeld {
  border: 1px solid #e0d0f0; border-radius: 10px; padding: 9px 12px; font-size: 15px;
  font-weight: 800; color: #3d1c60; background: #fff; width: 120px; font-family: inherit;
}
.hm-vorschlag { font-size: 12px; color: #6b4e8a; }
.hm-entschieden {
  margin: 10px 0 0; font-size: 13px; font-weight: 800; color: #3d1c60;
}
.hm-lila { background: #5b2d8a; border-color: #5b2d8a; color: #fff; }
.hm-zeit { font-size: 12.5px; }
.hm-zeit b { color: #5b2d8a; }
.hm-zeit em {
  display: block; font-style: normal; font-size: 11.5px;
  color: var(--text-tertiary, #8b8880);
}

/* ===========================================================================
   Das Tagesprotokoll (v196)

   Wilhelm: „dort soll ein einfaches Protokoll ersichtlich sein wo ihre
   reinigungen aufgelistet sind, die mängel etc. … als Text kann sie es
   kopieren (für whatsup versand)."

   Auf dem Handy ist das Protokoll eine ganze Seite, kein Fenster. Die Zeilen
   sind Eingabefelder, die wie Text aussehen: antippen, ändern, fertig - ohne
   einen eigenen Bearbeiten-Modus.
   =========================================================================== */
.ma-protbtn {
  display: block; width: 100%; margin: 0 0 14px; padding: 14px 16px;
  border: none; border-radius: 14px; background: var(--navy, #1d2c49);
  color: #fff; font-family: inherit; font-size: 15px; font-weight: 800;
  cursor: pointer;
}
.ma-protbtn + .ma-protbtn { margin-top: 10px; }
.ma-protbtn.hell {
  background: #fff; color: var(--text-primary, #1a2233);
  border: 1px solid var(--gridline, #e8e3d6);
}
.ma-protbtn.gruen { background: #1baf7a; }
.ma-protbtn:disabled { opacity: .6; }

.ma-prot { padding: 4px 0 40px; }
.ma-pkasten {
  background: #fff; border: 1px solid var(--gridline, #e8e3d6); border-radius: 16px;
  padding: 14px 16px 12px; margin-bottom: 16px;
}
.ma-pkopf {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px;
  padding-bottom: 8px; border-bottom: 1px solid #f0ece1;
}
.ma-pkopf span {
  font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-muted, #8b8c95);
}
.ma-pkopf em {
  margin-left: auto; font-style: normal; font-size: 11.5px; font-weight: 700;
  color: var(--series-1, #2a78d6);
}
.ma-pgruppe + .ma-pgruppe { margin-top: 14px; }
.ma-phaus {
  display: block; font-size: 15px; font-weight: 800; margin-bottom: 4px;
  color: var(--text-primary, #1a2233);
}
.ma-pzeile { display: flex; align-items: center; gap: 6px; }
.ma-pfeld {
  flex: 1; border: 1px solid transparent; border-radius: 8px;
  padding: 5px 7px; margin: 0; background: transparent; font-family: inherit;
  font-size: 14.5px; color: var(--text-primary, #1a2233); min-width: 0;
}
.ma-pfeld:hover { background: #faf8f2; }
.ma-pfeld:focus {
  outline: none; background: #fff; border-color: var(--series-1, #2a78d6);
}
.ma-phaken { font-size: 14px; }
.ma-pmeld { display: flex; align-items: center; gap: 4px; padding-left: 18px; }
.ma-ppfeil { color: var(--text-muted, #8b8c95); font-size: 13px; }
.ma-psym { font-size: 13px; }
.ma-pmeld .ma-pfeld { font-size: 13.5px; }
.ma-pmeld.mangel .ma-pfeld { color: #8a5a00; }
.ma-pmeld.fundsache .ma-pfeld { color: #1d5db0; }
.ma-pmeld.extra .ma-pfeld { color: #5b2d8a; }
.ma-pfuss {
  margin-top: 12px; padding-top: 10px; border-top: 1px solid #f0ece1;
  font-size: 13.5px; color: var(--text-secondary, #4c5568);
}
.ma-pfuss em {
  display: block; font-style: normal; font-size: 12px; margin-top: 2px;
  color: var(--text-muted, #8b8c95);
}
.ma-pfrage {
  margin: 0 0 6px; font-size: 11px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-muted, #8b8c95);
}
.ma-pzusatz {
  width: 100%; box-sizing: border-box; border: 1px solid var(--gridline, #e8e3d6);
  border-radius: 12px; padding: 11px 13px; font-family: inherit; font-size: 14.5px;
  margin-bottom: 14px; background: #fff; color: var(--text-primary, #1a2233);
}
/* Reiner Text, genau so, wie er in der WhatsApp-Gruppe ankommt. */
.ma-ptext {
  white-space: pre-wrap; word-break: break-word; background: #e7f7dd;
  border: 1px solid #cbe9b8; border-radius: 14px; padding: 14px 16px;
  font-family: inherit; font-size: 14.5px; line-height: 1.55;
  color: #17331a; margin: 0 0 14px;
}

/* --- Die Protokolle am Tageskopf im Büro ---------------------------------- */
.rn-protokolle {
  background: #fbfaf6; border: 1px solid var(--gridline, #e8e3d6);
  border-radius: 12px; padding: 8px 12px 6px; margin: 6px 0 10px;
}
.rn-pr-kopf {
  font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-muted, #8b8c95); margin-bottom: 4px;
}
.rn-pr-zeile {
  display: flex; align-items: flex-start; gap: 10px; padding: 7px 4px;
  border-top: 1px solid #f0ece1;
}
.rn-pr-zeile:first-of-type { border-top: none; }
.rn-pr-zeile.klickbar { cursor: pointer; border-radius: 8px; }
.rn-pr-zeile.klickbar:hover { background: #f4f1e8; }
.rn-pr-text { flex: 1; min-width: 0; }
.rn-pr-text b { display: block; font-size: 13.5px; }
.rn-pr-text em {
  display: block; font-style: normal; font-size: 11.5px;
  color: var(--text-muted, #8b8c95);
}
.rn-pr-zusatz {
  display: block; font-size: 12px; color: var(--text-secondary, #4c5568);
  margin-top: 2px;
}
.rn-pr-marke {
  font-size: 10.5px; font-weight: 800; border-radius: 7px; padding: 3px 8px;
  white-space: nowrap;
}
.rn-pr-marke.neu { background: rgba(27,175,122,.16); color: #0b6b45; }
.rn-pr-marke.gelesen { background: #f1efe8; color: #6b675c; }
.rn-pr-marke.fehlt { background: rgba(208,59,59,.12); color: #8d2020; }
.pr-text {
  white-space: pre-wrap; word-break: break-word; background: #f7f5ef;
  border: 1px solid var(--gridline, #e8e3d6); border-radius: 12px;
  padding: 14px 16px; font-family: inherit; font-size: 14px; line-height: 1.55;
  margin: 0;
}

/* ===========================================================================
   Eine Buchung im Kalender aufziehen (v198)

   Wilhelm: „unsere gebaute kalenderform und ansicht bleibt bestehen."
   Deshalb steht hier NICHTS, was eine bestehende Kalenderklasse verändert -
   nur neue Elemente, die oben drauf liegen.
   =========================================================================== */
.nb-geist {
  position: absolute; top: 5px; height: 34px; border-radius: 9px;
  border: 2px dashed #1d5db0; background: rgba(42,120,214,.14);
  display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 800; color: #1d5db0;
  pointer-events: none; z-index: 6;
}
.nb-geist.gestoppt { border-color: #c0392b; background: rgba(208,59,59,.14); color: #8d2020; }
.nb-fahne {
  position: absolute; top: -32px; left: 50%; transform: translateX(-50%);
  background: var(--navy, #1d2c49); color: #fff; font-size: 12px; font-weight: 700;
  white-space: nowrap; border-radius: 8px; padding: 5px 10px;
  box-shadow: 0 4px 12px rgba(20,19,15,.22);
}
.nb-fahne.rot { background: #8d2020; }

/* Die kurze Frage direkt unter dem aufgezogenen Balken. */
.nb-frage {
  position: absolute; z-index: 60; width: 300px; background: #fff;
  border: 1px solid var(--gridline, #e8e3d6); border-radius: 14px;
  box-shadow: 0 14px 40px rgba(20,19,15,.22); padding: 13px 14px 12px;
}
.nb-frage h4 { margin: 0 0 2px; font-size: 14.5px; color: var(--navy, #1d2c49); }
.nb-frage p { margin: 0 0 11px; font-size: 12px; color: var(--text-muted, #8b8c95); }
.nb-wahl {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  border: 1.5px solid var(--gridline, #e8e3d6); border-radius: 11px; padding: 9px 11px;
  background: #fff; font-family: inherit; margin-bottom: 8px; cursor: pointer;
}
.nb-wahl:hover { border-color: var(--navy, #1d2c49); background: #f4f6fa; }
.nb-wahl .sym { font-size: 17px; }
.nb-wahl b { display: block; font-size: 13.5px; color: var(--navy, #1d2c49); }
.nb-wahl em { font-style: normal; font-size: 11px; color: var(--text-muted, #8b8c95); }
.nb-abbruch { text-align: center; font-size: 11.5px; color: var(--text-muted, #8b8c95);
              margin: 2px 0 0 !important; }

/* Die Maske selbst. */
.nb-box { max-width: 560px; }
.nb-test {
  background: #fff8e6; border: 1px solid #f0dfae; border-radius: 11px;
  padding: 10px 13px; font-size: 12.5px; color: #6b5410; margin-bottom: 16px; line-height: 1.5;
}
.nb-test b { color: #4a3b06; }
.nb-sorten { display: flex; gap: 10px; margin-bottom: 16px; }
.nb-sorte {
  flex: 1; border: 1.5px solid var(--gridline, #e8e3d6); border-radius: 13px;
  padding: 10px 12px; background: #fff; text-align: left; font-family: inherit; cursor: pointer;
}
.nb-sorte.an { border-color: var(--navy, #1d2c49); background: #f4f6fa;
               box-shadow: 0 0 0 3px rgba(29,44,73,.07); }
.nb-sorte.grau.an { border-color: #6b675c; background: #f6f4ee;
                    box-shadow: 0 0 0 3px rgba(107,103,92,.07); }
.nb-sorte b { display: block; font-size: 13.5px; color: var(--navy, #1d2c49); }
.nb-sorte em { font-style: normal; font-size: 11.5px; color: var(--text-muted, #8b8c95); }

.nb-feldname {
  font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-muted, #8b8c95); margin: 16px 0 6px;
}
.nb-feld {
  width: 100%; box-sizing: border-box; border: 1px solid var(--gridline, #e8e3d6);
  border-radius: 10px; padding: 9px 12px; font-size: 14.5px; font-family: inherit;
  background: #fff; color: var(--text-primary, #1a2233);
}
.nb-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.nb-klein { font-size: 11.5px; color: var(--text-muted, #8b8c95); margin: 5px 0 0; }

.nb-pruef { border-radius: 12px; padding: 12px 14px; margin-top: 14px;
            font-size: 13px; line-height: 1.55; }
.nb-pruef.frei { background: #eef8f1; border: 1px solid #cbe9d5; color: #14563a; }
.nb-pruef.warn { background: #fdf2f2; border: 1px solid #f3cfcf; color: #8d2020; }
.nb-pruef b { display: block; margin-bottom: 3px; font-size: 13.5px; }
.nb-pzeile { background: #fff; border-radius: 8px; padding: 7px 10px; margin-top: 7px;
             font-size: 12.5px; color: var(--text-secondary, #4c5568); }

/* Zusatzleistungen zum Ankreuzen. */
.nb-extras { display: grid; gap: 8px; }
.nb-extra {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  border: 1.5px solid var(--gridline, #e8e3d6); border-radius: 11px; padding: 9px 11px;
  background: #fff; font-family: inherit; cursor: pointer;
}
.nb-extra.an { border-color: #1baf7a; background: #f2fbf6; }
.nb-esym { font-size: 17px; }
.nb-etext { flex: 1; }
.nb-etext b { display: block; font-size: 13.5px; color: var(--navy, #1d2c49); }
.nb-etext em { font-style: normal; font-size: 11.5px; color: var(--text-muted, #8b8c95); }
.nb-ehaken { font-size: 15px; font-weight: 800; color: #1baf7a; width: 16px; }

.nb-vkopf {
  font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-muted, #8b8c95); margin: 16px 0 6px;
}
.nb-vkopf:first-child { margin-top: 0; }
.nb-vorschau { background: #f7f5ef; border: 1px solid var(--gridline, #e8e3d6);
               border-radius: 12px; padding: 10px 14px; }
.nb-vz { display: flex; gap: 10px; font-size: 13px; padding: 5px 0;
         border-top: 1px solid #ece8dc; }
.nb-vz:first-child { border-top: none; }
.nb-vz span { width: 150px; color: var(--text-muted, #8b8c95); flex: none; }
.nb-vz b { color: var(--text-primary, #1a2233); font-weight: 700; }
.nb-gruen { background: #1baf7a; border-color: #1baf7a; }
.nb-rumpf {
  white-space: pre-wrap; word-break: break-word; background: #f7f5ef;
  border: 1px solid var(--gridline, #e8e3d6); border-radius: 12px; padding: 14px 16px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px;
  line-height: 1.5; margin: 0 0 10px; max-height: 340px; overflow: auto;
}
.nb-erfolg { background: #eef8f1; border: 1px solid #cbe9d5; border-radius: 12px;
             padding: 14px 16px; font-size: 13.5px; color: #14563a; line-height: 1.6; }
.nb-erfolg b { display: block; font-size: 15px; margin-bottom: 4px; }
.nb-folge { background: #fff; border-radius: 9px; padding: 8px 11px; margin-top: 8px;
            font-size: 12.5px; color: var(--text-secondary, #4c5568); }

/* ===========================================================================
   Das Buchungstool für die eigene Homepage (v199, neu gestaltet in v213)

   Diese Seite steht auf Wilhelms Homepage, nicht im Büro. Deshalb eigene,
   ruhige Klassen (bt-*), die von der Verwaltung nichts erben - und eine
   Farbe, die er in den Einstellungen wählt (--bt-farbe).

   v213, nach Wilhelms Durchlauf: „nicht mit so vielen symbolen, das sah ein
   bisschen kindisch aus, macht das ein bisschen eleganter, professioneller."

   Die drei Regeln, nach denen hier alles umgestellt wurde:

     1. KEINE SYMBOLE. Was trägt, ist Schrift, Weißraum und eine einzige
        Farbe. Ein Piktogramm neben jedem Posten macht eine Rechnung nicht
        klarer, nur bunter.
     2. LINIEN STATT KACHELN. Radius 4 statt 16, Haarlinien statt Schatten.
        Eine Preisliste sieht so aus, ein Spielbrett anders.
     3. ZAHLEN RECHTS UND IN GLEICHER BREITE (font-variant-numeric:
        tabular-nums). Beträge, die untereinander stehen, müssen
        untereinander stehen.
   =========================================================================== */
.bt-body {
  margin: 0; background: #faf9f6; color: #1b1d1c;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased;
  --bt-linie: #e3e2dd;
  --bt-grau: #8a938f;
  --bt-grau-2: #55605b;
}
.bt-body.bt-einbau { background: transparent; }
.bt-seite { max-width: 1080px; margin: 0 auto; padding: 34px 22px 44px; }
/* Im Einbau sitzt die Strecke schon in Wilhelms Spalte - dann braucht sie
   weder eigenen Rand noch eigene Breite. */
.bt-einbau .bt-seite { padding: 4px 0 10px; max-width: none; }
.bt-kopf h1 { margin: 0 0 3px; font-size: 26px; font-weight: 600;
              letter-spacing: -.02em; color: #1b1d1c; }
.bt-kopf p { margin: 0 0 26px; font-size: 14.5px; color: var(--bt-grau-2); }
.bt-einbau .bt-kopf { display: none; }

/* --- Vier Schritte, leise ------------------------------------------------ */
.bt-schritte { display: flex; margin: 0 0 26px; border-top: 1px solid var(--bt-linie); }
.bt-sch {
  flex: 1; padding: 11px 2px 0; border-top: 2px solid transparent; margin-top: -1px;
  font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--bt-grau);
}
.bt-sch i { font-style: normal; margin-right: 6px; color: var(--bt-grau); }
.bt-sch.fertig { color: var(--bt-grau-2); border-top-color: var(--bt-linie); }
.bt-sch.an { color: #1b1d1c; font-weight: 600; border-top-color: var(--bt-farbe, #1f4b3f); }
.bt-sch.an i { color: var(--bt-farbe, #1f4b3f); }

/* --- Flächen ------------------------------------------------------------- */
.bt-karte { background: #fff; border: 1px solid var(--bt-linie); border-radius: 4px; }
.bt-spalten { display: grid; grid-template-columns: 1fr 320px; gap: 24px;
              align-items: start; }
.bt-kartenkopf { padding: 17px 18px 4px; }
.bt-kartenkopf h3 { margin: 0 0 2px; font-size: 16.5px; font-weight: 600; }
.bt-kartenkopf p { margin: 0; font-size: 12.5px; color: var(--bt-grau); }
.bt-kartenfuss { padding: 15px 18px; }
.bt-nebenspalte { padding: 18px; }

.bt-fehler {
  background: #fdf4f2; border: 1px solid #ecd2cb; color: #8d2020;
  border-radius: 4px; padding: 11px 14px; font-size: 13.5px; margin-bottom: 16px;
}
.bt-laedt, .bt-leer { color: var(--bt-grau); font-size: 14px; padding: 20px 2px; }
.bt-klein { font-size: 12.5px; color: var(--bt-grau); margin: 10px 0 0; line-height: 1.55; }
.bt-unterzeile { font-size: 12.5px; color: var(--bt-grau); margin: 9px 2px 0; }
.bt-abschnitt {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--bt-grau); margin: 0; padding: 16px 18px 8px;
}

/* --- Suchzeile: eine Zeile, keine gestapelten Kästen --------------------- */
.bt-suchzeile {
  display: grid; grid-template-columns: 1fr 1fr 120px 120px auto;
  border: 1px solid var(--bt-linie); border-radius: 4px; background: #fff;
  overflow: hidden;
}
.bt-suchzeile .bt-feld { margin: 0; padding: 9px 14px; border-right: 1px solid var(--bt-linie); }
.bt-suchzeile button {
  border: 0; background: var(--bt-farbe, #1f4b3f); color: #fff; font-family: inherit;
  font-size: 15px; padding: 0 26px; cursor: pointer;
}
.bt-suchzeile button:hover { filter: brightness(1.08); }

.bt-feld { display: block; }
.bt-feld span {
  display: block; font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--bt-grau); margin-bottom: 1px;
}
.bt-feld input {
  width: 100%; box-sizing: border-box; border: 0; padding: 0; background: transparent;
  font-size: 15px; font-family: inherit; color: #1b1d1c;
}
.bt-feld input:focus { outline: none; }
/* In den Formularen (Schritt 3) sitzen die Felder in Zellen mit Haarlinien -
   dieselbe Sprache wie die Suchzeile. */
.bt-zwei { display: grid; grid-template-columns: 1fr 1fr; }
.bt-zwei .bt-feld, .bt-feld.breit {
  padding: 10px 18px; border-bottom: 1px solid var(--bt-linie);
}
.bt-zwei .bt-feld + .bt-feld { border-left: 1px solid var(--bt-linie); }
.bt-feld input::placeholder { color: #b6bcb9; }

/* --- Knöpfe -------------------------------------------------------------- */
.bt-knopf {
  display: block; width: 100%; box-sizing: border-box; border: 1px solid var(--bt-farbe, #1f4b3f);
  border-radius: 4px; padding: 12px 18px; font-size: 15px; font-family: inherit;
  background: transparent; color: var(--bt-farbe, #1f4b3f); cursor: pointer;
  margin-top: 10px; text-align: center; text-decoration: none;
}
.bt-knopf.voll { background: var(--bt-farbe, #1f4b3f); color: #fff; }
.bt-knopf.leise { border-color: var(--bt-linie); color: var(--bt-grau-2); }
.bt-knopf:disabled { opacity: .45; cursor: default; }

/* --- Trefferliste: Zeilen mit Haarlinien -------------------------------- */
.bt-liste { margin-top: 18px; }
.bt-zeile {
  display: grid; grid-template-columns: 88px 1fr auto 130px; gap: 18px;
  align-items: center; padding: 15px 18px; background: #fff;
  border-bottom: 1px solid var(--bt-linie);
}
.bt-zeile:first-child { border-top: 1px solid var(--bt-linie); }
.bt-zeile.weg { opacity: .45; }
.bt-bild {
  aspect-ratio: 4 / 3; border-radius: 2px;
  background: linear-gradient(135deg, #eeebe4, #e2ded4);
}
.bt-wtext { min-width: 0; }
.bt-wtext b { display: block; font-size: 15.5px; font-weight: 600; }
.bt-wtext em { font-style: normal; font-size: 12.5px; color: var(--bt-grau); }
.bt-preis { text-align: right; font-variant-numeric: tabular-nums; }
.bt-preis b { display: block; font-size: 17px; font-weight: 600; }
.bt-preis em { font-style: normal; font-size: 12px; color: var(--bt-grau); }
.bt-waehlspalte { text-align: right; }
.bt-waehlen {
  border: 1px solid var(--bt-farbe, #1f4b3f); border-radius: 4px; padding: 8px 18px;
  font-size: 14px; font-family: inherit; background: transparent;
  color: var(--bt-farbe, #1f4b3f); cursor: pointer;
}
.bt-waehlen:hover { background: var(--bt-farbe, #1f4b3f); color: #fff; }
.bt-belegt {
  display: inline-block; border: 1px solid var(--bt-linie); border-radius: 4px;
  padding: 8px 18px; font-size: 14px; color: var(--bt-grau);
}

/* --- Die Uhr flüstert ---------------------------------------------------- */
.bt-uhr {
  font-size: 12.5px; color: var(--bt-grau-2); border-top: 1px solid var(--bt-linie);
  margin-top: 14px; padding-top: 12px;
}
.bt-uhr b { font-variant-numeric: tabular-nums; }
.bt-uhr.aus { color: #8d2020; }

/* --- Zusatzleistungen: eine Liste mit Kästchen -------------------------- */
.bt-extra {
  display: grid; grid-template-columns: 20px 1fr auto; gap: 14px; align-items: baseline;
  width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--bt-linie);
  padding: 12px 18px; background: #fff; font-family: inherit; font-size: 15px;
  color: inherit; cursor: pointer;
}
#bt-extras .bt-extra:first-child { border-top: 1px solid var(--bt-linie); }
.bt-kasten {
  width: 16px; height: 16px; border: 1px solid #b9c0bc; border-radius: 2px;
  position: relative; top: 3px; display: block;
}
.bt-extra.an .bt-kasten { background: var(--bt-farbe, #1f4b3f); border-color: var(--bt-farbe, #1f4b3f); }
.bt-extra.an .bt-kasten::after {
  content: ""; position: absolute; left: 5px; top: 1.5px; width: 4px; height: 9px;
  border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: rotate(43deg);
}
.bt-etext b { display: block; font-size: 15px; font-weight: 500; }
.bt-etext em { font-style: normal; font-size: 12.5px; color: var(--bt-grau); }
.bt-epreis { font-size: 15px; font-variant-numeric: tabular-nums; }

/* --- Zusammenfassung ----------------------------------------------------- */
.bt-summe-kopf { margin: 0 0 3px; font-size: 15.5px; font-weight: 600; }
.bt-summe-datum { margin: 0 0 14px; font-size: 12.5px; color: var(--bt-grau); }
.bt-sz {
  display: flex; justify-content: space-between; gap: 12px; font-size: 14px;
  padding: 5px 0; font-variant-numeric: tabular-nums;
}
.bt-sz.klein { color: var(--bt-grau-2); }
.bt-sz.gesamt {
  border-top: 1px solid var(--bt-linie); margin-top: 9px; padding-top: 11px;
  font-size: 16px; font-weight: 600;
}

/* --- Bezahlweg und Zustimmung ------------------------------------------- */
.bt-zahlwahl { display: flex; gap: 10px; flex-wrap: wrap; padding: 0 18px; }
.bt-zw {
  flex: 1; min-width: 140px; border: 1px solid var(--bt-linie); border-radius: 4px;
  padding: 11px 14px; font-size: 14px; font-family: inherit; background: #fff;
  color: #1b1d1c; cursor: pointer; text-align: left;
}
.bt-zw.an { border-color: var(--bt-farbe, #1f4b3f); background: rgba(31,75,63,.045); }
.bt-klein { padding: 0 18px; }
.bt-haken {
  display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start;
  font-size: 13px; color: var(--bt-grau-2); line-height: 1.55;
  padding: 14px 18px; border-top: 1px solid var(--bt-linie); margin-top: 14px;
}
.bt-haken input { margin: 3px 0 0; width: 16px; height: 16px; }
.bt-storno { font-size: 12.5px; color: var(--bt-grau-2); margin: 12px 0 0;
             border-top: 1px solid var(--bt-linie); padding-top: 12px; }

/* --- Fuß ----------------------------------------------------------------- */
.bt-fuss { font-size: 12.5px; color: var(--bt-grau); margin-top: 24px;
           display: flex; gap: 16px; flex-wrap: wrap; }
.bt-fuss a { color: var(--bt-grau); text-decoration: none;
             border-bottom: 1px solid var(--bt-linie); }

/* --- Die Abschlussseite -------------------------------------------------- */
.bt-ergebnis { background: #fff; border: 1px solid var(--bt-linie); border-radius: 4px;
               padding: 30px 28px 26px; text-align: left; }
.bt-ergebnis h1 { font-size: 22px; font-weight: 600; margin: 0 0 6px;
                  letter-spacing: -.01em; }
.bt-ergebnis p { font-size: 14.5px; color: var(--bt-grau-2); margin: 0 0 8px; line-height: 1.6; }
.bt-zeichen {
  display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: 10px; color: var(--bt-farbe, #1f4b3f); font-weight: 600;
}
.bt-ergebnis.schlecht .bt-zeichen { color: #8d2020; }
.bt-quittung { text-align: left; border-top: 1px solid var(--bt-linie); margin: 18px 0 0; }
.bt-qz { display: flex; justify-content: space-between; gap: 12px; font-size: 14px;
         padding: 9px 0; border-bottom: 1px solid var(--bt-linie);
         font-variant-numeric: tabular-nums; }
.bt-qz span { color: var(--bt-grau); flex: none; }
.bt-qz b { text-align: right; font-weight: 600; }

/* --- Handy --------------------------------------------------------------- */
@media (max-width: 760px) {
  .bt-spalten { grid-template-columns: 1fr; }
  .bt-suchzeile { grid-template-columns: 1fr 1fr; }
  .bt-suchzeile .bt-feld { border-bottom: 1px solid var(--bt-linie); }
  .bt-suchzeile .bt-feld:nth-child(even) { border-right: 0; }
  .bt-suchzeile button { grid-column: 1 / -1; padding: 13px; }
  .bt-zwei { grid-template-columns: 1fr; }
  .bt-zwei .bt-feld + .bt-feld { border-left: 0; }
  .bt-zeile { grid-template-columns: 56px 1fr; gap: 12px; }
  .bt-preis { grid-column: 2; text-align: left; }
  .bt-waehlspalte { grid-column: 1 / -1; text-align: left; }
  .bt-waehlen, .bt-belegt { display: block; width: 100%; text-align: center; }
  /* Vier Wörter nebeneinander passen hier nicht: der aktive Schritt tritt
     nach vorn, die übrigen bleiben als Zahl stehen. */
  .bt-schritte { white-space: nowrap; }
  .bt-sch { flex: 0 0 auto; padding-right: 16px; overflow: hidden; }
  .bt-sch .bt-wort { display: none; }
  .bt-sch.an { flex: 1 1 auto; }
  .bt-sch.an .bt-wort { display: inline; }
}

/* --- Einstellungen → Direkt buchen (v199) --------------------------------- */
.bt-wegzeile {
  display: flex; align-items: center; gap: 10px; padding: 9px 0;
  border-top: 1px solid #f4f1e8; cursor: pointer; font-size: 13.5px;
}
.bt-wegzeile:first-child { border-top: none; }
.bt-wegzeile input { width: 17px; height: 17px; flex: none; }
.bt-wtitel { font-weight: 700; color: var(--text-primary, #1a2233); min-width: 190px; }
.bt-whinweis { flex: 1; font-size: 12px; color: var(--text-muted, #8b8c95); }
.bt-wmarke {
  font-size: 10.5px; font-weight: 800; border-radius: 6px; padding: 2px 8px;
  background: #f1efe8; color: #8b8880;
}
.bt-wmarke.an { background: rgba(27,175,122,.16); color: #0b6b45; }
.bt-wmarke.warn { background: #fff4d6; color: #6b5410; }

.bt-uzeile {
  display: flex; align-items: center; gap: 12px; padding: 8px 0; flex-wrap: wrap;
  border-top: 1px solid #f4f1e8; font-size: 13.5px;
}
.bt-uzeile:first-child { border-top: none; }
.bt-uan { display: flex; align-items: center; gap: 6px; font-size: 12px;
          color: var(--text-muted, #8b8c95); }
.bt-uan input { width: 16px; height: 16px; }
.bt-uname { flex: 1; min-width: 180px; font-weight: 600; }
.bt-ufeld { display: flex; align-items: center; gap: 6px; font-size: 12px;
            color: var(--text-muted, #8b8c95); }
.bt-ufeld input {
  width: 78px; border: 1px solid var(--gridline, #e8e3d6); border-radius: 8px;
  padding: 6px 8px; font-size: 13px; font-family: inherit; text-align: right;
}

.bt-einbau { background: #f9f7f1; border: 1px solid var(--gridline, #e8e3d6);
             border-radius: 12px; padding: 12px 14px; }
.bt-elabel { font-size: 11px; font-weight: 800; letter-spacing: .06em;
             text-transform: uppercase; color: var(--text-muted, #8b8c95); margin: 0 0 6px; }
.bt-code {
  background: #fff; border: 1px solid var(--gridline, #e8e3d6); border-radius: 9px;
  padding: 10px 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; color: #4c5568; white-space: pre-wrap; word-break: break-all;
  margin: 0 0 12px;
}
.bt-vorgaenge { border: 1px solid var(--gridline, #e8e3d6); border-radius: 12px;
                overflow: hidden; }
.bt-vzeile { display: flex; align-items: center; gap: 11px; padding: 8px 12px;
             border-top: 1px solid #f4f1e8; font-size: 13px; }
.bt-vzeile:first-child { border-top: none; }
.bt-vstand {
  font-size: 10.5px; font-weight: 800; border-radius: 6px; padding: 2px 8px;
  background: #f1efe8; color: #6b675c; white-space: nowrap; min-width: 78px;
  text-align: center;
}
.bt-vzeile.gebucht .bt-vstand { background: rgba(27,175,122,.16); color: #0b6b45; }
.bt-vzeile.gescheitert .bt-vstand { background: rgba(208,59,59,.12); color: #8d2020; }
.bt-vzeile.bezahlt .bt-vstand { background: #fff4d6; color: #6b5410; }
.bt-vtext { flex: 1; min-width: 0; color: var(--text-secondary, #4c5568); }
.bt-vtext em { display: block; font-style: normal; font-size: 11.5px; color: #8d2020; }
.bt-vbetrag { font-weight: 700; white-space: nowrap; }

/* --- Stornieren (v200) ---------------------------------------------------- */
.cal-detail-storno { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--gridline, #e8e3d6); }
.st-knopf { border-color: #e3c4c4; color: #8d2020; }
.st-knopf:hover { background: #fdf2f2; border-color: #d9a8a8; }
.st-box { max-width: 560px; }
.st-abschnitt {
  font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-muted, #8b8c95); margin: 16px 0 8px;
}
.st-folgen { background: #fbfaf6; border: 1px solid var(--gridline, #e8e3d6);
             border-radius: 11px; padding: 9px 12px; }
.st-fz { display: flex; gap: 9px; font-size: 12.5px; color: var(--text-secondary, #4c5568);
         padding: 4px 0; }
.st-fz span { width: 18px; flex: none; }
.st-wahl {
  display: flex; gap: 11px; align-items: flex-start; width: 100%; text-align: left;
  border: 1.5px solid var(--gridline, #e8e3d6); border-radius: 12px; padding: 11px 13px;
  background: #fff; font-family: inherit; margin-bottom: 9px; cursor: pointer;
}
.st-wahl.an { border-color: var(--navy, #1d2c49); background: #f4f6fa;
              box-shadow: 0 0 0 3px rgba(29,44,73,.07); }
.st-wahl.an.gruen { border-color: #1baf7a; background: #f3fbf6;
                    box-shadow: 0 0 0 3px rgba(27,175,122,.09); }
.st-punkt { width: 17px; height: 17px; border-radius: 50%; border: 2px solid #cfcabb;
            flex: none; margin-top: 2px; }
.st-wahl.an .st-punkt { border-color: var(--navy, #1d2c49);
                        background: radial-gradient(#1d2c49 42%, #fff 46%); }
.st-wahl.an.gruen .st-punkt { border-color: #1baf7a;
                              background: radial-gradient(#1baf7a 42%, #fff 46%); }
.st-wahl b { display: block; font-size: 14px; color: var(--navy, #1d2c49); }
.st-wahl em { font-style: normal; font-size: 12px; color: var(--text-secondary, #4c5568);
              display: block; margin-top: 2px; line-height: 1.45; }
.st-betrag { display: flex; gap: 7px; align-items: center; margin-top: 9px;
             font-size: 12.5px; color: var(--text-secondary, #4c5568); flex-wrap: wrap; }
.st-feld { border: 1px solid var(--gridline, #e8e3d6); border-radius: 9px; padding: 7px 10px;
           font-size: 14.5px; font-weight: 800; text-align: right; width: 100px;
           font-family: inherit; }
.st-klein { font-size: 11.5px; color: var(--text-muted, #8b8c95); margin: 8px 0 0;
            line-height: 1.5; }
.st-belege { display: grid; gap: 7px; }
.st-beleg { border: 1px solid var(--gridline, #e8e3d6); border-left: 4px solid var(--navy, #1d2c49);
            border-radius: 10px; padding: 8px 11px; font-size: 13px; background: #fff; }
.st-beleg.storno { border-left-color: #c0392b; }
.st-beleg.neu { border-left-color: #1baf7a; }
.st-beleg.fehler { border-left-color: #c0392b; background: #fdf2f2; }
.st-beleg em { display: block; font-style: normal; font-size: 11.5px;
               color: var(--text-muted, #8b8c95); margin-top: 2px; }
.st-keine { background: #f7f5ef; border: 1px dashed #d9d5c8; border-radius: 11px;
            padding: 10px 13px; font-size: 12.5px; color: var(--text-secondary, #4c5568); }
.st-gesperrt { background: #fdf9ef; border: 1px solid #f0e3c2; border-radius: 12px;
               padding: 13px 15px; font-size: 13px; color: #6b5410; line-height: 1.6; }
.st-gesperrt b { color: #4a3b06; display: block; margin-bottom: 3px; }
.st-warn { background: #fff8e6; border: 1px solid #f0dfae; border-radius: 11px;
           padding: 10px 13px; font-size: 12.5px; color: #6b5410; margin-bottom: 12px; }
.st-fertig { background: #eef8f1; border: 1px solid #cbe9d5; border-radius: 12px;
             padding: 11px 14px; }
.st-fertig .st-fz { color: #14563a; }
.st-mail { width: 100%; box-sizing: border-box; border: 1px solid var(--gridline, #e8e3d6);
           border-radius: 11px; padding: 11px 13px; font-family: inherit; font-size: 13.5px;
           line-height: 1.6; background: #fff; }
.st-rot { background: #c0392b; border-color: #c0392b; color: #fff; }

/* --- v201: vier Schritte im Stornofenster --------------------------------- */
.st-schritte { display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
               margin: 2px 0 4px; }
.st-sch { font-size: 11px; font-weight: 700; letter-spacing: .03em; padding: 4px 9px;
          border-radius: 999px; background: #f4f2ec; color: #8b8c95; white-space: nowrap; }
.st-sch.an { background: var(--navy, #1d2c49); color: #fff; }
.st-sch.fertig { background: #eef8f1; color: #14563a; }
.st-frage { font-size: 15px; font-weight: 800; color: var(--navy, #1d2c49);
            margin: 14px 0 4px; }
.st-warum { font-size: 12px; color: var(--text-muted, #8b8c95); margin: 0 0 11px;
            line-height: 1.5; }
.st-quelle { display: block; font-style: normal; font-size: 11.5px; margin-top: 6px;
             color: var(--text-muted, #8b8c95); line-height: 1.45; }
.st-auswahl { border: 1px solid var(--gridline, #e8e3d6); border-radius: 9px;
              padding: 7px 9px; font-family: inherit; font-size: 13px; background: #fff; }
.st-zusammen { background: #fbfaf6; border: 1px solid var(--gridline, #e8e3d6);
               border-radius: 11px; padding: 6px 12px; margin-bottom: 4px; }
.st-zz { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0;
         font-size: 12.5px; color: var(--text-secondary, #4c5568); }
.st-zz + .st-zz { border-top: 1px solid var(--gridline, #e8e3d6); }
.st-zz b { color: var(--navy, #1d2c49); text-align: right; }

/* --- v205: Wer kümmert sich? (Meldeformular der Reinigungskraft) ---------- */
.rd-kopie { font-size: 12.5px; color: var(--text-muted, #8b8c95); margin: 7px 0 0; }

/* --- v205: Mängel als Karten im Handy des Mitarbeiters -------------------- */
.ma-mangelkarte { display: flex; }
.ma-mknoepfe { display: flex; gap: 6px; margin-left: auto; }
.ma-mknopf { border: 1px solid var(--gridline, #d9d5c8); background: #fff;
  border-radius: 9px; padding: 7px 13px; font-size: 13px; font-weight: 700;
  color: var(--navy, #1d2c49); font-family: inherit; cursor: pointer; }
.ma-mknopf.haupt { background: var(--navy, #1d2c49); border-color: var(--navy, #1d2c49);
  color: #fff; }
.ma-mknopf:disabled { opacity: .5; }

/* --- v204: was der Gast sieht --------------------------------------------- */
.gm-auslandhinweis { background: #f4f6fa; border: 1px solid #dfe4ee; border-radius: 11px;
  padding: 10px 13px; font-size: 12.5px; color: #2c4a86; line-height: 1.6;
  margin: 0 0 10px; }
.gm-kurtaxe { background: #fff8e6; border: 1px solid #f0dfae; border-radius: 11px;
  padding: 10px 13px; font-size: 12.5px; color: #6b5410; line-height: 1.6;
  margin: 0 0 12px; }
.gm-kurtaxe b { color: #4a3b06; }
.gm-haken { display: flex; gap: 8px; align-items: center; font-size: 13px;
  color: var(--navy, #1d2c49); margin: 6px 0; cursor: pointer; }

/* --- v204: Übertragen + Online-Check-in je Unterkunft ---------------------- */
.uk-ue-hinweis { display: flex; gap: 11px; align-items: center; background: #f4f6fa;
  border: 1px solid #dfe4ee; border-radius: 12px; padding: 10px 14px; font-size: 12.5px;
  color: #2c4a86; margin-bottom: 12px; }
.uk-ue-hinweis b { color: var(--navy, #1d2c49); }
.uk-ue-sym { font-size: 18px; flex: none; }
.uk-zelle { display: flex; gap: 6px; align-items: center; }
.uk-wert { flex: 1; min-width: 0; }
.uk-ue { width: 22px; height: 22px; border-radius: 6px; border: 1px solid #dfe4ee;
  background: #f8fafd; color: #2c4a86; font-size: 11px; font-weight: 800; flex: none;
  cursor: pointer; font-family: inherit; line-height: 1; }
.uk-ue:hover { background: #e8eefa; border-color: #b9c8e4; }
/* Seit v223: Das ⇄ steht erst da, wenn die Maus auf der Zeile ist. Wilhelm
   nutzt es selten, aber es kostete in jeder Zelle Platz - und die Tabelle
   war deshalb nur noch seitlich scrollend lesbar. Beim Tasten-Fokus und auf
   Geräten ohne Maus bleibt es sichtbar, sonst wäre es unerreichbar. */
#uk-tabelle .uk-ue { opacity: 0; transition: opacity .12s; }
#uk-tabelle tr:hover .uk-ue, #uk-tabelle .uk-ue:focus { opacity: 1; }
@media (hover: none) { #uk-tabelle .uk-ue { opacity: .55; } }
/* Das Wort vor dem Wert - „Haus 4729#" statt einer eigenen Spalte. */
.uk-marke { flex: none; width: 62px; font-size: 11px; letter-spacing: .04em;
  color: var(--text-secondary, #6b7280); }
#uk-tabelle td > .uk-zelle + .uk-zelle { margin-top: 4px; }
.uk-ci { border: 1px solid var(--gridline, #e5e3da); border-radius: 999px; padding: 3px 10px;
  font-size: 11.5px; font-weight: 700; font-family: inherit; cursor: pointer;
  background: #f1efe8; color: #6b675c; white-space: nowrap; }
.uk-ci-kurtaxe { background: #eef2fa; color: #2c4a86; border-color: #d3ddf0; }
.uk-ci-eigen { background: #eef8f1; color: #14563a; border-color: #cbe9d5; }

.ue-box { max-width: 560px; }
.ue-laedt { font-size: 13px; color: var(--text-muted, #8b8c95); padding: 14px 0; }
.ue-quelle { background: #f4f6fa; border: 1px solid #dfe4ee; border-radius: 11px;
  padding: 10px 13px; }
.ue-quelle em { display: block; font-style: normal; font-size: 11.5px;
  color: var(--text-secondary, #6b675c); }
.ue-quelle b { font-size: 15px; color: var(--navy, #1d2c49); }
.ue-abschnitt { font-size: 10.5px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-muted, #8b8c95); margin: 14px 0 7px; }
.ue-schnell { float: right; font-weight: 400; text-transform: none; letter-spacing: 0;
  font-size: 11.5px; }
.ue-schnell a { color: #2c4a86; }
.ue-liste { border: 1px solid var(--gridline, #f0ece1); border-radius: 11px;
  max-height: 330px; overflow-y: auto; }
.ue-z { display: flex; gap: 9px; align-items: center; padding: 8px 11px; font-size: 12.5px;
  color: var(--navy, #1d2c49); border-top: 1px solid #f5f2e9; cursor: pointer; }
.ue-z:first-child { border-top: none; }
.ue-z.an { background: #f3fbf6; }
.ue-name { flex: 1; min-width: 0; }
.ue-alt { font-size: 11.5px; color: var(--text-muted, #8b8c95); text-align: right; }
.ue-alt.leer { color: #b3aea0; }
.ue-alt.ersetzt { color: #8d2020; }
.ue-alt.ersetzt b { color: #8d2020; }
.ue-warn { background: #fff8e6; border: 1px solid #f0dfae; border-radius: 11px;
  padding: 10px 12px; font-size: 12px; color: #6b5410; margin-top: 11px; line-height: 1.6; }
.ue-warn b { color: #4a3b06; }
.ue-hinweis { background: #fbfaf6; border: 1px solid var(--gridline, #e5e3da);
  border-radius: 11px; padding: 10px 12px; font-size: 12px;
  color: var(--text-secondary, #6b675c); margin-top: 11px; line-height: 1.6; }
.ue-fertig { background: #eef8f1; border: 1px solid #cbe9d5; border-radius: 12px;
  padding: 11px 14px; }
.ue-fz { display: flex; gap: 9px; font-size: 12.5px; color: #14563a; padding: 4px 0; }
.ue-fz span:first-child { width: 16px; flex: none; }
.ue-vorschlag { padding: 9px 11px; border-top: 1px solid #f5f2e9; font-size: 12.5px; }
.ue-vorschlag:first-child { border-top: none; }
.ue-vorschlag b { color: var(--navy, #1d2c49); }
.ue-vz { display: flex; gap: 8px; align-items: center; margin-top: 5px; font-size: 12px; }
.ue-vlabel { width: 96px; flex: none; color: var(--text-muted, #8b8c95); }
.ue-valt { color: #b3aea0; text-decoration: line-through; }
.ue-vpfeil { color: #b3aea0; }
.ue-vneu { flex: 1; color: #14563a; font-weight: 700; }

.ci-box { max-width: 1120px; }
.ci-zwei { display: grid; grid-template-columns: 1fr 420px; gap: 18px; align-items: start; }
.ci-vorlagen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.ci-v { border: 1.5px solid var(--gridline, #e5e3da); border-radius: 11px; padding: 10px 11px;
  background: #fff; font-family: inherit; cursor: pointer; text-align: center; }
.ci-v.an { border-color: #2c4a86; background: #f4f6fa; box-shadow: 0 0 0 3px rgba(44,74,134,.08); }
.ci-v b { font-size: 13px; color: var(--navy, #1d2c49); }
.ci-klein { font-size: 11.5px; color: var(--text-muted, #8b8c95); margin: 7px 0 0;
  line-height: 1.55; }
.ci-fz { display: flex; gap: 10px; align-items: center; padding: 7px 11px;
  border: 1px solid var(--gridline, #e5e3da); border-radius: 10px; margin-bottom: 5px;
  background: #fff; font-size: 12.5px; color: var(--navy, #1d2c49); }
.ci-fz.aus { background: #fbfaf6; color: #b3aea0; }
.ci-label { flex: 1; min-width: 0; }
.ci-label em { display: block; font-style: normal; font-size: 11px;
  color: var(--text-muted, #8b8c95); margin-top: 2px; }
.ci-wahl { display: flex; gap: 4px; flex: none; }
.ci-p { font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px;
  background: #f1efe8; color: #8b8880; border: 0; font-family: inherit; cursor: pointer; }
.ci-p.an { background: var(--navy, #1d2c49); color: #fff; }
.ci-p.pflicht.an { background: #c0392b; }
.ci-p.ausland.an { background: #2c4a86; }
.ci-p:disabled { opacity: .5; cursor: default; }
.ci-an { display: inline-flex; gap: 6px; align-items: center; font-weight: 400;
  text-transform: none; letter-spacing: 0; font-size: 11.5px; float: right;
  color: var(--text-secondary, #4c5568); cursor: pointer; }
.ci-auslandkasten { background: #f4f6fa; border: 1px solid #dfe4ee; border-radius: 11px;
  padding: 10px 13px; font-size: 12px; color: #2c4a86; line-height: 1.6; margin-bottom: 8px; }
.ci-auslandkasten b { color: var(--navy, #1d2c49); }
.ci-eigene { display: grid; gap: 5px; }
.ci-eigen { display: flex; gap: 9px; align-items: center; border: 1px solid var(--gridline, #e5e3da);
  border-radius: 10px; padding: 7px 11px; font-size: 12.5px; background: #fff; }
.ci-leer { font-size: 12px; color: var(--text-muted, #b3aea0); margin: 0; padding: 8px 0; }
.ci-neu { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; }
.ci-neu .au-feld { font-size: 12px; padding: 6px 8px; }
.ci-voll { width: 100%; box-sizing: border-box; margin-top: 5px; font-size: 12px; }
.ci-kurtaxe { border: 1px solid var(--gridline, #e5e3da); border-radius: 12px;
  padding: 11px 13px; background: #fbfaf6; }
.ci-kurtaxe.an { border-color: #d3ddf0; background: #f4f6fa; }
.ci-ktreihe { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; margin-top: 8px; }

/* --- v203: Automatische Nachrichten --------------------------------------- */
.au-hauptschalter { display: flex; gap: 16px; align-items: center; border-radius: 16px;
  padding: 15px 20px; margin: 0 0 8px; border: 2px solid #d9d5c8; background: #fbfaf6; }
.au-hauptschalter.scharf { border-color: #1baf7a; background: #f3fbf6; }
.au-hauptschalter.testlauf { border-color: #e8b53a; background: #fffdf3; }
.au-gross { width: 62px; height: 33px; border-radius: 999px; background: #cfcabb;
  position: relative; flex: none; transition: background .15s; }
.au-gross::after { content: ""; position: absolute; top: 4px; left: 4px; width: 25px;
  height: 25px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: left .15s; }
.au-gross.test { background: #e8b53a; } .au-gross.test::after { left: 18px; }
.au-gross.an { background: #1baf7a; } .au-gross.an::after { left: 33px; }
.au-hs-text b { display: block; font-size: 16px; color: var(--navy, #1d2c49); margin-bottom: 2px; }
.au-hs-text span { font-size: 13px; color: var(--text-secondary, #4c5568); line-height: 1.6; }
.au-hs-marke { margin-left: auto; font-size: 12px; font-weight: 800; padding: 6px 13px;
  border-radius: 999px; background: #eceadf; color: #6b675c; white-space: nowrap; }
.au-hs-marke.testlauf { background: #fff4d6; color: #6b5410; }
.au-hs-marke.scharf { background: #1baf7a; color: #fff; }

.au-stufen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: 0 0 20px; }
.au-stufe { border: 1.5px solid var(--gridline, #e5e3da); border-radius: 13px; padding: 12px 14px;
  background: #fff; text-align: left; font-family: inherit; cursor: pointer; }
.au-stufe.an { border-color: #e8b53a; background: #fffdf3; box-shadow: 0 0 0 3px rgba(232,181,58,.12); }
.au-stufe b { display: block; font-size: 14px; color: var(--navy, #1d2c49); margin-bottom: 3px; }
.au-stufe p { margin: 0; font-size: 12px; color: var(--text-secondary, #4c5568); line-height: 1.6; }
.au-punkt { width: 15px; height: 15px; border-radius: 50%; border: 2px solid #cfcabb;
  display: inline-block; vertical-align: -2px; margin-right: 7px; }
.au-stufe.an .au-punkt { border-color: #e8b53a; background: radial-gradient(#e8b53a 42%, #fff 46%); }

.au-kopfzeile { display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 12px; flex-wrap: wrap; gap: 10px; }
.au-h2 { margin: 0 0 3px; font-size: 19px; color: var(--navy, #1d2c49); }
.au-unter { margin: 0; font-size: 13px; color: var(--text-muted, #8b8c95); }
.au-kopf-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }

.au-liste { display: grid; gap: 9px; margin-bottom: 20px; }
.au-kopfreihe { display: grid; grid-template-columns: 44px 1fr 200px 165px 150px 70px;
  gap: 14px; padding: 0 16px 2px; }
.au-kopfreihe span { font-size: 10px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-muted, #b3aea0); }
.au-regel { background: #fff; border: 1px solid var(--gridline, #e5e3da); border-radius: 14px;
  padding: 13px 16px; display: grid; grid-template-columns: 44px 1fr 200px 165px 150px 70px;
  gap: 14px; align-items: center; box-shadow: 0 2px 8px rgba(20,19,15,.04); cursor: pointer; }
.au-regel:hover { border-color: #cfcabb; }
.au-regel.aus { opacity: .62; }
.au-sym { width: 40px; height: 40px; border-radius: 11px; background: #f4f6fa;
  display: grid; place-items: center; font-size: 19px; }
.au-rname { font-size: 15px; font-weight: 800; color: var(--navy, #1d2c49); }
.au-rtext { font-size: 12px; color: var(--text-muted, #8b8c95); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.au-sp { font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-muted, #b3aea0); margin-bottom: 3px; }
.au-wert { font-size: 13px; color: var(--navy, #1d2c49); font-weight: 700; }
.au-wert em { display: block; font-style: normal; font-size: 11.5px;
  color: var(--text-muted, #8b8c95); font-weight: 400; margin-top: 2px; }
.au-marke { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 9px;
  border-radius: 999px; background: #f1efe8; color: #6b675c; margin-right: 5px; }
.au-marke.blau { background: #eef2fa; color: #2c4a86; }
.au-marke.gruen { background: #eef8f1; color: #14563a; }
.au-marke.gelb { background: #fff4d6; color: #6b5410; }
.au-marke.grau { background: #f1efe8; color: #8b8880; }
.au-marke.rot { background: #fdf3f2; color: #8d2020; }
.au-schalter { width: 40px; height: 22px; border-radius: 999px; background: #d9d5c8;
  position: relative; display: inline-block; cursor: pointer; }
.au-schalter::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px;
  height: 16px; border-radius: 50%; background: #fff; transition: left .12s; }
.au-schalter.an { background: #1baf7a; } .au-schalter.an::after { left: 21px; }

.au-unten { display: grid; grid-template-columns: 1fr 400px; gap: 16px; margin-bottom: 26px; }
.au-box { background: #fff; border: 1px solid var(--gridline, #e5e3da); border-radius: 14px;
  padding: 14px 16px; }
.au-box h3 { margin: 0 0 3px; font-size: 15px; color: var(--navy, #1d2c49); }
.au-boxunter { margin: 0 0 11px; font-size: 12px; color: var(--text-muted, #8b8c95);
  line-height: 1.55; }
.au-zahlen { display: flex; gap: 22px; background: #f4f6fa; border: 1px solid #dfe4ee;
  border-radius: 12px; padding: 10px 16px; margin-bottom: 12px; flex-wrap: wrap; }
.au-zahlen div b { display: block; font-size: 20px; color: var(--navy, #1d2c49); line-height: 1.2; }
.au-zahlen div span { font-size: 11.5px; color: var(--text-secondary, #4c5568); }
.au-tag { font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-muted, #b3aea0); margin: 13px 0 5px; padding-top: 10px;
  border-top: 1px solid var(--gridline, #f0ece1); }
.au-tag:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.au-z { display: grid; grid-template-columns: 56px 16px 1fr 150px 96px 108px; gap: 11px;
  align-items: center; padding: 7px 0; font-size: 12.5px; color: var(--text-secondary, #4c5568);
  cursor: pointer; }
.au-z:hover { background: #fbfaf6; }
.au-z b { color: var(--navy, #1d2c49); }
.au-zeit { font-weight: 800; color: var(--navy, #1d2c49); font-size: 12px; white-space: nowrap; }
.au-punkt2 { width: 9px; height: 9px; border-radius: 50%; }
.au-punkt2.gelb { background: #e8b53a; } .au-punkt2.grau { background: #cfcabb; }
.au-punkt2.gruen { background: #1baf7a; } .au-punkt2.rot { background: #c0392b; }
.au-grund { font-size: 11.5px; color: #8d2020; margin-top: 2px; }
.au-grund2 { font-size: 11.5px; color: var(--text-muted, #8b8c95); margin-top: 2px; }
.au-pz { display: grid; grid-template-columns: 82px 16px 1fr; gap: 10px; align-items: center;
  padding: 7px 0; border-top: 1px solid var(--gridline, #f0ece1); font-size: 12.5px;
  color: var(--text-secondary, #4c5568); }
.au-pz:first-child { border-top: none; }
.au-pz.gross { grid-template-columns: 92px 16px 1fr 150px 96px; }
.au-leer { font-size: 12.5px; color: var(--text-muted, #8b8c95); padding: 12px 0; margin: 0; }
.au-leerbox { background: #fff; border: 1px dashed #d9d5c8; border-radius: 14px;
  padding: 22px 24px; text-align: center; font-size: 13px; color: var(--text-secondary, #4c5568);
  line-height: 1.7; }
.au-leerbox b { display: block; font-size: 15px; color: var(--navy, #1d2c49); margin-bottom: 4px; }
.au-leerbox .btn { margin-top: 12px; }

/* --- das Regel-Fenster --- */
.au-modal { max-width: 1280px; }
.au-zweispalten { display: grid; grid-template-columns: 1fr 470px; gap: 15px;
  align-items: start; }
.au-kasten { border: 1px solid var(--gridline, #e5e3da); border-radius: 13px; padding: 14px 16px;
  margin-bottom: 12px; background: #fff; }
.au-kasten h3 { margin: 0 0 2px; font-size: 14.5px; color: var(--navy, #1d2c49); }
.au-abschnitt { font-size: 10.5px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-muted, #8b8c95); margin: 14px 0 7px; }
.au-schnell { float: right; font-weight: 400; text-transform: none; letter-spacing: 0;
  font-size: 11.5px; }
.au-schnell a { color: #2c4a86; }
/* Seit v214 sind es sechs Anknuepfpunkte - fuenf Spalten wuerden den
   sechsten allein in eine zweite Zeile stellen. */
.au-wahl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
@media (min-width: 900px) { .au-wahl { grid-template-columns: repeat(6, 1fr); } }
.au-w { border: 1.5px solid var(--gridline, #e5e3da); border-radius: 11px; padding: 9px 8px;
  background: #fff; text-align: center; font-family: inherit; cursor: pointer; }
.au-w.an { border-color: var(--navy, #1d2c49); background: #f4f6fa;
  box-shadow: 0 0 0 3px rgba(29,44,73,.07); }
.au-w b { display: block; font-size: 12px; color: var(--navy, #1d2c49); }
/* „ohne Text nach dem Kauf" an einer Leistung, bei der {zusatz_hinweis} leer
   bliebe - das soll man sehen, BEVOR die Nachricht rausgeht. */
.au-w em { display: block; font-style: normal; font-size: 10.5px; margin-top: 2px;
  color: #a08334; }
.au-zeitzeile { display: flex; gap: 8px; align-items: center; background: #f4f6fa;
  border: 1px solid #dfe4ee; border-radius: 12px; padding: 10px 13px; margin-top: 9px;
  flex-wrap: wrap; }
.au-um { font-size: 13px; color: var(--navy, #1d2c49); }
.au-klein { font-size: 11.5px; color: var(--text-muted, #8b8c95); }
.au-feld { border: 1px solid var(--gridline, #e0dcd0); border-radius: 9px; padding: 7px 10px;
  font-size: 13px; font-family: inherit; color: var(--navy, #1d2c49); background: #fff; }
.au-feld.au-kurz { width: 82px; }
.au-feld.au-breit { flex: 1; min-width: 160px; }
.au-feld.au-voll { width: 100%; box-sizing: border-box; }
.au-satz { background: #eef8f1; border: 1px solid #cbe9d5; border-radius: 11px;
  padding: 10px 13px; font-size: 12.5px; color: #14563a; margin-top: 10px; line-height: 1.55; }
.au-satz b { color: #0b3d27; }
.au-reihe { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.au-uz { display: flex; gap: 8px; align-items: center; border: 1px solid var(--gridline, #e5e3da);
  border-radius: 9px; padding: 6px 10px; font-size: 12.5px; color: var(--navy, #1d2c49);
  background: #fff; cursor: pointer; }
.au-uz.an { border-color: #1baf7a; background: #f3fbf6; }
.au-uz input { margin: 0; }
.au-uk { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; max-height: 230px;
  overflow-y: auto; }
.au-haken-zeile { display: flex; gap: 8px; align-items: center; font-size: 12.5px;
  color: var(--text-secondary, #4c5568); margin-top: 9px; cursor: pointer; }
.au-text-feld { width: 100%; box-sizing: border-box; border: 1px solid var(--gridline, #e0dcd0);
  border-radius: 11px; padding: 11px 13px; font-size: 13px; line-height: 1.65;
  color: var(--navy, #1d2c49); min-height: 260px; font-family: inherit; resize: vertical; }
.au-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.au-chip { border: 1px solid #dfe4ee; background: #f8fafd; border-radius: 999px;
  padding: 4px 10px; font-size: 11.5px; color: #2c4a86; font-weight: 700; font-family: inherit;
  cursor: pointer; }
.au-chip.mappe { border-color: #cbe9d5; background: #eef8f1; color: #14563a; }
.au-vorschau-text { background: #fbfaf6; border: 1px solid var(--gridline, #e5e3da);
  border-radius: 12px; padding: 12px 14px; font-size: 12.5px; line-height: 1.7;
  color: var(--text-secondary, #4c5568); white-space: pre-wrap; font-family: inherit;
  margin: 0; max-height: 420px; overflow-y: auto; }
.au-warn { background: #fff8e6; border: 1px solid #f0dfae; border-radius: 11px;
  padding: 10px 13px; font-size: 12.5px; color: #6b5410; margin-top: 10px; line-height: 1.6; }
.au-warn b { color: #4a3b06; }
.au-modal-hinweis { font-size: 12.5px; color: #14563a; margin-left: 10px; }
.au-betreff { font-size: 13px; color: var(--text-secondary, #4c5568); margin: 0 0 8px; }
.au-text { background: #fbfaf6; border: 1px solid var(--gridline, #e5e3da); border-radius: 12px;
  padding: 13px 15px; font-size: 13px; line-height: 1.7; color: var(--text-secondary, #4c5568);
  white-space: pre-wrap; font-family: inherit; margin: 0; }
.au-tabelle { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.au-tabelle th { text-align: left; font-size: 10px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-muted, #b3aea0); padding: 0 8px 7px; }
.au-tabelle td { padding: 7px 8px; border-top: 1px solid var(--gridline, #f0ece1);
  color: var(--text-secondary, #4c5568); }
.au-uname { font-weight: 700; color: var(--navy, #1d2c49); }
.au-ok { color: #14563a; }
.au-fehlt { color: #8d2020; font-weight: 700; }
.au-grau { color: var(--text-muted, #b3aea0); }
.au-zeile-fehlt { background: #fdf9f8; }

/* --- v202: Stand der Buchungsliste und ausgeblendete Treffer -------------- */
.bl-stand { font-size: 11.5px; color: var(--text-muted, #8b8c95); margin-right: 8px;
            white-space: nowrap; }
.bl-stand.bl-stand-alt { color: #8d6b10; font-weight: 700; }
.bl-versteckt { margin-top: 10px; border: 1px solid #f0dfae; background: #fffaf0;
                border-radius: 12px; padding: 11px 14px; }
.bl-vkopf { font-size: 13px; font-weight: 800; color: #6b5410; margin-bottom: 7px; }
.bl-vgrund { padding: 7px 0; border-top: 1px solid #f0e3c2; font-size: 12.5px;
             color: #6b5410; }
.bl-vgrund:first-of-type { border-top: none; }
.bl-vgrund b { color: #4a3b06; margin-right: 8px; }
.bl-vnamen { margin-top: 3px; color: var(--text-secondary, #4c5568); font-size: 12px;
             line-height: 1.6; }

/* --- v201: in ein anderes Zimmer verschieben ------------------------------ */
.vs-knopf { border-color: #c9d3e6; color: var(--navy, #1d2c49); margin-right: 8px; }
.vs-knopf:hover { background: #f4f6fa; border-color: #a9b8d4; }
.vs-box { max-width: 560px; }
.vs-laedt { font-size: 13px; color: var(--text-muted, #8b8c95); padding: 14px 0; }
.vs-warnung { background: #fdf3f2; border: 1px solid #f0cfcb; border-radius: 12px;
              padding: 11px 14px; color: #8d2020; }
.vs-warnung b { display: block; margin-bottom: 5px; color: #6d1616; font-size: 13.5px; }
.vs-warnung .st-fz { color: #8d2020; }
.vs-haken { display: flex; gap: 9px; align-items: flex-start; margin-top: 9px;
            padding-top: 9px; border-top: 1px solid #f0cfcb; font-size: 12.5px;
            color: #6d1616; cursor: pointer; font-weight: 700; }
.vs-haken input { margin-top: 2px; flex: none; width: 16px; height: 16px; }
.vs-liste { display: grid; gap: 7px; }
.vs-ziel { display: flex; gap: 11px; align-items: center; width: 100%; text-align: left;
           border: 1.5px solid var(--gridline, #e8e3d6); border-radius: 12px;
           padding: 10px 13px; background: #fff; font-family: inherit; cursor: pointer; }
.vs-ziel.an { border-color: var(--navy, #1d2c49); background: #f4f6fa;
              box-shadow: 0 0 0 3px rgba(29,44,73,.07); }
.vs-ziel.an .st-punkt { border-color: var(--navy, #1d2c49);
                        background: radial-gradient(#1d2c49 42%, #fff 46%); }
.vs-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 700;
           color: var(--navy, #1d2c49); }
.vs-stand { font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
            background: #eef8f1; color: #14563a; white-space: nowrap; }
.vs-ziel.belegt .vs-stand { background: #fdf3f2; color: #8d2020; }
.vs-ziel.belegt .vs-name { color: var(--text-secondary, #4c5568); }

/* ======================================================================
   Check-ins prüfen (v206)

   Wilhelm: „es soll zuerst an uns zur Prüfung gegeben."

   Bewusst zurückhaltend gehalten. Auf dieser Seite steht die Meldeadresse
   eines Menschen, der nichts weiter getan hat, als online einzuchecken.
   Deshalb kein Alarmrot und keine Verdachtssprache - nur Ampelpunkte in
   derselben Sprache, die das Programm überall sonst spricht.
   ====================================================================== */
.pr-kopfzeile { display: flex; align-items: flex-end; justify-content: space-between;
                margin: 4px 0 16px; gap: 16px; flex-wrap: wrap; }
.pr-titel { margin: 0 0 3px; font-size: 23px; color: #1d2c49; }
.pr-unter { margin: 0; font-size: 13px; color: #8b8880; }
.pr-kopf-knoepfe { display: flex; gap: 8px; }

.pr-zaehler { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
              margin-bottom: 18px; }
.pr-z { background: #fff; border: 1px solid #e6e2d6; border-radius: 14px; padding: 13px 16px; }
.pr-z b { display: block; font-size: 26px; color: #1d2c49; line-height: 1.1; }
.pr-z span { font-size: 12.5px; color: #8b8880; }
.pr-z.warn { border-color: #f0d79a; background: #fffcf2; }
.pr-z.warn b { color: #96690c; }
.pr-z.rot { border-color: #f0b9b1; background: #fff7f5; }
.pr-z.rot b { color: #b0392a; }

.pr-reiter { display: flex; gap: 4px; margin-bottom: 14px;
             border-bottom: 1px solid #e6e2d6; flex-wrap: wrap; }
.pr-reiter-knopf { border: 0; background: none; padding: 9px 15px; font-size: 13.5px;
                   font-weight: 700; color: #8b8880; font-family: inherit;
                   border-bottom: 3px solid transparent; margin-bottom: -1px;
                   cursor: pointer; }
.pr-reiter-knopf.active { color: #1d2c49; border-bottom-color: #1d2c49; }
.pr-pille { display: inline-block; background: #e9932a; color: #fff; border-radius: 999px;
            font-size: 11px; padding: 1px 7px; margin-left: 5px; }

.pr-liste { display: flex; flex-direction: column; gap: 8px; }
.pr-zeile { display: grid; align-items: center; gap: 14px;
            grid-template-columns: 16px minmax(180px, 1.1fr) minmax(220px, 2fr)
                                   130px 150px auto;
            background: #fff; border: 1px solid #e6e2d6; border-radius: 13px;
            padding: 13px 16px; }
.pr-zeile.gelb { border-color: #f0d79a; background: #fffcf2; }
.pr-zeile.rot { border-color: #f0b9b1; background: #fff7f5; }
.pr-zeile.erledigt { opacity: .72; }
.pr-ampel { width: 13px; height: 13px; border-radius: 50%; display: inline-block;
            background: #1baf7a; flex: none; }
.pr-ampel.gelb { background: #e9932a; }
.pr-ampel.rot { background: #c0392b; }
.pr-gast b { display: block; font-size: 14px; color: #1d2c49; }
.pr-gast span { font-size: 12.5px; color: #8b8880; }
.pr-gruende { display: flex; flex-wrap: wrap; gap: 4px; }
.pr-marke { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 6px;
            background: #f1efe8; color: #6b675c; }
.pr-marke.gelb { background: #fdf0d5; color: #96690c; }
.pr-marke.rot { background: #fbe3df; color: #b0392a; }
.pr-nichts { font-size: 12.5px; color: #a5a196; }
.pr-anreise b { display: block; font-size: 13.5px; color: #1d2c49; }
.pr-anreise span { font-size: 12px; color: #8b8880; }
.pr-halt { font-size: 12.5px; font-weight: 700; color: #96690c; }
.pr-frei { font-size: 12.5px; font-weight: 700; color: #1baf7a; }
.pr-frist { font-size: 12.5px; font-weight: 700; color: #8b8880; }
.pr-knoepfe { display: flex; gap: 5px; justify-content: flex-end; }
.btn-mini { padding: 6px 11px; font-size: 12.5px; }
.btn-gut { background: #1baf7a; border-color: #1baf7a; color: #fff; }
.pr-leer { background: #fff; border: 1px dashed #d9d2be; border-radius: 14px;
           padding: 26px; text-align: center; color: #6b675c; }
.pr-leer b { display: block; font-size: 15px; color: #1d2c49; margin-bottom: 5px; }
.pr-leer p { margin: 0 auto; max-width: 520px; font-size: 13px; line-height: 1.65; }

/* --- Ein einzelner Fall --- */
.pr-fall { display: grid; grid-template-columns: 1fr 380px; gap: 15px;
           align-items: start; }
.pr-karte { background: #fff; border: 1px solid #e6e2d6; border-radius: 14px;
            padding: 15px 17px; margin-bottom: 13px; }
.pr-karte h3 { margin: 0 0 11px; font-size: 14.5px; color: #1d2c49; }
.pr-m { display: flex; gap: 11px; padding: 10px 0; border-bottom: 1px solid #f1efe8; }
.pr-m:last-child { border-bottom: 0; padding-bottom: 0; }
.pr-pkt { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; flex: none;
          background: #d4d0c4; }
.pr-m.rot .pr-pkt { background: #c0392b; }
.pr-m.gelb .pr-pkt { background: #e9932a; }
.pr-m b { display: block; font-size: 13.5px; color: #1d2c49; margin-bottom: 2px; }
.pr-m p { margin: 0; font-size: 12.5px; color: #6b675c; line-height: 1.6; }
.pr-wert { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
           background: #f5f2e9; border-radius: 5px; padding: 1px 6px; color: #1d2c49; }
.pr-zeile2 { display: flex; padding: 7px 0; border-bottom: 1px solid #f6f4ee;
             font-size: 13.5px; }
.pr-zeile2:last-of-type { border-bottom: 0; }
.pr-zeile2 i { font-style: normal; width: 155px; color: #8b8880; font-size: 12.5px;
               flex: none; }
.pr-zeile2 b { font-weight: 600; color: #1d2c49; }
.pr-such { display: flex; flex-wrap: wrap; gap: 6px; }
.pr-klein { font-size: 12px; color: #8b8880; line-height: 1.6; margin: 8px 0 0; }
.pr-absage { width: 100%; box-sizing: border-box; margin: 10px 0; border: 1px solid #d9d5c8;
             border-radius: 10px; padding: 10px 12px; font-family: inherit;
             font-size: 13px; line-height: 1.6; color: #1d2c49; }

.pr-entscheid { background: #fbfaf6; border: 2px solid #e6e2d6; border-radius: 15px;
                padding: 15px 17px; margin-bottom: 13px; }
.pr-entscheid h3 { margin: 0 0 4px; font-size: 14.5px; color: #1d2c49; }
.pr-entscheid > p { margin: 0 0 12px; font-size: 12.5px; color: #8b8880; line-height: 1.6; }
.pr-entscheid.fertig { border-color: #d9d5c8; }
.pr-gross { display: block; width: 100%; border: 0; border-radius: 11px; padding: 13px;
            font-size: 14.5px; font-weight: 800; font-family: inherit;
            margin-bottom: 8px; cursor: pointer; }
.pr-gross.frei { background: #1baf7a; color: #fff; }
.pr-gross.ab { background: #fff; color: #b0392a; border: 1px solid #f0b9b1; }
.pr-folge { font-size: 12px; color: #6b675c; line-height: 1.6; margin: 2px 0 13px;
            padding-left: 17px; }
.pr-entscheid textarea { width: 100%; box-sizing: border-box; border: 1px solid #d9d5c8;
                         border-radius: 10px; padding: 9px 11px; font-family: inherit;
                         font-size: 13px; color: #1d2c49; resize: vertical; }
.pr-warn { background: #fffcf2; border: 1px solid #f0d79a; border-radius: 10px;
           padding: 10px 12px; font-size: 12.5px; color: #6b675c; line-height: 1.6;
           margin-top: 11px; }
.pr-warn b { color: #96690c; }
.pr-halten { margin: 0; padding-left: 17px; font-size: 12.5px; color: #6b675c;
             line-height: 1.75; }

/* --- Merkmale einstellen --- */
.pr-einst-block { border-bottom: 1px solid #f1efe8; padding: 13px 0; }
.pr-einst-block:last-child { border-bottom: 0; }
.pr-einst-titel { display: block; font-size: 13.5px; color: #1d2c49; margin-bottom: 8px; }
.pr-einst-zahl { display: block; font-size: 13.5px; color: #1d2c49; font-weight: 600; }
.pr-einst-zahl input { width: 62px; margin: 0 6px; border: 1px solid #d9d5c8;
                       border-radius: 8px; padding: 6px 9px; font-family: inherit;
                       font-size: 13px; }
.pr-einst-zeile, .pr-einst-an { display: flex; gap: 10px; align-items: flex-start;
                                padding: 8px 0; cursor: pointer; }
.pr-einst-zeile input, .pr-einst-an input { margin-top: 3px; flex: none; }
.pr-einst-zeile b, .pr-einst-an b { display: block; font-size: 13.5px; color: #1d2c49; }
.pr-einst-zeile small, .pr-einst-an small { display: block; font-size: 12px;
                                            color: #8b8880; line-height: 1.55; }

@media (max-width: 1100px) {
  .pr-zeile { grid-template-columns: 16px 1fr; }
  .pr-fall { grid-template-columns: 1fr; }
  .pr-zaehler { grid-template-columns: repeat(2, 1fr); }
}

/* ======================================================================
   Gruppenunterkünfte im Kalender (v207)

   Wilhelm: „G1 – Gruppenunterkunft und Gruppenhaus, die übergeordnete
   Einheit der Zimmer/Apartments. Wenn ein Zimmer gebucht ist, ist die
   Einheit nicht verfügbar."

   Ein abgeleiteter Balken ist bewusst KEIN grauer Balken: Grau heißt hier
   schon „blockiert/storniert". Ein abgeleiteter Balken ist etwas anderes -
   er verschwindet von selbst, sobald die verursachende Buchung wegfällt.
   Deshalb gestreift, gedämpft und mit Kettensymbol.
   ====================================================================== */
.cal-row-gruppe { background: #fbfaf6; }
.cal-row-gruppe .cal-row-name { font-weight: 700; }
.cal-gruppen-marke { background: #6b4fa8; color: #fff; font-size: 10.5px;
                     font-weight: 800; border-radius: 5px; padding: 2px 6px;
                     flex: none; letter-spacing: .3px; }
.cal-gruppen-unter { display: block; font-size: 11px; color: #8b8880;
                     font-weight: 400; line-height: 1.35; }

/* Der Faden vom Haus zu seinen Zimmern */
.cal-row-gruppenkind .cal-row-name { position: relative; padding-left: 30px; }
.cal-row-gruppenkind .cal-row-name::before {
  content: ""; position: absolute; left: 19px; top: 0; bottom: 0;
  border-left: 2px solid #e0d8f0; }
.cal-row-gruppenkind .cal-row-name::after {
  content: ""; position: absolute; left: 19px; top: 50%; width: 8px;
  border-top: 2px solid #e0d8f0; }

.cal-bar-abgeleitet {
  background: repeating-linear-gradient(135deg, #efe9f7, #efe9f7 7px,
                                        #e2d9ef 7px, #e2d9ef 14px);
  border: 1px solid #cdbde6; color: #5b4589; font-weight: 700;
  /* Unter den echten Balken: eine echte Buchung darf nie verdeckt werden. */
  z-index: 1; cursor: pointer; }
.cal-bar-abgeleitet .cal-abg-kette { font-size: 11px; flex: none; margin-right: 2px; }
.cal-bar-abgeleitet .cal-bar-label { color: #5b4589; }
.cal-bar-abgeleitet .cal-bar-label b { font-weight: 800; }
.cal-bar-abgeleitet .cal-abg-warum { font-weight: 400; color: #7a6a9a; }
.cal-bar-abgeleitet:hover { border-color: #6b4fa8; }

/* Die Warnung im Buchungstool */
.gr-warnung { background: #f6f2fc; border: 1px solid #cdbde6; border-radius: 11px;
              padding: 12px 14px; font-size: 13px; color: #4a3a70; line-height: 1.65;
              margin: 12px 0; }
.gr-warnung b { color: #5b4589; }

/* Gruppenunterkünfte auf der Unterkünfte-Seite (v207) */
.gr-karte { background: #fff; border: 1px solid #e6e2d6; border-radius: 14px;
            padding: 14px 16px; margin-bottom: 11px; }
.gr-kopf { display: flex; align-items: center; gap: 10px; }
.gr-kopf b { font-size: 15px; color: #1d2c49; }
.gr-marke { background: #6b4fa8; color: #fff; font-size: 11px; font-weight: 800;
            border-radius: 5px; padding: 3px 8px; flex: none; }
.gr-knoepfe { margin-left: auto; display: flex; gap: 6px; }
.gr-zimmerliste { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.gr-zimmer { border: 1px solid #e0d8f0; background: #f9f6fd; border-radius: 9px;
             padding: 6px 8px 6px 12px; font-size: 13px; color: #4a3a70;
             font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.gr-weg { border: 0; background: none; color: #a99cc4; font-weight: 800;
          font-size: 15px; cursor: pointer; line-height: 1; padding: 0 3px; }
.gr-weg:hover { color: #6b4fa8; }
.gr-zufuegen { border: 1px dashed #d9d5c8; border-radius: 9px; padding: 6px 10px;
               font-family: inherit; font-size: 13px; color: #6b675c; background: #fff; }

/* ======================================================================
   Telefondienst (v208)

   Wilhelm: „eine smarte Übersicht für die Telefonisten eben."

   Etwas größere Schrift und größere Klickflächen als sonst - hier wird
   mit einer Hand bedient, während die andere den Hörer hält.
   ====================================================================== */
.tel-app { max-width: 980px; margin: 0 auto; padding: 0 0 40px; }
.tel-kopf { background: #1d2c49; color: #fff; padding: 14px 20px; display: flex;
            align-items: center; gap: 11px; border-radius: 0 0 16px 16px;
            margin-bottom: 16px; }
.tel-kopf b { font-size: 17px; }
.tel-punkt { width: 9px; height: 9px; border-radius: 50%; background: #1baf7a; flex: none; }
.tel-wer { margin-left: auto; font-size: 13px; opacity: .82; }

.tel-suchfeld { position: relative; margin: 0 16px 6px; }
.tel-suchfeld input { width: 100%; box-sizing: border-box; border: 2px solid #1d2c49;
                      border-radius: 14px; padding: 16px 18px 16px 50px; font-size: 17px;
                      font-family: inherit; color: #1d2c49; background: #fff; }
.tel-lupe { position: absolute; left: 17px; top: 16px; font-size: 18px; opacity: .5; }
.tel-suchhilfe { font-size: 12.5px; color: #8b8880; margin: 0 20px 18px; line-height: 1.55; }

.tel-h3 { margin: 20px 16px 8px; font-size: 14px; color: #1d2c49;
          display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tel-h3-note { font-weight: 400; color: #8b8880; font-size: 12.5px; }
.tel-zahl { background: #1d2c49; color: #fff; border-radius: 999px; font-size: 11px;
            padding: 1px 8px; font-weight: 800; }

.tel-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
              gap: 8px; margin: 0 16px; }
.tel-k { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
         background: #fff; border: 1px solid #e6e2d6; border-radius: 13px;
         padding: 12px 14px; font-family: inherit; cursor: pointer; }
.tel-k:hover { border-color: #1d2c49; }
.tel-k.warnung { border-color: #f0d79a; background: #fffcf2; }
.tel-av { width: 34px; height: 34px; border-radius: 50%; background: #eef2fa;
          color: #1d2c49; font-size: 12px; font-weight: 800; flex: none;
          display: flex; align-items: center; justify-content: center; }
.tel-av.an { background: #e6f6ef; color: #14795a; }
.tel-av.ab { background: #fdf0e4; color: #96560c; }
.tel-av.gross { width: 46px; height: 46px; font-size: 15px; }
.tel-k-text { flex: 1; min-width: 0; }
.tel-k-text b { display: block; font-size: 14.5px; color: #1d2c49; }
.tel-k-text span { font-size: 12.5px; color: #8b8880; }
.tel-k-zeit { font-size: 12px; color: #6b675c; text-align: right; white-space: nowrap;
              flex: none; }
.tel-marke { display: inline-block; font-size: 11px; font-weight: 800; padding: 1px 7px;
             border-radius: 5px; margin-left: 6px; vertical-align: 1px; }
.tel-marke.warte { background: #fdf0d5; color: #96690c; }
.tel-marke.offen { background: #eef2fa; color: #3b5896; }
.tel-leer { margin: 0 16px; font-size: 13px; color: #a5a196; padding: 8px 0; }

.tel-letzte { background: #fff; border: 1px solid #e6e2d6; border-radius: 13px;
              margin: 0 16px; }
.tel-z { display: flex; align-items: center; gap: 10px; padding: 10px 14px;
         border-bottom: 1px solid #f4f2ea; font-size: 13.5px; }
.tel-z:last-child { border-bottom: 0; }
.tel-uhr { font-size: 12px; color: #a5a196; flex: none; }
.tel-was { margin-left: auto; color: #6b675c; font-size: 12.5px; text-align: right; }

/* --- Ein Gast --- */
.tel-zurueck { background: none; border: 0; color: #6b675c; font-size: 14px;
               font-family: inherit; padding: 4px 16px 10px; cursor: pointer; }
.tel-gastkopf { background: #fff; border: 1px solid #e6e2d6; border-radius: 15px;
                padding: 14px 16px; display: flex; align-items: flex-start; gap: 13px;
                margin: 0 16px 12px; }
.tel-gastkopf h2 { margin: 0 0 2px; font-size: 19px; color: #1d2c49; }
.tel-unter { font-size: 13px; color: #6b675c; }
.tel-gastkopf-rechts { margin-left: auto; text-align: right; }
.tel-lage { display: inline-block; background: #e6f6ef; color: #14795a; font-size: 12px;
            font-weight: 800; border-radius: 999px; padding: 4px 11px; }

.tel-warum { background: #eef2fa; border: 1px solid #cddbf2; border-radius: 13px;
             padding: 11px 14px; font-size: 13.5px; color: #2c4372; line-height: 1.6;
             margin: 0 16px 13px; }
.tel-warum.warnung { background: #fffcf2; border-color: #f0d79a; color: #6b5410; }
.tel-warum b { color: #1d2c49; }
.tel-warum.warnung b { color: #96690c; }

.tel-spalten { display: grid; grid-template-columns: 1fr 320px; gap: 12px;
               align-items: start; margin: 0 16px; }
.tel-karte { background: #fff; border: 1px solid #e6e2d6; border-radius: 15px;
             padding: 13px 15px; margin-bottom: 11px; }
.tel-karte h3 { margin: 0 0 9px; font-size: 14px; color: #1d2c49; }
.tel-zeile { display: flex; align-items: center; gap: 9px; padding: 8px 0;
             border-bottom: 1px solid #f4f2ea; font-size: 14px; }
.tel-zeile:last-child { border-bottom: 0; }
.tel-zeile i { font-style: normal; width: 128px; color: #8b8880; font-size: 12.5px;
               flex: none; }
.tel-zeile b { color: #1d2c49; font-weight: 600; word-break: break-word; }
.tel-kop { margin-left: auto; border: 1px solid #d9d5c8; background: #fbfaf6;
           border-radius: 8px; padding: 5px 10px; font-size: 11.5px; font-weight: 700;
           color: #1d2c49; font-family: inherit; cursor: pointer; flex: none; }
.tel-kop:hover { background: #1d2c49; color: #fff; border-color: #1d2c49; }
.tel-link { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px;
            color: #3b5896; word-break: break-all; background: #f7f5ef;
            border-radius: 9px; padding: 9px 11px; margin-bottom: 9px; }
.tel-knopfreihe { display: flex; gap: 7px; flex-wrap: wrap; }
.tel-knopf { border: 1px solid #d9d5c8; background: #fff; border-radius: 10px;
             padding: 10px 14px; font-size: 13.5px; font-weight: 700; color: #1d2c49;
             font-family: inherit; cursor: pointer; }
.tel-knopf.gruen { background: #1baf7a; border-color: #1baf7a; color: #fff; }
.tel-knopf.breit { display: block; width: 100%; box-sizing: border-box;
                   text-align: center; margin-bottom: 7px; }
.tel-knopf[disabled] { opacity: .45; cursor: default; }
.tel-klein { font-size: 12px; color: #8b8880; line-height: 1.6; margin: 8px 0 0; }
.tel-anruf { padding: 9px 0; border-bottom: 1px solid #f4f2ea; font-size: 13px;
             color: #4a4a44; }
.tel-anruf:last-child { border-bottom: 0; }
.tel-anruf p { margin: 3px 0; line-height: 1.55; }

/* Das Schloss vor den Zugangsdaten */
.tel-schloss { background: #fffcf2; border: 1px solid #f0d79a; border-radius: 15px;
               padding: 14px 16px; margin-bottom: 11px; }
.tel-schloss h3 { margin: 0 0 6px; font-size: 14px; color: #96690c; }
.tel-schloss p { margin: 0 0 10px; font-size: 12.5px; color: #6b675c; line-height: 1.6; }
.tel-frage { display: flex; gap: 9px; align-items: flex-start; background: #fff;
             border: 1px solid #eadfb8; border-radius: 10px; padding: 9px 11px;
             margin-bottom: 6px; cursor: pointer; }
.tel-frage input { margin-top: 3px; flex: none; }
.tel-frage b { display: block; font-size: 13px; color: #1d2c49; font-weight: 600; }
.tel-frage small { display: block; font-size: 12px; color: #96690c; margin-top: 2px; }
.tel-gross { display: block; width: 100%; box-sizing: border-box; border: 0;
             border-radius: 11px; padding: 13px; font-size: 14.5px; font-weight: 800;
             font-family: inherit; background: #1d2c49; color: #fff; cursor: pointer;
             margin-top: 8px; }
.tel-gross[disabled] { background: #d4d0c4; color: #8b8880; cursor: default; }
.tel-zugang-offen { border-color: #bfe6d4; background: #f4fbf7; }

.tel-tun { background: #fbfaf6; border: 2px solid #e6e2d6; border-radius: 15px;
           padding: 13px 15px; margin-bottom: 11px; }
.tel-tun h3 { margin: 0 0 3px; font-size: 14px; color: #1d2c49; }
.tel-tun > p { margin: 0 0 10px; font-size: 12.5px; color: #8b8880; }
.tel-nicht { background: #fff; border: 1px dashed #ddd8ca; border-radius: 12px;
             padding: 11px 13px; font-size: 12.5px; color: #8b8880; line-height: 1.6; }
.tel-nicht b { color: #6b675c; }

.tel-feldname { display: block; font-size: 12.5px; color: #6b675c; font-weight: 600;
                margin: 12px 0 5px; }
.tel-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tel-chip { border: 1px solid #d9d5c8; background: #fff; border-radius: 999px;
            padding: 7px 13px; font-size: 12.5px; color: #1d2c49; font-weight: 600;
            font-family: inherit; cursor: pointer; }
.tel-chip.an { background: #1d2c49; color: #fff; border-color: #1d2c49; }
#tel-notiz-inhalt textarea, #tel-notiz-inhalt select {
  width: 100%; box-sizing: border-box; border: 1px solid #d9d5c8; border-radius: 10px;
  padding: 10px 12px; font-family: inherit; font-size: 13.5px; color: #1d2c49; }
.error-banner.tel-gut { background: #e6f6ef; color: #14795a; border-color: #bfe6d4; }

@media (max-width: 860px) {
  .tel-spalten { grid-template-columns: 1fr; }
  .tel-karten { grid-template-columns: 1fr; }
}

/* ======================================================================
   Dichte des Kalenders (v209)

   Wilhelm: „kannst du unser Kalender etwas übersichtlicher gestalten, ein
   bisschen kleiner, sodass ich mehr Apartments nacheinander sehen kann …
   mit der eigenen Einstellung zum Anklicken, wie ich es haben will,
   langgezogen, kompakt usw."

   Die Pixelmaße kommen aus calendar.js (dort hängt die Balkengeometrie
   dran) und werden als CSS-Variablen gesetzt. Hier steht nur, was das
   Stylesheet daraus macht.
   ====================================================================== */
.cal-corner, .cal-row-name {
  flex: 0 0 var(--name-w, 180px);
  width: var(--name-w, 180px);
  min-width: var(--name-w, 180px);
}
.cal-bar { font-size: var(--bar-fz, 12px); }
.cal-bar-av { width: var(--bar-kreis, 19px); height: var(--bar-kreis, 19px); }

/* Kompakt: weniger Polsterung, kleinere Kopfzeile */
[data-kal-dichte="kompakt"] .cal-row-name { padding: 6px 10px; font-size: 12.5px; }
[data-kal-dichte="kompakt"] .cal-day-cell { padding: 5px 3px; font-size: 10.5px; }
[data-kal-dichte="kompakt"] .cal-day-cell .cal-weekday { font-size: 10px; margin-bottom: 2px; }
[data-kal-dichte="kompakt"] .cal-day-cell .cal-day-number { font-size: 13px; }
[data-kal-dichte="kompakt"] .cal-bar { border-radius: 7px; padding: 0 7px; gap: 5px; }
[data-kal-dichte="kompakt"] .cal-row-drag-handle { font-size: 13px; }

/* Sehr kompakt: alles, was nicht die Belegung zeigt, tritt zurück */
[data-kal-dichte="sehrKompakt"] .cal-row-name { padding: 4px 9px; font-size: 12px; }
[data-kal-dichte="sehrKompakt"] .cal-day-cell { padding: 4px 2px; font-size: 9.5px; }
[data-kal-dichte="sehrKompakt"] .cal-day-cell .cal-weekday { font-size: 9px; margin-bottom: 1px; }
[data-kal-dichte="sehrKompakt"] .cal-day-cell .cal-day-number { font-size: 12px; }
[data-kal-dichte="sehrKompakt"] .cal-bar { border-radius: 5px; padding: 0 6px; gap: 4px;
                                        box-shadow: none; }
[data-kal-dichte="sehrKompakt"] .cal-bar-av { display: none; }
[data-kal-dichte="sehrKompakt"] .cal-row-drag-handle { display: none; }
[data-kal-dichte="sehrKompakt"] .cal-gruppen-unter { display: none; }
/* Die Zusatzmarken (P/L/E/Z/N) bleiben - sie sind der Grund, warum man in
   dieser Stufe überhaupt noch etwas erkennt. Nur kleiner. */
[data-kal-dichte="sehrKompakt"] .cal-bar-mark { font-size: 9px; padding: 0 3px; }

/* Der Umschalter in der Leiste */
.cal-dichte { display: inline-flex; border: 1px solid var(--gridline, #e0dccf);
              border-radius: 10px; overflow: hidden; background: #fff; }
.cal-dichte button { border: 0; background: none; padding: 7px 12px; font-size: 12.5px;
                     font-weight: 600; color: #6b675c; font-family: inherit;
                     cursor: pointer; white-space: nowrap;
                     border-right: 1px solid var(--gridline, #e0dccf); }
.cal-dichte button:last-child { border-right: 0; }
.cal-dichte button:hover { background: #f7f5ef; }
.cal-dichte button.an { background: #1d2c49; color: #fff; }

@media (max-width: 900px) {
  .cal-dichte button { padding: 7px 9px; font-size: 11.5px; }
}

/* --- Einbau-Baukasten in den Einstellungen (v213) ------------------------- */
.bt-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.bt-chip {
  border: 1px solid var(--gridline, #e8e3d6); border-radius: 999px; padding: 6px 14px;
  font-size: 13px; font-family: inherit; background: #fff;
  color: var(--text-secondary, #4c5568); cursor: pointer;
}
.bt-chip.an { border-color: #1f4b3f; background: rgba(31,75,63,.06); color: #1f4b3f;
              font-weight: 600; }
.bt-warnung {
  background: #fff4d6; border: 1px solid #f0dfae; border-radius: 8px;
  padding: 10px 13px; font-size: 12.5px; color: #6b5410; margin: 0 0 14px;
  line-height: 1.55;
}
/* Der Notfallweg zum Kopieren: navigator.clipboard gibt es nur auf
   gesicherten Verbindungen - und genau die fehlt hier ja noch. */
.bt-notfall { display: none; width: 100%; height: 120px; margin-top: 10px;
              font-family: "SFMono-Regular", Menlo, Consolas, monospace;
              font-size: 12px; }
.bt-notfall.da { display: block; }

/* --- Die Werkbank für die Check-in-Anleitung (v216) -----------------------
   Wilhelm: „total unübersichtlich und schwer zu arbeiten … professionell,
   aber einfach zu bedienen." Also: EIN Fenster, drei Spalten, kein Fenster
   im Fenster mehr. Links sieht man den Weg, in der Mitte schreibt man,
   rechts steht das Handy des Gastes und schreibt mit. */
.uk-weg { margin: 16px 0 4px; border-top: 1px solid var(--gridline, #e8e3d6); padding-top: 14px; }
.uk-weg-zeile { display: flex; gap: 14px; align-items: center;
  background: #faf8f4; border: 1px solid var(--gridline, #e8e3d6);
  border-radius: 10px; padding: 12px 15px; }
.uk-weg-zeile > div { flex: 1 1 auto; min-width: 0; }
.uk-weg-zeile b { display: block; font-size: 14px; }
.uk-weg-zeile .detail-note { display: block; margin-top: 2px; }

.wb-box { position: relative; background: #fff; border-radius: 14px;
  box-shadow: var(--shadow-lg); width: 100%; max-width: 1460px; height: 92vh;
  display: flex; flex-direction: column; overflow: hidden; }
.wb-kopf { display: flex; align-items: center; gap: 16px; padding: 17px 24px;
  border-bottom: 1px solid var(--gridline, #e8e3d6); }
.wb-kopf-text { flex: 0 1 auto; min-width: 0; }
.wb-kopf h3 { margin: 0; font: 600 18px/1.3 Georgia, serif; }
.wb-sub { color: var(--text-secondary, #6b7280); font-size: 12.5px; margin-top: 2px; }
.wb-stand { margin-left: 14px; font-size: 12px; color: var(--text-secondary, #6b7280);
  min-width: 120px; }
.wb-stand.gut { color: #1f4b3f; }
.wb-stand.schlecht { color: #a13b3b; font-weight: 600; }
.wb-rechts { margin-left: auto; display: flex; gap: 9px; flex: none; }
.btn.wb-gold { border-color: #d9bd7f; color: #8a6a1f; font-weight: 600; }
.btn.wb-gold:hover { background: #fdf7e8; }

.wb-schalter { display: flex; gap: 24px; align-items: center; flex-wrap: wrap;
  padding: 12px 24px; background: #faf8f4; border-bottom: 1px solid var(--gridline, #e8e3d6); }
.wb-sch { display: flex; gap: 8px; align-items: center; font-size: 13px; cursor: pointer; }
.wb-zaehler { margin-left: auto; font-size: 12px; color: var(--text-secondary, #6b7280); }
.wb-zaehler.warn { color: #6b5410; background: #fff4d6; border: 1px solid #f0dfae;
  border-radius: 6px; padding: 3px 10px; }

.wb-werk { flex: 1; display: grid; grid-template-columns: 296px minmax(0, 1fr) 312px;
  min-height: 0; }
.wb-liste { border-right: 1px solid var(--gridline, #e8e3d6); background: #fcfbf9;
  padding: 13px 12px; overflow-y: auto; display: flex; flex-direction: column; gap: 7px; }
.wb-laedt { color: var(--text-secondary, #6b7280); font-size: 13px; padding: 10px 2px; }
.wb-karte { display: flex; gap: 10px; align-items: center; padding: 9px 10px;
  border-radius: 9px; border: 1px solid transparent; background: #fff; cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.wb-karte:hover { border-color: #dcd6c8; }
.wb-karte.an { border-color: #1f4b3f; box-shadow: 0 0 0 2px rgba(31,75,63,.13); }
.wb-nr { flex: none; width: 23px; height: 23px; border-radius: 50%; background: #1f4b3f;
  color: #fff; font-size: 11.5px; font-weight: 700; display: flex;
  align-items: center; justify-content: center; }
.wb-kt { flex: 1 1 auto; min-width: 0; }
.wb-kt b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.wb-kt small { display: block; color: var(--text-secondary, #6b7280); font-size: 11px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-mini { flex: none; width: 34px; height: 26px; border-radius: 5px; background: #e8e3d6;
  background-size: cover; background-position: center; }
.wb-pfeile { flex: none; display: flex; flex-direction: column; gap: 2px; }
.wb-pfeile button { border: 1px solid var(--gridline, #e8e3d6); background: #fff;
  border-radius: 4px; width: 24px; height: 19px; font-size: 11px; line-height: 1;
  cursor: pointer; color: #4b5563; padding: 0; }
.wb-pfeile button:hover:not(:disabled) { background: #f2f0ea; border-color: #c9c2b2; }
.wb-pfeile button:disabled { opacity: .3; cursor: default; }
.wb-plus { border: 1px dashed #cfc8b8; border-radius: 9px; padding: 11px; text-align: center;
  color: #1f4b3f; font: inherit; font-size: 13px; cursor: pointer; background: #fff; }
.wb-plus:hover { border-color: #1f4b3f; background: #f6faf8; }
.wb-uebernehmen { margin-top: auto; padding-top: 12px;
  border-top: 1px solid var(--gridline, #e8e3d6); font-size: 12px;
  color: var(--text-secondary, #6b7280); }
.wb-uebernehmen select { width: 100%; margin: 6px 0 7px; padding: 6px;
  border: 1px solid var(--gridline, #e8e3d6); border-radius: 7px; font: inherit; font-size: 12.5px; }

.wb-edit { padding: 18px 24px 24px; overflow-y: auto; }
.wb-leer { max-width: 460px; margin: 40px auto 0; text-align: center;
  color: var(--text-secondary, #6b7280); }
.wb-leer h4 { margin: 0 0 8px; font-size: 15px; color: #374151; }
.wb-leer p { font-size: 13px; line-height: 1.6; }
.wb-reiter { display: flex; gap: 4px; margin-bottom: 15px;
  border-bottom: 1px solid var(--gridline, #e8e3d6); }
.wb-reiter button { border: 0; background: none; padding: 8px 14px; font: inherit;
  font-size: 13px; cursor: pointer; color: var(--text-secondary, #6b7280);
  border-bottom: 2px solid transparent; }
.wb-reiter button.an { color: var(--navy, #1d2c49); border-bottom-color: #a8823f;
  font-weight: 600; }
.wb-feld { margin-bottom: 15px; }
.wb-feld label { display: block; font-size: 12px; font-weight: 600; color: #374151;
  margin-bottom: 5px; }
.wb-feld input, .wb-feld textarea, .wb-feld select { width: 100%; padding: 9px 11px;
  border: 1px solid var(--gridline, #e8e3d6); border-radius: 8px; font: inherit;
  font-size: 13.5px; }
.wb-feld textarea { min-height: 92px; resize: vertical; line-height: 1.55; }
.wb-feld.wb-en input, .wb-feld.wb-en textarea { background: #fcfcfd; }
.wb-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
.wb-chip { border: 1px solid var(--gridline, #e8e3d6); background: #faf8f4;
  border-radius: 999px; padding: 4px 11px; font-size: 11.5px; cursor: pointer;
  color: #1f4b3f; font-family: "SFMono-Regular", Menlo, Consolas, monospace; }
.wb-chip:hover { border-color: #1f4b3f; background: #fff; }
.wb-chiphinweis { display: block; margin-top: 5px; font-size: 11.5px;
  color: var(--text-secondary, #6b7280); line-height: 1.5; }
.wb-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.wb-fotohat img { width: 100%; max-height: 150px; object-fit: cover; border-radius: 8px;
  border: 1px solid var(--gridline, #e8e3d6); margin-bottom: 7px; display: block; }
.wb-fotoleer { width: 100%; border: 1px dashed #cfc8b8; border-radius: 10px; padding: 18px;
  background: #faf8f4; font: inherit; font-size: 13px; color: #1f4b3f; cursor: pointer; }
.wb-fotoleer small { display: block; margin-top: 4px; font-size: 11.5px; color: #6b7280; }
.wb-fuss { display: flex; gap: 8px; margin-top: 18px; padding-top: 14px;
  border-top: 1px solid var(--gridline, #e8e3d6); }
.btn.wb-weg { margin-left: auto; color: #a13b3b; border-color: #e8c9c9; }

/* Das Handy - im Editor klein, in der Vorschau groß. Dieselben Regeln, damit
   beides gleich aussieht und man nicht zweimal nachbessern muss. */
.wb-live { border-left: 1px solid var(--gridline, #e8e3d6); background: #f4f2ee;
  padding: 16px 16px 24px; overflow-y: auto; }
.wb-live h4 { margin: 0 0 9px; font-size: 11px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--text-secondary, #6b7280); }
.wb-handy { border: 8px solid #16211d; border-radius: 22px; overflow: hidden;
  background: #fff; box-shadow: 0 10px 26px rgba(0,0,0,.14); }
.wb-handy.gross { max-width: 380px; margin: 0 auto; }
.wb-hkopf { background: #16211d; color: #fff; padding: 9px 12px; font-size: 11.5px;
  display: flex; gap: 9px; align-items: center; }
.wb-hkopf b { font-family: Georgia, serif; font-weight: 400; }
.wb-hkopf span { margin-left: auto; opacity: .6; }
.wb-hbalken { display: flex; gap: 4px; padding: 11px 14px 0; }
.wb-hbalken span { flex: 1; height: 2px; background: #e6e2d8; border-radius: 2px; }
.wb-hbalken span.an { background: #a8823f; }
.wb-hbild { margin: 11px 14px 0; border-radius: 5px; overflow: hidden; max-height: 190px; }
.wb-hbild img { width: 100%; display: block; object-fit: cover; max-height: 190px; }
.wb-hinhalt { padding: 12px 14px 16px; }
.wb-hst { font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: #9a927f; }
.wb-hinhalt h3 { margin: 5px 0 6px; font: 600 16px/1.3 Georgia, serif; }
.wb-hinhalt p { margin: 0 0 9px; font-size: 12.5px; color: #4b5563; white-space: pre-line; }
.wb-hcode { font-family: "SFMono-Regular", Menlo, Consolas, monospace; font-size: 21px;
  letter-spacing: .1em; background: #f7f4ee; border-radius: 5px; padding: 11px;
  text-align: center; color: #16211d; }
.wb-hcode.zu { font-family: inherit; font-size: 12.5px; letter-spacing: 0; color: #8b8579; }
.wb-hmerk { margin-top: 9px; background: #fdf7e8; border-left: 2px solid #a8823f;
  padding: 7px 10px; font-size: 11.5px; color: #6b5410; }
.wb-habschnitt { padding: 4px 0 18px; margin-bottom: 18px;
  border-bottom: 1px solid #eeeae0; }
.wb-habschnitt:last-child { border-bottom: 0; margin-bottom: 0; }
.wb-hnr { display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; background: #16211d; color: #fff;
  font-size: 11px; font-weight: 700; }
.wb-hfuss { display: flex; gap: 7px; padding: 11px 14px 14px; border-top: 1px solid #eee; }
.wb-hfuss span, .wb-hfuss button { flex: 1; text-align: center; font: inherit;
  font-size: 11.5px; padding: 9px; border-radius: 4px; border: 1px solid #e6e2d8;
  background: #fff; color: #4b5563; cursor: default; }
.wb-hfuss button { cursor: pointer; }
.wb-hfuss button:disabled { opacity: .4; cursor: default; }
.wb-hfuss .b { background: #16211d; color: #fff; border-color: #16211d; }
.wb-ganz { width: 100%; margin-top: 12px; }

.wv-box { position: relative; background: #fff; border-radius: 14px; padding: 22px 24px 26px;
  box-shadow: var(--shadow-lg); width: 100%; max-width: 470px; max-height: 92vh;
  overflow-y: auto; }
.wv-schalter { display: flex; gap: 20px; margin: 12px 0 16px; font-size: 12.5px; }
.wv-schalter label { display: flex; gap: 7px; align-items: center; cursor: pointer; }

/* --- Eigene Platzhalter (v217) --------------------------------------------
   Wilhelm: „Es wäre gut, wenn wir unsere Platzhalter auch selbst erstellen
   könnten." Sie stehen dort, wo auch die Codes stehen - bei der Unterkunft. */
.ph-block { margin: 18px 0 4px; border-top: 1px solid var(--gridline, #e8e3d6);
  padding-top: 16px; }
.ph-kopf-zeile { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.ph-kopf-zeile h4 { margin: 0; font-size: 15px; }
.ph-kopf-zeile .btn { margin-left: auto; }
.ph-block > .detail-note { display: block; max-width: 760px; margin-bottom: 12px; }
.ph-laedt { color: var(--text-secondary, #6b7280); font-size: 13px; padding: 8px 2px; }
.ph-leer { border: 1px dashed #d9d3c4; border-radius: 10px; padding: 15px;
  font-size: 13px; color: var(--text-secondary, #6b7280); line-height: 1.6; }
.ph-karte { border: 1px solid var(--gridline, #e8e3d6); border-radius: 10px;
  margin-bottom: 10px; overflow: hidden; }
.ph-kopf { display: flex; gap: 12px; align-items: center; padding: 9px 12px;
  background: #faf8f4; }
.ph-marke { font-family: "SFMono-Regular", Menlo, Consolas, monospace; font-size: 12px;
  color: #1f4b3f; background: #fff; border: 1px solid var(--gridline, #e8e3d6);
  border-radius: 999px; padding: 3px 10px; flex: none; }
.ph-kopf b { font-size: 13.5px; }
.ph-rechts { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.ph-warn { font-size: 11.5px; color: #6b5410; background: #fff4d6;
  border: 1px solid #f0dfae; border-radius: 999px; padding: 3px 10px; }
.btn.ph-weg { color: #a13b3b; border-color: #e8c9c9; }
.ph-karte textarea { width: 100%; border: 0; border-top: 1px solid var(--gridline, #e8e3d6);
  padding: 11px 12px; font: inherit; font-size: 13.5px; line-height: 1.55;
  resize: vertical; min-height: 66px; display: block; }
.ph-karte textarea:focus { outline: 2px solid rgba(31,75,63,.25); outline-offset: -2px; }
.ph-stand { font-size: 12px; color: var(--text-secondary, #6b7280); min-height: 18px; }

.pn-box { max-width: 520px; }
.pn-vorschau { background: #faf8f4; border: 1px solid var(--gridline, #e8e3d6);
  border-radius: 8px; padding: 10px 12px; margin-top: 8px; font-size: 12.5px;
  color: var(--text-secondary, #4b5563); line-height: 1.55; }
.pn-vorschau code { font-family: "SFMono-Regular", Menlo, Consolas, monospace;
  color: #1f4b3f; }

.pu-box { max-width: 540px; }
.pu-wahl { display: flex; gap: 8px; margin: 4px 0 10px; }
.pu-liste { max-height: 320px; overflow-y: auto; border: 1px solid var(--gridline, #e8e3d6);
  border-radius: 10px; }
.pu-zeile { display: flex; gap: 10px; align-items: center; padding: 8px 12px;
  font-size: 13.5px; cursor: pointer; }
.pu-zeile + .pu-zeile { border-top: 1px solid var(--gridline, #e8e3d6); }
.pu-zeile:hover { background: #faf8f4; }
/* Ein eigener Platzhalter (v217) sieht anders aus als ein eingebauter -
   sonst sucht man beim Schreiben, welcher von beiden gerade gemeint ist. */
.wb-chip.eigen { border-color: #d9bd7f; background: #fdf9f0; color: #8a6a1f; }
.wb-chip.eigen:hover { border-color: #a8823f; background: #fff; }

/* --- Die Gästemappen-Werkbank (v218) --------------------------------------
   Dieselbe Form wie beim Wegweiser: links die Kacheln, in der Mitte die
   Bearbeitung, rechts das Handy des Gastes. Wilhelm: „ich weiß nicht ganz
   genau, wo es letztendlich im Handyformat landet" - deshalb ist die
   bearbeitete Kachel dort golden umrandet. */
.gm-admin-tab.matt { opacity: .58; }
.gw-kopf { display: flex; align-items: center; gap: 14px; padding: 15px 20px;
  border-bottom: 1px solid var(--gridline, #e8e3d6); }
.gw-kopf h3 { margin: 0; font: 600 17px/1.3 Georgia, serif; }
.gw-sub { color: var(--text-secondary, #6b7280); font-size: 12.5px; margin-top: 1px; }
.gw-ziel { padding: 8px 11px; border: 1px solid var(--gridline, #e8e3d6);
  border-radius: 8px; font: inherit; font-size: 13px; max-width: 300px; }
.gw-stand { font-size: 12px; color: var(--text-secondary, #6b7280); min-width: 110px; }
.gw-stand.gut { color: #1f4b3f; }
.gw-stand.schlecht { color: #a13b3b; font-weight: 600; }
.gw-rechts { margin-left: auto; display: flex; gap: 9px; }
.gw-ukfelder { padding: 12px 20px 4px; background: #faf8f4;
  border-bottom: 1px solid var(--gridline, #e8e3d6); }

.gw-werk { display: grid; grid-template-columns: 300px minmax(0, 1fr) 336px;
  min-height: 640px; }
.gw-liste { border-right: 1px solid var(--gridline, #e8e3d6); background: #fcfbf9;
  padding: 13px 12px; display: flex; flex-direction: column; gap: 7px;
  max-height: 78vh; overflow-y: auto; }
.gw-karte { display: flex; gap: 10px; align-items: center; padding: 9px 10px;
  border-radius: 9px; border: 1px solid transparent; background: #fff; cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.gw-karte:hover { border-color: #dcd6c8; }
.gw-karte.an { border-color: #1f4b3f; box-shadow: 0 0 0 2px rgba(31,75,63,.13); }
.gw-karte.aus { opacity: .55; }
.gw-kic { flex: none; width: 28px; height: 28px; border-radius: 7px; background: #f2efe8;
  display: flex; align-items: center; justify-content: center; }
.gw-ic { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; color: #1f4b3f; }
.gw-kt { flex: 1 1 auto; min-width: 0; }
.gw-kt b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.gw-kt small { display: block; color: var(--text-secondary, #6b7280); font-size: 11px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gw-chip { flex: none; font-size: 10.5px; border-radius: 999px; padding: 2px 8px;
  border: 1px solid var(--gridline, #e8e3d6); color: #6b7280; background: #faf8f4; }
.gw-chip.nach { border-color: #d9bd7f; color: #8a6a1f; background: #fdf9f0; }
.gw-chip.spaet { border-color: #b9c8e4; color: #33507f; background: #f2f6fd; }
.gw-chip.aus { border-color: #e0d8d8; color: #9b8f8f; text-decoration: line-through; }
.gw-hinweis { margin-top: auto; padding-top: 12px; font-size: 11.5px; line-height: 1.5;
  color: var(--text-secondary, #6b7280); border-top: 1px solid var(--gridline, #e8e3d6); }
.gw-geerbt { margin-left: auto; align-self: center; font-size: 11.5px; color: #8a6a1f;
  background: #fdf9f0; border: 1px solid #e6d5ae; border-radius: 999px; padding: 2px 10px; }

.gw-edit { padding: 18px 22px 24px; overflow-y: auto; max-height: 78vh; }
.gw-symbole { display: flex; gap: 6px; flex-wrap: wrap; }
.gw-sym { width: 38px; height: 38px; border-radius: 9px;
  border: 1px solid var(--gridline, #e8e3d6); background: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center; }
.gw-sym .gw-ic { width: 19px; height: 19px; }
.gw-sym:hover { border-color: #c9c2b2; }
.gw-sym.an { border-color: #1f4b3f; background: #f2f7f5;
  box-shadow: 0 0 0 2px rgba(31,75,63,.12); }
.gw-sichthinweis { background: #faf8f4; border: 1px solid var(--gridline, #e8e3d6);
  border-radius: 9px; padding: 10px 12px; font-size: 12.5px; color: #4b5563;
  line-height: 1.55; margin-top: 8px; }
.gw-an { display: flex; gap: 8px; align-items: center; font-size: 13.5px; cursor: pointer; }

.gw-live { border-left: 1px solid var(--gridline, #e8e3d6); background: #f4f2ee;
  padding: 15px 16px 24px; overflow-y: auto; max-height: 78vh; }
.gw-live h4 { margin: 0 0 9px; font-size: 11px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--text-secondary, #6b7280); }
.gw-schalt { display: flex; gap: 5px; margin-bottom: 11px; }
.gw-schalt button { flex: 1; border: 1px solid var(--gridline, #e8e3d6); background: #fff;
  border-radius: 7px; padding: 6px 4px; font: inherit; font-size: 11.5px;
  cursor: pointer; color: #4b5563; }
.gw-schalt button.an { background: #1d2c49; border-color: #1d2c49; color: #fff; }
.gw-hbody { padding: 12px 13px 16px; }
.gw-hoben { font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: #9a927f; }
.gw-hbody h1 { margin: 4px 0 3px; font: 600 15px/1.28 Georgia, serif; }
.gw-hsub { font-size: 10.5px; color: #7b8286; margin-bottom: 10px; }
.gw-hbanner { background: #eef4f1; border: 1px solid #d8e5df; border-radius: 7px;
  padding: 8px 9px; font-size: 10px; color: #3a5a4e; margin-bottom: 9px; }
.gw-hzus { border: 1px solid #eeeae0; border-radius: 7px; padding: 8px; font-size: 10px;
  margin-bottom: 7px; }
.gw-hzus b { display: block; font-size: 11px; margin-bottom: 2px; }
.gw-hzus .preis { float: right; color: #a8823f; font-weight: 700; }
.gw-hkacheln { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.gw-hk { border: 1px solid #eeeae0; border-radius: 7px; padding: 9px 8px; font-size: 10.5px; }
.gw-hk .gw-ic { width: 15px; height: 15px; display: block; margin-bottom: 4px; }
.gw-hk b { display: block; font-size: 11px; }
.gw-hk small { color: #8b8579; font-size: 9.5px; }
.gw-hk.breit { grid-column: 1 / -1; }
.gw-hk.dunkel { background: #16211d; color: #fff; border-color: #16211d; }
.gw-hk.dunkel .gw-ic { color: #fff; }
.gw-hk.dunkel small { color: rgba(255,255,255,.6); }
.gw-hk.zu { border-style: dashed; opacity: .5; }
.gw-hk.markiert { border-color: #a8823f; box-shadow: 0 0 0 2px rgba(168,130,63,.3); }

.gw-umzug { display: flex; gap: 16px; align-items: center; border: 1px dashed #cfc8b8;
  border-radius: 10px; padding: 18px 20px; background: #faf8f4; }
.gw-umzug-ic { font-size: 22px; }
.gw-umzug b { display: block; font-size: 14px; margin-bottom: 2px; }
.gw-umzug p { margin: 0; font-size: 12.5px; color: var(--text-secondary, #6b7280);
  line-height: 1.55; max-width: 620px; }
.gw-umzug .btn { margin-left: auto; flex: none; text-decoration: none; }

/* --- Zusatzverkäufe bei der Unterkunft (v218) ---------------------------- */
.ux-block { margin: 18px 0 4px; border-top: 1px solid var(--gridline, #e8e3d6);
  padding-top: 16px; }
.ux-block > .detail-note { display: block; max-width: 780px; margin-bottom: 12px; }
.ux-zeile { display: flex; gap: 13px; align-items: center;
  border: 1px solid var(--gridline, #e8e3d6); border-radius: 10px;
  padding: 10px 13px; margin-bottom: 9px; background: #fff; }
.ux-zeile.aus { background: #fbfaf8; opacity: .72; }
.ux-schalter { position: relative; width: 40px; height: 22px; border-radius: 999px;
  background: #d7d2c6; flex: none; border: 0; cursor: pointer; padding: 0; }
.ux-schalter.an { background: #1f4b3f; }
.ux-schalter::after { content: ""; position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .12s; }
.ux-schalter.an::after { left: 21px; }
.ux-ic { width: 32px; height: 32px; border-radius: 8px; background: #f2efe8; flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 15px; }
.ux-mini { width: 44px; height: 32px; border-radius: 6px; flex: none;
  background-size: cover; background-position: center; border: 1px solid #e8e3d6; }
.ux-t { flex: 1 1 auto; min-width: 0; }
.ux-t b { display: block; font-size: 14px; }
.ux-t small { display: block; color: var(--text-secondary, #6b7280); font-size: 11.5px; }
.ux-werb { display: block; color: #8a6a1f; font-size: 11.5px; margin-top: 2px; }
.ux-art { flex: none; font-size: 11.5px; color: var(--text-secondary, #6b7280);
  min-width: 100px; text-align: right; }
.ux-preis { flex: none; width: 92px; }
.ux-preis input { width: 100%; padding: 6px 8px; border: 1px solid var(--gridline, #e8e3d6);
  border-radius: 7px; font: inherit; font-size: 13px; text-align: right;
  font-family: "SFMono-Regular", Menlo, Consolas, monospace; }
.ux-preis input.eigen { border-color: #d9bd7f; background: #fdf9f0; }
.ux-akt { flex: none; display: flex; gap: 6px; }
.ux-marke { font-size: 10.5px; border: 1px solid #d9bd7f; color: #8a6a1f;
  border-radius: 999px; padding: 2px 8px; background: #fff; margin-left: 6px; }
.ux-stand { font-size: 12px; color: var(--text-secondary, #6b7280); min-height: 18px; }
.gw-chip.ersetzt { border-color: #d8d2c4; color: #8b8579; background: #f5f2ec;
  font-style: italic; }
/* Seit v219: der alte Fließtext lässt sich in Schritte verwandeln. */
.wb-alttext { margin-top: 10px; border: 1px solid #f0dfae; background: #fff9ea;
  border-radius: 9px; padding: 11px 12px; font-size: 12px; color: #6b5410;
  line-height: 1.5; }
.wb-alttext b { display: block; font-size: 12.5px; margin-bottom: 3px; }
.wb-alttext span { display: block; margin-bottom: 8px; }

/* --- Übersetzen (v220) ---------------------------------------------------- */
.ub-box { max-width: 560px; }
.ub-liste { margin: 8px 0 12px; }
.ub-kopf { font-size: 12px; color: var(--text-secondary, #6b7280); margin-bottom: 8px; }
.ub-zeile { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 10px;
  align-items: center; padding: 9px 11px; border: 1px solid var(--gridline, #e8e3d6);
  border-radius: 9px; margin-bottom: 7px; cursor: pointer; }
.ub-zeile:hover { background: #faf8f4; }
.ub-name { font-size: 13.5px; font-weight: 600; }
.ub-stand { font-size: 11.5px; border-radius: 999px; padding: 2px 9px; }
.ub-stand.offen { background: #fff4d6; border: 1px solid #f0dfae; color: #6b5410; }
.ub-stand.fertig { background: #eef4f1; border: 1px solid #d8e5df; color: #2f5648; }
.ub-mini { grid-column: 2 / -1; font-size: 11.5px; color: var(--text-secondary, #6b7280); }
.ub-hinweis { font-size: 11.5px; color: var(--text-secondary, #6b7280);
  line-height: 1.55; margin-top: 4px; }
.ub-warn { background: #fff4d6; border: 1px solid #f0dfae; border-radius: 9px;
  padding: 11px 13px; font-size: 12.5px; color: #6b5410; line-height: 1.55; }
.ub-ueber { display: flex; gap: 8px; align-items: center; font-size: 12.5px;
  color: var(--text-secondary, #4b5563); margin: 4px 0 10px; cursor: pointer; }
.ub-lauf { background: #faf8f4; border: 1px solid var(--gridline, #e8e3d6);
  border-radius: 9px; padding: 10px 12px; font-size: 12.5px; margin-bottom: 6px; }

/* --- Zusatzverkauf-Werkbank (v222) ----------------------------------------
   Wilhelm: „dann, wenn man auf Zusatzverkauf hinzufügen klickt, gelangt man
   wieder auf diese Symbolübersicht, die veraltet dargestellt ist."
   Derselbe Aufbau wie beim Wegweiser - links arbeiten, rechts das Handy. */
.ux-box { max-width: 1180px; }
.wb-werk.ux-werk { grid-template-columns: minmax(0, 1fr) 340px; }
@media (max-width: 1080px) { .wb-werk.ux-werk { grid-template-columns: 1fr; }
  .ux-werk .wb-live { border-left: 0; border-top: 1px solid var(--gridline, #e8e3d6); } }

/* In der Werkbank ist der Hinweis eine leise Zeile unter dem Feld - kein
   eigener Kasten. Als <span> hätte der Kasten aus .detail-note die Nachbarn
   überlappt (inline-Element, kein Platzhalter im Fluss). */
.ux-werk .detail-note, .ux-werk .wb-feld .detail-note {
  display: block; margin-top: 5px; background: none; border: 0; padding: 0;
  font-size: 11.5px; line-height: 1.5; color: var(--text-secondary, #6b7280); }
.ux-bildkasten { display: flex; gap: 14px; align-items: flex-start;
  border: 1px solid var(--gridline, #e8e3d6); border-radius: 10px; padding: 13px;
  background: #faf8f4; }
.ux-bildplatz { flex: none; width: 190px; }
.ux-bildplatz img { width: 190px; height: 118px; object-fit: cover; border-radius: 8px;
  border: 1px solid var(--gridline, #e8e3d6); display: block; }
.ux-bildleer { width: 190px; height: 118px; border: 1px dashed #cfc8b8; border-radius: 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; color: var(--text-secondary, #6b7280); font-size: 12px; background: #fff;
  cursor: pointer; text-align: center; padding: 8px; font-family: inherit; }
.ux-bildleer:hover { border-color: #1f4b3f; color: #1f4b3f; }
.ux-bildtext { flex: 1 1 auto; min-width: 0; }
.ux-bildknoepfe { display: flex; gap: 7px; margin-bottom: 7px; }
.ux-bildlaedt { font-size: 12px; color: #1f4b3f; }

.ux-symbole { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
.ux-sym { width: 34px; height: 34px; border-radius: 8px;
  border: 1px solid var(--gridline, #e8e3d6); background: #fff; cursor: pointer;
  font-size: 15px; line-height: 1; padding: 0; }
.ux-sym.an { border-color: #1f4b3f; background: #f2f7f5;
  box-shadow: 0 0 0 2px rgba(31,75,63,.12); }

.ux-werbung { background: #fdfaf3; border: 1px solid #e6d5ae; border-radius: 10px;
  padding: 13px 15px; margin-bottom: 15px; }
.ux-werbung h5 { margin: 0 0 9px; font-size: 12.5px; color: #8a6a1f;
  letter-spacing: .04em; text-transform: uppercase; }

/* Das Handy rechts - die Karte so, wie sie in der Gästemappe steht. */
.ux-hbody { padding: 12px 13px 16px; max-height: 60vh; overflow-y: auto; }
.ux-hoben { font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: #9a927f; }
.ux-hbody h2 { margin: 4px 0 10px; font: 600 15px/1.3 Georgia, serif; }
.ux-karte { border: 1px solid #eeeae0; border-radius: 9px; overflow: hidden;
  margin-bottom: 9px; }
.ux-karte.schmal { display: grid; grid-template-columns: 74px 1fr; }
.ux-karte img { width: 100%; height: 104px; object-fit: cover; display: block; }
.ux-kzeichen { background: linear-gradient(150deg, #e9e3d6, #d9d2c2);
  display: flex; align-items: center; justify-content: center; font-size: 19px; }
.ux-kinhalt { padding: 10px 11px 12px; min-width: 0; }
.ux-kwas { font-size: 9.5px; letter-spacing: .13em; color: #9a927f; display: block; }
.ux-kinhalt b { display: block; font: 600 14px/1.3 Georgia, serif; margin: 3px 0 4px; }
.ux-kinhalt p { margin: 0 0 9px; font-size: 11.5px; color: #5b6470; line-height: 1.5; }
.ux-kfuss { display: flex; align-items: center; gap: 8px; }
.ux-kpreis { font-size: 15px; font-weight: 700; }
.ux-kpreis small { display: block; font-size: 9.5px; color: #8b8579; font-weight: 400; }
.ux-kdazu { margin-left: auto; border: 1px solid #a8823f; color: #8a6a1f;
  border-radius: 6px; padding: 6px 13px; font-size: 11.5px; background: #fff; }
.ux-hhinweis { margin-top: 10px; background: #f7f4ee; border-radius: 6px;
  padding: 10px 11px; font-size: 11.5px; color: #5b6470; line-height: 1.55; }

/* Seit v223: der Löschen-Knopf bei den automatischen Nachrichten. Er steht
   rechts und abgesetzt - man findet ihn, aber man greift nicht versehentlich
   hinein. Nach dem ersten Klick wird er rot und fragt nach. */
/* Die Knopfreihe war bisher schlichter Textfluss - ohne Flexbox landete der
   Löschen-Knopf in einer zweiten Zeile unter „Speichern", also genau dort,
   wo man ihn nicht sucht und leicht trifft. */
.au-modal .modal-actions { display: flex; align-items: center; gap: 9px;
  flex-wrap: wrap; }
.au-modal .au-modal-hinweis { flex: 1 1 160px; min-width: 0; margin-left: 4px; }
.btn.au-loeschen { margin-left: auto; color: #a13b3b; border-color: #e8c9c9; }
.btn.au-loeschen:hover { background: #fdf3f3; }
.btn.au-loeschen.sicher { background: #a13b3b; border-color: #a13b3b; color: #fff;
  font-weight: 600; }

/* --- Rollen-Tafel in der Benutzerverwaltung (v225) ------------------------
   Wilhelm bat um eine Rolle für die Gästebetreuung, die es längst gab - er
   hat sie nur nicht gefunden, weil in der Liste eine veraltete Klammer
   stand. Eine Rolle, die niemand versteht, wird nicht vergeben; und dann
   bekommt jemand einen Admin-Zugang, weil es schneller geht.

   BEWUSST KEINE <table>: Der erste Versuch war eine, und tabellen.js hat sie
   prompt als Datentabelle behandelt - mit Sortierpfeilen und einer
   Suchzeile über einem Erklärtext. Dazu schob der lange Inhalt die Seite
   auf 2000 Pixel Breite. Drei Karten tun dasselbe, ohne beides. */
.rollen-tafel { margin-bottom: 22px; }
.rollen-karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}
.rollen-karte {
  border: 1px solid var(--gridline, #e8e3d6);
  border-radius: 11px;
  padding: 15px 17px 16px;
  background: #fff;
  min-width: 0;
}
.rollen-karte.hervor { background: #fdfaf3; border-color: #e9dcc2; }
.rollen-karte h4 { margin: 0; font: 600 14.5px/1.3 Georgia, serif; }
.rollen-wofuer {
  margin: 2px 0 11px;
  font-size: 11.5px;
  color: var(--text-secondary, #6b7280);
}
.rollen-karte p { margin: 0 0 8px; font-size: 12.5px; line-height: 1.55; }
.rollen-karte p:last-child { margin-bottom: 0; }
.rollen-ja b { color: #1f4b3f; }
.rollen-halb { color: var(--text-secondary, #6b7280); }
.rollen-halb b { color: #8a6a1f; }
.rollen-nein { color: var(--text-secondary, #6b7280); }
.rollen-nein b { color: #a13b3b; }


/* --- Nur zum Ansehen (v225) -----------------------------------------------
   Wilhelm, 15.08.2026: „Rechnungen nicht erstellen, aber sie darf sie
   sehen." Ein Knopf, der mit einer Absage endet, ist schlechter als kein
   Knopf - deshalb verschwinden die Einstiege zum Ändern ganz. Die Sperre
   selbst sitzt im Server (siehe _path_allowed_for_role in app.py); das hier
   erspart nur den vergeblichen Klick. */
body.nur-lesen [data-schreibt] { display: none !important; }
.nur-lesen-hinweis {
  margin-bottom: 18px;
  border-left: 3px solid var(--gold, #c39a48);
  background: #fdfaf3;
}
.nur-lesen-hinweis b { color: #8a6a1f; }

/* =========================================================================
   Das Arbeitsdashboard (v230)

   Wilhelm, 16.08.2026: „sowas Schlaues auf einen Blick, die Hauptseite wenn
   man sich einloggt."

   Die Seite hat genau zwei Ebenen: oben eine Reihe Zahlen zum Überfliegen,
   darunter Karten zum Lesen. Jede Zeile ist ein Link - eine Startseite, von
   der aus man nirgendwohin kommt, ist eine Litfaßsäule.
   ========================================================================= */
.db-shell { max-width: 1500px; }

.db-kopf {
  display: flex; align-items: flex-start; gap: 16px;
  margin: 4px 0 20px;
}
.db-kopf-rechts { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.db-gruss {
  font-family: Georgia, "Times New Roman", serif; font-weight: 400;
  font-size: 26px; margin: 0 0 2px; color: var(--text-primary);
}
.db-datum { margin: 0; color: var(--text-secondary); font-size: 13.5px; }
.db-stand { margin: 16px 0 0; color: var(--text-muted); font-size: 11.5px; }

/* --- Die Zahlenreihe --------------------------------------------------- */
.db-zahlen { display: flex; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.db-zahl {
  flex: 1 1 150px; background: var(--surface-1); border: 1px solid var(--border);
  border-radius: 7px; padding: 12px 15px; text-decoration: none; color: inherit;
  transition: border-color .12s ease, transform .12s ease;
}
.db-zahl:hover { border-color: var(--navy); transform: translateY(-1px); }
.db-zahl b {
  display: block; font-size: 27px; line-height: 1.15; font-weight: 400;
  font-family: Georgia, "Times New Roman", serif; color: var(--text-primary);
}
.db-zahl .db-einheit { font-size: 16px; margin-left: 2px; }
.db-zahl small {
  color: var(--text-muted); font-size: 11px; letter-spacing: .07em;
  text-transform: uppercase;
}
.db-zahl.warn b { color: var(--critical); }
.db-zahl.gut b { color: var(--good); }

/* --- Die Karten -------------------------------------------------------- */
.db-raster {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
  align-items: start;
}
.db-karte {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: 7px; padding: 14px 16px 15px;
}
.db-karte.breit { grid-column: span 2; }
.db-karte h2 {
  font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted); margin: 0 0 8px; font-weight: 600;
  display: flex; align-items: center; gap: 7px;
}
.db-karte h2.db-zwischen { margin-top: 15px; }
.db-n {
  background: var(--navy); color: #fff; border-radius: 9px; padding: 0 7px;
  font-size: 11px; letter-spacing: 0;
}
.db-n.rot { background: var(--critical); }

.db-zeile {
  display: flex; align-items: center; gap: 9px; padding: 7px 0;
  border-top: 1px solid var(--gridline); text-decoration: none; color: inherit;
  font-size: 13.5px;
}
.db-zeile:first-of-type { border-top: 0; }
.db-zeile:hover { background: rgba(29,44,73,.035); }
.db-zeile.ich { font-weight: 600; }
.db-zeile.db-still { color: var(--text-muted); }
.db-zeile .db-zeit { color: var(--text-muted); font-size: 12px; white-space: nowrap; }
.db-zeile .db-wer { font-weight: 600; white-space: nowrap; }
.db-zeile .db-wer.dringend { color: var(--critical); }
.db-zeile .db-wo {
  color: var(--text-secondary); font-size: 12.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.db-zeile .db-rechts { margin-left: auto; white-space: nowrap; }
.db-zeile .db-pfeil { color: var(--text-muted); }
.db-punkt { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.db-leer { color: var(--text-muted); font-size: 12.5px; padding: 6px 0; margin: 0; }
.db-mehr { margin: 8px 0 0; font-size: 12.5px; }
.db-mehr a { color: var(--navy); }

/* Die Fahnen rechts: dieselben drei Stufen wie im Online-Check-in (v229) -
   rot heißt „etwas tun", gelb „ansehen", grau „nur zur Kenntnis". */
.db-fahne { border-radius: 10px; padding: 1px 8px; font-size: 11px; white-space: nowrap; }
.db-fahne-gut { background: rgba(12,163,12,.10); color: #0b7a0b; }
.db-fahne-rot { background: rgba(208,59,59,.10); color: var(--critical); }
.db-fahne-gelb { background: rgba(200,150,30,.14); color: #8a6a2f; }
.db-fahne-grau { background: rgba(20,19,15,.06); color: var(--text-secondary); }

/* --- Karten wählen ----------------------------------------------------- */
.db-wahl-huelle {
  position: fixed; inset: 0; background: rgba(19,31,54,.45); z-index: 60;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.db-wahl {
  background: var(--surface-1); border-radius: 8px; padding: 20px 22px 18px;
  width: min(560px, 100%); max-height: 85vh; overflow: auto; position: relative;
}
.db-wahl h2 { margin: 0 0 4px; font-size: 18px; font-weight: 600; }
.db-wahl-text { margin: 0 0 14px; color: var(--text-secondary); font-size: 13px; }
.db-wahl-x {
  position: absolute; top: 10px; right: 12px; background: none; border: 0;
  font-size: 24px; line-height: 1; color: var(--text-muted); cursor: pointer;
}
.db-wahl-zeile {
  display: flex; gap: 10px; align-items: flex-start; padding: 9px 0;
  border-top: 1px solid var(--gridline); cursor: pointer; font-size: 13.5px;
}
.db-wahl-zeile:first-child { border-top: 0; }
.db-wahl-zeile input { margin-top: 3px; width: 16px; height: 16px; flex: none; }
.db-wahl-zeile small { color: var(--text-secondary); font-size: 12.5px; }
.db-wahl-fuss {
  display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px;
  padding-top: 12px; border-top: 1px solid var(--gridline);
}

@media (max-width: 1100px) {
  .db-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .db-karte.breit { grid-column: span 2; }
}
@media (max-width: 760px) {
  .db-raster { grid-template-columns: 1fr; }
  .db-karte.breit { grid-column: span 1; }
  .db-zahl { flex-basis: 45%; }
}

/* =========================================================================
   Register „Entwürfe" bei den automatischen Nachrichten (v231)

   Wilhelm, 16.08.2026: „die Nachrichten-Vorlagen sollen bearbeitbar sein …
   neues Register anlegen Entwürfe."

   Links die Liste zum Sortieren, rechts der offene Entwurf mit Vorschau.
   Dieselbe Aufteilung wie in der Gästemappen-Werkbank - wer eine Seite des
   Programms kennt, kennt diese auch.
   ========================================================================= */
.au-reiter {
  display: flex; gap: 2px; border-bottom: 2px solid var(--gridline);
  margin: 0 0 18px;
}
.au-reiter-knopf {
  background: none; border: 0; border-bottom: 2px solid transparent;
  margin-bottom: -2px; padding: 8px 16px; font-size: 13.5px; font-family: inherit;
  color: var(--text-secondary); cursor: pointer;
}
.au-reiter-knopf.on {
  color: var(--navy); font-weight: 600; border-bottom-color: var(--gold);
}
.au-reiter-zahl {
  background: var(--gridline); border-radius: 9px; padding: 0 6px; font-size: 11px;
  margin-left: 5px; color: var(--text-secondary);
}

.ew-zwei {
  display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 16px;
  align-items: start;
}
.ew-liste-kasten, .ew-editor {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: 7px; padding: 14px 16px 15px;
}
.ew-h3 {
  font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted); margin: 0 0 10px; font-weight: 600;
}
.ew-editor .ew-h3 { margin-top: 18px; }
.ew-editor > div > .ew-h3:first-child { margin-top: 0; }

.ew-zeile {
  display: flex; gap: 9px; align-items: center; padding: 9px 0;
  border-top: 1px solid var(--gridline); cursor: pointer;
}
.ew-zeile:first-child { border-top: 0; }
.ew-zeile.on { background: rgba(29,44,73,.05); margin: 0 -16px; padding: 9px 16px; }
.ew-zeile.zieht { opacity: .4; }
.ew-griff { color: var(--baseline); cursor: grab; }
.ew-symbol { font-size: 16px; }
.ew-namen { min-width: 0; }
.ew-namen b { display: block; font-weight: 600; font-size: 13.5px; }
.ew-namen small {
  display: block; color: var(--text-secondary); font-size: 12px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ew-rechts {
  margin-left: auto; color: var(--text-muted); font-size: 11px; white-space: nowrap;
}
.ew-sprachmarke { margin-left: 4px; }

.ew-reihe { display: flex; gap: 10px; flex-wrap: wrap; }
.ew-schmal { flex: 0 0 90px; }
.ew-breit { flex: 1 1 240px; }
.ew-mittel { flex: 0 0 220px; }

.ew-platzhalter { margin: 6px 0 0; font-size: 12px; color: var(--text-secondary); }
.ew-chip {
  background: #f0ece2; border: 0; border-radius: 4px; padding: 2px 7px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px;
  margin: 0 4px 4px 0; cursor: pointer; color: var(--text-primary);
}
.ew-chip:hover { background: var(--gold); color: #fff; }
.ew-sprachchip {
  background: #f0ece2; border-radius: 4px; padding: 1px 6px; font-size: 11.5px;
  margin-right: 4px;
}
.ew-vorschau {
  background: #fbfaf7; border: 1px dashed var(--gridline); border-radius: 5px;
  padding: 11px 13px; font-size: 13.5px; white-space: pre-wrap; color: var(--text-primary);
  min-height: 60px;
}
.ew-sprachen { margin-top: 12px; }
.ew-hinweis { color: var(--text-muted); font-size: 12px; margin: 10px 0 0; }
.ew-fuss {
  display: flex; gap: 8px; align-items: center; margin-top: 16px;
  padding-top: 13px; border-top: 1px solid var(--gridline); flex-wrap: wrap;
}
.ew-hinweis-zeile { font-size: 12.5px; color: var(--text-secondary); }
.ew-hinweis-zeile.gut { color: var(--good); }
.ew-hinweis-zeile.schlecht { color: var(--critical); }
.ew-fuss .au-loeschen { margin-left: auto; }
.ew-leer { color: var(--text-muted); font-size: 13px; padding: 18px 0; }

@media (max-width: 1000px) {
  .ew-zwei { grid-template-columns: 1fr; }
}


/* --- Dashboard v232: Kacheln verschieben, Größe wählen, Nummernkreise ----
   Wilhelm, 16.08.2026: „dass sich die Benutzer die Kacheln selbst anordnen
   können per Drag and Drop, größer machen, kleiner machen" und „nur nach
   Nummernkreisen sortiert und einklappbar". */
.db-schmal { grid-column: span 1; }
.db-breit  { grid-column: span 2; }
.db-voll   { grid-column: 1 / -1; }

.db-karte { position: relative; }
.db-karte.zieht { opacity: .45; }
.db-karte.ziel { outline: 2px dashed var(--gold); outline-offset: 3px; }
.db-griff {
  color: var(--baseline); cursor: grab; font-size: 13px; letter-spacing: -1px;
  margin-right: 2px;
}
.db-karte:active .db-griff { cursor: grabbing; }
.db-groesse {
  margin-left: auto; background: none; border: 0; color: var(--text-muted);
  font-size: 14px; cursor: pointer; padding: 0 2px; line-height: 1;
}
.db-groesse:hover { color: var(--navy); }

/* Die Knöpfe der Nummernkreise (SMG, WOB …) */
.db-kreise { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.db-kreis {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 14px;
  padding: 3px 11px; font-size: 12.5px; font-family: inherit; cursor: pointer;
  color: var(--text-secondary);
}
.db-kreis:hover { border-color: var(--navy); }
.db-kreis.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.db-kreis-zahl { opacity: .6; margin-left: 4px; font-size: 11px; }

/* Eine Gruppe je Nummernkreis - zuklappbar */
.db-gruppe + .db-gruppe { margin-top: 4px; }
.db-gruppe-kopf {
  display: flex; align-items: center; gap: 7px; width: 100%; text-align: left;
  background: none; border: 0; border-top: 1px solid var(--gridline);
  padding: 7px 0; cursor: pointer; font-family: inherit; font-size: 12.5px;
  color: var(--text-secondary);
}
.db-gruppe:first-child .db-gruppe-kopf { border-top: 0; }
.db-gruppe-kopf b { color: var(--text-primary); font-size: 13px; letter-spacing: .04em; }
.db-gruppe-pfeil { color: var(--text-muted); width: 10px; }
.db-gruppe-name {
  color: var(--text-muted); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.db-gruppe-kopf .db-n { margin-left: auto; }
.db-gruppe.zu .db-gruppe-inhalt { display: none; }
.db-gruppe-inhalt .db-zeile:first-of-type { border-top: 1px solid var(--gridline); }

@media (max-width: 1100px) {
  .db-breit, .db-voll { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .db-schmal, .db-breit, .db-voll { grid-column: 1 / -1; }
}

/* --- Automatische Nachrichten im Buchungsfenster (v232) -------------------
   Wilhelm, 16.08.2026: „dass man sieht, welche automatische Nachrichten
   anstehen" und sie vorziehen kann. Bewusst ABGESETZT von den Entwürfen
   darunter: Das eine geht von allein raus, das andere nur auf Klick - und
   diese Unterscheidung ist die wichtigste auf der ganzen Seite. */
.fk-automatik {
  border: 1px solid var(--gridline); border-radius: 6px; padding: 9px 11px 10px;
  margin: 10px 0 4px; background: rgba(29,44,73,.025);
}
.fk-automatik-kopf { margin-bottom: 6px; font-size: 12.5px; }
.fk-automatik-kopf .muted { margin-left: auto; font-size: 11px; }
.fk-au-zeile {
  display: flex; align-items: center; gap: 8px; padding: 5px 0;
  border-top: 1px solid var(--gridline); font-size: 12.5px;
}
.fk-au-zeile:first-of-type { border-top: 0; }
.fk-au-zeile.aus { opacity: .6; }
.fk-au-sym { font-size: 14px; }
.fk-au-txt { min-width: 0; display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.fk-au-txt b { font-weight: 600; }
.fk-au-zeile .btn { margin-left: auto; flex: none; }
.fk-au-gelaufen {
  margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--gridline);
  display: flex; flex-wrap: wrap; gap: 5px;
}
.fk-au-fertig {
  background: rgba(12,163,12,.09); color: #0b7a0b; border-radius: 10px;
  padding: 1px 8px; font-size: 11px;
}

/* =========================================================================
   Die Kommunikationsspalte wird schmaler an allem, was nicht Gespräch ist
   (v233)

   Wilhelm, 16.08.2026: „Hier im Bild sieht man wenig von der Kommunikation.
   Es ist mehr gewollt, dass diese Symbole und die Möglichkeiten kleiner sind
   und mehr von dem tatsächlichen Kommunikationsverlauf erkennbar ist."

   Er hat recht: Bei acht Nachrichten sah man drei. Werkzeug gehört an den
   Rand, der Inhalt in die Mitte - also wird alles Bedienbare zusammengezogen
   und die Fläche, die frei wird, bekommt der Verlauf.
   ========================================================================= */
.fk-spalte { max-height: 76vh; }
.fk-inhalt { min-height: 300px; }

/* Der Kopf: eine Zeile statt zwei */
.fk-kopf { padding: 8px 11px; font-size: 12.5px; }
.fk-kopf .fk-ki { font-size: 10.5px; padding: 3px 8px; }

/* Die Entwurfs-Knöpfe: kleiner, enger, und standardmäßig nur eine Reihe.
   Wer mehr braucht, klappt sie mit „alle N" auf - das war schon vorher so,
   nur nahmen sie vorher drei Zeilen ein, bevor überhaupt jemand fragte. */
.fk-vorlagen {
  display: flex; flex-wrap: wrap; gap: 4px; padding: 7px 11px 0;
}
/* KEINE max-height mehr (v234).
   In v233 stand hier „max-height: 62px; overflow: hidden" - das sollte die
   Leiste auf eine Reihe begrenzen. Es hat aber die ZWEITE Reihe mittendurch
   geschnitten: Auf Wilhelms Bildschirm stand „Gästemappe senden" nur zur
   Hälfte da und sah aus wie ein kaputtes Fenster. Begrenzt wird jetzt über
   die ANZAHL der Knöpfe (siehe kalender-kommunikation.js) - ein halber
   Knopf ist schlimmer als ein Knopf weniger. */
.fk-vorlagen .komm-vorlage-chip {
  font-size: 10.5px; font-weight: 500; padding: 2px 8px;
}

/* Der Kasten „Geht von allein raus": zusammengeschoben auf das, was zählt */
.fk-automatik { margin: 8px 11px 2px; padding: 6px 9px 7px; }
.fk-automatik-kopf {
  padding: 0 0 4px; border-bottom: 1px solid var(--gridline); font-size: 11.5px;
  background: none;
}
.fk-au-zeile { padding: 4px 0; font-size: 11.5px; gap: 6px; }
.fk-au-sym { font-size: 12px; }
.fk-au-zeile .btn { font-size: 10.5px; padding: 2px 7px; }
.fk-au-zeile.verpasst .fk-au-txt b { color: var(--critical); }
.fk-au-fertig { font-size: 10px; padding: 0 6px; }
.fk-au-gelaufen { margin-top: 5px; padding-top: 5px; }

/* Schreibfeld und Fußzeile */
.fk-senden { padding: 7px 11px 9px; }
.fk-senden textarea { font-size: 12px; padding: 6px 7px; }
.fk-senden-fuss { margin-top: 5px; gap: 6px; }
.fk-senden-fuss select { padding: 3px 6px; font-size: 11px; }
.fk-hinweis { margin-top: 4px; font-size: 11px; }

/* --- Dashboard v233: frei ziehbare Kacheln, aufklappbare Abschnitte ------
   Wilhelm, 16.08.2026: „dass ich die Kacheln vergrößern kann und kleiner
   machen kann, dass ich mir das wirklich so anpassen kann, wie ich es
   wünsche" und „dass man das nach unten aufploppen lassen kann". */
.db-inhalt { overflow: auto; }
.db-karte.groesst { outline: 2px solid var(--gold); outline-offset: 2px; user-select: none; }
.db-ecke {
  position: absolute; right: 3px; bottom: 3px; width: 16px; height: 16px;
  cursor: nwse-resize; opacity: .35;
  background:
    linear-gradient(135deg, transparent 45%, var(--baseline) 45%, var(--baseline) 55%, transparent 55%),
    linear-gradient(135deg, transparent 70%, var(--baseline) 70%, var(--baseline) 80%, transparent 80%);
}
.db-karte:hover .db-ecke { opacity: .8; }

/* Der Kopf einer Karte klebt oben, wenn der Inhalt scrollt - sonst weiß man
   bei einer kleingezogenen Kachel nicht mehr, was man da liest. */
.db-karte h2 { position: relative; z-index: 1; background: var(--surface-1); }

.db-klappbar { cursor: pointer; user-select: none; }
.db-klappbar:hover { color: var(--navy); }
.db-abschnitt.zu { display: none; }


/* =========================================================================
   Der Gesprächsverlauf bekommt den ganzen Rest (v234)

   Wilhelm, 16.08.2026 - nach v233 immer noch: „Diese Kommunikation ist
   wirklich viel zu klein. Man sieht echt wenig von der Kommunikation, was
   rausgegangen ist oder was sie schreibt. Vielleicht kannst du das irgendwie
   noch weiter vergrößern nach unten."

   Der Fehler steckte in der Rechnung, nicht in den Zahlen: Die Spalte hatte
   eine MAXIMALhöhe (76vh) und der Verlauf eine MINDESThöhe (300px). Damit
   war der Verlauf immer so groß wie das, was übrig blieb - und übrig blieb
   wenig, weil die Werkzeuge darunter wachsen durften.

   Jetzt umgekehrt: Die Spalte bekommt eine FESTE Höhe (so hoch wie das
   Fenster hergibt), die Werkzeuge darunter nehmen sich, was sie brauchen,
   und ALLES andere gehört dem Verlauf. Auf Wilhelms Bildschirm sind das
   statt 300 Pixeln rund 900.
   ========================================================================= */
.cal-modal-panel.modal-box { max-height: 94vh; }
.fk-spalte {
  height: calc(94vh - 90px);
  max-height: calc(94vh - 90px);
}
.fk-inhalt {
  flex: 1 1 auto;
  min-height: 220px;
  /* Der Verlauf wächst mit dem Fenster - deshalb hier KEINE feste Höhe. */
}
/* Die Werkzeuge unten dürfen nicht mitwachsen: Was sie nicht brauchen,
   gehört dem Gespräch. */
.fk-automatik, .fk-vorlagen, .fk-senden { flex: 0 0 auto; }

/* Der Griff zwischen Verlauf und Werkzeugen: wer es anders haben will,
   zieht ihn (v234). Gemerkt wird das im Browser - eine Ansichtssache. */
.fk-teiler {
  flex: 0 0 auto; height: 9px; cursor: ns-resize; position: relative;
  background: var(--surface-1); border-top: 1px solid var(--gridline);
}
.fk-teiler::after {
  content: ""; position: absolute; left: 50%; top: 3px; width: 36px; height: 3px;
  margin-left: -18px; border-radius: 2px; background: var(--baseline); opacity: .5;
}
.fk-teiler:hover::after { opacity: 1; }

/* Ein Testlauf ist NICHT gesendet - das muss man den Marken ansehen. */
.fk-au-fertig.testlauf {
  background: rgba(20,19,15,.06); color: var(--text-secondary);
}

@media (max-width: 1100px) {
  .fk-spalte { height: auto; max-height: 60vh; }
}

/* --- Dashboard v235: Größenmenü, eigene Kacheln --------------------------
   Wilhelm, 16.08.2026: „Die Kacheln lassen sich immer noch nicht vergrößern
   oder verkleinern" und „etwas, wo man auch selbst eine Kachel neu erzeugen
   kann, mit zum Beispiel To-Dos als Heftnotiz". */

/* Das Größenmenü in der Kopfzeile - für alle, die nicht ziehen wollen. */
.db-mass { margin-left: auto; position: relative; }
.db-mass > summary {
  list-style: none; cursor: pointer; color: var(--text-muted); font-size: 14px;
  padding: 0 2px; line-height: 1;
}
.db-mass > summary::-webkit-details-marker { display: none; }
.db-mass > summary:hover { color: var(--navy); }
.db-mass-menue {
  position: absolute; right: 0; top: 20px; z-index: 5;
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: 6px; box-shadow: var(--shadow-lg); padding: 7px 9px;
  display: flex; align-items: center; gap: 4px; white-space: nowrap;
}
.db-mass-titel {
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted); margin-left: 4px;
}
.db-mass-menue button {
  min-width: 24px; border: 1px solid var(--gridline); background: var(--surface-1);
  border-radius: 4px; font-size: 11px; padding: 2px 5px; cursor: pointer;
  font-family: inherit; color: var(--text-secondary);
}
.db-mass-menue button.on { background: var(--navy); border-color: var(--navy); color: #fff; }

/* Während des Ziehens soll nichts markiert werden. */
body.db-zieht-groesse { user-select: none; cursor: nwse-resize; }
.db-ecke { width: 20px; height: 20px; opacity: .5; }

/* Die eigenen Kacheln: ein Zettel sieht aus wie ein Zettel. */
.db-eigen { border-color: rgba(20,19,15,.14); }
.db-farbe-gelb  { background: #fdf8e3; }
.db-farbe-gruen { background: #eef7ee; }
.db-farbe-blau  { background: #eef3fa; }
.db-farbe-rosa  { background: #fbeef2; }
.db-farbe-grau  { background: #f2f2f0; }
.db-eigen h2 { background: transparent; }
.db-notiz {
  width: 100%; border: 0; background: transparent; resize: vertical;
  font: inherit; font-size: 13.5px; line-height: 1.5; color: var(--text-primary);
  min-height: 70px; padding: 0;
}
.db-notiz:focus { outline: none; }
.db-punkt-zeile {
  display: flex; gap: 8px; align-items: flex-start; padding: 5px 0;
  border-top: 1px solid rgba(20,19,15,.07); font-size: 13.5px; cursor: pointer;
}
.db-punkt-zeile:first-of-type { border-top: 0; }
.db-punkt-zeile.ab span { text-decoration: line-through; color: var(--text-muted); }
.db-punkt-zeile input { margin-top: 3px; flex: none; }
.db-punkt-weg {
  margin-left: auto; border: 0; background: none; color: var(--text-muted);
  cursor: pointer; font-size: 14px; line-height: 1; padding: 0 2px; opacity: 0;
}
.db-punkt-zeile:hover .db-punkt-weg { opacity: 1; }
.db-punkt-neu {
  width: 100%; border: 0; border-top: 1px dashed rgba(20,19,15,.15);
  background: transparent; font: inherit; font-size: 13px; padding: 7px 0 0;
  color: var(--text-primary);
}
.db-punkt-neu:focus { outline: none; }
.db-trenner {
  margin: 10px 0 2px; font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-muted);
}
.db-zeile.db-gestern { opacity: .62; }

/* Im Auswahl-Kasten */
.db-eigen-marke {
  background: var(--gridline); border-radius: 8px; padding: 0 6px; font-size: 10px;
  color: var(--text-secondary);
}
.db-eigen-weg {
  margin-left: auto; border: 0; background: none; cursor: pointer;
  color: var(--text-muted); font-size: 13px;
}
.db-eigen-neu {
  margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--gridline);
}
.db-eigen-neu h3 { margin: 0 0 3px; font-size: 14px; font-weight: 600; }
.db-eigen-zeile { display: flex; gap: 7px; flex-wrap: wrap; }
.db-eigen-zeile select, .db-eigen-zeile input {
  border: 1px solid var(--gridline); border-radius: 4px; padding: 6px 8px;
  font: inherit; font-size: 13px; background: var(--surface-1);
}
.db-eigen-zeile input { flex: 1 1 180px; }


/* --- Unterkünfte: Kreis-Spalte und eigene Reihenfolge (v236) -------------
   Wilhelm, 16.08.2026: „sodass ich die Unterkünfte theoretisch nach meinem
   Belieben sortieren kann, nach Nummernkreis und so weiter. Das ist jetzt
   alles wild durchgewürfelt." */
.uk-kreis {
  display: inline-block; background: var(--navy); color: #fff; border-radius: 4px;
  padding: 1px 8px; font-size: 11.5px; letter-spacing: .06em; font-weight: 600;
}
.uk-ordnung-zeile {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px;
  border: 1px solid var(--gridline); border-radius: 6px; margin-bottom: 6px;
  background: var(--surface-1); cursor: grab; font-size: 13.5px;
  user-select: none; line-height: 1.4;
}
.uk-ordnung-zeile:hover { border-color: var(--navy); }
.uk-ordnung-zeile.zieht { opacity: .45; }
.uk-ordnung-griff { color: var(--baseline); }
.uk-ordnung-kreis {
  margin-left: auto; color: var(--text-secondary); font-size: 11.5px;
  letter-spacing: .05em; white-space: nowrap;
}
.uk-ordnung-liste { max-height: 52vh; overflow: auto; padding-right: 4px; }
.uk-ordnung-zeile b { font-weight: 600; }

.uk-ordnung-zeile-abstand { display: flex; align-items: center; gap: 10px;
  margin: 0 0 8px; }

/* ---------------------------------------------------------------------
   v237: Kürzel und Farbe wählen (static/kuerzel-farbe.js)

   Wilhelm, 16.08.2026: „Es wäre schon gut, wenn jeder Mitarbeiter eine
   andere Farbe bekommt und wir unter Organisation Mitarbeiter auch die
   Farbe dementsprechend auch selbst bestimmen können." - dieselbe Auswahl
   erscheint auf der Mitarbeiter- und auf der Schichtpläne-Seite.
   --------------------------------------------------------------------- */
.kufa-wahl { position: absolute; z-index: 1200; width: 340px; background: #fff;
  border: 1px solid #d9dee5; border-radius: 11px; padding: 15px 16px 14px;
  box-shadow: 0 12px 30px rgba(20, 30, 50, .18); }
.kufa-wahl h3 { font-size: 13.5px; margin: 0 0 2px; }
.kufa-wer { font-size: 11.5px; color: #78818e; margin: 0 0 11px; }

.kufa-kuerzelzeile { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.kufa-kuerzelzeile label { font-size: 12.5px; color: #545c68; }
.kufa-kuerzel { flex: 1; height: 28px; border: 1px solid #d9dee5; border-radius: 6px;
  padding: 0 8px; font-size: 12.5px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; }
.kufa-kuerzelhinweis { margin: 0 0 10px; font-size: 11.5px; line-height: 1.45;
  border-radius: 7px; padding: 7px 9px; }

.kufa-felder { display: grid; grid-template-columns: repeat(8, 1fr); gap: 7px; }
.kufa-feld { height: 30px; border-radius: 7px; position: relative; cursor: pointer;
  border: none; padding: 0; display: block; width: 100%; }
.kufa-feld.kufa-gewaehlt { box-shadow: 0 0 0 2px #fff inset, 0 0 0 3px #1f2733; }
.kufa-feld.kufa-belegt::after { content: ""; position: absolute; right: 3px; bottom: 3px;
  width: 6px; height: 6px; border-radius: 50%; background: #fff;
  border: 1px solid rgba(0, 0, 0, .25); }
.kufa-legende { font-size: 11px; color: #8a919b; margin: 9px 0 0; }
.kufa-trenner { border: none; border-top: 1px solid #eceef2; margin: 13px 0 11px; }

.kufa-eigen { display: flex; align-items: center; gap: 9px; }
.kufa-eigen input[type=color] { width: 34px; height: 28px; padding: 0;
  border: 1px solid #d9dee5; border-radius: 6px; background: #fff; }
.kufa-hex { flex: 1; height: 28px; border: 1px solid #d9dee5; border-radius: 6px;
  padding: 0 8px; font-size: 12.5px; font-family: ui-monospace, Menlo, monospace; }

.kufa-hinweis { margin: 10px 0 0; font-size: 11.5px; line-height: 1.45;
  border-radius: 7px; padding: 7px 9px; }
.kufa-hinweis-aehnlich, .kufa-kuerzelhinweis.kufa-hinweis-aehnlich { color: #8a5b00;
  background: #fff6e3; border: 1px solid #f2dfae; }
.kufa-hinweis-blass { color: #8a5b00; background: #fff6e3; border: 1px solid #f2dfae; }
.kufa-hinweis-fehler, .kufa-hinweis-ungueltig { color: #93291e; background: #fdecea;
  border: 1px solid #f3c9c2; }

.kufa-knoepfe { display: flex; gap: 8px; margin-top: 13px; }
.kufa-knoepfe button { flex: 1; height: 31px; border-radius: 7px; font-size: 12.5px;
  font-weight: 600; border: 1px solid #d9dee5; background: #fff; color: #37414f;
  cursor: pointer; }
.kufa-knoepfe .kufa-ok { background: #1f3b6e; border-color: #1f3b6e; color: #fff; }

/* Das Kürzel-Abzeichen wird anklickbar, sobald die Farbwahl zur Verfügung
   steht - der Zeiger soll das auch zeigen. */
.mitarbeiter-kuerzel-badge.kufa-klickbar,
.mitarbeiter-chip-kuerzel.kufa-klickbar { cursor: pointer; }
.mitarbeiter-kuerzel-badge.kufa-klickbar:hover,
.mitarbeiter-chip-kuerzel.kufa-klickbar:hover { outline: 2px solid rgba(31, 59, 110, .35);
  outline-offset: 1px; }

.kufa-verteilen-zeile { display: flex; align-items: center; gap: 10px; margin: 10px 0 0;
  font-size: 12px; color: #6b7480; }

/* ---------------------------------------------------------------------
   v239: Der Haken „Check-in erledigt" (static/checkin-haken.js)

   Wilhelm, 16.08.2026: „ich würde gerne die buchungen die kein online check
   in gemacht haben, auch händisch einstellen können, online check in
   erledigt, sodass diese auch in ihrer mappe die check in instruktionen
   sehen." Derselbe Knopf sitzt in der Gästemappen-Liste, auf der
   Dashboard-Kachel, im Kalender-Buchungsdetail und in der Kommunikation.
   --------------------------------------------------------------------- */
.ck-haken { white-space: nowrap; }
.ck-haken.ck-haken-an { border-color: #1d7a44; color: #1d7a44; }

/* „hidden" muss stärker sein als das display:flex hier drunter - sonst
   steht die Leiste auch dann da, wenn nichts ausgewählt ist. */
.ck-sammel[hidden] { display: none; }
.ck-sammel { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 12px; padding: 9px 12px; border: 1px solid #d9dee5;
  border-radius: 9px; background: #f7f9fc; font-size: 13px; }
.ck-sammel-hinweis { color: #6b7480; font-size: 12px; }

.gm-wahl-spalte { width: 34px; text-align: center; }

/* Auf der Dashboard-Kachel steht der Haken rechts in der Zeile - dort ist
   wenig Platz, also klein und ohne Rahmen, bis man darüberfährt. */
.db-rechts .ck-haken { font-size: 11px; padding: 1px 6px; margin-right: 6px; }

/* Im Buchungsdetail des Kalenders hängt er an der Quellenzeile. */
.zd-haken { margin-left: 8px; }
.ck-hinweis { display: inline-block; margin-left: 8px; font-size: 11.5px;
  color: #8a5b00; background: #fff6e3; border: 1px solid #f2dfae;
  border-radius: 6px; padding: 2px 7px; }

/* =====================================================================
   v240: „Hostapia unterwegs" - der Zugang fürs Handy
   (templates/unterwegs.html, static/unterwegs.js)

   Wilhelm, 16.08.2026: „ich bin ganz oft unterwegs und dann fällt mir auf
   zum Beispiel, oh, hier ist die Leiste an der Tür lose."

   Bedient wird das hier mit EINEM Daumen, oft im Stehen: große Flächen,
   wenig auf einmal, die wichtigste Handlung immer unten in Reichweite.
   ===================================================================== */
body.uw-body { margin: 0; background: #f1efe8; color: #1d2c49;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }

/* „hidden" muss stärker sein als display:flex - sonst blitzt das Programm
   trotz fehlender Anmeldung auf. */
.uw-app[hidden], .uw-pin[hidden] { display: none; }
.uw-app { display: flex; flex-direction: column; min-height: 100vh;
  min-height: 100dvh; max-width: 620px; margin: 0 auto; background: #fbf8f0; }
.uw-kopf { background: #1d2c49; color: #fff; padding: 13px 16px;
  display: flex; align-items: center; gap: 9px; position: sticky; top: 0; z-index: 5; }
.uw-marke { font-size: 15px; font-weight: 700; }
.uw-marke i { font-style: normal; color: #e0b558; }
.uw-kopf-rechts { margin-left: auto; font-size: 12px; color: #9fb0cc; }
.uw-inhalt { flex: 1; padding: 14px 16px 90px; overflow-y: auto; }

.uw-gruss { font-size: 19px; font-weight: 700; margin: 2px 0 1px; }
.uw-datum { font-size: 12.5px; color: #6f7787; margin: 0 0 14px; }
.uw-zahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.uw-zahl { background: #fff; border: 1px solid #e6e1d5; border-radius: 12px;
  padding: 10px 8px; text-align: center; }
.uw-zahl b { display: block; font-size: 22px; line-height: 1.1; }
.uw-zahl small { display: block; font-size: 10.5px; color: #6f7787; margin-top: 2px; }
.uw-zahl.warn b { color: #b3261e; }

.uw-gross { display: flex; align-items: center; gap: 12px; width: 100%;
  background: #1d2c49; color: #fff; border: none; border-radius: 15px;
  padding: 15px 14px; text-align: left; margin-bottom: 6px; }
.uw-gross-sym { font-size: 25px; }
.uw-gross b { display: block; font-size: 15px; }
.uw-gross small { display: block; font-size: 11.5px; color: #b9c6dc; margin-top: 2px; }

.uw-titel { font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: #8d94a2; font-weight: 700; margin: 18px 0 8px; }
.uw-leer, .uw-laden { color: #6f7787; font-size: 13px; padding: 18px 2px; }
.uw-fehler { color: #93291e; background: #fdecea; border: 1px solid #f3c9c2;
  border-radius: 10px; padding: 11px; font-size: 13px; }
.uw-hinweis { color: #8a5b00; background: #fff6e3; border: 1px solid #f2dfae;
  border-radius: 10px; padding: 9px 11px; font-size: 12px; margin: 0 0 10px; }

.uw-zeile, .uw-bel, .uw-person { background: #fff; border: 1px solid #e6e1d5;
  border-radius: 12px; padding: 11px 12px; margin-bottom: 8px; }
.uw-zeile { display: flex; align-items: center; gap: 10px; }
.uw-zeile b, .uw-bel b { font-size: 13.5px; }
.uw-zeile small { display: block; font-size: 11.5px; color: #6f7787; margin-top: 2px; }
.uw-zeile-rechts { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.uw-punkt { width: 9px; height: 9px; border-radius: 50%; background: #157f3a; flex: 0 0 auto; }
.uw-punkt.rot { background: #b3261e; } .uw-punkt.gold { background: #c8961e; }
.uw-punkt.grau { background: #c3c8d1; } .uw-punkt.gut { background: #157f3a; }

.uw-tage { display: flex; gap: 6px; margin-bottom: 10px; }
.uw-tag { flex: 1; background: #fff; border: 1px solid #e6e1d5; border-radius: 11px;
  padding: 8px 2px; text-align: center; }
.uw-tag.an { background: #1d2c49; border-color: #1d2c49; color: #fff; }
.uw-tag b { display: block; font-size: 15px; }
.uw-tag small { font-size: 10px; color: #8d94a2; }
.uw-tag.an small { color: #9fb0cc; }
.uw-bel { display: flex; align-items: center; gap: 9px; }
.uw-bel-rechts { margin-left: auto; font-size: 11.5px; color: #6f7787; text-align: right; }

.uw-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.uw-chip { background: #f4f1e8; border: 1px solid #e0dac9; border-radius: 999px;
  padding: 6px 13px; font-size: 12.5px; color: #1d2c49; text-decoration: none;
  display: inline-flex; align-items: center; gap: 5px; }
.uw-chip.an { background: #1d2c49; border-color: #1d2c49; color: #fff; }

/* Das Diktat */
.uw-mikro { text-align: center; padding: 18px 0 6px; }
.uw-kreis { width: 108px; height: 108px; border-radius: 50%; background: #1d2c49;
  color: #fff; font-size: 42px; border: none; display: block; margin: 0 auto 12px;
  box-shadow: 0 0 0 10px rgba(29, 44, 73, .10); }
.uw-kreis.laeuft { background: #b3261e; box-shadow: 0 0 0 10px rgba(179, 38, 18, .14);
  animation: uw-puls 1.4s ease-in-out infinite; }
.uw-kreis.aus { background: #c3c8d1; }
@keyframes uw-puls { 50% { box-shadow: 0 0 0 20px rgba(179, 38, 18, .07); } }
.uw-mikro b { display: block; font-size: 15px; }
.uw-mikro small { display: block; font-size: 12px; color: #6f7787; margin-top: 4px;
  line-height: 1.45; }
.uw-oder { text-align: center; color: #8d94a2; font-size: 11.5px; margin: 16px 0 8px; }
.uw-inhalt textarea, .uw-inhalt input[type=text] { width: 100%; border: 1px solid #d9dee5;
  border-radius: 11px; padding: 11px; font-size: 15px; font-family: inherit;
  background: #fff; color: #1d2c49; }
.uw-gesagt { background: #fff; border: 1px solid #e6e1d5; border-radius: 12px;
  padding: 12px; font-size: 13.5px; line-height: 1.5; font-style: italic;
  color: #33405a; margin-bottom: 10px; }

.uw-karte { background: #fff; border: 1px solid #e6e1d5; border-radius: 15px; padding: 13px; }
.uw-art { display: flex; gap: 8px; margin-bottom: 12px; }
.uw-art .uw-chip { flex: 1; justify-content: center; padding: 9px; font-size: 13.5px; }
.uw-feld { display: block; padding: 9px 0; border-top: 1px solid #f0ece2; }
.uw-feld > span { display: block; font-size: 11px; color: #8d94a2; margin-bottom: 5px; }
.uw-wahl { width: 100%; text-align: left; background: #f7f5ef; border: 1px solid #e0dac9;
  border-radius: 11px; padding: 11px; font-size: 14px; color: #1d2c49; }
.uw-feld input[type=file] { font-size: 12.5px; }

.uw-knopf { display: block; width: 100%; background: #c8961e; color: #fff; border: none;
  border-radius: 14px; padding: 15px; font-size: 15.5px; font-weight: 700;
  margin-top: 13px; }
.uw-knopf.grau { background: #fff; color: #37414f; border: 1px solid #d9dee5;
  font-weight: 600; font-size: 14px; padding: 12px; margin-top: 8px; }

.uw-fertig { text-align: center; padding: 34px 0 10px; }
.uw-fertig span { display: block; width: 64px; height: 64px; border-radius: 50%;
  background: #157f3a; color: #fff; font-size: 30px; line-height: 64px; margin: 0 auto 12px; }
.uw-fertig b { display: block; font-size: 17px; }
.uw-fertig small { display: block; font-size: 12.5px; color: #6f7787; margin-top: 3px; }

.uw-person-oben { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.uw-av { width: 32px; height: 32px; border-radius: 50%; color: #fff; font-size: 11.5px;
  font-weight: 700; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.uw-person b { font-size: 13.5px; }
.uw-person small { display: block; font-size: 11px; color: #6f7787; }

/* Die Fußleiste - der wichtigste Knopf sitzt in der Mitte, wo der Daumen
   ohne Umgreifen hinkommt. */
.uw-fuss { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6;
  display: flex; align-items: flex-end; justify-content: space-around;
  max-width: 620px; margin: 0 auto; background: #fff; border-top: 1px solid #e6e1d5;
  padding: 7px 6px calc(10px + env(safe-area-inset-bottom)); }
.uw-fuss button { background: none; border: none; font-size: 10px; color: #8d94a2;
  text-align: center; line-height: 1.5; padding: 2px 6px; }
.uw-fuss button i { display: block; font-style: normal; font-size: 19px; }
.uw-fuss button.an { color: #1d2c49; font-weight: 700; }
.uw-fuss .uw-plus { width: 54px; height: 54px; border-radius: 50%; background: #c8961e;
  color: #fff; font-size: 30px; line-height: 1; margin-bottom: 2px;
  box-shadow: 0 6px 14px rgba(200, 150, 30, .4); }

/* Auswahlfenster (Wohnung/Person) - von unten, wie man es vom Handy kennt */
.uw-fenster { position: fixed; inset: 0; background: rgba(20, 30, 50, .45); z-index: 20;
  display: flex; align-items: flex-end; }
.uw-fenster-inhalt { background: #fbf8f0; width: 100%; max-width: 620px; margin: 0 auto;
  border-radius: 18px 18px 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  max-height: 78vh; overflow-y: auto; }
.uw-fenster-inhalt h3 { margin: 0 0 10px; font-size: 15px; }
.uw-wahl-zeile { display: block; width: 100%; text-align: left; background: #fff;
  border: 1px solid #e6e1d5; border-radius: 11px; padding: 13px 12px; font-size: 14.5px;
  margin-bottom: 7px; color: #1d2c49; }

/* Die PIN-Abfrage */
.uw-pin { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center;
  justify-content: center; padding: 20px; background: #1d2c49; }
.uw-pin-kasten { background: #fbf8f0; border-radius: 20px; padding: 26px 22px;
  width: 100%; max-width: 360px; text-align: center; }
.uw-pin-kasten .uw-marke { font-size: 19px; display: block; margin-bottom: 2px; }
.uw-pin-kasten h1 { font-size: 14px; font-weight: 400; color: #6f7787; margin: 0 0 18px;
  letter-spacing: .12em; text-transform: uppercase; }
.uw-pin-text { font-size: 13px; color: #4a5364; margin: 0 0 14px; line-height: 1.5; }
#uw-pin-feld { width: 100%; text-align: center; font-size: 30px; letter-spacing: .5em;
  padding: 12px; border: 1px solid #d9dee5; border-radius: 13px; background: #fff; }
.uw-pin-fehler { color: #93291e; background: #fdecea; border: 1px solid #f3c9c2;
  border-radius: 10px; padding: 9px; font-size: 12.5px; margin: 12px 0 0; }
.uw-pin-fuss { font-size: 11px; color: #8d94a2; margin: 12px 0 0; }
.uw-foto-knopf { display: block; }
.uw-foto-knopf input[type=file] { display: none; }
.uw-foto-name { display: block; font-size: 11.5px; color: #1d7a44; margin-top: 5px; }

/* --- v241: Der Kalender als echtes Raster ---------------------------------
   Wilhelm: „dann im kalender will ich wirklich die kalender form" (und auf
   die Rückfrage: vier Wochen, seitlich schiebbar). Die Namensspalte bleibt
   beim Schieben stehen, sonst weiß man nach zwei Fingerbreiten nicht mehr,
   welche Zeile welche ist. */
.uw-kal { border: 1px solid #e6e1d5; border-radius: 12px; background: #fff;
  overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.uw-k-leiste { margin-bottom: 10px; }
.uw-k-kopf { display: flex; background: #f4f1e8; border-bottom: 1px solid #e6e1d5;
  position: sticky; top: 0; }
.uw-k-eck { width: 66px; flex: 0 0 66px; font-size: 9.5px; color: #8d94a2; padding: 7px 6px;
  border-right: 1px solid #e6e1d5; position: sticky; left: 0; background: #f4f1e8; z-index: 3; }
.uw-k-spur { position: relative; display: flex; }
.uw-k-tag { width: 46px; flex: 0 0 46px; text-align: center; padding: 5px 0;
  font-size: 9px; color: #8d94a2; border-right: 1px solid #efe9dc; }
.uw-k-tag b { display: block; font-size: 12px; color: #1d2c49; }
.uw-k-tag.we { background: #eceadf; }
.uw-k-tag.heute { background: #1d2c49; color: #9fb0cc; }
.uw-k-tag.heute b { color: #fff; }
.uw-k-zeile { display: flex; border-bottom: 1px solid #f2eee4; height: 40px; }
.uw-k-zeile:last-child { border-bottom: none; }
.uw-k-name { width: 66px; flex: 0 0 66px; font-size: 10.5px; padding: 6px;
  border-right: 1px solid #e6e1d5; line-height: 1.2; position: sticky; left: 0;
  background: #fff; z-index: 2; overflow: hidden; }
.uw-k-feld { width: 46px; flex: 0 0 46px; border-right: 1px solid #f4f0e6; height: 40px; }
.uw-k-feld.we { background: #faf7ef; }
.uw-k-feld.heute { background: #f2f5fb; }
.uw-k-balken { position: absolute; top: 9px; height: 22px; border-radius: 6px;
  border: none; color: #fff; font-size: 10px; line-height: 22px; padding: 0 7px;
  overflow: hidden; white-space: nowrap; text-align: left; }

/* --- v241: Die Aufgabenliste --------------------------------------------- */
.uw-auf { display: flex; gap: 10px; align-items: flex-start; width: 100%;
  background: #fff; border: 1px solid #e6e1d5; border-radius: 12px;
  padding: 11px 12px; margin-bottom: 8px; text-align: left; }
.uw-auf-text b { display: block; font-size: 13.5px; }
.uw-auf-text small { display: block; font-size: 11.5px; color: #6f7787; margin-top: 2px; }
.uw-auf-leute { display: flex; align-items: center; gap: 5px; margin-top: 6px;
  font-size: 11px; color: #6f7787; }
.uw-av.klein { width: 21px; height: 21px; font-size: 9px; }
.uw-fenster-unter { font-size: 12px; color: #6f7787; margin: 0 0 8px; }
.uw-fenster-text { font-size: 13px; line-height: 1.5; margin: 0 0 12px; }
.uw-fotos { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.uw-fotos img { width: 78px; height: 78px; object-fit: cover; border-radius: 10px;
  border: 1px solid #e6e1d5; }

/* --- v241: Die eigene PIN des Mitarbeiters (templates/todo_mitarbeiter.html) */
.ma-pin { padding: 8px 0 20px; }
.ma-pin-kasten { background: #fff; border: 1px solid var(--border, #e5e3da);
  border-radius: 16px; padding: 18px 16px; max-width: 460px; margin: 0 auto; }
.ma-pin-kasten h2 { margin: 0 0 8px; font-size: 17px; }
.ma-pin-kasten p { font-size: 13px; color: var(--text-secondary, #5c6472);
  line-height: 1.55; margin: 0 0 14px; }
.ma-pin-feld { margin-bottom: 12px; }
.ma-pin-feld label { display: block; font-size: 11px; color: #8d94a2; margin-bottom: 5px; }
.ma-pin-feld input { width: 100%; border: 1px solid #d9dee5; border-radius: 11px;
  padding: 12px; font-size: 16px; background: #fbfaf7; }
.ma-pin-feld input[type=password] { text-align: center; letter-spacing: .45em; font-size: 22px; }
.ma-pin-fehler { color: #93291e; background: #fdecea; border: 1px solid #f3c9c2;
  border-radius: 10px; padding: 9px 11px; font-size: 12.5px; margin: 0 0 12px; }
.ma-pin-knopf { display: block; width: 100%; background: #c8961e; color: #fff; border: none;
  border-radius: 13px; padding: 14px; font-size: 15px; font-weight: 700; margin-top: 4px; }
.ma-pin-knopf.grau { background: #fff; color: #37414f; border: 1px solid #d9dee5;
  font-weight: 600; font-size: 13.5px; padding: 11px; margin-top: 8px; }
.ma-pin-fuss { font-size: 11.5px; color: #8d94a2; margin: 12px 0 0 !important; }

/* =========================================================================
   v242 - Einbauten je Homepage, Preis auf Anfrage, Zusatzverkäufe als Kachel

   Wilhelm, 17.08.2026: „Für jede Homepage soll ein eigener Buchungstool
   kreiert werden … bauen aber wirklich schön gestalten, ziemlich
   professionell und auch gleich mit zusatzverkäufen von uns."

   Zwei getrennte Welten in einem Block:
     .eb-*  gehört in die EINSTELLUNGEN (Wilhelms Seite, Hostapia-Optik)
     .bt-*  gehört auf die BUCHUNGSSEITE (Gast, fremde Homepage, eigene Farbe)
   Deshalb erbt hier nichts über die Grenze - die Buchungsseite kennt die
   Hostapia-Variablen nicht, sie läuft in einem Rahmen auf fremdem Grund.
   ========================================================================= */

/* --- Der Einbau-Baukasten in den Einstellungen -------------------------- */
.eb-reiter {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  border-bottom: 2px solid var(--gridline, #e8e3d6); margin: 0 0 16px;
}
.eb-reiter-knopf {
  font: inherit; font-size: 13.5px; cursor: pointer; background: transparent;
  border: 0; border-bottom: 3px solid transparent; margin-bottom: -2px;
  padding: 8px 13px 7px; color: var(--text-secondary, #4c5568);
  border-radius: 7px 7px 0 0; display: flex; align-items: center; gap: 7px;
}
.eb-reiter-knopf:hover { background: #faf7f0; }
.eb-reiter-knopf.an {
  color: var(--navy, #1d2c49); font-weight: 650; background: #faf7f0;
  border-bottom-color: var(--gold, #c8961e);
}
.eb-punkt { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.eb-neu {
  font: inherit; font-size: 13px; cursor: pointer; margin: 0 0 6px auto;
  background: #fff; border: 1px dashed #c9c4b4; border-radius: 8px;
  padding: 6px 12px; color: var(--text-secondary, #4c5568);
}
.eb-neu:hover { border-color: var(--gold, #c8961e); color: var(--navy, #1d2c49); }
.eb-start { font-size: 13.5px; color: var(--text-secondary, #4c5568); margin: 0; }

.eb-blatt { background: #f9f7f1; border: 1px solid var(--gridline, #e8e3d6);
            border-radius: 12px; padding: 14px 16px; }
.eb-zeile { display: flex; gap: 14px; flex-wrap: wrap; margin: 0 0 12px; }
.eb-feld { flex: 1 1 220px; min-width: 0; }
.eb-feld.voll { flex-basis: 100%; }
.eb-feld.schmal { flex: 0 1 190px; }
.eb-feld label { display: block; font-size: 12px; font-weight: 650;
                 color: var(--text-secondary, #4c5568); margin-bottom: 4px; }
.eb-feld input[type="text"] {
  width: 100%; font: inherit; font-size: 14px; padding: 8px 10px; background: #fff;
  border: 1px solid var(--gridline, #e8e3d6); border-radius: 8px;
}
.eb-farbfeld { display: flex; gap: 8px; align-items: center; }
.eb-farbfeld input[type="color"] {
  width: 38px; height: 36px; padding: 2px; flex: none; cursor: pointer;
  border: 1px solid var(--gridline, #e8e3d6); border-radius: 8px; background: #fff;
}
.eb-label { font-size: 11px; font-weight: 800; letter-spacing: .06em;
            text-transform: uppercase; color: var(--text-muted, #8b8c95);
            margin: 18px 0 7px; }
.eb-klein { font-size: 12.5px; color: var(--text-muted, #8b8c95); margin: 6px 0 0; }

.eb-chips { display: flex; gap: 7px; flex-wrap: wrap; }
.eb-chip {
  font: inherit; font-size: 13px; cursor: pointer; background: #fff;
  border: 1px solid var(--gridline, #e8e3d6); border-radius: 999px;
  padding: 6px 13px; color: var(--text-secondary, #4c5568);
  display: inline-flex; align-items: center; gap: 7px;
}
.eb-chip:hover { border-color: #c3bfb0; }
.eb-chip.an { background: var(--navy, #1d2c49); border-color: var(--navy, #1d2c49);
              color: #fff; font-weight: 600; }
.eb-chip.leer { border-style: dashed; color: var(--text-muted, #8b8c95); }
.eb-z { background: rgba(20,19,15,.07); border-radius: 999px; padding: 1px 7px;
        font-size: 11px; font-weight: 700; }
.eb-chip.an .eb-z { background: rgba(255,255,255,.2); }

.eb-wliste { background: #fff; border: 1px solid var(--gridline, #e8e3d6);
             border-radius: 11px; overflow: hidden; }
.eb-wkopf { display: flex; align-items: center; gap: 10px; padding: 8px 13px;
            background: #faf8f3; border-bottom: 1px solid var(--gridline, #e8e3d6);
            font-size: 12.5px; color: var(--text-secondary, #4c5568); }
.eb-wrechts { margin-left: auto; display: flex; gap: 6px; }
.eb-wz { display: flex; align-items: center; gap: 11px; padding: 9px 13px;
         border-top: 1px solid #f4f1e8; cursor: pointer; font-size: 13.5px; }
.eb-wz:hover { background: #fcfbf7; }
.eb-wz.aus { opacity: .5; }
.eb-hk { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid #c3bfb0;
         background: #fff; flex: none; display: flex; align-items: center;
         justify-content: center; font-size: 11px; color: #fff; }
.eb-hk.an { background: var(--good, #0ca30c); border-color: var(--good, #0ca30c); }
.eb-wname { font-weight: 600; min-width: 0; }
.eb-kreis { font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
            border-radius: 5px; padding: 2px 7px; background: #eef1f6; color: #33507a; }
.eb-wpreis { margin-left: auto; font-size: 12.5px; color: var(--text-muted, #8b8c95); }
.eb-wpreis.ok { color: #0b6b45; }
.eb-wpreis.warn { color: var(--critical, #d03b3b); }
.eb-leer { font-size: 13px; color: var(--text-secondary, #4c5568); padding: 12px 13px;
           margin: 0; }

.eb-recht { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0;
            background: #f2f6f4; border: 1px solid #d5e3dc; border-radius: 9px;
            padding: 10px 13px; font-size: 13px; color: #33544a; }
.eb-recht.warn { background: #fdf6e6; border-color: #edd9a5; color: #5b4a1d; }
.eb-rsym { flex: none; }
.eb-rklein { display: block; margin-top: 3px; font-size: 12.5px; }
.eb-rok { color: #0b6b45; font-weight: 650; }
.eb-rfehlt { color: var(--critical, #d03b3b); font-weight: 650; }

.eb-xliste { background: #fff; border: 1px solid var(--gridline, #e8e3d6);
             border-radius: 11px; overflow: hidden; }
.eb-xliste.gedaempft .eb-xz { opacity: .35; pointer-events: none; }
.eb-xschalter { display: flex; align-items: center; gap: 9px; padding: 10px 13px;
                font-size: 13.5px; font-weight: 600; cursor: pointer;
                border-bottom: 1px solid var(--gridline, #e8e3d6); background: #faf8f3; }
.eb-xschalter input { width: 17px; height: 17px; }
.eb-xinfo { font-size: 12.5px; color: var(--text-muted, #8b8c95); margin: 0;
            padding: 9px 13px 4px; }
.eb-xz { display: flex; align-items: center; gap: 11px; padding: 8px 13px;
         border-top: 1px solid #f4f1e8; cursor: pointer; font-size: 13.5px; }
.eb-xz:hover { background: #fcfbf7; }
.eb-xz.aus { opacity: .5; }
.eb-xsym { font-size: 17px; flex: none; }
.eb-xtext { min-width: 0; }
.eb-xtext b { display: block; font-weight: 600; }
.eb-xtext em { font-style: normal; font-size: 12px; color: var(--text-muted, #8b8c95); }
.eb-xpreis { margin-left: auto; font-size: 13px; font-variant-numeric: tabular-nums;
             color: var(--text-secondary, #4c5568); }

.eb-code {
  background: var(--navy-deep, #131f36); color: #e6ebf5;
  border-radius: 10px; padding: 13px 15px; margin: 0 0 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; line-height: 1.7; white-space: pre-wrap; word-break: break-word;
}
.eb-knoepfe { display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
              margin-top: 12px; }
.eb-knoepfe a.btn { text-decoration: none; }
.eb-stand { font-size: 12.5px; color: var(--text-muted, #8b8c95); margin-left: auto; }
.bt-uprobe { font-size: 11.5px; border-radius: 6px; padding: 2px 8px;
             background: rgba(27,175,122,.16); color: #0b6b45; white-space: nowrap; }
.bt-uprobe.warn { background: #fdecec; color: #8d2020; }

/* --- Gastseite: Preis auf Anfrage --------------------------------------- */
.bt-zeile.anfrage { grid-template-columns: 88px 1fr 320px; }
.bt-merk {
  display: inline-block; font-size: 11.5px; border-radius: 4px; padding: 2px 7px;
  background: #eef1f6; color: #33507a; margin-left: 2px;
}
.bt-anfrage {
  background: #fdf6e6; border: 1px solid #edd9a5; border-radius: 6px;
  padding: 10px 13px; display: block;
}
.bt-anfrage b { display: block; font-size: 15px; font-weight: 600; color: #5b4a1d; }
.bt-anfrage em { font-style: normal; display: block; font-size: 12.5px; color: #7a6836;
                 margin-top: 2px; }
.bt-anfrage a {
  display: inline-block; margin-top: 8px; font-size: 14.5px; font-weight: 600;
  color: #5b4a1d; text-decoration: none; background: #fff; border: 1px solid #d9be7d;
  border-radius: 5px; padding: 6px 14px;
}
.bt-anfrage a:hover { background: #5b4a1d; color: #fff; border-color: #5b4a1d; }

/* --- Gastseite: Zusatzverkäufe als Kachel ------------------------------- */
.bt-kacheln {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px; padding: 4px 18px 18px;
}
.bt-kacheln .bt-extra {
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
  width: 100%; text-align: left; padding: 0; overflow: hidden;
  background: #fff; border: 1px solid var(--bt-linie); border-radius: 8px;
  font-family: inherit; font-size: 15px; color: inherit; cursor: pointer;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.bt-kacheln .bt-extra:hover {
  border-color: var(--bt-farbe, #1f4b3f);
  box-shadow: 0 2px 10px rgba(20,19,15,.07);
}
.bt-kacheln .bt-extra.an {
  border-color: var(--bt-farbe, #1f4b3f);
  box-shadow: inset 0 0 0 1px var(--bt-farbe, #1f4b3f);
}
.bt-ebild { display: block; height: 132px; background: #efece5; overflow: hidden; }
.bt-ebild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bt-esym { display: block; font-size: 30px; padding: 16px 16px 0; line-height: 1; }
.bt-ekopf { display: flex; gap: 11px; align-items: flex-start; padding: 13px 16px 0; }
.bt-kacheln .bt-kasten { top: 2px; flex: none; }
.bt-etitel { min-width: 0; }
.bt-ewas { display: block; font-size: 11px; letter-spacing: .05em;
           text-transform: uppercase; color: var(--bt-grau); margin-bottom: 1px; }
.bt-etitel b { display: block; font-size: 15.5px; font-weight: 600; line-height: 1.3; }
.bt-kacheln .bt-etext {
  display: block; padding: 6px 16px 0; font-size: 13px; line-height: 1.5;
  color: var(--bt-grau-2);
}
.bt-efuss {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 10px;
  margin-top: auto; padding: 13px 16px 14px;
}
.bt-kacheln .bt-epreis { font-size: 17px; font-weight: 600;
                         font-variant-numeric: tabular-nums; }
.bt-kacheln .bt-epreis em { display: block; font-style: normal; font-size: 11.5px;
                            font-weight: 400; color: var(--bt-grau); }
.bt-edazu { font-size: 12.5px; color: var(--bt-farbe, #1f4b3f); white-space: nowrap; }
.bt-extra.an .bt-edazu { font-weight: 600; }

@media (max-width: 640px) {
  .bt-kacheln { grid-template-columns: 1fr; padding: 4px 14px 14px; }
  .bt-zeile.anfrage { grid-template-columns: 56px 1fr; }
  .bt-anfrage { grid-column: 2; }
}