/* ===========================================================================
   AGORA — DEMO-SEITE (#/demo)
   ===========================================================================
   Eigenes Blatt, weil die Seite eine Anordnung mitbringt, die es sonst nirgends
   gibt: ein Kartenraster mit 33 Einträgen, dazu die sechs Attrappen-Bauarten.
   ui/agora.css bleibt unangetastet (Owner-Regel: „nicht ungefragt anfassen").

   🔴 KEIN EIGENES #hex UND KEINE FREIEN px. Jede Farbe kommt aus den Variablen
   in agora.css (--flaeche, --rahmen, --akzent, --gut, --schlecht, --warn,
   --gedaempft, --text, --flaeche-hoch, --flaeche-tief, --akzent-hauch,
   --akzent-rand, --gut-grund, --schlecht-grund), jeder Abstand aus --luft /
   --raster-abstand / --karte-innen, jede Ecke aus --radius, jede Bewegung aus
   --schnell/--normal/--kurve. Was hier als Zahl steht, ist entweder ein Faktor
   auf eine dieser Variablen oder ein `em` (also an die Schrift gebunden).

   Zwei Ausnahmen, beide begründet:
     · `1px` — steht als --linie zur Verfügung und wird auch so benutzt.
     · Rasterbreiten in `rem` (--karten-min ist 21rem und tut hier dasselbe).
   =========================================================================== */

/* Chip in der Kopfleiste — nur die Demo-Instanz zeigt ihn (agora.js). */
.kopf-demo-chip {
  display: inline-flex;
  align-items: center;
  align-self: center;
  margin-left: calc(var(--luft) * 0.4);
  padding: 0.15em 0.55em;
  border-radius: var(--radius);
  border: var(--linie) solid var(--akzent-rand);
  background: var(--akzent-hauch);
  color: var(--akzent);
  font-size: 0.72em;
  font-weight: 650;
  letter-spacing: .04em;
}
.kopf-demo-chip.versteckt,
.kopf-demo-chip[hidden] { display: none; }

/* Schalter „Zur Demo" in der Live-Schiene. */
a.schiene-demo-weg {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: calc(var(--luft) * 0.5) var(--luft);
  padding: calc(var(--luft) * 0.55) var(--luft);
  border-radius: var(--radius);
  border: var(--linie) solid var(--akzent-rand);
  background: var(--akzent-hauch);
  color: var(--akzent);
  text-decoration: none;
  font-weight: 600;
}
a.schiene-demo-weg:hover { border-color: var(--akzent); }

.demo-seite { max-width: none; }

.demo-vorwort { max-width: 62ch; }

/* --- Zähler: Ja / Nein / offen / gesamt ----------------------------------- */
.demo-kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--kachel-min), 1fr));
  gap: var(--luft);
  margin: var(--raster-abstand) 0;
}
.demo-kachel {
  background: var(--flaeche);
  border: var(--linie) solid var(--rahmen);
  border-radius: var(--radius);
  padding: var(--luft);
}
.demo-kachel-zahl {
  font-size: 1.9em;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
/* Der farbige Streifen links macht die drei Stände unterscheidbar, OHNE dass
   die Zahl selbst die Farbe wechselt — eine farbige Zahl auf dunklem Grund
   verliert Kontrast, ein Streifen daneben nicht. */
.demo-kachel.gut { border-left: calc(var(--linie) * 3) solid var(--gut); }
.demo-kachel.schlecht { border-left: calc(var(--linie) * 3) solid var(--schlecht); }
.demo-kachel.ruhig { border-left: calc(var(--linie) * 3) solid var(--gedaempft); }

/* --- Leiste mit „Ja-Liste als Auftrag" ------------------------------------ */
.demo-leiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--luft);
  margin: var(--raster-abstand) 0 var(--luft);
}
.demo-leiste [data-demo-sichtbar] { margin-right: auto; }
/* button.haupt ist in agora.css auf width:100% — hier soll der Knopf seine
   Beschriftung breit sein, nicht die Zeile. Deshalb: alten Wert ERSETZEN. */
