:root {
    /* Maximale Inhaltsbreite aller Seiten (Kopfzeile, Inhalt, Fußleiste, Handymenü) - vorher
       fest 1100px. Auf 1440px vergrößert, damit die Positionstabellen der Belege Platz für die
       Spalte "MwSt." haben, ohne dass eine vorhandene Spalte schmaler wird (Arbeitsplätze mit
       mind. 1920 × 1080; auf kleineren Bildschirmen wird die Seite wie bisher einfach
       schmaler). */
    --seiten-breite: 1440px;
    --color-bg: #f5f6f8;
    --color-bg-alt: #fafbfc;
    --color-bg-alt2: #f3f4f6;
    --color-bg-hover: #e4e6ea;
    --color-surface: #ffffff;
    --color-surface-hover: #eef3f4;
    --color-border: #dde1e6;
    --color-border-light: #f0f1f3;
    /* Eigene Variable statt Wiederverwendung von --color-border: die Werkzeugleisten
       (.ap-actionbar) nutzen diesen Wert als FLÄCHIGEN Hintergrund, nicht als Randfarbe - im
       Kontrastmodus (siehe [data-contrast="hoch"] weiter unten) wird --color-border deutlich
       dunkler für besser sichtbare RÄNDER, was die Toolbar-Fläche sonst ungewollt mit
       verdunkelt hätte (siehe Nutzer-Feedback). Bewusst überall derselbe Wert wie
       --color-border in diesem Theme, damit sich am normalen Erscheinungsbild nichts ändert -
       nur der Kontrastmodus-Override weiter unten lässt diese Variable in Ruhe. */
    --color-toolbar-bg: #dde1e6;
    --color-primary: #1f4e5f;
    --color-primary-dark: #163a47;
    --color-primary-soft: rgba(31, 78, 95, 0.15);
    --color-on-primary: #ffffff;
    --color-on-primary-muted: #e7eef0;
    --color-primary-tint: #e7eef0;
    --color-text: #222831;
    --color-muted: #6b7280;
    --color-danger: #b3261e;
    --color-danger-bg: #fdecea;
    --color-success: #1a7a45;
    --color-success-bg: #e7f6ee;
    --color-success-text: #145c34;
    --color-warning: #8a5a00;
    --color-warning-bg: #fdecd2;
    /* Eigene, bewusst HELLERE und gelbstichigere Farbe für Entwurfs-Rechnungen ("in
       Bearbeitung", siehe .invoice-row.row-entwurf) statt der etwas kräftigeren, ins Orange
       gehenden --color-warning-bg - eigene Variable statt --color-warning-bg selbst
       aufzuhellen, damit andere Verwendungen (Warnhinweise, Wahlpositionen im
       Leistungsverzeichnis) unverändert bleiben. */
    --color-entwurf-bg: #fffbe0;
    --color-info: #1d4ed8;
    --color-info-bg: #dbeafe;
    --color-row-selected: #eaf2f5;
    --color-row-flash: #ffe28a;
    --color-input-bg: #ffffff;
    --color-checkbox-border: #a8adb5;
    --color-shadow-sm: rgba(0,0,0,.14);
    --color-shadow-lg: rgba(0,0,0,.25);
    --color-modal-backdrop: rgba(20, 26, 31, .45);
    --color-year-header-bg: #eef2f4;

    --tint-grau-bg: #eceef0; --tint-grau-fg: #5b6470;
    --tint-orange-bg: #fdecd2; --tint-orange-fg: #8a5a00;
    --tint-blau-bg: #dbeafe; --tint-blau-fg: #1d4ed8;
    --tint-gruen-bg: #d8f3e3; --tint-gruen-fg: #1a7a45;
    --tint-rot-hell-bg: #fde2e1; --tint-rot-hell-fg: #b3261e;
    --tint-rot-bg: #f8c9c7; --tint-rot-fg: #9c1c16;
    --tint-rot-dunkel-bg: #f2a6a3; --tint-rot-dunkel-fg: #6e0f0b;
    --tint-schwarz-bg: #dcdcdc; --tint-schwarz-fg: #1a1a1a;
    --tint-badge-bg: #e7f3ee; --tint-badge-fg: #1e6b4c;
    --tint-versendet-bg: #e3edf7; --tint-versendet-fg: #1d4ed8;

    --radius: 6px;
    /* Schriftart für Tabellen (siehe .ap-table weiter unten sowie die Options-Kachel
       "Schriftart Tabellen" auf Pages/Einstellungen/Optionen.cshtml) - eigene Variable statt
       fest im Element verdrahtet, damit sich die Wahl dort per data-table-font-Attribut auf
       <html> umschalten lässt (siehe [data-table-font="..."] weiter unten), nach demselben
       Muster wie data-theme für das Erscheinungsbild. Standardwert = dieselbe Schriftart wie
       der Rest der Anwendung (siehe body-Regel weiter unten). */
    --table-font-family: "Segoe UI", Roboto, Arial, sans-serif;

    /* Tabellendichte (siehe .ap-table th/td weiter unten sowie die Options-Kachel
       "Tabellendichte" auf Pages/Einstellungen/Darstellung.cshtml) - Standardwerte hier =
       bisheriges, fest verdrahtetes Verhalten. Umschaltbar per data-table-density="..." auf
       <html>, nach demselben Muster wie data-theme/data-table-font. */
    --table-header-padding-v: 9px;
    --table-cell-padding-v: 6px;
    --table-cell-padding-h: 10px;
    --table-row-min-height: 42px;

    color-scheme: light;
}

/* Kompaktere bzw. luftigere Tabellenzeilen - aktiviert über data-table-density="compact"/"wide"
   auf <html>. "normal" (Standardwert oben in :root) hat bewusst KEINE eigene Regel - das Attribut
   wird dafür beim Umschalten wieder entfernt (siehe Pages/Einstellungen/Darstellung.cshtml). */
[data-table-density="compact"] {
    --table-header-padding-v: 5px;
    --table-cell-padding-v: 3px;
    --table-row-min-height: 30px;
}
[data-table-density="wide"] {
    --table-header-padding-v: 13px;
    --table-cell-padding-v: 10px;
    --table-row-min-height: 54px;
}

/* Alternative Tabellen-Schriftarten (siehe --table-font-family oben) - aktiviert über
   data-table-font="..." auf <html>, per JS in Pages/Einstellungen/Optionen.cshtml gesetzt und
   in localStorage gemerkt (siehe "faktura-table-font", analog zu "faktura-theme"). */
[data-table-font="serif"] { --table-font-family: Georgia, "Times New Roman", serif; }
[data-table-font="mono"] { --table-font-family: "Consolas", "Courier New", monospace; }

/* Dunkles Design - wird über data-theme="dark" auf <html> aktiviert (siehe _Layout.cshtml).
   Überschreibt ausschließlich dieselben Variablen von oben; der gesamte Rest der Datei
   verwendet ausnahmslos diese Variablen statt fester Farbwerte, damit der Umschalter
   wirklich überall greift (Tabellen, Badges, Modals, Formulare, Buttons, ...). */
[data-theme="dark"] {
    --color-bg: #14181c;
    --color-bg-alt: #1c2228;
    --color-bg-alt2: #1a2025;
    --color-bg-hover: #263039;
    --color-surface: #1b2126;
    --color-surface-hover: #232b32;
    --color-border: #313a42;
    --color-border-light: #262e35;
    --color-toolbar-bg: #313a42;
    --color-primary: #4a9bbc;
    --color-primary-dark: #7cc0dc;
    --color-primary-soft: rgba(74, 155, 188, 0.25);
    --color-on-primary: #0e1418;
    --color-on-primary-muted: #cfe3ea;
    --color-primary-tint: #22323a;
    --color-text: #e7ebee;
    --color-muted: #97a2ac;
    --color-danger: #ff6b60;
    --color-danger-bg: rgba(255, 107, 96, 0.16);
    --color-success: #4ade9b;
    --color-success-bg: rgba(74, 222, 155, 0.15);
    --color-success-text: #7ef0bb;
    --color-warning: #f0b429;
    --color-warning-bg: rgba(240, 180, 41, 0.18);
    --color-entwurf-bg: rgba(240, 210, 41, 0.13);
    --color-info: #6fa8ff;
    --color-info-bg: rgba(111, 168, 255, 0.18);
    --color-row-selected: #22343f;
    --color-row-flash: #6b5717;
    --color-input-bg: #1c2329;
    --color-checkbox-border: #4a5560;
    --color-shadow-sm: rgba(0,0,0,.4);
    --color-shadow-lg: rgba(0,0,0,.55);
    --color-modal-backdrop: rgba(0, 0, 0, .6);
    --color-year-header-bg: #1d2933;

    --tint-grau-bg: #2b333a; --tint-grau-fg: #c3ccd4;
    --tint-orange-bg: rgba(240, 180, 41, 0.18); --tint-orange-fg: #f0b429;
    --tint-blau-bg: rgba(111, 168, 255, 0.18); --tint-blau-fg: #6fa8ff;
    --tint-gruen-bg: rgba(74, 222, 155, 0.18); --tint-gruen-fg: #4ade9b;
    --tint-rot-hell-bg: rgba(255, 107, 96, 0.16); --tint-rot-hell-fg: #ff8a80;
    --tint-rot-bg: rgba(255, 107, 96, 0.28); --tint-rot-fg: #ff9d94;
    --tint-rot-dunkel-bg: rgba(255, 80, 68, 0.4); --tint-rot-dunkel-fg: #ffd2cd;
    --tint-schwarz-bg: #3a3f45; --tint-schwarz-fg: #d8dde2;
    --tint-badge-bg: rgba(74, 222, 155, 0.15); --tint-badge-fg: #4ade9b;
    --tint-versendet-bg: rgba(111, 168, 255, 0.18); --tint-versendet-fg: #6fa8ff;
    color-scheme: dark;
}

/* "Mittleres" Design - gedämpftes Grau als dritte Option neben hell/dunkel (siehe Options-
   Kachel "Erscheinungsbild"), aktiviert über data-theme="medium" auf <html>. Bewusst kein
   reines Zwischen-Interpolieren der hellen/dunklen Werte, sondern eine eigenständig
   abgestimmte, ruhigere Grau-Palette (ähnlich einem "Dim"-Modus, wie man ihn von manchen
   Apps kennt) - für Anwender gedacht, denen reines Weiß zu grell, reines Dunkel aber zu
   kontrastarm/"nächtlich" ist. */
[data-theme="medium"] {
    --color-bg: #d7dce0;
    --color-bg-alt: #e2e5e8;
    --color-bg-alt2: #dde1e4;
    --color-bg-hover: #c7ced4;
    --color-surface: #eceeef;
    --color-surface-hover: #dfe4e6;
    --color-border: #b3bcc2;
    --color-border-light: #c5ccd1;
    --color-toolbar-bg: #b3bcc2;
    --color-primary: #1f4e5f;
    --color-primary-dark: #163a47;
    --color-primary-soft: rgba(31, 78, 95, 0.18);
    --color-on-primary: #ffffff;
    --color-on-primary-muted: #e7eef0;
    --color-primary-tint: #c7d5d9;
    --color-text: #23282d;
    --color-muted: #5a6169;
    --color-danger: #a3261e;
    --color-danger-bg: #ecd2cf;
    --color-success: #186b3d;
    --color-success-bg: #cfe3d7;
    --color-success-text: #124f2c;
    --color-warning: #7a4d00;
    --color-warning-bg: #e6d5b3;
    --color-entwurf-bg: #f3ecc9;
    --color-info: #1642b5;
    --color-info-bg: #c6d6f2;
    --color-row-selected: #c9d7da;
    --color-row-flash: #e2c05f;
    --color-input-bg: #f2f3f4;
    --color-checkbox-border: #8f9aa2;
    --color-shadow-sm: rgba(0,0,0,.18);
    --color-shadow-lg: rgba(0,0,0,.3);
    --color-modal-backdrop: rgba(20, 26, 31, .5);
    --color-year-header-bg: #d1d8dc;

    --tint-grau-bg: #cbd1d6; --tint-grau-fg: #464e57;
    --tint-orange-bg: #e6d5b3; --tint-orange-fg: #6e4700;
    --tint-blau-bg: #c6d6f2; --tint-blau-fg: #163ea3;
    --tint-gruen-bg: #bfdccb; --tint-gruen-fg: #145f34;
    --tint-rot-hell-bg: #e9cdca; --tint-rot-hell-fg: #97211b;
    --tint-rot-bg: #dcaeab; --tint-rot-fg: #7d1611;
    --tint-rot-dunkel-bg: #cf908d; --tint-rot-dunkel-fg: #520b09;
    --tint-schwarz-bg: #c3c8cd; --tint-schwarz-fg: #1a1a1a;
    --tint-badge-bg: #cce4d8; --tint-badge-fg: #145536;
    --tint-versendet-bg: #c6d6f2; --tint-versendet-fg: #163ea3;
    color-scheme: light;
}

/* Kontrastmodus (siehe Options-Kachel "Kontrast" auf Pages/Einstellungen/Darstellung.cshtml) -
   aktiviert über data-contrast="hoch" auf <html>, wirkt ZUSÄTZLICH zum gewählten
   Erscheinungsbild (daher drei separate Regeln statt einer einzigen: die Basiswerte für
   Rahmen/gedämpften Text unterscheiden sich stark zwischen hell/mittel/dunkel, ein einzelner
   fixer Kontrast-Overrride hätte in mindestens einem Theme selbst wieder zu kontrastarm
   gewirkt). Verstärkt Rahmenfarben und gedämpften Text (Labels, Hinweistexte, Tabellenköpfe)
   spürbar sichtbar, ohne die übrige Farbgestaltung (Primärfarbe, Status-Farben) anzutasten,
   plus einen deutlich sichtbareren Fokus-Rahmen für Tastaturbedienung. */
[data-contrast="hoch"] {
    --color-muted: #33383f;
    --color-border: #8a929b;
    --color-border-light: #b0b7bf;
}
[data-theme="dark"][data-contrast="hoch"] {
    --color-muted: #c7d0d8;
    --color-border: #5c6873;
    --color-border-light: #46525d;
}
[data-theme="medium"][data-contrast="hoch"] {
    --color-muted: #2b3036;
    --color-border: #7c868f;
    --color-border-light: #97a1aa;
}
[data-contrast="hoch"] :focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 14px;
}

/* Fixierter Seitenkopf (Nutzer-Feedback: bei längeren Listen scrollte die Toolbar nach oben
   aus dem sichtbaren Bereich und war nur nach Zurückscrollen erreichbar - in einer zweiten
   Rückmeldung zusätzlich, dass dabei auch das App-Logo verschwand). Vier Ebenen werden
   übereinander "eingefroren", sobald über sie hinweggescrollt wird: die globale Kopfzeile
   (.topbar) - darunter die Logo-Zeile (.app-logo-bar, siehe _Layout.cshtml) - darunter der
   seitenspezifische Titel/Zusatzschalter-Bereich (.list-header auf Listenseiten, siehe z. B.
   Invoices/Index.cshtml, ODER .page-header mit "Zurück"-Link auf Bearbeitungsseiten - beide
   nutzen denselben top-Offset und schließen sich gegenseitig aus) - ganz unten die
   Werkzeugleiste (.ap-actionbar). Die top-Offsets werden dafür NICHT fest verdrahtet, sondern
   per JS aus den tatsächlich gerenderten Höhen ermittelt (siehe _Layout.cshtml, Funktion
   aktualisiereStickyOffsets) - die Kopfzeile kann sich je nach Fensterbreite (nav-Umbruch) und
   die Seitenköpfe je nach Seite (mit/ohne zusätzliche Schalter, mit/ohne TempData-Banner)
   unterschiedlich hoch darstellen. --topbar-h/--logobar-h/--listheader-h tragen dokumentierte
   Fallback-Werte, falls JS deaktiviert ist - dann bleibt die Positionierung zumindest für den
   Normalfall korrekt. */
.topbar {
    background: var(--color-primary);
    color: var(--color-on-primary);
    position: sticky;
    top: 0;
    z-index: 210;
}

.list-header {
    position: sticky;
    top: calc(var(--topbar-h, 54px) + var(--logobar-h, 54px));
    z-index: 90;
    background: var(--color-bg);
    padding-top: 4px;
    padding-bottom: 4px;
}

/* Gemeinsamer Sticky-Container für Tagesnavigation UND Werkzeugleiste (Geprüft/Bearbeiten/
   Löschen) - beide bleiben zusammen als EIN Block beim Scrollen sichtbar, direkt unterhalb des
   (ebenfalls fixierten) Seitenkopfs (siehe Kommentare zu --topbar-h/--logobar-h/--listheader-h
   weiter oben). Ursprünglich war nur die Datumskarte selbst sticky - die darunter im normalen
   Fluss stehende Werkzeugleiste verschwand dadurch beim Scrollen trotzdem (Nutzer-Feedback).
   EIN gemeinsamer Wrapper statt zwei einzeln positionierter Sticky-Elemente, da für Letzteres
   die exakte (variable) Höhe der Datumskarte bekannt sein müsste, um die Werkzeugleiste korrekt
   direkt darunter statt dahinter einrasten zu lassen. */
.zeit-sticky-kopfbereich {
    position: sticky;
    top: calc(var(--topbar-h, 54px) + var(--logobar-h, 54px) + var(--listheader-h, 64px));
    z-index: 85;
    background: var(--color-bg);
}
.zeit-datumsnav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
}
.zeit-datumsnav > .btn:first-child { justify-self: start; }
.zeit-datumsnav > .btn:last-child { justify-self: end; }
.zeit-datumsnav-datum { font-size: 16px; text-align: center; }

/* Fußzeilen-Variante der Tagesgesamtsumme (Nutzer-Vorgabe: "Summenzeile am Seitenfuß") - liegt
   fix am unteren Bildschirmrand statt oben bei Tagesnavigation/Werkzeugleiste. Nutzt die
   bereits vorhandene .ap-sticky-footer-Fußleiste (siehe dort), die sonst für Speichern/
   Abbrechen-Schalter in Bearbeitungsformularen dient - hier stattdessen mit reiner Text-/
   Zahlen-Anzeige befüllt, kein eigenes Layout nötig, da deren .ap-sticky-footer-inner bereits
   als flexibel umbrechende Reihe mit Randausgleich ausgelegt ist. */
.zeit-tagessumme-footer { font-size: 14px; }
.zeit-tagessumme-footer .num strong { font-variant-numeric: tabular-nums; }

.topbar-inner {
    max-width: var(--seiten-breite);
    margin: 0 auto;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.brand {
    color: var(--color-on-primary);
    font-weight: 600;
    font-size: 18px;
    text-decoration: none;
}

.topbar nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.topbar nav a {
    color: var(--color-on-primary-muted);
    text-decoration: none;
    margin-left: 20px;
    font-size: 14px;
}

.topbar nav a:hover { text-decoration: underline; }

/* Design-Umschalter (hell/dunkel) - rechts in der Kopfzeile, wirkt sofort und wird pro
   Browser gemerkt (localStorage), siehe Skript in _Layout.cshtml. */
.theme-toggle {
    margin-left: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.35);
    background: rgba(255,255,255,0.08);
    color: var(--color-on-primary);
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    flex: 0 0 auto;
}
.theme-toggle:hover { background: rgba(255,255,255,0.18); }

/* Wrapper für mehrere Icon-Schalter direkt in der Kopfzeile (aktuell Telefonate + Dokumente +
   Kalender + Posteingang, siehe _Layout.cshtml) - WICHTIG: .topbar-inner ist ein Flex-Container mit
   justify-content: space-between (siehe dort), der allen direkten Kindern automatisch
   möglichst viel Platz dazwischen gibt. Ohne diesen gemeinsamen Wrapper wären beide Icons
   zwei eigenständige Flex-Kinder und der Abstand zwischen ihnen ließe sich NICHT über
   margin/gap an den Icons selbst steuern (space-between dominiert das) - der Wrapper macht
   aus beiden EIN Flex-Kind, innerhalb dessen wir den Abstand selbst festlegen. */
.topbar-icons {
    display: flex;
    align-items: center;
    gap: 8px;
}
.topbar-icons .theme-toggle { margin-left: 0; }

/* Angemeldeter Benutzer + Abmelden-Schalter - eigene, zentrierte Zeile OBERHALB der
   eigentlichen Navigation (siehe Program.cs für die Cookie-Authentifizierung und Pages/Account
   für Login/Aktivierung). Bewusst als eigene Zeile statt in die Navigationszeile gepackt - dort
   sorgte das bei schmaleren Fenstern zusammen mit den Navigationspunkten regelmäßig für einen
   unschönen Zeilenumbruch mitten in der Navigation (Nutzer-Feedback). Nur sichtbar, wenn
   tatsächlich jemand angemeldet ist (auf den öffentlichen Seiten Login/Aktivieren also nicht). */
.topbar-user-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 5px 20px 8px;
    background: rgba(0,0,0,0.12);
    border-bottom: 1px solid rgba(255,255,255,0.12);
}
.topbar-user {
    color: var(--color-on-primary-muted);
    font-size: 12.5px;
    white-space: nowrap;
}
.topbar-user strong { color: var(--color-on-primary); font-weight: 600; }
.topbar-logout-form { display: inline; margin: 0; }
.topbar-logout {
    background: none;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 4px;
    color: var(--color-on-primary-muted);
    font-size: 12.5px;
    padding: 3px 9px;
    cursor: pointer;
}
.topbar-logout:hover { background: rgba(255,255,255,0.18); color: var(--color-on-primary); }

/* Login-/Aktivierungsseite (Pages/Account) - bewusst OHNE das normale _Layout.cshtml
   (Layout = null in der jeweiligen .cshtml), da vor der Anmeldung noch keine funktionierende
   Navigation sinnvoll ist (jede andere Seite ist ohnehin durch [Authorize] gesperrt und würde
   nur sofort wieder hierher zurückleiten) - stattdessen eine eigene, schlichte, zentrierte
   Karte auf ganzer Seitenhöhe. */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg);
    padding: 20px;
}
.auth-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 4px 18px var(--color-shadow-sm);
    padding: 32px 30px;
    width: 100%;
    max-width: 380px;
}
.auth-card h1 { text-align: center; margin: 4px 0 20px; font-size: 22px; }
.auth-logo { display: block; height: 44px; width: auto; margin: 0 auto 18px; }

/* Papierkorb-Schalter links neben "Start" - nutzt bewusst dieselbe Kreis-Optik wie
   .theme-toggle rechts (Design-Umschalter), nur gespiegelt platziert: kein eigener
   Außenabstand nach links (steht als erstes Element im Nav-Container), der 20px-Abstand zu
   "Start" ergibt sich automatisch aus dessen eigenem margin-left (siehe ".topbar nav a"
   oben) - exakt das Gegenstück zum margin-left, mit dem .theme-toggle rechts seinen Abstand
   zum vorherigen Element bekommt. */
/* Papierkorb-Schalter links neben "Start" - nutzt bewusst dieselbe Kreis-Optik wie
   .theme-toggle rechts (Design-Umschalter), nur gespiegelt platziert UND farbig (rot) statt
   neutral, damit er als eigenständige Aktion (nicht nur als Info-Link) auffällt. Der Abstand
   zu "Start" ist größer als der Standard-Nav-Abstand (20px), damit der Schalter optisch klar
   als eigenes Element vor der Navigation wahrgenommen wird statt als Teil davon. */
.nav-icon-toggle {
    margin-left: 0;
    margin-right: 32px;
    background: #d64545;
    border-color: #d64545;
    /* Rein visuelle Verschiebung (statt negativem margin-left): position:relative nimmt das
       Element nicht aus dem normalen Flex-Breitenberechnung heraus - ein negativer margin an
       dieser Stelle hätte (wie sich in der Praxis zeigte) die von nav beanspruchte Breite
       verkleinert und dadurch über justify-content:space-between in .topbar-inner den
       Design-Umschalter rechts sichtbar mitverschoben. */
    position: relative;
    left: -6px;
}
.nav-icon-toggle:hover { background: #c23a3a; border-color: #c23a3a; }
.topbar nav a.nav-icon-toggle:hover { text-decoration: none; }

/* Pulldownmenü in der Kopfzeile, das die vier Beleg-Bereiche (Rechnungen/Angebote/
   Aufträge/Lieferscheine) zusammenfasst - spart Platz gegenüber vier einzelnen Links.
   Die Beschriftung wird serverseitig anhand der aktuellen URL gesetzt (siehe
   _Layout.cshtml) und zeigt daher immer korrekt an, in welchem Bereich man sich gerade
   befindet - auch nach einem Seiten-Neuladen oder direktem Aufruf per Link/Lesezeichen. */
.nav-dropdown {
    position: relative;
    display: inline-block;
    margin-left: 20px;
}
.nav-dropdown-toggle {
    background: none;
    border: none;
    color: var(--color-on-primary-muted);
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.nav-dropdown-toggle:hover { text-decoration: underline; }
.nav-dropdown-caret { font-size: 10px; }
.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 10px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 8px 22px var(--color-shadow-sm);
    min-width: 160px;
    /* Generelle Absicherung, unabhängig vom eigentlichen Auslöser eines konkreten Falls (siehe
       Kalender-Anzeige-Filter weiter unten, wo ein zu langer, nicht umbrechender Beschriftungs-
       text ein Dropdown auf einem schmalen Mobil-Bildschirm weit über den Bildschirmrand hinaus
       aufblähte) - ein absolut positioniertes Element ohne max-width wächst im Zweifel auf die
       Breite seines Inhalts, was bei jedem künftigen langen Text in irgendeinem Pulldown erneut
       passieren könnte. */
    max-width: calc(100vw - 32px);
    padding: 4px 0;
    z-index: 60;
}
.nav-dropdown-menu.open { display: block; }
.nav-dropdown-menu a {
    display: block;
    padding: 8px 14px;
    color: var(--color-text) !important;
    font-size: 13.5px;
    text-decoration: none !important;
    margin-left: 0 !important;
}
.nav-dropdown-menu a:hover { background: var(--color-bg-alt2); }
.nav-dropdown-menu a.active { color: var(--color-primary) !important; font-weight: 600; }

/* Noch nicht umgesetzte Pulldown-Einträge (z. B. "Projektdaten" -> Projektpläne,
   Kalkulationen, ...) - bewusst als nicht anklickbares <span> statt <a href="..."> gerendert,
   damit kein toter Link entsteht; Tooltip erklärt den Grund. */
.nav-dropdown-menu span.disabled {
    display: block;
    padding: 8px 14px;
    font-size: 13.5px;
    color: var(--color-muted);
    cursor: not-allowed;
    user-select: none;
}

/* Optischer Trenner zwischen zwei Gruppen von Einträgen innerhalb eines Pulldown-Menüs, z. B.
   zwischen den Datenpflege-Einträgen (Kunden, Leistungsverzeichnis) und den eher seltener
   benötigten Firmendaten im Stammdaten-Pulldown. */
.nav-dropdown-menu hr.nav-dropdown-separator {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 4px 0;
}

/* Trenner nur ZWISCHEN echten Einträgen: einen Trenner ganz am Anfang oder Ende eines Menüs
   sowie zwei direkt aufeinanderfolgende Trenner (wenn ein Block dazwischen leer bleibt)
   ausblenden - Absicherung für Menüs, deren Einträge bedingt gerendert werden. */
.nav-dropdown-menu > hr.nav-dropdown-separator:first-child,
.nav-dropdown-menu > hr.nav-dropdown-separator:last-child,
.nav-dropdown-menu > hr.nav-dropdown-separator + hr.nav-dropdown-separator {
    display: none;
}

/* Pulldown, in dem für den Anwender KEIN Eintrag erreichbar ist (Lizenz-Edition oder Rolle,
   siehe _Layout.cshtml) - bleibt sichtbar und aufklappbar (zeigt die grauen Einträge samt
   Tooltip), wirkt aber zurückgenommen. */
.nav-dropdown-toggle.nav-dropdown-toggle-inaktiv { opacity: 0.5; }

/* Kopfzeilen-Symbole (Papierkorb, Telefonate, Dokumente, Kalender, Posteingang), die für den
   Anwender nicht erreichbar sind - sichtbar, aber grau und nicht anklickbar. */
.theme-toggle.nav-symbol-inaktiv {
    opacity: 0.35;
    filter: grayscale(1);
    cursor: not-allowed;
}
.theme-toggle.nav-symbol-inaktiv:hover { background: rgba(255,255,255,0.08); }

.content {
    max-width: var(--seiten-breite);
    margin: 30px auto;
    padding: 0 20px 60px;
    position: relative;
}

/* App-Logo (IT7.Web) - fest in der rechten oberen Ecke des Inhaltsbereichs, auf jeder Seite
   an derselben Stelle (siehe _Layout.cshtml). Früher per position:absolute frei über dem
   Seiteninhalt platziert (mit passendem padding-top an .content als Platzhalter) - dadurch
   blieb das Logo aber unsichtbar, sobald bei einer längeren Liste über die jetzt fixierten
   Seitenkopf-/Toolbar-Ebenen hinweggescrollt wurde (Nutzer-Feedback). Jetzt stattdessen ein
   normales Flusselement in einer eigenen, ebenfalls sticky positionierten Zeile
   (.app-logo-bar) - reiht sich damit nahtlos in dieselbe gestapelte Fixierung ein wie
   .topbar/.list-header/.ap-actionbar (siehe deren "top: calc(...)"-Werte weiter unten sowie
   die Höhenmessung in _Layout.cshtml). */
.app-logo-bar {
    position: sticky;
    top: var(--topbar-h, 54px);
    z-index: 95;
    background: var(--color-bg);
    display: flex;
    justify-content: flex-end;
    padding: 6px 0 8px;
}

.app-logo { line-height: 0; }

.app-logo img {
    display: block;
    height: 40px;
    width: auto;
}

.footer {
    text-align: center;
    color: var(--color-muted);
    font-size: 12px;
    padding: 20px;
}

h1 { font-size: 22px; margin-bottom: 4px; }
h2 { font-size: 17px; margin-top: 30px; }
p.subtitle { color: var(--color-muted); margin-top: 0; }

/* Kopfzeile von Bearbeitungsseiten mit rechtsbündigem "Zurück"-Link zur jeweiligen Liste -
   einheitlich über alle Bearbeitungsdialoge der Anwendung hinweg (Rechnungen, Angebote,
   Aufträge, Lieferscheine, Kunden, Zahlungseingänge). Reiht sich als dritte Ebene in
   dieselbe gestapelte Fixierung ein wie .topbar/.app-logo-bar/.list-header (siehe deren
   ausführlichen Kommentar weiter oben) - vorher ein normales Flusselement, wodurch der
   "Zurück"-Link (im Unterschied zum stets sichtbaren App-Logo) beim Herunterscrollen
   verschwand und nur nach Zurückscrollen erreichbar war (Nutzer-Feedback). .page-header und
   .list-header schließen sich auf ein und derselben Seite gegenseitig aus (Bearbeiten- vs.
   Listenseite), weshalb dieselben --topbar-h/--logobar-h-Variablen ohne Kollision
   wiederverwendet werden können. */
.page-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    position: sticky;
    top: calc(var(--topbar-h, 54px) + var(--logobar-h, 54px));
    /* Höhe fließt (wie bei .list-header) in --listheader-h ein, siehe
       aktualisiereStickyOffsets in _Layout.cshtml - notwendig, damit z. B. .ap-actionbar
       auf Bearbeitungsseiten korrekt darunter statt dahinter einrastet. */
    z-index: 90;
    background: var(--color-bg);
    padding-top: 4px;
    padding-bottom: 4px;
}
.page-header h1 { margin-top: 0; margin-bottom: 4px; }
.page-header-back {
    flex-shrink: 0;
    color: var(--color-muted);
    text-decoration: none;
    font-size: 13.5px;
    white-space: nowrap;
}
.page-header-back:hover { color: var(--color-primary); text-decoration: underline; }

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

