/* Erzeugt aus demo-navigator/index.html durch demo-navigator/werkzeuge/theme_einbauen.py - NICHT von Hand aendern, die naechste Erzeugung ueberschreibt es. */
/* Farben, Schriften und Radien aus dem khd-theme (style.css). Die Schriften
   werden hier nicht geladen - eingebaut in die Website erbt die Seite sie,
   und die Ausweichung auf system-ui traegt denselben Charakter. */
#khd-navigator{
  --navy:#112D4E; --blue:#3F72AF; --blue-tint:#DBE2EF;
  --bg:#F9F7F7; --panel:#FFFFFF; --panel2:#F2F5F9;
  --line:#DDE3EC; --line2:#EDF1F6;
  --fg:#112D4E; --fg2:#5C6B80; --fg3:#8A98AC;
  --accent:#3F72AF; --accent2:#DBE2EF; --accentline:#A9BDD9;
  --stat:#3F72AF; --amb:#2F8F6F; --icd:#A9603B; --warn:#B5822C;
  --display:"Archivo",system-ui,sans-serif;
  --body:"Public Sans",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --rad:3px;
  --shadow:0 1px 2px rgba(17,45,78,.05),0 1px 3px rgba(17,45,78,.08);
}
#khd-navigator,#khd-navigator *{box-sizing:border-box}
#khd-navigator{
  background:var(--bg);color:var(--fg);font:13px/1.45 var(--body);
  display:flex;flex-direction:column;height:100dvh;position:relative}
/* Als Unterseite bekommt der Behaelter die Hoehe unterhalb der Kopfzeile;
   das Theme setzt dann --khd-nav-hoehe. */
body.khd-navigator-seite{margin:0}
body.khd-navigator-seite #khd-navigator{height:var(--khd-nav-hoehe,100dvh)}

/* ---------- Kopfzeile des Dashboards ---------- */
#khd-navigator .khd-dkopf{display:flex;align-items:center;gap:12px;padding:8px 16px;
  background:var(--panel);border-bottom:1px solid var(--line);box-shadow:var(--shadow);
  z-index:20;flex:none}
#khd-navigator .khd-dkopf h1{font-family:var(--display);font-size:15px;font-weight:600;
  margin:0;letter-spacing:-.02em;white-space:nowrap;color:var(--navy)}
#khd-navigator .khd-dkopf h1 span{font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--blue);
  vertical-align:2px;margin-left:8px}
#khd-navigator .khd-spacer{flex:1}
#khd-navigator .khd-demozeile{font-size:11px;color:var(--fg2);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
#khd-navigator button{font:inherit;font-size:12px;border:1px solid var(--line);
  background:var(--panel2);color:var(--fg);padding:5px 12px;border-radius:var(--rad);
  cursor:pointer;white-space:nowrap}
#khd-navigator button:hover{border-color:var(--accentline);background:var(--accent2);color:var(--fg)}

/* ---------- Seitenreiter ---------- */
#khd-navigator .khd-reiter{display:flex;gap:1px;padding:0 16px;background:var(--panel);
  border-bottom:1px solid var(--line);flex:none;z-index:15;overflow-x:auto}
#khd-navigator .khd-reiterknopf{padding:7px 13px;font-family:var(--display);font-size:12.5px;
  color:var(--fg2);cursor:pointer;user-select:none;white-space:nowrap;
  border-bottom:2px solid transparent;margin-bottom:-1px}
#khd-navigator .khd-reiterknopf:hover{color:var(--fg);background:var(--accent2)}
#khd-navigator .khd-reiterknopf.aktiv{color:var(--navy);border-bottom-color:var(--navy);font-weight:600}

/* ---------- KPI-Leiste ---------- */
#khd-navigator .khd-kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;
  padding:10px 16px 0;flex:none}
#khd-navigator .khd-kpi{background:var(--panel);border:1px solid var(--line);
  border-radius:var(--rad);padding:8px 13px;box-shadow:var(--shadow);
  position:relative;overflow:hidden}
#khd-navigator .khd-kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;
  width:3px;background:var(--accent);opacity:.85}
#khd-navigator .khd-kpi.amb::before{background:var(--amb)}
#khd-navigator .khd-kpi.icd::before{background:var(--icd)}
#khd-navigator .khd-kpi .khd-label{font-family:var(--mono);font-size:10px;color:var(--fg2);
  text-transform:uppercase;letter-spacing:.08em;white-space:nowrap}
#khd-navigator .khd-kpi .khd-wert{font-family:var(--display);font-size:21px;font-weight:700;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1.25}
#khd-navigator .khd-kpi .khd-sub{font-size:10.5px;color:var(--fg3);font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:14px}

