/* BotC Script Rater — dunkles, zurückhaltendes Theme in Anlehnung an Material.
   Flächen statt Rahmen, ein 4-px-Raster, eine Akzentfarbe. Farbigkeit bleibt
   den Charakter-Icons und der Einstufung vorbehalten. */

:root {
  /* Flächen — von hinten nach vorn heller, dadurch braucht es kaum Rahmen */
  --bg: #0e0e11;
  --surface: #16161b;
  --surface-2: #1d1d23;
  --surface-3: #26262e;
  --outline: #33333d;
  --outline-soft: #24242b;

  --on: #e7e5ea;
  --on-muted: #a3a0aa;
  --on-faint: #74717b;

  --primary: #aec4ff;
  --primary-2: #c9b3ff;   /* violetter Ton, zweite Farbe des Widow-Zeichens */
  --primary-bg: #171f33;

  --green: #7fdba0;
  --green-bg: #14251b;
  --yellow: #f0c85f;
  --yellow-bg: #2a2313;
  --red: #ff9d92;
  --red-bg: #2c1a19;

  --r-s: 8px;
  --r-m: 14px;
  --r-l: 22px;
  --r-full: 999px;

  --pad: clamp(16px, 4vw, 32px);
  --maxw: 1080px;
}

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

/* Ohne das schlägt jedes display: grid/flex das [hidden] des Browsers. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--on);
  font-family: Roboto, "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { margin: 0; font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; }
h1 { font-size: clamp(1.6rem, 4vw, 2.25rem); }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 12px; }

code {
  font-family: "Cascadia Mono", ui-monospace, Menlo, monospace;
  font-size: 0.9em;
  background: var(--surface-2);
  padding: 1px 6px;
  border-radius: 6px;
}

/* ── Rahmen ───────────────────────────────────────────────────────────── */

/* Läuft mit. Eine Zurück-Geste bringt einen auf dem Handy nicht zum Formular
   zurück, weil die Ergebnisseite über POST entsteht. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: background .2s, border-color .2s;
}

.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 12px var(--pad);
  transition: padding .2s;
}

/* Unterwegs bleibt nur die Marke stehen. Das Menü verschwindet mitsamt seiner
   Höhe, auf schmalen Fenstern spart das eine ganze Zeile. */
.site-header.is-compact {
  background: rgba(14, 14, 17, 0.82);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--outline-soft);
}

.site-header.is-compact .site-header-inner { padding-top: 7px; padding-bottom: 7px; }

.site-header nav {
  transition: opacity .18s, height .18s, margin .18s;
}

.site-header.is-compact nav {
  opacity: 0;
  visibility: hidden;
  height: 0;
  margin: 0;
  overflow: hidden;
}

.site-header.is-compact .brand-mark { width: 22px; height: 22px; }
.site-header.is-compact .brand-text { font-size: 0.95rem; }

.brand { display: flex; align-items: center; gap: 10px; color: var(--on); }
.brand:hover { text-decoration: none; }

/* Eigenes Zeichen für Widow. Bewusst kein Charakter-Artwork des Pandemonium
   Institute, damit die Seite nicht wie ein offizielles Angebot aussieht. */
.brand-mark {
  width: 26px;
  height: 26px;
  flex: none;
  color: var(--primary);
  overflow: visible;
}

.web-ring { opacity: 0.9; }
.web-spokes { color: var(--primary-2); opacity: 0.72; }
.brand:hover .web-spokes { opacity: 0.9; }

.brand-text { display: flex; align-items: baseline; gap: 7px; font-size: 1.05rem; }
.brand-platform { font-weight: 600; letter-spacing: -0.01em; }
.brand-sep { color: var(--on-faint); font-weight: 300; }
.brand-app { color: var(--on-muted); font-weight: 400; letter-spacing: -0.01em; }

.site-footer p + p { margin-top: 6px; }
.site-footer strong { color: var(--on-muted); font-weight: 500; }

.site-header nav { display: flex; gap: 4px; }

.site-header nav a {
  color: var(--on-muted);
  font-size: 0.9rem;
  padding: 8px 14px;
  border-radius: var(--r-full);
}

