/* -----------------------------------------------------------------------------
 * zusage.css — die Zusagen-Karte, geteilt von Dashboard („Deine Zusagen") und
 * Chat („Zusage festgehalten ✓" mit „Widerrufen" unter VETIs Antwort). Markup:
 * js/zusage-karte.js (Chat-Karte) bzw. dashboard.js (aktive/erledigte Zeilen).
 * -------------------------------------------------------------------------- */
.zusage {
  border: 1px solid var(--border-base-primary); border-radius: var(--r-card);
  background: rgba(255, 255, 255, 0.72);
  padding: var(--sp-4);
}
.zusage--faellig { border-color: var(--c-yellow-400); background: rgba(250, 204, 21, 0.08); }
.zusage__box { display: flex; align-items: flex-start; gap: var(--sp-3); cursor: pointer; }
.zusage__check { margin-top: 2px; width: 16px; height: 16px; flex: none; accent-color: var(--c-teal-500); cursor: pointer; }
.zusage__inhalt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.zusage__titel { font-size: 14px; font-weight: 600; color: var(--content-base-primary); }
.zusage__text { font-size: 13px; line-height: 1.5; color: var(--content-base-secondary); }
.zusage__faellig { font-size: 11px; color: var(--content-base-tertiary); }
.zusage--faellig .zusage__faellig { color: var(--c-yellow-700, #a16207); font-weight: 600; }
.zusage--erledigt { opacity: 0.62; }
.zusage--erledigt .zusage__titel { text-decoration: line-through; color: var(--content-base-tertiary); }
.zusage--erledigt .zusage__box { cursor: default; }

.zusage__vorschlag-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--c-teal-500);
}
.zusage__aktionen { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); }
.zusage__btn {
  font: inherit; font-size: 13px; font-weight: 600; line-height: 1;
  padding: 8px 14px; border-radius: var(--r-pill); border: 1px solid transparent;
  cursor: pointer;
}
.zusage__btn:disabled { opacity: 0.55; cursor: default; }
.zusage__btn--ja { background: var(--c-teal-500); color: #fff; }
.zusage__btn--nein {
  background: transparent; color: var(--content-base-secondary);
  border-color: var(--border-base-primary);
}

/* Verschieben: „03.10.2026 → 17.10.2026" — das neue Datum hervorgehoben. */
.zusage__faellig--verschieben { color: var(--content-base-secondary); }
.zusage__meldung { font-size: 12px; color: var(--content-base-secondary); }
.zusage__meldung:empty { display: none; }

/* Chat: die Karte unter der Blase, so breit wie die Antwort. */
.zusage--chat {
  margin-top: var(--sp-3);
  max-width: 100%;
  box-sizing: border-box;
  font-family: inherit;
}
.zusage--bestaetigt { border-color: var(--c-teal-300); background: rgba(20, 184, 166, 0.06); }
.zusage--bestaetigt .zusage__vorschlag-label { color: var(--c-teal-500); }
.zusage--verworfen { opacity: 0.62; }
.zusage--verworfen .zusage__vorschlag-label { color: var(--content-base-tertiary); }
.zusage--verworfen .zusage__titel { text-decoration: line-through; color: var(--content-base-tertiary); }
.zusage--erledigt .zusage__vorschlag-label { color: var(--content-base-tertiary); }

/* Dashboard: „Widerrufen" dezent neben „Daran arbeiten" (19.10., ohne Bestätigen) */
.zusage__widerrufen { color: var(--content-base-tertiary); }
.zusage--widerrufen .zusage__aktionen { margin-top: var(--sp-2); }

/* B3.3 (19.10.): verschobene Zusage — „verschoben · ursprünglich fällig <s>03.10.</s>" */
.zusage__historie { font-size: 11px; color: var(--content-base-tertiary); }
.zusage__historie s { text-decoration-thickness: 1px; }

/* E16 (19.10.): Vetis Vorschlag für ein Ziel / die Firmen-DNA (js/profil-vorschlag.js) —
   wie der Zusagen-Vorschlag: gestrichelt, erst „Übernehmen" macht es zum Eintrag. */
.pv {
  border: 1px dashed var(--c-brand-purple-400); border-radius: var(--r-card);
  background: rgba(144, 127, 255, 0.06);
  padding: var(--sp-3) var(--sp-4);
  display: flex; flex-direction: column; gap: 4px;
  list-style: none;
}
.pv--chat { margin-top: var(--sp-3); max-width: 560px; }
.pv__kopf { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.pv__marke {
  font-size: 11px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--c-brand-purple-500);
}
.pv__titel { font-size: 12px; color: var(--content-base-tertiary); }
.pv__text { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.45; color: var(--content-base-primary); }
.pv__info { margin: 0; font-size: 12px; color: var(--content-base-tertiary); }
.pv__aktionen { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); }
.pv__ja { background: var(--c-brand-purple-500); color: #fff; }
.pv__meldung { margin: 0; font-size: 12px; color: var(--c-yellow-700); }
.pv__meldung:empty { display: none; }
.pv--angenommen { border-style: solid; border-color: var(--border-base-secondary); background: rgba(255, 255, 255, 0.6); }
.pv--angenommen .pv__marke { color: var(--content-positive); }
.pv--verworfen { opacity: 0.6; border-style: solid; border-color: var(--border-base-primary); background: transparent; }
.pv--verworfen .pv__text { text-decoration: line-through; font-weight: 500; }

/* Gedächtnis-Plan Welle C (19.10.): Gedächtnis-Karten (js/gedaechtnis-karte.js) — gemerkt (leise),
   „Soll ich mir merken …?" / Rückfrage / „Veti sieht …" (gestrichelt wie ein Vorschlag). */
.gk {
  border: 1px dashed var(--c-brand-purple-400); border-radius: var(--r-card);
  background: rgba(144, 127, 255, 0.06);
  padding: var(--sp-2) var(--sp-3);
  display: flex; flex-direction: column; gap: 2px;
  list-style: none;
}
.gk--chat { margin-top: var(--sp-2); max-width: 560px; }
.gk--gemerkt, .gk--entschieden { border-style: solid; border-color: var(--border-base-secondary); background: rgba(255, 255, 255, 0.6); }
.gk__kopf { margin: 0; }
.gk__marke { font-size: 11px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--c-brand-purple-500); }
.gk--entschieden .gk__marke { color: var(--content-positive); }
.gk__text { margin: 0; font-size: 14px; line-height: 1.45; color: var(--content-base-primary); }
.gk__alt { color: var(--content-base-tertiary); font-size: 12px; }
.gk__info { margin: 0; font-size: 12px; color: var(--content-base-tertiary); }
.gk__aktionen { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.gk__ja { background: var(--c-brand-purple-500); color: #fff; }
.gk__meldung { margin: 0; font-size: 12px; color: var(--c-yellow-700); }
.gk__meldung:empty { display: none; }
.gk--weg { opacity: 0.6; }
.gk--weg .gk__text { text-decoration: line-through; }
.wissen__status { font-size: 11px; font-weight: 600; color: var(--c-brand-purple-500); }
/* INU-866 (Entscheidung 7): „Darf ich mir auch Persönliches merken?" (js/einwilligung-karte.js) */
.ew .gk__info a, .ew--profil a { color: var(--c-brand-purple-500); }
.wissen__persoenlich:empty { display: none; }
.ew--profil { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--border-base-secondary); }
.ew--profil .body-sm { margin: 0; }
.ew--profil .gk__ja { align-self: flex-start; }
.ew__widerruf { align-self: flex-start; }
/* Art. 9 (Stefan 29.10.2026): Gesundheits-Fragen im Fragebogen (js/gesundheit-einwilligung.js) —
   Profil-Abschnitt mit Nachtragen; Zwischenschirm im Bogen (chat.css: .ge--bogen). */
.ge--profil { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--border-base-secondary); }
.ge--profil .body-sm { margin: 0; }
.ge--profil a { color: var(--c-brand-purple-500); }
.ge--profil .gk__ja { align-self: flex-start; }
.ge__nachtrag { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3); border: 1px dashed var(--c-brand-purple-400); border-radius: var(--r-card); background: rgba(144, 127, 255, 0.06); }
.ge__zaehler { margin: 0; color: var(--content-base-tertiary); }
.ge__frage { margin: 0; font-weight: 600; font-size: 15px; line-height: 1.4; color: var(--content-base-primary); }
.ge__optionen { display: grid; gap: 8px; }
.ge__option {
  text-align: left; font: inherit; font-size: 14px; line-height: 1.45; cursor: pointer;
  padding: 10px 14px; min-height: 44px; border-radius: 12px;
  border: 1.5px solid var(--border-base-secondary); background: #fff; color: var(--content-base-primary);
}
.ge__option:hover { border-color: var(--c-brand-purple-400); }
.ge__option:focus-visible { outline: 2px solid var(--c-brand-purple-500); outline-offset: 2px; }
.ge__option--leise { border-style: dashed; color: var(--content-base-tertiary); }
.ge__option:disabled { opacity: .5; cursor: default; }

