/* KOL – Weboberfläche im MPZ-Stil „Liquid Glass".
   Tokens nach DESIGN-SYSTEM.md des Repos. */

:root {
  --yellow:       #ffea00;
  --black:        #000;
  --white:        #fff;
  --error:        #c0392b;
  --success:      #1a8a3f;
  --glass-white:  rgba(255, 255, 255, 0.62);
  --glass-border: rgba(255, 255, 255, 0.80);
  --glass-yellow: rgba(255, 234, 0, 0.72);
  --glass-shadow: 0 24px 64px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.06);
  --blur-strong:  blur(32px) saturate(200%);
  --blur-mid:     blur(20px) saturate(180%);
  --blur-soft:    blur(12px) saturate(160%);
  --radius-card:  28px;
  --radius-el:    18px;
  --radius-input: 14px;
  --radius-pill:  999px;
  --touch:        48px;

  --text:         rgba(0,0,0,0.88);
  --text-mid:     rgba(0,0,0,0.55);
  --text-quiet:   rgba(0,0,0,0.38);
  --linie:        rgba(0,0,0,0.10);

  --space-block-lg: 1.75rem;
  --space-block-md: 1.25rem;
  --space-block:    1rem;

}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "SF Pro Display", "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text);
  background-color: #fffbe6;
  background-image:
    radial-gradient(circle at 12% 8%,  rgba(255,234,0,0.55), transparent 42%),
    radial-gradient(circle at 88% 92%, rgba(255,200,0,0.45), transparent 45%),
    radial-gradient(circle at 92% 10%, rgba(255,245,130,0.35), transparent 40%),
    radial-gradient(circle at 45% 55%, rgba(255,255,200,0.30), transparent 55%);
  background-attachment: fixed;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1, h2, h3 { margin: 0 0 0.6rem; line-height: 1.25; letter-spacing: -0.3px; }
h1 { font-size: 1.45rem; font-weight: 800; }
h2 { font-size: 1.15rem; font-weight: 700; }
h3 { font-size: 0.95rem; font-weight: 700; }
p  { margin: 0 0 var(--space-block); }
a  { color: inherit; }

.hinweis { color: var(--text-mid); font-size: 0.9rem; }
.hinweis-klein { font-size: 0.8rem; color: var(--text-quiet); }
.zeit { font-size: 0.78rem; color: var(--text-quiet); white-space: nowrap; }
.trenner { opacity: 0.4; margin: 0 0.4rem; }
.block { display: block; }
.inline { display: inline; }

/* ---------------------------------------------------------------- Header */

/* Kopfzeile je Rolle: Schülerinnen und Schüler arbeiten auf Gelb,
   Lehrkräfte und Verwaltung auf Schwarz. So ist auf einen Blick klar,
   in welcher Rolle man gerade unterwegs ist. */
.site-header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 1rem 1.25rem; flex-wrap: wrap;
  padding: 0.7rem 1.5rem;
  background: var(--kopf-grund, var(--glass-yellow));
  color: var(--kopf-text, var(--text));
  backdrop-filter: var(--blur-mid);
  -webkit-backdrop-filter: var(--blur-mid);
  border-bottom: 1px solid var(--kopf-linie, var(--glass-border));
}

body.rolle-schueler {
  --kopf-grund: var(--glass-yellow);
  --kopf-text: var(--black);
  --kopf-linie: var(--glass-border);
  --kopf-leise: rgba(0,0,0,0.55);
  --kopf-huelle: rgba(255,255,255,0.55);
  --kopf-aktiv-grund: var(--black);
  --kopf-aktiv-text: var(--yellow);
}
body.rolle-lehrkraft {
  --kopf-grund: rgba(12,12,12,0.92);
  --kopf-text: #fff;
  --kopf-linie: rgba(255,255,255,0.16);
  --kopf-leise: rgba(255,255,255,0.62);
  --kopf-huelle: rgba(255,255,255,0.14);
  --kopf-aktiv-grund: var(--yellow);
  --kopf-aktiv-text: var(--black);
}

.brand {
  display: flex; align-items: center; gap: 0.65rem;
  text-decoration: none; font-weight: 800; color: inherit;
}
.logo-mpz { height: 1.6rem; width: auto; display: block; }
.logo-schule {
  height: 2.1rem; width: auto; display: block; margin-left: 0.35rem;
  opacity: 0.95;
}
/* Der Schulschriftzug ist grau – auf schwarzem Grund braucht er Aufhellung,
   das Orange bleibt dabei erhalten. */
body.rolle-lehrkraft .logo-schule { filter: brightness(2.1); opacity: 1; }

.brand-text {
  font-size: 1.05rem; letter-spacing: -0.2px;
  padding-left: 0.65rem; border-left: 1px solid var(--kopf-linie);
}

.logo-punkt {
  width: 2.2rem; height: 2.2rem; border-radius: 50%;
  background: var(--black); flex: none;
  margin: 0 auto 0.75rem; display: block;
}
.login-logo { display: block; max-width: 100%; height: auto; }
.login-logo-schule { width: 17rem; margin: 0 auto 1.15rem; }
.login-fuss {
  margin-top: var(--space-block-lg); padding-top: var(--space-block);
  border-top: 1px solid var(--linie);
}
.login-logo-mpz { width: 11rem; margin: 0 auto; opacity: 0.75; }

.site-nav { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-left: auto; }
.site-nav a {
  padding: 0.45rem 0.85rem; border-radius: var(--radius-pill);
  text-decoration: none; font-size: 0.9rem; font-weight: 600;
}
.site-nav a { color: inherit; }
.site-nav a:hover { background: var(--kopf-huelle); }
.site-nav a.aktiv { background: var(--kopf-aktiv-grund); color: var(--kopf-aktiv-text); }

.site-user { display: flex; align-items: center; gap: 0.75rem; font-size: 0.85rem; }

