/* LAS Lizenzserver – im Design von LAS Instandhaltung (Farben aus app/templates/_theme.html, Formen „kantig“) */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/static/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/static/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root{
  --brand-1:#023972; --brand-2:#5b84b1; --brand-3:#7a797c;
  --bg:#f3f5f8; --surface:#ffffff; --surface-2:#eef2f6; --surface-hover:#f5f8fb;
  --border:#d6dde6; --border-strong:#b5c1cf;
  --text:#1a2330; --text-secondary:#3f4a58; --text-muted:#5d6673; --text-faint:#8a93a0;
  --primary:#023972; --primary-hover:#012b57; --on-primary:#ffffff; --primary-soft:#e3ebf4; --primary-text:#023972;
  --danger:#b3261e; --danger-soft:#fbe5e3; --danger-soft-border:#f0b4ae;
  --warning:#b25600; --warning-soft:#fdf0dd; --warning-soft-border:#f3cf9c;
  --success:#2b7a3d; --success-soft:#e2f1e5; --success-soft-border:#b4d9bc;
  --info:#2f5f94; --info-soft:#e3ebf4;
  --shellbar-bg:#ffffff; --shellbar-h:3.25rem; --ctl-h:2.25rem;
  --font:"Inter","Segoe UI",system-ui,sans-serif; --mono:Consolas,"SFMono-Regular",monospace;
  color-scheme: light;
}
:root[data-theme="dark"]{
  --bg:#111418; --surface:#1a1e24; --surface-2:#22272e; --surface-hover:#20252c;
  --border:#313842; --border-strong:#46505c;
  --text:#ebeef2; --text-secondary:#c3c9d1; --text-muted:#a0a8b2; --text-faint:#78818c;
  --primary:#8fb2da; --primary-hover:#a9c5e6; --on-primary:#0b1a2c; --primary-soft:#233246; --primary-text:#a9c5e6;
  --danger:#ff8a80; --danger-soft:#45201e; --danger-soft-border:#6b2e2c;
  --warning:#f5a356; --warning-soft:#40300f; --warning-soft-border:#6b5423;
  --success:#73cc87; --success-soft:#1d3a25; --success-soft-border:#2c5238;
  --info:#8fb4d6; --info-soft:#233246;
  --shellbar-bg:#161a1f;
  color-scheme: dark;
}

*{ box-sizing:border-box; border-radius:0; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--bg); color:var(--text); font:15px/1.5 var(--font); -webkit-font-smoothing:antialiased; }
a{ color:var(--primary-text); }
h1,h2,h3{ margin:0; color:var(--text); letter-spacing:0; line-height:1.25; }
h1{ font-size:1.75rem; font-weight:600; }
h2{ font-size:1rem; font-weight:600; }
small, .dim{ color:var(--text-muted); }
:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }

/* ── Shell Bar ─────────────────────────────────────────────────────────── */
.shellbar{ position:sticky; top:0; z-index:100; height:var(--shellbar-h); display:flex; align-items:center; gap:1rem; padding:0 1rem;
  background:var(--shellbar-bg); border-bottom:1px solid var(--border); }
.shellbar::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; pointer-events:none; opacity:.9;
  background:linear-gradient(90deg, var(--brand-1) 0 33%, var(--brand-2) 33% 55%, var(--brand-3) 55% 100%); }
