/* Fairfinanz — der Assistent, Entwurf B: „Emils Platte". Fassung 2, nach der Prüfung.
   Baut auf tokens.css auf. Keine Inline-Styles in Produktion (CSP: style-src 'self'),
   keine fremde Schrift, kein zweites Blau, kein box-shadow, kein hartgetippter Hexwert.

   DIE EINE IDEE: Emil hat keinen Avatar, er hat einen ORT.
   Ein liegendes L aus Indigo — Kopfplatte oben, 12px-Bahn links — auf dem das Papierblatt
   des Gesprächs liegt. Alles, was Emil sagt, hängt an dieser Bahn und ist mit ihr
   verwachsen. Alles, was der Mensch sagt, ist ein loser Papierzettel mit Indigo-Kante,
   der rechts danebenliegt. Das gilt durchgehend: Blase, Eingabefeld, Chips — was der
   Mensch anfasst, ist Papier mit Kante; was die Maschine sagt, sitzt auf der Platte.
   Man liest das in einer halben Sekunde, ohne ein Absenderkürzel gelesen zu haben.

   Die Kopfplatte IST das Zeichen: Franks Signet ist ein Indigo-Feld mit einem gelben
   Diagonalbalken. Die Kopfplatte ist genau das, nur groß — deshalb sitzt der Balken
   direkt auf ihr und braucht keine eigene Kachel. Das Hauszeichen ohne die beiden
   Kreise, auf Plakatgröße gezogen: dasselbe Handwerk, ein Teil weniger.

   TIEFE OHNE SCHATTEN — vier gestapelte Lagen und ein Passerversatz:
     1  Butter   — der Abschnitt wird zur Unterlage. Vorher lag Papier auf Papier,
                   deshalb fiel der Chat visuell in sich zusammen.
     2  Indigo   — Kopfplatte + 12px-Bahn, EINE zusammenhängende Form (margin:0 dazwischen).
     3  Papier   — das Blatt, das darauf liegt. Es springt rechts 28px vor, weil die
                   Kopfplatte dort einen Rand hat und das Blatt nicht: der Passerversatz
                   eines zweifarbig gedruckten Bogens. Zwei Lagen sichtbar, kein Schatten.
     4  Butter / Papierzettel — die Äußerungen auf dem Blatt.
   Kein Verlauf als Weichzeichnung, kein box-shadow, keine neue Farbe, keine neue Rundung. */

/* ——— Lage 1: die Unterlage ————————————————————————————————————————————— */
/* .chat-abschnitt steht bereits im Markup und hatte bisher kein CSS. Butter statt Papier
   ist die kleinste mögliche Maßnahme gegen „der Chat fällt in sich zusammen": das Blatt
   liegt jetzt auf etwas, statt in seiner eigenen Farbe zu verschwinden.
   Die Hairline von reveal.css muss dabei weg — #DFD9C9 auf #EFE7CE sind 1,05:1, also
   ein toter Rest. Dasselbe Muster benutzt reveal.css für .band-navy: wo die Farbe
   trennt, trennt keine Linie mehr. */
.chat-abschnitt { background: var(--flaeche2); }
.chat-abschnitt::before { content: none; }

.chat {
  margin-top: 48px;                     /* wie jedes andere Modul nach der .abschnitt-lead */
  max-width: 760px;
}

/* ——— Lage 2: Emils Platte, Teil 1 — die Kopfplatte ————————————————————— */
/* Der KI-Hinweis ist nicht mehr ein Kasten NEBEN dem Chat, er ist Emils Kopfplatte.
   Das ist die rechtlich stärkste Stelle, die es gibt: Art. 50 Abs. 5 KI-VO verlangt
   „klar und erkennbar" — hier steht die Auskunft auf der größten dunklen Fläche des
   Abschnitts, in voller Lesegröße (--t-body, 19px, exakt der Fließtext der Seite),
   vor jeder Interaktion, ohne Aufklappen.
   margin-right:28px erzeugt den Passerversatz zum Blatt darunter; margin-bottom:0 ist
   Bedingung, sonst zerfällt die L-Form in zwei Teile.
   --akzent: die Platte meldet sich als dunkle Fläche beim System an, so wie .band-navy
   es tut. Danach kommt Gelb hier ausschließlich über var(--akzent) — kein Selektor
   dieser Datei schreibt var(--gelb) von Hand, die Kaskade setzt die Farbregel durch. */
