/* =========================================================
   Glas-Design ("Frosted Glass") für die Buchhaltung
   Liegt als eigene Ebene über style.css – zum Abschalten
   einfach den <link> auf glass.css in den Templates entfernen.
   Druckvorlagen (Rechnung/Angebot) binden diese Datei nicht ein.
   ========================================================= */

:root {
    --glass-bg: rgba(255, 255, 255, 0.52);
    --glass-bg-strong: rgba(255, 255, 255, 0.72);
    --glass-bg-soft: rgba(255, 255, 255, 0.34);
    --glass-border: rgba(255, 255, 255, 0.65);
    --glass-line: rgba(10, 11, 13, 0.08);
    --glass-blur: blur(22px) saturate(160%);
    --glass-shadow: 0 10px 40px rgba(40, 32, 20, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.7);
    --ink-glass: rgba(10, 11, 13, 0.86);
    --r-xl: 28px;
    --r-lg: 20px;
    --r-md: 14px;
    --r-pill: 999px;
    --gap: 14px;
    --bg-alt: rgba(255, 255, 255, 0.45);
    --border: rgba(10, 11, 13, 0.10);
    --text-muted: #4E525A;
}

/* ---------- Hintergrund: stark weichgezeichnetes Foto ---------- */
body {
    background: #D9D2C5;
    min-height: 100vh;
}
body::before {
    content: "";
    position: fixed;
    inset: -60px;
    z-index: -2;
    background: url("../img/hintergrund.jpg") center / cover no-repeat;
    filter: blur(48px) saturate(1.15);
}
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(circle at 15% 10%, rgba(255, 255, 255, 0.55), transparent 55%),
        linear-gradient(180deg, rgba(246, 242, 234, 0.55), rgba(232, 226, 214, 0.65));
}

/* gemeinsamer Glas-Look */
.topbar, .sidenav, .card, .kpi, .data-table, .form fieldset, .year-nav, .view-toggle,
.flash, .auth-card, .anfragen-hinweis, .search-summary, .beleg-current, .beleg-file, .festschreibung {
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}

/* ---------- Kopfleiste: schwebende Glas-Leiste ---------- */
.topbar {
    top: 12px;
    left: 12px;
    right: 12px;
    height: 60px;
    border-radius: var(--r-pill);
    padding: 0 10px 0 22px;
    background: var(--glass-bg-strong);
}
.topbar-context {
    padding: 6px 14px;
    border-radius: var(--r-pill);
    background: var(--glass-bg-soft);
}

/* ---------- Seitenleiste: schwebende Glas-Schiene ---------- */
.sidenav {
    top: 86px;
    left: 12px;
    bottom: 12px;
    width: calc(var(--nav-w) - 24px);
    border-radius: var(--r-xl);
    padding: 12px;
    scrollbar-width: none;
}
.sidenav::-webkit-scrollbar { display: none; }
.sidenav a {
    border-left: 0;
    border-radius: var(--r-pill);
    padding: 10px 16px;
    margin-bottom: 4px;
}
.sidenav a:hover { background: rgba(255, 255, 255, 0.6); }
.sidenav a.active {
    background: var(--ink-glass);
    color: #fff;
    box-shadow: 0 6px 18px rgba(10, 11, 13, 0.25);
}
.nav-badge { border-radius: var(--r-pill); }

/* ---------- Inhalt ---------- */
.content {
    padding: calc(60px + 36px) 28px 40px;
}
h1 { letter-spacing: -0.03em; }

.card {
    border-radius: var(--r-lg);
    padding: 22px 24px;
}

