/* Ordo – Designsystem.
   Aufbau wie bei Certa: NUR Tokens verwenden, keine Hex-Werte im Code, sonst
   bricht der Dark Mode. Eigener Akzent (Teal) statt Certas Violett - Ordo soll
   als eigenes Produkt erkennbar sein, aber wie ein Geschwister wirken. */

:root {
  --c-brand:      #0f766e;
  --c-brand-soft: #e6f4f2;
  --c-brand-dark: #0b5952;
  --c-bg:         #f6f7f9;
  --c-surface:    #ffffff;
  --c-field:      #ffffff;
  --c-line:       #e3e6ea;
  --c-text:       #191c22;
  --c-muted:      #5c6270;
  --c-ok:         #0f7a3d;
  --c-ok-soft:    #e6f5ec;
  --c-warn:       #a35a00;
  --c-warn-soft:  #fdf1de;
  --c-danger:     #b3261e;
  --c-danger-soft:#fdeceb;
  --radius:       12px;
  --radius-sm:    8px;
  --shadow:       0 1px 2px rgba(16,24,40,.05), 0 4px 16px rgba(16,24,40,.06);
  --shadow-lg:    0 8px 32px rgba(16,24,40,.12);
  interpolate-size: allow-keywords;
}

:root[data-theme="dark"] {
  --c-brand:      #2dd4bf;
  --c-brand-soft: #10312e;
  --c-brand-dark: #5eead4;
  --c-bg:         #0f1216;
  --c-surface:    #171b21;
  --c-field:      #1d222a;
  --c-line:       #2a303a;
  --c-text:       #e8eaee;
  --c-muted:      #9aa2b1;
  --c-ok:         #4ade80;
  --c-ok-soft:    #10291a;
  --c-warn:       #fbbf24;
  --c-warn-soft:  #2e2410;
  --c-danger:     #f87171;
  --c-danger-soft:#2e1616;
  --shadow:       0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.35);
  --shadow-lg:    0 8px 32px rgba(0,0,0,.5);
}

/* Bewusst KEIN @media (prefers-color-scheme: dark):
   Ordo startet immer hell, egal was das Betriebssystem sagt. Dunkel gibt es nur,
   wenn der Nutzer es selbst waehlt - dann setzt theme.js data-theme="dark" und
   merkt sich das (localStorage). So sieht die Demo bei jedem gleich aus, auch
   wenn der Rechner des Gegenuebers auf Dunkelmodus steht. */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--c-bg); color: var(--c-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px; line-height: 1.55;
}
a { color: var(--c-brand); }

/* ---------------------------------------------------------------- Topbar */
.topbar {
  background: var(--c-surface); border-bottom: 1px solid var(--c-line);
  position: sticky; top: 0; z-index: 40;
}
.topbar-in {
  max-width: 1360px; margin: 0 auto; padding: 0 20px;
  display: flex; align-items: center; gap: 18px; min-height: 60px;
}
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--c-text); }
.brand .logo { width: 26px; height: 26px; }
.brand-word { font-weight: 750; font-size: 18px; letter-spacing: -.4px; }
.brand-claim {
  font-size: 11px; color: var(--c-muted); border-left: 1px solid var(--c-line);
  padding-left: 9px; margin-left: 3px;
}
.topbar nav { display: flex; gap: 2px; margin-left: 12px; }
.topbar nav a {
  padding: 7px 12px; border-radius: var(--radius-sm); text-decoration: none;
  color: var(--c-muted); font-size: 14px; font-weight: 550; position: relative;
}
.topbar nav a:hover { background: var(--c-bg); color: var(--c-text); }
.topbar nav a.active { background: var(--c-brand-soft); color: var(--c-brand); }
.badge-dot {
  display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 5px;
  background: var(--c-warn); color: #fff; border-radius: 9px;
  font-size: 11px; font-weight: 700; text-align: center; line-height: 18px;
}
:root[data-theme="dark"] .badge-dot { color: #1a1400; }
.spacer { flex: 1; }
.who { display: flex; flex-direction: column; line-height: 1.25; text-align: right; }
.who strong { font-size: 13px; }
.who small { font-size: 11px; color: var(--c-muted); }
.theme-toggle {
  width: 34px; height: 34px; border: 1px solid var(--c-line); background: var(--c-field);
  border-radius: var(--radius-sm); cursor: pointer; display: grid; place-items: center;
}
.theme-ico { width: 15px; height: 15px; border-radius: 50%; background: var(--c-text); box-shadow: inset -4px -3px 0 0 var(--c-field); }

.demo-band {
  background: var(--c-warn-soft); color: var(--c-warn); text-align: center;
  padding: 6px 16px; font-size: 12.5px; border-bottom: 1px solid var(--c-line);
}

.wrap { max-width: 1360px; margin: 0 auto; padding: 26px 20px 64px; }

/* ---------------------------------------------------------------- Typo */
.page-title { font-size: 25px; font-weight: 700; margin: 0 0 5px; letter-spacing: -.5px; }
.page-sub { color: var(--c-muted); margin: 0 0 22px; max-width: 76ch; }
.section-h {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px;
  color: var(--c-muted); margin: 30px 0 12px;
}
.muted { color: var(--c-muted); }
.footer-note { text-align: center; color: var(--c-muted); font-size: 12px; margin-top: 46px; }

/* ---------------------------------------------------------------- Karten */
.card {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow);
}
.grid { display: grid; gap: 16px; }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; } }