.chat-hinweis {
  --akzent: var(--gelb);
  margin: 0 28px 0 0;
  padding: 11px 18px;
  background: var(--tinte);
  color: var(--auf-tinte);              /* 11,0:1 */
  border-radius: var(--radius) var(--radius) 0 0;
  font-size: var(--t-klein);            /* 16px — Nebentextmaß des Hauses, nicht kleiner */
  line-height: 1.45;
}
/* Gelb genau dort, wo die Hausregel es erlaubt: auf Indigo, 8,3:1. */
.chat-hinweis b { font-weight: 700; color: var(--akzent); }

/* Emils Zeichen: Franks Diagonalbalken, direkt auf der Platte. Kein Gesicht, kein Foto,
   kein Emoji, und bewusst auch keine eigene Kachel — ein Feld aus --tinte-tief auf
   --tinte wären 1,23:1 gewesen, also eine Lage, die man nur im Code sieht. Die Platte
   selbst ist der Grund des Signets.
   float statt position:absolute: sonst schöbe der Einzug für ein 30px-Zeichen den
   GESAMTEN Hinweis 68px nach rechts — am Telefon kostet das ein Fünftel der Zeilenbreite
   einer rechtlich verpflichtenden Auskunft. So fließt der Text ab Zeile 2 voll durch.
   135deg, nicht 45deg: der Balken muss von links unten nach rechts oben steigen wie im
   Original (index.html:187, path 13,76 → 65,24). Bei linear-gradient läuft das Band
   QUER zur angegebenen Richtung — 45deg hätte die Diagonale gespiegelt. */
.chat-hinweis::before {
  content: "";
  float: left;
  width: 20px;
  height: 20px;
  margin: 2px 10px 0 0;
  background-image: linear-gradient(135deg,
    transparent 38%, var(--akzent) 38%, var(--akzent) 62%, transparent 62%);
}

/* ——— Lage 2: Emils Platte, Teil 2 — die Bahn ——————————————————————————— */
/* border-top:0 lässt Kopfplatte und Bahn nahtlos ineinander übergehen: ein Indigo, eine
   Form. Die 12px sind der einzige echte Systembruch dieser Datei — aus der 1px-Linie
   wird eine Fläche. Sie weicht nichts auf: kein Schatten, kein Verlauf, dieselbe Farbe,
   nur breit genug, um Körper zu sein.
   overflow-x:hidden ist Pflicht, nicht Vorsicht: overflow-y:auto macht die x-Achse
   implizit scrollbar, und dann blitzt bei jeder eintreffenden Blase kurz ein
   Waagerecht-Balken auf.
   tabindex="0" steht im Markup: ein Scrollcontainer ohne fokussierbares Kind ist in
   Chromium und WebKit mit der Tastatur nicht erreichbar — ältere Äußerungen wären ohne
   Maus verloren (WCAG 2.1.1). Den Namen für den Fokus liefert das aria-label. */
