/* RoastMe only: loaded by index.html, danke.html and state.html, never by the Leck
   templates. Product colour is cyan; the slider keeps its semantic heat scale. */
.btn--primary {
  background: var(--cyan);
  color: var(--ink);
}
.btn--primary:hover {
  background: var(--ink);
  color: var(--cyan);
}
.btn--primary:focus-visible {
  outline-color: var(--ink);
  outline-offset: 4px;
}
.btn--primary[disabled], .btn--primary[disabled]:hover {
  background: var(--cyan);
  color: var(--ink);
}

/* Keep the large stage. Give the right shoulder air inside the oval and align
   the head optically, without moving the quote or shrinking the character. */
.hero__visual::before { inset: -8% -14% -3% -14%; }
.buddy { transform: translateX(-5%); }

/* Danke-Seite (Walter, 14.09.): Karton-Hero wie die LP, v3-Porträt in der Papier-Karte
   des Schiebers, Cyan-Oval dahinter statt davor (das alte .sticker hatte keinen z-index,
   das Oval lag über dem Foto). Fortschritts-Akzent Cyan statt Orange = Produktfarbe. */
/* Kein Oval: die Porträts sind nicht freigestellt. Stattdessen ein cyanes Blatt
   schräg hinter der Papier-Karte, Collage wie auf dem Karton der Website. */
.danke .hero__visual::before {
  inset: 3% -3.5% -3% 3.5%;
  border-radius: 12px;
  transform: rotate(-2.5deg);
  box-shadow: 4px 4px 0 rgba(38, 38, 36, .18);
}
.portrait {
  position: relative;
  z-index: 1;
  margin: 0;
  background: #f3ead8;
  border-radius: 8px;
  box-shadow: 4px 4px 0 #c8ad86;
}
.portrait img { display: block; width: 100%; height: auto; border-radius: 8px; }
.steps--progress .is-now::before { background: var(--cyan); }

/* Befund-Sektion: Cyan-Test statt Anthrazit (Walter, 14.09.). Nur RoastMe,
   deshalb hier und nicht in style.css; die Bogen-Übergänge färben mit. */
.band--cyan { background: var(--cyan); color: var(--ink); }
.band--cyan .section-h2 { color: var(--ink); }
.band--cyan .befund-note { color: rgba(38, 38, 36, .88); max-width: 46ch; }
.band--cyan ::selection { background: var(--ink); color: #fff; }
.arc--roast path { fill: var(--cyan); }
/* Safari/iPhone zeigt am Übergang Band → Bogen eine Haarlinie des Grau dahinter:
   1px Überlappung nach oben schließt die Naht (Gegenstück zum margin-bottom: -1px in style.css). */
.arc--roast { margin-top: -1px; }
.befund-list { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 10px; max-width: 46ch; }
.befund-list li { position: relative; padding-left: 20px; color: rgba(38, 38, 36, .88); }
.befund-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .45em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink);
}
.befund-list b { color: var(--ink); }
/* Echter Report-Ausschnitt als Bild: die Karte bringt ihre weiße Fläche selbst mit. */
.report-shot { margin: 0; }
.report-shot img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, .28));
}

.lvl__hint {
  margin: 0 0 24px;
  color: var(--ink);
  font-size: 16px;
}
.lvl__figure {
  background: #f3ead8;
  border-radius: 8px;
  box-shadow: 4px 4px 0 #c8ad86;
}
/* Solid paper surfaces and a cut edge connect the control to the props. */
.lvl__track { background: #dcc5a3; box-shadow: 0 2px 0 #ad8a5d; }
.lvl__thumb { background: #faf5e9; box-shadow: 2px 4px 0 #ad8a5d; }
.lvl__dot { background: #faf5e9; }
.lvl__stop { min-height: 56px; }
.lvl__stoplabel { font-size: 16px; }
/* Fixed framing across the three portraits; only the expression changes. */
.lvl__img { transform: none; transition: opacity .3s ease-out; }
.lvl:has(input:checked) .lvl__img[data-lvl] { transform: none; }

@media (max-width: 900px) {
  .hero__visual::before { inset: -7% -11% -2% -11%; }
  .buddy { transform: translateX(-2%); }
  /* Reserve room for the longest description so the form stays still. */
  .lvl__meta { min-height: 112px; }
}
@media (prefers-reduced-motion: reduce) {
  .lvl__img { transition: none; }
}