/* KÜNI Demo — Ergänzung zu styles.css
   Nutzt dieselben Tokens (Bernstein bleibt für Handlung und Hervorhebung
   reserviert). Wird nur auf kueni-erleben.html geladen. */

/* Teile der Demo schalten sich über das hidden-Attribut ab. Ohne diese
   Regel gewinnt das display:flex der Bausteine und sie blieben sichtbar. */
.kd [hidden] { display: none !important; }

/* ---------- Rahmen ---------- */
.kd {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 3px;
  max-width: 880px;
  margin: 0 auto;
  overflow: hidden;
}

/* ---------- Kopfzeile der Demo ---------- */
.kd__head {
  display: flex; align-items: center; gap: 13px;
  padding: 15px 18px;
  background: var(--ink);
  color: var(--paper);
}
.kd__avatar {
  flex: 0 0 auto;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(201,146,46,.16);
  border: 1px solid rgba(201,146,46,.5);
  color: var(--signal-lit);
}
.kd__id { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.kd__id b { font: 700 16px/1.2 var(--display); letter-spacing: -.01em; }
/* Nur die Rollenzeile, nicht das Markenzeichen im b-Element. Ohne den
   Kindselektor bekam die Marke 13px und wurde am Handy ausgeblendet. */
.kd__id > span { font-size: 13px; color: rgba(244,247,247,.66); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.kd__badge {
  margin-left: auto; flex: 0 0 auto;
  font: 600 11px/1 var(--text); letter-spacing: .06em; text-transform: uppercase;
  padding: 6px 9px; border-radius: 2px;
  background: rgba(244,247,247,.12); color: rgba(244,247,247,.8);
}
.kd__badge.is-ki { background: rgba(201,146,46,.2); color: var(--signal-lit); }

.kd__restart {
  flex: 0 0 auto;
  font: 500 13.5px/1 var(--text);
  padding: 8px 12px; border-radius: 2px; cursor: pointer;
  background: none; color: rgba(244,247,247,.8);
  border: 1px solid rgba(244,247,247,.34);
  transition: border-color .2s ease, color .2s ease;
}
.kd__restart:hover { border-color: var(--paper); color: var(--paper); }

/* ---------- Fortschritt ---------- */
.kd__progress { padding: 13px 18px 0; }
.kd__bar { height: 3px; background: var(--paper-warm); border-radius: 2px; overflow: hidden; }
.kd__bar i { display: block; height: 100%; width: 0; background: var(--signal); transition: width .45s var(--ease); }
.kd__steps { margin-top: 7px; font-size: 12.5px; color: var(--slate); }

/* ---------- Startbildschirm ---------- */
.kd__intro { padding: 22px 18px 26px; }
.kd__introtext { font-size: 15.5px; line-height: 1.6; color: var(--slate); margin-bottom: 16px; }

.kd__note {
  font-size: 13px; line-height: 1.55; color: var(--slate);
  padding: 11px 18px;
}
.kd__intro .kd__note { padding: 11px 14px; }
.kd__note--warn {
  background: rgba(201,146,46,.1);
  border-left: 2px solid var(--signal);
  color: var(--ink);
  margin-bottom: 18px;
}

/* Der Haken im Vorspann auf kontakt.html. Steht dort und nicht am Ende,
   weil KUENI unterwegs nach Name und E-Mail-Adresse fragt. */
.kd__einwilligung { margin: 16px 0 18px; font-size: 14px; }

/* auto-fit statt fester Spalten: bei drei Beispielbetrieben stehen sonst
   zwei oben und einer allein darunter, mit einem Loch daneben. */
.kd__branchen { display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: 12px; margin-bottom: 20px; }
.kd__branche {
  text-align: left; cursor: pointer;
  padding: 14px 15px;
  background: var(--paper);
  border: 1px solid var(--rule); border-radius: 2px;
  transition: border-color .2s ease, background .2s ease;
}
.kd__branche b { display: block; font: 700 15.5px/1.25 var(--display); color: var(--ink); letter-spacing: -.015em; }
.kd__branche span { display: block; margin-top: 3px; font-size: 13px; color: var(--slate); }
.kd__branche:hover { border-color: var(--ink); }
.kd__branche.is-active { border-color: var(--signal); background: rgba(201,146,46,.08); }

/* ---------- Gesprächsverlauf ---------- */
.kd__log {
  padding: 18px;
  max-height: 460px;
  overflow-y: auto;
  background: var(--paper);
  border-top: 1px solid var(--rule);
  scroll-behavior: smooth;
}
.kd__msg { display: flex; margin-bottom: 12px; }
.kd__msg--kunde { justify-content: flex-end; }
.kd__msg:last-child { margin-bottom: 0; }

.kd__bubble {
  max-width: 78%;
  padding: 11px 15px;
  border-radius: 3px;
  font-size: 15.5px; line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
.kd__msg--kueni .kd__bubble { background: var(--white); border: 1px solid var(--rule); color: var(--ink); }
.kd__msg--kunde .kd__bubble { background: var(--ink); color: var(--paper); }

/* Schreibpunkte */
.kd__bubble--typing { display: flex; gap: 4px; align-items: center; padding: 15px; }
.kd__bubble--typing span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--slate);
  animation: kdBlink 1.1s infinite ease-in-out;
}
.kd__bubble--typing span:nth-child(2) { animation-delay: .16s; }
.kd__bubble--typing span:nth-child(3) { animation-delay: .32s; }
@keyframes kdBlink { 0%,80%,100% { opacity: .25; } 40% { opacity: 1; } }

/* ---------- Zusammenfassung ---------- */
.kd__summary {
  max-width: 100%;
  background: var(--white);
  border: 1px solid var(--ink);
  border-left: 3px solid var(--signal);
  border-radius: 3px;
  padding: 17px 19px;
}
.kd__summary h3 {
  font: 700 17px/1.25 var(--display); color: var(--ink);
  letter-spacing: -.02em; margin-bottom: 13px;
  padding-bottom: 10px; border-bottom: 1px solid var(--rule);
}
.kd__sumrow {
  display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 12px;
  padding: 7px 0; border-bottom: 1px solid var(--paper-warm);
}
.kd__sumrow:last-of-type { border-bottom: 0; }
.kd__sumkey { font: 600 12.5px/1.5 var(--text); color: var(--slate); }
.kd__sumval { font-size: 15px; line-height: 1.5; color: var(--ink); overflow-wrap: break-word; }
.kd__reco {
  margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--rule);
  font: 600 14.5px/1.5 var(--text); color: var(--ink);
}
.kd__reco--eilig { color: #8F1D1D; }

/* ---------- Aktionen ---------- */
.kd__actions { display: flex; flex-wrap: wrap; gap: 8px; max-width: 100%; }
.kd__action {
  font: 500 14px/1 var(--text);
  padding: 11px 15px; cursor: pointer;
  background: var(--white); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 2px;
  transition: border-color .2s ease, background .2s ease;
}
.kd__action:hover { border-color: var(--ink); }
.kd__action--primary { background: var(--signal); border-color: var(--signal); font-weight: 600; }
.kd__action--primary:hover { background: var(--signal-lit); border-color: var(--signal-lit); }

/* ---------- Kontaktfelder in der Demo ---------- */
.kd__contact { display: flex; flex-wrap: wrap; gap: 8px; max-width: 100%; }
.kd__cfield {
  font: 400 15px/1.4 var(--text); color: var(--ink);
  padding: 10px 13px; min-width: 0; flex: 1 1 160px;
  background: var(--white); border: 1px solid var(--rule); border-radius: 2px;
}
.kd__cfield:focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(12,28,34,.08); }

