/* ============================================================
   VoltNox Pro — Design System
   Copyright (c) Murat Barutcu · VoltNox Pro
   Light-Theme, Pro-Aesthetik, enterprise-grade
   ============================================================ */

/* ============================================================
   CSS CUSTOM PROPERTIES — Design Tokens (Enterprise-Refactor 2026-07-09)

   Ziel: DATEV/Fiori/Lexoffice-nüchterner Look.
   - EINE Akzentfarbe (Business-Blau #1B5FAA)
   - Grün NUR für positive Werte, Rot NUR für kritisch/Fehler
   - Keine Gradients mehr in Modulen (nur hier Legacy-Aliase)
   - System-Schriften (Bahnschrift entfernt; Inter-Slot vorbereitet,
     wird aktiv sobald Font-Files unter /fonts/Inter-*.woff2 liegen)
   ============================================================ */
:root {
  /* ---- EINE Akzentfarbe (Business-Blau, DATEV-nah) ---- */
  --accent:            #1B5FAA;
  --accent-hover:      #164E8C;
  --accent-soft:       #EAF1F9;
  --accent-dim:        rgba(27,95,170,.10);
  --focus-ring:        rgba(27,95,170,.28);

  /* ---- Semantik: NUR für Werte/Status, nicht als Akzent verwenden ---- */
  --pos:               #1E7A44;   /* positive Zahl */
  --pos-soft:          #E7F3EC;
  --neg:               #B4232C;   /* kritisch/Fehler */
  --neg-soft:          #FBEAEB;
  --warn:              #8C5A00;   /* Achtung — kein Pulse mehr */
  --warn-soft:         #FBF1DA;

  /* ---- Neutrale Basis (Premium-Iteration 2026-07-09: bg wärmer) ---- */
  --bg:                #F6F7F9;
  --surface:           #FFFFFF;
  --surface-2:         #FAFBFC;
  --surface-3:         #F1F3F6;
  --border:            #E2E5EA;
  --border-mid:        #C9CED6;
  --border-strong:     #B0B7C1;
  --text:              #1A1D21;
  --text-muted:        #5A6472;
  --text-dim:          #8A93A0;
  --text-on-dark:      #FFFFFF;
  --text-on-dark-2:    rgba(255,255,255,.72);

  /* ---- Icon-Tints (NEU, Premium-Iteration) ----
     NUR für 36×36-Icon-Chips in Karten. Nie als Flächen-Bg, nie als Text-Color.
     Die Ein-Akzent-Regel bleibt: --accent ist die einzige echte Farbe der App;
     die Tints leben nur im Icon-Rechteck. */
  --tint-blue:         #EAF1F9;
  --tint-blue-fg:      #1B5FAA;   /* == --accent */
  --tint-green:        #E9F6EE;
  --tint-green-fg:     #1E7A44;   /* == --pos */
  --tint-amber:        #FCF4E5;
  --tint-amber-fg:     #B87500;   /* bewusst kräftiger als --warn — Icon braucht mehr Kontrast */
  --tint-violet:       #F1EEFA;
  --tint-violet-fg:    #5C3FBF;   /* einziger neuer Grundton, Icon-only */
  --tint-red:          #FBEAEB;
  --tint-red-fg:       #B4232C;   /* == --neg */
  --accent-tint-blue:  var(--tint-blue);   /* Brief-Alias */

  /* ---- Kategorie-Farben (Team-Chips Plantafel etc.) ----
     KEINE Statusfarben. Ausschließlich zur Wiedererkennung von Teams/
     Kategorien. Damit --neg für echte Fehler/Konflikte reserviert bleibt,
     lebt Team "Meister" (rot-etabliert) auf einem separaten Ziegel-Ton. */
  --cat-amber:         #B87500;   /* == --tint-amber-fg, Team-3 */
  --cat-red:           #B5543B;   /* Ziegel, klar unterscheidbar zu --neg */
  --cat-emerald:       #059669;   /* Team-2 */
  --cat-violet:        #7C3AED;   /* Team-4 */
  --cat-slate:         #475569;   /* Azubi */

  /* ---- Sidebar (Navy — kontrastiert die helle App, Enterprise-Standard) ---- */
  --sidebar-bg:            #17253D;
  --sidebar-border:        rgba(255,255,255,.06);
  --sidebar-hover:         rgba(255,255,255,.06);
  --sidebar-active:        rgba(27,95,170,.28);
  --sidebar-active-border: var(--accent);
  --sidebar-text:          rgba(255,255,255,.72);
  --sidebar-text-active:   #FFFFFF;

  /* ---- Typografie ----
     Inter ist der Ziel-Font (siehe /fonts/ @font-face weiter unten).
     Bis Font-Files vorliegen: system-ui-Stack. Kein externes CDN. */
  --font-body:    'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-display: var(--font-body);
  --font-mono:    ui-monospace, 'Cascadia Mono', Consolas, 'SF Mono', 'Courier New', monospace;
  --num-feat:     "tnum" 1, "lnum" 1;

  /* ---- Layout (Premium-Iteration: runder) ---- */
  --sidebar-width:  248px;
  --topbar-height:  58px;
  --radius:         10px;
  --radius-sm:      6px;
  --radius-lg:      14px;

  /* ---- Schatten (Premium-Iteration: weicher, mehrstufig) ---- */
  --shadow-xs:      0 1px 2px rgba(15,20,30,.04);
  --shadow-sm:      0 1px 2px rgba(15,20,30,.04), 0 2px 8px rgba(15,20,30,.04);
  --shadow-md:      0 2px 4px rgba(15,20,30,.05), 0 8px 24px rgba(15,20,30,.06);
  --shadow-card:    var(--shadow-sm);
  --shadow-modal:   0 8px 24px rgba(15,20,30,.12), 0 2px 8px rgba(15,20,30,.06);

  /* ---- Motion (Premium-Iteration: SaaS-Ease-Out für Micro-Interactions) ---- */
  --t-fast:            120ms cubic-bezier(0.32, 0.72, 0, 1);
  --t-med:             200ms cubic-bezier(0.32, 0.72, 0, 1);
  --transition:        var(--t-fast);
  --transition-slow:   var(--t-med);

  /* ============================================================
     LEGACY-ALIASE — biegen alte Variablen auf neue Enterprise-Werte.
     Bricht keine bestehenden Modul-CSS-Files, sorgt aber sofort für
     konsistente Farben überall.
     ============================================================ */
  --primary-dark:       var(--sidebar-bg);
  --primary-mid:        #1E3352;
  --accent-blue:        var(--accent);
  --accent-light:       var(--accent-soft);
  --color-success:      var(--pos);
  --color-warning:      var(--warn);
  --color-danger:       var(--neg);
  --color-info:         var(--accent);
  --color-bg:           var(--bg);
  --color-surface:      var(--surface);
  --color-surface-2:    var(--surface-2);
  --color-border:       var(--border);
  --color-border-light: var(--border-mid);
  --color-primary:      var(--accent);
  --color-primary-dim:  var(--accent-dim);
  --color-primary-hover:var(--accent-hover);
  --color-text:         var(--text);
  --color-text-muted:   var(--text-muted);
  --color-text-dim:     var(--text-dim);
}

/* ============================================================
   @font-face — Inter (self-hosted, kein CDN, DSGVO-clean).
   Variable-Font-File deckt 100–900 in einer Datei ab.
   Quelle: github.com/rsms/inter (MIT). Fallback: system-ui-Stack.
   ============================================================ */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: local('Inter'),
       url('../fonts/InterVariable.woff2') format('woff2-variations'),
       url('../fonts/InterVariable.woff2') format('woff2');
}

/* ============================================================
   RESET & BASIS
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: var(--font-body);
  font-size: 14px;
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Zahlen überall in Tabular-Ziffern, damit Beträge in Tabellen ausrichten */
:where(.db-kpi-wert, .db-liq-val, .db-mahn-betrag, .db-stat-zahl,
       .db-umsatz-wert, td, th, code, pre, .num, [data-num]) {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: var(--num-feat);
}

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-mid); border-radius: 99px; }

/* ============================================================
   LOGIN-SCREEN — VoltNox Split-Layout (Redesign 2026-09-13 nach
   Referenzbild — Struktur/Layout/Farbwelt verbindlich).
   Vollflaechiger Split: links dunkles Marken-/Marketingfeld, rechts
   helles Formularfeld mit freistehender Login-Karte. Kein neues
   Logo-Bild — nur die bestehenden Signet-SVGs, neu angeordnet.
   ============================================================ */
#login-screen {
  /* Bewusst KEIN position:fixed mehr (Aenderung 2026-09-13): der
     Marketing-Bereich kann auf kleinen Hoehen (Handy hochkant, Tablet
     quer) hoeher als der Sichtbereich werden. Mit fixed+inset:0 waere
     das nur ueber einen VERSCHACHTELTEN Scroll-Container erreichbar
     (eigenes overflow-y:auto) — das kollidiert mit mobilen Browsern
     (Adressleisten-Verhalten, verschachteltes Touch-Scrolling) und war
     im eigenen Screenshot-Test nicht zuverlaessig pruefbar. Normales
     Dokument-Scrolling ist robuster und Standard-Verhalten. */
  position: relative;
  min-height: 100vh;
  z-index: 9999;
  background: var(--bg);
}

/* Strukturelle Korrektur 2026-09-13 (2. Nachbesserung): auf Desktop
   (≥901px) ist #login-screen selbst der EINE durchgehende dunkle
   Hintergrund ueber die volle Breite — .login-marketing und
   .login-form-panel werden dort transparent (siehe jeweilige Regeln
   unten), damit kein sichtbarer Nahtpunkt zwischen zwei getrennten
   Dunkel-/Hell-Flaechen mehr entsteht. Auf Tablet/Mobile (≤900px)
   bleibt #login-screen bewusst hell (Basisregel oben) — dort sorgen
   .login-marketing/.login-form-panel weiterhin wie bisher selbst fuer
   ihre Flaechenfarbe (unveraendert), damit sich am kleinen Bildschirm
   nichts verschiebt. */
@media (min-width: 901px) {
  #login-screen {
    overflow: hidden;
    /* 2026-09-14: echtes Foto-Hintergrundasset (img/login-bg-werkhalle.webp,
       geprueft: kein UI/Text/Logo eingebrannt, siehe Abschlussbericht Punkt A).
       Dunkles Navy-Overlay als OBERSTE Ebene sorgt fuer Lesbarkeit des
       Marketingtexts links (stark abgedunkelt) und lässt das Foto nach
       rechts hin (Werkstatt/Fahrzeug) zunehmend durchscheinen — EIN
       durchgehender Verlauf, keine harte Kante zwischen den Seiten.
       2026-09-14 (2. Austausch): Asset ersetzt durch neue Werkstattszene
       (Fahrzeug+Gebaeudeschild mit VoltNox-Branding, "Handwerk bewegt
       mehr."-Schriftzug — alles Teil der Foto-Szene, kein UI/Formular/
       Chamaeleon im Bild). Gleicher Dateiname, Cache-Buster hochgezaehlt
       (Cloudflare), Overlay-Gradient unveraendert uebernommen (links
       bereits dunkel genug im neuen Foto, keine Nachjustierung noetig).
       2026-09-14 (3. Austausch): Asset erneut ersetzt durch helle Taglicht-
       /Abendsonnen-Szene (Gebaeude mit VoltNox-Schild, Fenstertext
       "HANDWERK. DIGITAL. VORSPRUNG.", Fahrzeug, Helm — Umgebungsbranding
       in der Foto-Szene, kein Fake-UI). Cache-Buster erneut hochgezaehlt. */
    background-image:
      linear-gradient(102deg,
        rgba(8,16,34,.95) 0%,
        rgba(8,16,34,.90) 32%,
        rgba(8,16,34,.62) 54%,
        rgba(8,16,34,.30) 74%,
        rgba(8,16,34,.16) 100%),
      url('../img/login-bg-werkhalle.webp?v=2026091413');
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
  }
}

