/* stil.css — Struktur und Bauteile nach design.md Teil A.
 * Kein Farbwert hier: alles kommt aus tokens.css. */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg-1);
  color: var(--text-200);
  font-family: var(--font);
  font-size: var(--fs-md);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* --- Sprunglink zum Inhalt (A12) --- */
.sprunglink {
  position: absolute; left: var(--space-md); top: -100px;
  background: var(--action); color: var(--on-action);
  padding: var(--space-sm) var(--space-md); border-radius: var(--r-sm);
  z-index: 10; transition: top var(--t-fast) var(--ease);
}
.sprunglink:focus { top: var(--space-md); }

/* --- Grundgeruest --- */
.seite { max-width: var(--container); margin: 0 auto; padding: var(--space-lg) var(--space-md) var(--space-2xl); }

.kopf {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-md); flex-wrap: wrap;
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: var(--space-xl);
}

h1 { font-size: var(--fs-2xl); line-height: 1.15; letter-spacing: -.02em; color: var(--text-100); margin: 0; font-weight: 700; }
h2 { font-size: var(--fs-xl); line-height: 1.2; letter-spacing: -.01em; color: var(--text-100); margin: 0 0 var(--space-sm); font-weight: 700; }
h3 { font-size: var(--fs-lg); line-height: 1.25; color: var(--text-100); margin: 0 0 var(--space-xs); font-weight: 700; }
p  { margin: 0 0 var(--space-md); max-width: var(--reading); }
p:last-child { margin-bottom: 0; }

.leise      { color: var(--text-400); font-size: var(--fs-sm); }
.sehr-leise { color: var(--text-500); font-size: var(--fs-sm); } /* traegt nie Information (A12) */

/* --- Karte --- */
.karte {
  background: var(--bg-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow);
}
.karte + .karte { margin-top: var(--space-lg); }

/* --- Buttons: drei Stufen, vier Zustaende (A8) --- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-sm);
  min-height: 44px; padding: 0 var(--space-lg);
  border-radius: var(--r-md); border: 1px solid transparent;
  font: inherit; font-weight: 500; line-height: 1;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.knopf--primaer   { background: var(--action); color: var(--on-action); font-size: var(--fs-md); }
.knopf--primaer:hover:not(:disabled)   { background: var(--action-hover); }
.knopf--primaer:active:not(:disabled)  { background: var(--action-hover); transform: translateY(1px); }

.knopf--sekundaer  { background: transparent; color: var(--action); border-color: var(--border-strong); }
.knopf--sekundaer:hover:not(:disabled)  { background: var(--bg-3); border-color: var(--action); }
.knopf--sekundaer:active:not(:disabled) { background: var(--bg-4); transform: translateY(1px); }

.knopf--tertiaer   { background: transparent; color: var(--action); padding: 0 var(--space-sm); }
.knopf--tertiaer:hover:not(:disabled)   { text-decoration: underline; }

.knopf:disabled { opacity: .45; cursor: not-allowed; }

:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 3px; border-radius: var(--r-sm); }

/* --- Felder --- */
.feld-gruppe { display: flex; flex-direction: column; gap: var(--space-xs); margin-bottom: var(--space-md); }
.feld-gruppe label { font-size: var(--fs-sm); font-weight: 500; color: var(--text-200); }
.feld-gruppe .hinweis { font-size: var(--fs-sm); color: var(--text-400); margin-top: var(--space-xs); }

input[type="text"], input[type="password"], textarea, select {
  width: 100%; min-height: 44px;
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-2); color: var(--text-100);
  border: 1px solid var(--border-strong); border-radius: var(--r-md);
  font: inherit;
  transition: border-color var(--t-fast) var(--ease);
}
input:hover:not(:disabled), textarea:hover:not(:disabled) { border-color: var(--text-400); }
input:disabled, textarea:disabled { opacity: .5; cursor: not-allowed; }
textarea { min-height: 120px; resize: vertical; line-height: 1.55; }
input[type="password"] { font-family: var(--mono); letter-spacing: .05em; }

/* --- Badge: Statuslabel, nie klickbar (A8) --- */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  padding: 2px var(--space-sm);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 400; line-height: 1.6;
  background: var(--bg-3); color: var(--text-300);
  cursor: default;
}
.badge--ok    { background: color-mix(in srgb, var(--ok) 12%, var(--bg-2)); color: var(--ok); }
.badge--warn  { background: color-mix(in srgb, var(--warn) 12%, var(--bg-2)); color: var(--warn); }
.badge--fehler{ background: color-mix(in srgb, var(--error) 12%, var(--bg-2)); color: var(--error); }