/* ---------- Schnellantworten ---------- */
.kd__quick {
  display: flex; flex-wrap: wrap; gap: 7px;
  padding: 13px 18px 0;
  background: var(--paper);
}
.kd__chip {
  font: 500 14px/1 var(--text); color: var(--ink);
  padding: 9px 13px; cursor: pointer;
  background: var(--white);
  border: 1px solid var(--rule); border-radius: 999px;
  transition: border-color .2s ease, background .2s ease;
}
.kd__chip:hover { border-color: var(--signal); background: rgba(201,146,46,.08); }
.kd__chip--termin { border-style: dashed; }

.kd__abort {
  font: 500 13.5px/1 var(--text); color: var(--slate);
  padding: 9px 13px; cursor: pointer;
  background: none; border: 1px solid var(--rule); border-radius: 2px;
}
.kd__abort:hover { border-color: var(--ink); color: var(--ink); }

/* ---------- Eingabe ---------- */
.kd__form {
  display: flex; flex-direction: column; gap: 13px;
  padding: 13px 18px 17px;
  background: var(--paper);
}
.kd__typerow { display: flex; align-items: flex-end; gap: 9px; }
.kd__form textarea {
  flex: 1 1 auto; min-width: 0;
  font: 400 16px/1.5 var(--text); color: var(--ink);
  padding: 12px 14px; resize: none; height: 46px; max-height: 130px;
  background: var(--white);
  border: 1px solid var(--rule); border-radius: 2px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.kd__form textarea:focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(12,28,34,.08); }
