/* ==========================================================================
   DigitalDealership – Stylesheet
   Farben nur über Variablen: helles und dunkles Farbschema.
   Dunkel folgt der Systemeinstellung, außer der Nutzer wählt im Benutzermenü
   ausdrücklich „Hell“ oder „Dunkel“ (Attribut data-theme am <html>-Element).
   ========================================================================== */

:root {
  color-scheme: light;
  --bg: #f5f5f2;
  --bg-tiefer: #eeeeea;
  --flaeche: #ffffff;
  --flaeche-2: #fafaf8;
  --hover: #f1f1ed;
  --text: #1c2127;
  --text-2: #454c55;
  --muted: #6a7078;
  --leise: #9aa0a7;
  --linie: #e4e4df;
  --linie-stark: #d2d3cd;
  --feld-rand: #c8cac4;
  --primaer: #2459c4;
  --primaer-hover: #1c48a3;
  --primaer-weich: #eaf0fb;
  --primaer-rand: #c4d4f1;
  --btn-primaer: #2459c4;
  --btn-primaer-hover: #1c48a3;
  --fokus: rgba(36, 89, 196, .42);
  --gefahr: #b4372f;
  --gefahr-weich: #fbeeec;
  --gefahr-rand: #ecc9c5;
  --ok: #1f6b37;
  --ok-weich: #eaf5ed;
  --ok-rand: #c3e0cb;
  --info: #1d4b8f;
  --info-weich: #eaf1fb;
  --info-rand: #c7d7f0;
  --hinweis: #8a5310;
  --hinweis-weich: #fdf4e3;
  --grad-manuell: #b9c5cb;
  --grad-teildigital: #5c9cab;
  --grad-digital: #165f6f;
  --grad-symbol: #23707f;
  --grad-leer: #e7e7e2;
  --status-entwurf: #9198a1;
  --status-in_pruefung: #c98a12;
  --status-freigegeben: #2f8a4c;
  --stern: #d99a0b;
  --kopf-bg: rgba(255, 255, 255, .86);
  --avatar-a: #e7eefa;
  --avatar-b: #d4e0f5;
  --avatar-text: #1c48a3;
  --schatten-1: 0 1px 2px rgba(25, 30, 40, .05), 0 3px 10px rgba(25, 30, 40, .04);
  --schatten-2: 0 10px 30px rgba(25, 30, 40, .14), 0 2px 6px rgba(25, 30, 40, .06);
  --backdrop: rgba(20, 24, 30, .32);
  --radius: 10px;
  --radius-klein: 7px;
  --schrift: "Inter", "Inter var", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #141619;
  --bg-tiefer: #1a1d21;
  --flaeche: #1d2024;
  --flaeche-2: #191c20;
  --hover: #262a2f;
  --text: #e5e7ea;
  --text-2: #c2c7ce;
  --muted: #959ba4;
  --leise: #6c727b;
  --linie: #2c3036;
  --linie-stark: #393e45;
  --feld-rand: #40454d;
  --primaer: #7aa5ff;
  --primaer-hover: #9bbcff;
  --primaer-weich: rgba(122, 165, 255, .13);
  --primaer-rand: rgba(122, 165, 255, .34);
  --btn-primaer: #3a6ad8;
  --btn-primaer-hover: #4b7ae6;
  --fokus: rgba(122, 165, 255, .5);
  --gefahr: #ff8a80;
  --gefahr-weich: rgba(255, 138, 128, .1);
  --gefahr-rand: rgba(255, 138, 128, .32);
  --ok: #74d395;
  --ok-weich: rgba(116, 211, 149, .1);
  --ok-rand: rgba(116, 211, 149, .3);
  --info: #9bbcff;
  --info-weich: rgba(122, 165, 255, .1);
  --info-rand: rgba(122, 165, 255, .3);
  --hinweis: #e8b871;
  --hinweis-weich: rgba(232, 184, 113, .1);
  --grad-manuell: #47565e;
  --grad-teildigital: #3a8c9d;
  --grad-digital: #7fd3e1;
  --grad-symbol: #7fd3e1;
  --grad-leer: #2a2e33;
  --status-entwurf: #8b929b;
  --status-in_pruefung: #e3ad44;
  --status-freigegeben: #62c683;
  --stern: #f2c14e;
  --kopf-bg: rgba(20, 22, 25, .82);
  --avatar-a: #233150;
  --avatar-b: #1b2742;
  --avatar-text: #a9c3ff;
  --schatten-1: 0 1px 2px rgba(0, 0, 0, .3);
  --schatten-2: 0 12px 34px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .3);
  --backdrop: rgba(0, 0, 0, .55);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  color-scheme: dark;
  --bg: #141619;
  --bg-tiefer: #1a1d21;
  --flaeche: #1d2024;
  --flaeche-2: #191c20;
  --hover: #262a2f;
  --text: #e5e7ea;
  --text-2: #c2c7ce;
  --muted: #959ba4;
  --leise: #6c727b;
  --linie: #2c3036;
  --linie-stark: #393e45;
  --feld-rand: #40454d;
  --primaer: #7aa5ff;
  --primaer-hover: #9bbcff;
  --primaer-weich: rgba(122, 165, 255, .13);
  --primaer-rand: rgba(122, 165, 255, .34);
  --btn-primaer: #3a6ad8;
  --btn-primaer-hover: #4b7ae6;
  --fokus: rgba(122, 165, 255, .5);
  --gefahr: #ff8a80;
  --gefahr-weich: rgba(255, 138, 128, .1);
  --gefahr-rand: rgba(255, 138, 128, .32);
  --ok: #74d395;
  --ok-weich: rgba(116, 211, 149, .1);
  --ok-rand: rgba(116, 211, 149, .3);
  --info: #9bbcff;
  --info-weich: rgba(122, 165, 255, .1);
  --info-rand: rgba(122, 165, 255, .3);
  --hinweis: #e8b871;
  --hinweis-weich: rgba(232, 184, 113, .1);
  --grad-manuell: #47565e;
  --grad-teildigital: #3a8c9d;
  --grad-digital: #7fd3e1;
  --grad-symbol: #7fd3e1;
  --grad-leer: #2a2e33;
  --status-entwurf: #8b929b;
  --status-in_pruefung: #e3ad44;
  --status-freigegeben: #62c683;
  --stern: #f2c14e;
  --kopf-bg: rgba(20, 22, 25, .82);
  --avatar-a: #233150;
  --avatar-b: #1b2742;
  --avatar-text: #a9c3ff;
  --schatten-1: 0 1px 2px rgba(0, 0, 0, .3);
  --schatten-2: 0 12px 34px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .3);
  --backdrop: rgba(0, 0, 0, .55);
  }
}

/* --- Grundlagen ----------------------------------------------------------- */
* { box-sizing: border-box; }
html { font-size: 16px; overflow-y: scroll; -webkit-text-size-adjust: 100%; }
@supports (scrollbar-gutter: stable) {
  html { overflow-y: auto; scrollbar-gutter: stable; }
}
body {
  margin: 0; font-family: var(--schrift); color: var(--text); background: var(--bg);
  line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01";
}
a { color: var(--primaer); text-decoration: none; }
a:hover { text-decoration: underline; }
/* Öffentlicher Bereich: Links ohne Unterstreichung, nur sanfter Farbwechsel */
body.oeffentlich a { transition: color .15s; }
body.oeffentlich a:hover { text-decoration: none; }
body.oeffentlich .rechtstext a:hover, body.oeffentlich .auth-card a:not(.btn):hover { color: var(--primaer-hover); }
h1 { font-size: 1.55rem; line-height: 1.25; margin: 0 0 .3rem; letter-spacing: -.015em; font-weight: 700; }
h2 { font-size: 1.15rem; margin: 0 0 .8rem; letter-spacing: -.01em; }
h3 { font-size: 1rem; margin: 0 0 .5rem; }
p { margin: 0 0 .8rem; }
code { background: var(--bg-tiefer); padding: .1em .35em; border-radius: 4px; font-size: .9em; }
kbd {
  font-family: var(--schrift); font-size: .72rem; font-weight: 600; color: var(--muted);
  background: var(--flaeche); border: 1px solid var(--linie-stark); border-bottom-width: 2px;
  border-radius: 5px; padding: .05rem .38rem; line-height: 1.3;
}
.muted { color: var(--muted); }
.narrow { max-width: 560px; }
.inline { display: inline; }
.hinweis { font-size: .85rem; margin-top: .4rem; }
.leer { padding: .5rem 0; }
.versteckt { display: none; }
::selection { background: var(--primaer-weich); }