/* Auf-/zuklappbare Kartenabschnitte (details/summary) - nutzt dieselbe .card-Optik,
   funktioniert ganz ohne JavaScript und ist per Tastatur bedienbar. */
details.card {
    padding: 0;
}
details.card > summary {
    list-style: none;
    cursor: pointer;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
}
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary h2 { margin: 0; }
details.card > summary::after {
    content: "";
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    margin-left: 12px;
    border-right: 2px solid var(--color-muted);
    border-bottom: 2px solid var(--color-muted);
    transform: rotate(45deg);
    transition: transform 0.15s ease;
}
details.card[open] > summary::after {
    transform: rotate(-135deg);
}
details.card > summary:hover::after { border-color: var(--color-primary); }
details.card > .card-body {
    padding: 4px 20px 20px;
    border-top: 1px solid var(--color-border);
    padding-top: 16px;
}

.grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 20px;
}

.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid.cols-6 { grid-template-columns: repeat(6, 1fr); }
.grid.cols-1 {grid-template-columns: 1fr;}
.grid.cols-4.betrag-zeile {grid-template-columns: 1.4fr 0.7fr 1fr 1fr;}
@media (max-width: 900px) {
    .grid.cols-6 { grid-template-columns: repeat(3, 1fr); }
}

/* Auf schmalen Bildschirmen (Smartphone) reicht die Breite oft nicht für Seitenüberschrift
   und Logo nebeneinander - dort wird das Logo etwas kleiner und rutscht (dank position:
   static) vor den restlichen Seiteninhalt statt ihn zu überlagern. */
@media (max-width: 600px) {
    /* .app-logo ist seit der Umstellung auf .app-logo-bar (siehe dort) kein frei über dem
       Seiteninhalt schwebendes position:absolute-Element mehr, das auf schmalen Bildschirmen
       mit der Seitenüberschrift kollidieren könnte - daher genügt hier nur noch eine kleinere
       Logogröße, keine Positionsänderung mehr nötig. */
    .app-logo img { height: 28px; }
}

/* Rechnungsdaten-Zeile: Skonto braucht nur eine kurze Zahl, dafür braucht die Statusspalte
   mehr Platz (u. a. für den Hinweistext "Stornorechnung – kein Status" bei Storno-Belegen). */
.grid.cols-6.rechnungsdaten { grid-template-columns: 1fr 1fr 1fr 1fr 0.6fr 1.8fr; }
@media (max-width: 900px) {
    .grid.cols-6.rechnungsdaten { grid-template-columns: repeat(3, 1fr); }
}

.field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    /* Ohne dies erzwingt jedes <input>/<select> seine eigene intrinsische Mindestbreite und
       überstimmt damit ungleiche Grid-Spaltenverhältnisse (z. B. .rechnungsdaten) - Grid-Items
       haben per Spezifikation einen impliziten min-width:auto (= Inhaltsbreite statt 0). */
    min-width: 0;
}
.field label { font-size: 12.5px; color: var(--color-muted); }
.field input, .field select, .field textarea {
    padding: 7px 9px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 14px;
    font-family: inherit;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    background: var(--color-input-bg);
    color: var(--color-text);
}
/* Ohne diese Ausnahme würden Radiobuttons/Checkboxen innerhalb eines .field-Containers
   (z. B. die Moduswahl "Startseite zeigt" in den Firmendaten) von der obigen Regel auf volle
   Breite samt Rahmen/Innenabstand aufgebläht - sie sollen aber ihre native, kompakte Größe
   behalten. */
.field input[type="checkbox"], .field input[type="radio"] {
    width: auto;
    min-width: 0;
    padding: 0;
    border: none;
    background: transparent;
}
.field textarea { resize: vertical; min-height: 50px; }

/* Kleiner, unaufdringlicher Erläuterungstext direkt unter einem Formularfeld (z. B. bei der
   Eingangsrechnungs-Erfassung: Hinweis, dass bei "ZUGFeRD-PDF" automatisch nach eingebetteten
   Rechnungsdaten gesucht wird) - bewusst dezenter als das reguläre Label. */
.field-hint { font-size: 12px; color: var(--color-muted); margin: 2px 0 0; }

/* Eingangsrechnung bearbeiten: die rechte Spalte (Originaldokument-Kachel mit PDF-Vorschau)
   soll unten bündig mit der linken Formularspalte (3 gestapelte Karten) abschließen - die
   .grid-Standardausrichtung (align-items: stretch) sorgt bereits dafür, dass beide Spalten
   dieselbe Zeilenhöhe erhalten; hier wird diese Höhe nur noch bis zur PDF-Vorschau selbst
   "durchgereicht" (verschachtelte Flexbox statt fixer vh-Höhe wie beim Website-iframe der
   Startseite - siehe .start-frame-wrap - da hier die Höhe von der variablen Formularlänge
   links abhängt, nicht vom Viewport). */
.eingangsrechnung-pdf-spalte { display: flex; flex-direction: column; }
.eingangsrechnung-pdf-card { display: flex; flex-direction: column; flex: 1; }
.pdf-preview-wrap {
    flex: 1;
    min-height: 320px;
    margin-top: 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--color-surface);
    display: flex;
}
.pdf-preview-wrap iframe { flex: 1; width: 100%; border: 0; }

/* Drag&Drop-Overlay für den schnellen Eingangsrechnungs-Upload direkt aus der Liste heraus
   (Pages/Eingangsrechnungen/Index.cshtml) - liegt normalerweise unsichtbar über der gesamten
   Seite (position:fixed, pointer-events:none, damit die Liste darunter normal bedienbar
   bleibt) und wird per JS nur während eines laufenden Datei-Drags eingeblendet. */
.pdf-dropzone-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 200;
    pointer-events: none;
    background: var(--color-modal-backdrop);
    align-items: center;
    justify-content: center;
}
.pdf-dropzone-overlay.active { display: flex; }
.pdf-dropzone-message {
    pointer-events: none;
    background: var(--color-surface);
    border: 2px dashed var(--color-primary);
    border-radius: var(--radius);
    padding: 48px 64px;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-primary);
}
.pdf-dropzone-icon { font-size: 40px; margin-bottom: 10px; }

/* Rechtsbündige, auf Ziffern/Komma beschränkte Zahlenfelder im Leistungsverzeichnis-
   Bearbeitungsdialog (Schrittweite, Preise, Steuersatz, Aufschlag) - Eingabebeschränkung
   selbst erfolgt per JS (siehe Pages/Leistungsverzeichnis/Create.cshtml/Edit.cshtml), diese
   Klasse liefert nur die Ausrichtung. */
.lv-num { text-align: right; }
/* Der Verkaufspreis wird serverseitig aus Einkaufspreis/Sonstige Kosten/Aufschlag berechnet
   und ist daher readonly - dezent abgesetzt, damit sofort erkennbar ist, dass er nicht frei
   editierbar ist. */
.zahlenfeld[readonly] { background: var(--color-bg-hover); color: var(--color-muted); }

/* Live-Feedback bei ungültiger IBAN/BIC-Eingabe (siehe iban-bic-check.js-Inline-Logik) */
input.field-invalid { border-color: var(--color-danger) !important; background: var(--color-danger-bg); }
.field-error-msg { display: none; font-size: 12px; color: var(--color-danger); margin-top: 2px; }
.field-error-msg.visible { display: block; }

/* ===== Positionstabelle & Toolbar im Stil von ArtikelListe.razor (ap-*-Klassen) ===== */

.ap-actionbar {
    display: flex;
    align-items: center;
    /* War 2px - deutlich enger als der Abstand rund um einen Trennstrich (dort zusätzlich
       8px Marge je Seite, siehe .ap-actionbar-divider), wodurch der Abstand zwischen
       Schaltern INNERHALB einer Gruppe sichtbar enger wirkte als zwischen zwei Gruppen -
       genau das gemeldete "uneinheitlich". Jetzt auf denselben Wert wie
       .ap-actionbar-group gebracht (siehe dort), sodass beide Fälle einheitlich wirken -
       der verbleibende, kaum wahrnehmbare Unterschied ist nur noch die reine Strichbreite
       des Trennstrichs selbst. */
    gap: 6px;
    padding: 6px 8px;
    background: var(--color-toolbar-bg);
    border: 1px solid var(--color-checkbox-border);
    border-bottom: none;
    border-radius: var(--radius) var(--radius) 0 0;
    flex-wrap: wrap;
    /* Siehe Kommentar bei .topbar/.app-logo-bar/.list-header weiter oben - stapelt sich direkt
       unterhalb der (ebenfalls fixierten) Logo-Zeile und des Seitenkopfs. Das Suchfeld (siehe
       .ap-search) sitzt inzwischen direkt IM Seitenkopf (.list-header) statt in einer eigenen
       Zeile darunter - dessen Höhe fließt dadurch automatisch mit in --listheader-h ein, eine
       zusätzliche eigene Sticky-Ebene dafür ist nicht mehr nötig. */
    position: sticky;
    top: calc(var(--topbar-h, 54px) + var(--logobar-h, 54px) + var(--listheader-h, 64px));
    z-index: 80;
}
.ap-actionbar-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ap-search {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
}
.ap-search svg { flex: 0 0 auto; width: 14px; height: 14px; color: var(--color-muted); }
.ap-search input {
    border: none;
    outline: none;
    font-size: 13px;
    width: 190px;
    background: transparent;
    color: var(--color-text);
}
.ap-search .ap-search-clear {
    display: none;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--color-muted);
    font-size: 15px;
    line-height: 1;
    padding: 0 2px;
}
.ap-search.has-value .ap-search-clear { display: inline-block; }
.ap-actionbar-divider {
    width: 1px;
    align-self: stretch;
    background: var(--color-border);
    /* War "margin: 2px 8px" - die zusätzlichen 8px je Seite kamen ON TOP des ohnehin schon
       vorhandenen .ap-actionbar-gap (siehe dort) und sorgten für einen deutlich größeren
       Abstand rund um einen Trennstrich als zwischen zwei Schaltern innerhalb einer Gruppe.
       Jetzt nur noch die vertikale Marge (Trennstrich etwas kürzer als die volle
       Toolbar-Höhe) - horizontal übernimmt allein der gap-Wert von .ap-actionbar die
       Abstandhaltung, genau wie zwischen zwei normalen Schaltern. */
    margin: 2px 0;
}

/* Nowrap-Variante der Toolbar (siehe z. B. Pages/Quotes/Index.cshtml) - bewusst als
   ZUSÄTZLICHE Klasse statt die geteilte .ap-actionbar-Regel selbst zu ändern: nur Seiten, die
   bereits auf das neue "⋯"-Überlaufmenü umgestellt sind (seltener genutzte Schalter wandern
   dorthin, damit der Rest zuverlässig in eine Zeile passt), bekommen dieses Verhalten - alle
   anderen Listenseiten verhalten sich unverändert, bis sie nach und nach auf dasselbe Muster
   umgestellt werden. BEWUSST OHNE overflow-x: das war ein erster Versuch als Sicherheitsnetz
   für sehr schmale Bildschirme, hatte aber einen übersehenen CSS-Nebeneffekt - sobald
   overflow-x auf einen Wert ungleich "visible" gesetzt wird, berechnet der Browser automatisch
   auch overflow-y als Clipping-Bereich (nicht mehr "visible"), wodurch das absolut
   positionierte "⋯"-Menü (siehe .nav-dropdown-menu) nicht mehr frei über der Seite schwebt,
   sondern auf die winzige Toolbar-Höhe eingesperrt und selbst scrollbar wurde. */
.ap-actionbar-nowrap { flex-wrap: nowrap; }

/* Container für das rechtsbündige "⋯"-Überlaufmenü einer Toolbar - der Toggle-Schalter selbst
   nutzt die normale .ap-tbtn-Optik (siehe Markup), damit er sich nahtlos neben die übrigen
   Toolbar-Schalter einreiht. */
.ap-toolbar-overflow { position: relative; margin-left: auto; flex: 0 0 auto; }

/* Öffnet das Menü nach LINKS statt nach rechts (siehe .nav-dropdown-menu oben, dort Standard
   "left:0" für die Navigationsleisten-Pulldowns) - hier sitzt der Toggle-Schalter selbst schon
   ganz am rechten Rand der Toolbar, ein nach rechts aufklappendes Menü würde also über den
   Seitenrand hinauslaufen. */
.nav-dropdown-menu-right { left: auto; right: 0; }

/* Einträge im Überlaufmenü sind meist echte <button>-Elemente, da sie dieselben Toolbar-
   Aktionen wie die übrigen Schalter auslösen (JS-Klick-Handler) - vereinzelt aber auch reine
   Navigations-Links als <a> (z. B. "Änderungsprotokoll" bei den Rechnungen, siehe
   Pages/Invoices/Index.cshtml), wo kein JS-Handler nötig ist. Beide Varianten nutzen dieselbe
   ".ap-overflow-item"-Optik, damit sie im Menü nicht unterscheidbar wirken - anders als bei den
   Navigations-Pulldowns oben (".nav-dropdown-menu a", dort ausschließlich Links). */
.nav-dropdown-menu .ap-overflow-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 14px;
    border: none;
    background: none;
    font: inherit;
    font-size: 13.5px;
    color: var(--color-text) !important;
    text-align: left;
    text-decoration: none !important;
    margin-left: 0 !important;
    cursor: pointer;
    box-sizing: border-box;
}
.nav-dropdown-menu .ap-overflow-item:hover { background: var(--color-bg-alt2); }
.nav-dropdown-menu button.ap-overflow-item:disabled { color: var(--color-muted) !important; cursor: not-allowed; }
.nav-dropdown-menu button.ap-overflow-item:disabled:hover { background: none; }

/* Farbpunkt vor den Kategorie-Namen im Kalender-Filtermenü (siehe Pages/Kalender/Index.cshtml)
   - zeigt vorab dieselbe Farbe, mit der die jeweilige Kategorie auch im Kalendergitter selbst
   erscheint (siehe FarbenJeKategorie in KalenderAggregationsService). */
.kalender-farbpunkt { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.ap-tbtn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12.5px;
    color: var(--color-text);
    line-height: 1;
    /* .ap-tbtn wird sowohl auf <button> als auch auf <a> (z. B. "+ Neu"-Link, der direkt auf
       eine Anlegen-Seite verweist statt einen Dialog zu öffnen) eingesetzt - ohne diese Zeile
       erscheint bei <a>-Varianten der Browser-Standard-Unterstrich, der hier nicht zum
       button-artigen Erscheinungsbild der übrigen Toolbar-Einträge passt. */
    text-decoration: none;
}
.ap-tbtn:hover:not(:disabled) {
    /* Vorher: var(--color-bg-hover) (#e4e6ea) auf dem Toolbar-Hintergrund var(--color-border)
       (#dde1e6) - beides fast identische, helle Grautöne, der Unterschied war kaum
       wahrnehmbar. Jetzt deutlich stärkerer Kontrast: weißer Hintergrund (voller Kontrast zum
       grauen Toolbar-Hintergrund) plus farbige Umrandung samt leichtem Schatten, damit der
       Schalter beim Überfahren spürbar "heraustritt" statt nur minimal die Grauschattierung
       zu wechseln. */
    background: var(--color-surface);
    border-color: var(--color-primary);
    box-shadow: 0 1px 3px var(--color-shadow-sm);
}
.ap-tbtn:disabled {
    opacity: 0.4;
    cursor: default;
}
.ap-tbtn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    font-size: 14px;
    color: var(--color-primary);
    font-weight: 600;
}
.ap-tbtn-selected-count {
    margin-left: auto;
    font-size: 12px;
    color: var(--color-muted);
    background: var(--color-primary-tint);
    padding: 4px 10px;
    border-radius: 12px;
}
/* Dieselbe "N ausgewählt"-Information wie .ap-tbtn-selected-count, aber neben der
   Seitenüberschrift (im <h1>) statt in der Toolbar-Zeile platziert (Nutzer-Feedback: das
   Ein-/Ausblenden in der ohnehin oft schon vollen Toolbar-Zeile ließ bei wenig Platz - z. B.
   Kassenbuch mit vielen Schaltern - die ganze Seite darunter ruckartig springen, da die Zeile
   dann umbrach). Fester Bestandteil der Überschriftenzeile statt der variablen Toolbar-Breite,
   dadurch kein Layout-Sprung mehr beim Ein-/Ausblenden. */
.page-header-selected-count {
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    font-size: 12px;
    font-weight: 400;
    color: var(--color-muted);
    background: var(--color-primary-tint);
    padding: 3px 10px;
    border-radius: 12px;
}
/* Dezenter Hinweis, dass die OZ nach Verschieben/Löschen/Ausschneiden/Einfügen ggf. nicht
   mehr die aktuelle Reihenfolge widerspiegelt - rein informativ, ändert selbst nichts,
   verschwindet automatisch wieder nach "OZ neu nummerieren". */
.ap-oz-hinweis {
    align-self: center;
    margin-left: 6px;
    font-size: 12px;
    color: var(--color-warning-text, #8a5a00);
    background: var(--color-warning-bg, #fff3cd);
    padding: 4px 10px;
    border-radius: 12px;
    white-space: nowrap;
}

.ap-table-wrap {
    border: 1px solid var(--color-border);
    overflow-x: auto;
}
.ap-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--table-font-family);
}
.ap-table th {
    text-align: left;
    font-size: 12px;
    color: var(--color-muted);
    background: var(--color-bg-alt);
    border-bottom: 1px solid var(--color-border);
    padding: var(--table-header-padding-v) var(--table-cell-padding-h);
    vertical-align: middle;
}
/* font-variant-numeric: tabular-nums sorgt dafür, dass jede Ziffer exakt dieselbe Breite hat
   (Segoe UI/Roboto/Arial sind proportionale Schriften - eine "1" ist dort schmaler als eine
   "8"). Ohne das kann bei zwei rechtsbündigen Beträgen mit gleicher Zeichenzahl, aber
   unterschiedlichen Ziffern, das Gesamt-Textbild um 1-2px voneinander abweichen, obwohl die
   Ausrichtung selbst (der rechte Rand) korrekt ist - das wirkte in Screenshots wie eine
   fehlende Rechtsbündigkeit, war aber ein Schriftart-Effekt. Mit tabular-nums stehen alle
   Ziffernspalten (Einer, Zehner, ...) exakt untereinander, wie in einer echten Tabelle. */
.ap-table th.num, .ap-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
/* Zahlenwerte in Tabellen (Positionstabellen etc.) sind grundsätzlich rechtsbündig
   darzustellen (Vorgabe) - text-align auf der Zelle allein reicht in der Praxis nicht
   zuverlässig für das <input>/<textarea> darin, daher hier explizit auf die Formularfelder
   selbst. Gilt zusammen mit .zahlenfeld (siehe wwwroot/js/zahlenformat.js) als die
   Standardformatierung für Zahlenfelder in der gesamten Anwendung. */
.ap-table td.num input, .ap-table td.num textarea { text-align: right; }
.zahlenfeld { text-align: right; }
.ap-table th:first-child, .ap-table td:first-child { text-align: center; width: 2.25rem; }

/* Jede Zeile bekommt eine feste, großzügige Mindesthöhe -> Checkbox, Eingabefeld und
   reiner Text landen dank vertical-align:middle immer exakt auf derselben Mittellinie,
   unabhängig von ihrer jeweiligen Eigenhöhe. Keine geratenen padding-top-Werte mehr. */
.ap-table td {
    padding: var(--table-cell-padding-v) var(--table-cell-padding-h);
    vertical-align: top;
    border-bottom: 1px solid var(--color-border-light);
    min-height: var(--table-row-min-height);
    box-sizing: border-box;
}
.ap-table tr.ap-row-selected td { background: var(--color-row-selected); }

/* Ansprechpartner-Tabelle (Pages/Kontakte/_AnsprechpartnerVerwaltung.cshtml): Zeilen sind
   klickbar (Auswahl für die Toolbar Neu/Bearbeiten/Löschen, siehe .invoice-row weiter unten
   für dasselbe Prinzip), der als Standardansprechpartner markierte Eintrag wird zusätzlich
   blau/fett hervorgehoben, unabhängig von einer eventuellen Auswahl-Markierung. --color-info
   statt --color-primary, weil hier tatsächlich das übliche "Hyperlink-Blau" gemeint ist, nicht
   der (dunklere, türkisfarbene) Marken-Farbton der übrigen Oberfläche. */
.ansprechpartner-table tr.ansprechpartner-row { cursor: pointer; }
.ansprechpartner-table tr.ap-row-standard td { color: var(--color-info); font-weight: 600; }

/* Aufklappbare Ansprechpartner-Zeilen in der Kontaktliste (Pages/Kontakte/Index.cshtml) - echte
   <tr>-Zeilen in DERSELBEN Tabelle wie die Kontakt-Hauptzeilen, mit denselben Spaltenklassen
   (.col-nr/.col-name/...) statt einer eigenen, verschachtelten Tabelle: nur so ist die
   Spaltenausrichtung mit der Hauptliste durch die gemeinsame Breiten-Definition automatisch
   und zuverlässig exakt - eine frühere Variante mit eigener, prozentual nachgebauter Tabelle
   lief sichtbar aus dem Raster (abweichende Zellen-Innenabstände, Rundungsfehler). */
.col-ap-toggle { width: 1.7rem; text-align: center; }
.kontakte-table { table-layout: fixed; }
.ansprechpartner-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-input-bg);
    font-size: 13px;
    line-height: 1;
    color: var(--color-text);
    cursor: pointer;
}
.ansprechpartner-toggle:hover { background: var(--color-bg-alt); }
.ansprechpartner-row { background: var(--color-bg-alt); font-size: 13px; }
.ansprechpartner-row td { border-top: none; padding-top: 6px; padding-bottom: 6px; }
.ansprechpartner-row.ap-row-standard td { color: var(--color-info); font-weight: 600; }
.ansprechpartner-foto {
    display: block;
    width: 44px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--color-border);
}

/* Ganze Zeile klickbar machen (siehe tbody-Klick-Handler in den Index.cshtml-Seiten) - nur
   auf Listenseiten (.invoice-row), NICHT in den Positionstabellen der Beleg-Formulare (dort
   sind die Zellen editierbare Eingabefelder, ein Zeilen-weiter Klick-Cursor wäre irreführend). */
.invoice-row { cursor: pointer; }
.invoice-row a, .invoice-row button, .invoice-row input { cursor: auto; }
/* Echte Links innerhalb einer Zeile (Telefon-/E-Mail-Spalte der Kontaktliste) sollen trotz der
   Regel direkt darüber (cursor:auto) eindeutig als klickbar erkennbar sein - "auto" zeigt bei
   <a>-Elementen zwar in den meisten Browsern ohnehin die Hand an, aber nicht durchgehend
   zuverlässig in allen (Nutzer-Feedback), daher hier explizit erzwungen. */
.invoice-row td.col-telefon a, .invoice-row td.col-email a { cursor: pointer; }

/* Reine Gliederungszeile (Titel/Untertitel/Abschnitt, z. B. aus einem GAEB-Import) in der
   Positionstabelle optisch von echten, bepreisten Positionen abheben. */
.ap-table tr.position-row-gliederung td { background: var(--color-bg-alt); }
.ap-table tr.position-row-gliederung textarea[data-field="Leistungstext"],
.ap-table tr.position-row-gliederung input[data-field="Ordnungszahl"],
.ap-table tr.position-row-gliederung .sum-cell { font-weight: 600; }
/* Eine Gliederungszeile (Titel/Untertitel/Abschnitt) hat keine Menge/Einheit/Preis - diese
   Felder werden hier ausgeblendet (nicht entfernt: sie müssen weiterhin mit ihrem
   Nullwert übermittelt werden), damit die Zeile eindeutig als Gruppenüberschrift erkennbar
   ist statt wie eine unvollständige Position mit lauter Nullen zu wirken. Die
   Gliederungssumme in der Netto-Spalte (sum-cell) bleibt bewusst sichtbar. */
.ap-table tr.position-row-gliederung [data-field="Menge"],
.ap-table tr.position-row-gliederung .btn-aufmass,
.ap-table tr.position-row-gliederung [data-field="Einheit"],
.ap-table tr.position-row-gliederung [data-field="Einzelpreis"],
.ap-table tr.position-row-gliederung [data-field="EinzelpreisEk"],
.ap-table tr.position-row-gliederung [data-field="EinzelpreisVk"],
.ap-table tr.position-row-gliederung [data-field="MwstSatz"],
.ap-table tr.position-row-gliederung [data-field="Steuerschluessel"],
.ap-table tr.position-row-gliederung [data-field="Rabatt"] {
    visibility: hidden;
}

/* Kurzes Kürzel der Positionsart vor der Bezeichnung (Vorschlag: "damit für den Anwender
   erkennbar ist, um was für eine Positionsart es sich handelt") - rein per CSS aus dem
   ohnehin auf jeder Zeile vorhandenen data-art-Attribut abgeleitet (siehe Razor-Markup der
   Zeile bzw. buildRow() im jeweiligen <script>). Dadurch wirkt es automatisch in JEDER
   Positions-/Kalkulationstabelle, die dieses Attribut setzt (Angebote, Aufträge, Rechnungen,
   Lieferscheine, Projektkalkulation), ohne die Zeilenerzeugung selbst anfassen zu müssen -
   und ebenso automatisch für nachträglich per JavaScript eingefügte Zeilen. Dieselben Kürzel
   wie schon im "Neu"-Menü (siehe .ap-add-code), damit Auswahl und Anzeige konsistent sind.
   Tabellen ohne Positionsarten-Unterscheidung (z. B. die einfache
   Leistungsverzeichnis-Kalkulation) setzen data-art gar nicht erst - dort erscheint daher
   auch kein Kürzel. */
.ap-table tr[data-art]:not([data-art=""]) td.col-bezeichnung {
    position: relative;
    padding-left: 30px;
}
.ap-table tr[data-art]:not([data-art=""]) td.col-bezeichnung::before {
    position: absolute;
    left: 6px;
    /* Fest berechnete Position statt vertikaler Zentrierung über die volle Zellenhöhe: bei
       mehrzeiligen Bezeichnungen (das Textfeld wächst automatisch mit) würde eine echte
       Zentrierung das Kürzel mit nach unten wandern lassen. Der Wert ist stattdessen so
       berechnet, dass er auf Höhe der Mitte der ERSTEN Textzeile landet und dort bleibt,
       unabhängig davon wie viele weitere Zeilen folgen: Zellenpolsterung (6px) + Rahmen des
       Eingabefelds (1px) + dessen Innenabstand oben (7px) + halbe Zeilenhöhe der ersten
       Textzeile (13.5px Schriftgröße × 1.3 Zeilenhöhe ≈ 17.5px, davon die Hälfte ≈ 9px)
       minus die halbe eigene Zeilenhöhe des Kürzels selbst (~6px) ergibt ~15px.  */
    top: 15px;
    min-width: 14px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--color-muted);
    line-height: 1.3;
    pointer-events: none;
}
.ap-table tr[data-art="Titel"] td.col-bezeichnung::before { content: "(T)"; }
.ap-table tr[data-art="Untertitel"] td.col-bezeichnung::before { content: "(U)"; }
.ap-table tr[data-art="Abschnitt"] td.col-bezeichnung::before { content: "(A)"; }
.ap-table tr[data-art="Normal"] td.col-bezeichnung::before { content: "(N)"; }
.ap-table tr[data-art="Wahlposition"] td.col-bezeichnung::before { content: "(W)"; }
.ap-table tr[data-art="Nachtrag"] td.col-bezeichnung::before { content: "(NP)"; }
.ap-table tr[data-art="Hinweistext"] td.col-bezeichnung::before { content: "(H)"; }

/* Spaltenüberschrift "Bezeichnung" um denselben Abstand einrücken wie die Datenzellen
   darunter (siehe padding-left oben), damit sie über dem tatsächlichen Eingabefeld steht
   und nicht über dem für das Kürzel reservierten Platz. :has() prüft dabei gezielt, ob die
   jeweilige Tabelle überhaupt Zeilen mit data-art (= Positionsarten-Kürzel) enthält - so
   bleiben Tabellen ohne dieses Konzept (z. B. die Leistungsverzeichnis-Kalkulation) korrekt
   unverändert, obwohl sie dieselbe .positions-table-Klasse teilen. */
table.positions-table:has(tr[data-art]) th.col-bezeichnung {
    padding-left: 30px;
}

/* Hinweistext: reiner Text ohne Menge/Einheit/Preis, aber (anders als Titel/Untertitel)
   KEINE Gruppe - daher auch keine Gliederungssumme, die Netto-Spalte bleibt hier leer. */
.ap-table tr.position-row-hinweistext td { background: var(--color-bg-alt); }
.ap-table tr.position-row-hinweistext [data-field="Menge"],
.ap-table tr.position-row-hinweistext .btn-aufmass,
.ap-table tr.position-row-hinweistext [data-field="Einheit"],
.ap-table tr.position-row-hinweistext [data-field="Einzelpreis"],
.ap-table tr.position-row-hinweistext [data-field="EinzelpreisEk"],
.ap-table tr.position-row-hinweistext [data-field="EinzelpreisVk"],
.ap-table tr.position-row-hinweistext [data-field="MwstSatz"],
.ap-table tr.position-row-hinweistext [data-field="Steuerschluessel"],
.ap-table tr.position-row-hinweistext [data-field="Rabatt"],
.ap-table tr.position-row-hinweistext .sum-cell {
    visibility: hidden;
}