/* 2026-09-14 Fluid-Width-Konzept (Nutzer-Feedback: beim Ziehen des
   Fensterrands sprang das Chamaeleon ploetzlich kleiner, Text wirkte
   "zusammengepresst"): Ursache gefunden — die rechte Spalte sprang bei
   GENAU 1600px Breite von ihrem Maximum 460px (aus `minmax(360,460)`)
   SOFORT auf bis zu 1100px (aus `minmax(420,1100)`), ein Sprung von
   640px innerhalb eines einzigen Pixel-Schritts. Das quetschte den
   Marketing-Bereich bei 1600px ploetzlich schmaler zusammen (mehr
   Textumbruch = "zusammengepresst") UND liess den Wrapper (und damit
   das an ihn gebundene, prozentual skalierte Chamaeleon) abrupt
   springen. Fix: EINE durchgehende `clamp()`-Formel statt zwei
   Breakpoint-Stufen — waechst STETIG von 460px (bei 901px Breite) auf
   1100px (bei 2560px Breite), keine Stufe mehr. Bei ≥2560px bleibt es
   am Maximum (unveraendert wie bisher, deckt den bereits freigegebenen
   2560×1440/3440×1440-Stand ab). */
.login-shell {
  min-height: 100vh;
  width: 100%;
  display: grid;
  /* 2026-09-14: Spaltenbreite fluid von 901px bis 1600px (reines px/vw,
     keine %-Mischung — diese Formel war nie an der Chamaeleon-Regression
     beteiligt). Verifiziert: w=901px→11.445*9.01+356.88=460.0px (identisch
     zum bisherigen flachen Wert, keine Aenderung am Start), w=1600px→
     11.445*16+356.88=540.0px (Anschlusspunkt an die unveraenderte
     ≥1600px-Regel unten). Ziel: das Panel-Innenmass waechst dadurch
     glatt von 380px auf 460px, wodurch auch der Wrapper (und das daran
     gebundene Chamaeleon, siehe unten) nicht mehr abrupt springt. */
  grid-template-columns: minmax(0, 1fr) clamp(460px, 11.445vw + 356.88px, 540px);
}
@media (min-width: 1600px) {
  .login-shell {
    grid-template-columns: minmax(0, 1fr) minmax(420px, 1100px);
  }
}

/* ---------------------------------------------------------------
   LINKE SEITE — Marketingfeld (dunkel, Markenwelt)
   --------------------------------------------------------------- */
.login-marketing {
  position: relative;
  background: var(--primary-dark);
  overflow: hidden;
  display: flex;
  align-items: center;
  /* 2026-09-14 Fluid-Height-Konzept (nach Kundenmeldung "musste
     scrollen"): vertikale Innenabstaende/Schriftgroessen im gesamten
     Marketing-/Kartenbereich skalieren ab hier durchgaengig per
     `clamp(min, Xvh, max)` mit der FENSTERHOEHE statt fester Pixel-
     werte oder einzelner @media(max-height)-Stufen — dadurch passt
     sich die Seite STUFENLOS an JEDE Fensterhoehe an (nicht nur an
     ein paar getestete Werte). Der vh-Mittelwert ist jeweils so
     gewaehlt, dass bei ~900px Fensterhoehe (verbreitete volle
     Aufloesungs-Nutzhoehe) ungefaehr der bisherige feste Wert
     herauskommt — bei mehr Hoehe bleibt es am `max` gedeckelt
     (unveraendert wie bisher), bei weniger Hoehe schrumpft es
     proportional bis zum `min`-Bodenwert (nie kleiner, bleibt lesbar).
     Wo Breite UND Hoehe bereits vorher eine Rolle spielten (`vw`-
     Werte), wird zusaetzlich per `min(Xvw, Yvh)` die jeweils
     knappere Dimension gewaehlt. */
  padding: clamp(14px, 4.9vh, 56px) clamp(28px, 5vw, 64px);
}

/* Dekorativer CSS-Verlauf (kein Fotoasset) — bleibt NUR fuer Tablet/
   Mobile aktiv (siehe @media unten), damit sich dort nichts am bereits
   mehrfach freigegebenen Stand aendert bzw. kein zusaetzliches Foto-
   Transfergewicht auf kleineren/mobilen Geraeten anfaellt. Auf Desktop
   (≥901px) uebernimmt #login-screen das echte Foto-Hintergrundasset
   (img/login-bg-werkhalle.webp, siehe oben). */
.lm-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(1100px 560px at 82% -10%, rgba(59,130,246,.35), transparent 60%),
    radial-gradient(900px 700px at -10% 110%, rgba(27,95,170,.40), transparent 55%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, transparent 2px 34px),
    linear-gradient(160deg, #0f1e4a 0%, var(--primary-dark) 55%, #0d1830 100%);
}
@media (min-width: 901px) {
  /* Desktop: .login-marketing traegt keine eigene Flaeche mehr — der
     durchgehende Hintergrund kommt allein von #login-screen (siehe
     oben), sonst entstuende an der Spaltengrenze ein sichtbarer
     Naht-/Farbsprung zwischen zwei separaten Verlaeufen. */
  .login-marketing { background: transparent; }
  .lm-bg { display: none; }
}

.lm-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 640px;
  color: var(--text-on-dark);
}

/* Logo + Wortmarke */
.lm-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(8px, 2.4vh, 28px);
}
/* 2026-09-14: Logo-Bild ersetzt den bisherigen Text-Lockup (Wortmarke +
   Unterzeile waren vorher zwei HTML-Textzeilen, sind jetzt Teil des
   Bildes selbst — daher kein Text mehr in .lm-brand). Hoehe fluid
   (Fluid-Height-Konzept, gleiches 1150px-Referenzschema wie die
   uebrigen Marketing-Elemente), Breite automatisch im Bild-
   Seitenverhaeltnis. Bewusst aehnliche Hoehe wie der bisherige
   Text-Block (Basis ~34px, ≥1440px ~44px), damit sich nichts am
   Gesamtlayout verschiebt. */
.lm-brand-logo {
  display: block;
  height: clamp(36px, 12vh, 160px);
  width: auto;
  max-width: 100%;
}
@media (min-width: 1440px) {
  .lm-brand-logo { height: clamp(46px, 15vh, 200px); }
}
.lm-brand .logo-mark svg { display: block; width: clamp(20px, 3.5vh, 40px); height: clamp(20px, 3.5vh, 40px); }
/* Freigabe 2026-09-13 (3. Nachbesserung, neue Referenz): oben links
   NUR noch die Wortmarke, ohne Wuerfel-/Stack-Symbol. Eng gescopt auf
   .lm-brand — NICHT .logo-mark global, das wuerde auch die Sidebar
   der Haupt-App nach dem Login treffen (identische Klasse dort,
   ausserhalb Login-Scope, LOCKED). !important noetig, weil das
   Element im HTML ein inline style="display:inline-flex" traegt
   (Bestandsmarkup) — eine externe Regel ohne !important wuerde dagegen
   verlieren, da Inline-Styles hoehere Prioritaet haben. */
.lm-brand .logo-mark { display: none !important; }
.lm-brand-text { display: flex; flex-direction: column; }
.lm-brand-name {
  font-size: clamp(13px, 1.7vh, 20px);
  font-weight: 800;
  letter-spacing: -.3px;
  line-height: 1;
  color: #fff;
}
.lm-brand-reg { font-size: 11px; font-weight: 600; vertical-align: super; opacity: .7; }
.lm-brand-tagline {
  margin-top: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-on-dark-2);
}