.chat-lauf {
  min-height: 180px;
  max-height: 460px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24px 24px 24px 20px;
  background: var(--papier);
  border: 1px solid var(--linie);
  border-top: 0;
  border-left: 12px solid var(--tinte);
  border-radius: 0 0 var(--radius) var(--radius);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.chat-lauf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* Ohne JavaScript (und in der Sekunde, bis das Modul geladen ist) ist der Lauf leer —
   dann hinge eine 12px-Indigo-Bahn an einem 180px hohen Nichts, also ausgerechnet die
   auffälligste Form des Abschnitts an der einzigen Stelle ohne Inhalt. js/chat.js setzt
   .ist-bereit auf [data-chat], sobald es übernimmt; bis dahin steht hier genau das, was
   der Auftrag verlangt: der KI-Hinweis als geschlossene Platte plus die zwei Wege. */
.chat:not(.ist-bereit) .chat-lauf { display: none; }
.chat:not(.ist-bereit) .chat-hinweis { margin-right: 0; border-radius: var(--radius); }

.chat-blase { display: flex; flex-direction: column; max-width: 88%; }

/* ——— Emil: an der Bahn festgewachsen ——————————————————————————————————— */
.chat-blase--assistent {
  align-self: flex-start;
  margin-left: -20px;                   /* exakt das Innenmaß links: das Feld stößt an die Bahn */
}
/* Emils Fahne trägt seinen Namen und das Zeichen. Sie ist die einzige gefüllte
   Indigo-Fläche pro Äußerung — dadurch bleibt die Menge dunkler Farbe konstant,
   egal wie lang Emil antwortet. Genau das verhindert die dunkle Wand: Emil redet in
   Absätzen, aber er färbt nur seinen Namen ein.
   14px/600/0.08em/uppercase ist das EINE Versal-Label des Hauses (.kicker, .fakt dt,
   .kontakt-zeile dt, .r-rate-kopf) — kein zweites Maß für dasselbe Bauteil.
   --akzent auch hier: zweite dunkle Fläche, zweite Anmeldung beim System. */
.chat-blase--assistent .chat-wer {
  --akzent: var(--gelb);
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 14px 4px 12px;
  background: var(--tinte);
  color: var(--auf-tinte);              /* 11,0:1 */
  border-radius: 0 var(--radius) 0 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* Dasselbe Zeichen wie auf der Kopfplatte, nur klein: derselbe Balken, derselbe
   Indigo-Grund — nur ist der Grund hier die Fahne. Die Stops stehen weiter auseinander
   als bei 30px, sonst rastert der Balken bei 16px weg. */
.chat-blase--assistent .chat-wer::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  background-image: linear-gradient(135deg,
    transparent 32%, var(--akzent) 32%, var(--akzent) 68%, transparent 68%);
}
/* Emils Feld: Butter, links eckig, rechts gerundet — es kommt aus der Bahn heraus und
   endet im Blatt. Butter statt Indigo ist die bewusste Korrektur an der Richtung:
   eine gefüllte Indigo-Fläche über acht Zeilen wäre eine dunkle Wand mitten auf einer
   Startseite, auf der Frank der Ansprechpartner sein soll. Butter ist ebenfalls Fläche
   (Franks Gelb als ruhiger Grund), trägt Indigo mit 9,7:1 und bleibt ruhig, auch wenn
   drei Absätze untereinander stehen. */
.chat-blase--assistent .chat-text {
  background: var(--flaeche2);
  color: var(--tinte);                  /* 9,7:1 auf Butter */
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* ——— Der Mensch: ein Zettel, der danebenliegt —————————————————————————— */
.chat-blase--nutzer {
  align-self: flex-end;
  align-items: flex-end;
  text-align: right;
}
.chat-blase--nutzer .chat-wer {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sekundaer);
  margin-bottom: 4px;
}
/* Papier mit Indigo-Kante — dieselbe Sprache wie Eingabefeld und Chips weiter unten.
   Der Zettel liegt AUF dem Blatt, er ist nicht Teil von ihm: deshalb rundum gerundet
   und rundum gekantet, während Emils Feld links offen an der Bahn klebt. */
.chat-blase--nutzer .chat-text {
  background: var(--papier);
  color: var(--tinte);                  /* 11,0:1 */
  border: 1.5px solid var(--tinte);
  border-radius: var(--radius);
}

/* Zweite und dritte Blase derselben Antwort: kein Absender, enger gestellt, damit sie
   als EINE Äußerung lesbar bleiben statt als drei. Der Lauf hat gap:16px — die negative
   Marge zieht auf rund 6px zusammen. */
.chat-blase--folge { margin-top: -10px; }

.chat-text {
  margin: 0;
  padding: 12px 16px;
  line-height: 1.6;
  /* Modellausgabe kann alles enthalten — auch eine 80 Zeichen lange URL ohne Leerzeichen.
     Ohne diese Zeile schiebt so eine Zeichenkette die Blase aus dem Kasten. */
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

/* ——— Bewegung: EINE Geste, zwei Richtungen ————————————————————————————— */
/* Beides ist derselbe Wisch — eine Maske, die eine Fläche aufzieht. Emil wird von LINKS
   aus der Bahn gezogen, der Mensch von RECHTS vom Blattrand her. Die Bewegung erzählt
   damit dasselbe wie das Bild: wo die Äußerung herkommt. Keine Drehung, keine
   Perspektive — die gäbe es sonst nirgends auf dieser Website, und ein einzelnes
   3D-Objekt im kleinsten Element wäre ein Effekt, kein Körper.

   Wo die Maske sitzt, ist nicht beliebig: js/chat.js erzeugt Emils Blase IMMER LEER
   (Zeile 128 und 185) und schreibt den Text erst danach zeichenweise hinein. Eine
   Maske auf .chat-blase liefe also über ein 60×40px-Kästchen mit drei Punkten und
   wäre praktisch unsichtbar. Was bei der Geburt schon Inhalt hat, ist die FAHNE
   (chat.js:63-65) — sie rollt aus der Bahn auf. Das Feld darunter, das sich erst noch
   füllt, wird nur eingeblendet. Folgeblasen tragen keine Fahne und bekommen nur die
   Blende. clip-path verlässt die eigene Box nie: im scrollenden Lauf kann nichts
   abgeschnitten werden und kein Waagerecht-Balken aufblitzen. */
.chat-blase--assistent .chat-wer {
  animation: emil-auf 0.34s cubic-bezier(.2,.8,.3,1) both;
}
.chat-blase--assistent .chat-text {
  animation: emil-blende 0.34s ease both;
}
@keyframes emil-auf {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes emil-blende {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* Der Zettel des Menschen wird mit Text erzeugt, er kann die volle Geste tragen. */
.chat-blase--nutzer {
  animation: zettel-auf 0.34s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes zettel-auf {
  from { clip-path: inset(0 0 0 100%); opacity: 0.35; }
  to   { clip-path: inset(0 0 0 0);    opacity: 1; }
}

/* Die drei Punkte, während Emil schreibt. Sie stehen in derselben Blase wie der Text und
   wandern beim Weiterschreiben ans Ende mit — so wie in jedem Messenger. Indigo, nicht
   Gelb: sie liegen auf Butter, und Gelb auf Butter wäre unsichtbar.
   Volle Deckkraft, animiert wird nur die Bewegung: die Punkte sind die einzige Anzeige,
   dass Emil gerade schreibt, also bedeutungstragende Grafik und damit an 3:1 gebunden.
   Mit opacity 0.25–0.5 lagen sie bei 1,58 bis 2,73:1 — jetzt konstant bei 9,7:1. */
.chat-tippt {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 1em;
  vertical-align: middle;
  margin-left: 2px;
}
.chat-tippt i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tinte);             /* 9,7:1 auf Butter */
  animation: chat-tippt 1.3s ease-in-out infinite;
}
.chat-tippt i:nth-child(2) { animation-delay: 0.18s; }
.chat-tippt i:nth-child(3) { animation-delay: 0.36s; }
@keyframes chat-tippt {
  0%, 60%, 100% { transform: translateY(0); }
  30%           { transform: translateY(-3px); }
}

/* Stillstellung. Nicht auf die globale 0.01ms-Regel aus tokens.css verlassen: alle
   Animationen laufen mit `both` und würden dort ihren Anfangszustand einfrieren — eine
   unsichtbar maskierte Fahne und ein unsichtbarer Zettel. Hier wird stattdessen der
   SCHÖNE Endzustand gesetzt. */
@media (prefers-reduced-motion: reduce) {
  .chat-blase--assistent .chat-wer,
  .chat-blase--assistent .chat-text,
  .chat-blase--nutzer {
    animation: none;
    clip-path: none;
    opacity: 1;
  }
  .chat-tippt i { animation: none; }
}

/* ——— Was die Maschine meldet ——————————————————————————————————————————— */
/* Drei Zustände, drei Bilder — js/chat.js schickt „werkzeug", „erfolg" und „fehler".
   Der Fehler bekommt den Fehlerton des Hauses (--fehler, 8,5:1 auf Papier) und die
   Kante von .formular-meldung.ist-fehler; er unterscheidet sich damit in Farbe UND
   Form vom Erfolg, statt sich nur im Wortlaut. Kein drittes Rot, kein neuer Wert. */
.chat-zeile {
  margin: 0;
  font-size: var(--t-klein);
  color: var(--sekundaer);
  text-align: center;
}
.chat-zeile--werkzeug { font-style: italic; }
.chat-zeile--erfolg { color: var(--tinte); font-weight: 600; }
.chat-zeile--fehler {
  align-self: stretch;
  padding: 8px 0 8px 14px;
  border-left: 3px solid var(--fehler);
  color: var(--fehler);                 /* 8,5:1 auf Papier */
  font-weight: 600;
  text-align: left;
}

/* ——— Was der Mensch anfasst, ist Papier mit Indigo-Kante ——————————————— */
/* Auf Butter wäre die alte --linie-Kante fast unsichtbar (und als Bedienelement unter
   3:1). Die Indigo-Kante löst beides auf einmal: sie ist kontraststark UND sie setzt
   Eingabefeld und Chips in dieselbe Sprache wie die Zettel des Nutzers im Lauf. */
.chat-form {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
/* Ohne diese Zeile schlägt display:flex das [hidden] des Browsers — und ohne JavaScript
   stünde hier ein Eingabefeld, das nichts sendet. Gleiches Muster wie in
   css/bewertungen.css und css/rechner.css. */
.chat-form[hidden] { display: none; }

.chat-eingabe {
  flex: 1 1 auto;
  min-width: 0;
  padding: 14px 16px;
  font: inherit;
  color: var(--tinte);
  background: var(--papier);
  border: 1.5px solid var(--tinte);
  border-radius: var(--radius);
}
.chat-eingabe::placeholder { color: var(--sekundaer); opacity: 1; }
.chat-eingabe:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 2px;
}
.chat-eingabe:disabled { opacity: 0.6; }
.chat-senden { flex: 0 0 auto; }

.chat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.chat-chips[hidden] { display: none; }
/* var(--radius), keine Pille: Zettel, Eingabefeld und Chip sind formgleich. 999px wäre
   die eine Stelle, an der der Chat wie ein zugekauftes Widget aussähe statt wie
   gesetztes Papier — und der Wert kommt im ganzen css/-Baum sonst nirgends vor. */
.chat-chips button {
  font: inherit;
  font-size: var(--t-klein);
  min-height: 44px;                     /* Touch-Ziel */
  padding: 8px 16px;
  color: var(--tinte);
  background: var(--papier);
  border: 1.5px solid var(--tinte);
  border-radius: var(--radius);
  cursor: pointer;
}
.chat-chips button:hover { background: var(--flaeche2); }
.chat-chips button:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* Die zwei Wege zum Menschen. Sie stehen dauerhaft unter dem Fenster — auch während der
   Assistent antwortet. Wer lieber anruft, soll dafür nicht erst ein Gespräch beenden.
   Die Unterstreichung muss hier nachgezogen werden: .textlink unterstreicht global mit
   --linie, und das sind auf Butter 1,14:1 — der Link wäre allein an der Farbe zu
   erkennen (WCAG 1.4.1), ausgerechnet bei der Telefonnummer. */
.chat-wege {
  margin: 16px 0 0;
  font-size: var(--t-klein);
  color: var(--sekundaer);
}
.chat-wege .textlink { text-decoration-color: var(--tinte); }

/* ——— Schmale Geräte ——————————————————————————————————————————————————— */
/* Die Platte schrumpft mit, sie verschwindet nicht: Bahn 8px, Versatz 16px, Zeichen 18px.
   Bei 390px bleibt die Kopfplatte lesbar, weil nur der Einzug für das Zeichen kleiner
   wird — nicht die Schrift. Die 16px des Hinweises sind die Untergrenze: Art. 50 Abs. 5
   KI-VO verlangt „klar und erkennbar", und das Haus setzt Nebentext nirgends kleiner. */
@media (max-width: 1079px) {
  .chat-hinweis { margin-right: 16px; padding: 10px 14px; }
  .chat-hinweis::before { width: 18px; height: 18px; margin-right: 8px; }
  .chat-lauf {
    padding: 18px 16px 18px 14px;
    max-height: 380px;
    border-left-width: 8px;
  }
  .chat-blase { max-width: 100%; }
  /* Emils Feld ist Butter, der Abschnitt ist Butter — liefe es bis an die Innenkante,
     wäre der Kollaps zurück, gegen den dieser Entwurf antritt, und zwar auf dem Gerät
     der Mehrheit. 92% lassen rechts immer einen Streifen Papier stehen. Der Zettel des
     Menschen darf auf 100%: er ist Papier mit Kante und braucht den Streifen nicht. */
  .chat-blase--assistent { margin-left: -14px; max-width: 92%; }
  /* Auf dem Handy nebeneinander wird das Feld zu schmal zum Tippen. */
  .chat-form { flex-direction: column; }
  .chat-senden { width: 100%; }
  /* „Am Telefon greift der Daumen: 52px für jedes Ziel, das man antippt" (site.css:1121). */
  .chat-chips button { min-height: 52px; }