/* ============================================================
   Beispielreport (#101) — eigenstaendiges, durchkomponiertes
   Design-D-Dokument. Nutzt Tokens/Fonts aus parinhood.css
   (Playfair Display + Hanken Grotesk, Creme/Salbei/Terrakotta).
   Eine Typo-Hierarchie, ein Kartenrhythmus statt additiver
   Module — Gegenentwurf zum "Flickenteppich" des Vorgaengers.
   ============================================================ */

.br-body{background:var(--paper)}

/* ---- Toolbar (Bildschirm-only) ---- */
.br-toolbar{
  position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:10px 14px;
  padding:14px 24px;background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:saturate(150%) blur(10px);border-bottom:1px solid var(--line);
}
/* Toolbar-Zeile mit zwei Aktionen (Sponsor-Summary-Link + Drucken) — muss auf
   schmalen Viewports (375px) umbrechen koennen statt den Body horizontal zu
   ueberlaufen (Root-Cause: 3 Buttons in einer flex-nowrap-Zeile). */
.br-toolbar .row{flex-wrap:wrap}

.br-doc{max-width:760px;margin:0 auto;padding:0 24px 80px}

/* ---- Kopf ---- */
.br-head{padding:48px 0 36px;border-bottom:1px solid var(--line)}
.br-head-row{display:flex;gap:22px;align-items:flex-start}
.br-cover{width:88px;height:88px;border-radius:var(--r-sm);object-fit:cover;flex:none;box-shadow:var(--shadow)}
.br-cover-empty{background:var(--guardian-tint)}
.br-head-text h1{
  font-family:var(--display-serif);font-weight:700;font-size:clamp(1.8rem,4vw,2.6rem);
  line-height:1.08;letter-spacing:-.02em;margin:10px 0 8px;
}
.br-basis{color:var(--ink-soft);font-size:.98rem}

/* ---- Gemeinsamer Sektions-Rhythmus ---- */
.br-section{padding:36px 0;border-bottom:1px solid var(--line)}
.br-section:last-of-type{border-bottom:none}
.br-section h2{
  font-family:var(--display-serif);font-weight:700;font-size:clamp(1.35rem,2.6vw,1.7rem);
  letter-spacing:-.01em;margin:0 0 12px;
}
.br-section h3{font-family:var(--display);font-weight:600;font-size:1.05rem;margin:0 0 10px}
.br-lede{color:var(--ink-soft);font-size:.98rem;margin:0 0 18px;max-width:62ch}
.br-flag-row{margin-bottom:14px}

/* ---- Prosa (Auf einen Blick) ---- */
.br-prose p{margin:0 0 10px;color:var(--ink);line-height:1.65}
.br-prose p:last-child{margin-bottom:0}

/* ---- Kategorien-Detail ---- */
.br-kat-list{display:flex;flex-direction:column;gap:14px}
.br-kat-row{padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card)}
.br-kat-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.br-kat-label{font-family:var(--display);font-weight:600;font-size:1rem}
.br-belege{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.br-belege li{font-size:.9rem;color:var(--ink-soft);line-height:1.55;padding-left:14px;position:relative}
.br-belege li::before{content:"—";position:absolute;left:0;color:var(--ink-mute)}
/* .src ist fuer kurze Inline-Links mit white-space:nowrap gedacht (parinhood.css) —
   hier stehen lange Folgentitel, daher explizit auf normalen Umbruch zuruecksetzen
   (sonst Overflow bei schmalen Viewports, siehe A4-Root-Cause-Learning). */
.br-belege .src{white-space:normal;overflow-wrap:anywhere}
.br-belege-empty{margin:10px 0 0;font-size:.88rem;color:var(--ink-mute)}

/* ---- Grenzgenre-Entschaerfungstipps (#44) — nur "Fuer dich", nie oeffentlich ---- */
.br-tipps{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}
.br-tipps-head{font-family:var(--display);font-weight:600;font-size:.82rem;color:var(--guardian-deep);margin:0 0 6px}
.br-tipps .br-list li{font-size:.88rem}

/* ---- Radar / Spidergraph (Werte identisch zu pages.py::_EP_PAGE / index.html,
   damit die Achsenbeschriftungen wie dort nicht am SVG-Rand abgeschnitten werden) ---- */
.radar-wrap{max-width:270px;margin:2px auto 16px;text-align:center}
.radar-svg{width:100%;height:auto;overflow:visible}
.radar-svg .radar-axis-label{font-family:var(--body);font-size:9px;font-weight:600;fill:var(--ink-mute)}
.radar-positive-note{text-align:center;font-size:.86rem;font-weight:600;color:var(--guardian-deep);margin-top:8px}
.radar-explainer{text-align:center;font-size:.78rem;color:var(--ink-mute);line-height:1.45;margin-top:6px}

/* ---- Wirkungs-Tags ---- */
.br-tag-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.br-tag{padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card)}
.br-tag-head{margin-bottom:8px}
.br-tag-begr{font-size:.86rem;color:var(--ink-soft);line-height:1.5;margin:0}