.kd__form textarea:disabled { background: var(--paper-warm); color: var(--slate); }

/* Die Spracheingabe stand bis zum 11. September als kleines Quadrat
   zwischen Textfeld und Senden-Knopf und wurde übersehen. Jetzt steht sie
   mittig unter der Texteingabe, rund, mit einem ruhigen Ring, der in
   großem Abstand einmal nach außen läuft. Das reicht, damit jemand sie
   bemerkt, ohne dass es blinkt. */
.kd__microw {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  text-align: center;
}
/* Der Zustand steht neben dem Knopf und nicht mehr als eigene Leiste unter
   dem Gespraech. Die drei Knoepfe darin (Abbrechen, Neu aufnehmen,
   Uebernehmen) sind am 11. September entfallen: das Transkript landet
   direkt im Eingabefeld und laesst sich dort aendern oder loeschen. */
.kd__micline { display: flex; align-items: center; justify-content: center; gap: 11px; flex-wrap: wrap; }
.kd__mic {
  position: relative;
  flex: 0 0 auto; width: 56px; height: 56px;
  display: grid; place-items: center; cursor: pointer;
  background: var(--white); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 50%;
  transition: border-color .2s ease, background .2s ease, color .2s ease, transform .15s ease;
}
.kd__mic:hover:not(:disabled) { border-color: var(--cyan); transform: translateY(-1px); }
.kd__mic:disabled { opacity: .4; cursor: not-allowed; }
.kd__mic:disabled .kd__mic-ring { display: none; }

.kd__mic-ring {
  position: absolute; inset: -5px;
  border: 1.5px solid var(--cyan); border-radius: 50%;
  opacity: 0; pointer-events: none;
  animation: kdMicRuf 4.2s ease-out infinite;
}
@keyframes kdMicRuf {
  0%   { transform: scale(.86); opacity: 0; }
  10%  { opacity: .5; }
  40%  { transform: scale(1.2); opacity: 0; }
  100% { transform: scale(1.2); opacity: 0; }
}
/* Während der Aufnahme ruft der Ring nicht mehr, er zeigt nur noch an,
   dass zugehört wird. */
.kd__mic.is-rec .kd__mic-ring { animation: kdMicAktiv 1.4s ease-in-out infinite; border-color: var(--cyan); }
@keyframes kdMicAktiv {
  0%, 100% { transform: scale(.95); opacity: .55; }
  50%      { transform: scale(1.14); opacity: 0; }
}
.kd__mic-label { font-size: 13px; line-height: 1.4; color: var(--slate); }

