@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap');

:root {
    --brand-color: #e64416;
    --gima-orange: #e64416;
    --gima-orange-light: #f36a45;
    --gima-dark: #c73a12;
    --bg: #ffffff;
    --surface: #ffffff;
    --surface-2: #f5f5f5;
    --border: #dedede;
    --border-subtle: #ececec;
    --text: #444444;
    --text-muted: #6a6a6a;
    --text-subtle: #9090a0;
    --success: #27ae60;
    --danger: #e74c3c;
    --warning: #e67e22;
    --info: #2980b9;
}

[data-theme="dark"] {
    --bg: #1a1a2e;
    --surface: #222240;
    --surface-2: #2a2a48;
    --border: #3a3a58;
    --border-subtle: #32324e;
    --text: #e0e0e8;
    --text-muted: #a0a0b8;
    --text-subtle: #707088;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* ── Linkes Seitenmenü (Sidebar) ── */
.app-shell {
    display: flex;
    align-items: stretch;
    min-height: 100vh;
}
.sidebar {
    width: 248px;
    flex-shrink: 0;
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    z-index: 120;
}
.sidebar a { text-decoration: none; }
.sidebar-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    font-family: 'Poppins', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text);
}
.sidebar-brand .nav-logo { height: 34px; width: auto; display: block; }
.snav {
    flex: 1;
    padding: .6rem .6rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}
.snav-label {
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-subtle);
    padding: .9rem .7rem .3rem;
}
.snav-item {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .5rem .7rem;
    border-radius: 4px;
    color: var(--text-muted);
    font-size: .875rem;
    font-weight: 600;
    transition: background .15s, color .15s;
}
.snav-item:hover { background: var(--surface-2); color: var(--text); }
.snav-item.active {
    background: rgba(230,66,22,.10);
    color: var(--gima-orange);
}
.snav-ic { width: 18px; height: 18px; flex-shrink: 0; color: var(--text-subtle); }
.snav-item:hover .snav-ic { color: var(--text); }
.snav-item.active .snav-ic { color: var(--gima-orange); }

/* ── Neue Post im Menue ──────────────────────────────────────────────────────
   Ein Menuepunkt, hinter dem etwas Unbearbeitetes liegt (Posteingang, neue
   Meldung), faerbt sich in der Markenfarbe und traegt die Anzahl als Pille.
   Ohne diese Kennzeichnung faellt eine neue Mail erst beim Hineinklicken auf --
   und wer nicht taeglich hineinklickt, gar nicht. In jeder GIMA-Anwendung gleich. */
.snav-item.snav-neu { color: var(--gima-orange); }
.snav-item.snav-neu .snav-ic { color: var(--gima-orange); }
.snav-badge {
    margin-left: auto;
    min-width: 20px;
    padding: 0 .38rem;
    border-radius: 999px;
    background: var(--gima-orange);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}
/* Auf dem Handy ist das Menue zugeklappt: der Punkt am Hamburger zeigt, dass
   sich das Aufklappen lohnt. */