/* Name und Rolle untereinander: der Name ist die Person, die Rolle nur ein Etikett.
   Nebeneinander sahen beide gleich wichtig aus und waren verwechselbar. */
.user-block { display: flex; flex-direction: column; line-height: 1.15; text-align: right; }
.user-name { font-weight: 800; font-size: 0.92rem; }
.user-rolle {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--kopf-leise);
}

.site-footer {
  margin-top: auto;
  padding: 1.25rem 1.5rem;
  font-size: 0.78rem; color: var(--text-quiet); text-align: center;
}

/* ----------------------------------------------------------------- Seite */

.page { width: min(1100px, 100%); margin: 0 auto; padding: var(--space-block-lg) 1.25rem; }
.page-schmal { width: min(520px, 100%); }
.kopf { margin-bottom: var(--space-block-lg); }
.kopf-klein { margin-bottom: var(--space-block); }
.kopf-klein h2 { margin-bottom: 0.2rem; }
.phase-marke-hell { background: rgba(255,255,255,0.85); }

.karte {
  background: var(--glass-white);
  backdrop-filter: var(--blur-strong);
  -webkit-backdrop-filter: var(--blur-strong);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-card);
  box-shadow: var(--glass-shadow);
  padding: 1.5rem 1.75rem 1.75rem;
  margin-bottom: var(--space-block-lg);
}
.karte-mittig { text-align: center; }
.logo-bereich.karte-mittig { margin-bottom: var(--space-block-lg); }
.karte-mittig .formular { text-align: left; }
.logo-bereich { margin-bottom: var(--space-block-lg); }
.fehler-code { font-size: 3rem; font-weight: 800; margin: 0; color: var(--text-quiet); }

/* --------------------------------------------------------------- Kacheln */

.kachel-raster {
  display: grid; gap: var(--space-block-md);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  margin-bottom: var(--space-block-lg);
}

.kachel {
  display: flex; flex-direction: column;
  background: var(--glass-white);
  backdrop-filter: var(--blur-soft);
  -webkit-backdrop-filter: var(--blur-soft);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-card);
  box-shadow: var(--glass-shadow);
  padding: 1.25rem 1.35rem 1.35rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.kachel:hover { transform: translateY(-2px); }
.kachel-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; }
.kachel-text { font-size: 0.88rem; color: var(--text-mid); flex: 1; }
/* Knopfblock am Kachelfuß: fester Abstand nach oben, gleichmäßig zwischen
   den Knöpfen – vorher klebte er am Karteninhalt und am unteren Rand. */
.kachel-aktion {
  margin-top: auto; padding-top: var(--space-block-md);
  display: flex; flex-direction: column; gap: 0.5rem;
}
.kachel-aktion form { margin: 0; }
.kachel-titel { text-decoration: none; }
.kachel-titel:hover { text-decoration: underline; }
.kachel .mini-liste { margin-bottom: 0.35rem; }

.phase-marke {
  font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 0.25rem 0.6rem; border-radius: var(--radius-pill);
  background: var(--yellow); border: 1px solid rgba(0,0,0,0.10);
}

.karte-frei { display: flex; gap: var(--space-block-lg); flex-wrap: wrap; align-items: flex-start; }
.frei-text { flex: 1 1 260px; }
.frei-aktion { flex: 0 1 300px; }

