@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Sora:wght@500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700&family=Archivo:wght@500;600;700&family=Outfit:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
    /* Kontare-Markenfarben (siehe kontare-design-system.md) */
    --ink: #1A1A16;
    --paper: #F4F3EE;
    --paper-dim: #EAE8E0;
    --orange: #FF5A1F;
    --orange-dark: #D6440F;
    /* Generische Akzentfarbe der App (Buttons, aktive Nav-/Tab-/Filter-
       Zustände, Fokus-Ränder, Logo-Marke) — standardmäßig identisch zu
       --orange (Design 1 "Werkstatt"), aber die EINZIGE Stelle, die von
       den 4 weiteren wählbaren Designs (firmendaten.php, Abschnitt
       "Erscheinungsbild", siehe die [data-design="..."]-Blöcke weiter
       unten) tatsächlich überschrieben wird. --orange selbst bleibt dadurch
       für jedes Design unverändert die echte Orange-Farbe (aktuell nirgends
       mehr direkt referenziert, nur noch Namensgeber/Design-1-Wert). */
    --akzent: var(--orange);
    --akzent-dark: var(--orange-dark);
    --mint: #2ECC8F;
    --mint-dark: #1FA875;
    --blueprint: #2B4C7E;
    /* Helleres, eigenständiges Blau nur für die Liquiditäts-Linie im
       Cashflow-Chart + "Überbezahlt"-Badge (Nutzer-Feedback 19.07.2026:
       "Liquidität in einem helleren Blau darstellen" — nicht das dunkle
       Blueprint, aber auch nicht Orange). Ursprünglich Material "Light Blue
       500" (#03A9F4, der Farbton, der schon vor dem Kontare-Rebranding
       dafür verwendet wurde) — auf weiteres Feedback ("etwas dunkler, damit
       es sich vom Blau von Papierkram unterscheidet") auf "Light Blue 800"
       nachgedunkelt, da #03A9F4 zufällig exakt der alte Papierkram-Blauton
       war. */
    --liquidity-blue: #0277BD;

    --surface: #FFFFFF;
    --border: #D8D5C9;
    --border-strong: #B8B5A6;

    --text-primary: #1A1A16;
    --text-secondary: #5A5849;
    --text-muted: #8A8878;
    --text-disabled: #B5B3A5;

    --error: #D64545;
    --error-surface: #FBEAE8;
    --warning: #E8A339;
    --warning-surface: #FCF3E3;
    --info-surface: #E9EEF6;
    --success-surface: #E6F9F1;

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-full: 999px;

    --shadow-sm: 0 2px 6px rgba(26, 26, 22, 0.06);
    --shadow-md: 0 8px 20px rgba(26, 26, 22, 0.08);
    --shadow-lg: 0 20px 40px -20px rgba(26, 26, 22, 0.25);

    --font-display: 'Space Grotesk', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* Bestehende Variablennamen aus dem ursprünglichen (NTEC-)Stylesheet
       bleiben als Aliase auf die neuen Kontare-Tokens erhalten — dadurch
       funktioniert die komplette bestehende CSS (hunderte Selektoren über
       alle Seiten) unverändert weiter, nur mit dem neuen Farb-/Font-System
       darunter. Neue Komponenten sollten direkt die Kontare-Tokens oben
       verwenden statt dieser Aliase. */
    --color-bg: var(--paper);
    --color-surface: var(--surface);
    --color-border: var(--border);
    --color-text: var(--text-primary);
    --color-text-muted: var(--text-muted);
    --color-button: var(--akzent);
    --color-button-hover: var(--akzent-dark);
    --color-danger: var(--error);
    --color-danger-bg: var(--error-surface);
    --color-success: var(--mint-dark);
    --color-success-bg: var(--success-surface);
    --color-warning: #A66A1F;
    --color-warning-bg: var(--warning-surface);
    /* Nutzer-Feedback 19.07.2026: Blueprint komplett aus der UI entfernt
       ("alles was noch in Blau ist" -> Orange) — --color-heading (Links,
       aktive Nav-/Tab-/Filter-Zustände, Fokus-Ränder, Zwischenüberschriften
       wie details-Summaries) zeigt jetzt auf --akzent statt --blueprint
       (bis 20.08.2026: --orange direkt — seitdem über den generischen
       Akzent-Token, damit ein gewähltes Zweit-/Drittdesign hier ebenfalls
       greift, siehe --akzent oben). --color-liquidity (Liquiditäts-Linie im
       Cashflow-Chart, "Überbezahlt"-Badge) zunächst versuchsweise auf
       --orange-dark umgestellt, auf weiteres Nutzer-Feedback ("Liquidität
       in einem helleren Blau darstellen") aber wieder auf ein
       eigenständiges, helleres Blau zurückgestellt (--liquidity-blue statt
       --blueprint) — bewusst blau bleibend (unabhängig vom gewählten
       Design), da eine dritte Chart-Linie klar vom Akzent (Buttons, aktive
       Nav) unterscheidbar sein soll. --blueprint selbst bleibt als Token
       definiert (aktuell ungenutzt), falls später doch wieder gebraucht. */
    --color-heading: var(--akzent);
    --color-money-positive: var(--mint-dark);
    --color-money-negative: var(--error);
    --color-liquidity: var(--liquidity-blue);
    --radius: var(--radius-md);
    --shadow: var(--shadow-sm);
}

/* Dunkelmodus — überschreibt sowohl die rohen Marken-Tokens (--paper,
   --surface, --border, --text-*, --*-surface) als auch die Alias-Ebene
   direkt darunter, da vereinzelt auch unmittelbar auf rohe Tokens statt
   der Aliase zugegriffen wird (nicht überall nur var(--color-bg) etc.) —
   explizite Werte an beiden Stellen statt sich auf implizite
   Custom-Property-Kaskade zu verlassen, einfacher nachzuvollziehen/zu
   pflegen. Aktiviert über [data-theme="dark"] auf <html> (siehe
   src/View/header.php: ein blockierendes Skript ganz oben in <head> setzt
   das Attribut synchron aus localStorage bzw. prefers-color-scheme, bevor
   die Seite zeichnet — verhindert das kurze Aufblitzen des falschen
   Themes). Palette: warmer dunkler Grundton (kein reines Schwarz, in
   Anlehnung an --ink), Text-/Hintergrundrollen vertauscht, Marken-Akzente
   (Orange bleibt, Mint/Liquiditäts-Blau/Warnfarbe aufgehellt) für
   ausreichenden Kontrast auf dunklem Grund. */
:root[data-theme="dark"] {
    --paper: #17160F;
    --paper-dim: #1D1B17;
    --surface: #211F1A;
    --border: #38352C;
    --border-strong: #49453A;

    --text-primary: #EEEBE2;
    --text-secondary: #B7B3A4;
    --text-muted: #8F8C7D;
    --text-disabled: #5C594C;

    --error: #F16C6C;
    --error-surface: #3A1F1E;
    --warning: #F0B15C;
    --warning-surface: #3D2E14;
    --info-surface: #1C2733;
    --success-surface: #173226;
    --mint-dark: #3ED9A0;
    --liquidity-blue: #57C6F5;

    --color-bg: var(--paper);
    --color-surface: var(--surface);
    --color-border: var(--border);
    --color-text: var(--text-primary);
    --color-text-muted: var(--text-muted);
    --color-button: var(--akzent);
    --color-button-hover: var(--akzent-dark);
    --color-danger: var(--error);
    --color-danger-bg: var(--error-surface);
    --color-success: var(--mint-dark);
    --color-success-bg: var(--success-surface);
    --color-warning: #F0B15C;
    --color-warning-bg: var(--warning-surface);
    --color-heading: var(--akzent);
    --color-money-positive: var(--mint-dark);
    --color-money-negative: var(--error);
    --color-liquidity: var(--liquidity-blue);
}

/* 4 weitere wählbare Designs (Nutzervorgabe/Mockup 20.08.2026, gilt pro
   Firmeninstanz — Admin wählt unter firmendaten.php "Erscheinungsbild",
   gespeichert in firmendaten.design, ausgegeben als [data-design] auf
   <html> in header.php/login.php/kein_zugriff.php/404.php). Design 1
   "Werkstatt" ist der Default (kein [data-design]-Attribut nötig, das ist
   exakt der bereits bestehende :root-Block oben). Jedes Design ändert
   bewusst NUR vier Dinge: Hintergrundton (--paper/--paper-dim), Akzentfarbe
   (--akzent/--akzent-dark), Kopf-Schriftart (--font-display) und
   Eckenradius (--radius-sm/-md/-lg) — Card-Weiß, Text-Ink, Rahmen- und
   Status-Farben (Fehler/Warnung/Erfolg/Geld-Rot-Grün) bleiben für ALLE
   Designs identisch (keine 5-fache Farbpflege für rein semantische Töne,
   und "Fehler bleibt Rot" unabhängig vom Markendesign ist ohnehin
   erwartbares Verhalten). Die Alias-Ebene (--color-bg, --color-button etc.)
   muss hier NICHT erneut deklariert werden — sie verweist bereits per
   var(--paper)/var(--akzent) auf genau diese Tokens und löst sich dadurch
   pro Element automatisch über die normale CSS-Kaskade neu auf, auch wenn
   die Alias-Deklaration selbst nur einmal (in :root) steht.
   Dunkelmodus je Design: --paper/--paper-dim werden dort bewusst wieder
   auf die Dark-Werte von Design 1 zurückgesetzt (einheitlicher, neutraler
   dunkler Grundton für alle Designs, nur --akzent/--akzent-dark
   unterscheiden sich) — der kombinierte Selektor
   [data-design="X"][data-theme="dark"] hat höhere Spezifität als die
   beiden einzelnen [data-theme="dark"]- bzw. [data-design="X"]-Blöcke und
   gewinnt dadurch unabhängig von der Reihenfolge im Stylesheet. */
:root[data-design="fokus"] {
    --paper: #F0F2FA;
    --paper-dim: #E3E7F7;
    --akzent: #3B5BDB;
    --akzent-dark: #2C46B0;
    --font-display: 'Sora', sans-serif;
    --radius-sm: 12px;
    --radius-md: 20px;
    --radius-lg: 28px;
}

:root[data-design="fokus"][data-theme="dark"] {
    --paper: #17160F;
    --paper-dim: #1D1B17;
    --akzent: #6C8CFF;
    --akzent-dark: #4F6FE0;
}

:root[data-design="trieb"] {
    --paper: #EFF6F1;
    --paper-dim: #E1EEE4;
    --akzent: #1F8A5F;
    --akzent-dark: #166B48;
    --font-display: 'Plus Jakarta Sans', sans-serif;
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 22px;
}

:root[data-design="trieb"][data-theme="dark"] {
    --paper: #17160F;
    --paper-dim: #1D1B17;
    --akzent: #3ED9A0;
    --akzent-dark: #2BB884;
}

:root[data-design="puls"] {
    --paper: #F5F2F0;
    --paper-dim: #EAE4E1;
    --akzent: #C62B1F;
    --akzent-dark: #9E2117;
    --font-display: 'Archivo', sans-serif;
    --radius-sm: 5px;
    --radius-md: 8px;
    --radius-lg: 11px;
}

:root[data-design="puls"][data-theme="dark"] {
    --paper: #17160F;
    --paper-dim: #1D1B17;
    --akzent: #FF6B57;
    --akzent-dark: #E8503C;
}

:root[data-design="weitblick"] {
    --paper: #F2F0FA;
    --paper-dim: #E6E2F5;
    --akzent: #6B46E5;
    --akzent-dark: #5333BD;
    --font-display: 'Outfit', sans-serif;
    --radius-sm: 11px;
    --radius-md: 18px;
    --radius-lg: 25px;
}

