/* EDEN ERP — Design-Tokens & Komponenten (Business-SaaS, kompakt, themefähig) */
:root{
  --bg:#f6f7f9; --card:#ffffff; --ink:#1b1f24; --muted:#5b6472; --faint:#6b7280;
  --line:#e4e7ec; --line-strong:#d3d8df;
  --accent:#2f5fd0; --accent-soft:#e9eefb;
  --ok:#1a7f4b; --ok-soft:#e4f3ea; --warn:#a4720d; --warn-soft:#faf1dc;
  --crit:#b3403a; --crit-soft:#f9e9e8;
  --radius:8px; --pad:14px;
  --header-h:47px;                      /* Höhe der App-Bar — Bezug für sticky-Elemente */
  --pop:0 6px 24px rgba(16,24,40,.13), 0 1px 3px rgba(16,24,40,.08);
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#14171b; --card:#1c2026; --ink:#e8eaee; --muted:#a3abb8; --faint:#8b95a5;
    --line:#2c323b; --line-strong:#3a414c; --accent:#7b9bec; --accent-soft:#22304d;
    --ok:#5cc08a; --ok-soft:#1c3328; --warn:#d9a94a; --warn-soft:#382d14;
    --crit:#e08880; --crit-soft:#3d2220;
    --pop:0 8px 28px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.4); }
}
*{box-sizing:border-box}
/* muss vor den Komponenten stehen: eigene display-Regeln (z. B. .menu{display:flex})
   würden das hidden-Attribut sonst aushebeln */
[hidden]{display:none !important}
html,body{margin:0}
body{background:var(--bg); color:var(--ink);
  font:400 13px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden}
.num{font-variant-numeric:tabular-nums}

/* Sichtbarer Fokus für Tastaturbedienung (Maus-Klicks bleiben unmarkiert) */
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}

/* Sprungmarke: erste Tab-Station, sonst unsichtbar */
.skiplink{position:absolute; left:8px; top:-40px; z-index:30; background:var(--accent); color:#fff;
  padding:6px 12px; border-radius:0 0 6px 6px; font-size:12px; text-decoration:none}
.skiplink:focus{top:0}

/* ---------- App-Bar & Navigation ----------
   Einzeilig und ohne Seitwärts-Scrollen: die Reiter, die nicht mehr passen,
   wandern per JS in das Menü „Mehr“ (siehe layoutNav() in app.js). */
.appbar{background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20}
.appbar-inner{max-width:1280px; margin:0 auto; padding:0 16px; display:flex; align-items:stretch; gap:16px}
.brand{font-weight:700; font-size:14.5px; letter-spacing:.02em; display:flex; align-items:center;
  gap:7px; padding:12px 0; white-space:nowrap; text-decoration:none; color:var(--ink); flex:none}
.brand span{color:var(--accent)}
.brand em{font-style:normal; font-weight:400; font-size:11.5px; color:var(--faint); margin-left:2px}
@media (max-width:1180px){ .brand em{display:none} }

.tabs{display:flex; gap:2px; flex:1 1 auto; min-width:0; overflow:hidden}
.tabs a{color:var(--muted); text-decoration:none; font-weight:500; font-size:13px;
  padding:14px 11px 12px; border-bottom:2px solid transparent; white-space:nowrap; flex:none}
.tabs a:hover{color:var(--ink)}
.tabs a.active{color:var(--accent); border-bottom-color:var(--accent); font-weight:600}
.tabs a.off{display:none}                /* durch Rechte oder Platzmangel ausgeblendet */

/* Grundsätzlich nicht schrumpfbar — sonst schluckt der Knopf den Platzmangel und
   layoutNav() hält die Zeile für passend, obwohl seine Beschriftung abgeschnitten
   ist. Nur wenn selbst der Modulname allein nicht mehr passt, setzt layoutNav die
   Klasse „tight" und der Name wird mit Auslassungspunkten gekürzt. */
.tabmore{position:relative; display:flex; align-items:stretch; flex:none; min-width:0}
.tabmore.tight{flex:0 1 auto}
.tabmore-btn{border:0; background:transparent; color:var(--muted); font:inherit; font-size:13px;
  font-weight:500; padding:14px 10px 12px; cursor:pointer; display:flex; align-items:center; gap:5px;
  border-bottom:2px solid transparent; white-space:nowrap; max-width:100%; min-width:0}
