/* KI-Guide: Rundgang durch das KI-Onboarding und Teaser.
   Grundlage: konzept.md im Projekt „KI-Guide Formate“. Nur Tokens der Website (css/tokens.css).
   Ausgangszustand ist die Fassung ohne 3D. Die Klasse kig-js auf <html> (gesetzt im <head>)
   schaltet die 3D-Bühne ein; ki-guide.js nimmt sie wieder weg, wenn die Szene nicht starten kann. */

/* ---------- Grundgerüst ---------- */
.kig { padding: 32px var(--px) 0; }
.kig-spur { position: relative; }
.kig-buehne {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  /* Warmer Grund wie die Szene (ki-guide.js, C.grund: Weiß mit 7 % Orange) */
  background: color-mix(in srgb, var(--orange) 7%, var(--white));
}
.kig-standbild { display: block; width: 100%; height: auto; }
.kig-canvas, .kig-labels, .kig-hud { display: none; }

/* ---------- Fassung ohne 3D: Standbild und Text ---------- */
.kig-ohne-3d { margin: 20px 0 0; font-size: 15px; color: var(--text-secondary); }
.kig-schritte { display: grid; gap: 20px; margin-top: 20px; }
.kig-raum {
  display: grid;
  gap: 8px;
  padding: 24px;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
}
.kig-raum > p, .kig-schritt > p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text-primary); }
.kig-raum-titel { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 1.15; color: var(--ink-deep); }
.kig-raum-phase, .kig-raum-fakten { color: var(--text-secondary) !important; font-size: 14px !important; }
.kig-schritt { display: grid; gap: 4px; }
.kig-schritt-titel { margin: 8px 0 0; font-size: 17px; font-weight: 700; color: var(--ink-deep); }
.kig-schritte > .kig-schritt .kig-schritt-titel { font-family: var(--font-display); font-weight: 400; font-size: 22px; }