:root[data-design="weitblick"][data-theme="dark"] {
    --paper: #17160F;
    --paper-dim: #1D1B17;
    --akzent: #9B7FFF;
    --akzent-dark: #7D5FE8;
}

* {
    box-sizing: border-box;
}

html {
    font-size: 14px;
}

body {
    margin: 0;
    font-family: var(--font-body);
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.5;
}

h1, h2, h3, .topnav-brand {
    font-family: var(--font-display);
}

a {
    color: var(--color-heading);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Nutzer-Feedback 19.07.2026: die zuerst umgesetzte dunkle Ink-Navigation
   (laut Design-System Abschnitt 5 als Vorschlag enthalten) wurde wieder
   verworfen — Navigation bleibt in der normalen Hintergrundfarbe. Die
   dunkle Variante hatte außerdem einen echten Bug: die hier separat
   gesetzten hellen Textfarben kollidierten mit den weiter unten stehenden
   Original-Regeln für .topnav-links a etc. (gleiche Spezifität, spätere
   Regel gewinnt) — je nach Zustand landete dadurch dunkler Text auf
   dunklem Grund ("Schrift wird bei MouseOver unsichtbar"). Mit der
   hellen Navigation entfällt dieser Konflikt komplett, da nur noch eine
   Regelquelle (weiter unten) die Farben bestimmt. */
.topnav {
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
}

.topnav-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0.75rem 1.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
}

.topnav-brand {
    display: flex;
    align-items: center;
    margin-right: 0.5rem;
}

/* Kontare-Wortmarke (exakte Vorgabe): Space Grotesk Bold 700, 22px, Ink
   (#1A1A16) Text; davor ein 11×11px Quadrat, 2px Eckenradius, Signal-Orange
   (#FF5A1F), 6° im Uhrzeigersinn gedreht, 8px Abstand zum Text, vertikal
   zentriert. Eigene Klassen statt fester Bindung an .topnav-brand, damit
   dieselbe Wortmarke auch auf der Login-Seite verwendbar ist. */
.kontare-logo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.kontare-logo-mark {
    display: inline-block;
    width: 11px;
    height: 11px;
    border-radius: 2px;
    background: var(--akzent);
    transform: rotate(6deg);
    flex-shrink: 0;
}

/* Bug gefunden 11.08.2026: Text war fest auf #1A1A16 (Ink) verdrahtet statt
   var(--color-text) — dadurch im Dunkelmodus praktisch unsichtbar (dunkler
   Text auf dem jetzt ebenfalls dunklen Hintergrund). var(--color-text)
   entspricht im Hellmodus exakt demselben #1A1A16 (siehe --text-primary),
   die "exakte Vorgabe" bleibt also optisch unverändert, passt sich im
   Dunkelmodus aber korrekt an. */
.kontare-logo-text {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    color: var(--color-text);
    line-height: 1;
}

/* Logo ist ein Link (führt zum Dashboard) — soll aber nicht wie ein
   normaler Textlink bei Hover unterstrichen werden. */
.kontare-logo:hover {
    text-decoration: none;
}

/* Eigenes Firmenlogo oben links in der Navigation (White-Label-Alternative
   zur Kontare-Wortmarke) — Höhe an die Navigationsleiste angepasst,
   Seitenverhältnis erhalten, auch bei sehr breiten/hohen Logos begrenzt. */
.topnav-firmenlogo {
    display: block;
    max-height: 32px;
    max-width: 180px;
    object-fit: contain;
}

.topnav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    flex: 1;
}

.topnav-links a {
    color: var(--color-text-muted);
    padding: 0.4rem 0.6rem;
    border-radius: var(--radius);
    font-size: 0.92rem;
}

.topnav-links a:hover {
    background: var(--color-bg);
    text-decoration: none;
}

.topnav-links a.active {
    color: var(--color-heading);
    background: var(--color-bg);
    font-weight: 600;
}

/* Dropdown-Untermenüs in der Hauptnavigation (Verkauf/Einkauf/Stammdaten/
   Auswertungen/Einstellungen) — eigenes, einfacheres Muster als das
   bestehende .dropdown/.dropdown-menu (das ist für Aktions-Buttons wie
   "Mehr ▾" gedacht, hier geht es um reine Navigationslinks). */
.topnav-dropdown {
    position: relative;
}

.topnav-dropdown-trigger {
    display: inline-block;
    color: var(--color-text-muted);
    padding: 0.4rem 0.6rem;
    border-radius: var(--radius);
    font-size: 0.92rem;
    cursor: pointer;
    user-select: none;
}

.topnav-dropdown-trigger:hover,
.topnav-dropdown.open .topnav-dropdown-trigger {
    background: var(--color-bg);
}

.topnav-dropdown-trigger.active {
    color: var(--color-heading);
    background: var(--color-bg);
    font-weight: 600;
}

.topnav-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    min-width: 190px;
    padding: 0.4rem;
    z-index: 30;
}

/* Kind- statt Nachfahren-Selektor (>) — wichtig für verschachtelte
   Untermenüs (siehe .topnav-dropdown-menu-nested weiter unten): sonst
   würde das Öffnen des äußeren Dropdowns (z. B. Auswertungen) automatisch
   auch das verschachtelte Flyout-Menü darin anzeigen, unabhängig von
   dessen eigenem .open-Zustand. */
.topnav-dropdown.open > .topnav-dropdown-menu {
    display: block;
}

/* Zusätzlich zum bestehenden Klick-Toggle (JS, siehe header.php — bewusst
   für Touch-Geräte gewählt) öffnet sich das Untermenü auf echten
   Zeigegeräten (Maus) jetzt auch schon bei reinem Hover. Auf
   "hover: hover" + "pointer: fine" beschränkt, damit Touch-Geräte (kein
   echtes Hover) unverändert beim Klick-Verhalten bleiben. Auch hier Kind-
   statt Nachfahren-Selektor, aus demselben Grund wie oben. */
@media (hover: hover) and (pointer: fine) {
    .topnav-dropdown:hover > .topnav-dropdown-menu {
        display: block;
    }
}

.topnav-dropdown-menu a {
    display: block;
    padding: 0.45rem 0.6rem;
    color: var(--color-text);
    border-radius: var(--radius);
    font-size: 0.9rem;
    white-space: nowrap;
}

.topnav-dropdown-menu a:hover {
    background: var(--color-bg);
    text-decoration: none;
}

.topnav-dropdown-menu a.active {
    color: var(--color-heading);
    font-weight: 600;
}

/* Verschachteltes Untermenü (aktuell nur "Weitere Auswertungen" innerhalb
   von Auswertungen) — der Auslöser sitzt als Zeile mitten im Menü (statt
   in der Kopfzeile wie die Top-Level-Trigger), das eigentliche Untermenü
   klappt als Flyout nach rechts auf statt nach unten. */
.topnav-dropdown-menu .topnav-dropdown {
    position: relative;
}

.topnav-dropdown-menu .topnav-dropdown-trigger {
    display: block;
    padding: 0.45rem 0.6rem;
    border-radius: var(--radius);
    font-size: 0.9rem;
    color: var(--color-text);
}

.topnav-dropdown-menu .topnav-dropdown-trigger::after {
    content: ' ›';
}

.topnav-dropdown-menu .topnav-dropdown-trigger:hover,
.topnav-dropdown-menu .topnav-dropdown.open > .topnav-dropdown-trigger {
    background: var(--color-bg);
}

.topnav-dropdown-menu-nested {
    top: 0;
    left: 100%;
}

@media (max-width: 860px) {
    .topnav-dropdown-menu .topnav-dropdown-trigger::after {
        content: '';
    }
}

.topnav-user {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    white-space: nowrap;
}

.topnav-user-mobil {
    display: none;
}

/* Desktop-Variante bewusst als reine Icons statt Textzeile (Nutzerwunsch
   22.08.2026) — bringt die Hauptnavigation auf eine Zeile zurück, vor
   allem wenn ein Kunde sein eigenes Logo einbindet (nimmt mehr Platz ein
   als das schmale Kontare-Logo). Name/Rolle bleiben per title-Attribut
   (Mouseover-Tooltip) abrufbar, exakt wie beim bereits bestehenden
   Hell-/Dunkelmodus-Umschalter-Icon nebenan. Mobil (.topnav-user-mobil)
   bewusst unverändert als Textzeile — im aufgeklappten Hamburger-Menü ist
   genug Platz, und Hover/title funktioniert auf Touch-Geräten ohnehin
   nicht zuverlässig. */
.topnav-user-desktop {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.topnav-user-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
}

.topnav-logout-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    padding: 0.3rem;
    border-radius: var(--radius);
}

.topnav-logout-icon:hover {
    background: var(--color-bg);
    color: var(--color-heading);
}

/* Mobiler Schnellzugriff aufs Scannen + Hamburger-Menü — auf Desktop-Breiten
   ausgeblendet, siehe Media Query unten. */
.topnav-scan-icon {
    display: none;
    color: var(--color-heading);
    padding: 0.4rem;
    border-radius: var(--radius);
}

.topnav-scan-icon:hover,
.topnav-scan-icon.active {
    background: var(--color-bg);
}

/* Hell-/Dunkelmodus-Umschalter — rechtsbündig, direkt links neben
   "Abmelden" (Nutzer-Feedback 11.08.2026: zunächst immer sichtbar neben
   dem Logo platziert, jetzt stattdessen zur Nutzer-Zeile verschoben) —
   deshalb wie "Abmelden" selbst als Desktop-/Mobil-Variante dupliziert
   (siehe .topnav-mobil-only unten sowie header.php). Zeigt je nach
   aktuellem [data-theme] nur eines der beiden Icons (Sonne im Hellmodus =
   "zu Dunkel wechseln", Mond im Dunkelmodus = "zu Hell wechseln"). */
.topnav-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-heading);
    padding: 0.4rem;
    border-radius: var(--radius);
    /* margin-top: 0 überschreibt bewusst die generische `button { margin-top:
       1rem }`-Regel weiter unten (für normale Formular-Buttons gedacht) —
       ohne diese Zeile sitzt der Button 1rem tiefer als seine Geschwister
       (Logo/Nutzer-Text), die alle über align-items:center auf .topnav-inner
       vertikal zentriert werden (Bug gefunden 11.08.2026, Icon sah dadurch
       sichtbar "zu weit unten" aus). */
    margin: 0 0 0 0.5rem;
    background: none;
    border: 0;
    cursor: pointer;
}

.topnav-theme-toggle:hover {
    background: var(--color-bg);
}

.topnav-theme-toggle .icon-mond {
    display: none;
}

:root[data-theme="dark"] .topnav-theme-toggle .icon-sonne {
    display: none;
}

:root[data-theme="dark"] .topnav-theme-toggle .icon-mond {
    display: inline-flex;
}

/* Für Elemente, die (wie .topnav-user-mobil) nur im mobilen Hamburger-Menü
   erscheinen sollen, aber selbst KEINE .topnav-user-mobil-typischen
   Block-Text-Eigenschaften haben (z. B. der Theme-Umschalter-Button oder
   das kleine Kontare-Badge, siehe unten) — eigene, schlanke Klasse statt
   .topnav-user-mobil wiederzuverwenden, da sonst deren `display: block`
   mit dem `display: inline-flex` dieser Elemente kollidieren würde (gleiche
   Spezifität, Quellreihenfolge würde entscheiden). Muss NACH den obigen
   .topnav-theme-toggle-Regeln stehen, um deren display zuverlässig zu
   übersteuern. */
.topnav-mobil-only {
    display: none;
}

/* Gegenstück zu .topnav-mobil-only — Desktop-Variante des
   Hell-/Dunkelmodus-Umschalters und des kleinen Kontare-Badges (nur bei
   aktivem eigenem Logo links, siehe header.php $zeigeEigenesLogoLinks):
   ohne diese Klasse blieben beide Elemente auch im mobilen Hamburger-Menü
   sichtbar, da .topnav-theme-toggle/.kontare-logo selbst kein
   display:none in der Media Query unten bekommen (anders als
   .topnav-user-desktop, das dort namentlich behandelt wird). */
