/* ==========================================================================
   Companion-Stylesheet: Komponenten fuer das Vibe-Code-Review (Umbau 10/2026).

   Additiv wie sections.css und forms.css, keine Aenderung an style.css.
   Liest Variablen aus tokens.css. Die Ampelfarben sind die einzigen eigenen
   Farbwerte: sie sind inhaltlich festgelegt (gruen/gelb/rot/grau) und tragen
   nie allein die Bedeutung, jede Stufe hat eine sichtbare Beschriftung.
   ========================================================================== */

/* ---- Haken-Liste (Startseite, Pruefumfang kurz) ------------------------- */

.checks { list-style: none; margin: 0 0 1rem; padding: 0; }
.checks li { position: relative; padding-left: 1.7em; margin-bottom: .55rem; }
.checks li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--violet-600); font-weight: 700;
}
.section-white .checks li::before { color: var(--light-accent-text); }

/* ---- Nummerierte Liste mit Zaehler-Badge (Pruefumfang lang) ------------- */

.numbered {
  list-style: none; margin: 0; padding: 0; counter-reset: num;
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 34px;
}
@media (max-width: 760px) { .numbered { grid-template-columns: 1fr; } }
.numbered li { counter-increment: num; position: relative; padding-left: 3rem; min-height: 2.2rem; }
.numbered li::before {
  content: counter(num, decimal-leading-zero);
  position: absolute; left: 0; top: -.1rem;
  display: grid; place-items: center;
  width: 2.2rem; height: 2.2rem; border-radius: 10px;
  background: var(--violet-050); color: var(--violet-600);
  font-size: .8rem; font-weight: 700;
}
.numbered strong { color: var(--ink); }

/* ---- Hinweisbox "Wie geprueft wird" ------------------------------------- */

.note-box {
  border: 1px solid var(--light-line); border-left: 4px solid var(--light-accent-text);
  background: var(--light-surface); border-radius: var(--radius);
  padding: 22px 26px; max-width: 72ch;
}
.note-box p:last-child { margin-bottom: 0; }
p.note-box { margin: 0 0 2rem; }

/* ---- Ampel-Darstellung (illustrativ) ------------------------------------ */

.ampel {
  list-style: none; margin: 26px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 12px;
}
.ampel li {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface);
  font-weight: 600; font-size: .95rem;
}
.section-white .ampel li { border-color: var(--light-line); background: var(--light-surface); color: var(--light-ink); }
.ampel-dot { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.ampel-gruen .ampel-dot { background: #16A34A; }
.ampel-gelb  .ampel-dot { background: #EAB308; }
.ampel-rot   .ampel-dot { background: #DC2626; }
/* "Nicht pruefbar": hohler Kreis statt Fuellung, unterscheidbar auch ohne Farbe */
.ampel-grau  .ampel-dot { background: transparent; border: 2px dashed #8A877F; }

/* ---- Abgrenzung "Was das Review nicht ist" ------------------------------ */
/* Bewusst kein Warn-Look: neutrale Flaeche, Akzent nur im Symbol. */

.scope-out {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 28px 30px;
}
.scope-out ul { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 30px; }
@media (max-width: 760px) { .scope-out ul { grid-template-columns: 1fr; } }
.scope-out li { position: relative; padding-left: 2rem; }
.scope-out li::before {
  content: "⊘"; position: absolute; left: 0; top: -.15rem;
  font-size: 1.25rem; line-height: 1.4; color: var(--muted);
}
.scope-out strong { color: var(--ink); }
.scope-out > p { color: var(--ink-soft); max-width: 72ch; }
.scope-out > p:last-child { margin-bottom: 0; }

/* ---- Footer: Zeile "Weitere Marken" ------------------------------------- */

.footer-brands { margin-top: 34px; font-size: .82rem; color: #85879a; }
.footer-brands p { margin: 0; }
.footer-brands a { color: #c8c9d4; text-decoration: none; }
.footer-brands a:hover { color: #fff; text-decoration: underline; }
.footer-brands span { margin: 0 .35em; }
.footer-brands + .footer-bottom { margin-top: 16px; }

/* ---- Buchcover (Buchseite /vibe-coding-buch) ---------------------------- */

.book-cover { display: flex; justify-content: center; }
.book-cover img { width: 100%; max-width: 380px; height: auto; border-radius: 6px; box-shadow: var(--shadow-lg); }
.section-white .numbered strong { color: var(--light-ink); }

/* ---- Hervorgehobener Navigationspunkt ('nav_cta' im Seitenregister) ------ */

.primary-nav .nav-cta .btn,
.primary-nav .nav-cta .btn:hover,
.primary-nav .nav-cta .btn[aria-current="page"] { color: #fff; background: var(--gradient); padding: 9px 18px; font-weight: 600; }

/* ---- Hinweis unter Kaufbuttons (Buchseite) ------------------------------ */

.buy-note { font-size: .85rem; color: var(--ink-soft); margin: -6px 0 16px; }
.section-white .buy-note { color: var(--light-muted); }
.cta-band p.buy-note { color: rgba(255, 255, 255, .85); font-size: .85rem; margin-top: 0; }

/* ---- Vertrauensleiste bei reduzierter Bewegung --------------------------- */
/* style.css bricht die stehende Leiste um. Auf dem Handy wurden daraus vier
   bis fünf Zeilen. Hier bleibt sie einzeilig und lässt sich wischen. */

@media (prefers-reduced-motion: reduce) {
  .trustbar-track { width: auto; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .trustbar-track::-webkit-scrollbar { display: none; }
  .trustbar-list { flex-wrap: nowrap; justify-content: flex-start; gap: 34px; margin: 0 auto; padding: 9px 20px; }
}

/* ---- Buch-Teaser auf der Startseite ------------------------------------- */

.book-teaser { align-items: center; }
.book-teaser .book-cover img { max-width: 260px; }