/* Claim */
.lm-claim {
  font-size: clamp(15px, min(3vw, 3vh), 34px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.5px;
  margin: 0 0 clamp(4px, 1.2vh, 14px);
  color: #fff;
}
.lm-claim strong { color: #7fb2f5; font-weight: 800; }

.lm-lead {
  font-size: clamp(10.5px, 1.2vh, 13.5px);
  line-height: 1.6;
  color: var(--text-on-dark-2);
  max-width: 420px;
  margin: 0 0 clamp(6px, 2.3vh, 26px);
}

/* Feature-Kacheln: 2×2, dunkle Glasflaeche */
.lm-features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(5px, .9vh, 10px);
  margin-bottom: clamp(6px, 2.3vh, 26px);
}
.lm-feature {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  padding: clamp(6px, 1.2vh, 14px);
  display: flex;
  flex-direction: column;
  gap: clamp(2px, .5vh, 6px);
}
.lm-f-icon {
  width: clamp(18px, 2.6vh, 30px); height: clamp(18px, 2.6vh, 30px);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(59,130,246,.22);
  color: #9dc4fb;
  margin-bottom: 2px;
}
.lm-f-icon svg { width: 60%; height: 60%; display: block; }
.lm-feature strong {
  font-size: clamp(10px, 1.1vh, 12.5px);
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}
.lm-feature span {
  font-size: clamp(8.5px, 1vh, 11px);
  line-height: 1.4;
  color: var(--text-on-dark-2);
}

/* Handschriftlicher Claim */
.lm-signature {
  font-family: 'Segoe Script', 'Bradley Hand', 'Brush Script MT', cursive;
  font-style: italic;
  font-size: clamp(12px, 1.7vh, 19px);
  line-height: 1.3;
  color: #9dc4fb;
  transform: rotate(-1.5deg);
  margin: 0 0 clamp(4px, 1.7vh, 22px);
}

/* Vertrauens-/Benefit-Leiste */
.lm-trust {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(4px, .7vh, 8px) 18px;
  padding-top: clamp(6px, 1.6vh, 18px);
  border-top: 1px solid rgba(255,255,255,.14);
  margin-bottom: clamp(4px, 1.2vh, 14px);
}
.lm-trust span {
  font-size: clamp(9px, .9vh, 10.5px);
  font-weight: 600;
  letter-spacing: .2px;
  color: var(--text-on-dark-2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.lm-trust span::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #7fb2f5;
  flex-shrink: 0;
}

/* Firmen-Footer — dynamisch befuellt (config.js), Logik unveraendert */
.lm-firma-footer {
  font-size: clamp(9px, .9vh, 10.5px);
  color: rgba(255,255,255,.55);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Grosse Desktops (Struktur-Korrektur 2026-09-13, 2. Nachbesserung):
   der Marketing-Block bekommt deutlich mehr Praesenz und Gewicht statt
   einer nur maßvollen Nachjustierung — Textgroessen, Kachel-Groessen
   und Abstaende springen hier spuerbar nach oben (weiterhin ueber
   clamp() gedeckelt, damit auf 2560px nichts entgleist). Die mittlere/
   rechte Flaeche bleibt weiterhin bewusst frei fuer das spaeter
   gelieferte, freigestellte Chamäleon-Asset — hier NICHT gefuellt.
   Bewusst erst ab 1440px (nicht schon ab 901px), damit 1024×768/1366×768
   (Tablet-quer/kleinerer Desktop) unveraendert kompakt bleiben. */
@media (min-width: 1440px) {
  .login-marketing {
    padding: clamp(16px, 5.6vh, 72px) clamp(56px, 6.5vw, 112px);
  }
  .lm-inner {
    max-width: 820px;
  }
  .lm-brand {
    gap: 16px;
    margin-bottom: clamp(9px, 3.1vh, 40px);
  }
  .lm-brand .logo-mark svg { width: clamp(20px, 3.7vh, 48px); height: clamp(20px, 3.7vh, 48px); }
  .lm-brand-name { font-size: clamp(13px, 1.95vh, 25px); }
  .lm-brand-tagline { font-size: 12px; letter-spacing: 2.4px; }
  .lm-claim {
    font-size: clamp(15px, min(3.2vw, 3.5vh), 46px);
    margin-bottom: clamp(4px, 1.7vh, 22px);
  }
  .lm-lead {
    font-size: clamp(10px, 1.2vh, 15.5px);
    max-width: 520px;
    margin-bottom: clamp(7px, 2.9vh, 38px);
  }
  .lm-features {
    max-width: 680px;
    gap: clamp(5px, 1.2vh, 16px);
    margin-bottom: clamp(7px, 2.9vh, 38px);
  }
  .lm-feature {
    padding: clamp(6px, 1.5vh, 20px);
    gap: clamp(2px, .6vh, 8px);
  }
  .lm-f-icon {
    width: clamp(18px, 2.7vh, 36px);
    height: clamp(18px, 2.7vh, 36px);
  }
  .lm-f-icon svg { width: 55%; height: 55%; }
  .lm-feature strong { font-size: clamp(9.5px, 1.1vh, 14px); }
  .lm-feature span { font-size: clamp(8px, 1vh, 12.5px); }
  .lm-signature {
    font-size: clamp(12px, 1.95vh, 25px);
    margin-bottom: clamp(5px, 2.5vh, 32px);
  }
  .lm-trust {
    padding-top: clamp(6px, 1.9vh, 24px);
    gap: clamp(4px, .9vh, 12px) 26px;
  }
  .lm-trust span { font-size: clamp(8px, .9vh, 11.5px); }
}

/* 2026-09-14 KRITISCHER FIX (echter Kunde musste scrollen): bisher wurde
   nur horizontaler Overflow systematisch geprueft (kein Overflow, aber
   die VERTIKALE Hoehe nie). Befund: `.login-marketing` ist per Inhalt
   (Branding+Claim+Lead+4 Kacheln+Signatur+Trust-Leiste+Firmenfooter,
   grosszuegige Innenabstaende) schon bei VOLLER Standardaufloesung
   (1440x900, 1366x768, 1024x768 — nicht erst bei reduzierter Browser-
   Nutzhoehe) hoeher als der Viewport; `.login-shell` hat nur min-height,
   kein max-height/Deckel, daher waechst die Seite und man muss scrollen.
   Reale Nutzer haben durch Adressleiste/Lesezeichen/Tabs oft NOCH
   weniger Hoehe als der volle Bildschirm.

   ERSTER Loesungsversuch war ein Paar starrer `@media(max-height:...)`-
   Stufen (920px/700px) — funktionierte an den getesteten Punkten, war
   aber laut Nutzer-Praezisierung NICHT das Ziel: die Seite soll sich
   STUFENLOS an JEDE tatsaechliche Fensterhoehe anpassen, nicht nur an
   ein paar Testpunkte. Deshalb komplett ersetzt: alle vertikalen
   Innenabstaende/Schriftgroessen von `.login-marketing` bis zur
   Login-Karte sind jetzt direkt an der Basis-Deklaration (oben) als
   `clamp(min, Xvh, max)` bzw. `clamp(min, min(Xvw,Yvh), max)` definiert
   — kein separater @media(max-height)-Block mehr noetig, die Werte
   skalieren von sich aus kontinuierlich mit `window.innerHeight`. Bei
   sehr geringer Hoehe (≤~650px) bleibt einzig `.lm-feature span`
   (Kachel-Fliesstext) auf einem kleinen, aber weiterhin LESBAREN
   Mindestwert (8.5px) statt zu verschwinden — bewusst NICHT ausgeblendet
   (anders als im ersten Loesungsversuch), da die Vorgabe war, Inhalte
   nicht zu verstecken/abschneiden. Karten-Seite (.login-form-panel,
   .login-card, .login-form-logo/-title/-subtitle, .form-group) ebenso
   fluid gemacht, siehe jeweilige Regeln weiter unten. Verifiziert:
   `document.documentElement.scrollHeight <= window.innerHeight` durchweg
   ueber eine kontinuierliche Hoehen-Stichprobe von 550-1440px (nicht nur
   an den urspruenglich genannten Testpunkten), siehe Abschlussbericht. */

/* ---------------------------------------------------------------
   RECHTE SEITE — Formularfeld (hell) mit freistehender Login-Karte
   --------------------------------------------------------------- */
.login-form-panel {
  /* Kein eigenes Panel-Hintergrund mehr auf Desktop (Struktur-Korrektur
     2026-09-13, 2. Nachbesserung): vorher fuellte diese Flaeche die
     GANZE Spaltenhoehe hell aus ("harte weisse Spalte") — jetzt
     transparent, der durchgehende dunkle #login-screen-Hintergrund
     laeuft durch, NUR die Karte selbst (.login-card) ist noch weiss
     und schwebt sichtbar frei darauf. Auf Tablet/Mobile (≤900px)
     bekommt dieses Panel seine helle Flaeche unten per @media wieder
     zurueck — dort unveraendert wie vor dieser Nachbesserung. */
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 2026-09-14: vertikales Padding fluid (Fluid-Height-Konzept), horizontal
     zunaechst wieder wie im zuletzt bei 2560×1440 freigegebenen Stand
     (40px Basis / 80px ab 1600px) — die Fluid-WIDTH-Anpassung wurde
     zurueckgebaut, weil sie den fixierten 2560px-Ankerpunkt verschoben
     hat (siehe Notiz bei .lm-chameleon unten). */
  padding: clamp(12px, 2.8vh, 32px) 40px;
}
@media (min-width: 1600px) {
  .login-form-panel { padding: clamp(12px, 2.8vh, 32px) 80px; }
}

/* Wrapper nur zur Positionierungs-Referenz fuer das Chamaeleon — siehe
   Kommentar in index.html. Keine eigene Optik, gleiche max-width wie
   .login-card, damit das Tier sich immer an der tatsaechlichen
   Kartengroesse ausrichtet statt an der (breiteren) Panel-Spalte. */
.login-card-wrap {
  position: relative;
  width: 100%;
  /* 2026-09-14: max-width fluid von 901px bis 1600px, synchron mit der
     Grid-Spalte (siehe .login-shell) — reines px/vw. Verifiziert:
     w=901px→8.58*9.01+322.69=400.0px (Start, identisch zum bisherigen
     Wert), w=1600px→8.58*16+322.69=460.0px (Ende, identisch zum
     unveraenderten ≥1600px-Wert). Ohne diese Aenderung blieb der
     Wrapper trotz wachsender Spalte bei 400px gedeckelt. */
  max-width: clamp(400px, 8.58vw + 322.69px, 460px);
}

.login-card {
  width: 100%;
  max-width: clamp(400px, 8.58vw + 322.69px, 460px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 64px rgba(5,10,30,.45), 0 4px 16px rgba(5,10,30,.25);
  /* 2026-09-14: oberes/unteres Padding fluid (Fluid-Height-Konzept),
     horizontal (32px) unveraendert. */
  padding: clamp(14px, 3.1vh, 36px) 32px clamp(10px, 2.4vh, 28px);
  animation: fadeUp .3s ease;
  position: relative;
  z-index: 1;
  /* 2026-09-14: `top` jetzt auch unterhalb 1600px fluid von 0 auf 25px
     (reines px/vw). Grund: das Chamaeleon (oben) waechst jetzt schon vor
     1600px nahe an seine volle Groesse heran — ohne dieses synchron
     mitwachsende Karten-Offset sackten die Pfoten bei ca. 1250-1599px
     zu weit in die Karte hinein und ueberdeckten "ERP FÜR HANDWERKS-
     BETRIEBE" (per Screenshot gefunden und verifiziert). Verifiziert:
     w=901px→3.576*9.01-32.22=0.0px (Start, keine Aenderung), w=1600px→
     3.576*16-32.22=25.0px (Ende, identisch zum unveraenderten ≥1600px-
     Feinschliff unten). */
  top: clamp(0px, 3.576vw - 32.22px, 25px);
}
@media (min-width: 1600px) {
  /* WIEDERHERGESTELLT auf den zuletzt bei 2560×1440 explizit freigegebenen
     Stand ("perfekt") — die Fluid-Width-Version dieser Regel wurde
     zurueckgebaut, weil sie den 2560px-Ankerpunkt (top:25px u.a.)
     veraendert hatte. `top:25px` ist der freigegebene Karten-Feinschliff,
     UNVERAENDERT seit der Mini-Korrektur. */
  .login-card { max-width: 460px; padding: clamp(16px, 3.8vh, 44px) 40px clamp(12px, 3vh, 34px); top: 25px; }
}

/* Chamaeleon (2026-09-14, echtes freigestelltes Asset, geprueft — siehe
   Abschlussbericht Punkt A). Rein dekorativ: aria-hidden, pointer-events
   none, user-select none — nimmt nie Fokus/Klicks, auch wenn es sich mit
   der Karte optisch ueberlappt. Liegt im Stapel VOR (ueber) .login-card
   (z-index 2 > 1), damit Kopf/Vorderfuesse sichtbar auf der oberen
   Kartenkante zu liegen kommen — die Karte selbst bleibt darunter voll
   funktionsfaehig, Klicks gehen einfach durch das Bild hindurch.
   NUR ab 901px (Desktop) aktiv — auf Tablet/Mobile bewusst ausgeblendet
   (siehe Media-Queries weiter unten), damit dort die bereits mehrfach
   freigegebene, kompakte Login-Prioritaet erhalten bleibt und kein
   zusaetzliches Transfergewicht auf kleineren/mobilen Geraeten anfaellt. */
.lm-chameleon {
  display: none;
  position: absolute;
  z-index: 2;
  pointer-events: none;
  user-select: none;
  background-image: url('../img/login-chameleon.webp?v=2026091412');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
@media (min-width: 901px) {
  /* 2026-09-14 KORRIGIERTER Ansatz (der vorherige Versuch mit eigenen
     px/vw-Formeln fuer width/top/left hatte einen NEUEN Fehler: er liess
     das Tier bei mittleren Breiten (z.B. 1021px) so stark wachsen, dass
     die Schwanzspirale wieder den Karten-Logo-Text ueberdeckte — die
     901-1599px-Pose war urspruenglich ganz bewusst KLEIN gehalten, exakt
     damit das nicht passiert; sie proportional mitwachsen zu lassen
     reisst genau diese Sicherheit wieder ein.
     Jetzt stattdessen: die GLEICHEN, bereits als ueberdeckungsfrei
     verifizierten Prozentwerte wie im eingefrorenen ≥1600px-Stand (150%/
     -44%/-10%), aber angewendet auf den bei 901-1599px NATUERLICH
     schmaleren Wrapper (durch das Panel auf 380px begrenzt, nicht durch
     max-width) — reines CSS-Prozent-Erbverhalten, KEINE eigene vw/%-
     Mischformel mehr noetig, daher keine Wiederholung des letzten
     Rechenfehlers moeglich. Ergebnis skaliert automatisch proportional
     mit der tatsaechlichen Wrapper-Breite. Die verbleibende Sprung-
     Ursache (Wrapper selbst springt 380px→460px bei 1600px, weil die
     Grid-Spalte dort springt) wird separat als naechster Schritt
     behoben. */
  .lm-chameleon {
    display: block;
    width: 150%;
    aspect-ratio: 1386 / 1135;
    top: -44%;
    left: -10%;
    transform: rotate(0deg);
    transform-origin: center;
  }
}
@media (min-width: 1600px) {
  .lm-chameleon {
    width: 150%;
    top: -44%;
    left: -10%;
    /* 2026-09-14 Mini-Korrektur: 0,05cm (~2px bei 96dpi) nach oben, exakt
       per translateY statt am %-basierten top gerechnet (praeziser als
       eine Prozent-Umrechnung). Alles sonst an Groesse/Pose unveraendert.
       Dieser gesamte ≥1600px-Block ist der vom Nutzer als "perfekt"
       freigegebene 2560px-Stand — FIXER Ankerpunkt, nicht verschieben. */
    transform: rotate(0deg) translateX(-19px) translateY(-2px);
  }
}

/* 2026-09-14: bewegliches Auge am Login-Chamaeleon — Konzept angelehnt an
   das Augen-Element auf www.voltnox.de (eigener Quellcode-Einblick, NICHT
   uebernommen — das dortige Markup/JS ist IP der oeffentlichen Website,
   hier nur als Idee verstanden und mit eigenen Werten neu gebaut). Dort
   ist das Auge eine eigene, KREISRUND ausgeschnittene Bildebene exakt auf
   der Augenposition, die sich beim Rotieren immer selbst deckt (kein Loch,
   keine Kante) — plus ein reiner CSS-Keyframe-Fallback mit unregelmaessiger
   Zufalls-Drehsequenz (das Spinnen-Tracking dort brauchen/uebernehmen wir
   NICHT, nur diese Ambient-Idee).

   Eigenes Vorgehen: Augenposition im Originalbild (1386x1135, gleiche
   Quelle wie img/login-chameleon.webp) pixelgenau vermessen (Pupillen-
   Schwerpunkt + radialer Scan der aeusseren dunklen Augenring-Kante) —
   Mittelpunkt (373, 238), Ring-Aussenradius ~60px. Kreisscheibe mit
   Radius 65px ausgeschnitten (5px Puffer um den Ring, aber klar innerhalb
   des Abstands zum ungleichmaessigen, hellen Lidschuppenrand, damit beim
   Rotieren KEIN Teil des Lids mitdreht) — eigenes Asset
   img/login-chameleon-eye.webp. Prozentwerte unten = Pixelkoordinaten
   dieses Kreises relativ zur vollen 1386x1135-Bildflaeche, in % von
   Breite/Hoehe getrennt umgerechnet (left/width durch 1386, top/height
   durch 1135) — dadurch bleibt die Scheibe bei JEDER Breite automatisch
   ein exakter Kreis an der richtigen Stelle, weil .lm-chameleon selbst
   per aspect-ratio:1386/1135 immer im gleichen Seitenverhaeltnis wie das
   Bild steht (kein erneutes Ausmessen pro Breakpoint noetig). Nur dort
   wirksam, wo .lm-chameleon sichtbar ist (≥901px) — darunter per
   display:none des Elternelements automatisch mit ausgeblendet. */
.lm-chameleon-eye {
  position: absolute;
  left: 22.222%;
  top: 15.242%;
  width: 9.380%;
  height: 11.454%;
  border-radius: 50%;
  background-image: url('../img/login-chameleon-eye.webp?v=2026091401');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transform-origin: 50% 50%;
  pointer-events: none;
  user-select: none;
  animation: lm-eye-look 8s steps(1, jump-end) infinite;
  will-change: transform;
}
/* 2026-09-14 Korrekturrunden (Live-Feedback, 3 Stufen):
   1. Urspruenglich mit ease-in-out und kurzen Uebergangs-Spannen gebaut —
      wirkte trotzdem wie Gleiten/Schleifen, weil ease-in-out IMMER weich
      interpoliert, egal wie kurz die Spanne ist. Deshalb komplett auf
      steps(1, jump-end) umgestellt: der Wert springt ohne jede Zwischen-
      Interpolation instantan auf den naechsten Stations-Winkel — kein
      Nachdriften mehr, technisch garantiert (steps() kennt keine
      Zwischenwerte).
   2. Stationen ueber den VOLLEN 360°-Bereich verteilt (vorher nur ein
      schmaler Ausschnitt um 0deg) und mit UNTERSCHIEDLICH GROSSEN
      Spruengen zwischen den Stationen (mal ~10-20deg klein, mal 130-230deg
      gross) fuer unregelmaessige, lebendige Wirkung.
   3. Sprung-HAeUFIGKEIT ca. 50% reduziert (mehr Ruhe zwischen den
      Ruecken): Gesamtdauer der Loop-Animation von 4s auf 8s verdoppelt.
      Die Prozent-Stationen selbst (und damit ihr Verhaeltnis zueinander)
      blieben unveraendert — durch die laengere Gesamtdauer verdoppeln
      sich automatisch NUR die Haltezeiten zwischen den Spruengen, die
      Haerte/Geschwindigkeit jedes einzelnen Sprungs bleibt unangetastet
      (steps(1) ist unabhaengig von der Segmentdauer immer ein Instant-
      Sprung, nie ein Gleiten). Start- und Endwert identisch (0deg) fuer
      nahtlosen Loop. NUR das Auge bewegt sich (eigenes Element) —
      Chamaeleon-Basisposition/-Pose bleibt unberuehrt. */
@keyframes lm-eye-look {
  0%   { transform: rotate(0deg); }
  4%   { transform: rotate(150deg); }
  15%  { transform: rotate(170deg); }
  26%  { transform: rotate(-60deg); }
  34%  { transform: rotate(-20deg); }
  44%  { transform: rotate(-150deg); }
  50%  { transform: rotate(-155deg); }
  63%  { transform: rotate(60deg); }
  70%  { transform: rotate(80deg); }
  82%  { transform: rotate(10deg); }
  92%  { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .lm-chameleon-eye { animation: none; }
}

/* Logo oben auf der Formular-Seite — unveraendertes Bestands-Asset */
.login-form-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  /* 2026-09-14: fluid (Fluid-Height-Konzept), NUR innerhalb #login-screen
     wirksam ueber die bestehende Klasse — keine andere Seite nutzt
     .login-form-logo. */
  margin-bottom: clamp(6px, 1.9vh, 22px);
  text-align: center;
}
/* Freigabe 2026-09-13 (3. Nachbesserung): auch auf der Karte nur noch
   die Wortmarke, ohne Wuerfel-/Stack-Symbol. Eng gescopt auf
   .login-form-logo — betrifft ausschliesslich diese Login-Karte.
   Hier gibt es (anders als bei .lm-brand) KEINEN .logo-mark-Wrapper im
   Markup — das <svg> haengt direkt in .login-form-logo, daher wird
   das SVG-Kind direkt adressiert statt einer Wrapper-Klasse. */
.login-form-logo > svg { display: none; }

.login-form-brand {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.login-form-brand-name {
  font-size: 19px;
  font-weight: 800;
  color: var(--primary-dark);
  letter-spacing: -.4px;
  line-height: 1;
}
.login-form-brand-accent {
  font-weight: 400;
  color: var(--accent);
  vertical-align: super;
  font-size: 11px;
}

.login-form-brand-tagline {
  font-size: 9.5px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 1.6px;
  margin-top: 2px;
}

.login-form-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.4px;
  margin-bottom: 4px;
  text-align: center;
}

.login-form-subtitle {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-bottom: clamp(6px, 1.9vh, 22px);
  text-align: center;
}

/* Formular-Felder */
.form-group { margin-bottom: 15px; }
/* 2026-09-14: fluid nur fuer die Login-Karte (Fluid-Height-Konzept) —
   bewusst als eigene, spezifischere Regel statt die globale .form-group
   (im gesamten ERP-Formularsystem verwendet, LOCKED) zu veraendern. */
.login-card .form-group { margin-bottom: clamp(6px, 1.3vh, 15px); }

.form-group label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
  letter-spacing: .6px;
  text-transform: uppercase;
}

/* Icon-Input Wrapper */
.form-input-icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.form-input-icon {
  position: absolute;
  left: 12px;
  color: var(--text-dim);
  pointer-events: none;
  flex-shrink: 0;
  transition: color var(--transition);
}

.form-input-icon-wrap:focus-within .form-input-icon {
  color: var(--accent);
}

.form-input-icon-wrap input {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm);
  padding: 11px 14px 11px 40px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}

/* Platz fuer den Sichtbarkeits-Toggle-Button im Passwortfeld (additiv) */
.form-input-icon-wrap.has-toggle input {
  padding-right: 42px;
}

.form-input-icon-wrap input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* Fallback für Inputs ohne Icon-Wrapper */
.form-group > input {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}

.form-group > input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.form-error {
  color: var(--color-danger);
  font-size: 12px;
  margin-top: 4px;
  display: none;
}

/* Passwort-Sichtbarkeits-Toggle — rein visuell, additiv (siehe JS-Block
   in index.html direkt nach #login-screen). Keine Auth-Beruehrung. */
.pw-toggle-btn {
  position: absolute;
  right: 4px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  cursor: pointer;
  transition: color var(--t-fast), background var(--t-fast);
}
.pw-toggle-btn:hover { color: var(--text-muted); background: var(--surface-3); }
.pw-toggle-btn:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 1px; }
.pw-toggle-btn .pw-icon { display: block; }
/* Hoehere Spezifitaet als .pw-icon{display:block}, sonst gewinnt das
   nicht gegen das hidden-Attribut und beide Icons ueberlagern sich. */
.pw-toggle-btn .pw-icon[hidden] { display: none; }

/* Grosser, gut treffbarer Anmelden-Button — .btn-primary (global/geteilt)
   bleibt unveraendert; dies ist nur ein additiver Modifier fuer die
   Login-Karte. */
.login-submit-btn {
  padding: 13px 20px;
  font-size: 15px;
  border-radius: var(--radius-sm);
}

/* Footer der Login-Karte: Impressum / Datenschutz */
.login-card-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 11.5px;
}
.login-card-footer a {
  color: var(--text-muted);
  text-decoration: none;
}
.login-card-footer a:hover { color: var(--accent); text-decoration: underline; }
.login-card-footer span { color: var(--border-mid); }

/* ---------------------------------------------------------------
   2026-09-14: Login-Karte dunkel (Nutzerwunsch) — passend zur
   Navy-Palette von Hintergrundfoto/Chamaeleon (#0d1830/#0f1e4a/
   --sidebar-bg #17253D, Akzent-Hellblau #7fb2f5/#9dc4fb bereits im
   Marketing-Bereich verwendet). ALLES hier ist eng auf `.login-card`
   gescopt (Nachfahren-Selektoren, hoehere Spezifitaet als die
   globalen Regeln oben) — die globalen CSS-Variablen (--surface,
   --text, --border, --color-danger etc.) bleiben UNVERAENDERT, da sie
   im gesamten uebrigen ERP-Formularsystem verwendet werden (LOCKED).
   Kontrast gegen die neue Kartenfarbe (#16213A) manuell gegengeprueft:
   Weiss/#7fb2f5-Text >7:1, gedaempftes Weiss (.68 Deckkraft) ~6.5:1,
   beides deutlich ueber dem WCAG-AA-Minimum 4.5:1 fuer Fliesstext. */
.login-card {
  background: #16213A;
  border: 1px solid rgba(130, 180, 255, .22);
  box-shadow: 0 24px 64px rgba(3, 7, 18, .55), 0 4px 16px rgba(3, 7, 18, .35);
}
.login-card .login-form-brand-name { color: #FFFFFF; }
.login-card .login-form-brand-accent { color: #7FB2F5; }
.login-card .login-form-brand-tagline { color: rgba(255, 255, 255, .62); }
.login-card .login-form-title { color: #FFFFFF; }
.login-card .login-form-subtitle { color: rgba(255, 255, 255, .68); }
.login-card .form-group label { color: rgba(255, 255, 255, .72); }
.login-card .form-error { color: #FF8A80; }

.login-card .form-input-icon { color: rgba(255, 255, 255, .55); }
.login-card .form-input-icon-wrap:focus-within .form-input-icon { color: #7FB2F5; }
.login-card .form-input-icon-wrap input,
.login-card .form-group > input {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #FFFFFF;
}
.login-card .form-input-icon-wrap input::placeholder,
.login-card .form-group > input::placeholder { color: rgba(255, 255, 255, .40); }
.login-card .form-input-icon-wrap input:focus,
.login-card .form-group > input:focus {
  border-color: #7FB2F5;
  box-shadow: 0 0 0 3px rgba(127, 178, 245, .28);
}
.login-card .pw-toggle-btn { color: rgba(255, 255, 255, .55); }
.login-card .pw-toggle-btn:hover { color: #FFFFFF; background: rgba(255, 255, 255, .10); }

.login-card .login-card-footer { border-top-color: rgba(255, 255, 255, .16); }
.login-card .login-card-footer a { color: rgba(255, 255, 255, .62); }
.login-card .login-card-footer a:hover { color: #9DC4FB; }
.login-card .login-card-footer span { color: rgba(255, 255, 255, .30); }

/* Anmelden-Button: heller/kraeftiger als --accent (#1B5FAA), damit er
   sich von der jetzt ebenfalls dunklen Karte klar abhebt statt fast
   zu verschmelzen. */
.login-card .btn-primary {
  background: #2F7DE0;
  border-color: #2F7DE0;
}
.login-card .btn-primary:hover { background: #2568B8; border-color: #2568B8; }

/* Login-Button */
.btn-primary {
  width: 100%;
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 12px 20px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

@media (hover: hover) {
  .btn-primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
  }
}

.btn-primary:active { background: var(--accent-hover); transform: scale(0.98); }
.btn-primary:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 1px; }

/* ================================================================
   P2.1-BAU-Z2 (2026-07-13): .vn-action-btn — EINE kanonische Basis
   fuer alle Tabellen-Aktions-Icon-Buttons. Ziel: keine parallelen
   Definitionen mehr in rechnungen.css / auftraege.css / mahnwesen.css
   — nur EINE Groessen-/Rahmen-/Farb-Kontur, die durch Selektor-
   Gruppierung von allen genutzt wird.
   Modul-spezifische Hover-Farben (Accent bei Print/Edit, Neg bei
   Delete, Pos bei mark-paid, Amber-Tint bei Warenkorb) bleiben in
   den Modul-CSS-Dateien — sie greifen als spezifischere Selektoren
   ueber die Basis.
   ================================================================ */
.vn-action-btn,
.re-btn-icon,
.au-btn-icon,
.mw-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
  flex-shrink: 0;
}
/* Icon-Maß EINE Definition — !important setzt sich auch gegen
   inline width/height-Attribute im HTML-Markup durch. Referenz-Wert
   ist Archiv (.re-btn-view/pdf/email/mark-paid = width="15" im JS).
   BAU-Z2-Nachtrag (Murat-Sichtpruefung Runde 2): Auftrags-Icons wirkten
   im Vergleich kleiner mit mehr Leerraum — Ursache war Streuung zwischen
   inline-SVG-Attribut (15) und CSS ohne Override. Ab jetzt gewinnt CSS. */
.vn-action-btn svg,
.re-btn-icon svg,
.au-btn-icon svg,
.mw-btn-icon svg {
  width: 15px !important;
  height: 15px !important;
}
.vn-action-btn:active,
.re-btn-icon:active,
.au-btn-icon:active,
.mw-btn-icon:active {
  transform: scale(.98);
}
.vn-action-btn:focus-visible,
.re-btn-icon:focus-visible,
.au-btn-icon:focus-visible,
.mw-btn-icon:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 1px;
}
/* Tablet-Sicherheit: mindestens 6px Abstand zwischen Icons in
   Aktions-Reihen. Verhindert das "kleben" bei 9 Icons/Zeile.
   Wrapper-Klassen der Module (.actions-wrapper, .re-actions-wrap,
   .mw-actions) enthalten schon gap: 5-6px — hier als Fallback. */
.vn-action-btn + .vn-action-btn,
.re-btn-icon + .re-btn-icon,
.au-btn-icon + .au-btn-icon,
.mw-btn-icon + .mw-btn-icon {
  margin-left: 4px;
}

/* Responsive Skalierung — Modul-agnostisch, zentral hier.
   BAU-Z2-Nachtrag: vorher lebten die Skalierungs-Regeln nur in
   auftraege.css und griffen andere Module gar nicht. Ab jetzt
   Modul-uebergreifend, mit !important damit die Regel gegen die
   inline-SVG-Attribute (width="15") gewinnt. */
@media (max-width: 1200px) {
  .vn-action-btn,
  .re-btn-icon,
  .au-btn-icon,
  .mw-btn-icon {
    width: 28px;
    height: 28px;
  }
  .vn-action-btn svg,
  .re-btn-icon svg,
  .au-btn-icon svg,
  .mw-btn-icon svg {
    width: 14px !important;
    height: 14px !important;
  }
}
@media (max-width: 1000px) {
  .vn-action-btn,
  .re-btn-icon,
  .au-btn-icon,
  .mw-btn-icon {
    width: 26px;
    height: 26px;
  }
  .vn-action-btn svg,
  .re-btn-icon svg,
  .au-btn-icon svg,
  .mw-btn-icon svg {
    width: 13px !important;
    height: 13px !important;
  }
}

/* Login-UX 2026-05-26: Spinner + Disabled-State während Anmeldung läuft.
   Vorher gab es 3-4 Sek kein Feedback und der Kunde drückte zweimal ENTER. */
.btn-primary:disabled,
.btn-primary.is-loading {
  cursor: progress;
  opacity: 0.85;
  transform: none;
  box-shadow: none;
}
.btn-primary.is-loading:hover { background: var(--accent-blue); box-shadow: none; }
.login-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: vn-login-spin 0.7s linear infinite;
  vertical-align: -2px;
  flex-shrink: 0;
}
.login-spinner--lg {
  width: 40px; height: 40px; border-width: 3.5px;
  border-color: var(--border);
  border-top-color: var(--accent);
}
@keyframes vn-login-spin { to { transform: rotate(360deg); } }
/* Inputs während Login sichtbar gefüllt lassen, nur leicht abdunkeln */
.form-input-icon-wrap input:disabled,
.form-group input:disabled {
  opacity: 0.72;
  cursor: progress;
  background: rgba(0,0,0,0.02);
}

/* Vollbild-Overlay zwischen Login-Submit und location.reload() — verhindert
   dass der Kunde 1-2 Sek einen scheinbar leeren Login-Screen sieht. */
#vn-post-login-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: vn-overlay-fade 0.18s ease-out;
}
#vn-post-login-overlay .vn-pl-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  color: var(--text);
}
#vn-post-login-overlay .vn-pl-text {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .2px;
  color: var(--text-muted);
}
@keyframes vn-overlay-fade { from { opacity: 0; } to { opacity: 1; } }

.login-hint {
  text-align: center;
  color: var(--text-dim);
  font-size: 12px;
  margin-top: 14px;
}

/* Responsive Login (Redesign 2026-09-13) — Login zuerst, Marketing
   kompakt darunter. Kein horizontales Scrollen auf keiner Breite. */
@media (max-width: 900px) {
  .login-shell { grid-template-columns: 1fr; }
  /* Panel-Hintergrund hier bewusst wieder hergestellt — siehe Kommentar
     an der Basisregel .login-form-panel weiter oben (Struktur-Korrektur
     2026-09-13, 2. Nachbesserung: Desktop ist transparent, Tablet/
     Mobile bleibt unveraendert wie vor dieser Nachbesserung). */
  .login-form-panel { order: 1; padding: 28px 20px 18px; background: var(--bg); }
  .login-marketing { order: 2; padding: 32px 24px 40px; }
  .lm-inner { max-width: 560px; }
  .lm-claim { font-size: 25px; margin-bottom: 10px; }
  .lm-lead { margin-bottom: 18px; }
  /* Marketingbereich bewusst reduziert: Signatur + Vertrauens-Leiste
     weichen auf Tablet/Mobile der Prioritaet "Login zuerst". */
  .lm-signature,
  .lm-trust { display: none; }
  .lm-firma-footer { margin-top: 4px; }
}

@media (max-width: 640px) {
  .lm-lead { display: none; }
  .lm-features { grid-template-columns: 1fr; gap: 8px; }
  .login-marketing { padding: 26px 18px 30px; }
  .login-form-panel { padding: 20px 14px 14px; }
  .login-card { padding: 28px 20px 20px; border-radius: 12px; }
}

@media (max-width: 400px) {
  /* Kleinstes Format: Marketingbereich auf Marke + Claim reduziert,
     Feature-Kacheln entfallen — Login bleibt vollstaendig oben sichtbar. */
  .lm-features { display: none; }
  .lm-claim { font-size: 21px; }
  .login-card { padding: 24px 16px 18px; }
}

/* ============================================================
   APP-LAYOUT
   ============================================================ */
#app {
  display: none;
  height: 100vh;
  overflow: hidden;
  background: var(--bg);
}

/* ============================================================
   SIDEBAR — VoltNox Pro Navy
   ============================================================ */
.sidebar {
  position: fixed;
  top: 0; left: 0;
  width: var(--sidebar-width);
  height: 100vh;
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  z-index: 100;
  overflow: hidden;
  box-shadow: 2px 0 12px rgba(0,0,0,.15);
}

.sidebar-header {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 20px 18px 18px;
  border-bottom: 1px solid var(--sidebar-border);
  flex-shrink: 0;
}

.sidebar-header .logo-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}