/* --- Kopfzeile ------------------------------------------------------------ */
.kopf {
  position: sticky; top: 0; z-index: 40; background: var(--kopf-bg);
  -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--linie); transition: box-shadow .2s ease;
}
.kopf.gescrollt { box-shadow: var(--schatten-1), 0 6px 20px rgba(0, 0, 0, .05); }
.kopf-innen { max-width: 1240px; margin: 0 auto; padding: 0 1.5rem; height: 60px; display: flex; align-items: center; gap: 1.5rem; }

.marke { display: inline-flex; align-items: center; gap: .6rem; color: var(--text); flex-shrink: 0; }
.marke:hover { text-decoration: none; }
.marke-symbol {
  width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, #2f6fe0 0%, #1a4aa0 100%);
  box-shadow: 0 2px 6px rgba(36, 89, 196, .32), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.marke-text { font-size: 1.05rem; letter-spacing: -.01em; font-weight: 500; color: var(--text-2); }
.marke-text strong { font-weight: 750; color: var(--text); }

.kopf-menue { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex: 1; min-width: 0; }
.hauptnav, .kopf-rechts { display: flex; align-items: center; gap: .25rem; }

.navpunkt {
  display: inline-flex; align-items: center; gap: .5rem; height: 36px; padding: 0 .8rem; border-radius: 8px;
  color: var(--text-2); font-size: .92rem; font-weight: 550; white-space: nowrap; transition: background-color .15s, color .15s;
}
.navpunkt svg { color: var(--leise); transition: color .15s; }
.navpunkt:hover { background: var(--hover); color: var(--text); text-decoration: none; }
.navpunkt:hover svg { color: var(--muted); }
.navpunkt.aktiv { background: var(--primaer-weich); color: var(--primaer); }
.navpunkt.aktiv svg { color: var(--primaer); }

.kopf-trenner { width: 1px; height: 24px; background: var(--linie); margin: 0 .5rem; }

.benutzermenue { position: relative; }
.benutzer-knopf {
  display: inline-flex; align-items: center; gap: .55rem; height: 40px; padding: 0 .5rem 0 .3rem; border-radius: 999px;
  cursor: pointer; list-style: none; color: var(--text); font-size: .92rem; font-weight: 550; user-select: none; transition: background-color .15s;
}
.benutzer-knopf::-webkit-details-marker { display: none; }
.benutzer-knopf:hover, .benutzermenue[open] .benutzer-knopf { background: var(--hover); }
.benutzer-knopf .chevron { color: var(--leise); transition: transform .2s; }
.benutzermenue[open] .chevron { transform: rotate(180deg); }
.avatar {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  background: linear-gradient(135deg, var(--avatar-a), var(--avatar-b)); color: var(--avatar-text);
  font-size: .78rem; font-weight: 700; letter-spacing: .02em; box-shadow: inset 0 0 0 1px var(--primaer-rand);
}
.avatar-gross { width: 40px; height: 40px; font-size: .9rem; }
.benutzermenue .menue-liste { min-width: 260px; padding: .4rem; top: calc(100% + .45rem); animation: menueEin .14s ease-out; }
@keyframes menueEin { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.menue-kopf { display: flex; align-items: center; gap: .7rem; padding: .6rem .7rem .7rem; border-bottom: 1px solid var(--linie); margin-bottom: .3rem; }
.menue-kopf strong { display: block; font-size: .92rem; }
.menue-kopf small { display: block; color: var(--muted); font-size: .8rem; }
.benutzermenue .menue-liste a, .benutzermenue .menue-liste button.menue-eintrag {
  display: flex; align-items: center; gap: .6rem; width: 100%; padding: .55rem .7rem; border-radius: 6px;
  color: var(--text); font: inherit; font-size: .9rem; background: none; border: 0; cursor: pointer; text-align: left;
}
.benutzermenue .menue-liste a svg, .benutzermenue .menue-liste button.menue-eintrag svg { color: var(--leise); }
.benutzermenue .menue-liste a:hover, .benutzermenue .menue-liste button.menue-eintrag:hover { background: var(--hover); text-decoration: none; }
.benutzermenue .menue-liste form { margin: 0; }
.benutzermenue .menue-liste form button.menue-eintrag:hover, .benutzermenue .menue-liste form button.menue-eintrag:hover svg { color: var(--gefahr); }
.benutzermenue .menue-liste .menue-recht { display: flex; gap: .2rem; border-top: 1px solid var(--linie); margin-top: .3rem; padding-top: .3rem; }
.benutzermenue .menue-liste .menue-recht a { width: auto; padding: .35rem .7rem; font-size: .78rem; color: var(--muted); }
.menue-abschnitt { padding: .55rem .7rem .4rem; border-bottom: 1px solid var(--linie); margin-bottom: .3rem; }
.menue-abschnitt-titel { display: block; font-size: .75rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .4rem; }
.segmente { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 3px; border-radius: 8px; background: var(--bg-tiefer); border: 1px solid var(--linie); }
.segmente button {
  display: inline-flex; align-items: center; justify-content: center; gap: .3rem; padding: .3rem .4rem; border: 0; border-radius: 6px;
  background: none; color: var(--muted); font: inherit; font-size: .8rem; font-weight: 550; cursor: pointer;
}
.segmente button:hover { color: var(--text); }
.segmente button[aria-pressed="true"] { background: var(--flaeche); color: var(--text); box-shadow: var(--schatten-1); }

.kopf-umschalter { display: none; margin-left: auto; width: 40px; height: 40px; border-radius: 8px; border: 0; background: none; color: var(--text); cursor: pointer; place-items: center; }
.kopf-umschalter:hover { background: var(--hover); }
.kopf-rechts-gast { margin-left: auto; }
.kopf-rechts.kopf-rechts-gast { flex-direction: row; align-items: center; gap: .7rem; }
.sprachwahl { display: flex; align-items: center; gap: .1rem; align-self: center; margin-right: .4rem; }
.sprachwahl a { padding: .15rem .3rem; font-size: .72rem; font-weight: 600; letter-spacing: .04em; color: var(--leise); }
.sprachwahl a + a::before { content: "·"; margin-right: .4rem; color: var(--leise); }
.sprachwahl a:hover { color: var(--text-2); text-decoration: none; }
.sprachwahl a.aktiv { color: var(--text-2); }
.kopf-rechts-gast .sprachwahl { margin-right: 0; }
.kopf-rechts-gast .btn { white-space: nowrap; min-width: 6.2rem; justify-content: center; text-align: center; }
@media (max-width: 420px) {
  .kopf-rechts.kopf-rechts-gast { gap: .4rem; }
  .sprachwahl a { padding: .15rem .2rem; }
  .kopf-rechts-gast .btn { padding-left: .6rem; padding-right: .6rem; }
}

/* --- Inhalt und Raster ---------------------------------------------------- */
.main { max-width: 1240px; margin: 0 auto; padding: 1.75rem 1.5rem 3rem; }
.footer { text-align: center; color: var(--leise); font-size: .82rem; padding: 2rem 1rem; }
.footer a { color: inherit; }
.footer a:hover { color: var(--text); }
.card {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 1.2rem 1.4rem; margin-bottom: 1.2rem; box-shadow: var(--schatten-1);
}
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 1.2rem; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 1.2rem; }
.grid-2 > label, .grid-2 > fieldset { margin-bottom: 0; }
.seitenkopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.seitenkopf h1, .seitenkopf h2 { margin-bottom: .2rem; }
.aktionen { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.breadcrumb { font-size: .88rem; color: var(--muted); margin-bottom: .4rem; }
.liste { list-style: none; padding: 0; margin: 0; }
.liste li { padding: .5rem 0; border-bottom: 1px solid var(--linie); }
.liste li:last-child { border-bottom: 0; }
.liste.kompakt li { padding: .2rem 0; border: 0; }
.zeile { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .35rem; padding: .5rem .95rem; border-radius: var(--radius-klein);
  border: 1px solid var(--linie-stark); background: var(--flaeche); color: var(--text); font: inherit; font-weight: 500;
  cursor: pointer; line-height: 1.2; transition: background-color .12s, border-color .12s;
}
.btn:hover { background: var(--hover); text-decoration: none; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--btn-primaer); border-color: var(--btn-primaer); color: #fff; }
.btn-primary:hover { background: var(--btn-primaer-hover); border-color: var(--btn-primaer-hover); }
.btn-gefahr { color: var(--gefahr); border-color: var(--gefahr-rand); }
.btn-gefahr:hover { background: var(--gefahr-weich); }
.btn-link { border-color: transparent; background: transparent; color: var(--primaer); }
.btn-link:hover { background: transparent; text-decoration: underline; }
.btn-sm { padding: .3rem .65rem; font-size: .85rem; }

/* Fokus sichtbar, aber nur bei Tastaturbedienung */
:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.balken:focus-visible { outline-offset: -2px; }

/* --- Formulare ------------------------------------------------------------ */
.formular label, .auth-card label { display: block; margin-bottom: .9rem; font-weight: 600; font-size: .9rem; }
.formular label small, .formular legend small { font-weight: 400; }
input[type=text], input[type=email], input[type=password], input[type=search], input[type=number],
input:not([type]), select, textarea {
  width: 100%; padding: .5rem .65rem; border: 1px solid var(--feld-rand); border-radius: var(--radius-klein); font: inherit;
  background: var(--flaeche); margin-top: .25rem; color: var(--text); transition: border-color .12s, box-shadow .12s;
}
input::placeholder, textarea::placeholder { color: var(--leise); }
input[type=file] { display: block; margin-top: .3rem; }
textarea { resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primaer); box-shadow: 0 0 0 3px var(--primaer-weich); }
input:disabled { background: var(--bg-tiefer); color: var(--muted); }
input[type=checkbox], input[type=radio] { accent-color: var(--btn-primaer); }
fieldset { border: 1px solid var(--linie); border-radius: var(--radius); padding: .8rem 1rem; margin: 0 0 .9rem; }
legend { font-weight: 600; font-size: .9rem; padding: 0 .3rem; }
.checkboxen { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-bottom: .6rem; }
.check, .radio { display: inline-flex !important; align-items: center; gap: .4rem; font-weight: 400 !important; margin: 0 !important; }
.radios { display: flex; gap: 1.2rem; flex-wrap: wrap; align-items: center; }
.radios-label { font-weight: 600; font-size: .9rem; flex-basis: 100%; }
.radios-label small { font-weight: 400; }
.formular.kompakt { margin-top: .8rem; padding-top: .8rem; border-top: 1px dashed var(--linie); }
.zeile-form { display: flex; gap: .8rem; align-items: flex-end; flex-wrap: wrap; }
.zeile-form label { flex: 1 1 160px; margin: 0; }
.schmal { max-width: 90px; }

/* --- Meldungen ------------------------------------------------------------ */
.flash { padding: .7rem 1rem; border-radius: 8px; margin-bottom: 1rem; border: 1px solid; }
.flash-ok { background: var(--ok-weich); border-color: var(--ok-rand); color: var(--ok); }
.flash-fehler { background: var(--gefahr-weich); border-color: var(--gefahr-rand); color: var(--gefahr); }
.flash-info { background: var(--info-weich); border-color: var(--info-rand); color: var(--info); }

/* --- Marken: Status, Digitalisierungsgrad, Chips -------------------------- */
.status-pille, .grad-pille {
  display: inline-flex; align-items: center; gap: .38rem; font-size: .74rem; font-weight: 600; line-height: 1.4; white-space: nowrap;
  color: var(--text-2); background: var(--bg-tiefer); border: 1px solid var(--linie); border-radius: 999px; padding: .08rem .55rem .08rem .45rem;
}
.status-punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--status-entwurf); flex-shrink: 0; }
.status-in_pruefung .status-punkt { background: var(--status-in_pruefung); }
.status-freigegeben .status-punkt { background: var(--status-freigegeben); }