/* Kennzahlen */
.kpi { text-align: left; }
.kpi-label { font-size: 12px; color: var(--c-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.kpi-num { font-size: 30px; font-weight: 750; letter-spacing: -1px; margin: 3px 0; }
.kpi-sub { font-size: 12.5px; color: var(--c-muted); }
.kpi-num.is-ok { color: var(--c-ok); }
.kpi-num.is-warn { color: var(--c-warn); }
.kpi-num.is-danger { color: var(--c-danger); }

/* ---------------------------------------------------------------- Tabellen */
.table-wrap { overflow-x: auto; border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-surface); }
table.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
table.tbl th {
  text-align: left; padding: 10px 12px; background: var(--c-bg);
  border-bottom: 1px solid var(--c-line); font-size: 12px; color: var(--c-muted);
  font-weight: 650; text-transform: uppercase; letter-spacing: .4px; white-space: nowrap;
}
table.tbl td { padding: 11px 12px; border-bottom: 1px solid var(--c-line); vertical-align: middle; }
table.tbl tr:last-child td { border-bottom: none; }
table.tbl tbody tr:hover { background: var(--c-bg); }
table.tbl td.num { text-align: right; font-variant-numeric: tabular-nums; }
.ts { font-variant-numeric: tabular-nums; color: var(--c-muted); font-size: 13px; white-space: nowrap; }
code, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; }

/* ---------------------------------------------------------------- Abzeichen */
.badge {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 650; white-space: nowrap;
}
.b-ok { background: var(--c-ok-soft); color: var(--c-ok); }
.b-warn { background: var(--c-warn-soft); color: var(--c-warn); }
.b-danger { background: var(--c-danger-soft); color: var(--c-danger); }
.b-neutral { background: var(--c-bg); color: var(--c-muted); border: 1px solid var(--c-line); }
.b-brand { background: var(--c-brand-soft); color: var(--c-brand); }

.chip {
  display: inline-block; padding: 1px 7px; border-radius: 5px; background: var(--c-bg);
  border: 1px solid var(--c-line); font-size: 11px; color: var(--c-muted);
}

/* Konfidenz */
.konf { display: inline-block; width: 54px; height: 6px; background: var(--c-line); border-radius: 3px; overflow: hidden; vertical-align: middle; }
.konf-bar { display: block; height: 100%; border-radius: 3px; }
.k-ok { background: var(--c-ok); } .k-warn { background: var(--c-warn); } .k-danger { background: var(--c-danger); }
.konf-txt { font-size: 12px; color: var(--c-muted); margin-left: 7px; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 15px; border-radius: var(--radius-sm); border: 1px solid transparent;
  font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none;
  font-family: inherit; line-height: 1.3;
}
.btn-primary { background: var(--c-brand); color: #fff; }
:root[data-theme="dark"] .btn-primary { color: #06201d; }
.btn-primary:hover { background: var(--c-brand-dark); }
.btn-ghost { background: var(--c-field); border-color: var(--c-line); color: var(--c-text); }
.btn-ghost:hover { background: var(--c-bg); }
.btn-sm { padding: 5px 11px; font-size: 13px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------------------------------------------------------------- Meldungen */
.alert { padding: 11px 15px; border-radius: var(--radius-sm); margin-bottom: 16px; font-size: 14px; }
.alert-ok { background: var(--c-ok-soft); color: var(--c-ok); }
.alert-error { background: var(--c-danger-soft); color: var(--c-danger); }
.alert-info { background: var(--c-brand-soft); color: var(--c-brand); }
.alert-warn { background: var(--c-warn-soft); color: var(--c-warn); }

/* ---------------------------------------------------------------- Formulare */
.form-row { margin-bottom: 13px; }
.form-row label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.form-row input, .form-row select, .form-row textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--c-line);
  border-radius: var(--radius-sm); background: var(--c-field); color: var(--c-text);
  font-family: inherit; font-size: 14px;
}
.form-row input:focus, .form-row select:focus {
  outline: 2px solid var(--c-brand); outline-offset: -1px; border-color: var(--c-brand);
}
.form-hint { font-size: 12px; color: var(--c-muted); margin-top: 4px; }

/* ---------------------------------------------------------------- Login */
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card {
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 16px;
  padding: 32px; width: 100%; max-width: 420px; box-shadow: var(--shadow-lg);
}
.login-brand { display: flex; align-items: center; gap: 9px; justify-content: center; margin-bottom: 6px; }
.login-brand .logo { width: 30px; height: 30px; }
.login-word { font-size: 21px; font-weight: 750; letter-spacing: -.5px; }
.login-card h1 { font-size: 19px; margin: 12px 0 4px; text-align: center; }
.login-card .sub { color: var(--c-muted); font-size: 13.5px; text-align: center; margin: 0 0 20px; }
.trenner { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--c-muted); font-size: 12px; }
.trenner::before, .trenner::after { content: ""; flex: 1; height: 1px; background: var(--c-line); }

