/* Wunolo Design-System
   Umgesetzt nach dem offiziellen Wunolo Brand Guide (Claude Design).
   Leitsatz: "so vertrauenswuerdig wie eine Premium-D2C-Marke,
   so warm wie eine Vorlesestunde."

   Creme statt Weiss als Grundflaeche, Nachtblau als Buehne,
   der Fuchs als EINZIGER heisser Akzent (sparsam einsetzen). */

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Nunito+Sans:opsz,wght@6..12,400..1000&display=swap');

:root {
  /* --- Palette (Guide-Namen als Kommentar) --- */
  --night: #1E3250;        /* Nachtblau: Buehne, Header, Rueckseiten */
  --night-deep: #142338;
  --dove: #7C9DBF;         /* Taubenblau: Faros Tasche, ruhige Akzente */
  --dove-dark: #5B7FA3;
  --mist: #E9EFF5;         /* Nebel: kuehle Flaechen */
  --cream: #FBF4E8;        /* Creme: Grundflaeche statt Weiss */
  --cream-warm: #F0E4CE;   /* Creme Tief: abgesetzte Flaechen */
  --paper: #EADDC6;        /* Papier: Karten, Trennflaechen */
  --fox: #D4622A;          /* Fuchs: der einzige heisse Akzent */
  --fox-deep: #A6431A;     /* Fuchs Tief: Links, Hover */
  --moon: #EFC983;         /* Mondgelb: Sterne, Funken, Highlights */

  /* --- Text --- */
  --ink: #1E3250;          /* Fliesstext steht in Nachtblau, nicht Schwarz */
  --ink-soft: #4A5670;     /* gedaempft */
  --ink-mute: #8A93A8;     /* Metaangaben, Bildunterschriften */
  --line: #D8CBB4;

  --ok: #3D7A57;
  --warn: #A6431A;

  /* --- Form --- */
  /* Guide: "Eckradius ueberall 12px" (Buttons und Karten) */
  --radius: 12px;
  --radius-lg: 12px;
  --radius-sm: 5px;
  --shadow: 0 2px 8px rgba(30, 50, 80, .08), 0 12px 32px rgba(30, 50, 80, .06);

  /* --- Schrift: eine Buchstimme, eine Erklaerstimme --- */
  --font-display: 'Lora', Georgia, 'Iowan Old Style', serif;   /* Ueberschriften, 600 */
  --font-body: 'Nunito Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

* { box-sizing: border-box; }

/* Guide: Links in Fuchs Tief, Hover in Fuchs */
a { color: var(--fox-deep); }
a:hover { color: var(--fox); }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Guide: Ueberschriften Lora 600, Text Nunito Sans 400/700.
   Skala aus dem Guide: 56 / 38 / 26 px, hier fluid heruntergebrochen. */
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.2; margin: 0 0 .4em; }
h1 { font-size: clamp(1.9rem, 5vw, 3.5rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.4rem, 3.5vw, 2.4rem); }
h3 { font-size: clamp(1.1rem, 2.5vw, 1.6rem); }
em { font-style: italic; }  /* Guide: Kursiv fuer Zitate und leise Zwischentoene */
p { margin: 0 0 1em; }

/* ---------------------------------------------------------------- Layout */
.funnel {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 20px 120px;
}

.funnel-header {
  background: var(--night);
  color: var(--cream);
  text-align: center;
  padding: 14px 20px;
  position: sticky;
  top: 0;
  z-index: 20;
}
/* Wortmarke: Hintergrund der Datei trifft exakt --night, fuegt sich nahtlos ein.
   Guide: feste Proportionen, nicht dehnen oder neigen. */
.brand-mark { display: block; height: 34px; width: auto; margin: 0 auto 2px; }
.funnel-header strong { display: block; font-family: var(--font-display); font-size: 1.05rem; }
.funnel-header small { opacity: .75; font-size: .8rem; }

.progress {
  height: 3px;
  background: rgba(255,255,255,.2);
  margin-top: 10px;
  border-radius: 2px;
  overflow: hidden;
}
.progress i { display: block; height: 100%; background: var(--dove); transition: width .4s ease; }

.step { display: none; padding-top: 32px; animation: rise .35s ease both; }
.step.active { display: block; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.lede { color: var(--ink-soft); margin-bottom: 28px; }

/* ---------------------------------------------------------------- Felder */
label.field { display: block; margin-bottom: 24px; }
label.field > span { display: block; font-weight: 600; margin-bottom: 8px; font-size: .95rem; }

input[type="text"], input[type="number"], textarea, select {
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: #FFFBF2;   /* Guide: waermstes Creme statt reinem Weiss */
  font: inherit;
  color: inherit;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--dove);
  box-shadow: 0 0 0 3px rgba(124, 157, 191, .2);
}
textarea { min-height: 90px; resize: vertical; }

.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.choice {
  padding: 14px 12px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: #FFFBF2;
  cursor: pointer;
  text-align: center;
  font: inherit;
  transition: border-color .15s, box-shadow .15s, transform .1s;
}
.choice:hover { border-color: var(--dove); }
.choice[aria-pressed="true"] {
  border-color: var(--night);
  box-shadow: 0 0 0 2px var(--night) inset;
  background: var(--cream-warm);
}
.choice:active { transform: scale(.98); }