.tabmore-btn:hover{color:var(--ink)}
.tabmore-btn .chev{font-size:9px; opacity:.7; flex:none}
.tabmore-btn.holds-active{color:var(--accent); border-bottom-color:var(--accent); font-weight:600}
.tabmore-btn .lbl-cur{overflow:hidden; text-overflow:ellipsis}

.appbar-right{margin-left:auto; display:flex; align-items:center; gap:10px; font-size:12px;
  color:var(--muted); white-space:nowrap; flex:none}

/* Datenqualitäts-Chip (auf jeder Seite sichtbar, führt in das Modul) */
.qchip{display:inline-flex; align-items:center; gap:6px; text-decoration:none; border-radius:99px;
  border:1px solid var(--line); padding:2px 9px; font-size:11.5px; font-weight:600; color:var(--muted)}
.qchip:hover{border-color:var(--line-strong); color:var(--ink)}
.qchip i{width:7px; height:7px; border-radius:50%; background:var(--ok); flex:none}
.qchip.warn i{background:var(--warn)}
.qchip .qn{font-variant-numeric:tabular-nums}

/* Nutzermenü: Initialen-Knopf + Popover (spart Platz für die Reiter) */
.avatar{width:28px; height:28px; border-radius:50%; border:1px solid var(--line);
  background:var(--accent-soft); color:var(--accent); font:650 11px/1 inherit; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; letter-spacing:.03em}
.avatar:hover{border-color:var(--accent)}
.menu{position:absolute; top:calc(100% + 2px); background:var(--card); border:1px solid var(--line);
  border-radius:8px; box-shadow:var(--pop); padding:5px; min-width:190px; z-index:40;
  display:flex; flex-direction:column; gap:1px}
.menu.right{right:0} .menu.left{left:0}
.menu a, .menu button{display:flex; align-items:center; gap:8px; text-align:left; text-decoration:none;
  color:var(--ink); background:transparent; border:0; font:inherit; font-size:12.5px;
  padding:6px 9px; border-radius:6px; cursor:pointer; white-space:nowrap}
.menu a:hover, .menu button:hover{background:var(--bg)}
.menu a.active{color:var(--accent); font-weight:600; background:var(--accent-soft)}
.menu .mhead{padding:6px 9px 8px; border-bottom:1px solid var(--line); margin-bottom:3px;
  display:flex; flex-direction:column; gap:1px}
.menu .mhead b{font-size:12.5px} .menu .mhead span{font-size:11px; color:var(--faint)}
.menu hr{border:0; border-top:1px solid var(--line); margin:3px 0}
.usermenu{position:relative; display:flex; align-items:center}

.view{max-width:1280px; margin:0 auto; padding:20px 20px 72px}
.loading{color:var(--faint); padding:40px 0; text-align:center}
h2.section{font-size:12px; font-weight:650; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:24px 0 10px}
h2.section:first-child{margin-top:0}
.pagehead{display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 16px; margin:0 0 14px}
.pagehead h1{font-size:17px; font-weight:650; margin:0}
.pagehead .sub{color:var(--faint); font-size:12px}

/* ---------- Kacheln ----------
   grid-auto-rows:1fr hält alle Kacheln einer Reihe gleich hoch, auch wenn eine
   davon ein zweizeiliges Label oder eine längere Unterzeile trägt. Labels werden
   umgebrochen statt abgeschnitten — eine Kennzahl, deren Name man erraten muss,
   ist keine Kennzahl. */
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(186px,1fr)); gap:10px; grid-auto-rows:1fr}
.tile{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:11px 13px; min-width:0; display:flex; flex-direction:column}
.tile .lbl{font-size:11px; color:var(--muted); display:flex; justify-content:space-between;
  align-items:flex-start; gap:6px; min-height:2.5em}
.tile .lbl .lbl-t{white-space:normal; line-height:1.25; hyphens:auto}
.tile .val{font-size:20px; font-weight:650; margin-top:3px; letter-spacing:-.01em}
.tile .sub{font-size:11px; color:var(--faint); margin-top:2px; display:flex; gap:6px;
  align-items:center; flex-wrap:wrap; row-gap:2px; min-width:0}
/* Statustext in einer Kachel darf umbrechen — auf dem Telefon ist eine Kachel
   schmaler als „Rezeptur/Buchung an Kasse prüfen“ */
