/* NEOPAQ Konsole — Stilblatt nach NEOPAQ-Dashboard-Guideline.
   Farb-Slots aus Abschnitt 6 der Richtlinie; Markenwerte aus dem
   NEOPAQ-Key-Visual (Blau des Primärknopfs, Cyan des Kickers). */

:root {
  /* Flächen */
  --bg-app:         #09090a;
  --bg-nav:         #0c0c0d;
  --surface:        #0e0e10;
  --surface-raised: #141417;
  --surface-hover:  #17171a;
  --surface-active: #1f1f24;

  /* Linien */
  --border:         #1c1c1e;
  --border-card:    #1f1f22;
  --border-input:   #232326;
  --border-active:  #2c2c33;

  /* Text */
  --text-primary:   #f2f0ec;
  --text-secondary: #a9a59e;
  --text-tertiary:  #6b6862;
  --text-disabled:  #3a3a3d;

  /* Marke */
  --brand:          #1b46f2;
  --brand-fg:       #ffffff;
  --focus:          #59c1e8;

  /* Status */
  --success:        #7ba97f;
  --warning:        #c9a55f;
  --danger:         #c2706b;

  color-scheme: dark;
}

* {
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: var(--border-active) transparent;
}

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg-app);
  color: var(--text-primary);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 13.5px;
  line-height: 1.5;
}

code, .mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 11px; }

a { color: var(--text-primary); }

/* ---------- Rahmen: Seitenleiste(n) + Topbar + Inhalt ---------- */

.rahmen { display: flex; min-height: 100vh; }

.ebene1 {
  width: 248px; flex: none;
  background: var(--bg-nav);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  transition: width 300ms cubic-bezier(.32, .72, 0, 1);
}
.mit-unterebene .ebene1 { width: 52px; }

.ebene1-kopf {
  height: 52px; flex: none;
  display: flex; align-items: center;
  padding: 0 14px;
  border-bottom: 1px solid var(--border);
  font-weight: 600; letter-spacing: .08em; font-size: 12.5px;
  white-space: nowrap; overflow: hidden;
}
.mit-unterebene .ebene1-kopf span { display: none; }
.mit-unterebene .ebene1-kopf { justify-content: center; padding: 0; }
.mit-unterebene .ebene1-kopf::before { content: "N"; }

.ebene1-liste { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 10px 9px; }

.nav-gruppe { margin: 0 0 14px; }
.nav-gruppe-titel {
  font-size: 11px; font-weight: 500; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-tertiary);
  padding: 6px 10px; white-space: nowrap;
  transition: opacity 180ms ease;
}
.mit-unterebene .nav-gruppe-titel { opacity: 0; }

.nav-eintrag {
  display: flex; align-items: center; gap: 9px;
  height: 34px; padding: 0 10px; border-radius: 8px;
  border: 1px solid transparent;
  color: var(--text-secondary); text-decoration: none;
  white-space: nowrap; overflow: hidden;
  transition: background 140ms ease, color 140ms ease;
}
.nav-eintrag svg { width: 17px; height: 17px; flex: none; }
.mit-unterebene .ebene1 .nav-eintrag span { display: none; }
.mit-unterebene .ebene1 .nav-eintrag { padding: 0; gap: 0; justify-content: center; }
.nav-eintrag:hover { background: var(--surface-hover); color: var(--text-primary); }
.nav-eintrag.aktiv {
  background: var(--surface-active);
  border-color: var(--border-active);
  color: var(--text-primary);
  font-weight: 600;
}

