/* ===================================================================
   Vinedit – Styles
   Warmer, heller Studio-Look (passt zum Bild-Stil-Preset).
   Mobile-first.
=================================================================== */

:root {
  /* Editorial-Palette: helles Beige + Mint-/Salbeigrün */
  --bg:        #eef1e7;   /* zartes Salbei-Beige */
  --surface:   #ffffff;
  --surface-2: #f6f4ec;   /* warmes Creme */
  --sand:      #ece6d7;   /* Beige-Fläche (Bühne) */
  --ink:       #1e2420;
  --ink-soft:  #545d54;
  --muted:     #87907f;
  --line:      #e4e2d4;
  --line-soft: #eeece1;
  --accent:    #1f7d5c;   /* Mint-/Waldgrün (Primär) */
  --accent-ink:#165b42;
  --accent-2:  #2fa074;   /* helleres Mint für Verläufe */
  --accent-bg: #dcefe2;   /* Pastellmint */
  --accent-line:#bfe0ce;
  --danger:    #b3261e;
  --danger-bg: #fdeceb;
  --ok:        #2e7d4f;
  --warn-bg:   #fff6e2;
  --warn-line: #f0dca6;
  --radius:    20px;
  --radius-sm: 13px;
  --radius-xs: 9px;
  --shadow:    0 1px 2px rgba(28,40,32,.04), 0 8px 24px rgba(28,40,32,.06);
  --shadow-lg: 0 12px 40px rgba(24,46,34,.16);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", "Georgia", "Times New Roman", serif;
}

* { box-sizing: border-box; }

/* hidden muss IMMER verstecken – sonst überschreiben Klassen wie
   .loading-block{display:flex} das [hidden]-Default des Browsers. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background:
    radial-gradient(1100px 520px at 12% -180px, #e4f0e6 0%, rgba(228,240,230,0) 60%) fixed,
    radial-gradient(1000px 560px at 100% -120px, #f3efe2 0%, rgba(243,239,226,0) 55%) fixed,
    var(--bg) fixed;
  line-height: 1.5;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  padding: 0 16px;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(238,241,231,.78);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  padding-bottom: 12px;
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-mark {
  line-height: 1;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  flex: none;
}
.brand h1 { font-size: 19px; margin: 0; letter-spacing: -.01em; }
.tagline { margin: 0; font-size: 12.5px; color: var(--muted); }

/* ---------- Disclaimer ---------- */
.disclaimer {
  margin: 18px 0 6px;
  padding: 12px 14px;
  background: var(--accent-bg);
  border: 1px solid #cfe7e4;
  color: var(--accent-ink);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
}
.disclaimer strong { color: var(--accent-ink); }

/* ---------- Header-Aktionen / API-Key ---------- */
.header-actions { display: flex; align-items: center; gap: 8px; flex: none; }
#key-status-btn.key-ok { color: var(--ok); border-color: #bfe0c0; background: #f1f8f1; }

.key-panel { border-color: #cfe7e4; box-shadow: var(--shadow-lg); }
.key-intro code { background: var(--surface-2); padding: 1px 5px; border-radius: 5px; font-size: 12px; }
.key-row { display: flex; gap: 8px; margin: 12px 0 6px; }
.key-row input { flex: 1; }
.key-msg { font-size: 13px; padding: 9px 12px; border-radius: var(--radius-sm); margin-top: 6px; }
.key-msg.ok { background: #f1f8f1; border: 1px solid #bfe0c0; color: var(--ok); }
.key-msg.err { background: var(--danger-bg); border: 1px solid #f3c9c6; color: var(--danger); }

/* ---------- Restore-Zeile ---------- */
.restore-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap;
  margin: 10px 0 0;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 13px; color: var(--ink-soft);
}

/* ---------- Cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  margin: 14px 0;
  box-shadow: var(--shadow);
}
.card-title { font-size: 16px; margin: 0 0 12px; letter-spacing: -.01em; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.card-head .card-title { margin: 0; }
.muted-note { font-weight: 400; color: var(--muted); font-size: 12.5px; }

/* ---------- Dropzone ---------- */
.dropzone {
  border: 2px dashed #d7cfc1;
  border-radius: var(--radius);
  background: var(--surface-2);
  padding: 26px 16px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .05s;
  outline: none;
}
.dropzone:hover, .dropzone:focus-visible { border-color: var(--accent); background: #fff; }
.dropzone.dragover { border-color: var(--accent); background: var(--accent-bg); transform: scale(.997); }
.dropzone-icon { display: block; margin-bottom: 6px; }
.dropzone-text { margin: 0; font-size: 14.5px; }
.dropzone-hint { margin: 4px 0 0; font-size: 12px; color: var(--muted); }

.previews {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.previews:empty { margin-top: 0; }
.preview {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface-2);
}
.preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.preview-remove {
  position: absolute; top: 4px; right: 4px;
  width: 24px; height: 24px;
  border: none; border-radius: 50%;
  background: rgba(0,0,0,.6); color: #fff;
  line-height: 1; cursor: pointer;
  display: grid; place-items: center;
}
.preview-remove:hover { background: rgba(0,0,0,.8); }
.preview-rotate {
  position: absolute; bottom: 4px; right: 4px;
  width: 24px; height: 24px;
  border: none; border-radius: 50%;
  background: rgba(0,0,0,.6); color: #fff;
  line-height: 1; cursor: pointer;
  display: grid; place-items: center;
}
.preview-rotate:hover { background: var(--accent); }
.preview-rotate:disabled { opacity: .5; }
.preview-bg {
  position: absolute; bottom: 4px; left: 4px;
  min-width: 24px; height: 24px; padding: 0 5px;
  border: none; border-radius: 12px;
  background: var(--accent); color: #fff;
  line-height: 1; cursor: pointer;
  display: grid; place-items: center;
}
.preview-bg.off { background: rgba(0,0,0,.45); }
.preview-bg:hover { filter: brightness(1.1); }

/* ---------- Form ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-full { grid-column: 1 / -1; }
.field-label { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.req { color: var(--danger); }
.field-sub { font-size: 12px; color: var(--muted); }
.field-sub.center { text-align: center; }

input[type="text"], select, textarea {
  width: 100%;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none;
  appearance: none;
}
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238a8276' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
}
textarea { resize: vertical; min-height: 52px; line-height: 1.45; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(10,125,118,.15);
}

/* ---------- Toggle ---------- */
.toggle { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; }
.toggle input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; }

/* ---------- Buttons ---------- */
.btn {
  font: inherit;
  font-weight: 600;
  font-size: 14.5px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .05s, opacity .15s;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--accent-ink); }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn-secondary:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-ink); }
.btn-ghost { background: transparent; color: var(--ink-soft); border-color: var(--line); padding: 8px 12px; font-size: 13.5px; }
.btn-ghost:hover { background: var(--surface); color: var(--ink); }
.btn-large { width: 100%; padding: 14px; font-size: 16px; margin-top: 12px; }
.btn-icon {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  border-radius: 8px;
  padding: 7px 11px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: all .15s;
  flex: none;
}
.btn-icon:hover { border-color: var(--accent); color: var(--accent-ink); }
.btn-icon.copied { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ---------- Result fields ---------- */
.fields { display: flex; flex-direction: column; gap: 12px; }
.result-field {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  padding: 12px;
}
.result-field-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 7px;
}
.result-field-label { font-size: 12.5px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .03em; }
.result-field input, .result-field textarea { background: var(--surface); }
.result-field.price input { font-weight: 700; }

/* ---------- KI-Banner / Honesty / Status ---------- */
.ki-banner {
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  color: #7a5b13;
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 13px;
  margin-bottom: 12px;
}
.honesty-note {
  background: var(--accent-bg);
  border: 1px solid #cfe7e4;
  color: var(--accent-ink);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 13px;
  margin: 0 0 14px;
}
.status { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); }
.status.done { color: var(--ok); }

