/* BLOOM YOUR ROOM – Stilquiz (Version 3)
   ruhig, hochwertig, feminin, natürlich, mobil-first */

/* Hier eine persönliche Nachricht von Kim: ein Satz mit X, das wars wohl nix.
   Frag mich doch einfach, wenn du wissen willst, wie ich diesen Test gemacht
   habe. Ich freu mich immer über kollegialen, ehrlichen Austausch.
   Alles Liebe, Kim (Bloom Your Room) */

:root {
  --color-bg: #faf7f3;
  --color-bg-card: #ffffff;
  --color-beige: #e4dad0;
  --color-sage: #909f94;
  --color-sage-dark: #6f7e73;
  --color-terracotta: #e07a5f;
  --color-text: #3a3632;
  --color-text-soft: #6b6459;
  --color-border: #ece4da;

  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --shadow-soft: 0 12px 32px rgba(58, 54, 50, 0.08);
  --shadow-card: 0 6px 18px rgba(58, 54, 50, 0.07);
  --max-width: 640px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

img { max-width: 100%; display: block; }

/* Verhindert blau/unterstrichenen Text durch iOS-Safari-Auto-Erkennung (Telefonnummern
   etc.) bei Zahlen im Fließtext, falls das format-detection Meta-Tag nicht greift. */
a { color: inherit; text-decoration: inherit; }

/* iOS Safari faerbt <button>-Text ohne explizite color-Angabe systemblau ein -
   alle Buttons sollen stattdessen die normale Textfarbe erben. */
button {
  font-family: inherit;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 0.5em;
  color: var(--color-text);
}

p { line-height: 1.6; margin: 0 0 1em; color: var(--color-text); }

strong, b { font-weight: 700; }

.heading-terracotta { color: var(--color-terracotta) !important; }
.heading-sage { color: var(--color-sage-dark) !important; }

.app-shell {
  flex: 1;
  display: flex;
  flex-direction: column;
  max-width: var(--max-width);
  margin: 0 auto;
  width: 100%;
  padding: 0 20px 48px;
}

/* Progress bar */
.progress-wrap {
  position: sticky;
  top: 0;
  background: var(--color-bg);
  padding: 12px 0 10px;
  z-index: 5;
}
.progress-track {
  height: 6px;
  background: var(--color-beige);
  border-radius: 999px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-sage), var(--color-terracotta));
  border-radius: 999px;
  transition: width 0.4s ease;
}

/* Brand header - groß auf Seite 1, kleiner Banner danach */
.brand-header {
  display: flex;
  justify-content: center;
  padding: 20px 0 4px;
}
.brand-header.brand-header-large img { height: 168px; width: auto; }
.brand-header.brand-header-small { padding: 14px 0 2px; }
.brand-header.brand-header-small img { height: 40px; width: auto; }

/* Screen container */
.screen {
  animation: fadeIn 0.35s ease;
  padding-top: 8px;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.eyebrow {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-sage-dark);
  font-weight: 600;
  margin-bottom: 10px;
}

.screen-title {
  font-size: 28px;
}

.screen-text {
  color: var(--color-text-soft);
  font-size: 16px;
  white-space: pre-line;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: 999px;
  padding: 16px 28px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  text-decoration: none;
}
.btn:active { transform: scale(0.98); }
.btn-primary {
  background: var(--color-sage);
  color: #fff;
  box-shadow: var(--shadow-card);
  width: 100%;
}
.btn-primary:hover { background: var(--color-sage-dark); }
.btn-primary:disabled {
  background: var(--color-border);
  color: var(--color-text-soft);
  cursor: not-allowed;
}
.btn-secondary {
  background: transparent;
  color: var(--color-text-soft);
  border: 1.5px solid var(--color-border);
  width: 100%;
}
.btn-secondary:hover { border-color: var(--color-sage); color: var(--color-sage-dark); }
.btn-accent {
  background: var(--color-terracotta);
  color: #fff;
  width: 100%;
  box-shadow: var(--shadow-card);
}

.btn-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 28px;
}

/* Option list (Frage 0, 1, 22, Selbstcheck) */
.option-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
}
.option-card {
  background: var(--color-bg-card);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  font-size: 16px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
.option-card:hover { border-color: var(--color-sage); }
.option-card.selected {
  border-color: var(--color-sage);
  background: #f2f5f2;
}
.option-card-title {
  font-weight: 700;
  margin-bottom: 2px;
}
.option-card-sub {
  font-size: 14px;
  color: var(--color-text-soft);
}

/* Image answer cards (Frage 2, 3, 4) */
.image-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 24px;
}
.image-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  border: 3px solid transparent;
  box-shadow: var(--shadow-card);
  transition: border-color 0.15s ease, transform 0.15s ease;
  background: var(--color-bg-card);
}
.image-card:hover { transform: translateY(-2px); }
.image-card.selected { border-color: var(--color-terracotta); }
.image-card.disabled { opacity: 0.4; cursor: not-allowed; }
.image-card.disabled:hover { transform: none; }
.image-card .image-card-photo {
  width: 100%;
  height: 130px;
  object-fit: contain;
  background: var(--color-beige);
  display: block;
}
.image-card-body { padding: 12px 16px; }
.image-card-label { font-weight: 600; font-size: 16px; margin-bottom: 2px; }
.image-card-desc { font-size: 13.5px; color: var(--color-text-soft); white-space: pre-line; }
.image-card-check {
  position: absolute; top: 12px; right: 12px;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,0.9);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; color: var(--color-terracotta);
  opacity: 0; transition: opacity 0.15s ease;
}
.image-card.selected .image-card-check { opacity: 1; }

/* Bild links, Text rechts (Frage 2) */
/* STILTEST (2026-07-12): Bilder auf Kims Feedback hin groesser (waren 110px/96px
   fix bei jeder Viewport-Breite - wirkten auf dem Handy zu klein). */
.image-card-grid.layout-horizontal .image-card { flex-direction: row; align-items: stretch; }
.image-card-grid.layout-horizontal .image-card-photo { width: 140px; height: auto; min-height: 120px; flex-shrink: 0; }
.image-card-grid.layout-horizontal .image-card-body { display: flex; flex-direction: column; justify-content: center; }

/* Größere Bilder (Frage 3) */
.image-card-grid.layout-large .image-card-photo { height: auto; aspect-ratio: 4 / 3; }

/* Querformat, kein Kasten (Frage 4) */
.image-card-grid.layout-landscape .image-card { background: transparent; box-shadow: none; border-radius: 0; }
.image-card-grid.layout-landscape .image-card-photo { height: auto; aspect-ratio: 16 / 9; border-radius: var(--radius-md); background: var(--color-beige); }
.image-card-grid.layout-landscape .image-card-body { padding: 10px 2px 0; }