.sidebar-header .logo-mark svg { color: #fff; display: block; }

.sidebar-header .logo-text {
  font-size: 14.5px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.2px;
  line-height: 1.15;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-header .sidebar-brand-name {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.2px;
  line-height: 1.1;
}
.sidebar-header .sidebar-brand-accent {
  font-weight: 400;
  color: #8FB4E0;
}

.sidebar-header .sidebar-brand-tagline {
  display: block;
  font-size: 8.5px;
  font-weight: 500;
  color: var(--text-on-dark-2);
  letter-spacing: 1.4px;
  line-height: 1;
}

.nav-section { padding: 8px 10px 0; flex-shrink: 0; }

.nav-section-label {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255,255,255,.3);
  padding: 12px 10px 5px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--sidebar-text);
  font-size: 13.5px;
  font-weight: 500;
  transition: background var(--transition), color var(--transition);
  position: relative;
  user-select: none;
  margin-bottom: 1px;
}

@media (hover: hover) {
  .nav-item:hover { background: var(--sidebar-hover); color: #fff; }
}
.nav-item.active  { background: var(--sidebar-active); color: var(--sidebar-text-active); }

.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 15%; height: 70%;
  width: 3px;
  background: var(--accent-blue);
  border-radius: 0 3px 3px 0;
}

