/* PureBell V2 — gemeinsame Basis aller V2-Seiten
 *
 * Scope: body.pb2 (gesetzt per body_class-Filter in functions.php fuer
 * Startseite, 404, Check, Opt-in und Danke). Seiten ohne diese Klasse — Blog,
 * Rechtstexte — behalten unveraendert das Tokenset aus style.css.
 *
 * Geladen VOR den seitenspezifischen V2-Stylesheets (home-v2.css,
 * check-v2.css, optin-v2.css, danke-v2.css, error-v2.css).
 *
 * Schriftgewichte: geladen sind Manrope 700/800 und Inter 400-700. Der
 * Entwurf nutzte 880-950 — hier konsequent 800 (Manrope) bzw. 600/700 (Inter).
 *
 * Kontraste (Stand: Rueckkehr auf das Signal-Orange #FF7A1A, 28.07.2026):
 *   --pb2-orange     auf Papier 2,55:1 · auf Creme 2,30:1 · weiss darauf 2,61:1
 *                    — als Flaeche gewollt, besteht als Text-/Bedienelement-
 *                      kontrast KEIN AA. Offener Punkt in TODO.md.
 *   --pb2-orange-ink auf orange-soft 4,72:1 (fuer kleinen Text auf Pillen)
 *   --pb2-muted      auf Papier 7,10:1 · --pb2-on-dark auf Ink 11,52:1
 */

body.pb2 {
  --pb2-ink:          #171717;
  --pb2-ink-soft:     #2E2B28;
  --pb2-cream:        #F6F0E7;
  --pb2-paper:        #FFFCF7;
  --pb2-white:        #FFFFFF;
  --pb2-orange:       #FF7A1A;
  --pb2-orange-hover: #E06010;
  /* Nur fuer kleinen Text auf --pb2-orange-soft */
  --pb2-orange-ink:   #B84A00;
  --pb2-orange-soft:  #FFF1E5;
  --pb2-orange-line:  #FFD9B8;
  --pb2-sand:         #E9DED0;
  --pb2-muted:        #5B5650;
  --pb2-line:         #D8CDBF;
  --pb2-green:        #2F6B45;
  --pb2-green-soft:   #E2F0E7;
  --pb2-green-line:   #BFDDCB;
  --pb2-green-dark:   #8AD2A3;
  --pb2-yellow:       #8A5D08;
  --pb2-yellow-soft:  #FCF2D2;
  --pb2-yellow-line:  #E8D28A;
  --pb2-red:          #A8342D;
  --pb2-red-soft:     #F9E3E0;
  --pb2-red-line:     #E9C3BE;
  --pb2-on-dark:      #D6CEC5;
  --pb2-on-dark-line: rgba(255,255,255,.14);

  --pb2-shadow:    0 24px 70px rgba(38,27,20,.13);
  --pb2-shadow-sm: 0 14px 38px rgba(38,27,20,.08);
  --pb2-radius-lg: 30px;
  --pb2-radius:    18px;
  --pb2-radius-sm: 11px;
  --pb2-max:       1180px;
}

/* ─── Flaechen und Typografie ────────────────────────────────────── */
.pb2-page {
  background: var(--pb2-paper);
  color: var(--pb2-ink-soft);
  font-family: var(--font-body);
  line-height: 1.62;
}

.pb2-page h1,
.pb2-page h2,
.pb2-page h3 {
  margin-top: 0;
  color: var(--pb2-ink);
  font-family: var(--font-head);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.04em;
}

.pb2-page p { margin: 0 0 1rem; }
.pb2-page p:last-child { margin-bottom: 0; }
.pb2-page img { max-width: 100%; display: block; }

/* main.css setzt .section-Paddings global — die V2-Sektionen bringen ihr
   eigenes Raster mit und duerfen davon nicht ueberschrieben werden. */
.pb2-page .pb2-section { padding: 98px 0; }
.pb2-page .pb2-container {
  width: min(calc(100% - 40px), var(--pb2-max));
  margin-inline: auto;
}