.ebene1-fuss {
  flex: none; border-top: 1px solid var(--border);
  padding: 10px 9px;
}
.ebene1-fuss .nutzername {
  font-size: 11.5px; color: var(--text-tertiary);
  padding: 0 10px 6px; white-space: nowrap; overflow: hidden;
  transition: opacity 180ms ease;
}
.mit-unterebene .ebene1-fuss .nutzername { opacity: 0; }
.ebene1-fuss form { margin: 0; }
.ebene1-fuss button, .ebene1-fuss .fuss-eintrag {
  all: unset; display: flex; align-items: center; gap: 9px;
  width: 100%; height: 32px; padding: 0 10px; border-radius: 8px;
  color: var(--text-secondary); cursor: pointer;
  white-space: nowrap; overflow: hidden; box-sizing: border-box;
}
.ebene1-fuss button:hover, .ebene1-fuss .fuss-eintrag:hover { background: var(--surface-hover); color: var(--text-primary); }
.ebene1-fuss .fuss-eintrag svg { width: 17px; height: 17px; flex: none; }
.mit-unterebene .ebene1-fuss button, .mit-unterebene .ebene1-fuss .fuss-eintrag { padding: 0; gap: 0; justify-content: center; }
.mit-unterebene .ebene1-fuss button span, .mit-unterebene .ebene1-fuss .fuss-eintrag span { display: none; }
.mit-unterebene .ebene1-fuss .nutzername { display: none; }

.hilfe-karte {
  display: block; text-decoration: none;
}
.hilfe-karte:hover { border-color: var(--border-active); }
.hilfe-karte strong { display: block; font-size: 14.5px; margin-bottom: 3px; }
.hilfe-karte .hinweis { display: block; }

.hilfe-leiste {
  display: flex; align-items: center; gap: 9px;
  margin-top: 30px; padding: 9px 13px;
  border: 1px solid var(--border-card); border-radius: 8px;
  color: var(--text-secondary); font-size: 12.5px;
  text-decoration: none;
}
.hilfe-leiste:hover { border-color: var(--border-active); color: var(--text-primary); }
.hilfe-leiste svg { width: 15px; height: 15px; flex: none; }
.hilfe-leiste .pfeil { margin-left: auto; color: var(--text-tertiary); }

.hilfe-artikel ul, .hilfe-artikel ol { padding-left: 1.3rem; }
.hilfe-artikel li { margin: 0.3rem 0; }
.hilfe-artikel p, .hilfe-artikel li { max-width: 560px; }

.ebene2 {
  width: 208px; flex: none;
  background: var(--bg-nav);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
}
.ebene2-kopf {
  height: 52px; flex: none;
  display: flex; align-items: center;
  padding: 0 14px; border-bottom: 1px solid var(--border);
  font-weight: 600; font-size: 13.5px;
}
.ebene2-liste { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 10px 9px; }
.ebene2 .nav-eintrag { height: 32px; padding: 0 12px; }

.hauptbereich { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  height: 52px; flex: none;
  display: flex; align-items: center; gap: 10px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
}
.topbar .verlauf { display: flex; gap: 2px; }
.topbar .verlauf button {
  all: unset; width: 26px; height: 26px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary); cursor: pointer;
}
.topbar .verlauf button:hover { background: var(--surface-hover); color: var(--text-primary); }
.topbar .verlauf svg { width: 15px; height: 15px; }
.topbar .trenner { width: 1px; height: 18px; background: var(--border); }
.brotkrumen { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brotkrumen .eltern { color: var(--text-tertiary); }
.brotkrumen .aktuell { font-weight: 600; }
.topbar .aktionen { margin-left: auto; display: flex; gap: 8px; }

.inhalt {
  flex: 1; overflow-y: auto;
}
.inhalt-spalte {
  max-width: 960px; margin: 0 auto; padding: 34px 32px 80px;
  animation: eintritt 260ms ease;
}
@keyframes eintritt {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Typografie ---------- */

h1 { font-size: 22px; font-weight: 600; letter-spacing: -.01em; margin: 0 0 14px; }
h2 { font-size: 17px; font-weight: 600; margin: 26px 0 10px; }
p  { text-wrap: pretty; }
.hinweis { color: var(--text-tertiary); font-size: 12.5px; }
.beschreibung { color: var(--text-secondary); font-size: 13px; line-height: 1.45; max-width: 520px; }

/* ---------- Komponenten ---------- */

table {
  width: 100%; border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border-card); border-radius: 12px;
  overflow: hidden;
}
th, td { text-align: left; padding: 9px 14px; border-bottom: 1px solid var(--border-card); }
tr:last-child td { border-bottom: none; }
th {
  font-size: 11px; font-weight: 500; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-tertiary);
  background: var(--surface-raised);
}

.karte {
  background: var(--surface);
  border: 1px solid var(--border-card); border-radius: 12px;
  padding: 14px 16px 16px; margin: 12px 0;
}

