/* chat.css — Der Assistent.
   Eigene Datei wie cursor.* und kontakt.*, damit neu.css unberührt bleibt.
   Grammatik der Seite: Rechtecke, Haarlinien, EINE Akzentfarbe, Versalien-Marken.
   Keine Sprechblasen, keine Kreise, kein zweites Schriftsystem — das Gespräch ist
   ein Protokoll mit Marken am Rand, so wie das Register in #leistungen. */

/* ── Ecke: Reiter und Hinweis ─────────────────────────────────────────────── */
/* Drei Fassungen des Hinweises, dass hier ein Assistent wartet (Leo 09.09.2026), gesteuert
   ueber data-hinweis am Container: h1 Zuruf · h2 Ungelesen · h3 Schild. Der Reiter traegt
   in jeder Fassung dieselben drei Bausteine, sichtbar ist je nach Fassung anderes. */
.dz-ecke{position:fixed;right:32px;bottom:32px;z-index:60;display:flex;align-items:flex-end;gap:12px}
.dz-tab{display:inline-flex;align-items:center;gap:12px;position:relative;
  padding:16px 22px;border:0;border-radius:var(--r);background:var(--bg);color:#fff;cursor:pointer;
  font:600 13px/1 "Archivo",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;
  box-shadow:0 10px 34px rgba(10,11,13,.26);transition:transform .45s cubic-bezier(.77,0,.18,1),opacity .3s}
.dz-tab::before{content:"";width:9px;height:9px;background:var(--acc);flex:0 0 auto}
.dz-tab:hover{transform:translateY(-3px)}
.dz-tab[hidden]{display:none!important}
.dz-tab-s,.dz-tab-z{display:none}
body.dz-offen .dz-ecke{opacity:0;pointer-events:none;transform:translateY(12px);
  transition:opacity .3s,transform .45s cubic-bezier(.77,0,.18,1)}

/* h1 — Zuruf: eine Zeile links neben dem Reiter, in derselben Sprache wie die Lade. */
.dz-zuruf{display:flex;align-items:flex-start;gap:10px;max-width:270px;padding:14px 14px 14px 16px;
  background:var(--bg);color:#fff;border-radius:var(--r);border-left:2px solid var(--acc);
  box-shadow:0 10px 34px rgba(10,11,13,.26);opacity:0;transform:translateY(8px);
  transition:opacity .45s,transform .5s cubic-bezier(.77,0,.18,1)}
.dz-zuruf.is-da{opacity:1;transform:none}
.dz-zuruf[hidden]{display:none!important}
.dz-zuruf-t{margin:0;font-size:14px;line-height:1.4;cursor:pointer}
.dz-zuruf-zu{flex:0 0 auto;width:18px;height:18px;margin-top:1px;display:grid;place-items:center;
  border:0;background:none;color:#fff;opacity:.5;cursor:pointer;transition:opacity .3s}
.dz-zuruf-zu:hover{opacity:1}
.dz-zuruf-zu svg{width:10px;height:10px}

/* h2 — Ungelesen: rote Ziffer am Reiter, sonst bleibt alles ruhig. */
.dz-ecke[data-hinweis="h2"] .dz-zuruf{display:none!important}
.dz-ecke[data-hinweis="h2"] .dz-tab-z{display:grid;place-items:center;position:absolute;
  top:-8px;right:-8px;width:20px;height:20px;background:var(--acc);color:#fff;
  font:700 11px/1 "Archivo",system-ui,sans-serif;letter-spacing:0}

/* h3 — Schild: der Reiter selbst sagt, wofuer er da ist. Zwei Zeilen, keine Einblendung. */
.dz-ecke[data-hinweis="h3"] .dz-zuruf{display:none!important}
.dz-ecke[data-hinweis="h3"] .dz-tab{flex-direction:column;align-items:flex-start;gap:5px;
  padding:15px 22px 16px;text-align:left}
.dz-ecke[data-hinweis="h3"] .dz-tab::before{position:absolute;top:18px;right:18px}
.dz-ecke[data-hinweis="h3"] .dz-tab-n{padding-right:24px}
.dz-ecke[data-hinweis="h3"] .dz-tab-s{display:block;font-weight:400;font-size:12px;
  letter-spacing:.02em;text-transform:none;color:rgba(255,255,255,.62)}

/* ── Tafel ────────────────────────────────────────────────────────────────── */
/* In der unteren Ecke angedockt, halbe Fensterhoehe — nicht bis ganz nach oben, nur bis zur
   Haelfte (Leo 08.09.2026). Zwei Haarlinien statt Rundungen: auf dem dunklen Hero verschmilzt
   die Flaeche sonst randlos mit dem Grund, und ueber die volle Hoehe verdeckte sie die
   Kopfzeile. Sie faehrt von unten ein, nicht von der Seite: sie gehoert zur Ecke. */
.dz{position:fixed;right:0;bottom:0;top:auto;width:432px;max-width:100vw;z-index:61;
  height:54vh;min-height:440px;max-height:calc(100vh - 120px);
  display:flex;flex-direction:column;background:var(--bg);color:#fff;
  border-left:1px solid rgba(255,255,255,.14);border-top:1px solid rgba(255,255,255,.14);
  box-shadow:-24px -10px 60px rgba(10,11,13,.34);
  opacity:0;transform:translateY(20px);pointer-events:none;
  transition:opacity .4s,transform .5s cubic-bezier(.77,0,.18,1)}
.dz.is-offen{opacity:1;transform:none;pointer-events:auto}

/* Vorschlaege: was man den Assistenten fragen kann. Rechtecke mit Haarlinie wie alles auf
   dieser Seite, keine Pillen. Verschwinden mit der ersten eigenen Nachricht. */
.dz-tipps{display:flex;flex-wrap:wrap;gap:8px;margin:-8px 0 24px}
.dz-tipp{border:1px solid rgba(255,255,255,.22);border-radius:var(--r);background:none;color:#fff;
  padding:9px 13px;cursor:pointer;font:500 13px/1.15 "Archivo",system-ui,sans-serif;text-align:left;
  transition:border-color .3s,background .3s}
.dz-tipp:hover{border-color:var(--acc);background:rgba(216,35,42,.1)}
.dz-tipps[hidden]{display:none}
.dz[hidden]{display:none!important}

.dz-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:26px 26px 20px;
  border-bottom:1px solid var(--line-d)}