/* V4: Mehrfachauswahl-Bildfragen (Eingangsbereich, Produkte, Farbpaletten) -
   reine Bilder, kein Rahmen/Fläche/Text, Hinweis-Badge springt sofort ins Auge. */
.multi-select-hint-badge {
  text-align: center;
  font-size: 14px;
  color: #fff;
  background: var(--color-terracotta);
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 999px;
  margin: 14px auto 0;
  max-width: fit-content;
  box-shadow: var(--shadow-card);
}
.multi-select-hint-badge strong { font-weight: 800; }
/* STILTEST (2026-07-13): Kim gibt jetzt pro Frage eine feste Spaltenzahl vor
   (gleich auf Handy UND Desktop, kein Unterschied mehr zwischen den beiden -
   anders als in der Vorrunde). Default (Farbpaletten/Produkte/Hingucker) = 3
   Spalten. Eingangsbereich (Flur) und Material-Farbe-Kombi haben eigene
   gridClass-Overrides direkt darunter. */
.image-card-grid.layout-multiselect {
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.image-card-grid.layout-multiselect .image-card {
  border: none;
  box-shadow: none;
  border-radius: 6px;
  background: transparent;
}
.image-card-grid.layout-multiselect .image-card-photo {
  height: auto;
  aspect-ratio: 1 / 1;
}
/* Flurbilder: 2 Spalten auf Handy UND Desktop (Kims Vorgabe "5x2" = 5 Reihen
   x 2 Spalten) - bewusst weniger Spalten fuer groessere, gut erkennbare Bilder. */
.image-card-grid.layout-multiselect.layout-eingangsbereich {
  grid-template-columns: repeat(2, 1fr);
}
/* Material-Farbe-Kombi: 3 Spalten mobil, 4 Spalten Desktop (Kims Vorgabe
   "handy 4x3, desktop 3x4" = 4 Reihen x 3 Spalten mobil, 3 Reihen x 4 Spalten
   Desktop - bei 12 Bildern gehen beide exakt auf). */
.image-card-grid.layout-multiselect.layout-material-kombi {
  grid-template-columns: repeat(3, 1fr);
}
@media (min-width: 641px) {
  .image-card-grid.layout-multiselect.layout-material-kombi {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* STILTEST (2026-08-05): "Weitere Stile"-Frage (ersetzt Farbpaletten) - 12
   Bilder, 4x3-Raster (Kims Vorgabe: 4 Spalten fest, mobil UND Desktop - anders
   als Material-Kombi oben, das noch mobil/Desktop unterscheidet). Zeigt
   zusaetzlich den Stil-Namen als Label (showLabels). */
.image-card-grid.layout-multiselect.layout-weitere-stile {
  grid-template-columns: repeat(3, 1fr);
}
.image-card-grid.layout-weitere-stile .image-card {
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
}
.image-card-grid.layout-weitere-stile .image-card-body { padding: 8px 8px 10px; }
.image-card-grid.layout-weitere-stile .image-card-label {
  font-size: 13px;
  text-align: center;
}
@media (max-width: 430px) {
  .image-card-grid.layout-weitere-stile .image-card-label { font-size: 12px; overflow-wrap: anywhere; }
  .image-card-grid.layout-weitere-stile .image-card-body { padding: 8px 4px 10px; }
}
.image-card-grid.layout-weitere-stile .image-card-check {
  color: #e0607a;
  font-size: 17px;
}
.multiselect-card.disabled { opacity: 0.4; cursor: not-allowed; }
.multiselect-card.disabled:hover { transform: none; }

/* stiltestEE (2026-07-16): Materialienfrage - Bildkarten MIT sichtbarem
   Label + kurzer Beschreibung darunter (anders als die übrigen
   Mehrfachauswahl-Bildfragen, die bewusst nur das Bild zeigen). */
.image-card-grid.layout-multiselect.layout-materials {
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 641px) {
  .image-card-grid.layout-multiselect.layout-materials {
    grid-template-columns: repeat(3, 1fr);
  }
}
.image-card-grid.layout-materials .image-card {
  border: 3px solid transparent;
  box-shadow: var(--shadow-card);
  border-radius: var(--radius-md);
  background: var(--color-bg-card);
}
.image-card-grid.layout-materials .image-card.selected {
  border-color: var(--color-terracotta);
}
.image-card-grid.layout-materials .image-card-photo {
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
}
.image-card-grid.layout-materials .image-card-body { padding: 10px 12px; }
.image-card-grid.layout-materials .image-card-label { font-size: 14px; }
.image-card-grid.layout-materials .image-card-desc { font-size: 12.5px; }

/* V4: Raumvergleiche (4x A/B, große Bilder nebeneinander) */
.raumvergleich-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 24px;
}
.raumvergleich-card {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  border: 3px solid transparent;
  box-shadow: var(--shadow-card);
  background: var(--color-bg-card);
  transition: border-color 0.15s ease, transform 0.15s ease;
  padding-bottom: 12px;
}
.raumvergleich-card:hover { transform: translateY(-2px); }
.raumvergleich-card.selected { border-color: var(--color-terracotta); }
.raumvergleich-card img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: contain;
  background: var(--color-beige);
}
.raumvergleich-label { font-weight: 600; font-size: 14px; padding: 10px 12px 2px; }
.raumvergleich-text { font-size: 12.5px; color: var(--color-text-soft); padding: 0 12px; }

.raumvergleich-card-check {
  position: absolute; top: 12px; right: 12px;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,0.9);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; color: var(--color-terracotta);
  opacity: 0; transition: opacity 0.15s ease;
}
.raumvergleich-card.selected .raumvergleich-card-check { opacity: 1; }

.raumvergleich-arrow-label {
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-soft);
  padding: 8px 8px 0;
}

.vergleich-hint {
  font-family: "Lato", sans-serif;
  font-size: 13.5px;
  color: var(--color-text-soft);
  text-align: center;
  margin: 10px 0 0;
}