.topnav-desktop-only {
    display: inline-flex;
}

.topnav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    margin-left: auto;
}

.topnav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--color-heading);
}

/* Ohne diese Regel greift die generische "button:hover"-Regel weiter unten
   (orangener Hintergrund, für echte Aktions-Buttons gedacht) auch hier, da
   der Hamburger technisch ein <button> ist — soll aber nur ein Icon sein,
   keine Hintergrundfarbe bei Hover annehmen. */
.topnav-toggle:hover {
    background: var(--color-bg);
}

@media (max-width: 860px) {
    .topnav-scan-icon,
    .topnav-toggle {
        display: flex;
    }

    .topnav-user-desktop {
        display: none;
    }

    .topnav-desktop-only {
        display: none;
    }

    .topnav-user-mobil {
        display: block;
        margin-top: 0.75rem;
    }

    .topnav-mobil-only {
        display: flex;
        margin-top: 0.75rem;
    }

    .topnav-inner {
        position: relative;
        gap: 0.75rem;
    }

    .topnav-links {
        display: none;
        flex-direction: column;
        gap: 0;
        width: 100%;
        order: 10;
        background: var(--color-surface);
        border-top: 1px solid var(--color-border);
        padding-top: 0.5rem;
    }

    .topnav-links.open {
        display: flex;
    }

    .topnav-links a {
        padding: 0.6rem 0.4rem;
    }

    /* Dropdown-Untermenüs im mobilen Hamburger-Menü: statt absolut
       positioniertem Popup wird das Untermenü eingerückt inline aufgeklappt
       (Platz ist im vertikalen Menü ohnehin vorhanden). */
    .topnav-dropdown-trigger {
        display: block;
        padding: 0.6rem 0.4rem;
    }

    .topnav-dropdown-menu {
        position: static;
        box-shadow: none;
        border: none;
        padding-left: 1rem;
    }
}

.page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.75rem 1.5rem 3rem;
}

/* Laut kontare-design-system.md ist Blueprint (--color-heading-Alias) für
   "Links, Info-Badges, Diagramm-Akzent" vorgesehen, NICHT für Überschriften
   — Ink ist der Primärtext. Bugfix 19.07.2026 (Nutzer-Feedback): Seiten-
   überschriften waren fälschlich blau, da --color-heading historisch (aus
   dem NTEC-Stylesheet) für Links UND Überschriften gemeinsam genutzt wurde. */
.page h1 {
    font-size: 1.5rem;
    margin: 0 0 1.25rem;
    color: var(--text-primary);
}

.page h2 {
    font-size: 1.15rem;
    margin: 2rem 0 0.75rem;
    color: var(--text-primary);
}

/* Abschnitts-Überschriften auf firmendaten.php ("Firmendaten"/"Steuerdaten")
   — Nutzerwunsch: bewusst in Orange, abweichend von der sonst geltenden
   .page h2-Konvention (Ink, siehe Bugfix-Kommentar oben). Höhere
   Spezifität (Klasse + Element statt nur Klasse + Element einmal) nötig,
   um .page h2 zuverlässig zu übersteuern, unabhängig von der Reihenfolge
   im Stylesheet. */
.page h2.firmendaten-abschnitt-titel {
    color: var(--color-heading);
}

/* Geldbeträge in Mono-Schrift (JetBrains Mono) — Kontare-Markenzeichen
   ("Kassenbon"-Optik, siehe kontare-design-system.md 2.1), gleichzeitig
   klarer lesbar für Zahlenspalten (feste Zeichenbreite, eindeutige 0/O). */
.money-positive {
    color: var(--color-money-positive);
    font-family: var(--font-mono);
    font-weight: 600;
    white-space: nowrap;
}

.money-negative {
    color: var(--color-money-negative);
    font-family: var(--font-mono);
    font-weight: 600;
    white-space: nowrap;
}

.money-liquidity {
    color: var(--color-liquidity);
    font-family: var(--font-mono);
    font-weight: 600;
    white-space: nowrap;
}

.status-badge {
    display: inline-block;
    padding: 0.2rem 0.7rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
}

.status-badge-bezahlt {
    background: var(--color-money-positive);
}

.status-badge-teilweise {
    background: #F49600;
}

.status-badge-ueberbezahlt {
    background: var(--color-liquidity);
}

.status-badge-ueberfaellig {
    background: var(--color-money-negative);
}

.status-badge-neutral {
    background: var(--color-text-muted);
}

.status-badge-unbearbeitet {
    /* Gleicher Gelbton wie "Entwurf" (.status-badge-entwurf) — Nutzerwunsch. */
    background: #F49600;
}

.status-badge-entwurf {
    /* Gleicher Gelbton wie "Teilweise abgerechnet"/"Teilweise bezahlt"
       (.status-badge-teilweise) — Nutzerwunsch. */
    background: #F49600;
}

.status-badge-reklamiert {
    background: #7C3AED;
}

.status-badge-storniert {
    /* Bislang ungenutzte Farbe im Badge-Set (Nutzerwunsch, nach grauer
       Verwechslungsgefahr mit "Offen") — bewusst kein neuer, frei erfundener
       Farbwert, sondern der bereits definierte, aber bisher für Badges nicht
       verwendete Kontare-Warnton (--color-warning). Blau ist bewusst
       ausgeschlossen, da --color-liquidity/"Überbezahlt" das bereits belegt,
       und die Marke laut früherem Nutzer-Feedback ("alles was noch in Blau
       ist" -> Orange) ohnehin kein weiteres Blau in der Oberfläche haben
       soll. */
    background: var(--color-warning);
}

.status-badge-richtung-eingang {
    background: var(--color-money-negative);
}

.status-badge-richtung-ausgang {
    background: var(--color-money-positive);
}

.mahn-badge {
    display: inline-block;
    margin-left: 0.3rem;
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-money-negative);
    color: var(--color-money-negative);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
}

.filter-bar {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    align-items: flex-end;
    margin-bottom: 1.25rem;
    max-width: none;
}

.filter-bar label {
    margin: 0;
    font-size: 0.85rem;
}

.filter-bar select,
.filter-bar input {
    width: auto;
}

.filter-checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
    padding-bottom: 0.5rem;
}

.filter-checkbox-label input[type="checkbox"] {
    width: auto;
}

/* Artikelübersicht */

.artikel-tabelle-scroll {
    overflow-x: auto;
}

.artikel-thumb-zelle {
    width: 56px;
}

.artikel-thumb {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    background: var(--color-bg);
}

.artikel-thumb-platzhalter {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    border: 1px dashed var(--color-border);
}

.badge-lagerartikel {
    background: var(--color-heading);
}

.artikel-reserviert {
    color: var(--color-text-muted);
}

.artikel-form-card {
    max-width: 720px;
}

.artikel-bearbeiten-layout {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.artikel-bearbeiten-layout .artikel-form-card {
    flex: 1 1 480px;
}

.artikel-foto-card {
    flex: 0 0 240px;
}

.artikel-foto-card h2 {
    margin-top: 0;
}

.artikel-foto-vorschau {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--radius);
    margin-bottom: 0.75rem;
}

.artikel-foto-platzhalter {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    font-size: 3rem;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
    margin-bottom: 0.75rem;
    color: var(--color-text-muted);
}

.artikel-foto-upload-form {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}

.artikel-lager-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.artikel-lager-checkbox input[type="checkbox"] {
    width: auto;
}

.artikel-lager-hinweis {
    margin: 0.2rem 0 0;
}

.budget-bar-wrap {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    height: 20px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.budget-bar-wrap-small {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    height: 8px;
    width: 90px;
    overflow: hidden;
}

.budget-bar-fill {
    height: 100%;
    transition: width 0.3s ease;
}

/* "Erste Schritte"-Checkliste — erledigte Karten leicht abgedunkelt/
   transparenter, damit der Blick automatisch auf das Offene fällt. */
.erste-schritte-karte {
    margin-bottom: 1rem;
}

.erste-schritte-karte-erledigt {
    opacity: 0.6;
}

.erste-schritte-form {
    margin-bottom: 0.4rem;
}

.erste-schritte-checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

/* Dashboard-Banner, das auf die Checkliste hinweist, solange sie nicht
   vollständig abgehakt ist. */
.dashboard-erste-schritte-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
    border-left: 3px solid var(--akzent);
}

.chart-wrap {
    position: relative;
    /* Zieht die SVG bis an den echten Rand der Card heraus (kompensiert
       exakt das horizontale Card-Padding) — sonst reicht die "abgerissenes
       Papier"-Risskante nur bis zum Rand der SVG selbst, nicht bis zum
       tatsächlich sichtbaren Kastenrand der Card. Im Normalfall (kein
       Achsenbruch) unsichtbar, da dort ohnehin nur weiße Fläche anschließt. */
    margin: 0 -1.5rem;
}

/* Dashboard: Konten-Übersicht (Kassenbuch + Bankkonten) oben als eigene,
   verlinkte Kacheln. */
.dashboard-konten-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

/* "Cashflow"-Überschrift + Jahr-Filter in einer Zeile statt untereinander —
   kompakteres Erscheinungsbild. Höhere Spezifität (Nachfahren-Selektor)
   nötig, damit dies zuverlässig .page h2s großzügigen Standard-Außenabstand
   (2rem oben) sowie .filter-bars eigenen margin-bottom überschreibt,
   unabhängig von der Reihenfolge im Stylesheet. */
.dashboard-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 1rem;
}

.dashboard-section-header h2 {
    margin: 0;
}

.dashboard-section-header .filter-bar {
    margin-bottom: 0;
}

/* Höhere Spezifität (.dashboard-konten-row .konto-tile statt nur .konto-tile)
   nötig, damit diese Regeln zuverlässig VOR .card gewinnen, unabhängig davon,
   an welcher Stelle im Stylesheet .card definiert ist (bei gleicher
   Spezifität entscheidet sonst die Reihenfolge im Quelltext). */
.dashboard-konten-row .konto-tile {
    display: block;
    flex: 1 1 180px;
    max-width: 240px;
    text-decoration: none;
    transition: box-shadow 0.15s ease;
}

.dashboard-konten-row .konto-tile:hover {
    text-decoration: none;
    box-shadow: var(--shadow-md);
}

.konto-tile-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-muted);
    margin-bottom: 0.35rem;
}

.konto-tile-saldo {
    font-size: 1.2rem;
    font-weight: 700;
    white-space: nowrap;
}

/* Dashboard: Cashflow-Chart (links) + separate Offene-Posten-Kästen (rechts,
   jeweils eigene .card statt einer gemeinsamen umschließenden Card). Der
   Chart-Ausschnitt bekommt hier bewusst KEINEN Card-Bleed mehr (siehe
   .chart-wrap oben) — ein negativer Rand würde sonst in die Info-Spalte
   hineinreichen. */
.dashboard-cashflow-layout {
    display: flex;
    align-items: flex-start;
    gap: 1.75rem;
}

.dashboard-cashflow-chart {
    flex: 1 1 460px;
    min-width: 0;
}

.dashboard-cashflow-info {
    flex: 0 0 250px;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

/* Höhere Spezifität aus demselben Grund wie bei .konto-tile oben — jeder
   Stat-Kasten ist jetzt selbst eine .card (eigener Rahmen/Schatten), diese
   Regeln müssen .cards Padding/margin-bottom zuverlässig überschreiben. */
.dashboard-cashflow-info .cf-stat {
    padding: 0.75rem 1rem;
    margin-bottom: 0;
}

/* Die drei Kästen mit Verlinkung sind komplette <a>-Elemente (analog zu
   .konto-tile) — der ganze Kasten ist klickbar, nicht nur die Überschrift. */
.dashboard-cashflow-info a.cf-stat {
    display: block;
    text-decoration: none;
    transition: box-shadow 0.15s ease;
}

.dashboard-cashflow-info a.cf-stat:hover {
    text-decoration: none;
    box-shadow: var(--shadow-md);
}

.cf-stat-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text-muted);
    margin-bottom: 0.3rem;
}

