/* Konnector Leitstelle – Gestaltung angelehnt an James (Konnector CRM). Keine externen Schriften (DSGVO). */
:root {
  --navy: #111318; --blau: #0A63F5; --blau-dk: #0753D1; --blau-lt: #E8F0FF; --blau-br: #C9DAFF; --blau-text: #0743A8;
  --flaeche: #FFFFFF; --grund: #F5F6F8; --grund2: #EEF0F3; --grund3: #F7F8FA; --rand: #ECEEF2; --rand2: #DDE1E7;
  --text: #111318; --text2: #30343B; --leise: #5F6672;
  --rot: #B42318; --rot-lt: #FDECEC; --gruen: #067647; --gruen-lt: #E6F6EC; --amber: #A64B00; --amber-lt: #FEF1DE;
  --r: 12px; --rl: 18px;
  --schatten: 0 1px 2px rgba(16,24,40,.04), 0 6px 20px rgba(16,24,40,.04);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--grund); color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased;
}
a { color: #0A5BE0; }
a:hover { color: var(--blau-text); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid #93B4F5; outline-offset: 2px; }
h1 { margin: 0; font-size: 34px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
h2 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
h3 { margin: 0; font-size: 16px; font-weight: 700; }
p { margin: 0; }
.leise { color: var(--leise); }
.klein { font-size: 13.5px; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; }
.caps { font-size: 12px; letter-spacing: .09em; text-transform: uppercase; color: var(--leise); font-weight: 600; }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Aufbau: Seitenleiste links, rechts Kopfleiste und Inhalt */
.app { display: flex; min-height: 100vh; align-items: stretch; }
.seitenleiste { flex: 0 0 272px; background: var(--grund3); border-right: 1px solid #E6E8EC; display: flex; flex-direction: column; padding: 22px 14px 16px; }
.seitenleiste > * { flex: none; }
.marke { display: flex; align-items: center; gap: 12px; padding: 0 8px 18px; color: var(--text); text-decoration: none; }
.marke:hover { color: var(--text); }
.logo { width: 42px; height: 42px; border-radius: 12px; background: linear-gradient(135deg, #2F7BFF, #5B4DFF); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; box-shadow: 0 4px 12px rgba(47,123,255,.35); flex: none; }
.marke-text { display: flex; flex-direction: column; line-height: 1.2; }
.marke-text strong { font-size: 17px; letter-spacing: .02em; }
.marke-text span { font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--leise); font-weight: 600; }
.nav { display: flex; flex-direction: column; gap: 3px; position: sticky; top: 16px; }
.nav-gruppe { padding: 16px 12px 6px; font-size: 12px; letter-spacing: .09em; text-transform: uppercase; color: var(--leise); font-weight: 600; }
.nav a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 14px; border-radius: var(--r); color: var(--text2); text-decoration: none; font-size: 15.5px; }
.nav a:hover { background: var(--grund2); color: var(--text); }
.nav a.aktiv { background: var(--blau); color: #fff; font-weight: 600; box-shadow: 0 2px 8px rgba(10,99,245,.28); }
.nav a span.n { margin-left: auto; min-width: 22px; padding: 1px 7px; border-radius: 999px; background: #E8EAEE; color: #4B5160; font-size: 12px; font-weight: 600; text-align: center; }
.nav a span.n.rot { background: #E5484D; color: #fff; }
.nav a.aktiv span.n { background: rgba(255,255,255,.22); color: #fff; }
.nav svg { flex: none; width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.nutzerkarte { margin-top: auto; padding-top: 12px; display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid #E6E8EC; border-radius: 16px; background: #fff; position: sticky; bottom: 16px; }
.avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #5B6CFF, #7C4DFF); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex: none; }
.nutzer-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.nutzer-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nutzer-text span { color: var(--leise); font-size: 13.5px; }
.abmelden { margin-left: auto; color: var(--leise) !important; font-weight: 500 !important; }
.spalte-rechts { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.kopfleiste { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 16px 40px; border-bottom: 1px solid #E6E8EC; background: rgba(245,246,248,.92); position: sticky; top: 0; z-index: 20; backdrop-filter: blur(6px); }
.seitentitel { flex: 1 1 200px; font-size: 22px; }
.suche { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 16px; border-radius: 999px; background: #ECEEF2; flex: 0 1 380px; min-width: 200px; margin: 0; }
.suche svg { width: 17px; height: 17px; fill: none; stroke: #4B5160; stroke-width: 1.8; stroke-linecap: round; flex: none; }
.suche input { border: 0; background: transparent; flex: 1; min-width: 0; outline-offset: 6px; }
.glocke { position: relative; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text2); text-decoration: none; }
.glocke:hover { background: var(--grund2); color: var(--text); }
.glocke svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.glocke .zaehler { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #E5484D; color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.glocke .zaehler[data-null] { display: none; }
.haupt { flex: 1 1 auto; min-width: 0; width: 100%; max-width: 1560px; margin: 0 auto; display: flex; flex-direction: column; gap: 28px; padding: 36px 40px 64px; }
.haupt:focus { outline: none; }

/* Bausteine */
.kopfzeile { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.kopfzeile p { margin-top: 6px; color: #4B5160; font-size: 16.5px; }
.knoepfe { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.karte { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--rl); box-shadow: var(--schatten); padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.karte > h2 { font-size: 19px; }
.karte > p.leise.klein { margin-top: -6px; }
.karte.eng { padding: 0; overflow: hidden; }
.karte.eng > .karte-kopf { padding: 22px 24px 8px; }
.karte.betont { border: 2px solid var(--blau-br); }
.karte-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 20px; }
.raster.klein { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px; }
.kachel { display: flex; flex-direction: column; gap: 6px; text-align: left; background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--rl); box-shadow: var(--schatten); padding: 22px 24px; cursor: pointer; text-decoration: none; color: var(--text); }
.kachel:hover { border-color: #D5DBE5; color: var(--text); box-shadow: 0 2px 4px rgba(16,24,40,.05), 0 10px 28px rgba(16,24,40,.07); }
.kachel .titel { font-size: 14.5px; color: #4B5160; }
.kachel .wert { font-size: 34px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.kachel .sub { font-size: 14px; font-weight: 600; color: var(--text2); }
.sub.rot { color: var(--rot); } .sub.amber { color: var(--amber); } .sub.blau { color: #0A5BE0; } .sub.leise { color: var(--text2); }

.btn, .btn-sek, .btn-gefahr { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 18px; border-radius: 999px; font-size: 15px; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; border: 0; }
.btn { background: var(--blau); color: #fff; }
.btn:hover { background: var(--blau-dk); color: #fff; }
.btn-sek { background: var(--grund2); color: #1F2329; }
.btn-sek:hover { background: #E2E5EA; color: #1F2329; }
.btn-gefahr { background: var(--rot-lt); color: var(--rot); }
.btn-gefahr:hover { background: #FAD9D7; color: var(--rot); }
.btn:disabled, .btn-sek:disabled, .btn-gefahr:disabled { opacity: .5; cursor: not-allowed; }
.klein-btn { min-height: 36px; padding: 0 14px; font-size: 14px; }
.link-btn { background: none; border: 0; padding: 0; color: #0A5BE0; font-weight: 600; text-align: left; cursor: pointer; min-height: 32px; }
.link-btn:hover { text-decoration: underline; }

.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 3px 11px; border-radius: 999px; white-space: nowrap; background: var(--grund2); color: #3F4550; }
.pill .punkt { width: 8px; height: 8px; border-radius: 999px; background: currentColor; }
.p-ok { background: var(--gruen-lt); color: var(--gruen); }
.p-achtung { background: var(--amber-lt); color: var(--amber); }
.p-stoerung { background: var(--rot-lt); color: var(--rot); }
.p-wartung, .p-info { background: var(--blau-lt); color: var(--blau-text); }
.p-unbekannt { background: var(--grund2); color: #3F4550; }
.version { font-size: 13px; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; background: var(--grund2); color: #3F4550; }
.version.ok { background: var(--gruen-lt); color: var(--gruen); }
.version.alt { background: var(--amber-lt); color: var(--amber); }

.chips { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid #E1E4EA; background: #fff; cursor: pointer; font-weight: 600; font-size: 14px; color: var(--text2); }
.chip:hover { border-color: #C9CFD8; }
.chip.aktiv { background: var(--navy); border-color: var(--navy); color: #fff; }
.chip b { font-variant-numeric: tabular-nums; opacity: .7; }
.kunde-chip { min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--rand2); background: #fff; cursor: pointer; font-size: 14px; }
.kunde-chip:hover { border-color: var(--blau); }

.zeilen { display: flex; flex-direction: column; gap: 10px; }
.zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--rand); border-radius: 14px; background: #fff; }
.zeile .rumpf { flex: 1 1 280px; min-width: 0; }
.zeile .rumpf .t { font-weight: 600; }
.zeile .rumpf .s { font-size: 13.5px; color: var(--leise); }

.tabelle-box { overflow-x: auto; }
.tabelle { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.tabelle th { text-align: left; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; color: var(--leise); padding: 12px; border-bottom: 1px solid var(--rand); white-space: nowrap; }
.tabelle td { padding: 13px 12px; border-bottom: 1px solid #F1F2F5; vertical-align: middle; }
.tabelle tbody tr:hover td { background: #FAFBFD; }
.tabelle .unter { font-size: 13px; color: var(--leise); }
.karte.eng .tabelle th:first-child, .karte.eng .tabelle td:first-child { padding-left: 24px; }
.fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 24px; border-top: 1px solid var(--rand); }

.balken-zeile { display: flex; flex-direction: column; gap: 6px; }
.balken-zeile .oben { display: flex; justify-content: space-between; gap: 8px; }
.balken { height: 8px; background: var(--grund2); border-radius: 999px; overflow: hidden; }
.balken > div { height: 8px; background: var(--blau); border-radius: 999px; }
.balken > div.amber { background: #E08A00; }

.feld { width: 100%; min-height: 44px; padding: 8px 14px; border: 1px solid var(--rand2); border-radius: var(--r); background: #fff; }
.feld:focus { border-color: var(--blau); }
textarea.feld { min-height: 84px; resize: vertical; }
.formular { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.formular .breit { grid-column: 1 / -1; }
.feldgruppe { display: flex; flex-direction: column; gap: 6px; }
.feldgruppe label { font-weight: 600; font-size: 13.5px; color: var(--text2); }
.feldgruppe .hilfe { font-size: 12.5px; color: var(--leise); }
fieldset { border: 1px solid var(--rand); border-radius: 14px; padding: 14px 18px; margin: 0; }
legend { font-weight: 700; padding: 0 6px; }

.hinweis { padding: 13px 16px; border-radius: 14px; background: var(--blau-lt); color: var(--blau-text); }
.hinweis.amber { background: var(--amber-lt); color: #7A3A00; }
.hinweis.rot { background: var(--rot-lt); color: #7A1A14; }
.hinweis.gruen { background: var(--gruen-lt); color: var(--gruen); }
.leer { padding: 28px; text-align: center; color: var(--leise); background: var(--grund3); border-radius: 14px; }
.laden { padding: 40px; text-align: center; color: var(--leise); }

.tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 14px; background: #ECEEF2; align-self: flex-start; }
.tab { min-height: 38px; padding: 0 16px; border: 0; border-radius: 10px; background: transparent; color: var(--text2); font-weight: 600; font-size: 14.5px; cursor: pointer; }
.tab:hover { color: var(--text); }
.tab.aktiv { background: #fff; color: var(--text); box-shadow: 0 1px 3px rgba(16,24,40,.12); }

.liste-dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 28px; margin: 0; }
.liste-dl div { display: flex; flex-direction: column; gap: 2px; padding: 11px 0; border-bottom: 1px solid #F1F2F5; }
.liste-dl dt { font-size: 12.5px; color: var(--leise); }
.liste-dl dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; white-space: pre-line; }
.wertzeile { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #F1F2F5; }
.wertzeile span:first-child { color: var(--leise); }
.wertzeile span:last-child { font-weight: 600; text-align: right; overflow-wrap: anywhere; }

/* Tracker */
.board { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; align-items: start; }
.spalte { background: #ECEEF2; border-radius: var(--rl); padding: 14px; display: flex; flex-direction: column; gap: 10px; min-height: 120px; }
.spalte-kopf { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px; }
.eintrag { background: #fff; border: 1px solid var(--rand); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.eintrag .t { font-weight: 600; text-align: left; }
.eintrag .meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; color: var(--leise); }
.eintrag .aktionen { display: flex; gap: 6px; justify-content: space-between; }
.typ { font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: 999px; }
.typ-wunsch { background: var(--blau-lt); color: var(--blau-text); }
.typ-roadmap { background: var(--gruen-lt); color: var(--gruen); }
.typ-aufgabe { background: var(--grund2); color: #3F4550; }
.typ-fehler { background: var(--rot-lt); color: var(--rot); }
.prio-hoch { color: var(--rot); font-weight: 700; }
.ziel-gruppe { display: flex; flex-direction: column; gap: 10px; }
.fortschritt { height: 8px; background: var(--grund2); border-radius: 999px; overflow: hidden; flex: 1 1 120px; max-width: 240px; }
.fortschritt > div { height: 8px; background: #22A05B; }

/* Dialog und Hinweisleiste */
dialog { border: 0; border-radius: 22px; padding: 0; width: min(860px, calc(100vw - 32px)); max-height: calc(100vh - 48px); box-shadow: 0 24px 64px rgba(17,19,24,.28); }
dialog::backdrop { background: rgba(17,19,24,.42); }
.dialog-innen { padding: 26px 28px; display: flex; flex-direction: column; gap: 16px; }
.dialog-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.dialog-kopf h2 { font-size: 22px; }
.toast { position: fixed; right: 20px; bottom: 20px; max-width: min(520px, calc(100vw - 40px)); background: var(--navy); color: #fff; border-radius: 14px; padding: 13px 18px; box-shadow: 0 10px 32px rgba(0,0,0,.25); z-index: 1000; }
.toast.fehler { background: #B42318; }

/* Anmeldung */
.anmeldung { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--grund); }
.anmeldung .karte { width: min(440px, 100%); padding: 32px; gap: 16px; }
.anmeldung .marke { padding: 0 0 6px; }
.anmeldung h1 { font-size: 30px; }

.stapel { display: flex; flex-direction: column; gap: 28px; min-width: 0; }

/* Übersicht */
.begruessung { display: flex; flex-direction: column; gap: 6px; }
.begruessung h1 { font-size: 38px; letter-spacing: -.025em; }
.begruessung p { font-size: 17px; color: #4B5160; }
.lage { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; padding: 20px 24px; border-radius: var(--rl); border: 1px solid; box-shadow: var(--schatten); }
.lage.stoerung { background: #FFF6F6; border-color: #F6D3D3; color: #7A1A14; }
.lage.achtung { background: #FFF9F0; border-color: #F5DDB8; color: #7A3A00; }
.lage.ok { background: #F3FBF6; border-color: #CDEBD7; color: var(--gruen); }
.lage .punkt { width: 12px; height: 12px; border-radius: 50%; flex: none; background: currentColor; }
.lage.stoerung .punkt { background: #E5484D; }
.lage .rumpf { flex: 1 1 320px; display: flex; flex-direction: column; min-width: 0; }
.lage strong { font-size: 17px; }
.kacheln6 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.kachel.rot .sub { color: var(--rot); } .kachel.amber .sub { color: var(--amber); }
.stufen { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; }
.stufe { flex: 1 1 220px; display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; text-decoration: none; color: var(--text); background: #fff; border: 1px solid var(--rand); border-radius: var(--rl); box-shadow: var(--schatten); }
.stufe:hover { border-color: #D5DBE5; color: var(--text); }
.stufe .kopf-stufe { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.stufe .anzahl { font-size: 30px; font-weight: 700; line-height: 1.15; }
.stufe .namen { font-size: 13.5px; color: var(--leise); }
.stufen .pfeil { align-self: center; color: #9AA1AC; font-size: 20px; }
.abschnitt-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; }
.abschnitt-kopf h2 { font-size: 24px; letter-spacing: -.015em; }
.zwei { display: flex; flex-wrap: wrap; gap: 20px; }
.zwei > .breit { flex: 2 1 520px; min-width: 0; }
.zwei > .schmal { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.einrichtung { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 16px; border: 1px dashed #C9CFD8; border-radius: 999px; background: #fff; color: var(--text2); text-decoration: none; font-size: 14px; }
.einrichtung:hover { border-color: var(--blau); color: var(--text); }
.einrichtung .spur { width: 70px; height: 6px; border-radius: 3px; background: var(--grund2); overflow: hidden; display: inline-block; }
.einrichtung .spur span { display: block; height: 6px; background: #22A05B; }
.gruppe-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.gruppe-zeile > strong { width: 84px; flex: none; }
.chip-version { border: 1px solid var(--rand2); background: #fff; border-radius: 999px; padding: 4px 12px; font-size: 13.5px; color: var(--text); text-decoration: none; }
.chip-version.alt { border-color: #F2C98A; background: var(--amber-lt); }
.mini-balken { height: 6px; border-radius: 3px; background: var(--grund2); overflow: hidden; margin-top: 5px; }
.mini-balken > div { height: 6px; background: var(--blau); }
.mini-balken > div.amber { background: #E08A00; } .mini-balken > div.rot { background: #D92D20; }
.gut { color: var(--gruen); font-weight: 600; } .schlecht { color: var(--rot); font-weight: 600; } .warn { color: var(--amber); font-weight: 600; } .grau { color: var(--leise); }
.anbindung { display: flex; align-items: center; gap: 10px; padding: 14px; border: 1px solid var(--rand); border-radius: 14px; background: #fff; }
.anbindung:hover { border-color: #D5DBE5; }
.anbindung .punkt, .aktivitaet .punkt { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.aktivitaet { display: flex; flex-direction: column; gap: 14px; }
.aktivitaet > div { display: flex; gap: 10px; align-items: flex-start; }
.aktivitaet .punkt { margin-top: 7px; }

/* Aufklappbare Listen */
details.aufklapp { border: 1px solid var(--rand); border-radius: 14px; padding: 12px 16px; background: var(--grund3); }
details.aufklapp > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; cursor: pointer; min-height: 32px; font-weight: 600; }
details.aufklapp > summary::marker { color: var(--leise); }

/* Speicher */
.stapelbalken { display: flex; height: 30px; border-radius: 10px; overflow: hidden; }
.stapelbalken > div { height: 100%; }
.legende-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #F1F2F5; }
.legende-zeile .farbe { width: 12px; height: 12px; border-radius: 4px; flex: none; }
.legende-zeile .rumpf { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; }
.verlauf { display: flex; align-items: flex-end; gap: 3px; height: 130px; border-bottom: 1px solid var(--rand2); padding-top: 8px; }
.verlauf > div { flex: 1 1 0; background: #9DBDFE; border-radius: 3px 3px 0 0; min-height: 2px; }
.verlauf > div.letzt { background: #E08A00; }

/* Updates per Knopf */
.protokoll { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 60vh; overflow: auto; background: var(--grund3); border: 1px solid var(--rand); border-radius: var(--r); padding: 14px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.5; }
.schritte { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.schritte li { padding: 7px 14px; border-radius: 999px; background: var(--grund2); color: #4B5160; font-size: 14px; font-weight: 600; }
.schritte li.fertig { background: var(--gruen-lt); color: var(--gruen); }
.schritte li.jetzt { background: var(--blau); color: #fff; }
.auswahl-liste { max-height: 320px; overflow: auto; border: 1px solid var(--rand); border-radius: 14px; padding: 4px 14px; background: #fff; }
.auswahl-liste label { display: flex; align-items: center; gap: 10px; min-height: 44px; border-bottom: 1px solid #F1F2F5; }
.auswahl-liste label:last-child { border-bottom: 0; }
.auswahl-liste input, .haken input { width: 18px; height: 18px; flex: none; }
.haken { display: flex; align-items: flex-start; gap: 10px; }

@media (max-width: 1100px) {
  .kopfleiste { padding: 14px 24px; }
  .haupt { padding: 28px 24px 56px; }
}
@media (max-width: 960px) {
  .app { flex-direction: column; }
  .seitenleiste { flex: none; border-right: 0; border-bottom: 1px solid #E6E8EC; padding: 14px 12px; }
  .marke { padding-bottom: 8px; }
  .nav { position: static; flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .nav-gruppe { display: none; }
  .nav a { min-height: 40px; padding: 0 12px; font-size: 14.5px; }
  .nutzerkarte { position: static; margin-top: 12px; }
  .kopfleiste { position: static; }
  .haupt { padding: 22px 16px 48px; }
}
@media (max-width: 760px) {
  h1 { font-size: 26px; }
  .begruessung h1 { font-size: 30px; }
  .kachel .wert { font-size: 28px; }
}