.swatch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 12px; }
.swatch { border: none; background: none; cursor: pointer; padding: 0; text-align: center; font: inherit; }
.swatch i {
  display: block;
  aspect-ratio: 1;
  border-radius: var(--radius);
  border: 2.5px solid transparent;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
  transition: border-color .15s, transform .1s;
}
.swatch:hover i { transform: scale(1.04); }
.swatch[aria-pressed="true"] i { border-color: var(--night); }
.swatch span { display: block; font-size: .82rem; margin-top: 6px; color: var(--ink-soft); }

/* ---------------------------------------------------------------- Karten */
.card {
  background: #FFFBF2;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px;
  margin-bottom: 20px;
  box-shadow: var(--shadow);
}

.story-card { display: flex; gap: 16px; align-items: flex-start; text-align: left; width: 100%; }
.story-card .badge {
  flex: none;
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--cream-warm);
  display: grid; place-items: center;
  font-size: 1.4rem;
}
.story-card h3 { margin-bottom: .2em; font-size: 1.1rem; }
.story-card p { margin: 0; color: var(--ink-soft); font-size: .9rem; }
.story-card .age { font-size: .78rem; color: var(--dove-dark); font-weight: 600; }

/* ---------------------------------------------------------------- Upload */
.dropzone {
  border: 2px dashed var(--line);
  border-radius: var(--radius-lg);
  padding: 40px 20px;
  text-align: center;
  background: #FFFBF2;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.dropzone:hover, .dropzone.over { border-color: var(--dove); background: var(--cream-warm); }
.dropzone .icon { font-size: 2.4rem; }
.dropzone.needs-consent { opacity: .5; cursor: not-allowed; }
.dropzone.needs-consent:hover { border-color: var(--line); background: #FFFBF2; }

.rules { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 8px; }
.rules li { display: flex; gap: 10px; align-items: center; font-size: .9rem; color: var(--ink-soft); }
.rules li::before { content: "✓"; color: var(--ok); font-weight: 700; }

.consent { display: flex; gap: 12px; align-items: flex-start; font-size: .88rem; color: var(--ink-soft); margin-top: 22px; }
.consent input { margin-top: 3px; flex: none; width: 18px; height: 18px; accent-color: var(--night); }

.notice { padding: 14px 16px; border-radius: var(--radius); font-size: .9rem; margin-top: 16px; }
.notice.warn { background: #FDF1E3; color: var(--warn); border: 1px solid #F0D9BC; }
.notice.ok { background: #EAF3ED; color: var(--ok); border: 1px solid #CFE3D6; }

/* ---------------------------------------------------------------- Vorschau */
.preview-wrap { text-align: center; }
.preview-img {
  max-width: 320px; width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  background: var(--cream-warm);
  aspect-ratio: 3/4;
  object-fit: cover;
}
.spinner {
  width: 42px; height: 42px; margin: 40px auto;
  border: 3px solid var(--line); border-top-color: var(--night);
  border-radius: 50%; animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- Aktionen */
.actions {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to top, var(--cream) 70%, rgba(251,244,232,0));
  padding: 20px;
  display: flex; gap: 12px; justify-content: center;
  z-index: 30;
}
/* Guide: "Buttons: durchgehende Flaeche", Eckradius 12px (nicht rund). */
.btn {
  font: inherit; font-weight: 700;
  padding: 15px 30px;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform .1s, box-shadow .15s, opacity .15s, background .15s;
}
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--night); color: var(--cream); box-shadow: var(--shadow); min-width: 220px; }
.btn-primary:hover:not(:disabled) { background: var(--night-deep); }
.btn-primary:disabled { opacity: .35; cursor: not-allowed; }
.btn-ghost { background: transparent; color: var(--ink-soft); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--dove); color: var(--night); }
/* Der Fuchs ist der einzige heisse Akzent: nur fuer den einen Hauptabschluss */
.btn-fox { background: var(--fox); color: var(--cream); box-shadow: var(--shadow); }
.btn-fox:hover:not(:disabled) { background: var(--fox-deep); }

.option-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.option-row .price { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; white-space: nowrap; }
.tag { display: inline-block; background: var(--dove); color: #fff; font-size: .72rem; font-weight: 700; padding: 3px 9px; border-radius: var(--radius-sm); letter-spacing: .02em; }

/* ---------------------------------------------------------------- Varianten */
.variant-row { display: flex; gap: 10px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.variant {
  border: 3px solid transparent; border-radius: 12px; padding: 0; background: none;
  cursor: pointer; overflow: hidden; line-height: 0; transition: border-color .15s, transform .1s;
}
.variant img { width: 84px; height: 112px; object-fit: cover; display: block; background: var(--cream-warm); }
.variant:hover { transform: translateY(-2px); }
.variant[aria-pressed="true"] { border-color: var(--night); }
.attempts { font-size: .85rem; color: var(--ink-soft); margin-top: 10px; }
#regenerate { margin-top: 16px; }