.cf-stat-meta {
    font-size: 0.82rem;
    color: var(--color-text-muted);
    margin-bottom: 0.15rem;
}

.cf-stat-sum {
    font-size: 1.15rem;
    font-weight: 700;
    white-space: nowrap;
}

.dashboard-cashflow-info .cf-stat-total {
    background: var(--color-surface);
    border-color: var(--color-heading);
}

.cf-stat-total .cf-stat-sum {
    font-size: 1.3rem;
}

@media (max-width: 860px) {
    .dashboard-cashflow-layout {
        flex-direction: column;
    }

    .dashboard-cashflow-info {
        flex: 1 1 auto;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
    }

    .dashboard-cashflow-info .cf-stat {
        flex: 1 1 200px;
    }
}

.chart-tooltip {
    position: absolute;
    display: none;
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    pointer-events: none;
    white-space: nowrap;
    z-index: 20;
}

.chart-tooltip strong {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--color-text);
}

.chart-tooltip .tt-einnahmen {
    color: var(--color-money-positive);
    font-weight: 600;
}

.chart-tooltip .tt-ausgaben {
    color: var(--color-money-negative);
    font-weight: 600;
}

.chart-tooltip .tt-liquiditaet {
    color: var(--color-liquidity);
    font-weight: 600;
}

details.monatsdetails {
    margin-top: 0.75rem;
}

details.monatsdetails summary {
    cursor: pointer;
    color: var(--color-heading);
    font-weight: 600;
    font-size: 0.92rem;
    margin-bottom: 0.75rem;
}

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

/* Support > Änderungen (support_changelog.php) — ein Kartenblock pro Jahr,
   neueste Jahre/Einträge zuerst (Reihenfolge kommt bereits sortiert aus
   Ntec\Produktinfo\ProduktinfoRepository::changelogNachJahr()). */
.changelog-jahr h2 {
    color: var(--color-heading);
    margin-bottom: 0.75rem;
}

.changelog-liste {
    list-style: none;
    margin: 0;
    padding: 0;
}

.changelog-liste li {
    display: flex;
    gap: 0.9rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--color-border);
}

.changelog-liste li:last-child {
    border-bottom: none;
}

.changelog-datum {
    flex: 0 0 auto;
    width: 5.5rem;
    color: var(--color-text-muted);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

.changelog-text {
    flex: 1 1 auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    font-size: 0.92rem;
}

th, td {
    text-align: left;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
}

.text-right {
    text-align: right;
}

.inventur-korrektur-form {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}

.inventur-korrektur-form input[type="number"] {
    width: 90px;
}

th {
    background: var(--color-surface);
    font-weight: 600;
    color: var(--color-text-muted);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

tr.summenzeile td,
tr.summenzeile th {
    background: var(--color-surface);
    font-size: calc(0.92rem + 2px);
    font-weight: 700;
    text-transform: none;
    letter-spacing: normal;
}

/* Nicht auf .money-positive/.money-negative/.money-liquidity anwenden — die
   sollen ihre eigene Farbe behalten, nicht die Standard-Textfarbe. */
tr.summenzeile td:not(.money-positive):not(.money-negative):not(.money-liquidity),
tr.summenzeile th:not(.money-positive):not(.money-negative):not(.money-liquidity) {
    color: var(--color-text);
}

tr:last-child td {
    border-bottom: none;
}

tbody tr:hover {
    background: var(--color-bg);
}

tr.clickable-row {
    cursor: pointer;
}

tr.clickable-row-muted td {
    color: var(--color-text-muted);
}

form {
    max-width: 560px;
}

form.form-wide {
    max-width: none;
}

label {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    margin: 0.9rem 0 0.3rem;
}

label:first-child {
    margin-top: 0;
}

/* Kopfbereich des Rechnungsformulars (Kunde/Adresse links, Logo+Titel rechts)
   — eigene Klasse statt Wiederverwendung von .rechnung-papier-kopf, da dessen
   "margin-top: 7.5rem" auf dem ersten Kind nur für die schreibgeschützte
   Briefpapier-Ansicht (Absenderzeile + Empfänger) gedacht ist und im Formular
   das Kunde-Label unpassend nach unten verschieben würde. */
.rechnung-form-kopf {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.rechnung-form-kopf > div:first-child {
    flex: 1 1 auto;
    min-width: 280px;
}

/* Formularfelder nebeneinander statt gestapelt (z. B. Rechnungsdatum/
   Leistungszeitraum/Zahlungsbedingung/Betreff). */
.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 0.5rem;
}

.form-row > label {
    flex: 1 1 200px;
    margin-top: 0;
}

/* Eingabefelder innerhalb einer .form-row sollen unabhängig von der Länge
   des jeweiligen Label-Texts auf einer gemeinsamen Linie stehen — bei
   einem längeren Feldnamen als die Nachbarn (Text bricht auf 2 Zeilen um)
   rutschte das Eingabefeld bisher sichtbar tiefer als die der Nachbar-
   Felder (Nutzer-Meldung, firmendaten.php: betraf dort mehrere Zeilen,
   u. a. Name/Kurzname/Inhaber/Titel/Handelsregister-Nr. sowie die
   Elster-Steuernummer- und die Branche-Zeile). Fix: das Label wird zum
   Spalten-Flex-Container, das eigentliche Feld (Input/Select/Textarea
   direkt nach dem — jetzt versteckten — <br>) bekommt margin-top: auto und
   wird dadurch unabhängig von 1- oder 2-zeiligem Label-Text an den unteren
   Rand gedrückt.
   Bewusst NUR auf firmendaten.php beschränkt (.form-firmendaten), NICHT
   app-weit auf .form-row: ein erster Testlauf mit einer globalen Regel hat
   auf rechnung_neu.php eine bis dahin einwandfreie Zeile (Betreff/
   Leistungszeitraum/Zahlungsbedingung/Rechnungsdatum) neu durcheinander
   gebracht — die Zahlungsbedingung hat dort einen dritten Baustein nach
   dem Auswahlfeld (den "verwalten"-Link), wodurch margin-top: auto beim
   AUSWAHLFELD durch den nachfolgenden Link kaum noch freien Platz zum
   Verschieben hatte, während die 3 Nachbarfelder (ohne dritten Baustein)
   deutlich nach unten wanderten — neue, vorher nicht vorhandene
   20px-Abweichung. Da .form-row auf über 20 Seiten verwendet wird und
   nicht jede auf ähnliche Sonderfälle geprüft werden konnte, ist die
   Beschränkung auf genau die eine gemeldete Seite hier die sichere Wahl.
   Nur Labels mit einem direkten <br>-Kind betroffen (:has(> br) grenzt das
   gezielt von Checkbox-Labels ab, die in .form-row ebenfalls vorkommen und
   ihre Kind-Elemente bewusst inline nebeneinander behalten sollen, z. B.
   "Kleinunternehmer (§19 UStG)") — kein HTML-Umbau nötig, das bestehende
   Label-Text-<br>-Feld-Muster wird unverändert weiterverwendet. */
.form-firmendaten .form-row > label:has(> br) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.3rem;
}

.form-firmendaten .form-row > label:has(> br) > br {
    display: none;
}

.form-firmendaten .form-row > label:has(> br) > br + input,
.form-firmendaten .form-row > label:has(> br) > br + select,
.form-firmendaten .form-row > label:has(> br) > br + textarea {
    margin-top: auto;
}

/* Für Zeilen mit besonders vielen Feldern (firmendaten.php:
   Name/Kurzname/Inhaber/Titel/Handelsregister-Nr. — 5 Stück): der normale
   200px-Basiswert braucht dafür mindestens 5×200px + 4 Zwischenräume, was
   selbst auf einer gängigen 1280px-Bildschirmbreite nicht mehr in die Karte
   passt — das letzte Feld ist dadurch in eine eigene, zweite Zeile
   umgebrochen (sichtbar als "hängt tiefer"). Schmalerer Basiswert nur für
   Zeilen mit dieser Klasse, damit alle Felder zuverlässig in eine Zeile
   passen. */
.form-row-kompakt > label {
    flex-basis: 150px;
}

.pos-gesamt {
    text-align: right;
    white-space: nowrap;
}

/* Positionstabelle im Rechnungsformular: Kopfzeile grau hinterlegt, exakt wie
   im späteren Ausdruck (.rechnung-tabelle-kopf-grau in RechnungPdfBuilder). */
#positionen-table thead th {
    background: #e9e9e9;
    font-size: calc(0.85rem - 2px);
}

/* Inhalte der Positionstabelle (Eingabefelder + reiner Text wie
   .pos-gesamt) 2px kleiner als der sonstige Formular-Standard (0.95rem) —
   die Einheit-Spalte (Autocomplete-Datalist-Feld) schnitt bei der
   normalen Formular-Schriftgröße sonst Werte wie "Pauschale" ab, bevor die
   Spalte selbst verbreitert werden müsste. */
#positionen-table tbody td {
    font-size: calc(0.95rem - 2px);
}

#positionen-table tbody input,
#positionen-table tbody select,
#positionen-table tbody textarea {
    font-size: calc(0.95rem - 2px);
}

/* Die allgemeine table-Regel setzt "overflow: hidden" (für die abgerundeten
   Ecken) — das schneidet die Artikel-Trefferliste ab, da sie als
   position:absolute-Element innerhalb einer Tabellenzelle sitzt. Für diese
   Tabelle bewusst wieder sichtbar machen, sonst bleibt die Dropdown-Liste
   unsichtbar (sieht dann wie ein normales Freitextfeld aus). */
#positionen-table {
    overflow: visible;
    table-layout: fixed;
}

/* Breite Beschreibungsspalte braucht ein weiteres Suchfeld als die
   Standard-Deckelung von 400px, sonst bleibt es schmaler als die Spalte. */
#positionen-table .autocomplete-wrap {
    max-width: none;
}

/* Netto/Brutto-Eingabemodus-Umschalter — kompakte, rechtsbündige Leiste
   direkt über der Positionstabelle (Rechnung/Angebot/Auftrag/Gutschrift/
   Beleg), siehe assets/preismodus.js. */
.positionen-preismodus-leiste {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.positionen-preismodus-leiste label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}

.positionen-preismodus-leiste select {
    width: auto;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="number"],
input[type="file"],
select,
textarea {
    width: 100%;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 0.95rem;
    font-family: inherit;
    background: var(--color-surface);
    color: var(--color-text);
}

input:focus,
select:focus,
textarea:focus {
    outline: 2px solid var(--color-heading);
    outline-offset: 1px;
}

textarea {
    resize: vertical;
}

small {
    color: var(--color-text-muted);
}

td form,
td button {
    margin: 0;
}

td button {
    padding: 0.35rem 0.7rem;
    font-size: 0.85rem;
}

button,
input[type="submit"] {
    display: inline-block;
    background: var(--color-button);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    padding: 0.55rem 1.1rem;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 1rem;
}

button:hover,
input[type="submit"]:hover {
    background: var(--color-button-hover);
}