.mini-liste { list-style: none; margin: 0 0 0.5rem; padding: 0; font-size: 0.85rem; }
.mini-liste li {
  display: flex; justify-content: space-between; gap: 0.6rem; align-items: baseline;
  padding: 0.3rem 0; border-bottom: 1px solid var(--linie);
}
.mini-liste li:last-child { border-bottom: none; }
.mini-liste a { text-decoration: none; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-liste a:hover { text-decoration: underline; }

/* --------------------------------------------------------------- Buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  min-height: var(--touch); padding: 0.7rem 1.25rem;
  border-radius: var(--radius-pill); border: 1px solid transparent;
  font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform 0.12s ease, background 0.12s ease, opacity 0.12s ease;
}
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-primary { background: var(--black); color: var(--yellow); }
.btn-primary:hover:not(:disabled) { background: #1a1a1a; }
.btn-sekundaer { background: var(--white); border-color: rgba(0,0,0,0.14); }
.btn-sekundaer:hover { background: rgba(255,255,255,0.9); }
.btn-quiet { background: transparent; border-color: rgba(0,0,0,0.14); font-weight: 600; }
.btn-quiet:hover { background: rgba(255,255,255,0.55); }
.btn-gefahr { background: transparent; border-color: rgba(192,57,43,0.4); color: var(--error); font-weight: 600; }
.btn-gefahr:hover { background: rgba(192,57,43,0.08); }
.btn-breit { width: 100%; }
.btn-small { min-height: 36px; padding: 0.35rem 0.85rem; font-size: 0.85rem; }

.btn-x {
  background: none; border: none; cursor: pointer; font-size: 1.1rem; line-height: 1;
  color: var(--text-quiet); padding: 0 0.25rem;
}
.btn-x:hover { color: var(--error); }

.link-quiet { font-size: 0.85rem; color: var(--text-mid); text-decoration: underline; }
.link-quiet:hover { color: var(--text); }
.site-user .link-quiet { color: var(--kopf-leise); }
.site-user .link-quiet:hover { color: var(--kopf-text); }
.site-user .btn-quiet { color: inherit; border-color: var(--kopf-linie); }
.site-user .btn-quiet:hover { background: var(--kopf-huelle); }
.als-link { background: none; border: none; padding: 0; cursor: pointer; font: inherit; }
.link-zurueck { display: inline-block; font-size: 0.85rem; text-decoration: none; margin-bottom: 0.75rem; color: var(--text-mid); }
.link-zurueck:hover { text-decoration: underline; }

.aktionen { display: flex; gap: 0.75rem; margin-top: 1.5rem; flex-wrap: wrap; }
.zelle-aktion { text-align: right; white-space: nowrap; }

/* -------------------------------------------------------------- Formular */

.formular { display: block; }
.formular label, .feld-label {
  display: block; font-size: 0.875rem; font-weight: 700; margin-bottom: 0.45rem;
}
.label-hinweis { font-weight: 400; color: var(--text-quiet); font-size: 0.8rem; }

input[type="text"], input[type="password"], input[type="number"],
input[type="search"], select, textarea {
  width: 100%; padding: 0.75rem 0.9rem; margin-bottom: var(--space-block);
  font: inherit; color: var(--text);
  background: rgba(255,255,255,0.75);
  backdrop-filter: var(--blur-soft);
  -webkit-backdrop-filter: var(--blur-soft);
  border: 1px solid rgba(0,0,0,0.14); border-radius: var(--radius-input);
}
textarea { resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus {
  outline: 3px solid rgba(255,234,0,0.75); outline-offset: 1px; border-color: rgba(0,0,0,0.3);
}

.feldgruppe { border: none; padding: 0; margin: 0 0 var(--space-block-md); }
.feldgruppe legend { font-size: 0.875rem; font-weight: 700; padding: 0; margin-bottom: 0.5rem; }

.option-kachel {
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0.7rem 0.9rem; margin-bottom: 0.5rem;
  background: rgba(255,255,255,0.7); border: 1px solid rgba(0,0,0,0.12);
  border-radius: var(--radius-input); cursor: pointer; font-weight: 500;
}
.option-kachel:hover { background: rgba(255,255,255,0.9); }
.option-kachel input { margin: 0; width: auto; accent-color: var(--black); }
.option-kachel:has(input:checked) { border-color: var(--black); background: var(--glass-yellow); }

.zeile { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: flex-end; }
.zeile > * { flex: 1 1 160px; }
.zeile > .schmal { flex: 0 1 150px; }
/* Ohne diese Regel schiebt der Innenabstand der Eingabefelder den Knopf daneben
   nach unten – er stand dann tiefer als das Feld, zu dem er gehört. */
.zeile input, .zeile select, .zeile textarea { margin-bottom: 0; }
.zeile label { margin-bottom: 0.45rem; }
.zeile-knopf { display: flex; align-items: flex-end; }

/* Aktionsleiste direkt unter einer Karte braucht keinen doppelten Abstand */
.karte + .aktionen { margin-top: 0; }
.aktionen-hinweis { margin-top: 0.75rem; }

/* ----------------------------------------------------------------- Flash */

.flash-stack { margin-bottom: var(--space-block-md); }
.flash {
  padding: 0.85rem 1.1rem; margin-bottom: 0.6rem;
  border-radius: var(--radius-el); font-size: 0.9rem; font-weight: 500;
  border: 1px solid var(--glass-border); background: var(--glass-white);
  backdrop-filter: var(--blur-soft); -webkit-backdrop-filter: var(--blur-soft);
}
.flash-error { border-color: rgba(192,57,43,0.35); background: rgba(255,235,233,0.85); color: #7d2018; }
.flash-success { border-color: rgba(26,138,63,0.30); background: rgba(232,248,238,0.85); color: #14612d; }

/* --------------------------------------------------------------- Tabelle */

.tabelle { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.tabelle th {
  text-align: left; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-mid); padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--linie);
}
.tabelle td { padding: 0.6rem; border-bottom: 1px solid var(--linie); vertical-align: middle; }
.tabelle tr:last-child td { border-bottom: none; }
.tabelle a { font-weight: 600; }
.tabelle-wrap { overflow-x: auto; }

.badge {
  display: inline-block; padding: 0.2rem 0.6rem; border-radius: var(--radius-pill);
  font-size: 0.72rem; font-weight: 700; background: rgba(0,0,0,0.07);
}
.badge-rolle { background: rgba(0,0,0,0.10); }
.badge-abgabe { background: var(--yellow); border: 1px solid rgba(0,0,0,0.12); }
.badge-offen { background: rgba(192,57,43,0.15); color: #7d2018; }
.badge-erledigt { background: rgba(26,138,63,0.16); color: #14612d; }

.stern { color: var(--text-quiet); }
.stern-aktiv { color: #d39b00; }

.stat-raster { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin-bottom: var(--space-block-md); }
.stat {
  background: rgba(255,255,255,0.7); border: 1px solid var(--glass-border);
  border-radius: var(--radius-el); padding: 0.9rem 1rem;
}
.stat-zahl { font-size: 1.6rem; font-weight: 800; line-height: 1.1; }
.stat-text { font-size: 0.78rem; color: var(--text-mid); }

.karte-warnung { border-color: rgba(192,57,43,0.35); background: rgba(255,244,242,0.75); }
.karte-hinweis { padding: 1rem 1.15rem; margin-bottom: var(--space-block-md); }
.karte-hinweis p:last-child { margin-bottom: 0; }

.visuell-versteckt {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.balken {
  width: 100%; min-width: 80px; height: 8px; border-radius: var(--radius-pill);
  background: rgba(0,0,0,0.08); overflow: hidden;
}
.balken span {
  display: block; height: 100%; background: var(--black); border-radius: var(--radius-pill);
}

/* ------------------------------------------------------------------ Chat */

.chat-layout {
  display: grid; grid-template-columns: 280px 1fr; gap: 1.25rem;
  width: min(1200px, 100%); margin: 0 auto; padding: 1.25rem;
  flex: 1;
  /* stretch statt start: Die Chatkarte fuellt damit genau den Platz, den das
     Fenster uebrig laesst - ohne dass irgendwo eine Kopfhoehe geraten wird.
     Die Seitenleiste haelt sich mit align-self: start davon frei.

     Ausdruecklich KEIN min-height:0: Das wuerde die Grid-Zeile auf das Fenster
     begrenzen, sodass der Verlauf innerhalb der Karte scrollt. Gewuenscht ist
     das Gegenteil – die Karte waechst mit der Antwort, und die Seite scrollt.
     (min-height:0 war zugleich die Ursache dafuer, dass die Karte frueher ueber
     die Fusszeile lief: <main> durfte kleiner werden als sein Inhalt.) */
  align-items: stretch;
}
/* Meldungen sind direkte Kinder des Grids – ohne diese Regel belegen sie
   eine Spalte und schieben Seitenleiste und Chatfenster durcheinander. */
.chat-layout > .flash-stack { grid-column: 1 / -1; margin-bottom: 0; }

/* Die Seitenleiste selbst scrollt NICHT – sonst wandert der Abgabe-Knopf aus
   dem Bild, sobald jemand viele Chats hat. Stattdessen scrollt nur die
   Chatliste in der Mitte; Kopf und Aktionen bleiben stehen. */
.chat-seitenleiste {
  background: var(--glass-white); backdrop-filter: var(--blur-soft);
  -webkit-backdrop-filter: var(--blur-soft);
  border: 1px solid var(--glass-border); border-radius: var(--radius-card);
  box-shadow: var(--glass-shadow); padding: 1.1rem 1.15rem;
  align-self: start; position: sticky; top: 1.25rem;
  max-height: calc(100vh - 3rem);
  display: flex; flex-direction: column; overflow: hidden;
}
.seitenleiste-kopf { flex: 0 0 auto; }
.seitenleiste-fuss { flex: 0 0 auto; }
.seitenleiste-titel { font-size: 1rem; margin-bottom: 0.75rem; }
.seitenleiste-block { margin-top: var(--space-block); padding-top: var(--space-block); border-top: 1px solid var(--linie); }
.datei-liste { max-height: 8rem; overflow-y: auto; }
.seitenleiste-block > * + * { margin-top: 0.55rem; }
.seitenleiste-liste {
  list-style: none; margin: 0.75rem 0 0; padding: 0 0.25rem 0 0; font-size: 0.85rem;
  flex: 1 1 auto; overflow-y: auto; min-height: 2.5rem;
}
.seitenleiste-liste li { padding: 0.4rem 0.5rem; border-radius: var(--radius-input); }
.seitenleiste-liste li.aktiv { background: var(--glass-yellow); }
.seitenleiste-liste a { display: block; text-decoration: none; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.datei-liste { list-style: none; margin: 0 0 0.6rem; padding: 0; font-size: 0.8rem; }
.datei-liste li { display: flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0; border-bottom: 1px solid var(--linie); }
.datei-liste li form { margin-left: auto; }
.datei-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 9rem; font-weight: 600; }
.datei-knopf { display: block; cursor: pointer; }
.datei-knopf input { display: none; }
.datei-knopf span {
  display: block; text-align: center; padding: 0.5rem 0.75rem; font-size: 0.85rem; font-weight: 700;
  background: var(--white); border: 1px dashed rgba(0,0,0,0.25); border-radius: var(--radius-input);
}
.datei-knopf:hover span { border-color: var(--black); }
.datei-formular label { margin-bottom: 0.35rem; }

.chat-haupt {
  display: flex; flex-direction: column;
  /* stretch gibt der Karte mindestens die Resthoehe des Fensters; laengere
     Antworten lassen sie darueber hinaus wachsen. Keine vh-Rechnung noetig. */
  height: auto;
  background: var(--glass-white); backdrop-filter: var(--blur-strong);
  -webkit-backdrop-filter: var(--blur-strong);
  border: 1px solid var(--glass-border); border-radius: var(--radius-card);
  box-shadow: var(--glass-shadow); overflow: hidden;
}
.chat-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.5rem; border-bottom: 1px solid var(--linie);
}
.chat-kopf h1 { font-size: 1.15rem; margin: 0; }

.nachrichten { flex: 1; overflow-y: auto; padding: 1.25rem 1.5rem; }
.leer-hinweis { text-align: center; color: var(--text-mid); padding: 2.5rem 1rem; }

.nachricht { margin-bottom: 1.25rem; max-width: 46rem; }
.nachricht-rolle {
  font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-quiet); margin-bottom: 0.3rem;
}
.nachricht-text {
  padding: 0.9rem 1.1rem; border-radius: var(--radius-el);
  background: rgba(255,255,255,0.8); border: 1px solid rgba(0,0,0,0.08);
}
.nachricht-user { margin-left: auto; }
.nachricht-user .nachricht-rolle { text-align: right; }
.nachricht-user .nachricht-text { background: var(--glass-yellow); border-color: rgba(0,0,0,0.12); }
.nachricht-text > *:last-child { margin-bottom: 0; }
.nachricht-text p { margin: 0 0 0.7rem; }
.nachricht-text ul, .nachricht-text ol { margin: 0 0 0.7rem; padding-left: 1.25rem; }
.nachricht-text li { margin-bottom: 0.25rem; }
.nachricht-text h1, .nachricht-text h2, .nachricht-text h3 { font-size: 1rem; margin: 0.9rem 0 0.4rem; }
.nachricht-text code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.85em;
  background: rgba(0,0,0,0.06); padding: 0.1rem 0.35rem; border-radius: 6px;
}
.nachricht-text pre {
  background: rgba(0,0,0,0.05); padding: 0.85rem 1rem; border-radius: var(--radius-input);
  overflow-x: auto; margin: 0 0 0.7rem;
}
.nachricht-text pre code { background: none; padding: 0; }
.nachricht-text blockquote {
  margin: 0 0 0.7rem; padding: 0.35rem 0 0.35rem 0.9rem;
  border-left: 3px solid var(--yellow); color: var(--text-mid);
}
.nachricht-text table { width: 100%; border-collapse: collapse; font-size: 0.88rem; margin-bottom: 0.7rem; }
.nachricht-text th, .nachricht-text td { border: 1px solid var(--linie); padding: 0.4rem 0.55rem; text-align: left; }
.nachricht-roh { white-space: pre-wrap; margin: 0; }

.bild-antwort { margin: 0; }
.bild-antwort img {
  display: block; width: 100%; max-width: 520px; height: auto;
  border-radius: var(--radius-input); border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.6);
}
.bild-antwort figcaption {
  margin-top: 0.5rem; font-size: 0.82rem; color: var(--text-mid);
}
.nachricht-fehler { color: var(--error); font-weight: 600; margin: 0.5rem 0 0; }

.verfassen { padding: 1rem 1.5rem 1.25rem; border-top: 1px solid var(--linie); background: rgba(255,255,255,0.5); }
.verfassen textarea { margin-bottom: 0.6rem; }
.verfassen-leiste { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }

/* --------------------------------------------------------------- Matrix */

.kriterium {
  border: 1px solid var(--linie); border-radius: var(--radius-el);
  padding: 1rem 1.15rem; margin-bottom: var(--space-block);
  background: rgba(255,255,255,0.55);
}
.kriterium-kopf { display: flex; gap: 0.75rem; align-items: flex-end; margin-bottom: var(--space-block); }
.kriterium-kopf .titel { flex: 1; }
.kriterium-kopf .punkte { flex: 0 0 110px; }
.kriterium-kopf input { margin-bottom: 0; }
.kriterium-nummer { font-variant-numeric: tabular-nums; }
.kriterium-weg {
  flex: 0 0 auto; height: 44px; width: 36px; font-size: 1.3rem;
  border-radius: var(--radius-input);
}
.kriterium-weg:hover { background: rgba(192,57,43,0.08); }
#kriterium-plus { margin-top: 0.25rem; }

.bewertung {
  border: 1px solid var(--glass-border); border-radius: var(--radius-el);
  background: rgba(255,255,255,0.7); padding: 1.1rem 1.25rem; margin-bottom: var(--space-block);
}
.bewertung-kopf { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.75rem; }

.ordner { margin-bottom: var(--space-block-md); }
.ordner-kopf { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.5rem; }

.zugangs-tabelle { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.85rem; }

/* --------------------------------------------------------------- Responsive */

@media (max-width: 900px) {
  .chat-layout { grid-template-columns: 1fr; }
  .chat-seitenleiste { position: static; max-height: none; overflow: visible; }
  .seitenleiste-liste { max-height: 14rem; }
  .chat-haupt { min-height: 70vh; }
}

@media (max-width: 640px) {
  .site-header { padding: 0.7rem 1rem; gap: 0.5rem 0.75rem; }
  .logo-schule { display: none; }
  .brand-text { font-size: 0.95rem; }
  .site-nav { width: 100%; order: 3; margin-left: 0; }
  .site-user { margin-left: auto; }
  .user-name { display: none; }
  .karte { padding: 1.15rem 1.15rem 1.35rem; border-radius: var(--radius-el); }
  .page { padding: 1rem; }
  .nachricht { max-width: 100%; }
  .nachrichten, .verfassen, .chat-kopf { padding-left: 1rem; padding-right: 1rem; }
}

@media print {
  .site-header, .site-footer, .btn, .verfassen, .chat-seitenleiste { display: none !important; }
  body { background: var(--white); }
  .karte, .bewertung { box-shadow: none; border-color: #ccc; backdrop-filter: none; }
}

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

/* --------------------------------------------------------------- Übungsbereich */

.schritt-kopf { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: var(--space-block-md); }
.schritt-kopf h2 { margin-bottom: 0.25rem; }
.schritt-kopf p { margin-bottom: 0; }
.schritt-zahl {
  flex: 0 0 auto; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: var(--black); color: var(--yellow);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.05rem;
}

.kriterien-liste { margin: 0; padding-left: 1.25rem; }
.kriterien-liste > li { margin-bottom: var(--space-block); }

.kriterium-hilfe {
  display: flex; gap: 0.55rem; align-items: baseline;
  font-size: 0.85rem; color: var(--text-mid); margin-top: 0.3rem;
}
.marke {
  flex: 0 0 auto; font-size: 0.68rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.06em; padding: 0.12rem 0.5rem; border-radius: var(--radius-pill);
}
.marke-gut { background: rgba(26,138,63,0.16); color: #14612d; }
.marke-schwach { background: rgba(192,57,43,0.14); color: #7d2018; }

.bewerten-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: start; }
.bewerten-formular { position: sticky; top: 5rem; }

.kriterium-frage {
  border: 1px solid var(--linie); border-radius: var(--radius-el);
  padding: 0.9rem 1rem; margin-bottom: var(--space-block);
  background: rgba(255,255,255,0.55);
}
.kriterium-frage legend { font-size: 0.95rem; font-weight: 700; padding: 0 0.35rem; }

.punkte-wahl { display: flex; gap: 0.4rem; flex-wrap: wrap; margin: 0.75rem 0 0.4rem; }
.punkt { cursor: pointer; }
.punkt input { position: absolute; opacity: 0; width: 0; height: 0; }
.punkt span {
  display: flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: var(--radius-input);
  background: var(--white); border: 1px solid rgba(0,0,0,0.16);
  font-weight: 700; font-variant-numeric: tabular-nums;
}
.punkt:hover span { border-color: var(--black); }
.punkt input:checked + span { background: var(--black); color: var(--yellow); border-color: var(--black); }
.punkt input:focus-visible + span { outline: 3px solid rgba(255,234,0,0.75); outline-offset: 2px; }

.punkt-zelle { font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; }
.tabelle tfoot th { border-top: 2px solid var(--linie); padding: 0.6rem; text-transform: none; font-size: 0.95rem; color: var(--text); }

@media (max-width: 900px) {
  .bewerten-layout { grid-template-columns: 1fr; }
  .bewerten-formular { position: static; }
}

.ablauf { display: grid; gap: 0.85rem; margin: var(--space-block) 0 var(--space-block-md); }
.ablauf-schritt {
  display: flex; gap: 0.85rem; align-items: flex-start;
  padding: 0.9rem 1rem; border: 1px solid var(--linie);
  border-radius: var(--radius-el); background: rgba(255,255,255,0.55);
}
.ablauf-schritt p { margin: 0.25rem 0 0; }
.ablauf-schritt .btn { margin-top: 0.6rem; }
.ablauf-nummer {
  flex: 0 0 auto; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--glass-yellow); border: 1px solid rgba(0,0,0,0.14);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.85rem;
}

/* Vier Beispiele sollen nebeneinander passen, ohne dass eines allein
   in die nächste Zeile rutscht. */
.kachel-raster-schmal { grid-template-columns: repeat(auto-fit, minmax(195px, 1fr)); }
.kachel-raster-schmal .kachel { padding: 1rem 1.05rem 1.1rem; }
.kachel-raster-schmal h2 { font-size: 1rem; }

/* Modellwahl in der Schreibleiste – unauffällig, aber jederzeit erreichbar */
.modellwahl { display: flex; align-items: center; gap: 0.5rem; margin-right: auto; }
.modellwahl-text {
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-quiet);
}
.modellwahl select {
  width: auto; margin: 0; padding: 0.3rem 0.6rem; font-size: 0.82rem;
  border-radius: var(--radius-pill); background: rgba(255,255,255,0.8);
}
@media (max-width: 640px) {
  .verfassen-leiste { flex-wrap: wrap; }
  .modellwahl { width: 100%; margin-right: 0; }
  .modellwahl select { flex: 1; }
}

.vorschlaege { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-top: 0.85rem; }
.vorschlaege .hinweis-klein { margin-right: 0.25rem; }

/* ------------------------------------------------------------------ Quellen */

.quellen {
  margin-top: 0.85rem; padding: 0.9rem 1.05rem;
  background: rgba(255,255,255,0.62); border: 1px solid var(--linie);
  border-radius: var(--radius-el);
}
.quellen-titel {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text-mid); margin: 0 0 0.2rem;
}
.quelle { padding: 0.7rem 0; border-top: 1px solid var(--linie); }
.quelle:first-of-type { border-top: none; }
.quelle-kopf { display: flex; gap: 0.7rem; align-items: flex-start; }
.quelle-nummer {
  flex: 0 0 auto; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--black); color: var(--yellow);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 800; font-variant-numeric: tabular-nums;
}
.quelle-text { min-width: 0; }
.quelle-link { font-weight: 600; word-break: break-word; }
.quelle-meta { font-size: 0.76rem; color: var(--text-quiet); margin-top: 0.1rem; }
.quelle-ausschnitt { font-size: 0.82rem; color: var(--text-mid); margin: 0.35rem 0 0; }

.quelle-pruefung { margin: 0.5rem 0 0 2.2rem; }
.quelle-pruefung summary {
  cursor: pointer; font-size: 0.8rem; font-weight: 700; color: var(--text-mid);
  padding: 0.2rem 0;
}
.quelle-pruefung summary:hover { color: var(--text); }
.quelle-pruefung[open] summary { margin-bottom: 0.5rem; }
.quelle-pruefung label { font-size: 0.8rem; margin-bottom: 0.25rem; }
.quelle-pruefung input { margin-bottom: 0.6rem; padding: 0.5rem 0.7rem; font-size: 0.88rem; }

/* Quellennummern im Fließtext */
.nachricht-text .quellen-marke {
  display: inline-block; min-width: 1.05rem; padding: 0 0.25rem;
  margin: 0 0.06rem; border-radius: 4px; text-align: center;
  background: rgba(0,0,0,0.08); font-size: 0.72em; font-weight: 700;
  vertical-align: 0.25em; text-decoration: none; color: inherit;
}
.nachricht-text a.quellen-marke:hover { background: var(--yellow); }

.pruefung-anzeige {
  display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.6rem;
  margin: 0.4rem 0 0; font-size: 0.82rem;
}
.pruefung-anzeige dt { font-weight: 700; color: var(--text-mid); }
.pruefung-anzeige dd { margin: 0; }

/* Suchschalter in der Schreibleiste */
.suchschalter { display: flex; align-items: center; gap: 0.45rem; cursor: pointer; }
.suchschalter input { position: absolute; opacity: 0; width: 0; height: 0; }
.suchschalter-knopf {
  width: 2.1rem; height: 1.15rem; border-radius: var(--radius-pill);
  background: rgba(0,0,0,0.16); position: relative; transition: background 0.15s ease;
  flex: 0 0 auto;
}
.suchschalter-knopf::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: calc(1.15rem - 4px); height: calc(1.15rem - 4px);
  border-radius: 50%; background: var(--white); transition: transform 0.15s ease;
}
.suchschalter input:checked + .suchschalter-knopf { background: var(--black); }
.suchschalter input:checked + .suchschalter-knopf::after { transform: translateX(0.95rem); }
.suchschalter input:focus-visible + .suchschalter-knopf {
  outline: 3px solid rgba(255,234,0,0.75); outline-offset: 2px;
}
.suchschalter-text {
  font-size: 0.78rem; font-weight: 700; color: var(--text-mid); white-space: nowrap;
}

