/* Barden — Neuentwurf · Bauteile für Bewertungen, Konversion und Ratgeber
 *
 * Grundsatz für alle Kästen hier: Akzent oben oder als Fläche, NIE als
 * senkrechte Leiste links. Der linke Farbbalken ist das erkennbarste
 * Baukastenmuster überhaupt.
 */

/* ================================================== Bewertungen */

.bn-note {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: var(--bn-8);
  align-items: start;
}
.bn-note__wert { display: flex; align-items: baseline; gap: var(--bn-3); }
.bn-note__zahl {
  font-family: var(--bn-display); font-weight: 600;
  font-size: clamp(3.4rem, 2.4rem + 3vw, 5rem);
  line-height: .85; color: var(--bn-tinte);
  letter-spacing: -0.03em;
}
.bn-note__sterne { display: flex; gap: 3px; }
.bn-note__sterne svg { width: 19px; height: 19px; fill: #F5A524; }
.bn-note__quelle { margin: var(--bn-4) 0 var(--bn-2); font-size: var(--bn-klein); }
.bn-note__quelle strong { color: var(--bn-tinte); }

.bn-stimmen { display: grid; gap: var(--bn-4); }
.bn-stimme {
  background: var(--bn-papier);
  border: 1px solid var(--bn-linie);
  border-radius: var(--bn-radius-gross);
  padding: var(--bn-5);
}
.bn-stimme blockquote {
  border-left: 0; padding-left: 0;   /* Kadence setzt hier sonst eine linke Leiste */
  margin: 0 0 var(--bn-3);
  font-family: var(--bn-display);
  font-size: var(--bn-lead); line-height: 1.45;
  color: var(--bn-tinte);
}
.bn-stimme blockquote::before { content: "\201E"; }
.bn-stimme blockquote::after  { content: "\201C"; }
.bn-stimme figcaption { font-size: var(--bn-mini); color: var(--bn-leise); }

@media (max-width: 860px) { .bn-note { grid-template-columns: minmax(0, 1fr); gap: var(--bn-6); } }

/* ============================================== Schritte (1-2-3) */

.bn-schritte { display: grid; gap: var(--bn-5); counter-reset: schritt; }
.bn-schritt { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--bn-4); align-items: start; }
.bn-schritt::before {
  counter-increment: schritt;
  content: counter(schritt);
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bn-rot-hell); color: var(--bn-rot);
  font-family: var(--bn-display); font-weight: 600; font-size: 1.1rem;
}
.bn-schritt h3 { margin: 6px 0 4px; font-size: var(--bn-body); }
.bn-schritt p { margin: 0; font-size: var(--bn-klein); }

/* ==================================== Antwortkasten im Ratgeber */

/* Der zitierfähige Teil: die direkte Antwort in ein bis zwei Sätzen.
 * Genau dieser Absatz ist das, was Suchmaschinen als Snippet und
 * KI-Systeme als Zitat übernehmen — er steht deshalb ganz oben und
 * ist als Einheit erkennbar. Fläche statt Leiste. */
.bn-antwort {
  background: var(--bn-rot-hell);
  border: 1px solid #F4D4CC;
  border-radius: var(--bn-radius-gross);
  padding: var(--bn-5) var(--bn-6);
  margin: 0 0 var(--bn-6);
}
.bn-antwort__label {
  display: block;
  font-size: var(--bn-mini); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--bn-rot); margin-bottom: var(--bn-2);
}
.bn-antwort p {
  margin: 0; font-size: var(--bn-lead); line-height: 1.5;
  color: var(--bn-tinte);
}

/* ===================================== Artikel / Lesespalte */

.bn-artikel { max-width: var(--bn-schmal); margin-inline: auto; }
.bn-artikel > * + * { margin-top: var(--bn-4); }
.bn-artikel h2 { font-size: var(--bn-h3); margin-top: var(--bn-7); }
.bn-artikel h2 + p { margin-top: var(--bn-3); }
.bn-artikel ul { padding-left: 1.2em; }
.bn-artikel li + li { margin-top: var(--bn-2); }

.bn-praxis {
  background: var(--bn-warm);
  border: 1px solid var(--bn-linie);
  border-radius: var(--bn-radius-gross);
  padding: var(--bn-5) var(--bn-6);
  margin-top: var(--bn-7);
}
.bn-praxis h2 { margin: 0 0 var(--bn-2); font-size: var(--bn-body); }
.bn-praxis p  { margin: 0; font-size: var(--bn-klein); }

/* Verwandte Fragen */
.bn-verwandt { display: grid; gap: var(--bn-2); margin-top: var(--bn-5); }
.bn-verwandt a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--bn-4);
  padding: var(--bn-4) var(--bn-5);
  background: var(--bn-papier);
  border: 1px solid var(--bn-linie);
  border-radius: var(--bn-radius);
  text-decoration: none;
  font-size: var(--bn-klein); font-weight: 500; color: var(--bn-tinte);
  transition: border-color var(--bn-dauer) var(--bn-ease);
}
.bn-verwandt a:hover { border-color: var(--bn-tinte); }
.bn-verwandt a:focus-visible { outline: 2px solid var(--bn-rot); outline-offset: 3px; }
.bn-verwandt svg { width: 14px; height: 14px; fill: var(--bn-rot); flex: none; }

/* ======================================= Gegenüberstellung */

.bn-vergleich { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bn-4); }
.bn-vergleich__spalte {
  border: 1px solid var(--bn-linie);
  border-radius: var(--bn-radius-gross);
  padding: var(--bn-5);
  background: var(--bn-papier);
}
.bn-vergleich__spalte--jetzt { background: var(--bn-warm-2); }
.bn-vergleich__kopf {
  font-size: var(--bn-mini); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--bn-leise); margin-bottom: var(--bn-3);
}
.bn-vergleich__spalte--danach .bn-vergleich__kopf { color: var(--bn-rot); }
.bn-vergleich ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--bn-3); }
.bn-vergleich li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--bn-2); font-size: var(--bn-klein); }
.bn-vergleich li svg { width: 18px; height: 18px; margin-top: 2px; }
.bn-vergleich__spalte--jetzt svg  { fill: var(--bn-leise); }
.bn-vergleich__spalte--danach svg { fill: var(--bn-rot); }
@media (max-width: 700px) { .bn-vergleich { grid-template-columns: minmax(0, 1fr); } }

/* ================================ Redaktionshinweis (nur Staging) */

/* Verschwindet von selbst, sobald WP_ENVIRONMENT_TYPE nicht mehr
 * 'staging' ist — kein Aufräumen von Hand vor dem Go-live. */
.bn-redaktion {
  background: #FFF8E6;
  border: 1px dashed #E0B860;
  border-radius: var(--bn-radius);
  padding: var(--bn-4) var(--bn-5);
  margin: var(--bn-4) 0;
  font-size: var(--bn-klein);
  color: #6B5220;
}
.bn-redaktion strong { color: #4A3714; }