.site-header nav a:hover {
  background: var(--surface-2);
  color: var(--on);
  text-decoration: none;
}

/* Die Hauptaktion im Kopf, in den Farben des Widow-Zeichens. */
.site-header nav a.nav-cta {
  margin-left: 6px;
  padding: 9px 20px;
  color: #131a2c;
  font-weight: 600;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  box-shadow: 0 0 0 0 rgba(174, 196, 255, 0);
  transition: box-shadow .2s, filter .15s, transform .12s;
}

.site-header nav a.nav-cta:hover {
  color: #131a2c;
  filter: brightness(1.07);
  box-shadow: 0 0 0 4px rgba(174, 196, 255, 0.16);
}

.site-header nav a.nav-cta:active { transform: translateY(1px); }

main {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 8px var(--pad) 64px;
}

.site-footer {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 24px var(--pad) 40px;
  border-top: 1px solid var(--outline-soft);
  color: var(--on-faint);
  font-size: 0.8rem;
}

.site-footer p { margin: 0; max-width: 70ch; }
.site-footer a { color: var(--on-muted); }

/* ── Bausteine ────────────────────────────────────────────────────────── */

.hero { margin: 24px 0 32px; }
.hero-slim { margin-bottom: 24px; }

.lead {
  max-width: 62ch;
  color: var(--on-muted);
  font-size: 1.02rem;
  margin-top: 12px;
}

.section-intro, .hint {
  color: var(--on-faint);
  font-size: 0.85rem;
  max-width: 68ch;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: var(--r-full);
  font-size: 0.8rem;
  font-weight: 500;
  white-space: nowrap;
}

.lead-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

.chip-green  { background: var(--green-bg);  color: var(--green); }
.chip-yellow { background: var(--yellow-bg); color: var(--yellow); }
.chip-red    { background: var(--red-bg);    color: var(--red); }

.alert {
  background: var(--red-bg);
  color: var(--red);
  padding: 14px 16px;
  border-radius: var(--r-m);
  margin-bottom: 24px;
  font-size: 0.92rem;
}

.back { margin-top: 40px; }

.back a {
  display: inline-block;
  padding: 10px 22px;
  border-radius: var(--r-full);
  border: 1px solid var(--outline);
  color: var(--on-muted);
  font-size: 0.9rem;
  font-weight: 500;
  transition: background .15s, color .15s, border-color .15s;
}

.back a:hover {
  background: var(--surface-2);
  border-color: var(--primary);
  color: var(--on);
  text-decoration: none;
}

/* ── Formulare ────────────────────────────────────────────────────────── */

label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--on-muted);
  letter-spacing: 0.02em;
}

input, textarea, button { font: inherit; border-radius: var(--r-s); }

input[type=search], input[type=url], input[type=text], textarea {
  width: 100%;
  background: var(--surface-2);
  color: var(--on);
  border: 1px solid transparent;
  border-bottom: 1px solid var(--outline);
  padding: 12px 14px;
  border-radius: var(--r-s) var(--r-s) 4px 4px;
  transition: border-color .15s, background .15s;
}

input::placeholder, textarea::placeholder { color: var(--on-faint); }

input:focus, textarea:focus {
  outline: none;
  background: var(--surface-3);
  border-bottom-color: var(--primary);
}

textarea { resize: vertical; font-size: 0.9rem; line-height: 1.5; }

input[type=file] { width: 100%; color: var(--on-muted); font-size: 0.9rem; padding: 10px 0; }

input[type=file]::file-selector-button {
  font: inherit;
  background: var(--surface-3);
  color: var(--on);
  border: 0;
  padding: 8px 16px;
  margin-right: 12px;
  border-radius: var(--r-full);
  cursor: pointer;
}

/* Derselbe Verlauf wie beim Knopf im Kopf, damit alle Hauptaktionen gleich
   aussehen. */
button {
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #131a2c;
  border: 0;
  padding: 11px 24px;
  border-radius: var(--r-full);
  font-weight: 600;
  cursor: pointer;
  transition: filter .15s, box-shadow .2s, transform .12s;
  white-space: nowrap;
}

