/* =====================================================================
   KI-Adventskalender · Türchen zum Aufdecken (Paket S19A, Vertrag V1 funktionen.interaktiv)
   Stil zu public/js/interaktiv.js. Geladen nur mit dem Schalter, nach style.css und vor den Themes.
   Nur Farben, Radien und Schriften aus den Tokens, damit jedes Design (etwa mit 8 px Ecken und
   eigener Schrift) seine Form behält. Farbpaare für Text sind die aus werkzeuge/kontrast.js.
   Bewegung nur ohne reduzierte Bewegung, sonst erscheinen Teile ohne Übergang.
   ===================================================================== */

/* Kernaussage: Lead der Edition, hervorgehoben */
.day-lead.ia-kern {
  margin-top: var(--sp-4);
  padding: var(--sp-1) 0 var(--sp-1) var(--sp-4);
  border-left: 3px solid var(--c-primary);
  color: var(--c-text);
  font-weight: 600;
  line-height: 1.45;
}

/* Leiste mit „Alles anzeigen“ */
.day-body.ia-body { margin-top: var(--sp-6); }
.ia-leiste { display: flex; justify-content: flex-end; margin-bottom: calc(var(--sp-2) * -1); }
.ia-alles { min-height: 44px; color: var(--c-primary-text); }
.ia-alles .icon { width: 18px; height: 18px; }

/* Knöpfe nebeneinander, auf dem Handy untereinander in voller Breite */
.ia-knoepfe { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.ia-knoepfe .btn { min-height: 44px; }
@media (max-width: 479px) {
  .ia-knoepfe > .btn { flex: 1 1 100%; }
}

/* Mythos: raten, dann Auflösung */
.ia-raten { padding: var(--sp-4) 0 0; }
.ia-raten-frage { margin: 0 0 var(--sp-3); font-weight: 700; font-size: var(--fs-lg); }
.ia-raten .ia-knoepfe > .btn { flex: 1 1 160px; }
/* Rückmeldung als Teil der Karte zwischen Behauptung und Realität */
.myth .ia-mythos-rueckmeldung { border-radius: 0; border-top: 1px solid var(--c-line); padding: var(--sp-4) var(--sp-5); }
.ia-mythos-rueckmeldung:focus { outline: none; }
.ia-mythos .myth-back:focus { outline: none; }
/* Nach falschem Tipp (S20B, F13): die Wahl bleibt markiert wie eine falsche Antwort im Wissenscheck */
.ia-tipp.is-falsch { border-color: var(--c-danger); background: var(--c-danger-soft); box-shadow: inset 0 0 0 1px var(--c-danger); }
.ia-tipp.is-falsch:disabled { opacity: 1; }
.ia-tipp.is-falsch .icon { color: var(--c-danger); }
.ia-mythos-nochmal { margin-top: var(--sp-4); }

/* Rechner (S20B, F18): Regler und Eingabefeld für den Anteil in einer Zeile */
.ia-anteil-zeile { display: flex; align-items: center; gap: var(--sp-3); }
.ia-anteil-zeile input[type="range"] { flex: 1 1 auto; width: auto; min-width: 0; }
.ia-prozentfeld { display: inline-flex; flex: none; align-items: center; gap: var(--sp-1); font-weight: 700; color: var(--c-text); }
.calc .ia-prozentfeld .num-input { width: 5em; text-align: right; font-weight: 700; }

/* Praxisbeispiel: Schritte nacheinander. Die Linie zum nächsten Schritt nur, wenn er sichtbar ist. */
.ia-schritte li:has(+ li[hidden])::after { display: none; }
.ia-schritte li:has(+ li[hidden]) { padding-bottom: 0; }
.ia-schritte .step-text:focus { outline: none; }
.ia-schritte + .ia-knoepfe { margin-top: var(--sp-5); padding-left: 48px; }
@media (max-width: 479px) {
  .ia-schritte + .ia-knoepfe { padding-left: 0; }
}

/* Steckbrief: vier Karten zum Aufklappen */
.ia-karten { display: flex; flex-direction: column; gap: var(--sp-3); }
.ia-karte {
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface);
  overflow: hidden;
}
.ia-karte.is-offen { border-color: var(--c-control); }
.ia-karte-kopf { margin: 0; font-family: var(--font-text); font-size: var(--fs-md); font-weight: 700; letter-spacing: 0; line-height: 1.3; }
.ia-karte-knopf {
  display: flex; align-items: center; gap: var(--sp-3);
  width: 100%; min-height: 56px;
  padding: var(--sp-3) var(--sp-4);
  border: 0; background: transparent; color: var(--c-text);
  font: inherit; text-align: left; cursor: pointer;
}
.ia-karte-knopf:hover { background: var(--c-surface-2); }
/* Kurze Karte ohne Knopf (S20G, F17): gleicher Kopf, aber kein Klickziel, der Inhalt steht immer da */
.ia-karte-zeile {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: 56px;
  padding: var(--sp-3) var(--sp-4);
  color: var(--c-text);
}
.ia-symbol {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 36px; height: 36px; border-radius: var(--r-sm);
  background: var(--c-primary-soft); color: var(--c-primary-text);
}
.ia-symbol .icon { width: 20px; height: 20px; }
.ia-karte-titel { flex: 1; min-width: 0; }
.ia-pfeil { display: inline-flex; flex: none; color: var(--c-text-muted); transition: transform var(--dur) var(--ease); }
.ia-pfeil .icon { width: 20px; height: 20px; }
.ia-karte-knopf[aria-expanded="true"] .ia-pfeil { transform: rotate(180deg); }
.ia-karte-inhalt { padding: 0 var(--sp-4) var(--sp-4) calc(var(--sp-4) + 36px + var(--sp-3)); line-height: 1.55; }
.ia-karte-inhalt:focus { outline: none; }
.ia-karte-inhalt p { margin: 0; }
.ia-mehr { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--sp-1); }
@media (max-width: 479px) {
  .ia-karte-inhalt { padding-left: var(--sp-4); }
}

