/*
 * DEMO-ABSCHLUSSBILDSCHIRM (Auftrag 034 Phase O).
 *
 * Der letzte Eindruck. Ruhig und ohne Feierlärm: die Demo endet mit einer Bilanz, nicht mit
 * einem Konfettiregen. Amber trägt die Überschrift, sonst dieselbe Stahl-Cyan-Sprache wie
 * der Rest der Kellerzentrale.
 */

.demoende {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 3vh, 34px);
  padding: clamp(20px, 4vh, 56px) clamp(16px, 6vw, 90px);
  overflow-y: auto;
  background: radial-gradient(120% 85% at 50% 0%, #17232c 0%, #0c1218 58%, #05080b 100%);
  color: #cfe0e6;
}
.demoende[hidden] { display: none; }

/* ---------------------------------------------------------------- Kopf */
.demoende-kopf { text-align: center; }
.demoende-marke {
  font-size: clamp(11px, 1.1vw, 13px);
  letter-spacing: .42em;
  color: #5f7885;
}
.demoende-titel {
  margin: 8px 0 10px;
  font-size: clamp(24px, 3.6vw, 44px);
  font-weight: 600;
  letter-spacing: .04em;
  color: #d9a441;
}
.demoende-unter {
  margin: 0 auto;
  max-width: 68ch;
  font-size: clamp(13px, 1.35vw, 16px);
  line-height: 1.6;
  color: #9fb4bd;
}

