/* ================================================================
   APOLLO HOME SUITE — PREMIUM DESIGN SYSTEM v2 (Modul 2, 2c)
   Kompletter Neubau 06.07.2026. Champagner-Gold #b8945a als Signatur,
   Sidebar-Navigation, flüssige Micro-Animationen, voller Dark Mode.
   Struktur: Tokens → Reset → Layout → Komponenten → Animationen
   ================================================================ */

/* ── 1. TOKENS ─────────────────────────────────────────────────── */
:root {
    color-scheme: light;
    --gold: #b8945a;
    --gold-dunkel: #9a7943;
    --gold-hell: #f3eee2;
    --gold-glanz: linear-gradient(135deg, #cfa96b 0%, #b8945a 45%, #a07f45 100%);
    --gold-schimmer: rgba(184, 148, 90, 0.16);

    --bg: #f4f2ed;
    --bg-verlauf: radial-gradient(1200px 600px at 85% -10%, rgba(184,148,90,.08), transparent 60%),
                  radial-gradient(900px 500px at -10% 110%, rgba(184,148,90,.05), transparent 55%);
    --flaeche: #ffffff;
    --flaeche-2: #fbf9f4;
    --flaeche-3: #f1efe9;
    --glas: rgba(255, 255, 255, 0.82);
    --linie: #e7e4dc;
    --linie-stark: #d6d2c6;

    --text: #22201b;
    --text-2: #6f6a5e;
    --text-3: #a39d8f;
    --invers: #ffffff;

    --gruen: #1fa055;  --gruen-bg: rgba(31,160,85,.12);
    --gelb:  #d97706;  --gelb-bg:  rgba(217,119,6,.12);
    --rot:   #dc2626;  --rot-bg:   rgba(220,38,38,.10);
    --grau:  #a39d8f;  --grau-bg:  rgba(163,157,143,.16);
    --blau:  #2563eb;  --blau-bg:  rgba(37,99,235,.10);

    --radius: 14px;
    --radius-klein: 9px;
    --schatten-1: 0 1px 2px rgba(34,32,27,.05), 0 4px 14px -6px rgba(34,32,27,.08);
    --schatten-2: 0 2px 4px rgba(34,32,27,.06), 0 14px 34px -12px rgba(34,32,27,.16);
    --schatten-gold: 0 6px 22px -6px rgba(184,148,90,.45);
    --blende: blur(14px) saturate(1.4);

    /* Bewegungsphysik: die Apple-Kurve — schwer, präzise, geschmeidig */
    --kurve: cubic-bezier(0.16, 1, 0.3, 1);
    --t-schnell: 180ms var(--kurve);
    --t-normal: 320ms var(--kurve);
    --t-weich: 560ms var(--kurve);
}
html[data-theme="dark"] {
    color-scheme: dark;
    /* 'Dark Luxury': Tiefschwarz als unendlicher Raum, Flächen wie
       geschliffenes Rauchglas, gebürstetes Champagner-Gold #C5A059. */
    --gold: #C5A059;
    --gold-dunkel: #a8874a;
    --gold-glanz: linear-gradient(135deg, #d4b06a 0%, #C5A059 45%, #a8874a 100%);

    --bg: #020202;
    --bg-verlauf: radial-gradient(1100px 620px at 80% -12%, rgba(197,160,89,.075), transparent 62%),
                  radial-gradient(900px 540px at -8% 112%, rgba(197,160,89,.045), transparent 58%);
    --flaeche: rgba(255, 255, 255, 0.035);
    --flaeche-2: rgba(255, 255, 255, 0.055);
    --flaeche-3: rgba(255, 255, 255, 0.085);
    --glas: rgba(8, 8, 8, 0.72);
    --linie: rgba(255, 255, 255, 0.07);
    --linie-stark: rgba(255, 255, 255, 0.13);

    --text: #f0ebe0;
    --text-2: #a29a88;
    --text-3: #6d675a;
    --invers: #0a0a0a;

    --gold-hell: rgba(197, 160, 89, 0.13);
    --gold-schimmer: rgba(197, 160, 89, 0.22);
    --gruen: #34c26e; --gelb: #f0a232; --rot: #f26666;
    --schatten-1: 0 1px 0 rgba(255,255,255,.05) inset, 0 1px 2px rgba(0,0,0,.6), 0 8px 24px -10px rgba(0,0,0,.8);
    --schatten-2: 0 1px 0 rgba(255,255,255,.06) inset, 0 2px 5px rgba(0,0,0,.65), 0 18px 44px -14px rgba(0,0,0,.85);
    --schatten-gold: 0 1px 0 rgba(255,255,255,.14) inset, 0 6px 24px -6px rgba(197,160,89,.5);
}

/* ── 2. RESET (Preflight-Äquivalent) ───────────────────────────── */
*, *::before, *::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: var(--linie); }
html { line-height: 1.5; -webkit-text-size-adjust: 100%; }
body { margin: 0; line-height: inherit; }
h1,h2,h3,h4,h5,h6 { font-size: inherit; font-weight: inherit; margin: 0; }
p, blockquote, dl, dd, figure, hr { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: inherit; }
button, input, optgroup, select, textarea { font: inherit; color: inherit; margin: 0; padding: 0; }
button, select { text-transform: none; }
button, [type='button'], [type='submit'] { -webkit-appearance: button; background: transparent none; cursor: pointer; }
img, svg, video, canvas { display: block; vertical-align: middle; max-width: 100%; height: auto; }
table { border-collapse: collapse; text-indent: 0; }
fieldset { margin: 0; padding: 0; }
::placeholder { color: var(--text-3); opacity: 1; }

::selection { background: var(--gold-schimmer); }
* { scrollbar-width: thin; scrollbar-color: var(--linie-stark) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: var(--linie-stark); border-radius: 99px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* ── 3. GRUNDLAYOUT: Sidebar + Topbar + Inhalt ─────────────────── */
html {
    background: var(--bg);
    /* Platz fuer den Scrollbalken dauerhaft reservieren (03.08.2026).
       Die Einstellungsseiten sind unterschiedlich hoch — die Unterkuenfte-
       Karte ist um ein Vielfaches laenger als etwa die Reinigungs-Karte.
       Beim Wechsel verschwand der Scrollbalken, das Fenster wurde ~15px
       breiter und der gesamte Inhalt sprang. Das wirkte wie ein Zoom. */
    scrollbar-gutter: stable;
}
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.011em;
    background: var(--bg-verlauf), var(--bg);
    background-attachment: fixed;
    color: var(--text);
    min-height: 100vh;
    transition: background-color var(--t-weich), color var(--t-weich);
}

.app { display: flex; min-height: 100vh; }

.sidebar {
    width: 232px;
    flex: none;
    position: sticky; top: 0;
    height: 100vh;
    display: flex; flex-direction: column;
    padding: 22px 14px 16px;
    background: var(--glas);
    backdrop-filter: var(--blende);
    -webkit-backdrop-filter: var(--blende);
    border-right: 1px solid var(--linie);
    z-index: 40;
}
.sidebar-brand {
    display: flex; align-items: center; gap: 11px;
    padding: 4px 10px 20px;
    font-weight: 700; font-size: 15.5px; letter-spacing: -.02em;
}
.brand-logo {
    width: 34px; height: 34px; flex: none;
    display: grid; place-items: center;
    background: var(--gold-glanz);
    color: #fff; font-family: Georgia, serif; font-size: 19px; font-weight: 700;
    border-radius: 10px;
    box-shadow: var(--schatten-gold);
}
/* 22.08.2026: .brand-logo ist jetzt das Roomemo-Zeichen als Bild, kein
   Buchstabe auf Goldverlauf mehr. Der Verlauf (und die Rauschtextur weiter
   unten in dieser Datei) blitzte sonst an den abgerundeten Ecken hervor.
   Als `img.brand-logo` geschrieben, damit die Regel unabhaengig von der
   Reihenfolge gewinnt — die spaetere Verlaufsregel ist weniger spezifisch. */
img.brand-logo { background: none; box-shadow: var(--schatten-2); object-fit: cover; }

.brand-name span { color: var(--gold); }
.brand-sub { display: block; font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin-top: 1px; }

.sidebar-nav { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.tab-top {
    display: flex; align-items: center; gap: 11px;
    padding: 10px 12px;
    border-radius: var(--radius-klein);
    font-size: 13.8px; font-weight: 500;
    color: var(--text-2);
    transition: color var(--t-schnell), background var(--t-schnell), transform var(--t-schnell);
    position: relative;
    text-align: left; width: 100%;
}
.tab-top svg { width: 17px; height: 17px; flex: none; opacity: .75; transition: opacity var(--t-schnell); }
.tab-top:hover { background: var(--gold-schimmer); color: var(--text); }
.tab-top:hover svg { opacity: 1; }
.tab-top:active { transform: scale(.985); }
.tab-top.active {
    background: var(--gold-glanz);
    color: #fff; font-weight: 600;
    box-shadow: var(--schatten-gold);
}
.tab-top.active svg { opacity: 1; }

.sidebar-foot { display: flex; flex-direction: column; gap: 9px; padding-top: 14px; border-top: 1px solid var(--linie); }
.user-badge {
    display: flex; align-items: center; gap: 9px;
    font-size: 12.5px; color: var(--text-2);
    padding: 7px 10px;
    background: var(--flaeche-2); border: 1px solid var(--linie);
    border-radius: var(--radius-klein);
}
.user-badge b { color: var(--gold); font-weight: 600; }
.sidebar-foot-row { display: flex; gap: 8px; }
.btn-theme, .btn-logout {
    flex: 1;
    padding: 8px 10px;
    border: 1px solid var(--linie);
    border-radius: var(--radius-klein);
    background: var(--flaeche-2);
    color: var(--text-2);
    font-size: 12.5px; font-weight: 500;
    transition: border-color var(--t-schnell), color var(--t-schnell), background var(--t-schnell);
}
.btn-theme { flex: 0 0 42px; font-size: 15px; }
.btn-theme:hover, .btn-logout:hover { border-color: var(--gold); color: var(--gold); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
    position: sticky; top: 0; z-index: 30;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 15px 30px;
    background: var(--glas);
    backdrop-filter: var(--blende);
    -webkit-backdrop-filter: var(--blende);
    border-bottom: 1px solid var(--linie);
}
.topbar h1 { font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.topbar-meta { display: flex; align-items: center; gap: 14px; font-size: 12.5px; color: var(--text-2); }
#status-badge { color: var(--gruen); font-weight: 600; }
.content { padding: 26px 30px 60px; max-width: 1240px; width: 100%; margin: 0 auto; }

/* Tab-Wechsel: sanftes Einblenden */
.tab-content { animation: einblenden var(--t-weich) both; }
@keyframes einblenden {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* Mobil: Sidebar wird zur Leiste */
@media (max-width: 820px) {
    .app { flex-direction: column; }
    .sidebar { position: static; width: 100%; height: auto; flex-direction: row; align-items: center; gap: 10px; padding: 10px 14px; }
    .sidebar-brand { padding: 0 6px 0 0; }
    .brand-name, .brand-sub, .tab-top span { display: none; }
    .sidebar-nav { flex-direction: row; }
    .tab-top { padding: 9px; }
    .sidebar-foot { flex-direction: row; border: 0; padding: 0; margin-left: auto; }
    .user-badge { display: none; }
    .content, .topbar { padding-left: 16px; padding-right: 16px; }
}

/* ── 4. UTILITIES (kompakt) ────────────────────────────────────── */
.hidden { display: none !important; }
.block { display: block; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-stretch { align-items: stretch; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; }
.grid { display: grid; gap: 12px; }
.grid-cols-1 { grid-template-columns: 1fr; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.space-y-2 > * + * { margin-top: 8px; }
.space-y-6 > * + * { margin-top: 20px; }
.mt-1 { margin-top: 4px; } .mt-3 { margin-top: 12px; }
.mb-3 { margin-bottom: 12px; } .mb-6 { margin-bottom: 24px; }
.p-4 { padding: 16px; } .p-6 { padding: 24px; } .p-8 { padding: 32px; }
.rounded-lg { border-radius: var(--radius-klein); }
.border { border-width: 1px; }
.text-center { text-align: center; }
.italic { font-style: italic; }
.tracking-tight { letter-spacing: -0.025em; }
.font-bold { font-weight: 700; }
.font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; }
.text-xs { font-size: 12px; } .text-sm { font-size: 13.5px; } .text-2xl { font-size: 24px; }
.text-gray-400 { color: var(--text-3); }
.text-gray-500 { color: var(--text-2); }
.text-gray-700, .text-gray-900 { color: var(--text); }
.text-green-600 { color: var(--gruen); }
.text-red-700 { color: var(--rot); }
.bg-gray-50 { background: var(--flaeche-2); }
.bg-red-50 { background: var(--rot-bg); }
.bg-yellow-50 { background: var(--gold-hell); }
.border-gray-200 { border-color: var(--linie); }
.border-red-200 { border-color: var(--rot); }
.border-yellow-200 { border-color: var(--gold); }
.max-w-7xl { max-width: 80rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.w-1\/3 { width: 33.3333%; } .w-2\/3 { width: 66.6667%; }
.muted { color: var(--text-3); }
@media (min-width: 768px) {
    .md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
    .md\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
    .md\:flex-row { flex-direction: row; }
    .md\:items-center { align-items: center; }
    .md\:col-span-2 { grid-column: span 2 / span 2; }
    .md\:justify-end { justify-content: flex-end; }
}

/* ── 5. FORMULARFELDER ─────────────────────────────────────────── */
.invoice-field {
    border: 1px solid var(--linie-stark);
    border-radius: var(--radius-klein);
    padding: 9px 13px;
    width: 100%;
    background: var(--flaeche);
    color: var(--text);
    font-size: 13.8px;
    transition: border-color var(--t-schnell), box-shadow var(--t-schnell), background var(--t-schnell);
}
.invoice-field:hover { border-color: var(--gold); }
.invoice-field:focus {
    border-color: var(--gold);
    outline: none;
    box-shadow: 0 0 0 3.5px var(--gold-schimmer);
}
.invoice-field[readonly] { background: var(--flaeche-3); color: var(--text-2); }
select.invoice-field { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%), linear-gradient(135deg, var(--text-3) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 32px; }
/* HINWEIS 09.07.2026: option-Färbung + color-scheme (zwei frühere Anläufe)
   haben die native Options-Liste bei Mem NICHT zuverlässig dunkel bekommen
   (Chromium/Windows rendert das Popup teils über OS-Theme, ignoriert Author-
   CSS). Die eigentliche Lösung ist jetzt das Dropdown-Widget weiter unten
   (.custom-select-*, app.js custifySelect) — natives <select> bleibt nur
   noch als unsichtbare Wertequelle. Die beiden Regeln hier bleiben als
   harmlose Rückfallebene stehen (falls JS deaktiviert ist), sind aber im
   Normalfall wirkungslos, weil die Options-Liste des versteckten Selects
   ohnehin nie geöffnet wird.
*/
select.invoice-field option {
    background: var(--flaeche-2);
    color: var(--text);
}
html[data-theme="dark"] select.invoice-field,
html[data-theme="dark"] input[type="month"].invoice-field {
    color-scheme: dark;
}
html[data-theme="light"] select.invoice-field,
html[data-theme="light"] input[type="month"].invoice-field {
    color-scheme: light;
}

/* Eigenes Dropdown-Widget (09.07.2026) — ersetzt die native Options-Liste
   optisch komplett, nutzt nur noch unsere eigenen Theme-Variablen. */
.custom-select-wrap { position: relative; display: block; width: 100%; }
select.custom-select-native { display: none !important; }
.custom-select-btn {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    width: 100%; box-sizing: border-box; text-align: left;
    border: 1px solid var(--linie-stark); border-radius: var(--radius-klein);
    padding: 9px 13px; background: var(--flaeche); color: var(--text);
    font-size: 13.8px; font-family: inherit; cursor: pointer;
    transition: border-color var(--t-schnell), box-shadow var(--t-schnell);
}
.custom-select-btn::after {
    content: ''; flex: 0 0 auto; width: 6px; height: 6px;
    border-right: 1.5px solid var(--text-3); border-bottom: 1.5px solid var(--text-3);
    transform: rotate(45deg); transition: transform var(--t-schnell);
}
.custom-select-btn:hover { border-color: var(--gold); }
.custom-select-btn.open { border-color: var(--gold); box-shadow: 0 0 0 3.5px var(--gold-schimmer); }
.custom-select-btn.open::after { transform: rotate(225deg); }
.custom-select-list {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
    min-width: 100%; max-height: 260px; overflow-y: auto;
    /* WICHTIG: --flaeche-2 ist im Dark Theme fast durchsichtig (rgba(255,255,255,.055) —
       gedacht für Karten VOR dem großen Blur-Hintergrund, nicht für ein freischwebendes
       Popup). Dadurch war die Liste zwar "dunkel", aber ohne Kontrast kaum lesbar
       (09.07.2026, Mems Screenshot). --glas ist die dafür vorgesehene, deutlich
       blickdichtere Variable (dunkel: rgba(8,8,8,.72)) + eigener Blur, gleiches Muster
       wie .modal-card. */
    background: var(--glas); backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid var(--linie-stark);
    border-radius: var(--radius-klein); box-shadow: var(--schatten-2);
    padding: 4px;
}
.custom-select-list.hidden { display: none; }
.custom-select-option {
    padding: 8px 11px; border-radius: 7px; font-size: 13.5px; color: var(--text);
    cursor: pointer; white-space: nowrap;
}
.custom-select-option:hover { background: var(--gold-schimmer); }
.custom-select-option.active { background: var(--gold-hell); color: var(--gold-dunkel); font-weight: 600; }
/* Kalender-Icon von <input type="month"> (Steuerberater-Export) im Dark Mode
   unsichtbar (schwarzes Icon auf dunklem Grund) — Farbe umkehren. Das
   aufklappende Kalender-Popup selbst ist Browser-natives UI ohne CSS-Zugriff,
   das bleibt technisch bedingt hell (gilt für alle Browser gleichermaßen). */
html[data-theme="dark"] input[type="month"].invoice-field::-webkit-calendar-picker-indicator {
    filter: invert(1);
}
textarea.invoice-field { resize: vertical; min-height: 90px; }
textarea.invoice-field.textarea-gross { min-height: 150px; }
input[type="checkbox"] { accent-color: var(--gold); width: 16px; height: 16px; }
input[type="radio"] { accent-color: var(--gold); }
input[type="file"] { font-size: 12.5px; color: var(--text-2); }

/* ── 6. BUTTONS ────────────────────────────────────────────────── */
.btn-confirm, .btn-new-draft, .btn-issue {
    background: var(--gold-glanz);
    color: #fff;
    padding: 9px 18px;
    border-radius: var(--radius-klein);
    font-weight: 600; font-size: 13.5px;
    box-shadow: var(--schatten-1);
    transition: transform var(--t-schnell), box-shadow var(--t-schnell), filter var(--t-schnell);
}
.btn-confirm:hover, .btn-new-draft:hover, .btn-issue:hover {
    transform: translateY(-1px);
    box-shadow: var(--schatten-gold);
    filter: brightness(1.05);
}
.btn-confirm:active, .btn-new-draft:active, .btn-issue:active { transform: translateY(0) scale(.98); }
.btn-confirm:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-cancel, .btn-link, .btn-vat-check, .btn-add-position, .btn-unapprove {
    background: var(--flaeche);
    color: var(--text-2);
    border: 1px solid var(--linie-stark);
    padding: 8px 15px;
    border-radius: var(--radius-klein);
    font-weight: 500; font-size: 13px;
    transition: border-color var(--t-schnell), color var(--t-schnell), background var(--t-schnell), transform var(--t-schnell);
}
.btn-cancel:hover, .btn-link:hover, .btn-vat-check:hover, .btn-add-position:hover, .btn-unapprove:hover {
    border-color: var(--gold); color: var(--gold);
}
.btn-small { padding: 6px 12px; font-size: 12.5px; border-radius: 8px; }

/* Positionsart-Schnellwahl (17.07.2026): Klick-Buttons statt Dropdown im
   Positions-Formular. Aktiver Zustand spiegelt das (versteckte) <select>. */
.pf-preset-row { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 8px; }
.btn-preset {
    background: var(--flaeche);
    color: var(--text-2);
    border: 1px solid var(--linie-stark);
    padding: 7px 14px;
    border-radius: var(--radius-klein);
    font-weight: 500; font-size: 13px;
    transition: border-color var(--t-schnell), color var(--t-schnell), background var(--t-schnell);
}
.btn-preset:hover { border-color: var(--gold); color: var(--gold); }
.btn-preset.active {
    background: var(--gold-glanz);
    color: #fff;
    border-color: transparent;
    box-shadow: var(--schatten-1);
}
.btn-delete-draft, .btn-cancel-invoice { color: var(--rot); border-color: var(--rot-bg); background: var(--flaeche); border-width: 1px; padding: 8px 14px; border-radius: var(--radius-klein); font-size: 13px; font-weight: 500; transition: all var(--t-schnell); }
.btn-delete-draft:hover, .btn-cancel-invoice:hover { background: var(--rot-bg); border-color: var(--rot); }
.btn-send { background: var(--flaeche-3); color: var(--text-3); padding: 10px 22px; border-radius: var(--radius-klein); font-weight: 600; cursor: not-allowed; transition: all var(--t-normal); }
.btn-send.active { background: var(--gold-glanz); color: #fff; cursor: pointer; box-shadow: var(--schatten-1); }
.btn-send.active:hover { transform: translateY(-1px); box-shadow: var(--schatten-gold); }

/* Archiv-Aktions-Icons */
.btn-archive-pdf, .btn-archive-send, .btn-archive-schedule, .btn-archive-cancel, .btn-archive-correction, .btn-archive-convert {
    width: 32px; height: 32px;
    display: inline-grid; place-items: center;
    border-radius: 8px;
    border: 1px solid var(--linie);
    background: var(--flaeche);
    font-size: 14px;
    transition: all var(--t-schnell);
}
.btn-archive-pdf:hover, .btn-archive-send:hover, .btn-archive-schedule:hover, .btn-archive-correction:hover, .btn-archive-convert:hover {
    border-color: var(--gold); background: var(--gold-hell); transform: translateY(-1px);
}
.btn-archive-cancel { color: var(--rot); }
.btn-archive-cancel:hover { border-color: var(--rot); background: var(--rot-bg); transform: translateY(-1px); }
/* Angebot-Status im Archiv (17.07.2026) */
.status-badge.angebot { background: var(--gelb-bg); color: var(--gelb); }

/* ── 7. KARTEN & SEKTIONEN ─────────────────────────────────────── */
.settings-card, .ov-card, .invoice-draft, .modal-card, .logs-cats, .logs-panel, .scheduled-box {
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    box-shadow: var(--schatten-1);
    transition: box-shadow var(--t-normal), border-color var(--t-normal), background var(--t-weich);
}
.settings-card { padding: 22px 24px; margin-bottom: 16px; }
.settings-card:hover { box-shadow: var(--schatten-2); }
.ov-card { padding: 19px 21px; }
.nk-card { border-color: var(--gelb); box-shadow: 0 0 0 4px var(--gelb-bg), var(--schatten-1); }

.section-title {
    font-size: 11px; font-weight: 700; letter-spacing: .09em;
    color: var(--text-3); text-transform: uppercase;
    margin: 18px 0 9px; padding-bottom: 5px;
    border-bottom: 1px solid var(--linie);
}
.section-title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* ── 8. ÜBERSICHT (Startseite) ─────────────────────────────────── */
.ov-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); gap: 14px; margin-bottom: 16px; }
.ov-card.ov-modul { position: relative; overflow: hidden; }
.ov-card.ov-modul::after {
    content: ''; position: absolute; inset: 0 0 auto 0; height: 2.5px;
    background: var(--gold-glanz); opacity: 0; transition: opacity var(--t-normal);
}
.ov-card.ov-modul:hover { transform: translateY(-2px); box-shadow: var(--schatten-2); }
.ov-card.ov-modul:hover::after { opacity: 1; }
.ov-card.ov-modul { transition: transform var(--t-normal), box-shadow var(--t-normal); }
.ov-modul.inaktiv { opacity: .55; filter: saturate(.4); }
.ov-modul-kopf { display: flex; align-items: center; gap: 9px; font-size: 14.5px; }
.ov-modul-hinweise { margin-top: 8px; font-size: 12.3px; color: var(--text-2); line-height: 1.55; }
.ampel-dot { width: 11px; height: 11px; border-radius: 50%; flex: none; display: inline-block; }
.ampel-gruen { background: var(--gruen); box-shadow: 0 0 0 4px var(--gruen-bg); }
.ampel-gelb  { background: var(--gelb);  box-shadow: 0 0 0 4px var(--gelb-bg); }
.ampel-rot   { background: var(--rot);   box-shadow: 0 0 0 4px var(--rot-bg); animation: ampel-puls 1.6s infinite; }
.ampel-grau  { background: var(--grau);  box-shadow: 0 0 0 4px var(--grau-bg); }
@keyframes ampel-puls { 50% { box-shadow: 0 0 0 8px var(--rot-bg); } }

/* Ohne das Einnahmen-Diagramm (entfernt 13.08.2026) teilen sich die beiden
   verbliebenen Karten die Reihe zu gleichen Teilen. Die Stile des Diagramms
   (.ov-chart, .ov-legende, .lg-*) sind mit ihm entfallen — toter Stil ist
   schlimmer als kein Stil, weil er beim naechsten Umbau als Vorbild dient. */
.ov-titel { font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-3); margin: 0 0 13px; }
.ov-kpi { font-size: 27px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.chart-balken rect { transition: opacity var(--t-schnell); transform-origin: bottom; animation: balken-wachsen .7s cubic-bezier(.22,1,.36,1) backwards; }
.chart-balken:hover rect { opacity: .8; }
@keyframes balken-wachsen { from { transform: scaleY(0); } }

/* ── 9. SUB-TABS (Entwürfe/Archiv/Kundenstamm) ─────────────────── */
.tab-bar-sub {
    display: inline-flex; gap: 4px;
    background: var(--flaeche-3);
    padding: 4px; border-radius: 11px;
    margin-bottom: 18px;
}
.tab-sub {
    padding: 7px 16px; border-radius: 8px;
    font-size: 13px; font-weight: 500; color: var(--text-2);
    transition: all var(--t-schnell);
}
.tab-sub:hover { color: var(--text); }
.tab-sub.active { background: var(--flaeche); color: var(--text); font-weight: 600; box-shadow: var(--schatten-1); }

/* Eigene Klassen fürs Reinigungsmodul (Modul 4) statt tab-sub/subtab-content:
   switchSubTab() bindet global auf .tab-sub und würde sonst mit den
   Rechnungs-Sub-Tabs kollidieren (beide Bereiche laufen unabhängig). */
.reinigung-tab-sub {
    padding: 7px 16px; border-radius: 8px;
    font-size: 13px; font-weight: 500; color: var(--text-2);
    transition: all var(--t-schnell);
}
.reinigung-tab-sub:hover { color: var(--text); }
.reinigung-tab-sub.active { background: var(--flaeche); color: var(--text); font-weight: 600; box-shadow: var(--schatten-1); }
.reinigung-subtab-content { animation: einblenden var(--t-normal) both; }

.reinigung-liste { display: flex; flex-direction: column; gap: 10px; }
.reinigung-job {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 15px 18px; border-radius: 12px;
    background: var(--flaeche); box-shadow: var(--schatten-1);
    border-left: 4px solid transparent;
    transition: transform var(--t-schnell);
}
.reinigung-job-info { flex: 1; min-width: 220px; }
.reinigung-job-titel { font-weight: 600; font-size: 14.5px; display: flex; align-items: center; gap: 8px; }
.reinigung-job-meta { font-size: 12.5px; color: var(--text-2); margin-top: 2px; }
.reinigung-job-status { display: flex; align-items: center; gap: 6px; flex: none; }
/* Gast-Auto-Info (20.07.2026, nur Owner/Mitarbeiter): Name/Telefon/Buchungs-Nr.
   direkt am Reinigungsauftrag, damit man bei fehlenden Rechnungsdaten sofort
   anrufen kann, ohne erst im Rechnungs-Tab nachzuschlagen. */
.reinigung-job-gast { font-size: 12px; color: var(--gold-dunkel); margin-top: 4px; }
.reinigung-job-gast a { color: inherit; text-decoration: underline; text-decoration-style: dotted; }
/* Notizen + Fotos (20.07.2026): eigene volle Zeile unter Info/Status, damit
   der bestehende Flex-Row-Aufbau (info + status nebeneinander) erhalten bleibt. */
.reinigung-job-notiz-block { flex-basis: 100%; display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.reinigung-notiz-feld {
    width: 100%; min-height: 46px; resize: vertical; font-family: inherit; font-size: 13px;
    padding: 8px 10px; border-radius: 8px; border: 1px solid var(--linie); background: var(--flaeche-2); color: var(--text);
}
.reinigung-notiz-feld:focus { outline: none; border-color: var(--gold); }
.reinigung-notiz-anzeige { font-size: 12.5px; color: var(--text-2); background: var(--flaeche-2); border-radius: 8px; padding: 8px 10px; white-space: pre-wrap; }
.reinigung-foto-liste { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.reinigung-foto-thumb { position: relative; display: inline-block; width: 56px; height: 56px; border-radius: 8px; overflow: hidden; box-shadow: var(--schatten-1); }
.reinigung-foto-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.reinigung-foto-loeschen {
    position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%;
    border: none; background: rgba(0,0,0,.6); color: #fff; font-size: 10px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.reinigung-foto-loeschen:hover { background: var(--rot); }
.reinigung-foto-upload-label { cursor: pointer; white-space: nowrap; }

/* Dringlichkeit: überfällig/heute deutlich größer + rot/orange hervorgehoben,
   zukünftige Aufträge kompakter und ruhiger (nur zur Planung sichtbar). */
.reinigung-dl-ueberfaellig {
    border-left-color: var(--rot);
    background: var(--rot-bg);
    padding: 20px 22px;
}
.reinigung-dl-ueberfaellig .reinigung-job-titel { font-size: 17px; font-weight: 700; }
.reinigung-dl-heute {
    border-left-color: var(--gelb);
    background: var(--gelb-bg);
    padding: 18px 20px;
}
.reinigung-dl-heute .reinigung-job-titel { font-size: 15.5px; font-weight: 700; }
.reinigung-dl-bald { border-left-color: var(--linie-stark); }
.reinigung-dl-spaeter { opacity: .72; padding: 11px 16px; }
.reinigung-dl-spaeter .reinigung-job-titel { font-size: 13px; font-weight: 500; }
.reinigung-dl-spaeter .reinigung-job-meta { font-size: 11.5px; }

.reinigung-dringlichkeit {
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    padding: 2px 7px; border-radius: 6px; flex: none;
}
.reinigung-dl-ueberfaellig .reinigung-dringlichkeit { background: var(--rot); color: #fff; }
.reinigung-dl-heute .reinigung-dringlichkeit { background: var(--gelb); color: #3a2c00; }
.reinigung-dl-bald .reinigung-dringlichkeit { background: var(--flaeche-3); color: var(--text-2); }

/* Checkbox-artige Statusknöpfe statt Dropdown — große Tap-Flächen für Handy. */
.reinigung-status-box {
    padding: 9px 14px; border-radius: 9px; border: 1.5px solid var(--linie);
    background: var(--flaeche-3); color: var(--text-2); font-size: 12.5px; font-weight: 600;
    transition: all var(--t-schnell); cursor: pointer;
}
.reinigung-status-box:hover:not(.active) { border-color: var(--gold, #b8945a); color: var(--text); }
.reinigung-status-box.active {
    background: var(--gold, #b8945a); border-color: var(--gold, #b8945a); color: #fff;
}
.reinigung-status-box:disabled { opacity: .5; cursor: default; }
.reinigung-abrechnung-tabelle { width: 100%; border-collapse: collapse; }
.reinigung-abrechnung-tabelle th, .reinigung-abrechnung-tabelle td {
    text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--linie);
    font-size: 13.5px;
}
.reinigung-abrechnung-tabelle th { color: var(--text-2); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
/* Verdienst-Aufschlüsselung je Wohnung (20.07.2026): aufklappbare Detailzeile
   unter jeder Kraft-Zeile, eigene kleinere Subtabelle im gedimmten Ton. */
.reinigung-abrechnung-detail td { padding: 10px 12px 14px 28px; border-bottom: 1px solid var(--linie); }
.reinigung-abrechnung-subtabelle { width: 100%; border-collapse: collapse; background: var(--flaeche-2); border-radius: var(--radius-klein); overflow: hidden; }
.reinigung-abrechnung-subtabelle th, .reinigung-abrechnung-subtabelle td {
    text-align: left; padding: 6px 10px; font-size: 12.5px; color: var(--text-2);
    border-bottom: 1px solid var(--linie);
}
.reinigung-abrechnung-subtabelle th { font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
.reinigung-abrechnung-subtabelle tr:last-child td { border-bottom: none; }

/* Gästevorgänge (Phase 2B): operative Ansicht für Owner/Mitarbeiter. */
.guest-cases-wrap { display: flex; flex-direction: column; gap: 16px; }
.guest-cases-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.guest-cases-filter {
    display: flex; align-items: end; flex-wrap: wrap; gap: 12px;
    padding: 13px 15px; border: 1px solid var(--linie); border-radius: var(--radius);
    background: var(--flaeche);
}
.guest-cases-filter label {
    display: flex; flex-direction: column; gap: 5px;
    min-width: 190px; font-size: 11.5px; font-weight: 600; color: var(--text-2);
}
.guest-cases-list { display: flex; flex-direction: column; gap: 10px; }
.guest-case {
    padding: 16px 18px; border: 1px solid var(--linie); border-left: 4px solid var(--linie-stark);
    border-radius: 12px; background: var(--flaeche); box-shadow: var(--schatten-1);
}
.guest-case-priority-P0 { border-left-color: var(--rot); background: var(--rot-bg); }
.guest-case-priority-P1 { border-left-color: var(--gelb); }
.guest-case-priority-P2 { border-left-color: var(--gold); }
.guest-case-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.guest-case-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 14px; font-weight: 700; }
.guest-case-meta { margin-top: 4px; font-size: 12.5px; color: var(--text-2); }
.guest-case-summary { margin-top: 11px; font-size: 14px; line-height: 1.5; }
.guest-case-source {
    margin-top: 9px; padding: 9px 11px; border-radius: 8px;
    background: var(--flaeche-3); color: var(--text-2); font-size: 12.5px;
    white-space: pre-wrap;
}
.guest-case-actions {
    display: flex; align-items: end; justify-content: flex-end; flex-wrap: wrap;
    gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--linie);
}
.guest-case-actions label {
    display: flex; flex-direction: column; gap: 4px; min-width: 170px;
    font-size: 11px; font-weight: 600; color: var(--text-2);
}
.guest-case-badge { display: inline-flex; padding: 3px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; }
.guest-case-badge-P0 { background: var(--rot); color: #fff; }
.guest-case-badge-P1 { background: var(--gelb-bg); color: var(--gelb); }
.guest-case-badge-P2 { background: var(--gold-schimmer); color: var(--gold); }
.guest-case-status-badge { background: var(--flaeche-3); color: var(--text-2); }
@media (max-width: 680px) {
    .guest-cases-head, .guest-case-top { flex-direction: column; }
    .guest-cases-filter label, .guest-case-actions label { min-width: 100%; width: 100%; }
    .guest-case-actions .btn-confirm { width: 100%; }
}

/* ── 10. ENTWÜRFE: Master-Detail ───────────────────────────────── */
.draft-index { display: flex; flex-direction: column; gap: 7px; max-height: 72vh; overflow-y: auto; padding-right: 6px; }
.draft-detail { min-width: 0; }
.di-badge, .approved-badge, .issued-status, .cancelled-status, .status-badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 600;
    padding: 3px 9px; border-radius: 999px;
    letter-spacing: .01em;
}
.di-badge-ok   { background: var(--gruen-bg); color: var(--gruen); }
.di-badge-now  { background: var(--blau-bg);  color: var(--blau); }
.di-badge-soon { background: var(--grau-bg);  color: var(--text-2); }
.di-badge-warn { background: var(--gelb-bg);  color: var(--gelb); }
.di-badge-out  { background: var(--gruen-bg); color: var(--gruen); }
.di-text {
    display: block;
    width: 100%; min-width: 0;
    text-align: left;
}
.di-name {
    font-weight: 600; font-size: 13.5px;
    flex: 1 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.di-name-row { display: flex; align-items: center; gap: 8px; justify-content: space-between; min-width: 0; }
.di-meta {
    display: flex; flex-wrap: nowrap; align-items: center; gap: 6px;
    font-size: 12px; color: var(--text-2); margin-top: 3px;
    /* Lieber abschneiden als umbrechen: Eine umgebrochene Kennzeichenzeile
       sieht aus wie ein weiterer Listeneintrag (13.08.2026). */
    min-width: 0; overflow: hidden; white-space: nowrap;
}
.di-meta > * { flex-shrink: 0; }
.md-back { display: none; }
@media (max-width: 900px) {
    .md-back { display: inline-flex; margin-bottom: 12px; }
}

.invoice-draft { padding: 24px; border-width: 1.5px; }
.invoice-draft.status-draft { border-color: var(--gold); background: var(--flaeche-2); }
.invoice-draft.status-ready { border-color: var(--gruen); box-shadow: 0 0 0 4px var(--gruen-bg), var(--schatten-1); }
.missing-hint { font-size: 12.5px; color: var(--gelb); background: var(--gelb-bg); border-radius: 8px; padding: 8px 12px; }
/* Kleinbetragsrechnung (21.08.2026): ein ERLAUBNIS-Hinweis, kein Mangel —
   deshalb bewusst neutral und nicht gelb wie .missing-hint darüber. */
.kleinbetrag-hinweis { font-size: 12.3px; color: var(--text-2); line-height: 1.5; margin: 6px 0 0; }

/* Positionen */
.position-list { display: flex; flex-direction: column; gap: 6px; }
.position-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: var(--radius-klein);
    transition: border-color var(--t-schnell);
}
.position-row:hover { border-color: var(--linie-stark); }
.position-row > div:first-child { flex: 1; min-width: 0; }
.pos-num { color: var(--text-2); font-size: 12.5px; flex: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pos-desc { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 500; }
.pos-sub { display: block; font-size: 12px; color: var(--text-2); font-weight: 400; margin-top: 1px; }
.pos-ust { font-size: 11.5px; color: var(--text-3); flex: none; }
.pos-total { font-weight: 600; font-size: 13.5px; flex: none; font-variant-numeric: tabular-nums; }
.pos-actions { display: flex; gap: 4px; flex: none; }
.pos-edit, .pos-delete {
    width: 26px; height: 26px; display: grid; place-items: center;
    border-radius: 7px; font-size: 12px; color: var(--text-3);
    transition: all var(--t-schnell);
}
.pos-edit:hover { background: var(--gold-hell); color: var(--gold); }
.pos-delete:hover { background: var(--rot-bg); color: var(--rot); }
.position-form { background: var(--flaeche-2) !important; border: 1px dashed var(--gold) !important; border-radius: var(--radius-klein); padding: 16px; margin-top: 10px; animation: einblenden var(--t-normal) both; }

.summary-block { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linie); display: flex; flex-direction: column; gap: 4px; }
.summary-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.summary-row.total { font-size: 15.5px; font-weight: 700; color: var(--text); padding-top: 6px; border-top: 1px solid var(--linie); margin-top: 4px; }

/* Freigabe-Barriere (steuerkritisch, bewusst auffällig) */
.issue-barrier {
    border: 1.5px solid var(--gelb);
    background: var(--gelb-bg);
    border-radius: var(--radius-klein);
    padding: 14px 16px; margin-top: 14px;
}
.issue-barrier-title { font-weight: 700; font-size: 13.5px; color: var(--gelb); }
.issue-barrier-text { font-size: 12.8px; color: var(--text-2); margin-top: 4px; }
.issue-confirm { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; }
.issue-actions { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.issued-block { background: var(--gruen-bg); border: 1px solid var(--gruen); border-radius: var(--radius-klein); padding: 12px 14px; margin-top: 12px; font-size: 13px; }
.send-warning { font-size: 12.5px; color: var(--gelb); }
.send-target { font-weight: 600; }
.sent-confirm { color: var(--gruen); font-weight: 600; font-size: 13px; }
.storno-hinweis { font-size: 12.5px; color: var(--rot); }

/* ── 11. ARCHIV ────────────────────────────────────────────────── */
.archive-export {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 13px 16px; margin-bottom: 14px;
    background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius);
}
.archive-export-label { font-size: 13px; font-weight: 600; color: var(--text-2); }
.archive-table { display: flex; flex-direction: column; gap: 7px; overflow-x: auto; }
.archive-header, .archive-row {
    display: grid;
    grid-template-columns: minmax(190px, 1.25fr) 105px minmax(180px, 1.6fr) 105px 110px 176px;
    gap: 12px; align-items: center;
    padding: 11px 16px;
    min-width: 980px;
}
.archive-header { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-3); padding-bottom: 4px; }
.archive-row {
    background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius-klein);
    font-size: 13.3px;
    transition: border-color var(--t-schnell), transform var(--t-schnell), box-shadow var(--t-schnell);
}
.archive-row:hover { border-color: var(--gold); transform: translateY(-1px); box-shadow: var(--schatten-1); }
.archive-row.storno { opacity: .78; }
.archive-row.cancelled { opacity: .78; }
.archive-col-number { font-weight: 700; font-variant-numeric: tabular-nums; }
.archive-col-guest { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.archive-col-amount { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.archive-col-date { color: var(--text-2); font-size: 12.5px; }
.archive-col-actions { display: flex; gap: 5px; justify-content: flex-end; }
.archive-ref { font-size: 11.5px; color: var(--text-3); display: block; }
.archive-source { margin-top: 5px; }
.archive-source .src-badge { border-radius: 999px; padding: 3px 9px; }
.issued-status { background: var(--gruen-bg); color: var(--gruen); }
.sent { background: var(--gruen-bg); color: var(--gruen); }
.cancelled-status { background: var(--rot-bg); color: var(--rot); }
.approved-badge { background: var(--gruen-bg); color: var(--gruen); }

.archive-empty { text-align: center; padding: 46px 20px; color: var(--text-3); }
.archive-empty-icon { font-size: 34px; margin-bottom: 10px; }
.archive-empty-title { font-weight: 600; color: var(--text-2); font-size: 14.5px; }
.archive-empty-hint { font-size: 12.8px; margin-top: 4px; }

.scheduled-box { padding: 15px 18px; margin-bottom: 14px; }
.scheduled-title { font-weight: 700; font-size: 13px; margin-bottom: 8px; }
.scheduled-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 13px; border-top: 1px solid var(--linie); }

/* ── 12. KUNDENSTAMM ───────────────────────────────────────────── */
.kunden-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.kunde-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px;
    background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius-klein);
    transition: border-color var(--t-schnell);
}
.kunde-row:hover { border-color: var(--gold); }
.kunde-info { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 500; }
.kunde-sub { display: block; font-size: 12px; color: var(--text-2); font-weight: 400; }
.kunde-actions { display: flex; gap: 6px; }
/* Telegram-Chat-ID je Reinigungskraft (Feature 4, 20.07.2026). */
.user-telegram-row { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.user-telegram-input { max-width: 240px; font-size: 12.5px; padding: 5px 9px; }
.kunden-form { border-top: 1px solid var(--linie); padding-top: 16px; }

/* ── 13. EINSTELLUNGEN ─────────────────────────────────────────── */
.settings-wrap { max-width: 1080px; }
.settings-layout { display: grid; grid-template-columns: 190px 1fr; gap: 22px; align-items: start; }
@media (max-width: 900px) { .settings-layout { grid-template-columns: 1fr; } }
.settings-nav { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 14px; max-height: calc(100vh - 100px); overflow-y: auto; }
@media (max-width: 900px) {
    .settings-nav { position: static; max-height: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) { .settings-nav { grid-template-columns: 1fr; } }
.settings-nav-group { display: flex; flex-direction: column; gap: 2px; }
.settings-nav-group-title {
    font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
    color: var(--text-3); padding: 0 12px; margin-bottom: 3px;
}
.settings-nav-item {
    text-align: left; padding: 8px 12px;
    border-radius: 8px; font-size: 13px; color: var(--text-2);
    transition: all var(--t-schnell);
}
.settings-nav-item:hover { background: var(--gold-schimmer); color: var(--text); }
.settings-nav-item.active { background: var(--gold-hell); color: var(--gold-dunkel); font-weight: 600; }
/* Einstellungen als gebuendelte Unterseiten: alle Karten der aktiven Gruppe zeigen.
   .settings-actions (globale Speichern-Leiste) liegt bewusst AUSSERHALB
   von .settings-card und bleibt daher immer sichtbar. */
.settings-content > .settings-card { display: none; }
.settings-content > .settings-card.active { display: block; scroll-margin-top: 86px; }
.settings-section-jumps {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
    margin: -6px 0 18px;
}
.settings-section-jumps button {
    padding: 5px 10px; border: 1px solid var(--linie); border-radius: 999px;
    background: var(--flaeche); color: var(--text-2); font-size: 11.5px; font-weight: 600;
    transition: border-color var(--t-schnell), color var(--t-schnell), background var(--t-schnell);
}
.settings-section-jumps button:hover {
    border-color: var(--gold); color: var(--gold-dunkel); background: var(--gold-schimmer);
}
.settings-subsection-title {
    margin: 22px 0 8px; padding-top: 18px; border-top: 1px solid var(--linie);
    color: var(--text); font-size: 14px; font-weight: 700;
}
.settings-list-toolbar { justify-content: flex-start; gap: 8px; margin: 0 0 10px; }
.nav-badge {
    display: inline-block; min-width: 17px; padding: 1px 5px; margin-left: 4px;
    border-radius: 999px; background: var(--rot); color: #fff;
    font-size: 10.5px; font-weight: 700; line-height: 15px; text-align: center;
}
.nav-badge.hidden { display: none; }
.settings-content { min-width: 0; }
.settings-heading { font-size: 19px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 4px; }
.settings-sub { font-size: 13px; color: var(--text-2); margin-bottom: 18px; }
.settings-section-title { font-size: 14.5px; font-weight: 700; margin-bottom: 12px; }
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px 16px; }
.settings-grid label { display: flex; flex-direction: column; gap: 5px; font-size: 12.3px; font-weight: 600; color: var(--text-2); }
.settings-checkbox-label { flex-direction: row !important; align-items: center; gap: 9px !important; font-weight: 500 !important; }
.settings-hint { font-size: 12.5px; color: var(--text-2); line-height: 1.55; margin-bottom: 12px; }
.settings-hint-inline { font-weight: 400; color: var(--text-3); }
.settings-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 16px; }
.settings-status { font-size: 12.8px; color: var(--text-2); transition: color var(--t-schnell); }
.settings-status.ok { color: var(--gruen); font-weight: 600; }
.plattform-list { display: flex; flex-direction: column; gap: 7px; }
.plattform-row { display: flex; gap: 9px; align-items: center; }
/* Stillgelegt (07.09.2026): sichtbar, aber erkennbar ausser Betrieb. Ein
   Kanal, auf den Buchungen zeigen, darf nicht verschwinden — sonst verlieren
   diese Buchungen ihre Zuordnung. */
.plattform-row.plattform-still { opacity: .55; }
.plattform-row.plattform-still .plattform-key { font-style: italic; }
.plattform-key { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; color: var(--text-3); }
.plattform-label { flex: 1; min-width: 130px; }
/* Aliasse brauchen mehr Platz als der Name — dort stehen mehrere Schreibweisen
   nebeneinander (13.08.2026). */
.plattform-aliasse { flex: 2; min-width: 190px; }
@media (max-width: 720px) {
    .plattform-row { flex-wrap: wrap; }
    .plattform-aliasse { flex-basis: 100%; }
}
.logo-box { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.logo-preview { max-height: 64px; border-radius: 8px; border: 1px solid var(--linie); padding: 6px; background: #fff; }

/* Pro-Wohnung-Wissensbasis-Panel (Modul 5a-Nachtrag) */
.einheit-wissen-panel {
    padding: 12px 14px; margin: -4px 0 10px 0; border-radius: 10px;
    background: var(--flaeche-3);
}

/* Chat-Bot: Gast-Anfragen-Log (Modul 5b) */
.chatbot-anfrage-row {
    padding: 12px 14px; border-radius: 10px; background: var(--flaeche-3);
    margin-bottom: 8px; border-left: 4px solid transparent;
}
.chatbot-anfrage-row.chatbot-anfrage-offen { border-left-color: var(--gelb); background: var(--gelb-bg); }
.chatbot-anfrage-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.chatbot-anfrage-text { font-size: 12.8px; color: var(--text-2); margin-top: 3px; line-height: 1.5; }
.chatbot-anfrage-row button { margin-top: 8px; }

/* Buchungsanfragen: Kategorie-Badge (Heuristik/LLM-Klassifikation, 09.07.2026) */
.anfrage-kategorie {
    font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 20px;
    letter-spacing: .01em; white-space: nowrap;
}
.anfrage-kategorie-rechnungsfrage { background: var(--gold-schimmer); color: var(--gold-dunkel); }
.anfrage-kategorie-neue_anfrage { background: var(--gruen-bg); color: var(--gruen); }
.anfrage-kategorie-unklar { background: var(--flaeche-2); color: var(--text-3); }

/* Log-Zeilen: Löschen-Knopf + "leeren"-Aktion (09.07.2026) */
.anfrage-loeschen {
    margin-left: auto; border: none; background: transparent; color: var(--text-3);
    font-size: 13px; line-height: 1; padding: 3px 6px; border-radius: 6px; cursor: pointer;
    transition: color var(--t-schnell), background var(--t-schnell);
}
.anfrage-loeschen:hover { color: var(--rot); background: var(--rot-bg, rgba(242,102,102,.12)); }
.section-title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.section-title-row .section-title { margin-bottom: 0; }

/* Gast-/Bot-Nachricht als kleine Chat-Bubbles statt Fließtext mit em-Label
   (09.07.2026, Mems Feedback: Sprecher soll deutlich hervorgehoben sein). */
.chat-bubble {
    font-size: 12.8px; color: var(--text-2); line-height: 1.5;
    padding: 8px 11px; border-radius: 9px; margin-top: 6px;
}
.chat-bubble-label {
    display: block; font-weight: 700; font-size: 11px; text-transform: uppercase;
    letter-spacing: .04em; margin-bottom: 2px; color: var(--text);
}
.chat-bubble-gast { background: var(--flaeche-3); }
.chat-bubble-bot { background: var(--gold-schimmer); }
.chat-bubble-bot .chat-bubble-label { color: var(--gold-dunkel); }

/* Chat-Bot: Nachrichten-Regeln (Modul 5a) */
.nachricht-row {
    padding: 12px 14px; border-radius: 10px; background: var(--flaeche-3);
    margin-bottom: 10px;
}
.nachricht-kopf { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.nachricht-row textarea.invoice-field { width: 100%; resize: vertical; font-family: inherit; }
.nachricht-zeichenleiste {
    display: flex; align-items: center; flex-wrap: wrap; gap: 5px;
    margin-top: 7px; color: var(--text-3); font-size: 11.5px;
}
.nachricht-zeichenleiste button {
    min-width: 30px; min-height: 28px; padding: 3px 7px;
    border: 1px solid var(--linie); border-radius: 7px; background: var(--flaeche);
    font-size: 15px; line-height: 1; cursor: pointer;
}
.nachricht-zeichenleiste button:hover { border-color: var(--gold); background: var(--gold-schimmer); }
.nachricht-unicode-hinweis { margin-left: 3px; }

/* ── 14. LOGS ──────────────────────────────────────────────────── */
.logs-wrap { max-width: 1080px; }
.logs-layout { display: grid; grid-template-columns: 210px 1fr; gap: 16px; align-items: start; }
@media (max-width: 800px) { .logs-layout { grid-template-columns: 1fr; } }
.logs-cats { padding: 10px; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 76px; }
.logs-cats button {
    text-align: left; padding: 8px 12px; border-radius: 8px;
    font-size: 13px; color: var(--text-2);
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
    transition: all var(--t-schnell);
}
.logs-cats button:hover { background: var(--gold-schimmer); color: var(--text); }
.logs-cats button.active { background: var(--gold-hell); color: var(--gold-dunkel); font-weight: 600; }
.logs-count { font-size: 11px; background: var(--flaeche-3); border-radius: 999px; padding: 1px 8px; color: var(--text-3); }
.logs-panel { padding: 6px 18px; }
.audit-item-top { display: flex; align-items: center; gap: 10px; }
.audit-item-time { font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; flex: none; width: 118px; }
.audit-item-action { font-weight: 600; font-size: 13px; }
.audit-item-draft { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11.5px; color: var(--gold-dunkel); }
.audit-item-details { font-size: 12px; color: var(--text-2); margin: 2px 0 0 128px; }
.logs-panel > div { padding: 10px 0; border-bottom: 1px solid var(--linie); }
.logs-panel > div:last-child { border-bottom: 0; }
.audit-empty { color: var(--text-3); font-size: 13px; padding: 22px 0; text-align: center; }

/* ── 15. MODALE ────────────────────────────────────────────────── */
.modal-overlay {
    position: fixed; inset: 0; z-index: 90;
    display: flex; align-items: center; justify-content: center;
    background: rgba(20, 17, 10, .45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: overlay-ein var(--t-normal) both;
}
@keyframes overlay-ein { from { opacity: 0; } }
.modal-card {
    width: min(520px, calc(100vw - 36px));
    max-height: 86vh; overflow-y: auto;
    padding: 26px 28px;
    box-shadow: var(--schatten-2);
    animation: modal-ein var(--t-weich) both;
}
@keyframes modal-ein {
    from { opacity: 0; transform: translateY(16px) scale(.97); }
    to   { opacity: 1; transform: none; }
}
.modal-title { font-size: 17px; font-weight: 700; margin-bottom: 12px; letter-spacing: -.02em; }
.modal-label { display: block; font-size: 12.3px; font-weight: 600; color: var(--text-2); margin: 12px 0 5px; }
.modal-hint { font-size: 12.5px; color: var(--text-2); line-height: 1.55; margin-top: 6px; }
.modal-required { color: var(--rot); }
.modal-optional { color: var(--text-3); font-weight: 400; }
.modal-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 18px; }

.platform-group { display: inline-flex; gap: 4px; background: var(--flaeche-3); padding: 4px; border-radius: 10px; }
.platform-group input[type="radio"] { display: none; }
.platform-group label {
    padding: 7px 15px; border-radius: 7px; font-size: 13px; font-weight: 500;
    color: var(--text-2); cursor: pointer; transition: all var(--t-schnell);
}
.platform-group input[type="radio"]:checked + label { background: var(--gold-glanz); color: #fff; font-weight: 600; box-shadow: var(--schatten-1); }

.status-badge.issued { background: var(--gelb-bg); color: var(--gelb); }
.invoice-draft.issued { border-color: var(--gruen); }

/* ── 16. SONSTIGES ─────────────────────────────────────────────── */
.status-badge { font-size: 12px; }
.subtab-content { animation: einblenden var(--t-normal) both; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}




/* ============================================================
   KOMPATIBILITÄTS-LAYER v2 (2c): Alt-Regeln inkl. korrekter
   @media-Zuordnung (v1 hatte Mobile-Regeln global angewandt).
   ============================================================ */
.btn-preview {
    /* War hart auf "white" verdrahtet (17.07.2026 gefixt) — im Dark Mode
       wechselt --text zu einem hellen Creme, weißer Hintergrund + heller Text
       war praktisch unlesbar. --flaeche folgt dem Theme wie bei allen anderen
       sekundären Buttons (.btn-cancel etc.). */
    background: var(--flaeche);
    color: var(--text);
    border: 1px solid var(--linie-stark);
    padding: 10px 18px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
    font-family: inherit;
}
.btn-preview:hover {
    border-color: var(--text);
    background: var(--flaeche-2);
}
.btn-preview.incomplete {
    border-color: var(--rot);
    color: var(--rot);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}
.btn-preview.incomplete:hover {
    background: var(--rot-bg);
}
.logs-cat {
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
    text-align: left; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 9px;
    padding: 10px 12px; font-size: 13px; font-weight: 600; color: #4b5563; cursor: pointer;
    transition: all 0.12s ease;
}
.logs-cat:hover { background: var(--flaeche-2); border-color: var(--linie-stark); }
.logs-cat.active { background: var(--gold); color: #fff; border-color: var(--gold); }
.logs-cat.active .logs-count { background: rgba(255,255,255,.25); }
.audit-item { border-bottom: 1px solid var(--flaeche-3); padding: 11px 12px; }
.audit-item:last-child { border-bottom: none; }
.audit-item.err { background: #fdf3f1; border-radius: 8px; }
.master-detail {
    display: grid;
    /* 13.08.2026 von 460px auf 560px: Bei „BOOKING.COM  Konstantin Weiss" plus
       Status- und Vollstaendigkeitskennzeichen brach die Zeile um, und ein
       umgebrochenes Kennzeichen liest sich wie ein zweiter Eintrag. Die rechte
       Spalte hat Platz genug — sie zeigt ein Formular, keine Tabelle. */
    grid-template-columns: 560px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}
@media (max-width: 1400px) {
    /* Auf schmalen Bildschirmen wieder enger, sonst bleibt fuer die
       Detailspalte zu wenig uebrig. */
    .master-detail { grid-template-columns: 460px minmax(0, 1fr); }
}
.di-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    flex-shrink: 0;
    text-align: left;
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: 10px;
    padding: 10px 12px 10px 16px;
    cursor: pointer;
    overflow: hidden;
    transition: border-color .15s, background .15s, box-shadow .2s, transform .2s cubic-bezier(.16,1,.3,1), padding-left .2s;
}
.di-item:hover { border-color: var(--gold); background: var(--flaeche-2); }
.di-item.di-active {
    border-color: var(--gold);
    background: var(--gold-hell);
    box-shadow: 0 0 0 1px var(--gold) inset;
    padding-left: 20px;
    transform: translateX(3px);
}
/* Breiter, farbiger Akzent-Balken statt der schmalen Umrandung (09.07.2026,
   auf Wunsch von Mem — die reine Outline-Box wirkte grafisch zu unauffällig). */
.di-item.di-active::after {
    content: '';
    position: absolute; left: 0; top: 6px; bottom: 6px;
    width: 5px; border-radius: 4px;
    background: var(--gold-glanz);
    box-shadow: 0 0 10px 1px var(--gold-schimmer);
}
.di-status {
    width: 9px; height: 9px;
    border-radius: 50%;
    flex: 0 0 auto;
}
.di-status.di-ready { background: var(--gold); }
.di-status.di-draft { background: var(--grau); }
.reif-bar {
    width: 100%;
    text-align: left;
    border: 1px solid #e7d9bd;
    background: var(--gold-hell);
    color: #8a6d2f;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 4px;
    transition: background .15s, border-color .15s;
}
.reif-bar { flex-shrink: 0; }
.reif-bar:hover { background: #f7eedd; }
.reif-bar.reif-active { background: var(--gold); color: #fff; border-color: var(--gold); }
/* Rechnungsfrage-Filter (19.07.2026): gleiche Bar-Mechanik wie .reif-bar,
   aber mit den Gelb-Tokens der Warn-Badges, damit Filter und Badge optisch
   zusammengehören. */
.rechnungsfrage-bar {
    width: 100%;
    text-align: left;
    border: 1px solid var(--gelb);
    background: var(--gelb-bg);
    color: var(--gelb);
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 4px;
    flex-shrink: 0;
    transition: background .15s, border-color .15s, opacity .15s;
}
.rechnungsfrage-bar:hover { opacity: .85; }
.rechnungsfrage-bar.reif-active { background: var(--gelb); color: #fff; border-color: var(--gelb); }
.btn-rechnungsfrage-erledigt {
    border: 1px solid var(--gruen);
    background: var(--gruen-bg);
    color: var(--gruen);
    border-radius: 8px;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, transform .15s;
}
.btn-rechnungsfrage-erledigt:hover { background: var(--gruen); color: #fff; transform: translateY(-1px); }
.src-badge {
    flex: 0 0 auto;
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 4px;
    color: #fff;
    line-height: 1.4;
}
.src-airbnb { background: #ff5a5f; }
.src-booking { background: #003580; }
.src-direkt { background: var(--gold); }
.src-custom { background: var(--text-2); }
.btn-stern {
    background: transparent; border: none; cursor: pointer;
    font-size: 1.4rem; line-height: 1; padding: 0 4px;
    color: #c4c4c4; transition: color .15s, transform .1s;
}
.btn-stern:hover { color: var(--gold); transform: scale(1.1); }
.btn-stern.is-kunde { color: #e6b400; cursor: default; }
.btn-stern.is-kunde:hover { transform: none; }
.btn-stern:disabled { cursor: default; }
.kunde-form { border-top: 1px dashed var(--linie-stark); padding-top: 12px; }
@media (max-width: 960px) {
    .master-detail { grid-template-columns: 1fr; }
    .di-item { width: 100%; }
    .master-detail .draft-detail { display: none; }
    .master-detail.md-detail .draft-index { display: none; }
    .master-detail.md-detail .draft-detail { display: block; }
    .master-detail.md-detail .md-back { display: inline-flex; }
    [data-subtab-content="entwuerfe"].md-detail-active > .flex,
    [data-subtab-content="entwuerfe"].md-detail-active > #draft-search { display: none; }
}

/* ============================================================
   ZERO-FRAME-LAYER (2c, Design-Direktive Mem 06.07.2026)
   Keine harten Trennlinien: Räume entstehen durch Licht, Schatten
   und Flächen-Variation. Frosted Glass + Gold mit Noise-Textur,
   Serif-Display-Typografie, Floating, Cursor-Licht, Entfaltung.
   ============================================================ */

/* 1. Zero-Frame: Karten verlieren ihre Konturen — Tiefe statt Linien */
.settings-card, .ov-card, .invoice-draft, .di-item, .archive-row,
.position-row, .kunde-row, .scheduled-box, .archive-export,
.logs-cats, .logs-panel, .user-badge {
    border-color: transparent;
    box-shadow:
        0 1px 1.5px rgba(20, 16, 8, .04),
        0 6px 18px -8px rgba(20, 16, 8, .10),
        0 0 0 1px rgba(184, 148, 90, .05);
}
html[data-theme="dark"] .settings-card, html[data-theme="dark"] .ov-card,
html[data-theme="dark"] .invoice-draft, html[data-theme="dark"] .di-item,
html[data-theme="dark"] .archive-row, html[data-theme="dark"] .position-row,
html[data-theme="dark"] .kunde-row, html[data-theme="dark"] .scheduled-box,
html[data-theme="dark"] .archive-export, html[data-theme="dark"] .logs-cats,
html[data-theme="dark"] .logs-panel, html[data-theme="dark"] .user-badge {
    border-color: transparent;
    box-shadow:
        0 1px 1.5px rgba(0, 0, 0, .5),
        0 8px 22px -8px rgba(0, 0, 0, .55),
        0 0 0 1px rgba(184, 148, 90, .09),
        inset 0 1px 0 rgba(255, 255, 255, .03);
}
.archive-row:hover, .di-item:hover, .kunde-row:hover, .position-row:hover {
    border-color: transparent;
    box-shadow:
        0 2px 3px rgba(20, 16, 8, .05),
        0 14px 30px -10px rgba(20, 16, 8, .16),
        0 0 0 1px rgba(184, 148, 90, .28),
        0 0 24px -6px rgba(184, 148, 90, .35);
}
.di-item.di-active {
    border-color: transparent;
    box-shadow:
        0 0 0 1px rgba(184, 148, 90, .35),
        0 8px 20px -6px rgba(184, 148, 90, .4),
        0 0 34px -6px rgba(184, 148, 90, .45);
}
.topbar { border-bottom-color: transparent; box-shadow: 0 10px 30px -18px rgba(20,16,8,.25); }
.sidebar { border-right-color: transparent; box-shadow: 14px 0 40px -28px rgba(20,16,8,.35); }
.section-title { border-bottom: 0; }
.summary-block, .kunden-form, .sidebar-foot { border-color: rgba(184,148,90,.14); }

/* 2. Frosted Glass, verstärkt */
.sidebar, .topbar, .modal-card {
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
}
.modal-card { background: var(--glas); }

/* 3. Gold mit Material-Textur (SVG-Noise über dem Verlauf) */
.brand-logo, .tab-top.active, .btn-confirm, .btn-new-draft, .btn-issue, .btn-send.active,
.platform-group input[type="radio"]:checked + label {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"),
        linear-gradient(135deg, #cfa96b 0%, #b8945a 45%, #a07f45 100%);
}

/* 4. Typografische Hierarchie: Serif-Display mit Letter-Spacing (Überschriften) */
.topbar h1, .settings-heading, .modal-title, .brand-name {
    font-family: 'Cormorant Garamond', 'Georgia', serif;
}
.topbar h1 { font-size: 21px; font-weight: 600; letter-spacing: .05em; }
.settings-heading { font-size: 24px; font-weight: 600; letter-spacing: .05em; }
.modal-title { font-size: 21px; font-weight: 600; letter-spacing: .05em; }

/* 4b. Zahlen-Typografie (09.07.2026, auf Wunsch von Mem). Ursprünglich nur für die
   Übersicht-KPIs eingeführt (Serif wirkte dort unprofessionell) — Mem wies zurecht
   darauf hin, dass DADURCH ein neuer Bruch entstand: Übersicht-Zahlen in Space
   Grotesk, aber Rechnungsbeträge/-Positionen, Archiv-Liste und Reinigungs-Abrechnung
   weiterhin im normalen Inter (Body-Font) — zwei verschiedene Zahlen-Schriften im
   selben Produkt. Space Grotesk jetzt konsequent auf JEDE Stelle angewendet, an der
   eine Geldsumme oder eine hervorgehobene Kennzahl steht. */
.ov-kpi,
.pos-num, .pos-total, .summary-row,
.archive-col-amount,
.reinigung-abrechnung-tabelle td:nth-child(2),
.reinigung-abrechnung-tabelle td:nth-child(3),
.reinigung-abrechnung-subtabelle td:nth-child(2),
.reinigung-abrechnung-subtabelle td:nth-child(3),
.nav-badge, .logs-count {
    font-family: 'Space Grotesk', 'Inter', -apple-system, sans-serif;
    font-variant-numeric: tabular-nums;
}
.ov-kpi { font-size: 31px; font-weight: 600; letter-spacing: -.01em; }
.ov-titel, .section-title, .archive-header, .brand-sub {
    letter-spacing: .14em;
}

/* 5. Floating: kaum wahrnehmbares Schweben (nur große Flächenkarten) */
@keyframes schweben {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-2px); }
    100% { transform: translateY(0); }
}
/* Nur die Uebersichtskarten schweben. Einstellungskarten sind bewusst
   ausgenommen (03.08.2026): Inaktive Karten stehen auf display:none, die
   Animation startete beim Umschalten also jedes Mal bei 0% und die Karte
   sprang sichtbar. Bei einem Formular ist eine Schwebebewegung ohnehin eher
   stoerend als schmueckend. */
.ov-card {
    animation: schweben 7s ease-in-out infinite;
}
.ov-grid > :nth-child(2n) { animation-delay: -2.3s; animation-duration: 8s; }
.ov-grid > :nth-child(3n) { animation-delay: -4.1s; animation-duration: 6.4s; }
.ov-card.ov-modul:hover { animation-play-state: paused; }

/* 6. Entfaltung statt Laden (Spring-Feder beim Öffnen) */
.app {
    animation: entfalten .9s cubic-bezier(.22, 1.28, .36, 1) both;
    transform-origin: 50% 42%;
}
@keyframes entfalten {
    from { opacity: 0; transform: scale(.95); }
    to   { opacity: 1; transform: scale(1); }
}
.tab-content { animation: einblenden .55s cubic-bezier(.22, 1.28, .36, 1) both; }

/* 7. Cursor-Licht (Radial-Kegel folgt der Maus, app.js setzt Position) */
#cursor-licht {
    position: fixed; inset: 0;
    pointer-events: none;
    z-index: 5;
    background: radial-gradient(340px circle at var(--mx, -500px) var(--my, -500px),
        rgba(207, 169, 107, .09), transparent 65%);
    transition: opacity .4s;
}
html[data-theme="dark"] #cursor-licht {
    background: radial-gradient(380px circle at var(--mx, -500px) var(--my, -500px),
        rgba(207, 169, 107, .11), transparent 65%);
}
@media (pointer: coarse) { #cursor-licht { display: none; } }
@media (prefers-reduced-motion: reduce) {
    .ov-card, .settings-card, .app { animation: none !important; }
    #cursor-licht { display: none; }
}


/* ============================================================
   DARK-LUXURY-FEINSCHLIFF (2c, Direktive Mem): Rauchglas-Karten,
   Ambient-Randlicht bei Hover, pulsierender Live-Status.
   ============================================================ */
/* `.di-item` und `.archive-row` am 13.08.2026 hier ENTFERNT.
   ANLASS: „Ab dem dritten Hover entsteht ein komischer Effekt."
   Jedes Element mit `backdrop-filter` erzwingt eine eigene Zeichenebene, und
   der Hintergrund muss bei jeder Bewegung neu unscharf gerechnet werden.
   Zusammen mit dem Anheben beim Darueberfahren haeuften sich diese Ebenen an —
   ab der dritten sichtbar als Flackern und Nachziehen.
   Bei zwanzig Listenzeilen ist das ohnehin die teuerste Regel der Datei; bei
   einer Handvoll grosser Karten faellt sie nicht ins Gewicht. */
html[data-theme="dark"] .settings-card,
html[data-theme="dark"] .ov-card,
html[data-theme="dark"] .invoice-draft,
html[data-theme="dark"] .scheduled-box,
html[data-theme="dark"] .archive-export,
html[data-theme="dark"] .logs-cats,
html[data-theme="dark"] .logs-panel {
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
}

/* Ambient Lighting: feiner Gold-Schimmer an den Kanten, Lichtquelle dahinter */
.settings-card, .ov-card, .invoice-draft, .di-item, .archive-row, .kunde-row {
    position: relative;
}
.settings-card::before, .ov-card::before, .invoice-draft::before,
.di-item::before, .archive-row::before, .kunde-row::before {
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(197,160,89,.55), rgba(197,160,89,.06) 38%, rgba(197,160,89,.0) 62%, rgba(197,160,89,.35));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    /* 13.08.2026 von 320 ms auf die Antwortkurve: Beim schnellen Ueberfahren
       mehrerer Zeilen glommen die Kanten der vorigen noch, waehrend die
       naechste sich schon hob — drei leuchtende Raender gleichzeitig. */
    transition: opacity var(--t-antwort);
    pointer-events: none;
}
.settings-card:hover::before, .ov-card:hover::before, .invoice-draft:hover::before,
.di-item:hover::before, .archive-row:hover::before, .kunde-row:hover::before {
    opacity: 1;
}

/* Pulsierender Live-Status */
#status-badge { display: inline-flex; align-items: center; gap: 6px; }
#status-badge::before {
    content: '';
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--gruen);
    box-shadow: 0 0 0 0 var(--gruen-bg);
    animation: live-puls 2.4s var(--kurve) infinite;
}
@keyframes live-puls {
    0%   { box-shadow: 0 0 0 0 rgba(31,160,85,.45); }
    60%  { box-shadow: 0 0 0 7px rgba(31,160,85,0); }
    100% { box-shadow: 0 0 0 0 rgba(31,160,85,0); }
}
@media (prefers-reduced-motion: reduce) { #status-badge::before { animation: none; } }


/* ============================================================
   COMMAND-PALETTE (Strg+K) — springe zu Buchungen, Tabs, Aktionen
   ============================================================ */
.cmdk-overlay {
    position: fixed; inset: 0; z-index: 120;
    display: flex; align-items: flex-start; justify-content: center;
    padding-top: 14vh;
    background: rgba(8, 6, 2, .55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    animation: overlay-ein var(--t-normal) both;
}
.cmdk {
    width: min(620px, calc(100vw - 40px));
    background: var(--glas);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    border-radius: 16px;
    box-shadow: 0 1px 0 rgba(255,255,255,.07) inset, 0 30px 80px -20px rgba(0,0,0,.55), 0 0 0 1px rgba(197,160,89,.18);
    overflow: hidden;
    animation: modal-ein var(--t-weich) both;
}
.cmdk-input {
    width: 100%;
    padding: 17px 20px;
    background: transparent;
    border: 0; outline: none;
    font-size: 15.5px; color: var(--text);
}
.cmdk-liste { max-height: 46vh; overflow-y: auto; padding: 6px; border-top: 1px solid rgba(197,160,89,.14); }
.cmdk-eintrag {
    display: flex; align-items: center; gap: 11px;
    width: 100%; text-align: left;
    padding: 10px 13px;
    border-radius: 10px;
    font-size: 13.8px; color: var(--text-2);
    transition: background var(--t-schnell), color var(--t-schnell);
}
.cmdk-eintrag .ck-typ {
    flex: none; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--gold); background: var(--gold-hell);
    padding: 2px 8px; border-radius: 999px;
}
.cmdk-eintrag .ck-sub { margin-left: auto; font-size: 12px; color: var(--text-3); }
.cmdk-eintrag.aktiv, .cmdk-eintrag:hover { background: var(--gold-schimmer); color: var(--text); }
.cmdk-fuss { padding: 8px 16px; font-size: 11.5px; color: var(--text-3); border-top: 1px solid rgba(197,160,89,.1); display: flex; gap: 14px; }
.cmdk-fuss kbd { background: var(--flaeche-3); border-radius: 5px; padding: 1px 6px; font-family: inherit; font-size: 10.5px; }
.topbar-kbd {
    font-size: 11px; color: var(--text-3);
    border: 1px solid var(--linie); border-radius: 7px; padding: 3px 8px;
    background: var(--flaeche-2); cursor: pointer;
    transition: color var(--t-schnell), border-color var(--t-schnell);
}
.topbar-kbd:hover { color: var(--gold); border-color: var(--gold); }

/* ── Unterkuenfte, Gruppen und Vererbung (Phase F1, 01.08.2026) ─────────────
   Siehe docs/08_SPEC_UNTERKUENFTE_UND_VERERBUNG.md.
   Die Herkunft eines Werts muss auf einen Blick erkennbar sein — sonst weiss
   niemand, ob er gerade einen geerbten oder einen eigenen Wert bearbeitet. */
.herkunft {
    display: inline-block; margin-left: 8px; padding: 1px 8px;
    border-radius: 999px; font-size: 10.5px; font-weight: 600;
    letter-spacing: .02em; white-space: nowrap; vertical-align: middle;
    border: 1px solid transparent;
}
.herkunft-system  { color: var(--text-3); border-color: var(--linie); }
.herkunft-company { color: #2563eb; border-color: rgba(37, 99, 235, .35); background: rgba(37, 99, 235, .07); }
.herkunft-group   { color: #7c3aed; border-color: rgba(124, 58, 237, .35); background: rgba(124, 58, 237, .07); }
.herkunft-own     { color: #059669; border-color: rgba(5, 150, 105, .35);  background: rgba(5, 150, 105, .07); }
.herkunft-locked  { color: #b45309; border-color: rgba(180, 83, 9, .35);   background: rgba(180, 83, 9, .07); }

.vererbung-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    padding: 10px 0; border-bottom: 1px solid var(--linie);
}
.vererbung-row:last-child { border-bottom: none; }
.vererbung-label { flex: 1 1 260px; font-size: 13px; }
.vererbung-eingabe { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Stammdaten-Formular je Unterkunft (01.08.2026).
   Bewusst ohne Herkunfts-Etiketten: Adresse und Bettenzahl werden nie
   vererbt — anders als die Regeln darüber. */
.stammdaten-panel {
    padding: 14px 16px; margin: 2px 0 10px;
    border: 1px solid var(--linie); border-radius: 10px;
    background: var(--flaeche-2);
}
.stammdaten-panel textarea { width: 100%; resize: vertical; font: inherit; }

/* Erklaerender Text unter einer Einstellungs-Beschriftung (06.08.2026).
   Kostenfelder brauchen ihn: Eine falsch verstandene Zahlungsgebuehr
   verfaelscht den Deckungsbeitrag, ohne dass die Zahl unplausibel aussieht. */
.vererbung-hinweis {
    font-size: 12px;
    line-height: 1.45;
    color: #6b7280;
    margin-top: 2px;
    max-width: 62ch;
    font-weight: 400;
}

/* ============================================
   AUSWERTUNG (Phase F3, 09.08.2026, überarbeitet)
   Gleiche Sprache wie der Rest: Gold als einzige Akzentfarbe, weiche Radien,
   Linien statt Rahmen, Zahlen tabellarisch.
   ============================================ */
.auswertung-wrap { max-width: 1180px; }
.auswertung-kopf { margin-bottom: 18px; }

/* ── Zeitraumleiste ─────────────────────────────────────────────────────── */
.aw-zeitraum-leiste {
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    box-shadow: var(--schatten-1);
    padding: 15px 18px;
    margin-bottom: 18px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
}
.aw-schnellwahl { display: flex; gap: 7px; flex-wrap: wrap; }
.aw-chip {
    border: 1px solid var(--linie-stark);
    background: var(--flaeche-2);
    color: var(--text-2);
    border-radius: 999px;
    padding: 7px 15px;
    font-size: 13px;
    cursor: pointer;
    transition: border-color var(--t-schnell), color var(--t-schnell), background var(--t-schnell);
}
.aw-chip:hover { border-color: var(--gold); color: var(--text); }
.aw-chip.aktiv {
    background: var(--gold-hell);
    border-color: var(--gold);
    color: var(--gold-dunkel);
    font-weight: 600;
}
.aw-datumsfelder { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.aw-datumsfelder label { display: flex; flex-direction: column; gap: 5px; }
.aw-datumsfelder label > span {
    font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--text-3); font-weight: 700;
}
.aw-datumsfelder label > span em { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 400; }
/* Breit genug, dass Datum UND Kalendersymbol nebeneinander Platz haben —
   zu schmale Datumsfelder schneiden das Symbol in Chrome ab. */
.aw-datumsfelder input[type="date"] { width: 178px; }
.aw-bis-pfeil { color: var(--text-3); padding-bottom: 11px; }

.auswertung-status { margin-bottom: 14px; font-size: 13px; color: var(--text-2); }
.auswertung-status.fehler { color: var(--rot); font-weight: 600; }

/* Warnungen stehen ÜBER den Zahlen: Eine Belegung von 106 % ist keine
   Randnotiz, sondern der Hinweis, dass die Zahl darunter falsch ist. */
.auswertung-warnung {
    border-left: 3px solid var(--gelb);
    background: var(--gelb-bg);
    border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
    padding: 14px 17px;
    margin-bottom: 18px;
    font-size: 13.5px;
    line-height: 1.6;
}
.aw-warnzeile + .aw-warnzeile { margin-top: 9px; }
.aw-liste { margin: 7px 0 0; padding-left: 18px; }
.aw-liste li { margin-bottom: 5px; }

.auswertung-spalten {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 14px; margin-bottom: 14px;
}
.aw-fuss { font-size: 12px; color: var(--text-3); margin-top: 8px; line-height: 1.55; }
.aw-leer { font-size: 13.5px; color: var(--text-3); padding: 8px 0; line-height: 1.6; }

.aw-tabelle { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.aw-tabelle th {
    text-align: left; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--text-3); font-weight: 700; padding: 0 10px 9px 0;
}
.aw-tabelle td { padding: 9px 10px 9px 0; border-top: 1px solid var(--linie); }
.aw-tabelle td:not(:first-child), .aw-tabelle th:not(:first-child) {
    text-align: right; font-variant-numeric: tabular-nums;
}

.aw-balken-zeile {
    display: grid; grid-template-columns: 64px 1fr 58px 84px 14px;
    align-items: center; gap: 10px; padding: 5px 0; font-size: 12.5px;
    font-variant-numeric: tabular-nums;
}
.aw-balken-monat { color: var(--text-3); }
.aw-balken-spur { background: var(--flaeche-3); border-radius: 999px; height: 8px; overflow: hidden; }
.aw-balken-fuell { display: block; height: 100%; background: var(--gold-glanz); border-radius: 999px; }
.aw-balken-zeile.warnung .aw-balken-fuell { background: var(--gelb); }
.aw-balken-wert, .aw-balken-umsatz { text-align: right; }
.aw-balken-umsatz { color: var(--text-3); }
.aw-balken-flag { color: var(--gelb); font-weight: 700; text-align: center; cursor: help; }

.aw-db-block { font-size: 13.5px; }
.aw-db-block > div {
    display: flex; justify-content: space-between; gap: 12px;
    padding: 6px 0; font-variant-numeric: tabular-nums;
}
.aw-db-summe { border-top: 1px solid var(--linie); margin-top: 6px; padding-top: 11px !important; font-size: 16px; }

.aw-vergleich { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
.aw-vergleich > div { display: flex; flex-direction: column; gap: 4px; }
.aw-vergleich span { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); font-weight: 700; }
.aw-vergleich strong { font-size: 18px; font-variant-numeric: tabular-nums; font-weight: 600; }
.aw-auf strong { color: var(--gruen); }
.aw-ab strong { color: var(--rot); }

/* ── Buchungsbestand: Aufgabenliste statt Tabelle ───────────────────────── */
.aw-bestand-bereich { margin-top: 26px; }
.aw-bestand-kopf {
    display: flex; justify-content: space-between; align-items: flex-end;
    gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
}
.aw-bereich-titel { font-size: 17px; font-weight: 600; margin: 0; letter-spacing: -.01em; }
.aw-bereich-sub { font-size: 13px; color: var(--text-2); margin: 3px 0 0; }

.aw-nichts-zu-tun {
    display: flex; align-items: center; gap: 14px;
    background: var(--gruen-bg); border-radius: var(--radius);
    padding: 18px 20px; font-size: 13.5px; line-height: 1.55; color: var(--text-2);
}
.aw-nichts-zu-tun strong { color: var(--text); }
.aw-haken {
    flex: 0 0 30px; height: 30px; border-radius: 50%;
    background: var(--gruen); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 16px;
}

.aw-gruppe {
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    box-shadow: var(--schatten-1);
    padding: 18px 20px;
    margin-bottom: 14px;
}
.aw-gruppe-kopf { display: flex; align-items: center; gap: 10px; }
.aw-gruppe-kopf h4 { font-size: 15px; font-weight: 600; margin: 0; }
.aw-anzahl {
    font-size: 12px; font-weight: 700; min-width: 24px; text-align: center;
    padding: 2px 9px; border-radius: 999px;
    background: var(--gold-hell); color: var(--gold-dunkel);
}
.aw-gruppe-text { font-size: 13px; color: var(--text-2); line-height: 1.6; margin: 6px 0 14px; }

.aw-faelle { border-top: 1px solid var(--linie); }
.aw-fall {
    display: grid; grid-template-columns: 1fr auto auto;
    align-items: center; gap: 16px;
    padding: 12px 0; border-bottom: 1px solid var(--linie);
}
.aw-fall:last-child { border-bottom: none; padding-bottom: 0; }
.aw-fall-nummer { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.aw-fall-details { font-size: 12.5px; color: var(--text-2); margin-top: 2px; }
.aw-fall-beleg { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.aw-fall-betrag { font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.aw-gesperrt { font-size: 12px; color: var(--text-3); }

.aw-betrag {
    background: none; border: none; padding: 0; cursor: pointer;
    font: inherit; color: inherit; font-variant-numeric: tabular-nums;
    border-bottom: 1px dashed var(--linie-stark);
}
.aw-betrag:hover { color: var(--gold-dunkel); border-bottom-color: var(--gold); }
.aw-korrigiert { color: var(--text-3); font-size: 11px; margin-left: 4px; }
.aw-betrag-zelle { white-space: nowrap; }

.aw-suchzeile { margin-bottom: 12px; }
.aw-suchfeld { position: relative; display: block; max-width: 380px; }
.aw-such-symbol {
    position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
    color: var(--text-3); font-size: 16px; pointer-events: none;
}
.aw-suchfeld input { padding-left: 36px; }
.aw-bestand-tabelle tr.aw-auffaellig td { background: var(--gelb-bg); }
.aw-hinweis-zelle { max-width: 280px; text-align: left !important; }
.aw-marke {
    display: inline-block; font-size: 11px; line-height: 1.5;
    padding: 2px 9px; border-radius: 999px;
    background: var(--gelb-bg); color: var(--gelb); margin: 1px 0;
}
.aw-mehr-zeile { margin-top: 14px; text-align: center; }
.aw-fall-gast { font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; }
.aw-fall-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; align-items: center; }
.aw-fall-leer { font-size: 11.5px; color: var(--text-3); }
.aw-beleg-marke {
    font-size: 11px; padding: 2px 9px; border-radius: 999px;
    background: var(--gold-hell); color: var(--gold-dunkel); font-weight: 600;
}
.aw-fall-aktion { display: flex; align-items: center; gap: 8px; }
.aw-zum-entwurf {
    background: none; border: none; padding: 0; cursor: pointer;
    font-size: 12.5px; color: var(--gold-dunkel); text-decoration: underline;
}
.aw-zum-entwurf:hover { color: var(--gold); }
.aw-hervorgehoben {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
    border-radius: var(--radius-klein);
    transition: outline-color var(--t-weich);
}

/* Hinweis, wenn alle Entwuerfe durch Filter ausgeblendet sind (13.08.2026).
   Vorher stand dort nur "Keine Treffer." — das las sich wie "nichts vorhanden"
   und hat genau die falsche Schlussfolgerung ausgeloest. */
.filter-leer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 14px;
    margin: 4px 0;
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
}
.filter-leer strong { font-size: 13.5px; }
.filter-leer span { font-size: 12.5px; opacity: .75; }

/* Doppelabrechnungs-Schutz sichtbar machen (13.08.2026). Bewusst gedaempft:
   Es ist ein Hinweis, keine Warnung — die Regel ist ja richtig, sie war nur
   stumm. Neutrale Linie statt Signalfarbe, damit sie die Abrechnungsreif- und
   Rechnungsfrage-Leisten darueber nicht uebertoent. */
.abgerechnet-bar {
    opacity: .8;
    font-weight: 500;
}
.abgerechnet-bar.reif-active {
    background: var(--linie);
    color: inherit;
    opacity: 1;
}

/* „neu" — in dieser Sitzung angelegt (13.08.2026). Gold, weil es der einzige
   Hinweis ist, der etwas Erfreuliches meldet; die anderen di-badges warnen. */
.di-badge-neu {
    background: var(--gold);
    color: #fff;
    font-weight: 600;
}

/* Betroffene Zeile des Doppelabrechnungs-Schutzes benennen (13.08.2026).
   Die Leiste sagte nur „2 ausgeblendet" — aufgeklappt waren sie nicht
   auffindbar. Jetzt traegt der Eintrag selbst die Rechnungsnummer. */
.di-badge-abgerechnet {
    background: var(--flaeche);
    border: 1px solid var(--linie);
    color: inherit;
    opacity: .85;
    white-space: nowrap;
}

/* Unzugeordnete Herkuenfte als Vorschlag (13.08.2026). Beantwortet die Frage,
   woher jemand wissen soll, welchen Erkennungsnamen er eintragen muss: Apollo
   zeigt, was tatsaechlich hereinkam. */
.plattform-unbekannt-box {
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    background: var(--flaeche);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.plattform-unbekannt-box strong { font-size: 13px; }
.plattform-unbekannt-box span { font-size: 12.5px; opacity: .75; }
.plattform-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.plattform-chip {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 12px;
    padding: 5px 10px;
    border: 1px solid var(--gold);
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
    transition: background .15s var(--kurve);
}
.plattform-chip:hover { background: var(--gold-hell, rgba(184, 148, 90, .12)); }
.plattform-chip em { font-style: normal; opacity: .6; }

/* Handlungsanweisung beim aufgeklappten Doppelabrechnungs-Schutz (13.08.2026).
   Die Leiste nannte eine Zahl; was zu tun ist, stand nirgends. */
.abgerechnet-hilfe {
    margin: 2px 0 8px 0;
    padding: 11px 13px;
    border: 1px solid var(--linie);
    border-left: 3px solid var(--gold);
    border-radius: var(--radius);
    background: var(--flaeche);
    font-size: 12.5px;
    line-height: 1.55;
}
.abgerechnet-hilfe ol { margin: 7px 0 7px 18px; padding: 0; }
.abgerechnet-hilfe li { margin-bottom: 3px; }
.abgerechnet-hilfe code {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 11.5px;
    padding: 1px 4px;
    border-radius: 4px;
    background: rgba(184, 148, 90, .14);
}

/* Vom Import vermisste Entwuerfe (13.08.2026). Blau statt Gold: Es ist kein
   Geldproblem, sondern eine Frage an eine fremde Schnittstelle — und es soll
   sich von der Abrechnungsreif-Leiste unterscheiden lassen. */
.waisen-bar { opacity: .9; font-weight: 500; }
.waisen-bar.reif-active {
    background: var(--linie);
    color: inherit;
    opacity: 1;
}
.di-badge-waise {
    background: var(--flaeche);
    border: 1px dashed var(--linie);
    color: inherit;
    opacity: .9;
    white-space: nowrap;
}

/* Stoerungskarte auf der Uebersicht (13.08.2026). Bewusst auffaellig — sie
   erscheint nur, wenn tatsaechlich etwas steht. */
.ov-alarm {
    border-left: 3px solid var(--rot);
    background: var(--rot-bg, var(--flaeche));
}

/* Tagesuebersicht auf der Startseite (13.08.2026). Zwei Spalten fuer heute und
   morgen; darunter je Tag die Bewegungen in der Reihenfolge, in der sie
   passieren — Abreisen zuerst, dazwischen liegt die Reinigung. */
.tp-tage { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 780px) { .tp-tage { grid-template-columns: 1fr; } }
.tp-tag-kopf {
    display: flex; align-items: baseline; justify-content: space-between;
    font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--text-3);
    padding-bottom: 7px; margin-bottom: 7px;
    border-bottom: 1px solid var(--linie);
}
.tp-tag-kopf span { font-weight: 500; letter-spacing: 0; text-transform: none; }
.tp-zeile {
    display: flex; align-items: flex-start; gap: 10px; width: 100%;
    padding: 8px 9px; margin-bottom: 4px;
    border: 1px solid transparent; border-radius: 9px;
    background: transparent; text-align: left; cursor: pointer;
    transition: background var(--t-schnell), border-color var(--t-schnell);
}
.tp-zeile:hover { border-color: var(--gold); background: var(--flaeche); }
.tp-pfeil {
    flex-shrink: 0; width: 22px; height: 22px;
    display: grid; place-items: center;
    border-radius: 6px; font-size: 13px; font-weight: 700;
}
/* Abreise nach oben, Anreise nach unten — die Pfeilrichtung ist die
   Gedaechtnisstuetze, die Farbe nur Beiwerk. */
.tp-abreise { background: var(--grau-bg, var(--flaeche)); color: var(--text-2); }
.tp-anreise { background: var(--gruen-bg); color: var(--gruen); }
.tp-text { min-width: 0; }
.tp-kopf { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.tp-meta { display: block; font-size: 12px; color: var(--text-2); margin-top: 2px; }
.tp-wechsel {
    font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
    padding: 1px 7px; border-radius: 999px;
    background: var(--gelb-bg); color: var(--gelb);
}
.tp-leer { font-size: 12.5px; color: var(--text-3); font-style: italic; margin: 6px 0 0; }

/* Abweichender Leistungsempfaenger (13.08.2026).
   Zugeklappt, solange leer — der Fall betrifft eine Minderheit der Rechnungen,
   und vier zusaetzliche Felder im Standardformular wuerden alle anderen
   verwirren. Bewusst zurueckhaltend gestaltet: Es ist eine Ausnahme, keine
   Hauptfunktion. */
.le-block {
    margin-top: 12px;
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    background: var(--flaeche);
}
.le-block > summary {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 12px;
    font-size: 12.8px; font-weight: 600;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.le-block > summary::-webkit-details-marker { display: none; }
.le-block > summary::before {
    content: '›';
    display: inline-block;
    font-size: 15px; line-height: 1;
    transition: transform var(--t-schnell);
    opacity: .6;
}
.le-block[open] > summary::before { transform: rotate(90deg); }
.le-block[open] > summary { border-bottom: 1px solid var(--linie); }
.le-aktiv {
    font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
    padding: 1px 8px; border-radius: 999px;
    background: var(--gold); color: #fff;
}
.le-hinweis { font-size: 11.5px; font-weight: 500; opacity: .55; }
.le-erklaerung {
    margin: 0; padding: 10px 12px 4px;
    font-size: 12px; line-height: 1.5; color: var(--text-2);
}
.le-block .grid { padding: 4px 12px 12px; }

/* Stern vor dem Gastnamen im Archiv (13.08.2026).
   Er steht VOR dem Namen, nicht in der Aktionsspalte: Die Symbole rechts sind
   Aktionen am DOKUMENT, der Stern betrifft die PERSON. Erbt Aussehen und
   Verhalten vom Stern im Entwurf — dieselbe Bedeutung, dieselbe Gestalt. */
.archive-col-guest { display: flex; align-items: center; gap: 6px; min-width: 0; }
.archive-col-guest > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.archive-stern { font-size: 1.05rem; padding: 0; flex-shrink: 0; }

/* Warnung an einer Plattform-Weiterleitungsadresse (13.08.2026).
   Gelb, nicht rot: Es ist kein Fehler, sondern eine Adresse, die fuer den
   Rechnungsversand ungeeignet ist. */
.mail-feld { position: relative; display: flex; align-items: center; gap: 7px; }
.mail-feld .invoice-field { flex: 1; min-width: 0; }
.mail-warnung {
    flex-shrink: 0;
    font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
    padding: 3px 8px; border-radius: 999px;
    background: var(--gelb-bg); color: var(--gelb);
    cursor: help; white-space: nowrap;
}

/* Kopfzeile ueber der Logliste (13.08.2026): sagt, wie viele Eintraege zu
   sehen sind und ob die Liste abgeschnitten wurde. Ohne diese Angabe haelt
   man 200 Zeilen fuer die vollstaendige Geschichte. */
.audit-hinweis {
    font-size: 12px; color: var(--text-3);
    padding: 0 2px 10px; margin-bottom: 4px;
    border-bottom: 1px solid var(--linie);
}

/* ================================================================
   POLITUR — 13.08.2026
   ================================================================
   Auf Wunsch von Mem: „smoother und realistischer, nicht so standard."

   LEITGEDANKE: Das Gefuehl von Wertigkeit entsteht nicht durch Effekte,
   sondern durch PHYSIK — Dinge verhalten sich, als haetten sie Masse und
   laegen auf einer Flaeche. Vier Handgriffe, keine Spielereien:

     1. Schatten in zwei Ebenen statt einer (Umgebungslicht + Kontakt)
     2. Kuerzere, praezisere Kurve fuer alles, was auf eine Handlung antwortet
     3. Beim Darueberfahren hebt sich das Element leicht — der Schatten waechst mit
     4. Der aktive Reiter GLEITET, statt neu gezeichnet zu werden

   BEWUSST NICHT DABEI: Glaseffekte mit Unschaerfe und starke 3D-Kippungen.
   Beides sieht in einem kurzen Video gut aus und in einem Rechnungswerkzeug
   billig — und `backdrop-filter` kostet auf schwaecheren Geraeten spuerbar
   Leistung. Wer damit Rechnungen stellt, soll dem Werkzeug vertrauen, nicht
   es bestaunen.
   ================================================================ */

:root {
    /* Antwortkurve: schneller Anlauf, weiches Auslaufen. Fuer alles, was auf
       eine Handlung des Nutzers reagiert — dort zaehlt Unmittelbarkeit.
       Die bestehende --kurve bleibt fuer laengere Bewegungen. */
    --kurve-antwort: cubic-bezier(.2, .8, .2, 1);
    --t-antwort: 150ms var(--kurve-antwort);

    /* Schatten in zwei Ebenen. Ein Schatten allein sieht aus wie ein Rand;
       erst der enge, dunklere KONTAKTSCHATTEN direkt unter dem Element laesst
       es aufliegen. */
    --schatten-1:
        0 1px 1px rgba(34,32,27,.04),
        0 2px 6px -2px rgba(34,32,27,.07),
        0 8px 20px -10px rgba(34,32,27,.09);
    --schatten-2:
        0 1px 2px rgba(34,32,27,.05),
        0 4px 10px -3px rgba(34,32,27,.09),
        0 20px 42px -18px rgba(34,32,27,.20);
}

html[data-theme="dark"] {
    /* Im Dunkeln traegt nicht der Schatten, sondern das LICHT: eine haarfeine
       helle Oberkante wie bei gebuerstetem Metall, dazu ein tiefer, weicher
       Schlagschatten. Ein reiner Schatten auf Schwarz ist unsichtbar. */
    --schatten-1:
        inset 0 1px 0 rgba(255,255,255,.045),
        0 2px 6px -2px rgba(0,0,0,.55),
        0 10px 26px -12px rgba(0,0,0,.7);
    --schatten-2:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 4px 12px -3px rgba(0,0,0,.6),
        0 24px 50px -20px rgba(0,0,0,.8);
}

/* ── Anheben beim Darueberfahren ────────────────────────────────────────
   Ein Pixel. Mehr wirkt wie ein Sprung, weniger merkt niemand. Zusammen mit
   dem wachsenden Schatten entsteht der Eindruck, das Element komme dem
   Finger entgegen. */
/* NUR anklickbare Elemente. `.ov-card` und `.settings-card` stehen bewusst
   NICHT hier: Sie sind Anzeigeflaechen. Eine Karte, die sich unter dem Zeiger
   hebt, verspricht einen Klick — und wer klickt und nichts passiert, haelt das
   fuer einen Fehler. */
.di-item,
.archive-row,
.kunde-row,
.tp-zeile {
    transition:
        transform var(--t-antwort),
        box-shadow var(--t-antwort),
        border-color var(--t-antwort),
        background var(--t-antwort),
        /* stand in der urspruenglichen Regel und waere sonst verlorengegangen:
           eine zweite `transition`-Angabe ERSETZT die erste, sie ergaenzt sie
           nicht. */
        padding-left var(--t-antwort);
}
/* NUR das Anheben — der Schatten bleibt, wie er war.
 *
 * MEIN FEHLER VOM 13.08.2026, gemeldet mit „ich merke keinen Unterschied":
 * Ich hatte hier zusaetzlich `box-shadow: var(--schatten-hover)` gesetzt.
 * Weiter oben (Abschnitt „Dark Luxury") steht aber laengst ein durchdachter
 * Hover-Schatten mit Goldring und warmem Schein, gueltig fuer BEIDE Modi.
 * Meine Regel kam spaeter und hat ihn ueberschrieben — durch einen schwarzen
 * Schatten, der auf fast schwarzem Grund unsichtbar ist. Die Politur hat den
 * Effekt also nicht verstaerkt, sondern entfernt.
 *
 * Die Lehre ist dieselbe wie bei den Kanallisten am selben Tag: erst
 * nachsehen, ob es die Loesung schon gibt. Was hier fehlte, war allein die
 * BEWEGUNG — und nur die kommt dazu. */
.di-item:hover,
.archive-row:hover,
.kunde-row:hover,
.tp-zeile:hover {
    transform: translateY(-1px);
}
/* Beim Loslassen sitzt das Element wieder auf — das quittiert den Klick
   koerperlich, ohne zu zappeln. */
.di-item:active,
.archive-row:active,
.kunde-row:active,
.tp-zeile:active {
    transform: translateY(0);
    transition-duration: 60ms;
}

/* ── Gleitender Reiter ──────────────────────────────────────────────────
   Der wirksamste einzelne Handgriff: Das Auge folgt einer Bewegung, aber
   nicht einem Wechsel. Die Position setzt das Dashboard als CSS-Variable;
   bewegt wird ausschliesslich per `transform` — das laeuft auf der
   Grafikeinheit und ruckelt nicht. */
.tab-bar-sub { position: relative; }
.tab-bar-sub::before {
    content: '';
    position: absolute;
    top: 4px; left: 0;
    height: calc(100% - 8px);
    width: var(--reiter-breite, 0);
    transform: translateX(var(--reiter-x, 0));
    background: var(--flaeche);
    border-radius: 8px;
    box-shadow: var(--schatten-1);
    transition: transform 220ms var(--kurve-antwort), width 220ms var(--kurve-antwort);
    pointer-events: none;
}
/* Vor der ersten Messung (Breite 0) bleibt er unsichtbar. */
.tab-bar-sub::before { opacity: var(--reiter-sichtbar, 0); }
/* Der aktive Reiter traegt seinen Hintergrund nun nicht mehr selbst —
   sonst laegen zwei Flaechen uebereinander und die Bewegung waere sinnlos. */
.tab-bar-sub .tab-sub.active { background: transparent; box-shadow: none; }
.tab-bar-sub .tab-sub { position: relative; z-index: 1; }

/* ── Gestaffeltes Erscheinen ────────────────────────────────────────────
   Nur beim ERSTEN Aufbau einer Liste, ausgeloest ueber eine Klasse. Bei jedem
   Neuzeichnen waere es Zappeln — und die Liste wird beim Tippen im Suchfeld
   staendig neu gezeichnet. */
@keyframes tritt-ein {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.liste-staffelt > * {
    animation: tritt-ein 260ms var(--kurve-antwort) both;
}
.liste-staffelt > *:nth-child(1)  { animation-delay: 0ms; }
.liste-staffelt > *:nth-child(2)  { animation-delay: 25ms; }
.liste-staffelt > *:nth-child(3)  { animation-delay: 50ms; }
.liste-staffelt > *:nth-child(4)  { animation-delay: 75ms; }
.liste-staffelt > *:nth-child(5)  { animation-delay: 100ms; }
.liste-staffelt > *:nth-child(6)  { animation-delay: 125ms; }
.liste-staffelt > *:nth-child(7)  { animation-delay: 150ms; }
.liste-staffelt > *:nth-child(8)  { animation-delay: 175ms; }
/* Ab hier kein weiterer Versatz: Wer 40 Eintraege hat, wartet sonst zwei
   Sekunden, bis die Liste steht. */
.liste-staffelt > *:nth-child(n+9) { animation-delay: 200ms; }

/* ── Tastaturbedienung sichtbar machen ──────────────────────────────────
   `:focus-visible` greift nur bei Tastatur, nicht bei Maus — der Ring
   erscheint also genau dann, wenn er gebraucht wird. */
:where(button, a, input, select, textarea, summary, details):focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
    border-radius: var(--radius-klein);
}

/* ── Wer keine Bewegung will, bekommt keine ─────────────────────────────
   Pflicht, keine Kuer: Fuer Menschen mit vestibulaerer Empfindlichkeit ist
   Bewegung auf dem Bildschirm koerperlich unangenehm. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .di-item:hover, .archive-row:hover, .kunde-row:hover, .tp-zeile:hover {
        transform: none;
    }
}

/* „Als Naechstes" — Ersatz, wenn heute und morgen leer sind (13.08.2026). */
.tp-naechstes { border-color: var(--linie); background: var(--flaeche); }

/* ── Gasttexte (20.08.2026) ────────────────────────────────────────────────
   Eigener Namensraum `gt-`, damit nichts Bestehendes überschrieben wird: In
   CSS gewinnt die SPÄTERE Regel, und dieser Block steht am Ende der Datei.
   Am 13.08.2026 verschwand hier ein durchdachter Hover-Schatten hinter einer
   angehängten, schlechteren Regel — deshalb kein einziger Selektor, den es
   oben schon gibt.

   Kein `backdrop-filter`: Auf Listenzeilen erzwingt es je Element eine eigene
   Zeichenebene und flackert zusammen mit `transform` (13.08.2026). */

.gt-baustein {
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    margin-bottom: 8px;
    background: var(--flaeche);
}
.gt-baustein > summary {
    cursor: pointer;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 13.5px;
}
.gt-titel { font-weight: 600; }

.gt-marke {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--linie);
    color: var(--text-2);
    white-space: nowrap;
}
.gt-standard { opacity: .7; }
.gt-angepasst { border-color: var(--gold); color: var(--gold); }
/* Teilweise angepasst ist der Zustand, der sonst niemandem auffällt —
   deshalb bekommt er die auffälligste Marke, nicht die unauffälligste. */
.gt-teilweise { border-color: var(--gold); color: var(--gold); font-weight: 600; }
.gt-heikel { border-style: dashed; }

.gt-koerper { padding: 0 14px 14px; }
.gt-platzhalter { font-size: 12px; color: var(--text-2); margin-bottom: 10px; }
.gt-platzhalter code { font-size: 11.5px; padding: 1px 5px; border-radius: 4px; background: rgba(127,127,127,.14); }

.gt-sprachen { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.gt-spr {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: var(--radius);
    border: 1px solid var(--linie);
    background: transparent;
    color: var(--text-2);
    cursor: pointer;
}
.gt-spr.active { border-color: var(--gold); color: var(--gold); }

.gt-text { width: 100%; font-family: inherit; line-height: 1.5; resize: vertical; }
.gt-aktionen { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }

.gt-warnung {
    font-size: 12.5px;
    line-height: 1.5;
    padding: 8px 10px;
    margin-bottom: 8px;
    border-left: 2px solid var(--gold);
    color: var(--text-2);
}

.gt-rueckmeldung { margin-top: 8px; font-size: 12.5px; line-height: 1.5; }
.gt-ok { color: var(--text-2); }
.gt-warn { color: var(--gold); }
.gt-fehler { color: #d9534f; }

.gt-vorschau { margin-top: 8px; }
.gt-vorschau-kopf { font-size: 11px; color: var(--text-2); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .04em; }
.gt-vorschau pre, .gt-standardvergleich pre {
    white-space: pre-wrap;
    word-break: break-word;
    font-family: inherit;
    font-size: 12.5px;
    line-height: 1.55;
    padding: 10px 12px;
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    margin: 0 0 6px;
}
.gt-standardvergleich { margin-top: 10px; }
.gt-standardvergleich > summary { cursor: pointer; font-size: 12px; color: var(--text-2); margin-bottom: 6px; }

/* Vorschlagsystem (24.08.2026): Das Textfeld mit der KI-Antwort soll wie eine
   Chat-Blase wirken, aber änderbar sein — deshalb eigener Rahmen statt der
   Formular-Optik der übrigen Eingabefelder. */
.chatbot-vorschlag-feld {
    display: block;
    margin: 0.5rem 0;
    font-size: 0.85rem;
    color: #555;
}
.chatbot-vorschlag-feld textarea {
    display: block;
    width: 100%;
    margin-top: 0.35rem;
    font: inherit;
    line-height: 1.5;
    resize: vertical;
}

/* ── Handy: schmale Bildschirme (08.09.2026) ────────────────────────────────
   Nur innerhalb dieser Media-Query — die Desktop-Ansicht bleibt unberührt.

   BEFUND: Bei 390 px war der Seitenkörper 509 px breit. Die 820px-Regel legt
   Logo, acht Reiter und die Fußzeile (Thema/Abmelden) in EINE Reihe; das passt
   auf einem Tablet, nicht auf einem Handy. Folge: Das Logo war links
   abgeschnitten, „Abmelden" hing rechts heraus, und die ganze Seite liess sich
   seitwärts wegschieben — auf jedem Reiter, nicht nur auf einem.

   LÖSUNG: Die Reiterleiste bekommt eine eigene Zeile unter Logo und Fußzeile
   und darf in sich waagerecht scrollen. Damit passt alles, ohne dass ein
   Bedienelement verschwindet. */
@media (max-width: 560px) {
    .sidebar { flex-wrap: wrap; gap: 8px; padding: 8px 12px; }
    .sidebar-brand { flex: 0 0 auto; padding: 0; }
    .sidebar-foot { margin-left: auto; flex: 0 0 auto; gap: 6px; }

    /* Eigene Zeile, in sich scrollbar. Die Bildlaufleiste bleibt unsichtbar —
       auf dem Handy wischt man ohnehin. */
    .sidebar-nav {
        order: 3; flex: 1 0 100%;
        overflow-x: auto; overflow-y: hidden;
        scrollbar-width: none; -ms-overflow-style: none;
        gap: 2px;
    }
    .sidebar-nav::-webkit-scrollbar { display: none; }

    /* 44 px ist die kleinste Fläche, die ein Finger zuverlässig trifft.
       Vorher waren die Reiter 35 × 35 px. */
    .tab-top {
        flex: 0 0 auto; width: auto;
        min-width: 44px; min-height: 44px;
        justify-content: center; padding: 12px;
    }
    .btn-theme, .btn-logout { min-height: 44px; padding: 8px 12px; }
    .btn-theme { flex: 0 0 44px; }

    .content { padding: 18px 14px 48px; }
    .topbar { padding: 12px 14px; gap: 10px; }
    .topbar h1 { font-size: 16px; }

    /* Werkzeugleisten umbrechen lassen. Auf dem Reiter „Rechnungen" standen
       zwei Knöpfe und zwei Auswahlfelder in einer starren Reihe — der Körper
       wurde dadurch 569 px breit. Auf einem Handy ist Umbrechen immer richtig:
       lieber zwei Zeilen als eine Zeile, die man wegschieben muss. */
    .flex.items-center.justify-between,
    .section-title-row,
    .settings-actions { flex-wrap: wrap; }

    /* Die Auswahlfelder tragen `style="width:auto"` direkt im HTML. Nur
       deshalb steht hier !important — anders ist eine Inline-Angabe nicht zu
       überschreiben, und die Alternative wäre, das HTML für alle Bildschirme
       zu ändern. */
    .subtab-content label > select,
    .subtab-content .custom-select-wrap { width: 100% !important; }
    .subtab-content > .flex > label { flex: 1 1 100%; }

    /* Tippziele: 44 px ist die kleinste Fläche, die ein Finger sicher trifft. */
    .tab-sub, .settings-nav-item,
    .btn-new-draft, .btn-confirm, .btn-cancel, .btn-small,
    .filter-btn, .aw-zeitraum button { min-height: 44px; }
    /* Der Löschknopf ✕ war 23 × 19 px — praktisch nicht zu treffen. */
    .anfrage-loeschen { min-width: 36px; min-height: 36px; padding: 8px; }

    /* „Strg K" ist ein Tastatur-Hinweis. Auf einem Handy gibt es keine
       Strg-Taste — der Knopf nimmt nur Platz in der Kopfzeile weg. */
    .topbar-kbd { display: none; }

    /* Dieselbe 44-px-Regel für die Leisten, die erst zur Laufzeit entstehen
       und deshalb eigene Klassen tragen. */
    .reinigung-tab-sub, .reinigung-status-box,
    .aw-chip, .logs-cat,
    .settings-section-jumps button { min-height: 44px; }

    /* Raster mit fester Mindestbreite sprengen sehr schmale Geräte. Auf der
       Auswertung war der Körper bei 320 px (iPhone SE) 354 px breit, weil eine
       Spalte mindestens 340 px verlangte. Auf einer Handbreite gibt es ohnehin
       nur eine Spalte — die Mindestbreite darf hier also entfallen. */
    .auswertung-spalten,
    .ov-grid, .settings-grid, .aw-vergleich { grid-template-columns: 1fr; }
}

/* ── Handy, Teil 2: Archiv und Positionen (08.09.2026) ──────────────────────
   Rückmeldung von Mem nach dem ersten Durchgang. Der erste Durchgang mass nur
   den jeweils VOREINGESTELLTEN Unterreiter — „Archiv" und die Positionsliste
   eines geöffneten Entwurfs waren deshalb nie im Bild. Lehre fürs nächste Mal:
   Unterreiter und aufklappbare Bereiche einzeln öffnen und messen.

   ARCHIV: `.archive-row` ist ein sechsspaltiges Raster mit `min-width: 980px`.
   Auf dem Handy blieb nur seitwärts schieben — man sieht nie eine ganze Zeile.
   Aus jeder Zeile wird deshalb eine Karte: Nummer und Status nebeneinander,
   darunter Gast, dann Datum und Betrag, unten die Knöpfe.

   POSITIONEN: `.position-row` legt Beschreibung, Menge, Preis, Steuersatz,
   Summe und zwei Knöpfe in EINE nicht umbrechende Reihe. Auf schmalen
   Bildschirmen quetschen sich die Zahlen ineinander. Jetzt: Beschreibung auf
   eigener Zeile, darunter die Zahlenreihe mit der Summe rechts. */
@media (max-width: 560px) {
    /* Die Kopfzeile mit den Spaltennamen ergibt ohne Spalten keinen Sinn. */
    .archive-header { display: none; }
    .archive-table { overflow-x: visible; }
    .archive-row {
        min-width: 0;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "nummer  status"
            "gast    gast"
            "datum   betrag"
            "aktionen aktionen";
        gap: 6px 10px; padding: 12px 14px;
    }
    .archive-col-number { grid-area: nummer; }
    .archive-col-status { grid-area: status; justify-self: end; }
    .archive-col-guest  { grid-area: gast; display: flex; align-items: center; gap: 6px; }
    .archive-col-date   { grid-area: datum; color: var(--text-2); font-size: 12.5px; }
    .archive-col-amount { grid-area: betrag; justify-self: end; font-weight: 600; }
    .archive-col-actions {
        grid-area: aktionen; display: flex; flex-wrap: wrap; gap: 8px;
        margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--linie);
    }
    .archive-col-actions button { min-width: 44px; min-height: 44px; }

    /* ENTWURFSLISTE: `.di-meta` schneidet bewusst ab statt umzubrechen
       (Entscheidung vom 13.08.2026 — eine umgebrochene Kennzeichenzeile sieht
       aus wie ein zweiter Listeneintrag). Diese Regel wurde für eine 560 px
       breite Spalte getroffen. Auf 390 px fiel dadurch ausgerechnet das
       Vollständigkeits-Kennzeichen weg — das Wichtigste an der Zeile. Deshalb
       hier: umbrechen erlaubt, aber eng gesetzt, damit die Zeile weiterhin als
       EIN Eintrag lesbar bleibt. */
    .di-meta { flex-wrap: wrap; white-space: normal; row-gap: 4px; }
    .di-name { white-space: normal; overflow: visible; }
    .di-name-row { flex-wrap: wrap; row-gap: 4px; }

    .position-row { flex-wrap: wrap; row-gap: 6px; }
    /* Die Beschreibung bekommt die erste Zeile für sich — sie ist das
       Einzige, dessen Länge man nicht vorhersagen kann. */
    .position-row > div:first-child { flex: 1 1 100%; }
    .pos-total { margin-left: auto; }
    .pos-edit, .pos-delete { width: 36px; height: 36px; }

    /* Gasttexte: Die Sprachknöpfe (Deutsch/English/Polski/…) sind 28 px hoch.
       Mit der Maus kein Problem, mit dem Finger schon — und man wechselt hier
       oft zwischen fünf Sprachen. */
    .gt-spr { min-height: 44px; }
}

/* ================================================================
   MARKETING (08.09.2026)
   ----------------------------------------------------------------
   Vorher lieh sich diese Seite ihre Bausteine bei Chatbot und
   Reinigung: Gästekritik stand in einer Chat-Sprechblase, der
   Status in einem Dringlichkeits-Etikett aus dem Reinigungsplan,
   und alles Übrige in derselben grauen Hinweiszeile — Begründung,
   Wirkung, Gültigkeit, Zusammenfassung. Bei gleicher Schrift,
   gleicher Farbe und gleichem Abstand entscheidet nichts mehr,
   was wichtig ist. Mems Urteil: „sieht nicht so gut aus."

   Deshalb ein eigener Namensraum. Er nutzt ausschliesslich die
   Tokens des Designsystems, damit der dunkle Modus ohne eine
   einzige Extrazeile mitgeht, und er fasst KEINE Klasse an, die
   eine andere Seite benutzt.
   ================================================================ */

.mk-wrap { max-width: 1180px; }

.mk-kopf {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.mk-kopf-aktionen { display: flex; gap: 8px; flex-wrap: wrap; }
/* Ohne Breitengrenze zieht sich der Einleitungssatz über die volle
   Zeile, und die Knöpfe rutschen darunter statt nach rechts oben. */
.mk-kopf > div:first-child { max-width: 700px; }

/* Ein aufklappbarer Bereich muss aussehen, als könne man ihn
   aufklappen. Das Standarddreieck verschwindet, sobald summary
   ein Flex-Container ist. */
.mk-verlauf > summary { list-style: none; }
.mk-verlauf > summary::-webkit-details-marker { display: none; }
.mk-verlauf > summary::after { content: '▾'; margin-left: auto; font-size: 12px; color: var(--text-3); }
.mk-verlauf[open] > summary::after { content: '▴'; }

/* ── Kennzahlen ───────────────────────────────────────────────── */
/* Vier Zahlen, bevor irgendetwas anderes kommt. Sie beantworten die
   einzige Frage, mit der man diese Seite öffnet: Muss ich hier
   gerade etwas tun? */
.mk-kennzahlen {
    display: grid; gap: 12px; margin-bottom: 22px;
    grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
}
.mk-kachel {
    background: var(--flaeche); border: 1px solid var(--linie);
    border-radius: var(--radius); padding: 14px 16px;
    box-shadow: var(--schatten-1);
}
.mk-kachel-wert {
    font-size: 27px; font-weight: 600; line-height: 1.1;
    color: var(--text); letter-spacing: -.02em;
}
.mk-kachel-wert.mk-wert-still { color: var(--text-3); }
.mk-kachel-titel {
    margin-top: 6px; font-size: 11px; font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase; color: var(--text-3);
}
.mk-kachel-fuss { margin-top: 4px; font-size: 12px; color: var(--text-2); }

/* ── Zwei Spalten, aber nur wenn Platz ist ────────────────────── */
.mk-spalten { display: grid; gap: 26px; grid-template-columns: 1.15fr .85fr; align-items: start; }
@media (max-width: 1100px) { .mk-spalten { grid-template-columns: 1fr; } }

.mk-block-titel {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 600; letter-spacing: .05em;
    text-transform: uppercase; color: var(--text-2);
    margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--linie);
}
.mk-zahl {
    font-size: 11px; font-weight: 600; letter-spacing: 0;
    background: var(--flaeche-3); color: var(--text-2);
    border-radius: 999px; padding: 2px 8px; text-transform: none;
}

/* ── Karten ───────────────────────────────────────────────────── */
.mk-karte {
    position: relative; background: var(--flaeche);
    border: 1px solid var(--linie); border-radius: var(--radius);
    padding: 16px 18px; margin-bottom: 12px; box-shadow: var(--schatten-1);
    transition: box-shadow var(--t-schnell), transform var(--t-schnell);
}
.mk-karte:hover { box-shadow: var(--schatten-2); }
/* Der goldene Strich links heisst: Diese Karte wartet auf dich.
   Erledigtes bekommt ihn nicht — sonst sagt das Kennzeichen nichts. */
.mk-karte-offen { border-left: 3px solid var(--gold); }
.mk-karte-stumm { opacity: .72; }

.mk-karte-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.mk-titel { font-size: 15px; font-weight: 600; color: var(--text); margin-right: auto; }
.mk-text { font-size: 14px; line-height: 1.58; color: var(--text); }

/* Etiketten. Elf Pixel, damit sie den Titel nicht überstimmen. */
.mk-pill {
    font-size: 11px; font-weight: 600; line-height: 1;
    padding: 4px 9px; border-radius: 999px; white-space: nowrap;
    background: var(--grau-bg); color: var(--text-2);
}
.mk-pill-gold { background: var(--gold-schimmer); color: var(--gold-dunkel); }
.mk-pill-gruen { background: var(--gruen-bg); color: var(--gruen); }
.mk-pill-gelb  { background: var(--gelb-bg);  color: var(--gelb); }
.mk-pill-rot   { background: var(--rot-bg);   color: var(--rot); }
.mk-pill-blau  { background: var(--blau-bg);  color: var(--blau); }

/* Begründung und Wirkung als Beschriftungspaare statt als drei
   gleich aussehende Hinweiszeilen. */
.mk-details {
    display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px;
    margin-top: 12px; font-size: 13px; line-height: 1.5;
}
.mk-dt { color: var(--text-3); font-weight: 600; }
.mk-dd { color: var(--text-2); }

.mk-aktionen {
    display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end;
    margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linie);
}

/* Ablehnen mit Grund — als Feld in der Karte statt als Systemdialog.
   Ein prompt() blockiert das ganze Fenster, verliert den Text bei
   Escape und lässt sich auf dem Telefon kaum bedienen. */
.mk-grund { margin-top: 12px; display: none; }
.mk-grund.mk-offen { display: block; }
.mk-grund textarea {
    width: 100%; min-height: 64px; resize: vertical;
    font: inherit; font-size: 13px; padding: 9px 11px;
    border: 1px solid var(--linie-stark); border-radius: var(--radius-klein);
    background: var(--flaeche-2); color: var(--text);
}
.mk-grund-zeile { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }

/* ── Themen als Rangliste ─────────────────────────────────────── */
/* „ki_ausstattung — 4×" sagt fast nichts. Ein Balken daneben sagt
   sofort, ob ein Thema heraussticht oder ob alle gleich oft
   vorkommen — und genau das entscheidet, ob sich Handeln lohnt. */
.mk-thema { margin-bottom: 12px; }
.mk-thema-zeile { display: flex; align-items: baseline; gap: 8px; font-size: 13px; margin-bottom: 5px; }
.mk-thema-name { font-weight: 600; color: var(--text); }
.mk-thema-wo { color: var(--text-3); margin-left: auto; font-size: 12px; }
.mk-balken { height: 6px; border-radius: 3px; background: var(--flaeche-3); overflow: hidden; }
.mk-balken-fuell { height: 100%; border-radius: 3px; background: var(--gold-glanz); }

/* ── Einzelne Rückmeldungen ───────────────────────────────────── */
.mk-signal {
    background: var(--flaeche); border: 1px solid var(--linie);
    border-left: 3px solid var(--grau); border-radius: var(--radius-klein);
    padding: 12px 14px; margin-bottom: 10px;
}
.mk-signal-criticism { border-left-color: var(--rot); }
.mk-signal-improvement_suggestion { border-left-color: var(--blau); }
.mk-signal-praise { border-left-color: var(--gruen); }
.mk-signal-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 7px; font-size: 12px; color: var(--text-3); }
.mk-signal-wo { margin-left: auto; }
/* Gästekritik ist kein Chatverlauf. Eine Sprechblase suggeriert ein
   laufendes Gespräch — hier steht ein Zitat aus einer Nachricht,
   die längst beantwortet ist. */
.mk-zitat { font-size: 13.5px; line-height: 1.55; color: var(--text); border-left: 2px solid var(--linie-stark); padding-left: 11px; }

/* ── Leere Zustände und Ladeanzeige ───────────────────────────── */
/* Ein leerer Bereich muss sagen, ob nichts da ist oder ob etwas
   schiefging — und was man tun kann. */
.mk-leer {
    border: 1px dashed var(--linie-stark); border-radius: var(--radius);
    padding: 22px; text-align: center; color: var(--text-2); font-size: 13.5px; line-height: 1.6;
}
.mk-leer strong { display: block; color: var(--text); font-size: 14px; margin-bottom: 4px; }
.mk-fehler { border-color: var(--rot); color: var(--rot); }

.mk-skelett { border-radius: var(--radius); background: var(--flaeche-3); margin-bottom: 12px; }
.mk-skelett-hoch { height: 108px; }
.mk-skelett-flach { height: 64px; }
@keyframes mk-puls { 0%, 100% { opacity: .55; } 50% { opacity: .9; } }
.mk-skelett { animation: mk-puls 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .mk-skelett { animation: none; } }

@media (max-width: 560px) {
    /* Auf dem Telefon zählt die Höhe. Die Kacheln gehen auf zwei
       Spalten statt vier, sonst füllen sie den halben Bildschirm,
       bevor die erste Empfehlung sichtbar wird. */
    .mk-kennzahlen { grid-template-columns: 1fr 1fr; gap: 8px; }
    .mk-kachel { padding: 11px 12px; }
    .mk-kachel-wert { font-size: 22px; }
    .mk-karte { padding: 14px; }
    /* Beschriftung über den Wert statt daneben: In zwei Spalten
       bleiben für die Begründung sonst vierzig Pixel. */
    .mk-details { grid-template-columns: 1fr; gap: 2px 0; }
    .mk-dt { margin-top: 6px; }
    /* Fingerbreite Knöpfe, über die volle Breite. */
    .mk-aktionen { justify-content: stretch; }
    .mk-aktionen button { flex: 1 1 auto; min-height: 44px; }
    .mk-kopf-aktionen button { min-height: 40px; }
}

/* ── Plattformbewertungen (F9, 08.09.2026) ────────────────────── */
.mk-bew-felder {
    display: grid; gap: 10px 14px; margin-bottom: 12px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.mk-bew-felder label, .mk-bew-lang {
    display: flex; flex-direction: column; gap: 5px;
    font-size: 12px; font-weight: 600; color: var(--text-3);
}
.mk-bew-lang { margin-bottom: 12px; }
.mk-bew-felder input, .mk-bew-felder select, .mk-bew-lang textarea {
    font: inherit; font-size: 13.5px; font-weight: 400; color: var(--text);
    padding: 8px 10px; border: 1px solid var(--linie-stark);
    border-radius: var(--radius-klein); background: var(--flaeche-2);
}
.mk-bew-lang textarea { resize: vertical; }

/* Die Note vorn und gross: Sie ist das Erste, wonach man in einer
   Bewertungsliste sucht. Die Farbe folgt dem Anteil an der Skala,
   nicht der Rohzahl — 8 von 10 ist gut, 8 von 5 gibt es nicht. */
.mk-bew-note {
    font-size: 17px; font-weight: 600; letter-spacing: -.02em;
    min-width: 62px;
}
.mk-note-gut { color: var(--gruen); }
.mk-note-mittel { color: var(--gelb); }
.mk-note-schlecht { color: var(--rot); }
.mk-note-ohne { color: var(--text-3); font-size: 13px; font-weight: 500; }

.mk-bew-text { margin-top: 10px; font-size: 13.5px; line-height: 1.55; }
.mk-bew-text > div { display: flex; gap: 9px; margin-bottom: 6px; }
.mk-bew-zeichen { flex: 0 0 auto; font-weight: 600; }
.mk-bew-plus .mk-bew-zeichen { color: var(--gruen); }
.mk-bew-minus .mk-bew-zeichen { color: var(--rot); }
.mk-bew-antwort {
    margin-top: 11px; padding: 9px 12px; border-radius: var(--radius-klein);
    background: var(--flaeche-3); font-size: 13px; color: var(--text-2);
}
.mk-bew-antwort strong { color: var(--text); font-weight: 600; }

@media (max-width: 560px) {
    .mk-bew-felder { grid-template-columns: 1fr 1fr; }
    .mk-bew-felder input, .mk-bew-felder select, .mk-bew-lang textarea { min-height: 40px; }
}

/* ── Reiter „Buchungen" (10.09.2026) ──────────────────────────────
   Der frühere Buchungsbestand aus der Auswertung. Einwand von Mem:
   Die Auswertung ist ein Bericht, den man liest; der Bestand eine
   Werkbank, an der man arbeitet. Zusammen wurde der Bericht lang
   und die Werkbank eng. */
.bu-filterzeile {
    display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
    margin-bottom: 14px;
}
.bu-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.bu-chip {
    display: inline-flex; align-items: center; gap: 7px;
    font: inherit; font-size: 13px; font-weight: 500; color: var(--text-2);
    background: var(--flaeche); border: 1px solid var(--linie);
    border-radius: 999px; padding: 7px 13px; cursor: pointer;
    transition: border-color var(--t-schnell), color var(--t-schnell);
}
.bu-chip:hover { border-color: var(--linie-stark); color: var(--text); }
/* Der gewählte Filter ist der einzige mit Farbe. Zwei hervorgehobene
   Knöpfe nebeneinander heben sich gegenseitig auf. */
.bu-chip-an {
    background: var(--gold-schimmer); border-color: var(--gold);
    color: var(--gold-dunkel); font-weight: 600;
}
.bu-chip-zahl {
    font-size: 11px; font-weight: 600;
    background: var(--flaeche-3); color: var(--text-3);
    border-radius: 999px; padding: 1px 7px;
}
/* Nicht rgba(255,255,255,…): Im Dunkelmodus wird daraus ein heller Klecks,
   auf dem die Zahl kaum zu lesen ist (von Mem gemeldet, 10.09.2026). Eine
   Farbe, die nur im Hellmodus geprüft wurde, ist keine Farbe. `--flaeche`
   dreht sich mit dem Thema mit. */
.bu-chip-an .bu-chip-zahl { background: var(--flaeche); color: var(--gold-dunkel); }

.bu-wohnung { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; color: var(--text-3); }
/* Kein eigenes Aussehen mehr: Die Suite ersetzt `select.invoice-field` durch
   ein eigenes Auswahl-Widget (custifySelect), weil Chromium unter Windows die
   native Optionsliste über das Betriebssystem-Thema malt und CSS ignoriert.
   Ein selbst gestyltes `select` sieht im Dunkelmodus deshalb weiss aus — genau
   das ist am 10.09.2026 passiert. Hier bleibt nur die Breite. */
.bu-wohnung .custom-select-wrap, .bu-wohnung select { min-width: 170px; }
.bu-suchfeld { margin-left: auto; }
.aw-bestand-verweis button { margin-top: 10px; }

@media (max-width: 560px) {
    /* Auf dem Telefon zuerst die Filter, dann die Suche über die volle
       Breite — nebeneinander bleiben von beidem nur Stummel. */
    .bu-filterzeile { flex-direction: column; align-items: stretch; }
    .bu-suchfeld { margin-left: 0; }
    .bu-wohnung select { min-height: 40px; width: 100%; }
    .bu-chip { min-height: 38px; }

    /* Die Fallzeile stapeln.
       ACHTUNG, hier lag mein erster Fehlgriff: `.aw-fall` ist ein RASTER mit
       drei Spalten, kein Flex-Container — `flex-direction` bewirkte nichts.
       Auf 390 px blieben dem Hauptteil 63 Pixel: „Sascha Brunk" über zwei
       Zeilen, das Datum über drei. Gemessen, nicht geraten. */
    .aw-fall { grid-template-columns: 1fr; gap: 10px; }
    .aw-fall-betrag, .aw-fall-aktion {
        display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    }
    /* Betrag links (er gehört zu den Angaben darüber), Knöpfe rechts. */
    .aw-fall-aktion { justify-content: flex-end; }
    .aw-fall .aw-entfernen, .aw-fall .aw-zum-entwurf { min-height: 40px; }
}

/* ── Stornierte Zeilen: ruhig, nicht alarmierend (10.09.2026) ─────
   Vorher trug jede stornierte Zeile ein oranges Etikett mit dem Satz
   „storniert — zählt nicht in Belegung und Umsatz" UND die orange
   Zeilenfärbung. Einwand von Mem: „das sieht nicht so clean aus …
   die Infos … kann ja weg, da es ja selbstverständlich ist."
   Richtig — und Orange ist obendrein die Warnfarbe. Eine stornierte
   Buchung ist kein Problem, sondern erledigt. */
.aw-zeile-storniert td { opacity: .62; }
/* Der Betrag bleibt lesbar: Er ist der Grund, warum man in dieser
   Liste überhaupt nachsieht. */
.aw-zeile-storniert .aw-betrag-zelle { opacity: 1; }
.aw-zeile-storniert .aw-betrag { color: var(--text-2); }
.aw-marke-still {
    background: var(--grau-bg); color: var(--text-3);
    border: none; font-weight: 500;
}

/* Platzhalterzahl in den Filterknöpfen, solange die Antwort fehlt. */
.bu-chip-warte { color: var(--text-3); letter-spacing: .1em; }

/* ── Offene Handgriffe (10.09.2026) ───────────────────────────────────────
   Eine Zeile aus Eingabefeld und Knöpfen. Auf dem Telefon untereinander:
   Ein Zahlenfeld neben zwei Knöpfen auf 400 px ist keine Zeile mehr,
   sondern ein Gedränge. */
.mk-hg-zeile {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 14px; flex-wrap: wrap; margin-top: 12px;
}
.mk-hg-preis {
    display: flex; flex-direction: column; gap: 4px;
    font-size: 12px; color: var(--text-2);
}
.mk-hg-preis input {
    width: 140px; padding: 7px 10px;
    border: 1px solid var(--linie); border-radius: 8px;
    background: var(--flaeche); color: var(--text);
    font-size: 14px; font-family: inherit;
}
.mk-hg-preis input:focus {
    outline: none; border-color: var(--gold);
}
/* Die Knopfreihe der Karten trägt sonst eine Trennlinie über sich. Hier
   steht sie neben dem Eingabefeld — eine Linie über nur einem Teil der Zeile
   sieht aus wie ein Fehler im Layout, weil sie mitten in der Luft endet. */
.mk-hg-zeile .mk-aktionen {
    border-top: none; margin-top: 0; padding-top: 0;
}
.mk-pill-warn { background: var(--gelb-bg); color: var(--gelb); }

@media (max-width: 640px) {
    .mk-hg-zeile { flex-direction: column; align-items: stretch; }
    .mk-hg-preis input { width: 100%; }
    .mk-hg-zeile .mk-aktionen { justify-content: flex-end; }
}

/* ── Bilanz des Lückenfüllers (10.09.2026) ────────────────────────────────
   Fünf Zahlen nebeneinander, auf dem Telefon zwei je Zeile. Bewusst keine
   Erfolgsquote: Eine Quote verschweigt, worauf sie beruht. */
.mk-bilanz {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;
    background: var(--flaeche); border: 1px solid var(--linie);
    border-radius: 12px; padding: 16px 18px;
}
.mk-bilanz-wert { font-size: 22px; font-weight: 600; color: var(--text); }
.mk-bilanz-text { font-size: 12px; color: var(--text-2); margin-top: 2px; }
.mk-bilanz-hinweis {
    margin: 8px 2px 0; font-size: 12px; color: var(--text-3); line-height: 1.5;
}
@media (max-width: 760px) {
    .mk-bilanz { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}

/* ── Was aus einer Chat-Karte wurde (11.09.2026) ──────────────────────────
   Stand vorher nur in einer kleinen grauen Zeile unter der Karte; gesendet
   und verworfen sahen auf den ersten Blick gleich aus. */
.chatbot-ergebnis {
    display: inline-block; padding: 2px 8px; border-radius: 999px;
    font-size: 11px; font-weight: 600; letter-spacing: .02em;
    background: var(--flaeche); color: var(--text-2);
    border: 1px solid var(--linie);
}
.chatbot-ergebnis-gesendet { background: var(--gruen-bg); color: var(--gruen); border-color: transparent; }
.chatbot-ergebnis-verworfen { background: var(--rot-bg); color: var(--rot); border-color: transparent; }

/* ── Einrichtungskarte (11.09.2026) ───────────────────────────────────────
   Die Folge steht gross, der Ort klein: Was nicht funktioniert, ist die
   Nachricht — wo man es einträgt, der Nachsatz. */
.einr-zeile {
    padding: 10px 0; border-top: 1px solid var(--linie);
}
.einr-zeile:first-of-type { border-top: none; }
.einr-titel { font-weight: 600; font-size: 14px; color: var(--text); }
.einr-folge { font-size: 13px; color: var(--text-2); line-height: 1.55; margin-top: 2px; }
.einr-wo { font-size: 12px; color: var(--text-3); margin-top: 3px; }
.einr-freiwillig { margin-top: 10px; }
.einr-freiwillig summary {
    cursor: pointer; font-size: 13px; color: var(--text-2); padding: 6px 0;
}

/* ── Saisons (11.09.2026) ──────────────────────────────────────────────────
   Vergangene Saisons werden ausgegraut statt versteckt: Sie sind die Vorlage
   fuers naechste Jahr, und wer sie nicht sieht, legt sie doppelt an.

   Bewusst ueber `opacity` statt ueber eine feste Farbe — damit es im hellen
   wie im dunklen Erscheinungsbild stimmt, ohne dass zwei Werte gepflegt
   werden muessen, von denen einer irgendwann vergessen wird. */
.mk-blass { opacity: .55; }
.mk-blass:hover { opacity: 1; }

/* Direktbuchung (14.09.2026): das Einbau-Beispiel.
   Umbrueche bleiben erhalten, lange Zeilen laufen nicht aus der Karte. */
.db-beispiel {
    white-space: pre-wrap;
    word-break: break-all;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    line-height: 1.6;
    opacity: .85;
    margin: 10px 0;
}

/* Der frisch erzeugte Direktbuchungs-Schluessel. Das Feld nimmt die ganze
   Breite, damit der Schluessel vollstaendig sichtbar ist — er wird nur einmal
   angezeigt, und ein abgeschnittener Schluessel waere wertlos. */
.db-neu-zeile { display: flex; gap: 8px; align-items: center; margin: 10px 0; }
.db-neu-zeile input { flex: 1; min-width: 0; font-family: ui-monospace, Menlo, monospace; }

/* Ueberschriften in der Einstellungsliste (14.09.2026).
   Die Liste ist auf ueber vierzig Eintraege gewachsen — ohne Gliederung
   scrollt man am Gesuchten vorbei. */
.vererbung-gruppe {
    display: flex; align-items: center; gap: 8px;
    margin: 22px 0 8px; padding-bottom: 6px;
    border-bottom: 1px solid currentColor;
    font-weight: 600; letter-spacing: .02em; opacity: .75;
}
.vererbung-gruppe:first-child { margin-top: 4px; }
.vererbung-anzahl { font-weight: 400; font-size: 12px; opacity: .6; }

/* Zwischenüberschrift INNERHALB einer Gruppe (22.09.2026) — z. B. "Provision
   & Zahlungsgebühr je Kanal" unter "Preise und Grenzen", oder eine der drei
   Nachrichtenvorlagen unter "Automatisierte Nachrichten". Bewusst leichter
   als .vererbung-gruppe (keine Trennlinie, kein grosser Abstand): sie
   gliedert INNERHALB einer schon benannten Gruppe, ist aber kein eigener
   Themenwechsel. */
.vererbung-untergruppe {
    margin: 14px 0 4px; padding-left: 2px;
    font-size: 12px; font-weight: 600; letter-spacing: .02em; opacity: .55;
}
.vererbung-gruppe + .vererbung-untergruppe { margin-top: 4px; }

/* ── Saisons als Tabelle (15.09.2026) ─────────────────────────────────────
   Vorher: elf gestapelte Karten je Wohnung, in denen sich nichts vergleichen
   liess. Hier will man aber genau vergleichen — steht der Mindestpreis im
   November tiefer als im August, fehlt irgendwo der Gaesteaufschlag? Das
   beantwortet eine Tabelle mit einem Blick nach unten.

   Zahlenspalten rechtsbuendig und mit Tabellenziffern: Nur so stehen 80 und
   105 uebereinander, statt gegeneinander zu verrutschen. */
.saison-rahmen {
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    box-shadow: var(--schatten-1);
    overflow-x: auto;           /* schmale Fenster scrollen die Tabelle, nicht die Seite */
}
.saison-tabelle {
    width: 100%;
    min-width: 720px;           /* darunter wird seitwaerts gescrollt */
    border-collapse: collapse;
    font-size: 14px;
}
.saison-tabelle th {
    text-align: left;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-3);
    padding: 12px 14px 8px;
    border-bottom: 1px solid var(--linie);
    white-space: nowrap;
}
.saison-tabelle td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--linie);
    vertical-align: middle;
}
.saison-tabelle tbody tr:last-child td { border-bottom: none; }
.saison-tabelle tbody tr:hover { background: var(--flaeche-2); }

.saison-zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.saison-grund { font-weight: 600; }
.saison-zeit { white-space: nowrap; color: var(--text-2); font-variant-numeric: tabular-nums; }
.saison-bis { color: var(--text-3); padding: 0 2px; }
 /* Namen NICHT umbrechen: Eine Zeile je Saison haelt die Tabelle
    ueberschaubar — „Winter-Nebensaison 2027" ueber drei Zeilen macht aus elf
    Zeilen eine halbe Seite. Wird es zu schmal, scrollt der Rahmen seitwaerts,
    und das ist die ehrlichere Loesung als gestapelte Wortfetzen. */
.saison-name { font-weight: 500; white-space: nowrap; }
.saison-notiz {
    font-size: 12px; color: var(--text-3); margin-top: 2px;
    white-space: normal; max-width: 260px;
}
.saison-staffel { color: var(--text-2); }
/* Ein fehlender Wert als Strich, nicht als leere Zelle: Die leere Zelle liest
   sich wie ein Gestaltungsfehler, der Strich wie eine Aussage. */
.saison-leer { color: var(--text-3); }
.saison-tun { white-space: nowrap; text-align: right; }
.saison-tun button + button { margin-left: 6px; }

/* Die laufende Saison bestimmt den Preis von heute — sie gehoert erkennbar. */
.saison-jetzt { background: var(--gold-schimmer); }
.saison-jetzt:hover { background: var(--gold-schimmer); }
.saison-jetzt .saison-name { font-weight: 700; }
.saison-punkt {
    display: inline-block; width: 7px; height: 7px; border-radius: 50%;
    background: var(--gold); margin-right: 7px; vertical-align: middle;
}
/* Vergangenes bleibt stehen — es ist die Vorlage fuers naechste Jahr. Wer es
   versteckt, legt es doppelt an. */
.saison-vorbei td { opacity: .5; }
.saison-vorbei:hover td { opacity: 1; }

@media (max-width: 720px) {
    .saison-tabelle { font-size: 13px; }
    .saison-tabelle th, .saison-tabelle td { padding: 9px 10px; }
    .saison-tun button + button { margin-left: 4px; }
}

/* ── Preiskalender (19.09.2026) ───────────────────────────────────────────
   Je Nacht der Lodgify-Preis gross, Saison und Homepage klein darunter.
   Eigene Klassen (pk-), keine Uebersteuerung vorhandener Regeln. Kein
   backdrop-filter und kein transform auf den Zellen — 31 eigene
   Zeichenebenen flackern (siehe CLAUDE.md, „Bevor Stil ergaenzt wird"). */
.pk-nav { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; text-transform: none; letter-spacing: 0; }
.pk-monat-name { min-width: 120px; text-align: center; font-size: 13px; color: var(--text); }
.pk-kopfzeile { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.pk-hinweise { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.pk-hinweise .mk-pill { white-space: normal; line-height: 1.3; }
.pk-raster { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.pk-wochentag { font-size: 11px; font-weight: 600; color: var(--text-3); text-align: center; padding: 2px 0 4px; }
.pk-zelle {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    min-height: 64px; padding: 6px 7px; text-align: left;
    background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius-klein);
    color: var(--text); font: inherit; cursor: pointer;
    transition: border-color var(--t-schnell), background var(--t-schnell);
}
.pk-zelle:hover { border-color: var(--gold); }
.pk-zelle:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.pk-leerfeld { background: transparent; border-color: transparent; cursor: default; }
.pk-kopf { display: flex; justify-content: space-between; align-items: center; gap: 4px; }
.pk-tagnr { font-size: 11px; color: var(--text-2); }
.pk-marke { font-size: 9.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; }
.pk-preis { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pk-klein { font-size: 10.5px; color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-belegt { background: var(--flaeche-3); }
.pk-vorbei { opacity: .45; }
.pk-unbekannt .pk-preis { color: var(--text-3); }
.pk-abweichend { border-color: var(--gelb); box-shadow: inset 0 0 0 1px var(--gelb); }
.pk-abweichend .pk-preis { color: var(--gelb); }
.pk-gewaehlt { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold-schimmer); }
.pk-detail {
    margin-top: 12px; padding: 12px 14px; font-size: 13px; color: var(--text-2);
    background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: var(--radius-klein);
}
.pk-detail-titel { font-weight: 600; color: var(--text); margin-bottom: 8px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pk-werte { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0; }
.pk-werte dt { color: var(--text-3); }
.pk-werte dd { margin: 0; color: var(--text); font-variant-numeric: tabular-nums; }
.pk-grau { color: var(--text-3); }
.pk-warum { margin: 10px 0 0; line-height: 1.5; }
.pk-legende { margin-top: 10px; line-height: 1.5; }

/* "Preise schreiben"-Knopf (22.09.2026): Vorschau + Bestaetigung direkt im
   Preiskalender, statt SSH mit preis-schreiben.js. */
.pk-schreiben {
    background: var(--flaeche-2); border: 1px solid var(--linie);
    border-radius: var(--radius-klein); padding: 12px; margin-bottom: 12px;
}
.pk-schreiben-zeile { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.pk-schreiben-ergebnis { margin-top: 10px; }
.pk-schreiben-abschnitte { margin: 6px 0; padding-left: 18px; font-size: 13px; line-height: 1.6; }
.pk-schreiben-fehler { color: var(--rot); }
.pk-schreiben-warnung { color: var(--gelb); }
.pk-schreiben-erfolg { color: var(--gruen); font-weight: 600; }

@media (max-width: 560px) {
    .pk-raster { gap: 3px; }
    .pk-zelle { min-height: 48px; padding: 4px 3px; align-items: center; text-align: center; }
    .pk-kopf { justify-content: center; }
    .pk-marke { display: none; }
    .pk-klein { display: none; }  /* Saison und Homepage stehen in der Detailanzeige */
    .pk-preis { font-size: 12.5px; }
    .pk-monat-name { min-width: 0; }
}

/* ── Reinigung: Erledigtes und Gruppen je Kraft (15.09.2026) ──────────────
   Abgehaktes verschwand bisher sofort. Ein Fehlgriff auf dem Handy war damit
   nicht mehr zu korrigieren — die Knoepfe liegen nebeneinander. Jetzt bleibt
   es zwei Tage blass und abgehakt stehen. */
.reinigung-job-fertig { opacity: .6; }
.reinigung-job-fertig:hover { opacity: 1; }
.reinigung-job-fertig .reinigung-job-titel { text-decoration: line-through; }
.reinigung-erledigt-hinweis {
    margin-top: 4px;
    font-size: 12px;
    color: var(--gruen);
}

/* Je Reinigungskraft ein eigener Block: In einer einzigen Reihe war nicht zu
   sehen, wer wie viel auf dem Tisch hat — und genau daran entsteht Streit. */
.reinigung-gruppe { margin-bottom: 22px; }
.reinigung-gruppe-kopf {
    display: flex; align-items: baseline; gap: 10px;
    padding: 0 2px 8px;
    border-bottom: 1px solid var(--linie);
    margin-bottom: 10px;
}
.reinigung-gruppe-name { font-weight: 600; font-size: 14px; }
.reinigung-gruppe-zahl { font-size: 12px; color: var(--text-3); }

/* ── E-Mail-Eingang (Postfach), 06.10.2026 ─────────────────────────────── */
.postfach-zeile { justify-content: flex-start; gap: 10px; flex-wrap: wrap; }
.postfach-zeile input { flex: 1 1 260px; width: auto; }
.postfach-vorschlag, .postfach-statusbox {
    border: 1px solid var(--linie); border-left-width: 4px; border-radius: 10px;
    padding: 10px 14px; margin: 10px 0 14px; font-size: 13px; line-height: 1.55;
    background: var(--flaeche-2);
}
.postfach-vorschlag ul, .postfach-statusbox ul { margin: 6px 0 0 18px; padding: 0; }
.postfach-vorschlag li, .postfach-statusbox li { margin: 3px 0; }
.postfach-vorschlag code { font-size: 12.5px; }
.postfach-vorschlag-server { margin-top: 6px; color: var(--text-2); }
.postfach-statusbox > div + div { margin-top: 4px; }
:is(.postfach-vorschlag, .postfach-statusbox).ist-ok { border-left-color: var(--gruen); }
:is(.postfach-vorschlag, .postfach-statusbox).ist-warnung { border-left-color: var(--gelb); }
:is(.postfach-vorschlag, .postfach-statusbox).ist-fehler { border-left-color: var(--rot); }
:is(.postfach-vorschlag, .postfach-statusbox).ist-neutral { border-left-color: var(--linie-stark); }
.postfach-experte { margin: 10px 0 4px; }
.postfach-experte > summary { cursor: pointer; font-size: 13px; color: var(--text-2); margin-bottom: 10px; }
.settings-status.fehler { color: var(--rot); font-weight: 600; }

/* Speichern-Leiste immer sichtbar (06.10.2026, Mem: „ganz unten erst
   speichern ist Quatsch"). Sie bleibt beim Scrollen am unteren Rand stehen,
   statt hinter langen Karten zu verschwinden. */
.settings-content > .settings-actions:last-child {
    position: sticky; bottom: 0; z-index: 5;
    margin: 16px -4px 0; padding: 12px 16px;
    /* --flaeche ist im dunklen Modus halbdurchsichtig — darunter liegt --bg
       deckend, sonst scheint der Karteninhalt durch. */
    background: linear-gradient(var(--flaeche-2), var(--flaeche-2)), var(--bg); border: 1px solid var(--linie); border-radius: 12px;
    box-shadow: 0 -6px 18px rgba(0,0,0,.08);
    backdrop-filter: none;
}

/* Posteingang: Adresse zum Kopieren, Text aufklappbar (06.10.2026) */
.post-adresse {
    font: inherit; color: var(--text); background: var(--flaeche-3); border: 1px solid var(--linie);
    border-radius: 6px; padding: 1px 7px; cursor: pointer;
}
.post-adresse:hover { border-color: var(--linie-stark); }
.post-adresse.ist-kopiert { color: var(--gruen); border-color: var(--gruen); }
.post-adresse-icon { opacity: .6; font-size: 11px; }
.post-auszug { margin-top: 6px; font-size: 12.5px; color: var(--text-2); }
.post-auszug > summary { cursor: pointer; }
.post-auszug > div { white-space: pre-wrap; margin-top: 4px; padding: 8px 10px; background: var(--flaeche-2); border-radius: 8px; max-height: 220px; overflow: auto; }
.post-aktionen { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
/* Vorschläge „Passt vielleicht zu" (10.10.2026) */
.post-vorschlaege { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.post-vorschlaege-titel { font-size: 12.5px; color: var(--text-2); }
.post-vorschlag {
    font: inherit; font-size: 12.5px; text-align: left; color: var(--text); background: var(--flaeche-2);
    border: 1px dashed var(--linie-stark); border-radius: 8px; padding: 4px 9px; cursor: pointer; max-width: 100%;
}
.post-vorschlag:hover { border-style: solid; }
.post-vorschlag:disabled { opacity: .55; cursor: default; }
.post-vorschlag-grund { color: var(--text-2); margin-left: 4px; }

/* Reinigung: Zeiträume & Vertretungen (10.10.2026) */
.reinigung-einteilung-titel { margin: 22px 0 4px; font-size: 15px; }
.reinigung-einteilung-zeile { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--linie); font-size: 13.5px; }
.reinigung-einteilung-zeile button { margin-left: auto; }
.reinigung-einteilung-wann { color: var(--text-2); }
.reinigung-einteilung-zustand { font-size: 12px; color: var(--text-2); }
.reinigung-einteilung-zeile .settings-hint { margin: 0; }
.reinigung-einteilung-aktiv .reinigung-einteilung-zustand { color: var(--gruen); font-weight: 600; }
.reinigung-einteilung-vorbei { opacity: .6; }
.reinigung-einteilung-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.reinigung-einteilung-form label { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--text-2); }
.reinigung-einteilung-form .invoice-field { width: auto; min-width: 0; }
.reinigung-einteilung-form input[name="notiz"] { flex: 1 1 180px; }
.einteilung-select { font: inherit; font-size: 13.5px; color: var(--text); background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: 8px; padding: 7px 8px; }
.einteilung-tage { display: flex; flex-wrap: wrap; gap: 4px; border: 0; padding: 0; margin: 0; }
.einteilung-tage label { display: inline-flex; align-items: center; gap: 3px; padding: 5px 8px; border: 1px solid var(--linie); border-radius: 8px; background: var(--flaeche-2); color: var(--text); cursor: pointer; font-size: 13px; }
.einteilung-tage input { margin: 0; }
.reinigung-zuweisen { font: inherit; font-size: 12.5px; color: var(--text); background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: 6px; padding: 1px 4px; max-width: 160px; }
.reinigung-herkunft { font-size: 12px; padding: 1px 6px; border-radius: 6px; background: var(--flaeche-3); color: var(--text-2); }
@media (max-width: 600px) {
    .reinigung-einteilung-form > * { flex: 1 1 100%; }
    .reinigung-einteilung-form label .invoice-field { flex: 1; }
}

/* Auswertung: Buchungen je Monat (10.10.2026) */
.ov-card.aw-breit { margin-bottom: 14px; }
.aw-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.aw-tabelle-monate th, .aw-tabelle-monate td { white-space: nowrap; }
.aw-tabelle-monate .aw-summe td { border-top: 2px solid var(--linie-stark); font-weight: 600; }
.aw-null { color: var(--text-2); opacity: .55; }