button, .knopf {
  font: inherit; height: 32px; padding: 0 14px;
  border-radius: 8px; cursor: pointer;
  background: var(--surface); color: var(--text-primary);
  border: 1px solid var(--border-input);
  display: inline-flex; align-items: center; gap: 7px;
  text-decoration: none;
}
button:hover, .knopf:hover { border-color: var(--border-active); background: var(--surface-hover); }
button.primaer, .knopf.primaer {
  background: var(--brand); color: var(--brand-fg); border: none;
}
button.primaer:hover, .knopf.primaer:hover { background: #2a52f3; }
button.schlicht { border-color: transparent; background: transparent; color: var(--text-secondary); }
button.schlicht:hover { background: var(--surface-hover); color: var(--text-primary); }

input[type=email], input[type=password], input[type=text], textarea, select {
  font: inherit; width: 100%;
  height: 38px; padding: 0 12px;
  background: var(--surface); color: var(--text-primary);
  border: 1px solid var(--border-input); border-radius: 9px;
  margin: 4px 0 14px;
}
textarea { height: auto; padding: 10px 12px; resize: vertical; }
input:focus, textarea:focus, select:focus, button:focus-visible, a:focus-visible {
  outline: none; border-color: var(--focus);
}
a:focus-visible, button:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
label { font-size: 12.5px; color: var(--text-secondary); }

.meldung {
  border: 1px solid var(--border-card); border-left: 3px solid var(--success);
  background: var(--surface); border-radius: 8px;
  padding: 10px 14px; margin: 0 0 16px;
}
.meldung.fehler { border-left-color: var(--danger); }

.krone {
  width: 13px; height: 13px; flex: none;
  color: var(--text-tertiary);
  vertical-align: -2px; margin-left: 6px;
}
.nav-eintrag .krone { margin-left: auto; }

.aktiv-marke {
  display: inline-block; background: var(--surface-active);
  border: 1px solid var(--border-active); border-radius: 5px;
  padding: 1px 8px; font-size: 11.5px; font-weight: 600;
}

pre.protokoll {
  background: var(--surface); border: 1px solid var(--border-card);
  border-radius: 12px; padding: 12px 14px; overflow-x: auto;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 11px; line-height: 1.7; color: var(--text-secondary);
}

.warnwert { color: var(--warning); font-weight: 600; }
strong.problem { color: var(--danger); }

/* ---------- Leerzustand (Platzhalterbereiche) ---------- */

.leer {
  min-height: 46vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
}
.leer .skizze { opacity: .5; margin-bottom: 18px; color: var(--text-tertiary); }
.leer h1 { font-size: 17px; margin: 0 0 6px; }
.leer p { margin: 0 0 4px; }
.leer .stufe {
  margin-top: 14px; font-size: 11.5px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-tertiary);
}

/* ---------- Anmeldeseite (ohne Schale) ---------- */

.anmeldung {
  min-height: 100vh; display: grid; place-items: center; padding: 1.5rem;
}
.anmeldung .karte { width: 100%; max-width: 340px; padding: 22px 22px 20px; }
.anmeldung .marke {
  font-weight: 600; letter-spacing: .08em; font-size: 12.5px;
  margin-bottom: 18px; color: var(--text-secondary);
}
.anmeldung button { width: 100%; justify-content: center; height: 36px; }

/* ---------- Schmale Bildschirme ---------- */

@media (max-width: 760px) {
  .ebene1 { width: 52px; }
  .ebene1 .nav-gruppe-titel { opacity: 0; }
  .ebene1-fuss .nutzername { display: none; }
  .ebene1 .nav-eintrag span, .ebene1-fuss button span { display: none; }
  .ebene1 .nav-eintrag, .ebene1-fuss button { padding: 0; gap: 0; justify-content: center; }
  .ebene1-kopf span { display: none; }
  .ebene1-kopf { justify-content: center; padding: 0; }
  .ebene1-kopf::before { content: "N"; }
  .ebene2 { width: 170px; }
  .inhalt-spalte { padding: 20px 16px 60px; }
  th.nebensache, td.nebensache { display: none; }
}