:root[data-theme="dark"] .shellbar::after{ background:linear-gradient(90deg, var(--primary) 0 33%, var(--brand-2) 33% 55%, var(--brand-3) 55% 100%); }
.shellbar .marke{ display:flex; align-items:center; gap:.75rem; color:var(--text); text-decoration:none; font-weight:600; font-size:1rem; white-space:nowrap; }
.shellbar .marke img{ height:1.875rem; width:auto; display:block; }
:root[data-theme="dark"] .shellbar .marke img{ background:#fff; padding:2px 4px; }
.shellbar .rechts{ margin-left:auto; display:flex; align-items:center; gap:.5rem; }
.shellbar .wer{ color:var(--text-muted); font-weight:500; font-size:.9rem; margin-right:.25rem; }
.icon-btn{ display:inline-grid; place-items:center; width:2.25rem; height:2.25rem; padding:0; border:0; background:transparent; color:var(--text); cursor:pointer; }
.icon-btn:hover{ background:var(--surface-hover); color:var(--primary-text); }
.icon-btn svg{ width:1.125rem; height:1.125rem; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.nur-dunkel{ display:none; }
:root[data-theme="dark"] .nur-dunkel{ display:block; }
:root[data-theme="dark"] .nur-hell{ display:none; }

/* ── Seitenkopf und Reiter ─────────────────────────────────────────────── */
.reiter{ display:flex; gap:.25rem; padding:0 1.25rem; background:var(--surface); border-bottom:1px solid var(--border); overflow-x:auto; }
.reiter a{ padding:.7rem .75rem; color:var(--text-secondary); text-decoration:none; font-weight:500; white-space:nowrap; border-bottom:3px solid transparent; margin-bottom:-1px; }
.reiter a:hover{ color:var(--primary-text); }
.reiter a.aktiv{ color:var(--primary-text); font-weight:600; border-bottom-color:var(--primary); }
main{ padding:1.5rem 1.75rem 3.5rem; }
.kopf{ display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; flex-wrap:wrap; margin-bottom:1.25rem; }
.kopf p{ margin:.35rem 0 0; color:var(--text-muted); }
.brotkrumen{ font-size:.82rem; color:var(--text-muted); margin-bottom:.4rem; }
.brotkrumen a{ color:var(--text-muted); }

/* ── Kacheln / Panels ──────────────────────────────────────────────────── */
.karte{ background:var(--surface); border:1px solid var(--border); padding:1.1rem 1.25rem 1.25rem; }
.karte + .karte, .raster + .karte, .karte + .raster, .raster + .raster{ margin-top:1rem; }
.raster > .karte{ margin-top:0; }
.karte > h2{ display:flex; align-items:center; margin:-.1rem 0 1rem; padding-bottom:.75rem; border-bottom:1px solid var(--border); font-size:1.02rem; }
/* schräger Balken vor Abschnittsüberschriften wie im Programm */
.karte > h2::before{ content:""; display:inline-block; width:1.1rem; height:.3rem; margin-right:.6rem; background:var(--primary);
  clip-path:polygon(0 0, 100% 0, calc(100% - .3rem) 100%, 0 100%); }
.raster{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); align-items:start; }
/* nebeneinander gleich breit und gleich hoch, damit nichts versetzt steht */
.raster.zwei{ grid-template-columns:1fr 1fr; align-items:stretch; }

/* Kennzahlen wie im Programm: farbiger Rand links, große leichte Zahl */
.zahlen{ display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:1rem; margin-bottom:1rem; }
.zahl{ background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--primary); padding:1rem 1.25rem; }
.zahl:nth-child(2){ border-left-color:var(--success); }
.zahl:nth-child(3){ border-left-color:var(--warning); }
.zahl:nth-child(4){ border-left-color:var(--brand-2); }
.zahl:nth-child(5){ border-left-color:var(--brand-3); }
.zahl b{ display:block; font-size:2.6rem; font-weight:300; letter-spacing:-.02em; line-height:1.1; color:var(--text); font-variant-numeric:tabular-nums; }
.zahl span{ font-size:.75rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--text-muted); }

/* Hinweise */
.hinweis{ padding:.8rem 1rem; margin-bottom:1rem; border-left:3px solid; background:var(--surface); }
.hinweis.ok{ border-color:var(--success); background:var(--success-soft); }
.hinweis.fehler{ border-color:var(--danger); background:var(--danger-soft); }
.hinweis.warn{ border-color:var(--warning); background:var(--warning-soft); }
.schluessel{ font-family:var(--mono); font-size:1.3rem; letter-spacing:.06em; background:var(--surface-2); border:1px solid var(--border); padding:.7rem 1rem; display:inline-block; user-select:all; }
code, .mono{ font-family:var(--mono); font-size:.88em; }

