* { box-sizing: border-box; }
/* Farben: Tokens. Hell = bisherige Werte. Dunkel unten (Abschnitt "Dunkelmodus").
   Fest bleiben: --navy (Seitenleiste), --blue und --danger (Knopf-Füllungen), --gold. */
:root { color-scheme: light; --navy:#10263f; --blue:#1c5d8f; --gold:#b68b46; --danger:#a83c3c; --bg:#f4f6f8; --line:#d9e0e7; --muted:#657486; --text:#172330; --heading:#10263f; --surface:#fff; --surface-2:#f8f9fa; --surface-3:#f0f0f0; --line-strong:#b9c5d0; --link:#1c5d8f; --ok-text:#2d7a3e; --ok-bg:#eef8ee; --warn-text:#856404; --warn-bg:#fff3cd; --danger-text:#a83c3c; --danger-bg:#fff0f0; --danger-line:#e6b0aa; --info-bg:#e8f1f8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme:dark; --bg:#12161c; --text:#e6e9ef; --heading:#e6e9ef; --surface:#1b2028; --surface-2:#232a34; --surface-3:#2a323e; --line:#3a4452; --line-strong:#56606e; --muted:#9aa4b2; --link:#7ab8ff; --ok-text:#6fd08c; --ok-bg:#173322; --warn-text:#f0c060; --warn-bg:#3a3118; --danger-text:#ff7b7b; --danger-bg:#3a1f22; --danger-line:#7a3a3a; --info-bg:#17304a; } }
:root[data-theme="dark"] { color-scheme:dark; --bg:#12161c; --text:#e6e9ef; --heading:#e6e9ef; --surface:#1b2028; --surface-2:#232a34; --surface-3:#2a323e; --line:#3a4452; --line-strong:#56606e; --muted:#9aa4b2; --link:#7ab8ff; --ok-text:#6fd08c; --ok-bg:#173322; --warn-text:#f0c060; --warn-bg:#3a3118; --danger-text:#ff7b7b; --danger-bg:#3a1f22; --danger-line:#7a3a3a; --info-bg:#17304a; }
body { margin:0; color:var(--text); background:var(--bg); font:15px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
a { color:var(--link); }
button,input,select { font:inherit; }
.login-page { min-height:100vh; display:grid; place-items:center; padding:24px; background:linear-gradient(135deg,#10263f,#244f72); }
.login-card { width:min(420px,100%); padding:34px; background:var(--surface); color:var(--text); border-radius:16px; box-shadow:0 22px 70px #07152566; }
.brand { color:var(--heading); font-weight:800; letter-spacing:.03em; }
.login-card h1 { margin:.25rem 0 .4rem; color:var(--heading); }
.login-card p { color:var(--muted); }
label { display:block; margin:16px 0 6px; font-weight:650; }
input,select { width:100%; padding:10px 12px; border:1px solid var(--line-strong); border-radius:8px; background:var(--surface); color:var(--text); }
button,.button { display:inline-block; border:0; border-radius:8px; padding:10px 15px; color:#fff; background:var(--blue); cursor:pointer; text-decoration:none; font-weight:700; }
button:hover,.button:hover { filter:brightness(1.08); }
button:disabled,.button:disabled { opacity:.4; cursor:not-allowed; filter:none; }
.alert { padding:10px 12px; border-radius:8px; background:var(--danger-bg); color:var(--danger-text); }
.app-shell { min-height:100vh; display:grid; grid-template-columns:250px 1fr; align-items:start; }
.sidebar { padding:24px 16px; color:#dce9f4; background:var(--navy); position:sticky; top:0; height:100vh; overflow-y:auto; display:flex; flex-direction:column; }
.nav-version { margin-top:auto; padding:16px 12px 4px; color:#7f98ad; font-size:.72rem; letter-spacing:.03em; border-top:1px solid #ffffff1a; }
.sidebar .brand { display:block; margin:0 12px 28px; color:#fff; }
.nav a { display:block; padding:11px 12px; margin:3px 0; border-radius:8px; color:#dce9f4; text-decoration:none; }
.nav a.active,.nav a:hover { background:#ffffff1a; color:#fff; }
.sidebar small { display:block; margin:30px 12px 6px; color:#9eb5c9; text-transform:uppercase; letter-spacing:.08em; }
.main { min-width:0; }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 28px; background:var(--surface); border-bottom:1px solid var(--line);  position:sticky; top:0; z-index:5; }
.topbar-user { color:var(--muted); }
.content { max-width:1400px; margin:0 auto; padding:28px; }
.toolbar { display:flex; justify-content:space-between; align-items:end; gap:16px; margin-bottom:22px; }
.toolbar h1 { margin:0; color:var(--heading); }
.filter { width:230px; }
.dashboard-section { margin:22px 0; }
.dashboard-section h2 { margin:0 0 10px; color:var(--heading); }
.summary-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:0 0 26px; }
.summary-card { min-width:0; padding:15px; background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:0 2px 8px #10263f08; }
.summary-label { display:block; color:var(--muted); font-size:.82rem; font-weight:700; }
.summary-value { display:block; margin-top:4px; color:var(--heading); font-size:1.45rem; line-height:1.2; }
.summary-date { font-size:1.08rem; white-space:nowrap; }
.summary-meta { display:block; margin-top:5px; color:var(--muted); font-size:.75rem; }
.card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.card,.empty-state { padding:20px; background:var(--surface); border:1px solid var(--line); border-radius:12px; }
.card strong { display:block; font-size:1.6rem; color:var(--heading); }
.empty-state { color:var(--muted); }
.table-wrap { overflow:auto; background:var(--surface); border:1px solid var(--line); border-radius:12px; }
.dashboard-scroll-list { max-height:300px; overflow:auto; }
table { width:100%; border-collapse:collapse; min-width:720px; }
th,td { padding:13px 15px; border-bottom:1px solid var(--line); text-align:left; white-space:nowrap; }
th { position:sticky; top:0; z-index:2; color:var(--muted); background:var(--surface-2); font-size:.86rem; }
.badge { display:inline-block; padding:3px 8px; border-radius:999px; color:var(--text); background:var(--info-bg); font-size:.82rem; }
.logout { color:#fff; background:transparent; border:1px solid #ffffff66; }
.alert-success { background:var(--ok-bg); color:var(--ok-text); }
.muted { color:var(--muted); }
.linklike { border:0; background:none; color:var(--link); padding:0; margin-left:6px; font-size:.8rem; cursor:pointer; text-decoration:underline; }
.button-sm { padding:5px 10px; font-size:.82rem; border-radius:7px; margin-top:4px; }
.button-ghost { background:var(--surface); color:var(--link); border:1px solid var(--line); }
.button-danger { background:var(--danger); }
.tabbar { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px; }
.tab { padding:8px 14px; border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--heading); text-decoration:none; font-weight:650; font-size:.9rem; }
.tab.active { background:var(--navy); color:#fff; border-color:var(--navy); }
.tab .badge { margin-left:4px; }

/* Tab-Leiste für alle Bereiche mit Unterseiten (Saison-Manager, GuV, Kosten, CRM): Text mit blauer Unterlinie */
.sm-tabbar { display:flex; flex-wrap:wrap; gap:6px; margin:14px 0 20px; border-bottom:1px solid var(--line); }
.sm-tabbar > a, .sm-tabbar > button { text-decoration:none; background:none; border:0; border-bottom:3px solid transparent; padding:8px 12px; color:var(--muted); font-weight:650; font-size:.95rem; font-family:inherit; line-height:1.2; cursor:pointer; }
.sm-tabbar > a.active, .sm-tabbar > button.active { color:var(--heading); border-bottom-color:var(--link); }
.sm-tab[hidden] { display:none !important; }
.review-actions { white-space:nowrap; display:flex; gap:6px; align-items:center; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
.badge-cancelled { background:var(--danger-bg); color:var(--danger-text); }
.badge-blocked { background:var(--surface-3); color:var(--muted); }
.badge-confirmed { background:var(--ok-bg); color:var(--ok-text); }
.badge-test { background:var(--warn-bg); color:var(--warn-text); }
.badge-danger { background:#c0392b; color:#fff; font-weight:700; }
/* Problem-guest warning */
.warn-banner { display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border-radius:10px; background:var(--danger-bg); border:1px solid var(--danger-line); color:var(--danger-text); margin-bottom:18px; }
.warn-banner .warn-ico { font-size:22px; line-height:1; }
.warn-banner strong { color:var(--danger-text); }
.warn-row td { background:var(--danger-bg) !important; }
.warn-flag { display:inline-block; background:#c0392b; color:#fff; font-weight:700; font-size:.72rem; padding:2px 7px; border-radius:6px; margin-left:6px; white-space:nowrap; }
.row-cancelled td { color:var(--muted); }
.repeat-guest { font-size:.95em; cursor:help; }
.review-cell { white-space:normal; min-width:230px; }
.review-chip { display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:5px 0; border-bottom:1px dashed var(--line); }
.review-chip:last-of-type { border-bottom:0; }
.review-source { font-weight:700; color:var(--heading); font-size:.82rem; }
.review-stars { color:var(--gold); letter-spacing:1px; }
.review-text { color:var(--muted); font-size:.82rem; }
.review-status-label { color:var(--muted); font-size:.82rem; font-style:italic; }
.review-pending .review-source::after { content:" · angefragt"; color:var(--muted); font-weight:400; font-style:italic; }
.review-none .review-source::after { content:" · keine"; color:var(--muted); font-weight:400; font-style:italic; }
dialog.modal { width:min(520px,100%); max-height:90vh; overflow:auto; padding:26px; border:0; border-radius:14px; background:var(--surface); color:var(--text); box-shadow:0 24px 70px #07152577; }
dialog.modal::backdrop { background:#0b1a2ccc; }
.modal h2 { margin:0 0 8px; color:var(--heading); }
.modal textarea { width:100%; padding:10px 12px; border:1px solid var(--line-strong); border-radius:8px; background:var(--surface); color:var(--text); font:inherit; resize:vertical; }
.modal-actions { display:flex; gap:10px; align-items:center; margin-top:20px; }
.modal-actions .button-danger { margin-left:auto; }
/* Breites Overlay für eingebettete Werkzeuge (DB-Direktzugriff) */
dialog.modal-wide { width:96vw; max-width:96vw; height:92vh; max-height:92vh; padding:0; overflow:hidden; display:none; }
dialog.modal-wide[open] { display:flex; flex-direction:column; }
.modal-wide-bar { display:flex; align-items:center; gap:14px; padding:10px 16px; background:#b8860b; color:#fff; font-size:.85rem; }
dialog.modal-wide[data-prod="1"] .modal-wide-bar { background:#c0392b; }
.modal-wide-bar strong { white-space:nowrap; letter-spacing:.2px; }
.modal-wide-bar span { flex:1; opacity:.95; }
.modal-wide-bar a { color:#fff; text-decoration:underline; white-space:nowrap; }
.modal-wide-bar .button { padding:5px 14px; background:#ffffff2e; border:1px solid #ffffff8c; color:#fff; }
.modal-wide-frame { flex:1; width:100%; border:0; display:block; background:#fff; }
/* Hamburger + Backdrop: nur auf Mobile sichtbar */
.nav-toggle { display:none; position:fixed; top:12px; left:12px; z-index:1002; width:44px; height:44px; padding:0; border:0; border-radius:10px; background:var(--navy); cursor:pointer; flex-direction:column; justify-content:center; align-items:center; gap:5px; }
.nav-toggle span { display:block; width:22px; height:2px; background:#fff; border-radius:2px; transition:transform .2s, opacity .2s; }
body.nav-open .nav-toggle span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity:0; }
body.nav-open .nav-toggle span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
.nav-backdrop { position:fixed; inset:0; background:#0b1a2c99; z-index:1000; }

@media (max-width: 1250px) { .summary-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:900px) {
    .app-shell { grid-template-columns:1fr; }
    .nav-toggle { display:flex; }
    /* Sidebar als Off-Canvas-Drawer von links */
    .sidebar { position:fixed; top:0; left:0; z-index:1001; width:250px; max-width:82vw; height:100vh; transform:translateX(-100%); transition:transform .25s ease; box-shadow:0 0 40px #00000055; padding-top:64px; }
    body.nav-open .sidebar { transform:translateX(0); }
    .content { padding:18px; }
    .topbar { padding-left:68px; } /* Platz für den Hamburger */
    .toolbar { align-items:stretch; flex-direction:column; }
    .filter { width:100%; }
    .summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .card-grid { grid-template-columns:1fr; }
}
/* Auf Desktop sind Hamburger + Backdrop nie sichtbar */
@media (min-width:901px) { .nav-toggle, .nav-backdrop { display:none !important; } }

/* ===== Wiederverwendbare Popup-/Modal-Buttons =====
   Die globale button-Regel oben setzt color:#fff; background:var(--blue).
   Dadurch sind in neuen Inline-Modals ein weisses X oder ein heller
   Abbrechen-Button unsichtbar. Diese Klassen setzen die Farben explizit
   (mit !important), damit neue Popups das Problem nicht mehr haben.
   Verwendung: <button class="bvv-modal-close">&times;</button> im Modal-Header,
   .bvv-btn-cancel (hell) + .bvv-btn-primary (gruen) im Footer. */
.bvv-modal-close {
    background:rgba(255,255,255,0.25) !important;
    color:#fff !important;
    border:none !important;
    width:34px; height:34px; border-radius:4px; padding:0;
    font-size:24px; line-height:1; cursor:pointer; flex:0 0 auto;
    display:flex; align-items:center; justify-content:center;
}
.bvv-modal-close:hover { background:rgba(255,255,255,0.4) !important; filter:none; }
.bvv-btn-cancel {
    background:var(--surface) !important; color:var(--text) !important; border:1px solid var(--line) !important;
    padding:10px 18px; border-radius:4px; cursor:pointer; font-size:13px; font-weight:500;
}
.bvv-btn-cancel:hover { background:var(--surface-3) !important; filter:none; }
.bvv-btn-primary {
    background:#27ae60 !important; color:#fff !important; border:none !important;
    padding:10px 20px; border-radius:4px; cursor:pointer; font-size:13px; font-weight:600;
}
.bvv-btn-primary:hover { filter:brightness(1.06); }

/* Schalter Hell/Dunkel (nav.php: bvv_theme_toggle) */
.theme-toggle { margin:8px 12px 4px; padding:6px 10px; border:1px solid #ffffff66; border-radius:7px; background:transparent; color:#dce9f4; font-size:.8rem; cursor:pointer; }
.theme-toggle:hover { background:#ffffff1a; filter:none; }
.theme-toggle--fixed { position:fixed; top:12px; right:12px; z-index:5; margin:0; background:var(--surface); color:var(--text); border-color:var(--line-strong); }

/* Browser-Autovervollständigung färbt Felder gelb. Hier auf die Farben des Designs setzen (hell und dunkel). */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, select:-webkit-autofill, textarea:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--surface) inset;
    box-shadow: 0 0 0 1000px var(--surface) inset;
    -webkit-text-fill-color: var(--text);
    caret-color: var(--text);
}