/* Chimera – Design "Klar": Blau-Weiß, IBM Plex Sans (lokal eingebunden, keine externen Schriften) */
@font-face { font-family: Plex; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2212; }
@font-face { font-family: Plex; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2212; }
@font-face { font-family: Plex; font-weight: 600; font-display: swap; src: url(fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2212; }
@font-face { font-family: Plex; font-weight: 700; font-display: swap; src: url(fonts/ibm-plex-sans-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2212; }
@font-face { font-family: Plex; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-sans-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF; }
@font-face { font-family: Plex; font-weight: 600; font-display: swap; src: url(fonts/ibm-plex-sans-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF; }

:root {
  --ink: #14213d; --text: #1f2a44; --leise: #5b6478; --leiser: #8a93a8;
  --canvas: #f5f7fa; --flaeche: #fff; --linie: #e4e8ef; --linie-stark: #cfd6e3;
  --kobalt: #2f5bea; --kobalt-dunkel: #2249c9; --tint: #eaf0fe; --tint-text: #1e3fae; --balken: #c9d6fb;
  --gruen: #178a5b; --gruen-tint: #e5f5ee; --rot: #c8372d; --rot-tint: #fdecea; --amber: #a86408; --amber-tint: #fff4e0;
  --radius: 10px; --radius-klein: 7px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 14px/1.5 Plex, system-ui, sans-serif; color: var(--text); background: var(--canvas); display: flex; min-height: 100vh; font-feature-settings: "tnum"; }
body.ohne-nav { justify-content: center; align-items: center; }
a { color: var(--kobalt); text-decoration: none; } a:hover { text-decoration: underline; }
h1 { font-size: 24px; font-weight: 600; color: var(--ink); margin: 0; letter-spacing: -.01em; }
h2 { font-size: 15px; font-weight: 600; color: var(--ink); margin: 26px 0 10px; }
h3 { font-size: 14px; font-weight: 600; margin: 0 0 8px; }
code { background: #eef1f6; padding: 1px 6px; border-radius: 5px; font-size: 12.5px; }
:focus-visible { outline: 2px solid var(--kobalt); outline-offset: 2px; }
.i { width: 18px; height: 18px; flex: none; }

/* Navigation */
.seitenleiste { width: 232px; flex: none; background: var(--flaeche); border-right: 1px solid var(--linie); padding: 16px 12px; display: flex; flex-direction: column; gap: 1px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.marke { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; color: var(--ink) !important; padding: 4px 10px 14px; text-decoration: none !important; }
.logo { width: 28px; height: 28px; border-radius: 7px; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: 15px; }
.nav-gruppe { font-size: 12px; color: var(--leise); padding: 14px 10px 4px; }
.seitenleiste > a:not(.marke) { display: flex; align-items: center; gap: 11px; padding: 7px 10px; border-radius: var(--radius-klein); color: #2c3752; font-weight: 500; text-decoration: none; }
.seitenleiste > a .i { color: var(--leiser); }
.seitenleiste > a:hover { background: #f1f4f9; }
.seitenleiste > a.aktiv { background: var(--tint); color: var(--kobalt); }
.seitenleiste > a.aktiv .i { color: var(--kobalt); }
.ich { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 12px 4px 0 6px; border-top: 1px solid var(--linie); }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: #dfe6f7; color: var(--kobalt); display: grid; place-items: center; font-weight: 600; flex: none; }
.ich-text { flex: 1; min-width: 0; line-height: 1.25; } .ich-text b { font-weight: 500; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ich-text small { color: var(--leise); font-size: 12px; }
button.symbol { border: none; background: none; padding: 6px; color: var(--leise); border-radius: 6px; cursor: pointer; } button.symbol:hover { background: #f1f4f9; color: var(--ink); }

main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.kopfzeile { height: 58px; display: flex; align-items: center; padding: 0 32px; border-bottom: 1px solid var(--linie); background: var(--flaeche); position: sticky; top: 0; z-index: 4; }
.suche-global { flex: 0 1 440px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--linie); border-radius: 8px; padding: 0 12px; background: var(--canvas); color: var(--leise); }
.suche-global .i { width: 16px; height: 16px; }
.suche-global input { border: none !important; background: transparent !important; padding: 8px 0 !important; outline: none; }
.inhalt { padding: 26px 32px 56px; max-width: 1480px; width: 100%; }
.ohne-nav main { width: 100%; }
.ohne-nav .inhalt { padding: 24px 16px; max-width: none; display: flex; justify-content: center; }
.seitenkopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 20px; }
.seitenkopf p { margin: 4px 0 0; color: var(--leise); }
.aktionen { display: flex; gap: 10px; flex-wrap: wrap; }

/* Flächen */
.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 16px; }
.karte > h2:first-child, .karte > h3:first-child { margin-top: 0; }
.karte .unter { color: var(--leise); font-size: 13px; margin: -6px 0 12px; }
.karte.schmal { width: 380px; }
.login { width: 100%; max-width: 380px; } .login .marke { justify-content: center; padding-bottom: 20px; font-size: 20px; }
.raster-2 { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; margin-bottom: 16px; } .raster-2 > .karte { margin: 0; }
.zweispaltig { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .raster-2, .zweispaltig { grid-template-columns: 1fr; } }

.kacheln { display: grid; grid-template-columns: 1.35fr repeat(3, 1fr); gap: 16px; margin-bottom: 16px; }
.kachel { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 16px 18px; }
.kachel small { color: var(--leise); font-size: 13px; display: block; }
.kachel b { display: block; font-size: 26px; font-weight: 600; color: var(--ink); margin-top: 2px; }
.kachel .zusatz { font-size: 12.5px; color: var(--gruen); }
.kachel.haupt { background: var(--ink); border-color: var(--ink); } .kachel.haupt small { color: #a9b3cc; } .kachel.haupt b { color: #fff; font-size: 32px; } .kachel.haupt .zusatz { color: #9be3bf; }
.kacheln.vier { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .kacheln { grid-template-columns: 1fr 1fr; } }

/* Formulare */
label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 500; color: var(--text); margin-bottom: 12px; flex: 1; min-width: 150px; }
label .hilfe, .hilfe { font-weight: 400; color: var(--leise); font-size: 12.5px; }
label.haken, .haken label { flex-direction: row; align-items: center; gap: 8px; font-weight: 400; min-width: 0; flex: none; margin: 0; }
.haken { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin: 4px 0 12px; }
.reihe { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
input, select, textarea, button { font: inherit; color: inherit; }
input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea { border: 1px solid var(--linie-stark); border-radius: var(--radius-klein); padding: 8px 10px; background: #fff; width: 100%; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--kobalt); box-shadow: 0 0 0 3px var(--tint); }
input[type=checkbox], input[type=radio] { accent-color: var(--kobalt); width: 16px; height: 16px; }
textarea { resize: vertical; }
button, .knopf { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--linie-stark); background: #fff; border-radius: 8px; padding: 8px 14px; font-weight: 500; cursor: pointer; color: var(--text); text-decoration: none !important; white-space: nowrap; }
button:hover, .knopf:hover { border-color: var(--leiser); }
button.primaer, .knopf.primaer { background: var(--kobalt); border-color: var(--kobalt); color: #fff; }
button.primaer:hover, .knopf.primaer:hover { background: var(--kobalt-dunkel); }
button.klein { padding: 4px 10px; font-size: 12.5px; } button.gefahr { color: var(--rot); } button.voll { width: 100%; }
button:disabled { opacity: .55; cursor: wait; }
button .i { width: 16px; height: 16px; }
form.inline { display: inline-flex; gap: 6px; align-items: center; } form.inline select, form.inline input { width: auto; }
.suche { display: flex; gap: 8px; } .suche input { max-width: 520px; }

/* Tabellen */
.tabelle { overflow-x: auto; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); }
.karte .tabelle { border: none; border-radius: 0; margin: 0 -4px; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th, td { text-align: left; padding: 9px 14px; border-bottom: 1px solid var(--linie); vertical-align: top; }
.karte th, .karte td { padding-left: 4px; padding-right: 4px; }
th { font-size: 12.5px; font-weight: 500; color: var(--leise); white-space: nowrap; }
tr:last-child td { border-bottom: none; }
td input, td select { min-width: 90px; }
td.zahl, th.zahl { text-align: right; }
.mini { height: 6px; background: var(--tint); border-radius: 3px; overflow: hidden; margin-top: 6px; } .mini span { display: block; height: 100%; background: var(--kobalt); }

/* Meldungen und Status */
.meldung { padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; }
.meldung.ok { background: var(--gruen-tint); color: var(--gruen); } .meldung.fehler { background: var(--rot-tint); color: var(--rot); } .meldung.hinweis { background: var(--amber-tint); color: var(--amber); }
.leise { color: var(--leise); } .rot { color: var(--rot); display: block; } .gruen { color: var(--gruen); }
.status { font-size: 12px; font-weight: 500; padding: 2px 9px; border-radius: 99px; background: #eef1f6; white-space: nowrap; }
.s-fertig { background: var(--gruen-tint); color: var(--gruen); } .s-fehler { background: var(--rot-tint); color: var(--rot); } .s-laeuft { background: var(--tint); color: var(--kobalt); }
.frage { font-size: 15px; margin-top: 0; color: var(--ink); }

/* Diagramme */
.diagramm { width: 100%; height: auto; display: block; }
.diagramm text { font: 11px Plex, sans-serif; fill: var(--leiser); }
.ring { display: flex; gap: 20px; align-items: center; } .ring svg { width: 140px; flex: none; }
.legende { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 13px; flex: 1; }
.legende li { display: flex; justify-content: space-between; gap: 10px; } .legende i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 8px; }

/* Chips */
.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--tint); color: var(--tint-text); border-radius: 6px; padding: 4px 8px; font-size: 13px; font-weight: 500; }
.chip button { border: none; background: none; padding: 0; color: inherit; display: inline-flex; } .chip button .i { width: 13px; height: 13px; }
.chip.aus { background: var(--rot-tint); color: #a42a22; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .chips:empty { display: none; }

/* Potenzialabfrage */
.pz { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 20px; align-items: start; }
@media (max-width: 1200px) { .pz { grid-template-columns: 1fr; } }
.reiter { display: flex; gap: 2px; border-bottom: 1px solid var(--linie); margin: -18px -20px 18px; padding: 0 12px; }
.reiter button { border: none; border-radius: 0; background: none; padding: 13px 12px 11px; color: var(--leise); font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.reiter button[aria-selected=true] { color: var(--kobalt); border-bottom-color: var(--kobalt); }
.reiter .anzahl { background: #eef1f6; color: var(--leise); border-radius: 99px; font-size: 11.5px; padding: 0 7px; min-width: 20px; }
.reiter button[aria-selected=true] .anzahl { background: var(--tint); color: var(--kobalt); }
.reiter .anzahl:empty { display: none; }
.tafel[hidden] { display: none; }
.tafel .einleitung { color: var(--leise); margin: 0 0 16px; }
.block { border-top: 1px solid var(--linie); padding-top: 16px; margin-top: 4px; }
.block > h3 { display: flex; align-items: center; gap: 8px; }
.kanal { display: flex; background: var(--canvas); border-radius: 8px; padding: 3px; }
.kanal label { flex: 1; margin: 0; min-width: 0; }
.kanal input { position: absolute; opacity: 0; pointer-events: none; }
.kanal span { display: block; text-align: center; padding: 7px 0; border-radius: 6px; color: var(--leise); font-weight: 500; cursor: pointer; }
.kanal input:checked + span { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(20, 33, 61, .14); }
.kanal input:focus-visible + span { outline: 2px solid var(--kobalt); }
.auswahl-suche { position: relative; }
.vorschlaege { position: absolute; left: 0; right: 0; top: calc(100% + 4px); background: #fff; border: 1px solid var(--linie-stark); border-radius: 8px; box-shadow: 0 8px 24px rgba(20, 33, 61, .12); max-height: 260px; overflow-y: auto; z-index: 10; }
.vorschlaege button { display: flex; width: 100%; justify-content: space-between; border: none; border-radius: 0; padding: 8px 12px; font-weight: 400; }
.vorschlaege button:hover, .vorschlaege button.aktiv { background: var(--tint); }
.vorschlaege small { color: var(--leise); }
.vorschlaege .leer { padding: 10px 12px; color: var(--leise); }
.feldwahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px 24px; }
.feldwahl label { flex-direction: row; align-items: center; justify-content: space-between; margin: 0; font-weight: 400; min-width: 0; }
.feldwahl select { width: 112px !important; flex: none; padding: 5px 8px !important; }
.gesperrt { opacity: .6; } .gesperrt .hilfe { color: var(--amber); }
.upload { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.upload input[type=file] { display: none; }
.coreg-block { border: 1px solid var(--linie); border-radius: 8px; padding: 12px 14px; margin-bottom: 10px; }
.coreg-block header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-weight: 600; }
.coreg-block .fragen, .coreg-block .werte { max-height: 190px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.coreg-block .werte { border-top: 1px dashed var(--linie); padding-top: 8px; }
.coreg-block label.haken { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: start; }
.coreg-block label.haken input { margin-top: 3px; }

.ergebnis-spalte { position: sticky; top: 76px; }
.ergebnis { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 22px 22px 18px; }
.ergebnis .zahl-gross { font-size: 54px; font-weight: 600; color: var(--ink); letter-spacing: -.02em; line-height: 1; }
.ergebnis .zahl-gross.alt { color: var(--leiser); }
.ergebnis .zahl-text { color: var(--leise); margin: 6px 0 16px; }
.ergebnis .knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 18px; }
.stufe { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; font-size: 13px; padding: 6px 0; }
.stufe .bar { grid-column: 1 / 3; height: 7px; background: var(--canvas); border-radius: 4px; overflow: hidden; }
.stufe .bar span { display: block; height: 100%; background: var(--balken); }
.stufe .n { text-align: right; } .stufe.ende { font-weight: 600; } .stufe.ende .bar span { background: var(--kobalt); }
.stufe.null { color: var(--rot); }
.art { font-size: 11.5px; font-weight: 500; padding: 0 6px; border-radius: 4px; margin-right: 6px; background: var(--tint); color: var(--tint-text); }
.art.aus { background: var(--rot-tint); color: #a42a22; }

dialog { border: none; border-radius: 12px; padding: 0; width: min(640px, 92vw); box-shadow: 0 24px 64px rgba(20, 33, 61, .3); }
dialog::backdrop { background: rgba(20, 33, 61, .35); }
dialog .kopf { padding: 18px 22px 0; display: flex; justify-content: space-between; align-items: center; } dialog .kopf h2 { margin: 0; }
dialog .rumpf { padding: 16px 22px; } dialog .fuss { padding: 14px 22px; border-top: 1px solid var(--linie); display: flex; justify-content: flex-end; gap: 10px; }

/* Ergänzungen Übersicht / Potenzialabfrage */
button.gross { width: 100%; padding: 10px 14px; font-size: 15px; }
.kachel .zusatz.leise { color: var(--leise); }
.empf-zeile { padding: 7px 0; } .reihe-text { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; }
label.breit { flex: 2.2; }
.kanal.klein { margin: 4px 0 10px; max-width: 520px; } .kanal.klein span { padding: 5px 0; font-size: 13px; }
.optionen { display: grid; gap: 14px; } .optionen label.haken { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.optionen input[type=number], .optionen input[type=date] { width: auto !important; }
input.kurz { width: 90px !important; }
.haken.felder { margin-bottom: 12px; }
.knopf .i, button .i { width: 16px; height: 16px; vertical-align: -3px; }
.upload { margin-bottom: 10px; } .upload .knopf { cursor: pointer; } .upload .hilfe.ok { color: var(--gruen); } .upload .hilfe.fehler { color: var(--rot); }
.chip.nur { } .art + .art { margin-left: -2px; }
.stufe .name { min-width: 0; }
.ergebnis .veraltet { color: var(--amber); font-size: 13px; margin: -10px 0 12px; }

@media (max-width: 800px) { .seitenleiste { display: none; } .inhalt { padding: 18px 16px 40px; } .kopfzeile { padding: 0 16px; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

.lbl { display: flex; align-items: center; gap: 0; } .lbl .art { margin-right: 7px; }
.block > h3 .art { margin-right: 0; }
.upload label.knopf { flex: none; display: inline-flex; flex-direction: row; align-items: center; gap: 8px; margin: 0; width: auto; font-weight: 500; }
.kanal.klein { margin-top: 10px; }
.optionen input.kurz { width: 90px !important; }
#export .reihe + label, #export-status:not(:empty) { margin-top: 10px; }
.haken.spalte { flex-direction: column; align-items: flex-start; gap: 8px; margin: 4px 0 16px; }
.hilfe.warn { color: var(--amber); margin-top: 12px; }
.karte .unter + form { margin-top: 4px; }
.kopf-zeile { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; } .kopf-zeile h2 { margin: 0; }
.karte.quelle textarea { font: inherit; }