/* --- Die fuenf Gesichter (A9) --- */
.zustand { padding: var(--space-xl) var(--space-md); text-align: center; }
.zustand h3 { margin-bottom: var(--space-sm); }
.zustand p  { margin-left: auto; margin-right: auto; color: var(--text-300); }
.zustand .knopf { margin-top: var(--space-md); }

.meldung {
  display: flex; gap: var(--space-sm); align-items: flex-start;
  padding: var(--space-md);
  border: 1px solid var(--border-soft); border-left-width: 3px;
  border-radius: var(--r-md);
  background: var(--bg-1);
  margin-bottom: var(--space-md);
}
.meldung--fehler { border-left-color: var(--error); background: color-mix(in srgb, var(--error) 6%, var(--bg-2)); }
.meldung--ok     { border-left-color: var(--ok);    background: color-mix(in srgb, var(--ok) 6%, var(--bg-2)); }
.meldung--warn   { border-left-color: var(--warn);  background: color-mix(in srgb, var(--warn) 6%, var(--bg-2)); }
.meldung p { margin: 0; }
.meldung strong { color: var(--text-100); display: block; }

.platzhalter { /* Laedt-Zustand: Platz ist reserviert, nichts springt */
  background: linear-gradient(90deg, var(--bg-3) 25%, var(--bg-4) 50%, var(--bg-3) 75%);
  background-size: 200% 100%;
  animation: schimmer 1.4s infinite linear;
  border-radius: var(--r-sm);
  height: 1em; margin-bottom: var(--space-sm);
}
@keyframes schimmer { to { background-position: -200% 0; } }

/* --- Fusszeile: Datensparsamkeit sichtbar (Regel 10) --- */
.fusszeile {
  margin-top: var(--space-2xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-soft);
  font-size: var(--fs-sm); color: var(--text-400);
}
.fusszeile p { max-width: var(--reading); }

.zeile { display: flex; gap: var(--space-md); align-items: center; flex-wrap: wrap; }
.trenner { height: 1px; background: var(--border-soft); border: 0; margin: var(--space-lg) 0; }
[hidden] { display: none !important; }

/* --- Die Antwort: Zeilenlaenge begrenzt (A5), Platz nach oben --- */
#antwort-bereich:not(.zustand) {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border-soft);
  max-width: var(--reading);
  white-space: pre-wrap;
  overflow-wrap: anywhere;   /* lange Woerter brechen um (A9, Extremfall) */
  color: var(--text-200);
}

/* ===== Wissensstafette ===== */

/* --- Tabs: eine zusammenhaengende Leiste (A8) --- */
.tabs {
  display: inline-flex; gap: 2px;
  padding: 3px;
  background: var(--bg-3);
  border-radius: var(--r-md);
  margin-bottom: var(--space-lg);
}
.tab {
  min-height: 40px; padding: 0 var(--space-lg);
  border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--text-300);
  font: inherit; font-weight: 500; font-size: var(--fs-sm);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.tab:hover:not([aria-selected="true"]) { color: var(--text-100); background: var(--bg-4); }
.tab[aria-selected="true"] { background: var(--bg-2); color: var(--text-100); box-shadow: 0 1px 3px rgba(0,0,0,.08); }

.abschnitt { margin: var(--space-xl) 0 var(--space-md); font-size: var(--fs-lg); }

/* --- Kennzahl --- */
.kennzahl { display: grid; gap: var(--space-lg); }
.grosszahl {
  font-size: 64px; line-height: 1; font-weight: 700;
  color: var(--text-100); letter-spacing: -.03em;
  margin: var(--space-xs) 0;
  font-variant-numeric: tabular-nums;
}
.grosszahl span { transition: none; }

/* --- Fortschrittsbalken --- */
.balken {
  height: 8px; background: var(--bg-3);
  border-radius: var(--r-pill); overflow: hidden;
}
.balken--gross { height: 14px; }
.balken-fuellung {
  height: 100%; background: var(--action);
  border-radius: var(--r-pill);
  transition: width .6s var(--ease);
}