/* ---------- Hauptbereich ---------- */
#khd-navigator .khd-haupt{flex:1;display:grid;
  grid-template-columns:clamp(300px,24vw,400px) 1fr;
  gap:10px;padding:10px 16px 12px;min-height:0;transition:grid-template-columns .18s}
#khd-navigator .khd-haupt.zu{grid-template-columns:34px 1fr}
#khd-navigator .khd-haupt.zu .khd-schiene>*:not(.khd-griff){display:none}
#khd-navigator .khd-haupt.zu .khd-griff{writing-mode:vertical-rl;justify-content:flex-start;padding:10px 0}
#khd-navigator .khd-griff{display:flex;align-items:center;gap:8px;padding:6px 8px;flex:none;
  cursor:pointer;user-select:none;color:var(--fg2);font-size:11px;
  border-bottom:1px solid var(--line2)}
#khd-navigator .khd-griff:hover{color:var(--accent);background:var(--accent2)}
#khd-navigator .khd-schiene{background:var(--panel);border:1px solid var(--line);
  border-radius:var(--rad);box-shadow:var(--shadow);
  display:flex;flex-direction:column;min-height:0}
#khd-navigator .khd-slicerliste{overflow-y:auto;padding:0 0 8px;flex:1;min-height:0}
#khd-navigator .khd-schiene.mitwahl .khd-slicerliste{flex:0 1 auto;max-height:40%}
#khd-navigator .khd-wahl{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;
  border-top:1px solid var(--line)}
#khd-navigator .khd-wahl[hidden]{display:none}
#khd-navigator .khd-wahlkopf{display:flex;align-items:baseline;gap:8px;padding:8px 11px;
  border-bottom:1px solid var(--line);flex:none}
#khd-navigator .khd-wahlkopf b{font-family:var(--display);font-size:12px;font-weight:600;color:var(--navy)}
#khd-navigator .khd-wahlkopf .khd-meta{font-family:var(--mono);font-size:10px;color:var(--fg3)}
#khd-navigator .khd-inhalt{min-height:0}

/* ---------- Slicer ---------- */
#khd-navigator .khd-slicer{border-bottom:1px solid var(--line2)}
#khd-navigator .khd-slicer.open{background:var(--panel2)}
#khd-navigator .khd-slkopf{display:flex;align-items:center;gap:7px;padding:7px 11px;
  cursor:pointer;user-select:none}
#khd-navigator .khd-slkopf:hover{background:var(--accent2)}
#khd-navigator .khd-caret{color:var(--fg3);font-size:9px;width:9px;flex:none;transition:transform .12s}
#khd-navigator .khd-slicer.open .khd-caret{transform:rotate(90deg)}
#khd-navigator .khd-sltitel{font-size:12px;font-weight:500;flex:1;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
#khd-navigator .khd-slzahl{font-family:var(--mono);font-size:9.5px;background:var(--navy);
  color:#fff;border-radius:9px;padding:1px 6px;font-variant-numeric:tabular-nums;flex:none}
#khd-navigator .khd-slzahl.off{background:transparent;color:var(--fg3)}
#khd-navigator .khd-slbody{display:none;padding:0 11px 9px}
#khd-navigator .khd-slicer.open .khd-slbody{display:block}
#khd-navigator .khd-slsuche{width:100%;font:inherit;font-size:12px;padding:4px 7px;
  margin-bottom:5px;border:1px solid var(--line);border-radius:var(--rad);
  background:var(--panel);color:var(--fg)}
#khd-navigator .khd-slsuche:focus{outline:none;border-color:var(--accent)}
#khd-navigator .khd-slliste{max-height:224px;overflow-y:auto;position:relative}
#khd-navigator .khd-slscroll{position:relative}
#khd-navigator .khd-slitem{display:flex;align-items:center;gap:7px;padding:2px 4px;
  border-radius:2px;cursor:pointer;font-size:11.5px;line-height:1.25;
  position:absolute;left:0;right:0}
#khd-navigator .khd-slitem:hover{background:var(--accent2)}
#khd-navigator .khd-slitem input{margin:0;flex:none;accent-color:var(--accent)}
#khd-navigator .khd-slitem .khd-txt{flex:1;min-width:0;white-space:normal;display:-webkit-box;
  -webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
#khd-navigator .khd-slitem .khd-cnt{font-size:10px;color:var(--fg3);
  font-variant-numeric:tabular-nums;flex:none}
