/* NeXtDMS-Hub — Designsystem.

   Aufbau nach dem Vorbild von NeXtControl (web/styles.css): deutsche Variablennamen in :root,
   derselbe Satz Namen noch einmal unter `body.dark`, darauf alle Bausteine.

   ⚠ EIN einziger Hell/Dunkel-Mechanismus fuer den GANZEN Hub: `body.dark`, gemerkt in
     localStorage („theme"). NeXtControl faehrt aus historischen Gruenden zwei parallel
     (body.dark im Dashboard, html[data-theme] auf der Anmeldeseite) — und muss deshalb den
     Umschaltcode doppelt pflegen. Diesen Fehler machen wir hier nicht nach: Anmeldeseite und
     Oberflaeche benutzen dieselbe Klasse und dieselbe Funktion.

   Keine Fremd-Bibliothek, kein Bauschritt. */

:root{
  color-scheme:light;
  --bg:#eef2f8; --bg2:#e4eaf4; --karte:#ffffff; --karte2:#f6f8fd;
  --text:#1a2430; --text2:#5b6673; --rand:#e2e6ee; --rand2:#eef1f7;
  --akzent:#3A4DDB; --akzent2:#4c6ef5; --akzent-hell:#eef1fc; --akzent-text:#2b3fa8;
  --akzent-weich:rgba(76,110,245,.10); --teal:#14B8B2;
  --grad:linear-gradient(120deg,#4c6ef5,#3A4DDB,#2b3fa8);
  --grad-btn:linear-gradient(135deg,#4c6ef5,#3A4DDB);
  --warn:#b45309; --kritisch:#b91c1c; --ok:#15803d;
  --radius:12px;
  --schatten:0 1px 2px rgba(24,46,74,.05), 0 4px 16px rgba(24,46,74,.07);
  --font:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --kopf-h:58px; --seite-w:238px;
  /* Aliase fuer aeltere Bausteine (Anmeldekarte, Meldungen) */
  --panel:var(--karte); --panel2:var(--karte2); --line:var(--rand); --muted:var(--text2);
  --accent:var(--akzent); --gut:var(--ok); --schlecht:var(--kritisch);
}
body.dark{
  color-scheme:dark;
  --bg:#0e1621; --bg2:#152233; --karte:#16273a; --karte2:#122031;
  --text:#e6edf5; --text2:#9fb0c3; --rand:#294057; --rand2:#1d3147;
  --akzent:#6b83f0; --akzent2:#8B97F5; --akzent-hell:#1b2540; --akzent-text:#c7d0ff;
  --akzent-weich:rgba(76,110,245,.16); --teal:#2FD0C9;
  --schatten:0 1px 2px rgba(0,0,0,.4), 0 8px 30px rgba(0,0,0,.45);
  /* ⚠ Die Aliase MUESSEN hier neu deklariert werden. Ein `--panel:var(--karte)` in :root wird
     EINMAL aufgeloest — ohne diese Zeile behielten sie die hellen Werte, und die Anmeldekarte
     bliebe im Dunkelmodus weiss. */
  --panel:var(--karte); --panel2:var(--karte2); --line:var(--rand); --muted:var(--text2);
  --accent:var(--akzent); --gut:var(--ok); --schlecht:var(--kritisch);
}

*{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html,body{ height:100%; margin:0; }
body{ font-family:var(--font); background:var(--bg); color:var(--text);
      font-size:14.5px; line-height:1.5; -webkit-text-size-adjust:100%; }
h1,h2,h3{ margin:0; font-weight:650; }
a{ color:var(--akzent2); text-decoration:none; }
a:hover{ text-decoration:underline; }
code{ font-family:Consolas,"Courier New",monospace; font-size:12px; background:var(--karte2);
      border:1px solid var(--rand); border-radius:6px; padding:1px 6px; letter-spacing:.3px; }

/* ---------------------------------------------------------------- Raster: Kopf + Seite + Inhalt
   ⚠ min-width:0 auf JEDEM Raster- und Flex-Kind. Ohne das gilt die Vorgabe min-width:auto: das
     Feld waechst dann auf die Mindestbreite seines Inhalts, die Kopfleiste macht das Raster
     500 px breit — und die GANZE Seite laesst sich auf dem Telefon seitlich schieben. Genau
     dieser Querlauf war beim ersten Anschauen auf 375 px da. */
.app{ display:grid; grid-template-rows:var(--kopf-h) 1fr; height:100%; min-width:0; }
.kopf{ display:flex; align-items:center; gap:12px; padding:0 16px; min-width:0; overflow:hidden;
  background:var(--karte); border-bottom:3px solid var(--akzent); box-shadow:var(--schatten); z-index:20; }
.kopf .logo{ width:34px; height:34px; flex:0 0 auto; display:block; }
.kopf .logo svg{ width:100%; height:100%; display:block; }
.wortmarke{ font-size:18px; font-weight:800; letter-spacing:.2px;
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; }
.wortmarke i{ font-style:normal; }
.wortmarke .x{ -webkit-text-fill-color:var(--teal); color:var(--teal); }
.wortmarke .d{ font-weight:800; }
/* Version sitzt auf der Grundlinie der Wortmarke, nicht optisch mittig — sonst „schwebt" sie. */
.kopf .ver{ font-size:11px; color:var(--text2); align-self:center; position:relative; top:4px;
  font-variant-numeric:tabular-nums; }
.kopf .fueller{ flex:1; }
.wortmarke{ flex:0 0 auto; }
.userbtn{ display:inline-flex; align-items:center; gap:7px; padding:4px 10px;
  border:1px solid var(--rand); border-radius:999px; background:var(--karte); font-size:13px;
  max-width:38vw; min-width:0; flex:0 1 auto; overflow:hidden; }
.kopf .btn{ flex:0 0 auto; }
.userbtn #who{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rolle{ font-size:10.5px; font-weight:700; background:var(--akzent-hell); color:var(--akzent-text);
  border-radius:999px; padding:1px 7px; flex:0 0 auto; }

.body{ display:grid; grid-template-columns:1fr; overflow:hidden; min-width:0; }
@media(min-width:900px){ .body{ grid-template-columns:var(--seite-w) 1fr; } }

/* ---------------------------------------------------------------- Seitenleiste */
.seite{ background:var(--karte); border-right:1px solid var(--rand); padding:10px 9px;
  overflow:auto; display:flex; flex-direction:column; gap:2px; min-width:0; }
@media(max-width:899px){
  .seite{ flex-direction:row; flex-wrap:wrap; border-right:0; border-bottom:1px solid var(--rand);
          gap:6px; padding:8px 10px; }
  .nav-titel{ width:100%; padding:4px 2px 0; }
}
.nav-titel{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.6px;
  color:var(--text2); padding:12px 12px 4px; }
.nav a{ display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:9px;
  color:var(--text); font-weight:500; cursor:pointer; }
.nav a .ic{ width:20px; text-align:center; font-size:15px; }
.nav a:hover{ background:var(--bg2); text-decoration:none; }
.nav a.aktiv{ background:var(--akzent-hell); color:var(--akzent-text); font-weight:600;
  box-shadow:inset 3px 0 0 var(--akzent); }

/* ---------------------------------------------------------------- Inhalt + Ansichten */
.inhalt{ overflow:auto; padding:20px 24px 60px; min-width:0; }
.inhalt-innen{ max-width:1240px; margin:0 auto; min-width:0; }
@media(max-width:640px){ .inhalt{ padding:16px 13px 60px; } }
.view{ display:none; }
.view.aktiv{ display:block; animation:einblenden .18s ease; }
@keyframes einblenden{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }
.view h1{ font-size:1.45rem; margin-bottom:4px; }
.view .unter{ color:var(--text2); margin:0 0 18px; }

/* Segment-Reiter (zweite Ebene innerhalb einer Ansicht) */
.reiter{ display:inline-flex; gap:2px; padding:3px; background:var(--karte2);
  border:1px solid var(--rand); border-radius:999px; margin-bottom:14px; flex-wrap:wrap; }
.reiter button{ display:inline-flex; align-items:center; gap:6px; padding:6px 15px; border:0;
  background:transparent; color:var(--text2); font-family:inherit; font-size:13.5px;
  font-weight:600; border-radius:999px; cursor:pointer; white-space:nowrap; }
.reiter button:hover{ color:var(--text); }
.reiter button.aktiv{ background:var(--akzent); color:#fff; box-shadow:var(--schatten); }

/* ---------------------------------------------------------------- Karten und Kacheln */
.karte{ background:var(--karte); border:1px solid var(--rand); border-radius:var(--radius);
  padding:17px 19px; box-shadow:var(--schatten); margin-bottom:16px; }
.karte h2{ font-size:1.05rem; margin-bottom:6px; }
.karte h3{ font-size:.8rem; text-transform:uppercase; letter-spacing:.5px; color:var(--text2);
  margin-bottom:10px; }
.kpis{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px;
  margin-bottom:18px; }
.kpi{ background:var(--karte); border:1px solid var(--rand); border-left:3px solid var(--akzent);
  border-radius:var(--radius); padding:13px 15px; box-shadow:var(--schatten); }
.kpi .zahl{ font-size:1.6rem; font-weight:700; color:var(--akzent2);
  font-variant-numeric:tabular-nums; line-height:1.15; word-break:break-word; }
.kpi .titel{ font-size:.8rem; color:var(--text2); }
.kpi.ok{ border-left-color:var(--ok); } .kpi.ok .zahl{ color:var(--ok); }
.kpi.warn{ border-left-color:var(--warn); } .kpi.warn .zahl{ color:var(--warn); }
.kpi.schlecht{ border-left-color:var(--kritisch); } .kpi.schlecht .zahl{ color:var(--kritisch); }

/* ---------------------------------------------------------------- Knoepfe */
.btn{ border:1px solid var(--rand); background:var(--karte); color:var(--text); border-radius:10px;
  padding:8px 13px; font-size:13.5px; font-weight:550; font-family:inherit; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap; text-decoration:none; }
.btn:hover{ background:var(--bg2); text-decoration:none; }
.btn:active{ transform:translateY(1px); }
.btn:disabled{ opacity:.5; cursor:default; }
.btn.primaer{ background:var(--grad-btn); color:#fff; border:0;
  box-shadow:0 6px 18px rgba(59,91,219,.28); }
.btn.primaer:hover{ filter:brightness(1.06); }
.btn.akzent{ background:var(--akzent-hell); color:var(--akzent-text); border-color:transparent; }
.btn.gefahr{ background:var(--kritisch); color:#fff; border-color:var(--kritisch); }
.btn.gefahr:hover{ filter:brightness(1.08); background:var(--kritisch); }
.btn.tiny{ padding:5px 9px; font-size:12px; border-radius:8px; }
.btn.ghost{ background:transparent; }
.btn.on{ background:var(--akzent-hell); color:var(--akzent-text); border-color:var(--akzent2); }
.knopfreihe{ display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; }

/* Fahnen-Umschalter: Inline-SVG statt Flaggen-Emoji (Windows zeichnet 🇩🇪/🇬🇧 nur als Buchstaben) */
.langflag{ padding:5px 7px !important; display:inline-flex; align-items:center; justify-content:center; }
.langflag svg{ display:block; width:20px; height:14px; box-shadow:0 0 0 1px rgba(0,0,0,.12);
  border-radius:2px; }

/* ---------------------------------------------------------------- Felder */
label.feld{ display:block; margin:10px 0; }
label.feld span{ display:block; font-size:12.5px; color:var(--text2); margin-bottom:4px; }
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],
select,textarea{
  width:100%; padding:9px 12px; border-radius:10px; border:1px solid var(--rand);
  background:var(--karte2); color:var(--text); font-size:15px; font-family:inherit; }
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--akzent);
  box-shadow:0 0 0 3px var(--akzent-weich); }
input[type=checkbox]{ width:auto; }
.reihe{ display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; }
.reihe .feld{ flex:1; min-width:150px; margin:6px 0; }
.haken{ display:flex; align-items:center; gap:9px; margin:12px 0; font-size:14px; cursor:pointer; }
.haken input{ width:18px; height:18px; flex:0 0 auto; accent-color:var(--akzent); }

/* ---------------------------------------------------------------- Listen und Zeilen */
.liste{ display:flex; flex-direction:column; gap:10px; }
.zeile{ display:flex; align-items:center; gap:11px; padding:11px 14px; border:1px solid var(--rand);
  border-radius:var(--radius); background:var(--karte2); }
.zeile:hover{ border-color:var(--akzent); }
.zeile .meta{ flex:1; min-width:0; }
.zeile .meta .name{ font-weight:650; overflow-wrap:anywhere; }
.zeile .meta .sub{ font-size:12.5px; color:var(--text2); overflow-wrap:anywhere; }
.zeile .rechts{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; justify-content:flex-end; }
@media(max-width:640px){
  .zeile{ flex-wrap:wrap; }
  .zeile .rechts{ width:100%; justify-content:flex-start; }
}
.punkt{ width:10px; height:10px; border-radius:50%; background:var(--ok); flex:0 0 auto;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 22%,transparent); }
.punkt.aus{ background:var(--text2); box-shadow:none; }
.leer{ text-align:center; color:var(--text2); padding:24px 10px; background:var(--karte);
  border:1px dashed var(--rand); border-radius:var(--radius); }