/* --- Personenliste --- */
.person {
  background: var(--bg-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  margin-bottom: var(--space-md);
  overflow: hidden;
}
.person-kopf {
  display: grid; grid-template-columns: 1fr auto;
  gap: var(--space-md); align-items: center;
  width: 100%; min-height: 44px;
  padding: var(--space-md) var(--space-lg);
  background: transparent; border: 0; text-align: left;
  font: inherit; color: inherit; cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.person-kopf:hover { background: var(--bg-1); }
.person-name { font-weight: 700; color: var(--text-100); font-size: var(--fs-md); }
.person-rolle { color: var(--text-400); font-size: var(--fs-sm); }
.person-zahlen { text-align: right; display: flex; align-items: center; gap: var(--space-md); }
.person-anteil {
  font-weight: 700; color: var(--text-100);
  font-variant-numeric: tabular-nums; min-width: 3.5ch;
}
.person .balken { margin: 0 var(--space-lg) var(--space-md); }
.person-felder { padding: 0 var(--space-lg) var(--space-md); }

.feld-zeile {
  display: grid; grid-template-columns: 1fr 120px auto;
  gap: var(--space-md); align-items: center;
  width: 100%; min-height: 44px;
  padding: var(--space-sm) var(--space-md);
  margin-top: var(--space-xs);
  background: var(--bg-1); border: 1px solid transparent;
  border-radius: var(--r-md);
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.feld-zeile:hover { background: var(--bg-3); border-color: var(--action); }
.feld-thema { font-weight: 500; color: var(--text-100); font-size: var(--fs-sm); }
.feld-worum { color: var(--text-400); font-size: var(--fs-xs); }
.feld-zahl { color: var(--text-300); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }

/* --- Gespraech --- */
.gespraech-kopf { display: grid; gap: var(--space-md); }
#verlauf { margin-bottom: var(--space-lg); }
#verlauf:empty { display: none; }

.blase { margin-bottom: var(--space-lg); max-width: var(--reading); }
.blase-wer {
  font-size: var(--fs-xs); font-weight: 500;
  color: var(--text-400); text-transform: uppercase;
  letter-spacing: .06em; margin-bottom: var(--space-xs);
}
.blase-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.blase--system .blase-text {
  font-size: var(--fs-lg); line-height: 1.4; color: var(--text-100); font-weight: 500;
}
.blase--person .blase-text {
  color: var(--text-300);
  padding-left: var(--space-md);
  border-left: 2px solid var(--border-soft);
}

/* --- Ernte: Vorschlagskarten --- */
.vorschlag {
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  padding: var(--space-md);
  margin-top: var(--space-md);
  background: var(--bg-1);
  transition: opacity var(--t) var(--ease), border-color var(--t-fast) var(--ease);
}
.vorschlag--erledigt { opacity: .55; }
.vorschlag-frage { font-weight: 700; color: var(--text-100); margin-bottom: var(--space-xs); }
.vorschlag-wissen { color: var(--text-200); margin-bottom: var(--space-sm); }
.vorschlag-warum {
  color: var(--text-300); font-size: var(--fs-sm);
  padding-left: var(--space-md); border-left: 2px solid var(--action);
  margin-bottom: var(--space-md);
}
.vorschlag .zeile { margin-top: var(--space-sm); }
.luecken { margin: 0; padding-left: var(--space-lg); color: var(--text-300); font-size: var(--fs-sm); }
.luecken li { margin-bottom: var(--space-xs); }

/* --- Nachschlagen --- */
.antwort-text {
  font-size: var(--fs-lg); line-height: 1.5; color: var(--text-100);
  max-width: var(--reading); white-space: pre-wrap; overflow-wrap: anywhere;
  margin-bottom: var(--space-lg);
}
.fundstelle {
  border-top: 1px solid var(--border-soft);
  padding: var(--space-md) 0;
}
.fundstelle:last-child { padding-bottom: 0; }
.fundstelle-kopf {
  display: flex; gap: var(--space-sm); align-items: baseline;
  flex-wrap: wrap; margin-bottom: var(--space-xs);
}
.fundstelle-nr {
  font-family: var(--mono); font-size: var(--fs-xs);
  color: var(--on-action); background: var(--action);
  border-radius: var(--r-sm); padding: 1px 6px;
}
.fundstelle-wer { font-weight: 500; color: var(--text-100); font-size: var(--fs-sm); }
.fundstelle-woher { color: var(--text-400); font-size: var(--fs-sm); }
.fundstelle-text { color: var(--text-300); font-size: var(--fs-sm); max-width: var(--reading); }

@media (min-width: 720px) {
  .kennzahl { grid-template-columns: 1fr 2fr; align-items: center; }
  .gespraech-kopf { grid-template-columns: 1fr 200px; align-items: center; }
}