/* Wahlposition (GAEB "NEP"/Alternativposition): Menge/Einheit/Preis bleiben normal
   editierbar und die Zeile zeigt weiterhin ihre eigene Nettosumme zur Information - nur
   dezent gelb hinterlegt, damit erkennbar bleibt, dass dieser Betrag NICHT in die
   Gliederungs-/Gesamtsumme des Belegs einfließt (siehe updateGliederungssummen() sowie
   QuoteGenerationService.cs/QuotePdfBuilder.cs, die Wahlpositionen dort ausschließen). */
.ap-table tr.position-row-wahlposition td { background: var(--color-warning-bg, #fff8e1); }

/* Siehe PositionInput.Aktiv - unabhängig von der Positionsart umschaltbar (Toolbar-Schalter
   "Aktivieren/Deaktivieren"). Reduzierte Deckkraft ("transparent") + mittelgraue Schrift auf
   allen Zellen der Zeile, exakt wie vom Nutzer gewünscht - bewusst KEIN durchgestrichener Text
   in der Eingabetabelle selbst (anders als im PDF, siehe *PdfBuilder.cs): Eingabefelder mit
   durchgestrichenem Text wären schwerer lesbar/bearbeitbar, während die reduzierte Deckkraft
   allein schon eindeutig genug von aktiven Zeilen unterscheidet. Kombinierbar mit jeder anderen
   Positionsart (Normal/Wahlposition/Nachtrag/...), daher als eigene, unabhängige Regel statt in
   eine der Positionsart-spezifischen Regeln oben eingemischt. */
.ap-table tr.position-row-inaktiv { opacity: 0.55; }
.ap-table tr.position-row-inaktiv td,
.ap-table tr.position-row-inaktiv input,
.ap-table tr.position-row-inaktiv textarea,
.ap-table tr.position-row-inaktiv .sum-cell {
    color: #6b6b6b !important;
}

/* Nachtragsposition: rechnet wie eine Normalposition, nur dezent markiert. */
.ap-table tr.position-row-nachtrag td { border-left: 3px solid var(--color-primary); }

/* Dropdown des "Neu"-Schalters zur Auswahl der Positionsart - selbe Optik wie das
   Faktura-Pulldown in der Hauptnavigation. */
.ap-add-dropdown { position: relative; display: inline-block; }
.ap-add-caret { font-size: 9px; margin-left: 2px; }
.ap-add-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 6px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 8px 22px var(--color-shadow-sm);
    min-width: 200px;
    padding: 4px 0;
    z-index: 60;
}
.ap-add-menu.open { display: block; }
.ap-add-menu a {
    display: block;
    padding: 8px 14px;
    color: var(--color-text);
    font-size: 13px;
    text-decoration: none;
}
.ap-add-menu a:hover { background: var(--color-bg-alt2); }
.ap-add-menu-divider { border-top: 1px solid var(--color-border); margin: 4px 0; }
.ap-add-code { opacity: 0.7; font-size: 11.5px; }
/* Farbliche Unterscheidung im Auswahlmenü: Gliederungsarten (Titel/Untertitel/Hinweistext -
   keine Menge/Preis) in einer Farbe, bepreiste Positionsarten (Normal/Wahlposition/
   Nachtrag - haben Menge/Preis) in einer anderen. */
.ap-add-menu a.ap-add-item-gliederung { color: var(--color-danger); }
.ap-add-menu a.ap-add-item-normal { color: var(--color-primary); }

/* "…"-Dropdown für modulspezifische Zusatzschalter in der Positionen-Toolbar (z. B.
   GAEB-Import, Aus Leistungsverzeichnis, OZ neu nummerieren) - einheitliche Vorgabe: die
   Grundschalter (Neu/Löschen/Kopieren/Ausschneiden/Einfügen/Nach oben/Nach unten) stehen
   überall in EINER Zeile; alles, was dort nicht mit hineinpasst bzw. vom Standard abweicht,
   wandert rechtsbündig in dieses "…"-Menü statt in eine zweite, umbrechende Zeile. Optisch
   an .ap-add-menu (Neu-Dropdown) angelehnt, aber rechtsbündig unter dem Auslöser geöffnet
   (right:0 statt left:0) und mit margin-left:auto auf dem Wrapper an den rechten Rand der
   (flex-basierten) Toolbar geschoben. Wird nur gerendert, wenn ein Modul tatsächlich
   Zusatzschalter hat (Honorarvereinbarungen/Zahlungspläne z. B. haben keine und zeigen daher
   kein "…").*/
.ap-toolbar-more { position: relative; display: inline-block; margin-left: auto; }
.ap-toolbar-more-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 30px;
    padding: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text);
    cursor: pointer;
    font-size: 15px;
    letter-spacing: 1px;
    line-height: 1;
}
.ap-toolbar-more-toggle:hover { background: var(--color-bg-alt2); }
.ap-toolbar-more-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 6px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 8px 22px var(--color-shadow-sm);
    min-width: 240px;
    padding: 4px 0;
    z-index: 60;
}
.ap-toolbar-more-menu.open { display: block; }
.ap-toolbar-more-menu button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 14px;
    background: none;
    border: none;
    color: var(--color-text);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}
.ap-toolbar-more-menu button:hover { background: var(--color-bg-alt2); }
.ap-toolbar-more-menu button:disabled { color: var(--color-muted); cursor: not-allowed; }
.ap-toolbar-more-menu button:disabled:hover { background: none; }
.ap-toolbar-more-divider { border-top: 1px solid var(--color-border); margin: 4px 0; }

/* Label/Wert- bzw. Spalten-Tabellen in der "Ausschreibungsdetails"-Karte (GAEB-Import, siehe
   Pages/Quotes/Create.cshtml bzw. Edit.cshtml) - bewusst eine EIGENE Klasse statt .ap-table:
   .ap-table geht von einer führenden Checkbox-Spalte aus (schmal, zentriert) und würde damit
   die hier erste, linksbündige LABEL-Spalte falsch (zu schmal, zentriert statt linksbündig)
   darstellen. */
.gaeb-info-table { border-collapse: collapse; }
.gaeb-info-table th, .gaeb-info-table td {
    text-align: left;
    padding: 4px 18px 4px 0;
    vertical-align: top;
    border: none;
}
.gaeb-info-table th { font-size: 12px; color: var(--color-muted); font-weight: 600; }
.gaeb-info-table td:first-child { font-weight: 600; white-space: nowrap; }

/* OZ-Format-Tabelle (Kopfzeile + eine Datenzeile, siehe Pages/Quotes/Create.cshtml bzw.
   Edit.cshtml) - eigene, schlichtere Variante ohne die "erste Spalte fett"-Regel von
   .gaeb-info-table, da hier keine führende Label-Spalte existiert. */
.gaeb-info-table-oz { border-collapse: collapse; }
.gaeb-info-table-oz th, .gaeb-info-table-oz td {
    text-align: left;
    padding: 4px 24px 4px 0;
    border: none;
}
.gaeb-info-table-oz th { font-size: 12px; color: var(--color-muted); font-weight: 600; }

/* Kurze, einmalige Hervorhebung der Zeile, die nach dem Bearbeiten/Abbrechen im
   Formular wieder markiert und ins Bild gescrollt wurde - damit der Anwender sofort
   sieht, welcher Datensatz gerade bearbeitet wurde. */
@keyframes row-focus-flash {
    0% { background-color: var(--color-row-flash); }
    100% { background-color: transparent; }
}
.ap-table tr.row-focus-flash td { animation: row-focus-flash 1.8s ease-out 1; }
/* Dieselbe Hervorhebung auch für das TreeView der Projektverzeichnisse (keine <table>, daher
   eigene Regel ohne "td") - siehe wwwroot/js/projektverzeichnis-tree.js, nach einem
   erfolgreichen Drag&Drop-Upload auf dem Zielordner. */
.pv-node-row.row-focus-flash { animation: row-focus-flash 1.8s ease-out 1; }
/* Dieselbe Hervorhebung auch für kartenförmige Datensätze (z. B. die Mitarbeiter-Tagesgruppe
   in der Zeiterfassungs-Kontrolle, ein <details class="card">, keine Tabellenzeile). */
.card.row-focus-flash { animation: row-focus-flash 1.8s ease-out 1; }

/* Info-Schalter neben dem Dateinamen in der Dokumente-Liste (siehe Pages/Dokumente/Index.cshtml)
   - zeigt bei Klick den Ablagepfad im Projektordner. Bewusst wie ein reines Icon gestaltet
   (kein Button-Rahmen/-Hintergrund), aber mit Hand-Cursor, damit die Klickbarkeit trotzdem
   erkennbar bleibt (Nutzer-Feedback). Die hochgestellte "?" (via <sup>) macht aus dem
   schlichten Ordner-Symbol optisch einen "Ordner mit Fragezeichen". */
.dokument-info-icon {
    background: none;
    border: none;
    padding: 0;
    margin-left: 4px;
    font-size: 13px;
    cursor: pointer;
    vertical-align: middle;
}
.dokument-info-icon sup { font-size: 10px; }

/* Einheitliches, kompaktes Eingabefeld-Design innerhalb der Tabelle - schließt bewusst auch
   <select> mit ein, sonst erscheinen Comboboxen in Tabellen (z. B. Ansprechpartner-Karte)
   ungestylt und wirken dadurch winzig im Vergleich zu den Comboboxen in normalen Formularen. */
.ap-table input:not([type="checkbox"]),
.ap-table select,
.ap-table textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 7px 9px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-size: 13.5px;
    font-family: inherit;
    line-height: 1.3;
    background: var(--color-input-bg);
    color: var(--color-text);
}
.ap-table textarea {
    resize: none;
    overflow: hidden;
    min-height: 30px;
}
.ap-table input:not([type="checkbox"]):focus,
.ap-table select:focus,
.ap-table textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-primary-soft);
}
.ap-table td.num input { text-align: right; }
.ap-table td.sum-cell {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Spaltenbreiten der Positionstabelle: Bezeichnung deutlich breiter als die übrigen,
   schmalen Zahlen-/Auswahlspalten. */
.positions-table { table-layout: fixed; }
.positions-table th.col-check, .positions-table td.col-check { width: 3%; }
.positions-table th.col-oz, .positions-table td.col-oz { width: 15%; }
.positions-table th.col-bezeichnung, .positions-table td.col-bezeichnung { width: 27%; }
.positions-table th.col-menge, .positions-table td.col-menge { width: 12%; }
.positions-table th.col-einheit, .positions-table td.col-einheit { width: 10%; }
.positions-table th.col-preis, .positions-table td.col-preis { width: 11%; }
.positions-table th.col-rabatt, .positions-table td.col-rabatt { width: 9%; }
.positions-table th.col-summe, .positions-table td.col-summe { width: 13%; }
/* Nur in der Honorarvereinbarungs-Positionstabelle verwendete Spalten (Pos/Status/Zahldatum/
   Anteil statt OZ/Menge/Einheit/Preis/Rabatt) - eigene, sonst nirgends verwendete Klassennamen,
   daher ohne Auswirkung auf die Positionstabellen von Rechnung/Angebot/Lieferschein/Auftrag. */
.positions-table th.col-pos, .positions-table td.col-pos { width: 8%; }
.positions-table th.col-status, .positions-table td.col-status { width: 17%; }
.positions-table th.col-zahldatum, .positions-table td.col-zahldatum { width: 15%; }
.positions-table th.col-anteil, .positions-table td.col-anteil { width: 17%; }
/* MwSt.-Spalte im Bearbeitungsformular vorerst dauerhaft ausgeblendet (kein Umschalter
   mehr - kommt später gebündelt mit weiteren Einstellungsmöglichkeiten in eine eigene Karte
   "Optionen"). Gilt für alle vier Module identisch (Angebote, Rechnungen, Aufträge,
   Lieferscheine) - das Eingabefeld bleibt dabei im DOM vorhanden und überträgt seinen Wert
   weiterhin ganz normal beim Speichern (siehe PositionInput.MwstSatz), nur eben ohne eigene
   sichtbare Spalte. In der PDF erscheint die Spalte ohnehin nur "bei Bedarf" - sobald
   tatsächlich unterschiedliche Sätze vorkommen (siehe InvoicePdfBuilder/QuotePdfBuilder). */
.positions-table .col-mwst { display: none; }
/* Spalte "MwSt." mit Steuerschlüssel-Auswahl (siehe wwwroot/js/steuerschluessel.js) - sichtbar,
   wenn unter Firmendaten → Steuerliche Angaben "Unterschiedliche Steuersätze" erlaubt sind ODER
   der Beleg bereits Positionen mit abweichendem Satz enthält (das Skript setzt dann
   data-mwst-spalte="an" auf <html>). Das eigentliche Zahlenfeld MwstSatz bleibt versteckt und
   wird vom Skript aus Steuerschlüssel + Leistungsdatum befüllt. */
html[data-mwst-spalte="an"] .positions-table .col-mwst { display: table-cell; }
.positions-table .col-mwst input[data-field="MwstSatz"].steuer-satzfeld { display: none; }
.positions-table .col-mwst select.steuer-auswahl { width: 100%; }
/* Mit sichtbarer MwSt.-Spalte: alle übrigen Spalten anteilig auf 91 % (Faktor 0,91 der Werte
   oben), MwSt. erhält 9 %. Durch die breitere Seite (--seiten-breite) bleibt dabei jede
   Spalte in Pixeln mindestens so breit wie vorher bei 1100px ohne MwSt.-Spalte. */
html[data-mwst-spalte="an"] .positions-table th.col-check, html[data-mwst-spalte="an"] .positions-table td.col-check { width: 2.73%; }
html[data-mwst-spalte="an"] .positions-table th.col-oz, html[data-mwst-spalte="an"] .positions-table td.col-oz { width: 13.65%; }
html[data-mwst-spalte="an"] .positions-table th.col-bezeichnung, html[data-mwst-spalte="an"] .positions-table td.col-bezeichnung { width: 24.57%; }
html[data-mwst-spalte="an"] .positions-table th.col-menge, html[data-mwst-spalte="an"] .positions-table td.col-menge { width: 10.92%; }
html[data-mwst-spalte="an"] .positions-table th.col-einheit, html[data-mwst-spalte="an"] .positions-table td.col-einheit { width: 9.10%; }
html[data-mwst-spalte="an"] .positions-table th.col-preis, html[data-mwst-spalte="an"] .positions-table td.col-preis { width: 10.01%; }
html[data-mwst-spalte="an"] .positions-table th.col-mwst, html[data-mwst-spalte="an"] .positions-table td.col-mwst { width: 9%; }
html[data-mwst-spalte="an"] .positions-table th.col-rabatt, html[data-mwst-spalte="an"] .positions-table td.col-rabatt { width: 8.19%; }
html[data-mwst-spalte="an"] .positions-table th.col-summe, html[data-mwst-spalte="an"] .positions-table td.col-summe { width: 11.83%; }

/* Steuersätze-Tabelle (Firmendaten → Steuerliche Angaben): hat keine Auswahl-Checkbox in der
   ersten Spalte - die allgemeine Regel ".ap-table th/td:first-child" (schmal, zentriert) würde
   sonst die Spalte "Art" auf 2,25rem zusammendrücken. */
.ap-table.steuersaetze-table th:first-child, .ap-table.steuersaetze-table td:first-child { width: auto; text-align: left; }
.ap-table.steuersaetze-table select { min-width: 170px; }

/* Kassenbuch-Tabelle (Pages/Kassenbuch/Index.cshtml): eigener Spaltensatz (Datum/Beleg-Nr./
   Buchungstext/Einnahme/Ausgabe/MwSt./Bruttobuchung statt Bezeichnung/Menge/Einheit/Preis/...)
   - eigene, sonst nirgends verwendete Klassennamen (col-mwstsatz statt col-mwst), damit die
   obige "MwSt.-Spalte ausblenden"-Regel für die Beleg-Positionstabellen hier NICHT versehentlich
   mitgreift. */
.kassenbuch-table th.col-check, .kassenbuch-table td.col-check { width: 3%; }
.kassenbuch-table th.col-datum, .kassenbuch-table td.col-datum { width: 13%; }
.kassenbuch-table th.col-belegnr, .kassenbuch-table td.col-belegnr { width: 11%; }
.kassenbuch-table th.col-belegdatei, .kassenbuch-table td.col-belegdatei { width: 6%; }
.kassenbuch-table th.col-buchungstext, .kassenbuch-table td.col-buchungstext { width: 14%; }
.kassenbuch-table th.col-einnahme, .kassenbuch-table td.col-einnahme { width: 11%; }
.kassenbuch-table th.col-ausgabe, .kassenbuch-table td.col-ausgabe { width: 11%; }
.kassenbuch-table th.col-mwstsatz, .kassenbuch-table td.col-mwstsatz { width: 9%; }
.kassenbuch-table th.col-mwstbetrag, .kassenbuch-table td.col-mwstbetrag { width: 12%; }
.kassenbuch-table th.col-kassenbestand, .kassenbuch-table td.col-kassenbestand { width: 10%; }

/* Schalter je Buchungszeile für die Originalbeleg-Zuordnung (Foto/Scan, siehe belegModal in
   Pages/Kassenbuch/Index.cshtml). Deaktivierter Grundzustand (noch nicht gespeicherte Zeile) ist
   dezent gehalten, analog zu den "Demnächst verfügbar"-Platzhaltern in den Pulldown-Menüs (siehe
   .nav-dropdown-menu span.disabled); der aktive Zustand (.ap-row-icon-btn-aktiv, gespeicherte
   Zeile) ist normal klickbar, .hat-belege hebt zusätzlich hervor, dass bereits mindestens ein
   Beleg zugeordnet ist. */
.ap-row-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 30px;
    height: 30px;
    padding: 0 6px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-input-bg);
    font-size: 13px;
    line-height: 1;
    opacity: 0.55;
}
.ap-row-icon-btn:disabled { cursor: not-allowed; }
.ap-row-icon-btn-aktiv {
    opacity: 1;
    cursor: pointer;
    color: var(--color-text);
}
.ap-row-icon-btn-aktiv:hover { background: var(--color-bg-alt); }
.ap-row-icon-btn-aktiv.hat-belege {
    border-color: var(--color-success);
    color: var(--color-success);
    font-weight: 600;
}

/* Dateiliste im "Originalbeleg zuordnen"-Dialog (siehe oeffneBelegModal in Index.cshtml). */
/* Beschriftung über der Dateiliste im "Originalbeleg zuordnen"-Dialog - im selben dezenten Stil
   wie die übrigen Feld-Labels (siehe .field label), aber ohne eigenes <label for="">, da sie
   sich auf die Liste als Ganzes bezieht statt auf ein einzelnes Eingabefeld. */
.beleg-modal-label { font-size: 12.5px; color: var(--color-muted); margin: 0 0 6px; }

.beleg-datei-zeile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    margin-bottom: 6px;
}
.beleg-datei-zeile a { overflow-wrap: anywhere; }
.beleg-datei-loeschen {
    flex-shrink: 0;
    border: none;
    background: none;
    color: var(--color-muted);
    font-size: 15px;
    cursor: pointer;
    padding: 2px 6px;
}
.beleg-datei-loeschen:hover { color: var(--color-danger); }

/* Summenzeile am Tabellenende (siehe Screenshot-Vorlage: grau hinterlegt, fett) - als <tfoot>
   statt eines separaten Grid-Layouts, analog zu .aufmass-summe-row weiter oben, damit sie
   automatisch dieselben Spaltenbreiten wie der Tabellenkopf/-körper übernimmt. */
.kb-summe-row td {
    background: var(--color-bg-alt2);
    border-top: 2px solid var(--color-border);
    font-weight: 600;
    font-size: 14.5px;
    padding-top: 10px;
    padding-bottom: 10px;
}

/* Kalkulationstabelle im Leistungsverzeichnis-Formular: eigener Spaltensatz (kein Rabatt/
   MwSt., dafür ohne die für die Beleg-Positionstabellen reservierten 9% der Rabatt-Spalte) -
   eigene Prozentaufteilung, damit sie exakt 100% ergibt (bei bloßer Wiederverwendung der
   .positions-table-Werte blieben ca. 9% "übrig", die table-layout:fixed unvorhersehbar der
   Checkbox-Spalte zuschlug - Nutzer-Feedback "Checkbox-Spalte viel zu groß"). Zusätzlich zur
   Klasse "positions-table" gesetzt (siehe Pages/Leistungsverzeichnis/Create.cshtml/
   Edit.cshtml), gleiche Spezifität, wirkt durch die spätere Reihenfolge in dieser Datei. */
.kalkulation-table th.col-check, .kalkulation-table td.col-check { width: 3%; }
.kalkulation-table th.col-oz, .kalkulation-table td.col-oz { width: 12%; }
.kalkulation-table th.col-bezeichnung, .kalkulation-table td.col-bezeichnung { width: 30%; }
.kalkulation-table th.col-menge, .kalkulation-table td.col-menge { width: 12%; }
.kalkulation-table th.col-einheit, .kalkulation-table td.col-einheit { width: 10%; }
.kalkulation-table th.col-preis, .kalkulation-table td.col-preis { width: 15%; }
.kalkulation-table th.col-summe, .kalkulation-table td.col-summe { width: 18%; }

/* Projekt-Kalkulationstabelle (Pages/Projekte/Edit.cshtml, Karte "Kalkulation"): eigener
   Spaltensatz mit ZWEI Preisspalten (Einkauf/Verkauf) statt einer - eigene Prozentaufteilung
   aus demselben Grund wie bei .kalkulation-table oben (muss exakt 100% ergeben). Zusätzlich
   zur Klasse "positions-table" gesetzt, gleiche Spezifität, wirkt durch die spätere Reihenfolge
   in dieser Datei. */
.projekt-kalkulation-table th.col-check, .projekt-kalkulation-table td.col-check { width: 3%; }
.projekt-kalkulation-table th.col-oz, .projekt-kalkulation-table td.col-oz { width: 11%; }
.projekt-kalkulation-table th.col-bezeichnung, .projekt-kalkulation-table td.col-bezeichnung { width: 24%; }
.projekt-kalkulation-table th.col-menge, .projekt-kalkulation-table td.col-menge { width: 10%; }
.projekt-kalkulation-table th.col-einheit, .projekt-kalkulation-table td.col-einheit { width: 11%; }
.projekt-kalkulation-table th.col-preis-ek, .projekt-kalkulation-table td.col-preis-ek { width: 11%; }
.projekt-kalkulation-table th.col-preis-vk, .projekt-kalkulation-table td.col-preis-vk { width: 11%; }
.projekt-kalkulation-table th.col-rabatt, .projekt-kalkulation-table td.col-rabatt { width: 8%; }
.projekt-kalkulation-table th.col-summe, .projekt-kalkulation-table td.col-summe { width: 11%; }


/* Eingabefelder mit "%"-Einheit (MwSt., Rabatt): Suffix wird rein optisch eingeblendet,
   der eigentliche Feldwert bleibt eine reine Zahl. */
.input-suffix {
    display: flex;
    align-items: center;
    gap: 4px;
}
.input-suffix input {
    flex: 1 1 auto;
    min-width: 0;
    padding-right: 9px;
}
.input-suffix .suffix {
    flex: 0 0 auto;
    font-size: 11px;
    color: var(--color-muted);
}

/* Berechnete Nettosumme je Position: gleiche Umrandung/Optik wie die Eingabefelder,
   aber leicht abgesetzter Hintergrund als Hinweis, dass der Wert nicht editierbar ist. */
.sum-display {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 7px 9px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-size: 13px;
    background: var(--color-bg-alt);
    color: var(--color-text);
    text-align: right;
}

/* Checkbox: vollständig selbst gezeichnet (appearance:none) statt native, je nach
   Browser/OS-Skalierung unterschiedlich groß gerenderte Checkbox -> garantiert exakt
   13x13px in jedem Browser, zentriert über vertical-align:middle der Zelle. */
.ap-table input[type="checkbox"],
#selectAll {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: inline-block;
    box-sizing: border-box;
    width: 13px;
    height: 13px;
    margin: 0;
    padding: 0;
    border: 1.5px solid var(--color-checkbox-border);
    border-radius: 3px;
    background: var(--color-input-bg);
    cursor: pointer;
    position: relative;
    vertical-align: middle;
}
.ap-table input[type="checkbox"]:hover,
#selectAll:hover {
    border-color: var(--color-primary);
}
.ap-table input[type="checkbox"]:checked,
#selectAll:checked {
    background: var(--color-primary);
    border-color: var(--color-primary);
}
.ap-table input[type="checkbox"]:checked::after,
#selectAll:checked::after {
    content: "";
    position: absolute;
    left: 3.5px;
    top: 0.5px;
    width: 3px;
    height: 6.5px;
    border: solid var(--color-on-primary);
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
}

.btn {
    display: inline-block;
    padding: 8px 16px;
    border-radius: var(--radius);
    border: 1px solid var(--color-primary);
    background: var(--color-primary);
    color: var(--color-on-primary);
    cursor: pointer;
    font-size: 14px;
    text-decoration: none;
}
.btn:hover { background: var(--color-primary-dark); }
.btn.secondary {
    background: var(--color-surface);
    color: var(--color-primary);
}
.btn.secondary:hover { background: var(--color-surface-hover); }
.btn.small { padding: 4px 10px; font-size: 12.5px; }
.btn.danger { border-color: var(--color-danger); background: var(--color-surface); color: var(--color-danger); }
.btn:disabled, .btn.secondary:disabled { opacity: 0.65; cursor: default; pointer-events: none; }

/* Nativer "Dateien auswählen"-Schalter von <input type="file"> - per ::file-selector-button im
   selben Look wie die übrigen .btn-Schaltflächen (z. B. "Senden" im E-Mail-Modal), statt im
   browsereigenen, aus dem Rahmen fallenden Grau-Stil. Gut unterstützter Standard (Chrome,
   Edge, Firefox, Safari jeweils aktuelle Versionen) - ::-webkit-file-upload-button zusätzlich
   als Fallback für ältere WebKit-Versionen, die ::file-selector-button noch nicht kennen. */
input[type="file"] {
    font-size: 14px;
    color: var(--color-text);
}
input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button {
    display: inline-block;
    padding: 8px 16px;
    margin-right: 10px;
    border-radius: var(--radius);
    border: 1px solid var(--color-primary);
    background: var(--color-primary);
    color: var(--color-on-primary);
    cursor: pointer;
    font-size: 14px;
}
input[type="file"]::file-selector-button:hover,
input[type="file"]::-webkit-file-upload-button:hover {
    background: var(--color-primary-dark);
}

/* Tätigkeitshinweis beim Speichern (siehe apFormBusyIndikator in _Layout.cshtml): ein
   schmaler, animierter Fortschrittsbalken oben am Viewport-Rand (modernes Pendant zur
   "Eieruhr" - vergleichbar mit GitHub/YouTube) plus ein kleiner Spinner im geklickten
   Speichern-Button samt Textänderung. Da Formulare hier klassisch per POST abgeschickt
   werden (kein AJAX), läuft die Animation einfach unbestimmt weiter, bis entweder die neue
   Seite geladen wird oder - bei einem Validierungsfehler - dieselbe Seite neu vom Server
   kommt; in beiden Fällen verschwindet der alte DOM-Zustand ohnehin automatisch. */
.ap-progress-bar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 3px;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.ap-progress-bar::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 40%;
    background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
    animation: ap-progress-sweep 1.1s ease-in-out infinite;
}
html.ap-form-busy .ap-progress-bar { opacity: 1; }

@keyframes ap-progress-sweep {
    0% { left: -40%; }
    100% { left: 100%; }
}

.ap-spinner {
    display: inline-block;
    width: 13px;
    height: 13px;
    margin-right: 7px;
    vertical-align: -2px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    opacity: 0.85;
    animation: ap-spin 0.6s linear infinite;
}
@keyframes ap-spin { to { transform: rotate(360deg); } }

.actions { display: flex; gap: 10px; margin-top: 20px; }

/* Dauerhaft am unteren Bildschirmrand sichtbare Fußleiste - ursprünglich für die
   Bearbeiten-/Neu-Formulare (Live-Summenanzeige analog zur Summentabelle im PDF plus
   Speichern-/Abbrechen-Schalter), seit der Überarbeitung der Summendarstellung auch für die
   Beleglisten (Rechnungen/Angebote/Aufträge/Lieferscheine) wiederverwendet, dort ohne Schalter,
   nur mit der Gesamtsumme über alle - ggf. gefilterten - Belege. Erspart in beiden Fällen bei
   langen Listen das Herunterscrollen, um die aktuelle Summe zu sehen bzw. zu speichern.
   position:fixed statt sticky, damit es unabhängig vom Scroll-Container zuverlässig am
   Viewport-Rand bleibt. */
.ap-sticky-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 80;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
}
.ap-sticky-footer-inner {
    max-width: var(--seiten-breite);
    margin: 0 auto;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}
.ap-sticky-footer-summe {
    display: flex;
    align-items: baseline;
    gap: 18px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--color-muted);
}
.ap-sticky-footer-zeile strong { color: var(--color-text); font-variant-numeric: tabular-nums; }
.ap-sticky-footer-brutto { font-size: 15px; }
.ap-sticky-footer-brutto strong { font-size: 16px; }
.ap-sticky-footer-buttons { display: flex; gap: 10px; flex-shrink: 0; }
/* Platzhalter, damit der letzte Kartenabschnitt nicht hinter der fixierten Fußleiste
   verschwindet, wenn bis ganz nach unten gescrollt wird. */
.ap-sticky-footer-spacer { height: 84px; }

table.invoice-list {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    table-layout: fixed;
}
table.invoice-list th, table.invoice-list td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    font-size: 13.5px;
    vertical-align: top;
}
table.invoice-list th { color: var(--color-muted); font-weight: 600; }
table.invoice-list tr:last-child td { border-bottom: none; }

/* Bankkonten-Tabelle (Firmendaten/Mitarbeiter/Kontakte, siehe wwwroot/js/
   bankverbindungen-tabelle.js) - festes Spaltenraster, sonst verteilt der Browser die Breite
   bei rein textbasierten Spalten ungleichmäßig. Führende Checkbox-Spalte (App-Standard-
   Datensatzselektor) ist hier tatsächlich die erste Spalte, daher - anders als früher, wo
   "Bankname" zufällig an erster Stelle stand - KEINE ":first-child"-Ausnahme mehr nötig, die
   generische .ap-table-Regel (schmal, zentriert) passt bereits von selbst. */
.bankkonten-table { table-layout: fixed; }
.bankkonten-table th.col-bankname, .bankkonten-table td.col-bankname { width: 32%; }
.bankkonten-table th.col-iban, .bankkonten-table td.col-iban { width: 30%; }
.bankkonten-table th.col-bic, .bankkonten-table td.col-bic { width: 20%; }
.bankkonten-table th.col-standard, .bankkonten-table td.col-standard { width: 90px; text-align: center; }

