/* ITIL-Prozesslandkarte – Stylesheet (ohne externe Abhängigkeiten) */

:root {
    --grund: #f3f5f8;
    --flaeche: #ffffff;
    --text: #1d2733;
    --text-leise: #5b6775;
    --linie: #d8dee6;
    --flaeche-2: #f8fafc;
    --linie-stark: #cfd4dc;
    --primaer: #1f4e79;
    --primaer-text: #1f4e79;
    --primaer-hell: #e7eef6;
    --gefahr: #b42318;
    --ok: #1f7a4d;
    --fehler-bg: #fdeceb; --fehler-text: #7a1610; --fehler-linie: #f2b8b5;
    --ok-bg: #ecfdf3;     --ok-text: #05603a;     --ok-linie: #a6f4c5;
    --warn-bg: #fffaeb;   --warn-text: #93370d;   --warn-linie: #fedf89;
    --hinweis-bg: #eef5fc; --hinweis-linie: #b9d3ee;
    color-scheme: light;

    --g-general: #0f766e;
    --g-service: #1d4ed8;
    --g-technical: #7c3aed;

    --a-plan: #2563eb;
    --a-improve: #16a34a;
    --a-engage: #d97706;
    --a-design-transition: #9333ea;
    --a-obtain-build: #0891b2;
    --a-deliver-support: #dc2626;

    --l0: #e5e8ec;
    --l1: #d64545;
    --l2: #e8883a;
    --l3: #e3c13b;
    --l4: #8cc152;
    --l5: #2f8f57;

    --radius: 8px;
    --schatten: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
    font-size: 15px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    color: var(--text);
    background: var(--grund);
    line-height: 1.45;
}
a { color: var(--primaer-text); }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5rem; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; margin-top: 1rem; }
small { font-weight: 400; color: var(--text-leise); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* Kopf und Navigation --------------------------------------------- */
.kopf { background: var(--primaer); color: #fff; }
.kopf-inner { max-width: 1400px; margin: 0 auto; padding: .6rem 1rem; display: flex; flex-wrap: wrap; gap: .5rem 2rem; align-items: center; justify-content: space-between; }
.marke { display: flex; gap: .75rem; align-items: center; color: #fff; text-decoration: none; }
.marke small { display: block; color: #c9d7e6; font-size: .8rem; }
.marke-logo { width: 34px; height: 34px; border-radius: 6px; background:
    linear-gradient(135deg, var(--a-plan) 0 33%, var(--a-engage) 33% 66%, var(--a-improve) 66%); border: 2px solid #fff; }
.marke { margin-right: auto; }
.hauptnav { background: #173c5e; }
.hauptnav .kopf-inner { padding-top: 0; padding-bottom: 0; }
.nav-gruppe { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem; }
.nav-titel { color: #9fb7d0; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; margin-right: .3rem; }
.hauptnav a { color: #dbe6f1; text-decoration: none; padding: .55rem .8rem; border-bottom: 3px solid transparent; }
.hauptnav a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.hauptnav a[aria-current="page"] { color: #fff; border-bottom-color: #f59e0b; font-weight: 600; }
.nav-verwaltung a { font-size: .9rem; }

/* Amtswahl und Benutzermenü */
.amtwahl select { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .35); max-width: 22rem; font-weight: 600; }
.amtwahl select option { color: var(--text); background: var(--flaeche); }
.amtwahl select:disabled { opacity: 1; appearance: none; }
.benutzermenue { position: relative; }
.benutzermenue > summary { list-style: none; display: flex; align-items: center; gap: .5rem; cursor: pointer; padding: .3rem .4rem; border-radius: 6px; }
.benutzermenue > summary::-webkit-details-marker { display: none; }
.benutzermenue > summary:hover { background: rgba(255, 255, 255, .12); }
.avatar { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--flaeche); color: var(--primaer-text); font-weight: 700; }
.menue { position: absolute; right: 0; top: calc(100% + .4rem); z-index: 20; min-width: 16rem; background: var(--flaeche); color: var(--text); border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(16, 24, 40, .18); padding: .4rem; display: flex; flex-direction: column; }
.menue-kopf { padding: .5rem .6rem .6rem; border-bottom: 1px solid var(--linie); margin-bottom: .3rem; display: flex; flex-direction: column; }
.menue a, .menue button { display: block; width: 100%; text-align: left; padding: .5rem .6rem; border: 0; background: none; font: inherit; color: var(--text); text-decoration: none; border-radius: 4px; cursor: pointer; }
.menue a:hover, .menue button:hover { background: var(--primaer-hell); }
.menue form { margin: 0; }
.rollenliste { list-style: none; padding: 0; margin: .4rem 0 0; font-size: .82rem; }
.rollenliste li { padding: .1rem 0; }

/* Anmeldung */
.anmeldung { max-width: 26rem; margin: 2rem auto; }
.formular-schmal { max-width: 46rem; }
.festlegungen { margin-top: .75rem; padding: .6rem .8rem; background: var(--primaer-hell); border-left: 4px solid var(--primaer); border-radius: 4px; max-width: 75ch; }

/* Rollen */
.rolle { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; padding: .1rem .5rem; border-radius: 999px; border: 1px solid; white-space: nowrap; }
.rolle-sm_leitung { color: var(--fehler-text); border-color: var(--fehler-linie); background: var(--fehler-bg); }
.rolle-praktik_owner { color: #1e3a8a; border-color: #bfd0f5; background: var(--flaeche-2); }
.rolle-praktik_manager { color: #0f5d58; border-color: #a7e0da; background: #ecfaf8; }
.rolle-wertstrom_owner { color: #6b21a8; border-color: #dcc6f2; background: #f7f0fd; }
.rolle-bewertung { color: var(--warn-text); border-color: var(--warn-linie); background: var(--warn-bg); }
.rolle-leser { color: var(--text-leise); border-color: var(--linie-stark); background: var(--flaeche-2); }
.rolle-systemadmin { color: #fff; border-color: #1d2733; background: #1d2733; }
.rollen-chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.rollen-chips form { display: inline; margin: 0; }
.chip-x { border: 0; background: none; cursor: pointer; padding: 0 .1rem; color: inherit; font-size: .75rem; opacity: .6; }
.chip-x:hover { opacity: 1; }
.rollenmodell { margin: 0; display: flex; flex-direction: column; gap: .6rem; }
.rollenmodell dd { margin: .2rem 0 0; font-size: .88rem; color: var(--text-leise); }

/* Verwaltung aktive Praktiken */
.praktiken-auswahl { margin: .5rem 0; }
.praktiken-auswahl fieldset { border-top: 3px solid var(--g-farbe); }
.praktik-wahl { align-items: flex-start !important; padding: .3rem 0; border-bottom: 1px dashed var(--linie); }
.praktik-wahl input { margin-top: .25rem; }
.praktik-wahl .zusatz { display: block; font-size: .75rem; }
.btn-link { border: 0; background: none; color: var(--primaer-text); text-decoration: underline; cursor: pointer; font: inherit; font-size: .8rem; padding: 0; margin-bottom: .3rem; }

.inhalt { max-width: 1400px; margin: 0 auto; padding: 1.25rem 1rem 2rem; }
.fuss { max-width: 1400px; margin: 0 auto; padding: 1rem; color: var(--text-leise); font-size: .8rem; border-top: 1px solid var(--linie); }

/* Grundbausteine -------------------------------------------------- */
.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: var(--schatten); padding: 1rem 1.25rem; margin-bottom: 1rem; min-width: 0; }
.karte-kopf { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.karte-kopf h1, .karte-kopf h2 { margin: 0; }
.seitenkopf { margin-bottom: 1rem; }
.untertitel { color: var(--text-leise); max-width: 75ch; margin: .25rem 0 0; }
.hilfe { color: var(--text-leise); font-size: .85rem; margin: .25rem 0; }
.leer { color: var(--text-leise); font-style: italic; }
.en { font-size: .9rem; font-weight: 400; color: var(--text-leise); }
.pfad { font-size: .85rem; color: var(--text-leise); margin-bottom: .5rem; }
.kennung { font-family: Consolas, monospace; font-size: .9em; background: var(--primaer-hell); color: var(--primaer-text); padding: .05rem .4rem; border-radius: 4px; }

.raster-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); gap: 0 1rem; }
.raster-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 0 1rem; }

.hinweis { padding: .7rem 1rem; border-radius: var(--radius); margin-bottom: 1rem; border: 1px solid; }
.hinweis-ok { background: var(--ok-bg); border-color: var(--ok-linie); color: var(--ok-text); }
.hinweis-fehler { background: var(--fehler-bg); border-color: var(--fehler-linie); color: var(--fehler-text); }

.btn { display: inline-flex; align-items: center; gap: .3rem; padding: .45rem .9rem; border: 1px solid var(--linie); background: var(--flaeche); color: var(--text); border-radius: 6px; font: inherit; cursor: pointer; text-decoration: none; }
.btn:hover { border-color: var(--primaer); }
.btn-primaer { background: var(--primaer); color: #fff; border-color: var(--primaer); }
.btn-primaer:hover { background: #173c5e; }
.btn-gefahr { color: var(--gefahr); }
.btn-gefahr:hover { border-color: var(--gefahr); background: var(--fehler-bg); }
.btn-leise { border-color: transparent; background: transparent; }
.btn-icon { border: 1px solid var(--linie); background: var(--flaeche); border-radius: 4px; width: 2rem; height: 2rem; cursor: pointer; font: inherit; }
.btn-icon:hover { border-color: var(--primaer); }
.aktionen { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.aktionen form { margin: 0; }
:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }

/* Tabellen -------------------------------------------------------- */
.tabelle { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabelle th, .tabelle td { text-align: left; padding: .45rem .5rem; border-bottom: 1px solid var(--linie); vertical-align: top; }
.tabelle th { font-weight: 600; color: var(--text-leise); font-size: .82rem; background: var(--flaeche-2); }
.tabelle tbody tr:hover { background: var(--flaeche-2); }
.tabelle input, .tabelle select { width: 100%; }
.tabelle-rollen { overflow-x: auto; }

.status { display: inline-block; padding: .05rem .5rem; border-radius: 999px; font-size: .8rem; border: 1px solid; white-space: nowrap; }
.status-entwurf { color: var(--text-leise); border-color: var(--linie-stark); background: var(--flaeche-2); }
.status-in_abstimmung { color: var(--warn-text); border-color: var(--warn-linie); background: var(--warn-bg); }
.status-in_kraft { color: var(--ok-text); border-color: var(--ok-linie); background: var(--ok-bg); }
.status-ausser_kraft { color: var(--fehler-text); border-color: var(--fehler-linie); background: var(--fehler-bg); text-decoration: line-through; }

.eckdaten { display: flex; flex-wrap: wrap; gap: .5rem 2rem; margin: .75rem 0 0; }
.eckdaten dt { font-size: .78rem; color: var(--text-leise); }
.eckdaten dd { margin: 0; font-weight: 600; }
.eckdaten-liste { flex-direction: column; margin-top: 1rem; }
.fliesstext { max-width: 75ch; }
.liste-kompakt { margin: 0; padding-left: 1.2rem; }
.liste-kompakt li { margin: .2rem 0; }

/* Formulare ------------------------------------------------------- */
.formular { display: flex; flex-direction: column; gap: .8rem; }
.formular label { display: flex; flex-direction: column; gap: .25rem; font-size: .88rem; font-weight: 600; flex: 1; min-width: 0; }
.formular .zeile { display: flex; flex-wrap: wrap; gap: .8rem; align-items: flex-end; }
.formular .schmal { flex: 0 1 12rem; }
.formular .breit { flex: 2 1 18rem; }
input[type=text], input[type=search], input[type=password], input[type=email], select, textarea {
    font: inherit; font-weight: 400; padding: .45rem .55rem; border: 1px solid var(--linie-stark); border-radius: 6px; background: var(--flaeche); color: var(--text); width: 100%;
}
textarea { resize: vertical; }
fieldset { border: 1px solid var(--linie); border-radius: var(--radius); padding: .75rem 1rem 1rem; margin: 0; min-width: 0; }
legend { font-weight: 600; padding: 0 .3rem; }
label.kontrolle { flex-direction: row; align-items: center; gap: .45rem; font-weight: 400; }
.pflicht { color: var(--gefahr); }
.formular-eng { gap: .6rem; margin-bottom: 1rem; }
.filter { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; margin-bottom: 1rem; }
.filter label { display: flex; flex-direction: column; font-size: .82rem; font-weight: 600; gap: .2rem; }
details > summary { cursor: pointer; }
details > summary h2 { display: inline; }

.wdh-aktionen { white-space: nowrap; display: flex; gap: .25rem; align-items: flex-end; }
.schritte-form { list-style: none; padding: 0; margin: 0 0 .75rem; display: flex; flex-direction: column; gap: .75rem; counter-reset: schritt; }
.schritt-form { border: 1px solid var(--linie); border-left: 4px solid var(--primaer); border-radius: 6px; padding: .75rem; display: flex; flex-direction: column; gap: .6rem; background: var(--flaeche-2); }
.auswahl summary { font-size: .88rem; }
.auswahl-text { color: var(--text-leise); }
.auswahl-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: .5rem; margin-top: .5rem; }
.auswahl-liste fieldset { padding: .4rem .7rem; }
.auswahl-liste label.kontrolle { font-size: .85rem; padding: .1rem 0; }

/* Reifegrad-Kennzeichen ------------------------------------------- */
.lvl { display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.6rem; padding: 0 .3rem; border-radius: 4px; font-weight: 700; font-size: .85rem; color: #fff; }
.lvl-0 { background: var(--l0); color: var(--text-leise); }
.lvl-1 { background: var(--l1); }
.lvl-2 { background: var(--l2); }
.lvl-3 { background: var(--l3); color: #3d3200; }
.lvl-4 { background: var(--l4); color: #1d3a08; }
.lvl-5 { background: var(--l5); }
.abstand { color: var(--gefahr); }

/* Service-Wertsystem --------------------------------------------- */
.svs { display: flex; align-items: stretch; gap: .75rem; padding: .75rem; }
.svs-ein, .svs-aus { display: grid; place-items: center; text-align: center; padding: .5rem .9rem; border-radius: 6px; font-weight: 600; font-size: .85rem; background: var(--primaer-hell); color: var(--primaer-text); position: relative; }
.svs-aus { background: var(--ok-bg); color: var(--ok); }
.svs-kern { flex: 1; border: 2px solid var(--primaer); border-radius: 8px; padding: .5rem .75rem; min-width: 0; }
.svs-titel { font-weight: 700; color: var(--primaer-text); font-size: .85rem; margin-bottom: .4rem; }
.svs-teile { display: flex; flex-wrap: wrap; gap: .4rem; }
.svs-teile span { padding: .25rem .6rem; border-radius: 4px; background: var(--flaeche-2); font-size: .82rem; }
.svs-teile .svs-wk { background: var(--primaer); color: #fff; }

/* Wertschöpfungskette -------------------------------------------- */
.wk { display: grid; gap: .5rem; grid-template-columns: minmax(110px, 1fr) repeat(3, minmax(0, 2fr)) minmax(90px, .8fr);
      grid-template-areas: "engage plan plan plan wert" "engage dt ob ds wert" "engage improve improve improve wert"; }
.wk-akt { font: inherit; text-align: left; border: 0; border-radius: 6px; padding: .6rem .8rem; color: #fff; cursor: pointer; display: flex; flex-direction: column; justify-content: center; transition: transform .1s, box-shadow .1s, opacity .1s; }
.wk-akt small { color: rgba(255, 255, 255, .8); font-size: .75rem; }
.wk-akt:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0, 0, 0, .18); }
.wk-akt[aria-pressed="true"] { outline: 3px solid var(--text); outline-offset: 2px; }
.wk:has([aria-pressed="true"]) .wk-akt:not([aria-pressed="true"]) { opacity: .45; }
.wk-engage { grid-area: engage; }
.wk-plan { grid-area: plan; }
.wk-dt { grid-area: dt; min-height: 4.5rem; }
.wk-ob { grid-area: ob; }
.wk-ds { grid-area: ds; }
.wk-improve { grid-area: improve; }
.wk-wert { grid-area: wert; display: grid; place-items: center; text-align: center; font-size: .8rem; font-weight: 600; color: var(--ok); background: var(--ok-bg); border-radius: 6px; padding: .5rem; }
.akt-plan { background: var(--a-plan); }
.akt-improve { background: var(--a-improve); }
.akt-engage { background: var(--a-engage); }
.akt-design-transition { background: var(--a-design-transition); }
.akt-obtain-build { background: var(--a-obtain-build); }
.akt-deliver-support { background: var(--a-deliver-support); }
.akt-keine { background: #98a2b3; }
.punkt { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; margin-right: .45rem; vertical-align: middle; }
.punkt.gross { width: 1rem; height: 1rem; margin: 0; }

/* Praktiken-Kacheln ---------------------------------------------- */
.werkzeugleiste { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; }
.suche input { width: 16rem; max-width: 100%; }
.umschalter { display: inline-flex; border: 1px solid var(--linie-stark); border-radius: 6px; overflow: hidden; }
.umschalter button { font: inherit; border: 0; background: var(--flaeche); padding: .4rem .75rem; cursor: pointer; border-right: 1px solid var(--linie-stark); }
.umschalter button:last-child { border-right: 0; }
.umschalter button[aria-pressed="true"] { background: var(--primaer); color: #fff; }
.legende { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .82rem; color: var(--text-leise); margin: .25rem 0 .75rem; align-items: center; }
.legende span { display: inline-flex; align-items: center; gap: .35rem; }
.abd { display: inline-block; width: 1.1rem; height: 1.1rem; border-radius: 3px; border: 1px solid var(--linie); }
.abd-0 { background: var(--flaeche); }
.abd-1 { background: #cfe0f5; }
.abd-2 { background: #6f9fd8; }

.praktiken { display: grid; grid-template-columns: 14fr 17fr 5fr; gap: 1rem; }
.gruppe h3 { margin: 0 0 .5rem; padding-bottom: .3rem; border-bottom: 3px solid var(--g-farbe, var(--primaer)); font-size: .95rem; }
.gruppe-general { --g-farbe: var(--g-general); }
.gruppe-service { --g-farbe: var(--g-service); }
.gruppe-technical { --g-farbe: var(--g-technical); }
.kacheln { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .45rem; }
.kachel { display: flex; flex-direction: column; height: 100%; min-height: 5.2rem; padding: .5rem .6rem; border-radius: 6px; text-decoration: none; color: var(--text);
          background: var(--flaeche); border: 1px solid var(--linie); border-left: 4px solid var(--g-farbe); transition: opacity .12s, transform .12s, box-shadow .12s; }
.kachel:hover { box-shadow: 0 3px 10px rgba(16, 24, 40, .14); transform: translateY(-1px); }
.kachel-name { font-weight: 600; font-size: .86rem; line-height: 1.25; hyphens: auto; overflow-wrap: anywhere; }
.kachel-en { font-size: .72rem; color: var(--text-leise); margin-top: .1rem; }
.kachel-fuss { margin-top: auto; padding-top: .35rem; display: flex; justify-content: space-between; align-items: center; gap: .3rem; font-size: .75rem; color: var(--text-leise); }
.kachel.ausser-scope { background: repeating-linear-gradient(45deg, #fff 0 6px, #f2f4f7 6px 12px); color: var(--text-leise); }
.kachel.gedimmt { opacity: .25; }
.kachel.hervor { box-shadow: 0 0 0 2px var(--text); }
.kachel.hervor[data-beitrag="3"] { box-shadow: 0 0 0 4px var(--text); }

/* Darstellungsart Reifegrad bzw. Prozessabdeckung: Kachel einfärben */
[data-modus="reifegrad"] .kachel, .waermebild .kachel { border-left-color: transparent; }
[data-modus="reifegrad"] .lvl-bg-0, .waermebild .lvl-bg-0 { background: var(--l0); }
[data-modus="reifegrad"] .lvl-bg-1, .waermebild .lvl-bg-1 { background: #f6d0d0; }
[data-modus="reifegrad"] .lvl-bg-2, .waermebild .lvl-bg-2 { background: #f9dcc2; }
[data-modus="reifegrad"] .lvl-bg-3, .waermebild .lvl-bg-3 { background: #f6ebbb; }
[data-modus="reifegrad"] .lvl-bg-4, .waermebild .lvl-bg-4 { background: #dcefc6; }
[data-modus="reifegrad"] .lvl-bg-5, .waermebild .lvl-bg-5 { background: #bfe3cd; }
[data-modus="abdeckung"] .kachel { border-left-color: transparent; }
[data-modus="abdeckung"] .abd-bg-0 { background: var(--flaeche); }
[data-modus="abdeckung"] .abd-bg-1 { background: #cfe0f5; }
[data-modus="abdeckung"] .abd-bg-2 { background: #6f9fd8; color: #fff; }
[data-modus="abdeckung"] .abd-bg-2 .kachel-en, [data-modus="abdeckung"] .abd-bg-2 .kachel-fuss { color: #eef4fb; }

.waermebild { display: grid; grid-template-columns: 14fr 17fr 5fr; gap: 1rem; }
.kacheln-klein .kachel { min-height: 4rem; }
.pfeil { color: var(--text-leise); }

/* Kennzahlen ----------------------------------------------------- */
.kennzahl { border-top: 4px solid var(--g-farbe, var(--primaer)); }
.kennzahl-titel { font-size: .85rem; font-weight: 600; color: var(--text-leise); }
.kennzahl-wert { font-size: 2rem; font-weight: 700; }
.verteilung { list-style: none; margin: .4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .2rem; }
.verteilung li { display: grid; grid-template-columns: 1.8rem 1fr 1.8rem; gap: .4rem; align-items: center; }
.verteilung meter { width: 100%; height: .8rem; }
.verteilung .zahl { text-align: right; font-size: .85rem; }

/* RACI ----------------------------------------------------------- */
.raci-zelle { text-align: center !important; }
.raci th:nth-child(n+3) { text-align: center; width: 2.5rem; }
.raci-R, .raci-A, .raci-C, .raci-I { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; font-weight: 700; color: #fff; }
.raci-R { background: #1d4ed8; }
.raci-A { background: #b42318; }
.raci-C { background: #d97706; }
.raci-I { background: #667085; }

/* Wertstrom-Ablauf ----------------------------------------------- */
.fluss { display: flex; gap: .6rem; align-items: stretch; overflow-x: auto; padding-bottom: .5rem; }
.fluss-rand { flex: 0 0 9rem; padding: .6rem; border-radius: 6px; font-size: .85rem; font-weight: 600; display: flex; flex-direction: column; gap: .2rem; }
.fluss-rand small { text-transform: uppercase; letter-spacing: .04em; font-size: .7rem; }
.fluss-anlass { background: var(--primaer-hell); color: var(--primaer-text); }
.fluss-ergebnis { background: var(--ok-bg); color: var(--ok); }
.fluss-schritte { list-style: none; margin: 0; padding: 0; display: flex; gap: .6rem; }
.fluss-phasen { display: flex; gap: .9rem; align-items: stretch; }

/* Leitfaden-Inhalte und Glossar */
.leitfaden details { margin: .3rem 0; }
.leitfaden details summary { cursor: pointer; color: var(--primaer-text); }
.leitfaden-zweck { font-size: 1.02rem; }
.erfolgsfaktoren { padding-left: 1.3rem; display: flex; flex-direction: column; gap: .7rem; }
.kennzahlen ul { margin: .2rem 0 0; padding-left: 1.2rem; }
.begriffe { margin: 0; }
.begriffe dt { font-weight: 600; margin-top: .7rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem; }
.begriffe dd { margin: .2rem 0 0 0; padding-left: .8rem; border-left: 3px solid var(--linie); }
.kriterien details { margin: .3rem 0; }
.kriterien details summary { cursor: pointer; color: var(--primaer-text); }
.stufenstand { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; padding: 0; margin: .4rem 0 .8rem; color: var(--text-leise); }
.stufenstand li.erfuellt { color: var(--ok); font-weight: 600; }
.kriterientabelle td:nth-child(4) { text-align: center; }
.kriterientabelle textarea { width: 100%; min-width: 12rem; }
.kriterientabelle tr.erfuellt td:first-child { box-shadow: inset 3px 0 0 var(--ok); }
.kompetenzen { display: inline-flex; gap: 2px; }
.kompetenz { display: inline-block; min-width: 1.3em; padding: 0 .25em; border-radius: 3px; background: var(--primaer-hell); color: var(--primaer-text); font-size: .78rem; font-weight: 600; text-align: center; text-decoration: none; cursor: help; }
.kompetenz-haupt { background: var(--primaer); color: #fff; }
ul.kompakt { margin: 0; padding-left: 1rem; }
.akt-leitfaden { display: grid; grid-template-columns: auto 1fr; gap: .1rem .5rem; margin: .3rem 0 0; font-size: .82rem; color: var(--text-leise); }
.akt-leitfaden dt { font-weight: 600; }
.akt-leitfaden dd { margin: 0; }
.glossar-buchstabe { margin: 1.2rem 0 .2rem; padding-bottom: .2rem; border-bottom: 1px solid var(--linie); }
.phase { display: flex; flex-direction: column; gap: .4rem; padding: .4rem; border: 1px solid var(--linie); border-top: 3px solid var(--primaer); border-radius: 6px; background: var(--flaeche-2); }
.phase-ohne { border-top-color: #98a2b3; }
.phase-kopf { margin: 0; padding: 0 .2rem; font-size: .85rem; color: var(--primaer-text); display: flex; justify-content: space-between; gap: .6rem; white-space: nowrap; }
.phase-kopf small { font-weight: 400; color: var(--text-leise); }
.phase-zeile th { background: var(--primaer-hell); color: var(--primaer-text); text-align: left; font-size: .82rem; }
.schritt { flex: 0 0 13rem; background: var(--flaeche) !important; border: 1px solid var(--linie); border-radius: 6px; padding: 0 0 .6rem; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.schritt::after { content: "›"; position: absolute; right: -.55rem; top: 50%; font-size: 1.4rem; color: var(--text-leise); }
.schritt-kopf { display: flex; align-items: center; gap: .4rem; padding: .35rem .6rem; color: #fff; font-size: .78rem; font-weight: 600; }
.schritt.akt-plan .schritt-kopf { background: var(--a-plan); }
.schritt.akt-improve .schritt-kopf { background: var(--a-improve); }
.schritt.akt-engage .schritt-kopf { background: var(--a-engage); }
.schritt.akt-design-transition .schritt-kopf { background: var(--a-design-transition); }
.schritt.akt-obtain-build .schritt-kopf { background: var(--a-obtain-build); }
.schritt.akt-deliver-support .schritt-kopf { background: var(--a-deliver-support); }
.schritt.akt-keine .schritt-kopf { background: #98a2b3; }
.schritt-nr { display: inline-grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: rgba(255, 255, 255, .25); }
.schritt-name { padding: .5rem .6rem .2rem; }
.schritt-text { padding: 0 .6rem; margin: 0 0 .3rem; font-size: .82rem; color: var(--text-leise); }
.chips { list-style: none; margin: auto 0 0; padding: .3rem .6rem 0; display: flex; flex-wrap: wrap; gap: .3rem; }
.chip { display: inline-block; font-size: .72rem; padding: .1rem .45rem; border-radius: 999px; text-decoration: none; color: var(--g-farbe); border: 1px solid var(--g-farbe); background: var(--flaeche); }
.chip:hover { background: var(--g-farbe); color: #fff; }
.matrix th:not(:first-child), .matrix-zelle { text-align: center !important; width: 2.4rem; }

.fehlerseite { max-width: 40rem; }

/* Schmale Bildschirme ------------------------------------------- */
@media (max-width: 1100px) {
    .praktiken, .waermebild { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .benutzer-name { display: none; }
    .amtwahl { order: 3; width: 100%; }
    .amtwahl select { max-width: 100%; }
    .wk { grid-template-columns: 1fr; grid-template-areas: "engage" "plan" "dt" "ob" "ds" "improve" "wert"; }
    .svs { flex-direction: column; }
    .tabelle { display: block; overflow-x: auto; }
}

@media print {
    .kopf, .hauptnav, .werkzeugleiste, .aktionen, .btn, .fuss { display: none !important; }
    body { background: var(--flaeche); }
    .karte { box-shadow: none; break-inside: avoid; }
}

/* Zähler in der Navigation */
.zaehler { display: inline-grid; place-items: center; min-width: 1.2rem; height: 1.2rem; padding: 0 .3rem; border-radius: 999px; background: #dc2626; color: #fff; font-size: .72rem; font-weight: 700; }

/* Änderungsprotokoll und Verlauf */
.nowrap { white-space: nowrap; }
.aktion { display: inline-block; font-size: .75rem; font-weight: 600; padding: .05rem .45rem; border-radius: 4px; background: var(--flaeche-2); color: #344054; }
.aktion-angelegt, .aktion-zugewiesen, .aktion-anmeldung { background: var(--ok-bg); color: var(--ok-text); }
.aktion-geloescht, .aktion-entzogen, .aktion-gesperrt, .aktion-fehlversuch { background: var(--fehler-bg); color: var(--fehler-text); }
.aktion-ueberprueft, .aktion-erfasst { background: var(--flaeche-2); color: #1e3a8a; }
.aenderungen { margin: .35rem 0 0; font-size: .85rem; display: flex; flex-direction: column; gap: .25rem; }
.aenderungen div { display: grid; grid-template-columns: minmax(8rem, 13rem) 1fr; gap: .5rem; }
.aenderungen dt { color: var(--text-leise); }
.aenderungen dd { margin: 0; overflow-wrap: anywhere; }
.aenderungen del { background: var(--fehler-bg); color: var(--fehler-text); text-decoration: line-through; padding: 0 .2rem; }
.aenderungen ins { background: var(--ok-bg); color: var(--ok-text); text-decoration: none; padding: 0 .2rem; }
.aenderungen .pfeil { margin: 0 .3rem; }
.vermerk { margin-top: .3rem; font-size: .85rem; font-style: italic; color: var(--text-leise); }
.protokoll td { vertical-align: top; }
.seitenwahl { display: flex; gap: .5rem; align-items: center; justify-content: flex-end; margin-top: .75rem; }
.seitenwahl .hilfe { margin-right: auto; }
.zeitleiste { list-style: none; margin: .5rem 0 0; padding: 0 0 0 1rem; border-left: 2px solid var(--linie); }
.zeitleiste li { position: relative; padding: .4rem 0 .7rem .5rem; }
.zeitleiste li::before { content: ""; position: absolute; left: -1.38rem; top: .65rem; width: .65rem; height: .65rem; border-radius: 50%; background: var(--primaer); border: 2px solid #fff; }
.zeitleiste-kopf { display: flex; gap: .6rem; font-size: .85rem; margin-bottom: .2rem; }
.zeitleiste-kopf time { color: var(--text-leise); }
.verlauf summary h2 { display: inline; }

/* Wiedervorlage */
.wiedervorlage-box { border-left: 4px solid var(--ok); }
.wiedervorlage-box.faellig { border-left-color: var(--gefahr); background: #fffbfa; }
.wiedervorlage-box p { margin: .3rem 0 0; }
.pruefen { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.pruefen input { width: 16rem; max-width: 100%; }
.ueberfaellig { color: var(--gefahr); font-weight: 600; }
.kennzahl-faellig { --g-farbe: var(--gefahr); }
.kennzahl-demnaechst { --g-farbe: #d97706; }
.kennzahl-geplant { --g-farbe: var(--ok); }
.kennzahl-ohne { --g-farbe: #98a2b3; }
.wv-faellig { border-left: 4px solid var(--gefahr); }
.wv-demnaechst { border-left: 4px solid #d97706; }

/* Prozesssteckbrief */
.steckbrief-leiste { margin-bottom: 1rem; }
.steckbrief { background: var(--flaeche); max-width: 52rem; margin: 0 auto; padding: 2rem 2.2rem; border: 1px solid var(--linie); box-shadow: var(--schatten); font-size: .95rem; }
.steckbrief-kopf { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 3px solid var(--primaer); padding-bottom: .6rem; margin-bottom: 1rem; }
.steckbrief-amt { font-size: .8rem; color: var(--text-leise); }
.steckbrief-kopf h1 { margin: .2rem 0 0; font-size: 1.4rem; color: var(--primaer-text); }
.steckbrief-meta { font-size: .8rem; border-collapse: collapse; }
.steckbrief-meta th { text-align: left; color: var(--text-leise); font-weight: 400; padding: 0 .6rem 0 0; }
.steckbrief-titel { font-size: 1.25rem; margin: 0 0 .8rem; }
.steckbrief h3 { margin: 1.2rem 0 .4rem; font-size: 1rem; border-bottom: 1px solid var(--linie); padding-bottom: .2rem; }
.steckbrief-tabelle { width: 100%; border-collapse: collapse; font-size: .88rem; }
.steckbrief-tabelle th, .steckbrief-tabelle td { border: 1px solid #c7ced8; padding: .3rem .5rem; text-align: left; vertical-align: top; }
.steckbrief-tabelle > tbody > tr > th:first-child { width: 13rem; background: var(--flaeche-2); font-weight: 600; }
.steckbrief-tabelle thead th { background: var(--flaeche-2); }
.steckbrief .mitte { text-align: center; }
.steckbrief .klein { font-size: .78rem; color: var(--text-leise); }
.steckbrief-fuss { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; padding-top: .4rem; border-top: 1px solid var(--linie); font-size: .72rem; color: var(--text-leise); }

@media print {
    @page { size: A4; margin: 15mm 15mm 18mm; }
    .nur-bildschirm, .hinweis { display: none !important; }
    .inhalt { padding: 0; max-width: none; }
    .steckbrief { border: 0; box-shadow: none; padding: 0; max-width: none; }
    .steckbrief-tabelle tr { break-inside: avoid; }
    .verlauf details { display: none; }
}

/* Prozessablauf: Inputs → Aktivitäten → Outputs */
.ablauf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr); gap: .75rem; align-items: stretch; margin: .5rem 0 1rem; }
.ablauf-spalte { border: 1px solid var(--linie); border-radius: 6px; padding: .6rem .75rem; position: relative; background: var(--flaeche-2); }
.ablauf-spalte h3 { margin: 0 0 .5rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-leise); }
.ablauf-akt { background: var(--flaeche); border-color: var(--primaer); border-width: 2px; }
.ablauf-io:first-child::after, .ablauf-akt::after { content: "→"; position: absolute; right: -.68rem; top: 50%; transform: translateY(-50%); font-size: 1.1rem; color: var(--primaer-text); background: var(--flaeche); line-height: 1; }
.io-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; font-size: .88rem; }
.io-liste li { padding: .25rem .4rem; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 4px; }
.io-liste small { display: block; }
.io-liste .chip { margin-top: .15rem; }
.akt-liste { margin: 0; padding-left: 1.4rem; display: flex; flex-direction: column; gap: .45rem; }
.akt-liste li::marker { font-weight: 700; color: var(--primaer-text); }
.akt-liste p { margin: .15rem 0 0; font-size: .85rem; color: var(--text-leise); }
.akt-verantwortlich { margin-left: .4rem; padding: 0 .4rem; border-radius: 999px; background: var(--primaer-hell); color: var(--primaer-text); }
.modelle th[scope="row"] { white-space: nowrap; font-weight: 600; color: var(--text); background: var(--flaeche-2); }
.modelle td { font-size: .88rem; min-width: 14rem; }
.modell-texte { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: .6rem; padding: .5rem; background: var(--primaer-hell); border-radius: 4px; }
.ablauf-druck ul, .ablauf-druck ol { margin: 0; padding-left: 1.1rem; }
.ablauf-druck td { width: 33%; }
@media (max-width: 900px) {
    .ablauf { grid-template-columns: 1fr; }
    .ablauf-io:first-child::after, .ablauf-akt::after { content: "↓"; right: auto; left: 50%; top: auto; bottom: -.8rem; transform: translateX(-50%); }
}
.akt-buendel { list-style: square; }

/* Wertstromanalyse */
.praktik-rolle { display: flex; flex-direction: column; gap: .15rem; padding: .1rem 0; }
.praktik-rolle > input[type=text] { display: none; font-size: .82rem; padding: .25rem .4rem; margin-left: 1.5rem; width: calc(100% - 1.5rem); }
.praktik-rolle:has(input[type=checkbox]:checked) > input[type=text] { display: block; }
.analyse { border-top: 1px dashed var(--linie); padding-top: .4rem; }
.analyse > summary { font-size: .88rem; font-weight: 600; color: var(--primaer-text); }
.analyse[open] { display: flex; flex-direction: column; gap: .6rem; }
.zeitfeld { display: flex; gap: .3rem; }
.zeitfeld input { width: 5.5rem; flex: 0 0 auto; }
.bewertung-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: .5rem; }
.bew { display: inline-block; padding: .05rem .45rem; border-radius: 4px; font-size: .78rem; font-weight: 600; }
.bew-3 { background: var(--ok-bg); color: var(--ok-text); }
.bew-2 { background: var(--warn-bg); color: var(--warn-text); }
.bew-1 { background: var(--fehler-bg); color: var(--fehler-text); }
.zeitbalken { min-width: 11rem; }
.zeitbalken svg { display: block; width: 100%; height: .8rem; background: var(--flaeche-2); border-radius: 2px; }
.bar-b { fill: var(--primaer); background: var(--primaer); }
.bar-w { fill: #f59e0b; background: #f59e0b; }
.legende-mini { font-weight: 400; white-space: nowrap; }
.legende-mini i { display: inline-block; width: .7rem; height: .7rem; margin: 0 .15rem 0 .4rem; vertical-align: middle; }
.befund { font-size: .85rem; min-width: 14rem; }
.befund div + div { margin-top: .25rem; }
.schritt-zeit { margin: 0 .6rem .3rem; font-size: .78rem; color: var(--text-leise); }
.schritt.verschwendung { border-style: dashed; border-color: var(--gefahr); }
.besser { color: var(--ok); }
.schlechter { color: var(--gefahr); }
.soll-zeile td { background: #fffdf5; }
.rahmen { margin-top: .75rem; }

/* Beziehungen zwischen den Practices */
.leise { color: var(--text-leise); font-weight: 400; }
.matrix-rahmen { overflow-x: auto; margin: .5rem 0; }
.matrix { border-collapse: collapse; font-size: .75rem; }
.matrix th, .matrix td { border: 1px solid var(--linie); padding: 0; text-align: center; }
.matrix td { min-width: 1.7rem; height: 1.7rem; }
.matrix td a { display: block; line-height: 1.7rem; color: inherit; text-decoration: none; }
.matrix td a:hover, .matrix td a:focus { outline: 2px solid var(--primaer); outline-offset: -2px; }
.matrix thead th { background: var(--flaeche-2); color: var(--text-leise); font-weight: 600; padding: .2rem; }
.matrix th.spalte { border-top: 3px solid var(--g-farbe); }
.matrix th.spalte abbr { text-decoration: none; }
.matrix th.ecke { text-align: left; white-space: nowrap; }
.matrix th.zeile { text-align: left; white-space: nowrap; font-weight: 400; padding: .1rem .5rem .1rem .4rem; border-left: 3px solid var(--g-farbe, var(--linie)); background: var(--flaeche); position: sticky; left: 0; z-index: 1; }
.matrix th.zeile a { color: var(--text); text-decoration: none; }
.matrix th.zeile a:hover { text-decoration: underline; }
.matrix .nr { display: inline-block; min-width: 1.4rem; color: var(--text-leise); }
.matrix td.selbst { background: repeating-linear-gradient(45deg, #f1f3f6, #f1f3f6 3px, #fff 3px, #fff 6px); }
.matrix td.summe, .matrix tfoot td { color: var(--text-leise); font-weight: 600; background: var(--flaeche-2); }
.matrix tfoot th.zeile { font-weight: 600; }
.st1 { background: #e7eef6; }
.st2 { background: #b9cde3; }
.st3 { background: #6f97c3; color: #fff; }
.st4 { background: var(--primaer); color: #fff; }
.matrix-stufen i { display: inline-block; width: .8rem; height: .8rem; border: 1px solid var(--linie); }
.legende span[class^="gruppe-"]::before { content: ""; width: .7rem; height: .7rem; border-radius: 2px; background: var(--g-farbe); }
.beziehung-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1rem 1.5rem; }
.beziehung-spalten h2 { margin: .5rem 0 0; font-size: 1.1rem; }
.beziehung { border-top: 1px solid var(--linie); padding: .5rem 0; }
.beziehung h3 { margin: 0 0 .25rem; font-size: .95rem; }
.beziehung ul { margin: 0; padding-left: 1.2rem; }
.beziehung li { margin: .15rem 0; }
.beziehung summary { cursor: pointer; color: var(--text-leise); }

/* Empfehlungen (Kapitel 8) */
.leitprinzip { display: block; width: max-content; max-width: 100%; margin: 0 0 .25rem; padding: .1rem .45rem; border-radius: 999px; font-size: .75rem; background: var(--primaer-hell); color: var(--primaer-text); }
#empfehlungen td:first-child { min-width: 12rem; }
#empfehlungen td:last-child { min-width: 11rem; }

/* Reiter (Praktikseite) */
.reiter { display: flex; gap: .25rem; overflow-x: auto; margin: 0 0 1rem; border-bottom: 2px solid var(--linie); position: sticky; top: 0; z-index: 5; background: var(--grund); }
.reiter a { padding: .55rem .9rem; white-space: nowrap; text-decoration: none; color: var(--text-leise); font-weight: 600; font-size: .92rem; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.reiter a:hover { color: var(--text); }
.reiter a[aria-current="true"] { color: var(--primaer-text); border-bottom-color: var(--primaer); }
.reiter:not(.aktiv) { position: static; }
.reiter-flaeche > :first-child { margin-top: 0; }
@media print {
    .reiter { display: none; }
    [data-reiter][hidden] { display: block !important; }
}

/* Prozessablauf: Rollen und Automatisierung je Aktivität aufklappbar */
.akt-mehr { margin-top: .3rem; }
.akt-mehr > summary { cursor: pointer; font-size: .8rem; color: var(--text-leise); }
.akt-mehr > summary .kompetenzen { margin-left: .25rem; }

/* Glossar: Begriffe aufklappbar */
.glossar-liste { border-top: 1px solid var(--linie); }
.glossar-eintrag { border-bottom: 1px solid var(--linie); }
.glossar-eintrag > summary { cursor: pointer; padding: .45rem .25rem; list-style-position: inside; }
.glossar-eintrag > summary:hover { background: var(--flaeche-2); }
.glossar-eintrag > summary .chip { margin-left: .35rem; vertical-align: middle; }
.glossar-eintrag > .fliesstext { padding: 0 .25rem .75rem 1.2rem; max-width: 70rem; }

/* Dunkles Farbschema: wählbar (data-theme="dunkel") oder nach Systemeinstellung (data-theme="system") */
:root[data-theme="dunkel"] {
    --grund: #0f141a;
    --flaeche: #171e26;
    --flaeche-2: #1d2630;
    --text: #e3e8ee;
    --text-leise: #9aa6b4;
    --linie: #2c3743;
    --linie-stark: #3d4a58;
    --primaer: #2f6aa3;
    --primaer-text: #8bbce8;
    --primaer-hell: #1c2f44;
    --gefahr: #f0766c;
    --ok: #4cc38a;
    --fehler-bg: #3a1d1b; --fehler-text: #f6b4ad; --fehler-linie: #7a2e28;
    --ok-bg: #12301f;     --ok-text: #9fe3bd;     --ok-linie: #24603e;
    --warn-bg: #33270e;   --warn-text: #f5cf7a;   --warn-linie: #6b5317;
    --hinweis-bg: #172738; --hinweis-linie: #2d4a69;
    --l0: #33404d;
    --schatten: 0 1px 2px rgba(0, 0, 0, .4), 0 1px 3px rgba(0, 0, 0, .5);
    color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
    :root[data-theme="system"] {
        --grund: #0f141a;
        --flaeche: #171e26;
        --flaeche-2: #1d2630;
        --text: #e3e8ee;
        --text-leise: #9aa6b4;
        --linie: #2c3743;
        --linie-stark: #3d4a58;
        --primaer: #2f6aa3;
        --primaer-text: #8bbce8;
        --primaer-hell: #1c2f44;
        --gefahr: #f0766c;
        --ok: #4cc38a;
        --fehler-bg: #3a1d1b; --fehler-text: #f6b4ad; --fehler-linie: #7a2e28;
        --ok-bg: #12301f;     --ok-text: #9fe3bd;     --ok-linie: #24603e;
        --warn-bg: #33270e;   --warn-text: #f5cf7a;   --warn-linie: #6b5317;
        --hinweis-bg: #172738; --hinweis-linie: #2d4a69;
        --l0: #33404d;
        --schatten: 0 1px 2px rgba(0, 0, 0, .4), 0 1px 3px rgba(0, 0, 0, .5);
    color-scheme: dark;
    }
}
:root[data-theme="dunkel"] .rolle-praktik_owner, :root[data-theme="dunkel"] .rolle-praktik_manager, :root[data-theme="dunkel"] .rolle-wertstrom_owner, :root[data-theme="dunkel"] .lvl-bg-1, :root[data-theme="dunkel"] .lvl-bg-2, :root[data-theme="dunkel"] .lvl-bg-3, :root[data-theme="dunkel"] .lvl-bg-4, :root[data-theme="dunkel"] .lvl-bg-5, :root[data-theme="dunkel"] .abd-bg-1, :root[data-theme="dunkel"] .st1, :root[data-theme="dunkel"] .st2 { color: #1d2733; }
:root[data-theme="dunkel"] [data-modus] .kachel.lvl-bg-1 *, :root[data-theme="dunkel"] [data-modus] .kachel.lvl-bg-2 *, :root[data-theme="dunkel"] [data-modus] .kachel.lvl-bg-3 *, :root[data-theme="dunkel"] [data-modus] .kachel.lvl-bg-4 *, :root[data-theme="dunkel"] [data-modus] .kachel.lvl-bg-5 *, :root[data-theme="dunkel"] [data-modus] .kachel.abd-bg-1 * { color: #1d2733; }
:root[data-theme="dunkel"] .kachel.ausser-scope { background: repeating-linear-gradient(45deg, var(--flaeche) 0 6px, var(--flaeche-2) 6px 12px); }
:root[data-theme="dunkel"] .matrix td.selbst { background: repeating-linear-gradient(45deg, var(--flaeche-2), var(--flaeche-2) 3px, var(--flaeche) 3px, var(--flaeche) 6px); }
:root[data-theme="dunkel"] .soll-zeile td { background: #2a2614; }
:root[data-theme="dunkel"] .wiedervorlage-box.faellig { background: #2b1a19; }
:root[data-theme="dunkel"] .steckbrief-tabelle th, :root[data-theme="dunkel"] .steckbrief-tabelle td { border-color: var(--linie-stark); }
:root[data-theme="dunkel"] .aktion-ueberprueft, :root[data-theme="dunkel"] .aktion-erfasst { color: var(--primaer-text); }
:root[data-theme="dunkel"] input, :root[data-theme="dunkel"] select, :root[data-theme="dunkel"] textarea { background: var(--flaeche-2); color: var(--text); border-color: var(--linie-stark); }
@media (prefers-color-scheme: dark) {
:root[data-theme="system"] .rolle-praktik_owner, :root[data-theme="system"] .rolle-praktik_manager, :root[data-theme="system"] .rolle-wertstrom_owner, :root[data-theme="system"] .lvl-bg-1, :root[data-theme="system"] .lvl-bg-2, :root[data-theme="system"] .lvl-bg-3, :root[data-theme="system"] .lvl-bg-4, :root[data-theme="system"] .lvl-bg-5, :root[data-theme="system"] .abd-bg-1, :root[data-theme="system"] .st1, :root[data-theme="system"] .st2 { color: #1d2733; }
:root[data-theme="system"] [data-modus] .kachel.lvl-bg-1 *, :root[data-theme="system"] [data-modus] .kachel.lvl-bg-2 *, :root[data-theme="system"] [data-modus] .kachel.lvl-bg-3 *, :root[data-theme="system"] [data-modus] .kachel.lvl-bg-4 *, :root[data-theme="system"] [data-modus] .kachel.lvl-bg-5 *, :root[data-theme="system"] [data-modus] .kachel.abd-bg-1 * { color: #1d2733; }
:root[data-theme="system"] .kachel.ausser-scope { background: repeating-linear-gradient(45deg, var(--flaeche) 0 6px, var(--flaeche-2) 6px 12px); }
:root[data-theme="system"] .matrix td.selbst { background: repeating-linear-gradient(45deg, var(--flaeche-2), var(--flaeche-2) 3px, var(--flaeche) 3px, var(--flaeche) 6px); }
:root[data-theme="system"] .soll-zeile td { background: #2a2614; }
:root[data-theme="system"] .wiedervorlage-box.faellig { background: #2b1a19; }
:root[data-theme="system"] .steckbrief-tabelle th, :root[data-theme="system"] .steckbrief-tabelle td { border-color: var(--linie-stark); }
:root[data-theme="system"] .aktion-ueberprueft, :root[data-theme="system"] .aktion-erfasst { color: var(--primaer-text); }
:root[data-theme="system"] input, :root[data-theme="system"] select, :root[data-theme="system"] textarea { background: var(--flaeche-2); color: var(--text); border-color: var(--linie-stark); }
}

/* Bedienmodus: Einsteiger / Fortgeschritten */
.modus-fortgeschritten .nur-einsteiger { display: none !important; }
.modus-einsteiger .nur-fortgeschritten { display: none !important; }

/* Einsteigerhinweis je Seite */
.einstieg { background: var(--hinweis-bg); border: 1px solid var(--hinweis-linie); border-left: 4px solid var(--primaer); border-radius: var(--radius); padding: .6rem 1rem; margin: 0 0 1rem; }
.einstieg > summary { cursor: pointer; font-weight: 600; color: var(--primaer-text); }
.einstieg ol { margin: .3rem 0 .4rem; padding-left: 1.3rem; }
.einstieg li { margin: .2rem 0; }
.einstieg p { margin: .4rem 0; }
.einstieg-symbol { display: inline-grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--primaer); color: #fff; font-size: .8rem; margin-right: .2rem; }

/* Assistent */
.assistent-kopf { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; margin: 0 0 1rem; counter-reset: schritt; }
.assistent-kopf li { counter-increment: schritt; padding: .35rem .7rem; border-radius: 999px; border: 1px solid var(--linie); color: var(--text-leise); font-size: .85rem; cursor: pointer; background: var(--flaeche-2); }
.assistent-kopf li::before { content: counter(schritt) ". "; font-weight: 700; }
.assistent-kopf li.aktuell { background: var(--primaer); border-color: var(--primaer); color: #fff; font-weight: 600; }
.assistent-kopf li.erledigt { color: var(--ok-text); border-color: var(--ok-linie); background: var(--ok-bg); }
.assistent-kopf li.erledigt::before { content: "✓ "; }
.assistent-leiste { align-items: center; }
.assistent-leiste .hilfe { margin: 0 auto 0 0; padding-left: .5rem; }
.assistent-leiste .btn-primaer { margin-left: auto; }
.schritt-hilfe { background: var(--hinweis-bg); border-radius: 6px; padding: .5rem .75rem; margin: 0 0 .75rem; font-size: .92rem; }

/* Einstellungen im Benutzermenü */
.einstellungen { padding: .5rem 1rem; border-top: 1px solid var(--linie); }
.einstellungen .btn { margin-top: .2rem; }

/* Anleitung */
.anleitung { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 1rem; align-items: start; }
.anleitung-inhalt { position: sticky; top: .75rem; font-size: .9rem; }
.anleitung-inhalt ol { margin: .4rem 0 0; padding-left: 1.2rem; }
.anleitung-inhalt li { margin: .2rem 0; }
.anleitung-text .karte { scroll-margin-top: .75rem; }
.anleitung-text p, .anleitung-text li, .anleitung-text dd { max-width: 75ch; }
.anleitung-schritte li { margin: .3rem 0; }
.anleitung-dl dt { font-weight: 600; margin-top: .6rem; }
.anleitung-dl dd { margin: .15rem 0 0 1rem; }
@media (max-width: 900px) {
    .anleitung { grid-template-columns: 1fr; }
    .anleitung-inhalt { position: static; }
}

/* Schieberegler (Benutzermenü) */
.schalter { display: flex; align-items: center; gap: .6rem; padding: .35rem 0; cursor: pointer; font-size: .92rem; }
.schalter small { display: block; font-size: .75rem; }
.schalter input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.schalter-bahn { position: relative; flex: 0 0 auto; width: 2.6rem; height: 1.45rem; border-radius: 999px; background: var(--linie-stark); transition: background .2s; }
.schalter-bahn::after { content: ""; position: absolute; top: .15rem; left: .15rem; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); transition: transform .2s; }
.schalter input:checked + .schalter-bahn { background: var(--primaer); }
.schalter input:checked + .schalter-bahn::after { transform: translateX(1.15rem); }
.schalter input:focus-visible + .schalter-bahn { outline: 3px solid #f59e0b; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .schalter-bahn, .schalter-bahn::after { transition: none; } }

/* Feldhilfe, Fehlermeldungen und Zeichenzähler (Einsteigermodus) */
.feldhilfe { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .4rem; margin: .25rem 0 .5rem; padding: .35rem .6rem; border-radius: 6px; background: var(--hinweis-bg); border: 1px solid var(--hinweis-linie); font-size: .82rem; font-weight: 400; color: var(--text); }
.feldhilfe-symbol { display: inline-grid; place-items: center; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: var(--primaer); color: #fff; font-size: .7rem; font-weight: 700; flex: 0 0 auto; }
.feldhilfe-beispiel { flex-basis: 100%; padding-left: 1.45rem; color: var(--text-leise); font-style: italic; }
td .feldhilfe { min-width: 12rem; }
.feld-fehler { border-color: var(--gefahr) !important; box-shadow: 0 0 0 2px var(--fehler-linie); }
.fehlermeldung { margin: .2rem 0 .5rem; padding: .35rem .6rem; border-radius: 6px; background: var(--fehler-bg); color: var(--fehler-text); border: 1px solid var(--fehler-linie); font-size: .85rem; font-weight: 600; }
.zeichenzaehler { margin: -.2rem 0 .4rem; text-align: right; font-size: .75rem; color: var(--text-leise); }
.zeichenzaehler.knapp { color: var(--warn-text); font-weight: 600; }

/* Zusammenfassung im letzten Schritt des Assistenten */
.assistent-pruefen h3 { margin: 1rem 0 .3rem; font-size: .95rem; border-bottom: 1px solid var(--linie); padding-bottom: .2rem; }
.zusammenfassung { display: grid; grid-template-columns: minmax(8rem, 16rem) 1fr; gap: .25rem 1rem; margin: 0; }
.zusammenfassung dt { color: var(--text-leise); font-size: .88rem; }
.zusammenfassung dd { margin: 0; white-space: pre-wrap; }
@media (max-width: 600px) { .zusammenfassung { grid-template-columns: 1fr; } .zusammenfassung dd { margin-bottom: .4rem; } }
.assistent-aktiv > fieldset[data-schritt] > legend { display: none; }

/* Suchfeld im Kopf */
.kopfsuche input { width: 13rem; max-width: 40vw; padding: .35rem .6rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .12); color: #fff; font: inherit; font-size: .9rem; }
.kopfsuche input::placeholder { color: rgba(255, 255, 255, .7); }
.kopfsuche input:focus { background: var(--flaeche); color: var(--text); outline: 3px solid #f59e0b; }
@media (max-width: 720px) { .kopfsuche { order: 5; width: 100%; } .kopfsuche input { width: 100%; max-width: none; } }

/* Ampel der Kennzahlen */
.ampel { display: inline-block; padding: .05rem .45rem; border-radius: 999px; font-size: .72rem; font-weight: 600; white-space: nowrap; }
.ampel-gruen { background: var(--ok-bg); color: var(--ok-text); border: 1px solid var(--ok-linie); }
.ampel-gelb { background: var(--warn-bg); color: var(--warn-text); border: 1px solid var(--warn-linie); }
.ampel-rot { background: var(--fehler-bg); color: var(--fehler-text); border: 1px solid var(--fehler-linie); }
.ampel-offen { background: var(--flaeche-2); color: var(--text-leise); border: 1px solid var(--linie); }
.ampel-punkt { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; margin: 0 .15rem 0 .3rem; vertical-align: middle; border: 0; padding: 0; }
.ampel-punkt.ampel-gruen { background: #2f8f57; }
.ampel-punkt.ampel-gelb { background: #e3a008; }
.ampel-punkt.ampel-rot { background: #d64545; }
.ampel-stand { display: inline-flex; align-items: center; gap: .2rem; font-size: .85rem; }
.kennzahl-tabelle input, .kennzahl-tabelle select { font: inherit; font-size: .85rem; padding: .25rem .35rem; border: 1px solid var(--linie-stark); border-radius: 4px; width: 100%; min-width: 0; }
.kennzahl-tabelle .zahlfeld { width: 5.5rem; text-align: right; }
.kennzahl-tabelle .einheitfeld { width: 4.5rem; }
.kennzahl-tabelle input[type=date] { width: 9.5rem; }
.kennzahl-tabelle td:last-child input { min-width: 10rem; }
.kennzahl-name { min-width: 14rem; }

/* Verbesserungsplan */
.mstatus { display: inline-block; padding: .05rem .45rem; border-radius: 4px; font-size: .75rem; font-weight: 600; white-space: nowrap; }
.mstatus-offen { background: var(--flaeche-2); color: var(--text-leise); border: 1px solid var(--linie-stark); }
.mstatus-in_arbeit { background: var(--warn-bg); color: var(--warn-text); border: 1px solid var(--warn-linie); }
.mstatus-erledigt { background: var(--ok-bg); color: var(--ok-text); border: 1px solid var(--ok-linie); }
.erledigt-zeile strong { text-decoration: line-through; color: var(--text-leise); }
.massnahmen-tabelle td:first-child { min-width: 18rem; }
.massnahme-bearbeiten, .massnahme-neu { margin-top: .4rem; }
.massnahme-bearbeiten > summary, .massnahme-neu > summary { cursor: pointer; color: var(--primaer-text); font-size: .85rem; }
.massnahme-neu { margin-top: 1rem; }
.verbesserungsplan-erzeugen { align-items: flex-end; margin-bottom: 1rem; }

/* Übersicht des Amtes */
.kacheln-uebersicht { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.kennzahl-kachel { display: flex; flex-direction: column; gap: .2rem; padding: .9rem 1rem; background: var(--flaeche); border: 1px solid var(--linie); border-top: 4px solid var(--primaer); border-radius: var(--radius); box-shadow: var(--schatten); color: var(--text); text-decoration: none; }
.kennzahl-kachel:hover { border-color: var(--primaer); }
.kennzahl-kachel.kachel-warnung { border-top-color: var(--gefahr); }
.kennzahl-fuss { font-size: .8rem; color: var(--text-leise); }
.reifegrad-mini td, .reifegrad-mini th { padding: .3rem .4rem; }
.uebersicht-liste li { margin: .35rem 0; }
.uebersicht-liste small { display: block; }

/* Globale Suche */
.suche-gross input[type=search] { min-width: min(30rem, 80vw); }
.suchtreffer { list-style: none; margin: 0; padding: 0; }
.suchtreffer li { padding: .45rem 0; border-bottom: 1px solid var(--linie); }
.suchtreffer li:last-child { border-bottom: 0; }
mark { background: #fde68a; color: #1d2733; border-radius: 2px; padding: 0 .1rem; }

/* Beziehungsnetz */
.ansicht-umschalter { margin-bottom: .75rem; }
.ansicht-umschalter a { border: 0; border-radius: 0; border-right: 1px solid var(--linie-stark); background: var(--flaeche); color: var(--text); text-decoration: none; }
.ansicht-umschalter a:last-child { border-right: 0; }
.ansicht-umschalter a.aktiv { background: var(--primaer); color: #fff; }
.netz-rahmen { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: 1rem; align-items: start; }
.netz-svg { width: 100%; height: auto; max-height: 80vh; display: block; }
.netz-linie { fill: none; stroke: var(--text-leise); opacity: .28; stroke-linecap: round; }
.netz-knoten { cursor: pointer; outline: none; }
.netz-knoten circle { fill: var(--g-farbe); stroke: var(--flaeche); stroke-width: 2; }
.netz-knoten:hover circle, .netz-knoten:focus-visible circle { stroke: #f59e0b; stroke-width: 4; }
.netz-nr { fill: #fff; font-size: 13px; font-weight: 700; text-anchor: middle; pointer-events: none; }
.netz-name { fill: var(--text); font-size: 15px; }
.netz-fokus .netz-linie { opacity: .07; }
.netz-fokus .netz-knoten { opacity: .35; }
.netz-fokus .netz-knoten.netz-gewaehlt, .netz-fokus .netz-knoten.netz-partner { opacity: 1; }
.netz-gewaehlt circle { stroke: #f59e0b; stroke-width: 5; }
.netz-fokus .netz-linie.netz-aus { stroke: var(--primaer); opacity: .85; }
.netz-fokus .netz-linie.netz-ein { stroke: #d97706; opacity: .85; }
.netz-fokus .netz-linie.netz-beide { stroke: #7c3aed; opacity: .85; }
.netz-aus { color: var(--primaer-text); font-weight: 600; }
.netz-ein { color: #d97706; font-weight: 600; }
.netz-info { position: sticky; top: .75rem; font-size: .9rem; }
.netz-info h3 { margin: 0 0 .5rem; }
.netz-info h4 { margin: .6rem 0 .2rem; font-size: .85rem; }
.netz-info ul { margin: 0; padding-left: 1.1rem; }
@media (max-width: 900px) { .netz-rahmen { grid-template-columns: 1fr; } .netz-info { position: static; } }

/* Steckbrief der Praktik */
.steckbrief-titel small { font-size: .9rem; font-weight: 400; }
.steckbrief-liste { margin: .2rem 0; padding-left: 1.2rem; }
.steckbrief-liste li { margin: .15rem 0; }
.kennzahl-tabelle select { min-width: 6.5rem; }

/* Anleitung als Fragezeichen in der Kopfzeile */
.kopf-hilfe { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .45); color: #fff; text-decoration: none; font-weight: 700; }
.kopf-hilfe:hover, .kopf-hilfe[aria-current="page"] { background: rgba(255, 255, 255, .18); }

/* Vorlagen */
.vorlagen-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .75rem; }
.vorlage-karte { display: flex; flex-direction: column; gap: .25rem; padding: .8rem .9rem; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche-2); }
.vorlage-karte h3 { margin: 0; font-size: 1rem; }
.vorlage-karte .hilfe { flex: 1; }
.vorlage-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .3rem; font-size: .85rem; }
.vorlagen-kurz { margin: 0; padding-left: 1.2rem; }
.vorlagen-kurz li { margin: .35rem 0; }
.btn-klein { padding: .1rem .5rem; font-size: .78rem; }
.gliederung { margin: 0; padding-left: 1.2rem; }
.gliederung .ebene-2 { margin-left: 1rem; font-size: .9rem; }
.gliederung .ebene-3 { margin-left: 2rem; font-size: .85rem; }

/* Dokumente nach Vorlage */
.dokument-abschnitt { margin: 1.4rem 0 .5rem; padding-bottom: .25rem; border-bottom: 2px solid var(--primaer); font-size: 1.1rem; }
.assistent-aktiv .dokument-abschnitt { margin-top: 0; }
.dokument-unterabschnitt { margin: 1rem 0 .4rem; font-size: .98rem; }
.dokument-text { max-width: 75ch; font-size: .92rem; color: var(--text-leise); }
ul.dokument-text { padding-left: 1.2rem; }
.dokument-tabelle { margin: .4rem 0 .9rem; }
.dokument-tabelle th, .dokument-tabelle td { border: 1px solid var(--linie); }
.dokument-tabelle th { background: var(--flaeche-2); color: var(--text); font-weight: 600; font-size: .85rem; min-width: 7rem; white-space: pre-line; }
.dokument-tabelle td { min-width: 9rem; }
.dokument-tabelle input, .dokument-tabelle textarea { width: 100%; font: inherit; font-size: .9rem; padding: .3rem .4rem; border: 1px solid var(--linie-stark); border-radius: 4px; background: var(--flaeche); color: var(--text); }
.dokument-tabelle textarea { min-height: 4.5rem; resize: vertical; }
.dokument-liste-tabelle tbody { counter-reset: zeile; }
.dokument-liste-tabelle td.nr { min-width: 2.5rem; width: 2.5rem; text-align: center; color: var(--text-leise); }
.dokument-liste-tabelle td.nr::before { counter-increment: zeile; content: counter(zeile); }
.dokument-liste { border: 0; padding: 0; margin: 0 0 .9rem; }
.dokument .dokument-tabelle td { white-space: normal; }
@media print {
    .dokument-tabelle th, .dokument-tabelle td { border-color: #888; }
    .dokument-text { color: #444; }
}

/* Gesamtschaubild */
.schaubild-bereich { background: var(--grund); }
.schaubild-leiste { margin-bottom: .6rem; }
.schaubild-leiste .umschalter button { min-width: 2.4rem; font-weight: 600; }
.schaubild-rahmen { position: relative; height: calc(100vh - 15rem); min-height: 26rem; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); overflow: hidden; cursor: grab; touch-action: none; user-select: none; outline: none; }
.schaubild-rahmen:focus-visible { box-shadow: 0 0 0 3px var(--primaer-hell), 0 0 0 4px var(--primaer); }
.schaubild-rahmen.sb-zieht { cursor: grabbing; }
.schaubild-svg { display: block; width: 100%; height: 100%; }
.sb-vollbild { padding: 1rem; overflow: auto; }
.sb-vollbild .schaubild-rahmen { height: calc(100vh - 7rem); }
.schaubild-karte { position: absolute; right: .75rem; bottom: .75rem; width: 13rem; height: 9.5rem; background: var(--flaeche); border: 1px solid var(--linie-stark); border-radius: 6px; box-shadow: 0 2px 8px rgba(0, 0, 0, .15); cursor: crosshair; }
.schaubild-karte use { pointer-events: none; }
.sb-ausschnitt { fill: rgba(37, 99, 235, .12); stroke: #2563eb; stroke-width: 24; }

.schaubild-svg text, .schaubild-karte text { fill: var(--text); font-family: inherit; pointer-events: none; }
.schaubild-svg a { cursor: pointer; }
.schaubild-svg a:hover rect, .schaubild-svg a:focus-visible rect, .schaubild-svg a:hover path { stroke: #f59e0b; stroke-width: 3; }
.schaubild-svg a:focus-visible { outline: none; }
.sb-gross { font-size: 26px; font-weight: 700; }
.sb-mittel { font-size: 19px; }
.sb-klein { font-size: 15px; }
.sb-mini { font-size: 12px; font-weight: 600; }
.sb-fett { font-weight: 700; }
.sb-titel { font-size: 22px; font-weight: 700; fill: var(--primaer-text) !important; }
.sb-ueberschrift { font-size: 20px; font-weight: 700; fill: var(--text-leise) !important; }
.sb-mitte { text-anchor: middle; }
.schaubild-svg .sb-hell, .schaubild-karte .sb-hell { fill: #fff; }
.schaubild-svg .sb-leise { fill: var(--text-leise); }

.sb-ein, .sb-aus { fill: var(--primaer-hell); stroke: var(--primaer); stroke-width: 2; }
.sb-svs-rahmen { fill: var(--flaeche-2); stroke: var(--primaer); stroke-width: 3; }
.sb-teil { fill: var(--flaeche); stroke: var(--linie-stark); stroke-width: 1.5; }
.sb-teil-wk { fill: var(--primaer-hell); stroke: var(--primaer); }
.sb-pfeil { stroke: var(--primaer); stroke-width: 6; marker-end: url(#sb-spitze); }
.sb-spitze { fill: var(--primaer); }
.sb-prinzip { fill: var(--flaeche-2); stroke: var(--linie-stark); }
.sb-dimension { fill: var(--hinweis-bg); stroke: var(--hinweis-linie); }

.sb-akt { cursor: pointer; outline: none; }
.sb-akt-form { stroke: var(--flaeche); stroke-width: 3; }
.sb-akt:hover .sb-akt-form, .sb-akt:focus-visible .sb-akt-form, .sb-akt[aria-pressed="true"] .sb-akt-form { stroke: #f59e0b; stroke-width: 5; }
.akt-plan .sb-akt-form { fill: var(--a-plan); }
.akt-improve .sb-akt-form { fill: var(--a-improve); }
.akt-engage .sb-akt-form { fill: var(--a-engage); }
.akt-design-transition .sb-akt-form { fill: var(--a-design-transition); }
.akt-obtain-build .sb-akt-form { fill: var(--a-obtain-build); }
.akt-deliver-support .sb-akt-form { fill: var(--a-deliver-support); }

.sb-gruppe { fill: var(--g-farbe); }
.sb-karte { fill: var(--flaeche); stroke: var(--g-farbe); stroke-width: 2; }
.sb-karte-kopf { fill: var(--flaeche-2); stroke: var(--g-farbe); stroke-width: 2; }
.sb-inaktiv { opacity: .45; }
.sb-auswahl .sb-praktik { opacity: .22; transition: opacity .2s; }
.sb-auswahl .sb-praktik.sb-beitrag { opacity: 1; }
.sb-beitrag .sb-karte { stroke: #f59e0b; stroke-width: 5; }
.sb-beitrag-stark .sb-karte { stroke-width: 9; }
.sb-gefunden .sb-karte { stroke: #f59e0b; stroke-width: 8; }
.sb-stufe { fill: var(--l0); }
.sb-stufe.lvl-1 { fill: var(--l1); }
.sb-stufe.lvl-2 { fill: var(--l2); }
.sb-stufe.lvl-3 { fill: var(--l3); }
.sb-stufe.lvl-4 { fill: var(--l4); }
.sb-stufe.lvl-5 { fill: var(--l5); }
.sb-prozess { fill: var(--flaeche-2); stroke: var(--linie-stark); }
.sb-prozess.status-in_abstimmung, .sb-leg.status-in_abstimmung { fill: var(--warn-bg); stroke: var(--warn-linie); background: var(--warn-bg); border-color: var(--warn-linie); }
.sb-prozess.status-in_kraft, .sb-leg.status-in_kraft { fill: var(--ok-bg); stroke: var(--ok-linie); background: var(--ok-bg); border-color: var(--ok-linie); }
.sb-prozess.status-ausser_kraft, .sb-leg.status-ausser_kraft { fill: var(--fehler-bg); stroke: var(--fehler-linie); background: var(--fehler-bg); border-color: var(--fehler-linie); }
.sb-leg { display: inline-block; width: 1.1rem; height: .7rem; border: 1px solid var(--linie-stark); border-radius: 3px; background: var(--flaeche-2); }
.sb-fern .sb-detail { display: none; }

.sb-beziehungen { display: none; pointer-events: none; }
.sb-beziehungen.sb-an { display: inline; }
.sb-linie { fill: none; stroke: var(--primaer); opacity: .35; stroke-linecap: round; }
.sb-linie-1 { stroke-width: 2; } .sb-linie-2 { stroke-width: 3.5; } .sb-linie-3 { stroke-width: 5; } .sb-linie-4 { stroke-width: 6.5; } .sb-linie-5 { stroke-width: 8; }
.sb-fokus .sb-linie { opacity: .08; }
.sb-fokus .sb-linie.sb-betont { opacity: .95; stroke: #d97706; }

.sb-strom-kopf { fill: var(--primaer); }
.sb-schritt { fill: var(--flaeche-2); stroke: var(--linie-stark); stroke-width: 2; }
.sb-schritt.akt-plan { stroke: var(--a-plan); } .sb-schritt.akt-improve { stroke: var(--a-improve); } .sb-schritt.akt-engage { stroke: var(--a-engage); }
.sb-schritt.akt-design-transition { stroke: var(--a-design-transition); } .sb-schritt.akt-obtain-build { stroke: var(--a-obtain-build); } .sb-schritt.akt-deliver-support { stroke: var(--a-deliver-support); }
.sb-schritt[class*="akt-"] { stroke-width: 4; }
.schaubild-legende { margin-top: .6rem; }
@media (max-width: 700px) {
    .schaubild-karte { width: 8rem; height: 6rem; }
    .schaubild-rahmen { height: 70vh; }
}

/* Ganzheitliches Prozessmodell */
.modell-stand { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; margin: .5rem 0; }
.modell-stand meter { width: 12rem; height: 1rem; }
.modell-fluss { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.6rem; align-items: start; }
.modell-spalte { position: relative; display: flex; flex-direction: column; gap: .5rem; }
.modell-spalte h3 { margin: 0 0 .2rem; font-size: .95rem; color: var(--text-leise); }
.modell-spalte + .modell-spalte::before { content: "→"; position: absolute; left: -1.25rem; top: 2.2rem; color: var(--text-leise); font-size: 1.2rem; }
.modell-mitte { background: var(--primaer-hell); border-radius: var(--radius); padding: .5rem; }
.modell-kasten { display: flex; flex-direction: column; gap: .15rem; padding: .5rem .65rem; border: 1px solid var(--linie-stark); border-left: 4px solid var(--primaer); border-radius: 6px; background: var(--flaeche); font-size: .88rem; }
.modell-kasten small { font-size: .78rem; }
.modell-nachbar { border-left-color: var(--g-service); background: var(--flaeche-2); }
.modell-luecke { border-color: var(--fehler-linie); border-left-color: var(--gefahr); background: var(--fehler-bg); }
.modell-fehlt { color: var(--fehler-text); font-weight: 600; }
.modell-ablauf { list-style: none; counter-reset: schritt; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.modell-ablauf li { counter-increment: schritt; }
.modell-ablauf li strong::before { content: counter(schritt) ". "; color: var(--text-leise); }
.modell-pruefung td { vertical-align: top; }
.modell-pruefung .modell-ok td:first-child { color: var(--text-leise); }
.erfolg-text { color: var(--ok-text); font-weight: 600; }
@media (max-width: 1000px) {
    .modell-fluss { grid-template-columns: 1fr; gap: 1rem; }
    .modell-spalte + .modell-spalte { padding-top: 1rem; }
    .modell-spalte + .modell-spalte::before { content: "↓"; left: .3rem; top: -.4rem; }
}


/* Prozessdiagramm (BPMN) */
.ablauf-reiter { display: inline-flex; margin: .2rem 0 .6rem; border: 1px solid var(--linie-stark); border-radius: 6px; overflow: hidden; }
.ablauf-reiter a { padding: .35rem .9rem; text-decoration: none; color: var(--text); background: var(--flaeche); }
.ablauf-reiter a + a { border-left: 1px solid var(--linie-stark); }
.ablauf-reiter a[aria-current="page"] { background: var(--primaer); color: #fff; font-weight: 600; }
.ablauf-umschalter { margin-bottom: .6rem; }

.dg-svg text { fill: var(--text); font-size: 13px; font-family: inherit; pointer-events: none; }
.dg-svg .dg-klein { font-size: 12px; }
.dg-svg .dg-mitte { text-anchor: middle; }
.dg-form { fill: var(--flaeche); stroke: var(--text); stroke-width: 2; }
.dg-ende .dg-form { stroke-width: 4.5; }
.dg-aufruf { stroke-width: 4; }
.dg-linie, .dg-sym { fill: none; stroke: var(--text); stroke-width: 1.5; }
.dg-sym-dick { fill: none; stroke: var(--text); stroke-width: 3.5; stroke-linecap: round; }
.dg-sym-voll { fill: var(--text); stroke: var(--text); stroke-width: 1; }
.dg-sym-hell { fill: none; stroke: var(--flaeche); stroke-width: 1.2; }
.dg-zahnrad { stroke-width: 3; stroke-dasharray: 3 2; }
.dg-treffer { fill: transparent; stroke: none; }
.dg-kante-linie { fill: none; stroke: var(--text); stroke-width: 1.6; }
.dg-assoziation .dg-kante-linie { stroke-dasharray: 4 4; }
.dg-kante-treffer { fill: none; stroke: transparent; stroke-width: 12; }
.dg-spitze { fill: var(--text); }
.dg-kante-text { fill: var(--text-leise) !important; }
.dg-bahn { fill: var(--flaeche); stroke: var(--linie-stark); }
.dg-bahn-2 { fill: var(--flaeche-2); }
.dg-bahn-kopf { fill: var(--primaer-hell); stroke: var(--linie-stark); }
.dg-svg .dg-bahn-name { font-weight: 700; font-size: 13px; }

/* Leseansicht */
.dg-ansicht { overflow-x: auto; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); padding: .5rem; }
.dg-lesen { display: block; width: 100%; height: auto; max-height: 75vh; }

/* Editor */
.dg-editor { margin-bottom: 1rem; }
.dg-werkzeuge { margin-bottom: .5rem; }
.dg-werkzeuge .dg-speichern { margin-left: auto; }
.dg-raster { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) 16rem; gap: .6rem; }
.dg-palette { display: flex; flex-direction: column; gap: .6rem; }
.dg-palette-gruppe { display: flex; flex-direction: column; gap: .25rem; }
.dg-palette-gruppe strong { font-size: .75rem; color: var(--text-leise); text-transform: uppercase; letter-spacing: .03em; }
.dg-palette-knopf { display: flex; align-items: center; gap: .45rem; padding: .25rem .4rem; font: inherit; font-size: .82rem; text-align: left; color: var(--text); background: var(--flaeche); border: 1px solid var(--linie-stark); border-radius: 6px; cursor: pointer; }
.dg-palette-knopf:hover { border-color: var(--primaer); }
.dg-palette-knopf[aria-pressed="true"] { background: var(--primaer-hell); border-color: var(--primaer); font-weight: 600; }
.dg-mini { width: 2rem; height: 1.6rem; flex: none; }
.dg-mini text { display: none; }
.dg-flaeche { position: relative; height: calc(100vh - 17rem); min-height: 28rem; border: 1px solid var(--linie-stark); border-radius: var(--radius); background-color: var(--flaeche);
    background-image: radial-gradient(var(--linie) 1px, transparent 1px); background-size: 20px 20px; overflow: hidden; touch-action: none; user-select: none; outline: none; cursor: default; }
.dg-flaeche:focus-visible { box-shadow: 0 0 0 3px var(--primaer-hell), 0 0 0 4px var(--primaer); }
.dg-modus .dg-flaeche { cursor: crosshair; }
.dg-zeichnung { display: block; width: 100%; height: 100%; }
.dg-zeichnung .dg-knoten { cursor: move; }
.dg-zeichnung .dg-kante { cursor: pointer; }
.dg-gewaehlt .dg-form, .dg-gewaehlt.dg-anmerkung .dg-linie { stroke: #f59e0b; }
.dg-gewaehlt .dg-kante-linie { stroke: #f59e0b; stroke-width: 3; }
.dg-zeichnung .dg-knoten:hover .dg-form { stroke: var(--primaer); }
.dg-geist { opacity: .45; pointer-events: none; }
.dg-zug { fill: none; stroke: #f59e0b; stroke-width: 2; stroke-dasharray: 6 4; pointer-events: none; }
.dg-griff { cursor: crosshair; }
.dg-griff circle { fill: #f59e0b; stroke: var(--flaeche); stroke-width: 2; }
.dg-griff path { fill: none; stroke: #fff; stroke-width: 1.8; }
.dg-pad { position: absolute; display: flex; gap: 2px; padding: 3px; background: var(--flaeche); border: 1px solid var(--linie-stark); border-radius: 6px; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); z-index: 2; }
.dg-pad button { width: 1.9rem; height: 1.9rem; font: inherit; font-size: .95rem; line-height: 1; color: var(--text); background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: 4px; cursor: pointer; }
.dg-pad button:hover { background: var(--primaer-hell); border-color: var(--primaer); }
.dg-pad button[hidden] { display: none; }
.dg-texteingabe { position: absolute; width: 160px; min-height: 56px; z-index: 3; font: inherit; font-size: .85rem; text-align: center; padding: .3rem; border: 2px solid #f59e0b; border-radius: 6px; background: var(--flaeche); color: var(--text); resize: none; }
.dg-leer-hinweis { position: absolute; inset: 35% 15% auto; text-align: center; color: var(--text-leise); pointer-events: none; display: none; }
.dg-leer .dg-leer-hinweis { display: block; }
.dg-panel { display: flex; flex-direction: column; gap: .5rem; padding: .7rem; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); max-height: calc(100vh - 17rem); min-height: 28rem; overflow: auto; font-size: .88rem; }
.dg-panel h3 { margin: .3rem 0 0; font-size: .95rem; }
.dg-panel label { display: flex; flex-direction: column; gap: .2rem; font-weight: 600; font-size: .82rem; }
.dg-panel input, .dg-panel select, .dg-panel textarea { font: inherit; font-weight: 400; padding: .3rem .4rem; border: 1px solid var(--linie-stark); border-radius: 4px; background: var(--flaeche); color: var(--text); }
.dg-bahn-zeile { display: grid; grid-template-columns: minmax(0, 1fr) 4.2rem auto auto; gap: .25rem; align-items: center; }
.dg-hinweise { margin: 0; padding-left: 1.1rem; }
.dg-hinweise li { margin: .2rem 0; }
.link-knopf { font: inherit; padding: 0; border: 0; background: none; color: var(--primaer-text); text-decoration: underline; cursor: pointer; text-align: left; }
.dg-status { margin: .4rem 0 0; }
.dg-tasten ul { margin: .3rem 0; }
@media (max-width: 1100px) {
    .dg-raster { grid-template-columns: 1fr; }
    .dg-palette { flex-direction: row; flex-wrap: wrap; }
    .dg-panel { min-height: 0; max-height: none; }
}
@media print {
    .dg-ansicht { border: 0; padding: 0; overflow: visible; }
    .dg-lesen { max-height: none; }
    .ablauf-umschalter { display: none !important; }
    [data-ablauf-ansicht][hidden] { display: block !important; }
}

/* ITIL-5-Ansicht: acht Aktivitäten der Wertschöpfungskette */
:root { --a-discover: #2563eb; --a-design: #9333ea; --a-acquire: #0891b2; --a-build: #0d9488; --a-transition: #c026d3; --a-operate: #d97706; --a-deliver: #dc2626; --a-support: #16a34a; }
.akt-discover { background: var(--a-discover); } .akt-design { background: var(--a-design); } .akt-acquire { background: var(--a-acquire); } .akt-build { background: var(--a-build); }
.akt-transition { background: var(--a-transition); } .akt-operate { background: var(--a-operate); } .akt-deliver { background: var(--a-deliver); } .akt-support { background: var(--a-support); }
.akt-discover .sb-akt-form { fill: var(--a-discover); } .akt-design .sb-akt-form { fill: var(--a-design); } .akt-acquire .sb-akt-form { fill: var(--a-acquire); } .akt-build .sb-akt-form { fill: var(--a-build); }
.akt-transition .sb-akt-form { fill: var(--a-transition); } .akt-operate .sb-akt-form { fill: var(--a-operate); } .akt-deliver .sb-akt-form { fill: var(--a-deliver); } .akt-support .sb-akt-form { fill: var(--a-support); }
.sb-akt[class*="akt-"], .sb-schritt[class*="akt-"] { background: none; }
.gruppe-produkt-service { --g-farbe: var(--g-service); }
.gruppe-allgemein { --g-farbe: var(--g-general); }
.wk.wk5 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-areas: none; gap: .5rem; }
@media (min-width: 1250px) { .wk.wk5 { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
@media (max-width: 560px) { .wk.wk5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wk5-feld { display: flex; flex-direction: column; gap: .2rem; }
.wk5-feld .wk-akt { min-height: 4rem; clip-path: polygon(0 0, calc(100% - .7rem) 0, 100% 50%, calc(100% - .7rem) 100%, 0 100%, .7rem 50%); padding-left: 1.2rem; }
.wk5-feld:first-child .wk-akt { clip-path: polygon(0 0, calc(100% - .7rem) 0, 100% 50%, calc(100% - .7rem) 100%, 0 100%); padding-left: .8rem; }
.wk5-mehr { font-size: .78rem; text-align: center; }
.wk.wk5:has([aria-pressed="true"]) .wk-akt:not([aria-pressed="true"]) { opacity: .45; }
.kette-nav { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .6rem; }
.kette-nav a { color: #fff; text-decoration: none; font-size: .82rem; padding: .2rem .65rem; border-radius: 999px; opacity: .7; }
.kette-nav a:hover, .kette-nav a[aria-current="page"] { opacity: 1; box-shadow: 0 0 0 2px var(--text); }
.akt-steckbrief { display: grid; grid-template-columns: minmax(8rem, 12rem) 1fr; gap: .35rem 1rem; margin: 0; }
.akt-steckbrief dt { font-weight: 600; color: var(--text-leise); }
.akt-steckbrief dd { margin: 0; }
.akt-steckbrief ul, .aktivitaet-schritte { margin: 0; padding-left: 1.1rem; }
.aktivitaet-schritte li { margin-bottom: .5rem; }
.aktivitaet-schritte p { margin: .15rem 0 0; }
.konzepte dt { font-weight: 600; margin-top: .5rem; }
.konzepte dd { margin: .1rem 0 0; color: var(--text-leise); max-width: 75ch; }
.erfolgsfaktor { border-top: 1px solid var(--linie); padding: .5rem 0; }
.erfolgsfaktor summary { cursor: pointer; }
.erfolgsfaktor h4 { margin: .5rem 0 .2rem; font-size: .88rem; }
.rolle5 { display: inline-block; font-size: .72rem; font-weight: 600; padding: .05rem .45rem; border-radius: 999px; border: 1px solid var(--linie-stark); }
.rolle5-befaehigend { background: var(--ok-bg); color: var(--ok-text); border-color: var(--ok-linie); }
.rolle5-unterstuetzend { background: var(--hinweis-bg); color: var(--primaer-text); border-color: var(--hinweis-linie); }
@media (max-width: 700px) { .akt-steckbrief { grid-template-columns: 1fr; } }