#khd-navigator .khd-slfuss{display:flex;gap:9px;padding-top:5px;font-size:11px}
#khd-navigator .khd-slfuss a{color:var(--accent);cursor:pointer;text-decoration:none}
#khd-navigator .khd-slfuss a:hover{text-decoration:underline}
#khd-navigator .khd-slleer{font-size:11px;color:var(--fg3);padding:6px 4px;position:static}
#khd-navigator .khd-bereich{display:flex;gap:8px;align-items:center;font-size:11.5px}
#khd-navigator .khd-bereich input{width:70px;font:inherit;font-size:12px;padding:4px 7px;
  border:1px solid var(--line);border-radius:var(--rad);background:var(--panel);color:var(--fg)}
#khd-navigator .khd-bereich input:focus{outline:none;border-color:var(--accent)}

/* ---------- Seiten und Kacheln ---------- */
#khd-navigator .khd-seite{display:none;height:100%;gap:10px;min-height:0}
#khd-navigator .khd-seite.aktiv{display:grid}
#khd-navigator #khdSeiteOps.aktiv,#khd-navigator #khdSeiteIcd.aktiv{display:block}
/* Gesperrte Seiten: eine Kachel, die sagt, was die Vollversion dort kann. */
#khd-navigator .khd-vv.aktiv{display:flex;align-items:flex-start;justify-content:center;
  padding-top:6vh;overflow-y:auto}
#khd-navigator .khd-vv-kachel{background:var(--panel);border:1px solid var(--line);
  border-radius:var(--rad);box-shadow:var(--shadow);max-width:560px;
  padding:26px 30px 24px}
#khd-navigator .khd-vv-band{display:inline-block;font-family:var(--mono);font-size:10px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--warn);
  border:1px solid var(--warn);border-radius:2px;padding:3px 8px;margin-bottom:12px}
#khd-navigator .khd-vv-kachel h2{font-family:var(--display);font-size:17px;font-weight:700;
  color:var(--navy);margin:0 0 8px}
#khd-navigator .khd-vv-kachel p{margin:0 0 16px;font-size:12.5px;line-height:1.6;color:var(--fg2)}
#khd-navigator .khd-vv-knopf{display:inline-block;background:var(--navy);color:#fff;
  font-weight:600;font-size:12.5px;padding:8px 16px;border-radius:var(--rad);
  text-decoration:none}
#khd-navigator .khd-vv-knopf:hover{background:var(--blue);color:#fff}
#khd-navigator .khd-auswertung{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;align-content:start;overflow-y:auto;height:100%;min-height:0;padding-right:2px}
/* Nachfahren-Selektor, kein Kind-Selektor: die Karte haengt ueber das
   Kartenziel (display:contents) im Raster. */
#khd-navigator .khd-auswertung .khd-panel{height:380px}
#khd-navigator .khd-kartenziel{display:contents}
#khd-navigator .khd-auswertung .khd-kartenziel>.khd-panel{grid-column:1/-1}
#khd-navigator .khd-auswertung .khd-panel.khd-breit{grid-column:1/-1}
#khd-navigator .khd-pbody>svg{flex:none}
#khd-navigator .khd-panel{background:var(--panel);border:1px solid var(--line);
  border-radius:var(--rad);box-shadow:var(--shadow);
  display:flex;flex-direction:column;min-height:0;overflow:hidden}
#khd-navigator .khd-panel>h2{font-family:var(--display);font-size:12.5px;font-weight:600;
  margin:0;padding:8px 12px;border-bottom:1px solid var(--line);color:var(--navy);
  display:flex;align-items:center;gap:9px;flex:none}
#khd-navigator .khd-panel>h2 .khd-meta{font-family:var(--mono);font-weight:400;color:var(--fg3);
  font-size:10px;letter-spacing:.03em;font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#khd-navigator .khd-panel>h2 a{font-family:var(--body);font-weight:400;font-size:11px;
  color:var(--accent);cursor:pointer;text-decoration:none;white-space:nowrap}
#khd-navigator .khd-panel>h2 a:hover{text-decoration:underline}
#khd-navigator .khd-pbody{flex:1;min-height:0;overflow:auto;position:relative;
  display:flex;flex-direction:column}

/* ---------- Leertext in Kacheln ---------- */
#khd-navigator .khd-tleer{padding:10px;color:var(--fg3);font-size:11.5px}

/* ---------- Balkenliste (virtualisiert) ---------- */
#khd-navigator .khd-blliste{position:relative;overflow-y:auto;flex:1;min-height:0}
#khd-navigator .khd-blscroll{position:relative}
#khd-navigator .khd-blzeile{position:absolute;left:0;right:0;height:26px;display:flex;
  align-items:center;gap:8px;padding:0 10px;border-bottom:1px solid var(--line2);font-size:11.5px}