/* ---- Sprachmetriken ---- */
.br-metric-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.br-metric{padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card)}
.br-metric-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.br-metric-label{font-family:var(--display);font-weight:600;font-size:.94rem}
.br-metric-value{font-family:var(--display-serif);font-weight:700;font-size:1.3rem;color:var(--guardian-deep);white-space:nowrap}
.br-metric-value .br-metric-unit{font-family:var(--body);font-weight:600;font-size:.72rem;color:var(--ink-mute);margin-left:4px}
.br-metric-ziel{font-size:.84rem;color:var(--ink-soft);margin:8px 0 4px}
.br-metric-explain{font-size:.84rem;color:var(--ink-soft);margin:0 0 4px;line-height:1.5}
.br-metric-fach{font-size:.76rem;color:var(--ink-mute);margin:0}

/* ---- Staerken / Empfehlungen ---- */
.br-two-col{display:grid;grid-template-columns:1fr 1fr;gap:28px}
@media(max-width:640px){.br-two-col{grid-template-columns:1fr}}
.br-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.br-list li{font-size:.94rem;color:var(--ink);line-height:1.55;padding-left:16px;position:relative}
.br-list li::before{content:"·";position:absolute;left:0;color:var(--guardian);font-weight:800}

/* ---- Leserichtung: "Fuer dich" (Verbesserung) vs. "Zum Vorzeigen" (Sponsoren,
   Plattformen, Foerderer, Eltern) — Twin-Befragung (e): beide muessen sichtbar
   getrennt sein, direkt an der Sektions-Ueberschrift. ---- */
.br-audience{
  display:inline-flex;align-items:center;font-family:var(--body);font-size:.62rem;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:100px;
  margin-left:8px;vertical-align:middle;white-space:nowrap;
}
.br-audience.fuer-dich{
  background:var(--guardian-tint);color:var(--guardian-deep);
  border:1px solid color-mix(in srgb,var(--guardian) 22%,transparent);
}
.br-audience.zum-vorzeigen{
  background:var(--amber-tint);color:var(--amber-text);
  border:1px solid color-mix(in srgb,var(--amber) 24%,transparent);
}

/* ---- Kritischer Befund (prominent, nicht im Kleingedruckten) ---- */
.br-kritisch{border-radius:var(--r-sm);padding:18px 20px;margin-top:4px}
.br-kritisch.attention{background:var(--amber-tint);border:1px solid color-mix(in srgb,var(--amber) 26%,transparent)}
.br-kritisch.critical{background:var(--coral-tint);border:1px solid color-mix(in srgb,var(--coral) 26%,transparent)}
.br-kritisch blockquote{
  margin:12px 0;padding-left:14px;border-left:3px solid var(--ink-mute);
  font-style:italic;color:var(--ink);font-size:.96rem;line-height:1.55;
}
.br-kritisch p{color:var(--ink);font-size:.94rem;line-height:1.6;margin:8px 0 0}
.br-kritisch .br-kritisch-note{margin-top:10px;font-size:.82rem;color:var(--ink-soft)}
.br-kritisch-empty{font-size:.92rem;color:var(--ink-soft);line-height:1.6}