/* Stefan 19.10.: Prompt für seine KI (js/prompt-karte.js) — Hauptprompt sichtbar, Kontext
   eingeklappt, „Prompt kopieren" kopiert beides. Mobil (390 px) volle Breite, großer Knopf. */
.pk {
  margin-top: var(--sp-3); max-width: 560px;
  border: 1px solid var(--c-brand-purple-400); border-radius: var(--r-card);
  background: rgba(144, 127, 255, 0.06);
  padding: var(--sp-3) var(--sp-4);
  display: flex; flex-direction: column; gap: 6px;
  min-width: 0;
}
.pk__kopf { margin: 0; }
.pk__marke {
  font-size: 11px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--c-brand-purple-500);
}
.pk__titel { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--content-base-primary); }
.pk__prompt, .pk__kontext-text {
  white-space: pre-wrap; overflow-wrap: anywhere;
  font-size: 13px; line-height: 1.5; color: var(--content-base-primary);
  background: rgba(255, 255, 255, 0.75); border: 1px solid var(--border-base-primary);
  border-radius: 10px; padding: 10px 12px;
  max-height: 240px; overflow-y: auto;
}
.pk__kontext summary {
  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--content-base-secondary);
  padding: 4px 0; list-style-position: inside;
}
.pk__kontext[open] summary { margin-bottom: 6px; }
.pk__kontext-text { color: var(--content-base-secondary); }
.pk__hinweis { margin: 0; font-size: 12px; color: var(--content-base-tertiary); }
.pk__aktionen { display: flex; gap: var(--sp-2); margin-top: 2px; }
.pk__kopieren {
  background: var(--c-brand-purple-500); color: #fff;
  padding: 11px 18px; font-size: 14px;
}
.pk__kopieren.is-kopiert { background: var(--c-teal-500); }
.pk__meldung { margin: 0; font-size: 12px; color: var(--c-yellow-700); }
.pk__meldung:empty { display: none; }
@media (max-width: 480px) {
  .pk { padding: var(--sp-3); }
  .pk__kopieren { width: 100%; }
  .pk__prompt { max-height: 200px; }
}
.pk-toast {
  position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 12px);
  background: #1f1b2e; color: #fff; font-size: 14px; font-weight: 500;
  padding: 10px 16px; border-radius: var(--r-pill);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease;
  z-index: 1000; max-width: calc(100vw - 32px); text-align: center;
}
.pk-toast.is-sichtbar { opacity: 1; transform: translate(-50%, 0); }

