/* ══ CHAT-ASSISTENT (03.10.2026) ═══════════════════════════════════════════════
   Nur auf der Startseite (Dima: „KI-Chatbot soll nur auf der Startseite sein“).
   Runder Knopf unten rechts, darüber das Fenster, Aufbau wie beim Chat der Vorlage
   team-nexus-chat, Formensprache dieser Seite: Glas wie die Kopf-Kapsel, Hairlines
   0,5 px, Monospace, Jade nur für die eigene Frage, den Senden-Knopf und den Punkt.
   Kein Grün als Erfolgszustand (DESIGN.md).

   Die Antworten kommen vom Worker aevum-chat (aevum-intelligence/aevum-chat), nicht von
   dieser Seite. Die Adresse steht im Markup (data-adresse in index.html), so zieht der
   Chat beim Umzug zu IONOS einfach mit; im Worker kommt nur die neue Herkunft dazu.

   Handy: iOS 26 legt die Safari-Leiste schwebend über den unteren Rand. Das Fenster
   hält deshalb 96 px Abstand nach unten (in der Vorlage auf einem iPhone abgenommen),
   bei offener Tastatur rückt es über sie (Skript setzt --tastatur und --vv-oben).
   Der Knopf weicht am Handy aus, wenn unter ihm die Hero-Knöpfe oder die Schrittleiste der
   Strecke liegen (chat.js setzt --chat-hub).
   ═══════════════════════════════════════════════════════════════════════════════ */

.chat[hidden] { display: none; }
.chat { --chat-rand: 24px; --chat-knopf: 56px; --chat-boden: 24px; --chat-abstand: 12px; }

/* ── Knopf ─────────────────────────────────────────────────────── */
.chat__knopf {
  position: fixed;
  right: var(--chat-rand);
  bottom: var(--chat-boden);
  z-index: 60;
  width: var(--chat-knopf);
  height: var(--chat-knopf);
  padding: 0;
  display: grid;
  place-items: center;
  /* Logo-Zeichen (Dima 03.10.2026: „unser Logo, grün mit AI“): Jade-Fläche wie das Favicon,
     „AI“ in #171717 (Text auf Jade nie weiß, DESIGN.md). Der Rand trennt die Fläche vom
     hellen Ablauf-Grund. */
  border: .5px solid #0000002e;
  border-radius: 9999px;
  background: var(--jade);
  color: #171717;
  cursor: pointer;
  box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .75);
  /* --chat-hub: chat.js hebt den Knopf am Handy über Hero-Knöpfe und Schrittleiste. */
  translate: 0 calc(-1 * var(--chat-hub, 0px));
  transition: box-shadow var(--dauer-hover) var(--ease-out),
              translate .35s var(--ease-out), opacity .3s var(--ease-out);
}
.chat__knopf svg { width: 30px; height: auto; display: block; pointer-events: none; }
.chat__knopf:focus-visible { border-radius: 9999px; outline-offset: 4px; }
/* Offen: ein Ring in Jade mit Abstand zeigt, dass das Fenster zu diesem Knopf gehört. */
.chat[data-offen] .chat__knopf { box-shadow: 0 0 0 3px var(--grund), 0 0 0 4px var(--jade); }
@media (hover: hover) {
  .chat__knopf:hover { translate: 0 calc(-2px - var(--chat-hub, 0px)); }
}
/* Lader läuft (Scrollen gesperrt) oder am Handy liegen die Hero-Knöpfe unter ihm
   (data-knopf-weg, chat.js): der Knopf wartet. */
.lader-sperrt .chat__knopf,
.chat[data-knopf-weg] .chat__knopf {
  opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity .25s ease, visibility 0s linear .25s;
}
/* Offenes Handy-Menü (unter 900 px ersetzt die Tafel die Navigation): der Knopf
   läge sonst über der Tafel. Am Desktop öffnet .kopf[data-offen] nur die
   Leistungs-Tafel oben, dort bleibt der Knopf stehen. */
