/* Bunk Media CD – identische Designsprache wie bunk-media.de:
   Anthrazit #111, warmes Gold (tokens.css), Inter + Fraunces-Italic-Akzente,
   Bone/Paper-Flächen, runde Karten, sanfte Reveals & Hover-Lifts. */
@font-face { font-family: Inter; src: url(/static/fonts/inter.woff2) format("woff2"); font-weight: 100 900; }
@font-face { font-family: Fraunces; src: url(/static/fonts/fraunces-italic.woff2) format("woff2"); font-style: italic; font-weight: 100 900; }

/* Design-Tokens kommen zentral aus tokens.css (gemeinsam mit der
   Kundenansicht) — hier bewusst keine eigene :root-Definition mehr. */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-font-smoothing: antialiased; }
body { margin: 0; font-family: Inter, system-ui, sans-serif; background: var(--paper);
  color: var(--ink); min-height: 100vh; }

h1 { font-size: 1.75rem; font-weight: 700; letter-spacing: -.01em; margin: 0; }
/* h2 ist wieder eine echte Überschrift; die goldene Kleinst-Zeile der
   Formularsektionen ist eine KLASSE (M2: Semantik und Optik getrennt). */
h2 { font-size: 1.15rem; font-weight: 700; margin: 1.4rem 0 .4rem; }
.section-eyebrow { font-size: .78rem; text-transform: uppercase;
  letter-spacing: .14em; color: var(--gold-dark); font-weight: 600;
  margin: 1.6rem 0 .4rem; }
.gold { color: var(--gold); }
.serif { font-family: Fraunces, serif; font-style: italic; font-weight: 500; }

/* ---------- Reveals (wie .reveal auf der Website) ---------- */
@keyframes reveal { from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; } }
.reveal { animation: reveal .6s cubic-bezier(.22,1,.36,1) both; }
.reveal.d1 { animation-delay: .08s; }
.reveal.d2 { animation-delay: .16s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none; }
  * { transition-duration: .01ms !important; }
}

/* Skip-Link: unsichtbar, bis er per Tastatur fokussiert wird. */
.skip-link { position: absolute; left: .75rem; top: -3rem; z-index: 60;
  background: var(--ink); color: #fff; padding: .55rem 1rem;
  border-radius: 0 0 12px 12px; font-size: .85rem; font-weight: 600;
  text-decoration: none; transition: top var(--t-fast) ease; }
.skip-link:focus { top: 0; }

/* ---------- Topbar ---------- */
.topbar { display: flex; justify-content: space-between; align-items: center;
  background: var(--ink); color: #fff; padding: .85rem 1.5rem;
  position: sticky; top: 0; z-index: 10; }
/* .brand ist ein Button (Heimweg zur Projektliste) im Look des Logos. */
.brand { display: flex; align-items: center; gap: .7rem;
  background: none; border: 0; padding: 0; font: inherit; color: inherit;
  cursor: pointer; }
.brand-logo { height: 40px; width: auto; display: block; }
.brand span { font-weight: 400; letter-spacing: .02em; color: #ffffff99;
  font-family: Fraunces, serif; font-style: italic; font-size: .95rem; }
.topbar-right { display: flex; gap: .9rem; align-items: center;
  font-size: .88rem; color: #ffffffcc; }

section { max-width: 1200px; margin: 0 auto; padding: 2rem 1.5rem; }
.center { display: grid; place-items: center; min-height: 72vh; }
.page-head { display: flex; align-items: center; gap: 1rem;
  margin-bottom: 1.4rem; flex-wrap: wrap; }
.page-head h1 { flex: 1; }
.ki-page-intro { max-width: 68ch; margin: .35rem 0 0; color: var(--ink-soft);
  font-size: .82rem; line-height: 1.55; }
.ki-page-head { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(250px, 340px);
  align-items: start; }
.ki-run-head { padding: .7rem; border: 1px solid var(--line); border-radius: var(--r-l);
  background: rgb(255 255 255 / .76); box-shadow: 0 8px 28px rgb(25 31 29 / .06);
  backdrop-filter: blur(12px); }
.ki-run-head > label { font-size: max(.75rem, 12px); font-weight: 700; color: var(--ink-soft); }
.ki-run-head-row { display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: .45rem; margin-top: .3rem; }
.ki-run-head select { min-width: 0; width: 100%; }
.ki-run-head .field-help { margin: .35rem .1rem 0; }
.eyebrow { font-size: max(.75rem, 12px); text-transform: uppercase; letter-spacing: .16em;
  color: var(--gold-dark); font-weight: 600; margin: 0 0 .5rem; }

/* ---------- Karten ---------- */
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: 1.5rem 1.6rem; box-shadow: var(--shadow-card); }
.login { width: min(380px, 92vw); display: grid; gap: 1rem; padding: 2rem; }
.login h1 { font-size: 2rem; }
.login .sub { margin: -0.4rem 0 .2rem; color: var(--ink-soft); font-size: .9rem; }

/* ---------- Formulare ---------- */
label { display: grid; gap: .35rem; font-size: .8rem; font-weight: 600;
  color: var(--ink-soft); }
input, select, textarea { font: inherit; padding: .6rem .75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-m); background: #fff; color: var(--ink);
  transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease; }
/* Maus-Fokus: goldene Border statt Ring; Tastatur-Fokus behält den
   opaken Ring über :focus-visible (Regel weiter unten). */
input:focus:not(:focus-visible), select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) { outline: none;
  border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-20); }
input:focus, select:focus, textarea:focus { border-color: var(--gold); }
.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .85rem; margin-top: .6rem; }
.form label { margin-top: .6rem; }

/* ---------- Buttons (Arrow-Nudge & Lift wie Website) ---------- */
/* Grundfeedback für ALLE Buttons — auch Chips und Spezialknöpfe, die
   (noch) kein .btn tragen: Drücken ist immer spürbar. Opacity statt
   transform, damit transform-positionierte Elemente nicht springen. */
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
button:not(:disabled):active { opacity: .75; }
.btn { font: inherit; font-weight: 600; border-radius: var(--r-pill); padding: .6rem 1.35rem;
  cursor: pointer; border: 1px solid transparent;
  transition: transform var(--t-fast) ease, background var(--t-fast) ease, box-shadow var(--t-fast) ease; }
.btn:not(:disabled):active { transform: translateY(0) scale(.98); opacity: 1; }

/* Lade-Zustand: busy(btn, …) in app.js setzt aria-busy — der Button
   zeigt einen Ring statt Text und nimmt keine Klicks mehr an.
   !important, weil der State jede Farb-Variante (.ghost/.topbar)
   schlagen muss. */
.btn[aria-busy="true"] { position: relative;
  color: transparent !important; pointer-events: none; }
.btn[aria-busy="true"]::after { content: ""; position: absolute;
  inset: 0; margin: auto; width: 1em; height: 1em; border-radius: 50%;
  border: 2px solid currentcolor; border-color: var(--line-strong);
  border-top-color: transparent; animation: btn-spin .7s linear infinite; }
.btn.primary[aria-busy="true"]::after { border-color: #ffffff88;
  border-top-color: transparent; }