/* ---------- Rundgang mit 3D-Bühne ---------- */
.kig-js .kig[data-kig-modus="rundgang"] .kig-spur { height: calc(11 * 100vh); height: calc(11 * 100svh); }
.kig-js .kig[data-kig-modus="rundgang"] .kig-buehne {
  position: sticky;
  top: calc(var(--kig-kopf, 81px) + 24px);
  height: calc(100vh - var(--kig-kopf, 81px) - 48px);
  height: calc(100svh - var(--kig-kopf, 81px) - 48px);
}
.kig-js .kig .kig-standbild, .kig-js .kig .kig-ohne-3d { display: none; }
.kig-js .kig .kig-canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; }
.kig-js .kig .kig-labels { display: block; position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.kig-js .kig .kig-hud { display: block; position: absolute; inset: 0; pointer-events: none; }

/* Die Spur trägt die Textfassung für Screenreader; sichtbar ist sie nur ohne 3D. */
.kig-js .kig .kig-schritte { display: block; position: absolute; inset: 0; margin: 0; pointer-events: none; }
.kig-js .kig .kig-raum { display: block; position: static; padding: 0; border: 0; background: none; }
.kig-js .kig .kig-schritt { display: block; position: absolute; left: 0; right: 0; top: calc(var(--k, 0) * 100vh); top: calc(var(--k, 0) * 100svh); height: 1px; }
.kig-js .kig .kig-schritt > *,
.kig-js .kig .kig-raum > :not(.kig-schritt) {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.kig-js .kig .kig-raum-link { display: none; }

/* ---------- Overlay ---------- */
.kig-hinweis, .kig-leiste, .kig-steuerung, .kig-karte { position: absolute; pointer-events: auto; }

.kig-hinweis {
  left: 20px; bottom: 20px; margin: 0;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  background: var(--white); color: var(--text-primary);
  border-radius: var(--radius-full); box-shadow: var(--shadow-md);
  font-size: 14px; line-height: 1.3;
  pointer-events: none;
  transition: opacity var(--duration-slow) var(--ease-standard);
}
.kig-pfeil { color: var(--blue-primary); font-weight: 700; display: inline-block; animation: kig-stups 1.4s ease-in-out infinite; }
@keyframes kig-stups { 50% { transform: translateY(3px); } }

/* Leiste: senkrecht links ab 1024 px, sonst waagerecht oben */
.kig-leiste {
  left: 16px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  transition: opacity var(--duration-slow) var(--ease-standard);
}
.kig-leiste-knopf, .kig-leiste-tuer {
  appearance: none; border: 0; background: color-mix(in oklch, var(--white) 70%, transparent);
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; max-width: 280px;
  padding: 6px 16px 6px 6px;
  border-radius: var(--radius-full);
  font: 600 14px/1.25 var(--font-body); color: var(--text-secondary);
  text-align: left; text-decoration: none; cursor: pointer;
  transition: background var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}
.kig-leiste-knopf[data-k="0"], .kig-leiste-tuer { padding-left: 16px; }
.kig-leiste-knopf:hover, .kig-leiste-tuer:hover { color: var(--ink-deep); background: var(--white); }
.kig-leiste-knopf[aria-current="step"] { background: var(--white); color: var(--ink-deep); box-shadow: var(--shadow-md); }
.kig-leiste-tuer { display: none; color: var(--ink-deep); }
.kig.ist-schluss .kig-leiste-tuer { display: inline-flex; }

.kig-nr {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: inline-grid; place-items: center;
  font: 700 12px/1 var(--font-body);
  background: var(--kig-farbe, var(--blue-primary)); color: var(--white);
}
[data-raum="1"] .kig-nr, .kig-nr[data-raum="1"] { --kig-farbe: var(--orange); color: var(--ink-deep); }
[data-raum="2"] .kig-nr, .kig-nr[data-raum="2"] { --kig-farbe: var(--green); }
[data-raum="3"] .kig-nr, .kig-nr[data-raum="3"] { --kig-farbe: var(--purple); }

/* Pause und Hinweis */
.kig-steuerung { right: 16px; top: 16px; display: flex; align-items: center; gap: 10px; flex-direction: row-reverse; }
.kig-pause {
  appearance: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 18px 0 16px;
  border-radius: var(--radius-full);
  background: var(--white); color: var(--ink-deep);
  box-shadow: var(--shadow-md);
  font: 600 14px/1 var(--font-body);
}
.kig-pause-symbol { display: inline-block; width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; box-sizing: border-box; }
.kig-pause[aria-pressed="true"] .kig-pause-symbol { width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; }
.kig-tipp {
  padding: 7px 14px; border-radius: var(--radius-full);
  background: color-mix(in oklch, var(--white) 85%, transparent);
  font-size: 13px; color: var(--text-secondary);
}

/* Zoomknöpfe und „Zurück zum Rundgang“ als Spalte unter dem Pause-Knopf (konzept.md, Abschnitt 7.4) */
.kig-zoom {
  position: absolute; right: 16px; top: 68px;
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
}
.kig-zoom-gruppe {
  display: flex; flex-direction: column;
  background: var(--white); border-radius: var(--radius-full); box-shadow: var(--shadow-md);
  pointer-events: auto;
}
.kig-zoom-knopf {
  appearance: none; border: 0; background: none; cursor: pointer; position: relative;
  width: 44px; height: 44px; border-radius: var(--radius-full); color: var(--ink-deep);
}
.kig-zoom-knopf::before, .kig-zoom-plus::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px;
  background: currentColor; border-radius: 1px; transform: translate(-50%, -50%);
}
.kig-zoom-plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.kig-zoom-minus { border-top: 1px solid var(--border-default); border-radius: 0 0 var(--radius-full) var(--radius-full); }
.kig-zoom-plus { border-radius: var(--radius-full) var(--radius-full) 0 0; }
.kig-zoom-knopf:hover { color: var(--blue-primary); }
.kig-zurueck {
  display: none; pointer-events: auto;
  appearance: none; border: 0; cursor: pointer;
  height: 44px; padding: 0 18px;
  border-radius: var(--radius-full);
  background: var(--white); color: var(--ink-deep);
  box-shadow: var(--shadow-md);
  font: 600 14px/1 var(--font-body); white-space: nowrap;
}
.kig.ist-erkunden .kig-zurueck { display: inline-flex; align-items: center; }
.kig.ist-erkunden { --kig-karte-frei: 232px; }

/* Textkarte. Ihre Höchsthöhe endet unterhalb von Pause, Zoomknöpfen und „Zurück zum Rundgang“; der Inhalt scrollt in der Karte. */
.kig-karte {
  right: 16px; bottom: 16px;
  width: min(420px, calc(100% - 32px));
  max-height: calc(100% - var(--kig-karte-frei, 180px)); overflow: auto;
  background: var(--surface-card);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: 22px 24px 20px;
  opacity: 0; visibility: hidden;
  transition: opacity var(--duration-slow) var(--ease-standard), visibility 0s linear var(--duration-slow);
}
.kig-karte.ist-sichtbar { opacity: 1; visibility: visible; transition: opacity var(--duration-slow) var(--ease-standard); }
.kig-karte-inhalt { transition: opacity 180ms var(--ease-standard), transform 180ms var(--ease-standard); }
.kig-karte-inhalt.ist-wechsel { opacity: 0; transform: translateY(6px); }
.kig-karte-kopf { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 1.3; color: var(--text-secondary); }
.kig-karte-kopf .kig-nr { width: 22px; height: 22px; font-size: 11px; }
.kig-karte-titel { margin: 10px 0 6px; font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 1.1; color: var(--ink-deep); }
.kig-karte-fakten { margin: 0; }
.kig-karte-satz { margin: 10px 0 0; }
.kig-karte-ergebnis { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--text-primary); }
.kig-zonen { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.kig-zonen-knoepfe { display: flex; }
.kig-zone-knopf {
  appearance: none; border: 0; background: none; padding: 0; cursor: pointer;
  width: 32px; height: 32px; display: grid; place-items: center;
}
.kig-zone-knopf::before {
  content: ""; display: block; width: 14px; height: 14px; border-radius: var(--radius-full);
  background: var(--gray-300); transition: width var(--duration-slow) var(--ease-standard), background var(--duration-base);
}
.kig-zone-knopf:hover::before { background: var(--gray-400); }
.kig-zone-knopf[aria-current="step"]::before { width: 28px; background: var(--kig-farbe, var(--blue-primary)); }
.kig-zonen-titel { margin: 0; font-size: 14px; font-weight: 700; color: var(--ink-deep); }
.kig-zonen-text { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--text-primary); }
.kig-klick { margin-top: 10px; }
.kig-klick summary { display: inline-flex; align-items: center; min-height: 28px; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--blue-primary); }
.kig-klick-liste { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.kig-klick-knopf {
  appearance: none; cursor: pointer;
  min-height: 32px; padding: 6px 12px;
  border: 1px solid var(--border-default); border-radius: var(--radius-full);
  background: var(--white); color: var(--ink-deep);
  font: 600 13px/1.2 var(--font-body);
}
.kig-klick-knopf:hover { border-color: var(--gray-400); }
.kig-karte-link { display: inline-block; margin-top: 12px; }

/* Beschriftungen und Sprechblase in der Szene */
.kig-label {
  position: absolute; left: 0; top: 0; white-space: nowrap; will-change: transform;
  display: flex; align-items: center; gap: 8px;
  padding: 5px 14px 5px 5px; border-radius: var(--radius-full);
  background: var(--ink-deep); color: var(--white);
  font: 600 13px/1 var(--font-body);
  box-shadow: var(--shadow-md);
  transition: opacity 350ms var(--ease-standard), background var(--duration-base) var(--ease-standard);
}
.kig-label .kig-nr { width: 24px; height: 24px; font-size: 11px; }
.kig-label.ist-aktiv { background: var(--blue-primary); }
.kig-label-tuer { padding: 7px 14px; background: var(--white); color: var(--ink-deep); }
.kig-labels.ist-nah .kig-label { opacity: 0; }

.kig-blase {
  position: absolute; left: 0; top: 0; width: max-content; max-width: 250px;
  padding: 10px 14px 11px; border-radius: 18px;
  background: var(--white); color: var(--text-primary);
  font: 500 14px/1.4 var(--font-body);
  box-shadow: var(--shadow-md);
  opacity: 0; transition: opacity var(--duration-base) var(--ease-standard);
}
.kig-blase::after {
  content: ""; position: absolute; left: 50%; bottom: -6px; width: 14px; height: 14px;
  background: var(--white); border-radius: 3px; transform: translateX(-50%) rotate(45deg);
}
.kig-blase.ist-sichtbar { opacity: 1; }
.kig-blase-rolle { display: block; margin-bottom: 5px; font: 700 11px/1 var(--font-body); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--blue-primary); }
.kig-blase-liste { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 3px; font-size: 13px; }
.kig-blase-titel { display: block; font-weight: 700; color: var(--ink-deep); }