@media (max-width: 899px) {
  html:has(.kopf[data-offen]) .chat__knopf {
    opacity: 0; pointer-events: none; visibility: hidden;
    transition: opacity .25s ease, visibility 0s linear .25s;
  }
}
/* Am Desktop kann die Leistungs-Tafel aufgehen, während der Chat offen ist. Die Tafel
   liegt dann über dem Fenster, sonst trafen „Websites“, „Individualsoftware“ und „Apps“
   das Fenster und die Tafel schloss (Prüfung 03.10.2026, 1280×800). */
html:has(.kopf[data-offen]) .chat__fenster { z-index: 45; }

/* ── Fenster ───────────────────────────────────────────────────── */
.chat__fenster {
  position: fixed;
  z-index: 60;
  right: var(--chat-rand);
  bottom: calc(var(--chat-boden) + var(--chat-knopf) + var(--chat-abstand));
  width: min(392px, calc(100vw - 2 * var(--chat-rand)));
  /* Oberkante nie unter die Kopf-Kapsel (12 + 76 px) plus Luft. */
  height: min(600px, calc(100dvh - var(--chat-boden) - var(--chat-knopf) - var(--chat-abstand) - 104px));
  display: flex;
  flex-direction: column;
  border: .5px solid var(--linie-stark);
  /* 14 px wie die Kontakt-Karte. Deckender Grund statt Glas: bei .9 schien am Handy die
     Hero-Überschrift lesbar durch, und Blur über dem Globus kostet nur Rechenzeit
     (critique 03.10.2026). Glas bleibt dem Knopf. */
  border-radius: 14px;
  background: var(--grund);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .9);
  overflow: hidden;
  /* Zu heißt unsichtbar und aus der Tab-Reihenfolge; visibility statt display,
     damit das Aufgehen animiert werden kann. Nur verschieben, nicht skalieren. */
  visibility: hidden;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .28s var(--ease-out), transform .45s var(--ease-out), visibility 0s linear .45s;
}
.chat[data-offen] .chat__fenster {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity .28s var(--ease-out), transform .45s var(--ease-out), visibility 0s;
}
.chat__fenster:focus { outline: none; }

.chat__kopf {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 6px 10px 18px;
  border-bottom: .5px solid var(--linie);
}
.chat__kopf > div { flex: 1; min-width: 0; }
.chat__titel {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--anzeige);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--text);
}
/* Logo-Zeichen (wie das Favicon) vor dem Titel, gleiche Marke wie der Knopf. Die Unterzeile
   „KI · aus dieser Website“ ist seit 03.10.2026 abends auf Dimas Wunsch raus. */
.chat__marke { width: 32px; height: 32px; flex: none; display: block; }
.chat__zu {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  border: 0; border-radius: 9999px;
  background: none; color: var(--text-2);
  cursor: pointer;
  transition: color var(--dauer-hover) var(--ease-out), background-color var(--dauer-hover) var(--ease-out);
}
.chat__zu svg { width: 14px; height: 14px; display: block; }
.chat__zu:focus-visible { border-radius: 9999px; }
@media (hover: hover) { .chat__zu:hover { color: var(--text); background: var(--flaeche-3); } }
/* „Neu“: Kreispfeil mit Wort, leise wie das X daneben, 44 px hoch. */
.chat__neu {
  height: 44px; flex: none;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 12px;
  border: 0; border-radius: 9999px;
  background: none; color: var(--text-2);
  font-family: var(--fliess); font-size: 12px;
  cursor: pointer;
  transition: color var(--dauer-hover) var(--ease-out), background-color var(--dauer-hover) var(--ease-out);
}
.chat__neu[hidden] { display: none; }
.chat__neu svg { width: 14px; height: 14px; display: block; }
.chat__neu:focus-visible { border-radius: 9999px; }
@media (hover: hover) { .chat__neu:hover { color: var(--text); background: var(--flaeche-3); } }