/* Prompt-Karte: Hinweis zum VETI-Connector (seit 30.10.2026 immer — es gibt den Prompt nur mit Connector). */
.pk__kurz { margin-top: 6px; max-height: 160px; }
.pk__connector { display: block; margin: 2px 0 0; font-size: 12px; line-height: 1.45; color: var(--content-base-secondary); }
.pk__connector a { color: var(--c-brand-purple-500); font-weight: 600; }

/* G: Profil-Karte „VETI in Claude und ChatGPT" (#connector-karte) */
.vc { display: flex; flex-direction: column; gap: var(--sp-2); }
.vc > p { margin: 0; }
.vc .gruppe__titel { margin-top: var(--sp-2); }
.vc__url { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.vc__url code {
  flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; font-size: 13px;
  background: rgba(255, 255, 255, 0.75); border: 1px solid var(--border-base-primary);
  border-radius: 10px; padding: 10px 12px; color: var(--content-base-primary);
}
.vc__kopieren { background: var(--c-brand-purple-500); color: #fff; padding: 10px 16px; font-size: 14px; }
.vc__anleitung { border: 1px solid var(--border-base-primary); border-radius: 12px; padding: 8px 12px; background: rgba(255, 255, 255, 0.5); }
.vc__anleitung summary { cursor: pointer; font-weight: 600; font-size: 14px; padding: 4px 0; }
.vc__anleitung ol { margin: 6px 0 4px; padding-left: 20px; font-size: 14px; line-height: 1.5; }
.vc__anleitung li { margin: 4px 0; }
.vc__anleitung p { margin: 4px 0 0; }
.vc__anweisung {
  white-space: pre-wrap; font-size: 13px; line-height: 1.5; color: var(--content-base-primary);
  background: rgba(144, 127, 255, 0.06); border: 1px solid var(--c-brand-purple-400);
  border-radius: 10px; padding: 10px 12px;
}
.vc__aktionen { display: flex; gap: var(--sp-2); }
.vc__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.vc__verbindung {
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2);
  border: 1px solid var(--border-base-primary); border-radius: 12px; padding: 10px 12px; background: rgba(255, 255, 255, 0.6);
}
.vc__info { display: block; }
.vc__meldung:empty { display: none; }
@media (max-width: 480px) {
  .vc__kopieren { width: 100%; }
}

/* INU-877 (27.10.2026): Feature-Wunsch an das INUVETA-Team weitergegeben (js/wuensche.js) —
   kleine Bestätigung unter Vetis Antwort, nur nach erfolgreichem Weitergeben. */
.wk {
  margin-top: var(--sp-3); max-width: 560px;
  display: flex; gap: 10px; align-items: flex-start;
  border: 1px solid rgba(13, 140, 66, 0.28); border-radius: var(--r-card);
  background: rgba(13, 140, 66, 0.06);
  padding: 10px 14px; min-width: 0;
}
.wk__ikon { font-size: 18px; line-height: 1.3; flex: none; }
.wk__text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wk__kopf {
  margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--c-green-700, #0D8C42);
}
.wk__titel { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--content-base-primary); overflow-wrap: anywhere; }
.wk__fuss { margin: 0; font-size: 12px; color: var(--content-base-tertiary); }
.wk__fuss a { color: var(--c-brand-purple-500); }