button.secondary {
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

button.secondary:hover {
    background: var(--color-bg);
}

.flash {
    padding: 0.65rem 0.9rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
    font-size: 0.92rem;
}

.flash-success {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.flash-error {
    background: var(--color-danger-bg);
    color: var(--color-danger);
}

.flash-warning {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

/* Beleg-OCR (assets/beleg-ocr.js): markiert Felder, die automatisch aus dem
   Foto erkannt wurden — deutlich sichtbar (orange), aber weiterhin ganz
   normal editierbar, nie eine eigenständige Zusatz-Farbe/Klasse mit
   "gesperrt"-Konnotation. */
.ocr-vorschlag {
    border-color: var(--akzent) !important;
    box-shadow: 0 0 0 1px var(--akzent);
}

/* Status-Hinweis über dem Zuschnitt-Canvas, solange die automatische
   Kantenerkennung (OpenCV.js) noch lädt/rechnet. */
#crop-kantenerkennung-status {
    text-align: center;
    margin: 0.5rem 0 0;
}

/* Live-Kamera-Ansicht (assets/beleg-foto.js): Video + eine deckungsgleich
   darüberliegende Canvas für die Live-Erkennungs-Umrandung — das Overlay
   selbst reagiert nie auf Zeigereingaben (pointer-events: none), damit
   Klicks/Taps ungehindert durch das Video-Element hindurchgehen. */
#kamera-video-wrap {
    position: relative;
    width: 100%;
    max-width: 100%;
    background: #000;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

#kamera-video {
    display: block;
    width: 100%;
    height: auto;
}

#kamera-overlay-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.autocomplete-wrap {
    position: relative;
    max-width: 400px;
}

.autocomplete-results {
    list-style: none;
    padding: 0;
    margin: 0.25rem 0 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    max-height: 220px;
    overflow-y: auto;
    display: none;
    background: var(--color-surface);
    box-shadow: var(--shadow);
    position: absolute;
    /* Muss über nachfolgenden Tabellenzeilen liegen (z. B. Positionstabelle
       im Rechnungsformular), sonst würde die Trefferliste darunter verschwinden. */
    z-index: 20;
    width: 100%;
    z-index: 10;
}

.autocomplete-results li {
    padding: 0.45rem 0.7rem;
    cursor: pointer;
    font-size: 0.92rem;
}

.autocomplete-results li:hover {
    background: var(--color-bg);
}

.pos-artikel-neu-anlegen {
    color: var(--color-heading);
    font-style: italic;
    border-top: 1px solid var(--color-border);
}

.autocomplete-selected {
    font-size: 0.85rem;
    color: var(--color-success);
    margin: 0.35rem 0 0;
}

.checkbox-table td {
    vertical-align: middle;
}

.link-button {
    display: inline;
    background: none;
    border: none;
    padding: 0;
    margin-top: 0;
    color: var(--color-heading);
    font-weight: 400;
    font-size: inherit;
    font-family: inherit;
    cursor: pointer;
    text-decoration: underline;
}

.link-button:hover {
    background: none;
    color: var(--color-heading);
}

.kassenbuch-aktionen {
    white-space: nowrap;
    font-size: 0.85rem;
}

.btn-small {
    padding: 0.25rem 0.6rem;
    font-size: 0.78rem;
}

.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg);
}

.login-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 2rem 2.25rem;
    width: 100%;
    max-width: 360px;
}

.login-card h1 {
    font-size: 1.25rem;
    margin: 0 0 1.25rem;
}

/* Öffentlicher Demo-Zugang: Zugangsdaten stehen bereits (grau) in den
   Feldern, damit Besucher ohne eigene Anmeldedaten sofort loslegen können. */
.login-demo-hinweis {
    font-size: var(--text-xs, 0.8rem);
    color: var(--text-secondary);
    background: var(--info-surface);
    border-radius: var(--radius-sm);
    padding: 0.65rem 0.85rem;
    margin: 0 0 1.25rem;
    line-height: 1.4;
}

.login-demo-feld {
    color: var(--text-muted) !important;
}

.rechnung-aktionen {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.rechnung-aktionen form {
    margin: 0;
    max-width: none;
}

.rechnung-aktionen button,
.rechnung-aktionen a > button {
    margin-top: 0;
}

/* .beleg-papier/.angebot-papier/.lieferschein-papier sind Aliase auf
   dieselbe Optik — von Beleg-, Angebot- und Lieferschein-Detail
   wiederverwendet, damit alle "echten Dokumente" gleich aussehen, ohne die
   Regeln zu duplizieren. */
.rechnung-papier,
.beleg-papier,
.angebot-papier,
.lieferschein-papier {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    max-width: 800px;
    margin: 0 auto 1.5rem;
    padding: 3rem;
}

.rechnung-papier-entwurf-badge {
    display: inline-block;
    background: var(--color-warning-bg);
    color: var(--color-warning);
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 0.25rem 0.8rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
}

.rechnung-papier-kopf,
.beleg-papier-kopf {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 2.5rem;
}

/* Näherung an den PDF-Abstand Logo zu Rechnungsempfänger ab Blattoberkante —
   die digitale Ansicht ist kein 1:1-Seitenabbild, daher nur ein proportional
   ähnlicher Versatz statt exakter cm-Werte. Breiter + fixe Restbreite für die
   rechte Spalte, damit Absender-/Empfängerzeilen nicht vorzeitig umbrechen. */
.rechnung-papier-kopf > div:first-child {
    margin-top: 7.5rem;
    flex: 1 1 auto;
    min-width: 0;
}

.rechnung-papier-kopf-rechts {
    flex: 0 0 260px;
}

.rechnung-papier-absender,
.beleg-papier-absender {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    margin-bottom: 1rem;
    white-space: nowrap;
}

.rechnung-papier-empfaenger,
.beleg-papier-empfaenger {
    white-space: nowrap;
    font-size: 0.95rem;
}

.rechnung-papier-meta,
.beleg-papier-meta {
    text-align: right;
    font-size: 0.9rem;
    min-width: 220px;
}

.rechnung-papier-meta h2,
.beleg-papier-meta h2 {
    margin: 0 0 0.75rem;
    font-size: 1.3rem;
    color: var(--text-primary);
}

.rechnung-papier-kopf-rechts {
    text-align: right;
}

.rechnung-papier-logo {
    width: 100%;
    max-width: 220px;
    height: auto;
    display: block;
    margin: 0 0 0.5rem auto;
}

.rechnung-papier-titel {
    margin: 2rem 0 0;
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--text-primary);
}

.rechnung-papier-metadaten {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.85rem;
    margin-top: 3rem;
    margin-bottom: 1.5rem;
}

.rechnung-papier-metadaten strong {
    display: block;
    margin-bottom: 0.25rem;
}

.rechnung-papier-metadaten > div:last-child {
    text-align: right;
}

/* Menge/Einheit/USt./Einzelpreis/Gesamt (Spalten 3-7) sowie die
   Summen-Beträge (3. Zelle in den Summenzeilen dank colspan) rechtsbündig. */
.rechnung-papier table th:nth-child(n + 3),
.rechnung-papier table td:nth-child(n + 3),
.angebot-papier table th:nth-child(n + 3),
.angebot-papier table td:nth-child(n + 3),
.beleg-papier table th:nth-child(n + 3),
.beleg-papier table td:nth-child(n + 3) {
    text-align: right;
}

.rechnung-papier table tr.rechnung-tabelle-kopf-grau th,
.angebot-papier table tr.rechnung-tabelle-kopf-grau th,
.lieferschein-papier table tr.rechnung-tabelle-kopf-grau th,
.beleg-papier table tr.rechnung-tabelle-kopf-grau th {
    background: #e9e9e9;
}

.rechnung-papier table,
.beleg-papier table,
.angebot-papier table,
.lieferschein-papier table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
    box-shadow: none;
    border-radius: 0;
}

.rechnung-papier th,
.rechnung-papier td,
.beleg-papier th,
.beleg-papier td,
.angebot-papier th,
.angebot-papier td,
.lieferschein-papier th,
.lieferschein-papier td {
    border-bottom: 1px solid var(--color-border);
    padding: 0.5rem 0.4rem;
    text-align: left;
    background: transparent;
    font-size: 0.9rem;
    text-transform: none;
    letter-spacing: normal;
    color: var(--color-text);
}

.rechnung-papier th,
.beleg-papier th,
.angebot-papier th,
.lieferschein-papier th {
    font-weight: 700;
    color: var(--color-text-muted);
    border-bottom: 2px solid var(--color-border);
}

.rechnung-papier .rechnung-papier-summen td,
.beleg-papier .beleg-papier-summen td,
.angebot-papier .rechnung-papier-summen td {
    border-bottom: none;
    padding-top: 0.15rem;
    padding-bottom: 0.15rem;
}

.rechnung-papier-summen-erste td {
    border-top: 1px solid var(--color-border);
    padding-top: 0.5rem !important;
}

.rechnung-papier-summen-gesamt td,
.beleg-papier-summen-gesamt td {
    font-weight: 700;
    font-size: 1.05rem;
    border-top: 2px solid var(--color-border) !important;
    padding-top: 0.5rem !important;
}

.rechnung-papier-footer,
.beleg-papier-footer {
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-border);
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.rechnung-papier-footer-spalten {
    display: flex;
    gap: 1rem;
}

.rechnung-papier-footer-spalte {
    flex: 1;
}

.rechnung-papier-footer-seite {
    flex: 0 0 auto;
    color: var(--color-text-muted);
}

.rechnung-papier-footer-nowrap {
    white-space: nowrap;
}

/* Alternative "zeilenweise" Fußzeile (Migration 067) — Firma+Anschrift/
   Kontakt/Inhaber+HRB+USt-IdNr./Bankverbindung(en) je ein eigener Absatz
   untereinander statt der 4-Spalten-Tabelle. */
.rechnung-papier-footer-zeilen p {
    margin: 0 0 0.35rem;
    line-height: 1.4;
}

.rechnung-papier-footer-zeilen p:last-child {
    margin-bottom: 0;
}

/* Bankverbindungen-Zeile: Label + erste Bankverbindung in derselben Zeile,
   jede weitere darunter, eingerückt auf die Textspalte der ersten (nicht auf
   die Label-Spalte) — Flexbox richtet das automatisch anhand der
   tatsächlichen Label-Breite aus, kein manuell gemessener Wert nötig. */
.rechnung-papier-footer-bank-block {
    display: flex;
    align-items: flex-start;
    gap: 0.3rem;
}

.rechnung-papier-footer-bank-label {
    white-space: nowrap;
    flex: 0 0 auto;
}

.rechnung-papier-footer-bank-liste {
    display: flex;
    flex-direction: column;
}

.rechnung-papier-zahlungshinweis {
    line-height: 1.35;
}

.rechnung-papier-betreff {
    margin: 0 0 1rem;
    font-size: 0.95rem;
}

/* Freitext oberhalb der Positionstabelle (Briefpapier-Editor, Tab
   "Freitexte", Spalte "Freitext oben") — Gegenstück zu
   .rechnung-papier-zahlungshinweis (unterhalb, nach den Summen). */
.rechnung-papier-freitext-oben {
    margin: 0 0 1rem;
    font-size: 0.85rem;
    line-height: 1.35;
}

/* Beschreibung + Langtext-Umschalter einer Positionszeile nebeneinander
   (Nutzerwunsch: "Langtextpfeil rechts vom Artikel, nicht darunter") — der
   Langtext-Pfeil darf NICHT vor der Beschreibung stehen und die
   Beschreibung muss immer sichtbar bleiben, nicht nur bei geöffnetem
   Langtext — daher steuert reines CSS Grid die visuelle Position: 1. Spalte
   (1fr) = die Beschreibung (autocomplete-wrap ODER, bei Gutschriften ohne
   Artikelsuche, direkt der <input>), 2. Spalte (auto) = der Pfeil-Button.
   Pfeil-Button und Textarea sind bewusst ZWEI getrennte Grid-Elemente (statt
   eines gemeinsamen <details>) — der Button bleibt dadurch beim Öffnen an
   exakt derselben Stelle (Spalte 2, erste Zeile) stehen wie im
   geschlossenen Zustand; nur die Textarea (grid-column 1/-1) wandert beim
   Sichtbarwerden automatisch per Grid-Auto-Placement in eine neue, volle
   Zeile darunter. Sichtbarkeit läuft über das HTML-Attribut `hidden`
   (kein <details>/<summary> mehr), Umschalten per JS (siehe z. B.
   rechnung_neu.php: Klick-Delegation auf .pos-langtext-toggle). */