/* ── Verlauf ───────────────────────────────────────────────────── */
.chat__verlauf {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--linie-stark) transparent;
  position: relative;   /* offsetTop der Blasen bezieht sich auf den Verlauf (chat.js, frageNachOben) */
}
.chat__verlauf:focus-visible { outline-offset: -3px; }

.chat__nachricht { max-width: 88%; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.chat__nachricht p {
  margin: 0;
  padding: 10px 14px;
  border-radius: 14px;
  font-family: var(--fliess);
  /* 15 px wie der Fließtext der Seite, Ecken überall gleich wie die Karten (critique 03.10.2026). */
  font-size: 15px;
  line-height: 1.6;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.chat__nachricht--bot { align-self: flex-start; }
.chat__nachricht--bot p { background: var(--flaeche-4); color: var(--text); }
/* Text auf Jade immer #171717, nie weiß (DESIGN.md). */
.chat__nachricht--du { align-self: flex-end; align-items: flex-end; }
.chat__nachricht--du p { background: var(--jade); color: #171717; }
/* Hinweise (Pause, Störung): kein Farbsignal, nur Kontur. */
.chat__nachricht--hinweis p { background: none; border: .5px solid var(--linie-stark); color: var(--text-2); }

.chat__aktionen { display: flex; flex-wrap: wrap; gap: 8px; }
.chat .chat__cta { height: 44px; padding: 0 18px; }

/* Tippt noch: drei Punkte, bis das erste Textstück da ist */
.chat__punkte { display: inline-flex; gap: 5px; padding: 6px 2px; vertical-align: middle; }
.chat__punkte i { width: 5px; height: 5px; border-radius: 9999px; background: var(--text-2);
                  opacity: .4; animation: chat-punkt 1.2s infinite ease-in-out; }
.chat__punkte i:nth-child(2) { animation-delay: .15s; }
.chat__punkte i:nth-child(3) { animation-delay: .3s; }
@keyframes chat-punkt { 0%, 80%, 100% { opacity: .4; transform: none; } 40% { opacity: 1; transform: translateY(-3px); } }

.chat__vorschlaege { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.chat__vorschlaege[hidden] { display: none; }
/* 44 px Tippziel wie die übrigen Knöpfe der Seite. */
.chat__vorschlag {
  min-height: 44px;
  padding: 10px 16px;
  border: .5px solid var(--linie-stark);
  border-radius: 9999px;
  background: none;
  color: var(--text);
  font-family: var(--fliess);
  font-size: 13px;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dauer-hover) var(--ease-out), background-color var(--dauer-hover) var(--ease-out);
}
.chat__vorschlag:focus-visible { border-radius: 9999px; }
.chat__vorschlag:disabled { opacity: .5; cursor: default; }
@media (hover: hover) {
  .chat__vorschlag:hover:not(:disabled) { border-color: #ffffff59; background: var(--flaeche-2); }
}

/* ── Eingabe ───────────────────────────────────────────────────── */
.chat__eingabe { flex: none; padding: 12px 12px 10px; border-top: .5px solid var(--linie); }
.chat__zeile { display: flex; gap: 10px; align-items: center; }
/* 16 px Schrift: darunter zoomt Safari beim Antippen in die Seite. */
.chat__zeile input {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  padding: 12px 14px;
  /* #ffffff59 statt --linie-stark: der Rand des Feldes braucht 3:1 (WCAG 1.4.11). */
  border: .5px solid #ffffff59;
  border-radius: 12px;
  background: var(--flaeche-3);
  color: var(--text);
  font-family: var(--fliess);
  font-size: 16px;
  outline: none;
  transition: border-color var(--dauer-zustand) var(--ease-out);
}
.chat__zeile input::placeholder { color: var(--text-2); opacity: 1; }
.chat__zeile input:disabled { opacity: .6; cursor: not-allowed; }
.chat__zeile input:focus { border-color: var(--jade); }
.chat__senden {
  width: 48px; height: 48px; flex: none;
  display: grid; place-items: center;
  border: .5px solid transparent; border-radius: 9999px;
  background: var(--jade); color: #171717;
  cursor: pointer;
  transition: opacity var(--dauer-hover) var(--ease-out), background-color var(--dauer-zustand) var(--ease-out),
              color var(--dauer-zustand) var(--ease-out);
}
.chat__senden svg { width: 18px; height: 18px; display: block; }
/* Gesperrt nur Hairline und Pfeil, Jade erst mit Text im Feld. Vorher Jade mit 35 %
   Deckkraft: ein trübes Petrol direkt neben dem Jade-Fokusrand (Panel 03.10.2026). */
.chat__senden:disabled { background: none; border-color: var(--linie-stark); color: var(--text-2); cursor: default; }
.chat__senden:focus-visible { border-radius: 9999px; }
@media (hover: hover) { .chat__senden:hover:not(:disabled) { opacity: .88; } }

.chat__versteckt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── Handy ─────────────────────────────────────────────────────── */
/* Auch quer (geringe Höhe): Dort war das Desktop-Fenster nur 194 px hoch, Eingabe und
   Datenschutz-Link wurden abgeschnitten (Prüfung 03.10.2026, 844×390). Dieselbe Abfrage
   steht als "schmal" in chat.js. */
@media (max-width: 767px), (max-height: 520px) {
  .chat { --chat-rand: 14px; --chat-knopf: 52px; --chat-boden: 24px; --chat-fenster-boden: 96px; }
  .chat__knopf svg { width: 28px; }
  /* Fast bildschirmfüllend. Oben richtet es sich nach dem sichtbaren Ausschnitt
     (Safari schiebt ihn bei offener Tastatur), unten nach der Tastatur oder dem
     Abstand zur Safari-Leiste. */
  .chat__fenster {
    left: 10px; right: 10px; width: auto; height: auto;
    top: calc(var(--vv-oben, 0px) + 10px);
    bottom: max(var(--chat-fenster-boden), calc(var(--tastatur, 0px) + 10px));
  }
  .chat[data-offen] .chat__knopf { opacity: 0; pointer-events: none; visibility: hidden;
    transition: opacity .25s ease, visibility 0s linear .25s; }
  .chat__nachricht { max-width: 92%; }
  /* Tastatur offen (chat.js, data-tastatur): Kopf schmaler, damit für die Antwort mehr als
     zwei Zeilen bleiben (critique 03.10.2026, iPhone SE). */
  .chat[data-tastatur] .chat__kopf { padding-top: 4px; padding-bottom: 4px; }
  .chat[data-tastatur] .chat__marke { width: 26px; height: 26px; }
  /* Schleier hinter dem Fenster, Antippen schließt (chat.js). Nach unten über den Rand
     hinaus: iOS 26 zeichnet unter der eingeklappten Safari-Leiste weiter Seiteninhalt.
     Deckend statt Glas: flächiger Blur ist laut PRODUCT.md Anti-Referenz und wurde über
     der hellen Ablauf-Sektion zu stumpfem Grau (Panel 03.10.2026). */
  .chat[data-offen]::before {
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0; bottom: -30vh;
    z-index: 59;
    background: rgba(17, 17, 17, .85);
  }
}
/* Quer liegt die Safari-Leiste nicht unten, die 96 px Abstand würden nur Höhe kosten. */
@media (max-height: 520px) and (orientation: landscape) {
  .chat { --chat-fenster-boden: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .chat__fenster, .chat[data-offen] .chat__fenster { transition: none; transform: none; }
  .chat__knopf, .chat__senden { transition: none; }
  .chat__punkte i { animation: none; opacity: .8; }
}
@media print { .chat { display: none !important; } }