@keyframes btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .btn[aria-busy="true"]::after { animation: none;
    border-top-color: inherit; opacity: .55; }
}
.btn.primary { background: var(--ink); color: #fff; }
.btn.primary:hover { transform: translateY(-2px); box-shadow: 0 10px 24px #11111133; }
.btn.ghost { background: transparent; border-color: var(--line); color: inherit; }
.btn.ghost:hover { background: var(--bone); transform: translateY(-1px); }
.topbar .btn.ghost { color: #fff; border-color: #ffffff44; padding: .45rem 1.05rem; }
.topbar .btn.ghost:hover { background: #ffffff1a; }
/* Aktive Ansicht in der Topbar sichtbar machen (aria-current="page"). */
.topbar .btn.ghost[aria-current="page"] { background: #ffffff;
  color: var(--ink); border-color: #ffffff; }

/* ---------- Projektkarten ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 1.1rem; }
.cards .card { cursor: pointer; position: relative;
  transition: transform var(--t-slow) var(--ease-out), box-shadow var(--t-slow) ease; }
.cards .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.cards h3 { margin: 0 0 .35rem; font-size: 1.02rem; }
.cards .meta { font-size: .8rem; color: var(--ink-soft); }
.cards .tpl { display: inline-block; margin-top: .7rem; font-size: max(.75rem, 12px);
  background: var(--gold-soft); color: var(--gold-dark); border: 1px solid var(--gold-20);
  padding: .18rem .65rem; border-radius: var(--r-pill); font-weight: 600; }
.cards .del { position: absolute; top: .9rem; right: .9rem; border: none;
  background: none; cursor: pointer; color: #6f6c66; font-size: 1rem;
  transition: color var(--t-fast) ease, transform var(--t-fast) ease; }
.cards .del:hover { color: var(--error); transform: scale(1.15); }
.cards .del.warn { color: var(--error); font-size: .78rem; font-weight: 600; }
.cards .dup { position: absolute; top: .9rem; right: 2.6rem; border: none;
  background: none; cursor: pointer; color: #6f6c66; font-size: 1rem;
  transition: color var(--t-fast) ease, transform var(--t-fast) ease; }
.cards .dup:hover { color: var(--gold-dark); transform: scale(1.15); }

/* Leerzustand mit direkter Aktion (Projekte, Vorlagen-Filter) */
.leer-hinweis { grid-column: 1 / -1; display: grid; gap: .7rem;
  justify-items: start; padding: 1.2rem 0; }

/* ---------- Editor ---------- */
.editor { display: grid; grid-template-columns: minmax(320px, 420px) 1fr;
  gap: 1.2rem; align-items: start; }
/* Grid-Falle: min-width:auto lässt Spalten mit breitem Inhalt (Zoom!)
   aufblähen statt zu scrollen */
.editor > * { min-width: 0; }
@media (max-width: 900px) { .editor { grid-template-columns: 1fr; } }

.chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1rem; }
.chips button { font: inherit; font-size: .77rem; padding: .34rem .8rem;
  border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: #fff; cursor: pointer;
  transition: background var(--t-fast) ease, color var(--t-fast) ease, border-color var(--t-fast) ease,
    transform .18s ease; }
.chips button:hover { transform: translateY(-1px); background: var(--bone); }
.chips button.active { background: var(--ink); color: #fff; border-color: var(--ink); }

.preview-frame { background: var(--bone); border-radius: var(--r-l); padding: .7rem;
  display: grid; place-items: center; min-height: 320px; position: relative; }
.preview-frame img { max-width: 100%; border-radius: 10px;
  box-shadow: 0 14px 36px #11111126; opacity: 0; transform: scale(.985);
  transition: opacity .45s ease, transform .45s var(--ease-out); }
.preview-frame img.loaded { opacity: 1; transform: none; }

/* Render-Spinner: drei goldene Punkte */
.spinner { position: absolute; inset: 0; display: grid; place-items: center;
  pointer-events: none; opacity: 0; transition: opacity var(--t-fast) ease; }
.spinner.on { opacity: 1; }
.spinner i { width: 9px; height: 9px; border-radius: 50%; background: var(--gold);
  display: inline-block; margin: 0 4px; animation: pulse 1s ease-in-out infinite; }
.spinner i:nth-child(2) { animation-delay: .15s; }
.spinner i:nth-child(3) { animation-delay: .3s; }
@keyframes pulse { 0%, 100% { opacity: .25; transform: scale(.85); }
  50% { opacity: 1; transform: scale(1); } }

.hint { font-size: .78rem; color: var(--ink-soft); }
.error { color: var(--error); font-size: .85rem; min-height: 1.1em; margin: .4rem 0 0; }

/* ---------- Aufklapp-Sektionen (Farben/Systemtexte) ---------- */
details.section { margin-top: 1.1rem; border-top: 1px solid var(--line);
  padding-top: .9rem; }
details.section summary { cursor: pointer; list-style: none; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .14em; font-weight: 600;
  color: var(--gold-dark); display: flex; align-items: center; gap: .5rem; }
details.section summary::-webkit-details-marker { display: none; }
details.section summary::after { content: "+"; margin-left: auto;
  font-size: 1rem; color: var(--ink-soft); transition: transform var(--t-slow) ease; }
details.section[open] summary::after { transform: rotate(45deg); }
.color-row { display: flex; gap: 1.6rem; margin-top: .8rem; flex-wrap: wrap; }
.color-field { display: grid; gap: .4rem; }
.color-name { font-size: .8rem; font-weight: 600; color: var(--ink-soft); }
.color-input { display: flex; align-items: center; border: 1px solid var(--line-strong);
  border-radius: var(--r-m); overflow: hidden; background: #fff; width: 158px;
  transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease; }
.color-input:focus-within { border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-20); }
.color-input input[type=color] { appearance: none; -webkit-appearance: none;
  border: none; padding: 0; width: 44px; height: 40px; cursor: pointer;
  background: none; }
.color-input input[type=color]::-webkit-color-swatch-wrapper { padding: 6px; }
.color-input input[type=color]::-webkit-color-swatch { border: none;
  border-radius: 7px; }
.color-input .hex { border: none; border-radius: 0; padding: .45rem .3rem;
  width: 100%; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: .86rem; letter-spacing: .04em; }
.color-input .hex:focus:not(:focus-visible) { outline: none;
  box-shadow: none; }
.color-input.invalid { border-color: var(--error);
  box-shadow: 0 0 0 3px #b3261e22; }
.tpl-chip { display: inline-flex; align-items: center; gap: .4rem;
  align-self: start; font: inherit; font-size: max(.75rem, 12px); font-weight: 600;
  color: var(--ink-soft); background: var(--bone); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: .22rem .7rem .22rem .3rem; cursor: pointer;
  transition: background var(--t-fast) ease, color var(--t-fast) ease, transform var(--t-fast) ease; }
.tpl-chip:hover { background: var(--gold-soft); color: var(--gold-dark);
  transform: translateY(-1px); }
.tpl-chip i { width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid #00000022; display: inline-block; }
#system-texts label { margin-top: .6rem; }
#system-texts .screens { font-weight: 400; color: #77746d; font-size: max(.75rem, 12px); }

/* ---------- Vorlagen-Verwaltung (M2-①) ---------- */
.badge { display: inline-block; font-size: max(.75rem, 12px); font-weight: 600;
  border-radius: var(--r-pill); padding: .16rem .6rem; border: 1px solid var(--line);
  color: var(--ink-soft); background: var(--bone); }
.badge.gold { background: var(--gold-soft); color: var(--gold-dark);
  border-color: var(--gold-20); }
.badge.warn { background: var(--error-soft); color: var(--error); border-color: #b3261e22; }
.vorlage-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
.vorlage-actions .btn { padding: .38rem .9rem; font-size: .78rem; }
.cards .card.archiviert { opacity: .55; }

/* Filterleiste: Suche + Kategorie-Chips + Copyright (Lizenz-Sicht) */
.vorlagen-filter { display: flex; align-items: center; gap: .8rem;
  flex-wrap: wrap; margin: .2rem 0 1rem; }
#vorlagen-suche { max-width: 320px; border-radius: var(--r-pill); }
#vorlagen-copyright { max-width: 260px; border-radius: var(--r-pill);
  font-size: .8rem; font-weight: 600; color: var(--ink-soft); }
.bulk-actions { display: flex; align-items: center; gap: .6rem;
  flex-wrap: wrap; margin: -.4rem 0 1rem; padding: .55rem .9rem;
  border: 1px dashed var(--gold); border-radius: 14px;
  background: var(--gold-soft); }
.bulk-actions .bulk-info { font-size: .8rem; font-weight: 600;
  color: var(--gold-dark); }
.bulk-actions .btn { padding: .32rem .8rem; font-size: .76rem; }
.badge.cr { background: #fff; }

/* Logo = Heimweg zur Projektliste */
.topbar .brand { cursor: pointer; }

/* Print-Feinschliff: Automatik-Budgets dezenter als bewusste Overrides */
.fein-widthbar.auto { opacity: .5; }

/* Screen-Chips: Gruppen-Überschriften (Foto/Video/E-Mail/Druck) */
#screen-chips .chip-gruppe { flex-basis: 100%; font-size: max(.75rem, 12px);
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft); margin: .4rem 0 -.15rem; }
#screen-chips .chip-gruppe:first-child { margin-top: 0; }

/* Gewählter Slot: Panel-Zeile ↔ Anker synchron markiert */
.fein-slot-row { cursor: pointer; border-radius: 10px;
  transition: background var(--t-fast) ease, box-shadow var(--t-fast) ease; }
.fein-slot-row.selected { background: var(--gold-soft);
  box-shadow: 0 0 0 1px var(--gold); }

/* Gespeichert-Anzeige im Feinschliff */
#fein-save { color: var(--gold-dark); font-weight: 600; min-width: 7.5rem;
  text-align: right; }

/* Animierte Vorschau-Overlays (Loops mittig, Countdown zentriert) —
   liegen als GIF über der scharfen PNG-Vorschau */
.preview-frame { position: relative; }
#preview-overlay { display: none; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%); pointer-events: none; }
/* Die Einblende-Regel ".preview-frame img" startet ALLE Vorschaubilder
   bei opacity 0, aber nur #preview-img bekommt je die Klasse "loaded".
   Das GIF-Overlay (Countdown/Verarbeitung/Danke) blendet deshalb mit
   seiner eigenen "on"-Klasse ein; das zentrierende translate gewinnt als
   ID-Regel ohnehin gegen das scale der Einblende-Regel. Schatten und
   Eckenrundung der Bildregel gehoeren nicht auf eine transparente
   Animationsebene - sonst zeichnet der Schatten die GIF-Box nach. */
#preview-overlay { box-shadow: none; border-radius: 0; }
#preview-overlay.on { display: block; opacity: 1; }
#preview-overlay.loop { width: 48.96%; }      /* 940/1920 des Screens */
#preview-overlay.countdown { width: 53.33%; } /* 1024/1920 des Screens */

/* Druck-Chips in der Screen-Leiste + Lightbox (Groß-Ansicht) */
#screen-chips button.druck { border-style: dashed; }
#preview-img.loaded { cursor: zoom-in; }
#lightbox { position: fixed; inset: 0; z-index: 200;
  background: rgb(17 17 17 / .88); display: grid; place-items: center;
  padding: 3vh 3vw; backdrop-filter: blur(10px); }
.lightbox-shell { width: min(1600px, 96vw); height: min(94vh, 1100px);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr) auto; gap: .65rem;
  padding: .8rem; border: 1px solid #ffffff24; border-radius: 20px;
  background: #181817; box-shadow: 0 30px 90px rgb(0 0 0 / .55); }
.lightbox-head { grid-column: 1 / -1; display: flex; align-items: center;
  justify-content: space-between; gap: .8rem; color: #fff; }
.lightbox-actions { display: flex; gap: .4rem; flex-wrap: wrap;
  justify-content: flex-end; }
.lightbox-actions .btn { color: #fff; border-color: #ffffff35;
  padding: .4rem .85rem; font-size: .76rem; }
#lightbox img { grid-column: 2; grid-row: 2; align-self: center;
  justify-self: center; max-width: 100%; max-height: 100%; border-radius: var(--r-m);
  background: #fff; box-shadow: 0 30px 80px rgb(0 0 0 / .5);
  transform: translate3d(0, 0, 0);
  transition: opacity var(--t-fast) ease, transform var(--t-fast) ease; }
/* Animationsebene der Großansicht: gleiche Grid-Zelle wie das Bild,
   beide zentriert - die Mitte stimmt damit ohne Positionsrechnung.
   Nur die Breite wird per JS relativ zum gerenderten Bild gesetzt
   (Countdown 1024/1920, Loop-Panel 940/1920 des Screens). */
#lightbox #lightbox-overlay { display: none; background: transparent;
  box-shadow: none; border-radius: 0; pointer-events: none; }
#lightbox #lightbox-overlay.on { display: block; }
.lightbox-nav { align-self: center; width: 42px; height: 42px;
  border-radius: 50%; border: 1px solid #ffffff35; background: #ffffff10;
  color: #fff; font-size: 2rem; cursor: pointer; }
.lightbox-nav.prev { grid-column: 1; grid-row: 2; }
.lightbox-nav.next { grid-column: 3; grid-row: 2; }
#lightbox-note { grid-column: 1 / -1; margin: 0; color: #ffffffa8;
  text-align: center; }
body.modal-open { overflow: hidden; }

/* Status-Chips auf Projekt-Karten + Kunden-Link-Sektion (M3-①) */
.badge.status { margin-left: .4rem; }
.badge.status.gold { background: var(--gold-soft); color: var(--gold-dark);
  border-color: var(--gold-20); }
.badge.status.gruen { background: var(--ok-soft); color: var(--ok);
  border-color: #2c6b2f33; }
.link-zeile { border: 1px solid var(--line); border-radius: 14px;
  padding: .8rem .9rem; margin-bottom: .7rem; display: grid; gap: .5rem; }
.link-zeile.widerrufen { opacity: .55; }
.link-kopf { display: flex; justify-content: space-between; gap: .8rem;
  flex-wrap: wrap; align-items: baseline; }
.link-rechte { display: flex; gap: .9rem; flex-wrap: wrap;
  font-size: .8rem; color: var(--ink-soft); }
.link-rechte label { display: flex; align-items: center; gap: .35rem;
  cursor: pointer; }
.link-rechte input { accent-color: var(--gold); }
.link-neu { display: grid; gap: .6rem; margin-top: .4rem; }
.link-ergebnis { display: flex; gap: .6rem; align-items: center;
  background: var(--gold-soft); border: 1px dashed var(--gold);
  border-radius: var(--r-m); padding: .6rem .8rem; }
.link-ergebnis code { flex: 1; word-break: break-all; font-size: .78rem; }
.hint.fehler { color: var(--error); }

/* Freigabe-Banner (M3-④) */
.freigabe-banner { display: flex; align-items: center; gap: .9rem;
  flex-wrap: wrap; margin-bottom: 1rem; padding: .8rem 1.1rem;
  background: var(--ok-soft); border: 1px solid #2c6b2f33; }
.freigabe-banner strong { color: var(--ok); }
.freigabe-banner .hint { flex: 1; min-width: 14rem; }

/* Kommentare (M3-③): Kunden-Bubbles links (gold), Antworten rechts */
.badge.ungelesen { margin-left: .4rem; background: var(--gold-soft);
  color: var(--gold-dark); border-color: #b8925a55; font-weight: 700; }
#kommentare-liste { display: grid; gap: .55rem; margin: .5rem 0 .7rem; }
.kommentar { border: 1px solid var(--line); border-radius: 14px;
  padding: .6rem .8rem; max-width: 88%; font-size: .88rem; }
.kommentar.kunde { background: var(--gold-soft); border-color: var(--gold-20);
  justify-self: start; }
.kommentar.bunk { background: #fff; justify-self: end; }
.kommentar-kopf { display: flex; justify-content: space-between;
  gap: .8rem; align-items: baseline; margin-bottom: .2rem;
  font-size: .78rem; }
.kommentar p { margin: 0; white-space: pre-wrap; word-break: break-word; }
.kommentar-neu { display: flex; gap: .6rem; align-items: flex-end; }
.kommentar-neu textarea { flex: 1; border: 1px solid var(--line);
  border-radius: var(--r-m); padding: .55rem .7rem; font: inherit;
  font-size: .88rem; resize: vertical; }
.kommentar-neu textarea:focus:not(:focus-visible) { outline: none;
  border-color: var(--gold); }

/* Einstellungen (M3-③): Mail-Empfängerliste */
.mail-zeile { display: flex; align-items: center; gap: .8rem;
  border: 1px solid var(--line); border-radius: var(--r-m);
  padding: .45rem .5rem .45rem .8rem; margin-bottom: .5rem; }
.mail-zeile code { flex: 1; font-size: .85rem; word-break: break-all; }
.demo-toggle { display: flex; align-items: center; gap: .55rem;
  font-size: .92rem; font-weight: 600; cursor: pointer; margin-top: .4rem; }
.demo-toggle input { width: 18px; height: 18px; accent-color: var(--gold); }

.btn:disabled { opacity: .5; cursor: not-allowed; }

/* KI-Kategorien: Chips mit Entfernen */
.kat-chip { display: inline-flex; align-items: center; gap: .4rem;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: .35rem .8rem; background: #fff; font-size: .8rem;
  font-weight: 600; color: var(--ink-soft); cursor: pointer;
  transition: border-color var(--t-fast) ease, color var(--t-fast) ease; }
.kat-chip:hover { border-color: var(--error); color: var(--error); }

/* Stationsleiste des KI-Designers: immer sichtbar, erreichte Stationen
   sind klickbar (Sprungnavigation), rechts die bisher angefallenen
   Kosten. Grundlage des Assistenten-Umbaus (Redesign-Etappe 1). */
.ki-stepper { display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
  gap: .55rem; margin: 0 0 1rem; max-width: 1100px;
  /* Dockt mit etwas Luft UNTER der sticky Topbar (top: 0, z-index: 10,
     ~67px hoch) an und bleibt im Stapel darunter. Das Band traegt die
     Seitenfarbe, damit zwischen den Pills nichts durchschimmert. */
  position: sticky; top: 4.6rem; z-index: 5;
  background: rgb(250 249 246 / .96); backdrop-filter: blur(8px);
  padding: .4rem 0; border-radius: var(--r-pill); }
.ki-stepper button { display: flex; align-items: center; gap: .45rem;
  color: var(--ink-soft); font-size: .78rem; font-weight: 650;
  padding: .55rem .7rem; border: 1px solid var(--line);
  border-radius: var(--r-pill); background: rgb(255 255 255 / .96);
  backdrop-filter: blur(6px); cursor: default; font-family: inherit;
  text-align: left; }
.ki-stepper button.active, .ki-stepper button.erledigt { cursor: pointer; }
.ki-stepper button.erledigt:hover, .ki-stepper button.active:hover {
  border-color: var(--gold); }
.ki-stepper b { display: grid; place-items: center; width: 22px; height: 22px;
  border-radius: 50%; background: #eee9df; color: var(--ink-soft);
  flex: none; }
.ki-stepper button.active { border-color: var(--gold); color: var(--ink);
  background: #fff; }
.ki-stepper button.active b, .ki-stepper button.erledigt b {
  background: var(--gold); color: #fff; }
.ki-stepper-kosten { align-self: center; font-size: .75rem; font-weight: 650;
  color: var(--gold-dark); background: var(--gold-soft);
  border: 1px solid var(--gold-20); border-radius: var(--r-pill);
  padding: .45rem .8rem; white-space: nowrap; }

/* Kandidaten-Review als Bildvergleich (Redesign-Etappe 6): links die
   aktive Fassung, rechts der neue Kandidat. */
.ki-vergleich-spalten { display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: .7rem; margin-bottom: .6rem; }
.ki-vergleich-spalten figure { margin: 0; display: grid; gap: .3rem;
  align-content: start; }
.ki-vergleich-spalten figcaption { font-size: .75rem; font-weight: 650;
  color: var(--ink-soft); }
.ki-vergleich-spalten figure.neu figcaption { color: var(--gold-dark); }
/* Spezifitaet bewusst ueber der alten Kandidaten-Kachelregel
   (.ki-decoration-candidate img: 132px/104px) - der Vergleich braucht
   grosse Bilder und Blocklayout. */
.ki-decoration-candidate.ki-vergleich-karte { display: block; }
.ki-decoration-candidate .ki-vergleich-spalten img { width: 100%;
  max-height: none; border-radius: 10px; border: 1px solid var(--line);
  background: #fff; }
.ki-decoration-candidate .ki-vergleich-spalten figure.neu img {
  border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }

/* Visuelle Produktions-Pipeline (Redesign-Etappe 5): Schrittkacheln je
   Konzept, die sich waehrend der Produktion mit Miniaturen fuellen. */
.ki-pipeline { display: grid; gap: .8rem; margin: .9rem 0 .4rem; }
.ki-pipeline-zeile { display: grid; gap: .35rem; }
.ki-pipeline-titel { font-size: .78rem; font-weight: 650;
  color: var(--ink-soft); }
.ki-pipeline-schritte { display: flex; align-items: flex-start;
  gap: .45rem; flex-wrap: wrap; }
.ki-pipeline-pfeil { color: var(--ink-soft); align-self: center;
  padding-bottom: 1rem; }
.ki-pipeline-schritt { display: grid; justify-items: center; gap: .3rem;
  width: 96px; }
.ki-pipeline-kachel { width: 96px; height: 58px; border-radius: 8px;
  border: 1px solid var(--line); display: grid; place-items: center;
  background: #f4efe7; overflow: hidden; color: var(--ink-soft);
  font-weight: 700; font-size: .9rem; }
.ki-pipeline-kachel img { width: 100%; height: 100%; object-fit: cover; }
.ki-pipeline-schritt.fertig .ki-pipeline-kachel {
  border-color: var(--gold); color: var(--gold-dark); }
.ki-pipeline-schritt.laufend .ki-pipeline-kachel {
  border-color: var(--gold); animation: ki-pipeline-puls 1.6s ease-in-out
  infinite; }
.ki-pipeline-schritt small { font-size: .75rem; color: var(--ink-soft);
  text-align: center; }
@keyframes ki-pipeline-puls { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
  .ki-pipeline-schritt.laufend .ki-pipeline-kachel { animation: none; }
}

/* Entscheidungsdiaet (Redesign-Etappe 4): Die Konzept-Regler starten
   eingeklappt hinter einer Kurzfassung der aktuellen Wahl - Anfaenger
   sehen Empfehlungen, Experten klappen auf. */
.ki-einstellungen { border: 1px solid var(--line); border-radius: 12px;
  padding: .55rem .75rem; margin: .35rem 0; background: rgb(255 255 255 / .6); }
.ki-einstellungen > summary { list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  gap: .8rem; font-size: .8rem; }
.ki-einstellungen > summary::-webkit-details-marker { display: none; }
.ki-einstellungen-zusammenfassung { color: var(--ink-soft); }
.ki-einstellungen-aendern { color: var(--gold-dark); font-weight: 650;
  font-size: .75rem; text-decoration: underline; white-space: nowrap; }
.ki-einstellungen[open] { background: #fff; }
.ki-einstellungen[open] .ki-einstellungen-aendern { text-decoration: none; }
.ki-einstellungen .ki-contract-row { margin-top: .7rem; }

/* Einheitliches Hilfesystem (Redesign-Etappe 3): kleine Info-Knoepfe,
   EIN Popover fuer alle Begriffe, Glossar als Nachschlagewerk. */
/* "Naechster Schritt"-Karten: klarer Abschluss der Konzept- und der
   Feinschliff-Station (aktive Fuehrung, Redesign-Nacharbeit). */
.ki-cta { display: flex; justify-content: space-between;
  align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1rem;
  border-color: var(--gold); background: var(--gold-soft); }
.ki-cta strong { display: block; margin-bottom: .2rem; }
.ki-cta .hint { margin: 0; max-width: 60ch; }
.ki-cta .btn { flex: none; }

/* Feldtitel + Info-Knopf bleiben EINE Zeile - sonst schiebt der Knopf
   die Eingabefelder benachbarter Optionen aus der Flucht. */
.ki-feld-titel { display: inline-flex; align-items: center; gap: .3rem; }
.ki-info { display: inline-grid; place-items: center; width: 18px;
  height: 18px; border-radius: 50%; border: 1px solid var(--gold);
  background: transparent; color: var(--gold-dark); font-size: .75rem;
  font-weight: 700; font-style: italic; font-family: Georgia, serif;
  cursor: help; vertical-align: text-bottom; padding: 0;
  margin-left: .15rem; }
.ki-info:hover, .ki-info[aria-expanded="true"] { background: var(--gold);
  color: #fff; }
.ki-hilfe-popover { position: absolute; z-index: 300; max-width: 340px;
  background: var(--ink); color: #fff; border-radius: 12px;
  padding: .75rem .9rem; box-shadow: 0 18px 44px rgb(0 0 0 / .35);
  font-size: .78rem; line-height: 1.5; }
.ki-hilfe-popover strong { display: block; margin-bottom: .25rem;
  color: var(--gold); font-size: .8rem; }
.ki-hilfe-popover p { margin: 0 0 .4rem; color: #ffffffd9; }
.ki-hilfe-glossar-link { border: 0; background: transparent; padding: 0;
  color: var(--gold); font-size: .75rem; font-weight: 650; cursor: pointer;
  text-decoration: underline; font-family: inherit; }
.ki-glossar { max-width: min(680px, 92vw); max-height: 84vh;
  border: 1px solid var(--line); border-radius: var(--r-l);
  padding: 1.1rem 1.3rem; }
.ki-glossar::backdrop { background: rgb(17 17 17 / .5);
  backdrop-filter: blur(4px); }
.ki-glossar-kopf { display: flex; justify-content: space-between;
  align-items: center; gap: 1rem; margin-bottom: .6rem; }
.ki-glossar dl { margin: 0; }
.ki-glossar dt { font-weight: 700; margin-top: .8rem; }
.ki-glossar dd { margin: .15rem 0 0; color: var(--ink-soft);
  font-size: .84rem; line-height: 1.55; }
.ki-glossar-knopf { margin-top: .5rem; font-size: .75rem; }
.ki-start-card { max-width: 760px; margin-bottom: 1rem; }
.ki-start-card > summary { cursor: pointer; display: flex;
  justify-content: space-between; align-items: baseline; gap: 1rem;
  list-style: none; }
.ki-start-card > summary::-webkit-details-marker { display: none; }
.ki-start-card[open] > summary { padding-bottom: .9rem;
  border-bottom: 1px solid var(--line); margin-bottom: .9rem; }
.ki-start-inhalt { display: grid; gap: .25rem; }
.ki-readiness { padding: .55rem .7rem; margin: 0 0 .2rem; border-radius: 10px;
  background: var(--surface-hint); border: 1px solid var(--line); }
.ki-primary-action { display: flex; align-items: center; gap: .8rem;
  flex-wrap: wrap; margin-top: .75rem; }
.ki-primary-action .btn { min-width: min(100%, 240px); }
.ki-primary-action .field-help { flex: 1 1 260px; }
.field-help { display: block; font-size: .75rem; line-height: 1.42;
  font-weight: 400; color: var(--ink-soft); }
.field-help strong { color: var(--ink); font-weight: 650; }
.field-more { margin-top: .2rem; color: var(--ink-soft); }
.field-more summary { width: fit-content; cursor: pointer; color: var(--gold-dark);
  font-size: .75rem; font-weight: 650; }
.field-more p { margin: .35rem 0 0; font-size: .75rem; line-height: 1.48; }
.ki-option { min-width: 0; }
.ki-option label { display: grid; gap: .25rem; }
.ki-option .option-summary { min-height: 2.8em; margin-top: .25rem; }
.ki-reference-warning { padding: .6rem .75rem; border-left: 3px solid var(--gold);
  background: var(--surface-hint); border-radius: 0 8px 8px 0; line-height: 1.45; }
.ki-reference-more { margin: -.15rem 0 .55rem .75rem; }
.ki-phase-note { display: grid; gap: .15rem; margin-top: .7rem;
  padding: .7rem .85rem; border-radius: var(--r-m); color: var(--ink-soft);
  background: #f8fbf7; border: 1px solid #cfdccb; font-size: .76rem;
  line-height: 1.45; }
.ki-phase-note strong { color: var(--ink); font-size: .82rem; }
.ki-briefing-erweitert { margin: .7rem 0; padding: .7rem .85rem;
  border: 1px solid var(--line); border-radius: var(--r-m); background: #fff; }
.ki-briefing-erweitert > summary { cursor: pointer; font-size: .85rem;
  font-weight: 650; color: var(--gold-dark); }
.ki-quality-auto { margin: .7rem 0 0; padding: .7rem .85rem;
  border-radius: var(--r-m); background: var(--surface-hint); border: 1px solid var(--line); }
.ki-quality-auto strong { font-size: .84rem; }
.ki-quality-auto .hint { margin: .2rem 0 0; }
.ki-naehe-start label { min-width: 0; }
.ki-naehe-start .field-help { min-height: 2.8em; }
.ki-naehe-details { margin-top: .5rem; }
#ki-konzepte { display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 1rem; align-items: stretch; }
.ki-eventdaten { margin-bottom: 1rem; }
.ki-eventdaten-kopf { display: flex; justify-content: space-between;
  gap: .8rem; align-items: baseline; flex-wrap: wrap; }
.ki-eventdaten-kopf h3 { margin: 0; }
.ki-event-grid { display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: .65rem; margin: .8rem 0; }
.ki-event-feld { display: grid; gap: .25rem; min-width: 0; }
.ki-event-feld > span:first-child { font-size: max(.75rem, 12px); font-weight: 650;
  color: var(--ink-soft); }
.ki-event-feld input { width: 100%; box-sizing: border-box; padding: .48rem .65rem;
  border: 1px solid var(--line); border-radius: 9px; font: inherit; }
.ki-event-quelle { font-size: max(.75rem, 12px); color: var(--ink-soft); }
.ki-event-quelle.warn { color: var(--error); font-weight: 650; }
.ki-event-hinweise { margin-top: .7rem; }
.ki-event-hinweise ul { margin: .4rem 0 .2rem; padding-left: 1.2rem;
  font-size: .75rem; line-height: 1.45; }
.ki-event-aktionen { display: flex; align-items: center; gap: .7rem;
  flex-wrap: wrap; }
#ki-varianten { display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem; max-width: 1240px; }
.ki-run-alert { display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; margin: 0 0 1rem; padding: .8rem 1rem; border: 1px solid #d8b46a;
  border-radius: var(--r-l); background: var(--surface-warm); box-shadow: 0 8px 24px rgb(90 65 25 / .07); }
.ki-run-alert[hidden] { display: none; }
.ki-run-alert p { margin: .2rem 0 0; color: var(--ink-soft); font-size: .78rem;
  line-height: 1.45; }
.ki-run-alert-actions { display: flex; gap: .45rem; flex-wrap: wrap;
  justify-content: flex-end; }
.ki-global-error { max-width: 760px; margin: 0 0 1rem; padding: .7rem .85rem;
  border-radius: var(--r-m); background: #fff3f1; }
.ki-global-error:empty { display: none; }
.ki-cost-confirmation { max-width: 760px; margin: 0 0 1rem;
  border-color: #315c5852; box-shadow: 0 18px 55px rgb(19 35 33 / .12); }
.ki-cost-confirmation-head { display: flex; justify-content: space-between;
  align-items: flex-start; gap: 1rem; }
.ki-cost-confirmation h2 { margin: 0; font-size: 1.2rem; }
.ki-cost-confirmation p { line-height: 1.5; }
.ki-cost-call-summary { margin: -.2rem 0 .5rem; }
.ki-cost-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5rem; margin: 0; padding: .55rem; border-radius: var(--r-m);
  background: #edf5f3; color: #244c48; }
.ki-cost-summary > div { display: grid; gap: .12rem; min-width: 0;
  padding: .45rem .5rem; border-radius: var(--r-s); background: rgb(255 255 255 / .55); }
.ki-cost-summary dt { font-size: max(.75rem, 12px); color: #386963; }
.ki-cost-summary dd { margin: 0; font-weight: 750; overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .ki-cost-summary { grid-template-columns: minmax(0, 1fr); }
}
.ki-cost-actions { display: flex; justify-content: flex-end; gap: .55rem;
  margin-top: .8rem; }
.ki-concept-switcher { display: flex; gap: .5rem; overflow-x: auto;
  padding: .15rem 0 .25rem; scrollbar-width: thin; }
.ki-concept-tab { display: grid; gap: .08rem; flex: 1 0 180px; padding: .65rem .8rem;
  border: 1px solid var(--line); border-radius: 14px; background: #fff;
  color: var(--ink); text-align: left; cursor: pointer; }
.ki-concept-tab span { color: var(--ink-soft); font-size: max(.75rem, 12px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ki-concept-tab.active { border-color: var(--gold); background: var(--surface-warm);
  box-shadow: inset 0 0 0 1px #b8925a35; }
.freigabe-leiste { display: flex; align-items: center; gap: 1rem;
  flex-wrap: wrap; margin-bottom: 1rem; }
.freigabe-leiste > div { flex: 1; min-width: 16rem; }
.freigabe-leiste .hint { margin-top: .2rem; }
.ki-konzept { display: flex; flex-direction: column; gap: .5rem; }
.ki-konzept.aus { opacity: 1; background: var(--surface-hint);
  border-color: var(--line-mid); border-style: dashed; }
.ki-konzept-kopf { display: flex; align-items: baseline;
  justify-content: space-between; gap: .6rem; }
.ki-konzept-kopf h3 { margin: 0; font-size: 1rem; }
.ki-konzept .stil { font-style: italic; }
.ki-konzept-meta { display: flex; align-items: center; gap: .5rem;
  flex-wrap: wrap; }
.ki-konzept-meta .swatch { width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid var(--line); display: inline-block; }
.ki-konzept .fonts { font-size: .78rem; color: var(--ink-soft); }
.ki-contract-row { display: grid;
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  gap: .55rem; margin: .25rem 0; }
.ki-contract-row label { display: grid; gap: .2rem; font-size: max(.75rem, 12px);
  font-weight: 650; color: var(--ink-soft); }
.ki-contract-option { min-width: 0; }
.ki-contract-row select { min-width: 0; border: 1px solid var(--line);
  border-radius: var(--r-s); padding: .35rem .4rem; background: #fff; }
.ki-contract-row .field-help { min-height: 2.7em; }
.ki-contract-row .field-more p { min-height: 4.2em; }
.ki-wire-legend, .ki-action-help { margin: -.15rem 0 .2rem;
  font-size: max(.75rem, 12px); line-height: 1.4; color: var(--ink-soft); }
.ki-these { padding: .6rem .7rem; margin: .15rem 0;
  border-left: 3px solid var(--gold); background: var(--surface-hint);
  border-radius: 0 8px 8px 0; }
.ki-vergleich { border: 1px solid var(--gold); border-radius: var(--r-m);
  padding: .7rem; background: var(--surface-warm); }
.ki-vergleich-grid { display: grid; grid-template-columns: 1fr 1fr;
  gap: .55rem; margin: .5rem 0; }
.ki-vergleich-grid > div { padding: .55rem; border-radius: var(--r-s);
  background: #fff; border: 1px solid var(--line); }
.ki-konzept-aktionen { display: flex; align-items: center; gap: .8rem;
  flex-wrap: wrap; margin-top: .2rem; }
.ki-konzept .dabei { display: flex; align-items: center; gap: .4rem;
  font-size: .85rem; font-weight: 600; cursor: pointer; }
.ki-konzept .dabei input { width: 17px; height: 17px;
  accent-color: var(--gold); }
.ki-prompt summary { cursor: pointer; font-size: .82rem;
  color: var(--gold-dark); }
.ki-prompt textarea { width: 100%; margin-top: .4rem; padding: .5rem .7rem;
  border: 1px solid var(--line); border-radius: 10px; font: inherit;
  font-size: .78rem; resize: vertical; }
.ki-prompt .field-help { margin: .35rem 0; }
.ki-anmerkung { display: flex; gap: .5rem; }
.ki-anmerkung input { flex: 1; padding: .45rem .7rem;
  border: 1px solid var(--line); border-radius: 10px; font-size: .82rem; }
.konzept-status { min-height: 1.1em; font-size: .78rem; }
.konzept-status.ok { color: var(--gold-dark); }

/* Mini-Wireframe: Komposition sichtbar, bevor ein Bild existiert */
.ki-wire { width: 100%; height: auto; border-radius: 10px;
  border: 1px solid var(--line); background: #fff; }
.ki-wire .wire-bg { fill: var(--surface-hint); }
.ki-wire .wire-text { fill: var(--gold-soft); stroke: var(--gold);
  stroke-width: 1; }
.ki-wire .wire-ui { fill: none; stroke: var(--ink-soft);
  stroke-width: 1; stroke-dasharray: 3 2; opacity: .6; }

/* Beispiel-Mottos (D66) — Chips füllen das Feld statt es zu ersetzen */
.kat-chip.beispiel { cursor: pointer; }
.kat-chip.beispiel:hover { border-color: var(--gold);
  color: var(--gold-dark); }

/* KI-Kostenübersicht (D65) */
.kosten-uebersicht { display: grid; gap: .35rem; margin-top: .6rem; }
.kosten-zeile { display: flex; justify-content: space-between;
  align-items: baseline; padding: .4rem .7rem; border-radius: 10px;
  background: #fff; border: 1px solid var(--line); font-size: .88rem; }
.kosten-zeile.warn { border-color: var(--error); color: var(--error); }

/* Kostenloses Nachjustieren an der Variante (D64) */
.ki-regler { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem;
  margin-top: .6rem; }
.ki-regler label { display: grid; gap: .2rem; font-size: max(.75rem, 12px);
  font-weight: 600; color: var(--ink-soft); }
.ki-regler select, .ki-regler input[type="color"] {
  border: 1px solid var(--line); border-radius: var(--r-s); padding: .3rem .4rem;
  font-size: .78rem; background: #fff; }
.ki-regler input[type="color"] { height: 30px; padding: 2px; cursor: pointer; }
/* Schieberegler mit Wertanzeige und das Zurücksetzen der Fläche (P4) */
.ki-regler input[type="range"] { width: 100%; accent-color: var(--gold);
  height: 22px; cursor: pointer; }
.ki-regler .wert { float: right; font-weight: 400; color: var(--gold-dark); }
.ki-regler .ki-zone-zurueck { grid-column: 1 / -1; font-size: max(.75rem, 12px);
  padding: .3rem .6rem; }
.ki-regler .field-help { min-height: 2.8em; }
.ki-position-coordinates { grid-column: 1 / -1; display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem .6rem;
  min-width: 0; margin: .15rem 0; padding: .65rem;
  border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface-hint); }
.ki-position-coordinates legend { padding: 0 .3rem; font-size: max(.75rem, 12px);
  font-weight: 700; color: var(--ink-soft); }
.ki-position-coordinates label { min-width: 0; }
.ki-position-coordinates input[type="number"] { width: 100%; min-width: 0;
  box-sizing: border-box; padding: .42rem .5rem; border: 1px solid var(--line);
  border-radius: var(--r-s); background: #fff; font: inherit; color: var(--ink); }
.ki-position-coordinates > .field-help { grid-column: 1 / -1; min-height: 0; }
.ki-icon-choice, .ki-edge-choice { grid-column: 1 / -1; margin: .15rem 0; padding: .65rem;
  border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface-hint); }
.ki-icon-choice legend, .ki-edge-choice legend { padding: 0 .3rem; font-size: max(.75rem, 12px);
  font-weight: 700; color: var(--ink-soft); }
.ki-icon-choice .field-help, .ki-edge-choice .field-help { min-height: 0; margin: 0; }
.ki-icon-choice .icon-sets { margin-top: .45rem; }
.ki-icon-choice .icon-chip { min-width: 92px; }
.ki-adjust-intro { margin: .45rem 0 0; padding: .55rem .65rem;
  border-radius: var(--r-s); background: var(--surface-hint); }
.ki-position-note, .ki-takeover-note { margin: .5rem 0 0;
  font-size: max(.75rem, 12px); line-height: 1.45; color: var(--ink-soft); }
/* Das Vorschaubild nimmt den Klick entgegen, der die Textfläche setzt */
.ki-variante .vorschau.setzbar { cursor: crosshair; }
.ki-rohteile summary { cursor: pointer; font-size: .78rem;
  color: var(--gold-dark); margin-top: .5rem; }
.uebernahme-name { display: grid; gap: .25rem; margin-top: .6rem;
  font-size: .75rem; font-weight: 600; color: var(--ink-soft); }
.uebernahme-name input { padding: .45rem .7rem; border: 1px solid var(--line);
  border-radius: 10px; font-size: .88rem; }
.ki-variante .vorschau { transition: opacity var(--t-fast) ease; }
.ki-output-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(180px, 1fr);
  grid-template-rows: auto auto; gap: .7rem; margin: .6rem 0; }
.ki-output-grid figure { margin: 0; min-width: 0; }
.ki-output-grid figure:first-child { grid-row: 1 / 3; }
.ki-output-grid.nur-screen { grid-template-columns: minmax(0, 1fr); }
.ki-output-grid.nur-screen figure:first-child { grid-row: auto; }
.ki-output-grid img { width: 100%; height: auto; display: block;
  border-radius: var(--r-m); border: 1px solid var(--line);
  transform: translate3d(0, 0, 0);
  transition: opacity var(--t-fast) ease, transform var(--t-fast) ease; }
.ki-output-grid img.is-refreshing, #lightbox-img.is-refreshing,
.ki-output-grid img.is-render-pending, #lightbox-img.is-render-pending {
  opacity: .48; will-change: opacity; }
.ki-output-grid .print-preview { background-color: #f1eee8;
  background-image: linear-gradient(45deg,#ddd8cf 25%,transparent 25%),
    linear-gradient(-45deg,#ddd8cf 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#ddd8cf 75%),
    linear-gradient(-45deg,transparent 75%,#ddd8cf 75%);
  background-size: 16px 16px; background-position: 0 0,0 8px,8px -8px,-8px 0; }
.ki-output-grid figcaption { font-size: max(.75rem, 12px); color: var(--ink-soft);
  margin-top: .25rem; }
.ki-variante { cursor: default !important; overflow: visible; }
.ki-variante:hover { transform: none !important; box-shadow: var(--shadow-card) !important; }
.ki-variante > h3 { font-size: 1.12rem; letter-spacing: -.015em; }
.ki-editor-layout { display: grid; grid-template-columns: minmax(0, 1.35fr)
  minmax(340px, .85fr); gap: clamp(1rem, 2.2vw, 2rem); align-items: start; }
.ki-preview-pane, .ki-control-pane { min-width: 0; }
.ki-preview-pane { align-self: start; }
.ki-control-pane { display: grid; align-content: start; gap: .1rem; }
.ki-control-pane > * { min-width: 0; max-width: 100%; }
.ki-preview-pane .ki-output-grid { grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto; margin-top: 0; }
.ki-preview-pane .ki-output-grid figure:first-child {
  grid-column: 1 / -1; grid-row: auto; }
.ki-preview-pane figure[data-artifact="screen"] img {
  aspect-ratio: 16 / 9; object-fit: contain; }
.ki-preview-pane figure[data-artifact="print_single"] img,
.ki-preview-pane figure[data-artifact="print_strip"] img {
  aspect-ratio: 3 / 2; object-fit: contain; }
/* Format-Tabs: ein grosses Bild pro Format statt drei Miniaturen. */
.ki-format-tabs { display: flex; flex-wrap: wrap; gap: .35rem;
  margin-bottom: .55rem; }
.ki-format-tabs [data-format-tab] { border: 1px solid var(--line);
  border-radius: 999px; background: #fff; color: var(--ink-soft);
  padding: .4rem .95rem; font-size: max(.78rem, 12px); cursor: pointer; }
.ki-format-tabs [data-format-tab][aria-selected="true"] {
  border-color: var(--gold); background: var(--surface-warm);
  color: var(--ink); box-shadow: inset 0 0 0 1px #b8925a35; }
.ki-output-grid[data-format] { grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto; }
.ki-output-grid[data-format] > figure { grid-column: auto !important;
  grid-row: auto !important; }
.ki-output-grid[data-format="screen"] > figure:not([data-artifact="screen"]),
.ki-output-grid[data-format="print_single"] > figure:not([data-artifact="print_single"]),
.ki-output-grid[data-format="print_strip"] > figure:not([data-artifact="print_strip"]),
.ki-output-grid[data-format="animation"] > figure:not([data-artifact="animation"]) {
  display: none; }
.ki-output-grid[data-format] figure[data-artifact] img {
  max-height: min(64vh, 620px); }
/* Kontextsensitive Steuerspalte: Der Format-Tab entscheidet, welche
   Regler-Bloecke sichtbar sind ([data-fein-kontext] traegt die Zuordnung,
   mehrere Kontexte sind leerzeichengetrennt). */
.ki-variante[data-fein-tab="screen"] [data-fein-kontext]:not([data-fein-kontext~="screen"]),
.ki-variante[data-fein-tab="print_single"] [data-fein-kontext]:not([data-fein-kontext~="print_single"]),
.ki-variante[data-fein-tab="print_strip"] [data-fein-kontext]:not([data-fein-kontext~="print_strip"]),
.ki-variante[data-fein-tab="animation"] [data-fein-kontext]:not([data-fein-kontext~="animation"]) {
  display: none; }
.ki-kontext { min-width: 0; }
/* Animations-Buehne: Countdown-GIF und Overlay-Bogen auf dunkler Flaeche. */
.ki-animation-buehne { display: grid; gap: .7rem; }
.ki-animation-teil { margin: 0; display: grid; gap: .25rem; min-width: 0; }
.ki-animation-teil img { width: 100%; max-height: 340px; object-fit: contain;
  background: #16222f; border-radius: var(--r-m);
  border: 1px solid var(--line); }
.ki-animation-teil figcaption { font-size: max(.75rem, 12px);
  color: var(--ink-soft); }
.ki-animation-platzhalter { display: grid; place-content: center; gap: .3rem;
  text-align: center; min-height: 170px; padding: .8rem;
  border: 1px dashed var(--line-mid); border-radius: var(--r-m);
  background: var(--surface-hint); color: var(--ink-soft);
  font-size: max(.78rem, 12px); }
.ki-animation-platzhalter b { font-size: 1.15rem; color: var(--ink);
  letter-spacing: .12em; }
.ki-animation-hinweis { margin: 0; font-size: max(.75rem, 12px);
  color: var(--ink-soft); }
@media (min-width: 1100px) {
  .ki-preview-pane { position: sticky; top: 5.5rem; max-height: calc(100vh - 6.5rem);
    overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
}
@media (max-width: 1099px) {
  .ki-editor-layout { grid-template-columns: minmax(0, 1fr); }
  .ki-preview-pane { position: static; max-height: none; overflow: visible; }
}
.ki-output-grid figure { border-radius: 14px; }
.ki-output-grid img:focus-visible, .ki-decoration-candidate img:focus-visible {
  outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.ki-artifact-wait .bloom-frame { width: 100%; }
.ki-quality { display: grid; gap: .45rem; padding: .55rem;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface-hint); margin: .55rem 0; }
.ki-quality.warn { background: var(--surface-warm); border-color: #e9bd6c; }
.ki-quality.error { background: #fff5f2; border-color: #c96a5d; }
.ki-quality-level { position: relative; display: grid;
  grid-template-columns: minmax(5.8rem, .65fr) minmax(0, 1.35fr);
  gap: .16rem .65rem; padding: .58rem .65rem .58rem 1.75rem;
  border: 1px solid var(--line-mid); border-radius: 10px; background: #fff; }
.ki-quality-level::before { content: ""; position: absolute; left: .68rem;
  top: .83rem; width: .52rem; height: .52rem; border-radius: 50%;
  background: #888; box-shadow: 0 0 0 3px #8882; }
.ki-quality-level.pass::before { background: #34725d;
  box-shadow: 0 0 0 3px #34725d24; }
.ki-quality-level.warn::before { background: #aa7222;
  box-shadow: 0 0 0 3px #aa722224; }
.ki-quality-level.error::before { background: #a04337;
  box-shadow: 0 0 0 3px #a0433724; }
.ki-quality-label { font-weight: 650; color: var(--ink-soft); }
.ki-quality-level > strong { color: var(--ink); }
.ki-quality-level > .hint, .ki-quality-level > details {
  grid-column: 2; margin: 0; }
.ki-review-findings { display: grid; gap: .45rem; margin: .4rem 0 0;
  padding: 0; list-style: none; }
.ki-review-findings li { display: grid; gap: .08rem; padding-left: .65rem;
  border-left: 2px solid #d7b468; }
.ki-review-findings li strong { color: var(--ink); }
.ki-preview-findings { display: grid; gap: .18rem; margin: .4rem 0 0;
  padding: .52rem .6rem; border: 1px solid #d7b468;
  border-radius: 9px; background: var(--surface-warm); color: var(--ink); }
.ki-preview-findings strong, .ki-preview-findings span,
.ki-preview-findings li { font-size: max(.75rem, 12px); line-height: 1.35; }
.ki-preview-findings span { color: var(--ink-soft); overflow-wrap: anywhere; }
.ki-preview-findings ul { margin: .12rem 0 0; padding-left: 1rem; }
.ki-freigaben { display: grid; gap: .5rem; margin: .7rem 0; }
.ki-freigaben label { display: flex; align-items: flex-start; gap: .5rem;
  padding: .55rem .7rem; border: 1px solid #e9bd6c; border-radius: 10px;
  background: var(--surface-warm); font-size: .8rem; }
.ki-advanced { margin-top: .6rem; border-top: 1px solid var(--line);
  padding-top: .55rem; }
.ki-advanced > summary { cursor: pointer; font-size: .8rem;
  font-weight: 650; color: var(--gold-dark); }
.ki-contrast-note { font-size: max(.75rem, 12px); color: var(--ink-soft);
  margin: .55rem 0 0; }
.ki-ergebnis.ok { color: var(--gold-dark); }
.ki-ergebnis a { color: var(--gold-dark); }

/* Wartende Variante: Skelett statt leerer Kasten (D62) */
.ki-skelett { aspect-ratio: 16 / 9; border-radius: 14px;
  border: 1px solid var(--line); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .6rem;
  background: linear-gradient(100deg, #f4f1ea 30%, #fdfcf9 50%, #f4f1ea 70%);
  background-size: 300% 100%; animation: skelett 1.8s ease-in-out infinite; }
@keyframes skelett { 0% { background-position: 100% 0; }
  100% { background-position: 0 0; } }

/* „Material Bloom“: drei stabile Zielkacheln statt generischem Spinner.
   Nur Transform/Opacity animieren, damit der Browser nicht neu layoutet. */
.material-bloom { width: min(520px, 92%); display: grid;
  grid-template-columns: 1.6fr 1fr 1fr; gap: .55rem; align-items: center;
  position: relative; padding-bottom: 1.5rem; }
.material-bloom > span { position: absolute; left: 0; right: 0; bottom: 0;
  text-align: center; font-size: max(.75rem, 12px); color: var(--ink-soft); }
.bloom-frame { position: relative; overflow: hidden; aspect-ratio: 3 / 2;
  border-radius: 10px; background: #eee8dc; border: 1px solid #b8925a35;
  box-shadow: 0 8px 22px #1111110d; }
.bloom-screen { aspect-ratio: 16 / 9; }
.bloom-strip { aspect-ratio: 3 / 2; }
.bloom-frame i, .bloom-frame b, .bloom-frame em { position: absolute;
  display: block; will-change: transform, opacity; }
.bloom-frame i { inset: -25%; background:
  radial-gradient(circle at 34% 32%, #b8925a88, transparent 30%),
  radial-gradient(circle at 72% 68%, #315c586b, transparent 36%);
  animation: bloom-wash 3.8s cubic-bezier(.22,1,.36,1) infinite alternate; }
.bloom-frame b { width: 54%; height: 68%; left: 10%; top: 16%;
  border: 1px solid #ffffffd9; background: #faf9f696; border-radius: 4px;
  animation: bloom-photo 3.1s cubic-bezier(.22,1,.36,1) infinite alternate; }
.bloom-frame em { width: 22%; height: 22%; right: 8%; bottom: 12%;
  border-radius: 70% 30% 55% 45%; background: var(--gold);
  animation: bloom-motif 2.7s cubic-bezier(.22,1,.36,1) infinite alternate; }
@keyframes bloom-wash { from { opacity: .38; transform: scale(.9) rotate(-2deg); }
  to { opacity: .92; transform: scale(1.08) rotate(3deg); } }
@keyframes bloom-photo { from { opacity: .28; transform: translateY(8px); }
  to { opacity: .9; transform: translateY(0); } }
@keyframes bloom-motif { from { opacity: .25; transform: scale(.65) rotate(-12deg); }
  to { opacity: .9; transform: scale(1) rotate(5deg); } }
.ki-result-meta { display: flex; gap: .35rem; flex-wrap: wrap; margin: .3rem 0; }
.ki-output-grid img, .ki-compare-grid img, .ki-candidate-grid img {
  cursor: zoom-in; }
.ki-run-compare { padding: 1rem; border: 1px solid var(--line);
  border-radius: 18px; background: #fff; box-shadow: var(--shadow-card); }
.ki-compare-head { display: flex; justify-content: space-between; gap: 1rem;
  align-items: center; flex-wrap: wrap; margin-bottom: .7rem; }
.ki-compare-head strong { display: block; margin-bottom: .15rem; }
.ki-compare-tabs { display: flex; gap: .35rem; flex-wrap: wrap; }
.ki-compare-tabs .btn { padding: .35rem .75rem; font-size: max(.75rem, 12px); }
.ki-compare-tabs .active { background: var(--ink); color: #fff;
  border-color: var(--ink); }
.ki-compare-grid { display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .6rem; }
.ki-compare-grid figure { margin: 0; min-width: 0; }
.ki-compare-concept { padding: .35rem; border: 1px solid transparent;
  border-radius: 13px; transition: border-color var(--t-fast) ease, background var(--t-fast) ease; }
.ki-compare-concept.active { border-color: var(--gold); background: var(--surface-warm); }
.ki-compare-select { display: grid; width: 100%; min-width: 0; padding: 0;
  border: 0; background: transparent; color: inherit; text-align: left;
  cursor: pointer; font: inherit; }
.ki-compare-select span { margin-top: .3rem; color: var(--ink-soft);
  font-size: max(.75rem, 12px); }
.ki-compare-select:focus-visible { outline: 3px solid var(--focus-ring);
  outline-offset: 3px; border-radius: 10px; }
.ki-compare-expand { width: 100%; margin-top: .35rem; }
.ki-compare-grid img { display: block; width: 100%; aspect-ratio: 16 / 9;
  object-fit: contain; border-radius: 10px; border: 1px solid var(--line);
  background: var(--bone); }
.ki-compare-grid figcaption, .ki-candidate-grid figcaption {
  font-size: max(.75rem, 12px); color: var(--ink-soft); margin-top: .25rem; }
.ki-reference-tile { opacity: .78; }
.ki-candidate { margin: .75rem 0; padding: .8rem; border-radius: 14px;
  border: 1px solid var(--gold); background: var(--surface-warm); }
.ki-candidate-head { display: flex; justify-content: space-between;
  gap: .6rem; align-items: center; flex-wrap: wrap; }
.ki-candidate-grid { display: grid; grid-template-columns: 1fr 1fr;
  gap: .65rem; margin-top: .6rem; }
.ki-candidate-grid figure { margin: 0; min-width: 0; }
.ki-candidate-grid img { display: block; width: 100%; max-height: 430px;
  object-fit: contain; background: var(--bone); border-radius: 10px;
  border: 1px solid var(--line); }
.ki-candidate.running .material-bloom { margin: .2rem auto; }
.ki-regenerate, .ki-version-history { margin-top: .65rem; }
.ki-regenerate > summary, .ki-version-history > summary { cursor: pointer;
  font-size: .78rem; color: var(--gold-dark); }
.ki-version-history > div { display: flex; align-items: center;
  justify-content: space-between; gap: .6rem; padding: .4rem 0;
  border-bottom: 1px solid var(--line); font-size: .75rem; }
.ki-version-history .btn { padding: .25rem .65rem; font-size: max(.75rem, 12px); }
.ki-position-mode.active { color: #fff; background: var(--gold-dark);
  border-color: var(--gold-dark); }
.ki-quality.neutral { border: 1px solid var(--line); }
.ki-final-review-action { display: flex; align-items: center;
  justify-content: space-between; gap: .75rem; margin: .65rem 0;
  flex-wrap: wrap;
  padding: .7rem .8rem; border: 1px solid #d8b46a88; border-radius: var(--r-m);
  background: var(--surface-warm); }
.ki-final-review-action > div { display: grid; gap: .15rem; max-width: 68ch;
  min-width: 0; flex: 1 1 14rem; }
.ki-final-review-action > .btn { flex: 0 1 auto; max-width: 100%;
  white-space: normal; overflow-wrap: anywhere; text-align: center; }
.ki-quality details summary { cursor: pointer; font-size: max(.75rem, 12px);
  color: var(--gold-dark); }
.ki-quality details p { margin: .25rem 0 0; font-size: max(.75rem, 12px); }
@media (max-width: 420px) {
  .ki-quality-level { grid-template-columns: minmax(0, 1fr);
    padding-left: 1.75rem; }
  .ki-quality-level > .hint, .ki-quality-level > details { grid-column: 1; }
  .ki-position-coordinates { grid-template-columns: minmax(0, 1fr); }
  .ki-position-coordinates > .field-help { grid-column: 1; }
}

/* Bedienhinweise bleiben auch bei schmalen Ansichten und Browserzoom
   lesbar. Die Untergrenze gilt nur im KI-Arbeitsbereich und verändert
   weder Canvas-Maße noch exportierte Typografie. */
#view-ki .ki-run-head > label,
#view-ki .eyebrow,
#view-ki .ki-event-feld > span:first-child,
#view-ki .ki-event-quelle,
#view-ki .ki-concept-tab span,
#view-ki .ki-contract-row label,
#view-ki .ki-wire-legend,
#view-ki .ki-action-help,
#view-ki .ki-regler label,
#view-ki .ki-regler .ki-zone-zurueck,
#view-ki .ki-icon-choice legend,
#view-ki .ki-edge-choice legend,
#view-ki .ki-position-note,
#view-ki .ki-takeover-note,
#view-ki .ki-output-grid figcaption,
#view-ki .material-bloom > span,
#view-ki .ki-compare-tabs .btn,
#view-ki .ki-compare-grid figcaption,
#view-ki .ki-candidate-grid figcaption,
#view-ki .ki-version-history .btn,
#view-ki .ki-quality details summary,
#view-ki .ki-quality details p,
#view-ki .icon-chip,
#view-ki .icon-chip .icon-orig,
#view-ki .photo-edge-chip,
#view-ki .ki-decoration-recommendation,
#view-ki .ki-decoration-mode > span:nth-child(2) > b,
#view-ki .ki-decoration-mode small,
#view-ki .ki-recommended,
#view-ki .ki-decoration-rationale strong,
#view-ki .ki-decoration-frame legend,
#view-ki .ki-subsection-title span,
#view-ki .ki-ornament-optin,
#view-ki .ki-ornament-optin small,
#view-ki .ki-decoration-asset-action .btn,
#view-ki .ki-asset-missing,
#view-ki .ki-decoration-candidate strong,
#view-ki .ki-asset-history > summary,
#view-ki .ki-asset-history > div,
#view-ki .badge {
  font-size: max(.75rem, 12px);
}

@media (prefers-reduced-motion: reduce) {
  .ki-skelett, .bloom-frame i, .bloom-frame b, .bloom-frame em {
    animation: none !important; }
  .bloom-frame i, .bloom-frame b, .bloom-frame em { opacity: .72; }
}

@media (max-width: 720px) {
  .topbar { padding: .65rem .75rem; gap: .45rem; }
  .brand-logo { height: 32px; }
  .brand span, #username { display: none; }
  .topbar-right { gap: .35rem; margin-left: auto; font-size: max(.75rem, 12px); }
  .topbar .btn.ghost { min-height: 44px; padding: .42rem .58rem;
    font-size: max(.75rem, 12px); }
  #view-ki { padding-bottom: calc(6rem + env(safe-area-inset-bottom, 0px)); }
  #view-ki button, #view-ki summary, #view-ki [role="button"] {
    min-height: 44px; }
  #view-ki input:not([type]), #view-ki input[type="text"],
  #view-ki input[type="number"], #view-ki select, #view-ki textarea {
    min-height: 44px; }
  #view-ki summary { align-items: center; }
  #view-ki .ki-thumb .x { width: 44px; height: 44px; top: -15px; right: -15px;
    background: transparent; box-shadow: none; isolation: isolate; }
  #view-ki .ki-thumb .x::before { content: ""; position: absolute; inset: 10px;
    z-index: -1; border-radius: 50%; background: var(--ink);
    box-shadow: 0 2px 6px rgb(0 0 0 / .25); }
  .ki-takeover-actions { position: fixed;
    left: max(.75rem, env(safe-area-inset-left, 0px));
    right: max(.75rem, env(safe-area-inset-right, 0px));
    bottom: max(.65rem, env(safe-area-inset-bottom, 0px));
    z-index: 30; flex-wrap: nowrap; align-items: center; margin: 0;
    padding: .65rem; border: 1px solid var(--line-mid); border-radius: 18px;
    background: rgb(255 255 255 / .94); box-shadow: 0 16px 46px rgb(17 17 17 / .22);
    backdrop-filter: blur(18px); }
  /* Ohne ausführbare Aktion (alles disabled, z. B. „Bereits übernommen")
     verdeckt die Leiste keinen Inhalt mehr, sondern fließt im Text mit. */
  .ki-takeover-actions:not(:has(.btn:not(:disabled))) { position: static;
    box-shadow: none; background: transparent; border: 0; padding: 0; }
  .ki-takeover-actions .ki-uebernehmen { flex: 0 0 auto; min-height: 44px; }
  .ki-takeover-actions .hint { min-width: 0; overflow: hidden;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  #ki-cost-confirmation:not([hidden]) ~ #ki-varianten .ki-takeover-actions {
    display: none; }
  /* Mehrzeilig darf die Leiste nicht kleben - sie wuerde den halben
     Bildschirm verdecken. */
  .ki-stepper { grid-template-columns: 1fr 1fr; position: static; }
  .ki-page-head { grid-template-columns: 1fr; }
  .ki-run-head { width: 100%; box-sizing: border-box; }
  .ki-run-head-row { grid-template-columns: 1fr; }
  .ki-run-alert { align-items: flex-start; flex-direction: column; }
  .ki-final-review-action { align-items: stretch; flex-direction: column; }
  .ki-run-alert-actions, .ki-cost-actions { width: 100%; }
  .ki-run-alert-actions .btn, .ki-cost-actions .btn { flex: 1; }
  #ki-konzepte { grid-template-columns: 1fr; }
  .ki-vergleich-grid { grid-template-columns: 1fr; }
  .ki-output-grid { grid-template-columns: 1fr 1fr; }
  .ki-output-grid figure:first-child { grid-column: 1 / 3; grid-row: auto; }
  .ki-output-grid.nur-screen { grid-template-columns: 1fr; }
  .ki-output-grid.nur-screen figure:first-child { grid-column: auto; }
  .ki-regler { grid-template-columns: 1fr; }
  .material-bloom { grid-template-columns: 1.6fr 1fr; }
  .bloom-strip { display: none; }
  .ki-artifact-wait .bloom-strip { display: block; }
  .ki-candidate-grid { grid-template-columns: 1fr; }
  .lightbox-shell { padding: .5rem; }
  .lightbox-head { align-items: flex-start; }
}

/* Referenzbild-Thumbnails: weiche Kacheln + ✕-Badge */
.ki-thumbs { display: flex; gap: .6rem; align-items: center;
  margin-top: .45rem; flex-wrap: wrap; }
.ki-thumb { position: relative; width: 72px; height: 72px; }
.ki-thumb img { width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--r-l); border: 1px solid var(--line);
  box-shadow: 0 6px 16px rgb(17 17 17 / .10); display: block; }
.ki-thumb .x { position: absolute; top: -7px; right: -7px; width: 22px;
  height: 22px; border-radius: 50%; border: none; background: var(--ink);
  color: #fff; font-size: 12px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgb(0 0 0 / .25);
  transition: transform .12s ease, background .12s ease; }
.ki-thumb .x:hover { background: #000; transform: scale(1.12); }
.ki-thumb-add { width: 72px; height: 72px; border-radius: var(--r-l);
  border: 1.5px dashed var(--line); background: #fff;
  color: var(--ink-soft); font-size: 1.5rem; font-weight: 300;
  cursor: pointer; transition: border-color var(--t-fast) ease, color var(--t-fast) ease; }
.ki-thumb-add:hover { border-color: var(--gold); color: var(--gold-dark); }
/* Drag & Drop: die ganze Zeile leuchtet als Ablagefläche auf */
.ki-thumbs { border-radius: var(--r-l); transition: box-shadow var(--t-fast) ease,
  background .15s ease; padding: 2px; }
.ki-thumbs.dragover { background: var(--gold-soft);
  box-shadow: 0 0 0 2px var(--gold) inset; }
.ki-thumbs.dragover .ki-thumb-add { border-color: var(--gold);
  color: var(--gold-dark); }

/* Button-Icon-Sets im Feinschliff */
.icon-sets { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; }
.icon-chip { display: flex; flex-direction: column; align-items: center;
  gap: .35rem; padding: .55rem .7rem; border: 1px solid var(--line);
  border-radius: var(--r-m); background: #fff; cursor: pointer;
  font-size: max(.75rem, 12px); font-weight: 600; color: var(--ink-soft); }
.icon-chip.active { border-color: var(--gold); color: var(--gold-dark);
  background: var(--gold-soft); }
.icon-chip .icon-mini { display: flex; gap: .25rem; align-items: center;
  min-height: 26px; }
.icon-chip .icon-mini img { width: 24px; height: 24px; }
.icon-chip .icon-orig { font-size: max(.75rem, 12px); color: var(--ink-soft);
  border: 1px dashed var(--line); border-radius: 6px; padding: .2rem .4rem; }

/* Technische Fotoränder: kleine CSS-Skizzen halten die Auswahl schnell und
   zeigen den Charakter, ohne zusätzliche Vorschaudateien zu benötigen. */
.photo-edge-sets { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.photo-edge-chip { display: flex; flex-direction: column; align-items: center;
  justify-content: space-between; gap: .4rem; min-width: 112px; padding: .55rem;
  border: 1px solid var(--line); border-radius: var(--r-m); background: #fff;
  cursor: pointer; font-size: max(.75rem, 12px); font-weight: 600; color: var(--ink-soft); }
.photo-edge-chip.active { border-color: var(--gold); color: var(--gold-dark);
  background: var(--gold-soft); }
.photo-edge-mini { position: relative; display: block; width: 66px; height: 40px;
  border: 1px solid var(--gold); border-radius: 2px;
  background: linear-gradient(145deg, #d9d1c4, #f4f0e8 52%, #c5bbb0); }
.photo-edge-mini i { position: absolute; inset: 0; pointer-events: none; }
.photo-edge-mini.edge-none { border-color: transparent; }
.photo-edge-mini.edge-hairline { border-width: 1px; }
.photo-edge-mini.edge-double { border: 3px double var(--gold); }
.photo-edge-mini.edge-soft_matte { border: 4px solid #f0eadf;
  box-shadow: 0 0 0 1px var(--gold); }
.photo-edge-mini.edge-paper_shadow { box-shadow: 4px 4px 7px #40362952; }
.photo-edge-mini.edge-corners { border-color: transparent;
  background-image: linear-gradient(var(--gold),var(--gold)),linear-gradient(var(--gold),var(--gold)),
    linear-gradient(var(--gold),var(--gold)),linear-gradient(var(--gold),var(--gold)),
    linear-gradient(145deg,#d9d1c4,#f4f0e8 52%,#c5bbb0);
  background-size: 13px 2px,2px 13px,13px 2px,2px 13px,100% 100%;
  background-position: left top,left top,right bottom,right bottom,center;
  background-repeat: no-repeat; }
.photo-edge-mini.edge-foil_inlay { border: 1px solid #9f7738;
  box-shadow: inset 0 0 0 4px #f5df9d, inset 0 0 0 5px #b68a42; }
.photo-edge-mini.edge-soft_fade { border-color: transparent;
  box-shadow: inset 0 0 10px 5px #f3eee5; }
.photo-edge-mini.edge-deckle { border: 3px dotted #e8dfd1;
  box-shadow: inset 0 0 0 1px #8f806b42; }
.photo-edge-mini.edge-auto { border-style: dashed; border-color: #8f806b;
  box-shadow: inset 0 0 0 3px #ffffff80; }
/* V4-Gestaltungsregie: lokale Rahmen und Ornamente bleiben getrennt. */
.ki-decoration-director { margin: .85rem 0; padding: .85rem;
  border: 1px solid #b8925a4a; border-radius: var(--r-l);
  background: linear-gradient(145deg, #fffdf8, #f7f3ea); }
.ki-decoration-head { display: flex; justify-content: space-between;
  align-items: flex-start; gap: .8rem; margin-bottom: .7rem; }
.ki-decoration-head h4 { margin: 0; font-size: .96rem; }
.ki-decoration-head p { margin: .2rem 0 0; max-width: 70ch;
  font-size: .76rem; line-height: 1.45; color: var(--ink-soft); }
.ki-decoration-head .beta { flex: 0 0 auto; color: #4c6865;
  border-color: #6f8e8a66; background: #edf5f3; text-transform: uppercase;
  letter-spacing: .06em; }
.ki-decoration-artifacts { display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: .7rem; }
.ki-decoration-artifact { min-width: 0; padding: .7rem;
  border: 1px solid var(--line); border-radius: 13px; background: #fff;
  transform: translate3d(0, 0, 0); transition: opacity var(--t-fast) ease; }
.ki-decoration-artifact.is-saving { opacity: .68; }
.ki-decoration-artifact-head { display: flex; align-items: center;
  justify-content: space-between; gap: .55rem; flex-wrap: wrap; }
.ki-decoration-artifact-head > strong { font-size: .82rem; }
.ki-decoration-recommendation { font-size: max(.75rem, 12px); white-space: normal;
  text-align: right; }
.ki-decoration-modes { display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem;
  margin-top: .55rem; }
.ki-decoration-mode { position: relative; display: grid;
  grid-template-columns: 46px minmax(0, 1fr); align-items: center;
  gap: .45rem; min-width: 0; min-height: 58px; padding: .45rem;
  border: 1px solid var(--line); border-radius: 11px; background: #fff;
  color: var(--ink-soft); text-align: left; cursor: pointer;
  transform: translate3d(0, 0, 0); transition: transform var(--t-fast) ease, opacity var(--t-fast) ease; }
.ki-decoration-mode:hover { transform: translate3d(0, -1px, 0); }
.ki-decoration-mode.active { border-color: var(--gold); color: var(--ink);
  box-shadow: inset 0 0 0 1px #b8925a40; }
.ki-decoration-mode > span:nth-child(2) { min-width: 0; }
.ki-decoration-mode > span:nth-child(2) > b { display: block;
  font-size: max(.75rem, 12px); }
.ki-decoration-mode small { display: block; margin-top: .1rem;
  font-size: max(.75rem, 12px); line-height: 1.3; color: var(--ink-soft); }
.ki-decoration-mode-icon { position: relative; display: block; overflow: hidden;
  width: 46px; height: 32px; border-radius: 7px; background: #eee9df;
  border: 1px solid #ded5c7; transform: translate3d(0, 0, 0); }
.ki-decoration-mode-icon i, .ki-decoration-mode-icon b,
.ki-decoration-mode-icon em { position: absolute; display: block;
  border-radius: 60% 40% 55% 45%; background: var(--gold); }
.ki-decoration-mode-icon i { width: 16px; height: 14px; left: 3px; top: 3px; }
.ki-decoration-mode-icon b { width: 13px; height: 12px; right: 4px; bottom: 3px;
  background: #64807c; }
.ki-decoration-mode-icon em { width: 8px; height: 8px; left: 21px; bottom: 3px;
  background: #c9a362; }
.ki-decoration-mode-icon.mode-auto { border-style: dashed; }
.ki-decoration-mode-icon.mode-ohne i,
.ki-decoration-mode-icon.mode-ohne b,
.ki-decoration-mode-icon.mode-ohne em { opacity: 0; }
.ki-decoration-mode-icon.mode-reduziert b,
.ki-decoration-mode-icon.mode-reduziert em { opacity: 0; }
.ki-recommended { position: absolute; top: 3px; right: 4px;
  padding: .1rem .28rem; border-radius: var(--r-pill); color: var(--gold-dark);
  background: var(--gold-soft); font-size: max(.75rem, 12px); font-weight: 700; }
.ki-decoration-rationale { display: grid; gap: .08rem; margin: .55rem 0;
  padding: .48rem .58rem; border-left: 3px solid var(--gold);
  border-radius: 0 8px 8px 0; background: var(--surface-hint);
  font-size: .75rem; line-height: 1.4; color: var(--ink-soft); }
.ki-decoration-rationale strong { color: var(--ink); font-size: max(.75rem, 12px); }
/* Eingeklappte Erklaerungen ("Warum empfiehlt Breeze das?" / Pruefdetails):
   Neugier wird beantwortet, ohne die Station mit Jargon zu fluten. */
.ki-warum > summary { cursor: pointer; color: var(--ink);
  font-size: max(.75rem, 12px); font-weight: 700; }
.ki-warum[open] > summary { margin-bottom: .18rem; }
.ki-warum > span { display: block; font-size: max(.75rem, 12px);
  color: var(--ink-soft); line-height: 1.4; }
/* Event-Typ-Wahl in der Eventdaten-Karte: sichtbar + kostenlos wechselbar. */
.ki-eventtyp-wahl { display: flex; flex-wrap: wrap; align-items: center;
  gap: .4rem; margin: .35rem 0 .6rem; }
.ki-eventtyp-wahl > strong { font-size: max(.78rem, 12px); }
.ki-eventtyp-chip { border: 1px solid var(--line); border-radius: 999px;
  background: #fff; color: var(--ink-soft); cursor: pointer;
  padding: .35rem .8rem; font-size: max(.78rem, 12px); }
.ki-eventtyp-chip.active { border-color: var(--gold);
  background: var(--surface-warm); color: var(--ink);
  box-shadow: inset 0 0 0 1px #b8925a35; }
.ki-eventtyp-chip[disabled] { opacity: .55; cursor: default; }
.ki-eventtyp-wahl .field-help { flex-basis: 100%; margin: 0; }
.ki-eventtyp-status:empty { display: none; }
/* Abschnitts-Header der Steuerspalte: Pruefen -> Anpassen -> Uebernehmen. */
.ki-abschnitt { display: grid; gap: .08rem; margin: 1.05rem 0 .3rem;
  padding-top: .6rem; border-top: 1px solid var(--line-mid); }
.ki-abschnitt strong { font-size: max(.82rem, 13px); color: var(--ink);
  letter-spacing: .01em; }
.ki-abschnitt span { font-size: max(.75rem, 12px); color: var(--ink-soft); }
.ki-decoration-frame { margin: .45rem 0 0; padding: .55rem;
  border: 1px solid var(--line); border-radius: 11px; }
.ki-decoration-frame legend { padding: 0 .25rem; color: var(--ink-soft);
  font-size: max(.75rem, 12px); font-weight: 700; }
.ki-decoration-frame .field-help { margin: 0; }
.ki-decoration-frame .photo-edge-chip { min-width: 92px;
  transform: translate3d(0, 0, 0); transition: transform var(--t-fast) ease, opacity var(--t-fast) ease; }
.ki-decoration-frame .photo-edge-chip:hover { transform: translate3d(0, -1px, 0); }
.ki-subsection-title { display: flex; align-items: baseline;
  justify-content: space-between; gap: .6rem; margin: .65rem 0 .2rem; }
.ki-subsection-title strong { font-size: .76rem; color: var(--ink); }
.ki-subsection-title span { font-size: max(.75rem, 12px); color: var(--ink-soft); }
.ki-composition-panel { padding-top: .05rem; }
.ki-ornament-optin { display: flex; gap: .55rem; align-items: flex-start;
  margin: .55rem 0; padding: .55rem .65rem; border-radius: 11px;
  background: var(--surface-hint); border: 1px solid var(--line); font-size: max(.75rem, 12px); }
.ki-ornament-optin span { display: grid; gap: .08rem; }
.ki-ornament-optin small { color: var(--ink-soft); font-size: max(.75rem, 12px); }
.btn:focus-visible, button:focus-visible, select:focus-visible,
input:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.ki-decoration-asset-action { display: flex; align-items: center; gap: .5rem;
  flex-wrap: wrap; margin-top: .55rem; padding: .55rem;
  border: 1px dashed #b8925a88; border-radius: 10px; background: var(--surface-warm); }
.ki-decoration-asset-action .btn { font-size: max(.75rem, 12px); padding: .35rem .65rem; }
.ki-decoration-asset-action .field-help { flex: 1 1 210px; }
.ki-decoration-candidate { display: grid; grid-template-columns: 132px 1fr;
  gap: .65rem; align-items: center; margin-top: .55rem; padding: .55rem;
  border: 1px solid #6f8e8a66; border-radius: 10px; background: #f3f8f7; }
.ki-decoration-candidate img { width: 132px; max-height: 104px;
  object-fit: contain; border-radius: 7px; cursor: zoom-in;
  background: repeating-conic-gradient(#e2e5e1 0 25%,#fff 0 50%) 0 0/16px 16px; }
.ki-asset-missing { width: 132px; min-height: 104px; display: grid;
  place-items: center; padding: .7rem; border: 1px dashed #b868687d;
  border-radius: 7px; background: #fff; color: #865b5b; text-align: center;
  font-size: max(.75rem, 12px); font-weight: 700; line-height: 1.35; }
.ki-decoration-candidate strong { display: block; font-size: max(.75rem, 12px); }
.ki-decoration-candidate .vorlage-actions { margin-top: .4rem; }
/* Aussortierte Versuche sind Information, kein Alarm: neutrale Flaeche
   statt Fehlerrot - der rote Ton bleibt echten Fehlschlaegen vorbehalten. */
.ki-decoration-candidate.is-test-only { border-color: var(--line-mid);
  background: var(--surface-hint); align-items: start; }
.ki-decoration-candidate.is-test-only img { filter: saturate(.6);
  opacity: .85; }
.ki-decoration-candidate.is-test-only .badge { background: var(--surface-warm);
  color: var(--ink-soft); border: 1px solid var(--line-mid); }
.ki-asset-history { margin-top: .65rem; border-top: 1px solid var(--line-mid);
  padding-top: .55rem; }
.ki-asset-history > summary { cursor: pointer; color: var(--ink-soft);
  font-size: max(.75rem, 12px); }
.ki-asset-history > div { display: flex; justify-content: space-between;
  align-items: center; gap: .65rem; margin-top: .45rem; font-size: max(.75rem, 12px); }
.ki-decoration-error { min-height: 0; margin: .45rem 0 0; }
.ki-decoration-artifact.is-saving .ki-decoration-mode-icon {
  animation: decoration-breathe .8s ease-in-out infinite alternate;
  will-change: opacity, transform; }
@keyframes decoration-breathe {
  from { opacity: .48; transform: translate3d(0, 0, 0) scale(.96); }
  to { opacity: .9; transform: translate3d(0, 0, 0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .ki-decoration-artifact.is-saving .ki-decoration-mode-icon {
    animation: none !important; opacity: .72; }
  .ki-decoration-mode:hover,
  .ki-decoration-frame .photo-edge-chip:hover,
  .ki-output-grid img.is-refreshing, #lightbox-img.is-refreshing {
    transform: none; }
}

@media (max-width: 520px) {
  .ki-decoration-director { padding: .65rem; }
  .ki-decoration-modes { grid-template-columns: 1fr; }
  .ki-decoration-frame .photo-edge-sets { display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ki-decoration-frame .photo-edge-chip { min-width: 0; }
  .ki-decoration-candidate { grid-template-columns: 1fr; }
  .ki-decoration-candidate img, .ki-asset-missing { width: 100%; }
}

@media (max-width: 420px) {
  .ki-stepper { grid-template-columns: 1fr; position: static; }
  .ki-cost-actions { flex-direction: column-reverse; }
  .ki-cost-actions .btn { width: 100%; }
}

@media (max-width: 980px) {
  #view-ki { padding-inline: 1rem; }
  .ki-output-grid { grid-template-columns: 1fr 1fr; }
  .ki-output-grid figure:first-child { grid-column: 1 / -1; grid-row: auto; }
  .ki-decoration-artifacts { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .page-head { align-items: flex-start; }
  .ki-primary-action { align-items: stretch; }
  .ki-primary-action .btn { width: 100%; }
  .freigabe-leiste > div { min-width: 100%; }
  .freigabe-leiste > .btn { width: 100%; }
  .ki-output-grid { grid-template-columns: 1fr; }
  .ki-output-grid figure:first-child { grid-column: auto; }
  .ki-preview-pane .ki-output-grid { grid-template-columns: 1fr; }
  .ki-preview-pane .ki-output-grid figure:first-child { grid-column: auto; }
  .ki-decoration-head { display: grid; }
}

/* KI-Design: Varianten-Galerie */
.ki-variante label { display: grid; gap: .3rem; font-size: .78rem;
  font-weight: 600; color: var(--ink-soft); margin-top: .6rem; }
.ki-variante input { padding: .55rem .8rem; border: 1px solid var(--line);
  border-radius: 10px; font-size: .92rem; width: 100%; }
.ki-deko { margin-top: .6rem; border-radius: var(--r-m); border: 1px solid var(--line);
  background: repeating-conic-gradient(#eeeae0 0 25%, #ffffff 0 50%) 0 0/22px 22px;
  display: flex; justify-content: center; padding: .6rem; }
.ki-deko img { max-height: 180px; width: auto; }
.ki-variante .meta a { color: var(--gold-dark); }
.ki-deko-wahl { margin-top: .5rem; width: 100%; padding: .45rem .7rem;
  border: 1px solid var(--line); border-radius: 10px; font-size: .82rem;
  color: var(--ink-soft); background: #fff; cursor: pointer; }
.ki-deko-wahl:focus:not(:focus-visible) { outline: none;
  border-color: var(--gold); }

/* Vorlagen-Thumbnail (Ready-Screen) auf der Karte */
.cards .card .vorschau { width: 100%; aspect-ratio: 16 / 9;
  object-fit: cover; border-radius: 14px; border: 1px solid var(--line);
  background: var(--bone); margin-bottom: .75rem; display: block; }

/* „Scharfer" Bestätigungs-Zustand (confirmClick) + Canvas-Panel */
.btn.warn { border-color: var(--error); color: var(--error);
  background: var(--error-soft); }
.canvas-panel { max-width: 430px; margin-bottom: 1rem; display: grid;
  gap: .5rem; }
.canvas-panel label { display: grid; gap: .35rem; font-size: .8rem;
  font-weight: 600; color: var(--ink-soft); }
.katchips { display: flex; gap: .45rem; flex-wrap: wrap; }
.katchip { border: 1px solid var(--line); background: transparent;
  border-radius: var(--r-pill); padding: .32rem .85rem; font-size: .78rem;
  font-weight: 600; color: var(--ink-soft); cursor: pointer;
  transition: background var(--t-fast) ease, border-color var(--t-fast) ease,
    color .15s ease, transform .15s ease; }
.katchip:hover { transform: translateY(-1px); border-color: var(--gold); }
.katchip.active { background: var(--gold-soft); color: var(--gold-dark);
  border-color: var(--gold); }

/* Karten-Details: Farbpunkt + Bearbeiten-Formular */
.farbdot { display: inline-block; width: .85em; height: .85em;
  border-radius: 50%; margin-right: .45rem; vertical-align: -0.06em;
  box-shadow: inset 0 0 0 1px rgb(17 17 17 / .12); }
.vorlage-edit { margin-top: .9rem; padding-top: .9rem;
  border-top: 1px dashed var(--line); display: grid; gap: .6rem; }
.vorlage-edit label { display: grid; gap: .3rem; font-size: .78rem;
  font-weight: 600; color: var(--ink-soft); }
.vorlage-edit .ed-row { display: flex; gap: .8rem; flex-wrap: wrap; }
.vorlage-edit .ed-row label { flex: 1 1 140px; }
.ed-pill { display: flex; align-items: center; gap: .45rem; }
.ed-pill input[type="color"] { width: 42px; height: 32px; padding: 2px;
  border: 1px solid var(--line); border-radius: var(--r-s); background: #fff;
  cursor: pointer; }
.ed-pill .ed-farbe-hex { width: 96px; font-family: ui-monospace, monospace; }
.ed-farbe-hex.invalid { border-color: var(--error); }
.freigabe { display: flex; align-items: center; gap: .5rem; margin-top: .8rem;
  font-size: .8rem; font-weight: 600; color: var(--ink-soft); cursor: pointer; }
.freigabe input { accent-color: var(--gold); width: 16px; height: 16px; }

/* ---------- Feinschliff (M2-③) ---------- */
.fein-toolbar { display: flex; align-items: center; gap: .8rem;
  justify-content: space-between; flex-wrap: wrap; margin-bottom: .7rem; }
.fein-scroll { overflow: auto; max-height: 74vh; display: block; }
#fein-stage { position: relative; width: max-content; margin: 0 auto; }
#fein-overlay { position: absolute; inset: 0; }
#fein-frame img { user-select: none; display: block; }
.fein-marker.selected { box-shadow: 0 0 0 4px #b8925a55, 0 1px 6px #11111155; }
.fein-guide { position: absolute; background: var(--gold); opacity: .55;
  pointer-events: none; display: none; }
#fein-guide-v { width: 1.5px; top: 0; bottom: 0; }
#fein-guide-h { height: 1.5px; left: 0; right: 0; }

/* Fokus-/Vollbild-Modus: Bühne füllt das Fenster, Panel wird zur Lade */
#btn-fein-panel, #btn-panel-close { display: none; }
body.fein-fokus .topbar,
body.fein-fokus #view-feinschliff .page-head { display: none; }
body.fein-fokus #view-feinschliff { max-width: none; padding: .6rem 1rem; }
body.fein-fokus #view-feinschliff .editor { display: block; }
body.fein-fokus #btn-fein-panel { display: inline-block; }
body.fein-fokus #view-feinschliff .card.preview { box-shadow: none;
  border: none; padding: .6rem .9rem; }
body.fein-fokus .fein-scroll { max-height: calc(100vh - 110px); }
/* Toolbar hat IMMER Vorrang vor der Panel-Lade (Buttons bleiben klickbar).
   Wichtig: Die reveal-Animation der Karte erzeugt einen Stacking-Context,
   der das z-index einsperren würde → im Fokus-Modus abschalten. */
body.fein-fokus #view-feinschliff .card { animation: none !important; }
body.fein-fokus .fein-toolbar { position: relative; z-index: 70;
  transition: margin-right var(--t-slow) var(--ease-out); }
/* Offene Lade: Toolbar rückt nach links, statt über dem Panel zu liegen */
body.fein-fokus.fein-panel-open .fein-toolbar {
  margin-right: calc(min(380px, 94vw) + 12px); }
body.fein-fokus #fein-form { position: fixed; top: 0; right: 0; bottom: 0;
  width: min(380px, 94vw); z-index: 60; overflow: auto; margin: 0;
  border-radius: 0; box-shadow: -14px 0 44px #11111126;
  padding-top: 3rem;
  transform: translateX(105%); transition: transform var(--t-slow) var(--ease-out); }
body.fein-fokus.fein-panel-open #fein-form { transform: none; }
body.fein-fokus #btn-panel-close { display: flex; position: absolute;
  top: .6rem; right: .8rem; border: none; background: var(--bone);
  width: 32px; height: 32px; border-radius: 50%; align-items: center;
  justify-content: center; cursor: pointer; font-size: 1rem;
  color: var(--ink-soft); }
body.fein-fokus #btn-panel-close:hover { color: var(--error); }
@media (max-width: 560px) {
  body.fein-fokus #fein-form { width: 100vw; }
  /* Vollflächiges Panel: Toolbar dahinter ausblenden (✕ schließt) */
  /* Nur der Ausweg bleibt sichtbar — sonst säße man auf Touch-Geräten
     im Fokusmodus fest (ESC gibt es dort nicht). */
  body.fein-fokus.fein-panel-open .fein-toolbar > * { visibility: hidden; }
  body.fein-fokus.fein-panel-open #btn-fein-fokus { visibility: visible; }
}
/* Panel-Zeilen brechen auf schmalen Breiten sauber um (ID-Selektor:
   gewinnt unabhängig von der Regel-Reihenfolge gegen die Grid-Basis) */
@media (max-width: 1099px) {
  #fein-form .fein-slot-row { display: flex; flex-wrap: wrap; align-items: end; }
  #fein-form .fein-slot-row .fein-slot-name { flex-basis: 100%; }
  #fein-form .fein-slot-row label { flex: 1 1 72px; }
}
.fein-marker { position: absolute; width: 16px; height: 16px;
  border-radius: 50%; background: var(--gold); border: 2.5px solid #fff;
  box-shadow: 0 1px 6px #11111155; transform: translate(-50%, -50%);
  cursor: grab; }
.fein-marker:active { cursor: grabbing; }
.fein-marker .tag { position: absolute; left: 50%; top: -22px;
  transform: translateX(-50%); font-size: max(.75rem, 12px); font-weight: 700;
  background: #111111cc; color: #fff; border-radius: 6px;
  padding: .1rem .4rem; white-space: nowrap; pointer-events: none; }
.fein-widthbar { position: absolute; height: 0;
  border-top: 2px dashed #b8925acc; transform: translate(-50%, -50%);
  pointer-events: none; }
.fein-slot-row { display: grid;
  grid-template-columns: 1.2fr repeat(3, .8fr) auto; gap: .4rem;
  align-items: end; margin-top: .5rem; }
.fein-slot-row label { font-size: max(.75rem, 12px); }
.fein-slot-row input { padding: .35rem .5rem; font-size: .82rem; }
.fein-slot-row input[type=color] { padding: 2px; height: 32px; width: 44px; }
.fein-slot-name { font-size: .78rem; font-weight: 700; color: var(--ink); }
.kontrast-row { display: flex; align-items: center; gap: .5rem;
  margin-top: .45rem; font-size: .78rem; color: var(--ink-soft); }
.kontrast-row i { width: 14px; height: 14px; border-radius: 50%;
  border: 1px solid #00000022; flex: none; }
.kontrast-row b { font-variant-numeric: tabular-nums; }
.kontrast-row.warn b { color: var(--error); }
.kontrast-row .btn { padding: .2rem .6rem; font-size: max(.75rem, 12px); }
.fein-color-row { display: flex; align-items: center; gap: .5rem;
  margin-top: .45rem; font-size: .78rem; font-weight: 600;
  color: var(--ink-soft); }
.fein-color-row input[type=color] { padding: 2px; height: 30px; width: 42px;
  border-radius: var(--r-s); border: 1px solid var(--line-strong); }
.fein-font-row { display: grid; grid-template-columns: 1fr 1.4fr;
  gap: .5rem; align-items: center; margin-top: .45rem; font-size: .78rem;
  font-weight: 600; color: var(--ink-soft); }
.fein-decoration-advanced { margin-top: 1rem; padding-top: .8rem;
  border-top: 1px solid var(--line); }
.fein-decoration-advanced > summary { display: flex; align-items: center;
  justify-content: space-between; gap: .5rem; cursor: pointer;
  color: var(--ink); font-size: .82rem; font-weight: 750;
  list-style: none; }
.fein-decoration-advanced > summary::-webkit-details-marker { display: none; }
.fein-decoration-advanced > summary::after { content: "+"; font-size: 1rem;
  color: var(--gold-dark); transition: transform var(--t-fast) ease; }
.fein-decoration-advanced[open] > summary::after {
  transform: rotate(45deg); }
#fein-decoration-status { margin: .55rem 0 .7rem; color: #4c6865; }
.fein-decoration-row { display: grid; gap: .48rem; margin-top: .65rem;
  padding: .65rem; border: 1px solid var(--line); border-radius: var(--r-m);
  background: #fffdf9; transition: border-color var(--t-fast) ease,
  box-shadow .18s ease, opacity .18s ease; }
.fein-decoration-row.selected { border-color: var(--gold);
  box-shadow: 0 0 0 2px #b8925a1f; }
.fein-decoration-row.is-saving { opacity: .58; pointer-events: none; }
.fein-decoration-row-head { display: flex; align-items: baseline;
  justify-content: space-between; gap: .5rem; }
.fein-decoration-row-head strong { font-size: .76rem; color: var(--ink); }
.fein-decoration-row-head span { font-size: max(.75rem, 12px); color: var(--ink-soft);
  overflow-wrap: anywhere; }
.fein-decoration-row > label { font-size: max(.75rem, 12px); color: var(--ink-soft); }
.fein-decoration-row select, .fein-decoration-row input[type=number] {
  width: 100%; margin-top: .16rem; padding: .4rem .5rem; font-size: max(.75rem, 12px); }
.fein-decoration-transform { display: grid; grid-template-columns: 1fr 1fr;
  gap: .45rem; align-items: end; }
.fein-decoration-transform label { font-size: max(.75rem, 12px); color: var(--ink-soft); }
.fein-decoration-transform .fein-decoration-mirror {
  grid-column: 1 / -1; display: flex; align-items: center; gap: .38rem;
  min-height: 30px; color: var(--ink); }
.fein-decoration-transform .fein-decoration-mirror input { margin: 0; }
.fein-decoration-row .hint { margin: 0; font-size: max(.75rem, 12px); }
.fein-decoration-row .fein-decoration-remove {
  justify-self: start; padding: .3rem .58rem; font-size: max(.75rem, 12px); }
.fein-decoration-row-error { min-height: 0; margin: 0; font-size: max(.75rem, 12px); }
.fein-decoration-empty { margin: .5rem 0 0; padding: .65rem;
  border-radius: 10px; background: var(--bone); color: var(--ink-soft);
  font-size: max(.75rem, 12px); line-height: 1.45; }
.fein-decoration-safe { position: absolute; border: 1.5px dashed #397d77aa;
  border-radius: 9px; background: #5ea59b10; pointer-events: none; }
.fein-decoration-marker { position: absolute; width: 17px; height: 17px;
  padding: 0; border-radius: 50%; border: 2.5px solid #fff;
  background: #397d77; box-shadow: 0 1px 7px #11111155;
  transform: translate3d(-50%, -50%, 0); cursor: pointer; }
.fein-decoration-marker.selected { width: 21px; height: 21px;
  background: var(--gold-dark); }
.fein-decoration-marker span { position: absolute; left: 50%; top: -23px;
  transform: translateX(-50%); padding: .1rem .35rem; border-radius: 6px;
  color: #fff; background: #274d49e8; font-family: sans-serif;
  font-size: max(.75rem, 12px); font-weight: 700; line-height: 1.25;
  white-space: nowrap; pointer-events: none; }
@media (max-width: 560px) {
  .fein-decoration-transform { grid-template-columns: 1fr; }
  .fein-decoration-transform .fein-decoration-mirror { grid-column: auto; }
}
/* Deko-Rahmen: Fläche lässt Klicks durch (Anker darunter bleiben
   greifbar), gezogen wird an Rahmenlinie + Label */
.fein-deco { position: absolute; border: 2px dashed #b8925a99;
  border-radius: var(--r-s); transform: translate(-50%, -50%);
  pointer-events: none; }
.fein-deco .tag { position: absolute; left: 50%; top: -22px;
  transform: translateX(-50%); font-size: max(.75rem, 12px); font-weight: 700;
  background: #b8925acc; color: #fff; border-radius: 6px;
  padding: .1rem .4rem; white-space: nowrap;
  pointer-events: auto; cursor: move; }
.fein-deco .edge { position: absolute; pointer-events: auto; cursor: move; }
.fein-deco .edge.n { left: 0; right: 0; top: -6px; height: 12px; }
.fein-deco .edge.s { left: 0; right: 0; bottom: -6px; height: 12px; }
.fein-deco .edge.w { top: 0; bottom: 0; left: -6px; width: 12px; }
.fein-deco .edge.e { top: 0; bottom: 0; right: -6px; width: 12px; }

/* ---------- Export-Panel ---------- */
.export-panel { margin-bottom: 1.2rem; }
.export-head { display: flex; justify-content: space-between; align-items: baseline; }
.progress { height: 8px; background: var(--bone); border-radius: var(--r-pill);
  overflow: hidden; margin: .7rem 0; }
.progress-bar { height: 100%; width: 0; background: var(--gold);
  border-radius: var(--r-pill); transition: width .4s ease; position: relative; }
.ki-run-status[data-running="true"] .progress-bar::after { content: "";
  position: absolute; inset: 0; width: 42%; transform: translateX(-120%);
  background: linear-gradient(90deg, transparent, #ffffffa8, transparent);
  animation: ki-progress-light 2.6s cubic-bezier(.22,1,.36,1) infinite;
  will-change: transform; }
@keyframes ki-progress-light { to { transform: translateX(340%); } }
.ki-cost-pause { margin-top: .8rem; padding: .85rem 1rem;
  border: 1px solid color-mix(in srgb, var(--gold) 58%, transparent);
  border-radius: var(--r-m);
  background: color-mix(in srgb, var(--gold) 9%, transparent); }
.ki-cost-pause .btn { margin-top: .45rem; }
.progress-bar.indeterminate { width: 34%;
  animation: slide 1.4s ease-in-out infinite alternate; }
/* Bar ist 34 % breit; 66 % Containerweg = 194 % der eigenen Breite.
   transform statt margin: keine Layout-Arbeit pro Frame. */
@keyframes slide { from { transform: translateX(0); }
  to { transform: translateX(194%); } }
.ki-run-status[data-running="false"] #ki-progress { display: none; }
@media (prefers-reduced-motion: reduce) {
  .ki-run-status[data-running="true"] .progress-bar::after { display: none; }
  .progress-bar.indeterminate { width: 100%; animation: none; opacity: .55; }
}
.ki-run-log { margin-top: .65rem; color: var(--ink-soft); }
.ki-run-log summary { cursor: pointer; font-size: .78rem; font-weight: 650;
  letter-spacing: .01em; }
.ki-run-log[open] summary { color: var(--ink); }
.ki-run-log p { margin: .55rem 0 0; padding: .75rem .85rem;
  max-height: 11rem; overflow: auto; border: 1px solid var(--line);
  border-radius: var(--r-m); background: color-mix(in srgb, var(--bone) 58%, transparent); }
#export-download { margin-top: .4rem; display: inline-block; }
.export-warnings { margin: .35rem 0 .5rem; padding-left: 1.1rem;
  font-size: .78rem; color: var(--ink-soft); }
.export-warnings li { margin: .2rem 0; }
.export-warnings li::marker { color: var(--gold-dark); }