.kd__send { flex: 0 0 auto; height: 46px; padding: 0 20px; font-size: 15px; }
.kd__send:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Aufnahmezustand ---------- */
.kd__recstatus {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px;
  background: var(--cyan-soft);
  border: 1px solid rgba(14,160,190,.5); border-radius: 999px;
  font-size: 13.5px; color: var(--ink);
}
.kd__rec-dot {
  width: 9px; height: 9px; border-radius: 50%; background: #8F1D1D;
  animation: kdPulse 1.2s infinite ease-in-out;
}
@keyframes kdPulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
.kd__rec-time { font-variant-numeric: tabular-nums; color: var(--slate); }

/* ---------- Kopfbereich der KÜNI-Seite ----------
   "kennenlernen" ist ein langes Wort. In der schmalen Überschriftenspalte
   würde es sonst mitten im Wort hart umbrechen. */
.kueni-head h1 {
  color: var(--paper);
  font-size: clamp(32px, 12px + 3.6vw, 56px);
  hyphens: auto;
}
@media (max-width: 1080px) {
  .kueni-head .split { grid-template-columns: 1fr; }
}

/* Ein heller Abschlussblock, gleiche Maße wie der dunkle Abschluss. */
.closer--light h2 { max-width: 20ch; }
.closer--light .lead { margin-top: 18px; }

/* ---------- Fragen auf dunklem Grund ---------- */
.faq--dark { border-top-color: var(--rule-dark); }
.faq--dark .faq__item { border-bottom-color: var(--rule-dark); }
.faq--dark .faq__q { color: var(--paper); }
.faq--dark .faq__q:hover { color: var(--signal-lit); }
.faq--dark .faq__q i::before, .faq--dark .faq__q i::after { background: rgba(244,247,247,.6); }
.faq--dark .faq__q[aria-expanded="true"] i::before { background: var(--signal-lit); }
.faq--dark .faq__a p { color: rgba(244,247,247,.82); }

/* ---------- Handy ---------- */
@media (max-width: 620px) {
  .kd__branchen { grid-template-columns: 1fr; }
  .kd__bubble { max-width: 88%; font-size: 15px; }
  .kd__log { max-height: 60vh; padding: 15px; }
  .kd__quick, .kd__form, .kd__intro, .kd__progress { padding-left: 15px; padding-right: 15px; }
  .kd__sumrow { grid-template-columns: 1fr; gap: 2px; }
  .kd__sumkey { font-size: 12px; }
  .kd__head { padding: 12px 14px; gap: 10px; }
  /* Die Rollenzeile bleibt am Handy stehen, sonst steht dort nur ein
     Wort ohne Zusammenhang. Sie wird nur kleiner. */
  .kd__id > span { font-size: 12px; }
  .kd__send { padding: 0 15px; }
  .kd__mic { width: 52px; height: 52px; }
  .kd__mic-label { font-size: 12.5px; }
  .kd__recstatus { font-size: 12.5px; padding: 6px 11px; gap: 7px; }
  .kd__actions .kd__action { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .kd__bubble--typing span, .kd__rec-dot { animation: none; }
  .kd__mic-ring { animation: none; }
  .kd__mic.is-rec .kd__mic-ring { animation: none; opacity: .45; }
  .kd__log { scroll-behavior: auto; }
}

/* ---------- Fehlermeldung und Hinweise ---------- */
.kd__error {
  max-width: 100%;
  background: var(--white);
  border: 1px solid rgba(143,29,29,.34);
  border-left: 3px solid #8F1D1D;
  border-radius: 3px;
  padding: 15px 17px;
}
.kd__error p { font-size: 15px; line-height: 1.55; color: var(--ink); margin-bottom: 12px; }
.kd__error .kd__action { margin: 0; }

/* Notfallhinweis vom Modell hebt sich deutlich ab. */
.kd__bubble--warn {
  border-color: rgba(143,29,29,.45) !important;
  border-left: 3px solid #8F1D1D;
  background: rgba(143,29,29,.06) !important;
  font-weight: 600;
}

/* Kennzeichnung des eingeschraenkten Modus ohne KI. */
.kd__demohint {
  margin: 0;
  padding: 11px 18px;
  background: var(--paper-warm);
  border-top: 1px solid var(--rule);
  font-size: 13px; line-height: 1.55; color: var(--slate);
}
.kd__demohint b { color: var(--ink); }

.kd__branche[aria-pressed] { }

/* ---------- Fortschritt in Cyan, weil er zur Technik gehoert ---------- */
.kd__bar i { background: var(--cyan); }
.kd__avatar { background: var(--cyan-soft); border-color: rgba(14,160,190,.55); color: var(--cyan-lit); }
.kd__badge.is-ki { background: rgba(14,160,190,.24); color: var(--cyan-lit); }
.kd__chip:hover { border-color: var(--cyan); background: var(--cyan-soft); }
.kd__summary { border-left-color: var(--cyan); }
.kd__mic.is-rec { background: var(--cyan); border-color: var(--cyan); color: #fff; }

/* ================= Anfrageübersicht =================
   Zeigt, was der Betrieb nach einem KÜNI Gespräch bekommt.
   Die Daten sind Beispiele und werden sichtbar so gekennzeichnet. */

.demo-flag {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 12px/1 var(--text); letter-spacing: .05em; text-transform: uppercase;
  padding: 8px 12px; border-radius: 2px;
  background: var(--cyan-soft); color: var(--ink);
  border: 1px solid rgba(14,160,190,.45);
}
.demo-flag::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan);
}
.section--dark .demo-flag { color: var(--paper); background: rgba(14,160,190,.18); border-color: rgba(14,160,190,.45); }