.hint{ font-size:12.5px; color:var(--text2); }
.tag{ font-size:.72rem; font-weight:700; background:var(--akzent-hell); color:var(--akzent-text);
  border-radius:999px; padding:2px 8px; white-space:nowrap; }
.tag.gruen{ background:color-mix(in srgb,var(--ok) 16%,transparent); color:var(--ok); }
.tag.gelb{ background:color-mix(in srgb,var(--warn) 18%,transparent); color:var(--warn); }
.tag.rot{ background:color-mix(in srgb,var(--kritisch) 15%,transparent); color:var(--kritisch); }
.tag.grau{ background:var(--rand2); color:var(--text2); }
.kopierbtn{ border:1px solid var(--rand); background:var(--karte2); color:var(--text);
  border-radius:6px; padding:0 6px; margin-left:4px; font-size:11.5px; line-height:1.7;
  cursor:pointer; vertical-align:middle; font-family:inherit; }
.kopierbtn:hover{ background:var(--bg2); }

/* Aufklappbare Datensatz-Karte (je Kunde, je Lizenz) */
details.karteklapp{ border:1px solid var(--rand); border-radius:var(--radius); background:var(--karte);
  box-shadow:var(--schatten); margin-bottom:10px; overflow:hidden; }
details.karteklapp > summary{ list-style:none; cursor:pointer; padding:12px 15px;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
details.karteklapp > summary::-webkit-details-marker{ display:none; }
details.karteklapp > summary:hover{ background:var(--karte2); }
details.karteklapp[open] > summary{ border-bottom:1px solid var(--rand); background:var(--karte2); }
.klappinhalt{ padding:14px 15px; }
.summarytitel{ font-weight:650; flex:1; min-width:0; overflow-wrap:anywhere; }

/* Einklappbare Einstellungs-Sektion */
.setsec{ border:1px solid var(--rand); border-radius:12px; margin-bottom:12px; overflow:hidden;
  background:var(--karte); box-shadow:var(--schatten); }
.setsechead{ display:flex; align-items:center; gap:9px; padding:13px 17px; background:var(--karte2);
  cursor:pointer; user-select:none; font-weight:600; font-size:15px; }
.setsechead .chev{ color:var(--akzent); font-size:12px; transition:transform .15s; }
.setsec.zu .setsecbody{ display:none; }
.setsec.zu .chev{ transform:rotate(-90deg); }
.setsecbody{ padding:15px 17px; }

/* Wertepaare (Zustandsanzeigen) */
.paare{ display:grid; grid-template-columns:1fr; gap:0; }
.paar{ display:flex; justify-content:space-between; gap:14px; padding:6px 0; font-size:13px;
  border-bottom:1px solid var(--rand2); }
.paar:last-child{ border-bottom:0; }
.paar span{ color:var(--text2); }
.paar b{ font-variant-numeric:tabular-nums; overflow-wrap:anywhere; text-align:right; font-weight:600; }

/* Banner */
.banner{ border-radius:var(--radius); padding:11px 15px; margin-bottom:14px; font-size:13.5px;
  background:color-mix(in srgb,var(--warn) 13%,var(--karte));
  border:1px solid color-mix(in srgb,var(--warn) 40%,transparent); }
.banner.info{ background:var(--akzent-hell); border-color:transparent; color:var(--akzent-text); }
.banner.schlecht{ background:color-mix(in srgb,var(--kritisch) 12%,var(--karte));
  border-color:color-mix(in srgb,var(--kritisch) 40%,transparent); }

/* Fortschritt (Paket hochladen) */
.balken{ height:9px; background:var(--rand2); border-radius:999px; overflow:hidden; margin-top:8px; }
.balken i{ display:block; height:100%; width:0; background:var(--akzent); transition:width .2s; }

/* Kurzmeldung */
.toast{ position:fixed; bottom:22px; left:50%; transform:translateX(-50%); background:#1a2430;
  color:#fff; padding:11px 18px; border-radius:10px; font-size:13.5px; box-shadow:var(--schatten);
  z-index:9999; opacity:0; transition:opacity .2s; max-width:90vw; text-align:center; }
.toast.show{ opacity:1; }

/* Abmelde-Countdown (rotes Band oben) */
.idleband{ position:fixed; top:0; left:0; right:0; z-index:99999; background:#c0202c; color:#fff;
  text-align:center; padding:9px 12px; font-size:14px; box-shadow:0 2px 10px rgba(0,0,0,.35);
  display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; }

/* ---------------------------------------------------------------- Anmeldeseite */
body.mitte{ display:flex; align-items:center; justify-content:center; min-height:100%; padding:20px;
  background:var(--bg); }
.anmeldekarte{ background:var(--karte); border:1px solid var(--rand); border-radius:16px;
  padding:26px; width:min(430px,100%); box-shadow:0 6px 34px rgba(24,46,74,.10); }
.marke{ display:flex; align-items:center; gap:11px; margin-bottom:16px; }
.marke .logo{ width:38px; height:38px; flex:0 0 auto; }
.marke .logo svg{ width:100%; height:100%; display:block; }
.marke small{ display:block; color:var(--text2); font-size:12px; }
.anmeldekarte h1{ font-size:20px; margin:0 0 6px; }
.meldung{ margin-top:14px; padding:10px 12px; border-radius:9px; font-size:13.5px;
  background:var(--karte2); border:1px solid var(--rand); }
.meldung.fehler{ border-color:var(--kritisch); color:var(--kritisch); }
.meldung.gut{ border-color:var(--ok); color:var(--ok); }
.fuss{ margin:20px 0 0; font-size:12px; color:var(--text2); text-align:center; line-height:1.6; }
.kopfzeile-klein{ display:flex; gap:6px; justify-content:flex-end; margin-bottom:-6px; }
.trenner{ display:flex; align-items:center; gap:10px; margin:18px 0 4px; color:var(--text2);
  font-size:12px; }
.trenner::before,.trenner::after{ content:""; flex:1; height:1px; background:var(--rand); }

/* Auf schmalen Schirmen die Beschriftungen der Kopfknoepfe einsparen (Zeichen bleibt) */
@media(max-width:760px){
  .kopf{ gap:8px; padding:0 10px; }
  .nurgross{ display:none; }
  .kopf .ver{ display:none; }
  .userbtn{ max-width:44vw; }
}
/* Auf dem Telefon weicht auch die Wortmarke — das Zeichen allein traegt die Marke, und die
   Kopfleiste muss in EINE Zeile passen, sonst rutscht sie unter das 58-px-Raster. */
@media(max-width:520px){
  .kopf .wortmarke{ display:none; }
  .kopf{ gap:6px; }
}