/* Ansprechpartner-Tabelle (Kontakt bearbeiten/anlegen) - reine Anzeigetabelle mit führender
   Checkbox-Spalte (wie die übrigen Listen der Anwendung), daher hier bewusst KEINE Ausnahme für
   ":first-child" mehr nötig - die generische .ap-table-Regel (schmal, zentriert) passt bereits. */
.ansprechpartner-table { table-layout: fixed; }
/* Dateiablage-Tabelle (Pages/Einstellungen/Optionen.cshtml, Karte "Dateiablage") - "Belegart"
   ist hier (wie "Bankname" bei .bankkonten-table oben) zufällig die erste Spalte und daher
   von der generischen ".ap-table th/td:first-child"-Regel (schmal, zentriert - eigentlich für
   Checkbox-Spalten gedacht) betroffen; hier gezielt aufgehoben. Zusätzlich vertical-align:middle
   auf beiden Zellen der Datenzeilen, damit "Belegart" auf gleicher Höhe wie das (durch sein
   Padding etwas höhere) Eingabefeld für den Unterordnernamen steht. */
.dateiablage-table th:first-child, .dateiablage-table td:first-child { text-align: left; width: 220px; }
.dateiablage-table td { vertical-align: middle; }

/* Telefonate-Tabelle (Pages/Kontakte/Edit.cshtml, Karte "Telefonate") - "Datum/Zeit" ist hier
   die erste Spalte, daher dieselbe Ausnahme wie bei .dateiablage-table/.bankkonten-table oben
   nötig. */
.telefonate-table th:first-child, .telefonate-table td:first-child { text-align: left; width: auto; }
.telefonate-table td { vertical-align: middle; }

/* Nummernkreise-Tabelle(n) (Pages/Einstellungen/Optionen.cshtml, Karte "Nummernkreise") -
   "Bereich" ist hier (wie "Belegart" bei .dateiablage-table oben) zufällig die erste Spalte und
   daher von der generischen ".ap-table th/td:first-child"-Regel (schmal, zentriert) betroffen;
   hier gezielt aufgehoben (Nutzer-Feedback). Zusätzlich vertical-align:middle auf "Bereich",
   "Vorschau" und "Zuletzt vergeben", damit diese auf gleicher Höhe wie die (durch ihr Padding
   etwas höheren) Eingabefelder/Auswahllisten der übrigen Spalten stehen. */
#nummernkreiseTabelle th:first-child, #nummernkreiseTabelle td:first-child,
#kontaktNummernkreiseTabelle th:first-child, #kontaktNummernkreiseTabelle td:first-child {
    text-align: left;
    width: auto;
}
/* Die beiden Tabellen "Nummernkreise" und "Kontakte" stehen optisch direkt untereinander und
   sollen wie eine gemeinsame, durchgehende Tabelle wirken - Werte in gleichartigen Spalten
   (z. B. "Zuletzt vergeben") sollen exakt untereinanderstehen (Nutzer-Feedback: "gleiche
   Spaltenbreiten, damit alle Werte korrekt untereinander stehen"). Ohne explizite Breiten
   bemisst jede <table> ihre Spalten unabhängig anhand ihres eigenen Inhalts (Standard:
   table-layout:auto) - je nach Textlänge in "Bereich"/"Kategorie" bzw. "Zurücksetzen" ergeben
   sich dadurch leicht unterschiedliche Spaltenbreiten zwischen beiden Tabellen. Beide Tabellen
   erhalten daher dieselben, prozentual identischen Spaltenbreiten über ein <colgroup> (siehe
   .cshtml) - table-layout:fixed sorgt dafür, dass diese Breiten auch tatsächlich eingehalten
   werden (statt nur als Mindestbreite zu gelten, die der Inhalt überschreiten könnte), und da
   beide Tabellen dieselbe Gesamtbreite (100 % derselben Kartenbreite) haben, ergeben identische
   Prozentwerte automatisch identische Pixelbreiten. */
.nk-tabelle { table-layout: fixed; }
#nummernkreiseTabelle td:first-child,
#kontaktNummernkreiseTabelle td:first-child,
#nummernkreiseTabelle td.nk-vorschau,
#kontaktNummernkreiseTabelle td.nk-vorschau,
#nummernkreiseTabelle td.nk-letzte-vergabe,
#kontaktNummernkreiseTabelle td.nk-letzte-vergabe {
    vertical-align: middle;
}

.ansprechpartner-table th.col-vorname, .ansprechpartner-table td.col-vorname { width: 18%; }.ansprechpartner-table th.col-nachname, .ansprechpartner-table td.col-nachname { width: 18%; }
.ansprechpartner-table th.col-funktion, .ansprechpartner-table td.col-funktion { width: 19%; }
.ansprechpartner-table th.col-telefon, .ansprechpartner-table td.col-telefon { width: 14%; }
.ansprechpartner-table th.col-handy, .ansprechpartner-table td.col-handy { width: 14%; }
.ansprechpartner-table th.col-email, .ansprechpartner-table td.col-email { width: 19%; }

/* Status-Badge (Rechnungen/Angebote/Lieferscheine) - Klick öffnet ein Dropdown-Menü direkt an
   der Zeile, mit dem sich der Status ändern lässt (fachlich wie ein Kontextmenü, aber
   klick- statt rechtsklick-basiert, damit es auch auf Touch-Geräten funktioniert). */
.status-badge {
    display: inline-block;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.status-badge:hover { filter: brightness(0.96); }
/* Rein informative Badges (Nutzer-Feedback: "als Anwender würde ich immer davon ausgehen,
   dass hinter einem Status-Badge eine Funktion liegt" - zurecht, denn .status-badge sieht
   oben IMMER klickbar aus, auch wenn gar kein Statuswechsel-Menü angebunden ist). Diese
   Modifikator-Klasse nimmt einem Badge ohne echte Klick-Funktion die entsprechende Optik
   wieder weg, während echte Belege (Angebote/Aufträge/Rechnungen/Lieferscheine/
   Eingangsrechnungen/Zahlungspläne/Honorarvereinbarungen/Projekte) unverändert klickbar
   bleiben - siehe deren jeweiliges .status-menu-Skript.*/
.status-badge.status-badge-ro { cursor: default; }
.status-badge.status-badge-ro:hover { filter: none; }
.status-badge.grau { background: var(--tint-grau-bg); color: var(--tint-grau-fg); }
.status-badge.orange { background: var(--tint-orange-bg); color: var(--tint-orange-fg); }
.status-badge.blau { background: var(--tint-blau-bg); color: var(--tint-blau-fg); }
.status-badge.gruen { background: var(--tint-gruen-bg); color: var(--tint-gruen-fg); }
.status-badge.rot-hell { background: var(--tint-rot-hell-bg); color: var(--tint-rot-hell-fg); }
.status-badge.rot { background: var(--tint-rot-bg); color: var(--tint-rot-fg); }
.status-badge.rot-dunkel { background: var(--tint-rot-dunkel-bg); color: var(--tint-rot-dunkel-fg); }
.status-badge.schwarz { background: var(--tint-schwarz-bg); color: var(--tint-schwarz-fg); }

/* Summenkontrolle unterhalb der Positionstabelle bei Honorarvereinbarungen/Zahlungsplänen -
   zeigt auf einen Blick, ob die Anteile der Positionen zusammen 100 % ergeben und ob die
   daraus berechnete Nettosumme mit der Auftragssumme/Honorarsumme übereinstimmt
   (Nutzer-Wunsch). Wiederverwendet die vorhandenen .status-badge-Farbklassen (grün/orange/rot)
   statt eigener Stile. */
.summenkontrolle {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

/* Stornorechnungen haben keinen eigenen Status (sind bereits mit Erzeugung final) - anstelle
   des klickbaren Status-Badge erscheint hier nur der Hinweistext "Storno", ohne Klickfunktion
   und ohne Statuswechsel-Menü (siehe .status-menu weiter unten, das nur an .status-badge hängt,
   nicht an diese Klasse). BEWUSST OHNE eigene font-size-Angabe (anders als noch beim ersten
   Versuch dieser Regel): der Text soll sich NICHT an der kleineren Badge-Schrift orientieren,
   sondern an der normalen Schriftgröße der übrigen Werte in dieser Zeile (Betrag-Spalten etc.,
   siehe "table.invoice-list td") - er erbt sie daher schlicht von der umgebenden Tabellenzelle,
   statt sie zu überschreiben (Nutzer-Feedback: "Storno" wirkte im Vergleich zu den Beträgen der
   eigenen Zeile zu klein, nicht im Vergleich zu den Status-Badges anderer Zeilen). Farbe rot
   ergibt sich aus der Zeilenklasse .row-storno weiter unten. */
.status-badge-none {
    color: var(--color-muted);
    cursor: default;
    user-select: none;
}

/* Stornorechnungen in der Liste optisch klar von normalen Rechnungen abheben. */
.invoice-row.row-storno { color: var(--color-danger); }
.invoice-row.row-storno .status-badge-none { color: var(--color-danger); }

/* Rechnungen "in Bearbeitung" (Entwurf, noch ohne Rechnungsnummer) bekommen einen weichen,
   hellgelben Hintergrund, damit sie in der Liste auf einen Blick als "noch nicht fertig"
   erkennbar sind (Nutzer-Wunsch) - eigene, bewusst hellere Farbe als die kräftigere
   Warnfarbe (siehe --color-entwurf-bg oben). Per :not() bewusst NICHT mit .row-storno
   kombiniert (eine stornierte Rechnung war zwangsläufig vorher bereits fertiggestellt, kann
   also nicht gleichzeitig "in Bearbeitung" sein). */
.invoice-row.row-entwurf:not(.row-storno) td { background: var(--color-entwurf-bg); }

/* Rechnungen "in Bearbeitung" stehen in der Liste immer oben (je Jahresgruppe) - die letzte
   davon wird per etwas dickerer Linie von den Rechnungen mit bereits vergebener
   Rechnungsnummer getrennt (Nutzer-Vorgabe; Klasse wird in Pages/Invoices/Index.cshtml
   serverseitig gesetzt und nach einer Suche per JS neu berechnet). */
.invoice-row.row-entwurf-trenner td { border-bottom: 2px solid var(--color-muted); }

/* Fällige Rechnungen (Status "Fällig") - bewusst OHNE weitere Farbe hervorgehoben, da Badges
   und Entwürfe bereits farbig sind (Nutzer-Vorgabe Variante B): dunkler Randbalken in
   Textfarbe links an der Zeile, Rechnungsnummer und offener Betrag fett. Dazu die
   Sammelzeile .faellig-leiste über der Liste (siehe Pages/Invoices/Index.cshtml). */
.invoice-row.row-faellig td:first-child { box-shadow: inset 4px 0 0 var(--color-text); }
.invoice-row.row-faellig td.col-nr,
.invoice-row.row-faellig td.col-offen { font-weight: 700; }
.mobile-beleg-karte.mobile-beleg-karte-faellig { box-shadow: inset 4px 0 0 var(--color-text); }
.mobile-beleg-karte.mobile-beleg-karte-faellig .mobile-beleg-nr { font-weight: 700; }

/* Gemahnte Rechnungen: derselbe seitliche Balken, aber in der Farbe der jeweiligen Mahnstufe
   (abgeleitet aus den Badge-Farben, von hell- bis dunkelrot; Stufe 1 bewusst aufgehellt, da
   sich die Schriftfarben von Stufe 1 und 2 als schmaler Balken kaum unterscheiden) - ohne
   Sammelzeile und ohne Fettschrift (Nutzer-Vorgabe). */
.invoice-row.row-mahnstufe-1 td:first-child,
.mobile-beleg-karte.mobile-beleg-karte-mahnstufe-1 { box-shadow: inset 4px 0 0 color-mix(in srgb, var(--tint-rot-hell-fg) 45%, transparent); }
.invoice-row.row-mahnstufe-2 td:first-child,
.mobile-beleg-karte.mobile-beleg-karte-mahnstufe-2 { box-shadow: inset 4px 0 0 var(--tint-rot-hell-fg); }
.invoice-row.row-mahnstufe-3 td:first-child,
.mobile-beleg-karte.mobile-beleg-karte-mahnstufe-3 { box-shadow: inset 4px 0 0 var(--tint-rot-dunkel-fg); }

.faellig-leiste {
    display: flex;
    align-items: center;
    gap: 8px 12px;
    flex-wrap: wrap;
    padding: 8px 12px;
    margin: 0 0 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius, 6px);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 14px;
}
.faellig-leiste-text { flex: 1 1 auto; }
.faellig-leiste-teil { white-space: nowrap; }
.faellig-leiste-btn {
    margin-left: auto;
    padding: 4px 10px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    color: var(--color-text) !important;
    text-decoration: none !important;
    white-space: nowrap;
}
.faellig-leiste-btn:hover { background: var(--color-bg-hover); }
.mobile-beleg-karte.mobile-beleg-karte-entwurf-trenner { border-bottom: 3px solid var(--color-muted); margin-bottom: 8px; }

/* Dieselbe Kennzeichnung für die mobile Kachelliste (siehe .mobile-beleg-karte oben). */
.mobile-beleg-karte.mobile-beleg-karte-entwurf { background: var(--color-entwurf-bg); }

.status-menu {
    /* "fixed" statt "absolute": Die Positionierung wird per JS ausschließlich mit
       viewport-relativen Koordinaten (getBoundingClientRect(), ohne manuelle
       scrollX/scrollY-Korrektur) berechnet - siehe z. B. Invoices/Index.cshtml. Bei
       "absolute" wäre die Position stattdessen relativ zum nächsten positionierten
       Vorfahren (hier: ".content", das wegen des Logos in der oberen rechten Ecke
       "position: relative" trägt) statt relativ zum Dokumentursprung - das führte
       dazu, dass sich das Menü weit neben dem tatsächlich angeklickten Schalter
       öffnete, sobald ".content" (zentriert, max-width var(--seiten-breite)) nicht bei (0,0) begann.
       "fixed" ist von einem "position: relative"-Vorfahren unbeeinflusst und bezieht
       sich immer zuverlässig auf den Viewport. */
    position: fixed;
    /* Höher als alle sonstigen fixierten/sticky Ebenen (Topbar 210, App-Logo-Leiste 95,
       Listenkopf 90, Aktionsleiste/Fußleiste 80) - das Menü kann sich je nach angeklicktem
       Schalter praktisch überall auf der Seite öffnen (auch z. B. über einer Statuszeile
       kurz oberhalb der neuen, immer sichtbaren Summen-Fußleiste) und muss dabei immer
       zuoberst liegen. */
    z-index: 250;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 8px 22px var(--color-shadow-sm);
    min-width: 190px;
    padding: 4px 0;
    display: none;
}
.status-menu ul { list-style: none; margin: 0; padding: 0; }
.status-menu li {
    padding: 8px 14px;
    font-size: 13.5px;
    cursor: pointer;
    color: var(--color-text);
}
.status-menu li:hover { background: var(--color-bg-alt2); }
.status-menu li.status-menu-danger { color: var(--color-danger); }
.status-menu li.status-menu-separator { border-top: 1px solid var(--color-border); margin-top: 4px; padding-top: 8px; }
/* Aktive Auswahl innerhalb eines ".status-menu" (z. B. die gerade gewählte Kategorie im
   "Filter"-Untermenü der Kontaktliste, siehe Pages/Kontakte/Index.cshtml) - bislang kannte
   ".status-menu li" nur den Hover-Zustand, keinen dauerhaft markierten "aktiv"-Zustand. */
.status-menu li.active { font-weight: 600; color: var(--color-primary); }
.status-menu li.active::before { content: "✓ "; }

/* Eintrag im "…"-Überlaufmenü, der beim Klick (statt einer eigenen Aktion) ein weiteres,
   per JS positioniertes ".status-menu"-Untermenü öffnet (z. B. "Filter" bei
   Pages/Kontakte/Index.cshtml und Pages/Auswertungen/GoBD.cshtml) - der Pfeil rechtsbündig
   signalisiert, dass sich hier noch etwas öffnet, statt direkt eine Aktion auszulösen. */
.ap-overflow-submenu-caret { margin-left: auto; color: var(--color-muted); }

/* E-Mail-Versand-Dialog (Rechnungen/Angebote/Lieferscheine/Aufträge) - einfacher, zentrierter
   Modal-Dialog über einem abgedunkelten Hintergrund. */
.email-modal { display: none; position: fixed; inset: 0; z-index: 220; }
.email-modal-backdrop { position: absolute; inset: 0; background: var(--color-modal-backdrop); }
.email-modal-dialog {
    position: relative;
    z-index: 1;
    background: var(--color-surface);
    border-radius: var(--radius);
    box-shadow: 0 16px 40px var(--color-shadow-lg);
    width: 560px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    margin: 32px auto;
    padding: 22px 24px;
    color: var(--color-text);
}
.email-modal-dialog h2 { margin: 0 0 4px; }
.email-modal-dialog .field { margin-top: 12px; }
.email-modal-dialog textarea { min-height: 140px; }
/* Im Termin-Dialog genügt eine kürzere Beschreibung (Dialog muss auch bei 1920x1080 ohne
   Scrollen passen, Nutzer-Feedback) - per Ziehen weiterhin vergrößerbar. */
.email-modal-dialog-termin textarea { min-height: 60px; }
.email-modal-error {
    display: none;
    margin-top: 14px;
    padding: 10px 12px;
    border-radius: var(--radius);
    background: var(--color-danger-bg);
    border: 1px solid var(--color-danger);
    color: var(--color-danger);
    font-size: 13px;
}
.email-modal-error.visible { display: block; }

/* Termin-Dialog (siehe Pages/Kalender/Index.cshtml, #terminModal) - eigene, robustere
   Zentrierung statt der sonst üblichen margin:auto-Zentrierung von .email-modal-dialog:
   Auf Mobilgeräten wurde der Dialog beobachtet, wie er rechts abgeschnitten und nicht mittig
   geöffnet wurde (Nutzer-Rückmeldung) - vermutlich durch eine Kombination aus dem breiten
   FullCalendar-Wochenraster (das auf schmalen Bildschirmen mehr Platz beansprucht als der
   sichtbare Viewport) und der zuvor fest inline gesetzten Breite (style="width:520px").
   Flexbox-Zentrierung auf dem äußeren, ohnehin bereits "position: fixed; inset:0"
   positionierten .email-modal-Wrapper ist deutlich robuster gegenüber solchen Fällen als
   margin:auto, da sie unabhängig von der Breite umgebender Inhalte tatsächlich relativ zum
   eigenen (Fixed-)Positionierungskontext zentriert - siehe zugehörige JS-Änderung in
   wwwroot/js/kalender.js (display:block -> display:flex beim Öffnen). Nur für DIESEN Dialog
   (".email-modal-dialog-termin"), nicht für die geteilte .email-modal-Basisklasse, um den an
   anderer Stelle verwendeten E-Mail-Versand-Dialog nicht zu verändern. */
#terminModal.email-modal {
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.email-modal-dialog-termin {
    width: 520px;
    max-width: 100%;
    margin: 0;
}
.email-modal-dialog .actions { margin-top: 18px; }

/* Termin-Dialog: Protokollzeile "Angelegt von ... am ... · Geändert von ... am ..." und
   Mehrfachauswahl "Für" (siehe Pages/Kalender/Index.cshtml). */
.termin-protokoll {
    font-size: 12.5px;
    color: var(--color-muted);
    margin: -6px 0 12px;
}
.termin-protokoll:empty { display: none; }
.termin-hinweis { font-weight: normal; color: var(--color-muted); font-size: 12.5px; }
/* Schalter "Für" im Termin-Dialog - sieht aus wie ein Auswahlfeld, öffnet aber die
   Auswahlbox .termin-fuer-auswahl (Mehrfachauswahl mit Suche). */
.termin-fuer-schalter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 7px 9px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}
.termin-fuer-schalter:hover { border-color: var(--color-primary); }
.termin-fuer-schalter > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.termin-fuer-caret { font-size: 10px; opacity: 0.7; flex: 0 0 auto; }

/* Schaltflächenleiste des Termin-Dialogs bleibt beim Scrollen unten sichtbar (bei kleinen
   Bildschirmhöhen musste man sonst erst bis "Speichern" scrollen). bottom = -padding-bottom
   des Dialogs, damit die Leiste bündig am unteren Rand klebt. */
.email-modal-dialog-termin .actions {
    position: sticky;
    bottom: -22px;
    background: var(--color-surface);
    margin-bottom: -22px;
    padding: 12px 0 22px;
    z-index: 2;
}

/* Auswahlbox "Für" - eigenes, kleines Fenster über dem Termin-Dialog. */
.termin-fuer-auswahl {
    display: none;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    width: 380px;
    max-width: calc(100vw - 32px);
    height: min(560px, calc(100vh - 96px));
    flex-direction: column;
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 16px 40px var(--color-shadow-lg);
}
.termin-fuer-auswahl.offen { display: flex; }
/* Abdunklung des Termin-Dialogs, solange die Auswahlbox offen ist. */
.termin-fuer-abdunklung { display: none; position: fixed; inset: 0; z-index: 4; background: var(--color-modal-backdrop); }
.termin-fuer-auswahl.offen + .termin-fuer-abdunklung { display: block; }
.termin-fuer-auswahl-zeile { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.termin-link-btn {
    background: none;
    border: none;
    padding: 0;
    color: var(--color-primary);
    font: inherit;
    font-size: 12.5px;
    cursor: pointer;
    text-decoration: underline;
}
.termin-fuer-auswahl-kopf { padding: 16px 18px 10px; border-bottom: 1px solid var(--color-border); }
.termin-fuer-auswahl-kopf h3 { margin: 0 0 2px; font-size: 16px; }
.termin-fuer-auswahl-kopf .termin-hinweis { margin: 0 0 8px; }
.termin-fuer-auswahl-kopf input {
    width: 100%;
    box-sizing: border-box;
    padding: 7px 9px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font: inherit;
    font-size: 14px;
    background: var(--color-surface);
    color: var(--color-text);
}
.termin-fuer-liste { overflow-y: auto; padding: 6px 18px; min-height: 80px; flex: 1 1 auto; }
.termin-fuer-liste label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    font-weight: normal;
    margin: 0;
    cursor: pointer;
}
.termin-fuer-liste .termin-hinweis { display: block; padding: 8px 0; }
.termin-fuer-auswahl-fuss {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px 14px;
    border-top: 1px solid var(--color-border);
}
.termin-fuer-auswahl-fuss { justify-content: flex-end; }
.termin-fuer-anzahl { font-size: 12.5px; color: var(--color-muted); }

/* Selbst gestalteter Bestätigungsdialog (wwwroot/js/bestaetigen-dialog.js) - ersetzt das
   browsereigene window.confirm() app-weit (Nutzer-Vorgabe), nutzt bewusst dieselben
   .email-modal*-Klassen wie die übrigen Dialoge der Anwendung, hier nur schmaler, da er nur
   aus Text und zwei Schaltflächen besteht. */
.bestaetigen-modal-dialog { width: 420px; }
/* Rückfrage "Nur diesen Termin / Ganze Serie" im Kalender (Pages/Kalender/Index.cshtml). */
#serieModal.email-modal { align-items: center; justify-content: center; padding: 16px; }
.serie-modal-dialog { width: 440px; margin: 0; }
.serie-modal-aktionen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.serie-modal-aktionen #serieModalAbbrechen { margin-left: auto; }
.bestaetigen-modal-text { margin: 0; white-space: pre-line; }

/* Ansprechpartner-Bearbeitungsdialog (wwwroot/js/ansprechpartner-verwaltung.js) - nutzt
   bewusst dieselben .email-modal*-Klassen wie der E-Mail-Versand-Dialog (siehe auch
   kalkulation-anzeige.js für dasselbe Vorgehen), hier nur mit eigener Breite und einem
   zweispaltigen Layout (Formularfelder links, Foto rechts). */
.ansprechpartner-modal-dialog { width: 720px; }
.ap-modal-layout {
    display: grid;
    grid-template-columns: 1fr 180px;
    gap: 20px;
    align-items: stretch;
}
@media (max-width: 640px) {
    .ap-modal-layout { grid-template-columns: 1fr; }
}
.ap-modal-foto { display: flex; flex-direction: column; }
.ap-standard-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    color: var(--color-text);
    cursor: pointer;
    user-select: none;
}
.ap-standard-checkbox input[type="checkbox"] { width: auto; }
/* Aktionszeile des Ansprechpartner-Dialogs: Übernehmen/Abbrechen links, Standardansprechpartner-
   Checkbox rechtsbündig in derselben Zeile (siehe Screenshot-Vorgabe) statt wie zuvor inline
   zwischen den übrigen Feldern. */
.ap-modal-actions { display: flex; align-items: center; justify-content: space-between; }

/* Foto-Dropzone im Passfoto-Standardformat (Seitenverhältnis 35:45, wie ein klassisches
   biometrisches Passfoto) - Drag&Drop einer Bilddatei oder Klick öffnet die Dateiauswahl
   (siehe initialisiereFotoDropzone). Das eigentliche Herunterskalieren/Zurechtschneiden auf
   dieses Format übernimmt object-fit:cover in der Vorschau; das Originalbild wird dafür NICHT
   destruktiv beschnitten. Bewusst OHNE eigene Überschrift/Caption über der Box (die eingebaute
   Platzhalter-Beschriftung "Foto hierher ziehen oder klicken" erklärt die Fläche bereits selbst)
   - eine separate Caption geriet bei nach oben gescrollter/kurzer Ansicht sonst unter die fest
   positionierte Kopfzeile (siehe z-index-Korrektur bei .email-modal weiter oben).*/
.ap-foto-dropzone {
    position: relative;
    width: 180px;
    flex: 1;
    min-height: 260px;
    border: 2px dashed var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg-alt2);
    cursor: pointer;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.12s ease, background 0.12s ease;
}
.ap-foto-dropzone:hover, .ap-foto-dropzone:focus-visible {
    border-color: var(--color-primary);
    outline: none;
}
.ap-foto-dropzone.active { border-color: var(--color-primary); background: var(--color-primary-tint); }
.ap-foto-preview { width: 100%; height: 100%; object-fit: cover; display: block; }
.ap-foto-platzhalter {
    text-align: center;
    font-size: 12px;
    color: var(--color-muted);
    padding: 0 10px;
    line-height: 1.4;
}
.ap-foto-platzhalter-icon { font-size: 26px; margin-bottom: 6px; }
.ap-foto-entfernen { width: 100%; margin-top: 8px; }

/* Die Ansprechpartner-Toolbar sitzt innerhalb einer auf-/zuklappbaren Karte mitten auf der
   Seite (nicht wie .ap-actionbar sonst üblich ganz oben als fixierte Listen-Werkzeugleiste) -
   daher hier bewusst NICHT sticky positioniert, sondern normal im Textfluss. Gleiches Vorgehen
   wie bei .email-modal-dialog .ap-actionbar weiter unten in dieser Datei. */
.ap-actionbar.ap-actionbar-embedded { position: static; top: auto; }

/* Serverseitiger Verzeichnis-Browser-Dialog (Firmendaten -> Backup) - dasselbe
   Grund-Layout wie der E-Mail-Dialog, mit einer scrollbaren Ordnerliste. */
.verzeichnis-modal { display: none; position: fixed; inset: 0; z-index: 220; }
.verzeichnis-modal-backdrop { position: absolute; inset: 0; background: var(--color-modal-backdrop); }
.verzeichnis-modal-dialog {
    position: relative;
    z-index: 1;
    background: var(--color-surface);
    border-radius: var(--radius);
    box-shadow: 0 16px 40px var(--color-shadow-lg);
    width: 520px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    margin: 32px auto;
    padding: 22px 24px;
    color: var(--color-text);
}
.verzeichnis-modal-dialog .actions { margin-top: 16px; }
.verzeichnis-liste {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    max-height: 320px;
    overflow-y: auto;
}
.verzeichnis-eintrag {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 13.5px;
    cursor: pointer;
    border-bottom: 1px solid var(--color-border);
}
.verzeichnis-eintrag:last-child { border-bottom: none; }
.verzeichnis-eintrag:hover { background: var(--color-bg-alt2); }
.verzeichnis-eintrag.verzeichnis-eintrag-eltern { color: var(--color-muted); font-style: italic; }
.verzeichnis-eintrag-leer { padding: 14px 12px; color: var(--color-muted); font-size: 13px; text-align: center; }
.verzeichnis-modal-fehler {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: var(--radius);
    background: var(--color-danger-bg);
    border: 1px solid var(--color-danger);
    color: var(--color-danger);
    font-size: 13px;
}

/* TreeView der Projektverzeichnisse (Pages/Projekte/Edit.cshtml, Karte
   "Projektverzeichnisse") - Ordner/Dateien unterhalb des Projektstammverzeichnisses. */
.pv-tree-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-border);
    flex-wrap: wrap;
}
.pv-tree-wrap {
    margin-top: 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    max-height: 420px;
    overflow-y: auto;
    background: var(--color-bg-alt);
}
.pv-tree { padding: 6px 0; font-size: 13.5px; }
.pv-node-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px 5px 0;
    cursor: pointer;
    border-radius: 4px;
    user-select: none;
    white-space: nowrap;
}
.pv-node-row:hover { background: var(--color-bg-hover); }
.pv-node-row.selected { background: var(--color-row-selected); }
.pv-node-row.pv-drop-target {
    background: var(--color-primary-soft, var(--color-row-selected));
    outline: 2px dashed var(--color-primary);
    outline-offset: -2px;
}
.pv-tree.pv-drop-target-root {
    outline: 2px dashed var(--color-primary);
    outline-offset: -2px;
}
/* Während eine Datei-Zeile per internem Drag&Drop gezogen wird (siehe
   wwwroot/js/projektverzeichnis-tree.js, dragstart auf einer Datei-Zeile) - dieselbe leichte
   Abblendung, wie sie viele Datei-Explorer für das gerade "aufgenommene" Element zeigen. */
.pv-node-row.pv-dragging { opacity: 0.45; }
.pv-node-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    font-size: 9px;
    color: var(--color-muted);
    flex: 0 0 auto;
}
.pv-node-icon { flex: 0 0 auto; font-size: 14px; }
.pv-node-name { overflow: hidden; text-overflow: ellipsis; }
.pv-node-badge {
    flex: 0 0 auto;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-muted);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}
.pv-node-hinweis { padding: 5px 10px; color: var(--color-muted); font-style: italic; }

table.invoice-list th.col-nr, table.invoice-list td.col-nr { width: 13%; white-space: nowrap; }
table.invoice-list th.col-datum, table.invoice-list td.col-datum { width: 16%; }
table.invoice-list th.col-kunde, table.invoice-list td.col-kunde { width: 40%; }
table.invoice-list th.col-betrag, table.invoice-list td.col-betrag { width: 15%; white-space: nowrap; }