.reqs { margin-top: 24px; display: grid; gap: 12px; }
.req {
  background: var(--white);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--cyan);
  border-radius: 3px;
  padding: 16px 18px;
}
.req--mensch { border-left-color: #8F1D1D; }
.req--erledigt { border-left-color: var(--rule); opacity: .72; }

.req__top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.req__name { font: 700 16.5px/1.2 var(--display); color: var(--ink); letter-spacing: -.015em; }
.req__meta { font-size: 13px; color: var(--slate); }
.req__status {
  margin-left: auto; flex: 0 0 auto;
  font: 600 11.5px/1 var(--text); letter-spacing: .04em;
  padding: 6px 10px; border-radius: 999px;
  background: var(--paper-warm); color: var(--slate);
  border: 1px solid var(--rule);
}
.req__status--neu        { background: var(--cyan-soft); color: #0A7186; border-color: rgba(14,160,190,.45); }
.req__status--nachfrage  { background: rgba(201,146,46,.12); color: #8A6516; border-color: rgba(201,146,46,.42); }
.req__status--vollstaendig { background: rgba(31,110,74,.1); color: #1F6E4A; border-color: rgba(31,110,74,.34); }
.req__status--mensch     { background: rgba(143,29,29,.1); color: #8F1D1D; border-color: rgba(143,29,29,.32); }

.req__grid {
  margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--paper-warm);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 18px;
}
.req__cell small { display: block; font: 600 11.5px/1.3 var(--text); letter-spacing: .04em; text-transform: uppercase; color: var(--slate); margin-bottom: 3px; }
.req__cell span { font-size: 14.5px; line-height: 1.45; color: var(--ink); }
.req__sum { margin-top: 12px; font-size: 14.5px; line-height: 1.55; color: var(--slate); }
.req__next {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--paper-warm);
  font: 600 14px/1.45 var(--text); color: var(--ink);
}
.req__next b { color: var(--slate); font-weight: 600; }

/* ================= Kanaele, die zusammenlaufen ================= */

.kanaele { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 26px); }
.kanaele__col h3 { margin-bottom: 12px; }
.chan { display: grid; gap: 9px; }
.chan li {
  display: flex; align-items: baseline; gap: 11px;
  padding: 13px 15px;
  background: var(--white);
  border: 1px solid var(--rule); border-radius: 3px;
  font-size: 15.5px; line-height: 1.45; color: var(--ink);
}
.chan--live li { border-left: 3px solid var(--cyan); }
.chan--geplant li { border-left: 3px solid var(--rule); color: var(--slate); }
.chan__tag {
  margin-left: auto; flex: 0 0 auto;
  font: 600 11px/1 var(--text); letter-spacing: .04em; text-transform: uppercase;
  padding: 5px 9px; border-radius: 2px;
  background: var(--cyan-soft); color: #0A7186;
}
.chan--geplant .chan__tag { background: var(--paper-warm); color: var(--slate); }

@media (max-width: 900px) {
  .req__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kanaele { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .req__grid { grid-template-columns: 1fr; gap: 10px; }
  .req__status { margin-left: 0; }
  .chan li { flex-wrap: wrap; }
  .chan__tag { margin-left: 0; }
}

/* ================= KÜNI Vorschau auf der Startseite =================
   Zeigt einen kurzen Gesprächsausschnitt. Kein echtes Chatfenster,
   deshalb bewusst ruhiger als die Demo selbst. */

.kueni-teaser {
  /* Bis zum 9. September sass der Baustein in der rechten Spalte einer
     .split-Aufteilung und war damit von selbst schmal. Jetzt steht er in
     der vollen Breite unter dem Abschnittskopf, und ohne Grenze waeren
     die Sprechblasen ueber tausend Pixel breit. So sieht kein Messenger
     aus. */
  max-width: 720px;
  margin-top: 26px;
  padding: 20px;
  background: var(--white);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--cyan);
  border-radius: 3px;
}
/* Wer hier spricht. Der Abschnitt heisst "Lernen Sie KÜNI kennen" und
   zeigte bisher nur zwei Sprechblasen ohne Absender. */
.kueni-teaser__wer {
  display: flex; align-items: center; gap: 10px;
  margin: -2px 0 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}
.kueni-teaser__kopf {
  display: grid; place-items: center;
  width: 34px; height: 34px; flex: none;
  border-radius: 50%;
  background: var(--ku-marke);
  color: #DCEEF2;
}
.kueni-teaser__kopf svg { display: block; }
.kueni-teaser__kopf .kuni-auge { animation: kuniBlinzeln 5.4s ease-in-out infinite; }
.kueni-teaser__kopf .kuni-auge:last-of-type { animation-delay: .06s; }
@media (prefers-reduced-motion: reduce) {
  .kueni-teaser__kopf .kuni-auge { animation: none; }
}
.kueni-teaser__name {
  font: 600 14.5px/1.3 var(--text);
  color: var(--slate);
}
/* Branche des gezeigten Falls. Die Vorschau zeigte bis zum 9. September
   denselben Heizungsfall wie der Seitenkopf. Jetzt steht hier ein
   anderer Betrieb, und das Schild sagt welcher — sonst wirkt der
   Wechsel wie ein Versehen. Es ist zugleich die Beschriftung, die das
   geplante Fall-Karussell auf jeder Karte braucht. */
.kueni-teaser__branche {
  margin-left: auto;
  padding: 4px 9px;
  border-radius: 3px;
  background: var(--paper-warm);
  font: 600 11.5px/1.3 var(--text);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--slate);
}

.kueni-teaser__line {
  max-width: 88%;
  padding: 11px 15px;
  border-radius: 3px;
  font-size: 15.5px;
  line-height: 1.55;
  margin-bottom: 10px;
}
.kueni-teaser__line--in {
  background: var(--ink);
  color: var(--paper);
  margin-left: auto;
}
.kueni-teaser__line--out {
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--ink);
}
.kueni-teaser__hint {
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--paper-warm);
  font-size: 14px;
  line-height: 1.55;
  color: var(--slate);
}