/* ---------------------------------------------------------------- Bilanz */
.demoende-bilanz {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(122px, 1fr));
  gap: clamp(8px, 1.4vw, 18px);
  padding: clamp(14px, 2.4vh, 24px) 0;
  border-top: 1px solid #22333f;
  border-bottom: 1px solid #22333f;
}
.demoende-wert { display: flex; flex-direction: column; gap: 2px; text-align: center; }
.demoende-zahl {
  font-size: clamp(22px, 2.8vw, 34px);
  font-weight: 600;
  color: #e8f1f4;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}
.demoende-bez {
  font-size: clamp(9px, .95vw, 11px);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #6d8794;
}
.demoende-wert.gut .demoende-zahl { color: #6fb6c9; }
.demoende-wert.schwer .demoende-zahl { color: #b4553f; }

/* ---------------------------------------------------------------- Blöcke */
.demoende-block { display: flex; flex-direction: column; gap: 10px; }
.demoende-ueber {
  margin: 0;
  font-size: clamp(10px, 1vw, 12px);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #5f7885;
  font-weight: 500;
}

.demoende-liste { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 5px; }
.demoende-liste li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 7px 11px;
  background: #101820; border: 1px solid #1e2c36; border-radius: 2px;
  font-size: .88em;
}
.demoende-soldat { color: #b3c6ce; }
.demoende-faehig { color: #6fb6c9; }

.demoende-gefallene { display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }

/* ---------------------------------------------------------------- Ausblick */
.demoende-ausblick { display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(10px, 1.6vw, 20px); }
.demoende-ort {
  padding: clamp(12px, 1.8vw, 18px);
  background: linear-gradient(180deg, #131e26 0%, #0e161c 100%);
  border: 1px solid #22333f;
  border-left: 3px solid #3c6b7d;
  border-radius: 2px;
}
.demoende-ortname {
  font-size: clamp(15px, 1.7vw, 20px); font-weight: 600; color: #e8f1f4; margin-bottom: 5px;
}
.demoende-orttext { margin: 0; font-size: .88em; line-height: 1.55; color: #9fb4bd; }
.demoende-hinweis { margin: 2px 0 0; font-size: .8em; color: #5f7885; }

/* ---------------------------------------------------------------- Fuss */
.demoende-fuss {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  margin-top: auto; padding-top: clamp(12px, 2vh, 22px);
}
.demoende-knopf {
  min-height: 52px;                     /* Tablet-Ziel */
  padding: 0 clamp(18px, 2.4vw, 32px);
  background: linear-gradient(180deg, #16232c 0%, #111a22 100%);
  border: 1px solid #27404f; border-radius: 3px;
  color: #cfe0e6; font: inherit; font-size: clamp(13px, 1.4vw, 16px);
  cursor: pointer; transition: border-color .15s, background .15s;
}
@media (hover: hover) { .demoende-knopf:hover { border-color: #4b8fa3; } }
.demoende-knopf:focus-visible { outline: 2px solid #5fb3c9; outline-offset: 2px; }
.demoende-knopf--haupt {
  border-color: #4b8fa3;
  background: linear-gradient(180deg, #1c3742 0%, #142833 100%);
  color: #e8f1f4;
}

@media (prefers-reduced-motion: reduce) { .demoende-knopf { transition: none; } }

/* ---------------------------------------------------------------- Funkmeldung (034E)
 * Steht zwischen Überschrift und Zahlen. Der Abschluss soll zuerst in der Spielwelt bleiben:
 * eine Meldung aus dem Funkraum, dann erst die Auswertung. Bewusst schmal und ruhig — sie
 * soll gelesen werden, nicht dominieren.
 */
.demoende-funk {
  width: min(680px, 100%);
  margin: 0 auto;
  padding: 12px 16px;
  background: rgba(95,179,201,.045);
  border: 1px solid #22333f;
  border-left: 3px solid #4b8fa3;
  border-radius: 1px;
  text-align: left;
}
.demoende-funk-kopf {
  font-size: .64em; letter-spacing: .26em; text-transform: uppercase;
  color: #6d8794; margin-bottom: 7px;
}
.demoende-funk-zeile {
  margin: 0 0 6px;
  font-size: clamp(12px, 1.15vw, 14px);
  line-height: 1.55;
  color: #b3c6ce;
}
.demoende-funk-zeile:last-child {
  margin-bottom: 0;
  color: #93aab5;
  font-style: italic;
}

/* ---------------------------------------------------------------- Umfrage (Charly 22.09.2026)
 * Drei Fragen am Abschnittsende, anonym. Bewusst ruhig gehalten und UNTER dem Ausblick: sie
 * soll nach dem Abschluss angeboten werden, nicht den Abschluss ueberdecken. Die Wahlknoepfe
 * sind echte Knoepfe (aria-pressed) — kein eigenes Radio-Gebastel, damit Tastatur und
 * Vorleseprogramme ohne Zusatzarbeit funktionieren.
 */
.demoende-umfrage-intro { margin: 0; font-size: .84em; line-height: 1.55; color: #93aab5; }
.demoende-umfrage-frage { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.demoende-umfrage-text { font-size: clamp(12px, 1.15vw, 14px); color: #cfe0e6; }
.demoende-umfrage-reihe { display: flex; flex-wrap: wrap; gap: 8px; }
.demoende-umfrage-wahl {
  min-height: 44px;                     /* Tablet-Ziel, etwas flacher als die Fussknoepfe */
  padding: 0 clamp(12px, 1.6vw, 20px);
  background: linear-gradient(180deg, #16232c 0%, #111a22 100%);
  border: 1px solid #27404f; border-radius: 3px;
  color: #b3c6ce; font: inherit; font-size: clamp(12px, 1.25vw, 14px);
  cursor: pointer; transition: border-color .15s, background .15s, color .15s;
}
@media (hover: hover) { .demoende-umfrage-wahl:hover { border-color: #4b8fa3; } }
.demoende-umfrage-wahl:focus-visible { outline: 2px solid #5fb3c9; outline-offset: 2px; }
.demoende-umfrage-wahl.aktiv {
  border-color: #5fb3c9; color: #e8f1f4;
  background: linear-gradient(180deg, #1c3742 0%, #142833 100%);
}
.demoende-umfrage-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.demoende-umfrage-fuss .demoende-knopf:disabled { opacity: .45; cursor: default; border-color: #27404f; }
.demoende-umfrage-meldung { margin: 0; font-size: .8em; color: #93aab5; }
.demoende-umfrage-meldung.fehler { color: #d08a72; }

@media (prefers-reduced-motion: reduce) { .demoende-umfrage-wahl { transition: none; } }