/* ---------- Loading / Error ---------- */
.loading-block {
  display: flex; align-items: center; gap: 12px;
  padding: 16px; font-size: 14px; color: var(--ink-soft);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.spinner {
  width: 18px; height: 18px; flex: none;
  border: 2.5px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.error-block {
  padding: 12px 14px; border-radius: var(--radius-sm);
  background: var(--danger-bg); border: 1px solid #f3c9c6; color: var(--danger);
  font-size: 13.5px;
}
.error-block button { margin-top: 8px; }

/* ---------- Copy/Download rows ---------- */
.copy-all-row {
  display: flex; align-items: center; gap: 12px;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line);
  flex-wrap: wrap;
}

/* ---------- Image results ---------- */
.image-results { display: flex; flex-direction: column; gap: 18px; }
.image-pair-title { font-size: 13px; font-weight: 700; color: var(--ink-soft); margin: 0 0 8px; }
.image-pair {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.image-slot { display: flex; flex-direction: column; gap: 6px; }
.image-frame {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-2);
  aspect-ratio: 1;
}
.image-frame img { width: 100%; height: 100%; object-fit: contain; display: block; }
.image-frame.generated { border-color: #cfe7e4; }
.image-tag {
  position: absolute; left: 8px; top: 8px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(33,31,28,.72); color: #fff; text-transform: uppercase;
}
.image-tag.ai { background: rgba(179,38,30,.92); }
.image-tag.scene { background: rgba(10,125,118,.92); }
.image-hero .image-frame { aspect-ratio: 1 / 1; max-width: 360px; }
.image-caption { font-size: 12px; color: var(--muted); text-align: center; }
.image-actions { display: flex; justify-content: center; }
.image-onmodel { margin-top: 4px; }
.image-onmodel .image-frame { aspect-ratio: 3 / 4; max-width: 320px; }
.image-skeleton {
  aspect-ratio: 1; border-radius: var(--radius-sm);
  background: linear-gradient(100deg, var(--surface-2) 30%, #f0ebe2 50%, var(--surface-2) 70%);
  background-size: 200% 100%;
  animation: shimmer 1.3s linear infinite;
  border: 1px solid var(--line);
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------- Kosten & Tokens ---------- */
.cost-body { display: flex; flex-direction: column; gap: 2px; }
.cost-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 7px 0; font-size: 13.5px; border-bottom: 1px dashed var(--line);
}
.cost-row:last-child { border-bottom: none; }
.cost-row .cost-label { color: var(--ink-soft); }
.cost-row .cost-num { color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cost-row .cost-tok { color: var(--muted); font-size: 12px; margin-right: 10px; font-variant-numeric: tabular-nums; }
.cost-row.total { margin-top: 4px; padding-top: 10px; border-top: 2px solid var(--line); font-weight: 700; font-size: 15px; }
.cost-row.total .cost-num { color: var(--accent-ink); }
.cost-pending { color: var(--muted); font-size: 12.5px; font-style: italic; }

/* ---------- Steps / Footer ---------- */
.steps { margin: 0; padding-left: 20px; font-size: 14px; color: var(--ink-soft); }
.steps li { margin-bottom: 6px; }
.steps a { color: var(--accent-ink); }
.site-footer { padding: 24px 16px 40px; }
.site-footer p { font-size: 12px; color: var(--muted); text-align: center; margin: 0; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(10px);
  background: var(--ink); color: #fff;
  padding: 11px 18px; border-radius: 999px;
  font-size: 14px; font-weight: 600;
  box-shadow: var(--shadow-lg);
  opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 60;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Responsive ---------- */
@media (max-width: 560px) {
  .form-grid { grid-template-columns: 1fr; }
  .brand h1 { font-size: 17px; }
  .card { padding: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ===================================================================
   Icons (Inline-SVG)
=================================================================== */
.ico { width: 1.05em; height: 1.05em; flex: none; display: inline-block; vertical-align: -0.16em; }
.btn .ico, .btn-icon .ico, .btn-ghost .ico, .status .ico { vertical-align: middle; }
.brand-mark { color: var(--accent); }
.brand-mark .ico { width: 24px; height: 24px; }
.dropzone-icon { color: var(--muted); }
.dropzone-icon svg { width: 34px; height: 34px; }
.card-title { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.card-title .ico-title { color: var(--accent); width: 18px; height: 18px; }
.step-num {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px; border-radius: 7px;
  background: var(--accent-bg); color: var(--accent-ink);
  font-size: 12.5px; font-weight: 700; flex: none;
}
.btn-large .ico { width: 1.15em; height: 1.15em; }
#key-status-btn.key-ok { gap: 6px; }
.key-check { width: .95em; height: .95em; color: var(--ok); }

.preview-remove .ico, .preview-rotate .ico, .preview-bg .ico { width: 14px; height: 14px; }
.preview img { cursor: zoom-in; }

.ki-banner, .honesty-note { display: flex; align-items: flex-start; gap: 9px; }
.ki-banner .ico, .honesty-note .ico { width: 18px; height: 18px; margin-top: 1px; }

/* Zoom-Hinweis auf Ergebnisbildern */
.image-frame.zoomable { cursor: zoom-in; }
.image-frame.zoomable img { cursor: zoom-in; }
.zoom-hint {
  position: absolute; right: 8px; bottom: 8px;
  width: 30px; height: 30px; border-radius: 8px;
  background: rgba(33,31,28,.55); color: #fff;
  display: grid; place-items: center;
  opacity: 0; transition: opacity .15s; pointer-events: none;
}
.zoom-hint .ico { width: 16px; height: 16px; }
.image-frame.zoomable:hover .zoom-hint { opacity: 1; }

/* ===================================================================
   Lightbox (Bild-Modal)
=================================================================== */
body.no-scroll { overflow: hidden; }
.lightbox {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 24px;
  background: rgba(20,18,15,.82);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .2s;
}
.lightbox.show { opacity: 1; }
.lightbox[hidden] { display: none; }
.lightbox-figure {
  margin: 0; max-width: min(94vw, 920px);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.lightbox-figure img {
  max-width: 100%; max-height: 74vh; object-fit: contain;
  border-radius: 10px; box-shadow: 0 12px 44px rgba(0,0,0,.45); background: #fff;
}
.lightbox-caption { color: rgba(255,255,255,.85); font-size: 13.5px; text-align: center; max-width: 90vw; }
.lightbox-close {
  position: absolute; top: 16px; right: 16px;
  width: 42px; height: 42px; border-radius: 50%;
  border: none; background: rgba(255,255,255,.14); color: #fff;
  cursor: pointer; display: grid; place-items: center;
}
.lightbox-close:hover { background: rgba(255,255,255,.26); }
.lightbox-close .ico { width: 22px; height: 22px; }
.lightbox-download { background: rgba(255,255,255,.95); }

@media (max-width: 560px) {
  .lightbox { padding: 14px; }
  .lightbox-figure img { max-height: 68vh; }
}

/* ===================================================================
   Feinschliff: Touch-Ziele, Tastatur-Fokus, Safe-Areas
=================================================================== */
/* Klickbare Bilder per Tastatur fokussierbar (Ring am Container, da das Bild
   im overflow:hidden-Rahmen sonst abgeschnitten würde) */
.image-frame.zoomable:focus-within,
.preview:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.image-frame.zoomable img:focus-visible,
.preview img:focus-visible { outline: none; }
.image-frame.zoomable:focus-within .zoom-hint { opacity: 1; }

/* Touch-Geräte: Zoom-Hinweis sichtbar + größere Tipp-Flächen für die Overlay-Buttons */
@media (hover: none), (pointer: coarse) {
  .image-frame.zoomable .zoom-hint { opacity: 1; }
  .previews { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
  .preview-remove, .preview-rotate, .preview-bg { width: 30px; height: 30px; }
  /* unsichtbare, vergrößerte Trefferfläche (~46px) ohne das Badge optisch zu vergrößern */
  .preview-remove::before, .preview-rotate::before, .preview-bg::before {
    content: ''; position: absolute; inset: -8px;
  }
}

/* Safe-Areas (Notch / Home-Indikator) */
.site-header { padding-top: max(0px, env(safe-area-inset-top)); }
.lightbox {
  padding-top: max(24px, env(safe-area-inset-top));
  padding-right: max(24px, env(safe-area-inset-right));
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  padding-left: max(24px, env(safe-area-inset-left));
}
.lightbox-close {
  width: 44px; height: 44px;
  top: max(16px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
}

/* ===================================================================
   Modell-Auswahl
=================================================================== */
.model-btn {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 8px 12px; cursor: pointer; font: inherit; font-size: 14.5px; color: var(--ink);
  transition: border-color .15s;
}
.model-btn:hover { border-color: var(--accent); }
.model-btn-thumb {
  width: 34px; height: 44px; border-radius: 7px; flex: none;
  background: var(--surface-2) center/cover no-repeat; border: 1px solid var(--line);
}
.model-btn-thumb.empty { display: grid; place-items: center; }
.model-btn-label { flex: 1; text-align: left; }
.model-btn-chevron { color: var(--muted); }

.model-modal {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(20,18,15,.6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.model-modal[hidden] { display: none; }
.model-modal-panel {
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-lg);
  width: 100%; max-width: 760px; max-height: 86vh; display: flex; flex-direction: column;
  padding: 18px; padding-bottom: max(18px, env(safe-area-inset-bottom));
}
.model-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.model-modal-head h2 { font-size: 17px; margin: 0; }
.model-modal-close {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-soft); cursor: pointer; display: grid; place-items: center; flex: none;
}
.model-modal-close:hover { border-color: var(--accent); color: var(--accent-ink); }
.model-modal-note { font-size: 12.5px; color: var(--muted); margin: 8px 0 12px; }
.model-filters { display: flex; gap: 8px; margin-bottom: 14px; }
.chip {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft);
  border-radius: 999px; padding: 6px 14px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }

.model-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  align-content: start; gap: 14px; padding: 2px;
  flex: 1 1 auto; min-height: 0; overflow-y: auto; /* echt scrollbar im Modal */
}
/* Karte = DIV (kein Button) als simpler Block -> Kinder stapeln vorhersehbar. */
.model-card {
  display: block;
  border: 2px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2);
  cursor: pointer; overflow: hidden; text-align: left; padding: 0;
  transition: border-color .12s;
}
.model-card:hover { border-color: var(--accent); }
.model-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.model-card.selected { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(10,125,118,.15); }
/* Bild mit FESTER Höhe -> kann nicht gequetscht/querformatig werden. */
.model-card-thumb { width: 100%; height: 230px; object-fit: cover; object-position: 50% 8%; display: block; background: var(--surface-2); }
.model-card-auto {
  width: 100%; height: 230px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; color: var(--muted); background: var(--surface); font-size: 12px;
}
.model-card-auto .ico { width: 26px; height: 26px; }
.model-card-body { display: block; padding: 9px 11px; }
.model-card-name { font-size: 13.5px; font-weight: 700; }
.model-card-attrs { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.4; margin-top: 3px; }

/* Konfektionsgröße auf den Modell-Karten */
.model-card-name { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.model-size {
  font-size: 11px; font-weight: 700; color: var(--accent-ink);
  background: var(--accent-bg); border-radius: 6px; padding: 1px 6px; line-height: 1.4;
}

/* ===================================================================
   Verlauf (erstellte Inserate)
=================================================================== */
.history-actions { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.history-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  align-items: start; grid-auto-rows: max-content; gap: 14px;
  max-height: 65vh; overflow-y: auto; padding: 2px;
}
.history-empty { color: var(--muted); font-size: 13.5px; text-align: center; padding: 30px 10px; grid-column: 1 / -1; }

/* ===================================================================
   Elegante Lade-Optik (Skeletons + animierter Status)
=================================================================== */
/* Animierter Status-„Pill" im Karten-Header */
.status.loading { color: var(--accent-ink); display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.status .dots { display: inline-flex; gap: 3px; }
.status .dots i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .3; animation: dotpulse 1.1s infinite ease-in-out; }
.status .dots i:nth-child(2) { animation-delay: .15s; }
.status .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dotpulse { 0%, 75%, 100% { opacity: .25; transform: translateY(0); } 38% { opacity: 1; transform: translateY(-3px); } }

/* Skeleton-Felder (Text) */
.skeleton-field { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); padding: 12px; }
.sk-line { border-radius: 6px; background: linear-gradient(100deg, #f0ebe2 30%, #faf7f1 50%, #f0ebe2 70%); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; }
.sk-label { width: 38%; height: 10px; margin-bottom: 10px; }
.sk-input { width: 100%; height: 20px; }
.skeleton-field.tall .sk-input { height: 64px; }

/* Sanftes Einblenden der fertigen Inhalte */
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.fields > .result-field, .image-results > * { animation: fadeUp .32s ease both; }

/* ===================================================================
   EDITORIAL REDESIGN v26 — Editorial-Look (Mint/Salbei/Beige)
   Carousel + Vorher/Nachher-Slider · Thumbnails · Inserat-Optik
=================================================================== */

/* ---- Top-Leiste ---- */
.brand-mark { color: var(--accent); background: linear-gradient(150deg, #ffffff, #eef6ef); border-color: var(--accent-line); }
.brand h1 { font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.tagline { font-size: 12px; }
.header-actions .btn-ghost {
  border-radius: 999px; border-color: var(--line); background: rgba(255,255,255,.6);
  padding: 8px 13px; color: var(--ink-soft); font-weight: 600;
}
.header-actions .btn-ghost:hover { background: #fff; border-color: var(--accent-line); color: var(--accent-ink); }
#key-status-btn.key-ok { color: var(--ok); border-color: var(--accent-line); background: var(--accent-bg); }
#reset-btn { background: var(--accent); color: #fff; border-color: var(--accent); }
#reset-btn:hover { background: var(--accent-ink); color: #fff; }

/* ---- Disclaimer ---- */
.disclaimer { background: var(--accent-bg); border-color: var(--accent-line); color: var(--accent-ink); border-radius: var(--radius-sm); }

/* ---- Karten ---- */
.card, .stage-card, .listing-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; margin: 16px 0; box-shadow: var(--shadow);
}

/* ---- Eyebrow + Stage-Head ---- */
.eyebrow {
  display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent-ink);
}
.stage-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }

/* ---- Step-Eyebrows in der Eingabe ---- */
.card-title { font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.step-num { background: var(--accent); color: #fff; border-radius: 8px; width: 23px; height: 23px; }

/* ---- Upload ---- */
.dropzone {
  border: 2px dashed var(--accent-line); border-radius: var(--radius);
  background: linear-gradient(180deg, #fbfdfb, var(--surface-2));
  padding: 30px 16px;
}
.dropzone:hover, .dropzone:focus-visible { border-color: var(--accent); background: #fff; }
.dropzone.dragover { border-color: var(--accent); background: var(--accent-bg); }
.dropzone-icon { color: var(--accent); }
.dropzone-text strong { color: var(--ink); }
.preview { border-radius: var(--radius-sm); border-color: var(--line); }

/* ---- Formularfelder ---- */
.field-label { font-size: 12.5px; font-weight: 700; color: var(--ink-soft); }
input[type="text"], select, textarea {
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  font-size: 15px; padding: 11px 13px;
}
input[type="text"]:hover, select:hover, textarea:hover { border-color: var(--accent-line); }
input:focus, select:focus, textarea:focus {
  background: #fff; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(31,125,92,.14);
}
.toggle input { accent-color: var(--accent); }
.model-btn { border-radius: var(--radius-sm); background: var(--surface-2); border-color: var(--line); }
.model-btn:hover { border-color: var(--accent); }

/* =========================================================
   BILD-BÜHNE (Carousel)
========================================================= */
.stage {
  position: relative; width: 100%; max-width: 460px; margin: 0 auto;
  aspect-ratio: 1 / 1; border-radius: var(--radius-sm); overflow: hidden;
  background: #f5f3ec; box-shadow: inset 0 0 0 1px var(--line);
  touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.stage-track { display: flex; height: 100%; transition: transform .42s cubic-bezier(.4,0,.2,1); will-change: transform; }
.stage-slide { flex: 0 0 100%; height: 100%; position: relative; overflow: hidden; }
/* contain = ganzes Teil sichtbar (kein Beschnitt/Zoom), wie im Originalfoto */
.stage-slide > img { width: 100%; height: 100%; object-fit: contain; display: block; }
.stage-slide.is-skeleton { background: var(--sand); }

/* Slide-Skelett */
.slide-sk {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, #e7e1d2 30%, #f3eee2 50%, #e7e1d2 70%);
  background-size: 200% 100%; animation: shimmer 1.3s linear infinite;
  display: grid; place-items: center;
}
.slide-sk span { font-size: 12px; font-weight: 600; color: var(--muted); background: rgba(255,255,255,.7); padding: 5px 12px; border-radius: 999px; }

/* Navigation */
.stage-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.9); color: var(--ink);
  display: grid; place-items: center; box-shadow: var(--shadow);
  transition: background .15s, opacity .2s, transform .15s;
}
.stage-nav svg { width: 22px; height: 22px; }
.stage-nav.prev { left: 10px; } .stage-nav.next { right: 10px; }
.stage-nav:hover { background: #fff; }
.stage-nav:active { transform: translateY(-50%) scale(.92); }
.stage-nav[disabled] { opacity: 0; pointer-events: none; }
.stage-counter {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); z-index: 4;
  background: rgba(20,28,22,.62); color: #fff; font-size: 11.5px; font-weight: 700;
  padding: 3px 11px; border-radius: 999px; letter-spacing: .02em;
}

/* Slide-Tag (Bildtyp) */
.slide-tag {
  position: absolute; left: 10px; top: 10px; z-index: 3;
  font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px; background: rgba(20,28,22,.7); color: #fff;
}
.slide-tag.ai { background: rgba(179,38,30,.92); }
.slide-tag.scene { background: var(--accent); }
/* Werkzeugleiste pro Bild (Download + Vergrößern) – immer sichtbar */
.slide-tools { position: absolute; right: 10px; top: 10px; z-index: 6; display: flex; gap: 6px; }
.slide-tools button {
  position: static; width: 34px; height: 34px; border-radius: 10px; border: none; cursor: pointer;
  background: rgba(20,28,22,.58); color: #fff; display: grid; place-items: center; padding: 0;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); transition: background .15s, transform .1s;
}
.slide-tools button:hover { background: var(--accent); }
.slide-tools button:active { transform: scale(.92); }
.slide-tools button svg { width: 18px; height: 18px; }

/* Vorher/Nachher-Slider */
.compare { position: absolute; inset: 0; --pos: 50%; cursor: ew-resize; touch-action: none; }
.compare-after, .compare-before { position: absolute; inset: 0; }
.compare-after img, .compare-before img { width: 100%; height: 100%; object-fit: contain; display: block; }
.compare-before { z-index: 2; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.compare-after { z-index: 1; }
.compare-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 5; width: 0; }
.compare-handle::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: -1.5px; width: 3px;
  background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.12), 0 0 8px rgba(0,0,0,.2);
}
.compare-grip {
  position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%);
  width: 40px; height: 40px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-lg);
  display: grid; place-items: center; color: var(--accent); cursor: ew-resize;
}
.compare-grip svg { width: 22px; height: 22px; }
.compare-cap {
  position: absolute; bottom: 10px; z-index: 4; font-size: 10px; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; color: #fff;
}
.compare-cap.before { left: 10px; background: rgba(20,28,22,.66); }
.compare-cap.after  { right: 10px; background: var(--accent); }
.compare-pending {
  position: absolute; inset: 0; z-index: 6; display: grid; place-items: center;
  background: rgba(236,230,215,.55); -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px);
}
.compare-pending span { font-size: 12px; font-weight: 600; color: var(--accent-ink); background: rgba(255,255,255,.85); padding: 6px 13px; border-radius: 999px; display: inline-flex; align-items: center; gap: 7px; }

/* ---- Thumbnail-Leiste ---- */
.thumb-strip {
  display: flex; gap: 10px; overflow-x: auto; padding: 14px 2px 4px;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.thumb-strip::-webkit-scrollbar { height: 6px; }
.thumb-strip::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; }
.thumb {
  flex: 0 0 auto; width: 66px; height: 66px; border-radius: 13px; overflow: hidden;
  border: 2px solid transparent; background: var(--sand); cursor: pointer; position: relative;
  scroll-snap-align: start; transition: border-color .15s, box-shadow .15s, transform .1s; padding: 0;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb:hover { transform: translateY(-1px); }
.thumb.active { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.thumb.pending { cursor: default; }
.thumb .thumb-sk {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, #e7e1d2 30%, #f3eee2 50%, #e7e1d2 70%);
  background-size: 200% 100%; animation: shimmer 1.3s linear infinite;
}
.thumb-dot { position: absolute; right: 3px; bottom: 3px; width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 0 1.5px #fff; }
.thumb-dot.ai { background: var(--danger); }
.thumb-dot.scene { background: var(--accent); }

.stage-actions { display: flex; justify-content: center; margin-top: 14px; }

/* =========================================================
   INSERAT-TEXT (Inserat-Optik · Tippen kopiert)
========================================================= */
.listing { display: flex; flex-direction: column; gap: 14px; }
.listing-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.listing-price {
  font-family: var(--serif); font-size: 26px; font-weight: 800; color: var(--accent-ink);
  letter-spacing: -.01em;
}
.listing-title {
  font-family: var(--serif); font-size: 23px; line-height: 1.22; margin: 0; color: var(--ink);
  letter-spacing: -.01em;
}
.listing-desc { font-size: 15px; line-height: 1.6; color: var(--ink-soft); white-space: pre-wrap; margin: 0; }
.listing-attrs { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.copyable {
  position: relative; cursor: pointer; border-radius: var(--radius-xs);
  transition: background .15s, box-shadow .15s; -webkit-tap-highlight-color: transparent;
}
.copyable:hover { background: var(--accent-bg); box-shadow: 0 0 0 6px var(--accent-bg); }
.attr {
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  border: 1px solid var(--line); border-radius: var(--radius-xs); padding: 10px 13px;
  background: var(--surface-2); cursor: pointer; font: inherit; transition: border-color .15s, background .15s;
}
.attr:hover { border-color: var(--accent-line); background: var(--accent-bg); }
.attr-k { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 800; }
.attr-v { font-size: 15px; font-weight: 600; color: var(--ink); word-break: break-word; }
.attr.wide { grid-column: 1 / -1; }
/* „Tippen zum Kopieren"-Hinweis + Erfolg */
.copy-hint { position: absolute; top: 8px; right: 10px; font-size: 10.5px; font-weight: 700; color: var(--muted); opacity: 0; transition: opacity .15s; pointer-events: none; }
.copyable:hover .copy-hint, .attr:hover .copy-hint { opacity: .8; }
.just-copied { animation: copyflash .8s ease; }
.just-copied .copy-hint { opacity: 1; color: var(--accent-ink); }
@keyframes copyflash { 0% { background: var(--accent-bg); } 100% { background: transparent; } }
.attr.just-copied { animation: copyflashCard .8s ease; }
@keyframes copyflashCard { 0% { border-color: var(--accent); background: var(--accent-bg); } 100% { } }

.honesty-note { background: var(--accent-bg); border-color: var(--accent-line); color: var(--accent-ink); border-radius: var(--radius-sm); margin: 16px 0 0; }
.copy-all-row { border-top-color: var(--line); }

/* ---- Responsive Feinschliff ---- */
@media (max-width: 560px) {
  .listing-attrs { grid-template-columns: 1fr 1fr; }
  .stage-nav { width: 36px; height: 36px; }
  .thumb { width: 58px; height: 58px; }
  .listing-title { font-size: 20px; }
  .listing-price { font-size: 23px; }
}

/* „Automatisch"-Thumb in den Auswahl-Buttons (Modell + Background) */
.model-btn-thumb.auto { color: var(--accent); background: var(--accent-bg); border-color: var(--accent-line); }
.model-btn-thumb.auto .ico { width: 20px; height: 20px; }
.model-card-auto .ico { width: 24px; height: 24px; }

/* ===================================================================
   v31 — LANDING-COHESION: Cal Sans + Inter, App-Hero, Premium-Sektionen
   (auf die Landingpage abgestimmt)
=================================================================== */
@font-face{font-family:"Cal Sans";src:url("/fonts/CalSans-Official.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"InterVar";src:url("/fonts/Inter-Variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --font:"InterVar","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --serif:"Cal Sans","Avenir Next",system-ui,sans-serif;
  --radius:22px; --radius-sm:14px; --radius-xs:11px;
  --shadow:0 1px 2px rgba(28,40,32,.04), 0 10px 30px rgba(28,40,32,.07);
  --shadow-lg:0 24px 70px rgba(24,46,34,.18);
  --shadow-accent:0 10px 22px color-mix(in srgb, var(--accent) 28%, transparent);
  --ease:cubic-bezier(.22,1,.36,1);
}

/* Headings -> Cal Sans */
.brand h1,.card-title,.listing-title,.listing-price,.image-pair-title,.model-modal-head h2,.app-hero-title,.history-title{font-family:var(--serif);font-weight:700;letter-spacing:-.02em}
.card-title{font-size:18px}

/* Header / Brand (wie Landing-Nav) */
.site-header{background:color-mix(in srgb,var(--bg) 80%,transparent)}
.brand-mark{width:42px;height:42px;border:none;border-radius:13px;background:linear-gradient(155deg,var(--accent),var(--accent-2));color:#fff;box-shadow:var(--shadow-accent)}
.brand-mark .ico{width:21px;height:21px}
.tagline{color:var(--muted);font-weight:500}

/* Eyebrow */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink)}
.eb-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-bg)}

/* App-Hero-Band (Sektion mit Hintergrundbild – wie Landing) */
.app-hero{position:relative;overflow:hidden;padding:38px 0 32px}
.app-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:#e9efe6 center/cover no-repeat;background-image:url('/landing/hero-bg.jpg')}
.app-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,var(--bg) 22%,color-mix(in srgb,var(--bg) 50%,transparent) 62%,transparent 94%),linear-gradient(0deg,var(--bg),transparent 55%)}
.app-hero-title{font-size:clamp(27px,4.6vw,40px);line-height:1.04;margin:11px 0 0;color:var(--ink)}
.app-hero-sub{color:var(--ink-soft);font-size:16.5px;line-height:1.5;margin:11px 0 0;max-width:48ch}

/* Cards premium */
.card,.stage-card,.listing-card{border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}
.card{transition:box-shadow .35s,border-color .25s}

/* Step-Badge -> Mint-Verlauf */
.step-num{display:inline-grid;place-items:center;background:linear-gradient(150deg,var(--accent),var(--accent-2));color:#fff;border-radius:9px;width:27px;height:27px;font-weight:800;font-size:14px;box-shadow:var(--shadow-accent);font-family:var(--serif)}

/* Dropzone einladender */
.dropzone{border:1.5px dashed var(--accent-line);border-radius:var(--radius);background:linear-gradient(180deg,#fbfefc,var(--accent-bg))}
.dropzone:hover,.dropzone:focus-visible{border-color:var(--accent);background:#fff}
.dropzone.dragover{border-color:var(--accent);background:var(--accent-bg)}
.dropzone-icon{color:var(--accent)}

/* Buttons (Landing-Stil) */
.btn{border-radius:13px;font-weight:700;transition:transform .2s var(--ease),box-shadow .25s,background .2s,border-color .2s,color .2s}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover:not(:disabled){background:var(--accent);box-shadow:0 14px 32px color-mix(in srgb,var(--accent) 34%,transparent)}
.btn-large{border-radius:14px;padding:15px;font-weight:800}
.header-actions .btn-ghost{border-radius:999px}

/* Inputs */
input[type="text"],select,textarea{border-radius:var(--radius-sm)}
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 3px var(--accent-bg)}

/* Disclaimer dezenter (Landing-Note-Stil) */
.disclaimer{background:var(--surface);border:1px solid var(--accent-line);border-left:3px solid var(--accent);border-radius:14px;color:var(--ink-soft);box-shadow:var(--shadow);padding:13px 16px;font-size:13.5px}
.disclaimer strong{color:var(--accent-ink)}

/* Fokus-Ringe */
:where(.btn,.dropzone,.thumb,.model-btn,.stage-nav):focus-visible{outline:2px solid var(--accent);outline-offset:2px}

@media (max-width:560px){
  .app-hero{padding:26px 0 22px}
  .card,.stage-card,.listing-card{padding:18px}
}

/* =====================================================================
   WIZARD — "Atelier Steps"  (append to styles.css; uses existing v31 tokens)
   Tokens consumed: --bg --surface --surface-2 --sand --ink --ink-soft
   --muted --line --accent --accent-2 --accent-ink --accent-bg --accent-line
   --radius --radius-sm --shadow --shadow-lg --shadow-accent --ease --serif --font
===================================================================== */

/* ---- Outer frame: a centered catalog panel floating on hero texture ---- */
.wiz{
  position:relative;
  max-width:720px;
  margin:22px auto 8px;
  padding:6px 0 0;
  isolation:isolate;
}
.wiz::before{                      /* airy sage texture band behind the panel */
  content:""; position:absolute; z-index:-2;
  inset:-26px -22px; border-radius:30px;
  background:#e9efe6 center/cover no-repeat;
  background-image:url('/landing/hero-bg.jpg');
  opacity:.55;
}
.wiz::after{                       /* veil so the panel reads clean (landing recipe) */
  content:""; position:absolute; z-index:-1;
  inset:-26px -22px; border-radius:30px;
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--bg) 72%,transparent),transparent 22%,transparent 78%,color-mix(in srgb,var(--bg) 88%,transparent)),
    radial-gradient(120% 80% at 50% -10%, color-mix(in srgb,var(--accent-bg) 55%,transparent), transparent 60%);
}

/* ====================== STEP-RAIL / PROGRESS ====================== */
.wiz-rail{ margin:0 4px 16px; }
.wiz-rail__counter{
  margin:0 2px 12px; text-align:right;
  font-size:11.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); font-variant-numeric:tabular-nums;
}
.wiz-rail__track{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr);
  position:relative;
}
/* connector track + mint progress fill */
.wiz-rail__line{
  position:absolute; left:16.66%; right:16.66%; top:19px;   /* spans node centers */
  height:3px; border-radius:999px; background:var(--line);
  overflow:hidden;
}
.wiz-rail__fill{
  display:block; height:100%; width:100%;
  background:linear-gradient(150deg,var(--accent),var(--accent-2));
  transform:scaleX(var(--p,0)); transform-origin:left;
  transition:transform .55s var(--ease);
}
/* nodes */
.wiz-node{ display:flex; flex-direction:column; align-items:center; gap:9px; position:relative; z-index:1; }
.wiz-node__btn{
  appearance:none; -webkit-appearance:none; cursor:default;
  width:40px; height:40px; padding:0; border-radius:50%;
  display:grid; place-items:center; position:relative;
  background:var(--surface); border:1.5px solid var(--line); color:var(--muted);
  box-shadow:var(--shadow); font:inherit;
  transition:transform .22s var(--ease), background .3s, border-color .3s, color .3s, box-shadow .3s;
}
.wiz-node__num{ font-family:var(--serif); font-weight:700; font-size:15px; line-height:1; grid-area:1/1; transition:opacity .25s; }
.wiz-node__check{ grid-area:1/1; width:18px; height:18px; opacity:0; color:var(--accent-ink);
  stroke-dasharray:26; stroke-dashoffset:26; transition:stroke-dashoffset .34s var(--ease) .05s, opacity .2s; }

/* CURRENT */
.wiz-node.is-current .wiz-node__btn{
  background:linear-gradient(150deg,var(--accent),var(--accent-2));
  border-color:transparent; color:#fff; box-shadow:var(--shadow-accent);
  animation:wizPulse 2.6s var(--ease) infinite;
}
.wiz-node.is-current .wiz-node__num{ color:#fff; }

/* DONE (completed + clickable) */
.wiz-node.is-done .wiz-node__btn{
  background:var(--accent-bg); border-color:var(--accent-line); color:var(--accent-ink);
  cursor:pointer; animation:none;
}
.wiz-node.is-done .wiz-node__num{ opacity:0; }
.wiz-node.is-done .wiz-node__check{ opacity:1; stroke-dashoffset:0; }
.wiz-node.is-done .wiz-node__btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-accent); border-color:var(--accent); }

/* pop when a node activates/completes */
.wiz-node__btn.pop{ animation:wizPop .24s var(--ease); }
.wiz-node.is-current .wiz-node__btn.pop{ animation:wizPop .24s var(--ease), wizPulse 2.6s var(--ease) .24s infinite; }

/* labels */
.wiz-node__label{
  font-size:11.5px; font-weight:700; letter-spacing:.04em; color:var(--muted);
  transition:color .3s; text-align:center;
}
.wiz-node.is-current .wiz-node__label{ color:var(--accent-ink); }
.wiz-node.is-done .wiz-node__label{ color:var(--ink-soft); }

/* ====================== PANEL ====================== */
.wiz-panel{
  position:relative;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
}
.wiz-panel::before{                /* top sheen + faint mint corner glow */
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; z-index:0;
  background:
    linear-gradient(180deg,rgba(255,255,255,.6),transparent 14%),
    radial-gradient(120% 60% at 100% 0%, color-mix(in srgb,var(--accent-bg) 40%,transparent), transparent 55%);
}

/* height-morph viewport */
.wiz-viewport{ position:relative; z-index:1; transition:height .36s var(--ease); }
.wiz-viewport.is-morphing{ overflow:hidden; }

/* steps + per-step whispered texture behind the heading */
.wiz-step{ position:relative; }
.wiz-step[hidden]{ display:none !important; }
.wiz-step::before{
  content:""; position:absolute; inset:0 0 auto; height:230px; z-index:0; pointer-events:none;
  background:center top/cover no-repeat; opacity:.10;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent);
          mask-image:linear-gradient(180deg,#000,transparent);
}
#wiz-step-1::before{ background-image:url('/landing/hero-bg.jpg'); }
#wiz-step-2::before{ background-image:url('/landing/sec-cream.jpg'); }
#wiz-step-3::before{ background-image:url('/landing/cta-bg.jpg'); opacity:.13; }

.wiz-step__body{ position:relative; z-index:1; padding:26px 26px 22px; }

.wiz-step__head{ margin-bottom:18px; }
.wiz-step__head .eyebrow{ margin-bottom:10px; }
.wiz-step__title{
  font-family:var(--serif); font-weight:700; letter-spacing:-.02em;
  font-size:clamp(24px,3.6vw,32px); line-height:1.05; margin:0; color:var(--ink);
  display:flex; align-items:center; gap:13px;
}
.wiz-h-badge{
  flex:none; display:inline-grid; place-items:center;
  width:40px; height:40px; border-radius:13px;
  background:linear-gradient(150deg,var(--accent),var(--accent-2));
  color:#fff; font-size:19px; font-weight:800; box-shadow:var(--shadow-accent);
}
.wiz-step__sub{ margin:10px 0 0; color:var(--ink-soft); font-size:15.5px; line-height:1.5; max-width:52ch; }

/* Reused card-internals sit flush: strip nested card chrome if a .card slips in. */
.wiz-step__content > .card,
.wiz-step__content.is-card{ background:transparent; border:0; box-shadow:none; padding:0; margin:0; }
.wiz-step__content > .card > .card-title{ display:none; }  /* heading lives in .wiz-step__head */
.wiz-step__content .previews{ margin-top:16px; }

/* enter animation (applied to the body of the incoming step) */
.wiz-step.enter-fwd  .wiz-step__body{ animation:wizEnterFwd .42s var(--ease) both; }
.wiz-step.enter-back .wiz-step__body{ animation:wizEnterBack .42s var(--ease) both; }

/* ====================== NAV BAR ====================== */
.wiz-nav{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:12px;
  padding:16px 22px 18px;
  border-top:1px solid var(--line);
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--surface-2) 55%,transparent));
}
.wiz-nav__hint{
  flex:1; min-width:0; text-align:center;
  font-size:12.5px; color:var(--muted); line-height:1.35;
}
.wiz-nav__hint.nudge{ animation:wizNudge .4s var(--ease); color:var(--accent-ink); }
.wiz-back{ flex:none; }
.wiz-next{ flex:none; }
.wiz-next .ico:last-child{ transition:transform .2s var(--ease); }
.wiz-next:hover:not(:disabled) .ico:last-child{ transform:translateX(3px); }

/* On step 3, hide the wizard "Weiter"; the existing #generate-btn (in step body) is the action. */
.wiz[data-step="3"] .wiz-next{ display:none; }
.wiz[data-step="3"] .wiz-nav{ justify-content:flex-start; }

/* ====================== KEYFRAMES ====================== */
@keyframes wizEnterFwd{ from{ opacity:0; transform:translateX(28px); } to{ opacity:1; transform:none; } }
@keyframes wizEnterBack{ from{ opacity:0; transform:translateX(-28px); } to{ opacity:1; transform:none; } }
@keyframes wizPop{ 0%{transform:scale(1)} 45%{transform:scale(1.09)} 100%{transform:scale(1)} }
@keyframes wizPulse{
  0%,100%{ box-shadow:var(--shadow-accent), 0 0 0 0 color-mix(in srgb,var(--accent-bg) 0%,transparent); }
  50%{ box-shadow:var(--shadow-accent), 0 0 0 7px color-mix(in srgb,var(--accent-bg) 70%,transparent); }
}
@keyframes wizNudge{ 0%,100%{transform:none} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }

/* ====================== RESPONSIVE (down to 360px) ====================== */
@media (max-width:560px){
  .wiz{ margin:14px auto 4px; }
  .wiz::before,.wiz::after{ inset:-14px -10px; border-radius:24px; }
  .wiz-step__body{ padding:20px 16px 18px; }
  .wiz-step__title{ font-size:clamp(22px,7vw,28px); gap:10px; }
  .wiz-h-badge{ width:34px; height:34px; font-size:16px; border-radius:11px; }
  .wiz-nav{ padding:14px 16px 16px; flex-wrap:wrap; }
  .wiz-nav__hint{ order:3; flex-basis:100%; text-align:center; }
  .wiz-back{ order:1; } .wiz-next{ order:2; margin-left:auto; }
  .wiz-node__btn{ width:36px; height:36px; }
  .wiz-rail__line{ top:17px; }
  .wiz-node__label{ font-size:10.5px; }
  .wiz-rail__counter{ text-align:center; }
}
@media (max-width:380px){
  .wiz-node__label{ letter-spacing:0; }
  .wiz-step__sub{ font-size:14.5px; }
}

/* ====================== REDUCED MOTION (explicit, beyond global rule) === */
@media (prefers-reduced-motion: reduce){
  .wiz-viewport{ height:auto !important; overflow:visible !important; transition:none; }
  .wiz-viewport.is-morphing{ overflow:visible; }
  .wiz-node.is-current .wiz-node__btn,
  .wiz-node.is-current .wiz-node__btn.pop{ animation:none; }
  .wiz-step.enter-fwd  .wiz-step__body,
  .wiz-step.enter-back .wiz-step__body{ animation:none; }
  .wiz-rail__fill{ transition:none; }
  .wiz-nav__hint.nudge{ animation:none; }
}
/* ===================================================================
   v33 — App-Feinschliff: schlanke Hinweise + Panel hebt sich ab
=================================================================== */
/* Hinweis als schlanke Trust-Linie (keine Box) */
.disclaimer{ background:transparent !important; border:0 !important; box-shadow:none !important;
  padding:0 2px !important; margin:14px 2px 4px !important;
  display:flex; gap:9px; align-items:flex-start; font-size:13px; color:var(--ink-soft); line-height:1.5; }
.disclaimer .ico{ flex:none; width:17px; height:17px; color:var(--accent); margin-top:1px; }
.disclaimer strong{ color:var(--ink); font-weight:700; }

/* Restore als premium Mint-Banner */
.restore-row{ background:linear-gradient(180deg,var(--surface),color-mix(in srgb,var(--accent-bg) 55%,var(--surface))) !important;
  border:1px solid var(--accent-line) !important; border-radius:16px !important; box-shadow:var(--shadow) !important;
  padding:11px 12px 11px 16px !important; margin:12px 0 0 !important; }
.restore-row > span{ font-weight:600; color:var(--accent-ink); }
.restore-row .btn{ border-radius:999px !important; background:var(--accent) !important; color:#fff !important; border-color:var(--accent) !important; font-weight:700; }
.restore-row .btn:hover{ box-shadow:var(--shadow-accent) !important; }

/* Wizard: Hintergrund sichtbarer, Panel hebt sich klar ab (Glas-Touch) */
.wiz::before{ opacity:.92; inset:-30px -26px; }
.wiz::after{ inset:-30px -26px; background:
  radial-gradient(135% 95% at 50% -10%, color-mix(in srgb,var(--accent-bg) 52%,transparent), transparent 55%),
  radial-gradient(120% 80% at 50% 116%, color-mix(in srgb,var(--sand) 60%,transparent), transparent 58%),
  linear-gradient(180deg, color-mix(in srgb,var(--bg) 40%,transparent), transparent 18%, transparent 82%, color-mix(in srgb,var(--bg) 60%,transparent)); }
.wiz-panel{
  background:color-mix(in srgb, var(--surface) 90%, transparent);
  -webkit-backdrop-filter:saturate(140%) blur(10px); backdrop-filter:saturate(140%) blur(10px);
  border-color:color-mix(in srgb, var(--accent-line) 50%, var(--line));
  box-shadow:0 2px 8px rgba(24,46,34,.07), 0 34px 80px rgba(24,46,34,.22);
}

/* ---- Ergebnis-Ansicht: Erfolgs-Header + Premium-Cards + Preis-Hinweis ---- */
.result-hero{ position:relative; overflow:hidden; border-radius:var(--radius); padding:26px 24px; margin:6px 0 18px;
  border:1px solid var(--accent-line); box-shadow:var(--shadow); }
.result-hero::before{ content:""; position:absolute; inset:0; z-index:-2; background:#e9efe6 center/cover no-repeat; background-image:url('/landing/hero-bg.jpg'); opacity:.6; }
.result-hero::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg, color-mix(in srgb,var(--surface) 86%,transparent), color-mix(in srgb,var(--surface) 55%,transparent) 70%, transparent),
             radial-gradient(120% 80% at 100% 0%, color-mix(in srgb,var(--accent-bg) 50%,transparent), transparent 55%); }
.result-hero-title{ font-family:var(--serif); font-weight:700; letter-spacing:-.02em; font-size:clamp(24px,3.6vw,32px); line-height:1.05; margin:10px 0 0; display:flex; align-items:center; gap:12px; color:var(--ink); }
.result-hero-badge{ flex:none; display:inline-grid; place-items:center; width:40px; height:40px; border-radius:13px; background:linear-gradient(150deg,var(--accent),var(--accent-2)); color:#fff; box-shadow:var(--shadow-accent); }
.result-hero-badge svg{ width:21px; height:21px; }
.result-hero-sub{ color:var(--ink-soft); font-size:15.5px; line-height:1.5; margin:9px 0 0; max-width:54ch; }

.stage-card, .listing-card{ box-shadow:var(--shadow-lg) !important; border-color:color-mix(in srgb,var(--accent-line) 45%,var(--line)) !important; }

.price-note{ flex-basis:100%; display:inline-flex; align-items:center; gap:6px; margin-top:5px;
  font-size:12px; font-weight:600; color:var(--accent-ink); }
.price-note svg{ width:13px; height:13px; flex:none; color:var(--accent); }

/* ---- App-Footer: Trust-Linie + Rechtslinks ---- */
.site-footer{ display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:14px 24px; padding:26px 16px 40px; margin-top:26px; border-top:1px solid var(--line); }
.foot-trust{ display:flex; gap:9px; align-items:flex-start; margin:0; font-size:13px; color:var(--ink-soft); line-height:1.55; max-width:58ch; }
.foot-trust .ico{ flex:none; width:16px; height:16px; color:var(--accent); margin-top:2px; }
.foot-trust strong{ color:var(--ink); font-weight:700; }
.foot-links{ display:flex; flex-wrap:wrap; gap:6px 18px; }
.foot-links a{ font-size:13px; font-weight:600; color:var(--ink-soft); text-decoration:none; }
.foot-links a:hover{ color:var(--accent-ink); }

/* ---- Restore: nur Button, keine Box ---- */
.restore-wrap{ margin:14px 0 0; }
.restore-btn{ border-radius:999px !important; background:var(--surface) !important; color:var(--accent-ink) !important; border:1px solid var(--accent-line) !important; font-weight:700 !important; box-shadow:var(--shadow); padding:9px 16px !important; }
.restore-btn:hover{ border-color:var(--accent) !important; box-shadow:var(--shadow-accent) !important; }

/* ===================================================================
   v36 — Animierter Mesh-Gradient hinter dem Wizard-Glas + Restore rechts
=================================================================== */
/* Restore: rechtsbündig, klar über dem Wizard (keine Überlappung) */
.restore-wrap{ display:flex; justify-content:flex-end; margin:2px 0 18px; position:relative; z-index:5; }

/* Lebendiger Mesh-Hintergrund (driftet) – kein Top-Bleed mehr, daher keine Überlappung */
.wiz::before{
  inset:0 -26px -34px -26px !important; border-radius:30px;
  background:
    radial-gradient(42% 55% at 18% 22%, color-mix(in srgb,var(--accent-2) 42%, transparent) 0%, transparent 60%),
    radial-gradient(46% 58% at 82% 26%, #c8ebd5 0%, transparent 62%),
    radial-gradient(50% 56% at 72% 90%, color-mix(in srgb,var(--accent-line) 78%, transparent) 0%, transparent 60%),
    radial-gradient(46% 52% at 20% 84%, color-mix(in srgb,var(--surface-2) 88%, var(--sand)) 0%, transparent 58%),
    var(--bg) !important;
  background-size:170% 170% !important; background-repeat:no-repeat !important;
  opacity:1 !important; filter:saturate(110%);
  animation:wizMesh 26s ease-in-out infinite;
}
.wiz::after{
  inset:0 -26px -34px -26px !important;
  background:linear-gradient(180deg, color-mix(in srgb,var(--bg) 58%,transparent), transparent 15%, transparent 85%, color-mix(in srgb,var(--bg) 66%,transparent)) !important;
}
@keyframes wizMesh{
  0%,100%{ background-position:0% 0%, 100% 0%, 100% 100%, 0% 100%, 0 0; }
  33%    { background-position:32% 26%, 68% 16%, 58% 74%, 24% 62%, 0 0; }
  66%    { background-position:10% 42%, 90% 40%, 82% 92%, 6% 80%, 0 0; }
}
@media (prefers-reduced-motion: reduce){ .wiz::before{ animation:none; } }

/* ===================================================================
   v37 — Liquid-Hintergrund hinter dem Glas (Textur-Basis + fließende Blobs)
=================================================================== */
.wiz::before{ display:none !important; }   /* v36-Mesh aus */
.wiz::after{ inset:0 -26px -34px -26px !important;
  background:linear-gradient(180deg, color-mix(in srgb,var(--bg) 62%,transparent), transparent 16%, transparent 84%, color-mix(in srgb,var(--bg) 70%,transparent)) !important; }

.wiz-liquid{ position:absolute; inset:0 -26px -34px -26px; border-radius:30px; overflow:hidden; z-index:-2;
  background:#e9efe6 url('/landing/hero-bg.jpg') center/cover no-repeat; }
.wiz-liquid i{ position:absolute; display:block; aspect-ratio:1; border-radius:50%; filter:blur(52px); opacity:.62; will-change:transform; }
.wiz-liquid i:nth-child(1){ width:62%; background:radial-gradient(circle, var(--accent-2), transparent 68%); top:-20%; left:-14%; animation:liqA 22s ease-in-out infinite; }
.wiz-liquid i:nth-child(2){ width:56%; background:radial-gradient(circle, #a9e2bf, transparent 68%); top:4%; right:-18%; animation:liqB 28s ease-in-out infinite; }
.wiz-liquid i:nth-child(3){ width:66%; background:radial-gradient(circle, color-mix(in srgb,var(--accent-line) 92%,#fff), transparent 66%); bottom:-26%; left:18%; animation:liqC 25s ease-in-out infinite; }
.wiz-liquid i:nth-child(4){ width:46%; background:radial-gradient(circle, color-mix(in srgb,var(--surface-2) 80%, var(--sand)), transparent 66%); top:42%; left:36%; animation:liqD 33s ease-in-out infinite; }
@keyframes liqA{ 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(46%,38%) scale(1.28)} 66%{transform:translate(16%,66%) scale(.94)} }
@keyframes liqB{ 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-42%,46%) scale(1.32)} }
@keyframes liqC{ 0%,100%{transform:translate(0,0) scale(1)} 40%{transform:translate(36%,-36%) scale(1.22)} 70%{transform:translate(-26%,-16%) scale(.9)} }
@keyframes liqD{ 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-30%,-26%) scale(1.16)} }
@media (prefers-reduced-motion:reduce){ .wiz-liquid i{ animation:none !important; } }

/* Glas etwas durchlässiger -> Liquid scheint durch, Morphism „poppt" */
.wiz-panel{ background:color-mix(in srgb, var(--surface) 86%, transparent) !important; }

/* ===================================================================
   v38 — Input höher · Restore-Hover-Pille · Picker-CTA · Result-Stage füllt
=================================================================== */
/* (1) Input-Section höher: App-Hero kompakter, Wizard näher dran */
.app-hero{ padding:22px 0 14px !important; }
.app-hero-sub{ font-size:15px !important; margin-top:9px !important; }
.wiz{ margin:8px auto 8px !important; }

/* (2) Restore: Icon-Kreis, der beim Hover nach links zur Pille aufgeht */
.restore-wrap{ display:flex; justify-content:flex-end; margin:0 0 16px; position:relative; z-index:6; }
.restore-btn{ display:inline-flex; align-items:center; justify-content:center; gap:0; height:42px; min-width:42px; padding:0;
  border-radius:999px; background:var(--surface); border:1px solid var(--accent-line); color:var(--accent-ink);
  box-shadow:var(--shadow); cursor:pointer; overflow:hidden; font:inherit;
  transition:min-width .38s var(--ease), padding .38s var(--ease), gap .38s var(--ease), box-shadow .25s, border-color .25s; }
.restore-btn .ico{ width:19px; height:19px; flex:none; }
.restore-btn .restore-label{ max-width:0; opacity:0; overflow:hidden; white-space:nowrap; font-weight:700; font-size:14px;
  transition:max-width .38s var(--ease), opacity .3s; }
.restore-btn:hover, .restore-btn:focus-visible{ padding:0 18px; gap:10px; box-shadow:var(--shadow-accent); border-color:var(--accent); }
.restore-btn:hover .restore-label, .restore-btn:focus-visible .restore-label{ max-width:220px; opacity:1; }

/* (3) Picker: klare „Wählen"-Pille statt Dropdown-Optik */
.model-btn{ gap:11px !important; padding:9px 10px 9px 11px !important; border-radius:var(--radius-sm) !important;
  background:var(--surface) !important; transition:border-color .2s, box-shadow .2s !important; }
.model-btn:hover{ border-color:var(--accent-line) !important; box-shadow:var(--shadow) !important; }
.model-btn-thumb{ width:38px !important; height:48px !important; border-radius:9px !important; }
.model-btn-label{ flex:1; text-align:left; font-weight:600; }
.model-btn-cta{ display:inline-flex; align-items:center; gap:6px; flex:none; padding:7px 12px; border-radius:999px;
  background:var(--accent-bg); color:var(--accent-ink); font-size:12.5px; font-weight:800; transition:background .2s, color .2s; }
.model-btn-cta .ico{ width:14px; height:14px; }
.model-btn:hover .model-btn-cta{ background:var(--accent); color:#fff; }

/* (4) Ergebnis: zentrierte, fokussierte Spalte (wie Wizard) · Bild-Bühne füllt die Card */
#result-section{ max-width:600px; margin-inline:auto; }
.stage{ max-width:100% !important; }

/* ===================================================================
   v39 — Input/Result volle Wrap-Breite · Footer-Fix · Restore-Kante · Bild 2-spaltig
=================================================================== */
/* Input so breit wie der Wrap, kompakter Abstand nach unten */
.wiz{ max-width:none !important; margin:12px auto 30px !important; }
/* Kein Bleed mehr -> überlappt den Footer nicht */
.wiz-liquid{ inset:0 !important; }
.wiz::after{ inset:0 !important; }

/* Restore: volle Breite, Button rechtsbündig -> rechte Kante = Input-/Wrap-Kante */
.restore-wrap{ max-width:none; margin:0 0 6px; }

/* Ergebnis: Cards so breit wie der Wrap */
#result-section{ max-width:none !important; }

/* Bild-Card 2-spaltig: Bühne links füllt, Thumbnails+Download rechts */
.stage-body{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(200px,1fr); gap:20px; align-items:stretch; }
.stage{ max-width:100% !important; margin:0 !important; }
.stage-aside{ display:flex; flex-direction:column; gap:14px; min-width:0; }
.stage-aside .thumb-strip{ display:grid; grid-template-columns:repeat(auto-fill,minmax(58px,1fr)); gap:8px; overflow:visible; padding:0; }
.stage-aside .stage-actions{ margin-top:auto; justify-content:stretch; }
.stage-aside .stage-actions .btn{ width:100%; }
@media (max-width:680px){
  .stage-body{ grid-template-columns:1fr; }
  .stage-aside .thumb-strip{ grid-template-columns:repeat(auto-fill,minmax(56px,1fr)); }
}

/* ===================================================================
   v41 — Modell-/Hintergrund-Picker: premium Tile-Carousel
   Drop-in replacement for the v40 .opt-* block
   (styles.css ~lines 1378-1389).

   DOM (unchanged, rendered by app.js renderModelCarousel /
   renderBackgroundCarousel):
     <button class="opt-card[ selected]">                 (model cards)
       <span class="opt-card-thumb[ auto]" [style="background-image:url(...)"]></span>
       <span class="opt-card-label">Mara · Gr.&nbsp;S</span>
     </button>
     <button class="opt-card opt-more[ selected]">        (model "Alle anzeigen")
       <span class="opt-card-thumb more">…ico…</span> …
     <button class="opt-card opt-more[ selected]">        (bg "Farbe / Alle" | "Eigene Farbe")
       <span class="opt-card-thumb" [style="background:#color"]>…</span> …

   IMPORTANT real-codebase facts this CSS respects:
   - Both carousels share ONE .opt-carousel class (no landscape rail
     class exists) -> one consistent card size + center/cover handles
     BOTH portrait people AND landscape textures, no JS/DOM change.
   - The "Farbe / Alle" thumb has NO .more class and may carry an inline
     solid background:<color> -> action/dashed styling keys off the
     .opt-more BUTTON, and mint fills NEVER override an inline color.
   - .opt-carousel is overflow-x:auto (=> overflow-y:auto), so the
     check badge is inset into the card corner and the rail has top/
     bottom padding so the lifted/scaled card never clips.
   - Tokens that do not exist yet (--ease, --shadow-accent) get safe
     local fallbacks; --serif currently resolves to a Georgia stack and
     upgrades automatically once Cal Sans is added.
=================================================================== */
.opt-carousel{
  /* local fallbacks for not-yet-defined globals */
  --_ease: var(--ease, cubic-bezier(.22,1,.36,1));
  --_glow: var(--shadow-accent,
            0 10px 30px -8px rgba(31,125,92,.42),
            0 4px 12px -4px rgba(47,160,116,.30));

  display:flex;
  align-items:flex-start;
  gap:14px;
  overflow-x:auto;
  /* generous top/bottom room so lift + scale + badge never clip */
  padding:10px 4px 18px;
  scroll-snap-type:x proximity;
  scroll-padding-left:4px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:var(--accent-line) transparent;
}
.opt-carousel::-webkit-scrollbar{ height:8px; }
.opt-carousel::-webkit-scrollbar-track{ background:transparent; }
.opt-carousel::-webkit-scrollbar-thumb{
  background:var(--line);
  border-radius:99px;
  border:2px solid transparent;
  background-clip:padding-box;
}
.opt-carousel:hover::-webkit-scrollbar-thumb{
  background:var(--accent-line);
  background-clip:padding-box;
}

/* ---------- the card (button) : a calm cream tile ---------- */
.opt-card{
  position:relative;            /* anchor for the corner check badge */
  flex:0 0 auto;
  width:132px;                  /* generous (was 94px) */
  display:flex;
  flex-direction:column;
  gap:9px;
  padding:9px 9px 11px;
  border:1px solid var(--line);
  border-radius:var(--radius);  /* 20px */
  background:var(--surface);
  box-shadow:
    0 1px 2px rgba(28,40,32,.04),
    0 6px 18px rgba(28,40,32,.05);
  cursor:pointer;
  scroll-snap-align:center;
  font:inherit;
  text-align:center;
  -webkit-tap-highlight-color:transparent;
  transition:
    transform .34s var(--_ease),
    box-shadow .34s var(--_ease),
    border-color .24s var(--_ease),
    background-color .24s var(--_ease);
}

/* ---------- the photo / texture frame ----------
   Fixed 4:5 frame + center/cover: portraits fill naturally,
   landscape textures (marble/linen/silk) crop cleanly — one size,
   both content types, no rail class needed. */
.opt-card-thumb{
  position:relative;
  width:100%;
  aspect-ratio:4 / 5;
  border-radius:var(--radius-sm);   /* 13px */
  background:var(--surface-2) center/cover no-repeat;
  display:grid;
  place-items:center;
  color:var(--accent);
  overflow:hidden;
  isolation:isolate;
  /* hairline frame as inset shadow (not a heavy 2px border) */
  box-shadow:inset 0 0 0 1px var(--line-soft);
  transition:
    box-shadow .3s var(--_ease),
    transform .34s var(--_ease);
}
/* soft top-light sheen so photos read as a framed print, not a flat fill */
.opt-card-thumb::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(180deg,
    rgba(255,255,255,.12) 0%,
    rgba(0,0,0,0) 34%,
    rgba(20,32,26,.10) 100%);
  opacity:.85;
  pointer-events:none;
  z-index:2;
  transition:opacity .3s var(--_ease);
}
/* mint gradient ring — drawn via mask-composite, OFF until hover/selected.
   A real gradient stroke (impossible with a plain border). */
.opt-card-thumb::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:2.5px;                    /* ring thickness */
  background:linear-gradient(150deg, var(--accent-2), var(--accent) 62%, var(--accent-ink));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  opacity:0;
  z-index:3;
  pointer-events:none;
  transition:opacity .28s var(--_ease);
}

/* ---------- "Automatisch" (.auto) + model "Alle anzeigen" (.more):
   cohesive mint fill ---------- */
.opt-card-thumb.auto,
.opt-card-thumb.more{
  background:
    radial-gradient(120% 120% at 50% 0%, #eaf6ee 0%, var(--accent-bg) 70%);
  box-shadow:inset 0 0 0 1.5px var(--accent-line);
  color:var(--accent-ink);
}
.opt-card-thumb.auto::after,
.opt-card-thumb.more::after{ display:none; }   /* no photo sheen on icon tiles */

/* ---------- "Alle anzeigen / Farbe" action affordance ----------
   Keys off the .opt-more BUTTON so it also catches the bg "Farbe / Alle"
   card whose thumb has NO .more class. Dashed = opens a modal. */
.opt-more .opt-card-thumb{
  box-shadow:inset 0 0 0 1.5px transparent;     /* let the dash carry the edge */
  outline:1.5px dashed var(--accent-line);
  outline-offset:-5px;
  color:var(--accent-ink);
}
/* tint ONLY when there is no inline custom color (i.e. the icon variant).
   :not([style*="background:"]) preserves a picked "Eigene Farbe" swatch. */
.opt-more .opt-card-thumb:not([style*="background:"]):not(.more){
  background:radial-gradient(120% 120% at 50% 0%, #eef8f1 0%, var(--surface-2) 72%);
}

.opt-card-thumb .ico{ width:30px; height:30px; z-index:2; }
.opt-card-thumb.auto .ico,
.opt-card-thumb.more .ico,
.opt-more .opt-card-thumb .ico{
  filter:drop-shadow(0 1px 1px rgba(22,91,66,.18));
  transition:transform .35s var(--_ease);
}

/* ---------- caption ---------- */
.opt-card-label{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:2.5em;                 /* keep heights even across 1- & 2-line names */
  font-family:var(--serif);
  font-size:13px;
  font-weight:600;
  letter-spacing:.005em;
  line-height:1.25;
  color:var(--ink-soft);
  transition:color .2s var(--_ease), font-weight .2s var(--_ease);
}

/* ===================================================================
   HOVER — tasteful lift + ring preview
=================================================================== */
@media (hover:hover){
  .opt-card:hover{
    transform:translateY(-4px);
    border-color:var(--accent-line);
    box-shadow:
      0 1px 2px rgba(28,40,32,.05),
      0 16px 34px -12px rgba(28,40,32,.18);
  }
  .opt-card:hover .opt-card-thumb{ transform:scale(1.015); }
  .opt-card:hover .opt-card-thumb::before{ opacity:.5; }   /* ring preview */
  .opt-card:hover .opt-card-thumb::after{ opacity:.55; }
  .opt-card:hover:not(.selected) .opt-card-label{ color:var(--ink); }
  .opt-card:hover .opt-card-thumb.auto .ico,
  .opt-card:hover .opt-more .opt-card-thumb .ico,
  .opt-card:hover .opt-card-thumb.more .ico{ transform:rotate(8deg) scale(1.08); }
}
.opt-card:active{ transform:translateY(-1px) scale(.985); transition-duration:.09s; }

/* ===================================================================
   ACCESSIBLE FOCUS — distinct mint double-ring (separate from selected)
=================================================================== */
.opt-card:focus-visible{
  outline:none;
  border-color:var(--accent);
  box-shadow:
    0 0 0 3px var(--surface),
    0 0 0 5px var(--accent),
    0 12px 28px -12px rgba(28,40,32,.20);
}
.opt-card:focus-visible .opt-card-label{ color:var(--accent-ink); }

/* ===================================================================
   SELECTED — the unmistakable, delightful pop
   (4 reinforcing cues: tinted tile + mint gradient ring + lift/scale +
    glow + spring check badge + label emphasis)
=================================================================== */
.opt-card.selected{
  border-color:var(--accent-2);
  background:linear-gradient(180deg, #eef8f1 0%, var(--accent-bg) 100%);
  transform:translateY(-5px) scale(1.045);
  box-shadow:var(--_glow);
  z-index:2;
}
.opt-card.selected:active{ transform:translateY(-3px) scale(1.02); }

.opt-card.selected .opt-card-thumb{
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.6),
    0 0 0 3px rgba(47,160,116,.16);
}
.opt-card.selected .opt-card-thumb::before{ opacity:1; }   /* mint gradient ring ON */
.opt-card.selected .opt-card-thumb::after{ opacity:.45; }  /* lighten sheen so photo glows */

.opt-card.selected .opt-card-label{
  color:var(--accent-ink);
  font-weight:800;
  letter-spacing:.01em;
}

/* selected mint tiles deepen so they stay cohesive with the set */
.opt-card.selected .opt-card-thumb.auto,
.opt-card.selected .opt-card-thumb.more{
  background:
    radial-gradient(120% 120% at 50% 0%, #eafaf0 0%, #cfeeda 100%);
  color:var(--accent-ink);
}
.opt-card.opt-more.selected .opt-card-thumb{ outline-color:var(--accent); }

/* ---------- spring check badge — CSS only, built on the card button.
   Inset into the top-right corner so overflow-y:auto never clips it. */
.opt-card.selected::after{
  content:"";
  position:absolute;
  top:1px;
  right:1px;
  width:28px;
  height:28px;
  border-radius:50%;
  background:radial-gradient(120% 120% at 30% 25%, var(--accent-2), var(--accent) 65%, var(--accent-ink));
  box-shadow:
    0 0 0 3px var(--surface),
    0 5px 12px -3px rgba(22,91,66,.50);
  z-index:5;
  pointer-events:none;
  animation:opt-badge-pop .4s var(--_ease) both;
}
/* the tick glyph (rotated open box) layered above the disc */
.opt-card.selected::before{
  content:"";
  position:absolute;
  top:8px;
  right:11px;
  width:8px;
  height:13px;
  border:solid #fff;
  border-width:0 2.5px 2.5px 0;
  border-radius:1px;
  transform:rotate(45deg);
  transform-origin:center;
  z-index:6;
  pointer-events:none;
  animation:opt-tick-in .42s var(--_ease) .06s both;
}
@keyframes opt-badge-pop{
  0%   { transform:scale(0) rotate(-28deg); opacity:0; }
  60%  { transform:scale(1.16) rotate(0);   opacity:1; }
  100% { transform:scale(1) rotate(0);      opacity:1; }
}
@keyframes opt-tick-in{
  0%   { clip-path:inset(0 0 100% 0); opacity:0; }
  45%  { opacity:1; }
  100% { clip-path:inset(0 0 0 0);    opacity:1; }
}

/* ===================================================================
   MOTION-REDUCTION & SMALL SCREENS
=================================================================== */
@media (prefers-reduced-motion:reduce){
  .opt-card,
  .opt-card-thumb,
  .opt-card-thumb::before,
  .opt-card-thumb::after,
  .opt-card-label,
  .opt-card.selected::before,
  .opt-card.selected::after{
    transition-duration:.01ms !important;
    animation:none !important;
  }
}
@media (max-width:520px){
  .opt-carousel{ gap:11px; }
  .opt-card{ width:120px; }
  .opt-card-label{ font-size:12.5px; }
}

/* ===================================================================
   v41 — Body beige-weiß (Farbe nur hinter Input) · Restore-Symbol in Rail
=================================================================== */
/* Seite ruhig beige-weiß (passend zur Landingpage); farbiger Morphism nur hinter dem Input */
body{ background:#f8f6f0 !important; }
.wiz-liquid i{ opacity:.7 !important; }

/* Restore: nur Symbol oben rechts in der Rail; Text öffnet beim Hover nach links (keine Pille) */
.wiz-rail__top{ display:flex; justify-content:flex-end; align-items:center; min-height:22px; margin:0 2px 6px; }
.restore-wrap{ position:static !important; margin:0 !important; max-width:none !important; display:inline-flex !important; justify-content:flex-end; }
.restore-btn{ background:none !important; border:none !important; box-shadow:none !important; padding:0 !important; min-width:0 !important; height:auto !important;
  display:inline-flex; align-items:center; gap:0; color:var(--accent-ink); cursor:pointer; }
.restore-btn .ico{ width:20px; height:20px; flex:none; }
.restore-btn:hover{ color:var(--accent) !important; }
.restore-btn .restore-label{ max-width:0 !important; opacity:0 !important; overflow:hidden; white-space:nowrap; font-size:13px; font-weight:700;
  transition:max-width .35s var(--ease), opacity .3s, margin .35s var(--ease) !important; }
.restore-btn:hover .restore-label, .restore-btn:focus-visible .restore-label{ max-width:170px !important; opacity:1 !important; margin-right:8px !important; }

/* ===================================================================
   v43 — Picker-Card: Bild randlos oben (untere Kante gerade) ·
         Check mittig im Badge · Restore-Text transparent
=================================================================== */
/* Foto füllt den oberen Bereich komplett; nur OBEN abgerundet (an Card), unten gerade */
.opt-card{ padding:0 !important; gap:0 !important; overflow:visible; }
.opt-card-thumb{ border-radius:calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0 !important; }
.opt-card-label{ padding:9px 10px 11px !important; }
/* Selected-Ring darf nicht in den Label-Bereich bluten */
.opt-card.selected .opt-card-thumb{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.6) !important; }

/* Check mittig im Kreis: sauberes zentriertes SVG-Häkchen statt rotierter Box */
.opt-card.selected::after{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"),
    radial-gradient(120% 120% at 30% 25%, var(--accent-2), var(--accent) 65%, var(--accent-ink));
  background-position:center, center;
  background-size:15px 15px, cover;
  background-repeat:no-repeat, no-repeat;
}
.opt-card.selected::before{ content:none !important; }   /* alten rotierten Tick entfernen */

/* „Letztes Ergebnis" – Text/Button komplett ohne Hintergrund */
.restore-btn, .restore-btn:hover, .restore-btn:focus-visible{ background:transparent !important; border:none !important; box-shadow:none !important; }
.restore-btn .restore-label{ background:transparent !important; padding:0 !important; }

/* ===================================================================
   v44 — images-card (#images-card) im Look der result-hero
         (Textur + warmer Farbverlauf hinter dem Inhalt)
=================================================================== */
#images-card.stage-card{ position:relative; overflow:hidden;
  background:transparent !important;
  border-color:var(--accent-line) !important; }
#images-card.stage-card::before{ content:""; position:absolute; inset:0; z-index:-2;
  background:#e9efe6 center/cover no-repeat; background-image:url('/landing/hero-bg.jpg'); opacity:.6; }
#images-card.stage-card::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg, color-mix(in srgb,var(--surface) 88%,transparent), color-mix(in srgb,var(--surface) 58%,transparent) 70%, transparent),
             radial-gradient(120% 80% at 100% 0%, color-mix(in srgb,var(--accent-bg) 50%,transparent), transparent 55%); }

/* ===================================================================
   v45 — Auto-Card: bei Auswahl nur Label einfärben (Thumb/Icon neutral) ·
         Dropzone weiß (kein Verlauf)
=================================================================== */
/* Auto/More-Thumb bekommt bei Auswahl KEINE zusätzliche grüne Einfärbung mehr */
.opt-card.selected .opt-card-thumb.auto,
.opt-card.selected .opt-card-thumb.more{
  background:radial-gradient(120% 120% at 50% 0%, #eaf6ee 0%, var(--accent-bg) 70%) !important;
}
.opt-card.selected .opt-card-thumb.auto::before,
.opt-card.selected .opt-card-thumb.more::before{ opacity:0 !important; }

/* Dropzone: schlicht weiß statt Verlauf */
.dropzone{ background:#fff !important; }

/* ===================================================================
   v46 — Schritt 3: Ausgabe-Optionen (Aufgewertete / KI / Editorial) + Stepper
=================================================================== */
.out-opts{ display:flex; flex-direction:column; gap:11px; margin:14px 0 16px; }
.out-opt{ display:flex; align-items:center; gap:14px; padding:13px 15px;
  border:1.5px solid var(--accent-line); border-radius:var(--radius-sm);
  background:color-mix(in srgb, var(--accent-bg) 26%, #fff);
  transition:border-color .2s, background .2s, opacity .2s; }
.out-opt.is-unchecked{ border-color:var(--line); background:#fff; opacity:.62; }
.out-opt.is-off{ opacity:.4; pointer-events:none; }
.out-opt__lead{ display:flex; align-items:flex-start; gap:12px; flex:1 1 auto; min-width:0; cursor:pointer; }
.out-opt__check{ width:20px; height:20px; flex:none; margin-top:1px; accent-color:var(--accent); cursor:pointer; }
.out-opt__main{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.out-opt__title{ font-weight:800; font-size:14.5px; color:var(--ink); line-height:1.2; }
.out-opt__sub{ font-size:12.5px; color:var(--ink-soft); line-height:1.35; }
.out-opt__qty{ flex:none; }
.out-opt__credits{ flex:none; min-width:62px; text-align:right; font-size:11.5px; font-weight:800; color:var(--accent-ink); white-space:nowrap; }
.out-opt__credits:empty{ display:none; }
.out-opt.is-unchecked .out-opt__credits, .out-opt.is-off .out-opt__credits{ opacity:.5; }
#generate-btn.is-insufficient .gen-cost{ background:#fde2e1; color:#b3261e; }
.out-qty-auto{ display:inline-flex; align-items:center; height:34px; padding:0 14px; border-radius:999px;
  background:var(--accent-bg); color:var(--accent-ink); font-weight:800; font-size:13px; white-space:nowrap; }

.stepper{ display:inline-flex; align-items:center; gap:4px; background:var(--surface-2);
  border:1px solid var(--line); border-radius:999px; padding:3px; }
.stepper.is-off{ opacity:.45; }
.step-btn{ width:30px; height:30px; flex:none; display:grid; place-items:center; border:none; border-radius:50%;
  background:#fff; color:var(--accent-ink); cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,.06);
  transition:background .15s, color .15s, transform .12s; }
.step-btn:hover:not(:disabled){ background:var(--accent); color:#fff; }
.step-btn:active:not(:disabled){ transform:scale(.9); }
.step-btn:disabled{ opacity:.32; cursor:not-allowed; box-shadow:none; }
.step-btn svg{ width:16px; height:16px; }
.step-num{ min-width:26px; text-align:center; font-weight:800; font-size:15px; color:var(--ink); font-variant-numeric:tabular-nums; }

/* Kosten am Erstellen-Button */
#generate-btn .gen-cost{ margin-left:9px; padding:2px 9px; border-radius:999px;
  background:rgba(255,255,255,.22); font-weight:700; font-size:13px; white-space:nowrap; }

/* ===================================================================
   v47 — Brand im App-Header als Link zur Startseite
=================================================================== */
.site-header .brand{ text-decoration:none; color:inherit; cursor:pointer; border-radius:12px; }
.site-header .brand:hover h1{ color:var(--accent-ink); }
.site-header .brand:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

/* ===================================================================
   v48 — restore-wrap: das hidden-Attribut MUSS greifen.
   (v41 setzte display:inline-flex !important und überstimmte damit
    [hidden]{display:none} -> Restore-Symbol blieb sichtbar.)
=================================================================== */
.restore-wrap[hidden]{ display:none !important; }

/* ===================================================================
   v49 — Vinedit-Logo als <img> im brand-mark (eigenes Pastell-Tile)
=================================================================== */
.brand-mark{ background:none !important; box-shadow:none !important; border:none !important; }
.brand-mark img{ width:100%; height:100%; display:block;  object-fit:contain;}

/* ===================================================================
   v52 — Modell-Card "LiftOut": 3D-Pop-out beim >3s-Hover.
   Portal an <body> (z 220, ueber Modal z90 + ausserhalb des
   Grid-overflow-Clips). Nur transform/opacity animiert. Der graue
   Studio-Hintergrund wird per radialer Maske zu den Raendern hin
   aufgeloest -> Figur schwebt 3D aus der Card heraus, ohne Rahmen.
=================================================================== */
.model-pop{
  position:fixed; left:0; top:0; margin:0; padding:0;
  z-index:220; pointer-events:none;            /* klaut nie Hover/Klick von der Card */
  transform-origin:top left; will-change:transform,opacity;
  opacity:0;
  transition:transform 500ms cubic-bezier(.16,.84,.3,1), opacity 240ms ease;
}
.model-pop.is-in{ opacity:1; }

/* Innere "Buehne": traegt Maus-Tilt + Lift (getrennt vom FLIP-Transform
   auf .model-pop, damit sich beide nie in die Quere kommen). */
.model-pop-stage{
  position:absolute; inset:0;
  transform-style:preserve-3d; transform-origin:50% 90%;   /* Dreh-/Hebepunkt nahe den Fuessen */
  --tilt-x:0deg; --tilt-y:0deg; --lift:0px;
  transform:perspective(1200px) translateZ(var(--lift)) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transition:transform 500ms cubic-bezier(.16,.84,.3,1);
}

/* Die Figur. Studio-Grau wird per radialer Maske zu den Raendern hin
   transparent -> kein Rechteck-Tile. drop-shadow folgt der maskierten
   Alpha (dem Koerper), waechst mit --shadow beim Anheben. */
.model-pop-figure{
  display:block; width:100%; height:100%;
  object-fit:contain; object-position:50% 50%;        /* freigestellter Cutout (transparent) */
  background:transparent; --shadow:0px;
  /* drop-shadow folgt der echten Silhouette des Freistellers -> Figur schwebt 3D. */
  filter:drop-shadow(0 calc(20px + var(--shadow)) calc(30px + var(--shadow)) rgba(16,14,11,.4));
  transition:filter 500ms ease;
}

/* Ursprungs-Thumb "leert" sich optisch, waehrend seine Figur schwebt. */
.model-card.is-lifted .model-card-thumb,
.opt-card.is-lifted .opt-card-thumb{ opacity:.18; transition:opacity 240ms ease; }

@media (prefers-reduced-motion: reduce){
  /* Kein Bewegungs-Theater: ruhiges statisches Vergroessern + Fade. */
  .model-pop{ transition:opacity 140ms ease; }
  .model-pop-stage{ transition:none; transform:none; }
  .model-pop-figure{ transition:none; }
  .model-card.is-lifted .model-card-thumb,
  .opt-card.is-lifted .opt-card-thumb{ transition:none; }
}

/* ===================================================================
   Auth-Gate: App-Inhalt verstecken, bis der Login-Status geklaert ist
   (app-auth.js setzt/entfernt .gate). Verhindert Aufblitzen der App fuer
   nicht eingeloggte Besucher; der Server schuetzt die API zusaetzlich.
=================================================================== */
html.gate body{ visibility:hidden; }

/* ===================================================================
   Header: Credits + Plan-Status (ersetzt das fruehere API-Key-Feld)
=================================================================== */
.plan-status{ display:inline-flex; align-items:center; gap:10px; }
.plan-status .plan-credits{ font-size:13.5px; font-weight:600; color:var(--ink-soft); white-space:nowrap; }
.plan-status .plan-credits strong{ color:var(--ink); font-weight:800; }
.plan-badge{ font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; padding:3px 9px; border-radius:999px; background:var(--surface-2); color:var(--ink-soft); border:1px solid var(--line); }
.plan-badge.is-premium{ background:linear-gradient(150deg,var(--accent),var(--accent-2)); color:#fff; border-color:transparent; }
.btn-upgrade{ padding:8px 14px; font-size:13.5px; }
.btn-icon{ padding:0; width:38px; height:38px; border-radius:50%; flex:none; }
.btn-icon .ico{ width:18px; height:18px; }
/* Reihenfolge in der Topleiste: … Credits · Aufladen · Logout (ganz rechts) */
#plan-status{ order:8; }
#app-logout{ order:9; }

/* ---- Credits-aufladen-Modal (Stripe) ---- */
.cmodal{ position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(20,18,15,.6); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.cmodal[hidden]{ display:none; }
.cmodal-card{ position:relative; background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow-lg); width:100%; max-width:460px; padding:26px; text-align:center; animation:pop .25s var(--ease); }
.cmodal-close{ position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:50%; border:1px solid var(--line); background:var(--surface); color:var(--ink-soft); cursor:pointer; display:grid; place-items:center; }
.cmodal-close:hover{ border-color:var(--accent); color:var(--accent-ink); }
.cmodal-card h3{ font-size:20px; margin:0 0 6px; }
.cmodal-sub{ color:var(--ink-soft); font-size:13.5px; margin:0 0 18px; }
.cpacks{ display:grid; gap:11px; }
.cpack{ position:relative; display:grid; grid-template-columns:1fr auto; align-items:center; gap:3px 12px; text-align:left; padding:14px 16px; border:1.5px solid var(--line); border-radius:14px; background:var(--surface); cursor:pointer; font:inherit; transition:border-color .2s, box-shadow .2s, transform .12s; }
.cpack:hover{ border-color:var(--accent-line); box-shadow:var(--shadow); }
.cpack:active{ transform:translateY(1px); }
.cpack.is-featured{ border-color:var(--accent); }
.cpack-name{ font-weight:800; font-size:15px; }
.cpack-info{ grid-column:1; color:var(--ink-soft); font-size:12.5px; }
.cpack-price{ grid-column:2; grid-row:1 / span 3; align-self:center; font-weight:800; font-size:17px; color:var(--accent-ink); }
.cpack-badge{ position:absolute; top:-9px; left:16px; background:var(--accent); color:#fff; font-size:10px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; padding:2px 8px; border-radius:999px; }
.cpack-save{ position:absolute; top:-9px; right:14px; background:#1f9d63; color:#fff; font-size:10.5px; font-weight:800; letter-spacing:.02em; padding:2px 8px; border-radius:999px; box-shadow:0 2px 7px rgba(31,157,99,.38); transition:transform .15s var(--ease); }
.cpack:hover .cpack-save{ transform:translateY(-1px); }
.cpack-perbild{ grid-column:1; font-size:12px; color:var(--ink-soft); }
.cpack-perbild.is-save{ color:#1f9d63; }
.cpack-perbild.is-save strong{ font-weight:800; }
.cmodal-note{ color:var(--muted); font-size:11.5px; margin:16px 0 0; }
.cmodal-foot{ color:var(--muted); font-size:12px; margin:4px 0 0; }