.tile .sub .pill{white-space:normal; line-height:1.35}

.delta{font-size:10.5px; font-weight:650; padding:1px 6px; border-radius:99px; white-space:nowrap}
.delta.up{background:var(--ok-soft); color:var(--ok)}
.delta.down{background:var(--crit-soft); color:var(--crit)}
.delta.flat{background:var(--accent-soft); color:var(--accent)}
.delta.na{background:transparent; color:var(--faint); font-weight:500; padding-left:0}

.badge{font:600 9px/1 ui-monospace,Menlo,monospace; letter-spacing:.05em; padding:2px 5px; border-radius:4px;
  background:var(--accent-soft); color:var(--accent); display:inline-flex; align-items:center; gap:4px; cursor:default; flex:none}
.badge .dot{width:5px; height:5px; border-radius:50%; background:var(--ok)}
.badge.calc{background:var(--warn-soft); color:var(--warn)}
.badge.calc .dot{background:var(--warn)}
.badge.man{background:var(--crit-soft); color:var(--crit)}
.badge.man .dot{background:var(--crit)}

/* ---------- Karten & Tabellen ---------- */
/* align-items:start — sonst zieht die höhere Spalte die Nachbarkarte auf ihre Höhe
   und hinterlässt in ihr eine große Leerfläche (z. B. Monatsverlauf neben Top-Filmen). */
.grid2{display:grid; grid-template-columns:2fr 1fr; gap:12px; align-items:start}
.grid11{display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:start}
.grid2 > *, .grid11 > *{min-width:0}
@media (max-width:920px){ .grid2,.grid11{grid-template-columns:1fr} }
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.card .chead{padding:9px 13px; border-bottom:1px solid var(--line); font-weight:600; font-size:12.5px;
  display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap}
.card .cfoot{padding:7px 13px; border-top:1px solid var(--line); font-size:11px; color:var(--faint)}
.card .ctools{padding:8px 13px; border-bottom:1px solid var(--line); display:flex; gap:8px;
  align-items:center; flex-wrap:wrap}
.tablewrap{overflow-x:auto; max-height:520px; overflow-y:auto}
table{border-collapse:separate; border-spacing:0; width:100%; font-size:12px}
th{font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--faint); font-weight:600;
  text-align:left; padding:7px 12px; border-bottom:1px solid var(--line); white-space:nowrap;
  position:sticky; top:0; background:var(--card); z-index:2}
td{padding:5.5px 12px; border-bottom:1px solid var(--line); white-space:nowrap}
tbody tr:last-child td{border-bottom:none}
td.r, th.r{text-align:right}
td.wrap{white-space:normal; line-height:1.45; min-width:220px}
tbody tr:hover td{background:color-mix(in srgb, var(--accent-soft) 34%, transparent)}
/* Summenzeile: bleibt beim Scrollen der Tabelle am unteren Rand stehen */
tfoot td{position:sticky; bottom:0; background:var(--card); font-weight:650;
  border-top:1px solid var(--line-strong); border-bottom:none; z-index:2}
tfoot tr:hover td{background:var(--card)}
.muted{color:var(--muted)} .faint{color:var(--faint)}
.neg{color:var(--crit)} .pos{color:var(--ok)}
.pill{font-size:10px; font-weight:600; padding:1.5px 7px; border-radius:99px; white-space:nowrap}
.pill.ok{background:var(--ok-soft); color:var(--ok)}
.pill.warn{background:var(--warn-soft); color:var(--warn)}
.pill.info{background:var(--accent-soft); color:var(--accent)}
.pill.neutral{background:var(--line); color:var(--muted)}

/* ---------- Zeitraum-Steuerung ----------
   Klebt unter der App-Bar: bei 400 Tagen in der Tabelle bleiben Zeitraumwahl und
   Blätterpfeile erreichbar, ohne nach oben zu scrollen. */
.period{display:flex; flex-wrap:wrap; align-items:center; gap:8px; background:var(--card);
  border:1px solid var(--line); border-radius:var(--radius); padding:8px 10px; margin-bottom:14px;
  position:sticky; top:calc(var(--header-h) + 8px); z-index:9; box-shadow:0 1px 2px rgba(16,24,40,.04)}
.seg{display:flex; background:var(--bg); border:1px solid var(--line); border-radius:7px;
  padding:2px; gap:2px; flex-wrap:wrap}