.pos-beschreibung-zeile {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    column-gap: 0.5rem;
}

/* Tabellenzellen zentrieren ihren Inhalt per Browser-Standard vertikal
   (vertical-align: middle) — wächst die Zelle beim Öffnen des Langtexts
   (neue Zeile im Grid darunter), würde der Pfeil-Button dadurch sichtbar
   nach oben wandern, obwohl er im Grid selbst unverändert in Zeile 1 bleibt.
   vertical-align: top auf der Beschreibungs-Zelle hält ihn wirklich exakt
   an derselben Stelle wie im geschlossenen Zustand. Zielt auf die 2. Spalte,
   da die 1. Spalte seit dem Drag&Drop-Griff (siehe unten) nicht mehr die
   Beschreibung ist. */
#positionen-table td:nth-child(2) {
    vertical-align: top;
}

/* Drag&Drop-Griff (4 Punkte) ganz links jeder Positionszeile — Reihenfolge
   der Positionen lässt sich damit per Ziehen ändern (assets/positionen-drag.js,
   Pointer Events statt nativem HTML5-Drag&Drop, gleiches Muster wie die
   Zuschnitt-Ecken-Verschiebung in beleg-foto.js). touch-action: none
   verhindert, dass ein Zug auf dem Handy die Seite scrollt statt die Zeile
   zu verschieben. */
#positionen-table td:first-child {
    text-align: center;
    vertical-align: middle;
}

.pos-drag-handle {
    width: 1.7rem;
    height: 1.7rem;
    padding: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    cursor: grab;
    touch-action: none;
}

.pos-drag-handle:hover {
    color: var(--color-heading);
}

.pos-drag-handle:active {
    cursor: grabbing;
}

/* Während des Ziehens optisch abgesetzt, keine Textauswahl beim schnellen
   Ziehen über benachbarte Zeilen. */
#positionen-table tr.pos-zeile-wird-gezogen {
    opacity: 0.5;
    background: var(--color-bg);
    -webkit-user-select: none;
    user-select: none;
}

.pos-langtext-toggle {
    width: 1.7rem;
    height: 1.7rem;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.pos-langtext-toggle:hover {
    color: var(--color-heading);
    border-color: var(--color-heading);
    background: transparent;
}

.pos-langtext-toggle svg {
    transition: transform 0.15s ease;
}

/* Geschlossen zeigt der Pfeil nach unten (Standardausrichtung des SVG-Pfads
   unten), geöffnet wird er um 180° gedreht und zeigt nach oben. */
.pos-langtext-toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

textarea.pos-langtext {
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 0.3rem;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

/* Das "Neuer Artikel"-Modal (Bezeichnung + Langtext untereinander, kein
   Beschreibungsfeld einer Positionszeile) zeigt sein Langtext-Feld bereits
   immer offen (kein Toggle-Button, keine .pos-beschreibung-zeile), daher
   von den Regeln oben unberührt. */

.position-langtext-anzeige {
    margin: 0.3rem 0 0;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    line-height: 1.35;
}

.rechnung-papier-footer-spalte strong {
    color: var(--color-text);
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    min-width: 220px;
    z-index: 20;
    overflow: hidden;
}

.dropdown-menu.open {
    display: block;
}

.dropdown-menu button,
.dropdown-menu .dropdown-item {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    color: var(--color-text);
    border: none;
    border-radius: 0;
    padding: 0.6rem 0.9rem;
    margin: 0;
    font-size: 0.9rem;
    font-weight: 400;
    cursor: pointer;
}

.dropdown-menu button:hover:not(:disabled),
.dropdown-menu .dropdown-item:hover {
    background: var(--color-bg);
}

.dropdown-menu button:disabled {
    color: var(--color-text-muted);
    cursor: not-allowed;
}

.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(31, 36, 48, 0.45);
    z-index: 50;
    align-items: center;
    justify-content: center;
}

.modal-overlay.open {
    display: flex;
}

.modal {
    background: var(--color-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.75rem 2rem;
    width: 100%;
    max-width: 440px;
    max-height: 90vh;
    overflow-y: auto;
}

.modal h2 {
    margin-top: 0;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 1.25rem;
}

.modal-actions button {
    margin-top: 0;
}

.modal-wide {
    max-width: 620px;
}

#crop-canvas-wrap {
    display: flex;
    justify-content: center;
}

#crop-canvas {
    touch-action: none;
    cursor: crosshair;
    max-width: 100%;
    border: 1px solid var(--color-border);
}

/* Bankkonto-Abgleich (Phase 3) */