/* Urteil über eine Quelle: zwei kurze Entscheidungen statt eines Fließtexts */
.urteil { margin-bottom: var(--space-block); }
.urteil legend { font-size: 0.82rem; font-weight: 700; margin-bottom: 0.4rem; }
.urteil-wahl {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.35rem 0.7rem; margin: 0 0.35rem 0.35rem 0;
  background: rgba(255,255,255,0.75); border: 1px solid rgba(0,0,0,0.14);
  border-radius: var(--radius-pill); cursor: pointer; font-size: 0.85rem;
}
.urteil-wahl input { width: auto; margin: 0; accent-color: var(--black); }
.urteil-wahl:has(input:checked) { border-color: var(--black); background: var(--glass-yellow); }
.quelle-meta .marke { margin-left: 0.35rem; }

/* Prompt-Protokoll: zwei Fassungen nebeneinander */
.protokoll-auf { cursor: pointer; font-size: 0.85rem; font-weight: 700; color: var(--text-mid); }
.protokoll-auf:hover { color: var(--text); }
.vergleich { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 0.85rem; }
.vergleich h3 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em;
                color: var(--text-mid); margin-bottom: 0.4rem; }
.prompt-text {
  white-space: pre-wrap; word-break: break-word; margin: 0;
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.78rem; line-height: 1.5;
  background: rgba(255,255,255,0.7); border: 1px solid var(--linie);
  border-radius: var(--radius-input); padding: 0.7rem 0.85rem;
  max-height: 22rem; overflow-y: auto;
}
@media (max-width: 800px) { .vergleich { grid-template-columns: 1fr; } }

