/* 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; 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; }
.rail { width: var(--rail-w); flex: 0 0 var(--rail-w); display: flex; flex-direction: column; align-items: center; padding: 14px 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 .logo { width: 56px; height: 56px; margin-bottom: 10px; background: transparent !important; }
.rail .logo img { width: 46px; height: 46px; object-fit: contain; }
.rail .platz { flex: 1 1 auto; }
.untermenue { flex: 1 1 auto; display: flex; flex-direction: column; padding: 18px 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; }
.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; max-width: 100%; }
.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; }
.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 .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; }
}