@media (max-width: 620px) {
  .kueni-teaser { padding: 15px; }
  .kueni-teaser__line { max-width: 96%; font-size: 15px; }
}

/* ================= Bildflächen auf der KÜNI-Seite =================
   Das Grundgerüst .bildkopf steht in styles.css, weil es auch die
   Kontaktseite nutzt. Hier stehen nur die Zusätze der KÜNI-Seite. */

/* Die Kettenliste liegt auf dem Bild und braucht etwas mehr Halt. */
.bildkopf .chain li {
  background: rgba(21,43,51,.82);
  border-left-color: var(--cyan-brand);
  color: rgba(244,247,247,.92);
  backdrop-filter: blur(2px);
}
.bildkopf .founder__quote { color: var(--paper); border-top-color: rgba(244,247,247,.24); }

/* Der Lichtschein nimmt hier die Markenfarbe an. Diese Datei wird nur auf
   der KÜNI-Seite geladen, deshalb bleibt der Bildkopf der Kontaktseite
   beim bernsteinfarbenen Standardton. */
.bildkopf { --spot: 14,160,190; }

/* ================= Bewegung in der Demo =================
   Neue Nachrichten steigen kurz herein statt einfach zu erscheinen.
   Das ist der Teil der Seite, den man am Handy am meisten sieht, und
   ohne die Bewegung wirkt das Gespräch tot. */
