/* AI-generated: PC-30 — Designsystem-Umsetzung (Entscheid IV, Teilstory A):
   Komponenten Karte/Badge/Ampel/Liste/Filter auf tokens.css, mobile-first,
   ruhiges Executive-Werkzeug. Bestand (Chat PC-07/19, Records PC-08, Login PC-16/27)
   auf das System umgestellt — Verhalten unverändert. */

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--schrift);
  background: var(--farbe-grund);
  color: var(--farbe-text);
  display: flex;
  flex-direction: column;
  height: 100vh;
  /* PC-16: dvh — mobile Adressleisten-Korrektur (iPad-Befund 12.07.) */
  height: 100dvh;
  padding-left: var(--safe-links);
  padding-right: var(--safe-rechts);
}

/* --- Kopfzeile + Navigation ------------------------------------------------ */

header {
  display: flex;
  gap: var(--abstand-xs);
  align-items: center;
  padding: calc(var(--abstand-xs) + var(--safe-oben)) var(--abstand-m) var(--abstand-xs);
  border-bottom: 2px solid var(--farbe-primaer);
  flex-wrap: wrap;
  background: var(--farbe-flaeche);
}
header h1 {
  font-size: var(--text-m);
  font-weight: var(--gewicht-halbfett);
  margin: 0 auto 0 0;
  color: var(--farbe-primaer);
}

nav.tabs { display: flex; gap: var(--abstand-2xs); flex-wrap: wrap; }
nav.tabs button {
  background: transparent;
  color: var(--farbe-text);
  border: 1px solid transparent;
  border-radius: var(--radius-rund);
  min-height: var(--touch-min);
  padding: 0 var(--abstand-m);
}
nav.tabs button.aktiv {
  background: var(--farbe-primaer);
  color: var(--farbe-text-invers);
}
nav.tabs button:not(.aktiv):hover { border-color: var(--farbe-rand); }

/* --- Basis-Elemente --------------------------------------------------------- */

select, input[type=text], input[type=password], textarea {
  padding: var(--abstand-xs) var(--abstand-s);
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius-s);
  font: inherit;
  color: inherit;
  background: var(--farbe-flaeche);
  min-height: var(--touch-min); /* Touch + Diktat-freundlich (Standard-Textfelder) */
}
textarea { min-height: 4.5rem; resize: vertical; }

button {
  padding: var(--abstand-xs) var(--abstand-m);
  border: 0;
  border-radius: var(--radius-s);
  font: inherit;
  cursor: pointer;
  background: var(--farbe-primaer);
  color: var(--farbe-text-invers);
  min-height: var(--touch-min);
}
button:disabled { background: var(--ampel-neutral); cursor: wait; }
button.sekundaer {
  background: var(--farbe-flaeche);
  color: var(--farbe-primaer);
  border: 1px solid var(--farbe-primaer);
}

main { flex: 1; overflow-y: auto; padding: var(--abstand-m); }

footer {
  display: flex;
  gap: var(--abstand-xs);
  padding: var(--abstand-s) var(--abstand-m) calc(var(--abstand-s) + var(--safe-unten));
  border-top: 1px solid var(--farbe-rand);
  background: var(--farbe-flaeche);
}
footer input { flex: 1; }

/* --- Komponente: Karte ------------------------------------------------------ */

.karte {
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius-m);
  box-shadow: var(--schatten-karte);
  padding: var(--abstand-m);
}
.karte > h2 {
  margin: 0 0 var(--abstand-xs);
  font-size: var(--text-s);
  font-weight: var(--gewicht-halbfett);
  color: var(--farbe-text-leise);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.karte .kennzahl {
  font-size: var(--text-xl);
  font-weight: var(--gewicht-halbfett);
  line-height: 1.15;
}
.karte .neben { font-size: var(--text-s); color: var(--farbe-text-leise); }
.karte.platzhalter { opacity: .6; border-style: dashed; box-shadow: none; }

/* --- Komponente: Badge ------------------------------------------------------ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-2xs);
  font-size: var(--text-xs);
  font-weight: var(--gewicht-halbfett);
  border-radius: var(--radius-rund);
  padding: .15rem var(--abstand-xs);
  background: color-mix(in srgb, var(--farbe-primaer) 12%, transparent);
  color: var(--farbe-primaer);
  white-space: nowrap;
}
.badge.akzent {
  background: color-mix(in srgb, var(--farbe-akzent) 25%, transparent);
  color: var(--farbe-text);
}

/* --- Komponente: Ampel ------------------------------------------------------ */

.ampel {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-xs);
  font-size: var(--text-s);
  min-height: 28px;
}
.ampel::before {
  content: "";
  width: .7rem;
  height: .7rem;
  border-radius: var(--radius-rund);
  background: var(--ampel-neutral);
  flex: none;
}
.ampel.ok::before { background: var(--ampel-ok); }
.ampel.warn::before { background: var(--ampel-warn); }
.ampel.kritisch::before { background: var(--ampel-kritisch); }

/* --- Komponente: Liste ------------------------------------------------------ */

.liste { display: flex; flex-direction: column; gap: 0; }
.liste .zeile {
  display: flex;
  gap: var(--abstand-xs);
  align-items: baseline;
  padding: var(--abstand-xs) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--farbe-rand) 45%, transparent);
  font-size: var(--text-s);
  flex-wrap: wrap;
}
.liste .zeile:last-child { border-bottom: 0; }
.liste .zeile .zeit { color: var(--farbe-text-leise); font-size: var(--text-xs); flex: none; }