#khd-navigator .khd-blzeile:hover{background:var(--accent2)}
#khd-navigator .khd-blklick .khd-blzeile{cursor:pointer}
#khd-navigator .khd-blzeile.aktiv{background:var(--accent2);box-shadow:inset 3px 0 0 var(--navy)}
#khd-navigator .khd-blzeile.aktiv .khd-bltxt{font-weight:600}
#khd-navigator .khd-bllabel{flex:none;display:flex;align-items:baseline;gap:6px;min-width:0}
#khd-navigator .khd-blrang{color:var(--fg3);font-variant-numeric:tabular-nums;font-size:10px;
  flex:none;width:28px;text-align:right}
#khd-navigator .khd-bltxt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
#khd-navigator .khd-blsub{color:var(--fg3);font-size:10.5px;flex:1;min-width:24px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#khd-navigator .khd-blspur{flex:1;position:relative;height:12px;min-width:60px}
#khd-navigator .khd-blspur i{position:absolute;top:0;bottom:0;border-radius:1px}
#khd-navigator .khd-blwert{flex:none;width:72px;text-align:right;font-variant-numeric:tabular-nums}
#khd-navigator .khd-legende{display:flex;gap:14px;flex-wrap:wrap;padding:6px 10px 8px;
  font-size:11px;color:var(--fg2);flex:none;border-top:1px solid var(--line2)}
#khd-navigator .khd-legende i{display:inline-block;width:10px;height:10px;border-radius:2px;
  margin-right:5px;vertical-align:-1px}

/* ---------- Kodewahl (Baum) ---------- */
#khd-navigator .khd-baumsuche{position:sticky;top:0;z-index:3;padding:6px 8px;
  background:var(--panel);border-bottom:1px solid var(--line2);flex:none}
#khd-navigator .khd-baumsuche input{width:100%;font:inherit;font-size:12px;padding:4px 7px;
  border:1px solid var(--line);border-radius:var(--rad);background:var(--panel);color:var(--fg)}
#khd-navigator .khd-baumsuche input:focus{outline:none;border-color:var(--accent)}
/* Der Baum ist virtualisiert: bei 36.059 OPS-Vollkodes stehen nur die
   sichtbaren Zeilen im DOM. Feste Zeilenhoehe - die Virtualisierung
   rechnet mit ihr. */
#khd-navigator .khd-baum{flex:1;min-height:0;overflow-y:auto;position:relative}
#khd-navigator .khd-bscroll{position:relative}
#khd-navigator .khd-bzeile{display:flex;align-items:center;gap:5px;height:34px;
  position:absolute;left:0;right:0;
  padding:2px 9px 2px 6px;border-bottom:1px solid var(--line2)}
#khd-navigator .khd-bzeile:hover{background:var(--accent2)}
#khd-navigator .khd-bzeile.e0>.khd-btxt{font-weight:600}
#khd-navigator .khd-bcaret{color:var(--fg3);font-size:9px;width:11px;flex:none;cursor:pointer;
  text-align:center;transition:transform .12s}
#khd-navigator .khd-bzeile.offen .khd-bcaret{transform:rotate(90deg)}
#khd-navigator .khd-bwahl{flex:none;width:13px;height:13px;border:1.5px solid var(--fg3);
  border-radius:2px;cursor:pointer;position:relative;background:var(--panel)}
#khd-navigator .khd-bwahl:hover{border-color:var(--accent)}
#khd-navigator .khd-bwahl.an{background:var(--navy);border-color:var(--navy)}
#khd-navigator .khd-bwahl.an::after{content:"";position:absolute;left:3.5px;top:.5px;
  width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg)}
#khd-navigator .khd-bwahl.teils{background:var(--blue-tint);border-color:var(--accent)}
#khd-navigator .khd-bwahl.teils::after{content:"";position:absolute;left:2px;top:4.5px;
  width:7px;height:2px;background:var(--navy)}
#khd-navigator .khd-btxt{flex:1;min-width:0;font-size:11px;line-height:1.3;cursor:pointer;
  white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;
  -webkit-line-clamp:2;line-clamp:2;overflow:hidden}
#khd-navigator .khd-bkode{font-family:var(--mono);font-size:10px;color:var(--fg3);margin-right:4px}
#khd-navigator .khd-bzahl{flex:none;font-size:10.5px;color:var(--fg3);
  font-variant-numeric:tabular-nums}
#khd-navigator .khd-baumleer{padding:10px;color:var(--fg3);font-size:11.5px}