.seg button{border:0; background:transparent; color:var(--muted); font:inherit; font-size:12px;
  font-weight:500; padding:4px 10px; border-radius:5px; cursor:pointer; white-space:nowrap}
.seg button:hover{color:var(--ink)}
.seg button.active{background:var(--card); color:var(--ink); font-weight:600; box-shadow:0 1px 2px rgba(0,0,0,.08)}
.period .navbtn{border:1px solid var(--line); background:var(--card); color:var(--muted); border-radius:6px;
  width:26px; height:26px; cursor:pointer; font-size:13px; line-height:1}
.period .navbtn:hover{color:var(--ink); border-color:var(--line-strong)}
.period input[type=date]{border:1px solid var(--line); background:var(--card); color:var(--ink);
  border-radius:6px; padding:3px 6px; font:inherit; font-size:12px}
.period .plabel{font-weight:600; font-size:12.5px; margin:0 4px}
.period .coverage{margin-left:auto; font-size:11px; color:var(--faint)}

/* ---------- Diagramme ----------
   Balkenhöhen werden in % gesetzt (siehe trendChart), damit das Diagramm mit der
   Karte wächst statt auf einer Pixelhöhe zu kleben. */
.bars{display:flex; align-items:flex-end; gap:2px; height:76px; padding:10px 13px 2px}
.bars .b{flex:1; background:var(--accent); opacity:.7; border-radius:2px 2px 0 0; min-width:2px; position:relative}
.bars .b:hover{opacity:1}
.bars .b.cur{opacity:.45; background:repeating-linear-gradient(135deg,
  var(--accent) 0 5px, color-mix(in srgb, var(--accent) 55%, transparent) 5px 10px)}
.bars .b .tip{display:none; position:absolute; bottom:100%; left:50%; transform:translateX(-50%);
  background:var(--ink); color:var(--bg); font-size:10px; padding:3px 7px; border-radius:4px; white-space:nowrap; margin-bottom:4px; z-index:3}
.bars .b:hover .tip{display:block}
.legend{display:flex; flex-wrap:wrap; gap:4px 12px; padding:4px 13px 10px; font-size:10.5px; color:var(--faint)}
.legend i{display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:4px; vertical-align:-1px}

/* Monatsverlauf: höhere Balken, Vorjahresmarke, Monatsachse */
.bars.tall{height:190px; gap:4px; overflow:visible}
@media (max-width:920px){ .bars.tall{height:140px} }
.bars .b .yoymark{position:absolute; left:-1px; right:-1px; height:2px; background:var(--warn);
  border-radius:1px; pointer-events:none}
.xaxis{display:flex; gap:4px; padding:3px 13px 0; font-size:9.5px; color:var(--faint)}
.xaxis span{flex:1; min-width:0; text-align:center; overflow:hidden; white-space:nowrap}
.seg.small{padding:1px; gap:1px}
.seg.small button{font-size:11px; padding:3px 7px}
.delta em{font-style:normal; font-weight:500; opacity:.7}
.delta.na em{display:none}

/* Wochentagsprofil */
.minibar{background:var(--line); border-radius:99px; height:6px; width:110px; overflow:hidden}
.minibar i{display:block; height:100%; background:var(--accent); opacity:.65; border-radius:99px}

/* ---------- P&L ---------- */
.pnl-wrap{overflow:auto; max-height:calc(100vh - 250px)}
.pnl-wrap table{font-size:12px}
.pnl-wrap th:first-child, .pnl-wrap td:first-child{position:sticky; left:0; background:var(--card); z-index:3;
  min-width:250px; max-width:330px; white-space:normal; border-right:1px solid var(--line)}
.pnl-wrap th:first-child{z-index:4}
.pnl-wrap td{padding:4.5px 10px}
tr.pnl-bold td{font-weight:650; border-top:1px solid var(--line-strong); background:color-mix(in srgb, var(--accent-soft) 22%, var(--card))}
tr.pnl-bold td:first-child{background:color-mix(in srgb, var(--accent-soft) 22%, var(--card))}
td.ind1{padding-left:26px !important} td.ind2{padding-left:40px !important; color:var(--muted)}
.hint{background:var(--warn-soft); color:var(--warn); border-radius:6px; padding:7px 12px; font-size:12px; margin:10px 0}
.note{background:var(--accent-soft); color:var(--accent); border-radius:6px; padding:7px 12px; font-size:12px; margin:10px 0}
a{color:var(--accent)}

