/* ═══════════════════════════════════════════════════════════════
   Warten auf D.AI — EINE Lade-Kachel für Konfigurator und Explore
   (Julian, 05.10.2026: „dieselbe Ladefunktion … wirklich dieser Ladescreen,
   den wir sonst auch haben"). Markup: partials/dai-laden, Verhalten:
   js/dai-laden.js. Bis zum 05.10.2026 stand das hier in konfigurator.css,
   und Explore zeigte beim Warten nur eine Textzeile.
   ═══════════════════════════════════════════════════════════════ */

/* ── Warten (Julian, 29.09.2026: „muss dann auch richtig animiert werden") ────
   Rund 50 Sekunden sind zu lang für ein bloßes Schimmern. Deshalb: die Kachel
   schimmert weiter, darin dreht und atmet ein Funke, darunter läuft ein Balken
   und die verstrichene Zeit. Keine Prozentzahl — die API meldet keinen
   Fortschritt, jede Zahl wäre erfunden. Der Balken nähert sich der erwarteten
   Dauer und bleibt kurz davor stehen, bis das Bild wirklich da ist. */
/* Die Platzhalterkachel steht für das kommende Bild — in Panelbreite wäre sie
   quadratisch fast 400 px hoch und schöbe alles aus dem Blick. Gedeckelt und
   mittig. */
.kf-ki-skelett-kachel {
  position: relative; display: grid; place-items: center;
  max-width: 240px; margin: 0 auto; color: rgba(17, 17, 17, 0.3);
}
.kf-ki-skelett-funke { width: 40px; height: 40px; animation: kf-ki-funke 2.6s ease-in-out infinite; }
/* Pulsiert statt zu drehen (Julian, 12.10.2026: „nicht so komisch dreht,
   sondern … einfach größer und kleiner") */
@keyframes kf-ki-funke {
  0%, 100% { transform: scale(0.86); opacity: 0.45; }
  50% { transform: scale(1.12); opacity: 0.95; }
}
.kf-ki-balken {
  height: 3px; margin-top: 10px; border-radius: 999px;
  background: rgba(17, 17, 17, 0.08); overflow: hidden;
}
.kf-ki-balken > span {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, #7c5cff, #ff5fa2);
  transition: width 0.45s linear;
}
.kf-ki-uhr { margin-left: 6px; color: rgba(17, 17, 17, 0.35); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  .kf-ki-skelett-funke { animation: none; }
  .kf-ki-balken > span { transition: none; }
}

/* Ladezustand beim ersten Erzeugen: schimmernde Platzhalterkachel statt eines
   wartenden Knopfes. Der Schimmer läuft nur, wenn der Besucher Bewegung will. */