/* INU-879 (27.10.): „Als Idee festgehalten" (js/ideen.js) und „Startseite angepasst"/Vorschlag
   (js/start-anpassen.js) unter Vetis Antwort — gleiche Form wie die Wunsch-Bestätigung (.wk). */
.ik, .sk {
  display: flex; gap: var(--sp-3, 12px); align-items: flex-start;
  margin-top: var(--sp-3, 12px); padding: 10px 14px; border-radius: 14px;
  background: rgba(100, 80, 232, 0.06); border: 1px solid rgba(100, 80, 232, 0.16);
}
.ik__ikon, .sk__ikon { font-size: 18px; line-height: 1.3; flex: none; }
.ik__text, .sk__text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ik__kopf, .sk__kopf { margin: 0; font-size: 12px; font-weight: 600; color: var(--c-brand-purple-600, #5B47D6); }
.ik__titel, .sk__titel { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--content-base-primary); overflow-wrap: anywhere; }
.ik__projekt { font-weight: 400; color: var(--content-base-secondary); }
.ik__fuss, .sk__fuss { margin: 0; font-size: 12px; color: var(--content-base-tertiary); }
.ik__fuss a, .sk__fuss a { color: var(--c-brand-purple-500); }
.ik__fuss .linkbtn, .sk__fuss .linkbtn {
  font: inherit; font-size: 12px; background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--c-brand-purple-500); text-decoration: underline;
}
.ik__fuss .linkbtn:disabled, .sk__fuss .linkbtn:disabled { opacity: .5; cursor: default; }
.sk__knoepfe .btn { padding: 8px 14px; font-size: 13px; min-height: 36px; }
.sk__grund { margin: 0; font-size: 13px; color: var(--content-base-secondary); }
.sk__knoepfe { display: flex; gap: var(--sp-2, 8px); flex-wrap: wrap; margin-top: 6px; }
.sk__stand { font-weight: 600; color: var(--content-base-secondary); }
.sk__knoepfe .btn--secondary {
  background: #fff; color: var(--content-base-primary, #1C1C1E); border: 1px solid rgba(28, 28, 30, 0.14);
}
.sk__knoepfe .btn--secondary:hover { background: rgba(28, 28, 30, 0.04); }

/* INU-881: „In meinen Kalender" (js/zusagen-kalender.js) + Profil-Karte */
.zk-platz { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.zusage--chat .zk-knopf { font-size: 13px; }
.zk-knopf--drin { color: var(--text-muted, #6b7280); }
.zk-ok { font-size: 13px; color: var(--ok, #15803d); }
.zk-fehler { display: block; font-size: 13px; color: var(--warn, #b45309); margin: 4px 0 0; }
.zk-wahl { display: flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
.zk-wahl input { width: 18px; height: 18px; }