/* Sammelaktionen über der Kontenliste */
.sammelleiste {
  display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center;
  padding: 0.7rem 0.85rem; margin-bottom: 0.85rem;
  background: rgba(255,255,255,0.6); border: 1px solid var(--linie);
  border-radius: var(--radius-el);
}
.sammelleiste .hinweis-klein { margin-right: auto; }
.option-inline { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; }
.option-inline input { width: auto; margin: 0; accent-color: var(--black); }
.konto-wahl, #alle-waehlen { width: auto; margin: 0; accent-color: var(--black); }

/* Erscheint nur, wenn jemand während einer laufenden Antwort nach oben scrollt.
   Solange der Knopf nicht angetippt wird, bleibt die Ansicht, wo sie ist. */
.nach-unten {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 8.5rem; z-index: 5;
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.5rem 1rem; border-radius: var(--radius-pill);
  background: var(--black); color: var(--yellow);
  border: none; font: inherit; font-size: 0.85rem; font-weight: 700;
  box-shadow: 0 6px 18px rgba(0,0,0,0.22); cursor: pointer;
}
.nach-unten[hidden] { display: none; }
.nach-unten:active { transform: translateX(-50%) scale(0.97); }
.chat-haupt { position: relative; }

@media (max-width: 900px) {
  /* Auf dem Handy scrollt die Liste selbst – sonst wandert die ganze Seite mit. */
  .nachrichten { max-height: 60vh; }
  .nach-unten { bottom: 7.5rem; }
}