.kf-ki-skelett { margin-top: 12px; }
.kf-ki-skelett-kachel {
  width: 100%; aspect-ratio: 1; border-radius: 10px;
  background: linear-gradient(100deg, #efeeec 30%, #f8f7f5 50%, #efeeec 70%);
  background-size: 220% 100%;
  animation: kf-ki-schimmer 1.4s ease-in-out infinite;
}
.kf-ki-skelett-text {
  margin: 8px 0 0; text-align: center;
  font-family: 'DM Sans', sans-serif; font-size: 12.5px; color: var(--kf-mid);
}
@keyframes kf-ki-schimmer { 0% { background-position: 120% 0; } 100% { background-position: -20% 0; } }
@media (prefers-reduced-motion: reduce) { .kf-ki-skelett-kachel { animation: none; } }

/* Ohne Konfigurator-Tokens (Explore lädt konfigurator.css nicht) */
.kf-ki-skelett-text { color: var(--kf-mid, #888); }
.kf-ki-skelett[hidden] { display: none; }

/* ═══════════════════════════════════════════════════════════════
   Das D.AI-Ergebnis — EIN Satz Bauteile für Konfigurator und Explore
   (Julian, 06.10.2026: „wenn bereiche quasi gleich sind sollen sie auch
   gleich aussehen"). Bis dahin stand das in konfigurator.css, und Explore
   hatte ein eigenes, anders aussehendes Fenster.

   Die --kf-*-Farben definiert der Konfigurator. Explore hat sie nicht; dort
   setzt .lab-dai-dialog sie mit genau den Werten des Konfigurators (Grau
   #666 = die kontrastgeprüfte Fassung).
   ═══════════════════════════════════════════════════════════════ */
.lab-dai-dialog {
  --kf-ink: #111; --kf-mid: #666; --kf-akzent: #1d6bff;
  --kf-border: rgba(0, 0, 0, 0.1); --kf-border-strong: rgba(0, 0, 0, 0.14);
  --kf-bg: #f0eeec; --kf-fehler: #d23737;
  --kf-transparenz: repeating-conic-gradient(#cdc4b5 0% 25%, #f4f1ea 0% 50%) 50% / 14px 14px;
}
.kf-ki-status { font-size: 11.5px; line-height: 1.4; color: var(--kf-mid); margin: 0; }
.kf-ki-status.kf-ki-fehler { color: var(--kf-fehler); }
.kf-ki-status[hidden] { display: none; }
.kf-ki-ergebnis { display: flex; flex-direction: column; gap: 9px; }
.kf-ki-ergebnis[hidden] { display: none; }
.kf-ki-vorschau {
  position: relative; /* Anker für die Lade-Pille beim Anpassen */
  border: 1px solid var(--kf-border); border-radius: 10px; padding: 8px;
  background: repeating-conic-gradient(#f0f0ee 0% 25%, #fff 0% 50%) 50% / 16px 16px; /* Karo = Transparenz */
  display: flex; align-items: center; justify-content: center; min-height: 170px;
}
/* „Design wird angepasst …" als Pille mittig AUF dem Bild (statt darunter) */
.kf-ki-lade-pille {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  max-width: calc(100% - 24px); text-align: center;
  background: rgba(17, 17, 17, 0.82); color: #fff;
  font-size: 11.5px; font-weight: 600; line-height: 1.4;
  padding: 7px 14px; border-radius: 999px; z-index: 3; pointer-events: none;
}
/* Ergebnis größer zeigen (Julian, 17.08.2026: „man soll gut erkennen, dass man
   es bearbeiten kann") — Höhe zusätzlich an den Viewport geklemmt, damit auf
   flachen Fenstern die Aktionen darunter erreichbar bleiben */
.kf-ki-vorschau img { max-width: 100%; max-height: min(280px, 34vh); display: block; }
/* Herz am D.AI-Ergebnis (12.10.2026) — dieselbe runde Form wie auf den Karten */
.kf-ki-merken {
  position: absolute; top: 8px; right: 8px; z-index: 2; width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .94); color: #111; box-shadow: 0 2px 8px rgba(0, 0, 0, .14);
}
.kf-ki-merken[hidden] { display: none; }
.kf-ki-merken svg { width: 17px; height: 17px; }
.kf-ki-merken[aria-pressed="true"] svg { fill: #111; stroke: #111; }   /* wie das Herz auf den Karten */
.kf-ki-merken:disabled { opacity: .6; cursor: default; }
@media (max-width: 820px) { .kf-ki-merken { width: 44px; height: 44px; } }
/* Verlauf als klickbare Mini-Thumbs unterm Ergebnis (statt „‹ 1/2 ›") */
.kf-ki-verlauf { display: flex; flex-wrap: wrap; gap: 6px; }
/* „Bisher erzeugt": dauerhafte Galerie aller D.AI-Ergebnisse (Julian, 01.09.2026).
   Kacheln teilen sich die .kf-bib-item-Optik der Bibliothek — gleiche Bauteile. */
/* „Bisher erzeugt" ist ein Ausklapper und startet zu (Julian, 02.10.2026) —
   die Liste wuchs mit jedem Motiv und schob alles darunter aus dem Blick. */
.kf-ki-galerie { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--kf-border); }
.kf-ki-galerie-kopf {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer; list-style: none;
}
.kf-ki-galerie-kopf::-webkit-details-marker { display: none; }
.kf-ki-galerie-kopf::after {
  content: ''; width: 7px; height: 7px; flex: none; margin-left: auto;
  border-right: 1.6px solid var(--kf-mid); border-bottom: 1.6px solid var(--kf-mid);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .15s;
}
.kf-ki-galerie[open] .kf-ki-galerie-kopf::after { transform: rotate(-135deg) translate(-2px, -2px); }
.kf-ki-galerie-label { font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--kf-mid); margin: 0; }
.kf-ki-galerie-zahl { font-size: 11px; font-weight: 500; color: var(--kf-mid); }
.kf-ki-galerie-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
/* Die Kachel: im Konfigurator trägt sie zusätzlich .kf-bib-item (gleiche Werte),
   in Explore gibt es die Bibliothek nicht — deshalb steht die Optik hier. */
.kf-ki-galerie-item {
  position: relative; aspect-ratio: 1; border: 1px solid var(--kf-border); border-radius: 8px; cursor: pointer;
  background: var(--kf-transparenz); overflow: hidden; padding: 4px;
  display: flex; align-items: center; justify-content: center; transition: border-color 0.13s, transform 0.13s;
}
.kf-ki-galerie-item:hover { border-color: var(--kf-akzent); transform: translateY(-1px); }
.kf-ki-galerie-item img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.kf-ki-verlauf[hidden] { display: none; }
.kf-ki-verlauf-thumb {
  width: 44px; height: 44px; padding: 2px; cursor: pointer; border-radius: 8px;
  border: 1.5px solid var(--kf-border);
  background: repeating-conic-gradient(#f0f0ee 0% 25%, #fff 0% 50%) 50% / 10px 10px;
}
.kf-ki-verlauf-thumb:hover { border-color: var(--kf-border-strong); }
.kf-ki-verlauf-thumb.aktiv { border-color: var(--kf-ink); }
.kf-ki-verlauf-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 5px; }
/* Anpassen (bearbeitet das AKTUELLE Bild weiter) — als Eingabe-Pille wie ein
   modernes KI-Feld (Julian, 13.10.2026: „cleaner und modern", Richtung A):
   Stift links, Feld ohne eigenen Rahmen, runder D.AI-Pfeil rechts. Kein Label,
   keine Beispiele — Freistellen passiert ohnehin automatisch. */
.kf-ki-refine {
  display: flex; align-items: center; gap: 6px; margin-top: 2px;
  padding: 4px 4px 4px 14px; border: 1px solid var(--kf-border); border-radius: 999px; background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.kf-ki-refine:focus-within { border-color: var(--kf-ink); box-shadow: 0 0 0 3px rgba(124, 92, 255, .12); }
.kf-ki-refine-stift { flex: none; display: inline-flex; color: var(--kf-mid); }
/* „Neues Design" — Kreispfeil oben am Bild, links neben dem Herz */
.kf-ki-neu-knopf {
  position: absolute; top: 8px; right: 52px; z-index: 2; width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .94); color: #111; box-shadow: 0 2px 8px rgba(0, 0, 0, .14);
}
.kf-ki-neu-knopf svg { width: 17px; height: 17px; }
.kf-ki-neu-knopf:hover, .kf-ki-merken:hover { background: #fff; }
/* Ohne Herz (Seite ohne Kopfzeile) rückt der Kreispfeil in die Ecke */
.kf-ki-vorschau:not(:has(.kf-ki-merken:not([hidden]))) .kf-ki-neu-knopf { right: 8px; }
@media (max-width: 820px) { .kf-ki-neu-knopf { width: 44px; height: 44px; right: 60px; } }
.kf-ki-refine-input {
  flex: 1 1 auto; min-width: 0; padding: 8px 2px; font-size: 16px; font-family: inherit;
  border: 0; background: transparent; color: var(--kf-ink);
}
.kf-ki-refine-input:focus { outline: none; }
.kf-ki-refine-input::placeholder { color: rgba(17, 17, 17, .4); }
.kf-ki-refine-btn {
  flex: 0 0 auto; width: 36px; height: 36px; border: none; border-radius: 50%; cursor: pointer;
  background: linear-gradient(135deg, #ff5fa2, #7c5cff); color: #fff; display: flex; align-items: center; justify-content: center;
}
.kf-ki-refine-btn:disabled { opacity: 0.5; cursor: default; }
@media (max-width: 820px) { .kf-ki-refine-btn { width: 44px; height: 44px; } }
@media (hover: hover) and (pointer: fine) {
  .kf-ki-refine-input { font-size: 13px; }   /* Desktop 13 px wie alle Konfigurator-Felder, Touch bleibt 16 px (iOS-Zoom) */
}
/* ── Lade-Zustand beim ANPASSEN ──
   Während die Änderung rechnet: Pfeil-Button wird ruhig GRAU (kein Pulsieren,
   Julian 18.08.2026), das aktuelle Bild „atmet" gedimmt — klares Signal,
   dass am Bild gearbeitet wird. */
.kf-ki-refine-btn.btn-laedt { background: #888888; opacity: 1; cursor: default; }   /* bewusst #888, nicht --kf-mid (#666): Ladefläche, kein Text — Kontrast-Ausnahme aus konfigurator.css */
.kf-ki-ergebnis.kf-ki-laedt .kf-ki-vorschau img { animation: kf-ki-bild-puls 1.2s ease-in-out infinite; }
@keyframes kf-ki-bild-puls {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
@media (prefers-reduced-motion: reduce) {
  .kf-ki-ergebnis.kf-ki-laedt .kf-ki-vorschau img { animation: none; opacity: 0.6; }
}

/* Herz an den Bildern in „Gemerkt“ (Abnahme 12.10.2026) — oben rechts wie das × in „Bisher erzeugt“ */
.kf-ki-gemerkt .kf-ki-galerie-item { position: relative; cursor: pointer; }
.kf-ki-gemerkt-herz {
  position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  background: rgba(255, 255, 255, .94); color: #111; box-shadow: 0 1px 4px rgba(0, 0, 0, .16);
}
.kf-ki-gemerkt-herz svg { width: 14px; height: 14px; }
@media (max-width: 820px) { .kf-ki-gemerkt-herz { width: 32px; height: 32px; } }