button:hover { filter: brightness(1.06); box-shadow: 0 0 0 4px rgba(174, 196, 255, 0.14); }
button:active { transform: translateY(1px); filter: brightness(0.96); }

.row { display: flex; gap: 8px; align-items: stretch; }
.row input { flex: 1; min-width: 0; }

form .hint { margin: 10px 0 0; }

/* ── Reiter auf der Startseite ────────────────────────────────────────── */

.tabs { background: var(--surface); border-radius: var(--r-l); overflow: hidden; }

.tab-bar {
  display: flex;
  border-bottom: 1px solid var(--outline-soft);
  padding: 0 8px;
  overflow-x: auto;
}

.tab {
  background: none;
  color: var(--on-muted);
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 14px 18px;
  font-size: 0.9rem;
  font-weight: 500;
}

.tab:hover { color: var(--on); filter: none; }
.tab.active { color: var(--primary); border-bottom-color: var(--primary); }

.panel { padding: 24px; }
.panel textarea { margin-bottom: 16px; }
.panel label + label { margin-top: 20px; }

/* ── Ablagefläche für Drag & Drop ─────────────────────────────────────── */

.dropzone {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  background: rgba(14, 14, 17, 0.85);
  pointer-events: none;
}

.dropzone span {
  border: 2px dashed var(--primary);
  border-radius: var(--r-l);
  padding: 28px 48px;
  color: var(--primary);
  font-size: 1.05rem;
  font-weight: 500;
}

/* ── Karten (Basis-Skripte) ───────────────────────────────────────────── */

.cards { margin-top: 40px; }
.cards h2 { margin-bottom: 16px; }

/* ── Verweiskarten auf der Startseite ─────────────────────────────────── */

.link-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 8px;
}

.link-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--surface);
  color: var(--on);
  padding: 20px 22px;
  border-radius: var(--r-m);
  transition: background .15s;
}

.link-card:hover { background: var(--surface-2); text-decoration: none; }
.link-card strong { font-weight: 500; }
.link-card strong::after { content: " →"; color: var(--primary); }
.link-card span { color: var(--on-faint); font-size: 0.85rem; }

/* ── Die drei Stufen ──────────────────────────────────────────────────── */

.levels { display: grid; gap: 8px; margin: 24px 0; }

.level {
  background: var(--surface);
  border-radius: var(--r-m);
  border-left: 3px solid var(--accent);
  padding: 20px 22px;
}

.level-green  { --accent: var(--green); }
.level-yellow { --accent: var(--yellow); }
.level-red    { --accent: var(--red); }

.level-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.level h2 { font-size: 1.05rem; }
.level p:last-child { margin-bottom: 0; }

/* ── Ablaufdiagramm ───────────────────────────────────────────────────── */

.flow { margin: 24px 0; }

.flow-step {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--surface);
  border-radius: var(--r-m);
  border-left: 3px solid var(--accent);
  padding: 18px 22px;
}

.flow-green  { --accent: var(--green); }
.flow-yellow { --accent: var(--yellow); }
.flow-red    { --accent: var(--red); }

.flow-q { margin: 0; flex: 1; font-size: 0.92rem; color: var(--on-muted); }
.flow-step .chip { flex: none; }

/* Der Übergang zwischen zwei Prüfungen, als Linie mit Beschriftung. */
.flow-else {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 6px 0 6px 22px;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-faint);
}

.flow-else::before {
  content: "";
  width: 1px;
  height: 22px;
  background: var(--outline);
  margin-left: 1px;
}

.doc-sub {
  margin: 24px 0 8px;
  font-size: 0.95rem;
  color: var(--on);
}

/* ── Suchergebnisse ───────────────────────────────────────────────────── */

.inline-search { display: flex; gap: 8px; max-width: 520px; margin-top: 16px; }
.inline-search input { flex: 1; min-width: 0; }

.result-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 4px; }

.result-item {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "name action"
    "meta action";
  gap: 2px 20px;
  align-items: center;
  background: var(--surface);
  color: var(--on);
  padding: 16px 20px;
  border-radius: var(--r-m);
  transition: background .15s;
}