/* Digitalisierungsgrad: Füllstand des Kreises zeigt den Grad (leer, halb, voll) – unabhängig von Farbe lesbar */
.grad-symbol {
  display: inline-block; width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; vertical-align: -1px;
  border: 1.7px solid var(--grad-symbol); background: transparent;
}
.grad-symbol.grad-teildigital { background: linear-gradient(90deg, var(--grad-symbol) 50%, transparent 50%); }
.grad-symbol.grad-digital { background: var(--grad-symbol); }

.chip { display: inline-block; background: var(--bg-tiefer); border: 1px solid var(--linie); border-radius: 6px; padding: .05rem .5rem; font-size: .84rem; margin: 0 .2rem .2rem 0; }
.chip-frei { background: var(--hinweis-weich); }
.legende-inline { display: inline-flex; align-items: center; gap: .35rem .8rem; flex-wrap: wrap; font-size: .8rem; color: var(--muted); margin-left: .6rem; }
.legende-inline span { display: inline-flex; align-items: center; gap: .3rem; }
.offen-marke { font-size: .76rem; border: 1px dashed var(--linie-stark); border-radius: 999px; padding: .02rem .5rem; white-space: nowrap; }

/* Digitalisierungsbalken: eine Farbfamilie, hell = manuell, kräftig = digital */
.gradbalken { display: flex; height: 6px; border-radius: 999px; overflow: hidden; background: var(--grad-leer); min-width: 120px; gap: 1px; }
.seg { display: block; height: 100%; }
.seg-manuell { background: var(--grad-manuell); }
.seg-teildigital { background: var(--grad-teildigital); }
.seg-digital { background: var(--grad-digital); }
.seg-leer { background: var(--grad-leer); }

/* --- Öffentliche Startseite ----------------------------------------------- */
.ueberzeile { text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; color: var(--primaer); font-weight: 650; margin-bottom: .4rem; }

/* --- Anmeldung ------------------------------------------------------------ */
.auth-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.auth-card { max-width: 420px; margin: 3rem auto; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.6rem 1.8rem; box-shadow: var(--schatten-1); }
.auth-card .btn { width: 100%; justify-content: center; margin-top: .4rem; }