.raumvergleich-both-btn {
  display: block;
  width: 100%;
  margin: 14px 0 0;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  border: 2px solid var(--color-border);
  background: var(--color-bg-card);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.raumvergleich-both-btn:hover { border-color: var(--color-terracotta); }
.raumvergleich-both-btn.selected { border-color: var(--color-terracotta); background: var(--color-beige); }

.raumvergleich-none-btn {
  display: block;
  width: 100%;
  margin: 10px 0 0;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  border: 2px solid var(--color-border);
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-soft);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.raumvergleich-none-btn:hover { color: var(--color-text); border-color: var(--color-border); }
.raumvergleich-none-btn.selected { border-color: var(--color-terracotta); color: var(--color-text); background: var(--color-beige); }

/* STILTEST: optionaler "Gefaellt mir alles nicht"-Button unter dem Bilder-Grid
   bei Mehrfachauswahl-Fragen (aktuell nur Farbsicherheitsfrage). */
.none-of-these-btn {
  display: block; width: 100%; margin: 14px 0 0; padding: 10px 16px;
  border-radius: var(--radius-md); border: 2px solid var(--color-border);
  background: transparent; font-family: inherit; font-size: 13px; font-weight: 600;
  color: var(--color-text-soft); cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease;
}
.none-of-these-btn:hover { color: var(--color-text); border-color: var(--color-sage); }

/* Style rating screen - STILTEST: alle 8 bekannten Stile untereinander auf
   einer Seite (.rate-known-block, nutzt .comparison-block fuer Abstand), statt
   einzeln paginiert - Bildgroesse deshalb etwas kompakter als vorher. */
.style-hero {
  width: 200px;
  max-width: 62%;
  margin: 12px auto 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  background: var(--color-beige);
}
.style-hero img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; }
.style-hero-body { padding: 12px 4px 4px; text-align: center; }
.style-name { font-size: 22px; margin-bottom: 6px; }
.style-desc { color: var(--color-text-soft); font-size: 14.5px; }

.rate-known-block:first-of-type { margin-top: 8px; }

.rating-block {
  margin-top: 16px;
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  box-shadow: var(--shadow-card);
}
.rating-question { font-weight: 600; margin-bottom: 14px; text-align: center; }
/* STILTEST (2026-07-13): 1-10-Slider ersetzt durch 4 grosse Buttons (Kims
   Vorgabe) - max. 2 nebeneinander, immer, auch auf Desktop (grosse, gut
   antippbare Flaechen statt eines feingranularen Reglers). */
.rating-button-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.rating-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 10px;
  border-radius: var(--radius-md);
  border: 2px solid var(--color-border);
  background: var(--color-bg);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
  min-height: 88px;
  justify-content: center;
}
.rating-button:hover { transform: translateY(-2px); }
.rating-button-emoji { font-size: 30px; line-height: 1; }
.rating-button-label { font-size: 13.5px; font-weight: 600; text-align: center; }
.rating-button.selected {
  border-color: var(--color-terracotta);
  background: var(--color-beige);
}

/* Text-Stilcheck grid + Weiterer-Abgleich grid */
.worst-fit-grid, .tiefer-graben-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 22px;
}
.worst-fit-card, .tiefer-graben-card {
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  border: 3px solid transparent;
  position: relative;
  box-shadow: var(--shadow-card);
}
.worst-fit-card img, .tiefer-graben-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--color-beige);
}
.worst-fit-card { cursor: default; }
.tiefer-graben-card.selected { border-color: var(--color-terracotta); }
.worst-fit-card-label, .tiefer-graben-card-label {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.55), transparent);
  color: #fff; font-size: 13px; font-weight: 600; padding: 20px 10px 8px;
}
.tiefer-graben-card-check {
  position: absolute; top: 8px; right: 8px;
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(255,255,255,0.92);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-terracotta); font-size: 13px; opacity: 0;
}
.tiefer-graben-card.selected .tiefer-graben-card-check { opacity: 1; }
.tiefer-graben-card.disabled { opacity: 0.4; cursor: not-allowed; }

/* Text-Stilcheck (3 Kacheln, reine Bilder ohne Rahmen/Text) */
.worst-fit-grid { grid-template-columns: repeat(3, 1fr); }
.worst-fit-card, .tiefer-graben-card {
  border: none;
  box-shadow: none;
  border-radius: var(--radius-sm);
}

/* Comparison screen - nutzt das Raumvergleich-Kartendesign (siehe oben) */
.comparison-block { margin-top: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--color-border); }
.comparison-block:last-of-type { border-bottom: none; }
.comparison-block-title { font-size: 19px; margin: 0 0 10px; }

/* STILTEST (2026-07-15): gruener Zwischentitel vor den 2 Stilmix-Vergleichen
   ("Die letzten Zwei") am Ende der finalen Vergleichsseite. */
.stilmix-final-heading {
  background: #eef1ec; border: 1px solid var(--color-sage); border-radius: var(--radius-lg);
  padding: 16px 22px; margin-top: 32px; font-size: 17px; font-weight: 600;
  color: var(--color-sage-dark, var(--color-sage)); text-align: center;
}
.stilmix-final-subtext { margin-top: 8px; font-size: 14.5px; font-weight: 400; }

/* Video placeholder */
.video-wrap { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-soft); margin: 20px 0; background: #efe9e2; }
.video-frame { width: 100%; aspect-ratio: 16 / 9; border: none; display: block; }
/* STILTEST (2026-07-09g): erscheint nach Ende des Loading-Videos in exakt
   derselben Groesse/Position ueber dem Video (kein Layout-Sprung). */
.video-end-overlay { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-placeholder {
  width: 100%; aspect-ratio: 16 / 9;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  color: var(--color-text-soft); font-size: 13px;
  background: repeating-linear-gradient(135deg, #efe9e2, #efe9e2 12px, #e9e1d6 12px, #e9e1d6 24px);
}
.video-placeholder-icon {
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,255,255,0.85); display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: var(--color-sage-dark);
}

/* STILTEST (2026-07-14): Ladekreis ueber dem Vimeo-iframe, bis es geladen hat -
   verhindert den kurzen leeren Moment, bevor das Video ploetzlich startet. */
.video-loading-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: #efe9e2; transition: opacity 0.25s ease; z-index: 1;
}
.video-loading-overlay.is-hidden { opacity: 0; pointer-events: none; }
.video-loading-spinner {
  width: 40px; height: 40px; border-radius: 50%;
  border: 3px solid rgba(144, 159, 148, 0.3); border-top-color: var(--color-sage-dark);
  animation: video-spin 0.9s linear infinite;
}
@keyframes video-spin { to { transform: rotate(360deg); } }

/* Loading screen */
.loading-bar-track { height: 10px; background: var(--color-beige); border-radius: 999px; overflow: hidden; margin-top: 28px; position: relative; }
.loading-bar-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--color-sage), var(--color-terracotta));
  background-size: 200% 100%; animation: shimmer 2.4s linear infinite; transition: width 1s linear;
}
@keyframes shimmer { 0% { background-position: 0% 0; } 100% { background-position: 200% 0; } }
.loading-text { text-align: center; margin-top: 16px; color: var(--color-text-soft); font-size: 15px; }
.loading-motivation-text {
  text-align: center; font-size: 16px; color: var(--color-text);
  margin: 18px 0 0; padding: 0 6px; line-height: 1.6;
}
.loading-motivation-text p { margin: 0; }
.loading-motivation-text p + p { margin-top: 12px; }