.result-item:hover { background: var(--surface-2); text-decoration: none; }
.result-name { grid-area: name; font-weight: 500; }
.result-meta { grid-area: meta; color: var(--on-faint); font-size: 0.82rem; }

.result-go {
  grid-area: action;
  align-self: center;
  color: var(--primary);
  font-size: 0.85rem;
  font-weight: 500;
  white-space: nowrap;
}

/* ── Ergebnis: Einstufung ─────────────────────────────────────────────── */

/* Die Einstufung trägt die Box. Das Zeichen der Stufe liegt als großes,
   durchscheinendes Viereck im Hintergrund und läuft am Rand heraus. */
.verdict {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(115% 150% at 0% 40%, var(--accent-soft) 0%, transparent 62%),
    var(--surface);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-l);
  padding: clamp(24px, 4vw, 36px) clamp(24px, 4vw, 38px);
  margin: 16px 0 28px;
}

.verdict::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -14%;
  top: 50%;
  width: 340px;
  height: 340px;
  transform: translateY(-50%) rotate(14deg);
  border-radius: 68px;
  background: var(--accent);
  opacity: 0.11;
  pointer-events: none;
}

.verdict-green {
  --accent: var(--green);
  --accent-bg: var(--green-bg);
  --accent-soft: rgba(127, 219, 160, 0.16);
  --accent-line: rgba(127, 219, 160, 0.24);
}

.verdict-yellow {
  --accent: var(--yellow);
  --accent-bg: var(--yellow-bg);
  --accent-soft: rgba(240, 200, 95, 0.16);
  --accent-line: rgba(240, 200, 95, 0.24);
}

.verdict-red {
  --accent: var(--red);
  --accent-bg: var(--red-bg);
  --accent-soft: rgba(255, 107, 94, 0.16);
  --accent-line: rgba(255, 107, 94, 0.24);
}

.verdict-body { position: relative; }
.verdict-meta { margin: 6px 0 0; color: var(--on-faint); font-size: 0.85rem; }
.verdict-meta a { color: var(--on-muted); }

.verdict-stamp {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--accent-line);
}

.rating-pill {
  background: var(--accent-bg);
  color: var(--accent);
  padding: 5px 16px;
  border-radius: var(--r-full);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pill-homebrew { background: var(--surface-3); color: var(--on-muted); }

/* ── Ergebnis: warum diese Farbe ──────────────────────────────────────── */

.verdict-reason { margin: 16px 0 0; font-size: 1.02rem; line-height: 1.65; max-width: 64ch; }
.verdict-tagline { font-size: 0.85rem; color: var(--on-faint); }

/* Charakter im Fließtext. Bewusst inline statt inline-flex, ein Flex-Kasten
   macht die Zeilenhöhe ungleichmäßig und hängt eine Lücke vor das Komma. */
.char-line { margin: 12px 0 0; font-size: 0.84rem; line-height: 1.75; }

.char-inline {
  color: var(--team, var(--on-muted));
  white-space: nowrap;
  opacity: 0.8;
}

.char-inline img {
  width: 1.05em;
  height: 1.05em;
  object-fit: contain;
  vertical-align: -0.19em;
  margin-right: 0.24em;
}

.char-inline-score {
  margin-left: 0.34em;
  padding: 0.05em 0.42em;
  border-radius: var(--r-full);
  background: var(--team-bg, var(--surface-3));
  font-size: 0.8em;
  font-weight: 600;
}

.char-line-quiet { margin-top: 6px; font-size: 0.78rem; line-height: 1.7; }
.char-line-quiet .char-inline { opacity: 0.62; }
.verdict-reason .char-inline { opacity: 1; font-weight: 500; }

/* ── Ergebnis: der Entscheidungsweg ───────────────────────────────────── */
/*
   Ein durchlaufener Pfad: Grün, dann Gelb, dann Rot. Die Stufen, gegen die
   entschieden wurde, treten zurück; nur die erreichte Stufe ist eine Karte.
*/

.steps { position: relative; padding-left: 38px; margin-bottom: 24px; }

/* Greift schon die erste Prüfung, gibt es keinen Weg, nur ein Ergebnis.
   Dann fallen Linie und Knoten weg. */
.steps-single { padding-left: 0; }
.steps-single .step::before { display: none; }

.step { position: relative; padding: 2px 0 4px; }

/* Verbinder zum nächsten Knoten. Nur zwischen den Stufen, damit die Linie
   nicht unter der letzten weiterläuft. */
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: -26px;
  top: 33px;
  bottom: -30px;
  width: 2px;
  background: var(--outline-soft);
}
.step + .step { margin-top: 26px; }

