/* Förderschmiede v2, Teil chat: vorbereitetes Frage-Antwort-Gespräch im Look eines Chat-Programms auf dem Mac.
   Umbau 01.10.2026 nach Giuliano ("wie akquise.de, simpler, ohne Seitenleiste"): ein einziges Fenster in der Sektion,
   ein Verlauf, unten die Eingabezeile. Kein schwebender Knopf, kein Panel, keine Seitenleiste.
   Kein Markenlogo, kein Markenname, keine Schnittkanten im Fenster: echte Programmfenster haben runde Ecken.
   Schrift ist die Fließtext-Schrift der Seite (--f-text). Eine Kurve für jede Bewegung. */

.k-chat{
  --chat-leiste:#1A1918;
  --chat-grund:#232220;
  --chat-blase:#34332F;
  --chat-wahl:#2A2927;
  --chat-feld:#2F2E2B;
  --chat-text:#ECEBE7;
  --chat-karte:#F6F5F2;
  --chat-karte-text:var(--grau);
  --chat-leise:rgba(255,255,255,.58);
  --chat-linie:rgba(255,255,255,.07);
  --chat-rand:rgba(255,255,255,.11);
  --chat-akzent:var(--signal-hell);
  --chat-fokus:#7CB4C0;
  --chat-kurve:cubic-bezier(.16,1,.3,1);
  --chat-ein:.45s;
  --chat-weg:.6s;
  font-family:var(--f-text);
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
.k-chat[data-teil]{max-width:1040px;margin-inline:auto}
.k-chat *,.k-chat *::before,.k-chat *::after{box-sizing:border-box}
.k-chat :focus-visible{outline:2px solid var(--chat-fokus);outline-offset:2px}
.k-chat .k-chat__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* 1 Fenster: runde Ecken, feine Kante, weicher vierfacher Schatten */
.k-chat .k-chat__fenster{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  container:chat / inline-size;
  color:var(--chat-text);background:var(--chat-grund);
  border-radius:20px;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.5),
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 2px 4px rgba(0,0,0,.06),
    0 8px 16px rgba(0,0,0,.05),
    0 24px 48px rgba(0,0,0,.04),
    0 48px 96px rgba(0,0,0,.03);
  transition:transform .7s var(--chat-kurve);
}
@media (hover:hover){
  .k-chat .k-chat__fenster:hover{transform:translateY(-2px)}
}
@media (max-width:699px){
  /* Umbau 6, Korrekturrunde 2: am Handy ohne Schatten. In WebKit mit DPR 3 hält das Zeichnen der weichen Schatten
     (Unschärfe bis 96 px) die Seite an: verschränkt gemessen bei 414 px dauerte ein Fensterbild mit Schatten 1,3 bis
     6,6 s und die Seite stand bis 2,8 s still, ohne Schatten 0,3 bis 1,4 s und höchstens 0,7 s. Auf dem schmalen
     Bildschirm trägt der Schatten kaum, das dunkle Fenster hebt sich auch so ab; Desktop bleibt unverändert. */
  .k-chat .k-chat__fenster{border-radius:16px;box-shadow:none}
}

/* Titelleiste: Ampel links, leiser Titel in der Mitte. Ist es zu eng (Handy ab 320 px), rückt der Titel nach rechts
   statt an die Ampel zu stoßen: die linke Spalte ist nie schmaler als die Ampel, dazu 12 px Abstand. */
