/* =====================================================================
   HIRSCHMILCH LAYOUT – Vorlage
   Header mit Logo + Burger-Menü, Slide-in-Seitenpanel, Glas-Hauptcard,
   innere Panels. Hell/Dunkel über <html data-theme="dark|light">.
   ===================================================================== */

/* ── Fonts (lokal, keine externen Requests) ─────────────────────────── */
@font-face { font-family: 'Inter'; font-weight: 300; font-display: swap; src: url('../fonts/inter-v13-latin-300.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 400; font-display: swap; src: url('../fonts/inter-v13-latin-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-display: swap; src: url('../fonts/inter-v13-latin-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-display: swap; src: url('../fonts/inter-v13-latin-600.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-weight: 600; font-display: swap; src: url('../fonts/montserrat-v26-latin-600.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-weight: 700; font-display: swap; src: url('../fonts/montserrat-v26-latin-700.woff2') format('woff2'); }

/* ── Design-Tokens: Light ───────────────────────────────────────────── */
:root {
    --primary-900: #244078;
    --primary-800: #314d86;
    --primary-700: #395690;
    --primary-600: #456199;
    --blue-300: #8ab5e3;
    --blue-50: #b7cde6;

    --bg: #f5f5f7;
    --surface: #ffffff;
    --soft-surface: #f0f1f5;
    --soft-surface-hover: #e8eaef;
    --border: #d3d7e0;
    --card-border: rgba(207, 211, 222, .95);
    --text: #1d2939;
    --text-secondary: #667085;
    --brand-bg: rgba(255, 255, 255, .88);

    --ok: #22c55e;
    --warn: #f59e0b;
    --error: #ef4444;

    --radius-xs: 3px;
    --radius-sm: 5px;
    --radius-md: 7px;
    --radius-lg: 10px;

    --shadow-sm: 0 2px 6px rgba(36, 64, 120, .08);
    --shadow-md: 0 10px 30px rgba(36, 64, 120, .12);
    --shadow-lg: 0 20px 50px rgba(36, 64, 120, .15);
    --transition: .3s ease;

    --page-glow: rgba(193, 194, 196, .77);
    --page-base: #ffffff;
}

/* ── Design-Tokens: Dark (Standard) ─────────────────────────────────── */
[data-theme="dark"] {
    --bg: #161616;
    --surface: #1e1e1e;
    --soft-surface: #2a2a2a;
    --soft-surface-hover: rgba(50, 50, 50, .5);
    --border: #3a3a3a;
    --card-border: rgba(58, 58, 58, .95);
    --text: #f0f0f0;
    --text-secondary: #b8bcc6;
    --brand-bg: rgba(22, 22, 22, .90);

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, .28);
    --shadow-md: 0 15px 40px rgba(0, 0, 0, .4);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, .45);

    --page-glow: rgba(94, 96, 100, .45);
    --page-base: #161616;
    color-scheme: dark;
}

/* ── Basis ──────────────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html, body { min-height: 100vh; overflow-x: hidden; }

body {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text);
    /* Zwei weiche Lichtflecken auf dem Hintergrund */
    background:
        radial-gradient(ellipse at 20% 50%, var(--page-glow) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 20%, var(--page-glow) 0%, transparent 50%),
        var(--page-base);
    background-attachment: fixed;
}

a { color: var(--primary-700); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--primary-900); }
[data-theme="dark"] a, [data-theme="dark"] a:hover { color: var(--blue-50); }

/* ── Header (sticky, Glas-Effekt) ───────────────────────────────────── */
.brand {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px clamp(24px, 5vw, 56px);
    background: var(--brand-bg);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.brand img { height: 48px; width: auto; }

.brand-text { display: flex; flex-direction: column; line-height: 1.2; }

.brand-text .title {
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--primary-900);
}
[data-theme="dark"] .brand-text .title { color: var(--text); }

.brand-text .domain { font-size: .78rem; font-weight: 500; color: var(--text-secondary); }

/* ── Burger-Button ──────────────────────────────────────────────────── */
.menu-btn {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--soft-surface);
    cursor: pointer;
    transition: background var(--transition), box-shadow var(--transition), transform .15s ease;
}
.menu-btn:hover { background: var(--soft-surface-hover); box-shadow: var(--shadow-sm); transform: scale(1.07); }
.menu-btn:active { transform: scale(.96); }

.menu-icon { display: flex; flex-direction: column; gap: 5px; }
.menu-icon span { display: block; width: 22px; height: 2.5px; border-radius: 2px; background: var(--text); }

/* ── Seitenpanel (fährt von rechts rein) ────────────────────────────── */
.settings-overlay {
    position: fixed;
    inset: 0;
    z-index: 900;
    background: rgba(0, 0, 0, .30);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
}
.settings-overlay.open { opacity: 1; pointer-events: auto; }