/* Knoten auf der Linie. Hohl, solange die Stufe nicht erreicht wurde. */
.step::before {
  content: "";
  position: absolute;
  left: -38px;
  top: 5px;
  width: 26px;
  height: 26px;
  border-radius: var(--r-full);
  background: var(--bg);
  border: 2px solid var(--outline);
  box-sizing: border-box;
}

.step-matched::before {
  border-color: var(--rating);
  background: var(--rating);
  box-shadow: 0 0 0 5px var(--rating-glow);
}

.step-green  { --rating: var(--green);  --rating-glow: rgba(127, 219, 160, 0.12); --rating-line: rgba(127, 219, 160, 0.28); }
.step-yellow { --rating: var(--yellow); --rating-glow: rgba(240, 200, 95, 0.12);  --rating-line: rgba(240, 200, 95, 0.28); }
.step-red    { --rating: var(--red);    --rating-glow: rgba(255, 107, 94, 0.12);  --rating-line: rgba(255, 107, 94, 0.28); }

.step-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.step h3 { font-size: 1.05rem; font-weight: 500; }
.rating-word { color: var(--rating); }

.step-status {
  margin-left: auto;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-faint);
}

.step-lead { display: block; margin: 0 0 12px; font-size: 0.85rem; color: var(--on-muted); max-width: 64ch; }

/* Verworfene Stufen stehen zugeklappt da: Überschrift und ein Satz dazu,
   die Bedingungen im Einzelnen erst auf Wunsch. */
details.step > summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding-right: 26px;
}

details.step > summary::-webkit-details-marker { display: none; }
details.step > summary .step-lead { margin-bottom: 0; }
details.step > summary:hover .step-status { color: var(--on-muted); }

details.step > summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 8px;
  width: 7px;
  height: 7px;
  border-right: 1.6px solid var(--on-faint);
  border-bottom: 1.6px solid var(--on-faint);
  transform: rotate(45deg);
  transition: transform .15s;
}

details.step[open] > summary::after { transform: rotate(-135deg); top: 11px; }

.step-more { margin-top: 14px; }

/* Beim roten Ergebnis stehen die Treiber noch einmal einzeln benannt. */
.red-list { display: grid; gap: 12px; margin-top: 14px; }
.red-item { background: var(--surface-2); border-radius: var(--r-s); padding: 12px 14px; }
.red-item-text { margin: 0; font-size: 0.88rem; color: var(--on); }
.red-item .char-line { margin-top: 6px; }

/* Die erreichte Stufe ist das Ergebnis und bekommt als einzige eine Fläche. */
.step-matched {
  background: var(--surface);
  border: 1px solid var(--rating-line);
  border-radius: var(--r-m);
  padding: 18px 22px 20px;
}

.step-matched::before { top: 20px; }
.step-matched .step-status { color: var(--rating); }

/* Zurückgetretene Stufen: gedämpfte Überschrift, ruhigere Bedingungen. */
.step:not(.step-matched) h3 { opacity: 0.72; }
.step:not(.step-matched) .step-lead { color: var(--on-faint); }

.step-path + .step-path { margin-top: 14px; }

.step-path-label {
  margin: 0 0 6px;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-faint);
}

.cond-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }

.cond {
  padding: 9px 12px;
  border-radius: var(--r-s);
  background: var(--surface-2);
  color: var(--on-muted);
}

.cond-ok { background: rgba(127, 219, 160, 0.09); }

.cond-row { display: flex; align-items: center; gap: 10px; font-size: 0.84rem; }
.cond-text { flex: 1; min-width: 0; }