.topbar-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 2px rgba(255,255,255,.45);
    flex-shrink: 0;
}
.sidebar-foot {
    border-top: 1px solid var(--border);
    padding: .8rem 1rem;
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .8rem;
    color: var(--text-muted);
}
.sf-user {
    flex: 1;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sf-logout { color: var(--danger); border-color: var(--danger); }
.sf-logout:hover { background: rgba(231,76,60,.08); color: #c0392b; }

.app-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
/* Inhalt linksbündig an der Sidebar, volle verfügbare Breite nutzen */
.app-main .container { flex: 1; width: 100%; max-width: none; margin: 0; padding: 1.5rem 2rem; }
.app-main .site-footer { margin-top: auto; }

/* Mobile-Topbar nur auf schmalen Screens sichtbar */
.mobile-topbar {
    display: none;
    align-items: center;
    gap: .75rem;
    background: var(--gima-orange);
    padding: 0 1rem;
    height: 54px;
}
.mobile-topbar .nav-logo { height: 30px; background: #fff; border-radius: 4px; padding: 3px 6px; }
.hamburger {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: .3rem;
    display: inline-flex;
}
.hamburger .snav-ic { width: 26px; height: 26px; color: #fff; }
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 115;
}

/* User Dropdown */
#userDropdown > a { padding: .4rem .9rem; border-radius: 4px; color: var(--text-muted); font-weight: 500; cursor: pointer; }
#userDropdown > a:hover { color: var(--text); background: var(--surface-2); }
#userDropdownMenu {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 6px !important;
    box-shadow: 0 6px 20px rgba(0,0,0,.12) !important;
    overflow: hidden !important;
    min-width: 180px;
}
#userDropdownMenu a {
    color: var(--text-muted) !important;
    font-size: .875rem;
    padding: .65rem 1rem !important;
    display: block !important;
    text-decoration: none !important;
    transition: background .12s, color .12s;
    border-bottom: 1px solid var(--border-subtle);
}
#userDropdownMenu a:last-child { border-bottom: none; }
#userDropdownMenu a:hover { background: var(--surface-2) !important; color: var(--text) !important; }
#userDropdownMenu .dropdown-danger { color: var(--danger) !important; }
#userDropdownMenu .dropdown-danger:hover { background: rgba(231,76,60,.08) !important; color: #c0392b !important; }

/* ── Container ── */
.container { width: 94%; max-width: 1600px; margin: 2rem auto; padding: 0 0 2rem; }

/* ── Page Header ── */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1.5rem;
}
.page-header h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text);
}
.page-header-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* ── Cards ── */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.card-title {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 1rem;
}

/* ── KPI Grid ── */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}
.kpi-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.6rem 1.4rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform .2s, box-shadow .2s;
}
.kpi-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(to right, var(--gima-orange-light), var(--gima-orange));
}
.kpi-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(230,66,22,.12); }
.kpi-icon { font-size: 2rem; margin-bottom: .5rem; }
.kpi-power .kpi-icon { color: var(--gima-orange); }
.kpi-devices .kpi-icon { color: var(--info); }
.kpi-value {
    font-family: 'Poppins', sans-serif;
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--gima-orange);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.kpi-unit { font-size: 1.1rem; font-weight: 500; color: var(--text-muted); }
.kpi-label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 600;
    color: var(--text-muted);
    margin-top: .5rem;
}

/* ── Readings Grid ── */
.readings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: .75rem;
    margin-bottom: .75rem;
}
.reading-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem 1.2rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.reading-label {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-muted);
    margin-bottom: .4rem;
}
.reading-value {
    font-family: 'Poppins', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.reading-positive { color: var(--success); }
.reading-unit { font-size: .85rem; font-weight: 500; color: var(--text-muted); }

/* ── Phase Cards ── */
.phases-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .75rem;
}
.phase-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem 1.2rem;
    border-top: 3px solid var(--border);
}
.phase-1 { border-top-color: var(--gima-orange); }
.phase-2 { border-top-color: var(--info); }
.phase-3 { border-top-color: var(--success); }
.phase-label {
    font-family: 'Poppins', sans-serif;
    font-size: .95rem;
    font-weight: 700;
    margin-bottom: .6rem;
    color: var(--text);
}
.phase-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .2rem 0;
    font-size: .88rem;
    border-bottom: 1px solid var(--border-subtle);
}
.phase-row:last-child { border-bottom: none; }
.phase-row span { color: var(--text-muted); }
.phase-row strong { font-variant-numeric: tabular-nums; }

/* ── Status Dots ── */
.status-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    margin-right: .3rem;
    vertical-align: middle;
}
.status-ok  { background: var(--success); }
.status-warn { background: var(--warning); }
.status-err { background: var(--danger); }

/* ── Tables ── */
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { padding: .75rem 1rem; text-align: left; border-bottom: 1px solid var(--border-subtle); }
.data-table th {
    background: var(--surface-2);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--text-muted);
    padding: .65rem 1rem;
    border-bottom: 1px solid var(--border);
}
.data-table tr:hover td { background: rgba(230,66,22,.05); }

