/* Basis-Utility-Klassen (SECURITY_FEATURES.md Abschnitt 8.1 - kein style="" Attribut, damit CSP ohne unsafe-inline funktioniert) */

/* Design-Tokens (2026-07-16, Nutzerwunsch: modernerer visueller Feinschliff) - buendelt die bisher
   ueber die Datei verstreuten Ad-hoc-Hex-Farben (u.a. #2c3e50, #00ACC1, #ffd600, #427323, #c0392b)
   zu einem konsistenten Satz. Bewusst KEIN Dark-Mode-Toggle hier - die App hat aktuell keinen
   Theme-Umschalter, das waere eine neue Funktion statt reinem Feinschliff. Auftragsart-Badges
   (badge-art-*, siehe includes/ui_helpers.php::auftragsart_style_block()) bleiben von diesen
   Tokens bewusst unberuehrt - ihre Farbe kommt live aus MFR, nicht aus diesem Palette-System. */
:root {
    --navy: #0f0147;
    --navy-2: #1c1160;
    --cyan: #009fd4;
    --cyan-soft: #e3f4fb;
    --ink: #161a2b;
    --paper: #f2f4fa;
    --card: #ffffff;
    --line: #e3e7f1;
    --muted: #6b7386;
    --ok: #1f9d55;
    --ok-soft: #e6f6ec;
    --warn: #c98a0a;
    --warn-soft: #fbf1dc;
    --danger: #d1453d;
    --danger-soft: #fbe9e8;
    --plan: #7c3aad;
    --plan-soft: #f1e7fb;
    --shadow: 0 1px 2px rgba(15, 1, 71, 0.06), 0 8px 24px -12px rgba(15, 1, 71, 0.18);
    --radius-card: 14px;
    --radius-control: 9px;
}

* { box-sizing: border-box; }
/* 2026-08-27, Design-Feinschliff: Ueberschriften waren bisher komplett ungestylt (reiner
   Browser-Default) obwohl h1-h4 in 28+ Dateien verwendet werden - jetzt an die Farb-/Gewichts-
   Sprache des restlichen Systems angeglichen. Nur Bottom-Margin gesetzt (kein Top-Margin) - Seiten,
   die zusaetzlichen Abstand darueber brauchen, setzen das bereits explizit selbst per
   .mt-*-Utility (siehe z.B. mein_konto.php "h4 class=mt-20"), analog zum Rest des Spacing-Systems. */