/* ---------- Breiten ---------- */
/* Unter 1280 px steht die Leiste oben, damit neben der Textkarte genug Platz für die Zone bleibt. */
@media (max-width: 1279.98px) {
  .kig-leiste {
    top: 12px; left: 12px; transform: none;
    max-width: calc(100% - 84px);
    flex-direction: row; flex-wrap: wrap; gap: 6px;
  }
  .kig-leiste-knopf, .kig-leiste-tuer { min-height: 36px; padding: 0 12px; gap: 6px; background: var(--white); box-shadow: var(--shadow-sm); }
  .kig-leiste-knopf .kig-nr { display: none; }
  .kig-leiste-name[data-kurz] { font-size: 0; }
  .kig-leiste-name[data-kurz]::after { content: attr(data-kurz); font-size: 13px; }
  .kig-leiste-knopf[aria-current="step"] { background: var(--ink-deep); color: var(--white); }
  .kig-steuerung { top: 12px; right: 12px; }
  .kig-zoom { top: 64px; right: 12px; }
}
/* Niedrige Bühne (etwa Smartphone im Querformat): Zoomknöpfe als Reihe unter dem Pause-Knopf, damit die Textkarte Platz behält */
@media (max-height: 640px) and (min-width: 768px) {
  .kig-zoom, .kig-zoom-gruppe { flex-direction: row-reverse; align-items: center; }
  .kig-zoom-plus { border-radius: 0 var(--radius-full) var(--radius-full) 0; }
  .kig-zoom-minus { border-top: 0; border-right: 1px solid var(--border-default); border-radius: var(--radius-full) 0 0 var(--radius-full); }
  .kig, .kig.ist-erkunden { --kig-karte-frei: 128px; }
}
@media (max-width: 1023.98px) {
  .kig-tipp { display: none; }
  .kig-karte { width: min(380px, calc(100% - 24px)); right: 12px; bottom: 12px; }
}
/* Tablet im Hochformat: Textkarte unten über die volle Breite, wie auf dem Smartphone */
@media (min-width: 768px) and (max-width: 1023.98px) and (orientation: portrait) {
  .kig-karte { left: 12px; right: 12px; width: auto; max-height: 50%; }
  .kig-karte-satz, .kig-karte-ergebnis { display: none; }
}
@media (max-width: 767.98px) {
  .kig { padding-top: 24px; }
  .kig-js .kig[data-kig-modus="rundgang"] .kig-buehne {
    top: calc(var(--kig-kopf, 64px) + 16px);
    height: calc(100vh - var(--kig-kopf, 64px) - 32px);
    height: calc(100svh - var(--kig-kopf, 64px) - 32px);
  }
  .kig-pause { width: 44px; padding: 0; justify-content: center; }
  .kig-pause-text { display: none; }
  .kig-hinweis { left: 12px; right: 12px; bottom: 12px; justify-content: center; }
  .kig-karte { left: 12px; right: 12px; width: auto; padding: 16px; max-height: 52%; }
  .kig-karte-titel { font-size: 22px; margin-top: 6px; }
  .kig-label-raum { padding: 4px; }
  .kig-label-raum .kig-label-name { display: none; }
  .kig-label-tuer { padding: 5px 10px; font-size: 11px; }
  .kig-karte-satz, .kig-karte-ergebnis { display: none; }
  .kig-raum { padding: 18px; }
}