/* Prompt: Bausteine farbig, Erklärung und Beispiel zum Aufklappen */
/* Nur die Kennung trägt die Farbe, der Text bleibt in der Schrift des Prompts */
.ia-baustein-name {
  display: inline-block;
  margin-right: 0.4em;
  padding: 0 0.35em;
  border-radius: var(--r-xs);
  font-weight: 700;
}
.ia-farbe-0 .ia-baustein-name { background: var(--c-primary-soft); color: var(--c-primary-text); }
.ia-farbe-1 .ia-baustein-name { background: var(--c-success-soft); color: var(--c-success); }
.ia-farbe-2 .ia-baustein-name { background: var(--c-mark); color: var(--c-text); }
.ia-farbe-3 .ia-baustein-name { background: var(--c-surface); color: var(--c-text); box-shadow: inset 0 0 0 1px var(--c-control); }
.ia-aufklappen { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
.ia-aufklappen > .ia-teil { align-self: stretch; }
.ia-klapp { min-height: 44px; }
.ia-klapp[aria-expanded="true"] { border-color: var(--c-primary); }
.ia-teil:focus { outline: none; }

/* Checkliste: Fortschritt groß über der Liste */
.ia-fortschritt {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface-2);
  color: var(--c-text);
}
.ia-fortschritt-symbol { display: inline-flex; color: var(--c-primary-text); }
.ia-fortschritt-symbol .icon { width: 22px; height: 22px; }
.ia-fortschritt-text { font-weight: 700; font-size: var(--fs-md); font-variant-numeric: tabular-nums; }
.ia-meter { flex: 1 1 120px; max-width: none; height: 8px; }
.ia-fortschritt.is-fertig { border-color: var(--c-success); }
.ia-fortschritt.is-fertig .ia-fortschritt-symbol { color: var(--c-success); }
.ia-fortschritt.is-fertig .ia-meter > span { background: var(--c-success); }

/* Wissenscheck: neuer Versuch */
.ia-nochmal .ia-knoepfe { margin-top: var(--sp-3); }
/* Symbole in Knöpfen im Kasten „Nicht ganz“ (Mythos und Wissenscheck) wie die Schrift des Knopfs (Paket S20I,
   Befund B3). Sonst greifen .feedback .icon mit 22 px und .feedback.is-incorrect .icon mit der Fehlerfarbe
   aus style.css. Gleiche Spezifität, diese Datei lädt später. */
.feedback .btn .icon { width: 18px; height: 18px; margin-top: 0; color: inherit; }
#quiz-feedback .feedback:focus { outline: none; }

/* Prompt: Vorlage und Beispiel in einem Feld (Paket S20C, F15). Der Umschalter steht im Kopf an der
   Stelle von „Prompt zum Kopieren“, Kopieren bleibt rechts. Ausgefüllte Stellen im Beispiel tragen
   Fläche und Unterstrich in der Farbe für Erfolg, Platzhalter bleiben wie im Design. Die Regel für die
   Markierung ist stärker als die der Themes für .prompt-text mark. */