/* --- Landkarte: Filter ---------------------------------------------------- */
.filter { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.filter input, .filter select { width: auto; margin: 0; }
.filter input[type=search] { flex: 1 1 240px; }
.gesamtgrad { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.2rem; font-size: .88rem; }
.gesamtgrad .gradbalken { flex: 0 0 220px; }

/* --- Baum aus aufklappbaren Balken ---------------------------------------- */
.baum { margin-top: .4rem; }
.knoten { margin-bottom: .4rem; }
.kinder { margin-left: 2rem; padding-left: .6rem; border-left: 2px solid var(--linie); }
.kinder:empty { display: none; }
.knoten.zu > .kinder { display: none; }
.baum-landkarte .knoten-journey > .kinder { margin-left: 2.2rem; }

.balken {
  display: flex; align-items: center; gap: .6rem; padding: .55rem .8rem; min-height: 44px;
  background: var(--flaeche); border: 1px solid var(--linie); border-left: 4px solid var(--linie-stark); border-radius: 8px;
  cursor: pointer; user-select: none; transition: background-color .12s, border-color .12s;
}
.balken:hover { background: var(--flaeche-2); border-color: var(--linie-stark); }
.balken.offen { background: var(--primaer-weich); border-color: var(--primaer-rand); border-left-color: var(--primaer); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.balken-bereich { background: var(--bg-tiefer); border-left-color: var(--primaer); min-height: 50px; }
.balken-bereich .balken-titel { font-size: .95rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.balken-journey .balken-titel { font-size: 1rem; }
.balken-schritt.grad-manuell { border-left-color: var(--grad-manuell); }
.balken-schritt.grad-teildigital { border-left-color: var(--grad-teildigital); }
.balken-schritt.grad-digital { border-left-color: var(--grad-digital); }
.balken.offen.balken-schritt { border-left-color: var(--primaer); }
.baum-landkarte .balken-schritt { background: var(--flaeche-2); min-height: 38px; padding-top: .4rem; padding-bottom: .4rem; }
.baum-landkarte .balken-schritt.offen { background: var(--primaer-weich); }

.griff { color: var(--leise); opacity: .7; cursor: grab; letter-spacing: -2px; font-size: 1rem; padding: 0 .2rem; }
.balken:hover .griff { opacity: 1; }
.griff:active { cursor: grabbing; }
.zweig { background: none; border: 0; padding: 0 .1rem; width: 1.2rem; text-align: center; color: var(--muted); font: inherit; cursor: pointer; line-height: 1; }
.zweig:hover { color: var(--text); }
.zweig-leer { color: var(--linie-stark); cursor: default; }
.balken .nummer { font-size: .8rem; font-weight: 700; color: var(--muted); min-width: 2.2rem; font-variant-numeric: tabular-nums; }
.balken-titel { font-weight: 600; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.balken-meta { font-size: .84rem; color: var(--muted); white-space: nowrap; }
.kinder-anzahl { font-size: .8rem; white-space: nowrap; }
.link-marke { color: var(--primaer); font-size: .9rem; white-space: nowrap; }
.balken .gradbalken { flex: 0 0 110px; min-width: 110px; }
.balken .pfeil { color: var(--leise); transition: transform .15s; margin-left: .2rem; }
.balken.offen .pfeil { transform: rotate(180deg); }

.inhalt { border: 1px solid var(--primaer-rand); border-top: 0; border-radius: 0 0 8px 8px; padding: 1rem 1.2rem; background: var(--flaeche); margin-bottom: .4rem; }
.inhalt-aktionen { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .8rem; padding-bottom: .8rem; border-bottom: 1px dashed var(--linie); }
.inhalt-aktionen .rechts { margin-left: auto; }
.inhalt .meta { margin: .8rem 0 0; font-size: .85rem; }
.felder { display: grid; grid-template-columns: 210px 1fr; gap: .55rem 1.2rem; margin: 0; }
.felder dt { font-weight: 600; font-size: .86rem; color: var(--muted); }
.felder dd { margin: 0; }
.schwach { color: var(--hinweis); }
.leer-bereich { padding: .4rem 0 .4rem .8rem; }
.neuer-bereich { margin-top: 1rem; padding: .8rem 1rem; border: 1px dashed var(--linie-stark); border-radius: 8px; background: var(--flaeche); }
.neuer-bereich label { font-weight: 600; font-size: .9rem; }

/* Drag-and-drop */
.knoten.ziehen > .balken { opacity: .4; }
.knoten.drop-davor > .balken { box-shadow: 0 -3px 0 0 var(--primaer); }
.knoten.drop-danach > .balken { box-shadow: 0 3px 0 0 var(--primaer); }
.knoten.drop-hinein > .balken { outline: 2px dashed var(--primaer); outline-offset: -2px; background: var(--primaer-weich); }
.baum.speichert { opacity: .6; pointer-events: none; }

/* Verweise und Sprungziel */
.ref { border-bottom: 1px dotted currentColor; }
.ref:hover { text-decoration: none; border-bottom-style: solid; }
.verknuepfungen li { padding: .25rem 0; }
.richtung { color: var(--muted); display: inline-block; width: 1rem; }
@keyframes sprungziel { 0%, 60% { box-shadow: 0 0 0 3px var(--fokus); } 100% { box-shadow: 0 0 0 3px transparent; } }
.knoten.sprungziel > .balken { animation: sprungziel 1.8s ease-out; }

/* --- Aufklappmenüs -------------------------------------------------------- */
.menue { position: relative; }
.menue > summary { list-style: none; cursor: pointer; }
.menue > summary::-webkit-details-marker { display: none; }
.menue-liste {
  position: absolute; right: 0; top: calc(100% + .3rem); z-index: 30; min-width: 260px; padding: .3rem;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px; box-shadow: var(--schatten-2);
}
.menue-liste a { display: block; padding: .5rem .7rem; border-radius: 6px; color: var(--text); }
.menue-liste a:hover { background: var(--hover); text-decoration: none; }
.menue-liste small { display: block; color: var(--muted); font-size: .8rem; }

/* --- Ressourcen und Benutzer ---------------------------------------------- */
.tabs { display: flex; gap: .2rem; border-bottom: 1px solid var(--linie); margin-bottom: 1.2rem; overflow-x: auto; scrollbar-width: none; }
.tabs a { white-space: nowrap; flex: 0 0 auto; padding: .5rem .9rem; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: 550; }
.tabs a.aktiv { color: var(--text); border-color: var(--primaer); }
.tabs a:hover { text-decoration: none; color: var(--text); }
.tabelle { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabelle th { text-align: left; font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: .45rem .5rem; border-bottom: 1px solid var(--linie); font-weight: 600; }
.tabelle td { padding: .35rem .5rem; border-bottom: 1px solid var(--linie); vertical-align: middle; }
.tabelle td input, .tabelle td select { margin: 0; padding: .35rem .5rem; }
.tabelle tr.inaktiv td { opacity: .55; }
.tabelle tbody tr:hover td { background: var(--flaeche-2); }
.tabelle td.zeile-aktionen, .tabelle th.zeile-aktionen { white-space: nowrap; text-align: right; width: 1%; }
.tabelle td.zeile-aktionen .btn + .btn { margin-left: .3rem; }
.tabelle td.mitte { text-align: center; }
.tabelle td input[type=checkbox] { width: 1.1rem; height: 1.1rem; }

/* --- Schritt (Abschnitt) und Teilschritt (Arbeitsschritt) ------------------ */
.balken-abschnitt { border-left-color: var(--linie-stark); background: var(--flaeche); }
.baum-landkarte .balken-abschnitt { background: var(--flaeche); min-height: 42px; }
.balken-abschnitt .balken-titel { font-weight: 650; }
.balken-abschnitt .gradbalken { flex: 0 0 90px; min-width: 90px; }
.knoten-ebene-2 > .balken .nummer { font-weight: 600; }
.extern-marke {
  display: inline-block; font-size: .7rem; font-weight: 650; letter-spacing: .02em; white-space: nowrap;
  color: var(--info); background: var(--info-weich); border: 1px solid var(--info-rand); border-radius: 999px; padding: 0 .45rem;
}
.chip-extern { border-color: var(--info-rand); background: var(--info-weich); }
.chip-zahl { font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums; margin-left: .15rem; }
.system-einsatz { color: var(--text-2); font-size: .88rem; }
.systeme-liste li { padding: .15rem 0; }
.felder-abschnitt { font-size: .74rem; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 1rem 0 .5rem; padding-top: .8rem; border-top: 1px dashed var(--linie); }
.felder-abschnitt small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.inhalt > .felder:first-of-type + .felder-abschnitt { margin-top: .8rem; }
.grad-zusammen { margin-left: 0; font-size: .86rem; }

/* Systeme im Teilschritt-Formular: Details erscheinen erst, wenn das System gewählt ist */
.systeme-auswahl { display: grid; gap: .1rem; }
.system-zeile { display: grid; grid-template-columns: minmax(200px, 260px) 1fr; gap: .4rem 1rem; align-items: center; padding: .35rem .4rem; border-radius: 7px; }
.system-zeile:hover { background: var(--flaeche-2); }
.system-details { display: none; align-items: center; gap: .8rem; }
.system-details input[type=text], .system-details input:not([type]) { margin: 0; padding: .35rem .55rem; }
.system-details .check { white-space: nowrap; font-size: .86rem; }
.system-zeile:has(.system-name input:checked) { background: var(--primaer-weich); }
.system-zeile:has(.system-name input:checked) .system-details { display: flex; }
@media (max-width: 720px) {
  .system-zeile { grid-template-columns: 1fr; }
  .system-details { flex-wrap: wrap; }
}

/* --- Stern (Merken) ------------------------------------------------------- */
.stern {
  display: inline-grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0; padding: 0;
  border: 0; border-radius: 6px; background: none; color: var(--leise); cursor: pointer; opacity: .55; transition: opacity .12s, color .12s, background-color .12s;
}
.balken:hover .stern, .balken:focus-within .stern, .stern.an, .stern:focus-visible { opacity: 1; }
.balken:hover .stern:not(.an) { color: var(--muted); }
.stern:hover { background: var(--hover); color: var(--text-2); }
.stern.an { color: var(--stern); }
.stern.an svg { fill: currentColor; }
.stern:disabled { cursor: progress; }

/* --- Mein Bereich ---------------------------------------------------------- */
.ab-kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.ab-kopf h1 { font-size: 1.75rem; }
.ab-kopf p { margin: 0; }
.ab-weiter h2, .ab-kartenkopf h2 { font-size: 1rem; margin: 0; }
.ab-weiter h2 { margin-bottom: .8rem; }
.ab-kartenkopf { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: .6rem; min-height: 32px; }
.ab-spalten { align-items: start; margin-bottom: 1.2rem; }
.ab-spalten .card { margin-bottom: 0; height: 100%; }
.zaehler {
  display: inline-grid; place-items: center; min-width: 1.4rem; height: 1.4rem; padding: 0 .4rem; margin-left: .35rem; vertical-align: 1px;
  border-radius: 999px; background: var(--primaer-weich); color: var(--primaer); font-size: .75rem; font-weight: 700; font-variant-numeric: tabular-nums;
}

.weiter-haupt {
  position: relative; display: grid; gap: .15rem; padding: 1rem 3rem 1rem 1.1rem; border-radius: var(--radius);
  background: var(--primaer-weich); border: 1px solid var(--primaer-rand); color: var(--text); transition: border-color .12s, transform .12s;
}
.weiter-haupt:hover { text-decoration: none; border-color: var(--primaer); }
.weiter-label { font-size: .75rem; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--primaer); }
.weiter-titel { font-size: 1.2rem; font-weight: 700; letter-spacing: -.01em; }
.weiter-pfad { font-size: .88rem; color: var(--text-2); }
.weiter-aktion { font-size: .85rem; color: var(--muted); margin-top: .2rem; }
.weiter-pfeil { position: absolute; right: 1.1rem; top: 50%; transform: translateY(-50%); font-size: 1.4rem; color: var(--primaer); transition: transform .15s; }
.weiter-haupt:hover .weiter-pfeil { transform: translate(3px, -50%); }

.eintraege { list-style: none; margin: .5rem 0 0; padding: 0; }
.eintraege > li { display: flex; align-items: center; gap: .4rem; border-top: 1px solid var(--linie); }
.eintraege > li:first-child { border-top: 0; }
.eintraege.offene > li { display: block; padding-bottom: .35rem; }
.eintrag { display: flex; align-items: center; gap: .7rem; flex: 1; min-width: 0; padding: .55rem .4rem; border-radius: 8px; color: var(--text); }
a.eintrag:hover { background: var(--flaeche-2); text-decoration: none; }
.eintrag-weg { opacity: .55; }
.eintrag-typ {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center;
  font-size: .68rem; font-weight: 700; color: var(--text-2); background: var(--bg-tiefer); border: 1px solid var(--linie);
}
.eintrag-text { display: grid; flex: 1; min-width: 0; }
.eintrag-titel { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.neuigkeiten .eintrag-titel { white-space: normal; font-weight: 450; }
.eintrag-pfad { font-size: .8rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eintrag-hinweis { font-size: .74rem; font-weight: 650; color: var(--primaer); }
.eintrag-zeit { flex-shrink: 0; font-size: .78rem; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.neu-punkt { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--leise); margin: 0 .3rem 0 .2rem; }
.neu-angelegt { background: var(--status-freigegeben); }
.neu-geaendert { background: var(--primaer); }
.neu-verschoben { background: var(--status-in_pruefung); }
.neu-geloescht { background: var(--gefahr); }
.betrifft-mich .eintrag { background: var(--primaer-weich); }
.offen-punkte { list-style: none; margin: 0 0 0 2.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem .4rem; }
.offen-punkte a {
  display: inline-block; font-size: .8rem; padding: .1rem .55rem; border-radius: 999px;
  background: var(--hinweis-weich); color: var(--hinweis); border: 1px solid transparent;
}
.offen-punkte a:hover { text-decoration: none; border-color: var(--hinweis); }
.gemerkt .stern { opacity: 1; }

/* --- Mittlere Breiten: Kopfzeile verdichten ------------------------------ */
.benutzer-name { white-space: nowrap; }
@media (max-width: 960px) {
  .benutzer-name { display: none; }
  .navpunkt { padding: 0 .6rem; }
}

/* --- Schmale Bildschirme -------------------------------------------------- */
@media (max-width: 820px) {
  .kopf-innen { padding: 0 1rem; gap: .75rem; }
  .kopf-umschalter { display: grid; }
  .kopf-menue {
    display: none; position: absolute; left: 0; right: 0; top: 60px; flex-direction: column; align-items: stretch;
    background: var(--flaeche); border-bottom: 1px solid var(--linie); padding: .6rem 1rem 1rem; box-shadow: var(--schatten-2);
  }
  .kopf.offen .kopf-menue { display: flex; }
  .hauptnav, .kopf-rechts { flex-direction: column; align-items: stretch; gap: .15rem; }
  .navpunkt { height: 44px; }
  .benutzer-name { display: inline; }
  .navpunkt { padding: 0 .8rem; }
  .kopf-trenner { width: auto; height: 1px; margin: .4rem 0; }
  .benutzermenue .menue-liste { position: static; box-shadow: none; border: 0; padding: 0; margin-top: .2rem; }
  .benutzer-knopf { border-radius: 8px; height: 44px; }
}
@media (max-width: 720px) {
  .main { padding: 1rem 16px 2rem; }
  .felder { grid-template-columns: 1fr; gap: .1rem .5rem; }
  .felder dt { margin-top: .5rem; }
  .gesamtgrad { flex-wrap: wrap; }
  .balken { gap: .4rem; padding-left: .5rem; padding-right: .5rem; }
  .balken-meta, .balken .gradbalken, .balken .offen-marke, .balken .kinder-anzahl, .balken .griff { display: none; }
  .kinder, .baum-landkarte .knoten-journey > .kinder { margin-left: .5rem; padding-left: .4rem; }
}

/* --- Bewegung reduzieren, wenn im Betriebssystem eingestellt --------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

.chip-info { background: var(--flaeche); }
.info-liste li { padding: .2rem 0; }
.zeile-form .zeile-check { flex: 0 0 auto; align-self: center; padding-bottom: .55rem; }

.chip-zusatz { font-size: .68rem; font-weight: 650; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-left: .15rem; }
.abstand-oben { margin-top: 1rem; }

/* --- Teilschritt-Formular: Abschnitte und Zeilenlisten ------------------------ */
.form-abschnitt { border: 1px solid var(--linie); border-radius: var(--radius); margin: 0 0 1rem; background: var(--flaeche); padding: 0 1rem 1rem; }
.form-abschnitt:not([open]) { padding-bottom: 0; }
.form-abschnitt > summary { cursor: pointer; list-style: none; padding: .75rem 1rem; margin: 0 -1rem; font-weight: 650; display: flex; align-items: baseline; gap: .6rem; border-radius: var(--radius); }
.form-abschnitt > summary::-webkit-details-marker { display: none; }
.form-abschnitt > summary::before { content: '▸'; color: var(--muted); font-size: .85rem; transition: transform .15s; }
.form-abschnitt[open] > summary::before { transform: rotate(90deg); }
.form-abschnitt > summary:hover { background: var(--hover); }
.form-abschnitt > summary small { font-weight: 400; }
.form-abschnitt[open] > summary { border-bottom: 1px solid var(--linie); border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin-bottom: .9rem; }
.form-abschnitt > :last-child { margin-bottom: 0; }
@media (max-width: 560px) {
  .form-abschnitt { padding: 0 .7rem .8rem; }
  .form-abschnitt > summary { margin: 0 -.7rem; padding: .7rem; }
  .system-zeile { padding: .35rem .2rem; }
}

.feld-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: .4rem 1rem; flex-wrap: wrap; font-weight: 600; font-size: .9rem; margin: 0 0 .35rem; }
.feld-kopf small { font-weight: 400; }
.feld-kopf + textarea { margin-bottom: .9rem; }
.feldstatus-wahl { font-weight: 400; font-size: .8rem; white-space: nowrap; display: inline-flex; align-items: center; gap: .35rem; }
.feldstatus-wahl select { margin: 0; padding: .15rem 1.6rem .15rem .45rem; font-size: .8rem; width: auto; min-height: 0; }
.feldstatus-text { color: var(--leise); font-style: italic; }
.feldstatus-unklar { color: var(--hinweis); }

.zeilen-liste { display: flex; flex-direction: column; gap: .5rem; margin: 0 0 .9rem; align-items: stretch; }
.zeilen-liste > [data-zeile-hinzu] { align-self: flex-start; }
.zeile-karte { display: grid; gap: .45rem .6rem; align-items: center; padding: .55rem .6rem; border: 1px solid var(--linie); border-radius: 8px; background: var(--flaeche-2); }
.zeile-karte input, .zeile-karte select { margin: 0; min-width: 0; }
.zeile-karte .zeile-voll { grid-column: 1 / -1; }
.zeile-entfernen { color: var(--muted); padding: .3rem .5rem; justify-self: end; }
.zeile-entfernen:hover { color: var(--gefahr); text-decoration: none; }
.zeile-nr { font-weight: 650; color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }
.zeile-teilhandlung { grid-template-columns: 1.6rem minmax(0, 1fr) 9.5rem 11rem auto; }
.zeile-teilhandlung .zeile-voll { grid-column: 2 / -1; }
.zeile-entscheidung { grid-template-columns: 7rem repeat(4, minmax(0, 1fr)) auto; }
.zeile-entscheidung .e-nr { grid-column: 1; }
.zeile-entscheidung .e-wenn { grid-column: 2 / 4; }
.zeile-entscheidung .e-dann { grid-column: 4 / 6; }
.zeile-entscheidung .e-ziel { grid-column: 1 / 4; }
.zeile-entscheidung .e-vork { grid-column: 4; }
.zeile-entscheidung .e-regel { grid-column: 5; }
.zeile-entscheidung .e-quelle { grid-column: 1 / 6; }
.zeile-info { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) auto; }
.zeile-zwei { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) auto; }
.zeile-fehler { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
.zeile-fehler .f-folge { grid-column: 1; }
.zeile-fehler .f-pruef { grid-column: 2; }
.zeile-karte .zeile-label { display: flex; flex-direction: row; align-items: center; gap: .5rem; margin: 0; font-size: .8rem; font-weight: 500; color: var(--muted); min-width: 0; }
.zeile-karte .zeile-label > span { flex: 0 0 6.6rem; }
.zeile-karte .zeile-label.kurz > span { flex-basis: auto; }
.zeile-karte .zeile-label > input, .zeile-karte .zeile-label > select { flex: 1 1 auto; min-width: 0; margin: 0; font-size: .95rem; font-weight: 400; color: var(--text); }
.zeile-karte .zeile-label input[type=number] { max-width: 4.5rem; }
.zeile-karte input, .zeile-karte select { font-weight: 400; }
.hinweis-box { background: var(--hinweis-weich); color: var(--hinweis); border-radius: 8px; padding: .5rem .75rem; font-size: .88rem; margin: 0 0 .6rem; }
.klein { font-size: .82rem; }
.bedingung { font-size: .85rem; color: var(--hinweis); }
@media (max-width: 720px) {
  .zeile-teilhandlung, .zeile-entscheidung, .zeile-info, .zeile-zwei, .zeile-fehler { grid-template-columns: minmax(0, 1fr) auto; }
  .zeile-karte > * { grid-column: 1 / -1 !important; }
  .zeile-karte > .zeile-entfernen { grid-column: 2 !important; grid-row: 1; }
  .zeile-karte > .zeile-nr { display: none; }
  .zeile-karte > :nth-child(2):not(.zeile-entfernen) { grid-column: 1 !important; }
}

/* --- Teilschritt-Anzeige auf der Landkarte ------------------------------------- */
.teilhandlungen { margin: 0; padding-left: 1.3rem; }
.teilhandlungen li { margin: 0 0 .45rem; }
.teilhandlungen .th-zusatz { display: block; font-size: .85rem; color: var(--text-2); }
.art-marke { display: inline-block; font-size: .72rem; font-weight: 600; padding: .05rem .45rem; border-radius: 999px; border: 1px solid var(--linie-stark); color: var(--text-2); margin-left: .3rem; vertical-align: 1px; }
.art-regelbasiert { border-color: var(--info-rand); background: var(--info-weich); color: var(--info); }
.art-ermessen { border-color: #e6cf9f; background: var(--hinweis-weich); color: var(--hinweis); }
.raci-marke { display: inline-block; min-width: 1.3rem; text-align: center; font-size: .72rem; font-weight: 700; padding: .05rem .3rem; border-radius: 5px; background: var(--primaer-weich); color: var(--primaer); margin-right: .25rem; }
.beob-typ { font-size: .78rem; font-weight: 600; color: var(--hinweis); margin-right: .35rem; }
.info-herkunft { font-size: .82rem; color: var(--muted); }


/* Tabellen in Karten scrollen auf schmalen Bildschirmen seitlich, statt die Seite zu verbreitern */
.card:has(> .tabelle) { overflow-x: auto; }

/* --- Arbeitsbereich: Reiter mit eingebetteten Rahmen ----------------------------------------- */
.main-vollbild { max-width: none; padding: 0; }
.arbeit { display: flex; flex-direction: column; }
/* Reiterleiste über die volle Breite, Reiter in derselben Spalte wie Logo und Seiteninhalt */
.arbeit-leiste { background: var(--flaeche); border-bottom: 1px solid var(--linie); position: relative; z-index: 1; }
.arbeit-tabs { max-width: 1240px; margin: 0 auto; padding: .4rem 1.5rem 0; border-bottom: 0; }
.arbeit-tabs { overflow: visible; }
.arbeit-tabs > a, .tabmenue > summary { padding: .65rem 1rem; margin-bottom: 0; border-bottom: 0; box-shadow: inset 0 -2px 0 transparent; color: var(--muted); font-weight: 550; white-space: nowrap; }
.arbeit-tabs > :first-child, .arbeit-tabs > :first-child > summary { padding-left: 0; }
.arbeit-tabs > a.aktiv, .tabmenue > summary.aktiv { box-shadow: inset 0 -2px 0 var(--primaer); color: var(--text); }
.tabmenue > summary { display: inline-flex; align-items: center; gap: .3rem; user-select: none; }
.tabmenue > summary:hover { color: var(--text); }
.tabmenue > summary .chevron { color: var(--leise); transition: transform .2s; }
.tabmenue[open] > summary .chevron { transform: rotate(180deg); }
.tabmenue .menue-liste { left: 0; right: auto; top: calc(100% + .2rem); min-width: 230px; padding: .35rem; animation: menueEin .14s ease-out; }
.tabmenue .menue-liste a { display: block; padding: .5rem .7rem; margin: 0; border-bottom: 0; color: var(--text); font-size: .92rem; font-weight: 500; }
.tabmenue .menue-liste a:hover { background: var(--hover); }
.tabmenue .menue-liste a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.menue-zahl { min-width: 1.6rem; padding: .05rem .45rem; border-radius: 999px; background: var(--primaer-weich); color: var(--primaer); font-size: .78rem; font-weight: 650; text-align: center; font-variant-numeric: tabular-nums; }
.menue-zahl.null { background: transparent; color: var(--leise); font-weight: 500; }
.tabmenue .menue-liste a.aktiv { background: var(--primaer-weich); color: var(--primaer); }
/* Der Arbeitsbereich selbst scrollt nie (das tun die Rahmen). Der Platz für die Bildlaufleiste bleibt wie auf allen
   anderen Seiten reserviert, damit die Menüleiste beim Seitenwechsel nicht verrutscht. */
html:has(.arbeit) { overflow: hidden; }
.arbeit-rahmen { position: relative; }
.arbeit-rahmen iframe { display: block; width: 100%; height: 100%; border: 0; background: transparent; }
.arbeit-rahmen iframe[hidden] { display: none; }
@media (max-width: 820px) { .arbeit-tabs { padding: .3rem 1rem 0; } .arbeit-tabs > a, .tabmenue > summary { padding: .6rem .6rem; font-size: .88rem; } .arbeit-tabs > :first-child, .arbeit-tabs > :first-child > summary { padding-left: 0; } }
@media (max-width: 600px) { .arbeit-tabs { flex-wrap: wrap; row-gap: 0; padding-left: calc(1rem - .55rem); } .arbeit-tabs > a, .tabmenue > summary, .arbeit-tabs > a:first-child, .arbeit-tabs > :first-child > summary { padding: .5rem .55rem; } }
.arbeit-tabs > .tabmenue:last-child .menue-liste { left: auto; right: 0; }

/* Seiten im Rahmen des Arbeitsbereichs: ohne Kopf- und Fußzeile */
html.eingebettet .kopf { display: none; }
/* Inhalt an der vollen Rahmenbreite ausrichten (100vw enthält die Bildlaufleiste), damit er mit Logo und Reitern fluchtet */
html.eingebettet .main { margin: 0 0 0 max(0px, calc((100vw - 1240px) / 2)); }
html.eingebettet { scrollbar-gutter: auto; }
html.eingebettet .main { padding-top: 1.25rem; }

/* --- Übersicht: Kennzahlen und Verteilungen ------------------------------------------------- */
.uebersicht-stand { margin: .4rem 0 0; }
.kpi-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 1rem; margin-bottom: 1rem; }
.kpi-kachel { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .15rem; }
.kpi-titel { font-size: .8rem; font-weight: 600; color: var(--muted); }
.kpi-wert { font-size: 2rem; font-weight: 700; line-height: 1.15; color: var(--text); font-variant-numeric: tabular-nums; }
.kpi-wert small { font-size: 1rem; font-weight: 500; color: var(--muted); }
.kpi-zusatz { font-size: .82rem; color: var(--text-2); }
.dash-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.dash-raster-zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .dash-raster { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 641px) and (max-width: 900px) { .dash-raster-zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dash-aenderungen .eintrag { padding: .4rem .2rem; gap: .55rem; }
.dash-aenderungen .eintrag-titel { font-size: .9rem; }
.dash-aenderungen .eintrag-pfad { white-space: normal; }
.dash-raster .card { margin: 0; }
.dash-karte h2 { font-size: 1rem; margin-bottom: .8rem; }
.verteilung { display: flex; gap: 2px; height: 14px; border-radius: 4px; overflow: hidden; background: var(--flaeche); }
.vt-seg { height: 100%; min-width: 4px; }
.vt-leer { background: var(--grad-leer); }
.legende-liste { list-style: none; margin: .7rem 0 .2rem; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; font-size: .88rem; color: var(--text-2); }
.legende-liste strong { color: var(--text); font-variant-numeric: tabular-nums; }
.legende-punkt { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: .35rem; vertical-align: -1px; }
.hbalken { display: grid; grid-template-columns: minmax(0, 8.5rem) 1fr 1.8rem; align-items: center; gap: .6rem; padding: .22rem 0; font-size: .88rem; }
.hb-label { color: var(--text-2); line-height: 1.25; overflow-wrap: anywhere; }
.hb-spur { height: 10px; background: var(--grad-leer); border-radius: 4px; overflow: hidden; }
.hb-fuell { display: block; height: 100%; background: var(--primaer); border-radius: 0 4px 4px 0; min-width: 3px; }
.hb-wert { text-align: right; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.dash-tabelle .zahl { text-align: right; font-variant-numeric: tabular-nums; }
.dash-tabelle .gradbalken { min-width: 120px; }
.uebersicht-freigegeben { margin-top: 1.6rem; }
.uebersicht-freigegeben > h2 { margin-bottom: .2rem; }
.feld-info { display: block; margin-top: .35rem; font-weight: 400; font-size: .8rem; }

/* --- Aufklappmenü in der Menüleiste (Übersicht) ---------------------------------------------- */
.navmenue > summary.navpunkt { cursor: pointer; user-select: none; }
.navmenue > summary .chevron { color: var(--leise); margin-left: -.15rem; transition: transform .2s; }
.navmenue[open] > summary .chevron { transform: rotate(180deg); }
.navmenue[open] > summary.navpunkt:not(.aktiv) { background: var(--hover); }
.navmenue .menue-liste { left: 0; right: auto; min-width: 220px; padding: .35rem; top: calc(100% + .45rem); animation: menueEin .14s ease-out; }
.navmenue .menue-liste a { font-size: .92rem; font-weight: 500; }
.navmenue .menue-liste a.aktiv { background: var(--primaer-weich); color: var(--primaer); }
@media (max-width: 820px) {
  .navmenue > summary.navpunkt { display: flex; }
  .navmenue .menue-liste { position: static; box-shadow: none; border: 0; padding: 0 0 0 1.6rem; margin-top: .1rem; min-width: 0; animation: none; }
}

/* --- How To: Lesetext --------------------------------------------------------------------- */
.rechtstext h1 { margin-bottom: 1rem; }
.rechtstext h2 { font-size: 1.1rem; margin: 1.8rem 0 .5rem; }
.rechtstext p, .rechtstext li { line-height: 1.6; color: var(--text-2); }
.rechtstext p { margin: 0 0 .8rem; }
.rechtstext ul { margin: 0 0 1rem; padding-left: 1.3rem; }
.rechtstext li { margin-bottom: .35rem; }
.rechtstext strong { color: var(--text); }
.rechtstext-verweis, .rechtstext-stand { margin-top: 2rem !important; padding-top: 1rem; border-top: 1px solid var(--linie); font-size: .9rem; }
.rechtstext-stand { color: var(--muted) !important; }
.howto-ort { font-size: .8rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin: 0 0 .3rem; }
.howto h1 { margin-bottom: 1rem; }
.howto h2 { font-size: 1.2rem; margin: 2rem 0 .6rem; padding-top: 1rem; border-top: 1px solid var(--linie); }
.howto h3 { font-size: 1rem; margin: 1.4rem 0 .4rem; }
.howto p, .howto li { line-height: 1.6; color: var(--text-2); }
.howto p { margin: 0 0 .8rem; }
.howto ul, .howto ol { margin: 0 0 1rem; padding-left: 1.3rem; }
.howto li { margin-bottom: .35rem; }
.howto strong { color: var(--text); }
.howto dl { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: .55rem 1.2rem; margin: 0 0 1.2rem; }
.howto dt { font-weight: 650; color: var(--text); }
.howto dd { margin: 0; color: var(--text-2); line-height: 1.55; }
.howto dd small, .howto .pflicht { font-size: .78rem; font-weight: 650; color: var(--primaer); margin-left: .3rem; }
.howto .beispiel { background: var(--flaeche); border: 1px solid var(--linie); border-left: 3px solid var(--grad-teildigital); border-radius: 8px; padding: .7rem .9rem; margin: .4rem 0 1.1rem; font-size: .92rem; color: var(--text-2); }
.howto .beispiel strong:first-child { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: .25rem; }
.howto .merke { background: var(--hinweis-weich); color: var(--hinweis); border-radius: 8px; padding: .65rem .9rem; margin: .4rem 0 1.1rem; font-size: .92rem; }
.howto table { width: 100%; border-collapse: collapse; margin: .3rem 0 1.2rem; font-size: .92rem; }
.howto th, .howto td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--linie); vertical-align: top; }
.howto th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.howto-blaettern { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid var(--linie); }
@media (max-width: 640px) { .howto dl { grid-template-columns: minmax(0, 1fr); gap: .15rem; } .howto dd { margin-bottom: .6rem; } }

/* --- Öffentliche Startseite ------------------------------------------------------------------ */
.main-start { max-width: none; padding: 0; }
.start-innen { max-width: 1240px; margin: 0 auto; padding: 0 1.5rem; }
.start-hero {
  position: relative; display: flex; align-items: center; min-height: max(560px, calc(100svh - 61px));
  padding: 4rem 0 5rem; color: #fff; background-color: #0b1220;
  background-image:
    linear-gradient(90deg, rgba(7, 12, 22, .78) 0%, rgba(7, 12, 22, .55) 30%, rgba(7, 12, 22, .12) 52%, rgba(7, 12, 22, 0) 70%),
    url("bilder/startseite-1672.jpg");
  background-image:
    linear-gradient(90deg, rgba(7, 12, 22, .78) 0%, rgba(7, 12, 22, .55) 30%, rgba(7, 12, 22, .12) 52%, rgba(7, 12, 22, 0) 70%),
    image-set(url("bilder/startseite-1672.webp") type("image/webp"), url("bilder/startseite-1672.jpg") type("image/jpeg"));
  background-size: cover; background-position: 60% center; background-repeat: no-repeat;
}
@media (max-width: 1100px) {
  .start-hero { background-image:
    linear-gradient(90deg, rgba(7, 12, 22, .8) 0%, rgba(7, 12, 22, .58) 40%, rgba(7, 12, 22, .1) 75%),
    image-set(url("bilder/startseite-1280.webp") type("image/webp"), url("bilder/startseite-1280.jpg") type("image/jpeg")); }
}
@media (max-width: 640px) {
  .start-hero { align-items: flex-end; padding: 3rem 0 2.5rem; background-position: 58% center; background-image:
    linear-gradient(0deg, rgba(7, 12, 22, .88) 0%, rgba(7, 12, 22, .6) 45%, rgba(7, 12, 22, .05) 80%),
    image-set(url("bilder/startseite-800.webp") type("image/webp"), url("bilder/startseite-800.jpg") type("image/jpeg")); }
  .start-innen { padding: 0 16px; }
}
.start-hero h1, .start-hero .start-lead, .start-hero .start-ueberzeile { text-shadow: 0 2px 18px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .5); }
.start-hero .start-innen { width: 100%; }
.start-hero .start-innen > * { max-width: 620px; }
.start-ueberzeile { margin: 0 0 .8rem; font-size: .82rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: #7fd3e1; }
.start-hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); line-height: 1.08; letter-spacing: -.025em; margin: 0 0 1.1rem; color: #fff; }
.start-lead { font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 1.7; color: rgba(255, 255, 255, .8); margin: 0 0 1.6rem; }
.start-frage { color: #fff; font-weight: 600; }
.start-recht { position: absolute; right: max(1.5rem, calc((100% - 1240px) / 2 + 1.5rem)); bottom: .9rem; display: flex; gap: 1.1rem; font-size: .78rem; }
.start-recht a { color: rgba(255, 255, 255, .7); text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.start-recht a:hover { color: #fff; }
@media (max-width: 640px) { .start-hero { padding-bottom: 3.2rem; } .start-recht { right: auto; left: 16px; } }
.start-bereiche { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; padding: 0; margin: 0; }
.start-bereiche li { font-size: .82rem; font-weight: 550; padding: .3rem .75rem; border-radius: 999px; color: rgba(255, 255, 255, .9);
  background: rgba(7, 12, 22, .45); border: 1px solid rgba(127, 211, 225, .35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* --- Angemeldete Seiten: Startseitenbild links und rechts der Inhaltsspalte -------------------- */
body.mit-bild {
  display: flex; flex-direction: column; min-height: 100vh;
  background-color: #0b1220;
  background-image: linear-gradient(rgba(7, 12, 22, .45), rgba(7, 12, 22, .45)), url("bilder/startseite-1672.jpg");
  background-image: linear-gradient(rgba(7, 12, 22, .45), rgba(7, 12, 22, .45)),
    image-set(url("bilder/startseite-1672.webp") type("image/webp"), url("bilder/startseite-1672.jpg") type("image/jpeg"));
  background-size: cover; background-position: center; background-attachment: fixed; background-repeat: no-repeat;
}
body.mit-bild > .main { flex: 1 0 auto; width: 100%; background: var(--bg); }
body.mit-bild > .main-vollbild { background: transparent; }
/* Im Arbeitsbereich zeigt der Rahmen das Bild des Arbeitsbereichs durch, nur die Inhaltsspalte ist gefüllt */
html.eingebettet body.mit-bild { background: transparent; }
html.eingebettet body.mit-bild > .main { min-height: 100vh; }
@media (max-width: 1290px) { body.mit-bild > .main { box-shadow: none; } }
@media (min-width: 1291px) { body.mit-bild > .main:not(.main-vollbild) { box-shadow: 0 0 0 1px var(--linie), 0 0 40px rgba(0, 0, 0, .35); } }

/* --- Links ------------------------------------------------------------------------------------- */
.link-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: .6rem .8rem; align-items: end; }
.link-form label { font-weight: 600; font-size: .9rem; margin: 0; }
.link-form .link-feld-text { grid-column: 1 / 3; }
.link-status { grid-column: 1 / -1; margin: 0; font-size: .88rem; color: var(--muted); }
.link-status-fehler { color: var(--gefahr); }
.link-suche { max-width: 420px; margin: 0 0 1rem; }
.link-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 1rem; }
.link-eintrag { position: relative; }
.link-kachel { display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid var(--linie); border-radius: var(--radius);
  background: var(--flaeche); color: var(--text); box-shadow: var(--schatten-1); transition: transform .15s, box-shadow .15s, border-color .15s; }
.link-kachel:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--schatten-2); border-color: var(--primaer-rand); }
.link-vorschau { position: relative; aspect-ratio: 1.91 / 1; display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(135deg, hsl(var(--link-farbe) 45% 48%), hsl(calc(var(--link-farbe) + 40) 50% 30%)); }
.link-vorschau img { width: 100%; height: 100%; object-fit: cover; display: block; }
.link-vorschau-logo { background: linear-gradient(135deg, hsl(var(--link-farbe) 35% 94%), hsl(var(--link-farbe) 30% 86%)); }
.link-vorschau-logo img { width: auto; height: 52%; max-width: 52%; object-fit: contain; border-radius: 14px; }
.link-zeichen { font-size: 2.6rem; font-weight: 700; color: rgba(255, 255, 255, .92); text-shadow: 0 2px 12px rgba(0, 0, 0, .25); }
.link-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .25rem; padding: .75rem .9rem .8rem; }
.link-text strong { font-weight: 600; font-size: .95rem; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.link-beschreibung { font-size: .84rem; line-height: 1.45; color: var(--text-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.link-text small { margin-top: auto; padding-top: .3rem; color: var(--muted); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-bearbeiten { position: absolute; top: .5rem; right: .5rem; }
.link-bearbeiten > summary { list-style: none; cursor: pointer; padding: .4rem; border-radius: 999px; display: grid; color: #fff;
  background: rgba(10, 14, 22, .5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: .85; transition: opacity .12s; }
.link-bearbeiten > summary::-webkit-details-marker { display: none; }
.link-bearbeiten > summary:hover, .link-bearbeiten[open] > summary { opacity: 1; background: rgba(10, 14, 22, .75); }
.link-bearbeiten[open] { position: static; }
.link-bearbeiten[open] > summary { position: absolute; top: .5rem; right: .5rem; }
.link-bearbeiten-inhalt { margin-top: .5rem; padding: .8rem; border: 1px solid var(--linie); border-radius: var(--radius-klein); background: var(--flaeche);
  box-shadow: var(--schatten-2); display: grid; gap: .6rem; }
.link-bearbeiten-inhalt .link-form { grid-template-columns: minmax(0, 1fr); }
.link-bearbeiten-inhalt form { margin: 0; }
@media (max-width: 760px) { .link-form { grid-template-columns: minmax(0, 1fr); } .link-form .link-feld-text { grid-column: auto; } }