/* Werkzeuge der Verwaltung: gleich breite Kacheln statt einer Knopfzeile,
   die bei acht Einträgen unsauber umbricht. */
.werkzeuge {
  display: grid; gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin: 0 0 var(--space-block-lg);
}
.werkzeug {
  display: flex; flex-direction: column; gap: 0.15rem;
  padding: 0.85rem 1rem; text-decoration: none; color: inherit;
  background: var(--glass-white); border: 1px solid var(--glass-border);
  border-radius: var(--radius-el);
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.werkzeug:hover { transform: translateY(-1px); border-color: rgba(0,0,0,0.28); }
.werkzeug-name { font-weight: 700; font-size: 0.95rem; }
.werkzeug-text { font-size: 0.8rem; color: var(--text-mid); }
.werkzeug-haupt { background: var(--black); border-color: var(--black); }
.werkzeug-haupt .werkzeug-name { color: var(--yellow); }
.werkzeug-haupt .werkzeug-text { color: rgba(255,255,255,0.72); }
.werkzeug-gefahr { border-color: rgba(192,57,43,0.35); background: rgba(255,244,242,0.75); }
.werkzeug-gefahr .werkzeug-name { color: var(--error); }

/* Handreichung in der Verwaltung: Kapitelliste neben dem Text */
.handreichung-layout { display: grid; grid-template-columns: 15rem 1fr; gap: 1.5rem; align-items: start; }
.handreichung-inhalt {
  position: sticky; top: 5rem; background: var(--glass-white);
  border: 1px solid var(--glass-border); border-radius: var(--radius-el);
  padding: 1rem 1.1rem; max-height: calc(100vh - 7rem); overflow-y: auto;
}
.inhalt-marke {
  font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-quiet); margin: 0 0 0.5rem; font-weight: 700;
}
.handreichung-inhalt ol { margin: 0 0 0.85rem; padding-left: 1.1rem; font-size: 0.85rem; }
.handreichung-inhalt li { margin-bottom: 0.3rem; }
.handreichung-inhalt a { text-decoration: none; }
.handreichung-inhalt a:hover { text-decoration: underline; }