@keyframes kdEintritt {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.kd__msg { animation: kdEintritt .34s var(--ease) both; }

/* Die Zusammenfassung ist der Höhepunkt und darf etwas ruhiger kommen. */
.kd__summary { animation: kdEintritt .5s var(--ease) both; }

/* Schnellantworten erscheinen leicht versetzt hintereinander. */
.kd__chip { animation: kdEintritt .3s var(--ease) both; }
.kd__chip:nth-child(2) { animation-delay: .06s; }
.kd__chip:nth-child(3) { animation-delay: .12s; }
.kd__chip:nth-child(4) { animation-delay: .18s; }

/* Der Fortschrittsbalken bekommt beim Wachsen einen kurzen Schimmer. */
.kd__bar { position: relative; overflow: hidden; }
.kd__bar i { position: relative; }
.kd__bar i::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transform: translateX(-100%);
  animation: kdSchimmer 2.4s ease-in-out infinite;
}
@keyframes kdSchimmer {
  0%, 55% { transform: translateX(-100%); }
  100%    { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .kd__msg, .kd__summary, .kd__chip { animation: none; }
  .kd__bar i::after { animation: none; opacity: 0; }
}

/* ================= Live-Effekte in der Demo =================
   Der Chat soll erkennbar laufen, auch bevor man etwas eingibt. */

/* Betriebspunkt am Profilbild. Zeigt, dass der Assistent bereit ist. */
.kd__avatar { position: relative; overflow: visible; }
.kd__avatar::after {
  content: "";
  position: absolute; right: -2px; bottom: -2px;
  width: 12px; height: 12px; border-radius: 50%;
  background: #2BC7A4;
  border: 2px solid var(--ink);
  animation: duPuls 2.4s ease-in-out infinite;
}

/* Das Schild fuer die Betriebsart bekommt einen mitlaufenden Punkt. */
.kd__badge { display: inline-flex; align-items: center; gap: 7px; }
.kd__badge::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  animation: kdBlinken 2.4s ease-in-out infinite;
}
@keyframes kdBlinken {
  0%, 100% { opacity: .35; transform: scale(.85); }
  50%      { opacity: 1;   transform: scale(1); }
}

/* Die Schreibpunkte in der Vorschau auf der Startseite laufen dauerhaft,
   damit der Ausschnitt wie ein aktives Gespraech wirkt. */