/* Defensiv: sollte ein Fremdmodul unerwartet einen zweiten .nav-item.active
   setzen (Race-Condition beim Init), rendern wir nur das ERSTE als aktiv.
   Der Router-Watchdog (router.js#navigate) räumt das im nächsten Frame auf,
   aber der User sieht in der Zwischenzeit KEINEN doppelten Highlight-Bug. */
.nav-item.active ~ .nav-item.active {
  background: transparent !important;
  color: var(--sidebar-text) !important;
}
.nav-item.active ~ .nav-item.active::before { content: none !important; }
.nav-item.active ~ .nav-item.active .nav-icon { opacity: .6 !important; }

.nav-item .nav-icon {
  width: 17px; height: 17px;
  flex-shrink: 0;
  opacity: .6;
  transition: opacity var(--transition);
}

.nav-item:hover .nav-icon,
.nav-item.active .nav-icon { opacity: 1; }

/* Externer Link in der Sidebar (<a>-Tag) */
a.nav-item {
  text-decoration: none;
  outline: none;
  display: flex;
}

.nav-ext-icon {
  width: 11px;
  height: 11px;
  margin-left: auto;
  opacity: 0;
  flex-shrink: 0;
  transition: opacity var(--transition);
}

.nav-item-external:hover .nav-ext-icon { opacity: .5; }

/* Auf Tablet/Mobile: ext-Icon ausblenden */
@media (max-width: 1024px) {
  .nav-ext-icon { display: none; }
}

.nav-badge {
  margin-left: auto;
  background: var(--accent-blue);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 99px;
  display: none;
}

.sidebar-footer {
  border-top: 1px solid var(--sidebar-border);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* ============================================================
   Plan-Footer in der Sidebar — dezente Zeile + Info-Icon
   Ersetzt die alte Upgrade-Box (zu aufdringlich).
   ============================================================ */

.sidebar-plan-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  font-size: 11.5px;
  color: var(--sidebar-text);
  border-top: 1px solid var(--sidebar-border);
  flex-shrink: 0;
}

.plan-footer-label {
  opacity: .7;
  letter-spacing: .02em;
}

.plan-footer-name {
  color: var(--sidebar-text-active);
  font-weight: 600;
  letter-spacing: .02em;
}

.plan-footer-info {
  margin-left: auto;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 50%;
  color: rgba(255, 255, 255, .65);
  cursor: pointer;
  transition: all var(--transition);
  padding: 0;
}

.plan-footer-info svg {
  width: 13px;
  height: 13px;
}

.plan-footer-info:hover {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .35);
  color: #fff;
}

/* ============================================================
   Plan-Vergleichs-Modal — clean, viel Whitespace
   ============================================================ */

.pf-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 1300;
  animation: pf-fade .15s ease;
}
@keyframes pf-fade { from { opacity: 0; } to { opacity: 1; } }

