/* Kruko – schlichtes, ruhiges Design, mobil brauchbar. */
:root {
  --blau: #1f4e79;
  --blau-hell: #eaf1f8;
  --rand: #d8dee6;
  --text: #22303c;
  --grau: #6b7a89;
  --gruen: #2e7d32;
  --rot: #b3261e;
  --hintergrund: #f5f7fa;
}
* { box-sizing: border-box; }
body {
  margin: 0; color: var(--text); background: var(--hintergrund);
  font: 16px/1.5 -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
h2 { margin: 0 0 6px; font-size: 1.35rem; }
h3 { margin: 0 0 8px; font-size: 1.05rem; }
code { background: var(--blau-hell); padding: 1px 5px; border-radius: 4px; font-size: .85em; }

/* Kopf + Tabs */
.kopf { background: var(--blau); color: #fff; position: sticky; top: 0; z-index: 10; }
.kopf-innen {
  max-width: 1000px; margin: 0 auto; padding: 10px 16px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.marke { font-weight: 700; font-size: 1.15rem; letter-spacing: .5px; }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.tabs button {
  background: transparent; border: 0; color: #d7e3f0; padding: 8px 12px;
  border-radius: 6px; cursor: pointer; font-size: .95rem;
}
.tabs button.aktiv { background: rgba(255,255,255,.18); color: #fff; font-weight: 600; }
.logout { margin-left: auto; color: #d7e3f0; font-size: .9rem; text-decoration: none; }

.inhalt { max-width: 1000px; margin: 0 auto; padding: 20px 16px 60px; }
.versteckt { display: none !important; }
.erklaerung { color: var(--grau); margin: 0 0 16px; }
.hinweis { color: var(--grau); font-size: .88rem; margin: 4px 0; }
.abschnitt { margin-top: 28px; }

/* Karten + Listen */
.karte {
  background: #fff; border: 1px solid var(--rand); border-radius: 10px;
  padding: 16px; margin-bottom: 16px;
}
.liste { display: flex; flex-direction: column; gap: 10px; }
.eintrag { background: #fff; border: 1px solid var(--rand); border-radius: 10px; padding: 12px 14px; }
.eintrag.inaktiv { opacity: .55; }
.eintrag-kopf { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.eintrag-kopf .titel { font-weight: 600; }
.eintrag-kopf .meta { color: var(--grau); font-size: .82rem; }
.eintrag .inhalt-text { margin: 6px 0; white-space: pre-wrap; }
.etikett {
  font-size: .75rem; padding: 1px 8px; border-radius: 999px;
  background: var(--blau-hell); color: var(--blau); white-space: nowrap;
}
.etikett.grenze, .etikett.korrektur { background: #fdecea; color: var(--rot); }
.etikett.regel { background: #e8f5e9; color: var(--gruen); }

/* Formulare */
textarea, input[type=text], input[type=password] {
  width: 100%; padding: 10px 12px; border: 1px solid var(--rand);
  border-radius: 8px; font: inherit; background: #fff;
}
textarea { resize: vertical; }
button { font: inherit; cursor: pointer; border-radius: 8px; }
button.primaer {
  background: var(--blau); color: #fff; border: 0; padding: 9px 18px;
}
button.primaer:disabled { opacity: .5; cursor: wait; }
button.sekundaer {
  background: #fff; color: var(--blau); border: 1px solid var(--rand); padding: 9px 14px;
}
button.klein { padding: 4px 10px; font-size: .82rem; }
button.gefahr { color: var(--rot); border-color: #e6c4c2; background: #fff; border-width: 1px; border-style: solid; }
.knopfzeile { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

/* Setup */
.fortschritt { background: #e2e8ef; border-radius: 999px; height: 10px; overflow: hidden; margin: 8px 0 4px; }
.balken { background: var(--gruen); height: 100%; width: 0; transition: width .3s; }
.frage-bereich { color: var(--blau); font-size: .8rem; text-transform: uppercase; letter-spacing: .5px; margin: 0 0 4px; }

/* Chat */
.chat-verlauf {
  background: #fff; border: 1px solid var(--rand); border-radius: 10px;
  padding: 14px; height: 55vh; min-height: 260px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px;
}
.blase { max-width: 85%; padding: 9px 13px; border-radius: 12px; white-space: pre-wrap; }
.blase.ich { align-self: flex-end; background: var(--blau); color: #fff; border-bottom-right-radius: 4px; }
.blase.ki { align-self: flex-start; background: var(--blau-hell); border-bottom-left-radius: 4px; }
.blase.warten { color: var(--grau); font-style: italic; }
.blase.fehler-blase { align-self: center; background: #fdecea; color: var(--rot); font-size: .9rem; }
.chat-leer { color: var(--grau); text-align: center; margin: auto; }
.chat-eingabe { display: flex; gap: 8px; margin-top: 10px; align-items: flex-end; }
.chat-eingabe textarea { flex: 1; }

/* Testbereich */
.test-layout { display: grid; grid-template-columns: 240px 1fr; gap: 16px; }
.test-sitzungen .eintrag { cursor: pointer; padding: 8px 12px; }
.test-sitzungen .eintrag.gewaehlt { border-color: var(--blau); background: var(--blau-hell); }
.test-sitzungen button { width: 100%; margin-bottom: 10px; }

/* Status + Meldungen */
.status-liste { margin: 0; padding-left: 4px; list-style: none; }
.status-liste li { margin: 4px 0; }
.fehler { color: var(--rot); }

/* Guthaben-Anzeige */
.guthaben-zahlen { display: flex; gap: 32px; flex-wrap: wrap; margin: 4px 0 10px; }
.guthaben-block { display: flex; flex-direction: column; }
.guthaben-gross { font-size: 2rem; font-weight: 700; color: var(--blau); line-height: 1.2; }
.guthaben-gross.guthaben-warnung { color: var(--rot); }
.guthaben-label { color: var(--grau); font-size: .85rem; }
.balken-rot { background: var(--rot); }
.meldung {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: var(--text); color: #fff; padding: 10px 18px; border-radius: 8px;
  font-size: .9rem; z-index: 50;
}

/* Login */
.login-seite { display: flex; min-height: 100vh; align-items: center; justify-content: center; }
.login-box { background: #fff; border: 1px solid var(--rand); border-radius: 12px; padding: 28px; width: 340px; }
.login-box h1 { margin: 0; color: var(--blau); }
.login-box .untertitel { color: var(--grau); margin: 4px 0 18px; font-size: .9rem; }
.login-box label { display: block; margin-bottom: 6px; font-size: .9rem; }
.login-box button { width: 100%; margin-top: 12px; background: var(--blau); color: #fff; border: 0; padding: 10px; }

/* Mobil */
@media (max-width: 720px) {
  .test-layout { grid-template-columns: 1fr; }
  .chat-verlauf { height: 48vh; }
  .kopf-innen { gap: 8px; }
  .logout { margin-left: 0; }
  .blase { max-width: 95%; }
}