/* ── Badges ── */
.badge {
    display: inline-block;
    padding: .22em .65em;
    border-radius: 4px;
    font-size: .71rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    border: 1px solid transparent;
}
.badge-success { background: #eafaf1; color: #1e8449; border-color: #a9dfbf; }
.badge-muted   { background: #f0f0f5; color: #5a6070; border-color: #d0d0e0; }
.badge-power   { background: #fef5ee; color: var(--gima-orange); border-color: #f0b27a; font-size: .85rem; padding: .2em .6em; }
.badge-info    { background: #eaf2fb; color: #2471a3; border-color: #aed6f1; }

/* ── Forms ── */
.form-group { margin-bottom: 1.2rem; }
.form-group label {
    display: block;
    font-weight: 600;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom: .4rem;
    color: var(--text-muted);
}
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: .6rem .9rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 5px;
    font-size: .95rem;
    font-family: inherit;
    color: var(--text);
    transition: border-color .15s, box-shadow .15s;
}
.form-group textarea { resize: vertical; min-height: 80px; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--gima-orange);
    box-shadow: 0 0 0 3px rgba(230,66,22,.15);
}
.form-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
.required { color: var(--danger); }

/* ── Buttons ── */
.btn {
    display: inline-block;
    padding: .5rem 1.25rem;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all .15s;
    letter-spacing: .02em;
    line-height: 1.5;
    white-space: nowrap;
}
.btn-primary {
    background: linear-gradient(to bottom, var(--gima-orange-light), var(--gima-orange));
    color: #fff;
    border-color: var(--gima-orange);
}
.btn-primary:hover { background: var(--gima-orange); border-color: var(--gima-dark); color: #fff; box-shadow: 0 2px 8px rgba(230,66,22,.3); }
.btn-secondary {
    background: linear-gradient(to bottom, var(--surface), var(--surface-2));
    color: var(--text);
    border-color: var(--border);
}
.btn-secondary:hover { background: var(--surface-2); color: var(--gima-orange); border-color: var(--gima-orange); }
.btn-danger {
    background: linear-gradient(to bottom, #e74c3c, #c0392b);
    color: #fff;
    border-color: #c0392b;
}
.btn-danger:hover { background: #c0392b; border-color: #a93226; color: #fff; }
.btn-sm { padding: .28rem .7rem; font-size: .8rem; }
.btn:disabled { opacity: .6; cursor: not-allowed; }

/* ── Alerts ── */
.alert {
    padding: .85rem 1rem;
    border-radius: 5px;
    margin-bottom: 1rem;
    font-size: .9rem;
    border: 1px solid transparent;
    border-left: 4px solid transparent;
}
.alert-error   { background: #fdf0ee; color: #922b21; border-color: #f1948a; border-left-color: #c0392b; }
.alert-success { background: #eafaf1; color: #1d6a3b; border-color: #a9dfbf; border-left-color: #27ae60; }
.alert-info    { background: #eaf2fb; color: #1f618d; border-color: #aed6f1; border-left-color: #2980b9; }
[data-theme="dark"] .alert-info { background: #1a2a40; color: #5dade2; border-color: #2a4060; border-left-color: #2980b9; }

/* ── Auth ── */
.auth-container { max-width: 440px; margin: 5rem auto; padding: 0 1rem; }
.auth-container .card { padding: 2.5rem; border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,.1); }
.auth-logo-wrap { text-align: center; margin-bottom: 1.25rem; }
.auth-logo { height: 64px; width: auto; }
.auth-container h1 {
    text-align: center;
    margin-bottom: .5rem;
    font-family: 'Poppins', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
}
.auth-subtitle { text-align: center; color: var(--text-muted); font-size: .9rem; margin-bottom: 1.5rem; }

/* Trenner zwischen SSO-Button und lokalem Login-Formular */
.auth-divider { display: flex; align-items: center; gap: .75rem; margin: 1.25rem 0; }
.auth-divider::before,
.auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border, #d8dde3); }
.auth-divider span { color: var(--text-muted); font-size: .8rem; white-space: nowrap; }

/* ── Empty State ── */
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--text-muted); }
.empty-icon { font-size: 3rem; margin-bottom: 1rem; }
.empty-state p { margin-bottom: 1rem; font-size: .95rem; }

/* ── Dev Banner ── */
.dev-banner-box {
    background: #fff176;
    border: 2px solid #f9a825;
    border-radius: 6px;
    padding: .6rem 1.5rem;
    margin: 1rem auto;
    max-width: 900px;
    text-align: center;
    color: #5a3e00;
    font-size: .9rem;
}

/* ── Footer ── */
.site-footer {
    text-align: center;
    padding: 1.2rem 1rem;
    margin-top: 3rem;
    color: var(--text-subtle);
    font-size: .78rem;
    border-top: 1px solid var(--border);
    background: var(--surface);
}
.site-footer a { color: var(--text-subtle); text-decoration: none; }
.site-footer a:hover { color: var(--gima-orange); }

/* ── Theme Toggle ── */
.theme-toggle {
    background: none;
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.15rem;
    padding: .3rem .5rem;
    color: var(--text-muted);
    transition: color .15s, border-color .15s, background .15s;
    display: flex;
    align-items: center;
}
.theme-toggle:hover { color: var(--gima-orange); border-color: var(--gima-orange); background: rgba(230,66,22,.07); }

/* ── Utility ── */
.monospace { font-family: 'Courier New', monospace; font-size: .88em; }
.text-muted { color: var(--text-muted); }

/* ── Headings ── */
h1, h2, h3, h4 { font-family: 'Poppins', sans-serif; }
a { color: var(--gima-orange); }
a:hover { color: var(--gima-dark); }

/* Focus */
a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--gima-orange); outline-offset: 2px;
}

/* ── Dark Mode ── */
[data-theme="dark"] .alert-error   { background: #3a1a1a; color: #f1948a; border-color: #5a2a2a; border-left-color: #c0392b; }
[data-theme="dark"] .alert-success { background: #1a3a28; color: #58d68d; border-color: #2a5a40; border-left-color: #27ae60; }
[data-theme="dark"] .auth-container .card { box-shadow: 0 4px 20px rgba(0,0,0,.3); }
[data-theme="dark"] .navbar-logo,
[data-theme="dark"] .auth-logo { background: #fff; border-radius: 6px; padding: 4px 8px; box-sizing: content-box; }
[data-theme="dark"] .badge-success { background: #1a3a28; color: #58d68d; border-color: #2a5a40; }
[data-theme="dark"] .badge-muted   { background: #2a2a48; color: #a0a0b8; border-color: #3a3a58; }
[data-theme="dark"] .badge-info    { background: #1a2a40; color: #5dade2; border-color: #2a4060; }
[data-theme="dark"] .badge-power   { background: #3a2a1a; color: #f0b27a; border-color: #5a4030; }
[data-theme="dark"] .dev-banner-box { background: #3a2e00; border-color: #cc7a00; color: #ffc107; }
[data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea {
    background: var(--surface-2) !important; color: var(--text) !important; border-color: var(--border) !important;
}
[data-theme="dark"] input:focus, [data-theme="dark"] select:focus, [data-theme="dark"] textarea:focus {
    background: var(--surface) !important;
}
[data-theme="dark"] .data-table tr:hover td { background: rgba(230,66,22,.08); }

/* ── Mobile ── */
@media (max-width: 900px) {
    .mobile-topbar { display: flex; }
    .sidebar {
        position: fixed;
        top: 0; left: 0;
        height: 100vh;
        transform: translateX(-100%);
        transition: transform .25s ease;
        box-shadow: 2px 0 16px rgba(0,0,0,.18);
    }
    .app-shell.nav-open .sidebar { transform: translateX(0); }
    .app-shell.nav-open .sidebar-overlay { display: block; }
    .app-main .container { padding: 1.25rem 1rem; }
}

@media (max-width: 768px) {
    .phases-grid { grid-template-columns: 1fr; }
    /* .form-row bleibt auf Tablets zweispaltig – es stapelt erst auf dem Handy (siehe unten). */
    .page-header { flex-direction: column; align-items: flex-start; }
    .kpi-grid { grid-template-columns: 1fr 1fr; }
    .readings-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .kpi-grid { grid-template-columns: 1fr; }
    .readings-grid { grid-template-columns: 1fr; }
    .container { width: 96%; margin: 1rem auto; }
}

@media (prefers-reduced-motion: reduce) {
    .kpi-card:hover { transform: none; }
    .btn { transition: none; }
}

/* ── Energieverwaltung: Prioritäts-Badges & E-Mail-Liste ── */
.prio-badge {
    display: inline-block;
    padding: .18em .6em;
    border-radius: 4px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #fff;
    white-space: nowrap;
}
.row-unhandled td { background: rgba(230,66,22,.035); }
.row-urgent td { box-shadow: inset 3px 0 0 var(--danger); }
.subject-cell { font-weight: 600; }
.subject-cell .meta { display:block; font-weight:400; font-size:.8rem; color: var(--text-muted); margin-top:.15rem; }
.summary-box {
    background: var(--surface-2);
    border-radius: 6px;
    padding: 1rem 1.2rem;
    border-left: 4px solid var(--gima-orange);
    margin: 1rem 0;
}
.mail-body {
    white-space: pre-wrap;
    word-break: break-word;
    font-family: 'Open Sans', monospace;
    font-size: .9rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 1rem 1.2rem;
    max-height: 600px;
    overflow-y: auto;
}
.filter-bar { display:flex; gap:.5rem; flex-wrap:wrap; align-items:flex-end; margin-bottom:1.25rem; }
.filter-bar .form-group { margin-bottom:0; }
.detail-grid { display:grid; grid-template-columns: 150px 1fr; gap:.4rem 1rem; font-size:.92rem; }
.detail-grid dt { color: var(--text-muted); font-weight:600; }
.detail-grid dd { margin:0; word-break: break-word; }
.inline-form { display:inline; }

/* ── CAM-EUBA Ergänzungen ──────────────────────────────────────── */
.grid-2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.25rem;
}
@media (max-width: 768px) {
    .grid-2 { grid-template-columns: minmax(0, 1fr); }
}
.plain-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.plain-list > li {
    padding: .55rem 0;
    border-top: 1px solid var(--border);
}
.plain-list > li:first-child { border-top: none; }

/* ============================================================
   CAFM-Ergänzungen (Stat-Kacheln, QR-Box, Detail-Layout)
   ============================================================ */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: .9rem;
    margin-bottom: 1.25rem;
}
.stat-card {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border, #e3e7ec);
    border-radius: 10px;
    padding: 1rem 1.1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
a.stat-card { display: block; color: inherit; text-decoration: none; transition: box-shadow .12s, transform .12s, border-color .12s; }
a.stat-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.12); transform: translateY(-2px); border-color: var(--primary, #16385c); }
.stat-value { font-size: 1.9rem; font-weight: 700; line-height: 1.1; }
.stat-label { font-size: .8rem; color: var(--muted, #7a8593); text-transform: uppercase; letter-spacing: .04em; margin-top: .25rem; }

.qr-box { text-align: center; }
.qr-box svg { width: 150px; height: 150px; background: #fff; padding: 8px; border-radius: 6px; }

.kv-grid { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.2rem; font-size: .92rem; }
.kv-grid dt { color: var(--muted, #7a8593); }
.kv-grid dd { margin: 0; }

/* minmax(0, …) statt 2fr/1fr: sonst waechst eine Spalte auf die Mindestbreite ihres
   Inhalts (breite Tabelle) und schiebt die ganze Seite ueber den Bildschirmrand.
   So bleibt das Scrollen dort, wo es hingehoert -- in der Tabelle selbst. */
.two-col { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
/* Auf Tablets (auch iPad hochkant, 768–1024 px) wird die schmale Spalte sonst zu eng. */
@media (max-width: 1024px) { .two-col { grid-template-columns: minmax(0, 1fr); } }

[data-theme="dark"] .stat-card { background: #1d2530; border-color: #2c3744; }

/* Aktionsmenü (⋮) für Listen-Tabellen (Mitarbeiter, Dienstleister …) */
.action-menu { position: relative; display: inline-block; }
.action-menu-btn {
    background: var(--surface, #fff); border: 1px solid var(--border, #dedede); border-radius: 6px;
    padding: .25rem .6rem; cursor: pointer; font-size: 1.1rem; line-height: 1; color: var(--text, #444);
}
.action-menu-btn:hover { background: var(--border-subtle, #f0f0f0); }
.action-dropdown {
    display: none; position: absolute; right: 0; top: calc(100% + 4px);
    background: var(--surface, #fff); border: 1px solid var(--border, #dedede); border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,.18); min-width: 190px; z-index: 999; overflow: hidden;
}
.action-dropdown.open { display: block; }
.action-dropdown a, .action-dropdown button {
    display: block; width: 100%; padding: .5rem .85rem; text-align: left; background: none; border: none;
    font-size: .875rem; color: var(--text, #444); text-decoration: none; cursor: pointer; white-space: nowrap;
}
.action-dropdown a:hover, .action-dropdown button:hover { background: var(--border-subtle, rgba(0,0,0,.05)); }
.action-dropdown .divider { height: 1px; background: var(--border, #dedede); margin: .25rem 0; }
.action-dropdown .item-danger { color: #c0392b; }
.action-dropdown .item-danger:hover { background: rgba(192,57,43,.08); }

.hidden { display: none !important; }
@media print { .sidebar, .mobile-topbar, .sidebar-overlay, .site-footer, .page-header-actions, form { display: none !important; } .app-main .container { padding: 0; } .qr-box button { display:none; } }

/* ── Ruecklink ins GIMA Portal ──────────────────────────────────────────────
   Steht in JEDER GIMA-Anwendung als erster Eintrag der Navigation, damit er
   ueberall an derselben Stelle zu finden ist, und ist farblich abgesetzt --
   er verlaesst die Anwendung, die uebrigen Punkte tun das nicht. */
.snav-portal {
    background: rgba(230, 66, 22, .10);
    border: 1px solid rgba(230, 66, 22, .40);
    color: var(--gima-orange) !important;
    font-weight: 700;
    border-radius: 8px;
    margin-bottom: .5rem;
}
.snav-portal:hover,
.snav-portal:focus {
    background: var(--gima-orange);
    border-color: var(--gima-dark);
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(230, 66, 22, .3);
}
.snav-portal .snav-ic { color: inherit; opacity: 1; }
.snav-portal + .snav-item { margin-top: .1rem; }

/* ============================================================
   Responsive: Tablet & Handy
   ============================================================
   Die Oberflaeche passt sich am tatsaechlichen Geraet an, von dem die Seite
   aufgerufen wird -- ueber die Viewport-Breite und die Zeigergenauigkeit
   (Finger statt Maus). Bewusst KEINE Auswertung des User-Agents am Server:
   nur so stimmt die Darstellung auch bei gedrehtem Tablet, geteiltem
   Bildschirm oder verkleinertem Browserfenster.

   Stufen:  <= 1024 px  Tablet (iPad hochkant/quer)
            <=  640 px  Handy
            <=  400 px  kleines Handy
            pointer: coarse  jedes Touch-Geraet (unabhaengig von der Breite)
   ------------------------------------------------------------ */

/* ── Tablet ─────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .app-main .container { padding: 1.25rem 1.25rem 2rem; }
    .card { padding: 1.15rem; }
    /* Filter- und Aktionsleisten duerfen umbrechen statt zu quetschen */
    .filter-bar { gap: .6rem; }
    .filter-bar .form-group { min-width: 150px; flex: 1 1 150px; }
    .stat-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .7rem; }
}

/* ── Handy ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
    /* Die Kopfleiste bleibt beim Scrollen stehen -- das Menue ist immer erreichbar. */
    .mobile-topbar { position: sticky; top: 0; z-index: 130; }
    .sidebar { width: min(84vw, 300px); }

    .app-main .container { padding: 1rem .85rem 1.75rem; }
    .card { padding: 1rem .9rem; margin-bottom: .8rem; }
    /* Formularspalten stapeln – zwei Felder nebeneinander sind auf dem Handy zu schmal */
    .form-row { grid-template-columns: minmax(0, 1fr); }
    .card-title { font-size: .95rem; }
    .page-header { margin-bottom: 1rem; }
    .page-header h2 { font-size: 1.2rem; }
    /* Aktionen des Seitenkopfs auf ganze Breite verteilen (gut treffbar) */
    .page-header-actions { width: 100%; }
    .page-header-actions .btn { flex: 1 1 auto; text-align: center; }

    /* Breite Tabellen bleiben scrollbar; kompaktere Zellen sparen Wischwege. */
    .table-wrap { -webkit-overflow-scrolling: touch; }
    .data-table th, .data-table td { padding: .55rem .6rem; }
    .data-table th { font-size: .65rem; letter-spacing: .06em; }
    .data-table td { font-size: .86rem; }
    .subject-cell .meta { font-size: .74rem; }
    /* Lange Dateinamen/Links duerfen umbrechen statt die Tabelle zu sprengen.
       Bewusst nur Links -- sonst zerreisst es auch Datumsangaben in der Meta-Zeile. */
    .data-table a { overflow-wrap: anywhere; }
    .subject-cell .meta { overflow-wrap: break-word; }

    /* Beschreibungslisten einspaltig -- 'max-content' wird sonst zu breit */
    .kv-grid, .detail-grid { grid-template-columns: 1fr; gap: .1rem .5rem; }
    .kv-grid dt, .detail-grid dt { margin-top: .5rem; font-size: .72rem;
        text-transform: uppercase; letter-spacing: .05em; }
    .kv-grid dd, .detail-grid dd { margin: 0 0 .1rem; }

    /* Nebensaechliche Tabellenspalten auf dem Handy ausblenden -- die Liste
       bleibt lesbar, die Detailseite zeigt weiterhin alles. */
    .hide-phone { display: none !important; }

    .filter-bar .form-group { flex: 1 1 100%; min-width: 0; }
    .qr-box svg { width: 130px; height: 130px; }
    .site-footer { padding: 1rem .85rem; font-size: .72rem; }

    /* Anmeldung: keine 5rem Luft ueber dem Formular, kompaktere Karte */
    .auth-container { margin: 1.5rem auto; }
    .auth-container .card { padding: 1.5rem 1.2rem; }

    /* Sprungmarken duerfen nicht unter der klebenden Kopfleiste landen */
    .hb-sec, .hb-bereich, .card[id], [id^="komponenten"] { scroll-margin-top: 66px; }
}

/* ── Kleines Handy ──────────────────────────────────────────── */
@media (max-width: 400px) {
    .app-main .container { padding: .85rem .6rem 1.5rem; }
    .stat-grid { grid-template-columns: 1fr 1fr; }
    .stat-value { font-size: 1.5rem; }
}

/* ── Touch-Bedienung (Handy & Tablet, unabhaengig von der Breite) ──
   Finger brauchen groessere Ziele als ein Mauszeiger: mindestens 44 px
   (Apple HIG / WCAG 2.5.5). Schriftgroesse >= 16 px in Eingabefeldern
   verhindert, dass iOS beim Antippen automatisch hineinzoomt. */
@media (hover: none) and (pointer: coarse) {
    .btn { padding: .6rem 1.1rem; min-height: 44px; display: inline-flex;
        align-items: center; justify-content: center; }
    .btn-sm { padding: .45rem .8rem; min-height: 38px; font-size: .84rem; }
    .snav-item { padding: .7rem .8rem; }
    .action-menu-btn { min-width: 42px; min-height: 38px; }
    .action-dropdown a, .action-dropdown button { padding: .7rem .9rem; }

    .form-group input, .form-group select, .form-group textarea,
    input[type="text"], input[type="date"], input[type="number"],
    input[type="search"], input[type="password"], input[type="email"], select, textarea {
        font-size: 16px;
        min-height: 44px;
    }
    .form-group textarea, textarea { min-height: 90px; }
    input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; }
    /* Datei-Auswahl bricht auf schmalen Geraeten sonst aus dem Feld heraus */
    input[type="file"] { max-width: 100%; }

    /* Schwebe-Effekte ohne Maus nur stoerend (bleiben nach dem Antippen haengen) */
    a.stat-card:hover, .kpi-card:hover { transform: none; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
    .data-table tr:hover td { background: none; }
}

/* Bei geoeffnetem Menue nicht der Hintergrund mitscrollen (Handy/Tablet) */
body.nav-locked { overflow: hidden; }