/* Tabellen */
table{ width:100%; border-collapse:collapse; font-size:.92rem; }
th, td{ text-align:left; padding:.65rem .75rem; border-bottom:1px solid var(--border); vertical-align:top; }
th{ font-size:.72rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); background:var(--surface-2); }
tr:hover td{ background:var(--surface-hover); }
/* ganze Zeile klickbar */
tr[data-href]{ cursor:pointer; }
tr[data-href]:hover td{ background:var(--primary-soft); }
tr[data-href]:focus-visible{ outline:2px solid var(--primary); outline-offset:-2px; }
/* Zeilen bleiben einzeilig: lange Texte werden gekürzt, ganzer Text im Tooltip */
td{ white-space:nowrap; }
td.lang{ width:100%; max-width:0; }
td.lang .kuerzen{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* breite Tabellen scrollen in ihrer Kachel statt die Seite zu sprengen */
.karte{ overflow-x:auto; }
.raster > .karte{ min-width:0; }
td a{ font-weight:600; text-decoration:none; }
td a:hover{ text-decoration:underline; }
.tabelle{ overflow-x:auto; background:var(--surface); border:1px solid var(--border); }
.karte table{ margin:0 -.25rem; width:calc(100% + .5rem); }
.blaettern{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; margin-top:.75rem; font-size:.88rem; }
.mehr{ margin:.75rem 0 0; font-size:.88rem; }
.leer-zeile{ white-space:normal;  color:var(--text-muted); text-align:center; padding:1.6rem; font-style:italic; }

/* Status-Marken */
.marke-klein{ display:inline-block; padding:.12rem .55rem; font-size:.75rem; font-weight:600; white-space:nowrap; border:1px solid transparent; }
.gruen{ background:var(--success-soft); color:var(--success); border-color:var(--success-soft-border); }
.gelb{ background:var(--warning-soft); color:var(--warning); border-color:var(--warning-soft-border); }
.rot{ background:var(--danger-soft); color:var(--danger); border-color:var(--danger-soft-border); }
.grau{ background:var(--surface-2); color:var(--text-muted); border-color:var(--border); }
.modul{ display:inline-block; padding:.1rem .5rem; margin:.1rem .3rem .1rem 0; background:var(--primary-soft); color:var(--primary-text); font-size:.76rem; font-weight:600; }

dl.daten{ display:grid; grid-template-columns:auto 1fr; gap:.5rem 1.25rem; margin:0; }
dl.daten dt{ color:var(--text-muted); font-size:.88rem; }
dl.daten dd{ margin:0; }

/* Formulare */
form.inline{ display:inline; }
.feld{ display:flex; flex-direction:column; gap:.3rem; margin-bottom:.9rem; }
.feld label, .feld > span{ font-size:.82rem; font-weight:600; color:var(--text-secondary); }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], input[type=search], select, textarea{
  font:inherit; color:var(--text); background:var(--surface); border:1px solid var(--border-strong); min-height:var(--ctl-h); padding:.4rem .65rem; width:100%; }
textarea{ min-height:90px; resize:vertical; }
input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 1px var(--primary); }
input[type=checkbox]{ accent-color:var(--primary); }
input[type=file]{ font:inherit; color:var(--text-secondary); }
.felder{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:0 1rem; }
.haken{ display:flex; gap:.5rem; align-items:flex-start; margin:.35rem 0; font-size:.94rem; }
.haken input{ margin-top:.25rem; }