/* --- Komponente: Filter(-Chips) --------------------------------------------- */

.filter { display: flex; gap: var(--abstand-2xs); flex-wrap: wrap; }
.filter button {
  background: var(--farbe-flaeche);
  color: var(--farbe-text);
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius-rund);
  font-size: var(--text-s);
  padding: 0 var(--abstand-s);
}
.filter button.aktiv {
  background: var(--farbe-primaer);
  border-color: var(--farbe-primaer);
  color: var(--farbe-text-invers);
}

/* --- Dashboard (PC-30) ------------------------------------------------------ */

#dashboard .kacheln {
  display: grid;
  grid-template-columns: 1fr;           /* mobile-first */
  gap: var(--abstand-s);
  max-width: 64rem;
  margin: 0 auto;
}
@media (min-width: 640px) { #dashboard .kacheln { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { #dashboard .kacheln { grid-template-columns: 1fr 1fr 1fr; } }

#dashboard .zustaende { display: flex; flex-direction: column; gap: var(--abstand-2xs); }

.balken { display: flex; flex-direction: column; gap: var(--abstand-2xs); }
.balken .reihe { display: grid; grid-template-columns: 6.5rem 1fr 2.5rem; gap: var(--abstand-xs); align-items: center; font-size: var(--text-s); }
.balken .spur { background: color-mix(in srgb, var(--farbe-rand) 35%, transparent); border-radius: var(--radius-rund); height: .6rem; overflow: hidden; }
.balken .wert { background: var(--farbe-primaer); height: 100%; border-radius: var(--radius-rund); }

.fortschritt { background: color-mix(in srgb, var(--farbe-rand) 35%, transparent); border-radius: var(--radius-rund); height: .8rem; overflow: hidden; margin: var(--abstand-xs) 0; }
.fortschritt .wert { background: var(--farbe-primaer); height: 100%; width: 0; border-radius: var(--radius-rund); transition: width .3s; }

/* --- Protokoll + Lauf-Ansicht (PC-31; CSP-fest: keine Inline-Styles) --------- */

#dashboard .kacheln.einspaltig, #protokoll .kacheln.einspaltig { grid-template-columns: 1fr; }
.karte h2.abschnitt { margin-top: var(--abstand-m); }
.liste .zeile.klickbar { cursor: pointer; }
.liste .zeile.klickbar:hover { background: color-mix(in srgb, var(--farbe-primaer) 6%, transparent); }
.lauf-kopf { display: flex; gap: var(--abstand-xs); flex-wrap: wrap; align-items: center; margin: var(--abstand-xs) 0; }
.record-auszug {
  white-space: pre-wrap;
  font-size: var(--text-s);
  background: var(--farbe-grund);
  padding: var(--abstand-s);
  border-radius: var(--radius-s);
  border-left: 4px solid var(--farbe-primaer);
  margin-top: var(--abstand-xs);
}

/* --- Chat (Bestand, auf Tokens umgestellt) ----------------------------------- */

main#chat { padding: var(--abstand-m); }
.msg {
  max-width: 52rem;
  margin: 0 auto var(--abstand-s);
  padding: var(--abstand-s) var(--abstand-m);
  border-radius: var(--radius-m);
}
.msg.user { background: var(--farbe-primaer); color: var(--farbe-text-invers); }
.msg.coach { background: var(--farbe-flaeche); border: 1px solid var(--farbe-rand); white-space: pre-wrap; }
.msg.fehler { border-left: 4px solid var(--farbe-akzent); background: var(--farbe-flaeche); }
.msg .wer { font-size: var(--text-xs); opacity: .75; margin-bottom: var(--abstand-2xs); }

/* --- Records (Bestand, auf Tokens umgestellt) -------------------------------- */

header label { font-size: var(--text-s); display: flex; align-items: center; gap: var(--abstand-2xs); }
main#records { padding: var(--abstand-m); }
.metrik {
  max-width: 52rem;
  margin: 0 auto var(--abstand-m);
  padding: var(--abstand-s) var(--abstand-m);
  border-radius: var(--radius-m);
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-rand);
  border-left: 4px solid var(--farbe-primaer);
}
.record {
  max-width: 52rem;
  margin: 0 auto var(--abstand-s);
  padding: var(--abstand-s) var(--abstand-m);
  border-radius: var(--radius-m);
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-rand);
}
.record.offen { border-left: 4px solid var(--farbe-akzent); }
.record .kopf { display: flex; gap: var(--abstand-xs); align-items: baseline; flex-wrap: wrap; }
.record .status { font-size: var(--text-xs); opacity: .75; }
.record form { display: flex; flex-direction: column; gap: var(--abstand-xs); margin-top: var(--abstand-xs); }
.record pre {
  white-space: pre-wrap;
  font-size: var(--text-xs);
  background: var(--farbe-grund);
  padding: var(--abstand-xs);
  border-radius: var(--radius-s);
  overflow-x: auto;
}
.record .zeile { display: flex; gap: var(--abstand-xs); align-items: center; flex-wrap: wrap; }

/* --- Login (Bestand, auf Tokens umgestellt) ---------------------------------- */

.login-box {
  max-width: 22rem;
  margin: 18vh auto;
  padding: var(--abstand-xl);
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius-m);
  box-shadow: var(--schatten-karte);
  background: var(--farbe-flaeche);
  display: flex;
  flex-direction: column;
  gap: var(--abstand-s);
  text-align: center;
}
.hinweis { font-size: var(--text-xs); color: var(--farbe-text-leise); }