/* ---------- Ergänzungen Django-Port: Login, Nutzermenü, Import ---------- */
.authwrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px}
.authcard{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:26px 28px; width:360px; max-width:100%}
.authcard h1{font-size:16px; margin:0 0 2px}
.authcard .sub{color:var(--faint); font-size:12px; margin-bottom:16px}
.field{margin-bottom:12px}
.field label{display:block; font-size:11px; color:var(--muted); margin-bottom:4px}
.field input{width:100%; border:1px solid var(--line); background:var(--bg); color:var(--ink);
  border-radius:6px; padding:7px 9px; font:inherit; font-size:13px}
.field input:focus{outline:none; border-color:var(--accent)}
.btn{border:0; background:var(--accent); color:#fff; font:inherit; font-size:12.5px; font-weight:600;
  padding:7px 14px; border-radius:6px; cursor:pointer}
.btn:hover:not(:disabled){filter:brightness(1.08)}
.btn:disabled{opacity:.5; cursor:not-allowed}
.btn.secondary{background:var(--bg); color:var(--muted); border:1px solid var(--line)}
.autherr{background:var(--crit-soft); color:var(--crit); border-radius:6px; padding:7px 10px;
  font-size:12px; margin-bottom:12px; display:none}
/* Passwort ein-/ausblenden im Anmeldeformular */
.pwfield{position:relative}
.pwfield input{padding-right:64px}
.pwfield .pwtoggle{position:absolute; right:4px; bottom:4px; border:0; background:transparent;
  color:var(--muted); font:inherit; font-size:11px; font-weight:600; padding:4px 7px;
  border-radius:5px; cursor:pointer}
.pwfield .pwtoggle:hover{color:var(--ink); background:var(--bg)}
/* ---------- Import: Ablagefläche, Dateiliste, Fortschritt ---------- */
.importbox{display:flex; align-items:center; gap:10px; padding:14px; flex-wrap:wrap}
.dropzone{margin:14px; border:1.5px dashed var(--line-strong); border-radius:9px; background:var(--bg);
  padding:26px 20px; text-align:center; cursor:pointer; transition:border-color .12s, background .12s}
.dropzone:hover{border-color:var(--accent)}
.dropzone.over{border-color:var(--accent); background:var(--accent-soft)}
.dropzone .dz-ico{font-size:19px; line-height:1; margin-bottom:7px; color:var(--muted)}
.dropzone .dz-main{font-size:13px; font-weight:600}
.dropzone .dz-main u{color:var(--accent); text-decoration:none; border-bottom:1px solid currentColor}
.dropzone .dz-sub{font-size:11.5px; color:var(--faint); margin-top:3px}
.filelist{margin:0 14px 4px; display:flex; flex-direction:column; gap:1px}
.filerow{display:flex; align-items:center; gap:9px; font-size:12px; padding:5px 8px; border-radius:6px}
.filerow:hover{background:var(--bg)}
.filerow .fn{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.filerow .fs{color:var(--faint); font-size:11px; margin-left:auto; flex:none; font-variant-numeric:tabular-nums}
.filerow .fx{border:0; background:transparent; color:var(--faint); font:inherit; font-size:15px;
  line-height:1; padding:0 4px; cursor:pointer; flex:none}
.filerow .fx:hover{color:var(--crit)}
.progress{height:5px; border-radius:99px; background:var(--line); overflow:hidden; margin:0 14px 10px}
.progress i{display:block; height:100%; background:var(--accent); border-radius:99px; transition:width .15s}

/* ---------- Ladezustand & Fehlerzustand ---------- */
.skel{display:flex; flex-direction:column; gap:12px}
.skel .sk{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); position:relative;
  overflow:hidden}
.skel .sk::after{content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--line) 60%, transparent), transparent);
  animation:shimmer 1.25s infinite}
@keyframes shimmer{ from{transform:translateX(-100%)} to{transform:translateX(100%)} }
@media (prefers-reduced-motion: reduce){ .skel .sk::after{animation:none} }
.skel .sk-head{height:22px; width:220px; border:0; background:var(--line); border-radius:6px}
.skel .sk-tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(186px,1fr)); gap:10px}
.skel .sk-tile{height:78px}
.skel .sk-card{height:240px}
.errbox{background:var(--card); border:1px solid var(--line); border-left:3px solid var(--crit);
  border-radius:var(--radius); padding:16px 18px; display:flex; flex-direction:column;
  align-items:flex-start; gap:10px}