.dz-titel{font-size:20px;font-weight:600;letter-spacing:-.01em;line-height:1.2}
/* Die Kennzeichnung als KI steht dauerhaft im Kopf, nicht nur in der ersten Zeile —
   sie muss auch dann sichtbar sein, wenn der Verlauf schon weit gescrollt ist (AI Act Art. 50). */
.dz-marke{display:block;margin-top:6px;font-size:11px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.5)}
.dz-zu{flex:0 0 auto;width:34px;height:34px;display:grid;place-items:center;border:0;background:none;
  color:#fff;cursor:pointer;opacity:.6;transition:opacity .3s}
.dz-zu:hover{opacity:1}
.dz-zu svg{width:14px;height:14px}

.dz-verlauf{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:24px 26px 8px;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent}
.dz-zug{margin-bottom:24px}
.dz-wer{display:block;margin-bottom:7px;font-size:10px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.42)}
.dz-zug.ist-bot .dz-wer{color:var(--acc)}
.dz-text{font-size:15px;line-height:1.6;color:rgba(255,255,255,.92);white-space:pre-wrap;
  overflow-wrap:anywhere}
.dz-zug.ist-du .dz-text{color:rgba(255,255,255,.66)}

/* Wartezeichen: drei Striche, die der Reihe nach hell werden. Kein Kreisel — die Seite
   kennt keine Kreise. Bei reduzierter Bewegung steht es still und trägt nur den Text. */
.dz-warte{display:inline-flex;gap:5px;vertical-align:middle}
.dz-warte i{width:14px;height:2px;background:rgba(255,255,255,.28);animation:dzWarte 1.4s ease-in-out infinite}
.dz-warte i:nth-child(2){animation-delay:.18s}
.dz-warte i:nth-child(3){animation-delay:.36s}
@keyframes dzWarte{0%,100%{background:rgba(255,255,255,.22)}50%{background:var(--acc)}}

.dz-fuss{flex:0 0 auto;border-top:1px solid var(--line-d);padding:18px 26px 22px}
.dz-zeile{display:flex;align-items:flex-end;gap:14px}
.dz-eingabe{flex:1 1 auto;min-height:24px;max-height:132px;padding:0;border:0;background:none;resize:none;
  color:#fff;font:400 15px/1.5 "Archivo",system-ui,sans-serif;outline:none;overflow-y:auto}
.dz-eingabe::placeholder{color:rgba(255,255,255,.38)}
.dz-senden{flex:0 0 auto;border:0;background:none;padding:0 0 2px;cursor:pointer;color:var(--acc);
  font:700 12px/1 "Archivo",system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;
  transition:opacity .3s}
.dz-senden:disabled{color:rgba(255,255,255,.28);cursor:default}
.dz-hinweis{margin:14px 0 0;font-size:11px;line-height:1.5;color:rgba(255,255,255,.4)}

/* ── Übernahme ins Formular ───────────────────────────────────────────────── */
/* Jede übernommene Zeile blinkt einmal rot auf — der Kunde SIEHT, was übermittelt wird,
   statt einem Kasten vertrauen zu müssen, der im Hintergrund etwas tut. */
.kf-row.dz-neu{position:relative}
.kf-row.dz-neu::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--acc);
  transform-origin:left;animation:dzZeile 1.5s cubic-bezier(.77,0,.18,1) forwards}
@keyframes dzZeile{0%{transform:scaleX(0);opacity:1}55%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}

@media (prefers-reduced-motion:reduce){
  .dz,.dz-tab,.dz-zuruf{transition:none}
  .dz.is-offen{transform:none}
  .dz-warte i{animation:none;background:rgba(255,255,255,.4)}
  .kf-row.dz-neu::after{animation:none;opacity:0}
}
@media (max-width:760px){
  .dz{left:0;width:auto;border-left:0;height:66vh}
  .dz-ecke{right:16px;bottom:16px;max-width:calc(100vw - 32px)}
}