.ia-prompt .prompt-head { flex-wrap: wrap; row-gap: var(--sp-2); }
.ia-ansicht {
  display: inline-flex; flex: none; gap: 2px;
  margin-right: auto;
  padding: 2px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  background: var(--c-surface);
}
.ia-ansicht-knopf {
  min-height: 44px;
  padding: 0 var(--sp-4);
  border: 0;
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--c-text-muted);
  font: inherit; font-size: var(--fs-sm); font-weight: 700; line-height: 1.2;
  cursor: pointer;
}
.ia-ansicht-knopf:hover { background: var(--c-surface-2); color: var(--c-text); }
.ia-ansicht-knopf[aria-pressed="true"] { background: var(--c-primary-soft); color: var(--c-primary-text); }
/* Schmal: Umschalter und Kopieren in einer Zeile. Die Fensterpunkte der Themes entfallen, Kopieren zeigt
   nur das Symbol, der Text bleibt für Bildschirmleser (wie .sr-only). Sonst stand Kopieren allein in einer
   zweiten Zeile. */
@media (max-width: 479px) {
  .ia-prompt .prompt-head { flex-wrap: nowrap; }
  .ia-prompt .prompt-head::before { display: none; }
  .ia-ansicht { flex: 1 1 auto; min-width: 0; }
  .ia-ansicht-knopf { flex: 1 1 0; padding: 0 var(--sp-2); }
  .ia-prompt .copy-btn { flex: none; min-width: 44px; min-height: 44px; padding: 0 var(--sp-3); }
  .ia-prompt .copy-btn > span {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
  }
}
.ia-body .prompt-text mark.ia-gefuellt {
  padding: 0 2px;
  border-radius: var(--r-xs);
  background: var(--c-success-soft);
  color: var(--c-success);
  box-shadow: inset 0 -2px 0 var(--c-success);
}
.day-body > .prompt + .ia-legende { margin-top: var(--sp-2); }
.ia-legende-fleck {
  display: inline-block;
  width: 1.75em; height: 0.95em;
  margin-right: 0.45em;
  vertical-align: -0.12em;
  border-radius: var(--r-xs);
  background: var(--c-success-soft);
  box-shadow: inset 0 -2px 0 var(--c-success);
}

/* Gedanke: Situationen zum Aufdecken zwischen Zitat und Frage zum Nachdenken (Paket S20C, F22) */
.ia-situationen-frage { margin: 0; font-size: var(--fs-xl); line-height: 1.3; }
.ia-situationen-hinweis { margin: var(--sp-2) 0 0; color: var(--c-text-muted); font-size: var(--fs-sm); }
.ia-situationen-liste {
  display: flex; flex-direction: column; gap: var(--sp-3);
  margin: var(--sp-4) 0 0; padding: 0;
  list-style: none;
  counter-reset: ia-situation;
}
.ia-situation {
  position: relative;
  padding: var(--sp-4) var(--sp-4) var(--sp-4) calc(var(--sp-4) + 32px + var(--sp-3));
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface);
}
.ia-situation::before {
  counter-increment: ia-situation;
  content: counter(ia-situation);
  position: absolute; left: var(--sp-4); top: var(--sp-4);
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: var(--r-pill);
  background: var(--c-primary-soft);
  color: var(--c-primary-text);
  font-weight: 700; font-size: var(--fs-sm);
}
.ia-situation-text { margin: 0; padding-top: 4px; font-weight: 700; line-height: 1.45; }
.ia-situation .ia-knoepfe { margin-top: var(--sp-3); }
.ia-situation-antwort {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  margin-top: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-left: 3px solid var(--c-success);
  border-radius: var(--r-sm);
  background: var(--c-surface-2);
  color: var(--c-text);
}
.ia-situation-antwort p { margin: 0; line-height: 1.5; }
.ia-situation-antwort:focus { outline: none; }
.ia-antwort-symbol { display: inline-flex; flex: none; margin-top: 1px; color: var(--c-success); }
.ia-antwort-symbol .icon { width: 20px; height: 20px; }
@media (max-width: 479px) {
  .ia-situation { padding: var(--sp-4); }
  .ia-situation::before { position: static; margin-bottom: var(--sp-2); }
}

/* Ruhige Einblendung frisch aufgedeckter Teile, beim Mythos ein sanfter Kartenwechsel */
@media (prefers-reduced-motion: no-preference) {
  .ia-neu { animation: ia-auf var(--dur-slow) var(--ease) both; }
  .ia-gewechselt .myth-front { animation: ia-wechsel var(--dur-slow) var(--ease) both; }
  @keyframes ia-auf { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  @keyframes ia-wechsel { from { opacity: 0.55; transform: scale(0.985); } to { opacity: 1; transform: none; } }
}