h1, h2, h3, h4 {
    color: var(--ink);
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 10px;
}
h1 { font-size: 24px; margin-bottom: 20px; }
h2 { font-size: 19px; margin-bottom: 15px; }
h3 { font-size: 16px; }
h4 { font-size: 14px; }
body {
    font-family: -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    margin: 0;
    background: var(--paper);
    color: var(--ink);
}
.d-flex { display: flex; }
.d-inline { display: inline; }
.ml-10 { margin-left: 10px; }
.flex-1 { flex: 1; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-10 { gap: 10px; }
.gap-20 { gap: 20px; }
.mt-0 { margin-top: 0; }
.mt-10 { margin-top: 10px; }
.mt-15 { margin-top: 15px; }
.mt-20 { margin-top: 20px; }
.mb-0 { margin-bottom: 0; }
.mb-10 { margin-bottom: 10px; }
.mb-20 { margin-bottom: 20px; }
.text-muted { color: #5a6570; }
.text-danger { color: var(--danger); }
.fs-13 { font-size: 13px; }
.fs-18 { font-size: 18px; }
.fw-bold { font-weight: 600; }
.hidden-offscreen { position: absolute; left: -9999px; top: -9999px; }
/* 2026-08-27, Design-System-Audit: ersetzen zwei einmalige style=""-Attribute
   (admin/sync_status.php, admin/ruecksendungen.php), die die CSP-Konvention aus
   Abschnitt 8.1 verletzt hatten. */
.pl-24 { padding-left: 24px; }
.w-60 { width: 60px; }

/* Kopfleiste + Sidebar sind beide position:fixed (2026-07-11, Vorbild FF Abrechnung) - sonst
   entsteht beim Scrollen eine Luecke, sobald die Kopfleiste aus dem normalen Fluss verschwindet,
   waehrend die Sidebar bereits fixiert ist. HEADER_HOEHE (49px) ist an mehreren Stellen fest
   verdrahtet (hier + includes/layout_head.php fuer den Banner-Offset) statt einer CSS-Variable,
   da der Banner-Offset ohnehin serverseitig in PHP berechnet wird. */
.app-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 49px;
    background: var(--navy);
    color: #fff;
    padding: 0 24px;
    display: flex;
    align-items: center;
    z-index: 1000;
}
.app-header a { color: #fff; text-decoration: none; }
.app-header .version-tag { opacity: .6; }
.app-header > div { width: 100%; }

.container { max-width: 1200px; margin: 0 auto; padding: 24px; }

/* Sidebar-Navigation (rollenbasiert, siehe includes/nav.php) - dunkles Sidebar-Farbschema
   angeglichen an das FF-Abrechnung-Projekt (2026-07-11), inkl. Emoji-Icons pro Menüpunkt. Die
   dynamischen Auftragsart-Badge-Farben aus MFR (auftragsart_style_block() in ui_helpers.php)
   bleiben davon unberührt - sie kommen aus einer eigenen, spaeter geladenen <style>-Regel. */
.app-body { padding-top: 49px; }
.sidebar {
    position: fixed;
    top: 49px; left: 0;
    width: 230px;
    height: calc(100vh - 49px);
    overflow-y: auto;
    background: linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%);
    padding: 20px 0;
    z-index: 950;
}
.sidebar-section { margin-bottom: 24px; }
.sidebar-section-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #7f8c8d;
    padding: 0 20px;
    margin-bottom: 8px;
}
.sidebar-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 20px;
    color: #abd1c6;
    text-decoration: none;
    font-size: 14px;
    border-left: 3px solid transparent;
}
.sidebar-link:hover { background: rgba(255,255,255,0.06); color: #fff; }
.sidebar-link--aktiv {
    background: rgba(0, 159, 212, 0.16);
    color: #fff;
    font-weight: 600;
    border-left-color: var(--cyan);
}
.sidebar-link .badge { padding: 1px 8px; }
/* Badges auf dunklem Sidebar-/Kopfleisten-Grund brauchen einen eigenen, blickdichten Chip-Stil -
   die neuen Pastell-Badges (siehe .badge-warn weiter unten) waeren auf Navy kaum lesbar. Betrifft
   praktisch nur .badge-warn (Sidebar-Zaehler + Benachrichtigungs-Badge in der Kopfleiste). */
.sidebar-link .badge-warn,
.app-header .badge-warn {
    background: var(--warn);
    color: #241a00;
}
.sidebar-footer {
    margin-top: 8px;
    padding: 12px 20px 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    gap: 12px;
}
.sidebar-footer-link { font-size: 11px; color: #7f8c8d; text-decoration: none; }
.sidebar-footer-link:hover { color: #abd1c6; text-decoration: underline; }
.main-content { margin-left: 230px; min-width: 0; }

/* Mobile-Menü (Hamburger-Toggle + abdunkelnder Hintergrund) - ausgeblendet auf Desktop, siehe
   @media-Block unten. JS-Verhalten in assets/js/interactions.js. */
.mobile-menu-toggle {
    display: none;
    position: fixed;
    top: 5px; left: 10px;
    z-index: 1100;
    background: var(--navy);
    color: #fff;
    border: 0;
    width: 38px; height: 38px;
    border-radius: 6px;
    font-size: 18px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
}
.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 900;
}
.sidebar-backdrop.open { display: block; }

/* Kompakte mobile Kopfleiste (2026-07-11): nur Glocke + Profil-Icon, Seitentitel/"Abmelden"-Text
   ausgeblendet - der Hamburger-Button deckt den Menuezugriff bereits ab. */
@media (max-width: 768px) {
    .mobile-menu-toggle { display: flex; }
    .app-header-title, .app-header-logout, .header-label { display: none; }
    .app-header > div { justify-content: flex-end; }
    .app-header .gap-20 { gap: 12px; }
    .sidebar { left: -260px; transition: left 0.25s ease; }
    .sidebar.open { left: 0; }
    .main-content { margin-left: 0; }

    /* Filter-/Suchformulare und Button-Reihen (d-flex ohne festes Spaltenraster) brechen sonst
       auf schmalen Bildschirmen aus dem Layout aus bzw. quetschen Dropdowns/Suchfelder in eine
       Zeile - jetzt stapeln sie sich stattdessen. */
    .container { padding: 16px; }
    .d-flex { flex-wrap: wrap; }
    .form-group { flex: 1 1 100%; }

    /* Tabellen bekommen ihren eigenen horizontalen Scrollbereich statt die ganze Seite in die
       Breite zu ziehen (Vorbild FF Abrechnung). */
    table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
}

.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    padding: 20px;
    box-shadow: var(--shadow);
    margin-bottom: 20px;
}

/* Zwei thematisch zusammengehoerige Karten nebeneinander statt gestapelt (2026-07-16,
   Nutzerwunsch: admin/auftrag_detail.php hat sehr viele Karten untereinander) - eigene,
   groessere Breakpoint-Schwelle als der allgemeine 768px-Mobile-Umbruch, da zwei Spalten mit
   Formularen/Buttons bereits im Tablet-Bereich (<900px) zu eng werden. */
.card-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
/* min-width:0 ist noetig, da Grid-Spalten sonst am intrinsischen Mindestinhalt (z.B. eine nicht
   umbrechende Button-Reihe bei Terminen/Dokumenten) aufgehen und die 1fr-Aufteilung trotz
   gleicher Gewichtung ungleich ausfaellt - bekannter CSS-Grid-Stolperstein. */
.card-row .card { margin-bottom: 0; min-width: 0; }
/* Formularreihen (z.B. Start/Ende/Notiz bei Termine, Text+Button bei Sendungsverfolgung) sind
   fuer volle Kartenbreite gebaut und haben nur unterhalb 768px eigene Umbruch-Regeln (siehe
   @media weiter unten) - in einer .card-row ist die Karte aber schon bei jeder Bildschirmbreite
   nur halb so breit, sonst quetschen sich die Felder unlesbar zusammen. */
.card-row .card .d-flex { flex-wrap: wrap; }
.card-row .card .form-group { flex: 1 1 140px; }
/* Tabellen (z.B. Dokumente/Termine im Mandantenbereich) sind wie die Formularreihen fuer volle
   Kartenbreite gebaut und haben nur unterhalb 768px einen eigenen Scrollbereich (siehe
   @media weiter unten) - in einer .card-row braucht das dieselbe Behandlung, unabhaengig von der
   Bildschirmbreite. */
.card-row .card table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
@media (max-width: 900px) {
    .card-row { grid-template-columns: 1fr; }
}

.kpi-box { border-left: 4px solid #999; padding: 12px 16px; background: var(--card); border-radius: 4px; }
.kpi-box--info { border-left-color: var(--cyan); }
.kpi-box--warn { border-left-color: var(--warn); }
.kpi-box--danger { border-left-color: var(--danger); }
.kpi-box--ok { border-left-color: var(--ok); }

/* Badges (2026-07-16, Nutzerwunsch): die Basisklasse bleibt bewusst solide + weisser Text - das
   ist exakt, was die dynamischen Auftragsart-Badges aus MFR (badge-art-*, ausschliesslich per
   Tag-Id generiert, siehe includes/ui_helpers.php::auftragsart_style_block()) brauchen, deren
   Farbe live aus MFR kommt und hier NICHT angefasst wird. Die benannten Status-Badges darunter
   (warn/version/offen/bearbeitung/geplant/danger) bekommen dagegen den neuen, dezenteren
   Pastell-Stil - beide Familien teilen sich .badge, kollidieren aber nie auf demselben Element. */
.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    color: #fff;
    /* 2026-07-18 gefunden: ohne nowrap brach der Text innerhalb der Pille um (z.B. "Austausch vor
       Ort"), sobald mehrere Badges in einer schmalen Tabellenzelle (Auftragsart + PRIO +
       Ruecksendung) knapp wurden - die Pille selbst soll bei Platzmangel als Ganzes umbrechen,
       nicht ihr Text. */
    white-space: nowrap;
}
.badge-warn { background: var(--warn-soft); color: #8a6108; }
.badge-version { background: var(--ok-soft); color: #167a42; }
.badge-offen { background: #eef0f6; color: var(--muted); }
.badge-bearbeitung { background: var(--cyan-soft); color: #0678a3; }
.badge-geplant { background: var(--plan-soft); color: var(--plan); }
.badge-danger { background: var(--danger-soft); color: #a8332d; }
.badge-prio { background: var(--danger); color: #fff; font-weight: 700; letter-spacing: 0.5px; }
.badge-ruecksendung { background: var(--cyan-soft); color: #0678a3; }

/* Einklappbare Vorlagen-/Benachrichtigungstyp-Karten (2026-08-22, admin/email_vorlagen.php) - native
   <details><summary> statt eigenem JS, Pfeil per CSS-Pseudoelement statt Browser-Standardmarker,
   damit die Kopfzeile ueber die volle Kartenbreite klickbar wirkt statt wie ein einzelner Button. */
.vorlage-karte summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-weight: 600;
}
.vorlage-karte summary::-webkit-details-marker { display: none; }
.vorlage-karte summary::before {
    content: '▸';
    display: inline-block;
    color: var(--muted);
    transition: transform 0.15s;
}
.vorlage-karte[open] summary::before { transform: rotate(90deg); }
.vorlage-karte .vorlage-inhalt { margin-top: 15px; }
.vorlage-meta { font-size: 13px; color: var(--muted); margin: 2px 0; }
.vorlage-variante { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 15px; }
.vorlage-variante:first-child { border-top: none; padding-top: 0; margin-top: 10px; }

.btn {
    display: inline-block;
    padding: 8px 16px;
    border-radius: var(--radius-control);
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 14px;
    text-decoration: none;
    transition: filter 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.btn-primary { background: var(--cyan); color: #fff; }
.btn-primary:hover { filter: brightness(1.06); }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-secondary:hover { border-color: var(--cyan); color: var(--cyan); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { filter: brightness(1.08); }
/* 2026-08-27, Design-System-Audit: bisher fehlender Zustand - noch von keinem JS genutzt (aktuell
   verhindert kein Formular Doppel-Submits clientseitig), aber vorsorglich vorhanden, sobald ein
   Button per JS deaktiviert wird (z.B. waehrend einer MFR-Aktion laeuft). .btn-loading ist ein
   optionaler Marker fuer denselben Fall mit Wartetext/-icon statt echtem disabled-Attribut. */
.btn:disabled,
.btn.btn-loading {
    opacity: .6;
    cursor: not-allowed;
    filter: none;
}
.btn-secondary:disabled:hover,
.btn-secondary.btn-loading:hover { border-color: var(--line); color: var(--ink); }

/* PDF-Vorschau-Modal (2026-07-14, Vorbild FF Abrechnung) - siehe includes/layout_foot.php fuer
   das Markup und assets/js/interactions.js fuer das Oeffnen/Schliessen. */
.dokument-vorschau-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.dokument-vorschau-overlay[hidden] { display: none; }
.dokument-vorschau-box {
    background: #fff;
    width: 92vw;
    height: 90vh;
    max-width: 1100px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.dokument-vorschau-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid #e0e0e0;
    font-weight: 600;
}
.dokument-vorschau-schliessen {
    background: none;
    border: none;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    color: #5a6570;
}
.dokument-vorschau-box iframe {
    flex: 1;
    border: none;
    width: 100%;
}

@media (max-width: 768px) {
    .dokument-vorschau-box { width: 100vw; height: 100vh; border-radius: 0; }
}

/* Session-Timeout-Countdown + Warnfenster (2026-07-16, Nutzerwunsch) - Markup in includes/nav.php
   (Countdown) und includes/layout_foot.php (Warnfenster), Logik in assets/js/interactions.js. */
.session-timer {
    margin-top: 4px;
    padding: 0 20px 12px;
    font-size: 11px;
    color: #7f8c8d;
}
.session-timer--warn { color: #ffb300; font-weight: 600; }
.session-warn-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
}
.session-warn-overlay[hidden] { display: none; }
.session-warn-box {
    background: #fff;
    width: 92vw;
    max-width: 420px;
    border-radius: 6px;
    overflow: hidden;
}
.session-warn-header {
    padding: 12px 18px;
    background: var(--danger);
    color: #fff;
    font-weight: 600;
}
.session-warn-body { padding: 16px 18px; }
.session-warn-actions {
    display: flex;
    gap: 10px;
    padding: 0 18px 18px;
}
.mitteilung-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
}
.mitteilung-box {
    background: #fff;
    width: 92vw;
    max-width: 480px;
    max-height: 80vh;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.mitteilung-header {
    padding: 12px 18px;
    background: var(--plan);
    color: #fff;
    font-weight: 600;
}
.mitteilung-body { padding: 16px 18px; overflow-y: auto; }
.mitteilung-eintrag + .mitteilung-eintrag { margin-top: 14px; padding-top: 14px; border-top: 1px solid #eef0f6; }
.mitteilung-actions {
    display: flex;
    gap: 10px;
    padding: 0 18px 18px;
}

/* <details><summary>-Ausklapp-Trigger (Bearbeiten/Passwort setzen etc.) optisch wie einen
   .btn-secondary-Button behandeln, statt der nackten Browser-Standard-Aufklapp-Markierung -
   sonst wirkt eine Aktionsleiste aus echten Buttons + reinem Text sehr uneinheitlich. */
summary.btn-toggle {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 4px;
    background: #e0e0e0;
    color: #222;
    cursor: pointer;
    font-size: 13px;
    list-style: none;
}
summary.btn-toggle::-webkit-details-marker { display: none; }
summary.btn-toggle::marker { content: ''; }

.form-group { margin-bottom: 14px; }
.form-group label { display: block; margin-bottom: 4px; font-weight: 600; font-size: 13px; }
.form-group input, .form-group select, .form-group textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
}
/* Radio/Checkbox faelschlich mit width:100% (2026-07-16 gefunden, sichtbar geworden durch die
   schmaleren .card-row-Spalten) - width:100% liess sie riesig aufziehen statt normal klein zu
   bleiben, Label-Text rutschte darunter statt daneben. Betraf schon vor .card-row jede
   Radio/Checkbox-Verwendung in einem .form-group, war bei voller Kartenbreite nur weniger auffaellig. */
.form-group input[type="radio"], .form-group input[type="checkbox"] { width: auto; }

.alert { padding: 10px 14px; border-radius: 4px; margin-bottom: 16px; }
.alert-error { background: #fdecea; color: #611a15; border: 1px solid #f5c6cb; }
.alert-success { background: #eafaf1; color: #14532d; border: 1px solid #b7e4c7; }
.alert-warn { background: #fff8e1; color: #7a5c00; border: 1px solid #ffe082; }

table { width: 100%; border-collapse: collapse; }
/* font-size:13px als Basis (2026-07-16 gefunden): einzelne Spalten wie "Benutzername"/"Rolle"
   in admin/users.php haben nie das dort sonst manuell gestreute .fs-13 bekommen und rendern
   dadurch im Browser-Standard (16px) - direkt neben 13px-Spalten in derselben Zeile wirkte das
   inkonsistent gross. table td bekommt jetzt einheitlich 13px als Basis, .fs-13 auf einzelnen
   Zellen bleibt weiterhin funktional gleich (identischer Wert), macht aber keinen Unterschied
   mehr, falls es an einer Stelle vergessen wurde. */
table th, table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #eee; font-size: 13px; }
table th { font-size: 12px; text-transform: uppercase; color: #7f8c8d; }
/* 2026-08-27, Design-Feinschliff: bisher kein Hover auf Tabellenzeilen, obwohl Tabellen die
   Haupt-UI sind (Auftragslisten, Logs, Benutzerverwaltung) - hilft beim zeilenweisen Lesen dichter
   Listen. :has(td) statt tbody-Selektor, da im Projekt kein <thead>/<tbody> verwendet wird (der
   Browser wuerde sonst auch die Kopfzeile in ein implizites tbody wrappen und mit hervorheben). */
table tr:has(td):hover { background: var(--paper); }
.sort-link { color: inherit; text-decoration: none; }
.sort-link:hover { text-decoration: underline; }

/* Fuer Tabellen mit vielen Aktions-Buttons pro Zeile (z.B. Benutzerverwaltung: Loeschen/Als
   Nutzer anmelden/Bearbeiten/Passwort setzen) - die Buttons zwingen die Tabelle sonst breiter
   als die .card, was das gesamte Seitenlayout nach rechts aufreisst. Statt die Tabelle selbst
   umzubrechen, bekommt sie ihren eigenen Scrollbereich, die .card-Breite bleibt stabil. */
.table-scroll { overflow-x: auto; }

/* Sidebar-Banner-Pattern (Abschnitt 18) - stapelbar, Offset wird per dynamischem nonce-Style gesetzt */
.sidebar-banner {
    position: fixed;
    left: 0; right: 0;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    z-index: 1200;
}
/* Bewusst NICHT auf --warn/--danger-Tokens umgestellt: das sind sicherheitsrelevante
   Warnbanner (Staging-Umgebung / Nutzeransicht-Uebernahme), die maximale Signalwirkung
   brauchen - die neuen, etwas gedeckteren Feinschliff-Toene waeren hier ein ungewollter
   Kompromiss bei der Auffaelligkeit. */
.sidebar-banner--staging { background: #ffd600; color: #222; }
.sidebar-banner--impersonation { background: #c0392b; color: #fff; }
.sidebar-banner--wartung-aktiv { background: #c0392b; color: #fff; }
.sidebar-banner--wartung-aktiv a { color: #fff; text-decoration: underline; }
.sidebar-banner--wartung-ankuendigung { background: #ffd600; color: #222; }

/* PWA-Installationshinweis (2026-07-15, Nutzerwunsch) - eigenstaendiger Banner unten, nimmt
   bewusst NICHT am Stacking-Offset der oberen sidebar-banner teil (siehe includes/layout_head.php),
   da er unten sitzt und mit denen nie kollidiert. */
.pwa-install-banner {
    position: fixed;
    left: 16px; right: 16px; bottom: 16px;
    max-width: 480px;
    margin: 0 auto;
    background: #fff;
    color: #222;
    border-radius: 8px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.25);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 1300;
}
.pwa-install-banner__icon { width: 40px; height: 40px; border-radius: 8px; flex-shrink: 0; }
.pwa-install-banner__text { flex: 1; font-size: 13px; line-height: 1.4; }
.pwa-install-banner__actions { display: flex; flex-direction: column; gap: 6px; }
.pwa-install-banner__close { background: none; border: none; color: #7f8c8d; font-size: 18px; line-height: 1; cursor: pointer; padding: 4px; }
@media (max-width: 480px) {
    .pwa-install-banner { flex-wrap: wrap; }
}

/* Auth-Seiten (Login, Passwort vergessen/zuruecksetzen, Formularbreiten in mein_konto.php) */
.auth-page { display: flex; align-items: center; min-height: 70vh; }
.auth-card { max-width: 400px; margin: auto; width: 100%; }
.auth-card--narrow { max-width: 380px; }
.form-narrow { max-width: 400px; }
.form-narrow--tight { max-width: 300px; }

/* Analytics/Auswertungen (Trend-Chart ohne JS-Bibliothek, SECURITY_FEATURES.md Abschnitt 16) */
.kpi-row { flex-wrap: wrap; }
.kpi-box { min-width: 160px; }
.trend-chart { display: flex; align-items: flex-end; gap: 16px; height: 180px; margin-top: 10px; }
.trend-monat { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; flex: 1; height: 100%; }
.trend-balken { width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 2px; height: 150px; }
.trend-segment { width: 100%; min-height: 2px; }
.trend-monat-label { font-size: 12px; color: #7f8c8d; margin-top: 6px; text-align: center; }
.trend-legende { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.trend-legende-eintrag { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.trend-legende-farbe { width: 12px; height: 12px; border-radius: 2px; display: inline-block; }

/* Druckansicht (kein PDF-Generator ohne externe Bibliothek verfuegbar - der Nutzer druckt/speichert
   die Seite ueber den Browser-Dialog als PDF, siehe Analytics-Seiten) */
@media print {
    .app-header, .sidebar, .no-print { display: none !important; }
    .app-body { display: block !important; padding-top: 0 !important; }
    .main-content { margin: 0 !important; }
    body { background: #fff; }
}