/* Die Rechnung hinter der Summe, direkt unter der Bedingung. */
.cond-hint { display: block; margin-top: 4px; font-size: 0.74rem; color: var(--on-faint); }

.cond-figure { flex: none; display: flex; align-items: center; gap: 10px; }

/* Kleiner Balken mit Schwellenstrich, damit der Anteil nicht nur als Zahl
   dasteht. */
.mini-bar {
  position: relative;
  width: 80px;
  height: 5px;
  border-radius: 3px;
  background: var(--surface-3);
}

.mini-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: 3px;
  background: var(--cond, var(--on-muted));
}

.mini-mark {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  border-radius: 1px;
  background: var(--on-muted);
}

.cond-value {
  min-width: 3rem;
  flex: none;
  text-align: right;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--cond, var(--on-muted));
}

.cond-note {
  min-width: 4.4rem;
  text-align: right;
  font-size: 0.74rem;
  color: var(--on-faint);
  font-variant-numeric: tabular-nums;
}

/* Grün heißt „trifft zu“, Rot „trifft nicht zu“. In zurückgetretenen Stufen
   bleibt das Rot gedämpft, sonst schreit die ganze Seite. */
.cond-ok { --cond: var(--green); }
.cond-no { --cond: #b8756c; }
.step-matched .cond-no { --cond: var(--red); }

.mark {
  flex: none;
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--r-full);
  background: var(--mark-bg);
  color: var(--mark);
}

.mark svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mark-ok { --mark: var(--green); --mark-bg: rgba(127, 219, 160, 0.15); }
.mark-no { --mark: #b8756c; --mark-bg: rgba(255, 107, 94, 0.09); }

/* Was oben schon stand, wird nicht noch einmal betont. */
.cond-repeat { opacity: 0.5; }

/* ── Ergebnis: die Charaktere ─────────────────────────────────────────── */

/* Herkunfts-Label über dem Icon. Klein und ruhig, damit sie das Zeichen nicht
   überdecken. Die drei Basis-Skripte überschneiden sich nicht, es gibt also
   genau ein Herkunfts-Label je Charakter. */
.char-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3px;
  margin-bottom: 6px;
  min-height: 14px;
}

.char-tag {
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  padding: 1px 5px;
  border-radius: var(--r-full);
  background: var(--tag-bg);
  color: var(--tag);
  white-space: nowrap;
  line-height: 1.5;
}

/* Die Farbe folgt dem Lernweg, nicht der Edition: Trouble Brewing grün,
   die beiden anderen Basis-Skripte gelb und orange, alles darüber hinaus rot.
   Gamechanger steht quer dazu und bekommt deshalb violett. */
.tag-tb  { --tag: var(--green);  --tag-bg: var(--green-bg); }
.tag-bmr { --tag: #f0c85f;       --tag-bg: rgba(240, 200, 95, 0.13); }
.tag-snv { --tag: #f0a45f;       --tag-bg: rgba(240, 164, 95, 0.13); }
.tag-exp { --tag: var(--red);    --tag-bg: var(--red-bg); }
.tag-gc  { --tag: #c9a3ff;       --tag-bg: rgba(201, 163, 255, 0.14); }

/* Legende über der Charakterliste. */
.roster-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 0 0 20px;
  font-size: 0.78rem;
  color: var(--on-faint);
}

.legend-item { display: inline-flex; align-items: center; gap: 6px; }

.roster { margin-bottom: 32px; }

.team + .team { margin-top: 24px; }

.team-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-faint);
  margin-bottom: 10px;
}

.team-label::after { content: ""; flex: 1; height: 1px; background: var(--outline-soft); }

.team-count { letter-spacing: 0; }

.chars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 4px;
}

.char {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 6px 10px;
  border-radius: var(--r-m);
  text-align: center;
  position: relative;
  transition: background .15s;
}

.char:hover { background: var(--surface); }

.char-icon { width: 52px; height: 52px; object-fit: contain; display: block; }

/* Homebrew hat kein offizielles Icon — dafür ein neutraler Platzhalter. */
.char-icon-missing {
  width: 52px;
  height: 52px;
  border-radius: var(--r-full);
  border: 1px dashed var(--outline);
  display: grid;
  place-items: center;
  color: var(--on-faint);
  font-size: 1.1rem;
}