/* ---------- Kennzahlen ---------- */
.kpi, .kpi-big {
    border-radius: var(--r-lg);
    border-top: 1px solid var(--glass-border);
}
.kpi-grid { gap: var(--gap); }
/* erste große Kennzahl als dunkle Glas-Karte hervorheben */
.kpi-grid-big .kpi-big:last-child {
    background: var(--ink-glass);
    border-color: rgba(255, 255, 255, 0.12);
    color: #fff;
}
.kpi-grid-big .kpi-big:last-child .kpi-label,
.kpi-grid-big .kpi-big:last-child .kpi-sub { color: rgba(255, 255, 255, 0.7); }
.kpi-grid-big .kpi-big:last-child .kpi-value.income { color: #7FD99B; }
.kpi-grid-big .kpi-big:last-child .kpi-value.expense { color: #FF9B8F; }

/* ---------- Tabellen ---------- */
.data-table {
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--r-lg);
    overflow: hidden;
}
.data-table th {
    background: rgba(255, 255, 255, 0.35);
    border-bottom: 1px solid var(--glass-line);
}
.data-table td { border-bottom: 1px solid var(--glass-line); }
.data-table tr:hover td { background: rgba(255, 255, 255, 0.45); }

/* ---------- Buttons: Pills ---------- */
.btn {
    border-radius: var(--r-pill);
    border-width: 1px;
    border-color: rgba(10, 11, 13, 0.18);
    background: rgba(255, 255, 255, 0.6);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.btn:hover { background: rgba(255, 255, 255, 0.9); }
.btn-primary {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
    box-shadow: 0 6px 18px rgba(10, 11, 13, 0.22);
}
.btn-primary:hover { background: #2A2C31; color: #fff; border-color: #2A2C31; }
.btn-danger { color: var(--expense); border-color: rgba(180, 35, 24, 0.45); }
.btn-danger:hover { background: var(--expense); color: #fff; }

/* ---------- Umschalter / Jahr-Navigation ---------- */
.year-nav, .view-toggle { border-radius: var(--r-pill); }
.year-nav-btn, .view-toggle-btn { border-radius: var(--r-pill); }
.view-toggle-btn.active { background: var(--ink-glass); }

/* ---------- Status-Badges als Pills ---------- */
.status, .due, .anfrage-leistung, .tag-extern { border-radius: var(--r-pill); }
.status { padding: 3px 11px; }

/* ---------- Formulare ---------- */
.form fieldset { border-radius: var(--r-lg); }
.form legend {
    background: var(--glass-bg-strong);
    border-radius: var(--r-pill);
    padding: 3px 12px;
}
.form input, .form select, .form textarea,
.search-bar input[type="search"], .search-bar select,
.positionen-table input {
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(10, 11, 13, 0.12);
}
.form input:focus, .form select:focus, .form textarea:focus,
.search-bar input[type="search"]:focus, .positionen-table input:focus {
    background: #fff;
}
.vorlage-bar, .beleg-upload-btn, .anfrage-text { border-radius: var(--r-md); }
.vorlage-bar { background: rgba(255, 255, 255, 0.4); }
.positionen-table th { background: transparent; }
.beleg-preview, .beleg-bild { border-radius: var(--r-md); }
.beleg-current, .beleg-file, .search-summary { border-radius: var(--r-md); }

/* ---------- Hinweise ---------- */
.flash, .anfragen-hinweis, .festschreibung { border-radius: var(--r-md); }
.flash { border-left-width: 4px; }
.anfrage-text { background: rgba(255, 255, 255, 0.45); }

/* ---------- Login ---------- */
.auth-body { background: transparent; }
.auth-card {
    border-radius: var(--r-xl);
    background: var(--glass-bg-strong);
}

/* ---------- Mobil ---------- */
@media (max-width: 900px) {
    .topbar { top: 8px; left: 8px; right: 8px; height: 56px; padding: 0 8px 0 14px; }
    .sidenav {
        top: 72px; left: 8px; bottom: 8px;
        width: min(280px, calc(100vw - 16px));
        transform: translateX(calc(-100% - 16px));
        background: var(--glass-bg-strong);
    }
    body.nav-open .sidenav { transform: translateX(0); }
    .content { padding: calc(56px + 24px) 12px 28px; }
    .card { padding: 16px 16px; }
}

/* Ohne Weichzeichner-Unterstützung: etwas deckender, damit alles lesbar bleibt */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    :root { --glass-bg: rgba(255, 255, 255, 0.86); --glass-bg-strong: rgba(255, 255, 255, 0.94); }
}

/* Weniger Effekte gewünscht (Systemeinstellung) */
@media (prefers-reduced-transparency: reduce) {
    :root { --glass-bg: rgba(255, 255, 255, 0.92); --glass-bg-strong: #fff; }
}

@media print {
    body::before, body::after { display: none; }
    .card, .kpi, .data-table { background: #fff !important; box-shadow: none !important; backdrop-filter: none !important; }
}