/* BuyProof – Seitenspezifisches. Baut auf design.css auf und fügt nur hinzu,
   was mehrfach vorkommt. Alles Allgemeine steht dort. */

.site-head{ position:sticky; top:0; z-index:30; background:var(--bg);
  border-bottom:1px solid var(--line); }
.site-head-inner{ display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-4); padding:var(--space-3) var(--space-4); flex-wrap:wrap; }
.brand{ display:flex; align-items:baseline; gap:var(--space-3);
  text-decoration:none; color:var(--text); }
.brand-mark{ font-weight:800; font-size:var(--text-xl);
  letter-spacing:var(--tracking-tight); }
.brand-claim{ color:var(--text-faint); font-size:var(--text-sm); }
.site-nav{ display:flex; gap:var(--space-2); flex-wrap:wrap; }

.hero{ padding-top:var(--space-8); }
.hero-eyebrow{ color:var(--text-faint); font-size:var(--text-sm);
  letter-spacing:.06em; text-transform:uppercase; margin-bottom:var(--space-3); }
.notice{ border-left:3px solid var(--line-strong); padding-left:var(--space-4);
  color:var(--text-muted); margin-top:var(--space-6); }

.steps{ list-style:none; padding:0; margin:0; display:grid; gap:var(--space-4);
  grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); counter-reset:step; }
.steps li{ background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:var(--space-5);
  display:flex; flex-direction:column; gap:var(--space-2); }
.step-no{ display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:var(--radius-pill);
  background:var(--accent); color:var(--on-accent);
  font-size:var(--text-sm); font-weight:700; }

.evidence-list{ margin:var(--space-3) 0 0; padding-left:var(--space-5); }
.evidence-list li{ margin-bottom:var(--space-1); }

.trust-legend{ display:flex; flex-direction:column; gap:var(--space-2);
  margin-top:var(--space-4); }
.verdict-legend{ display:flex; flex-wrap:wrap; gap:var(--space-2);
  margin:var(--space-4) 0; }

.faq{ display:flex; flex-direction:column; gap:var(--space-3); }
.faq details{ padding:var(--space-4) var(--space-5); }
.faq summary{ cursor:pointer; font-weight:600; font-size:var(--text-lg);
  list-style:none; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; float:right; color:var(--text-faint);
  font-weight:400; }
.faq details[open] summary::after{ content:"–"; }
.faq p{ margin:var(--space-3) 0 0; color:var(--text-muted); }

.site-foot{ border-top:1px solid var(--line); padding:var(--space-6) 0 var(--space-8);
  margin-top:var(--space-7); color:var(--text-muted); }
.site-foot a{ color:var(--text-muted); }

/* Kontobereich */
.app-shell{ max-width:760px; margin:0 auto; padding:var(--space-6) var(--space-4); }
.app-panel{ margin-bottom:var(--space-5); }
.app-message{ margin:var(--space-4) 0; padding:var(--space-3) var(--space-4);
  border-radius:var(--radius-sm); border:1px solid var(--line);
  background:var(--surface-2); font-size:var(--text-sm); }
.app-message--error{ border-color:var(--warn); background:var(--warn-soft);
  color:var(--warn); }
.app-message--ok{ border-color:var(--ok); background:var(--ok-soft);
  color:var(--ok); }
.item-list{ display:flex; flex-direction:column; gap:var(--space-4); }
.item{ border:1px solid var(--line); border-radius:var(--radius);
  padding:var(--space-4); background:var(--surface); }
.item-head{ display:flex; justify-content:space-between; gap:var(--space-4);
  align-items:flex-start; flex-wrap:wrap; }
.item-title{ font-weight:600; }
.item-meta{ display:flex; gap:var(--space-3); flex-wrap:wrap;
  color:var(--text-muted); font-size:var(--text-sm); margin-top:var(--space-2); }
.item-actions{ display:flex; gap:var(--space-2); flex-wrap:wrap;
  margin-top:var(--space-4); align-items:center; }
.alert-row{ display:flex; justify-content:space-between; gap:var(--space-3);
  align-items:center; flex-wrap:wrap;
  border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:var(--space-2) var(--space-3); font-size:var(--text-sm);
  margin-top:var(--space-2); }

/* Preisverlauf */
.history-windows{ display:flex; gap:var(--space-2); flex-wrap:wrap;
  margin-bottom:var(--space-4); }
.history-stats{ display:grid; gap:var(--space-3);
  grid-template-columns:repeat(auto-fit, minmax(140px,1fr));
  margin-bottom:var(--space-4); }
.stat{ border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:var(--space-3); background:var(--surface-2); }
.stat-label{ color:var(--text-muted); font-size:var(--text-sm);
  display:flex; align-items:center; gap:var(--space-2); }
.stat-value{ font-weight:700; font-size:var(--text-lg); margin-top:var(--space-1); }
.spark{ display:flex; align-items:flex-end; gap:2px; height:64px;
  border-bottom:1px solid var(--line); padding-bottom:2px; }
.spark i{ flex:1 1 auto; min-width:2px; background:var(--accent-soft);
  border-top:2px solid var(--accent); display:block; }
.spark i.is-dubious{ background:var(--unknown-soft);
  border-top-color:var(--line-strong); opacity:.6; }

/* Geteilter Fund */
.share-card{ max-width:520px; margin:var(--space-7) auto; }
.share-stale{ border:1px solid var(--warn); background:var(--warn-soft);
  color:var(--warn); border-radius:var(--radius-sm);
  padding:var(--space-3) var(--space-4); font-size:var(--text-sm);
  margin-bottom:var(--space-4); }

/* Rechtliches */
.legal{ max-width:var(--max-text); margin:0 auto; }
.legal h2{ margin-top:var(--space-6); }
.draft-banner{ border:1px solid var(--warn); background:var(--warn-soft);
  color:var(--warn); border-radius:var(--radius);
  padding:var(--space-4); margin-bottom:var(--space-5); }
.draft-banner strong{ display:block; margin-bottom:var(--space-2); }