/* Ekasit – Admin-Oberfläche des Gedächtnis-Servers
   Farben und Maße als Variablen; [data-design="hell"] schaltet das helle Design. */

@font-face { font-family: "Poppins"; font-weight: 400; font-style: normal; font-display: swap;
  src: url(../fonts/poppins-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-weight: 500; font-style: normal; font-display: swap;
  src: url(../fonts/poppins-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-weight: 600; font-style: normal; font-display: swap;
  src: url(../fonts/poppins-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-weight: 400; font-style: normal; font-display: swap; src: url(../fonts/poppins-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-weight: 500; font-style: normal; font-display: swap; src: url(../fonts/poppins-latin-ext-500-normal.woff2) format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-weight: 600; font-style: normal; font-display: swap; src: url(../fonts/poppins-latin-ext-600-normal.woff2) format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Good Times"; font-weight: 400; font-style: normal; font-display: swap; src: url(../fonts/goodtimes.ttf) format("truetype"); }

:root {
  --navy: #03256c; --navy-dunkel: #021e56; --lila: #a343ff; --lila-knopf: #8f2fe8; --lila-knopf-hover: #7a1fd6;
  --gruen: #4ecc48; --gelb: #ecb403; --rot: #f66b4e; --cyan: #45aaf2; --grau: #6b7390;

  --bg: #021e56; --card: #03256c; --card-2: #021e56; --line: rgba(255,255,255,.10); --line-2: rgba(255,255,255,.07);
  --text: #ffffff; --muted: rgba(255,255,255,.62); --muted-2: rgba(255,255,255,.45); --track: rgba(255,255,255,.12);
  --input-bg: #021e56; --input-line: rgba(255,255,255,.14); --hover: rgba(255,255,255,.05);
  --link: #c89bff; --link-hover: #ffffff; --pill-dot-border: #03256c;
  --ghost-line: rgba(255,255,255,.22); --ghost-hover: rgba(255,255,255,.08);
  --code-bg: rgba(255,255,255,.08); --log-bg: #021e56;
  --ok-text: #9be697; --warn-text: #ffd966; --err-text: #ffb3a3; --info-text: #9fd3fb; --purple-text: #d9bbff; --grey-text: rgba(255,255,255,.7);
  --ok-bg: rgba(78,204,72,.16); --warn-bg: rgba(236,180,3,.16); --err-bg: rgba(246,107,78,.16); --info-bg: rgba(69,170,242,.18); --purple-bg: rgba(163,67,255,.18); --grey-bg: rgba(255,255,255,.10);
  --t-ok: #4ecc48; --t-warn: #ffd966; --t-err: #ffb3a3; --t-info: #9fd3fb;

  --side-bg: #ffffff; --side-line: #e3e6ef; --side-text: #2a3352; --side-muted: #7a829a; --side-hover: #eef0f7;
  --side-on-bg: #03256c; --side-on-text: #ffffff; --side-sub-on-bg: #eef0f7; --side-sub-on-text: #03256c; --side-box: #eef0f7; --side-wortmarke: #243061;
  --top-bg: #03256c; --top-text: #ffffff; --top-line: rgba(255,255,255,.10); --top-input: #021e56;

  --side-w: 300px; --rail-w: 86px; --top-h: 70px; --radius: 12px;
}
[data-design="hell"] {
  --bg: #f3f5fb; --card: #ffffff; --card-2: #f3f5fb; --line: #e3e6ef; --line-2: #eef0f7;
  --text: #1f2a4a; --muted: #6b7390; --muted-2: #8e95ad; --track: #e3e6ef;
  --input-bg: #f3f5fb; --input-line: #cfd4e3; --hover: #f3f5fb;
  --link: #8f2fe8; --link-hover: #5e12b3; --pill-dot-border: #ffffff;
  --ghost-line: #cfd4e3; --ghost-hover: #eef0f7;
  --code-bg: #eef0f7; --log-bg: #1f2a4a;
  --ok-text: #1f8a1a; --warn-text: #8a6500; --err-text: #c23a1e; --info-text: #1b7fc4; --purple-text: #6a1fc7; --grey-text: #4d5570;
  --ok-bg: rgba(78,204,72,.16); --warn-bg: rgba(236,180,3,.18); --err-bg: rgba(246,107,78,.16); --info-bg: rgba(69,170,242,.16); --purple-bg: rgba(163,67,255,.14); --grey-bg: #e9ecf4;
  --t-ok: #1f8a1a; --t-warn: #8a6500; --t-err: #c23a1e; --t-info: #1b7fc4;

  --side-bg: #03256c; --side-line: rgba(255,255,255,.10); --side-text: rgba(255,255,255,.82); --side-muted: rgba(255,255,255,.5); --side-hover: rgba(255,255,255,.08);
  --side-on-bg: #a343ff; --side-on-text: #ffffff; --side-sub-on-bg: rgba(255,255,255,.10); --side-sub-on-text: #ffffff; --side-box: rgba(255,255,255,.08); --side-wortmarke: #ffffff;
}

/* ---------- Grundlagen */
*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; }
body { margin: 0; min-height: 100%; font-family: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 14px; line-height: 1.45; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }
h1, h2, h3 { margin: 0; font-weight: 600; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
svg { flex: 0 0 auto; }
.muted { color: var(--muted); }
.klein { font-size: 12px; }
.winzig { font-size: 11px; }
.fett { font-weight: 600; }
.nowrap { white-space: nowrap; }
.t-ok { color: var(--t-ok); } .t-warn { color: var(--t-warn); } .t-err { color: var(--t-err); } .t-info { color: var(--t-info); }
.wortmarke { font-family: "Good Times", Poppins, sans-serif; letter-spacing: .08em; }
.abschnitt { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* ---------- Rahmen */
.rahmen { display: flex; min-height: 100vh; }
.seitenleiste { display: flex; flex-direction: column; width: var(--side-w); flex: 0 0 var(--side-w); background: var(--side-bg); color: var(--side-text); border-right: 1px solid var(--side-line); position: sticky; top: 0; height: 100vh; }
.leistenkoerper { display: flex; flex: 1 1 auto; min-height: 0; }
.leistenkopf { display: flex; align-items: center; gap: 12px; padding: 14px 14px 8px 15px; }
.leistenkopf .logo { width: 56px; height: 56px; flex: 0 0 56px; display: flex; align-items: center; justify-content: center; }
.leistenkopf .logo img { width: 46px; height: 46px; object-fit: contain; }
.leistenkopf .wortmarke { font-size: 20px; color: var(--side-wortmarke); letter-spacing: .04em; }
.leistenkopf .unter { font-size: 11px; color: var(--side-muted); margin-top: 2px; }
.rail { width: var(--rail-w); flex: 0 0 var(--rail-w); display: flex; flex-direction: column; align-items: center; padding: 6px 0 18px; gap: 6px; border-right: 1px solid var(--side-line); }
.rail a { display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 12px; color: var(--side-on-bg); }
[data-design="hell"] .rail a { color: rgba(255,255,255,.85); }
.rail a:hover { background: var(--side-hover); color: inherit; }
.rail a.on { background: var(--side-on-bg); color: var(--side-on-text); }
.rail .platz { flex: 1 1 auto; }
.untermenue { flex: 1 1 auto; display: flex; flex-direction: column; padding: 6px 12px 18px 14px; min-width: 0; }
.untermenue .kopf { padding: 6px 6px 20px; }
.untermenue .kopf .wortmarke { font-size: 20px; color: var(--side-wortmarke); }
.untermenue .kopf .unter { font-size: 11px; color: var(--side-muted); margin-top: 2px; }
.untermenue .abschnitt { color: var(--side-muted); padding: 0 14px 8px; }
.untermenue .abschnitt + .abschnitt, .untermenue a + .abschnitt { padding-top: 22px; }
.untermenue a { display: block; padding: 9px 14px; border-radius: 8px; font-size: 13px; color: var(--side-text); }
.untermenue a:hover { background: var(--side-hover); }
.untermenue a.on { background: var(--side-sub-on-bg); color: var(--side-sub-on-text); font-weight: 600; border-left: 3px solid var(--lila); padding-left: 11px; }
.untermenue .platz { flex: 1 1 auto; }
.serverbox { margin: 0 2px; padding: 12px 14px; border-radius: 10px; background: var(--side-box); font-size: 12px; color: var(--side-text); }
.serverbox .name { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.serverbox .unter { color: var(--side-muted); margin-top: 4px; }
.punkt { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--gruen); flex: 0 0 8px; }
.punkt.warn { background: var(--gelb); } .punkt.err { background: var(--rot); } .punkt.info { background: var(--cyan); } .punkt.purple { background: var(--lila); } .punkt.grey { background: var(--grau); }

.hauptbereich { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.kopfleiste { height: var(--top-h); flex: 0 0 var(--top-h); background: var(--top-bg); color: var(--top-text); border-bottom: 1px solid var(--top-line); display: flex; align-items: center; gap: 14px; padding: 0 24px; position: sticky; top: 0; z-index: 20; overflow: hidden; min-width: 0; }
.kopfleiste .suche { display: flex; align-items: center; gap: 10px; background: var(--top-input); border: 1px solid rgba(255,255,255,.14); border-radius: 8px; height: 40px; padding: 0 14px; width: 380px; flex: 0 1 380px; min-width: 150px; }
.kopfleiste .suche input { flex: 1 1 auto; min-width: 0; background: transparent; border: 0; color: #fff; font-size: 13px; outline: none; }
.kopfleiste .suche input::placeholder { color: rgba(255,255,255,.5); }
.kopfleiste .suche kbd { font-family: inherit; font-size: 11px; color: rgba(255,255,255,.45); border: 1px solid rgba(255,255,255,.22); border-radius: 4px; padding: 1px 6px; }
.kopfleiste .platz { flex: 1 1 auto; }
.kopfleiste .status { display: flex; align-items: center; gap: 8px; padding: 0 14px; height: 40px; border-radius: 8px; background: rgba(78,204,72,.12); border: 1px solid rgba(78,204,72,.35); font-size: 12px; color: #d8f7d6; white-space: nowrap; max-width: 300px; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 0; }
.kopfleiste .status.warn { background: rgba(236,180,3,.12); border-color: rgba(236,180,3,.4); color: #ffe9a3; }
.kopfleiste .status.err { background: rgba(246,107,78,.12); border-color: rgba(246,107,78,.4); color: #ffd0c6; }
.kopfleiste .uhr { text-align: right; line-height: 1.2; padding: 0 6px; white-space: nowrap; }
.kopfleiste .uhr .zeit { font-size: 15px; font-weight: 600; }
.kopfleiste .uhr .datum { font-size: 11px; color: rgba(255,255,255,.62); }
.kopfleiste .knopf { background: transparent; border: 0; color: #fff; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; position: relative; }
.kopfleiste .knopf:hover { background: rgba(255,255,255,.10); color: #fff; }
.kopfleiste .knopf .dot { position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--rot); border: 2px solid var(--top-bg); }
.kopfleiste .benutzer { display: flex; align-items: center; gap: 10px; padding-left: 10px; border-left: 1px solid rgba(255,255,255,.14); margin-left: 4px; }
.kopfleiste .benutzer .avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--lila); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; }
.kopfleiste .benutzer { flex: 0 0 auto; }
.kopfleiste .benutzer .name { font-size: 13px; font-weight: 600; line-height: 1.2; }
.kopfleiste .benutzer .rolle { font-size: 11px; color: rgba(255,255,255,.62); line-height: 1.2; }
.kopfleiste .menuknopf { display: none; }

.inhalt { flex: 1 1 auto; padding: 24px 28px 28px; display: flex; flex-direction: column; gap: 20px; }
.seitenkopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.seitenkopf h1 { font-size: 24px; margin-top: 2px; }
.seitenkopf .aktionen { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ---------- Bausteine */
.karte { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
[data-design="hell"] .karte { box-shadow: 0 2px 10px rgba(3,37,108,.06); }
.karte.innen { padding: 18px 20px; }
.kartenkopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 10px; }
.kartenkopf .titel { font-size: 15px; font-weight: 600; }
.kartenkopf a { font-size: 12px; }
.raster { display: grid; gap: 16px; }
.r4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.r3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.r2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.r-seite { grid-template-columns: minmax(0, 1fr) 380px; }
.r-seite-k { grid-template-columns: minmax(0, 1fr) 330px; }
.r-drei { grid-template-columns: 250px minmax(0, 1fr) 310px; }
.spalte { display: flex; flex-direction: column; gap: 16px; }
.zeile { display: flex; align-items: center; gap: 10px; }

.kennzahl { padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.kennzahl .oben { display: flex; justify-content: space-between; align-items: center; }
.kennzahl .symbol { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.kennzahl .wert { font-size: 30px; font-weight: 600; line-height: 1; }
.kennzahl .wert small { font-size: 16px; font-weight: 400; color: var(--muted); }

.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.pill .punkt { width: 6px; height: 6px; flex-basis: 6px; }
.pill.ok { background: var(--ok-bg); color: var(--ok-text); } .pill.warn { background: var(--warn-bg); color: var(--warn-text); }
.pill.err { background: var(--err-bg); color: var(--err-text); } .pill.info { background: var(--info-bg); color: var(--info-text); }
.pill.purple { background: var(--purple-bg); color: var(--purple-text); } .pill.grey { background: var(--grey-bg); color: var(--grey-text); }
.pill.beispiel { background: var(--warn-bg); color: var(--warn-text); border: 1px solid rgba(236,180,3,.45); }
a.pill { padding: 6px 12px; }

.balken { display: block; height: 6px; border-radius: 3px; background: var(--track); overflow: hidden; }
.balken i { display: block; height: 100%; border-radius: 3px; }
.balken.hoch { height: 8px; border-radius: 4px; }
.f-ok { background: var(--gruen); } .f-warn { background: var(--gelb); } .f-err { background: var(--rot); } .f-info { background: var(--cyan); } .f-purple { background: var(--lila); } .f-grey { background: var(--grau); }

.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: 8px; background: var(--lila-knopf); color: #fff; font-weight: 600; font-size: 13px; border: 0; white-space: nowrap; }
.knopf:hover { background: var(--lila-knopf-hover); color: #fff; }
.knopf.ghost { background: transparent; border: 1px solid var(--ghost-line); color: var(--text); }
.knopf.ghost:hover { background: var(--ghost-hover); color: var(--text); }
.knopf.klein { height: 30px; padding: 0 12px; font-size: 12px; }
.knopf.gross { height: 48px; font-size: 15px; width: 100%; }
.knopf:disabled { opacity: .5; cursor: not-allowed; }
.ib { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--input-line); background: transparent; color: var(--text); }
.ib:hover { background: var(--ghost-hover); color: var(--text); }
.ib.aktiv { border-color: var(--lila); color: var(--link); }
.ib:disabled { opacity: .4; cursor: not-allowed; }

.feld { display: flex; align-items: center; gap: 10px; background: var(--input-bg); border: 1px solid var(--input-line); border-radius: 8px; height: 38px; padding: 0 12px; font-size: 13px; color: var(--muted); }
.feld input, .feld select { background: transparent; border: 0; color: var(--text); min-width: 0; flex: 1 1 auto; outline: none; }
.feld select option { color: #1f2a4a; }
.feld:focus-within { outline: 2px solid var(--lila); outline-offset: 1px; }
.werkzeugleiste { padding: 12px 20px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

table.tabelle { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tabelle th { text-align: left; font-weight: 500; color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 12px; }
table.tabelle td { padding: 12px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
table.tabelle tr:last-child td { border-bottom: 0; }
table.tabelle tbody tr:hover td { background: var(--hover); }
table.tabelle th:first-child, table.tabelle td:first-child { padding-left: 20px; }
table.tabelle th:last-child, table.tabelle td:last-child { padding-right: 20px; }
table.tabelle .rechts { text-align: right; }
table.tabelle .aktionen { display: flex; gap: 6px; justify-content: flex-end; }
table.tabelle tr.blass { opacity: .6; }
.tabellenkopf { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px 8px; }
.tabellenkopf .titel { font-size: 15px; font-weight: 600; }
.ellipse { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

code.k { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; background: var(--code-bg); padding: 1px 6px; border-radius: 4px; }
.protokoll { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.6; background: var(--log-bg); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; color: rgba(255,255,255,.82); white-space: pre; overflow: auto; }
.protokoll .err { color: #ffb3a3; }

.reiter { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.reiter a { padding: 10px 16px; font-size: 13px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.reiter a:hover { color: var(--text); }
.reiter a.on { color: var(--text); font-weight: 600; border-color: var(--lila); }

.liste a { display: block; padding: 12px 14px; border-radius: 10px; border: 1px solid transparent; color: var(--text); }
.liste a:hover { background: var(--hover); }
.liste a.on { background: var(--card-2); border-color: rgba(163,67,255,.5); }

.zeitleiste { position: relative; }
.zeitleiste::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--track); }
.zeitleiste .eintrag { display: flex; gap: 14px; padding: 0 0 16px; position: relative; }
.zeitleiste .eintrag:last-child { padding-bottom: 0; }
.zeitleiste .marke { width: 16px; height: 16px; border-radius: 50%; border: 3px solid var(--card); flex: 0 0 16px; }
.zeitleiste .text { font-size: 12px; line-height: 1.45; }

.hinweis { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 10px; font-size: 13px; }
.hinweis.warn { background: var(--warn-bg); border: 1px solid rgba(236,180,3,.4); color: var(--warn-text); }
.hinweis.ok { background: var(--ok-bg); border: 1px solid rgba(78,204,72,.35); color: var(--ok-text); }
.hinweis.err { background: var(--err-bg); border: 1px solid rgba(246,107,78,.4); color: var(--err-text); }
.hinweis.info { background: var(--info-bg); border: 1px solid rgba(69,170,242,.4); color: var(--info-text); }

.messuhr { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.messuhr text { fill: var(--text); font-family: Poppins, sans-serif; font-size: 11px; font-weight: 600; }
.messuhr .label { font-size: 11px; color: var(--muted); }
.kachel { height: 96px; border-radius: 10px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); }
.galerie { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 4px; }
.galerie a { display: block; width: 158px; flex: 0 0 158px; color: var(--text); }
.galerie .bildtitel { font-size: 11px; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.haken { display: flex; gap: 10px; font-size: 12px; align-items: flex-start; }
.haken svg { margin-top: 2px; }
.kaestchen { width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--ghost-line); flex: 0 0 16px; display: inline-flex; align-items: center; justify-content: center; }
.kaestchen.an { background: var(--gruen); border-color: var(--gruen); }
.erledigt { text-decoration: line-through; color: var(--muted); }
.geheim { letter-spacing: .2em; font-size: 14px; color: var(--muted); }
.geheim.offen { letter-spacing: 0; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; color: var(--warn-text); background: var(--warn-bg); padding: 2px 8px; border-radius: 4px; }

.meldung { position: fixed; right: 24px; bottom: 24px; z-index: 50; max-width: 420px; box-shadow: 0 12px 40px rgba(0,0,0,.35); }

/* ---------- Anmeldung */
.anmeldung { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 56px 24px 20px; color: #fff;
  background-image: linear-gradient(rgba(2,30,86,.82), rgba(2,30,86,.92)), url(../img/hintergrund.jpg); background-size: cover; background-position: center; }
.anmeldung .marke { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 8px; }
.anmeldung .marke img { width: 300px; max-width: 80vw; height: 92px; object-fit: contain; }
.anmeldung .marke .unter { font-family: "Good Times", Poppins, sans-serif; font-size: 13px; letter-spacing: .22em; color: rgba(255,255,255,.72); text-transform: uppercase; text-align: center; }
.anmeldung form { width: 100%; max-width: 440px; background: #03256c; border: 1px solid rgba(255,255,255,.10); border-radius: 14px; padding: 36px 36px 28px; box-shadow: 0 24px 60px rgba(0,0,0,.45); display: flex; flex-direction: column; gap: 18px; margin: 24px 0; }
.anmeldung h1 { font-size: 24px; }
.anmeldung label.feldname { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 500; color: rgba(255,255,255,.78); }
.anmeldung .eingabe { display: flex; align-items: center; gap: 10px; background: #021e56; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; padding: 0 14px; height: 46px; }
.anmeldung .eingabe:focus-within { outline: 2px solid var(--lila); outline-offset: 1px; }
.anmeldung .eingabe input { flex: 1 1 auto; min-width: 0; background: transparent; border: 0; color: #fff; font-size: 14px; outline: none; }
.anmeldung .eingabe input::placeholder { color: rgba(255,255,255,.4); }
.anmeldung .zwischen { display: flex; justify-content: space-between; align-items: center; font-size: 12px; gap: 10px; flex-wrap: wrap; }
.anmeldung .zwischen label { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.78); cursor: pointer; }
.anmeldung input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--lila); margin: 0; }
.anmeldung .oder { display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,.45); font-size: 12px; }
.anmeldung .oder span { flex: 1 1 auto; height: 1px; background: rgba(255,255,255,.14); }
.anmeldung .knopf.ghost { height: 46px; border-color: rgba(255,255,255,.22); color: #fff; width: 100%; font-weight: 500; }
.anmeldung .serverstatus { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 10px 12px; border-radius: 8px; background: rgba(78,204,72,.12); border: 1px solid rgba(78,204,72,.35); font-size: 12px; color: #d8f7d6; }
.anmeldung .fehler { padding: 10px 12px; border-radius: 8px; background: rgba(246,107,78,.16); border: 1px solid rgba(246,107,78,.4); font-size: 12px; color: #ffd0c6; }
.anmeldung .fusszeile { width: 100%; max-width: 1100px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; font-size: 12px; color: rgba(255,255,255,.62); padding-top: 16px; border-top: 1px solid rgba(255,255,255,.10); }
.anmeldung .fusszeile .links { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.anmeldung .fusszeile a { color: rgba(255,255,255,.62); }
.anmeldung .fusszeile a:hover { color: #fff; }
.anmeldung .fusszeile select { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.22); border-radius: 6px; padding: 4px 8px; font-size: 12px; }
.anmeldung .fusszeile select option { color: #1f2a4a; }

/* ---------- Fehlerseite */
.fehlerseite { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.fehlerseite .karte { padding: 36px; max-width: 480px; text-align: center; }

/* ---------- Schmale Fenster */
@media (max-width: 1280px) {
  .r4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .r3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .r-seite, .r-seite-k { grid-template-columns: minmax(0, 1fr); }
  .r-drei { grid-template-columns: 220px minmax(0, 1fr); }
  .r-drei > :last-child { grid-column: 1 / -1; }
  .kopfleiste .suche { width: 260px; }
  .kopfleiste .uhr .datum { display: none; }
}
@media (max-width: 960px) {
  :root { --side-w: 86px; }
  .untermenue { display: none; }
  .rail { border-right: 0; }
  .r-drei { grid-template-columns: minmax(0, 1fr); }
  .r3, .r2 { grid-template-columns: minmax(0, 1fr); }
  .kopfleiste .status { display: none; }
  .inhalt { padding: 18px 16px 24px; }
  .karte table.tabelle { display: block; overflow-x: auto; }
}
@media (max-width: 640px) {
  .seitenleiste { position: fixed; left: 0; top: 0; z-index: 30; transform: translateX(-100%); transition: transform .2s; }
  .seitenleiste.offen { transform: none; }
  .kopfleiste { padding: 0 14px; gap: 8px; }
  .kopfleiste .menuknopf { display: flex; }
  .kopfleiste .suche { display: none; }
  .kopfleiste .benutzer .name, .kopfleiste .benutzer .rolle { display: none; }
  .r4 { grid-template-columns: minmax(0, 1fr); }
  .anmeldung form { padding: 28px 22px; }
}

/* ---------- 0.3.0: Kopfleiste mit drei Uhren, Kontextwahl, Avatare, Verwaltung */
:root { --magenta: #e040fb; --magenta-text: #f0a6ff; --magenta-bg: rgba(224,64,251,.18); }
[data-design="hell"] { --magenta-text: #8e24aa; --magenta-bg: rgba(224,64,251,.14); }
.pill.magenta { background: var(--magenta-bg); color: var(--magenta-text); } .punkt.magenta { background: var(--magenta); }
.kopfleiste .uhren { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.kopfleiste .uhren .uhr { padding: 0 10px; text-align: center; border-left: 1px solid rgba(255,255,255,.12); }
.kopfleiste .uhren .uhr:first-child { border-left: 0; }
.kopfleiste .uhren .uhr.ekasit .zeit { color: #d9bbff; }
.kopfleiste .uhren .uhr .datum { font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
.kopfleiste a.benutzer { color: #fff; }
.kopfleiste .benutzer .avatar { position: relative; }
.kopfleiste .benutzer .avatar .online { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: var(--gruen); border: 2px solid var(--top-bg); }

.kontextwahl { margin: 2px 12px 10px; position: relative; }

.kontextwahl summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--side-box); cursor: pointer; color: var(--side-text); }
.kontextwahl summary::-webkit-details-marker { display: none; }
.kontextwahl summary > .ellipse { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.kontextwahl .name { font-size: 14px; font-weight: 600; display: block; }
.kontextwahl .rolle { font-size: 11px; color: var(--side-muted); display: block; }
.kontextwahl .kuerzel { width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: #fff; background: var(--navy); flex: 0 0 32px; }
[data-design="hell"] .kontextwahl .kuerzel { background: rgba(255,255,255,.18); }
.kontextwahl .kuerzel.privat { background: var(--lila); } .kontextwahl .kuerzel.alle { background: var(--gruen); color: #063; }
.kontextwahl .menue { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 25; background: var(--side-bg); border: 1px solid var(--side-line); border-radius: 12px; padding: 8px; box-shadow: 0 16px 40px rgba(0,0,0,.25); }
.kontextwahl .menue .abschnitt { padding: 8px 10px 4px; }
.kontextwahl .menue a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; }
.kontextwahl .menue a.on { background: var(--side-sub-on-bg); }
.kontextwahl .menue a > span:last-child { display: flex; flex-direction: column; min-width: 0; }

.avatar-k { position: relative; display: inline-flex; flex: 0 0 auto; }
.avatar-k .bild { width: 100%; height: 100%; border-radius: 50%; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; }
.avatar-k .bild.firma { border-radius: 9px; }
.avatar-k .bild.verifiziert { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--gruen), 0 0 12px rgba(78,204,72,.7); }
.avatar-k .online { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: var(--gruen); border: 2px solid var(--card); }
.avatar-k .gastzeichen { position: absolute; left: -3px; bottom: -3px; width: 16px; height: 16px; border-radius: 50%; background: var(--gelb); border: 2px solid var(--card); display: flex; align-items: center; justify-content: center; }
.avatar-k .gastzeichen.agent { background: var(--cyan); }
.avatar-gross { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.avatar-gross .avatar-k { width: 128px; height: 128px; font-size: 40px; }
.avatar-groessen { display: flex; align-items: flex-end; gap: 14px; }
.avatar-groessen .g { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); }
.avatar-groessen .g span.bild { border-radius: 50%; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; }
tr.zeile-inaktiv td:nth-child(2) .fett { color: var(--magenta-text); }
tr.zeile-gesperrt td:nth-child(2) .fett { color: var(--err-text); }
tr.zeile-gesperrt, tr.zeile-gebannt { opacity: .7; }
tr.auswahl td { background: rgba(163,67,255,.08) !important; }
input.kaestchen-echt { width: 16px; height: 16px; accent-color: var(--lila); margin: 0; }
.sammelaktionen { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.tabelle-scroll { overflow-x: auto; }
.zeile[hidden] { display: none; }
.karte > table.tabelle { table-layout: fixed; }
.tabelle-scroll .tabelle td.diff { white-space: normal; }

/* Rechte-Matrix */
.matrix { width: 100%; border-collapse: collapse; font-size: 12px; }
.matrix th { font-weight: 500; color: var(--muted); padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: center; font-size: 11px; white-space: nowrap; }
.matrix th:first-child, .matrix td:first-child { text-align: left; padding-left: 20px; }
.matrix td { padding: 6px; border-bottom: 1px solid var(--line-2); text-align: center; }
.matrix tr.modul td { background: var(--card-2); font-weight: 600; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); text-align: left; padding: 8px 20px; }
.matrix .obj { font-weight: 500; }
.matrix .bereich { font-size: 11px; color: var(--muted); }
.matrix .z { display: inline-flex; width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--ghost-line); align-items: center; justify-content: center; cursor: pointer; }
.matrix .z.r { background: var(--grey-bg); border-color: transparent; color: var(--grey-text); }
.matrix .z.e { background: var(--lila); border-color: var(--lila); color: #fff; }
.matrix .z.v { background: var(--rot); border-color: var(--rot); color: #fff; }
.matrix td:last-child { text-align: right; padding-right: 20px; }
.matrix .gilt { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); border: 1px dashed var(--ghost-line); border-radius: 6px; padding: 2px 8px; cursor: pointer; }
.matrix .gilt.gesetzt { color: var(--link); border-style: solid; border-color: var(--lila); }
.legende { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--muted); align-items: center; }
.legende .z { display: inline-flex; width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--ghost-line); margin-right: 6px; vertical-align: middle; }

/* Formulare */
.formular { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.formular .voll { grid-column: 1 / -1; }
.feldname { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 500; color: var(--muted); }
.feldname .feld { color: var(--text); }
.feldname textarea { background: var(--input-bg); border: 1px solid var(--input-line); border-radius: 8px; padding: 10px 12px; min-height: 80px; resize: vertical; color: var(--text); font-size: 13px; }
.schalter { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-2); font-size: 13px; }
.schalter:last-child { border-bottom: 0; }
.schalter .text { flex: 1 1 auto; }
.schalter .text small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.schalter input[type=checkbox] { appearance: none; width: 40px; height: 22px; border-radius: 11px; background: var(--track); position: relative; cursor: pointer; margin: 0; flex: 0 0 40px; }
.schalter input[type=checkbox]::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s; }
.schalter input[type=checkbox]:checked { background: var(--lila); }
.schalter input[type=checkbox]:checked::after { left: 21px; }
.kv { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 8px 16px; font-size: 13px; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; }
.codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; }
.qr { width: 190px; max-width: 100%; border-radius: 10px; background: #fff; padding: 8px; box-sizing: border-box; }
.diff { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; }
.diff .alt { color: var(--err-text); } .diff .neu { color: var(--ok-text); }

/* Modal (Kurzansicht) */
.modal { position: fixed; inset: 0; z-index: 60; background: rgba(2,30,86,.6); display: none; align-items: center; justify-content: center; padding: 20px; }
.modal.offen { display: flex; }
.modal .karte { width: 100%; max-width: 640px; max-height: 90vh; overflow: auto; }
.modal .kopfzeile { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.modal .kopfzeile .avatar-k { width: 56px; height: 56px; font-size: 18px; }
.modal .kopfzeile .schliessen { margin-left: auto; }
.modal .teil { padding: 14px 20px; border-bottom: 1px solid var(--line-2); }
.modal .teil:last-child { border-bottom: 0; }

/* Checkliste (Dokumente des Kerns) */
.checkliste .gruppe { padding: 14px 20px 6px; }
.checkliste .gruppe h3 { font-size: 14px; margin-bottom: 8px; }
.checkliste .punkt-zeile { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-2); align-items: flex-start; }
.checkliste .punkt-zeile:last-child { border-bottom: 0; }
.checkliste .punkt-zeile .kaestchen { margin-top: 2px; }
.checkliste .meta { font-size: 11px; color: var(--muted); margin-top: 3px; }
.checkliste .vorschlag { margin-top: 6px; padding: 8px 10px; border-left: 3px solid var(--lila); background: var(--purple-bg); border-radius: 6px; font-size: 12px; color: var(--purple-text); }
.checkliste .wahl { margin-top: 6px; display: flex; gap: 8px; flex-wrap: wrap; }
.checkliste .wahl span { font-size: 11px; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--ghost-line); color: var(--muted); }
.checkliste .wahl span.gewaehlt { border-color: var(--lila); color: var(--link); font-weight: 600; }
.leer { padding: 40px 20px; text-align: center; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.leer .gross { font-size: 16px; font-weight: 600; color: var(--text); }

/* Schritte (Registrierung, Passwort) */
.schritte { display: flex; gap: 8px; align-items: center; font-size: 12px; color: rgba(255,255,255,.55); }
.schritte span { display: inline-flex; align-items: center; gap: 6px; }
.schritte i { display: inline-flex; width: 20px; height: 20px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); align-items: center; justify-content: center; font-style: normal; font-size: 11px; }
.schritte span.on { color: #fff; } .schritte span.on i { background: var(--lila); border-color: var(--lila); }
.schritte span.fertig i { background: var(--gruen); border-color: var(--gruen); color: #063; }
.anmeldung .wahl2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.anmeldung .wahl2 label { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,.18); cursor: pointer; }
.anmeldung .wahl2 label:has(input:checked) { border-color: var(--lila); background: rgba(163,67,255,.14); }
.anmeldung .wahl2 input { display: none; }
.anmeldung .wahl2 b { font-size: 13px; } .anmeldung .wahl2 small { font-size: 11px; color: rgba(255,255,255,.6); }
.anmeldung .codefeld { display: flex; gap: 8px; justify-content: space-between; }
.anmeldung .codefeld input { width: 100%; height: 54px; text-align: center; font-size: 22px; font-weight: 600; background: #021e56; border: 1px solid rgba(255,255,255,.18); border-radius: 8px; color: #fff; outline: none; }
.anmeldung .codefeld input:focus { border-color: var(--lila); }
.anmeldung .sperrkopf { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.anmeldung .sperrkopf .avatar-k { width: 88px; height: 88px; font-size: 28px; }
.anmeldung .karte-hinweis { font-size: 12px; color: rgba(255,255,255,.7); line-height: 1.5; }

@media (max-width: 1480px) { .kopfleiste .uhren .uhr:nth-child(3) { display: none; } }
@media (max-width: 1280px) { .kopfleiste .uhren .uhr:nth-child(2) { display: none; } .formular { grid-template-columns: minmax(0, 1fr); } .kv { grid-template-columns: 1fr; } }
@media (max-width: 960px) { .kontextwahl { display: none; } }

/* ---------- 0.3.1: Übersetzungen (nach Vorlage Translation_System) ---------- */
.flagge { width: 22px; height: 15px; border-radius: 3px; object-fit: cover; flex: 0 0 22px; box-shadow: 0 0 0 1px rgba(0,0,0,.18); vertical-align: -2px; }
.ue-kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: -4px 0 14px; }
.ansichten { display: inline-flex; gap: 4px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 4px; }
.ansichten a { padding: 7px 16px; border-radius: 999px; font-size: 13px; color: var(--muted); }
.ansichten a:hover { color: var(--text); }
.ansichten a.on { background: var(--lila); color: #fff; font-weight: 600; }
.brotkrumen { display: flex; align-items: center; gap: 6px; }
.brotkrumen b { color: var(--text); font-weight: 600; }
.ue-leiste { gap: 10px; }
.auswahl { position: relative; }
.auswahl summary { list-style: none; display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 10px 0 12px; border-radius: 8px; background: var(--input-bg); border: 1px solid var(--input-line); cursor: pointer; min-width: 220px; font-size: 13px; }
.auswahl summary::-webkit-details-marker { display: none; }
.auswahl .text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; line-height: 1.15; }
.auswahl .text b { font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.auswahl .text small { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.auswahl .menue { position: absolute; left: 0; top: calc(100% + 6px); z-index: 30; min-width: 300px; max-height: 420px; overflow: auto; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 8px; box-shadow: 0 16px 40px rgba(0,0,0,.28); }
.auswahl .menue .feld { height: 34px; margin: 2px 2px 6px; }
.auswahl .menue .abschnitt { display: flex; align-items: center; gap: 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 10px 10px 6px; }
.auswahl .eintrag { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; color: var(--text); cursor: pointer; }
.auswahl .eintrag:hover { background: var(--hover); }
.auswahl .eintrag.on { background: var(--purple-bg); }
.auswahl .eintrag.leise { opacity: .6; }
.auswahl .eintrag[hidden] { display: none; }
.auswahl .eintrag input[type=checkbox] { accent-color: var(--lila); width: 16px; height: 16px; margin: 0; }
.zahl { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; font-size: 11px; font-weight: 700; flex: 0 0 auto; }
.zahl.err { background: var(--rot); color: #fff; } .zahl.ok { background: var(--ok-bg); color: var(--ok-text); } .zahl.grey { background: var(--grey-bg); color: var(--grey-text); }
.schalter.kompakt { padding: 0; border: 0; gap: 8px; cursor: pointer; }
.werkzeugleiste .schalter.kompakt { white-space: nowrap; }
.hinweis { display: flex; align-items: center; gap: 8px; padding: 10px 14px; margin-bottom: 14px; border-radius: 10px; background: var(--info-bg); color: var(--info-text); }
.ue-gruppe { margin-bottom: 16px; }
.ue-gruppe .tabellenkopf { padding-top: 10px; }
.ue-tabelle td { vertical-align: top; padding-top: 10px; padding-bottom: 10px; }
.ue-tabelle .ue-original { font-size: 13px; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--input-bg); color: var(--text); min-height: 38px; }
.ue-feld { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 8px 0 12px; border-radius: 8px; background: var(--input-bg); border: 1px solid var(--input-line); }
.ue-feld input { flex: 1 1 auto; min-width: 0; background: transparent; border: 0; outline: none; color: var(--text); font-size: 13px; }
.ue-feld:focus-within { outline: 2px solid var(--lila); outline-offset: 1px; }
.ue-feld.ok { border-color: var(--gruen); } .ue-feld.ok .haken { color: var(--gruen); display: inline-flex; }
.ue-feld.fehlt { border-color: var(--rot); } .ue-feld.fehlt .haken { display: none; }
.ue-feld.fehlt input::placeholder { color: var(--err-text); opacity: .8; }
.feld.gespeichert, .ue-feld.gespeichert { box-shadow: 0 0 0 3px rgba(78,204,72,.25); transition: box-shadow .6s; }
.ue-feld .zaehler { min-width: 30px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; font-size: 11px; font-weight: 700; padding: 0 6px; }
.ue-feld .zaehler.ok { background: var(--gruen); color: #063; } .ue-feld .zaehler.err { background: var(--rot); color: #fff; }
.maxhinweis { margin-top: 3px; }
.verlauf-knopf { width: 32px; height: 32px; border-radius: 8px; border: 0; background: transparent; color: var(--text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; margin-top: 3px; }
.verlauf-knopf.aktiv:hover { background: var(--hover); color: var(--lila); }
.verlauf-knopf:disabled { color: var(--muted); opacity: .35; cursor: default; }
.ue-zeile[hidden] { display: none; }
.verlauf-fenster { position: absolute; z-index: 55; width: 680px; max-width: calc(100vw - 40px); background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.verlauf-fenster .vk { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line-2); }
.verlauf-fenster .vk b { font-size: 14px; white-space: nowrap; }
.verlauf-fenster .vt { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; font-size: 13px; }
.verlauf-fenster .vt .t { display: flex; align-items: center; gap: 8px; min-width: 0; }
.verlauf-fenster .vt .t > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.verlauf-fenster .vt small { font-size: 11px; white-space: nowrap; }
.verlauf-fenster .x { border: 0; background: transparent; color: var(--muted); cursor: pointer; width: 28px; height: 28px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; }
.verlauf-fenster .x:hover { background: var(--hover); color: var(--text); }
.verlauf-tabelle { table-layout: fixed; }
.verlauf-tabelle td { padding: 8px 14px; font-size: 13px; vertical-align: middle; }
.verlauf-tabelle .wer { display: flex; align-items: center; gap: 8px; min-width: 0; }
.verlauf-tabelle .wer span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.verlauf-tabelle .wandel { display: grid; grid-template-columns: 1fr 22px 1fr; align-items: center; gap: 8px; }
.verlauf-tabelle .wandel .von { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(246,107,78,.7); }
.verlauf-tabelle .wandel .nach { font-weight: 600; }
.verlauf-tabelle .wandel .pfeil { color: var(--muted); text-align: center; }
.verlauf-tabelle .zurueck { width: 30px; height: 30px; border: 0; border-radius: 6px; background: transparent; color: var(--text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.verlauf-tabelle .zurueck:hover { background: var(--hover); color: var(--lila); }
.zeile-form { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.zeile-form label { display: flex; flex-direction: column; gap: 6px; flex: 1 1 200px; min-width: 160px; }
.zeile-form .feldname { white-space: nowrap; display: flex; align-items: center; gap: 4px; }
.zeile-form .knopf { height: 38px; }
.feldname .info { display: inline-flex; vertical-align: -2px; color: var(--lila); cursor: help; margin-left: 2px; }
.tabellenfuss { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 20px 14px; }
.tabellenfuss .blaetter { display: inline-flex; align-items: center; gap: 6px; }
.sortierbar th[data-sort] { cursor: pointer; user-select: none; }
.sortierbar th[data-sort]:hover { color: var(--text); }
.sortierbar th[data-sort].auf::after { content: " ▲"; font-size: 9px; } .sortierbar th[data-sort].ab::after { content: " ▼"; font-size: 9px; }
.sortierbar tr[hidden] { display: none; }
.maxfeld { height: 30px; width: 90px; padding: 0 8px; font-size: 12px; }
.maxfeld input { font-size: 12px; width: 100%; }
.zeile-mitte { display: flex; align-items: center; gap: 10px; }
@media (max-width: 1280px) { .ue-tabelle colgroup col:first-child { width: 40% !important; } }

/* ---------- 0.4.0: echte Anmeldeseiten ---------- */
.anmeldung button.link { background: none; border: 0; padding: 0; color: var(--lila-hell, #c89bff); font: inherit; text-decoration: underline; cursor: pointer; }
.anmeldung .eingabe select.hell { flex: 1; background: transparent; border: 0; color: #fff; outline: none; }
.eingabe select.hell option { color: #1f2a4a; }
.anmeldung .hinweis { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 10px; background: rgba(69,170,242,.18); color: #cfe6ff; }

.matrix .z.aus { opacity: .25; cursor: default; }
.matrix .bereich-eingabe { width: 100%; min-width: 90px; background: var(--input-bg); border: 1px solid var(--input-line); border-radius: 6px; color: var(--text); font-size: 11px; padding: 4px 6px; }
.matrix .bereich-eingabe:focus { outline: 2px solid var(--lila); }
.qr svg { width: 100%; height: auto; display: block; }