/* Belegliste mit Statusspalte (Rechnungen/Angebote/Lieferscheine) - eigene Breiten, damit die
   Kundenliste (nutzt dieselben Basisklassen) davon unberührt bleibt. */
table.invoice-list.has-status th.col-nr, table.invoice-list.has-status td.col-nr { width: 12%; }
table.invoice-list.has-status th.col-datum, table.invoice-list.has-status td.col-datum { width: 14%; }
table.invoice-list.has-status th.col-kunde, table.invoice-list.has-status td.col-kunde { width: 24%; }
/* Rechnungsliste: Stornonummern ("RE-2026-030-1") sind länger als normale Nummern - die
   Nummernspalte bekommt etwas mehr Platz, auf Kosten des Abstands zwischen Datum und Kunde
   (Nutzer-Vorgabe). Nur hier, die übrigen Belegarten behalten die Aufteilung oben. */
table.invoice-list.has-status.rechnungen-liste th.col-nr, table.invoice-list.has-status.rechnungen-liste td.col-nr { width: 14%; }
table.invoice-list.has-status.rechnungen-liste th.col-datum, table.invoice-list.has-status.rechnungen-liste td.col-datum { width: 12%; }
table.invoice-list.rechnungen-liste td.col-datum .badge { white-space: nowrap; }

/* Pages/Kontakte/Index.cshtml: eigene, kompaktere Spaltenaufteilung statt der generischen
   .col-kunde/.col-datum-Breiten - E-Mail und Kategorie(n) liefen zuvor durch zu breite
   Nachbarspalten ineinander bzw. wurden von umbrechenden Badges zu breit gezogen. */
table.kontakte-table th.col-nr, table.kontakte-table td.col-nr { width: 8%; white-space: nowrap; }
table.kontakte-table th.col-name, table.kontakte-table td.col-name { width: 22%; }
table.kontakte-table th.col-anschrift, table.kontakte-table td.col-anschrift { width: 21%; }
table.kontakte-table th.col-telefon, table.kontakte-table td.col-telefon { width: 14%; white-space: nowrap; }
table.kontakte-table th.col-email, table.kontakte-table td.col-email { width: 16%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 0; }
table.kontakte-table th.col-kategorien, table.kontakte-table td.col-kategorien { width: 13%; }
table.invoice-list.has-status th.col-status, table.invoice-list.has-status td.col-status { width: 23%; }
/* Dünne Trennlinie vor jeder Euro-Wertspalte - Angebote/Aufträge/Lieferscheine/Rechnungen/
   Honorarvereinbarungen/Zahlungspläne teilen sich alle dieselbe .has-status-Tabellenstruktur
   (daher hier eine gemeinsame Regel statt neun einzelner) - macht die Spaltengrenze sichtbar,
   analog zur Projekte-Liste weiter unten (Nutzer-Wunsch, dortselbe Begründung). Trifft als
   Nebeneffekt auch die strukturgleichen "Rechnungen (Ausgang)"-Unterlisten auf Pages/Kontakte/
   Edit.cshtml und Pages/Projekte/Edit.cshtml (mehrere Euro-Spalten nebeneinander - dieselbe
   Begründung gilt dort ebenso). */
table.invoice-list.has-status th.col-betrag, table.invoice-list.has-status td.col-betrag { width: 15%; border-left: 1px solid var(--color-border); }

/* Projekte-Liste - eigene, auf genau diese neun Datenspalten zugeschnittene Breiten (Summe
   100%), statt der obigen invoice-list/has-status-Regeln: die Projekte-Liste hat mit
   Bezeichnung/Kunde/Ort DREI textlastige Spalten und mit Umsatz/Kosten/Rohgewinn DREI
   Betragsspalten gleichzeitig - eine einfache Wiederverwendung der für andere Listen
   gedachten col-kunde-/col-betrag-Breiten hätte in Summe weit über 100% ergeben und dadurch
   (bei table-layout:fixed) Kopf-/Zellinhalte sichtbar ineinanderlaufen lassen. */
/* Eingangsrechnungen-Liste - eigene Breiten für die hier andere Spaltenreihenfolge/-anzahl
   (Rechnungsdatum/Rechnungsnr./Zahlungsziel/Rechnungssteller/Betrag/Projekt/Status/Art) als bei
   den has-status-Beleglisten oben, aus demselben Grund wie bei .projekt-list: eine einfache
   Wiederverwendung der dortigen Prozentsätze würde bei table-layout:fixed die Kopf-/Zellinhalte
   ineinanderlaufen lassen, da hier vier statt zwei schmale "col-nr"-artige Spalten (Rechnungsnr.,
   Projekt, Status, Art) gleichzeitig vorkommen. */
table.invoice-list.eingangsrechnungen-liste th.col-datum, table.invoice-list.eingangsrechnungen-liste td.col-datum { width: 11%; }
table.invoice-list.eingangsrechnungen-liste th.col-nr, table.invoice-list.eingangsrechnungen-liste td.col-nr { width: 11%; }
table.invoice-list.eingangsrechnungen-liste th.col-status, table.invoice-list.eingangsrechnungen-liste td.col-status { width: 15%; }
table.invoice-list.eingangsrechnungen-liste th.col-kunde, table.invoice-list.eingangsrechnungen-liste td.col-kunde { width: 27%; }
table.invoice-list.eingangsrechnungen-liste th.col-betrag, table.invoice-list.eingangsrechnungen-liste td.col-betrag { width: 12%; border-left: 1px solid var(--color-border); }

/* Zahlungsüberwachungsliste (Pages/Zahlungseingaenge/Index.cshtml) - eigene Klasse statt der
   generischen table.invoice-list-Basisregel, damit die Trennlinie NICHT auch die (nicht davon
   betroffene) Papierkorb-Liste trifft, die sich sonst dieselbe Basisregel teilt. */
table.invoice-list.zahlungseingang-liste th.col-betrag, table.invoice-list.zahlungseingang-liste td.col-betrag { border-left: 1px solid var(--color-border); }

/* Leistungsverzeichnisliste (Pages/Leistungsverzeichnis/Index.cshtml) - die EK-Preis-Spalte
   teilt sich ihre Breiten-Klasse (col-datum) mit den Spalten Typ/Einheit, daher dort zusätzlich
   mit "col-preis" gekennzeichnet, um NUR die Preis-Spalten zu treffen. */
table.invoice-list th.col-preis, table.invoice-list td.col-preis { border-left: 1px solid var(--color-border); }

/* Nutzer-Feedback: weder has-status- noch die generische col-datum-Breite passen hier - diese
   Liste hat GLEICHZEITIG eine Typ-, eine Status- UND zwei Preis-Spalte, das braucht eigene, auf
   genau diese sieben Spalten (Summe 100 %) abgestimmte Prozentsätze. Vorher liefen die
   ungewichteten col-datum-Breiten (Einheit/Typ/EK-Preis/VK-Preis je 16 %) plus col-nr/col-kunde
   in Summe weit über 100 %, wodurch der Browser (kein table-layout:fixed) die Spalten
   ungleichmäßig gequetscht hat - u. a. wurde dadurch der Abstand zwischen Status- und
   EK-Preis-Spalte sichtbar zu schmal.
   Die Typ-Spalte bekommt zusätzlich zu "col-datum" die eigene Klasse "col-typ" mit mehr Breite
   als die (kurze) Einheit-Spalte - dadurch rückt die Status-Spalte sichtbar weiter nach rechts
   (Nutzer-Wunsch "1cm weiter"), ohne die Einheit-Spalte zu verbreitern.
   Trennlinien (siehe generische .col-preis-Regel oben): laut Vorgabe je eine zwischen Status-
   und EK-Preis-Spalte UND zwischen EK- und VK-Preis-Spalte - die VK-Preis-Spalte behält daher
   die eigene Klasse "col-preis-vk" (eigene Breitenregel), bekommt hier aber zusätzlich
   dieselbe border-left-Regel wie "col-preis". */
table.invoice-list.leistungsverzeichnis-liste th.col-nr, table.invoice-list.leistungsverzeichnis-liste td.col-nr { width: 12%; }
table.invoice-list.leistungsverzeichnis-liste th.col-kunde, table.invoice-list.leistungsverzeichnis-liste td.col-kunde { width: 25%; }
table.invoice-list.leistungsverzeichnis-liste th.col-datum, table.invoice-list.leistungsverzeichnis-liste td.col-datum { width: 10%; }
table.invoice-list.leistungsverzeichnis-liste th.col-typ, table.invoice-list.leistungsverzeichnis-liste td.col-typ { width: 14%; }
table.invoice-list.leistungsverzeichnis-liste th.col-status, table.invoice-list.leistungsverzeichnis-liste td.col-status { width: 15%; }
table.invoice-list.leistungsverzeichnis-liste th.col-preis, table.invoice-list.leistungsverzeichnis-liste td.col-preis,
table.invoice-list.leistungsverzeichnis-liste th.col-preis-vk, table.invoice-list.leistungsverzeichnis-liste td.col-preis-vk { width: 12%; }
table.invoice-list.leistungsverzeichnis-liste th.col-preis-vk, table.invoice-list.leistungsverzeichnis-liste td.col-preis-vk { border-left: 1px solid var(--color-border); }

/* Änderungsprotokoll (Pages/Invoices/Aenderungsprotokoll.cshtml) - eigene Spaltenbreiten statt
   der Standard-.invoice-list-Aufteilung: "Bearbeiter" ist hier immer nur ein kurzer Name (kein
   ganzer Kundenname wie sonst bei .col-kunde), entsprechend deutlich schmaler; dafür bekommen
   die BEIDEN Status-Spalten sowie die Download-Spalte genug Platz, um die Status-Badges nicht
   mehr abzuschneiden/umzubrechen (Nutzer-Feedback: Darstellung "sieht gruselig aus"). */
table.aenderungsprotokoll-table th.col-datum, table.aenderungsprotokoll-table td.col-datum { width: 15%; }
table.aenderungsprotokoll-table th.col-nr, table.aenderungsprotokoll-table td.col-nr { width: 12%; }
table.aenderungsprotokoll-table th.col-kunde, table.aenderungsprotokoll-table td.col-kunde { width: 10%; }
table.aenderungsprotokoll-table th.col-status, table.aenderungsprotokoll-table td.col-status { width: 16%; }

/* Projekte-Liste: diese Breiten sind bewusst genau die zuvor bereits geprüften, funktionierenden
   Werte (per Pixel-Nachmessung bestätigt: Tabelle passt exakt in die Karte, Beträge sind
   korrekt rechtsbündig) - ein voriger Versuch, die Betragsspalten stärker zu verschmälern
   (6,5% statt 8,33%), hat bei schmalerem Browserfenster dazu geführt, dass längere Beträge
   (z. B. "14.850,00 €") nicht mehr hineinpassten und sichtbar in die Nachbarspalte liefen -
   daher hier wieder rückgängig gemacht. Einzige Änderung gegenüber der geprüften Fassung: eine
   dünne Trennlinie vor jeder Betragsspalte (siehe unten), damit die Spaltengrenze sichtbar ist
   und die (korrekte) Rechtsbündigkeit nicht mit einer Zentrierung verwechselt werden kann. */
table.invoice-list.projekt-list th.col-projektnr, table.invoice-list.projekt-list td.col-projektnr { width: 8%; white-space: nowrap; }
table.invoice-list.projekt-list th.col-bezeichnung, table.invoice-list.projekt-list td.col-bezeichnung { width: 15%; }
table.invoice-list.projekt-list th.col-projektkunde, table.invoice-list.projekt-list td.col-projektkunde { width: 14%; }
table.invoice-list.projekt-list th.col-ort, table.invoice-list.projekt-list td.col-ort { width: 11%; }
table.invoice-list.projekt-list th.col-geplstart, table.invoice-list.projekt-list td.col-geplstart { width: 9%; white-space: nowrap; }
table.invoice-list.projekt-list th.col-projektstatus, table.invoice-list.projekt-list td.col-projektstatus { width: 15%; }
table.invoice-list.projekt-list th.col-geldbetrag, table.invoice-list.projekt-list td.col-geldbetrag {
    width: 8.33%;
    white-space: nowrap;
    border-left: 1px solid var(--color-border);
}


/* Jahresgruppierung in der Rechnungsliste (und den übrigen Beleglisten) - die Kopfzeile jeder
   Jahresgruppe zeigt seit der Fußleisten-Überarbeitung direkt die Summen dieses Jahres mit an
   (statt einer separaten "Summe JJJJ"-Zeile am Ende der Gruppe, die bei langen Jahren erst
   nach Scrollen durch alle Einzelposten sichtbar war) - das eigentliche Gesamtergebnis über
   alle Jahre zeigt stattdessen die immer sichtbare Fußleiste (.ap-sticky-footer weiter unten,
   dieselbe Fußleisten-Komponente wie in den Bearbeiten-Formularen). */
table.invoice-list tr.year-header-row td {
    background: var(--color-year-header-bg);
    color: var(--color-primary);
    font-weight: 700;
    font-size: 12.5px;
    padding-top: 8px;
    padding-bottom: 8px;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}
/* .ap-table td:first-child zentriert eigentlich die Checkbox-Spalte der Datenzeilen - die
   Gruppenbezeichnung ("Jahr JJJJ") sitzt aber in einer colspan-Zelle, die trotzdem als
   :first-child der Zeile gilt und dadurch ungewollt mittig statt am linken Tabellenrand
   ausgerichtet wurde (dasselbe bereits an anderer Stelle gelöste Problem, siehe
   .bankkonten-table/.ansprechpartner-table weiter oben). */
table.invoice-list tr.year-header-row td:first-child { text-align: left; width: auto; }
.col-datum .nowrap { white-space: nowrap; }

/* E-Mail-Protokoll (Pages/Auswertungen/EmailProtokoll.cshtml) - festes Spaltenraster, analog
   zu den übrigen .ap-table-Listen dieser Anwendung. */
.email-protokoll-table { table-layout: fixed; }
.email-protokoll-table th.col-datum, .email-protokoll-table td.col-datum { width: 13%; }
.email-protokoll-table th.col-kundennr, .email-protokoll-table td.col-kundennr { width: 11%; }
.email-protokoll-table th.col-kunde, .email-protokoll-table td.col-kunde { width: 19%; }
.email-protokoll-table th.col-empfaenger, .email-protokoll-table td.col-empfaenger { width: 20%; }
.email-protokoll-table th.col-betreff, .email-protokoll-table td.col-betreff { width: 25%; }
.email-protokoll-table th.col-beleg, .email-protokoll-table td.col-beleg { width: 12%; }
.email-protokoll-table td.col-kunde, .email-protokoll-table td.col-empfaenger, .email-protokoll-table td.col-betreff {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Posteingang (Pages/Posteingang/Index.cshtml) - festes Spaltenraster, analog zum
   E-Mail-Protokoll oben. Die Zuordnungs-Spalte ist bewusst breiter als bei den übrigen
   Listen dieser Anwendung, da hier zwei <select>-Felder + Speichern-Button nebeneinander
   Platz brauchen statt nur eines Anzeigetexts. */
.posteingang-table { table-layout: fixed; }
.posteingang-table th.col-datum, .posteingang-table td.col-datum { width: 11%; }
.posteingang-table th.col-absender, .posteingang-table td.col-absender { width: 18%; }
.posteingang-table th.col-betreff, .posteingang-table td.col-betreff { width: 30%; }
.posteingang-table th.col-anhaenge, .posteingang-table td.col-anhaenge { width: 7%; text-align: center; }
.posteingang-table th.col-zuordnung, .posteingang-table td.col-zuordnung { width: 34%; }
.posteingang-table td.col-betreff { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.posteingang-table td.col-betreff strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.posteingang-zuordnung-form { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.posteingang-zuordnung-form select { max-width: 45%; }
/* Ungelesene Mails (siehe EingehendeEmail.Gelesen) optisch hervorheben - dezent per
   fett gesetztem Betreff statt einer zusätzlichen Statusspalte, spart Platz in der ohnehin
   schon dichten Tabelle. */
tr.posteingang-ungelesen td.col-betreff strong { font-weight: 700; }
tr.posteingang-ungelesen td.col-datum { font-weight: 600; }

/* Posteingang-Postfach (Pages/Posteingang/Postfach.cshtml) - klassisches Zweispalten-
   Mailprogramm-Layout: schmale Liste links (fest, eigener Scrollbereich), Detailansicht
   rechts (füllt den Rest). Feste Höhe über calc() abzüglich der Kopfzeile/des Seitenkopfs,
   damit nur die Liste scrollt, nicht die ganze Seite - sonst verliert man beim Scrollen durch
   eine lange Liste den Überblick über die gerade gelesene Mail rechts. */
.postfach-split {
    display: flex;
    gap: 16px;
    height: calc(100vh - 220px);
    min-height: 420px;
}
.postfach-liste {
    width: 320px;
    flex: 0 0 320px;
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
}
.postfach-liste-tabs {
    display: flex;
    gap: 4px;
    padding: 8px;
    border-bottom: 1px solid var(--color-border);
    flex: 0 0 auto;
}
.postfach-tab {
    border: none;
    background: transparent;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    color: var(--color-muted);
}
.postfach-tab.active { background: var(--color-primary-tint); color: var(--color-primary); font-weight: 600; }
/* Ordner-Reiter sind seit dem Kunden-/Projektfilter echte Links (serverseitiger Filter). */
a.postfach-tab { text-decoration: none; display: inline-block; padding: 6px 9px; }
a.postfach-tab:hover { color: var(--color-primary); }
.postfach-liste-tabs { flex-wrap: wrap; }

/* Freitextsuche über der Liste */
.postfach-suche {
    padding: 8px;
    border-bottom: 1px solid var(--color-border);
    flex: 0 0 auto;
}
.postfach-suche input { width: 100%; box-sizing: border-box; font-size: 13px; padding: 6px 8px; }

/* Austauschbarer Listeninhalt (Filterhinweise + Liste) - muss die Restfläche der Spalte
   ausfüllen, damit die Liste darin scrollt. */
.postfach-liste-inhalt { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }

/* Aktive Kontakt-/Projektfilter (z. B. aus der Kontaktmaske) als entfernbare Hinweise */
.postfach-filterhinweise {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--color-border);
    font-size: 12px;
    flex: 0 0 auto;
}
.postfach-filterchip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    padding: 2px 4px 2px 10px;
    border-radius: 999px;
    background: var(--color-primary-tint);
    color: var(--color-primary);
    font-weight: 600;
}
.postfach-filterchip button {
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    padding: 0 4px;
    font-size: 12px;
}
.postfach-filterchip button:hover { color: var(--color-danger); }
.postfach-liste-leer { padding: 16px 12px; }
/* Während Reiter/Filter im Hintergrund nachladen: Liste kurz abgeblendet statt Seitenneuaufbau. */
.postfach-liste.postfach-liste-laedt .postfach-liste-scroll { opacity: 0.5; pointer-events: none; transition: opacity 0.15s; }

/* Zuordnung (Kunde · Projekt) unter dem Listeneintrag */
.postfach-eintrag-zuordnung {
    margin-top: 4px;
    font-size: 11px;
    color: var(--color-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.postfach-eintrag-zuordnung[hidden] { display: none; }
.postfach-eintrag.gesendet .postfach-eintrag-absender { font-style: italic; }

/* Zuordnen-Leiste im Lesebereich */
.postfach-zuordnen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    padding: 8px 20px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-alt2);
    font-size: 13px;
    flex: 0 0 auto;
}
.postfach-zuordnen label { font-weight: 600; margin: 0; }
.postfach-zuordnen select { min-width: 180px; max-width: min(320px, 100%); font-size: 13px; padding: 4px 6px; }
.postfach-gesendet-marke {
    display: inline-block;
    margin-right: 8px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--color-primary-tint);
    color: var(--color-primary);
    font-size: 11px;
    font-weight: 600;
}
.postfach-liste-scroll { overflow-y: auto; flex: 1 1 auto; overscroll-behavior: contain; }
/* Tagesüberschrift der Posteingangs-Liste - bewusst in den Farben der Navigationsleiste
   (.topbar), damit die Tagesgrenzen beim Durchscrollen deutlich ins Auge fallen
   (Nutzer-Vorgabe: "Hintergrundfarbe wie die Navigationsbar, weiße Schrift"). */
.postfach-gruppe-titel {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-on-primary);
    background: var(--color-primary);
    position: sticky;
    top: 0;
    z-index: 1;
}
.postfach-eintrag {
    display: block;
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-border-light);
    text-decoration: none;
    color: var(--color-text);
}
.postfach-eintrag:hover { background: var(--color-surface-hover); }
.postfach-eintrag.aktiv { background: var(--color-row-selected); }
.postfach-eintrag.ungelesen .postfach-eintrag-absender,
.postfach-eintrag.ungelesen .postfach-eintrag-betreff { font-weight: 700; }
.postfach-eintrag-kopf { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.postfach-eintrag-zeit { color: var(--color-muted); white-space: nowrap; flex: 0 0 auto; }
.postfach-eintrag-betreff { font-size: 13px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.postfach-eintrag-vorschau { font-size: 12px; color: var(--color-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.postfach-detail {
    flex: 1 1 auto;
    min-width: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.postfach-detail-kopf {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px 0 20px;
    flex: 0 0 auto;
}
.postfach-detail-kopf h2 { margin: 0; font-size: 19px; }
.postfach-detail-aktionen { display: flex; gap: 6px; flex: 0 0 auto; flex-wrap: wrap; }

/* Antworten-/Weiterleiten-Dialog: breiter als die übrigen .email-modal-Dialoge, weil der
   zitierte Originaltext darin lesbar bleiben soll. */
.email-modal-dialog.postfach-antwort-breit { width: 780px; }
.postfach-antwort-breit textarea { min-height: 200px; }
/* Je nach Modus ausgeblendete Felder des Dialogs - .field setzt selbst eine display-Angabe,
   die das hidden-Attribut sonst überstimmen würde. */
#antwortDialog [hidden] { display: none !important; }
.postfach-antwort-zitat-box { margin-top: 10px; }
.postfach-antwort-zitat-box summary { cursor: pointer; }
.postfach-antwort-zitat {
    max-height: 220px;
    overflow: auto;
    margin: 6px 0 0;
    padding: 8px 10px;
    border-left: 3px solid var(--color-border);
    background: var(--color-bg-alt2);
    color: var(--color-muted);
    font-family: inherit;
    font-size: 12px;
    white-space: pre-wrap;
}
.postfach-antwort-anhaenge { list-style: none; margin: 4px 0 0; padding: 0; }
.postfach-antwort-anhaenge li { margin: 2px 0; }
.postfach-detail-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--color-border);
    flex: 0 0 auto;
}
.postfach-detail-avatar {
    width: 36px; height: 36px; border-radius: 999px; flex: 0 0 auto;
    background: var(--color-primary-tint); color: var(--color-primary);
    display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.postfach-detail-datum { margin-left: auto; white-space: nowrap; }
.postfach-detail-anhaenge { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 20px 0 20px; flex: 0 0 auto; }
.postfach-anhang-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: 999px; font-size: 12.5px;
    background: var(--color-bg-alt2); border: 1px solid var(--color-border);
    color: var(--color-text); text-decoration: none;
}
.postfach-anhang-chip:hover { background: var(--color-surface-hover); }
.postfach-detail-inhalt { padding: 16px 20px; overflow-y: auto; flex: 1 1 auto; overscroll-behavior: contain; }
.postfach-detail-inhalt img { max-width: 100%; height: auto; }
.postfach-text-inhalt { white-space: pre-wrap; word-break: break-word; font-family: inherit; margin: 0; }
/* Kurzes, dezentes Abblenden während des fetch()-Nachladens (siehe Klick-Handler in
   Postfach.cshtml) - reicht als Rückmeldung, dass etwas passiert, ohne dafür ein komplettes
   Lade-Overlay über die ganze Seite zu legen. */
.postfach-detail.postfach-detail-laedt { opacity: 0.5; transition: opacity 0.15s ease; }

@media (max-width: 900px) {
    .postfach-split { flex-direction: column; height: auto; }
    .postfach-liste { width: 100%; flex: 0 0 auto; max-height: 320px; }
}

/* Kategorie-Auswahl in Pages/Kontakte/Create.cshtml und Edit.cshtml: mehrere gleichzeitig
   auswählbare "Chips" statt schmuckloser Checkboxen mit Text daneben - jede Kategorie in
   ihrer eigenen Akzentfarbe (dieselben Tints wie an anderer Stelle bei Badges verwendet),
   damit auf einen Blick erkennbar ist, welche Kategorien aktiv sind. Das <input> liegt
   unsichtbar über der ganzen Chip-Fläche, sodass die komplette Pille klickbar ist statt nur
   der kleinen Checkbox selbst. */
.kategorie-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.kategorie-chip { position: relative; display: inline-flex; }
.kategorie-chip input[type="checkbox"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}
.kategorie-chip-label {
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    border: 1.5px solid var(--color-border);
    border-radius: 20px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--color-muted);
    background: var(--color-surface);
    cursor: pointer;
    user-select: none;
    transition: background .12s, border-color .12s, color .12s;
}
.kategorie-chip input[type="checkbox"]:hover + .kategorie-chip-label { border-color: var(--color-primary); }
.kategorie-chip input[type="checkbox"]:focus-visible + .kategorie-chip-label { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.kategorie-chip.kategorie-kunde input:checked + .kategorie-chip-label { background: var(--tint-blau-bg); color: var(--tint-blau-fg); border-color: transparent; }
.kategorie-chip.kategorie-lieferant input:checked + .kategorie-chip-label { background: var(--tint-orange-bg); color: var(--tint-orange-fg); border-color: transparent; }
.kategorie-chip.kategorie-mitarbeiter input:checked + .kategorie-chip-label { background: var(--tint-gruen-bg); color: var(--tint-gruen-fg); border-color: transparent; }
.kategorie-chip.kategorie-interessenten input:checked + .kategorie-chip-label { background: var(--tint-rot-hell-bg); color: var(--tint-rot-hell-fg); border-color: transparent; }
.kategorie-chip.kategorie-behoerden input:checked + .kategorie-chip-label { background: var(--tint-schwarz-bg); color: var(--tint-schwarz-fg); border-color: transparent; }
.kategorie-chip.kategorie-gastronomie input:checked + .kategorie-chip-label { background: var(--tint-badge-bg); color: var(--tint-badge-fg); border-color: transparent; }
.kategorie-chip.kategorie-partner input:checked + .kategorie-chip-label { background: var(--tint-versendet-bg); color: var(--tint-versendet-fg); border-color: transparent; }
.kategorie-chip.kategorie-sonstige input:checked + .kategorie-chip-label { background: var(--tint-grau-bg); color: var(--tint-grau-fg); border-color: transparent; }
/* Selbst angelegte Kategorien (Definitionsdaten → Kontaktkategorien) - gemeinsamer Farbton. */
.kategorie-chip.kategorie-weitere input:checked + .kategorie-chip-label { background: var(--color-primary-tint); color: var(--color-primary); border-color: transparent; }

/* Dieselben Tints, als kleine Badges statt großer Chips - für die Kategorie-Spalte in
   Pages/Kontakte/Index.cshtml, wo mehrere Badges pro Zeile nebeneinander stehen können. */
.badge.kategorie-badge-kunde { background: var(--tint-blau-bg); color: var(--tint-blau-fg); }
.badge.kategorie-badge-lieferant { background: var(--tint-orange-bg); color: var(--tint-orange-fg); }
.badge.kategorie-badge-mitarbeiter { background: var(--tint-gruen-bg); color: var(--tint-gruen-fg); }
.badge.kategorie-badge-interessenten { background: var(--tint-rot-hell-bg); color: var(--tint-rot-hell-fg); }
.badge.kategorie-badge-behoerden { background: var(--tint-schwarz-bg); color: var(--tint-schwarz-fg); }
.badge.kategorie-badge-gastronomie { background: var(--tint-badge-bg); color: var(--tint-badge-fg); }
.badge.kategorie-badge-partner { background: var(--tint-versendet-bg); color: var(--tint-versendet-fg); }
.badge.kategorie-badge-sonstige { background: var(--tint-grau-bg); color: var(--tint-grau-fg); }
.badge.kategorie-badge-weitere { background: var(--color-primary-tint); color: var(--color-primary); }
.kategorie-badges { display: flex; flex-wrap: wrap; gap: 4px; }

/* Die Kategorie-Badges der Kontaktliste sitzen jetzt in einem <button> statt einem reinen
   <div> (Nutzer-Vorgabe: Kategorien sollen sich per Klick direkt in der Liste ändern lassen,
   siehe #kategorienModal in Pages/Kontakte/Index.cshtml) - dieser Reset nimmt dem Button seine
   Standardoptik, damit er weiterhin wie eine reine Badge-Zeile aussieht, nur mit Hover-Hinweis
   auf die Klickbarkeit. */
.kategorie-badges-edit {
    border: none;
    background: none;
    padding: 2px;
    margin: -2px;
    cursor: pointer;
    border-radius: 6px;
    text-align: left;
}
.kategorie-badges-edit:hover { background: rgba(127, 127, 127, 0.12); }

.badge-block { display: block; width: fit-content; margin-top: 4px; }

.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    background: var(--tint-badge-bg);
    color: var(--tint-badge-fg);
}
.badge.badge-versendet { background: var(--tint-versendet-bg); color: var(--tint-versendet-fg); }
.badge.badge-mahnung { background: var(--tint-orange-bg); color: var(--tint-orange-fg); text-decoration: none; cursor: pointer; }
.badge.badge-mahnung:hover { filter: brightness(0.96); }
/* Link auf die zu einer Honorarvereinbarungs-Position automatisch erstellte Rechnung (siehe
   Pages/Honorarvereinbarungen/Create.cshtml bzw. Edit.cshtml) - technisch wie .badge-mahnung
   ein klickbares Badge, farblich aber neutral/blau statt orange, da es sich um einen reinen
   Verweis und keine Mahnstufe handelt. */
.badge.badge-rechnung-link { background: var(--tint-blau-bg); color: var(--tint-blau-fg); text-decoration: none; cursor: pointer; }
.badge.badge-rechnung-link:hover { filter: brightness(0.96); }

.summary-box {
    margin-top: 16px;
    display: flex;
    justify-content: flex-end;
}
.summary-box table td { padding: 2px 8px; text-align: right; }
.summary-box table td:first-child { color: var(--color-muted); text-align: left; }

.validation-summary {
    background: var(--color-danger-bg);
    border: 1px solid var(--color-danger);
    color: var(--color-danger);
    padding: 10px 14px;
    border-radius: var(--radius);
    margin-bottom: 16px;
    font-size: 13px;
}

.banner {
    padding: 10px 14px;
    border-radius: var(--radius);
    margin-bottom: 16px;
    font-size: 13.5px;
    border: 1px solid transparent;
}
.banner-success { background: var(--color-success-bg); border-color: var(--color-success); color: var(--color-success-text); }
.banner-error { background: var(--color-danger-bg); border-color: var(--color-danger); color: var(--color-danger); }
.banner-warning { background: var(--tint-orange-bg); border-color: var(--tint-orange-fg); color: var(--tint-orange-fg); }

/* Hinweis-Chip "Filter aktiv" (siehe wwwroot/js/filter-chip.js sowie Pages/Index.cshtml) - auf
   den Ziel-Listen der Startseiten-Kacheln, wenn diese per Kachel-Klick mit einem Filter
   (z. B. "nur Überfällige") aufgerufen wurden. */
.ap-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--color-primary-soft, var(--color-row-selected));
    border: 1px solid var(--color-primary);
    color: var(--color-text);
    font-size: 13px;
    margin-bottom: 14px;
}
.ap-filter-chip-close {
    color: var(--color-muted);
    text-decoration: none !important;
    font-size: 16px;
    line-height: 1;
    padding: 0 2px;
}
.ap-filter-chip-close:hover { color: var(--color-text); }