/* ─── Buttons ────────────────────────────────────────────────────── */
.pb2-btn {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 22px;
  border: 2px solid transparent;
  border-radius: var(--pb2-radius-sm);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.pb2-btn:hover { transform: translateY(-1px); }

.pb2-btn--primary {
  color: var(--pb2-white);
  background: var(--pb2-orange);
  box-shadow: 0 10px 24px rgba(255,122,26,.20);
}
.pb2-btn--primary:hover { color: var(--pb2-white); background: var(--pb2-orange-hover); }

.pb2-btn--secondary {
  color: var(--pb2-ink);
  background: transparent;
  border-color: var(--pb2-ink);
}
.pb2-btn--secondary:hover { color: var(--pb2-paper); background: var(--pb2-ink); }

/* Auf oranger Flaeche kehrt sich das Verhaeltnis um */
.pb2-btn--onorange { color: var(--pb2-white); background: var(--pb2-ink); }
.pb2-btn--onorange:hover { color: var(--pb2-white); background: #000; }

/* Zurueckhaltende dritte Stufe (Ergebnis-Alternativen, Sekundaerwege) */
.pb2-btn--ghost {
  color: var(--pb2-ink-soft);
  background: transparent;
  border-color: var(--pb2-line);
}
.pb2-btn--ghost:hover { color: var(--pb2-ink); border-color: var(--pb2-muted); }

.pb2-btn--block { width: 100%; }

/* ─── Eyebrow ────────────────────────────────────────────────────── */
.pb2-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 20px;
  padding: 7px 13px;
  color: var(--pb2-orange-ink);
  background: var(--pb2-orange-soft);
  border: 1px solid var(--pb2-orange-line);
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .07em;
  line-height: 1.3;
  text-transform: uppercase;
}
.pb2-eyebrow::before {
  content: "";
  width: 8px; height: 8px;
  flex: none;
  background: var(--pb2-orange);
  border-radius: 50%;
}
/* Auf dunklem Grund traegt das helle Orange den Kontrast selbst */
.pb2-eyebrow--dark {
  color: #FF9D57;
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.18);
}
.pb2-eyebrow--dark::before { background: #FF9D57; }

/* ─── Announcement ───────────────────────────────────────────────── */
.pb2-announcement {
  padding: 10px 16px;
  color: var(--pb2-paper);
  background: var(--pb2-ink);
  font-size: .87rem;
  font-weight: 600;
  text-align: center;
}
.pb2-announcement strong { color: #FF9D57; font-weight: 700; }

/* ─── Section-Head ───────────────────────────────────────────────── */
.pb2-head { max-width: 780px; margin-bottom: 48px; }
.pb2-head--center { margin-inline: auto; text-align: center; }
.pb2-head h2 { margin-bottom: 18px; font-size: clamp(2.1rem, 4.1vw, 3.5rem); }
.pb2-head p { margin: 0; color: var(--pb2-muted); font-size: 1.06rem; }

/* ─── Haken- und Kreuzlisten ─────────────────────────────────────── */
.pb2-checks { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.pb2-checks li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  color: var(--pb2-ink-soft);
  font-size: .93rem;
}
.pb2-checks li::before { content: "✓"; color: var(--pb2-green); font-weight: 700; flex: none; }
.pb2-checks--dark li { color: #F0EAE4; }
.pb2-checks--dark li::before { color: var(--pb2-green-dark); }

/* ─── Personas + Ausschlussbox (Startseite und Opt-in) ───────────── */
.pb2-persona__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.pb2-persona__card {
  padding: 28px;
  background: var(--pb2-paper);
  border: 1px solid var(--pb2-line);
  border-radius: var(--pb2-radius);
}
.pb2-persona__tag {
  display: block;
  margin-bottom: 10px;
  color: var(--pb2-orange-ink);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.pb2-persona__card h3 { margin-bottom: 9px; font-size: 1.25rem; }
.pb2-persona__card p  { margin: 0; color: var(--pb2-muted); font-size: .95rem; }

.pb2-notfor {
  margin-top: 26px;
  padding: 30px 32px;
  background: var(--pb2-paper);
  border: 1px solid var(--pb2-line);
  border-left: 5px solid var(--pb2-ink);
  border-radius: 0 var(--pb2-radius) var(--pb2-radius) 0;
}
.pb2-notfor__tag {
  display: block;
  margin-bottom: 14px;
  color: var(--pb2-ink);
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 800;
}
.pb2-notfor ul { margin: 0; padding: 0; list-style: none; }
.pb2-notfor li {
  position: relative;
  padding: 7px 0 7px 28px;
  color: var(--pb2-muted);
}
.pb2-notfor li::before {
  content: "×";
  position: absolute;
  left: 0;
  color: #8A3D33;
  font-size: 1.15rem;
  font-weight: 700;
}
.pb2-check-teaser {
  margin-top: 26px;
  color: var(--pb2-muted);
}
.pb2-check-teaser a {
  color: var(--pb2-orange);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pb2-check-teaser a:hover { color: var(--pb2-orange-hover); }

@media (max-width: 940px) {
  .pb2-page .pb2-section { padding: 78px 0; }
}
@media (max-width: 650px) {
  .pb2-page .pb2-container { width: min(calc(100% - 28px), var(--pb2-max)); }
  .pb2-page .pb2-section { padding: 66px 0; }
  .pb2-announcement { font-size: .78rem; }
  .pb2-persona__grid { grid-template-columns: 1fr; }
}

/* main.css respektiert prefers-reduced-motion — das gilt hier ebenso. */
@media (prefers-reduced-motion: reduce) {
  .pb2-btn:hover { transform: none; }
}