.k-chat .k-chat__titelleiste{
  flex:0 0 auto;display:grid;grid-template-columns:minmax(max-content,1fr) minmax(0,auto) minmax(0,1fr);column-gap:12px;align-items:center;
  height:60px;padding:0 22px;
  background:var(--chat-leiste);border-bottom:1px solid rgba(255,255,255,.06);
  user-select:none;-webkit-user-select:none;
}
.k-chat .k-chat__ampel{display:flex;gap:10px;justify-self:start}
.k-chat .k-chat__ampel span{width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.28)}
.k-chat .k-chat__ampel span:nth-child(1){background:#FF5F57}
.k-chat .k-chat__ampel span:nth-child(2){background:#FEBC2E}
.k-chat .k-chat__ampel span:nth-child(3){background:#28C840}
.k-chat .k-chat__titel{
  margin:0;font-size:.8125rem;font-weight:500;line-height:1.2;color:var(--chat-leise);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* 2 Verlauf: feste Höhe 640 px wie das Vorbild (mobil 72vh), scrollt in sich.
   Am Ende gibt das Mausrad an die Seite weiter (normales Verketten). */
.k-chat .k-chat__verlauf{
  display:flex;flex-direction:column;gap:24px;
  height:640px;overflow-y:auto;
  padding:48px 40px 28px;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent;
}
.k-chat .k-chat__verlauf:focus-visible{outline-offset:-3px}
.k-chat .k-chat__verlauf > *{flex:0 0 auto}

/* Nutzerfrage: Blase rechts, Ecke unten rechts spitz */
.k-chat .k-chat__frage{display:flex;justify-content:flex-end}
.k-chat .k-chat__blase{
  max-width:min(80%,560px);margin:0;padding:26px 31px;
  font-size:.875rem;line-height:1.25rem;letter-spacing:-.01em;color:var(--chat-text);
  background:var(--chat-blase);border-radius:20px 20px 8px 20px;overflow-wrap:break-word;
}

/* Antwort: Avatar links, daneben Karte, Text, Link */
.k-chat .k-chat__antwort{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:31px;align-items:start}
.k-chat .k-chat__avatar{
  display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  color:#F1EEE6;background:linear-gradient(160deg,#4A4844,#302F2C);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
.k-chat .k-chat__avatar svg{display:block;width:19px;height:19px}
.k-chat .k-chat__inhalt{display:flex;flex-direction:column;align-items:flex-start;gap:28px;min-width:0}

/* Denkpunkte in eigener Blase */
.k-chat .k-chat__denken{
  display:flex;gap:5px;align-items:center;padding:16px 18px;
  background:var(--chat-blase);border-radius:16px 16px 16px 6px;
}
.k-chat .k-chat__denken span{width:7px;height:7px;border-radius:50%;background:var(--chat-text);opacity:.3;animation:k-chat-punkt 1.1s ease-in-out infinite}
.k-chat .k-chat__denken span:nth-child(2){animation-delay:.18s}
.k-chat .k-chat__denken span:nth-child(3){animation-delay:.36s}
@keyframes k-chat-punkt{0%,80%,100%{opacity:.3;transform:none}40%{opacity:1;transform:translateY(-3px)}}

/* Karte: hell auf dunkel, Ecke unten links spitz, Haken und genau drei Punkte */
.k-chat .k-chat__karte{
  max-width:100%;padding:20px 26px 22px 24px;
  color:var(--chat-karte-text);background:var(--chat-karte);border-radius:20px 20px 20px 8px;
}
.k-chat .k-chat__karte-kopf{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-size:.875rem;font-weight:500;line-height:1.25rem}
.k-chat .k-chat__haken{
  display:grid;place-items:center;flex:0 0 auto;width:24px;height:24px;border-radius:50%;
  color:#FFFFFF;background:var(--signal);
}
.k-chat .k-chat__haken svg{display:block;width:14px;height:14px}
.k-chat .k-chat__punkte{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.k-chat .k-chat__punkt{position:relative;padding-left:18px;font-size:.875rem;line-height:1.25rem;white-space:nowrap}
.k-chat .k-chat__punkt::before{content:"";position:absolute;left:2px;top:7px;width:6px;height:6px;border-radius:50%;background:var(--chat-karte-text)}

/* Erste Antwort als Analyse (Umbau 03.10.2026): erst "Analyse läuft" mit drei Prüfschritten, dann dieselbe Karte
   als "Analyse abgeschlossen" mit Befunden. Feste Breite am Desktop, damit beim Wechsel nichts springt; Name links,
   Wert rechts, im schmalen Fenster rutscht der Wert unter den Namen statt darüber zu laufen. */
.k-chat .k-chat__analyse{width:min(100%,440px)}
.k-chat .k-chat__kreisel{
  flex:0 0 auto;width:24px;height:24px;border-radius:50%;
  border:2px solid rgba(17,118,140,.22);border-top-color:var(--signal);
  animation:k-chat-dreh .8s linear infinite;
}
@keyframes k-chat-dreh{to{transform:rotate(360deg)}}
.k-chat .k-chat__schritte,.k-chat .k-chat__befunde{list-style:none;margin:0;padding:0;display:grid}
.k-chat .k-chat__schritte{gap:10px}
.k-chat .k-chat__schritt{display:flex;align-items:center;gap:12px;font-size:.875rem;line-height:1.25rem;color:#5C6264;transition:color .2s var(--chat-kurve)}
.k-chat .k-chat__schritt-text{min-width:0;overflow-wrap:break-word}
.k-chat .k-chat__schritt:not([data-stand="offen"]){color:var(--chat-karte-text)}
/* Offene Marke: Umrandung #85837D hat 3,48:1 zum Kartengrund (Grafik, Soll 3:1), bleibt aber heller als der Text */
.k-chat .k-chat__marke{
  display:grid;place-items:center;flex:0 0 auto;width:18px;height:18px;border-radius:50%;
  border:1.5px solid #85837D;color:#FFFFFF;
  /* Umbau 6: nur der Rand blendet über, die Füllung "fertig" steht sofort (vorher blendete sie .3s aus durchsichtig ein;
     in WebKit stand die Marke so bei 375 px kurz vor dem Ende ohne Füllung, 1:1 gegen den Kartengrund) */
  transition:border-color .2s var(--chat-kurve);
}
.k-chat .k-chat__marke svg{display:block;width:11px;height:11px;opacity:0;transform:scale(.6);transition:opacity 0s,transform .25s var(--chat-kurve)}
.k-chat .k-chat__schritt[data-stand="aktiv"] .k-chat__marke{border:2px solid rgba(17,118,140,.22);border-top-color:var(--signal);animation:k-chat-dreh .8s linear infinite}
.k-chat .k-chat__schritt[data-stand="fertig"] .k-chat__marke{border-color:var(--signal);background:var(--signal)}
.k-chat .k-chat__schritt[data-stand="fertig"] .k-chat__marke svg{opacity:1;transform:none}
.k-chat .k-chat__befund{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;column-gap:16px;row-gap:2px;
  padding:9px 0;font-size:.875rem;line-height:1.25rem;
}
.k-chat .k-chat__befund + .k-chat__befund{border-top:1px solid rgba(27,36,38,.1)}
.k-chat .k-chat__befund:first-child{padding-top:2px}
.k-chat .k-chat__befund:last-child{padding-bottom:0}
.k-chat .k-chat__befund-name{min-width:0;overflow-wrap:break-word}
.k-chat .k-chat__befund-wert{font-weight:600;white-space:nowrap;color:var(--signal-dunkel)}
/* Umbau 6: in der Analysekarte wächst der Haken an Ort und Stelle (nur Skalieren um die Mitte, kein Weg von unten), damit er
   beim Einblenden nie in die Befundzeile darunter ragt; gemessen bei 375 px, 2 Überlappungen in einem Lauf unter Last */
.k-chat .k-chat__analyse.k-chat__frisch .k-chat__haken{animation:k-chat-pop-ort .7s var(--chat-kurve) both}

/* Antworttext: ruhige Sans über die ganze Breite */
.k-chat .k-chat__text{margin:0;font-size:.875rem;line-height:1.25rem;color:var(--chat-text);overflow-wrap:break-word}
.k-chat .k-chat__wort{animation:k-chat-wort .3s var(--chat-kurve) both}
@keyframes k-chat-wort{from{opacity:0}}

/* Link unter dem Text: klein, mit Kreis-Pfeil, Trefferfläche 44 px */
.k-chat .k-chat__links{margin:-12px 0}
.k-chat .k-chat__link{
  display:inline-flex;align-items:center;gap:9px;min-height:44px;
  font-size:.875rem;font-weight:500;line-height:1.25rem;color:var(--chat-akzent);text-decoration:none;
}
.k-chat .k-chat__link svg{flex:0 0 auto;width:17px;height:17px;transition:transform .4s var(--chat-kurve)}
.k-chat .k-chat__link:hover{color:#FFFFFF}
.k-chat .k-chat__link:hover svg{transform:translateX(3px)}

/* 3 Weitere Fragen: im Verlauf, rechtsbündig untereinander, wie gedämpfte Nutzerblasen */
.k-chat .k-chat__weitere{display:flex;flex-direction:column;align-items:flex-end;gap:10px;margin-top:4px}
.k-chat .k-chat__weitere-hinweis{margin:0 0 2px;font-size:.75rem;line-height:1rem;color:var(--chat-leise);text-align:right}
.k-chat .k-chat__wahl{
  position:relative;display:inline-flex;align-items:center;gap:12px;max-width:min(92%,560px);min-height:44px;
  padding:20px 26px 20px 30px;
  font:inherit;font-size:.9375rem;line-height:1.375rem;letter-spacing:-.01em;text-align:left;
  color:rgba(255,255,255,.8);background:var(--chat-wahl);
  border:1px solid var(--chat-rand);border-radius:20px 20px 8px 20px;
  cursor:default;overflow-wrap:break-word;
  transition:background-color .3s var(--chat-kurve),border-color .3s var(--chat-kurve),color .3s var(--chat-kurve),transform .4s var(--chat-kurve);
}
.k-chat .k-chat__wahl-text{min-width:0}
.k-chat .k-chat__wahl:disabled{color:rgba(255,255,255,.8)}
.k-chat .k-chat__wahl svg{
  flex:0 0 auto;width:16px;height:16px;margin-right:-6px;color:var(--chat-akzent);
  opacity:0;transform:translateX(-4px);
  transition:opacity .3s var(--chat-kurve),transform .4s var(--chat-kurve);
}
/* Während einer Antwort ist nichts klickbar (dazu inert aus chat.js), erst bereit und ende geben frei */
.k-chat .k-chat__fenster[data-zustand="frage"] .k-chat__verlauf a,.k-chat .k-chat__fenster[data-zustand="frage"] .k-chat__verlauf button,
.k-chat .k-chat__fenster[data-zustand="denkt"] .k-chat__verlauf a,.k-chat .k-chat__fenster[data-zustand="denkt"] .k-chat__verlauf button,
.k-chat .k-chat__fenster[data-zustand="analyse"] .k-chat__verlauf a,.k-chat .k-chat__fenster[data-zustand="analyse"] .k-chat__verlauf button,
.k-chat .k-chat__fenster[data-zustand="karte"] .k-chat__verlauf a,.k-chat .k-chat__fenster[data-zustand="karte"] .k-chat__verlauf button,
.k-chat .k-chat__fenster[data-zustand="antwort"] .k-chat__verlauf a,.k-chat .k-chat__fenster[data-zustand="antwort"] .k-chat__verlauf button,
.k-chat .k-chat__fenster[data-zustand="fragen"] .k-chat__verlauf a,.k-chat .k-chat__fenster[data-zustand="fragen"] .k-chat__verlauf button{pointer-events:none}
.k-chat .k-chat__fenster[data-zustand="bereit"] .k-chat__wahl{cursor:pointer}
@media (hover:hover){
  .k-chat .k-chat__fenster[data-zustand="bereit"] .k-chat__wahl:hover{
    color:#FFFFFF;background:#333230;border-color:rgba(124,180,192,.55);transform:translateY(-2px);
  }
  .k-chat .k-chat__fenster[data-zustand="bereit"] .k-chat__wahl:hover svg{opacity:1;transform:none}
}
.k-chat .k-chat__fenster[data-zustand="bereit"] .k-chat__wahl:focus-visible svg{opacity:1;transform:none}

/* 4 Fuß: Eingabezeile (nur Bild, kein Feld) und Hinweis im Fenster */
.k-chat .k-chat__fuss{flex:0 0 auto;padding:12px 40px 14px}
.k-chat .k-chat__eingabe{
  display:flex;align-items:center;gap:10px;min-height:58px;padding:9px 10px 9px 22px;
  background:var(--chat-feld);border:1px solid rgba(255,255,255,.12);border-radius:20px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);cursor:default;user-select:none;-webkit-user-select:none;
}
.k-chat .k-chat__feld{flex:1 1 auto;min-width:0;font-size:.875rem;line-height:1.25rem;color:var(--chat-text);white-space:nowrap;overflow:hidden}
.k-chat .k-chat__platzhalter{color:var(--chat-leise)}
.k-chat .k-chat__getippt:not(:empty) + .k-chat__platzhalter{display:none}
.k-chat .k-chat__cursor{display:inline-block;width:1.5px;height:18px;margin-left:1px;vertical-align:-4px;background:var(--chat-text);animation:k-chat-cursor 1s steps(2) infinite}
@keyframes k-chat-cursor{50%{opacity:0}}
.k-chat .k-chat__senden{
  display:grid;place-items:center;flex:0 0 auto;width:38px;height:38px;border-radius:50%;
  color:#FFFFFF;background:var(--signal);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -2px 4px rgba(0,0,0,.25);
}
.k-chat .k-chat__senden svg{display:block;width:16px;height:16px}
.k-chat .k-chat__hinweis{margin:10px 0 0;text-align:center;font-size:.6875rem;line-height:.875rem;color:var(--chat-leise)}

/* 5 Bewegung: Deckkraft 0,45 s, Weg 0,6 s, eine Kurve */
.k-chat .k-chat__ein{animation:k-chat-auf var(--chat-ein) var(--chat-kurve) both,k-chat-hoch var(--chat-weg) var(--chat-kurve) both}
.k-chat .k-chat__blase.k-chat__ein,.k-chat .k-chat__wahl.k-chat__ein{transform-origin:100% 100%;animation-name:k-chat-auf,k-chat-blase}
.k-chat .k-chat__karte.k-chat__ein{transform-origin:0 0;animation-name:k-chat-auf,k-chat-karte}
/* Umbau 7: die Analyse dauert nur noch rund 0,8 s, ihre Laufanzeige blendet schneller ein (Schritte und Haken in Abschnitt 2
   mit .2s, der Haken steht ab Runde 3 sofort ganz deckend und wächst nur noch), damit der erste Prüfschritt schon voll zu sehen
   ist, solange er arbeitet (Runde 3: .1s, chat.js wartet das Einblenden ab) */
.k-chat .k-chat__analyse[data-stand="laeuft"].k-chat__ein{--chat-ein:.1s;--chat-weg:.3s}
.k-chat .k-chat__punkt.k-chat__ein,.k-chat .k-chat__befund.k-chat__ein{animation-name:k-chat-auf,k-chat-links}
.k-chat .k-chat__karte.k-chat__ein .k-chat__haken{animation:k-chat-pop .7s var(--chat-kurve) .25s both}
@keyframes k-chat-auf{from{opacity:0}}
@keyframes k-chat-hoch{from{transform:translateY(8px) scale(.985)}}
@keyframes k-chat-blase{from{transform:translateY(6px) scale(.94)}}
@keyframes k-chat-karte{from{transform:translateY(6px) scale(.96)}}
@keyframes k-chat-links{from{transform:translateX(-6px)}}
@keyframes k-chat-pop{from{opacity:0;transform:translateY(14px) scale(.9)}}
@keyframes k-chat-pop-ort{from{opacity:0;transform:scale(.6)}}

/* 6 Schmales Fenster (Handy): Avatar über der Antwort, Karte volle Breite, Punkte dürfen umbrechen */
@container chat (max-width:599px){
  .k-chat .k-chat__titelleiste{height:52px;padding:0 18px}
  .k-chat .k-chat__ampel{gap:8px}
  .k-chat .k-chat__ampel span{width:14px;height:14px}
  .k-chat .k-chat__verlauf{gap:18px;height:72vh;height:72svh;padding:22px 16px 16px}
  .k-chat .k-chat__blase{max-width:88%;padding:16px 18px 16px 20px;border-radius:16px 16px 6px 16px}
  .k-chat .k-chat__antwort{grid-template-columns:minmax(0,1fr);row-gap:14px}
  .k-chat .k-chat__avatar{width:32px;height:32px}
  .k-chat .k-chat__avatar svg{width:16px;height:16px}
  .k-chat .k-chat__inhalt{gap:20px}
  .k-chat .k-chat__karte{width:100%;padding:16px 18px 18px;border-radius:16px 16px 16px 6px}
  .k-chat .k-chat__punkt{white-space:normal}
  .k-chat .k-chat__wahl{max-width:92%;padding:10px 18px 10px 20px;border-radius:16px 16px 6px 16px}
  .k-chat .k-chat__fuss{padding:10px 16px 12px}
  .k-chat .k-chat__eingabe{min-height:54px;padding:7px 8px 7px 18px}
  /* Analysekarte verdichtet (Entscheidung Orchestrator 03.10.2026): beim Einstieg stehen Karte und erste Frage
     zusammen im Verlauf. Befunde einzeilig mit kurzen Namen (passt ab 320 px), Schrift der Karte nicht unter 15 px. */
  .k-chat .k-chat__karte.k-chat__analyse{padding:12px 14px}
  .k-chat .k-chat__analyse .k-chat__karte-kopf,.k-chat .k-chat__schritt,.k-chat .k-chat__befund{font-size:.9375rem}
  .k-chat .k-chat__analyse .k-chat__karte-kopf{margin-bottom:6px}
  /* Während der Analyse drehen Kreisel und aktive Marke: 12 px Luft, damit sich die gedrehten Kästen nicht berühren */
  .k-chat .k-chat__analyse[data-stand="laeuft"] .k-chat__karte-kopf{margin-bottom:12px}
  .k-chat .k-chat__befund{column-gap:8px;padding:4px 0}
  .k-chat .k-chat__befund:first-child{padding-top:0}
  .k-chat .k-chat__weitere{gap:8px;margin-top:0}
  .k-chat .k-chat__weitere-hinweis{margin-bottom:0}
}
/* Niedrige Handyfenster (u5-montage, 04.10.2026): bei 320 x 568 war das Fenster 575 px hoch (Titelleiste 52, Verlauf
   72svh = 409, Fuß 114) und damit höher als der Bildschirm. Fuß 8/8 statt 10/12 und Hinweis 6 statt 10 px darüber:
   Fuß 104, Fenster 565 px. Verlauf, Eingabezeile 54 px und Hinweis 11/14 bleiben. */
@media (max-width:599px) and (max-height:600px){
  .k-chat .k-chat__fuss{padding:8px 16px}
  .k-chat .k-chat__hinweis{margin-top:6px}
}

/* 7 Ohne Bewegung: alles steht sofort */
@media (prefers-reduced-motion:reduce){
  .k-chat .k-chat__ein,.k-chat .k-chat__wort,.k-chat .k-chat__karte.k-chat__ein .k-chat__haken,
  .k-chat .k-chat__denken span,.k-chat .k-chat__cursor,.k-chat .k-chat__kreisel,.k-chat .k-chat__marke,
  .k-chat .k-chat__analyse.k-chat__frisch .k-chat__haken{animation:none}
  .k-chat .k-chat__fenster,.k-chat .k-chat__wahl,.k-chat .k-chat__wahl svg,.k-chat .k-chat__link svg,
  .k-chat .k-chat__schritt,.k-chat .k-chat__marke,.k-chat .k-chat__marke svg{transition:none}
}