.demo-auftragknopf { width: auto; flex: 0 0 auto; }

.demo-filter {
  display: flex;
  flex-direction: column;
  gap: calc(var(--luft) / 2);
  margin-bottom: var(--raster-abstand);
}

/* --- Das Kartenraster ----------------------------------------------------- */
/* Nichts endlos nach unten (Owner-Regel): Zusammengehörendes steht nebeneinander.
   Bei 33 Karten sind das auf einem breiten Schirm drei Spalten statt 33 Zeilen. */
.demo-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--karten-min), 1fr));
  gap: var(--raster-abstand);
  align-items: start;
}

.demo-karte { display: flex; flex-direction: column; gap: var(--luft); }
/* .karte + .karte setzt in agora.css einen Abstand nach oben — im Raster
   erledigt `gap` das, sonst stünde beides übereinander. Alte Regel ersetzt. */
.demo-raster .karte + .karte { margin-top: 0; }

.demo-karte-kopf {
  display: flex;
  align-items: baseline;
  gap: calc(var(--luft) / 1.5);
  flex-wrap: wrap;
}
.demo-karte-kopf h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: var(--schrift-abschnitt);
  flex: 1 1 12ch;
}
.demo-kennung {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--akzent);
  background: var(--akzent-weich);
  border: var(--linie) solid var(--akzent-rand);
  border-radius: var(--radius);
  padding: 0 .5em;
  min-width: 3.2em;
  text-align: center;
  flex: 0 0 auto;
}
.demo-karte-satz { margin: 0; }

/* Der Stand färbt den linken Rand der ganzen Karte — auf einen Blick sieht man,
   was schon entschieden ist, ohne 33 Chips zu lesen. */
.demo-karte[data-stand="ja"] { border-left: calc(var(--linie) * 3) solid var(--gut); }
.demo-karte[data-stand="nein"] { border-left: calc(var(--linie) * 3) solid var(--schlecht); }

.demo-karte-tun { display: flex; flex-wrap: wrap; gap: calc(var(--luft) / 2); }
/* Kein Knopf über 600 px (Owner-Regel): die Knöpfe wachsen bis dahin mit und
   hören dann auf. `haupt` bringt width:100% mit — hier ersetzt. */
.demo-karte-tun button { width: auto; max-width: 600px; flex: 0 0 auto; }

.demo-anmerkung { display: flex; flex-direction: column; gap: calc(var(--luft) / 3); }
.demo-anmerkung textarea { resize: vertical; font-family: var(--sans); }

/* --- Leerflächen und Platzhalter ------------------------------------------ */
.demo-leer {
  border: var(--linie) dashed var(--rahmen);
  border-radius: var(--radius);
  padding: var(--karte-innen);
  color: var(--gedaempft);
}
.demo-leer p { margin: 0; }

.demo-skelett { display: flex; flex-direction: column; gap: calc(var(--luft) / 1.5); }
.demo-skelett span {
  display: block;
  height: 1.1em;
  border-radius: var(--radius);
  background: var(--flaeche-hoch);
  opacity: .55;
  animation: demo-puls var(--langsam) var(--kurve) infinite alternate;
}
.demo-skelett span:nth-child(2n) { width: 82%; }
.demo-skelett span:nth-child(3n) { width: 64%; }
@keyframes demo-puls { from { opacity: .3; } to { opacity: .7; } }
@media (prefers-reduced-motion: reduce) {
  .demo-skelett span { animation: none; opacity: .5; }
}

/* ===========================================================================
   DIE VORSCHAU (Dialog) UND DIE SECHS ATTRAPPEN-BAUARTEN
   =========================================================================== */
.demo-vorschau { display: flex; flex-direction: column; gap: var(--luft); }
.demo-vorschau-satz { margin: 0; }
.demo-vorschau-zustaende { align-items: center; }
.demo-vorschau-buehne {
  background: var(--flaeche-tief);
  border: var(--linie) solid var(--rahmen);
  border-radius: var(--radius);
  padding: var(--karte-innen);
  display: flex;
  flex-direction: column;
  gap: var(--luft);
  max-height: 52vh;
  overflow: auto;
}
.demo-vorschau-fuss button { width: auto; }