.pf-modal {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 30px 80px rgba(15, 23, 42, .25);
  width: 100%;
  max-width: 1100px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: pf-pop .2s ease;
}
@keyframes pf-pop {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.pf-modal-head {
  padding: 22px 28px 18px;
  border-bottom: 1px solid #f3f4f6;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.pf-modal-titel {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #111827;
  letter-spacing: -0.01em;
}

.pf-modal-sub {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: #6b7280;
}

.pf-modal-close {
  background: transparent;
  border: none;
  color: #9ca3af;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  padding: 0 6px;
  border-radius: 6px;
  transition: all var(--transition);
}
.pf-modal-close:hover { color: #111827; background: #f3f4f6; }

.pf-modal-body {
  padding: 24px 28px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}

.pf-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  align-items: stretch;
}

@media (max-width: 980px) { .pf-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .pf-grid { grid-template-columns: 1fr; } }

.pf-tile {
  position: relative;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 22px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: box-shadow var(--transition);
}

.pf-tile-aktion {
  display: inline-block;
  background: linear-gradient(135deg, #dc2626, #f97316);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 4px 10px;
  border-radius: 12px;
  margin-bottom: 4px;
  align-self: flex-start;
}

.pf-tile:hover {
  box-shadow: 0 6px 20px rgba(15, 23, 42, .08);
}

.pf-tile-aktuell {
  border-color: #2563eb;
  border-width: 2px;
  padding: 21px 17px 17px;        /* Border kompensieren */
  box-shadow: 0 6px 20px rgba(37, 99, 235, .12);
}

.pf-tile-niedriger { opacity: .65; }

.pf-tile-badge {
  position: absolute;
  top: -10px;
  left: 18px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 4px;
  white-space: nowrap;
}
.pf-tile-badge-aktuell {
  background: #2563eb;
  color: #fff;
}
.pf-tile-badge-upgrade {
  background: #f3f4f6;
  color: #6b7280;
  border: 1px solid #e5e7eb;
}

.pf-tile-name {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
  letter-spacing: -0.01em;
  margin-top: 4px;
}

.pf-tile-sub {
  font-size: 11.5px;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
}

.pf-tile-preis {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin: 8px 0 6px;
}
.pf-tile-preis strong {
  font-size: 26px;
  font-weight: 800;
  color: #111827;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.pf-tile-preis span {
  font-size: 12px;
  color: #6b7280;
  font-weight: 500;
}

.pf-tile-desc {
  font-size: 12.5px;
  color: #6b7280;
  line-height: 1.5;
  min-height: 38px;
}

.pf-mod-headline,
.pf-mod-delta-headline {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #6b7280;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #f3f4f6;
}
.pf-mod-delta-headline { color: #2563eb; }

.pf-mod-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pf-mod-item {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12.5px;
  color: #374151;
  line-height: 1.4;
}

.pf-mod-check {
  color: #16a34a;
  font-weight: 700;
  flex-shrink: 0;
}

.pf-mod-leer {
  font-size: 12px;
  color: #9ca3af;
  font-style: italic;
}

.pf-modal-foot {
  padding: 14px 28px;
  border-top: 1px solid #f3f4f6;
  background: #fafafa;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
}

.pf-modal-foot-hint {
  font-size: 12px;
  color: #6b7280;
}

.pf-modal-btn-ghost {
  background: transparent;
  border: 1px solid #e5e7eb;
  color: #374151;
  padding: 8px 16px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
}
.pf-modal-btn-ghost:hover { background: #f3f4f6; border-color: #d1d5db; }

/* ============================================================
   Direct-Checkout — Hover-CTA, Payment-Step, Success-Step
   ============================================================ */

/* Klickbare Tile bekommt subtilen Hover-Lift + CTA-Overlay */
.pf-tile-klickbar {
  cursor: pointer;
}
.pf-tile-klickbar:hover {
  border-color: #2563eb;
  box-shadow: 0 8px 24px rgba(37, 99, 235, .15);
  transform: translateY(-2px);
}

.pf-tile-cta {
  position: absolute;
  inset: auto 0 0 0;
  padding: 12px;
  background: linear-gradient(180deg, transparent 0%, #ffffff 50%);
  display: flex;
  justify-content: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .18s, transform .18s;
  pointer-events: none;
}
.pf-tile-klickbar:hover .pf-tile-cta {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.pf-tile-cta-btn {
  background: #2563eb;
  color: #fff;
  border: none;
  padding: 10px 18px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: .02em;
  box-shadow: 0 4px 12px rgba(37, 99, 235, .35);
  transition: background var(--transition);
  white-space: nowrap;
}
.pf-tile-cta-btn:hover { background: #1d4ed8; }

/* Read-Only Plan-Modal: statt Upgrade-Button → Anbieter-Kontakt-Link.
   Plan-Wechsel läuft zentral über VoltNox (Hub), nicht Self-Service. */
.pf-tile-cta-info {
  display: inline-block;
  background: #f1f5f9;
  color: #1e293b;
  border: 1px solid #cbd5e1;
  padding: 8px 14px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: all var(--transition);
}
.pf-tile-cta-info:hover {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
}
/* CTA-Container ist jetzt immer sichtbar (kein Hover-Reveal mehr) */
.pf-tile .pf-tile-cta {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  margin-top: 8px;
}

/* Downgrade-Variante des CTA: weniger aufdringlich */
.pf-tile-cta-btn-downgrade {
  background: #fff;
  color: #1e293b;
  border: 1px solid #cbd5e1;
  box-shadow: 0 2px 6px rgba(15, 23, 42, .08);
}
.pf-tile-cta-btn-downgrade:hover {
  background: #f1f5f9;
  color: #0f172a;
}

/* Rechtlicher Hinweis im Vergleichs-Modal */
.pf-legal-hint {
  margin: 18px 0 0;
  padding: 12px 14px;
  border-left: 3px solid #94a3b8;
  background: #f8fafc;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.55;
  color: #475569;
}
.pf-legal-hint strong { color: #1e293b; }

/* Downgrade-Modal */
.pf-modal-downgrade { max-width: 560px; }
.pf-dg-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.pf-dg-summary {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 14px 16px;
}
.pf-dg-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 14px;
}
.pf-dg-row-arrow {
  justify-content: center;
  color: #94a3b8;
  font-size: 18px;
  margin: -2px 0;
}
.pf-dg-label {
  color: #64748b;
  min-width: 70px;
}
.pf-dg-value { color: #334155; }
.pf-dg-value-strong { color: #0f172a; font-weight: 600; }

.pf-dg-stichtag {
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: 8px;
  padding: 14px 16px;
  text-align: center;
}
.pf-dg-stichtag-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #92400e;
  font-weight: 600;
}
.pf-dg-stichtag-datum {
  font-size: 22px;
  font-weight: 700;
  color: #78350f;
  margin: 4px 0 6px;
  letter-spacing: -.01em;
}
.pf-dg-stichtag-frist { font-size: 12px; }
.pf-dg-frist-ok    { color: #166534; }
.pf-dg-frist-late  { color: #b45309; }

.pf-dg-section { display: flex; flex-direction: column; gap: 6px; }
.pf-dg-section-titel {
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
}
.pf-dg-section-text,
.pf-dg-section-hint {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: #475569;
}
.pf-dg-section-hint {
  font-size: 11.5px;
  color: #64748b;
  font-style: italic;
}

.pf-mod-list-loss .pf-mod-item-loss {
  color: #7f1d1d;
}
.pf-mod-loss-icon {
  display: inline-block;
  width: 14px;
  text-align: center;
  color: #b91c1c;
  margin-right: 6px;
  font-weight: 700;
}

.pf-modal-btn-danger {
  background: #b91c1c;
  color: #fff;
  border: none;
  padding: 10px 18px;
  border-radius: 7px;
  font-weight: 600;
  cursor: pointer;
  font-size: 13px;
}
.pf-modal-btn-danger:hover { background: #991b1b; }

/* Downgrade-Bestätigung (nach Klick auf "verbindlich bestätigen") */
.pf-modal-downgrade-ok { max-width: 460px; }
.pf-dg-ok-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 24px 24px 8px;
}
.pf-dg-ok-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #dcfce7;
  color: #15803d;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 700;
}
.pf-dg-ok-headline { font-size: 15px; color: #1e293b; margin: 0; }
.pf-dg-ok-text     { font-size: 13px; color: #475569; margin: 0; line-height: 1.6; }
.pf-dg-ok-hint     { font-size: 11.5px; color: #94a3b8; margin: 0; line-height: 1.5; }

/* Sidebar-Footer: pending-Downgrade-Hinweis */
.plan-footer-pending {
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(254, 243, 199, .12);
  border: 1px solid rgba(252, 211, 77, .35);
  border-radius: 6px;
  font-size: 11px;
  line-height: 1.4;
}
.plan-footer-pending-text {
  color: #fde68a;
  margin-bottom: 4px;
}
.plan-footer-pending-text strong { color: #fef3c7; }
.plan-footer-pending-cancel {
  background: transparent;
  border: none;
  color: #93c5fd;
  font-size: 11px;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.plan-footer-pending-cancel:hover { color: #bfdbfe; }

/* Schmaleres Modal für Payment-Step */
.pf-modal-narrow { max-width: 520px; }

/* Payment-Step: Bestell-Summary */
.pf-pay-summary {
  background: #f9fafb;
  border: 1px solid #f3f4f6;
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.pf-pay-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: 13px;
  color: #6b7280;
}
.pf-pay-summary-row strong { color: #111827; font-weight: 700; }

.pf-pay-summary-discount strong { color: #16a34a; }

.pf-pay-summary-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0 2px;
  margin-top: 6px;
  border-top: 1px solid #e5e7eb;
  font-size: 14px;
  color: #111827;
}
.pf-pay-summary-total strong { font-size: 18px; font-weight: 800; }

/* Gutschein-Eingabe */
.pf-pay-coupon {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
}
.pf-pay-coupon-input {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 13px;
  font-family: var(--font-body);
  outline: none;
  text-transform: uppercase;
  letter-spacing: .04em;
  transition: border-color var(--transition);
}
.pf-pay-coupon-input:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }

.pf-pay-coupon-btn {
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  transition: all var(--transition);
}
.pf-pay-coupon-btn:hover { background: #e5e7eb; }

.pf-pay-coupon-msg {
  font-size: 11.5px;
  font-weight: 600;
  min-height: 16px;
  margin-bottom: 14px;
}
.pf-pay-coupon-msg-ok  { color: #16a34a; }
.pf-pay-coupon-msg-err { color: #dc2626; }

/* Zahlungsmethoden */
.pf-pay-methods-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #6b7280;
  margin-bottom: 8px;
}

.pf-pay-methods {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}

.pf-pay-method {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 8px;
  border: 1.5px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  transition: all var(--transition);
  font-family: var(--font-body);
}

.pf-pay-method:hover {
  border-color: #2563eb;
  background: #eff6ff;
  transform: translateY(-1px);
}

.pf-pay-method svg { width: 18px; height: 18px; }

/* PayPal — Brand-Look */
.pf-pay-paypal { background: #ffc439; border-color: #f6b800; color: #003087; }
.pf-pay-paypal:hover { background: #ffba1c; border-color: #003087; }
.pf-pay-paypal-text {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 15px;
  font-weight: 800;
  font-style: italic;
  letter-spacing: -0.5px;
}

/* Kreditkarte — Stripe-ähnlich */
.pf-pay-card { background: #635bff; border-color: #5851e6; color: #fff; }
.pf-pay-card:hover { background: #5851e6; transform: translateY(-1px); }
.pf-pay-card svg { stroke: #fff; }

/* SEPA */
.pf-pay-sepa { background: #fff; border-color: #d1d5db; color: #1e40af; }
.pf-pay-sepa:hover { border-color: #1e40af; background: #eff6ff; }
.pf-pay-sepa-logo {
  font-family: 'Arial Black', sans-serif;
  font-weight: 900;
  font-size: 11px;
  background: #1e40af;
  color: #fff;
  padding: 2px 5px;
  border-radius: 3px;
  letter-spacing: .5px;
}

/* Trust-Badges */
.pf-pay-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #f3f4f6;
}
.pf-pay-trust-item {
  font-size: 11px;
  color: #6b7280;
  font-weight: 500;
}

/* Loading-State während simulierter Zahlung */
.pf-pay-loading {
  margin-top: 18px;
  padding: 18px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: #374151;
  font-size: 13px;
}
.pf-pay-loading p { margin: 0; }
.pf-pay-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid #e5e7eb;
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: pf-spin 0.7s linear infinite;
}
@keyframes pf-spin { to { transform: rotate(360deg); } }

/* Erfolgs-Step */
.pf-modal-success {
  text-align: center;
  padding: 36px 28px;
}
.pf-success-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: #dcfce7;
  color: #16a34a;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pf-pop-in .35s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes pf-pop-in {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}
.pf-success-icon svg { width: 32px; height: 32px; }

.pf-success-titel {
  font-size: 22px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

.pf-success-text {
  font-size: 14px;
  color: #6b7280;
  line-height: 1.55;
  margin: 0 0 24px;
}
.pf-success-text strong { color: #111827; font-weight: 700; }

.pf-success-actions {
  display: flex;
  justify-content: center;
}

.pf-modal-btn-primary {
  background: #2563eb;
  color: #fff;
  border: none;
  padding: 10px 24px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--transition);
  font-family: var(--font-body);
}
.pf-modal-btn-primary:hover { background: #1d4ed8; }

/* Mobile Anpassungen */
@media (max-width: 540px) {
  .pf-pay-methods { grid-template-columns: 1fr; }
  .pf-pay-trust { gap: 8px; }
  .pf-pay-trust-item { font-size: 10.5px; }
}

/* ============================================================
   Prorata + Multi-Step-Checkout (Round 2)
   ============================================================ */

/* Guthaben-Zeile in der Bestell-Summary */
.pf-pay-summary-credit {
  color: #6b7280;
}
.pf-pay-summary-credit strong { color: #16a34a; }
.pf-pay-summary-credit small {
  display: block;
  font-size: 10.5px;
  color: #9ca3af;
  font-weight: 500;
  margin-top: 1px;
}

/* Anbieter-Form — Container */
.pf-paypal-form,
.pf-card-form,
.pf-sepa-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pf-pay-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pf-pay-field span {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #6b7280;
}
.pf-pay-field input {
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  font-family: var(--font-body);
  outline: none;
  transition: border-color var(--transition);
  font-variant-numeric: tabular-nums;
}
.pf-pay-field input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.pf-pay-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pf-pay-hint {
  font-size: 11.5px;
  color: #9ca3af;
  margin: 4px 0 0;
}

/* PayPal-Form */
.pf-paypal-form {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 18px;
}
.pf-paypal-logo {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 26px;
  font-weight: 800;
  font-style: italic;
  letter-spacing: -0.5px;
  margin-bottom: 4px;
}
.pf-paypal-info {
  font-size: 12.5px;
  color: #6b7280;
  margin: 0 0 6px;
  line-height: 1.5;
}

/* Stripe-Karten-Brands */
.pf-card-brands {
  display: flex;
  gap: 6px;
  margin-bottom: 4px;
}
.pf-card-brand {
  font-family: 'Arial Black', sans-serif;
  font-weight: 900;
  font-size: 10px;
  background: #1f2937;
  color: #fff;
  padding: 3px 7px;
  border-radius: 3px;
  letter-spacing: .5px;
}

/* SEPA-Mandat */
.pf-pay-mandate {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 11.5px;
  color: #6b7280;
  line-height: 1.45;
  cursor: pointer;
}
.pf-pay-mandate input { margin-top: 2px; flex-shrink: 0; }

/* Brand-Buttons im Footer */
.pf-pay-confirm-paypal {
  background: #ffc439 !important;
  color: #003087 !important;
  font-weight: 800 !important;
}
.pf-pay-confirm-paypal:hover { background: #ffba1c !important; }

.pf-pay-confirm-card { background: #635bff !important; }
.pf-pay-confirm-card:hover { background: #5851e6 !important; }

.pf-pay-confirm-sepa { background: #1e40af !important; }
.pf-pay-confirm-sepa:hover { background: #1e3a8a !important; }

/* Inline-Fehler im Form-Step */
.pf-pay-error {
  margin-top: 12px;
  padding: 10px 12px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-left: 3px solid #dc2626;
  border-radius: 6px;
  color: #991b1b;
  font-size: 12.5px;
  font-weight: 600;
}

/* Processing-Step (Spinner-Modal) */
.pf-modal-processing { animation: pf-pop .2s ease; }

/* Cancel-Status */
.pf-modal-cancel { animation: pf-pop .2s ease; }

.pf-cancel-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: #fef2f2;
  color: #dc2626;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pf-cancel-icon svg { width: 32px; height: 32px; }

/* ============================================================
   PayPal — echtes Bestätigungsfenster (User-Aktion erzwingen)
   ============================================================ */

/* Lock-State auf Hauptmodal: Backdrop kann nicht mehr klicken,
   X-Button ist visuell unterdrückt. */
.pf-modal-overlay-locked {
  cursor: wait;
}
.pf-modal-overlay-locked .pf-modal-close,
.pf-modal-overlay-locked .pf-modal-btn-ghost {
  display: none !important;
}

.pf-modal-paypal-pending { animation: pf-pop .2s ease; }

/* PayPal-Bestätigungs-Overlay — sitzt ÜBER dem Pending-Modal */
.pf-paypal-window-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .65);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1400;     /* > pf-modal-overlay (1300) */
  animation: pf-fade .15s ease;
}

.pf-paypal-window {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .4);
  max-width: 440px;
  width: 100%;
  overflow: hidden;
  animation: pf-pop .25s cubic-bezier(.34, 1.56, .64, 1);
}

.pf-paypal-window-head {
  background: #f5f7fa;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e1e7ec;
}

.pf-paypal-window-logo {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 22px;
  font-weight: 800;
  font-style: italic;
  letter-spacing: -0.5px;
}

.pf-paypal-window-secure {
  font-size: 11px;
  color: #6b7280;
  font-weight: 600;
}

.pf-paypal-window-body { padding: 20px; }

.pf-paypal-window-body h3 {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 700;
  color: #142c8e;
  text-align: center;
}

.pf-paypal-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 0;
  font-size: 13px;
  color: #6b7280;
  gap: 12px;
}

.pf-paypal-row strong {
  color: #142c8e;
  font-weight: 700;
  text-align: right;
  word-break: break-word;
}

.pf-paypal-row-sub {
  padding-top: 0;
  margin-top: -4px;
}
.pf-paypal-payee {
  font-size: 11.5px;
  color: #9ca3af;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}

.pf-paypal-divider {
  height: 1px;
  background: #e1e7ec;
  margin: 12px 0;
}

.pf-paypal-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 0 4px;
  font-size: 14px;
  color: #111827;
  font-weight: 700;
}
.pf-paypal-total-row strong {
  font-size: 22px;
  font-weight: 800;
  color: #142c8e;
  font-variant-numeric: tabular-nums;
}

.pf-paypal-window-foot {
  display: flex;
  gap: 10px;
  padding: 0 20px 12px;
  flex-direction: column;
}

.pf-paypal-confirm-btn {
  background: #ffc439;
  color: #142c8e;
  border: 1px solid #f6b800;
  border-radius: 24px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 800;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  cursor: pointer;
  transition: all var(--transition);
}
.pf-paypal-confirm-btn:hover {
  background: #f0b619;
  border-color: #142c8e;
}

.pf-paypal-cancel-btn {
  background: transparent;
  color: #6b7280;
  border: 1px solid #d1d5db;
  border-radius: 24px;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  transition: all var(--transition);
}
.pf-paypal-cancel-btn:hover {
  background: #f3f4f6;
  color: #111827;
  border-color: #9ca3af;
}

.pf-paypal-window-foot-note {
  font-size: 10.5px;
  color: #9ca3af;
  text-align: center;
  padding: 8px 20px 16px;
  font-style: italic;
}

/* ============================================================
   PayPal SDK — Smart-Buttons-Container + Status
   ============================================================ */

.pf-paypal-buttons-container {
  margin-top: 14px;
  min-height: 50px;
  /* PayPal-SDK rendert hier seine eigenen Buttons.
     Wir geben nur das Layout-Frame vor. */
}

.pf-paypal-sdk-status {
  margin-top: 10px;
  font-size: 12.5px;
  font-weight: 500;
  text-align: center;
  min-height: 18px;
  padding: 6px 8px;
  border-radius: 6px;
}

.pf-paypal-sdk-loading {
  color: #6b7280;
  font-style: italic;
}

.pf-paypal-sdk-cancel {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
}

.pf-paypal-sdk-err {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.pf-pay-foot-hint {
  font-size: 11.5px;
  color: #6b7280;
  font-style: italic;
}

.user-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--accent-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.user-info { flex: 1; min-width: 0; }

.user-name {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-role { font-size: 11px; color: var(--text-on-dark-2); }

.btn-logout {
  background: none;
  border: 1px solid rgba(255,255,255,.18);
  color: var(--text-on-dark-2);
  border-radius: var(--radius-sm);
  padding: 5px 8px;
  cursor: pointer;
  font-size: 11px;
  transition: all var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-logout:hover {
  border-color: rgba(220,38,38,.6);
  color: #fca5a5;
  background: rgba(220,38,38,.1);
}

/* ============================================================
   MAIN WRAPPER
   ============================================================ */
.main-wrapper {
  margin-left: var(--sidebar-width);
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.topbar {
  height: var(--topbar-height);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 16px;
  flex-shrink: 0;
  box-shadow: var(--shadow-xs);
}

.topbar-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -.1px;
}

/* Topbar-Brand — links neben Burger; mobile via media-query unten ausgeblendet */
.topbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px 0 4px;
  border-right: 1px solid var(--border);
  margin-right: 4px;
  height: 26px;
}
.topbar-brand svg { display: block; flex-shrink: 0; }
.topbar-brand-text {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.2px;
}
.topbar-brand-accent {
  font-weight: 300;
  color: #3b82f6;
}

.topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.status-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 4px 12px;
  font-size: 12px;
  color: var(--text-muted);
}

.status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--color-success);
  box-shadow: 0 0 5px rgba(22,163,74,.4);
  animation: pulse 2.5s infinite;
}

.content-area {
  flex: 1;
  overflow-y: auto;
  padding: 26px 28px;
  background: var(--bg);
}

/* ============================================================
   VIEW-PANELS
   ============================================================ */
.view-panel { display: none; animation: fadeUp .2s ease; max-width: 1600px; margin-left: auto; margin-right: auto; }
.view-panel.active { display: block; }

.page-header { margin-bottom: 22px; }

.page-header h1 {
  font-size: 21px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.3px;
  margin-bottom: 3px;
}

.page-header p { color: var(--text-muted); font-size: 13px; }

/* ============================================================
   GLOBAL COMPONENTS
   ============================================================ */

/* KPI-Karten */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

.kpi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
}

.kpi-card:hover {
  border-color: var(--border-mid);
  box-shadow: var(--shadow-card);
  transform: translateY(-1px);
}

.kpi-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.kpi-value { font-size: 28px; font-weight: 700; line-height: 1; color: var(--text); }
.kpi-sub   { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

.kpi-card.orange .kpi-value { color: var(--accent-blue); }
.kpi-card.green  .kpi-value { color: var(--color-success); }
.kpi-card.blue   .kpi-value { color: var(--color-info); }
.kpi-card.yellow .kpi-value { color: var(--color-warning); }

/* Placeholder */
.placeholder-panel {
  background: var(--surface);
  border: 1.5px dashed var(--border-mid);
  border-radius: var(--radius);
  padding: 60px 24px;
  text-align: center;
}

.placeholder-panel .ph-icon {
  width: 48px; height: 48px;
  background: var(--surface-2);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}

.placeholder-panel h3 { font-size: 17px; font-weight: 600; color: var(--text); margin-bottom: 5px; }
.placeholder-panel p  { color: var(--text-muted); font-size: 13px; }

.badge-soon {
  display: inline-block;
  background: var(--accent-light);
  color: var(--accent-blue);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 99px;
  margin-top: 10px;
  border: 1px solid #bfdbfe;
}

/* ============================================================
   TOAST-NOTIFICATION
   ============================================================ */
.au-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--color-success);
  color: var(--text);
  padding: 12px 22px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--shadow-modal);
  z-index: 20000;
  animation: fadeUp .25s ease, fadeOut .3s ease 3.2s forwards;
  white-space: nowrap;
}

/* ============================================================
   ANIMATIONEN
   ============================================================ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .4; }
}

@keyframes fadeOut {
  from { opacity: 1; transform: translateX(-50%) translateY(0); }
  to   { opacity: 0; transform: translateX(-50%) translateY(6px); }
}

@keyframes warningPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,0); }
  50%       { box-shadow: 0 0 0 4px rgba(220,38,38,.1); }
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  :root { --sidebar-width: 60px; }

  .sidebar-header .logo-text,
  .nav-item > span,
  .nav-section-label,
  .user-info,
  .btn-logout { display: none; }

  .nav-item       { justify-content: center; padding: 10px; }
  .nav-item::before { display: none; }
  .sidebar-header { justify-content: center; padding: 16px 10px; }
  .sidebar-footer { justify-content: center; padding: 12px 10px; }
}

/* ============================================================
   GLOBALE TABELLEN-UTILS — VoltNox Pro Layout System
   ============================================================ */

/* Wrapper: max-width + zentriert — auf alle Listen anwenden */
.vn-table-outer {
  max-width: 1600px;
  margin: 0 auto;
}

/* Einheitliches Tabellen-Reset */
.vn-tbl {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

/* TH: etwas mehr Luft */
.vn-tbl th {
  padding: 12px 20px;
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

/* TD: luftiger, vertikal zentriert */
.vn-tbl td {
  padding: 16px 20px;
  vertical-align: middle;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
  color: var(--text);
}

.vn-tbl tr:last-child td { border-bottom: none; }
.vn-tbl tbody tr:hover td { background: #f1f5f9; }

/* Standardspaltenbreiten (überschreibbar per Modul) */
.col-avatar   { width: 52px;  }
.col-nr       { width: 120px; }
.col-auto     { /* nimmt den Rest */ }
.col-kunde    { /* nimmt den Rest */ }
.col-sub      { width: 22%;   }
.col-status   { width: 160px; text-align: center; }
.col-betrag   { width: 160px; text-align: right; }
.col-einheit  { width: 75px;  }
.col-bestand  { width: 190px; }
.col-preise   { width: 150px; }
.col-buchung  { width: 120px; }
.col-aktionen { width: 280px; text-align: right; }
.col-aktionen-wide { width: 280px; text-align: right; }

/* Rechtsbündig für Beträge */
.td-right  { text-align: right; }
.td-center { text-align: center; }
.th-right  { text-align: right !important; }
.th-center { text-align: center !important; }

/* Flex-Container für Aktions-Buttons — rechtsbündig, fester Block, kein Umbruch */
.td-btn-group {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  white-space: nowrap;
}

/* ============================================================
   HAMBURGER BUTTON — nur auf kleinen Bildschirmen sichtbar
   ============================================================ */
.hamburger-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 6px;
  border-radius: var(--radius-sm);
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color var(--transition), background var(--transition);
}
.hamburger-btn:hover { background: var(--surface-2); color: var(--text); }

/* ============================================================
   RESPONSIVE — Tablet ≤1024px: Slim-Sidebar (Icon only)
   ============================================================ */
@media (max-width: 1024px) {
  :root { --sidebar-width: 64px; }

  .sidebar-header {
    justify-content: center;
    padding: 16px 0;
  }
  .sidebar-header .logo-text { display: none; }

  .nav-section { padding: 6px 8px 0; }
  .nav-section-label { display: none; }

  .nav-item {
    justify-content: center;
    padding: 10px;
    gap: 0;
  }
  .nav-item span { display: none; }
  .nav-item .nav-icon { width: 20px; height: 20px; opacity: .7; }
  .nav-item.active .nav-icon,
  .nav-item:hover  .nav-icon { opacity: 1; }

  .sidebar-footer { padding: 10px 8px; justify-content: center; gap: 6px; }
  .user-info { display: none; }
  .btn-logout { padding: 6px; }

  .content-area { padding: 18px 16px; }

  /* Tabellen horizontal scrollbar auf Tablets */
  .au-list-wrapper,
  .km-list-wrapper,
  .la-list-wrapper,
  .vn-table-outer { overflow-x: auto; }
}

/* ============================================================
   RESPONSIVE — Mobile ≤768px: Sidebar versteckt + Hamburger
   ============================================================ */
@media (max-width: 768px) {
  :root { --sidebar-width: 0px; }

  /* Sidebar: off-canvas, per Toggle einblendbar */
  .sidebar {
    width: 248px !important;
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 200;
  }
  body.sidebar-open .sidebar { transform: translateX(0); }

  /* Dunkler Overlay hinter offener Sidebar */
  body.sidebar-open::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 150;
    pointer-events: auto;
  }

  /* Sidebar-Items auf Mobile wieder mit Text */
  body.sidebar-open .sidebar-header { justify-content: flex-start; padding: 20px 18px 18px; }
  body.sidebar-open .sidebar-header .logo-text { display: block; }
  body.sidebar-open .nav-section { padding: 8px 10px 0; }
  body.sidebar-open .nav-section-label { display: block; }
  body.sidebar-open .nav-item { justify-content: flex-start; padding: 9px 12px; gap: 10px; }
  body.sidebar-open .nav-item span { display: inline; }
  body.sidebar-open .sidebar-footer { padding: 14px 16px; justify-content: flex-start; gap: 10px; }
  body.sidebar-open .user-info { display: block; }

  .hamburger-btn { display: inline-flex; }
  .main-wrapper { margin-left: 0 !important; }
  .content-area { padding: 14px 12px; }
  .view-panel { max-width: none; }
  .topbar { padding: 0 14px; gap: 10px; }
  .topbar-title { font-size: 14px; }
  /* Topbar-Brand auf Mobile ausblenden — Platz für Burger + Title */
  .topbar-brand { display: none; }
  .page-header h1 { font-size: 18px; }
  .page-header { margin-bottom: 16px; }

  /* Tabellen horizontal scrollbar auf Mobile */
  .au-list-wrapper,
  .km-list-wrapper,
  .la-list-wrapper,
  .vn-table-outer { overflow-x: auto; }

  /* Tabellen-Typografie verkleinern */
  .vn-tbl th { font-size: 9.5px; padding: 10px 12px; }
  .vn-tbl td { font-size: 12.5px; padding: 12px 12px; }

  /* Touch-freundliche Aktions-Buttons */
  .au-btn-icon { width: 36px !important; height: 36px !important; }
  .km-btn-edit,
  .km-btn-delete,
  .la-btn-edit,
  .la-btn-delete { padding: 7px 14px; font-size: 12px; }
  .la-btn-minus,
  .la-btn-plus { width: 36px; height: 32px; }
  .td-btn-group { gap: 6px; }
}

/* ============================================================
   RESPONSIVE — Small Mobile ≤480px
   ============================================================ */
@media (max-width: 480px) {
  .content-area { padding: 10px 8px; }
  .page-header h1 { font-size: 16px; }
  .page-header { margin-bottom: 12px; }
  .topbar-title { font-size: 13px; }
  .vn-tbl th { font-size: 9px; padding: 8px 10px; }
  .vn-tbl td { font-size: 12px; padding: 10px 10px; }
}

/* ============================================================
   RESPONSIVE — Mobile-Fill für Dashboard/Top-Bar/Sidebar-Collapse
   Ergänzt die vorhandenen Sidebar-Regeln um Inhalts-Bereiche
   (KPI-Karten, Top-Bar, vn-table-Aktionen) die noch nicht
   responsive gemacht waren.
   ============================================================ */
@media (max-width: 768px) {
  /* Sidebar-Collapse: schon oben definiert. Hier nur Lücken: */

  /* Top-Bar: Bei sehr engen Screens darf der Titel umbrechen statt
     den Burger/Logout zu verdrängen. */
  .topbar { flex-wrap: wrap; min-height: var(--topbar-height); height: auto; padding: 8px 12px; }
  .topbar-title { font-size: 13.5px; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .topbar-right { gap: 6px; flex-shrink: 0; }

  /* Dashboard-KPI-Karten: 2-Spalten statt auto-fill — sonst werden
     auf 5"-Geräten 4 Karten extrem schmal. */
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .kpi-card { padding: 12px 14px; }
  .kpi-value { font-size: 22px; }
  .kpi-label { font-size: 10px; margin-bottom: 5px; }

  /* Page-Header: H1 + Aktions-Button stapeln */
  .page-header { display: flex; flex-direction: column; gap: 8px; }

  /* vn-table Aktions-Spalte: lass Buttons wickeln */
  .vn-tbl .td-btn-group { flex-wrap: wrap; justify-content: flex-end; }
  .col-aktionen,
  .col-aktionen-wide { width: auto; }
}

@media (max-width: 480px) {
  /* KPI-Karten auf 1 Spalte bei Mini-Screens */
  .kpi-grid { grid-template-columns: 1fr; }
  .topbar-right .btn-logout span,
  .topbar-right .user-info { display: none; }
}

/* ============================================================
   @MEDIA PRINT — Druck-Optimierung fuer das gesamte System
   Wird aktiv wenn window.print() aufgerufen wird.
   Betrifft die Haupt-App (nicht das separate Rechnungs-Fenster).
   ============================================================ */
@media print {
  /* Navigations-Elemente komplett ausblenden */
  .sidebar,
  .topbar,
  .status-pill,
  .btn-logout,
  #login-screen,
  .au-toolbar,
  .au-status-tabs,
  .au-search-bar,
  .au-backup-buttons,
  .ad-btn-export,
  .ad-btn-import,
  .ad-btn-reset,
  .km-search-bar,
  .la-search-bar,
  .la-filter-zeile,
  .pl-toolbar,
  .db-refresh-btn,
  [data-nav],
  .au-btn-status,
  .au-btn-edit,
  .au-btn-delete,
  .au-btn-print,
  .km-btn-edit,
  .km-btn-delete,
  .km-btn-neu,
  .la-btn-edit,
  .la-btn-delete,
  .la-btn-primary,
  .la-btn-warn,
  .la-buchung-gruppe { display: none !important; }

  /* Main-Wrapper fuellt die gesamte Breite */
  .main-wrapper {
    margin-left: 0 !important;
  }

  /* Content-Area: kein Overflow, kein Padding */
  .content-area {
    overflow: visible !important;
    padding: 0 !important;
  }

  /* View-Panel: kein max-width, volle Breite */
  .view-panel {
    max-width: none !important;
    display: block !important;
  }

  /* Keine Box-Shadows auf Karten */
  .au-list-wrapper,
  .km-list-wrapper,
  .la-list-wrapper,
  .db-card,
  .ad-section {
    box-shadow: none !important;
    border: 1px solid #ddd !important;
  }

  /* Seitenumbruch-Kontrolle */
  .au-row, .km-row, .la-row { page-break-inside: avoid; }

  /* Hintergrundfarben fuer Druck aktivieren */
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ============================================================
   Globale Status-Marker — Mahnstopp / Bagatell / Mahnung-ausgesetzt
   Modul-übergreifend nutzbar (rechnungen.js, mahnwesen.js,
   customer_insight.js). Gelbe Warn-Optik mit ⚠️ Icon.
   ============================================================ */

.status-mahnstopp {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 2px 9px;
  border-radius: 99px;
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #fde68a;
  white-space: nowrap;
  line-height: 1.4;
}

.status-mahnstopp::before {
  content: '⚠️';
  font-size: 11px;
}

.status-mahnstopp-rot {
  background: #fef2f2;
  color: #991b1b;
  border-color: #fecaca;
}

.status-mahnstopp-rot::before { content: '🔒'; }

/* Größere Variante für Customer Insight 360°-Akte */
.status-mahnstopp-badge {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #fde68a;
  border-left: 3px solid #d97706;
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 600;
}

.status-mahnstopp-badge::before {
  content: '⚠️';
  font-size: 14px;
  flex-shrink: 0;
}

.status-mahnstopp-badge strong { color: #78350f; font-weight: 800; }

/* ---- Bezahlt-Badge (grün + ✓) — Pendant zu .status-mahnstopp ---- */

.status-bezahlt-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 2px 9px;
  border-radius: 99px;
  background: #ecfdf5;
  color: #166534;
  border: 1px solid #86efac;
  white-space: nowrap;
  line-height: 1.4;
}

.status-bezahlt-badge::before {
  content: '✓';
  font-weight: 900;
  font-size: 12px;
  color: #16a34a;
}

/* ---- Anzahlung-Status-Badge ---- */

.status-anzahlung-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 99px;
  background: #eff6ff;
  color: #1e40af;
  border: 1px solid #bfdbfe;
  white-space: nowrap;
}

.status-anzahlung-badge::before { content: '💼'; font-size: 11px; }