.errbox b{font-size:13px} .errbox .msg{color:var(--muted); font-size:12px}

/* ---------- Dialog (Passwort ändern) & Kurzmeldung ---------- */
.modal{position:fixed; inset:0; z-index:100; background:rgba(0,0,0,.42);
  display:flex; align-items:center; justify-content:center; padding:20px}
.modal .box{background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:22px 24px; width:380px; max-width:100%; box-shadow:0 12px 34px rgba(0,0,0,.22)}
.modal .box h2{font-size:15px; font-weight:650; margin:0 0 16px}
.toast{position:fixed; bottom:22px; left:50%; transform:translateX(-50%); z-index:101;
  background:var(--ok-soft); color:var(--ok); border:1px solid var(--ok);
  border-radius:99px; padding:7px 16px; font-size:12.5px; font-weight:600}

/* ---------- Modul „Wissen" (Handbuch) ---------- */
.wiki{display:grid; grid-template-columns:236px minmax(0,1fr); gap:20px; align-items:start}
@media (max-width:900px){ .wiki{grid-template-columns:1fr} }

.wiki-nav{position:sticky; top:calc(var(--header-h) + 12px); background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:10px; max-height:calc(100vh - var(--header-h) - 40px); overflow-y:auto}
@media (max-width:900px){ .wiki-nav{position:static; max-height:none} }
.wiki-nav input[type=search]{width:100%; border:1px solid var(--line); background:var(--bg);
  color:var(--ink); border-radius:6px; padding:6px 8px; font:inherit; font-size:12px; margin-bottom:8px}
.wiki-nav input[type=search]:focus{outline:none; border-color:var(--accent)}
.wiki-nav nav{display:flex; flex-direction:column; gap:1px}
.wiki-ch{display:flex; gap:8px; align-items:baseline; text-decoration:none; color:var(--muted);
  font-size:12.5px; font-weight:550; padding:5px 8px; border-radius:6px}
.wiki-ch .no{color:var(--faint); font-size:10.5px; font-variant-numeric:tabular-nums; min-width:9px}
.wiki-ch:hover{background:var(--bg); color:var(--ink)}
.wiki-ch.active{background:var(--accent-soft); color:var(--accent); font-weight:650}
.wiki-ch.active .no{color:var(--accent)}
.wiki-subs{display:flex; flex-direction:column; margin:2px 0 6px 17px;
  border-left:1px solid var(--line); padding-left:8px}
.wiki-subs a{text-decoration:none; color:var(--muted); font-size:11.5px; padding:3px 6px; border-radius:5px}
.wiki-subs a:hover{color:var(--ink); background:var(--bg)}
.wiki-subs a.active{color:var(--accent); font-weight:600}

.wiki-doc{min-width:0; max-width:860px}
.wiki-sec{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 18px 16px; margin-bottom:12px; scroll-margin-top:calc(var(--header-h) + 14px)}
.wiki-sec h3{font-size:14px; font-weight:650; margin:0 0 8px; display:flex; align-items:baseline; gap:7px}
.wiki-sec h3 .anchor{color:var(--line-strong); text-decoration:none; font-weight:400; font-size:12px}
.wiki-sec h3 .anchor:hover{color:var(--accent)}
.wiki-sec h4{font-size:12px; font-weight:650; letter-spacing:.03em; color:var(--muted);
  margin:16px 0 6px; text-transform:uppercase}
.wiki-sec p{margin:0 0 9px; line-height:1.62; color:var(--ink)}
.wiki-sec ul, .wiki-sec ol{margin:0 0 10px; padding-left:19px}
.wiki-sec li{margin-bottom:5px; line-height:1.58}
.wiki-sec code{font:600 11.5px/1.4 ui-monospace,Menlo,monospace; background:var(--bg);
  border:1px solid var(--line); border-radius:4px; padding:1px 5px; white-space:nowrap}
.wiki-ui{font-weight:600; color:var(--ink); background:var(--bg); border:1px solid var(--line);
  border-radius:4px; padding:0 5px; font-size:11.5px; white-space:nowrap}