/* ---------- Teaser auf der Seite KI-Onboarding ---------- */
/* Sichtschlitz (konzept.md, Abschnitt 16): so breit wie die übrigen Elemente der Seite, Seitenverhältnis 4 : 1,
   auf schmalen Bildschirmen mindestens 160 px hoch. Keine Beschriftungen in der Szene.
   width: 100 % ist nötig: Ohne feste Breite macht aspect-ratio aus der Mindesthöhe eine Mindestbreite von 640 px. */
.kig[data-kig-modus="teaser"] { padding: 0; }
.kig[data-kig-modus="teaser"] .kig-buehne { width: 100%; aspect-ratio: 4 / 1; min-height: 160px; border: 1px solid var(--border-default); }
.kig[data-kig-modus="teaser"] .kig-standbild { width: 100%; height: 100%; object-fit: cover; }
.kig[data-kig-modus="teaser"].kig-3d .kig-canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 600ms var(--ease-standard); cursor: pointer; }
.kig[data-kig-modus="teaser"].kig-3d.ist-bereit .kig-canvas { opacity: 1; }
.kig[data-kig-modus="teaser"] .kig-labels { display: none; }
.kig[data-kig-modus="teaser"].kig-3d .kig-hud { display: block; position: absolute; inset: 0; pointer-events: none; }
.kig-teaser-unten { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: 16px; }
.kig-teaser-text { margin: 0; font-size: 17px; line-height: 1.45; color: var(--text-primary); }
.kig-teaser-knopf {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 22px;
  border-radius: var(--radius-full); background: var(--blue-primary); color: var(--white);
  font: 700 14px/1 var(--font-body); text-decoration: none; white-space: nowrap;
}
.kig-teaser-knopf:hover { background: var(--blue-bright); }

/* ---------- Tastaturfokus ---------- */
/* Pause-Knopf und Leiste tragen eigene Schatten. Ohne diese Regel überdecken sie den Fokusring der Website (konzept.md, Abschnitt 9). */
.kig :focus-visible { box-shadow: 0 0 0 3px var(--blue-bright); }

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  .kig-pfeil { animation: none; }
  .kig-karte, .kig-karte-inhalt, .kig-label, .kig-blase, .kig-hinweis, .kig-leiste, .kig-zone-knopf::before { transition: none; }
}