.handreichung-text { line-height: 1.65; }
.handreichung-text h1 { display: none; }        /* Titel steht schon im Seitenkopf */
.handreichung-text h2 {
  font-size: 1.35rem; margin: 2rem 0 0.6rem; padding-top: 0.9rem;
  border-top: 1px solid var(--linie); scroll-margin-top: 5rem;
}
.handreichung-text h2:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.handreichung-text h3 { font-size: 1rem; margin: 1.3rem 0 0.4rem; }
.handreichung-text table { width: 100%; border-collapse: collapse; font-size: 0.88rem; margin-bottom: 1rem; }
.handreichung-text th, .handreichung-text td {
  border: 1px solid var(--linie); padding: 0.45rem 0.6rem; text-align: left; vertical-align: top;
}
.handreichung-text blockquote {
  margin: 1rem 0; padding: 0.7rem 1rem; border-left: 3px solid var(--yellow);
  background: rgba(255,255,255,0.55); border-radius: 0 var(--radius-input) var(--radius-input) 0;
}
.handreichung-text blockquote p:last-child { margin-bottom: 0; }
.handreichung-text hr { border: none; border-top: 1px solid var(--linie); margin: 1.5rem 0; }

@media (max-width: 900px) {
  .handreichung-layout { grid-template-columns: 1fr; }
  .handreichung-inhalt { position: static; max-height: none; }
}
@media print {
  .handreichung-inhalt { display: none; }
  .handreichung-layout { display: block; }
}