.char-name { font-size: 0.75rem; line-height: 1.3; color: var(--on-muted); overflow-wrap: break-word; hyphens: auto; }

.team-uncounted .char-icon, .team-uncounted .char-icon-missing { opacity: 0.55; }

/* Markiert wird nur, was die Einstufung tatsächlich treibt. */
.char-heavy .char-icon { filter: drop-shadow(0 0 7px rgba(240, 200, 95, 0.4)); }
.char-heavy .char-name { color: var(--yellow); }

.char-score {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: var(--r-full);
  background: var(--yellow-bg);
  color: var(--yellow);
  font-size: 0.68rem;
  font-weight: 600;
  display: grid;
  place-items: center;
}
/* ── Ergebnis: aufklappbare Begründung ────────────────────────────────── */

.more { background: var(--surface); border-radius: var(--r-m); margin-bottom: 8px; }

.more > summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 20px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--on-muted);
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: var(--r-m);
  transition: color .15s;
}

.more > summary::-webkit-details-marker { display: none; }
.more > summary:hover, .more[open] > summary { color: var(--on); }

.more > summary::before {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform .15s;
  flex: none;
  margin-left: 2px;
}

.more[open] > summary::before { transform: rotate(45deg); }

.more-body { padding: 0 20px 20px; }

.more-body > h3 {
  margin: 24px 0 10px;
  color: var(--on-faint);
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.more-body > h3:first-child { margin-top: 4px; }
.more-body > p { font-size: 0.85rem; color: var(--on-faint); }

/* ── Kriterienseite ───────────────────────────────────────────────────── */

.doc { margin: 40px 0; max-width: 72ch; }
.doc h2 { margin-bottom: 12px; }
.doc p { color: var(--on-muted); }
/* Hinweis, der auffallen soll, ohne zu warnen. Blaustich statt Grau, damit er
   sich vom Fließtext absetzt. */
.note {
  position: relative;
  background: var(--primary-bg);
  padding: 14px 18px 14px 46px;
  border-radius: var(--r-m);
  font-size: 0.85rem;
  color: var(--on-muted);
  margin: 20px 0;
}

.note::before {
  content: "i";
  position: absolute;
  left: 16px;
  top: 14px;
  width: 18px;
  height: 18px;
  border-radius: var(--r-full);
  background: var(--primary);
  color: #101828;
  display: grid;
  place-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  font-style: italic;
}

/* ── Charaktergruppen ─────────────────────────────────────────────────── */
/*
   Die vier Gruppenfarben in der üblichen Lesart des Spiels: Townsfolk blau,
   Outsider heller blau, Minions orange, Dämonen rot. Für den dunklen
   Hintergrund aufgehellt. Das Repo botc-release gibt keine Farbwerte vor.
*/

.team-townsfolk { --team: #6ea8ff; --team-bg: #16233a; }
.team-outsider  { --team: #58c9f3; --team-bg: #122833; }
.team-minion    { --team: #ff9a52; --team-bg: #33210f; }
.team-demon     { --team: #ff6b5e; --team-bg: #331714; }
.team-loric     { --team: #d9ba64; --team-bg: #2c2412; }

/* ── Score-Board ──────────────────────────────────────────────────────── */

/* Der Score-Bereich ist ein eigenes Element, keine Fortsetzung des Fließtexts.
   Eigene Fläche, eigener Rahmen, deutlich Abstand nach oben und unten. */
.board-panel {
  background: var(--surface);
  border: 1px solid var(--outline-soft);
  border-radius: var(--r-l);
  padding: clamp(16px, 3vw, 24px);
  margin: 32px 0;
}

.board-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  padding-bottom: 16px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--outline-soft);
}

.board-bar-label {
  color: var(--on-faint);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.72rem;
}

/* Auf der eigenen Fläche braucht die Kachel eine hellere Stufe zum Abheben. */
.board-panel .char:hover { background: var(--surface-2); }

.board-switch {
  display: inline-flex;
  gap: 2px;
  background: var(--bg);
  border-radius: var(--r-full);
  padding: 3px;
}

.board-tab {
  background: none;
  color: var(--on-muted);
  border: 0;
  border-radius: var(--r-full);
  padding: 7px 18px;
  font-size: 0.85rem;
  font-weight: 500;
}

.board-tab:hover { color: var(--on); filter: none; }
.board-tab.active { background: var(--surface-3); color: var(--on); }

/* Nur während des Umsortierens beschneiden, sonst könnte die Liste
   dauerhaft abgeschnitten bleiben. */
.board.is-animating { overflow: hidden; }

.board {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 4px;
}

.board-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 2px;
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--team, var(--on-faint));
}

.board-head:first-child { margin-top: 0; }
.board-head[hidden] { display: none; }

.board-head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.22;
}

.board-head-note {
  letter-spacing: 0;
  text-transform: none;
  color: var(--on-faint);
  font-weight: 400;
}

/* Das Score-Zeichen trägt die Gruppenfarbe, die Icons allein unterscheiden
   nur gut und böse. */
.board .char-score { background: var(--team-bg); color: var(--team); }
.board .char-name { color: var(--on); }

.team-keys {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  margin: 0;
  font-size: 0.78rem;
}

.team-key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--team);
}

