/* Wissensagent. Ruhige Arbeitsoberfläche, keine Show.
 *
 * Zwei Vorgaben aus dem Bauauftrag prägen das Ganze: Lesbarkeit bei 960 Pixel
 * Freigabebreite (deshalb Grundschrift 16 px und Chat 17 px, eine Stufe größer als
 * üblich), und nichts im Bild, was nach Werkzeugkasten aussieht. Kein Debug, keine
 * Konfiguration, keine fremden Namen.
 */
:root {
  --bg: #070a11;
  --bg2: #0b1019;
  --panel: #111826;
  --panel2: #161f30;
  --line: rgba(125, 155, 205, .16);
  --line2: rgba(125, 155, 205, .30);
  --ink: #e8eef8;
  --ink-dim: #9fb0c9;
  --ink-faint: #6b7d97;
  --blau: #6ea8ff;
  --blau-tief: #3d6fd4;
  --gruen: #35c98f;
  --amber: #e8b153;
  --rot: #ef6b6b;
  --r: 14px;
  --fs: 16px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background:
    radial-gradient(900px 600px at 85% -8%, rgba(110, 168, 255, .10), transparent 62%),
    radial-gradient(800px 560px at 4% 106%, rgba(53, 201, 143, .08), transparent 60%),
    var(--bg);
  color: var(--ink);
  font: var(--fs)/1.6 "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
button { font-family: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
.muted { color: var(--ink-dim); }

/* ---------------------------------------------------------------- Rahmen */
.app { display: grid; grid-template-rows: auto 1fr; height: 100vh; height: 100dvh; }

.topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 22px; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(11, 16, 25, .95), rgba(11, 16, 25, .6));
  backdrop-filter: blur(12px);
}
.brand { display: flex; align-items: center; gap: 12px; font-weight: 650; font-size: 17px; }
.brand small { display: block; font-weight: 400; color: var(--ink-dim); font-size: 12px; margin-top: -3px; }
.brand .mark, .wer .mark {
  width: 26px; height: 26px; border-radius: 8px; flex: none;
  background: linear-gradient(135deg, #7cc4ff, #5b7cff);
  box-shadow: 0 0 16px rgba(110, 168, 255, .45);
}
.wer .mark { width: 16px; height: 16px; border-radius: 5px; display: inline-block; vertical-align: -3px; }
.grow { flex: 1; }
.pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px;
  border-radius: 999px; border: 1px solid var(--line2);
  font-size: 13px; color: var(--ink-dim); white-space: nowrap;
}
.pill .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--gruen);
  box-shadow: 0 0 8px var(--gruen); animation: puls 2.6s infinite;
}
@keyframes puls { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.btn {
  padding: 9px 16px; border-radius: 10px; font-size: 14.5px; font-weight: 600;
  background: linear-gradient(180deg, var(--blau), var(--blau-tief)); color: #05101f;
  transition: .16s; white-space: nowrap;
}
.btn:hover { filter: brightness(1.08); }
.btn.ghost { background: none; border: 1px solid var(--line2); color: var(--ink-dim); }
.btn.ghost:hover { color: var(--ink); border-color: var(--blau); }
.btn.small { padding: 6px 12px; font-size: 13px; }

/* ---------------------------------------------------------------- Aufteilung */
.haupt { display: grid; grid-template-columns: 1fr 300px; min-height: 0; }
.chat { display: grid; grid-template-rows: 1fr auto; min-height: 0; position: relative; }
.verlauf { overflow-y: auto; padding: 26px 30px 8px; scroll-behavior: smooth; }

/* Der Startbildschirm liegt ÜBER dem leeren Verlauf, darf aber nichts abfangen:
   sonst ist das Eingabefeld darunter zwar sichtbar, aber nicht bedienbar — die
   Demo wäre im Termin tot, bevor sie beginnt. Deshalb ist die Fläche für Klicks
   durchlässig und nur die Vorschläge nehmen sie an. */
.hero {
  position: absolute; inset: 0 0 92px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: 30px;
  transition: opacity .35s, transform .35s;
  pointer-events: none;
}
.hero .vorschlag { pointer-events: auto; }
.hero.weg { opacity: 0; pointer-events: none; transform: translateY(-12px); }
.hero-mark {
  width: 70px; height: 70px; border-radius: 20px; margin-bottom: 20px;
  background: linear-gradient(135deg, #7cc4ff, #5b7cff);
  box-shadow: 0 0 46px rgba(110, 168, 255, .45);
}
.hero h1 { margin: 0 0 8px; font-size: 30px; letter-spacing: -.3px; }
.hero p { margin: 0 0 24px; color: var(--ink-dim); max-width: 560px; }
.vorschlaege { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 720px; }
.vorschlag {
  padding: 10px 15px; border-radius: 999px; border: 1px solid var(--line2);
  background: rgba(255, 255, 255, .03); font-size: 14.5px; color: var(--ink-dim); transition: .16s;
}
.vorschlag:hover { color: var(--ink); border-color: var(--blau); background: rgba(110, 168, 255, .09); }

/* ---------------------------------------------------------------- Chat */
.msg { margin-bottom: 22px; max-width: 900px; }
.msg .wer { font-size: 12.5px; color: var(--ink-faint); margin-bottom: 6px; letter-spacing: .3px; }
.msg.user { margin-left: auto; text-align: right; }
.msg.user .blase {
  display: inline-block; text-align: left; background: rgba(110, 168, 255, .13);
  border: 1px solid rgba(110, 168, 255, .3); border-radius: var(--r); padding: 13px 17px;
  font-size: 17px;
}
.msg.agent .blase {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  padding: 18px 20px; font-size: 17px; line-height: 1.62;
}
.msg.agent .blase.luecke { border-color: rgba(232, 177, 83, .45); background: rgba(232, 177, 83, .07); }
.blase .p { margin: 0 0 12px; }
.blase .p:last-child { margin-bottom: 0; }
.blase b { color: #fff; font-weight: 650; }

.punkte i {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--blau); margin-right: 3px; animation: hopf 1.1s infinite;
}
.punkte i:nth-child(2) { animation-delay: .16s; }
.punkte i:nth-child(3) { animation-delay: .32s; }
@keyframes hopf { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }

/* Tabelle in Antworten */
.tab { width: 100%; border-collapse: collapse; margin: 6px 0 14px; font-size: 15.5px; }
.tab th, .tab td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tab th { color: var(--ink-dim); font-weight: 600; font-size: 13.5px; }

/* Fundstellen-Auszug im Volltext-Rückfall */
.fund { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin: 10px 0; background: var(--bg2); }
.fund-kopf { font-size: 13px; color: var(--blau); margin-bottom: 7px; }
.fund pre { margin: 0; white-space: pre-wrap; font: 14px/1.55 "Cascadia Code", ui-monospace, Menlo, monospace; color: var(--ink-dim); }

/* Quellen */
.quellen { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.quellen-titel { font-size: 12.5px; color: var(--ink-faint); margin-bottom: 8px; letter-spacing: .4px; text-transform: uppercase; }
.quelle {
  display: inline-flex; align-items: center; gap: 9px; margin: 0 8px 8px 0;
  padding: 8px 13px; border-radius: 9px; border: 1px solid var(--line2);
  background: rgba(110, 168, 255, .07); transition: .16s; text-align: left;
}
.quelle:hover { border-color: var(--blau); background: rgba(110, 168, 255, .16); }
.q-datei { font-size: 14.5px; color: var(--blau); font-weight: 600; }
.q-datum { font-size: 12.5px; color: var(--ink-faint); }

/* Eingabe */
.eingabe { display: flex; gap: 10px; padding: 16px 30px 22px; border-top: 1px solid var(--line); background: rgba(11, 16, 25, .6); }
.eingabe input {
  flex: 1; padding: 14px 18px; border-radius: 12px; border: 1px solid var(--line2);
  background: var(--panel); color: var(--ink); font: 17px/1.4 inherit; outline: none;
}
.eingabe input:focus { border-color: var(--blau); box-shadow: 0 0 0 3px rgba(110, 168, 255, .14); }

/* ---------------------------------------------------------------- Ablage-Leiste */
.rail { border-left: 1px solid var(--line); background: rgba(11, 16, 25, .5); padding: 20px 18px; overflow-y: auto; }
.rail-titel { font-size: 12.5px; color: var(--ink-faint); letter-spacing: .5px; text-transform: uppercase; margin-bottom: 12px; }
.datei {
  display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left;
  padding: 10px 12px; border-radius: 9px; border: 1px solid transparent; margin-bottom: 5px; transition: .14s;
}
.datei:hover { background: rgba(110, 168, 255, .08); border-color: var(--line2); }
.d-kurz { font-size: 14.5px; }
.d-datum { font-size: 12.5px; color: var(--ink-faint); }
.rail-fuss { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-faint); }

/* ---------------------------------------------------------------- Grafiken */
.viz { margin: 14px 0 6px; }
.viz-titel { font-size: 13.5px; color: var(--ink-dim); margin-bottom: 10px; }
.viz-label { fill: var(--ink-dim); font-size: 14px; font-family: inherit; }
.viz-wert { fill: var(--ink); font-size: 14px; font-weight: 650; font-family: inherit; }
.viz-wert-innen { fill: #05101f; font-size: 15px; font-weight: 700; font-family: inherit; }
.viz-spur { fill: rgba(255, 255, 255, .05); }
.viz-bar { fill: url(#gradBlau); fill: var(--blau); }
.viz-bar.voll { fill: var(--gruen); }
.viz-bar.niedrig { fill: var(--amber); }
.viz-bar.stufe0 { fill: #6ea8ff; } .viz-bar.stufe1 { fill: #5f9af0; }
.viz-bar.stufe2 { fill: #4f8ae0; } .viz-bar.stufe3 { fill: #43c48d; }
.viz-bar.stufe4 { fill: var(--gruen); }

/* ---------------------------------------------------------------- Fundstelle */
.fundstelle {
  position: fixed; inset: 0; z-index: 70; background: var(--bg2);
  display: none; grid-template-rows: auto 1fr;
}
.fundstelle.auf { display: grid; }
.fs-kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 26px; border-bottom: 1px solid var(--line); }
.fs-datei { font-size: 19px; font-weight: 650; }
.fs-meta { font-size: 13px; color: var(--ink-faint); }
.fs-body { overflow-y: auto; padding: 22px 26px 40px; font: 15.5px/1.7 "Cascadia Code", ui-monospace, Menlo, monospace; }
.fs-zeile { white-space: pre-wrap; color: var(--ink-faint); padding: 0 10px; border-left: 3px solid transparent; }
.fs-zeile.treffer { color: var(--ink); background: rgba(110, 168, 255, .10); border-left-color: var(--blau); }

/* ---------------------------------------------------------------- Fähigkeiten */
.features { position: fixed; inset: 0; z-index: 65; background: var(--bg2); display: none; overflow-y: auto; padding: 24px 28px 50px; }
.features.auf { display: block; }
.feat-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.feat-kopf h2 { margin: 0 0 4px; font-size: 23px; }
.feat-kopf p { margin: 0; font-size: 14.5px; }
.feat-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 16px; }
.feat-karte { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; }
.feat-titel { font-size: 12.5px; color: var(--blau); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 12px; }
.feat-zeile { display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left; padding: 10px 12px; border-radius: 9px; border: 1px solid transparent; transition: .14s; }
.feat-zeile:hover { background: rgba(110, 168, 255, .09); border-color: var(--line2); }
.fz-frage { font-size: 14.5px; }
.fz-d { font-size: 12.5px; color: var(--ink-faint); }
.feat-grenzen { margin-top: 20px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; }
.grenze { font-size: 14.5px; color: var(--ink-dim); padding: 7px 0; border-bottom: 1px solid var(--line); }
.grenze:last-child { border-bottom: 0; }

/* ---------------------------------------------------------------- Untertitel */
/* Pflicht, nicht Zubehör: bei Bildschirmfreigabe wird der Systemton regelmäßig
   vergessen. Dann trägt diese Leiste den gesamten Inhalt der Führung. */
.untertitel {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: none; align-items: center; gap: 16px;
  padding: 15px 24px calc(15px + env(safe-area-inset-bottom, 0px));
  background: rgba(17, 24, 38, .975); border-top: 1px solid var(--line2);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, .5);
}
.untertitel.auf { display: flex; }
.ut-schritt { font-size: 12.5px; color: var(--ink-faint); white-space: nowrap; flex: none; }
.ut-text { margin: 0; flex: 1; font-size: 17.5px; line-height: 1.45; }
.sprecher { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-faint); flex: none; transition: background .2s; }
.sprecher.spricht { background: var(--blau); animation: sprech 1.15s ease-in-out infinite; }
@keyframes sprech {
  0%, 100% { box-shadow: 0 0 0 0 rgba(110, 168, 255, .55); }
  50% { box-shadow: 0 0 0 7px rgba(110, 168, 255, 0); }
}
@media (prefers-reduced-motion: reduce) { .sprecher.spricht { animation: none; } }

/* Während der Führung macht der Chat unten Platz, statt überdeckt zu werden. */
body.tour-laeuft .eingabe { padding-bottom: 96px; }

/* ---------------------------------------------------------------- schmal */
@media (max-width: 1080px) {
  .haupt { grid-template-columns: 1fr; }
  .rail { display: none; }
}
@media (max-width: 820px) {
  .verlauf { padding: 18px 16px 6px; }
  .eingabe { padding: 12px 16px 18px; }
  .topbar { flex-wrap: wrap; gap: 10px; padding: 12px 16px; }
  .hero h1 { font-size: 24px; }
  .untertitel { flex-wrap: wrap; }
  .ut-text { order: 3; flex-basis: 100%; font-size: 16px; }
}

/* Überschriften in der Fundstelle heben sich ab, ohne dass die Zeilenstruktur
   des Originals verlorengeht — es soll ein Dokument sein, kein Quelltext. */
.fs-zeile.ueber { color: var(--ink); font-weight: 650; font-size: 16.5px; padding-top: 14px; }
.fs-zeile.ueber.treffer { color: var(--blau); }

/* ---------------------------------------------------------------- Rückfrage */
/* Der Agent lässt den Fragenden nicht stehen: unter jeder Antwort steht, was als
   Nächstes sinnvoll wäre — klickbar, damit es kein Schaufenster ist. */
.rueckfrage { margin-top: 14px; }
.rueck-btn {
  display: inline-flex; align-items: center; gap: 10px; text-align: left;
  padding: 11px 16px; border-radius: 11px;
  border: 1px solid rgba(110, 168, 255, .38);
  background: rgba(110, 168, 255, .10);
  font-size: 16px; color: var(--ink); transition: .16s;
}
.rueck-btn:hover { background: rgba(110, 168, 255, .2); border-color: var(--blau); }
.rf-icon { color: var(--blau); font-size: 15px; flex: none; }

/* Sprecherwechsel in der Untertitelleiste: wer spricht, muss lesbar sein — ohne Ton
   liefe der Dialog sonst als Selbstgespräch, und ohne Ton läuft er oft. */
.ut-meta { display: flex; flex-direction: column; line-height: 1.25; flex: none; min-width: 118px; }
.ut-wer { font-size: 13.5px; color: var(--blau); }
.untertitel.nutzer .ut-wer { color: var(--amber); }
.untertitel.nutzer .sprecher.spricht { background: var(--amber); animation: sprech-n 1.15s ease-in-out infinite; }
@keyframes sprech-n {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 177, 83, .55); }
  50% { box-shadow: 0 0 0 7px rgba(232, 177, 83, 0); }
}
@media (prefers-reduced-motion: reduce) { .untertitel.nutzer .sprecher.spricht { animation: none; } }