.empty-state {
    text-align: center;
    color: var(--color-muted);
    padding: 40px 0;
}

/* Startseite im Modus "Website" (siehe StartseiteModus): eingebettete, vom Anwender unter
   Firmendaten konfigurierbare Webadresse - das ursprüngliche Verhalten vor Einführung des
   Claude-Assistenten-Modus. */
.start-frame-wrap {
    margin-top: 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--color-surface);
}
.start-frame-wrap iframe {
    display: block;
    width: 100%;
    height: 72vh;
    min-height: 420px;
    border: 0;
}
.start-frame-hinweis { margin-top: 10px; font-size: 12.5px; }

/* Startseite im Modus "Claude": Begrüßung, Claude-Eingabefeld und Kachel-Dashboard */
.start-hero {
    text-align: center;
    padding: 40px 20px 28px;
}
.start-greeting {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 6px;
    color: var(--color-text);
}
.start-greeting-sub {
    color: var(--color-muted);
    font-size: 15px;
    margin: 0 0 26px;
}

.claude-box {
    max-width: 640px;
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
    gap: 6px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 18px;
    padding: 10px 10px 10px 16px;
    box-shadow: 0 4px 18px var(--color-shadow-sm);
    transition: border-color .15s, box-shadow .15s;
}
.claude-box:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 4px 18px var(--color-shadow-sm), 0 0 0 3px var(--color-primary-soft);
}
.claude-box-avatar {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-on-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    margin-bottom: 4px;
}
.claude-box textarea {
    flex: 1;
    border: none;
    resize: none;
    font: inherit;
    font-size: 15px;
    line-height: 1.45;
    max-height: 200px;
    padding: 8px 0;
    background: transparent;
    color: var(--color-text);
}
.claude-box textarea::placeholder { color: var(--color-muted); }
.claude-box textarea:focus { outline: none; }
.claude-box button {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--color-primary);
    color: var(--color-on-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 15px;
    transition: background .15s, transform .1s;
}
.claude-box button:hover:not(:disabled) { background: var(--color-primary-dark); }
.claude-box button:active:not(:disabled) { transform: scale(0.94); }
.claude-box button:disabled { opacity: .45; cursor: default; }

.claude-hinweis {
    max-width: 640px;
    margin: 10px auto 0;
    font-size: 12.5px;
    color: var(--color-muted);
}

.claude-antwort-bereich {
    max-width: 640px;
    margin: 16px auto 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 16px 18px;
    text-align: left;
    font-size: 14px;
    line-height: 1.6;
    white-space: pre-wrap;
    box-shadow: 0 2px 10px var(--color-shadow-sm);
}
.claude-antwort-bereich.claude-antwort-fehler {
    background: var(--color-danger-bg);
    border-color: var(--color-danger);
    color: var(--color-danger);
}
.claude-antwort-lade { color: var(--color-muted); font-style: italic; }

/* Geburtstags-Hinweis auf der Startseite (siehe Index.cshtml.cs, ErmittleGeburtstageAsync) -
   zeigt Ansprechpartner mit Geburtstag heute oder in den nächsten 7 Tagen. Bewusst dezent
   gehalten wie .claude-antwort-bereich (gleiche Breite/Optik), NICHT wie eine dringende
   Warnung - ein vergessener Geburtstag ist unangenehm, aber keine betriebliche Störung. */
.geburtstage-karte {
    max-width: 640px;
    margin: 16px auto 24px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 14px 18px;
    text-align: left;
    box-shadow: 0 2px 10px var(--color-shadow-sm);
}
.geburtstage-titel { font-weight: 600; font-size: 13.5px; margin-bottom: 8px; }
.geburtstage-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.geburtstage-eintrag { border-radius: 6px; }
/* Der komplette Eintrag ist jetzt ein Link zum Kontakt (siehe Index.cshtml) - die bisherige
   Zeilen-Optik (Flex-Layout/Innenabstand) sitzt daher am Link selbst statt am umschließenden
   <li>, ergänzt um einen dezenten Hover-Effekt als Klickbarkeits-Hinweis. */
.geburtstage-eintrag-link {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 13.5px;
    padding: 4px 8px;
    border-radius: 6px;
    width: 100%;
    text-decoration: none !important;
    color: inherit !important;
}
.geburtstage-eintrag-link:hover { background: var(--color-bg-hover); }
/* Heutige Geburtstage dezent hervorheben (dieselbe Blau-Tönung wie der Standardansprechpartner
   in der Kontaktverwaltung, siehe .ansprechpartner-table tr.ap-row-standard) - alles, was erst
   in den nächsten Tagen ansteht, bleibt bewusst neutral, um die Karte nicht zu überladen. */
.geburtstage-eintrag.geburtstage-heute .geburtstage-eintrag-link { background: var(--color-primary-tint); }
.geburtstage-eintrag.geburtstage-heute .geburtstage-wann { color: var(--color-info); font-weight: 600; }
.geburtstage-wann { flex: 0 0 auto; width: 118px; color: var(--color-muted); }
.geburtstage-name { flex: 1; font-weight: 600; }
.geburtstage-kontakt { font-weight: 400; color: var(--color-muted); margin-left: 4px; }
.geburtstage-alter { flex: 0 0 auto; color: var(--color-muted); }
@media (max-width: 600px) {
    .geburtstage-eintrag-link { flex-wrap: wrap; }
    .geburtstage-wann { width: auto; }
}

.start-kacheln {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 24px;
    max-width: 1180px;
    margin: 10px auto 28px;
}
.start-kachel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 28px 26px;
    transition: transform .12s, box-shadow .12s, border-color .12s;
}
.start-kachel:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px var(--color-shadow-sm);
    border-color: var(--color-primary);
}
.start-kachel-link {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    text-decoration: none !important;
    color: var(--color-text) !important;
}
.start-kachel-icon { font-size: 30px; line-height: 1; }
.start-kachel-titel { font-weight: 600; font-size: 16.5px; }
.start-kachel-zahl { color: var(--color-muted); font-size: 32px; font-weight: 700; }

/* Kennzahl-Auswahl direkt auf der Kachel (siehe Pages/Index.cshtml) - bewusst dezent
   gehalten (kleine Schrift, gedämpfte Farbe), damit sie als Beschriftung der Zahl darüber
   wirkt statt wie ein eigenständiges Formularfeld herauszustechen. */
.start-kachel-metrik-auswahl {
    width: 100%;
    font-size: 12.5px;
    padding: 5px 8px;
    border-radius: 6px;
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    color: var(--color-muted);
    cursor: pointer;
}
.start-kachel-metrik-label {
    font-size: 12.5px;
    color: var(--color-muted);
}

/* Ergebnisanzeige des "Erreichbarkeit prüfen"-Schalters in den Firmendaten */
.pruef-ergebnis {
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: var(--radius);
    font-size: 13px;
    background: var(--color-bg-alt2);
    color: var(--color-text);
}
.pruef-ergebnis-ok { background: var(--color-success-bg); color: var(--color-success-text); }
.pruef-ergebnis-warn { background: var(--color-warning-bg); color: var(--color-warning); }
.pruef-ergebnis-fehler { background: var(--color-danger-bg); color: var(--color-danger); }

/* Aufmaß-Berechnung (Positionstabelle: Rechnungen/Angebote/Aufträge/Lieferscheine) */
.menge-mit-aufmass {
    display: flex;
    align-items: center;
    gap: 4px;
}
.menge-mit-aufmass input { flex: 1 1 auto; min-width: 0; }
.btn-aufmass {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-surface);
    cursor: pointer;
    font-size: 13px;
    padding: 0;
    line-height: 1;
}
.btn-aufmass:hover { background: var(--color-bg-hover); border-color: var(--color-primary); }

/* Kalkulations-Infosymbol neben dem Einzelpreis (Positionstabelle: Rechnungen/Angebote/
   Aufträge/Lieferscheine) - nur sichtbar, wenn die Position über "Aus Leistungsverzeichnis"
   übernommen wurde UND der referenzierte Katalogeintrag eine befüllte Kalkulationstabelle
   hat (siehe wwwroot/js/kalkulation-anzeige.js). Rein informatives Anzeige-Overlay, wird
   NICHT ins PDF übernommen. Optisch/strukturell an .menge-mit-aufmass/.btn-aufmass oben
   angelehnt. */
.preis-mit-kalkulation {
    display: flex;
    align-items: center;
    gap: 4px;
}
.preis-mit-kalkulation input { flex: 1 1 auto; min-width: 0; }
.btn-kalkulation-info {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-surface);
    cursor: pointer;
    font-size: 13px;
    padding: 0;
    line-height: 1;
}
.btn-kalkulation-info:hover { background: var(--color-bg-hover); border-color: var(--color-primary); }

/* Langtext-Infosymbol neben der Bezeichnung (siehe wwwroot/js/langtext-anzeige.js) - optisch/
   strukturell identisch zu .preis-mit-kalkulation/.btn-kalkulation-info oben, nur mit
   align-items:flex-start statt center, da die Bezeichnung ein mehrzeiliges <textarea> ist und
   das Icon oben bündig statt vertikal mittig zur ggf. mehrzeiligen Höhe stehen soll. */
.bezeichnung-mit-langtext {
    display: flex;
    align-items: flex-start;
    gap: 4px;
}
.bezeichnung-mit-langtext textarea { flex: 1 1 auto; min-width: 0; }
.btn-langtext-info {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-surface);
    cursor: pointer;
    font-size: 13px;
    padding: 0;
    line-height: 1;
}
.btn-langtext-info:hover { background: var(--color-bg-hover); border-color: var(--color-primary); }

/* Summenboxen (EK/VK) im Kalkulations-Anzeige-Overlay (siehe wwwroot/js/kalkulation-anzeige.js)
   - dezent umrandet, passend zum readonly-Look der Zahlenfelder (.zahlenfeld[readonly] oben),
   rechts neben dem "Schließen"-Schalter gestapelt. */
.kalk-summe-box {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg-hover);
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 600;
    text-align: right;
    min-width: 180px;
}

/* Tabelle im Kalkulations-Anzeige-Overlay (siehe wwwroot/js/kalkulation-anzeige.js): beginnt
   MIT der Bezeichnung als erster Spalte (keine Checkbox-Spalte wie in den echten
   Positionstabellen) - die generelle Regel ".ap-table td:first-child" (für die
   Checkbox-Spalte gedacht: zentriert, 2.25rem schmal) muss hier daher gezielt außer Kraft
   gesetzt und stattdessen eine sinnvolle, deutlich breitere Spaltenaufteilung vergeben
   werden (Nutzer-Feedback: Bezeichnung war viel zu schmal und fälschlich zentriert). */
.kalk-info-table { table-layout: fixed; }
.kalk-info-table th:first-child, .kalk-info-table td:first-child {
    text-align: left;
    width: 40%;
}
.kalk-info-table th.col-menge, .kalk-info-table td.col-menge { width: 14%; }
.kalk-info-table th.col-einheit, .kalk-info-table td.col-einheit { width: 14%; }
.kalk-info-table th.col-preis, .kalk-info-table td.col-preis { width: 16%; }
.kalk-info-table th.col-summe, .kalk-info-table td.col-summe { width: 16%; }

/* Pages/Settings/Benutzerverwaltung.cshtml: Tabelle beginnt MIT dem Benutzernamen als erster
   Spalte (keine Checkbox-Spalte wie in den echten Positions-/Beleglisten) - dieselbe Lage wie
   beim Kalkulations-Anzeige-Overlay oben (".ap-table td:first-child" zentriert/schmal für die
   dort nicht vorhandene Checkbox-Spalte), daher hier ebenso gezielt außer Kraft gesetzt
   (Nutzer-Feedback: Benutzername war fälschlich zentriert und zu schmal). */
.benutzer-table th:first-child, .benutzer-table td:first-child {
    text-align: left;
    width: auto;
}

/* Summenzeile jetzt als <tfoot>-Zeile derselben Tabelle (#aufmassTable) statt eines separaten
   Grid-Layouts - dadurch übernimmt sie automatisch exakt dieselben Spaltenbreiten wie die
   Formelzeilen darüber, ohne zwei unterschiedliche Layout-Modelle (Tabelle vs. CSS-Grid)
   pixelgenau synchron halten zu müssen. */
.aufmass-summe-row td {
    border-top: 2px solid var(--color-border);
    font-weight: 600;
    font-size: 14.5px;
    padding-top: 10px;
}
.aufmass-summe-label { text-align: right; }
.aufmass-ergebnis-fehler { color: var(--color-danger); font-weight: 600; }

/* Aufmaß-Dialog: Ergebnis-Anzeige wie ein (nicht editierbares) Eingabefeld umrahmen, statt
   als reiner Text ohne jede Kontur zu erscheinen - sonst wirkt die Spalte im Vergleich zu
   Bezeichnung/Formel "unfertig". Spaltenbreiten so gesetzt, dass Bezeichnung/Formel spürbar
   mehr Platz bekommen als die schmale Ergebnis-/Löschen-Spalte. */
#aufmassTable { table-layout: fixed; }
#aufmassTable th.col-check, #aufmassTable td.col-check { width: 30px; text-align: center; }
#aufmassTable th.col-bezeichnung, #aufmassTable td.col-bezeichnung { width: 32%; }
#aufmassTable th.col-formel, #aufmassTable td.col-formel { width: 36%; }
#aufmassTable th.col-anteil, #aufmassTable td.col-anteil { width: 14%; }
#aufmassTable th.col-ergebnis, #aufmassTable td.col-ergebnis { width: 18%; }
/* Keine eigene Lösch-Spalte mehr (Runde 10) - die Zeilen-Löschung läuft jetzt ausschließlich
   über die Checkbox-Auswahl + den Schalter "Löschen" in der Toolbar, exakt wie in der
   Positionstabelle. Die dadurch frei gewordene Breite (vorher 36px für die ✕-Spalte) ist auf
   Bezeichnung/Formel/Ergebnis umverteilt. */
.aufmass-ergebnis {
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
    padding: 7px 9px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-bg-alt);
    text-align: right;
}
/* :not([type="checkbox"]) ist hier wichtig: die Regel stammt noch aus der Zeit vor der
   Mehrfachauswahl (Runde 8), als #aufmassBody nur Text-/Zahlenfelder enthielt. Ohne diese
   Ausnahme gewinnt sie dank ihrer ID-Spezifität gegen die allgemeine, eigentlich zuständige
   Regel .ap-table input[type="checkbox"] (nur Klassen-Spezifität) und zieht die
   Zeilen-Checkbox auf die volle Spaltenbreite (30px) - bei unverändert 13px Höhe wirkt sie
   dann rechteckig statt quadratisch. */
#aufmassBody input:not([type="checkbox"]) { width: 100%; }
/* Bezeichnung/Formel im Aufmaß-Dialog sind jetzt frei umbrechende <textarea>-Felder (statt
   einfacher <input>-Felder), damit auch längere Eingaben komplett sichtbar bleiben - siehe
   die generische Größenanpassung über autoResizeTextarea() im jeweiligen Script-Block.
   Die Mindesthöhe von 140px aus .email-modal-dialog textarea (für den E-Mail-Versand-Dialog
   gedacht) wäre hier viel zu hoch und wird deshalb mit höherer Selektor-Spezifität (ID statt
   Klasse) auf dieselbe kompakte Höhe wie in der Positionstabelle zurückgesetzt. */
#aufmassTable textarea { min-height: 30px; }

/* Aufmaß-Dialog: Mehrfachauswahl + Kopieren/Ausschneiden/Einfügen für Aufmaß-Zeilen im
   selben Toolbar-/Select-Stil wie die Positionstabelle - Markup nutzt bewusst dieselben
   .ap-actionbar/.ap-tbtn-Klassen für ein einheitliches Erscheinungsbild. Die dort für die
   Seiten-Scrollleiste gedachte Sticky-Positionierung (siehe .ap-actionbar weiter oben) passt
   innerhalb eines Modal-Dialogs aber nicht und wird hier gezielt zurückgesetzt - das direkt
   anschließende .ap-table-wrap bildet trotzdem weiterhin denselben nahtlosen Rahmen wie
   gewohnt (oben eckig, unten abgerundet). */
.email-modal-dialog .ap-actionbar { position: static; top: auto; }

/* ===== Globales Lade-Overlay (siehe #ladeOverlay/window.zeigeLadeOverlay in _Layout.cshtml) ===
   Blendet bei PDF-/XML-Erzeugung, GAEB-Import u. Ä. die gesamte Seite halbtransparent ab und
   zeigt ein zentrales Lade-Symbol - verhindert wirksam ungeduldiges Mehrfachklicken, während im
   Hintergrund eine etwas länger dauernde Aktion läuft. Standardmäßig unsichtbar (display:none
   über die fehlende ".sichtbar"-Klasse) und liegt mit sehr hohem z-index über allem anderen,
   einschließlich der bereits vorhandenen Modal-Dialoge (siehe .email-modal z-index weiter
   oben). */
.lade-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 28, 0.55);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}
.lade-overlay.sichtbar { display: flex; }
.lade-overlay-box {
    background: var(--color-surface);
    border-radius: var(--radius);
    padding: 28px 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    box-shadow: 0 12px 32px var(--color-shadow-sm);
}
.lade-overlay-box p { margin: 0; font-size: 14px; color: var(--color-text); }
.lade-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: lade-spinner-drehen 0.8s linear infinite;
}
@keyframes lade-spinner-drehen {
    to { transform: rotate(360deg); }
}

/* ===== Seitenübergangs-Animation (View Transitions API) =====================================
   Sanfter, "aufklappendes Buch"-artiger Übergang beim Navigieren zwischen Seiten (z. B. beim
   Öffnen eines Datensatzes zur Bearbeitung) - bislang wechselte die Seite beim klassischen
   Server-Rendering dieser Anwendung (kein SPA-Framework, jede Navigation ist ein vollständiger
   Seitenaufruf) abrupt/"ruckelig", da der Browser von sich aus keinerlei Übergang zwischen zwei
   komplett unabhängigen Seitenaufrufen anzeigt.

   Die "@view-transition"-Regel aktiviert genau dafür die noch recht junge, browsereigene
   Cross-Document-View-Transitions-Funktion (Chrome/Edge ab Version 126, Safari mit
   Einschränkungen; Firefox unterstützt sie zum Zeitpunkt dieses Kommentars noch nicht) - rein
   deklarativ per CSS, ganz ohne JavaScript und ohne Eingriff in die eigentliche
   Seiten-Navigation. WICHTIG: das ist reine, verlustfreie PROGRESSIVE ENHANCEMENT - in jedem
   Browser ohne Unterstützung wird diese Regel schlicht ignoriert, die Navigation verhält sich
   dann exakt wie bisher (kein Fehler, keine Verschlechterung).

   Die beiden Keyframes simulieren eine Buchseite, die sich um eine gedachte Buchrücken-Kante am
   linken Bildschirmrand dreht: die alte Seite klappt beim Verlassen leicht nach links weg und
   verblasst, die neue Seite klappt aus derselben Richtung auf und wird dabei eingeblendet -
   bewusst mit kleinem Rotationswinkel (14°) und kurzer Dauer (380ms), um den Effekt spürbar,
   aber nicht aufdringlich oder gar leicht "seekrank machend" zu halten. */
@view-transition {
    navigation: auto;
}

::view-transition-group(root) {
    animation-duration: 0.38s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

::view-transition-old(root) {
    animation: buchseite-alt-wegklappen 0.38s cubic-bezier(0.4, 0, 0.2, 1) both;
    transform-origin: left center;
}

::view-transition-new(root) {
    animation: buchseite-neu-aufklappen 0.38s cubic-bezier(0.4, 0, 0.2, 1) both;
    transform-origin: left center;
}

@keyframes buchseite-alt-wegklappen {
    from {
        transform: perspective(1600px) rotateY(0deg);
        opacity: 1;
    }
    to {
        transform: perspective(1600px) rotateY(-14deg);
        opacity: 0;
    }
}

@keyframes buchseite-neu-aufklappen {
    from {
        transform: perspective(1600px) rotateY(14deg);
        opacity: 0;
    }
    to {
        transform: perspective(1600px) rotateY(0deg);
        opacity: 1;
    }
}

/* Auswahlkacheln auf der Optionen-Seite (Pages/Einstellungen/Optionen.cshtml) - aktuell nur für
   die Design-Auswahl (hell/dunkel) genutzt, aber bewusst allgemein benannt, da weitere
   Options-Auswahlen künftig auf dieser Seite ergänzt werden sollen. Verstecktes natives
   <input type="radio"> (nur für Tastatur/Screenreader), sichtbar ist stattdessen die
   umschließende Kachel - deren Rahmen sich per :checked-Sibling-Selektor einfärbt. */
.options-choice { cursor: pointer; }
.options-choice input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}
.options-choice-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 90px;
    padding: 14px 10px;
    border: 2px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    font-size: 13px;
    color: var(--color-text);
}
.options-choice input[type="radio"]:checked + .options-choice-box {
    border-color: var(--color-primary);
    background: var(--color-primary-tint);
    font-weight: 600;
}
.options-choice input[type="radio"]:focus-visible + .options-choice-box {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Akzentfarben-Auswahl (Options-Kachel "Akzentfarbe", Pages/Einstellungen/Darstellung.cshtml) -
   runde Farbkacheln, per JS (wwwroot/js/darstellung.js) mit aria-pressed="true" markiert,
   wenn sie der aktuell gewählten Farbe entsprechen. */
.akzent-swatch {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid var(--color-border);
    padding: 0;
    cursor: pointer;
}
.akzent-swatch[aria-pressed="true"] {
    border-color: var(--color-text);
    box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-text);
}
.akzent-swatch:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

/* Rich-Text-Editor (Quill.js, siehe wwwroot/js/schreiben-editor.js) - der Inhaltsbereich ist
   technisch ein "contenteditable"-Element, für das Browser standardmäßig einen eigenen,
   uneinheitlich dicken Fokus-Rahmen zeichnen. Hier durch denselben schmalen Fokus-Ring
   ersetzt, der auch sonst in der App verwendet wird (siehe z. B. .akzent-swatch:focus-visible
   oben), statt den abweichenden Browser-Standard zu übernehmen. */
.ql-editor:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}

/* Firmenlogo als sehr dezentes Hintergrund-Wasserzeichen (Options-Kachel "Wasserzeichen",
   Pages/Einstellungen/Darstellung.cshtml) - fix in der rechten unteren Bildschirmecke, bleibt
   beim Scrollen an derselben Stelle. Standardmäßig ausgeblendet; wird nur eingeblendet, wenn
   der Anwender es aktiviert HAT (data-watermark="an" auf <html>, siehe früher Ladeblock in
   Pages/Shared/_Layout.cshtml) UND serverseitig tatsächlich ein Firmenlogo hinterlegt ist (das
   das Bild liefernde <div> wird sonst von _Layout.cshtml gar nicht erst gerendert - siehe dort).
   pointer-events:none, damit es nie Klicks auf darunterliegende Inhalte abfängt; niedriger,
   fester z-index, da es als erstes Element im <body> ohnehin hinter allen später im Dokument
   folgenden, normal positionierten Elementen zu liegen kommt. */
.app-watermark {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-repeat: no-repeat;
    background-position: bottom 90px right 40px;
    background-size: 300px auto;
    opacity: 0.28;
}
[data-watermark="an"] .app-watermark {
    display: block;
}

/* ============================================================================================
   MOBIL-NAVIGATION (Hamburger-Menü) - Phase 1 der Handy-/Tablet-Optimierung.
   ============================================================================================
   Bewusst als rein ADDITIVER Block ganz am Ende der Datei ergänzt: verändert keine einzige
   bestehende Desktop-Regel weiter oben, fügt nur NEUE Elemente hinzu (.mobile-nav-toggle/
   .mobile-nav-panel), die außerhalb der Mobil-Schwelle unsichtbar bleiben. Die bereits
   vorhandene Desktop-Navigation (.topbar nav, siehe weiter oben) bleibt für alle Bildschirme
   ab der Schwelle exakt wie bisher.

   Umschaltung erfolgt auf zwei Wegen (siehe Nutzer-Vorgabe "automatisch + manueller
   Umschalter"), die sich gegenseitig nicht stören:
   1. AUTOMATISCH per Bildschirmbreite (Media Query unten, Schwelle 780px - bewusst eigene,
      höhere Schwelle als die bestehenden 900/640/600px-Anpassungen weiter oben: hier geht es
      um die GESAMTE Navigationsstruktur, nicht um einzelne Layoutdetails, daher etwas
      großzügiger bemessen, damit z. B. ein Tablet im Hochformat noch die volle Desktop-
      Navigation zeigt).
   2. MANUELL per data-ansicht-modus="mobil"/"desktop" auf <html> (siehe Pages/Shared/
      _Layout.cshtml für den frühen Ladeblock sowie Pages/Einstellungen/
      Geraeteeinstellungen.cshtml, Karte "Ansicht") - überstimmt mit höherer Spezifität +
      !important die automatische Bildschirmbreiten-Erkennung, z. B. für ein Tablet im
      Querformat, das trotz ausreichender Breite die kompakte Bedienung bevorzugt, oder
      umgekehrt für ein sehr schmales Desktop-Fenster, in dem trotzdem die volle Navigation
      gewünscht ist. Der Standardwert (kein Attribut gesetzt = "automatisch") greift NICHT in
      die Media-Query-Regeln ein, siehe deren gewöhnliche (nicht !important) Deklarationen.
   ============================================================================================ */

.mobile-nav-toggle {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    margin-right: 14px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.28);
    border-radius: var(--radius);
    cursor: pointer;
    flex: 0 0 auto;
}
.mobile-nav-toggle:hover { background: rgba(255,255,255,0.2); }
.mobile-nav-toggle-bar {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--color-on-primary);
    border-radius: 1px;
}
.mobile-nav-toggle-bar + .mobile-nav-toggle-bar { margin-top: 4px; }

/* Panel selbst: als aufklappbarer Bereich direkt unterhalb der Kopfzeile, volle Breite -
   bewusst KEIN Overlay/Backdrop über dem restlichen Seiteninhalt (anders als ein klassisches
   Off-Canvas-Menü), damit die Umsetzung einfach bleibt und sich das bereits vorhandene
   "Klick außerhalb schließt"-Muster (siehe .nav-dropdown-menu-Logik in _Layout.cshtml) direkt
   wiederverwenden lässt. */
.mobile-nav-panel {
    display: none;
    position: sticky;
    top: var(--topbar-h, 54px);
    z-index: 200;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 8px 22px var(--color-shadow-sm);
}
.mobile-nav-panel.open { display: block; }
.mobile-nav-panel-inner {
    max-width: var(--seiten-breite);
    margin: 0 auto;
    padding: 10px 14px 14px;
    display: flex;
    flex-direction: column;
}
.mobile-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 8px;
    color: var(--color-text) !important;
    font-size: 15px;
    text-decoration: none !important;
    border-radius: var(--radius);
}
.mobile-nav-link:hover, .mobile-nav-link:active { background: var(--color-bg-alt2); }
.mobile-nav-link-start { font-weight: 600; }
.mobile-nav-link-secondary { font-size: 13.5px; color: var(--color-muted) !important; }
/* Nicht erreichbarer Bereich im Handy-Menü (Lizenz-Edition oder Rolle, siehe _Layout.cshtml) -
   sichtbar, aber grau und nicht antippbar; der Grund steht rechts als kleiner Zusatz. */
.mobile-nav-link.mobile-nav-link-inaktiv {
    color: var(--color-muted) !important;
    opacity: 0.6;
    cursor: not-allowed;
}
.mobile-nav-link.mobile-nav-link-inaktiv:hover,
.mobile-nav-link.mobile-nav-link-inaktiv:active { background: none; }
.mobile-nav-grund { margin-left: auto; font-size: 12px; }
.mobile-nav-separator {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 8px 4px;
}

@media (max-width: 780px) {
    .mobile-nav-toggle { display: inline-flex; }
    .topbar nav { display: none; }
}

/* Manueller Umschalter überstimmt die automatische Bildschirmbreiten-Erkennung oben (siehe
   Erklärung im Kommentarblock ganz oben). */
html[data-ansicht-modus="mobil"] .mobile-nav-toggle { display: inline-flex !important; }
html[data-ansicht-modus="mobil"] .topbar nav { display: none !important; }
html[data-ansicht-modus="desktop"] .mobile-nav-toggle { display: none !important; }
html[data-ansicht-modus="desktop"] .topbar nav { display: flex !important; }
html[data-ansicht-modus="desktop"] .mobile-nav-panel { display: none !important; }

/* ============================================================================================
   MOBIL-KACHELN für Beleglisten (Angebote/Aufträge/Lieferscheine/Rechnungen) - Phase 2 der
   Handy-/Tablet-Optimierung. Ersetzt NICHT die Tabelle im Markup (die bleibt für Desktop
   unverändert bestehen), sondern blendet zusätzlich eine parallele Kachel-Liste ein, die nur
   unterhalb der Mobil-Schwelle (bzw. bei manuell erzwungener Mobil-Ansicht, siehe
   data-ansicht-modus in Phase 1) sichtbar wird - dann verschwindet umgekehrt die Tabelle.
   Reduziert auf Nummer/Kunde/Datum/Betrag/Status (Nutzer-Vorgabe) - Detailinformationen liefert
   nicht die Kachel selbst, sondern das per Klick geöffnete PDF-Dokument, das ohnehin für jeden
   Beleg bereits existiert (siehe OnGetDownloadAsync in den jeweiligen Index.cshtml.cs).
   ============================================================================================ */