.team-key::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--r-full);
  background: currentColor;
}

.doc-wide { max-width: none; }
.doc-wide > p { max-width: 72ch; }
/* ── Schmale Fenster ──────────────────────────────────────────────────── */

@media (max-width: 560px) {
  /* Die Navigation passt neben dem Namen nicht mehr in eine Zeile. */
  .site-header-inner { flex-wrap: wrap; gap: 4px; padding-bottom: 8px; }
  .site-header nav { width: 100%; margin-left: -14px; }
  .site-header nav a { padding: 6px 14px; }

  .chars { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
  .char-icon, .char-icon-missing { width: 44px; height: 44px; }
  /* Knopf über die volle Breite, aber flacher als auf dem Desktop, sonst
     wirkt die Pille wuchtig. */
  .row, .inline-search { flex-direction: column; gap: 10px; }

  /* Auch der Knopf im Datei-Reiter steht allein im Formular, nicht in .row. */
  .row button,
  .inline-search button,
  .panel form > button {
    width: 100%;
    padding: 10px 20px;
    font-size: 0.95rem;
  }
  .flow-step { flex-wrap: wrap; gap: 12px; }

  /* Der Pfad rückt näher an den Rand, sonst bleibt für den Text kaum Platz.
     Ohne Pfad bleibt die Karte bündig mit den übrigen Boxen. */
  .steps { padding-left: 28px; }
  .steps-single { padding-left: 0; }
  .step::before { left: -28px; width: 20px; height: 20px; top: 4px; }
  .step-matched::before { top: 18px; }
  .step:not(:last-child)::after { left: -19px; top: 26px; bottom: -30px; }
  .step-matched { padding: 16px 16px 18px; }

  .step-head { flex-wrap: wrap; gap: 4px 10px; }
  .step-status { margin-left: 0; width: 100%; }

  /* Bedingung über die volle Breite, die Messwerte darunter. Nebeneinander
     bleibt für den Satz sonst nur eine Spalte von wenigen Wörtern. */
  .cond-row { flex-wrap: wrap; }
  /* Basis 0, damit der Text neben der Marke bleibt und in sich umbricht,
     statt als Ganzes in die nächste Zeile zu rutschen. */
  .cond-text { flex: 1 1 0; min-width: 0; }
  /* Nur wenn ein Balken dabei ist, lohnt die eigene Zeile. Eine nackte Zahl
     bleibt neben der Bedingung stehen. Der Balken läuft über die volle Breite
     und beginnt links bündig mit Marke und Charakterliste, nicht eingerückt
     unter dem Text. Eine feine Linie setzt ihn vom Satz ab. */
  .cond-figure-bar {
    flex: 1 0 100%;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
  }

  .cond-figure-bar .mini-bar { flex: 1 1 auto; width: auto; max-width: none; }
  .cond-value, .cond-note { min-width: 0; text-align: right; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}