.wiki-steps{counter-reset:s; list-style:none; padding-left:0}
.wiki-steps li{counter-increment:s; position:relative; padding-left:26px; margin-bottom:7px}
.wiki-steps li::before{content:counter(s); position:absolute; left:0; top:1px; width:18px; height:18px;
  border-radius:50%; background:var(--accent-soft); color:var(--accent);
  font:650 10.5px/18px ui-monospace,Menlo,monospace; text-align:center}
.wiki-def{margin:0 0 10px}
.wiki-def dt{font-weight:650; font-size:12.5px; margin-top:9px}
.wiki-def dd{margin:1px 0 0; padding-left:0; color:var(--muted); line-height:1.58}
.wiki-table{overflow-x:auto; border:1px solid var(--line); border-radius:6px; margin:0 0 11px}
.wiki-table table{font-size:12px}
.wiki-table th{background:var(--bg); position:static}
.wiki-table td{white-space:normal; vertical-align:top; line-height:1.5}
.wiki-table td.k{font-weight:600; white-space:normal; min-width:120px}
.wiki-note, .wiki-warn, .wiki-ok{border-radius:6px; padding:8px 12px; font-size:12px;
  line-height:1.55; margin:0 0 11px; border:1px solid transparent}
.wiki-note{background:var(--accent-soft); color:var(--ink); border-color:color-mix(in srgb, var(--accent) 22%, transparent)}
.wiki-warn{background:var(--warn-soft); color:var(--ink); border-color:color-mix(in srgb, var(--warn) 30%, transparent)}
.wiki-ok{background:var(--ok-soft); color:var(--ink); border-color:color-mix(in srgb, var(--ok) 26%, transparent)}
.wiki-formula{background:var(--bg); border:1px solid var(--line); border-radius:6px;
  padding:8px 12px; font-variant-numeric:tabular-nums; font-weight:600; text-align:center}
.wiki-pre{background:var(--bg); border:1px solid var(--line); border-radius:6px; padding:11px 13px;
  font:11.5px/1.55 ui-monospace,Menlo,monospace; overflow-x:auto; margin:0 0 11px}
.wiki-hit{background:var(--card); border:1px solid var(--line); border-radius:6px;
  padding:8px 12px; margin-bottom:6px; display:flex; flex-direction:column; gap:1px; font-size:12px}
.wiki-hit a{text-decoration:none; font-weight:600}
.wiki-hit a:hover{text-decoration:underline}
.wiki-hit .faint{font-size:10.5px; text-transform:uppercase; letter-spacing:.05em}
.wiki-foot{display:flex; justify-content:space-between; gap:12px; font-size:12px; font-weight:600; padding:4px 2px}
.wiki-foot a{text-decoration:none}
.wiki-foot a:hover{text-decoration:underline}

/* ---------- Kleine Bildschirme ----------
   Ziel: keine waagerechte Seitenscrollleiste und trotzdem vollständige Navigation.
   Die Reiter, die nicht passen, liegen im Menü „Mehr“ (JS), die Zeitraumleiste
   bricht um, Tabellen scrollen weiter innerhalb ihrer Karte. */
@media (max-width:760px){
  .appbar-inner{padding:0 12px; gap:8px}
  .view{padding:16px 12px 56px}
  .qchip{padding:2px 7px}
  .qchip .qtext{display:none}
  .tiles{grid-template-columns:repeat(auto-fit,minmax(148px,1fr))}
  .tile .val{font-size:18px}
  .period{position:static}
  .period .coverage{margin-left:0; flex-basis:100%}
  .pagehead h1{font-size:16px}
  .pnl-wrap{max-height:calc(100vh - 200px)}
  .pnl-wrap th:first-child, .pnl-wrap td:first-child{min-width:170px; max-width:200px}
}
@media (max-width:420px){
  .brand{font-size:13.5px}
  .tiles{grid-template-columns:1fr 1fr}
}

@media print{
  .appbar, .wiki-nav, .wiki-foot, .skiplink, .period, .dropzone, .ctools{display:none}
  .view{max-width:none; padding:0}
  .wiki{grid-template-columns:1fr}
  .wiki-sec{border:0; padding:0 0 10px; break-inside:avoid}
  .tablewrap{max-height:none; overflow:visible}
  .card{break-inside:avoid}
}