.mobile-beleg-liste {
    display: none;
    flex-direction: column;
    gap: 10px;
}
.mobile-beleg-karte {
    display: block;
    padding: 12px 14px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    text-decoration: none !important;
    color: var(--color-text) !important;
}
.mobile-beleg-karte:active { background: var(--color-bg-alt2); }
.mobile-beleg-karte-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.mobile-beleg-nr { font-weight: 600; font-size: 14.5px; }
.mobile-beleg-kunde {
    margin-top: 4px;
    font-size: 14px;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mobile-beleg-fuss {
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    color: var(--color-muted);
}
.mobile-beleg-betrag {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--color-text);
}

@media (max-width: 780px) {
    .mobile-beleg-liste { display: flex; }
    /* NUR ausblenden, wenn eine Kachel-Alternative tatsächlich vorhanden ist (siehe
       ".ap-table-wrap-hat-mobil-alt" - wird bewusst als eigene Markierungsklasse auf den
       betroffenen Tabellen ergänzt, siehe Pages/Quotes/Index.cshtml u. a.). Ohne diese
       Einschränkung verschwand die Tabelle bislang auf JEDER Listenseite auf dem Handy, auch
       auf den elf Listen, die (noch) gar keine eigene Kachel-Ansicht haben (Zahlungspläne,
       Eingangsrechnungen, Honorarvereinbarungen, Kassenbuch, Zahlungseingänge,
       Leistungsverzeichnis, Dokumente, E-Mail-Vorlagen, Telefonate, Passwörter, Papierkorb) -
       dort blieb dann nur eine komplett leere Fläche übrig (Nutzer-Rückmeldung). Eine
       ungeeignete (weil noch nicht kachelfähige) Tabelle bleibt jetzt lieber als normale,
       horizontal scrollbare Tabelle sichtbar, statt spurlos zu verschwinden. */
    .ap-table-wrap.ap-table-wrap-hat-mobil-alt { display: none; }
}

html[data-ansicht-modus="mobil"] .mobile-beleg-liste { display: flex !important; }
html[data-ansicht-modus="mobil"] .ap-table-wrap.ap-table-wrap-hat-mobil-alt { display: none !important; }
html[data-ansicht-modus="desktop"] .mobile-beleg-liste { display: none !important; }
html[data-ansicht-modus="desktop"] .ap-table-wrap { display: block !important; }

/* ============================================================================================
   MOBIL-KACHELN für Kontakte - Phase 3 der Handy-/Tablet-Optimierung. Gleiches additives
   Prinzip wie die Beleg-Kacheln weiter oben, aber eigene Kartenform: mehrere separat
   antippbare Aktionen (Anruf/E-Mail) statt eines einzelnen Kachel-Links, da eine Kontakt-
   Kachel mehrere sinnvolle Ziele hat statt eines einzelnen PDFs.
   ============================================================================================ */

.mobile-kontakt-liste {
    display: none;
    flex-direction: column;
    gap: 10px;
}
.mobile-kontakt-karte {
    padding: 10px 14px 8px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}
/* Kopf der Kachel (Name + ›) - öffnet den Kontakt. Großzügige Tippfläche über die ganze Breite. */
.mobile-kontakt-kopf {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0 6px;
    color: var(--color-text) !important;
    text-decoration: none !important;
}
.mobile-kontakt-kopf:active { background: var(--color-bg-alt2); }
.mobile-kontakt-name {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    font-size: 15px;
}
.mobile-kontakt-chevron {
    flex: 0 0 auto;
    font-size: 22px;
    line-height: 1;
    color: var(--color-muted);
}
.mobile-kontakt-aktionen {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.mobile-kontakt-aktion {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 4px;
    font-size: 14px;
    color: var(--color-text) !important;
    text-decoration: none !important;
    border-radius: var(--radius);
}
.mobile-kontakt-aktion:active { background: var(--color-bg-alt2); }
.mobile-kontakt-aktion span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mobile-kontakt-adresse { color: var(--color-muted) !important; font-size: 13.5px; }

/* Ansprechpartner-Bereich der Kachel: durch eine feine Linie vom Firmenteil getrennt. */
.mobile-kontakt-ap-bereich {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--color-border);
}
.mobile-kontakt-ap + .mobile-kontakt-ap,
.mobile-kontakt-ap-weitere .mobile-kontakt-ap { margin-top: 6px; }
.mobile-kontakt-ap-name {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px;
    padding: 4px 4px 0;
    font-size: 14px;
    font-weight: 600;
}
.mobile-kontakt-ap-stern { color: var(--color-primary); }
.mobile-kontakt-ap-funktion { font-weight: 400; color: var(--color-muted); }
.mobile-kontakt-ap .mobile-kontakt-aktion { padding-left: 20px; }
.mobile-kontakt-ap-weitere > summary {
    padding: 8px 4px;
    font-size: 13.5px;
    color: var(--color-primary);
    cursor: pointer;
    list-style: none;
}
.mobile-kontakt-ap-weitere > summary::-webkit-details-marker { display: none; }
.mobile-kontakt-ap-weitere > summary::before { content: "▸ "; }
.mobile-kontakt-ap-weitere[open] > summary::before { content: "▾ "; }

/* Mobiler Listen-Filter in der Werkzeugleiste (siehe Pages/Kontakte/Index.cshtml) - ersetzt dort
   das generische Hamburger-Panel (data-mobil-ohne-hamburger). Auf dem Desktop unsichtbar; dort
   bleibt der Filter wie gewohnt im "…"-Menü. Natives <select>, weil das auf Smartphones die
   gewohnte, gut bedienbare System-Auswahlliste öffnet. */
.mobile-listen-filter {
    display: none;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
}
.mobile-listen-filter label { font-size: 13.5px; color: var(--color-muted); }
.mobile-listen-filter select {
    flex: 1 1 auto;
    min-width: 0;
    padding: 6px 8px;
    font-size: 15px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
}
@media (max-width: 780px) {
    .ap-actionbar-listform > .mobile-listen-filter { display: flex; }
}
html[data-ansicht-modus="mobil"] .ap-actionbar-listform > .mobile-listen-filter { display: flex !important; }
html[data-ansicht-modus="desktop"] .ap-actionbar-listform > .mobile-listen-filter { display: none !important; }

@media (max-width: 780px) {
    .mobile-kontakt-liste { display: flex; }
}

html[data-ansicht-modus="mobil"] .mobile-kontakt-liste { display: flex !important; }
html[data-ansicht-modus="desktop"] .mobile-kontakt-liste { display: none !important; }

/* ============================================================================================
   MOBIL-KACHELN Projekte + reduzierte Projekt-Detailansicht - Phase 4 der Handy-/
   Tablet-Optimierung. Die Kachelliste selbst nutzt die bereits vorhandenen .mobile-beleg-*
   Klassen von Phase 2 (Rechnungen/Angebote/...) mit, da Aufbau und Optik identisch sind - kein
   eigener Klassensatz nötig. Neu ist die reduzierte Ansicht auf Pages/Projekte/Edit.cshtml:
   auf Mobilgeräten (Nutzer-Vorgabe: "Projekt-Detaildaten beschränkt auf Datenverzeichnis") wird
   ausschließlich die Karte "Projektverzeichnisse" gezeigt, alle übrigen Formular-Bereiche
   (Stammdaten/Termine/Standort/Kalkulation/Telefonate/Schriftverkehr/Rechnungen sowie die
   Speichern-Fußzeile) sind mit der Klasse "mobile-projekt-hide" markiert und werden hier
   ausgeblendet. Der GAEB-Infobereich (#gaebInfoPanel) bewusst NICHT in diese Liste
   aufgenommen: er blendet sich bereits über eine eigene, servergesteuerte Inline-Bedingung
   (nur bei vorhandenen GAEB-Importdaten) ein/aus - eine zusätzliche Mobil-Regel dafür würde
   entweder diese Bedingung ignorieren (immer verstecken) oder mit ihr kollidieren (fälschlich
   erzwungenes Wiedereinblenden im "Desktop erzwingen"-Fall unten). Der seltene Fall eines per
   GAEB importierten Projekts zeigt auf dem Handy also zusätzlich diese Karte - eine bewusst in
   Kauf genommene, geringfügige Abweichung von "nur Verzeichnis" zugunsten robuster, unabhängig
   von Editierzustand korrekter CSS-Regeln.

   Innerhalb der weiterhin sichtbaren Projektverzeichnisse-Karte reduziert "mobile-readonly-
   hide" zusätzlich auf reine Ansicht (kein Umbenennen/Löschen/Hochladen/Ordner anlegen, kein
   Bearbeiten des Stammverzeichnis-Pfads selbst) - passend zur Vorgabe, dass es bei Projekten
   (anders als Kalender/Kontakte) mobil um Informationsdarstellung geht, nicht um Datenerfassung.
   Das versteckte Pfad-Eingabefeld bleibt dabei technisch weiter vorhanden und befüllt (nur
   visuell ausgeblendet) - die Baumansicht liest seinen Wert unverändert aus, siehe
   wwwroot/js/projektverzeichnis-tree.js.
   ============================================================================================ */

@media (max-width: 780px) {
    #projektBearbeitenForm .mobile-projekt-hide,
    #projektBearbeitenForm .mobile-readonly-hide {
        display: none;
    }
}

html[data-ansicht-modus="mobil"] #projektBearbeitenForm .mobile-projekt-hide,
html[data-ansicht-modus="mobil"] #projektBearbeitenForm .mobile-readonly-hide {
    display: none !important;
}

/* Gezielte Wiederherstellung des jeweils korrekten display-Werts statt eines pauschalen
   "revert" - "revert" würde bei Elementen mit eigener, bedeutungsvoller Inline-Logik
   (hier nicht der Fall, aber zur Sicherheit konsistent mit dem Vorgehen bei den
   Beleg-/Kontakt-Kacheln) auch deren normale App-Formatierung überspringen. */
html[data-ansicht-modus="desktop"] #projektBearbeitenForm .mobile-projekt-hide {
    display: block !important;
}
html[data-ansicht-modus="desktop"] #projektBearbeitenForm .grid.mobile-readonly-hide {
    display: grid !important;
}
html[data-ansicht-modus="desktop"] #projektBearbeitenForm .ap-tbtn.mobile-readonly-hide {
    display: flex !important;
}

/* ============================================================================================
   MOBIL-HAMBURGER für Listen-Werkzeugleisten (.ap-actionbar-listform) - Phase 5 der Handy-/
   Tablet-Optimierung. Rein additiv wie die vorherigen Phasen: die eigentlichen Werkzeugleisten-
   Inhalte (.ap-actionbar-group/.ap-actionbar-divider/.ap-toolbar-overflow) bleiben im Markup
   unverändert bestehen, werden unterhalb der Mobil-Schwelle nur per CSS ausgeblendet und durch
   einen einzelnen Hamburger-Umschalter ersetzt, dessen Panel per JS (siehe
   wwwroot/js/mobile-listform-toolbar.js) aus genau denselben, bereits vorhandenen Buttons
   zusammengestellt wird - keine Fachlogik wird dafür verdoppelt, jeder Klick im Panel reicht
   einfach an den echten, ursprünglichen Button weiter.

   Bewusst NUR auf Elemente mit der zusätzlichen Markierungsklasse ".ap-actionbar-listform"
   angewendet (nicht auf jede beliebige .ap-actionbar) - Positionstabellen-Werkzeugleisten in
   den Beleg-Formularen (siehe Pages/Quotes/Create.cshtml u. a., dort bereits mit eigener,
   anderer Mobil-Lösung versehen) sowie Werkzeugleisten in Dialogen/Modals sollen davon
   unberührt bleiben.
   ============================================================================================ */

/* Kein zusätzliches "position: relative" nötig: .ap-actionbar ist bereits
   "position: sticky" (siehe weiter oben) - das reicht als Positionierungs-Kontext für das
   absolut positionierte .mobile-toolbar-panel unten vollkommen aus, "sticky" zählt genau wie
   "relative"/"absolute"/"fixed" als "positioniertes Element" im Sinne von CSS. Eine zusätzliche
   eigene "position: relative"-Regel hier hätte (und hatte tatsächlich kurzzeitig, siehe
   Nutzer-Rückmeldung) genau diese Sticky-Positionierung überschrieben, weil beide Selektoren
   dieselbe Spezifität besitzen und die spätere Regel in der Cascade gewinnt - die Werkzeugleiste
   verlor dadurch ihr "am oberen Rand kleben bleiben" auf JEDER Bildschirmgröße, nicht nur mobil,
   da hier keine Media-Query-Einschränkung vorhanden war. Absichtlich als Kommentar stehen
   gelassen, damit das nicht versehentlich wieder ergänzt wird. */

.mobile-toolbar-toggle {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-checkbox-border);
    border-radius: var(--radius);
    cursor: pointer;
    flex: 0 0 auto;
}
.mobile-toolbar-toggle-bar {
    display: block;
    width: 16px;
    height: 2px;
    background: var(--color-text);
    border-radius: 1px;
}
.mobile-toolbar-toggle-bar + .mobile-toolbar-toggle-bar { margin-top: 3px; }

.mobile-toolbar-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 90;
    background: var(--color-surface);
    border: 1px solid var(--color-checkbox-border);
    border-top: none;
    box-shadow: 0 8px 22px var(--color-shadow-sm);
    padding: 6px;
    flex-direction: column;
}
.mobile-toolbar-panel.open { display: flex; }
.mobile-toolbar-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 10px;
    background: none;
    border: none;
    border-radius: var(--radius);
    font-size: 15px;
    color: var(--color-text);
    text-align: left;
}
.mobile-toolbar-item:active:not(:disabled) { background: var(--color-bg-alt2); }
.mobile-toolbar-item:disabled { color: var(--color-muted); opacity: 0.5; }
.mobile-toolbar-item-hinweis {
    margin-left: auto;
    font-size: 11px;
    font-style: italic;
    white-space: nowrap;
}

@media (max-width: 780px) {
    .ap-actionbar-listform > .ap-actionbar-group,
    .ap-actionbar-listform > .ap-actionbar-divider,
    .ap-actionbar-listform > .ap-toolbar-overflow {
        display: none;
    }
    /* Ausnahme für einzelne Elemente, die auch mobil sichtbar/erreichbar bleiben sollen -
       z. B. der aktuelle Zeitraum im Kalender (reine Information, keine Aktion) oder dessen
       Anzeige-Filter (Checkboxen statt einfacher Klick-Aktionen, passen nicht ins generische
       Hamburger-Panel). Höhere Spezifität (zwei Klassen) gewinnt gegenüber der Regel darüber. */
    .ap-actionbar-listform > .mobile-toolbar-keep-visible {
        display: inline-flex;
    }
    .ap-actionbar-listform .mobile-toolbar-toggle { display: inline-flex; }
}

html[data-ansicht-modus="mobil"] .ap-actionbar-listform > .ap-actionbar-group,
html[data-ansicht-modus="mobil"] .ap-actionbar-listform > .ap-actionbar-divider,
html[data-ansicht-modus="mobil"] .ap-actionbar-listform > .ap-toolbar-overflow {
    display: none !important;
}
html[data-ansicht-modus="mobil"] .ap-actionbar-listform > .mobile-toolbar-keep-visible {
    display: inline-flex !important;
}
html[data-ansicht-modus="mobil"] .ap-actionbar-listform .mobile-toolbar-toggle { display: inline-flex !important; }

html[data-ansicht-modus="desktop"] .ap-actionbar-listform > .ap-actionbar-group { display: flex !important; }
html[data-ansicht-modus="desktop"] .ap-actionbar-listform > .ap-actionbar-divider { display: block !important; }
html[data-ansicht-modus="desktop"] .ap-actionbar-listform > .ap-toolbar-overflow { display: block !important; }
html[data-ansicht-modus="desktop"] .ap-actionbar-listform .mobile-toolbar-toggle { display: none !important; }
html[data-ansicht-modus="desktop"] .ap-actionbar-listform .mobile-toolbar-panel { display: none !important; }

/* ============================================================================================
   MOBIL: Beschreibungstext unter der Seitenüberschrift kürzen - Phase 6.
   ============================================================================================ */
@media (max-width: 780px) {
    /* Beschreibungstext direkt unter der Seitenüberschrift (z. B. "Von Lieferanten/
       Dienstleistern erhaltene Rechnungen (ZUGFeRD-PDF, ...)" bei den Eingangsrechnungen) auf
       maximal zwei Zeilen mit Auslassungspunkten begrenzen - manche dieser Texte sind für den
       großzügigen Desktop-Platz geschrieben und nehmen auf dem Handy sonst einen unverhältnis-
       mäßig großen Teil des sichtbaren Bereichs ein, bevor überhaupt Inhalt zu sehen ist
       (Nutzer-Rückmeldung). Bewusst NUR die beiden folgenden, sehr spezifischen Selektoren
       (nicht ".subtitle" allgemein, das wird an vielen anderen Stellen der App - z. B.
       Beschreibungstexte in Karten oder Geräteeinstellungen - mit anderer, gewollter Länge
       verwendet): "h1 + p.subtitle" deckt das übliche Muster ab (Unterzeile direkt nach der
       Überschrift), "page-header + p.subtitle" zusätzlich das abweichende Kassenbuch-Layout
       (dort liegt die Überschrift in einem eigenen .page-header-Wrapper). */
    /* Überarbeitet: statt auf zwei Zeilen zu kürzen jetzt ganz ausgeblendet (Nutzer-
       Rückmeldung "Kontakte mobil") - der gekürzte Text ("Kunden, Lieferante...") wirkte neben
       dem Suchfeld wie ein gesetzter Filter und bringt auf dem Handy ohnehin keinen Nutzen. */
    h1 + p.subtitle,
    .page-header + p.subtitle {
        display: none;
    }
}

html[data-ansicht-modus="mobil"] h1 + p.subtitle,
html[data-ansicht-modus="mobil"] .page-header + p.subtitle {
    display: none !important;
}
html[data-ansicht-modus="desktop"] h1 + p.subtitle,
html[data-ansicht-modus="desktop"] .page-header + p.subtitle {
    display: block !important;
    overflow: visible !important;
}

/* ============================================================================================
   MOBIL-KACHELN, generische Variante für Listen ohne Beleg-Charakter (Nummer/Kunde/Datum/
   Betrag/Status passt nicht überall) - Phase 6. Drei Zeilen: Titel, Unterzeile, Meta-Zeile
   (klein, gedämpft) - deutlich schlichter als .mobile-beleg-karte, da diese Listen
   (Leistungsverzeichnis, Dokumente, E-Mail-Vorlagen, Telefonate, Passwörter, Papierkorb)
   fachlich zu unterschiedlich sind, um sie in EIN gemeinsames Kachel-Schema mit fester
   Bedeutung je Zeile zu pressen.
   ============================================================================================ */
.mobile-info-liste {
    display: none;
    flex-direction: column;
    gap: 10px;
}
.mobile-info-karte {
    display: block;
    padding: 12px 14px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    text-decoration: none !important;
    color: var(--color-text) !important;
}
.mobile-info-karte:active { background: var(--color-bg-alt2); }
.mobile-info-karte-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.mobile-info-karte-titel { font-weight: 600; font-size: 14.5px; }
.mobile-info-karte-sub {
    margin-top: 4px;
    font-size: 14px;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mobile-info-karte-meta {
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    color: var(--color-muted);
}

@media (max-width: 780px) {
    .mobile-info-liste { display: flex; }
}
html[data-ansicht-modus="mobil"] .mobile-info-liste { display: flex !important; }
html[data-ansicht-modus="desktop"] .mobile-info-liste { display: none !important; }

/* ============================================================================================
   Kalender-Werkzeugleiste - zweiter Anlauf nach Nutzer-Feedback (Bildvorlage): flache Optik
   ohne sichtbare Ränder/Hintergrund im Ruhezustand (das liefert die normale .ap-tbtn-Regel
   bereits von selbst, siehe weiter oben - keine eigene Pillen-Klasse mehr nötig) plus eine
   große, dezente Monat/Jahr-Anzeige oben rechts statt einer kleinen Textzeile in der
   Werkzeugleiste selbst.
   ============================================================================================ */
.ap-tbtn-caret {
    margin-left: 6px;
    font-size: 10px;
    opacity: 0.7;
}
#ansichtMenu a {
    min-width: 120px;
}

/* Seitenkopf der Kalenderseite (siehe Pages/Kalender/Index.cshtml) - Raster mit zwei Spalten.
   Zeile 1: "Zurück" rechts, Zeilen 2+3: links Überschrift und Untertitel, rechts die große
   Zeitraum-Anzeige über beide Zeilen hinweg, an deren UNTERKANTE ausgerichtet - dadurch hat
   sie denselben Abstand zur Werkzeugleiste wie der Untertitel links (Nutzer-Vorgabe). */
.kalender-kopf {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        ".          zurueck"
        "titel      zeitraum"
        "untertitel zeitraum";
    column-gap: 16px;
    align-items: baseline;
}
.kalender-kopf-zurueck { grid-area: zurueck; justify-self: end; }
.kalender-kopf-titel { grid-area: titel; margin: 0 0 4px; }
.kalender-kopf-untertitel { grid-area: untertitel; margin-bottom: 8px; }

/* Große Zeitraum-Anzeige (siehe #kalenderMonatWasserzeichen) - sitzt im Seitenkopf rechts
   neben der Überschrift. Dunkelgrauer Text mit weißem Schatten (Nutzer-Vorgabe) - wirkt auf
   dem hellen Seitenhintergrund leicht "eingeprägt" und ist im Unterschied zur früheren
   Variante (weißer Text mit dunklem Schatten) gut lesbar. */
.kalender-monat-anzeige {
    grid-area: zeitraum;
    justify-self: end;
    align-self: end;
    text-align: right;
    font-size: 28px;
    line-height: 1.1;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
    color: #4a5056;
    /* Weißer Schatten allein ist auf dem hellen Seitenhintergrund kaum zu sehen (Nutzer-
       Feedback "Schatten fehlt") - daher versetzter, harter weißer Schatten plus ein
       zarter dunkler Weichzeichner dahinter, der die weiße Kante erst sichtbar macht. */
    text-shadow: 2px 2px 0 #ffffff, 3px 3px 5px rgba(0, 0, 0, 0.28);
    /* Gleicher Abstand nach unten wie .kalender-kopf-untertitel (margin-bottom: 8px). */
    margin: 0 0 8px;
}

/* Kalender-Werkzeugleiste (Pages/Kalender/Index.cshtml): größeres Plus, Icon vor "Heute",
   größerer Pfeil der Ansichtsauswahl; der Trennstrich vor der Ansichtsauswahl schiebt diese
   samt "…"-Menü an den rechten Rand (das "…"-Menü selbst braucht dann kein eigenes auto mehr,
   sonst würde der freie Platz zwischen beiden aufgeteilt). */
.kalender-toolbar .kalender-plus { font-size: 22px; font-weight: 400; width: 18px; line-height: 1; }
.kalender-toolbar .kalender-heute-icon { width: 24px; height: 24px; margin: -4px 0; display: block; }
.kalender-toolbar #btnHeute { gap: 6px; }
.kalender-toolbar .kalender-ansicht-caret { font-size: 13px; color: var(--color-primary); }
.kalender-toolbar > .ap-actionbar-divider.kalender-divider-rechts { margin-left: auto; }
/* Trennstriche sichtbar machen: --color-border entspricht in einigen Designs exakt dem
   Toolbar-Hintergrund. Gedämpfte Textfarbe mit Transparenz passt in allen Designs. */
.kalender-toolbar > .ap-actionbar-divider { background: var(--color-muted); opacity: 0.45; margin-top: 4px; margin-bottom: 4px; }
.kalender-toolbar > .ap-toolbar-overflow { margin-left: 0; }

/* Blätter-Schalter der Kalender-Werkzeugleiste (◀ Vorheriger Monat / Nächster Monat ▶). */
.kalender-blaettern { gap: 6px; }
.kalender-blaettern-icon { font-size: 11px; width: auto; }

/* Regelzeiten im Kalender (businessHours, siehe wwwroot/js/kalender.js): Zeiten AUSSERHALB
   06-18 Uhr Mo-Fr sowie das Wochenende werden in Woche/Tag grau hinterlegt - etwas kräftiger
   als der FullCalendar-Standard, damit es auf dem cremefarbenen Hintergrund erkennbar ist. */
#kalenderContainer { --fc-non-business-color: rgba(120, 120, 120, 0.13); }
[data-theme="dark"] #kalenderContainer { --fc-non-business-color: rgba(0, 0, 0, 0.28); }
/* Im dunklen Design wäre dunkelgrau auf dunklem Grund unlesbar - dort umgekehrt. */
[data-theme="dark"] .kalender-monat-anzeige {
    color: #c9d0d6;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6), 1px 2px 3px rgba(0, 0, 0, 0.5);
}
/* Die kompakte Titel-Anzeige in der Werkzeugleiste (siehe #kalenderTitel) ist auf dem Desktop
   überflüssig, da dort die große Anzeige oben dieselbe Information liefert - bleibt aber
   vorhanden und wird per JS weiterhin befüllt (siehe wwwroot/js/kalender.js), damit sie auf
   schmalen Bildschirmen (dort ist kein Platz für die große Anzeige) weiterhin funktioniert. */
.kalender-titel-kompakt { display: none; }
@media (max-width: 780px) {
    .kalender-monat-anzeige { display: none; }
    .kalender-titel-kompakt { display: inline; }
}
html[data-ansicht-modus="mobil"] .kalender-monat-anzeige { display: none !important; }
html[data-ansicht-modus="mobil"] .kalender-titel-kompakt { display: inline !important; }
html[data-ansicht-modus="desktop"] .kalender-monat-anzeige { display: block !important; }
html[data-ansicht-modus="desktop"] .kalender-titel-kompakt { display: none !important; }

/* ===== Gemeinsamer E-Mail-Dialog (wwwroot/js/email-dialog.js) ==========================
   Ein Dialog für Neue E-Mail, Antworten und Weiterleiten an allen Stellen der Anwendung.
   Auswahllisten (.ed-pop) liegen bewusst außerhalb des scrollenden Dialogs (position: fixed),
   damit sie nicht abgeschnitten werden. Farben ausschließlich über die Theme-Variablen. */
.ed-modal { position: fixed; inset: 0; z-index: 230; display: flex; align-items: flex-start; justify-content: center; padding: 24px 12px; }
.ed-modal[hidden], .ed-modal [hidden] { display: none !important; }
.ed-backdrop { position: absolute; inset: 0; background: var(--color-modal-backdrop); }
.ed-dialog {
    position: relative; width: 780px; max-width: 100%; max-height: calc(100vh - 48px);
    display: flex; flex-direction: column; background: var(--color-surface); color: var(--color-text);
    border-radius: 10px; box-shadow: 0 24px 60px rgba(0, 0, 0, .35); font-size: 14px;
}
.ed-dialog *, .ed-pop * { box-sizing: border-box; }
.ed-dialog input, .ed-dialog textarea, .ed-dialog select, .ed-dialog button, .ed-pop input, .ed-pop button { font: inherit; color: inherit; }
.ed-kopf { display: flex; align-items: center; gap: 12px; padding: 14px 14px 12px 24px; border-bottom: 1px solid var(--color-border); }
.ed-kopf-text { flex: 1; min-width: 0; }
.ed-kopf h2 { margin: 0; font-size: 18px; font-weight: 600; color: var(--color-primary); }
[data-theme="dark"] .ed-kopf h2 { color: var(--color-text); }
.ed-kopf .ed-hinweis { margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ed-hinweis { color: var(--color-muted); font-size: 12.5px; }
.ed-fehltext { color: var(--color-danger); font-size: 12.5px; margin-top: 5px; }
.ed-laden { padding: 48px 24px; text-align: center; color: var(--color-muted); }
.ed-koerper { overflow-y: auto; flex: 1 1 auto; min-height: 0; }

.ed-zeile { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: start; gap: 12px; padding: 9px 24px; border-bottom: 1px solid var(--color-border-light); }
.ed-lbl { padding-top: 10px; font-size: 13px; font-weight: 600; color: var(--color-muted); }
.ed-feld { min-width: 0; }
.ed-an-zeile, .ed-betreff-zeile { display: flex; gap: 8px; align-items: flex-start; }
.ed-an-zeile .ed-tok, .ed-betreff-zeile .ed-input { flex: 1; min-width: 0; }

.ed-input { width: 100%; height: 40px; padding: 0 10px; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-surface); outline: 0; }
.ed-input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); }
.ed-tok { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 40px; padding: 4px 6px; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-surface); cursor: text; }
.ed-tok.ed-fokus { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); }
.ed-tok input { flex: 1 1 160px; min-width: 120px; height: 30px; padding: 0 4px; border: 0; outline: 0; background: transparent; }
.ed-feld-fehler, .ed-tok.ed-feld-fehler { border-color: var(--color-danger) !important; }
.ed-chip { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; height: 30px; padding: 0 2px 0 10px; border-radius: 15px; background: var(--color-primary-tint); color: var(--color-primary); font-size: 13.5px; font-weight: 600; cursor: default; user-select: none; }
[data-theme="dark"] .ed-chip { color: var(--color-text); }
.ed-chip small { margin-left: 4px; font-weight: 400; color: var(--color-muted); }
.ed-chip-fehler { background: var(--color-danger-bg); color: var(--color-danger); }
.ed-chip button { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 0; border-radius: 13px; background: transparent; cursor: pointer; }
.ed-chip button:hover { background: rgba(0, 0, 0, .08); }
.ed-einzeln { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; cursor: pointer; }
.ed-einzeln input { width: 16px; height: 16px; accent-color: var(--color-primary); }
.ed-ohne-adresse { margin-top: 6px; }
.ed-undo { display: flex; align-items: center; gap: 4px; margin-top: 6px; }