/* ---- Stimmen aus der Community (Feedback-Sektion) ---- */
.br-feedback-list{display:flex;flex-direction:column;gap:22px}
.br-feedback-group h3{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.br-feedback-count{
  font-family:var(--body);font-size:.76rem;font-weight:700;color:var(--ink-mute);
  text-transform:none;letter-spacing:0;
}
.br-quote{
  margin:8px 0;padding:10px 14px;border-left:3px solid var(--guardian);background:var(--card);
  border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:.94rem;color:var(--ink);line-height:1.55;
}
.br-quote-empty{font-size:.86rem;color:var(--ink-mute)}
.br-youth-signal{font-size:.84rem;color:var(--ink-soft);margin-top:6px}
.br-feedback-empty p{color:var(--ink-soft);font-size:.92rem;line-height:1.6;margin:0 0 10px}

/* ---- Methodik / Firewall / Kontakt ---- */
.br-methodik p{color:var(--ink-soft);font-size:.92rem;line-height:1.6;margin:0 0 12px}
.br-firewall{
  background:var(--guardian-tint);border:1px solid color-mix(in srgb,var(--guardian) 24%,transparent);
  border-radius:var(--r-sm);padding:14px 16px;color:var(--guardian-deep) !important;font-weight:600;
}
.br-firewall-mechanik{margin-top:10px}
.br-footer{padding:28px 0 0;color:var(--ink-mute);font-size:.86rem}
.br-footer a{color:var(--guardian);font-weight:600;text-decoration:none}

/* ---- Risiko-Report für Redaktionen (#128) — episodenfokussiert. Zeitstempel-
   Fundstellen (Radar + Faktencheck) und die chronologische Stellen-Zeitleiste
   nutzen dieselben Tokens wie br-kritisch/br-belege oben, eigene Klassen nur
   für die abweichende Struktur (Zeitstempel prominent, chronologische Liste). ---- */
.rk-findings{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.rk-findings li{padding:12px 14px;border-left:3px solid var(--line);background:var(--paper-2)}
.rk-findings blockquote{margin:6px 0;font-style:italic;color:var(--ink);font-size:.92rem;line-height:1.55}
.rk-findings p{margin:4px 0 0;color:var(--ink-soft);font-size:.88rem;line-height:1.55}
.rk-time{font-family:var(--display);font-weight:700;font-size:.78rem;color:var(--ink-mute)}

.rk-timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.rk-timeline-item{display:flex;gap:14px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card)}
.rk-timeline-time{font-family:var(--display-serif);font-weight:700;font-size:1rem;color:var(--guardian-deep);flex:none;min-width:52px}
.rk-timeline-body{flex:1;min-width:0}
.rk-timeline-body p{margin:8px 0 0;color:var(--ink);font-size:.94rem;line-height:1.6}
.rk-timeline-body blockquote{margin:8px 0 0;padding-left:12px;border-left:3px solid var(--ink-mute);font-style:italic;color:var(--ink-soft);font-size:.9rem;line-height:1.55}
@media(max-width:480px){.rk-timeline-item{flex-direction:column;gap:6px}}

/* ---- Sponsor-Summary (#43) — Ein-Seiten-Ausleitung, "Zum Vorzeigen" pur ---- */
.sp-doc{max-width:640px}
.sp-chip-row{display:flex;flex-wrap:wrap;gap:8px}
.sp-count-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.sp-count-card{padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);display:flex;flex-direction:column;gap:4px}
.sp-count-age{font-family:var(--display);font-weight:600;font-size:.92rem}
.sp-count-num{font-size:.84rem;color:var(--ink-soft)}
.sp-badge-qr-row{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start}
.sp-badge-cell,.sp-qr-cell{display:flex;flex-direction:column;gap:8px;max-width:280px}
.sp-badge-cell img{display:block}
.sp-qr-placeholder{
  width:80px;height:80px;display:grid;place-items:center;text-align:center;
  border:1.5px dashed var(--line-strong,var(--line));border-radius:var(--r-sm);
  font-family:var(--display);font-weight:700;font-size:.76rem;color:var(--ink-mute);line-height:1.2;
}
.sp-firewall-foot p{color:var(--ink-mute);font-size:.86rem}
.sp-firewall-foot .br-firewall{color:var(--guardian-deep) !important;font-size:.92rem;margin-bottom:10px}