/* Zitat-Layout: Kims Portrait links, Text daneben (Screens ohne Bild/Video) */
/* STILTEST (2026-07-09b): mehr Abstand zwischen Portrait+Sprechblase und der
   folgenden Ueberschrift/Frage - gilt fuer alle Screens mit diesem Muster. */
.quote-block { display: flex; align-items: flex-start; gap: 14px; margin-top: 22px; margin-bottom: 28px; }
.quote-portrait { width: 145px; flex-shrink: 0; }
.quote-portrait img { width: 100%; height: auto; display: block; }
.quote-bubble {
  position: relative; background: var(--color-bg-card); border-radius: var(--radius-md);
  padding: 18px 20px; box-shadow: var(--shadow-card); flex: 1;
}
.quote-bubble::before {
  content: ""; position: absolute; left: -8px; top: 22px; width: 16px; height: 16px;
  background: var(--color-bg-card); transform: rotate(45deg);
  box-shadow: -3px 3px 6px -4px rgba(58, 54, 50, 0.15);
}
.quote-bubble p { font-size: 15.5px; margin: 0 0 0.7em; white-space: pre-line; }
.quote-bubble p:last-child { margin-bottom: 0; }
.quote-citation { font-style: italic; color: var(--color-text-soft); margin-bottom: 10px; }
.quote-citation-author { display: block; font-size: 13px; margin-top: 4px; font-style: normal; }

@media (min-width: 480px) { .quote-portrait { width: 180px; } }

/* STILTEST: etwas groesseres Kim-Portrait fuer die neue Farbsicherheitsfrage. */
.quote-portrait.quote-portrait-lg { width: 170px; }
@media (min-width: 480px) { .quote-portrait.quote-portrait-lg { width: 210px; } }

/* STILTEST (2026-07-09g): auf Desktop (gleicher Breakpoint wie das
   Ergebnisseiten-Bildraster) darf Kims Portrait nochmal groesser sein. */
/* STILTEST (2026-07-10e): alle Kim-Portraits nochmal groesser, Desktop + Mobile. */
@media (min-width: 560px) {
  .quote-portrait { width: 230px; }
  .quote-portrait.quote-portrait-lg { width: 260px; }
}

/* Result page */
.result-headline-eyebrow { text-align: center; }
.result-headline { text-align: center; font-size: 32px; margin-bottom: 10px; }
.result-intro { text-align: center; color: var(--color-text-soft); }


/* Desktop/Tablet: drei gleich große Bilder nebeneinander */
.result-image-grid {
  display: none;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 24px 0;
}
@media (min-width: 560px) {
  .result-image-grid { display: grid; }
  .result-mini-moodboard { display: none; }
}
.result-image-card { border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-card); background: var(--color-bg-card); text-align: center; }
.result-image-card img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: var(--color-beige); }
.role-badge {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px; color: #fff; margin: 10px auto 4px;
}
.result-image-card-name { padding: 0 10px 12px; font-weight: 600; font-size: 15px; text-align: center; }

/* Mobil: Mini-Moodboard mit überlappenden Bildern */
.result-mini-moodboard {
  position: relative;
  margin: 44px 0 20px;
  padding-bottom: 10px;
}
.result-mini-moodboard .mini-main {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  background: var(--color-beige);
}
.result-mini-moodboard .mini-pair {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: -36px auto 0;
  position: relative;
  z-index: 2;
  width: 82%;
}
.result-mini-moodboard .mini-material,
.result-mini-moodboard .mini-accent {
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 4px solid var(--color-bg);
  box-shadow: var(--shadow-card);
  background: var(--color-beige);
}
.mini-moodboard-labels {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 16px;
  font-size: 13.5px;
  text-align: center;
}
.mini-moodboard-labels span { display: block; font-weight: 700; }
.mini-moodboard-labels .role-badge { display: inline-block; margin: 0 0 4px; }

.section-block { margin-top: 32px; }
.section-heading { font-size: 22px; margin-bottom: 12px; }
.result-blog-block {
  background: var(--color-bg-card); border-radius: var(--radius-md); padding: 20px 22px;
  box-shadow: var(--shadow-card); border-left: 5px solid var(--color-sage);
  font-size: 16px; line-height: 1.7;
}

/* STILTEST (2026-07-13): eigener, beige hinterlegter Kasten fuer "Zur
   Erklaerung" - steht VOR dem .result-blog-block ("So setzt du deinen Stil
   um"), dazwischen nur ein kleiner freier Absatz (kein eigener Kasten). */
.result-explanation-box {
  background: #f8f3ec; border: 1px solid #ffffff; border-radius: var(--radius-md); padding: 20px 22px;
  font-size: 16px; line-height: 1.7;
}
.result-explanation-box .role-badge { margin: 0 2px; }
.result-transition-text { text-align: center; font-style: italic; margin: 20px 0; }

/* STILTEST (2026-08-05, Kims Vorgabe): farbige Rollen-Ueberschrift ueber dem
   jeweiligen Stil-Absatz in .result-blog-block, 1:1 Text aus stilRollenTexte.js. */
.stil-rolle-block { margin-top: 18px; }
.stil-rolle-block:first-child { margin-top: 0; }
.stil-rolle-block .role-badge { display: block; width: fit-content; margin: 0 0 8px; }

/* V4.3: Stil 4/5 als "verbundene Karte" - Bilder groesser, Textbox optisch nach
   oben gezogen, sodass ihr Hintergrund bis knapp zur Bildmitte hinter den
   Bildern liegt. */
.extra-styles-card { position: relative; padding-top: 8px; }
.extra-styles-images {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-bottom: -64px;
}
.extra-styles-images img {
  width: 128px; height: 128px; object-fit: contain; border-radius: var(--radius-md);
  background: var(--color-beige);
  border: 4px solid var(--color-bg);
  box-shadow: var(--shadow-card);
}
.extra-styles-note {
  position: relative;
  z-index: 1;
  background: var(--color-beige);
  border-radius: var(--radius-md);
  padding: 80px 20px 20px;
  font-size: 14.5px;
  color: var(--color-text);
}
@media (max-width: 380px) {
  .extra-styles-images { margin-bottom: -50px; }
  .extra-styles-images img { width: 96px; height: 96px; }
  .extra-styles-note { padding-top: 64px; }
}

/* STILTEST: gruener Erklaerungskasten unter Stil 4/5 mit Beweis-Bildern -
   erscheint jetzt immer, deshalb bewusst freundlich/weich statt wie eine
   Warnbox. */