.kueni-teaser__tippen {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 10px; padding: 11px 15px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 3px;
}
.kueni-teaser__tippen span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ku-marke);
  opacity: .3;
  animation: kdBlink 1.25s infinite ease-in-out;
}
.kueni-teaser__tippen span:nth-child(2) { animation-delay: .18s; }
.kueni-teaser__tippen span:nth-child(3) { animation-delay: .36s; }

@media (prefers-reduced-motion: reduce) {
  .kd__avatar::after, .kd__badge::before,
  .kueni-teaser__tippen span { animation: none; }
}

/* ================= KÜNI-Popup auf der Startseite ================= */
/* Dieselben Bausteine wie die Demo: Kopf, Profilbild, Sprechblase, Schreibpunkte. Steuerung: kueni-popup.js */

.kueni-popup {
  --kueni-popup-rand: clamp(16px, 2.2vw, 28px);
  position: fixed;
  right: var(--kueni-popup-rand);
  bottom: calc(var(--kueni-popup-rand) + max(env(safe-area-inset-bottom, 0px), var(--kueni-popup-sockel, 0px)));
  /* Unter der Kopfzeile (60): das offene Handymenü liegt über dem Fenster, nicht umgekehrt. */
  z-index: 55;
  width: 392px;
  max-width: calc(100vw - 2 * var(--kueni-popup-rand));
  transition: bottom .45s var(--ease);
}
.kueni-popup[hidden] { display: none; }

.kueni-popup__karte {
  overflow: hidden;
  background: var(--white);
  border: 1px solid rgba(12,28,34,.16);
  border-top: 3px solid var(--cyan);
  border-radius: 3px;
  box-shadow:
    0 0 0 1px rgba(244,247,247,.12),
    0 30px 60px -22px rgba(12,28,34,.55),
    0 12px 28px -14px rgba(12,28,34,.32);
  transform-origin: 100% 100%;
  opacity: 0;
  transform: translateY(18px) scale(.97);
  transition: opacity .2s ease, transform .3s ease-in;
}
.kueni-popup.is-offen .kueni-popup__karte {
  opacity: 1;
  transform: none;
  transition: opacity .35s ease, transform .6s var(--ease);
}

.kueni-popup__zu {
  flex: 0 0 auto;
  margin-left: auto;
  display: grid; place-items: center;
  width: 40px; height: 40px; padding: 0;
  background: none;
  color: rgba(244,247,247,.8);
  border: 1px solid rgba(244,247,247,.34);
  border-radius: 2px;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.kueni-popup__zu:hover { border-color: var(--paper); color: var(--paper); background: rgba(244,247,247,.06); }

.kueni-popup__verlauf { padding: 16px 18px 18px; background: var(--paper); }
.kueni-popup__verlauf.is-wachsend { overflow: hidden; transition: height .45s var(--ease); }
.kueni-popup .kd__id b { align-self: flex-start; }
.kueni-popup .kd__msg { margin-bottom: 0; }
.kueni-popup .kd__bubble { max-width: 100%; white-space: normal; }

.kueni-popup__nachricht,
.kueni-popup__aktionen { display: none; }
.kueni-popup__aktionen { flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.kueni-popup__aktionen .btn { flex: 1 1 auto; }
.kueni-popup.is-geschrieben .kueni-popup__tippen { display: none; }
.kueni-popup.is-geschrieben .kueni-popup__nachricht { display: flex; }
.kueni-popup.is-geschrieben .kueni-popup__aktionen { display: flex; animation: kdEintritt .34s var(--ease) .1s both; }

@media (max-width: 560px) {
  .kueni-popup { --kueni-popup-rand: 12px; left: var(--kueni-popup-rand); width: auto; max-width: none; }
  .kueni-popup__karte { transform-origin: 50% 100%; }
  .kueni-popup__verlauf { padding: 14px 14px 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .kueni-popup { transition: none; }
  .kueni-popup__karte,
  .kueni-popup.is-offen .kueni-popup__karte { transform: none; transition: opacity .2s ease; }
  .kueni-popup.is-geschrieben .kueni-popup__aktionen { animation: none; }
}