.bankkonto-layout {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.bankkonto-tabelle-scroll {
    flex: 0 0 62%;
    max-height: 640px;
    overflow-y: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.bankkonto-tabelle-scroll table {
    margin-bottom: 0;
}

.bankkonto-details-panel {
    flex: 1;
    position: sticky;
    top: 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.25rem 1.5rem;
}

tr.clickable-row-active {
    background: var(--color-bg);
}

.status-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    color: #fff;
    font-size: 10px;
    line-height: 1;
}

.status-dot-offen {
    background: var(--color-money-negative);
}

.status-dot-zugeordnet {
    background: var(--color-money-positive);
}

.status-dot-ignoriert {
    background: var(--color-text-muted);
}

.dokumente-zuordnen {
    margin-top: 1rem;
    display: flex;
    gap: 0.6rem;
}

.modal-liste {
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    margin: 0.75rem 0;
}

.modal-liste-item {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.9rem;
}

.modal-liste-item:last-child {
    border-bottom: none;
}

.modal-liste-item:hover {
    background: var(--color-bg);
}

.modal-liste-empty {
    padding: 0.75rem;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.modal-liste-item-selected {
    background: #e6f4ea;
    border-left: 3px solid var(--color-money-positive);
}

.kassenbuch-kopf {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.kassenbuch-saldo-karte {
    text-align: right;
    padding: 0.75rem 1.25rem;
}

.kassenbuch-saldo-label {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.kassenbuch-saldo-wert {
    /* Farbe/Schriftart kommen weiterhin von den Standard-Geldbetrag-Klassen
       (.money-positive/.money-negative) — hier nur eine moderat größere
       Schrift für die prominente Kennzahl (14px Standard + 6px). */
    font-size: 20px;
}

.modal-liste-vorschlag-badge {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.1rem 0.45rem;
    border-radius: var(--radius-sm);
    background: var(--color-button);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
}

.zeitraum-schnellauswahl {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.zeitraum-btn {
    display: inline-block;
    padding: 0.4rem 0.9rem;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.9rem;
}

.zeitraum-btn:hover {
    background: var(--color-bg);
    text-decoration: none;
}

.zeitraum-btn-active {
    background: var(--color-bg);
    color: var(--color-heading);
    border-color: var(--color-heading);
    font-weight: 600;
}

/* Briefpapier-Editor: klickbare "Kachel"-Auswahl als Ersatz für ein
   normales Radio-Button-Set (Logo-Position/-Größe, Tabellenkopf-Stil,
   Schriftart) — versteckter <input type="radio"> + Label, Optik über
   :has(:checked) rein per CSS (kein JS nötig, moderne Browser-Unterstützung
   vorausgesetzt — für ein internes Admin-Einstellungsformular unkritisch).
   Farblich an .zeitraum-btn-active angelehnt (gleiche aktive Farbe wie die
   BWA-Schnellauswahl). */
.briefpapier-tile-gruppe {
    display: flex;
    flex-wrap: wrap;
    /* Korrektur: justify-content:center (vorherige Runde) wurde auf einem
       schmaleren echten Browser-Fenster zum Problem statt zur Lösung —
       sobald die Tiles auf eine zweite Zeile umbrechen (flex-wrap: wrap),
       zentriert sich JEDE Zeile für sich, was bei z. B. 1+1 Tiles wie eine
       vertikal zentrierte Säule statt einer sauberen Reihe aussieht.
       Zurück auf den Flexbox-Standard (flex-start/linksbündig) — bleibt
       auch beim Umbrechen an derselben linken Kante ausgerichtet, statt
       "herumzuspringen". */
    justify-content: flex-start;
    gap: 0.6rem;
    margin: 0.4rem 0 1rem;
}

.briefpapier-tile {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    height: 2.4rem;
    box-sizing: border-box;
    /* Echte Ursache der ungleichen Höhen (nicht nur ein min-height-Thema):
       das jeweils erste Tile jeder Gruppe bekam über die flexbasierte
       Auto-Breitenberechnung eine zu knappe Breite zugewiesen und brach
       dadurch auf 2 Textzeilen um (per DOM-Messung nachgewiesen) — die
       Labels sind alle kurz genug für eine Zeile, daher hier erzwungen. */
    white-space: nowrap;
    /* Echte Ursache der Höhenversetzung innerhalb einer Zeile (per
       getBoundingClientRect()-Messung gefunden, nicht nur vermutet): die
       generische `label { margin: 0.9rem 0 0.3rem; }`-Regel + deren
       `label:first-child { margin-top: 0; }`-Ausnahme betrifft jedes Tile
       (jedes Tile ist selbst ein <label>) — nur das JEWEILS ERSTE Tile
       einer Gruppe ist "first-child" und bekommt margin-top:0, jedes
       weitere Tile in derselben Zeile behält die vollen 0.9rem (12,6px)
       und hängt dadurch sichtbar tiefer. Margin hier vollständig
       genullt — die Abstände zwischen den Tiles kommen bereits über
       .briefpapier-tile-gruppes eigenes `gap` (Zeilenabstand bei Umbruch)
       bzw. `gap`+`margin` von .briefpapier-tile-gruppe selbst. */
    margin: 0;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.9rem;
    cursor: pointer;
}

.briefpapier-tile input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.briefpapier-tile:has(input:checked) {
    background: var(--color-bg);
    color: var(--color-heading);
    border-color: var(--color-heading);
    font-weight: 600;
}

.briefpapier-tile:has(input:disabled) {
    cursor: default;
    opacity: 0.6;
}

/* Erscheinungsbild-Auswahl (firmendaten.php) — größere Karten-Kachel je
   Design (5 Stück), gleiches versteckte-Radio+:has(:checked)-Muster wie
   .briefpapier-tile oben, aber mit eigener, reichhaltigerer Vorschau
   (4 Farbpunkte BG/Card/Akzent/Text + Name in der jeweiligen Kopf-Schriftart
   + Kurzbeschreibung + Font-/Radius-Angabe als reiner Text) statt eines
   einzelnen Labels. */
/* Nutzer-Feedback 20.08.2026: alle 5 Kacheln sollen gleich groß sein und in
   einer Zeile stehen (vorher: feste 200px-Breite + flex-wrap: wrap, konnte
   je nach Fensterbreite umbrechen UND bei unterschiedlich langer
   Kurzbeschreibung unterschiedlich hoch werden). Fix: flex-wrap: nowrap
   erzwingt eine Zeile, jede Kachel bekommt flex: 1 1 0 (exakt gleiche
   Breite, teilt den verfügbaren Platz zu je 1/5 auf) statt einer festen
   Pixelbreite — Höhe wird automatisch über den Flexbox-Standard
   align-items: stretch angeglichen (alle Kacheln einer Zeile strecken sich
   auf die Höhe der höchsten). min-width: 0 ist nötig, damit der
   Standardwert min-width: auto (orientiert sich sonst am längsten Wort,
   z. B. "Plus Jakarta Sans · Radius 16px" in der Details-Zeile) das
   Gleichverteilen nicht verhindert. */
.design-tile-gruppe {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.75rem;
    margin: 0.4rem 0 1rem;
}

.design-tile {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
    gap: 0.5rem;
    box-sizing: border-box;
    padding: 0.9rem 1rem;
    border-radius: var(--radius-md);
    border: 2px solid var(--color-border);
    background: var(--color-surface);
    cursor: pointer;
    /* Bereits bekannter Fallstrick (siehe .briefpapier-tile): jede Kachel
       ist selbst ein <label>, die generische `label { margin: 0.9rem 0
       0.3rem; }`-Regel + deren `label:first-child { margin-top: 0; }`-
       Ausnahme würde sonst nur die ERSTE Kachel ohne oberen Rand lassen und
       alle weiteren 12,6px tiefer hängen (führte hier zusätzlich zu
       ungleichen Höhen, da sich der Rand auf den verfügbaren Stretch-Raum
       auswirkt) — vollständig genullt, Abstände kommen bereits über das
       gap von .design-tile-gruppe. */
    margin: 0;
}

.design-tile input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.design-tile-swatches {
    display: flex;
    gap: 0.35rem;
}

.design-tile-dot {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.design-tile-name {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--color-text);
}

.design-tile-meta {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    line-height: 1.3;
}

.design-tile-details {
    font-size: 0.7rem;
    color: var(--color-text-muted);
    font-family: var(--font-mono);
}

.design-tile:has(input:checked) {
    border-color: var(--color-heading);
    box-shadow: 0 0 0 1px var(--color-heading);
}

/* Beleg-Informationen-Checkliste (an-/abwählbar + per Hoch/Runter-Buttons
   umsortierbar) — keine Drag-and-Drop-Vorlage im Projekt vorhanden, siehe
   CLAUDE.md-Begründung; einfache Buttons sind robuster/touch-freundlicher. */
.briefpapier-checkbox-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    font-weight: 600;
    cursor: pointer;
}

.briefpapier-checkbox-inline input {
    width: auto;
}

.briefpapier-schriftart-select {
    max-width: 320px;
    margin: 0.4rem 0 1rem;
}

.briefpapier-beleginfo-details {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.6rem 0.9rem;
    margin: 0 0 0.6rem;
    background: var(--color-surface);
}

.briefpapier-beleginfo-details summary {
    cursor: pointer;
    font-weight: 600;
}

.briefpapier-beleginfo-details[open] summary {
    margin-bottom: 0.4rem;
}

.briefpapier-beleginfo-modus-label {
    margin: 0.6rem 0 0.2rem;
    color: var(--color-text-muted, var(--color-text));
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.briefpapier-feldliste {
    list-style: none;
    padding: 0;
    margin: 0.4rem 0 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.briefpapier-feldliste li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.briefpapier-feldliste label {
    flex: 1;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.briefpapier-feldliste-buttons {
    display: flex;
    gap: 0.25rem;
}

.briefpapier-feldliste-buttons button {
    margin: 0;
    padding: 0.2rem 0.55rem;
    font-size: 0.85rem;
}

/* Zweispaltiger Layout-Tab: links Einstellungsgruppen, rechts sticky
   Live-Vorschau (iframe mit dem live gerenderten Beispiel-PDF). */
.briefpapier-layout-spalten {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
}

.briefpapier-einstellungen-spalte {
    flex: 1 1 420px;
    min-width: 0;
}

.briefpapier-vorschau-spalte {
    flex: 1 1 480px;
    position: sticky;
    top: 1rem;
    min-width: 0;
}

.briefpapier-vorschau-spalte iframe {
    width: 100%;
    height: 80vh;
    min-height: 500px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: #fff;
}

@media (max-width: 960px) {
    .briefpapier-layout-spalten {
        flex-direction: column;
    }

    .briefpapier-vorschau-spalte {
        position: static;
        width: 100%;
    }
}

/* Freitexte-Tab: Grid mit Dokumenttyp-Zeilen x 2 Textfeld-Spalten. */
.briefpapier-freitexte-grid {
    display: grid;
    grid-template-columns: 140px 1fr 1fr 1fr;
    gap: 0.75rem 1rem;
    align-items: start;
}

.briefpapier-freitexte-grid .briefpapier-freitexte-kopf {
    font-weight: 600;
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

.briefpapier-freitexte-grid .briefpapier-freitexte-kopf small {
    font-weight: 400;
}

.briefpapier-freitexte-grid textarea {
    width: 100%;
    box-sizing: border-box;
}

.briefpapier-freitexte-hinweis {
    color: var(--color-text-muted);
    font-style: italic;
}

/* BWA-Kopfbereich: schmaler Zeitraum-Kasten links (~1/4), breiter
   Balkengrafik-Kasten rechts (~3/4) — gleiches Flex-Layout-Muster wie
   .dashboard-cashflow-layout, nur mit umgekehrtem Breitenverhältnis (der
   schmale Kasten steht hier links statt rechts). */
.bwa-kopf-layout {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.bwa-zeitraum-kasten {
    flex: 0 0 270px;
    margin-bottom: 0;
}

.bwa-chart-kasten {
    flex: 1 1 600px;
    min-width: 0;
    margin-bottom: 0;
}

.bwa-kasten-titel {
    margin-top: 0;
    margin-bottom: 0.75rem;
}

.bwa-kasten-untertitel {
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
}

.bwa-chart-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.bwa-chart-kopf h2 {
    margin-bottom: 0;
}

.bwa-chart-filter {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Rentabilitäts-/Wachstumskennzahlen (Umsatzwachstum/EBIT-Marge/
   Personalkostenquote) unter der Erlöse/Aufwand-Summenzeile — dieselben
   .cf-stat-Bausteine wie auf dem Dashboard, hier nur mit eigenem
   Flex-Wrapper statt .dashboard-cashflow-info (kein Link-Verhalten nötig,
   reine Anzeige-Kacheln). */
.bwa-kennzahlen-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 1.5rem 0;
}

.bwa-kennzahlen-row .cf-stat {
    flex: 1 1 220px;
    margin-bottom: 0;
}

/* Personalkostenquote-Branchenvergleich: bewusst neutral (kein Rot/Grün) —
   eine hohe Personalkostenquote soll nicht automatisch als "schlecht"
   wirken, siehe Nutzeranfrage. */
.bwa-branchenvergleich {
    margin-top: 0.5rem;
}

.bwa-position-badge {
    display: inline-block;
    margin-top: 0.2rem;
    padding: 0.15rem 0.55rem;
    border-radius: var(--radius-sm, 4px);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text);
}

.bwa-gesamtbewertung {
    max-width: 60rem;
    margin: 0 0 1.5rem;
    padding: 0.75rem 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 6px);
}

@media (max-width: 860px) {
    .bwa-kopf-layout {
        flex-direction: column;
    }

    .bwa-zeitraum-kasten,
    .bwa-chart-kasten {
        flex: 1 1 auto;
        width: 100%;
    }
}

/* Pagination-Leiste (Angebote/Rechnungen/Lieferscheine/Aufträge/Projekte/
   Belege) — drei Gruppen (Seitenzahlen, Pro-Seite-Auswahl, Info-Text), die
   auf schmalen Bildschirmen umbrechen dürfen, statt sich zu überlappen. */
.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.pagination-seiten {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.pagination-seite,
.pagination-pfeil {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.5rem;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.85rem;
    text-decoration: none;
}

.pagination-seite:hover,
.pagination-pfeil:hover {
    background: var(--color-bg);
    text-decoration: none;
}

.pagination-seite-aktiv {
    background: var(--color-bg);
    color: var(--color-heading);
    border-color: var(--color-heading);
    font-weight: 600;
}

.pagination-pfeil-deaktiviert {
    color: var(--color-text-muted);
    background: transparent;
    border-color: var(--color-border);
    opacity: 0.5;
}

.pagination-ellipsis {
    color: var(--color-text-muted);
    padding: 0 0.25rem;
}

.pagination-pro-seite {
    display: inline-flex;
    align-items: center;
    max-width: none;
    margin: 0;
}

.pagination-pro-seite label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    font-size: 0.85rem;
    white-space: nowrap;
}

.pagination-pro-seite select {
    width: auto;
}

.pagination-info {
    white-space: nowrap;
}

/* Adressbuch: Rollen-Badges (ein Kontakt kann Kunde UND Lieferant sein) */

.badge {
    display: inline-block;
    padding: 0.2rem 0.7rem;
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    margin-right: 0.3rem;
}

.badge-kunde {
    background: var(--color-money-positive);
}

.badge-lieferant {
    background: var(--color-money-negative);
}

.badge-interessent {
    /* Gleicher Gelbton wie "Entwurf" (.status-badge-entwurf) — Nutzerwunsch. */
    background: #F49600;
}

.badge-vorkasse {
    background: var(--color-warning);
}

.tabs {
    display: flex;
    gap: 0.5rem;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 1rem;
}

.tab-btn {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.6rem 0.9rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-muted);
    cursor: pointer;
    margin-top: 0;
    border-radius: 0;
}

.tab-btn:hover {
    background: var(--color-bg);
    color: var(--color-text);
}

.tab-btn-active,
.tab-btn-active:hover {
    color: var(--color-heading);
    border-bottom-color: var(--color-heading);
    background: none;
}

.tab-panel {
    display: none;
}

.tab-panel.tab-panel-active {
    display: block;
}

/* Beleg-Detailseite: digitales Papier links, Foto/PDF-Vorschau rechts daneben */

.beleg-detail-layout {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.beleg-detail-layout .beleg-papier {
    flex: 1;
    margin: 0;
    min-width: 0;
}

/* Beleg-Erfassungsformular: Formular links, Foto/PDF-Vorschau rechts daneben
   (gleiches Layout-Prinzip wie .beleg-detail-layout oben, eigene Klasse da
   hier eine .card statt .beleg-papier flex-1 bekommt). */

.beleg-neu-layout {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.beleg-neu-layout > .beleg-neu-formular {
    flex: 1;
    min-width: 0;
}

/* Vorschau (Foto oder PDF) ist von Anfang an in voller Größe sichtbar. Bei
   Hover wird genau dasselbe Element per CSS-Transform vergrößert (kein
   zweites/verstecktes Element nötig) — so wird auch kleine Schrift auf dem
   Originalbeleg lesbar, ohne die Datei extra zu öffnen. */
.beleg-vorschau {
    flex: 0 0 320px;
    position: sticky;
    top: 1rem;
}

/* Die Positionstabelle bekommt hier weniger Platz als bei den übrigen
   Erstellungsformularen (Rechnung/Angebot/etc.), da rechts zusätzlich die
   feste 320px breite Beleg-Vorschau steht — die Menge- UND Einzelpreis-
   Spalte reichen dadurch selbst nach Verbreiterung des <colgroup> nicht
   ganz aus, um den Wert PLUS die browsereigenen Spinner-Pfeile anzuzeigen
   (Menge z. B. bei "12,50", Einzelpreis bei einem dreistelligen Betrag wie
   "123,45"). Bewusst nur hier (über .beleg-neu-layout gescoped) entfernt,
   nicht projektweit — Tippen bleibt unverändert möglich, nur die Klick-
   Pfeile fallen weg. Spalten 3/4 (nicht 2/3), da Spalte 1 seit dem
   Drag&Drop-Griff der Handle ist und Spalte 2 die Beschreibung. */
.beleg-neu-layout #positionen-table td:nth-child(3) input[type="number"],
.beleg-neu-layout #positionen-table td:nth-child(4) input[type="number"] {
    -moz-appearance: textfield;
}

.beleg-neu-layout #positionen-table td:nth-child(3) input[type="number"]::-webkit-outer-spin-button,
.beleg-neu-layout #positionen-table td:nth-child(3) input[type="number"]::-webkit-inner-spin-button,
.beleg-neu-layout #positionen-table td:nth-child(4) input[type="number"]::-webkit-outer-spin-button,
.beleg-neu-layout #positionen-table td:nth-child(4) input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Zusätzlich zur Spalten-Umverteilung/Spinner-Entfernung oben: die MwSt.-
   Spalte zeigte bei "0%" das Prozentzeichen noch abgeschnitten (Nutzer-
   Meldung). Statt noch mehr Prozentpunkte von Konto/Beschreibung
   abzuzwacken, hier direkt der vom Nutzer selbst vorgeschlagene bessere
   Weg: der Zellen-Innenabstand der GESAMTEN Zeile wird nur in dieser einen
   (ohnehin schon beengten) Tabelle reduziert — gewinnt spürbar Platz für
   ALLE Spalten gleichzeitig, statt nur eine auf Kosten einer anderen zu
   vergrößern. */
.beleg-neu-layout #positionen-table th,
.beleg-neu-layout #positionen-table td {
    padding: 0.6rem 0.35rem;
}

.beleg-vorschau-wrap {
    display: block;
    cursor: zoom-in;
}

.beleg-vorschau-bild,
.beleg-vorschau-pdf-embed {
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    background: var(--color-surface);
    position: relative;
    transform-origin: top center;
    transition: transform 0.15s ease;
}

.beleg-vorschau-bild {
    max-height: 480px;
    object-fit: contain;
}

.beleg-vorschau-pdf-embed {
    height: 420px;
    display: block;
}

.beleg-vorschau-wrap:hover .beleg-vorschau-bild {
    transform: scale(2.2);
    z-index: 200;
    box-shadow: 0 8px 32px rgba(16, 24, 40, 0.35);
}

/* PDFs bewusst NICHT per CSS-Transform hochskalieren: <embed> rendert das PDF
   intern auf die Pixelgröße seiner Box — ein transform: scale() vergrößert
   dann nur das bereits kleine, fertig gerenderte Bild (unscharf). Stattdessen
   die Box selbst größer machen, damit der PDF-Renderer bei der Zielgröße neu
   und damit scharf rendert. */
.beleg-vorschau-wrap:hover .beleg-vorschau-pdf-embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 640px;
    height: 820px;
    z-index: 200;
    box-shadow: 0 8px 32px rgba(16, 24, 40, 0.35);
}

/* Adressbuch: Kontakt-Profil */

.partner-kopf {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.partner-kopf h1 {
    margin: 0.3rem 0 0.15rem;
}

.partner-nummer {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    margin: 0;
}

/* Kopfzeile: Firmendaten / Ansprechpartner (gleiche Breite) / offene
   Projekte (schmaler) nebeneinander — gleiches Layout-Prinzip wie
   .beleg-detail-layout, align-items: stretch sorgt dafür, dass Firmendaten-
   und Ansprechpartner-Karte "gleiche Größe" (Höhe) haben. */

.partner-kopf-layout {
    display: flex;
    gap: 1.5rem;
    align-items: stretch;
    margin-bottom: 1.5rem;
}

.partner-kopf-layout > .partner-firmendaten-karte,
.partner-kopf-layout > .partner-ansprechpartner-karte {
    flex: 1 1 0;
    min-width: 0;
}

.partner-kopf-layout > .partner-projekte-karte {
    flex: 0 0 260px;
}

.partner-firmendaten-karte {
    border-top: 3px solid var(--color-heading);
}

.partner-firmendaten-karte h3 {
    margin: 1rem 0 0.3rem;
    font-size: 0.82rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.partner-firmendaten-karte h3:first-of-type {
    margin-top: 0;
}

.partner-firmendaten-karte p {
    margin: 0.2rem 0;
}

.partner-firmendaten-karte address {
    font-style: normal;
}

.partner-hubspot-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
}

.partner-hubspot-link svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.partner-ansprechpartner-karte,
.partner-projekte-karte {
    display: flex;
    flex-direction: column;
}

.partner-ansprechpartner-kopf,
.partner-projekte-kopf {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    gap: 0.5rem;
}

.partner-ansprechpartner-kopf h3,
.partner-projekte-kopf h3 {
    margin: 0;
    font-size: 0.9rem;
}

.partner-ansprechpartner-liste {
    overflow-y: auto;
    max-height: 280px;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.partner-ansprechpartner-eintrag {
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0.6rem;
}

.partner-ansprechpartner-eintrag:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.partner-ansprechpartner-eintrag-name {
    font-weight: 600;
}

.partner-ansprechpartner-eintrag-details {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin: 0.1rem 0;
}

.partner-ansprechpartner-eintrag-aktionen {
    margin-top: 0.3rem;
    display: flex;
    gap: 0.75rem;
    font-size: 0.8rem;
}

.partner-ansprechpartner-leer,
.partner-projekte-leer {
    color: var(--color-text-muted);
    font-size: 0.88rem;
}

.partner-projekte-liste {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    overflow-y: auto;
    max-height: 280px;
}

.partner-projekt-eintrag {
    display: block;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: inherit;
}

.partner-projekt-eintrag:hover {
    background: var(--color-bg);
}

.partner-projekt-name {
    font-weight: 600;
    font-size: 0.85rem;
}

.partner-projekt-betrag {
    font-size: 0.8rem;
    margin-top: 0.2rem;
}

/* Kontakthistorie-Timeline: manuell protokollierte Kontakte (Kanal-Icon) +
   automatisch eingereihte Dokument-Ereignisse (Dokument-Icon) gemischt. */

.kontakthistorie-liste {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.kontakthistorie-eintrag {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.75rem 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.kontakthistorie-icon {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--color-bg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.kontakthistorie-icon svg {
    width: 16px;
    height: 16px;
}

.kontakthistorie-inhalt {
    flex: 1;
    min-width: 0;
}

.kontakthistorie-meta {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin-bottom: 0.15rem;
}

.kontakthistorie-betreff {
    font-weight: 600;
}

.kontakthistorie-notiz {
    margin-top: 0.2rem;
    white-space: pre-line;
}

.kontakthistorie-aktionen {
    margin-top: 0.4rem;
    display: flex;
    gap: 0.75rem;
    font-size: 0.8rem;
}

.kanal-auswahl {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin: 0.5rem 0 1rem;
}

/* .kanal-auswahl > statt nur .kanal-option, um die generische label-Regel
   (label { margin: 0.9rem 0 0.3rem } + label:first-child { margin-top: 0 })
   sicher zu schlagen — sonst bekommt nur die erste Kanal-Option (Telefon)
   margin-top:0, die anderen beiden (E-Mail/Persönlich) weiterhin 0.9rem,
   wodurch die drei Optionen sichtbar auf unterschiedlicher Höhe standen
   statt auf einer Linie. */
.kanal-auswahl > .kanal-option {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    cursor: pointer;
    font-size: 0.9rem;
}

.kanal-option input {
    margin: 0;
}

/* Dokumente-Tab: vier Übersichts-Abschnitte (Belege/Rechnungen/Angebote/
   Lieferscheine) + hochgeladene Freidokumente. */

.partner-dokumente-abschnitt {
    margin-bottom: 2.5rem;
}

/* BWA: Kategorien aufklappbar, einzelne Konten darunter (17.07.2026) */

.bwa-gruppe {
    margin-bottom: 1.5rem;
}

.bwa-kategorie {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    margin-bottom: 0.5rem;
    overflow: hidden;
}

.bwa-kategorie-summary {
    position: relative;
    cursor: pointer;
    padding: 0.7rem 1rem 0.7rem 2rem;
    align-items: center;
    list-style: none;
}

.bwa-kategorie-summary::-webkit-details-marker {
    display: none;
}

/* Der Pfeil wird absolut positioniert (statt als normales Grid-Kind), sonst
   zählt er als zusätzliches Element im Grid der Summary-Zeile und verschiebt
   die beiden echten <span>-Kinder (Kategorie/Betrag) um je eine Spalte nach
   rechts — Bug gefunden am 17.07.2026: die Kategorie-Bezeichnung landete
   dadurch sichtbar in der rechten (Betrags-)Spalte statt links. */
.bwa-kategorie-summary::before {
    content: '▸';
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-muted);
}

.bwa-kategorie[open] > .bwa-kategorie-summary::before {
    content: '▾';
}

.bwa-kategorie-summary:hover {
    background: var(--color-bg);
}

.bwa-grid {
    display: grid;
    grid-template-columns: 1fr 140px;
    gap: 0.5rem;
}

.bwa-grid span:not(:first-child) {
    text-align: right;
    white-space: nowrap;
}

.bwa-konten-liste {
    border-top: 1px solid var(--color-border);
    padding: 0.4rem 1rem 0.6rem 2.2rem;
    background: var(--color-bg);
}

.bwa-konto-zeile {
    display: grid;
    grid-template-columns: 1fr 140px;
    gap: 0.5rem;
    padding: 0.3rem 0;
    font-size: 0.92rem;
}

.bwa-konto-zeile span:last-child {
    text-align: right;
    white-space: nowrap;
}

.bwa-konto-leer {
    margin: 0.3rem 0;
    color: var(--color-text-muted);
}

/* Benutzerverwaltung: gruppierte Bereichs-Checkboxen (granulare Rechtevergabe,
   17.07.2026) */

.bereiche-gruppen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin: 0.75rem 0 1rem;
}

.bereiche-gruppe {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
}

.bereiche-gruppe h4 {
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.bereich-checkbox {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 400;
    margin-bottom: 0.4rem;
}

.bereiche-form {
    margin-top: 0.75rem;
}

/* Formularvorlagen: Klick-Editor (manuelle Feldpositionierung, siehe
   assets/formular-editor.js) sowie Ausfüllen-Formular für Aufträge. */
.formular-editor-layout {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    align-items: flex-start;
}

.formular-editor-canvas-wrap {
    position: relative;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: #fff;
    flex: 0 0 auto;
    cursor: default;
}

.formular-editor-canvas-wrap.formular-editor-ziehmodus {
    cursor: crosshair;
}

.formular-editor-canvas-wrap canvas {
    display: block;
}

.formular-editor-overlay-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.formular-editor-box {
    position: absolute;
    border: 2px solid var(--akzent);
    background: color-mix(in srgb, var(--akzent) 18%, transparent);
    box-sizing: border-box;
    pointer-events: none;
}

.formular-editor-box-vorschau {
    border-style: dashed;
    background: color-mix(in srgb, var(--akzent) 10%, transparent);
}

.formular-editor-box-checkbox,
.formular-editor-box-radio {
    border-color: var(--color-money-positive);
    background: color-mix(in srgb, var(--color-money-positive) 18%, transparent);
}

.formular-editor-box-label {
    position: absolute;
    bottom: 100%;
    left: -2px;
    font-size: 0.65rem;
    line-height: 1.2;
    color: var(--paper);
    background: var(--akzent);
    padding: 1px 4px;
    border-radius: 3px 3px 0 0;
    white-space: nowrap;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.formular-editor-sidebar {
    flex: 1 1 320px;
    min-width: 280px;
}

.formular-editor-felderliste {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 1rem;
    max-height: 480px;
    overflow-y: auto;
}

.formular-editor-feld-karte {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.75rem;
    background: var(--surface);
}

.formular-editor-feld-karte-kopf {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.formular-editor-feld-typ-badge {
    font-size: 0.7rem;
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    background: var(--border);
    color: var(--text-secondary);
    white-space: nowrap;
}

.formular-editor-feld-karte input[type="text"],
.formular-editor-feld-karte input[type="number"] {
    width: 100%;
    margin: 0.2rem 0 0.4rem;
}

.formular-editor-neues-feld-panel {
    border: 1px solid var(--akzent);
    border-radius: var(--radius-sm);
    padding: 0.75rem;
    margin-bottom: 1rem;
    background: color-mix(in srgb, var(--akzent) 6%, var(--surface));
}

/* Ausfüllen-Formular am Auftrag: Radio-Optionen nebeneinander */
.auftrag-formular-radio-gruppe {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.3rem;
}

.auftrag-formular-radio-option {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}