.special-hint-block {
  background: #eef1ec; border: 1px solid var(--color-sage); border-radius: var(--radius-lg); padding: 20px 22px;
  font-size: 14.5px; color: var(--color-text); line-height: 1.6;
}
.special-hint-heading { font-size: 17px; margin: 0 0 10px; color: var(--color-sage-dark, var(--color-sage)); }
.special-hint-block p { margin: 0; }
.special-hint-block p + p { margin-top: 10px; }
.special-hint-evidence { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.special-hint-evidence img {
  width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-sm);
  background: var(--color-beige); border: 2px solid #fff; box-shadow: var(--shadow-card);
}

.dna-paragraph {
  background: var(--color-bg-card); border-radius: var(--radius-md); padding: 20px 22px;
  box-shadow: var(--shadow-card); border-left: 5px solid var(--color-terracotta);
  font-size: 16px; line-height: 1.7;
}
.dna-paragraph p { margin: 0; }
.dna-paragraph p + p { margin-top: 12px; }

.challenge-block {
  background: #fdf1ec; border: 1.5px solid var(--color-terracotta); border-radius: var(--radius-md);
  padding: 20px; font-style: italic; color: var(--color-text); font-size: 16.5px;
}

/* STILTEST (2026-07-14): Hinweis-Kasten auf der finalen Vergleichsseite. */
.notice-box {
  background: #eef1ec; border: 1px solid var(--color-sage); border-radius: var(--radius-md);
  padding: 18px 20px; margin: 16px 0 20px; font-size: 15px; line-height: 1.6;
}
.notice-box-heading { font-size: 16px; margin: 0 0 8px; color: var(--color-sage-dark, var(--color-sage)); }
.notice-box p { margin: 0; }
.notice-box p + p { margin-top: 10px; }
.challenge-extra-list { list-style: none; padding: 0; margin: 12px 0 0; }
.challenge-extra-list li { padding: 6px 0; font-size: 14.5px; font-style: normal; }
.challenge-extra-list li::before { content: "• "; color: var(--color-terracotta); font-weight: 700; }
.challenge-reassurance { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid rgba(224, 122, 95, 0.25); font-style: normal; font-size: 14.5px; }
.wohn-dna-humor { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid rgba(144, 159, 148, 0.3); font-style: italic; font-size: 14.5px; color: var(--color-text-soft, inherit); }

.erster-schritt-block {
  background: var(--color-bg-card); border-left: 5px solid var(--color-sage); border-radius: var(--radius-md);
  padding: 20px 22px; font-weight: 600; color: var(--color-text); font-size: 16px; box-shadow: var(--shadow-card);
}