/* ---------------------------------------------------------------- Dokumentansicht */
.dok-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 18px; align-items: start; }
@media (max-width: 1100px) { .dok-split { grid-template-columns: 1fr; } }
.pdf-rahmen {
  border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden;
  background: var(--c-surface); box-shadow: var(--shadow); position: sticky; top: 78px;
}
.pdf-rahmen embed, .pdf-rahmen iframe { width: 100%; height: 78vh; display: block; border: 0; }

table.felder { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.felder th {
  text-align: left; padding: 6px 12px 6px 0; color: var(--c-muted);
  font-weight: 600; width: 42%; vertical-align: top; white-space: nowrap;
}
table.felder td { padding: 6px 0; vertical-align: top; }
table.felder tr + tr th, table.felder tr + tr td { border-top: 1px solid var(--c-line); }

/* Vorher/Nachher */
.vgl { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--c-line);
       border-radius: var(--radius); overflow: hidden; }
@media (max-width: 900px) { .vgl { grid-template-columns: 1fr; } }
.vgl-spalte { padding: 18px; background: var(--c-surface); }
.vgl-spalte + .vgl-spalte { border-left: 1px solid var(--c-line); }
@media (max-width: 900px) { .vgl-spalte + .vgl-spalte { border-left: none; border-top: 1px solid var(--c-line); } }
.vgl-kopf { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; margin-bottom: 10px; }
.vgl-alt .vgl-kopf { color: var(--c-muted); }
.vgl-neu { background: var(--c-brand-soft); }
.vgl-neu .vgl-kopf { color: var(--c-brand); }
.vgl-zeile { display: flex; gap: 8px; padding: 5px 0; font-size: 13.5px; align-items: baseline; }
.vgl-zeile b { min-width: 108px; font-weight: 600; color: var(--c-muted); font-size: 12px; }

/* Kandidaten in der Queue */
.kand { border: 1px solid var(--c-line); border-radius: var(--radius-sm); padding: 10px 12px;
        margin-bottom: 8px; display: flex; align-items: center; gap: 12px; background: var(--c-field); }
.kand:hover { border-color: var(--c-brand); }
.kand-info { flex: 1; font-size: 13.5px; }
.kand-info small { display: block; color: var(--c-muted); font-size: 12px; }

.empty { text-align: center; padding: 40px 20px; color: var(--c-muted); }
.empty-gross { font-size: 34px; margin-bottom: 8px; }

/* ---------------------------------------------------------------- Postfach anbinden */
/* Die "nur lesen"-Option ist die wichtigste Entscheidung auf der Seite -
   deshalb bekommt sie eine eigene Box statt einer Zeile im Kleingedruckten. */
.nurlesend {
  display: flex; gap: 10px; align-items: flex-start; padding: 11px 13px;
  border: 1px solid var(--c-line); border-radius: var(--radius-sm);
  background: var(--c-ok-soft); margin: 4px 0 14px; cursor: pointer;
}
.nurlesend input { width: auto; margin-top: 3px; flex: none; }
.nurlesend strong { display: block; font-size: 13.5px; color: var(--c-ok); }
.nurlesend small { display: block; font-size: 12.5px; color: var(--c-muted); margin-top: 2px; }

/* Servereinstellungen: da soll niemand ran müssen, also zugeklappt. */
details.mehr { margin-bottom: 14px; }
details.mehr > summary {
  cursor: pointer; font-size: 13px; color: var(--c-muted); padding: 6px 0;
  list-style: none; user-select: none;
}
details.mehr > summary::-webkit-details-marker { display: none; }
details.mehr > summary::before { content: "▸ "; }
details.mehr[open] > summary::before { content: "▾ "; }
details.mehr > summary:hover { color: var(--c-text); }

/* Anleitung */
.anleitung { font-size: 14px; }
.anleitung ul.liste, .anleitung ol.liste { margin: 8px 0; padding-left: 20px; }
.anleitung ul.liste li, .anleitung ol.liste li { margin-bottom: 5px; }
details.tut {
  border: 1px solid var(--c-line); border-radius: var(--radius-sm);
  padding: 10px 13px; margin-bottom: 8px; background: var(--c-field);
}
details.tut > summary {
  cursor: pointer; font-weight: 600; font-size: 13.5px; list-style: none; user-select: none;
}
details.tut > summary::-webkit-details-marker { display: none; }
details.tut > summary::before { content: "▸ "; color: var(--c-brand); }
details.tut[open] > summary::before { content: "▾ "; }
details.tut[open] > summary { margin-bottom: 6px; }
details.tut code { background: var(--c-bg); padding: 1px 5px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}