/* --- Bauart KORB: der Schienen-Stumpf mit dem Attention-Chip --------------- */
.demo-korb-schiene { display: flex; }
.demo-schiene {
  width: var(--schiene);
  min-height: 15em;
  display: flex;
  flex-direction: column;
  gap: calc(var(--luft) / 2);
  background: var(--flaeche);
  border: var(--linie) solid var(--rahmen);
  border-radius: var(--radius);
  padding: var(--luft);
}
.demo-schiene-reiter {
  padding: var(--zeile-y) calc(var(--luft) / 1.5);
  border-radius: var(--radius);
  color: var(--gedaempft);
  background: var(--flaeche-tief);
}
.demo-schiene-fuellung { flex: 1 1 auto; }
/* Genau hier sitzt der Chip in O14: ÜBER dem Fuß, unter den Reitern. */
.demo-schiene-chip { align-self: stretch; justify-content: center; }
.demo-schiene-konto {
  padding: var(--zeile-y) calc(var(--luft) / 1.5);
  border-top: var(--linie) solid var(--rahmen);
  color: var(--gedaempft);
}

.demo-korb-liste { display: flex; flex-direction: column; gap: var(--luft); }
.demo-korb-zeile {
  display: flex;
  flex-wrap: wrap;
  gap: var(--luft);
  justify-content: space-between;
  align-items: center;
  background: var(--flaeche);
  border: var(--linie) solid var(--rahmen);
  border-radius: var(--radius);
  padding: var(--luft);
}
.demo-korb-titel { font-weight: 600; }
.demo-diffkopf {
  font-variant-numeric: tabular-nums;
  color: var(--gut);
  background: var(--gut-grund);
  border-radius: var(--radius);
  padding: 0 .5em;
  display: inline-block;
  margin-top: calc(var(--luft) / 3);
}
.demo-korb-knoepfe { display: flex; gap: calc(var(--luft) / 2); }
.demo-korb-knoepfe button { width: auto; }

/* --- Bauart LISTE --------------------------------------------------------- */
.demo-mock-kopf {
  display: flex;
  align-items: center;
  gap: var(--luft);
  justify-content: space-between;
}
.demo-mock-hinzu { width: auto; flex: 0 0 auto; }
.demo-mock-filter { margin: 0; }
/* Waagerecht rollen statt abschneiden — eine Tabelle, die rechts einfach
   aufhört, verschweigt Spalten. */
.demo-tabelle-roll { overflow-x: auto; }
.demo-tabelle { width: 100%; border-collapse: collapse; }
.demo-tabelle th,
.demo-tabelle td {
  text-align: left;
  padding: var(--zeile-y) calc(var(--luft) / 1.5);
  border-bottom: var(--linie) solid var(--rahmen);
  vertical-align: top;
}
.demo-tabelle th { color: var(--gedaempft); font-size: var(--schrift-klein); font-weight: 600; }
.demo-tabelle-tun { white-space: nowrap; }
.demo-tabelle-tun button { width: auto; }
.demo-mock-fuss { margin: 0; }

/* --- Bauart SUCHE --------------------------------------------------------- */
.demo-suchfeld { display: flex; flex-direction: column; gap: calc(var(--luft) / 3); }
.demo-treffer {
  background: var(--flaeche);
  border: var(--linie) solid var(--rahmen);
  border-left: calc(var(--linie) * 3) solid var(--akzent-rand);
  border-radius: var(--radius);
  padding: var(--luft);
  cursor: pointer;
  transition: border-color var(--schnell) var(--kurve);
}
.demo-treffer:hover { border-color: var(--akzent); }
.demo-treffer p { margin: calc(var(--luft) / 3) 0 0; }
.demo-treffer mark { background: var(--akzent-hauch); color: var(--text); border-radius: var(--radius); padding: 0 .2em; }

