/* Schaubild. Fast schwarz, Creme statt Weiß, Bernstein-Gold als Hauptfarbe.
   Alles ist gedämpft, bis man es berührt. Farben nur hier oben ändern. */
@font-face { font-family: "Host Grotesk"; font-weight: 400; font-display: swap; src: url("../fonts/HostGrotesk-400-latin.woff2") format("woff2"); }
@font-face { font-family: "Host Grotesk"; font-weight: 500; font-display: swap; src: url("../fonts/HostGrotesk-500-latin.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-display: swap; src: url("../fonts/JetBrainsMono-400-latin.woff2") format("woff2"); }

:root {
  --grund: #0A0907; --glas: rgba(20, 18, 14, .92); --glas2: rgba(8, 7, 5, .97);
  --creme: #F4EEE4; --creme2: #CFC6B8; --creme3: #8F877B; --creme4: #5E574E;
  --gold: #FFB627; --gold2: #FFD27A; --rot: #FF6B5A; --gruen: #7ED957;
  --sans: "Host Grotesk", system-ui, sans-serif; --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --ease: cubic-bezier(.23, 1, .32, 1); --feder: cubic-bezier(.2, .9, .3, 1.1);
  --sk: 1; color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--grund); color: var(--creme); }
body { font-family: var(--mono); -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none; }
button { font: inherit; color: inherit; }
#netz { position: fixed; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
#netz.zieht, body.zieht, body.zieht * { cursor: grabbing; }

.ecken i { position: fixed; z-index: 3; width: 18px; height: 18px; pointer-events: none; border: 0 solid rgba(244, 238, 228, .18); }
.ecken i:nth-child(1) { top: 14px; left: 14px; border-top-width: 1px; border-left-width: 1px; }
.ecken i:nth-child(2) { top: 14px; right: 14px; border-top-width: 1px; border-right-width: 1px; }
.ecken i:nth-child(3) { bottom: 14px; left: 14px; border-bottom-width: 1px; border-left-width: 1px; }
.ecken i:nth-child(4) { bottom: 14px; right: 14px; border-bottom-width: 1px; border-right-width: 1px; }

.kopf { position: absolute; z-index: 6; top: 28px; left: 34px; pointer-events: none; transition: opacity .6s var(--ease); }
.kopf .eb { margin: 0; font-size: calc(10px * var(--sk)); letter-spacing: .32em; text-transform: uppercase; color: var(--gold); }
.kopf h1 { margin: 8px 0 0; font: 500 calc(32px * var(--sk))/1 var(--sans); letter-spacing: -.035em; }
.zaehler { margin: 12px 0 0; max-width: min(600px, 80vw); font-size: calc(9.5px * var(--sk)); line-height: 1.9; letter-spacing: .22em; text-transform: uppercase; color: var(--creme3); }
.zaehler b { font: 500 calc(14px * var(--sk)) var(--sans); letter-spacing: 0; color: var(--creme); font-variant-numeric: tabular-nums; }

#stand, #hinweis { position: absolute; z-index: 6; bottom: 24px; display: flex; align-items: center; gap: 10px; pointer-events: none; font-size: calc(9px * var(--sk)); letter-spacing: .22em; text-transform: uppercase; color: var(--creme3); }
#stand { left: 34px; }
#hinweis { right: 34px; color: var(--creme4); transition: opacity 1.2s var(--ease); }
#stand i { width: 6px; height: 6px; border-radius: 50%; background: var(--gruen); box-shadow: 0 0 10px var(--gruen); animation: atmen 2.4s ease-in-out infinite; }
#stand i.beispiel { background: var(--gold); box-shadow: 0 0 10px var(--gold); }
#stand i.fehler { background: var(--rot); box-shadow: 0 0 10px var(--rot); }
@keyframes atmen { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

#tip { position: absolute; z-index: 7; pointer-events: none; transform: translate(-50%, -150%); white-space: nowrap; padding: 5px 10px; border: 1px solid rgba(244, 238, 228, .14); border-radius: 8px; background: rgba(8, 7, 5, .94); font-size: calc(9.5px * var(--sk)); letter-spacing: .12em; text-transform: uppercase; opacity: 0; transition: opacity .12s var(--ease); }
#tip.an { opacity: 1; }
#tip em { margin-left: 6px; font-style: normal; color: var(--creme3); }

#meldung { position: absolute; z-index: 9; left: 50%; bottom: 64px; transform: translate(-50%, 12px); opacity: 0; pointer-events: none; padding: 11px 18px; border-radius: 999px; border: 1px solid rgba(255, 182, 39, .45); background: rgba(14, 12, 9, .95); box-shadow: 0 0 30px rgba(255, 182, 39, .18); font-size: 11px; letter-spacing: .06em; white-space: nowrap; transition: opacity .2s var(--ease), transform .25s var(--ease); }
#meldung.an { opacity: 1; transform: translate(-50%, 0); }

/* Knoten */
#knoten { position: absolute; inset: 0; z-index: 4; overflow: hidden; pointer-events: none; }
.n { position: absolute; left: 0; top: 0; opacity: 0; pointer-events: auto; cursor: pointer; touch-action: none; will-change: transform, opacity; }
.n .b { position: relative; display: flex; align-items: center; justify-content: center; transition: box-shadow .2s var(--ease), filter .2s var(--ease), transform .15s var(--ease), background .2s var(--ease); }
.n .t { position: absolute; left: 50%; top: 100%; transform: translate(-50%, 7px); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .15s var(--ease); font-size: calc(9.5px * var(--sk)); letter-spacing: .14em; text-transform: uppercase; color: var(--creme2); text-shadow: 0 0 8px #000; }
.n .t em { margin-left: 6px; font-style: normal; letter-spacing: .08em; color: var(--creme3); }
.n:hover .t, .n.sel .t, .n.nah .t { opacity: 1; }

.n.kern .b { width: calc(92px * var(--sk)); height: calc(92px * var(--sk)); border-radius: 26%; background: radial-gradient(circle at 50% 35%, #2a2010, #0d0b08 70%); border: 1px solid rgba(255, 182, 39, .6); box-shadow: 0 0 60px rgba(255, 182, 39, .35), 0 18px 50px rgba(0, 0, 0, .6); }
.n.kern .b svg { width: 50%; height: auto; }
.n.kern:hover .b, .n.kern.sel .b { box-shadow: 0 0 110px rgba(255, 182, 39, .7), 0 0 30px rgba(255, 210, 122, .5); }
.n.kern .t { opacity: 1; transform: translate(-50%, 9px); font: 500 calc(12px * var(--sk)) var(--sans); letter-spacing: .4em; color: var(--creme); }

.n.abt .b { width: calc(48px * var(--sk)); height: calc(48px * var(--sk)); border-radius: 50%; background: #0e0c09; border: 1.5px solid var(--ac); box-shadow: 0 0 0 3px rgba(10, 9, 7, .9), 0 0 22px color-mix(in srgb, var(--ac) 45%, transparent); }
.n.abt .b svg { width: 48%; height: 48%; color: var(--creme); }
.n.abt:hover .b, .n.abt.sel .b { background: var(--ac); box-shadow: 0 0 0 3px rgba(10, 9, 7, .9), 0 0 48px color-mix(in srgb, var(--ac) 85%, transparent); }
.n.abt:hover .b svg, .n.abt.sel .b svg { color: var(--grund); }
.n.abt .t { text-align: center; text-transform: none; letter-spacing: .02em; }
.n.abt .t b { display: block; font: 500 calc(15px * var(--sk)) var(--sans); color: var(--creme); }
.n.abt .t span { display: block; margin-top: 2px; font-size: calc(9.5px * var(--sk)); color: var(--creme3); }
.n.abt .t span i { font-style: normal; color: var(--gold2); }

.n.tool .b { width: calc(22px * var(--sk)); height: calc(22px * var(--sk)); color: var(--creme2); filter: saturate(.4); opacity: .7; }
.n.tool .b svg { width: 100%; height: 100%; }
.n.tool:hover .b, .n.tool.sel .b, .n.tool.nah .b { filter: none; opacity: 1; color: var(--bc); }
.n.tool.sel .b { transform: scale(1.4); }
@media (hover: hover) and (pointer: fine) { .n.tool:hover .b { transform: scale(1.4); } }
.buchstabe { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; border-radius: 6px; border: 1px solid currentColor; font: 500 11px var(--sans); }

.n.ag .b, .n.skill .b { width: calc(26px * var(--sk)); height: calc(26px * var(--sk)); }
.n.ag .b::before, .n.skill .b::before { content: ""; position: absolute; inset: 3px; border-radius: 6px; transform: rotate(45deg); background: #0f0d0a; border: 1.5px solid var(--ac); transition: background .2s var(--ease), box-shadow .2s var(--ease); }
.n.skill .b::before { border-color: color-mix(in srgb, var(--ac) 55%, transparent); }
.n.ag .b svg, .n.skill .b svg { position: relative; width: 50%; height: 50%; color: var(--creme); }
.n.ag:hover .b::before, .n.ag.sel .b::before, .n.skill:hover .b::before, .n.skill.sel .b::before { background: var(--ac); box-shadow: 0 0 18px color-mix(in srgb, var(--ac) 70%, transparent); }
.n.ag:hover .b svg, .n.ag.sel .b svg, .n.skill:hover .b svg, .n.skill.sel .b svg { color: var(--grund); }
.n .lauf { position: absolute; right: -1px; top: -1px; z-index: 2; width: 6px; height: 6px; border-radius: 50%; background: var(--gruen); box-shadow: 0 0 6px var(--gruen); }
.n .lauf.fehler { background: var(--rot); box-shadow: 0 0 6px var(--rot); }

.n.mensch .b { width: calc(36px * var(--sk)); height: calc(36px * var(--sk)); border-radius: 50%; overflow: hidden; background: #1a1712; border: 1.5px solid rgba(244, 238, 228, .4); }
.n.mensch .b img, .n.mensch .b svg { width: 100%; height: 100%; display: block; object-fit: cover; }
.n.mensch .b span { font: 500 calc(12px * var(--sk)) var(--sans); }
.n.mensch:hover .b, .n.mensch.sel .b, .n.mensch.nah .b { border-color: var(--ac); box-shadow: 0 0 22px color-mix(in srgb, var(--ac) 55%, transparent); }
.n.mensch .t { text-transform: none; letter-spacing: .02em; font-size: calc(10.5px * var(--sk)); color: var(--creme); }
.n.mensch .t em { display: block; margin: 2px 0 0; font-size: calc(8.5px * var(--sk)); letter-spacing: .1em; text-transform: uppercase; }

.n.ziel .b { outline: 2px dashed var(--gold); outline-offset: 5px; }
.n.quelle { opacity: .35 !important; }
.geist { position: fixed !important; z-index: 20; left: 0; top: 0; opacity: 1 !important; pointer-events: none; }
body.team .n.tool, body.team .n.mensch { cursor: pointer; }

/* Karte (Grundgerüst, Task 10 ergänzt den Rest) */
#karte { position: absolute; z-index: 8; left: 34px; top: 200px; width: min(700px, 46vw); max-height: calc(100vh - 232px); overflow: auto; overscroll-behavior: contain; border: 1px solid rgba(244, 238, 228, .1); border-radius: 22px; background: linear-gradient(180deg, var(--glas), var(--glas2)); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 30px 80px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .04); opacity: 0; pointer-events: none; transform: translateY(8px) scale(.98); transform-origin: top left; transition: opacity .22s var(--ease), transform .3s var(--feder); }
#karte.an { opacity: 1; transform: none; pointer-events: auto; }
#karte::-webkit-scrollbar { width: 6px; }
#karte::-webkit-scrollbar-thumb { background: rgba(244, 238, 228, .12); border-radius: 3px; }
.k { padding: 24px 26px 22px; }
.k-eb { display: flex; justify-content: space-between; align-items: center; margin: 0 0 14px; font-size: 9px; letter-spacing: .3em; text-transform: uppercase; color: var(--ac, var(--gold)); }
.k-zu { appearance: none; padding: 6px 11px; border-radius: 999px; border: 1px solid rgba(244, 238, 228, .18); background: rgba(10, 9, 7, .6); letter-spacing: .2em; text-transform: uppercase; cursor: pointer; transition: transform .12s var(--ease), border-color .15s var(--ease); }
.k-zu:hover { border-color: var(--ac, var(--gold)); }
.k-zu:active { transform: scale(.97); }
.k-titel { min-width: 0; }
.k-titel h2 { margin: 0; font: 500 28px/1.05 var(--sans); letter-spacing: -.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-fehler .k-titel h2 { white-space: normal; font-size: 22px; line-height: 1.2; }
.k-fehlerliste { margin: 12px 0 0; padding-left: 18px; font: 13px/1.5 var(--sans); color: var(--creme2); }
.k-text { margin: 12px 0 0; font: 400 13.5px/1.6 var(--sans); color: var(--creme2); text-wrap: pretty; }

/* Hochformat (Handy): kleinere Knoten, Karte als Blatt von unten */
body.hoch { --sk: .82; }
body.hoch .kopf { top: 18px; left: 18px; right: 70px; }
body.hoch #stand { left: 18px; bottom: 16px; }
body.hoch #hinweis { display: none; }
body.hoch.karte-offen .kopf { opacity: 0; }
body.hoch #karte { left: 8px; right: 8px; top: auto; bottom: 8px; width: auto; max-height: 60vh; transform-origin: bottom center; transform: translateY(24px); }
body.hoch #karte.an { transform: none; }
body.hud0 .kopf, body.hud0 #stand, body.hud0 #hinweis { opacity: 0; }
body.reel { --sk: 1.18; }
body.reel #hinweis { display: none; }

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

/* Karte: Kopf, Kennzahlen, Reiter, Zeilen, Schalter */
.k-oben { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; }
.k-links { min-width: 0; flex: 1; }
.k-kopf { display: flex; align-items: center; gap: 14px; }
.k-av { width: 60px; height: 60px; flex: none; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 18px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(244, 238, 228, .1); color: var(--ac, var(--gold)); }
.k-av.rund { border-radius: 50%; }
.k-av svg { width: 54%; height: 54%; }
.k-av.voll svg, .k-av img { width: 100%; height: 100%; object-fit: cover; }
.k-av.pixel svg { width: 62%; height: auto; }
.k-av.ini { font: 500 19px var(--sans); color: var(--creme); }
.k-av .punkt, .k-ico i { display: block; width: 9px; height: 9px; border-radius: 50%; }
.k-av .punkt { width: 12px; height: 12px; background: var(--gold); box-shadow: 0 0 14px var(--gold); }
.k-rolle { margin: 6px 0 0; font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--ac, var(--gold)); }
.k-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.k-chip { appearance: none; display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 4px; border-radius: 999px; border: 1px solid rgba(244, 238, 228, .1); background: rgba(255, 255, 255, .03); font-size: 9px; letter-spacing: .08em; color: var(--creme2); cursor: pointer; transition: border-color .15s var(--ease), color .15s var(--ease); }
.k-chip:hover { border-color: rgba(244, 238, 228, .3); color: var(--creme); }
.k-chip i { width: 14px; height: 14px; display: flex; align-items: center; justify-content: center; border-radius: 4px; background: var(--c); color: var(--grund); }
.k-chip i svg { width: 10px; height: 10px; }
.k-sektor { width: 56px; height: 56px; flex: none; }
.k-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }
.k-stat { min-width: 0; padding: 12px 12px 10px; border-radius: 14px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(244, 238, 228, .08); }
.k-stat b { display: block; font: 500 24px/1 var(--sans); letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.k-stat span { display: block; margin-top: 6px; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--creme3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-tabs { display: flex; gap: 2px; margin-top: 16px; padding: 3px; overflow-x: auto; scrollbar-width: none; border-radius: 12px; background: rgba(255, 255, 255, .035); border: 1px solid rgba(244, 238, 228, .06); }
.k-tab { appearance: none; flex: 1; padding: 10px 6px; border: 0; border-radius: 9px; background: none; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--creme3); white-space: nowrap; cursor: pointer; transition: background .15s var(--ease), color .15s var(--ease); }
.k-tab em { margin-left: 4px; font-style: normal; color: var(--creme2); }
.k-tab:hover { color: var(--creme); }
.k-tab.an { background: rgba(244, 238, 228, .1); color: var(--creme); }
.k-inhalt { display: none; padding-top: 8px; }
.k-inhalt.an { display: block; }
.k-klein { margin: 10px 0 0; font-size: 9.5px; line-height: 1.6; letter-spacing: .14em; text-transform: uppercase; color: var(--creme3); }
.k-abschnitt { display: flex; justify-content: space-between; margin: 18px 0 6px; font-size: 9px; letter-spacing: .24em; text-transform: uppercase; color: var(--creme3); }
.k-abschnitt b { font-weight: 400; color: var(--creme2); }
.k-liste { display: flex; flex-direction: column; }
.k-zeile { display: flex; align-items: center; gap: 12px; padding: 9px 8px; border-radius: 12px; cursor: pointer; outline: none; transition: background .15s var(--ease); }
.k-zeile:hover, .k-zeile:focus-visible { background: rgba(255, 255, 255, .045); }
.k-zeile.still { cursor: default; }
.k-zeile.still:hover { background: none; }
.k-ico { width: 34px; height: 34px; flex: none; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 10px; background: rgba(255, 255, 255, .035); border: 1px solid rgba(244, 238, 228, .08); }
.k-ico svg { width: 17px; height: 17px; }
.k-ico.rund { border-radius: 50%; }
.k-ico.voll svg, .k-ico img { width: 100%; height: 100%; }
.k-ico.pixel svg { width: 64%; height: auto; }
.k-ico span { font: 500 11px var(--sans); }
.k-t { min-width: 0; flex: 1; }
.k-t b { display: block; font: 500 14px var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-t span { display: block; margin-top: 2px; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--creme3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-recht { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--creme3); text-align: right; white-space: nowrap; }
.k-recht b { display: block; font: 500 15px var(--sans); letter-spacing: 0; color: var(--creme); }
.k-frei { color: var(--ac, var(--gold)); }
.k-badge { display: inline-block; margin-left: 8px; padding: 2px 7px; border-radius: 999px; border: 1px dashed var(--gold); font: 8.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); vertical-align: 2px; }
.k-badge.weg { border-color: var(--rot); color: var(--rot); }
.schalter { position: relative; width: 34px; height: 20px; flex: none; padding: 0; border: 0; border-radius: 999px; background: rgba(244, 238, 228, .12); cursor: pointer; transition: background .2s var(--ease); }
.schalter::after { content: ""; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--creme2); transition: transform .2s var(--ease), background .2s var(--ease); }
.schalter.an { background: var(--ac, var(--gold)); }
.schalter.an::after { transform: translateX(14px); background: var(--grund); }
.schalter:active::after { width: 17px; }
.schalter:disabled { opacity: .4; cursor: not-allowed; }
.k-mosaik { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 6px; }
.k-mosaik > div { position: relative; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 11px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(244, 238, 228, .08); cursor: pointer; transition: border-color .15s var(--ease); }
.k-mosaik > div:hover { border-color: rgba(244, 238, 228, .3); }
.k-mosaik svg { width: 46%; height: 46%; }
.k-x { position: absolute; right: -5px; top: -5px; width: 17px; height: 17px; padding: 0; border-radius: 50%; border: 1px solid rgba(244, 238, 228, .25); background: #241d14; font: 11px/15px var(--mono); text-align: center; opacity: 0; cursor: pointer; transition: opacity .15s var(--ease), background .15s var(--ease); }
.k-mosaik > div:hover .k-x, .k-x:focus-visible { opacity: 1; }
.k-x:hover { background: var(--rot); border-color: var(--rot); }
@media (hover: none) { .k-x { opacity: 1; } }
.k-stapel { display: flex; align-items: center; }
.k-stapel > span { width: 30px; height: 30px; margin-left: -8px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 50%; border: 2px solid #14110d; background: #1a1712; font: 500 10px var(--sans); cursor: pointer; }
.k-stapel > span:first-child { margin-left: 0; }
.k-stapel svg, .k-stapel img { width: 100%; height: 100%; }
.k-stapel em { margin-left: 12px; font-style: normal; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--creme3); }
.k-balken > div { display: grid; grid-template-columns: 110px 1fr 36px; align-items: center; gap: 10px; padding: 5px 0; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--creme3); }
.k-balken i { height: 5px; overflow: hidden; border-radius: 3px; background: rgba(244, 238, 228, .07); }
.k-balken i b { display: block; width: 0; height: 100%; border-radius: 3px; background: var(--ac, var(--gold)); transition: width .7s var(--ease); }
.k-balken em { font-style: normal; text-align: right; color: var(--creme); font-variant-numeric: tabular-nums; }
.k-fakt { display: grid; grid-template-columns: 120px 1fr; gap: 9px 14px; }
.k-fakt span { padding-top: 2px; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--creme3); }
.k-fakt div { font: 13px/1.45 var(--sans); color: var(--creme2); }
.k-leer { padding: 14px 8px; font-size: 11px; color: var(--creme3); }
.k-plus { appearance: none; width: 100%; margin-top: 10px; padding: 11px 14px; display: flex; justify-content: space-between; border-radius: 12px; border: 1px dashed color-mix(in srgb, var(--ac, var(--gold)) 60%, transparent); background: color-mix(in srgb, var(--ac, var(--gold)) 8%, transparent); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; transition: transform .12s var(--ease); }
.k-plus:active { transform: scale(.98); }
.k-plus b { font-size: 16px; font-weight: 500; line-height: 1; }
.k-picker { display: none; margin-top: 8px; padding: 10px; border-radius: 14px; border: 1px solid rgba(244, 238, 228, .1); background: rgba(255, 255, 255, .025); }
.k-picker.an { display: block; }
.k-picker input { width: 100%; margin-bottom: 6px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(244, 238, 228, .12); background: rgba(10, 9, 7, .6); color: var(--creme); font: 12px var(--mono); outline: none; user-select: text; -webkit-user-select: text; }
.k-picker input:focus { border-color: var(--ac, var(--gold)); }
.k-picker .k-liste { max-height: 280px; overflow: auto; }
.k-baum { display: flex; flex-direction: column; align-items: center; padding: 6px 0; }
.k-reihe { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.k-ast { display: flex; flex-direction: column; align-items: center; }
.k-strich { width: 1px; height: 14px; background: rgba(244, 238, 228, .18); }
.k-bk { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border-radius: 999px; border: 1px solid rgba(244, 238, 228, .1); background: rgba(255, 255, 255, .03); cursor: pointer; transition: border-color .15s var(--ease); }
.k-bk:hover { border-color: rgba(244, 238, 228, .3); }
.k-bk.an { border-color: var(--ac, var(--gold)); background: color-mix(in srgb, var(--ac, var(--gold)) 12%, transparent); }
.k-bk i { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 50%; background: #1a1712; font: 500 9px var(--sans); font-style: normal; }
.k-bk i svg, .k-bk i img { width: 100%; height: 100%; }
.k-bk b { font: 500 11.5px var(--sans); }
.k-bk span { font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--creme3); }
.k-quali > div { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; font: 13px var(--sans); color: var(--creme2); }
.k-quali i { display: flex; gap: 4px; }
.k-quali i b { width: 14px; height: 6px; border-radius: 2px; background: rgba(244, 238, 228, .1); }
.k-quali i b.an { background: var(--ac, var(--gold)); }
.k-akt, .k-proto { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(244, 238, 228, .05); font: 13px/1.45 var(--sans); color: var(--creme2); }
.k-akt span, .k-proto span { font: 9px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--creme3); }
.k-fuss { margin-top: 18px; padding-top: 12px; border-top: 1px solid rgba(244, 238, 228, .06); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--creme4); }
.k-zeile, .k-mosaik > div, .k-stapel > span { animation: rein .32s var(--ease) both; }
.k.still .k-zeile, .k.still .k-mosaik > div, .k.still .k-stapel > span { animation: none; }
.k.still .k-balken i b { transition: none; }
@keyframes rein { from { opacity: 0; transform: translateY(4px); } }
body.hoch .k { padding: 18px 18px 16px; }
body.hoch .k-titel h2 { font-size: 22px; }
body.hoch .k-fakt { grid-template-columns: 96px 1fr; }
body.hoch .k-balken > div { grid-template-columns: 86px 1fr 30px; }
body.hoch .k-sektor { display: none; }

/* Agenten: Lauf starten, Tages-Pilot */
.k-lauf { appearance: none; display: block; width: 100%; margin: 14px 0 0; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--ac, var(--gold)); background: color-mix(in srgb, var(--ac, var(--gold)) 14%, transparent); color: var(--creme); font: 600 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: transform 160ms var(--ease), background 160ms var(--ease); }
.k-lauf:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .k-lauf:hover { background: color-mix(in srgb, var(--ac, var(--gold)) 26%, transparent); } }
.k-pilot { white-space: pre-line; }