/* ============================================================
   Druck / PDF — @media print (Browser "Als PDF speichern")
   DIN A4, 16mm/15mm Rand (@page unten), Chrome (Toolbar/Site-Footer)
   ausgeblendet, Typografie auf Lesbarkeit im Druck getrimmt, keine
   abgeschnittenen Inhalte, sinnvolle Seitenumbrueche je Baustein.
   ============================================================ */
@page{
  size:A4;
  margin:16mm 15mm;
}
@media print{
  .no-print,.br-toolbar,footer.site.footer-d{display:none !important}
  body::before{display:none !important}
  .br-body{background:#fff !important}
  .br-doc{max-width:none;padding:0}

  /* ---- Typografie: Fliesstext gut lesbar, klare Ueberschriften-Hierarchie,
     keine gestrandeten Zeilen/Ueberschriften an Seitenumbruechen ---- */
  .br-prose p,.br-lede,.br-kat-row,.br-metric,.br-tag-begr,.br-list li,
  .br-belege li,.br-kritisch p,.br-kritisch blockquote,.br-quote,
  .br-feedback-empty p,.br-methodik p,.rk-findings p,.rk-findings blockquote,
  .rk-timeline-body p,.rk-timeline-body blockquote{
    orphans:3;widows:3;
  }
  .br-section h2,.br-section h3,.br-kat-head,.br-metric-head,.br-tag-head{
    break-after:avoid;page-break-after:avoid;
  }

  /* ---- Umbruch: einzelne Bausteine nie mitten durchschneiden ---- */
  .br-kat-row,.br-metric,.br-tag,.br-kritisch,.br-feedback-group,
  .radar-wrap,.br-two-col > div{
    break-inside:avoid;page-break-inside:avoid;box-shadow:none;
  }
  .rk-timeline-item,.rk-findings li{break-inside:avoid;page-break-inside:avoid}

  /* Kurze Sektionen als Ganzes zusammenhalten (Kopf, Auf-einen-Blick, Radar,
     Wirkungs-Tags, Sprachmetriken, Staerken/Empfehlungen, Methodik) — bei den
     variabel-langen, mehrteiligen Sektionen (Kategorien-Detail, Community-
     Stimmen, Risiko-Uebersicht, kritische Stellen, Faktencheck-Risiken)
     wuerde ein erzwungenes "avoid" nur zu grossen Leerraeumen fuehren, weil
     sie ohnehin schon zeilen-/kartenweise selbst umbrechen (Regeln oben).
     Ueberschrift+Lede bleiben dort ueber break-after:avoid am Folgeinhalt. */
  .br-section{border-bottom-color:#ddd}
  .br-section:not(#kategorien):not(#feedback):not(#risiko-uebersicht):not(#kritische-stellen):not(#entschaerfungstipps):not(#faktencheck-risiken){
    break-inside:avoid;page-break-inside:avoid;
  }

  /* ---- Keine ueberlaufenden Inhalte: lange Folgentitel/Zitate in
     Quellen-Links duerfen umbrechen statt ueber den Rand zu laufen. ---- */
  .br-doc .src{white-space:normal !important;overflow-wrap:anywhere}
  a{color:inherit;text-decoration:none;overflow-wrap:anywhere}
  .br-footer a,.br-methodik p a{overflow-wrap:anywhere}

  /* ---- Farbige Flaechen/Badges: fuer die Muster-Signale (neutral/attention/
     critical) und Leserichtungs-Tags soll die Farbe im Druck erhalten
     bleiben, nicht auf Graustufen "sparsam" reduziert werden. ---- */
  .flag,.flag .pip,.br-audience,.br-tag,.br-kat-row,.br-metric,.br-firewall,
  .br-kritisch,.sp-count-card{
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
  }
  .br-firewall{background:#f2f2f2 !important;color:#1c2a24 !important;border-color:#ccc}
  .br-kritisch{background:#f2f2f2 !important;border-color:#ccc}
}