/* --- Bauart SPALTEN ------------------------------------------------------- */
.demo-spalten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--karten-min), 1fr));
  gap: var(--luft);
}
.demo-spalte {
  background: var(--flaeche);
  border: var(--linie) solid var(--rahmen);
  border-radius: var(--radius);
  padding: var(--luft);
}
.demo-spalte-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--luft) / 2);
  margin-bottom: calc(var(--luft) / 2);
}
.demo-spalte-kopf button { width: auto; }
/* `pre-wrap`, weil die Lauf-Spalte in O20 echte Protokollzeilen zeigt und die
   ihre Zeilenumbrüche behalten müssen. */
.demo-spalte-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }

/* --- Bauart FORMULAR ------------------------------------------------------ */
.demo-formular { display: flex; flex-direction: column; gap: var(--luft); }
.demo-feldzeile {
  display: grid;
  grid-template-columns: minmax(9em, 34%) minmax(0, 1fr);
  gap: calc(var(--luft) / 2) var(--luft);
  align-items: center;
}
.demo-feldzeile > label { color: var(--gedaempft); }
.demo-formular button.haupt { width: auto; align-self: flex-start; max-width: 600px; }

/* --- Bauart KARTE --------------------------------------------------------- */
.demo-mockkarte { display: flex; flex-direction: column; gap: var(--luft); }
.demo-mockkarte-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--luft) / 2); }
.demo-phasen { display: flex; flex-wrap: wrap; gap: calc(var(--luft) / 2); }
.demo-phase {
  padding: 0 .6em;
  border-radius: var(--radius);
  border: var(--linie) solid var(--rahmen);
  color: var(--gedaempft);
  font-size: var(--schrift-klein);
}
.demo-phase.ist-durch { color: var(--gut); border-color: color-mix(in srgb, var(--gut) 45%, var(--rahmen)); }
.demo-phase.ist-jetzt { color: var(--akzent); border-color: var(--akzent-rand); background: var(--akzent-weich); }
.demo-strom {
  margin: 0;
  padding: var(--luft);
  list-style: none;
  background: var(--flaeche-tief);
  border-radius: var(--radius);
  font-size: var(--schrift-klein);
  overflow-wrap: anywhere;
}
.demo-strom li + li { margin-top: calc(var(--luft) / 3); }
.demo-mockkarte-knoepfe { display: flex; flex-wrap: wrap; gap: calc(var(--luft) / 2); }
.demo-mockkarte-knoepfe button { width: auto; max-width: 600px; }

/* --- Der Auftragstext ----------------------------------------------------- */
.demo-auftrag { display: flex; flex-direction: column; gap: var(--luft); }
.demo-auftrag-text {
  width: 100%;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: var(--schrift-klein);
  resize: vertical;
}
.demo-auftrag .dialog-knoepfe button { width: auto; }

/* --- Schmal (Handy, 420 px) ----------------------------------------------- */
/* 860 px ist dieselbe Grenze, an der agora.css die Liste ausblendet — eine
   zweite, eigene Grenze hier hiesse zwei Wahrheiten über „schmal". */
@media (max-width: 860px) {
  .demo-raster { grid-template-columns: 1fr; }
  /* Die Schiene wird NICHT ausgeblendet: der Chip über dem Fuß IST die Idee.
     Sie nimmt schmal die volle Breite und wird flacher — sichtbar bleibt, was
     zählt (Reiter, Chip, Konto in dieser Reihenfolge). */
  .demo-schiene { width: 100%; min-height: 0; }
  .demo-feldzeile { grid-template-columns: 1fr; align-items: start; }
  .demo-leiste { flex-direction: column; align-items: stretch; }
  .demo-leiste [data-demo-sichtbar] { margin-right: 0; }
  .demo-auftragknopf { width: 100%; max-width: 600px; }
  .demo-vorschau-buehne { max-height: 62vh; }
}