.kosten-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: start; }
@media (max-width: 900px) { .kosten-spalten { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ Demo */
/* Nur im Demo-Betrieb sichtbar (KOL_DEMO=1). Im Pilotbetrieb totes Blatt. */

.page-mittel { width: min(760px, 100%); }

.demo-band {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.85rem;
  padding: 0.55rem 1.25rem;
  font-size: 0.82rem;
  color: var(--text-mid);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: var(--blur-soft);
  -webkit-backdrop-filter: var(--blur-soft);
  border-bottom: 1px solid var(--linie);
}

.demo-marke {
  padding: 0.1rem 0.6rem;
  border-radius: var(--radius-pill);
  background: var(--yellow);
  color: var(--black);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.demo-text { flex: 1 1 16rem; }
.demo-links { display: flex; gap: 0.85rem; flex-wrap: wrap; }
.demo-text strong { color: var(--text); }
.demo-zaehler { color: var(--text-quiet); white-space: nowrap; }
.demo-link { color: var(--text-mid); text-decoration: underline; white-space: nowrap; }

.tour-liste { margin: 0 0 var(--space-block); padding-left: 1.25rem; }
.tour-liste li { margin-bottom: 0.75rem; }
.tour-liste-schlicht { list-style: none; padding-left: 0; }
.tour-liste-schlicht li {
  margin-bottom: 0.6rem;
  padding-left: 1.1rem;
  position: relative;
}
.tour-liste-schlicht li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--text-quiet);
}

/* Systemprompt offenlegen – das Vertrauensargument der Anwendung */
.prompt-einblick { margin: 0 0 var(--space-block); }
.prompt-einblick summary {
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--text-mid);
  padding: 0.2rem 0;
}
.prompt-text {
  margin: 0.5rem 0 0;
  padding: 0.75rem;
  max-height: 16rem;
  overflow: auto;
  border-radius: var(--radius-input);
  background: rgba(0, 0, 0, 0.04);
  font-size: 0.78rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Beispiel einer Zugangskarte – reine Ansicht, keine echten Daten */
.karten-vorschau { margin: var(--space-block) 0 0; }
.karten-muster {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 24rem;
  padding: 1rem 1.1rem;
  border: 1px dashed var(--linie);
  border-radius: var(--radius-el);
  background: var(--white);
}
.karten-muster-text { flex: 1; }
.karten-muster-name { margin: 0 0 0.5rem; font-weight: 700; }
.karten-muster-zeile {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 0.2rem;
  font-size: 0.82rem;
}
.karten-muster-zeile span { color: var(--text-quiet); }
.karten-muster-zeile strong { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.karten-muster-fuss { margin: 0.55rem 0 0; font-size: 0.72rem; color: var(--text-quiet); }
.karten-muster-qr {
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: var(--radius-input);
  background: rgba(0, 0, 0, 0.06);
  font-size: 0.72rem;
  color: var(--text-quiet);
}

@media (max-width: 640px) {
  /* Am Handy umbricht das Band auf vier Zeilen. Klebend wuerde es dann ein
     Viertel des Bildschirms dauerhaft belegen – also nur oben mitlaufen. */
  .demo-band {
    position: static;
    padding: 0.5rem 1rem;
    font-size: 0.74rem;
    line-height: 1.35;
  }
  .demo-text { flex: 1 1 100%; }
  .demo-zaehler { white-space: normal; }
}


/* ------------------------------------------------- Demo: Einstieg und Tour */

.demo-hero {
  text-align: center;
  padding: var(--space-block-lg) 1rem var(--space-block);
}
.demo-hero h1 { margin: 0.35rem 0 0.5rem; font-size: clamp(1.9rem, 6vw, 2.6rem); }
.demo-hero-satz {
  max-width: 30rem;
  margin: 0 auto var(--space-block-lg);
  color: var(--text-mid);
}
.demo-hero-start { margin-bottom: 0.75rem; }

.btn-gross {
  font-size: 1.05rem;
  padding: 0.9rem 2.4rem;
  min-height: var(--touch);
}

/* Die drei Schritte als Raster – zeigt vor dem Start, worauf es hinauslaeuft */
.schritt-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1rem;
  margin-bottom: var(--space-block-lg);
}
.schritt-karte {
  padding: 1.25rem;
  border-radius: var(--radius-el);
  background: var(--glass-white);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--blur-soft);
  -webkit-backdrop-filter: var(--blur-soft);
}
.schritt-karte h2 { font-size: 1.05rem; margin: 0.6rem 0 0.35rem; }
.schritt-karte p { margin: 0; font-size: 0.88rem; color: var(--text-mid); }

.tour-nummer {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
  background: var(--yellow);
  color: var(--black);
  font-weight: 800;
  font-size: 0.95rem;
}

/* Wegweiserkarte innerhalb der Tour */
.karte-tour { border-left: 4px solid var(--yellow); }
.tour-kopf { display: flex; gap: 0.9rem; align-items: flex-start; }
.tour-kopf h2 { margin: 0 0 0.35rem; font-size: 1.1rem; }
.tour-kopf p:last-child { margin-bottom: 0; }
.tour-aktion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-top: var(--space-block);
}
.tour-fertig { font-weight: 700; margin-right: 0.35rem; }

/* Phasen, die es gibt, die die Demo aber nicht anbietet */
.kachel-gesperrt { opacity: 0.55; }
.kachel-gesperrt .kachel-titel { color: var(--text-mid); }
.kachel-sperrgrund { margin: 0; }
.badge-gesperrt {
  background: rgba(0, 0, 0, 0.08);
  color: var(--text-mid);
}

.prompt-kopf { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.5rem; }
.prompt-text-gross { max-height: 26rem; font-size: 0.8rem; }

@media (max-width: 640px) {
  .demo-hero { padding-top: var(--space-block); }
  .tour-aktion .btn { width: 100%; }
  .tour-fertig { width: 100%; }
}