/* Knöpfe wie im Programm */
.knopf, button.knopf{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; min-height:var(--ctl-h); padding:0 1rem;
  font:600 .9rem/1.2 var(--font); text-decoration:none; cursor:pointer;
  background:var(--primary); color:var(--on-primary); border:1px solid var(--primary); }
.knopf:hover{ background:var(--primary-hover); border-color:var(--primary-hover); }
.knopf.hell{ background:var(--surface); color:var(--primary-text); border-color:var(--border-strong); }
.knopf.hell:hover{ background:var(--surface-hover); border-color:var(--primary); }
.knopf.gefahr{ background:var(--danger); color:#fff; border-color:var(--danger); }
:root[data-theme="dark"] .knopf.gefahr{ color:#2a0b08; }
.knopf.gefahr:hover{ filter:brightness(1.1); }
.knopf.klein{ min-height:calc(var(--ctl-h) - .375rem); padding:0 .75rem; font-size:.8125rem; }
.aktionen{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.abstand{ margin-top:1rem; }

/* Filter wie die Status-Reiter im Programm */
.filter{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1rem; align-items:center; }
.filter a{ min-height:calc(var(--ctl-h) - .375rem); display:inline-flex; align-items:center; padding:0 .75rem; border:1px solid var(--border-strong);
  background:var(--surface); text-decoration:none; font-size:.85rem; font-weight:600; color:var(--primary-text); }
.filter a:hover{ border-color:var(--primary); }
.filter a.aktiv{ background:var(--primary); color:var(--on-primary); border-color:var(--primary); }
.filter form{ margin-left:auto; display:flex; gap:.4rem; }
.filter input{ width:260px; }
details.aufklapp summary{ cursor:pointer; font-weight:600; color:var(--primary-text); padding:.35rem 0; }
details.aufklapp[open] summary{ margin-bottom:.75rem; }

/* Anmeldung wie im Programm */
body.leer{ display:grid; place-items:center; min-height:100vh; padding:20px;
  background:linear-gradient(135deg, var(--bg) 0 50%, var(--surface-2) 50% 100%); }
.anmeldung{ width:min(400px,100%); background:var(--surface); border:1px solid var(--border); border-top:3px solid var(--primary);
  padding:1.75rem 1.6rem; box-shadow:0 20px 50px rgb(20 35 60 / .12); }
.anmeldung .logo{ display:block; height:42px; width:auto; margin:0 auto .5rem; }
.anmeldung .untertitel{ text-align:center; color:var(--text-muted); font-weight:600; font-size:.9rem; margin:0 0 1.4rem; }
.anmeldung h1{ font-size:1.35rem; margin-bottom:.25rem; }
.anmeldung p{ color:var(--text-muted); margin:0 0 1.1rem; font-size:.92rem; }
.anmeldung .knopf{ width:100%; min-height:2.6rem; }
.fehlerseite{ width:min(560px,100%); background:var(--surface); border:1px solid var(--border); border-top:3px solid var(--warning); padding:1.5rem 1.6rem; }
.fehlerseite h1{ font-size:1.2rem; color:var(--warning); }
.fehlerseite p{ color:var(--text-secondary); }

@media (max-width: 900px){
  .raster.zwei{ grid-template-columns:1fr; }
  .reiter{ padding:0 .5rem; }
  main{ padding:1rem 1rem 3rem; }
  .filter form{ margin-left:0; width:100%; }
  .filter input{ width:100%; }
  .shellbar .wer{ display:none; }
  .zahl b{ font-size:2rem; }
}

/* Benachrichtigungen (Fehler & Vorschläge aus den Programmen) */
.zaehler{ display:inline-block; min-width:1.35rem; padding:0 .4rem; margin-left:.3rem; border-radius:999px; background:var(--danger);
  color:#fff; font-size:.72rem; font-weight:700; line-height:1.35rem; text-align:center; }
tr.ungelesen td{ font-weight:600; }
.meldung-text{ white-space:pre-line; line-height:1.55; margin:0 0 .75rem; }
.meldung-bild{ display:block; max-width:100%; max-height:520px; border:1px solid var(--border); }
.filter select{ width:auto; }

/* Abrechnung */
.zahl-sp{ text-align:right; font-variant-numeric:tabular-nums; }
th.zahl-sp{ text-align:right; }
a.zahl.link{ display:block; text-decoration:none; color:inherit; }
a.zahl.link:hover{ background:var(--surface-hover); border-color:var(--primary); }
.zahl.alarm{ border-left-color:var(--danger) !important; }
.zahl.alarm b{ color:var(--danger); }
.erklaerung{ margin:-.25rem 0 1rem; color:var(--text-muted); font-size:.9rem; max-width:62rem; }
table.positionen input{ min-height:2rem; padding:.25rem .45rem; }
table.positionen td:first-child{ width:52%; }
table.positionen .zahl-ein{ text-align:right; width:7rem; }
table.positionen input[name=einheit]{ width:7rem; }
table.positionen tfoot td{ border-bottom:0; padding:.35rem .4rem; }
.inline-feld{ display:inline-flex; align-items:center; gap:.4rem; font-size:.85rem; font-weight:600; color:var(--text-secondary); }
.inline-feld input{ width:auto; }
.trenner{ flex:1; }
td .umbruch{ white-space:normal; }
td small{ color:var(--text-muted); }

/* Zahnrad-Menü (Konto, Versand, Protokoll) */
.menue{ position:relative; }
.menue > summary{ list-style:none; }
.menue > summary::-webkit-details-marker{ display:none; }
.menue[open] > summary{ background:var(--surface-hover); color:var(--primary-text); }
.menue-liste{ position:absolute; right:0; top:calc(100% + .35rem); min-width:17rem; z-index:120; background:var(--surface);
  border:1px solid var(--border); box-shadow:0 8px 24px rgba(0,0,0,.12); padding:.3rem 0; }
.menue-liste a{ display:block; padding:.55rem .9rem; color:var(--text); text-decoration:none; font-size:.92rem; }
.menue-liste a:hover{ background:var(--surface-hover); color:var(--primary-text); }

/* Übersicht: Zu erledigen */
.aufgaben{ list-style:none; margin:0; padding:0; }
.aufgaben li{ display:flex; align-items:center; gap:.75rem; padding:.6rem .1rem; border-bottom:1px solid var(--border); }
.aufgaben li:last-child{ border-bottom:0; }
.aufgaben .punkt{ width:.6rem; height:.6rem; border-radius:50%; flex:none; background:var(--info); }
.aufgaben .punkt.rot{ background:var(--danger); }
.aufgaben .punkt.gelb{ background:var(--warning); }
.aufgaben .was{ flex:1; }
.aufgaben .was small{ display:block; color:var(--text-muted); }
.aufgaben a.knopf{ white-space:nowrap; }
.alles-gut{ display:flex; align-items:center; gap:.6rem; color:var(--success); font-weight:600; margin:0; }

/* Unter-Reiter (Lizenzen / Demo-Anfragen) */
.unterreiter{ display:flex; gap:.25rem; margin:0 0 1rem; border-bottom:1px solid var(--border); }
.unterreiter a{ padding:.45rem .8rem; color:var(--text-secondary); text-decoration:none; font-weight:500; border-bottom:2px solid transparent; margin-bottom:-1px; }
.unterreiter a.aktiv{ color:var(--primary-text); font-weight:600; border-bottom-color:var(--primary); }

/* Formular-Abschnitte */
fieldset.abschnitt{ border:1px solid var(--border); border-left:3px solid var(--primary); padding:.9rem 1.1rem .3rem; margin:0 0 1.1rem; min-width:0; }
fieldset.abschnitt > legend{ padding:0 .4rem; font-weight:600; color:var(--primary-text); }
[hidden]{ display:none !important; }
.karte + .zahlen{ margin-top:1rem; }