.settings-panel {
    position: fixed;
    top: 0;
    right: -320px;
    width: 300px;
    height: 100%;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    background: var(--brand-bg);
    border-left: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: right .28s cubic-bezier(.4, 0, .2, 1);
}
.settings-panel.open { right: 0; }

.settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--border);
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.settings-close {
    padding: 4px 8px;
    border: none;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text-secondary);
    font-size: 1rem;
    cursor: pointer;
}
.settings-close:hover { background: var(--soft-surface-hover); color: var(--text); }

.settings-body { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 20px; }

.settings-section-label {
    padding: 14px 4px 6px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.settings-section-label:first-child { padding-top: 4px; }

/* Menüeintrag – als <a> oder <button> nutzbar */
.settings-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--soft-surface);
    color: var(--text);
    font: inherit;
    font-size: .92rem;
    text-align: left;
    cursor: pointer;
    transition: background var(--transition), box-shadow var(--transition), transform .13s ease;
}
.settings-row:hover { background: var(--soft-surface-hover); box-shadow: var(--shadow-sm); transform: translateY(-1px); color: var(--text); }
[data-theme="dark"] .settings-row, [data-theme="dark"] .settings-row:hover { color: var(--text); }

.settings-row-icon { width: 20px; flex-shrink: 0; text-align: center; font-size: 1rem; }
.settings-row-text { flex: 1; font-weight: 500; }
.settings-row-arrow { color: var(--text-secondary); font-size: .8rem; }
.settings-row-badge {
    padding: 2px 8px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--soft-surface-hover);
    color: var(--text-secondary);
    font-size: .74rem;
    white-space: nowrap;
}

.settings-divider { border: none; border-top: 1px solid var(--border); margin: 8px 0; }
.settings-footer { padding: 16px 20px; text-align: center; font-size: .72rem; color: var(--text-secondary); }

/* ── Seiteninhalt ───────────────────────────────────────────────────── */
.container { width: min(1320px, calc(100% - 48px)); margin: 0 auto; padding: 48px 0; }

/* Hauptcard: im Dark Mode halbtransparentes "Glas" */
.card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 34px;
    background: var(--surface);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}
[data-theme="dark"] .card {
    background: rgba(20, 20, 20, .30);
    border: 1px solid rgba(255, 255, 255, .15);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .45), inset 0 1px 1px rgba(255, 255, 255, .08);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.card > h2 {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text);
}

/* Reihe aus Panels nebeneinander – alle gleich hoch */
.panel-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: stretch; }

/* Inneres Panel in der Hauptcard */
.panel {
    flex: 1;
    min-width: 280px;
    padding: 16px 18px;
    background: var(--soft-surface);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}
.panel-header h3 {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text);
}

/* Status-Punkt (grün pulsierend / gelb / rot / grau) */
.status-dot { width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; background: var(--border); }
.status-dot.ok { background: var(--ok); box-shadow: 0 0 0 3px rgba(34, 197, 94, .25); animation: pulse-green 1.8s ease-in-out infinite; }
.status-dot.warn { background: var(--warn); }
.status-dot.error { background: var(--error); }
@keyframes pulse-green {
    0%, 100% { box-shadow: 0 0 0 3px rgba(34, 197, 94, .25); }
    50% { box-shadow: 0 0 0 6px rgba(34, 197, 94, .08); }
}

/* Listenzeile im Panel */
.list-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
}
.list-row .meta { margin-left: auto; display: flex; gap: 6px; }

.badge {
    padding: 1px 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    background: var(--soft-surface);
    color: var(--text-secondary);
    font-size: 10px;
    white-space: nowrap;
}

.section-label {
    margin: 14px 0 6px;
    font-size: 12px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

/* ── Buttons & Formulare (bewusst per Klasse, nicht global) ─────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border: 0;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--primary-900), var(--primary-600));
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:disabled { opacity: .45; cursor: default; transform: none; box-shadow: none; }
.btn-danger { background: #c0392b; }
.btn-ghost { background: var(--surface); color: var(--text); border: 1px solid var(--border); box-shadow: none; }

.input, .select {
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 13px;
    outline: none;
}
.input:focus, .select:focus { border-color: var(--blue-300); box-shadow: 0 0 0 3px rgba(138, 181, 227, .25); }

input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--warn); cursor: pointer; }

/* ── Footer ─────────────────────────────────────────────────────────── */
.footer-links { margin-top: 16px; padding-top: 12px; text-align: center; font-size: 12px; color: var(--text-secondary); }
.footer-links a, [data-theme="dark"] .footer-links a { color: var(--text-secondary); }

/* ── Mobil ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .brand { padding: 16px 20px; }
    .brand img { height: 42px; }
    .container { width: calc(100% - 28px); padding: 28px 0; }
    .card { padding: 22px; }
    .panel-row { flex-direction: column; }
    .panel { min-width: 0; }
}