/* ---------- Karte ---------- */
#khd-navigator .khd-mapwrap{position:relative;flex:1;min-height:0;background:var(--panel)}
#khd-navigator .khd-mapwrap canvas{display:block;width:100%;height:100%}
#khd-navigator .khd-maptip{position:absolute;pointer-events:none;background:var(--panel);
  border:1px solid var(--accentline);border-radius:var(--rad);padding:6px 9px;
  font-size:11px;box-shadow:var(--shadow);z-index:5;display:none;max-width:260px;line-height:1.4}
#khd-navigator .khd-maptip b{display:block;margin-bottom:2px;font-size:12px}
#khd-navigator .khd-mapnote{position:absolute;right:9px;bottom:7px;font-family:var(--mono);
  font-size:9px;letter-spacing:.03em;color:var(--fg3);pointer-events:none;text-align:right;
  max-width:72%;line-height:1.4}

/* ---------- Fusszeile ---------- */
#khd-navigator .khd-fuss{flex:none;padding:4px 16px 10px;font-size:10px;color:var(--fg3);
  line-height:1.5;text-align:center}

/* ---------- Startbildschirm ---------- */
#khd-navigator .khd-gate{position:absolute;inset:0;background:var(--bg);z-index:60;
  display:flex;align-items:center;justify-content:center;padding:16px}
#khd-navigator .khd-gatebox{background:var(--panel);border:1px solid var(--line);
  border-radius:var(--rad);padding:24px 28px;max-width:560px;
  box-shadow:0 8px 30px rgba(16,24,40,.12)}
#khd-navigator .khd-gatebox h2{margin:0 0 6px;font-size:17px;font-family:var(--display);color:var(--navy)}
#khd-navigator .khd-gatebox p{color:var(--fg2);margin:0 0 12px;font-size:12.5px;line-height:1.55}
#khd-navigator .khd-balken{height:5px;background:var(--line2);border-radius:2px;overflow:hidden}
#khd-navigator .khd-balken i{display:block;height:100%;width:0;background:var(--accent);transition:width .15s}
#khd-navigator .khd-gatelog{margin-top:10px;font-family:var(--mono);font-size:10.5px;color:var(--fg2);
  font-variant-numeric:tabular-nums;line-height:1.6;white-space:pre-wrap}
#khd-navigator .khd-fehler{color:#c0392b}

/* ---------- Schmale Fenster ----------
   Als Unterseite muss die Demo auch am Handy bedienbar sein: die Filter
   werden ein aufklappbarer Block ueber dem Inhalt, die Kacheln stapeln sich,
   die Seite scrollt als Ganzes. */
@media (max-width:900px){
  #khd-navigator{height:auto;min-height:100dvh}
  body.khd-navigator-seite #khd-navigator{height:auto}
  #khd-navigator .khd-kpis{grid-template-columns:repeat(2,1fr)}
  #khd-navigator .khd-haupt{display:block;padding:10px 10px 12px}
  #khd-navigator .khd-haupt .khd-schiene{margin-bottom:10px;max-height:none}
  #khd-navigator .khd-haupt.zu .khd-schiene>*:not(.khd-griff){display:none}
  #khd-navigator .khd-haupt.zu .khd-griff{writing-mode:horizontal-tb;padding:6px 8px}
  #khd-navigator .khd-schiene.mitwahl .khd-slicerliste{max-height:260px}
  #khd-navigator .khd-wahl{max-height:380px}
  #khd-navigator .khd-seite{height:auto}
  #khd-navigator .khd-seite.aktiv{display:block}
  #khd-navigator .khd-vv.aktiv{padding-top:16px}
  #khd-navigator .khd-auswertung{display:block;height:auto;overflow:visible}
  #khd-navigator .khd-auswertung .khd-panel{height:380px;margin-bottom:10px}
  #khd-navigator .khd-kartenziel{display:block}
  #khd-navigator .khd-kartenziel>.khd-panel{height:420px;margin-bottom:10px}
  #khd-navigator .khd-kpis{padding:10px 10px 0}
  #khd-navigator .khd-dkopf,#khd-navigator .khd-reiter{padding-left:10px;padding-right:10px}
  #khd-navigator .khd-demozeile{display:none}
}
/* Balkenlisten am Handy: das Etikett gibt Breite ab, sonst schiebt die
   Wertspalte aus dem Bild. Die Breite steht inline (labelBreite), darum
   das !important. */
@media (max-width:560px){
  #khd-navigator .khd-bllabel{width:45%!important}
  #khd-navigator .khd-blwert{width:58px}
  #khd-navigator .khd-blspur{min-width:40px}
  #khd-navigator .khd-blsub{display:none}
}
@media (max-width:1150px){
  #khd-navigator .khd-tz-ort{display:none}
}