.ed-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-surface); cursor: pointer; white-space: nowrap; }
.ed-btn:hover { background: var(--color-bg-hover); }
.ed-btn:disabled { opacity: .6; cursor: default; }
.ed-btn-prim { padding: 0 22px; border-color: var(--color-primary); background: var(--color-primary); color: var(--color-on-primary) !important; font-weight: 600; }
.ed-btn-prim:hover { background: var(--color-primary-dark); }
.ed-btn-text { border-color: transparent; background: transparent; color: var(--color-primary) !important; padding: 0 10px; }
[data-theme="dark"] .ed-btn-text { color: var(--color-text) !important; }
.ed-btn-text:hover { background: var(--color-primary-tint); }
.ed-btn-klein { height: 30px; padding: 0 8px; font-size: 13px; }
.ed-btn-icon { width: 40px; padding: 0; justify-content: center; border-color: transparent; background: transparent; }
.ed-btn-gefahr { border-color: var(--color-danger); background: var(--color-danger); color: #fff !important; font-weight: 600; }

.ed-ablage { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ed-ablage-kontakt { display: inline-flex; align-items: center; gap: 8px; height: 40px; max-width: 320px; padding: 0 12px; border-radius: 6px; background: var(--color-bg-alt2); color: var(--color-text); }
.ed-ablage-kontakt > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ed-ablage-kontakt svg, .ed-projekt-knopf > svg:first-child, .ed-ablage-pfeil { color: var(--color-muted); flex: none; }
.ed-ablage-pfeil { display: inline-flex; }
.ed-projekt-knopf { max-width: 100%; min-width: 0; }
.ed-projekt-text { overflow: hidden; text-overflow: ellipsis; }
.ed-tag { flex: none; padding: 2px 8px; border-radius: 10px; background: var(--color-bg-alt2); color: var(--color-muted); font-size: 11.5px; }
.ed-tag-akzent { background: var(--color-primary-tint); color: var(--color-primary); }

.ed-text { padding: 12px 24px 6px; }
.ed-anrede { width: 100%; height: 32px; margin-bottom: 10px; padding: 0; border: 0; outline: 0; background: transparent; font-weight: 600; }
.ed-anrede:disabled { font-weight: 400; font-style: italic; }
.ed-anrede::placeholder { color: var(--color-muted); font-weight: 400; }
.ed-nachricht { display: block; width: 100%; min-height: 200px; padding: 4px 0; border: 0; outline: 0; resize: vertical; background: transparent; line-height: 1.55; }
.ed-gruss-zeile { display: flex; align-items: center; gap: 10px; padding-top: 8px; border-top: 1px dashed var(--color-border); }
.ed-gruss-zeile select { height: 34px; padding: 0 8px; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-surface); }
.ed-gruss-vorschau { padding: 10px 0 4px; line-height: 1.55; }
.ed-signatur { padding-bottom: 8px; color: var(--color-muted); font-size: 12.5px; line-height: 1.5; }
.ed-zitat { margin: 4px 0 8px; border: 1px solid var(--color-border-light); border-radius: 8px; background: var(--color-bg-alt); }
.ed-zitat summary { padding: 9px 14px; font-size: 13px; font-weight: 600; color: var(--color-muted); cursor: pointer; }
.ed-zitat pre { max-height: 260px; overflow: auto; margin: 0 14px 12px; padding: 2px 0 2px 12px; border-left: 3px solid var(--color-border); white-space: pre-wrap; font: inherit; font-size: 13px; color: var(--color-muted); }

.ed-anhaenge { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 24px 14px; border-top: 1px solid var(--color-border-light); }
.ed-ae { display: inline-flex; align-items: center; gap: 6px; height: 34px; max-width: 100%; padding: 0 4px 0 10px; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-surface); font-size: 13px; }
.ed-ae-vorlage { border-style: dashed; }
.ed-ae-fest { padding-right: 10px; background: var(--color-primary-tint); border-color: transparent; font-weight: 600; }
.ed-ae em { font-style: normal; color: var(--color-muted); }
.ed-ae button { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 0; border-radius: 4px; background: transparent; color: var(--color-muted); cursor: pointer; }
.ed-ae button:hover { background: var(--color-bg-hover); }

.ed-verwerfen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 24px; border-top: 1px solid var(--color-border); background: var(--color-warning-bg); }
.ed-verwerfen > span { flex: 1; min-width: 200px; }
.ed-fuss { display: flex; align-items: center; gap: 10px; padding: 12px 24px; border-top: 1px solid var(--color-border); background: var(--color-bg-alt); border-radius: 0 0 10px 10px; }
.ed-fuss-info { flex: 1; min-width: 0; }
.ed-fuss-info .ed-hinweis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ed-fertig { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 32px 40px; text-align: center; }
.ed-fertig-icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 28px; background: var(--color-success-bg); color: var(--color-success); }
.ed-fertig-titel { font-size: 18px; font-weight: 600; }
.ed-fertig .ed-hinweis { font-size: 14px; max-width: 560px; }
.ed-drop { position: absolute; inset: 8px; display: flex; align-items: center; justify-content: center; border: 2px dashed var(--color-primary); border-radius: 10px; background: var(--color-primary-tint); color: var(--color-primary); font-size: 16px; font-weight: 600; opacity: .95; pointer-events: none; }

.ed-pop { position: fixed; z-index: 240; overflow: auto; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); color: var(--color-text); box-shadow: 0 12px 32px rgba(16, 24, 40, .22); font-size: 14px; padding: 4px 0; }
.ed-pop-vorlagen { display: grid; grid-template-columns: 250px minmax(0, 1fr); padding: 0; overflow: hidden; }
.ed-vorlagen-liste { padding: 8px 0; border-right: 1px solid var(--color-border-light); overflow-y: auto; }
.ed-vorlagen-vorschau { padding: 12px 16px; background: var(--color-bg-alt); overflow-y: auto; min-height: 200px; }
.ed-vv-betreff { margin-bottom: 10px; font-weight: 600; }
.ed-vv-text { margin-bottom: 10px; white-space: pre-line; font-size: 13.5px; line-height: 1.5; }
.ed-vv-hinweis { margin-top: 10px; }
.ed-vorlagen-vorschau .ed-grp { padding: 0 0 4px; }
.ed-pop-suche { padding: 4px 10px 6px; }
.ed-pop-suche .ed-input { height: 36px; }
.ed-pop-scroll { overflow-y: auto; max-height: 320px; }
.ed-pop-leer { padding: 8px 12px 10px; }
.ed-grp { padding: 8px 12px 4px; color: var(--color-muted); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.ed-vor { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 12px; border: 0; background: transparent; text-align: left; cursor: pointer; }
.ed-vor:hover, .ed-vor.ed-akt { background: var(--color-primary-tint); }
.ed-vor.ed-gewaehlt { font-weight: 600; }
.ed-vor svg { flex: none; color: var(--color-muted); }
.ed-vor-text { flex: 1; min-width: 0; }
.ed-vor-text > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-vor-name { font-weight: 600; }
.ed-vor-frei { border-top: 1px solid var(--color-border-light); }
.ed-ini { display: flex; align-items: center; justify-content: center; flex: none; width: 30px; height: 30px; border-radius: 15px; background: var(--color-primary); color: var(--color-on-primary); font-size: 12px; font-weight: 700; }
.ed-ini-firma { background: var(--color-muted); }
.ed-projekt-nr { flex: none; width: 96px; color: var(--color-muted); font-size: 13px; }
.ed-haken { display: inline-flex; color: var(--color-primary); }

@media (max-width: 640px) {
    .ed-modal { padding: 0; }
    .ed-dialog { max-height: 100vh; height: 100%; border-radius: 0; }
    .ed-zeile { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 8px 14px; }
    .ed-lbl { padding-top: 0; }
    .ed-text, .ed-anhaenge { padding-left: 14px; padding-right: 14px; }
    .ed-kopf { padding-left: 14px; }
    .ed-fuss { flex-wrap: wrap; padding: 10px 14px; border-radius: 0; }
    .ed-fuss-info { flex-basis: 100%; }
    .ed-pop-vorlagen { grid-template-columns: minmax(0, 1fr); }
    .ed-vorlagen-vorschau { display: none; }
}

/* ===== Ansprechpartner: sofortiges Speichern (Kontakt bearbeiten, 16.10.2026) =====
   Rückmeldung neben der Ansprechpartner-Toolbar ("Ansprechpartner gespeichert." bzw.
   Fehlermeldung), siehe zeigeStatus in wwwroot/js/ansprechpartner-verwaltung.js. */
.ap-speicher-status {
    display: none;
    margin-left: 10px;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 12px;
    color: var(--color-success);
    background: var(--color-success-bg);
}
.ap-speicher-status.fehler { color: var(--color-danger); background: var(--color-danger-bg); }
.ap-tbtn-selected-count + .ap-speicher-status { margin-left: 10px; }
.ap-modal-hinweis { margin: 10px 0 0; font-size: 12px; }

/* ===== Kontakt: Karte "Kategorie" (16.10.2026) =====
   Gewählte Kategorien in Klammern neben der Überschrift - nur bei geschlossener Karte, siehe
   wwwroot/js/kontakt-kategorien.js. Warnhinweis/roter Rahmen, wenn ohne Kategorie gespeichert
   werden sollte. */
.kategorie-zusammenfassung { font-weight: normal; font-size: 0.85em; color: var(--color-muted); }
.kategorie-zusammenfassung.fehlt { color: var(--color-danger); }
details[open] > summary .kategorie-zusammenfassung { display: none; }
.kategorie-warnung {
    margin: 0 0 12px;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    color: var(--color-danger);
    background: var(--color-danger-bg);
}
details.card.karte-fehler { border-color: var(--color-danger); }

/* ===== Hilfe → Systeminformationen (16.10.2026) =====
   Dialog aus wwwroot/js/hilfe-menue.js, Inhalt aus Pages/Systeminfo/Index.cshtml. */
.email-modal-dialog.sysinfo-dialog { width: 680px; }
.sysinfo-zusammenfassung {
    display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding: 8px 12px; border-radius: 6px; font-size: 13px; margin-bottom: 6px;
}
.sysinfo-zusammenfassung.sysinfo-ok { background: var(--color-success-bg); color: var(--color-success); }
.sysinfo-zusammenfassung.sysinfo-warnung { background: var(--color-danger-bg); color: var(--color-danger); }
.sysinfo-stand { color: var(--color-muted); }
.sysinfo-abschnitt h3 { display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 16px 0 6px; }
.sysinfo-ampel { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.sysinfo-ampel.sysinfo-ok { background: var(--color-success); }
.sysinfo-ampel.sysinfo-hinweis { background: #c58a00; }
.sysinfo-ampel.sysinfo-warnung { background: var(--color-danger); }
.sysinfo-tabelle { width: 100%; border-collapse: collapse; font-size: 13px; }
.sysinfo-tabelle th, .sysinfo-tabelle td { text-align: left; vertical-align: top; padding: 4px 0; border-bottom: 1px solid var(--color-border-light); }
.sysinfo-tabelle th { font-weight: normal; color: var(--color-muted); width: 38%; padding-right: 12px; }
.sysinfo-wert { word-break: break-word; }
.sysinfo-zeilenhinweis { font-size: 12px; color: var(--color-muted); margin-top: 2px; }
tr.sysinfo-warnung .sysinfo-zeilenhinweis, tr.sysinfo-warnung .sysinfo-wert { color: var(--color-danger); }
tr.sysinfo-hinweis .sysinfo-zeilenhinweis { color: #9a6b00; }
.sysinfo-fussnote { margin: 12px 0 0; font-size: 12px; }
.sysinfo-kopiert { align-self: center; font-size: 12px; color: var(--color-success); }

/* ===== Hilfe → Support kontaktieren (16.10.2026) =====
   Dialog aus wwwroot/js/support-dialog.js, Inhalt aus Pages/Support/Index.cshtml. */
.email-modal-dialog.support-dialog { width: 720px; max-height: calc(100vh - 40px); overflow-y: auto; }
.support-kopf {
    display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding: 10px 12px; border-radius: 6px; border: 1px solid var(--color-border);
    font-size: 13px; margin-bottom: 4px;
}
.support-kopf-titel { font-weight: 600; }
.support-kopf-zeiten { text-align: right; color: var(--color-muted); }
.support-kopf-zeiten strong { color: inherit; font-weight: 600; }
.support-hinweis {
    margin-top: 10px; padding: 8px 12px; border-radius: 6px; font-size: 13px;
    background: #fff6dd; color: #7a5600;
}
.support-zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.support-label { display: block; font-size: 12.5px; color: var(--color-muted); margin-bottom: 4px; }
.support [hidden] { display: none !important; }
.support-radios { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.support-radios label, .field label.support-check { font-weight: normal; display: flex; align-items: center; gap: 6px; font-size: 13px; color: inherit; }
.support-check { margin-top: 6px; }
.support-check-oben { margin-top: 0; margin-bottom: 4px; }
.support .pflicht { color: var(--color-danger); }
.support-seite-wert { font-size: 13px; color: var(--color-muted); word-break: break-all; }
.support-ablage {
    margin-top: 8px; padding: 14px; border: 2px dashed var(--color-border); border-radius: 6px;
    font-size: 13px; text-align: center; outline: none;
}
.support-ablage.ziel, .support-ablage:focus { border-color: var(--color-primary); }
.support-ablage .subtitle { font-size: 12px; margin-top: 4px; }
.support .link-button { background: none; border: none; padding: 0; color: var(--color-primary); text-decoration: underline; cursor: pointer; font: inherit; }
.support kbd { font-size: 11px; padding: 0 4px; border: 1px solid var(--color-border); border-radius: 3px; }
.support-dateien { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.support-dateien li { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.support-dateien img { width: 48px; height: 32px; object-fit: cover; border-radius: 3px; border: 1px solid var(--color-border); }
.support-datei-name { flex: 1; word-break: break-all; }
.support-datei-entfernen { background: none; border: none; cursor: pointer; color: var(--color-muted); font-size: 14px; }
.support-datei-entfernen:hover { color: var(--color-danger); }
.support-erfolg { margin-top: 12px; padding: 12px; border-radius: 6px; background: var(--color-success-bg); font-size: 14px; }
.support-erfolg-titel { font-weight: 600; color: var(--color-success); margin-bottom: 4px; }
.support-vorbereitet { margin-top: 12px; font-size: 13px; }
.support-vorbereitet textarea { width: 100%; font-family: Consolas, monospace; font-size: 12px; }
.support-aktionen { margin-top: 16px; align-items: center; }
.support-fusszeile { font-size: 12px; }
@media (max-width: 640px) { .support-zeile { grid-template-columns: 1fr; gap: 0; } }
[data-theme="dark"] .support-hinweis { background: rgba(197, 138, 0, 0.18); color: #f0c060; }

/* ===== Kontakt: Anrede/Name (16.10.2026) =====
   Pages/Kontakte/_KontaktName.cshtml, wwwroot/js/kontakt-anrede.js. Bei Herr/Frau erscheinen
   Titel/Vorname/Nachname, der Name rutscht in die nächste Zeile und ist nur lesbar; sonst steht
   der Name direkt neben der Anrede. */
.kontakt-name-felder .nur-person { display: none; }
.kontakt-name-felder.ist-person .nur-person { display: flex; }
.kontakt-name-felder .kontakt-name-feld { grid-column: span 3; }
.kontakt-name-felder.ist-person .kontakt-name-feld { grid-column: 1 / span 2; }
.kontakt-name-felder.ist-person .kontakt-name-feld input[readonly] { background: var(--color-bg); color: var(--color-muted); }
.kontakt-name-hinweis { font-size: 12px; margin-top: 2px; }
.kontakt-name-felder.ist-person .kontakt-name-hinweis { display: block; }
@media (max-width: 900px) {
    .kontakt-name-felder .kontakt-name-feld,
    .kontakt-name-felder.ist-person .kontakt-name-feld { grid-column: auto; }
}

/* Bestätigungsdialog (wwwroot/js/bestaetigen-dialog.js) immer über anderen Dialogen, z. B. der
   Rückfrage beim Schließen des Support-Dialogs (16.10.2026). */
#bestaetigenModal { z-index: 230; }

/* ===== Testdaten zurücksetzen (16.10.2026) - Pages/Einstellungen/TestdatenZuruecksetzen.cshtml ===== */
.testdaten-warnung { border-color: var(--color-danger); }
.testdaten-warnung h2 { color: var(--color-danger); }
.testdaten-check { display: flex; align-items: center; gap: 8px; font-weight: normal; }
.testdaten-tabelle td:first-child, .testdaten-tabelle th:first-child { text-align: left; width: auto; }
.testdaten-tabelle tr.bleibt td { color: var(--color-muted); }
.testdaten-tabelle tr.weg td:last-child { color: var(--color-danger); }

/* ===== Dokumenteingang (18.10.2026) - Pages/Dokumente/Index.cshtml, Eingang.cshtml,
   Pages/Shared/_DokumentRichtung.cshtml, _SchriftverkehrKarte.cshtml ===== */
.dok-richtung { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; line-height: 1; }
.dok-richtung.eingang { color: var(--color-success); }
.dok-richtung.ausgang { color: var(--color-primary); }
th.col-richtung, td.col-richtung { width: 2rem; text-align: center; padding-left: 4px; padding-right: 4px; }
h1 .dok-richtung svg { width: 26px; height: 26px; }
.dok-filter { display: inline-flex; border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; margin-left: 12px; }
.dok-filter-btn {
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--color-surface); color: var(--color-text);
    border: 0; padding: 5px 10px; font-size: 13px; cursor: pointer;
}
.dok-filter .dok-filter-btn + .dok-filter-btn { border-left: 1px solid var(--color-border); }
.dok-filter-btn:hover { background: var(--color-surface-hover); }
.dok-filter-btn.aktiv { background: var(--color-primary-tint); color: var(--color-primary-dark); font-weight: 600; }
.dok-offen-btn { border: 1px solid var(--color-border); border-radius: var(--radius); margin-left: 8px; }
.dok-offen-btn.hat-offene { color: var(--color-success-text); }
.dok-offen-btn.aktiv { background: var(--color-success-bg); color: var(--color-success-text); }
.status-badge.dok-status-neu { background: var(--color-success-bg); color: var(--color-success-text); font-weight: 600; }
tr.dok-offen td { font-weight: 600; }
tr.dok-offen td .subtitle { font-weight: normal; }
#neuMenu li { padding: 0; }
#neuMenu li a { display: block; padding: 8px 14px; color: var(--color-text); text-decoration: none; }
#neuMenu li a .subtitle { font-size: 12px; }
.dok-meldung { border-left: 4px solid var(--color-success); }
.mobile-info-karte-kopf { display: flex; align-items: center; gap: 6px; }
@media (max-width: 760px) {
    .dok-filter { margin-left: 0; }
}
/* Auswahlfelder für nicht lizenzierte Module (z. B. Projekt, Mitarbeiter in IT7.Web Light) -
   bleiben im Formular (Werte, JS), sind aber nicht sichtbar. */
.dok-ohne-modul { display: none !important; }

/* ===== Dokumenteingang Stufe 2 + 3 (18.10.2026): Ablage aus dem Posteingang, Fristen ===== */
.postfach-anhang-gruppe { display: inline-flex; align-items: center; gap: 2px; }
.postfach-anhang-menue {
    border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text);
    border-radius: 999px; width: 24px; height: 24px; font-size: 11px; cursor: pointer; padding: 0;
}
.postfach-anhang-menue:hover { background: var(--color-surface-hover); }
.postfach-anhang-abgelegt {
    display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
    border-radius: 999px; background: var(--color-success-bg); color: var(--color-success-text);
    text-decoration: none; font-weight: 700; font-size: 12px;
}
.btn.email-abgelegt { color: var(--color-success-text); }
.postfach-ablage-meldung { margin: 10px 20px 0; padding: 8px 12px; border-radius: var(--radius); font-size: 13px; }
.postfach-ablage-meldung.ok { background: var(--color-success-bg); color: var(--color-success-text); }
.postfach-ablage-meldung.fehler { background: var(--color-danger-bg); color: var(--color-danger); }
.postfach-ablage-meldung a { margin-left: 6px; font-weight: 600; }

.dok-frist-schnell { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.dok-frist-karte.ueberfaellig { border-left: 4px solid var(--color-danger); }
.dok-frist-badge {
    display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px; font-size: 12px;
    background: var(--color-bg-alt); color: var(--color-text); white-space: nowrap;
}
.dok-frist-badge.bald { background: var(--color-info-bg); color: var(--color-info); font-weight: 600; }
.dok-frist-badge.ueberfaellig { background: var(--color-danger-bg); color: var(--color-danger); font-weight: 600; }
.dok-fristen-btn.hat-faellige { color: var(--color-danger); }
.fristen-karte .geburtstage-titel { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.fristen-alle { font-size: 12px; font-weight: normal; }
.fristen-eintrag { display: flex; align-items: center; gap: 4px; }
.fristen-eintrag .geburtstage-eintrag-link { flex: 1 1 auto; min-width: 0; }
.fristen-eintrag.ueberfaellig .geburtstage-wann { color: var(--color-danger); font-weight: 600; }
.fristen-erledigt-form { margin: 0; flex: 0 0 auto; }
.fristen-erledigt {
    border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-success-text);
    border-radius: 999px; width: 26px; height: 26px; cursor: pointer; font-weight: 700;
}
.fristen-erledigt:hover { background: var(--color-success-bg); }

/* ===== Einrichtungsassistent (Paket C, 18.10.2026) - Pages/Einrichtung/Index.cshtml ===== */
.einrichtung { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 20px; align-items: start; }
.einrichtung-schritte { position: sticky; top: 90px; }
.einrichtung-schritte ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.einrichtung-schritte a { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: var(--radius); color: var(--color-text); text-decoration: none; }
.einrichtung-schritte a:hover { background: var(--color-surface-hover); }
.einrichtung-schritte li.aktiv a { background: var(--color-primary-tint); }
.einrichtung-nr {
    flex: 0 0 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    border: 2px solid var(--color-border); font-size: 12px; font-weight: 700; background: var(--color-surface);
}
.einrichtung-schritte li.aktiv .einrichtung-nr { border-color: var(--color-primary); color: var(--color-primary); }
.einrichtung-schritte li.erledigt .einrichtung-nr { background: var(--color-success); border-color: var(--color-success); color: #fff; }
.einrichtung-schritte li.uebersprungen .einrichtung-nr { color: var(--color-muted); }
.einrichtung-titel { display: flex; flex-direction: column; font-weight: 600; font-size: 14px; line-height: 1.25; }
.einrichtung-titel small { font-weight: normal; font-size: 12px; color: var(--color-muted); }
.einrichtung-schritte li.pflicht:not(.erledigt) small { color: var(--color-danger); }
.einrichtung-fortschritt { height: 6px; margin: 12px 10px 0; border-radius: 3px; background: var(--color-border); overflow: hidden; }
.einrichtung-fortschritt div { height: 100%; background: var(--color-success); }
.einrichtung-kopf { margin-bottom: 12px; }
.einrichtung-kopf h2 { margin: 2px 0 0; }
.einrichtung-kopf-nr { font-size: 12px; color: var(--color-muted); text-transform: uppercase; letter-spacing: .04em; }
.einrichtung-wahl { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-top: 6px; }
.einrichtung-wahl-karte {
    display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 2px solid var(--color-border);
    border-radius: var(--radius); cursor: pointer; font-weight: normal; position: relative;
}
.einrichtung-wahl-karte input { position: absolute; top: 12px; right: 12px; }
.einrichtung-wahl-karte span { font-size: 13px; color: var(--color-muted); }
.einrichtung-wahl-karte:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary-tint); }
.einrichtung-info { margin-top: 14px; border-collapse: collapse; font-size: 13px; }
.einrichtung-info th { text-align: left; padding: 3px 14px 3px 0; color: var(--color-muted); font-weight: normal; white-space: nowrap; }
.einrichtung-info td { padding: 3px 0; word-break: break-all; }
.einrichtung-logo { display: flex; gap: 16px; align-items: flex-start; margin-top: 16px; }
.einrichtung-logo-vorschau {
    flex: 0 0 200px; height: 80px; border: 1px dashed var(--color-border); border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center; background: #fff; padding: 6px;
}
.einrichtung-logo-vorschau img { max-width: 100%; max-height: 100%; }
.einrichtung-nummern input { padding: 4px 6px; }
.einrichtung-test { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.einrichtung-test input { max-width: 280px; }
.einrichtung-test-ergebnis { font-size: 13px; }
.einrichtung-test-ergebnis.ok { color: var(--color-success-text); }
.einrichtung-test-ergebnis.fehler { color: var(--color-danger); }
.einrichtung-zusammenfassung { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.einrichtung-zusammenfassung li { display: flex; gap: 10px; align-items: baseline; }
.einrichtung-zusammenfassung li > span { width: 20px; text-align: center; font-weight: 700; }
.einrichtung-zusammenfassung li.ok > span { color: var(--color-success-text); }
.einrichtung-zusammenfassung li.fehlt > span, .einrichtung-zusammenfassung li.fehlt small { color: var(--color-danger); }
.einrichtung-zusammenfassung small { color: var(--color-muted); }
.einrichtung-hinweise li.warnung { color: var(--color-danger); }
.einrichtung-spaeter { margin-left: auto; }
.einrichtung-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
@media (max-width: 860px) {
    .einrichtung { grid-template-columns: 1fr; }
    .einrichtung-schritte { position: static; }
    .einrichtung-schritte ol { flex-direction: row; overflow-x: auto; }
    .einrichtung-titel small { display: none; }
}

/* ===== E-Mail-Testschalter (19.10.2026) - Optionen SMTP/IMAP ===== */
.mail-test { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--color-border); }
.mail-test input { max-width: 280px; }
.mail-test-ergebnis { font-size: 13px; flex: 1 1 260px; }
.mail-test-ergebnis.ok { color: var(--color-success-text); }
.mail-test-ergebnis.fehler { color: var(--color-danger); }
.mail-abruf-status { font-size: 13px; padding: 8px 12px; border-radius: var(--radius); background: var(--color-bg-alt); margin-bottom: 12px; }
.mail-abruf-status.fehler { background: var(--color-danger-bg); color: var(--color-danger); }

/* ============================================================================================
   MOBIL-KURZFORMULAR Kontakte (Pages/Kontakte/Mobil.cshtml, Präfix .mk-) - ein Formular für
   Neuanlage und Bearbeitung auf dem Handy, davor bei Neuanlage die Auswahl der drei
   Erfassungswege (Visitenkarte/Diktat/von Hand). Einspaltig, große Tippflächen, 16px-
   Schrift in Eingabefeldern (verhindert das automatische Hineinzoomen von iOS Safari beim
   Antippen eines Feldes). Auf dem PC wird die Seite einfach auf Handybreite zentriert.
   ============================================================================================ */
.mk-seite { max-width: 640px; margin: 0 auto; }
.mk-kopf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.mk-kopf h1 { margin: 0; }
.mk-hinweis { color: var(--color-muted); font-size: 14px; margin: 0 0 10px; }
.mk-hinweis-klein { font-size: 12.5px; margin-top: 10px; color: var(--color-muted); }

.mk-wege { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.mk-weg {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 16px;
    text-align: left;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text);
    font-family: inherit;
    cursor: pointer;
}
.mk-weg:active:not(:disabled) { background: var(--color-bg-alt2); }
.mk-weg:disabled { opacity: 0.5; cursor: default; }
.mk-weg-icon { font-size: 28px; line-height: 1; flex: 0 0 auto; }
.mk-weg-text { display: flex; flex-direction: column; gap: 2px; }
.mk-weg-text strong { font-size: 16px; }
.mk-weg-text small { font-size: 13px; color: var(--color-muted); }
/* Visitenkarte: Kopfzeile + zwei Schaltflächen (Kamera/Galerie) in einer Karte. */
.mk-weg-gruppe { flex-direction: column; align-items: stretch; gap: 12px; cursor: default; }
.mk-weg-zeile { display: flex; align-items: center; gap: 14px; }
.mk-weg-knoepfe { display: flex; gap: 10px; }
.mk-weg-knoepfe .btn { flex: 1 1 0; padding: 10px 8px; font-size: 14.5px; text-align: center; }
.mk-weg-inaktiv { opacity: 0.5; }

.mk-diktat textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    font-size: 16px;
    font-family: inherit;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-input-bg);
    color: var(--color-text);
    resize: vertical;
}
.mk-diktat-leiste { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.mk-diktat-leiste #mkDiktatAuswerten { margin-left: auto; }
.mk-mikro.aktiv { background: var(--color-danger-bg); border-color: var(--color-danger); color: var(--color-danger); }
.mk-mikro-status { font-size: 13px; color: var(--color-danger); }
.mk-link-btn {
    background: none;
    border: none;
    padding: 8px 0;
    color: var(--color-primary);
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
}

.mk-laden { display: flex; align-items: center; gap: 12px; }
.mk-spinner {
    width: 22px;
    height: 22px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: mk-drehen 0.9s linear infinite;
    flex: 0 0 auto;
}
@keyframes mk-drehen { to { transform: rotate(360deg); } }

.mk-dubletten { border-color: var(--color-danger); }
.mk-dubletten ul { margin: 8px 0; padding-left: 20px; }
.mk-dubletten li { padding: 3px 0; }

.mk-abschnitt { padding: 14px 16px; margin-bottom: 12px; }
.mk-abschnitt h2 { font-size: 15px; margin: 0 0 10px; }
.mk-feld { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; min-width: 0; }
.mk-feld label { font-size: 12.5px; color: var(--color-muted); }
.mk-feld input, .mk-feld select {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 10px;
    font-size: 16px;
    font-family: inherit;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-input-bg);
    color: var(--color-text);
}
.mk-zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mk-zeile-plz { grid-template-columns: 7em 1fr; }
.mk-feldfehler { color: var(--color-danger); font-size: 13px; margin: 2px 0 6px; }

.mk-ap {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 8px 12px 2px;
    margin-bottom: 10px;
    background: var(--color-bg);
}
.mk-ap-kopf { display: flex; align-items: center; justify-content: space-between; }
.mk-ap-standard { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; }
.mk-ap-entfernen { color: var(--color-danger); }
.mk-ap-neu { width: 100%; }

/* Speichern-Leiste klebt unten am Bildschirm, damit sie auch bei langer Ansprechpartner-Liste
   ohne Scrollen erreichbar ist. */
.mk-fuss {
    position: sticky;
    bottom: 0;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
    z-index: 5;
}
.mk-fuss .btn { flex: 1 1 0; text-align: center; padding: 11px 16px; font-size: 15px; }

/* "+ Neu" neben dem Kategorie-Filter der mobilen Kontaktliste. */
.mobile-listen-filter .mobile-listen-neu { flex: 0 0 auto; padding: 6px 14px; white-space: nowrap; }

/* Erkannte Firma gibt es schon (Neuanlage per Visitenkarte/Diktat) - Auswahl "nur als
   Ansprechpartner hinzufügen" oder "trotzdem neu anlegen". */
.mk-firma-vorhanden { display: flex; flex-direction: column; gap: 10px; }
.mk-firma-titel { margin: 0; font-weight: 600; }
.mk-firma-treffer {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
}
.mk-firma-treffer small { color: var(--color-muted); }
.mk-firma-treffer .btn { width: 100%; padding: 10px; text-align: center; }

/* "Ansprechpartner von Visitenkarte" im Bearbeiten-Modus. */
.mk-ap-karte { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.mk-ap-karte .mk-hinweis-klein { margin: 0; }
/* Frisch von einer Visitenkarte übernommener Ansprechpartner - bis zum Speichern hervorgehoben. */
.mk-ap.mk-ap-neu-markiert { border-color: var(--color-success); box-shadow: 0 0 0 2px var(--color-success-bg); }