/* Pitch section - bewusst hervorgehoben */
.pitch-section {
  margin-top: 40px;
  background: linear-gradient(160deg, #eef1ee, #fff);
  border-radius: var(--radius-lg);
  padding: 26px 22px 30px;
  box-shadow: var(--shadow-soft);
  border: 3px solid var(--color-sage);
}
.pitch-bullets { list-style: none; padding: 0; margin: 16px 0 20px; display: flex; flex-direction: column; gap: 10px; }
.pitch-bullets li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.5; color: var(--color-text); }
.pitch-bullets li::before {
  content: "✓"; flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  background: var(--color-sage); color: #fff; font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.pitch-bullet-gift::before { content: "🎁" !important; background: none !important; font-size: 15px !important; }
.pitch-mockup { border-radius: var(--radius-md); overflow: hidden; margin: 18px 0; }
.pitch-motivation { font-style: italic; color: var(--color-sage-dark); margin-top: 4px; }
.pitch-duration-hint {
  background: var(--color-sage); color: #fff; text-align: center; font-style: italic;
  padding: 10px 16px; border-radius: var(--radius-md); margin-top: 4px;
}
.pitch-price { text-align: center; color: var(--color-text-soft); font-size: 13px; margin-top: 10px; }
/* STILTEST (2026-07-09): Kurs-Pitch (Angebots-Verzweigung Note 4-6). */
.pitch-subheading { font-size: 24px; margin: 34px 0 20px; }
.pitch-disclaimer { text-align: center; color: var(--color-text-soft); font-size: 12.5px; font-style: italic; margin-top: 12px; }

/* STILTEST (2026-07-09b): Kurs-Pitch-Redesign - Subheadline unter "Dein
   nächster Schritt", und die 3 "Ich habe den perfekten ersten Schritt..."-
   Punkte in Terracotta-Marker/Gruen-Text statt dem generischen Haekchen-Stil.
   STILTEST (2026-07-09g): Marker von Terracotta-Strich auf kleines
   Terracotta-Herz-Emoji geaendert (Kims Vorgabe). */
.pitch-course-subheadline { font-size: 17px; font-style: italic; color: var(--color-sage-dark); margin: 4px 0 16px; }
.pitch-section .pitch-bullets.pitch-punkte li::before {
  content: "🧡"; background: none; font-size: 13px;
  width: auto; height: auto; border-radius: 0; margin-top: 2px;
}
.pitch-section .pitch-bullets.pitch-punkte li { color: var(--color-sage-dark); }
/* kleiner Extra-Hinweis unter dem Kurs-CTA - bewusst AUSSERHALB des gruenen
   Pitch-Blocks positioniert (Kims Vorgabe), ruhiges dunkles Gruen statt Warnton. */
.pitch-disclaimer-course {
  text-align: center; color: var(--color-sage-dark); font-size: 13px; margin: 14px 4px 0;
  line-height: 1.5;
}

/* Footer nav (back link) */
.screen-nav { display: flex; justify-content: flex-start; margin-bottom: 6px; }
.back-link { background: none; border: none; color: var(--color-text-soft); font-size: 14px; cursor: pointer; padding: 6px 0; }
.back-link:hover { color: var(--color-sage-dark); }

/* Utility */
.mt-0 { margin-top: 0; }
.text-center { text-align: center; }

/* stiltestEE (2026-07-17): Raumdetails - jeder Raum in einem klar
   abgegrenzten Kasten mit großer Überschrift, kompakte Chip-Buttons statt
   großer option-cards (Kims Vorgabe: "visuell mehr erkennen, dass es jetzt
   um einen anderen Raum geht" + "insgesamt schlanker gestalten"). */
.room-detail-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 20px 20px 22px;
  margin-top: 22px;
}
.room-detail-card-heading {
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--color-terracotta);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-border);
}
.room-detail-question { margin-top: 14px; }
.room-detail-question:first-of-type { margin-top: 0; }
.room-detail-question-text { font-weight: 600; font-size: 14.5px; margin: 0 0 8px; }
.room-detail-hint { font-weight: 400; color: var(--color-text-soft); font-size: 13px; }
.room-detail-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.room-detail-chip {
  border: 1.5px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.room-detail-chip:hover { border-color: var(--color-sage); }
.room-detail-chip.selected {
  background: var(--color-terracotta);
  border-color: var(--color-terracotta);
  color: #fff;
}
.room-detail-chip.disabled { opacity: 0.35; cursor: not-allowed; }
.room-detail-chip.disabled:hover { border-color: var(--color-border); }

/* Schnell-Starter-Raum / Einrichtungsplan-Zusatzboxen */
.plan-sub-box {
  background: var(--color-beige);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  margin-top: 16px;
}
.plan-sub-box-heading { font-weight: 700; margin: 0 0 6px; }
.plan-image-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.plan-image-row img { width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: cover; border-radius: var(--radius-sm); }
@media (max-width: 640px) {
  .plan-image-row { grid-template-columns: repeat(3, 1fr); gap: 6px; }
}
.plan-investment-list { margin: 10px 0 0; padding-left: 20px; }
.plan-investment-list li { margin-bottom: 6px; }

/* Partner-Flow (Code anzeigen/eingeben, Namensfeld, Gewichtung) */
.form-field { margin-top: 18px; }
.form-field-label { display: block; font-weight: 600; font-size: 14.5px; margin-bottom: 8px; }
.form-field-input {
  width: 100%;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 15px;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg-card);
  box-sizing: border-box;
}
.form-field-input:focus { outline: none; border-color: var(--color-terracotta); }
.partner-code-box { margin-top: 18px; }
.partner-code-textarea,
textarea.form-field-input {
  width: 100%;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 14px;
  font-size: 13.5px;
  font-family: "Lato", monospace;
  color: var(--color-text);
  background: var(--color-bg-card);
  resize: vertical;
  box-sizing: border-box;
  line-height: 1.5;
}
.partner-code-textarea:focus { outline: none; border-color: var(--color-terracotta); }
.partner-code-textarea[readonly] { background: var(--color-beige); }
.partner-code-copied { color: var(--color-sage-dark); font-weight: 600; margin-top: 10px; }
.partner-code-error { color: #b3492f; font-weight: 600; margin-top: 10px; }
.swap-role-group { margin-top: 20px; }
.swap-role-group:first-of-type { margin-top: 12px; }
.swap-role-heading { font-size: 17px; margin: 0 0 8px; color: var(--color-sage-dark); }
.weight-option-list { margin-top: 10px; display: flex; flex-direction: row; gap: 8px; }
.weight-option-list .option-card { flex: 1; text-align: center; padding: 12px 4px; }
.weight-name-row { display: flex; justify-content: space-between; font-weight: 700; margin-top: 20px; padding: 0 4px; color: var(--color-terracotta); }
@media (max-width: 480px) {
  .weight-option-list { flex-wrap: wrap; }
  .weight-option-list .option-card { flex: 1 1 30%; }
}

/* ---- STILTEST (2026-08-03): Pitch-/Kurs-Angebot-CSS, portiert von stiltest/ ---- */
.pitch-section {
  margin-top: 40px;
  background: linear-gradient(160deg, #eef1ee, #fff);
  border-radius: var(--radius-lg);
  padding: 26px 22px 30px;
  box-shadow: var(--shadow-soft);
  border: 3px solid var(--color-sage);
}
.pitch-bullets { list-style: none; padding: 0; margin: 16px 0 20px; display: flex; flex-direction: column; gap: 10px; }
.pitch-bullets li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.5; color: var(--color-text); }
.pitch-bullets li::before {
  content: "✓"; flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  background: var(--color-sage); color: #fff; font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.pitch-bullet-gift::before { content: "🎁" !important; background: none !important; font-size: 15px !important; }
.pitch-mockup { border-radius: var(--radius-md); overflow: hidden; margin: 18px 0; }
.pitch-motivation { font-style: italic; color: var(--color-sage-dark); margin-top: 4px; }
.pitch-duration-hint {
  background: var(--color-sage); color: #fff; text-align: center; font-style: italic;
  padding: 10px 16px; border-radius: var(--radius-md); margin-top: 4px;
}
.pitch-price { text-align: center; color: var(--color-text-soft); font-size: 13px; margin-top: 10px; }
/* STILTEST (2026-07-09): Kurs-Pitch (Angebots-Verzweigung Note 4-6). */
.pitch-subheading { font-size: 24px; margin: 34px 0 20px; }
.pitch-disclaimer { text-align: center; color: var(--color-text-soft); font-size: 12.5px; font-style: italic; margin-top: 12px; }

/* STILTEST (2026-07-09b): Kurs-Pitch-Redesign - Subheadline unter "Dein
   nächster Schritt", und die 3 "Ich habe den perfekten ersten Schritt..."-
   Punkte in Terracotta-Marker/Gruen-Text statt dem generischen Haekchen-Stil.
   STILTEST (2026-07-09g): Marker von Terracotta-Strich auf kleines
   Terracotta-Herz-Emoji geaendert (Kims Vorgabe). */
.pitch-course-subheadline { font-size: 17px; font-style: italic; color: var(--color-sage-dark); margin: 4px 0 16px; }
.pitch-bullets.pitch-punkte li::before {
  content: "🧡"; background: none; font-size: 13px;
  width: auto; height: auto; border-radius: 0; margin-top: 2px;
}
.pitch-bullets.pitch-punkte li { color: var(--color-sage-dark); }
/* kleiner Extra-Hinweis unter dem Kurs-CTA - bewusst AUSSERHALB des gruenen
   Pitch-Blocks positioniert (Kims Vorgabe), ruhiges dunkles Gruen statt Warnton. */
.pitch-disclaimer-course {
  text-align: center; color: var(--color-sage-dark); font-size: 13px; margin: 14px 4px 0;
  line-height: 1.5;
}

/* STILTEST (2026-07-16): Kurs-Angebotsseite ("kurs-angebot"). */
.kurs-angebot-headline { font-size: 30px; line-height: 1.25; margin: 4px 0 10px; text-wrap: balance; }
@media (min-width: 640px) { .kurs-angebot-headline { font-size: 38px; } }

.img-placeholder {
  width: 100%; border-radius: var(--radius-md); background: var(--color-beige);
  border: 2px dashed var(--color-terracotta); display: flex; align-items: center;
  justify-content: center; text-align: center; color: var(--color-text-soft);
  font-size: 14px; margin: 16px 0; padding: 12px;
}

/* Generisches Foto zwischen zwei Abschnitten (Schlafzimmer, Vorher-Nachher,
   Kim/Einrichtungsmethode etc.) - ersetzt die fruehere .img-placeholder-Box
   an diesen Stellen, sobald ein echtes Bild da ist. */
.kurs-angebot-photo { width: 100%; border-radius: var(--radius-md); margin: 16px 0; display: block; object-fit: cover; }

/* Lifestyle-Hero: bestes Stilmix-Bild als Hintergrund, Kims transparentes
   KIM_LAPTOP.png-Foto exakt darueber gelegt (gleiche Groesse/Position). */
.hero-image-stack { position: relative; width: 100%; margin: 16px 0; border-radius: var(--radius-md); overflow: hidden; }
.hero-image-bg { width: 100%; display: block; }
.hero-image-overlay { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom left; }

.kurs-angebot-mockup { width: 100%; max-width: 320px; display: block; margin: 0 auto 16px; }

/* STILTEST (2026-08-04, Kims Vorgabe): Stil-Schnellstart-Mockup auf dem
   Ergebnisseiten-Pitch - am Handy volle Breite, am Desktop groesser als das
   generische .kurs-angebot-mockup (das war ihr insgesamt zu klein). */
.stil-schnellstart-mockup { width: 100%; display: block; margin: 0 auto 16px; }
@media (min-width: 640px) { .stil-schnellstart-mockup { max-width: 480px; } }

.kurs-angebot-checklist-note { color: var(--color-text-soft); font-size: 14px; margin-top: 10px; }

/* Gruener Social-Proof-Banner ueber "Das lernst du im Kurs" (Kims Vorgabe). */
.kurs-angebot-social-proof-banner {
  background: var(--color-sage); color: #fff; text-align: center; font-weight: 600;
  padding: 12px 18px; border-radius: var(--radius-md); margin: 16px 0; font-size: 15px;
}

/* "Wer steckt dahinter" - Ueber-mich-Block nach der FAQ (Kims Vorgabe). */
.ueber-mich-block { text-align: center; margin-bottom: 24px; }
.ueber-mich-photo { width: 220px; height: 220px; border-radius: 50%; object-fit: cover; margin: 8px auto 16px; display: block; }
.ueber-mich-block .screen-text { text-align: left; }

/* Zweite Testimonial-Runde (3 Bilder) soll auf Desktop immer in einer Reihe
   stehen, nicht auto-fit wie die erste Runde mit nur 2 Bildern (Kims Vorgabe). */
@media (min-width: 640px) { .testimonial-grid-3col { grid-template-columns: repeat(3, 1fr) !important; } }

/* Pfeile unter dem "Dein naechster Schritt"-Button auf der Ergebnisseite,
   damit der Button nicht uebersehen wird (Kims Vorgabe, 2026-07-16). Zeigen
   nach oben auf den Button, sanftes Auf-und-Ab zieht den Blick dorthin. */
.kurs-angebot-btn-arrows {
  display: flex; justify-content: center; gap: 22px; margin-top: 8px;
  font-size: 36px; color: var(--color-terracotta);
}
.kurs-angebot-btn-arrows span { display: inline-block; animation: kurs-angebot-arrow-bounce 1.4s ease-in-out infinite; }
.kurs-angebot-btn-arrows span:nth-child(2) { animation-delay: 0.15s; }
.kurs-angebot-btn-arrows span:nth-child(3) { animation-delay: 0.3s; }
@keyframes kurs-angebot-arrow-bounce {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50% { transform: translateY(-6px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .kurs-angebot-btn-arrows span { animation: none; opacity: 0.8; }
}

/* STILTEST (2026-08-05, Kims Vorgabe): Pfeile unter den Wahl-Buttons auf
   "schulnote-unsicherheit", sobald eine Option gewaehlt ist - zeigen (in
   Kims Gruen statt Terracotta) nach unten auf das aufklappende Angebot
   darunter, mehr Abstand als beim Terracotta-Pendant oben. */
.unsicherheit-offer-arrows {
  display: flex; justify-content: center; gap: 22px; margin: 24px 0 20px;
  font-size: 36px; color: var(--color-sage-dark);
}
.unsicherheit-offer-arrows span { display: inline-block; animation: unsicherheit-arrow-bounce 1.4s ease-in-out infinite; }
.unsicherheit-offer-arrows span:nth-child(2) { animation-delay: 0.15s; }
.unsicherheit-offer-arrows span:nth-child(3) { animation-delay: 0.3s; }
@keyframes unsicherheit-arrow-bounce {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50% { transform: translateY(6px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .unsicherheit-offer-arrows span { animation: none; opacity: 0.8; }
}

/* STILTEST (2026-07-16): Kims Vorgabe - die 3 Fallstricke ("Der Schnellschuss"
   etc.) hervorgehoben statt schlichter Absaetze. Erst als volle Terracotta-
   Flaeche mit weisser Schrift versucht - Kim fand das "zu knallig", jetzt
   helles Terracotta-Toenchen (wie .fuer-wen-nein) + Terracotta-Akzentstrich. */
.stil-kennen-punkte { display: flex; flex-direction: column; gap: 12px; margin: 16px 0; }
.stil-kennen-punkt {
  background: #faf1ee; color: var(--color-text); padding: 16px 18px;
  border-radius: var(--radius-md); font-size: 15px; line-height: 1.55;
  border-left: 4px solid var(--color-terracotta);
}
.stil-kennen-punkt strong { display: block; margin-bottom: 2px; color: var(--color-terracotta); }

/* STILTEST (2026-07-16): Kims Vorgabe - gruene Kaesten mit Emoji statt
   schlichter Liste (vorher beige). */
.vision-punkte { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 12px; }
.vision-punkte li {
  padding: 14px 16px; background: #eef2ee; border-radius: var(--radius-md);
  font-size: 15px; line-height: 1.5;
}
.vision-punkt-emoji { margin-right: 6px; }

.curriculum-grid { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.curriculum-card {
  background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-card);
  padding: 18px 20px; border-left: 4px solid var(--color-terracotta);
}
.curriculum-step { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-terracotta); font-weight: 700; }
.curriculum-card h3 { margin: 4px 0 8px; font-size: 19px; }
.curriculum-card p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--color-text); }

.geschenke-grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 16px; }
@media (min-width: 640px) { .geschenke-grid { grid-template-columns: repeat(3, 1fr); } }
.geschenk-card { background: #eef2ee; border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: 14px; text-align: center; }
.geschenk-card h3 { font-size: 17px; margin: 8px 0 6px; }
.geschenk-card p { font-size: 14px; line-height: 1.5; color: var(--color-text); margin: 0; }
.geschenk-price { margin-top: 8px !important; font-weight: 700; color: var(--color-sage-dark); }
.geschenk-price s { color: var(--color-text-soft); font-weight: 400; }

.testimonial-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
/* STILTEST (2026-07-16): auto-fit statt fester 3 Spalten - die erste
   Testimonial-Runde hat jetzt nur 2 Bilder (Kims Vorgabe), die sollen mittig
   nebeneinander stehen statt eine Luecke zu einer erzwungenen 3. Spalte zu
   lassen. Mobil bleiben sie wie gehabt untereinander (siehe Kims Vorgabe). */
@media (min-width: 640px) { .testimonial-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }
.testimonial-card { background: var(--color-beige); border-radius: var(--radius-md); padding: 18px; }
.testimonial-quote { font-size: 14px; line-height: 1.55; font-style: italic; margin: 0 0 10px; }
.testimonial-name { font-size: 13px; font-weight: 700; margin: 0; }
.testimonial-name span { font-weight: 400; text-transform: uppercase; letter-spacing: 0.04em; font-size: 11px; color: var(--color-text-soft); }
/* Bild-Testimonials (Screenshots) - weisser Hintergrund statt Beige, wie von
   Kim gewuenscht ("weißer Hintergrund, ein Kästen"). */
.testimonial-card-image { background: #fff; box-shadow: var(--shadow-card); padding: 10px; }
.testimonial-card-image img { width: 100%; border-radius: calc(var(--radius-md) - 6px); display: block; }

/* STILTEST (2026-09-17, Kims Vorgabe): kompakter Zusatzverkauf "Stil-Cheat-
   Sheet" (9 Euro) ganz unten auf "stil-ergebnis" - der einzige Pitch dort,
   deshalb bewusst farblich hervorgehoben (Terracotta-Rahmen, waermerer
   Verlauf) statt der vorherigen sehr ruhigen Variante. Weiterhin
   olivgruene Haekchen (.pitch-bullets). Text/Mockup nebeneinander erst ab
   640px wie .fuer-wen-grid; Lead-in + Pfeile (oben) leiten optisch dorthin. */
.cheatsheet-lead-in { margin-top: 40px; }
.cheatsheet-lead-in .screen-text { font-size: 17px; font-weight: 600; color: var(--color-text); }

.cheatsheet-block {
  margin-top: 4px;
  background: linear-gradient(160deg, #fff8f4, var(--color-beige) 150%);
  border: 2.5px solid var(--color-terracotta);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  box-shadow: var(--shadow-soft);
}
.cheatsheet-grid { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
@media (min-width: 640px) { .cheatsheet-grid { grid-template-columns: 1.15fr 0.85fr; } }
.cheatsheet-headline {
  font-family: var(--font-display); font-style: italic; font-weight: 600;
  font-size: 24px; line-height: 1.3; margin: 4px 0 12px; color: var(--color-text);
}
@media (min-width: 640px) { .cheatsheet-headline { font-size: 28px; } }
.cheatsheet-bullets { margin: 14px 0 18px; }
.cheatsheet-price-row { font-family: var(--font-display); font-size: 21px; margin: 4px 0 0; color: var(--color-text); line-height: 1.2; }
.cheatsheet-price-row strong { display: block; margin-top: 2px; font-size: 40px; font-weight: 700; color: var(--color-terracotta); }
.cheatsheet-checkout { margin-top: 28px; }
.cheatsheet-note { font-size: 13px; color: var(--color-text-soft); margin: 10px 0 0; }
.cheatsheet-visual { display: flex; justify-content: center; }
.cheatsheet-mockup { width: 100%; max-width: 320px; display: block; }

@media (max-width: 380px) {
  .cheatsheet-block { padding: 26px 18px; }
  .cheatsheet-headline { font-size: 21px; }
  .cheatsheet-lead-in .screen-text { font-size: 16px; }
}

.pricing-block {
  background: var(--color-beige); border-radius: var(--radius-md); padding: 28px 20px;
  text-align: center;
}
.price-row { margin: 6px 0; }
.price-original { color: var(--color-text-soft); font-size: 20px; margin-right: 10px; }
.price-new { color: var(--color-terracotta); font-size: 34px; font-weight: 700; }
.price-note { font-weight: 600; margin: 4px 0; }
.price-payment-note { color: var(--color-text-soft); font-size: 13px; margin: 4px 0 16px; }
.price-under-cta { font-size: 13px; color: var(--color-sage-dark); margin-top: 8px; }
.kurs-angebot-direkt-starten-label {
  text-align: center; color: var(--color-sage-dark); font-weight: 600;
  font-size: 14px; margin: -4px 0 12px;
}

/* STILTEST (2026-08-05, Kims Vorgabe): Bloecke fuer die kurzen Roter-Faden-/
   Stil-Schnellstart-Pitches, Struktur nach "Olli the Brain" (Spiegelung ->
   Luecke -> Inneres Bild -> Angebot -> Wertanker -> Kundenstimme ->
   Risiko-Abbau -> Preis -> EIN Button). Eigene, ruhige Abstaende statt der
   generischen .screen-text-Optik, damit sich jeder Block als eigener
   Gedanke liest statt als ein langer Absatz. */
.pitch-spiegelung .screen-text,
.pitch-luecke .screen-text {
  font-size: 16.5px;
  line-height: 1.6;
}
.pitch-schulnote-mikro {
  margin-top: 10px;
  font-style: italic;
  color: var(--color-sage-dark);
  font-size: 14.5px;
}
.pitch-inneres-bild-text {
  font-style: italic;
  text-align: center;
  color: var(--color-text);
  font-size: 17px;
  line-height: 1.6;
  padding: 0 8px;
}
.pitch-wertanker-text {
  font-weight: 600;
  font-size: 15.5px;
  margin-bottom: 4px;
}
.pitch-testimonial {
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 16px 18px;
  margin: 16px 0;
  text-align: left;
}
.pitch-testimonial-quote {
  font-style: italic;
  font-size: 15px;
  line-height: 1.55;
  margin: 0 0 6px;
  color: var(--color-text);
}
.pitch-testimonial-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-soft);
  margin: 0;
}
.pitch-risiko-text {
  font-size: 13.5px;
  color: var(--color-sage-dark);
  font-weight: 600;
  margin: 0 0 12px;
}

.fuer-wen-grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 16px; }
@media (min-width: 640px) { .fuer-wen-grid { grid-template-columns: 1fr 1fr; } }
.fuer-wen-col { padding: 16px 18px; border-radius: var(--radius-md); }
.fuer-wen-ja { background: #eef2ee; }
.fuer-wen-nein { background: #faf1ee; }
.fuer-wen-col h3 { font-size: 16px; margin: 0 0 10px; }
.fuer-wen-col ul { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.55; }
.fuer-wen-col li { margin-bottom: 8px; }

.faq-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.faq-item {
  background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-card);
  padding: 4px 18px;
}
.faq-item summary {
  cursor: pointer; list-style: none; padding: 14px 24px 14px 0; position: relative;
  font-weight: 600; font-size: 15px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; position: absolute; right: 0; top: 12px; font-size: 20px;
  color: var(--color-terracotta); font-weight: 400;
}
.faq-item[open] summary::after { content: "−"; }
.faq-item p { margin: 0 0 16px; font-size: 14px; line-height: 1.55; color: var(--color-text); }