/* ============================================================
   INFOS & HINTERGRÜNDE – Ergänzungen zum Designsystem
   ============================================================ */

/* Inhaltsverzeichnis */
.toc{background:var(--papier); border:1px solid var(--sand); border-radius:var(--rund); padding:22px 26px;}
.toc h2{font-size:19px; margin-bottom:14px;}
.toc ol{margin:0; padding-left:22px; columns:2; column-gap:34px;}
.toc li{margin-bottom:8px; break-inside:avoid;}
.toc a{color:var(--wald); text-decoration:none; font-size:14.5px;}
.toc a:hover{text-decoration:underline;}
@media(max-width:640px){.toc ol{columns:1;}}

/* Info-Abschnitt */
.info-block{scroll-margin-top:74px; padding-top:0; padding-bottom:0; margin-bottom:44px;}
.info-block:first-of-type{padding-top:0;}
.info-block + .info-block{margin-top:0;}
/* Der ganze Themenbereich als Karte – wie „Themen auf dieser Seite“ */
.info-karte{
  background:var(--papier); border:1px solid var(--sand); border-radius:var(--rund);
  padding:28px 32px;
}
.info-block h2{font-size:clamp(22px,3vw,30px); margin-bottom:14px;}
.info-block h3{font-family:read; font-size:17px; font-weight:700; color:var(--wald); margin:22px 0 8px;}
.info-block p{font-size:15.5px; line-height:1.7; margin-bottom:14px;}
.info-block .quelle{font-size:13.5px; color:var(--tinte-hell);}
.info-block .quelle a{color:var(--wald);}
@media(max-width:640px){.info-karte{padding:22px 20px;}}

/* Einordnungs-Hinweis (umstrittene Aussagen) */
.einordnung{
  background:var(--korn); border-left:4px solid var(--acker); border-radius:10px;
  padding:12px 16px; font-size:14px; color:var(--tinte); line-height:1.6; margin:14px 0;
}
.einordnung strong{color:#a85a12;}

/* Video: Klick-zum-Laden (spart Ladezeit, DSGVO-freundlicher) */
.video-gruppe{margin:18px 0 4px;}
.video-titel{
  font-family:read; font-size:15px; font-weight:700; color:var(--tinte);
  margin:0 0 10px; line-height:1.35;
}
.video-gruppe .video-reihe + .video-titel{margin-top:20px;}
.video-reihe{display:grid; gap:16px; margin:0 0 4px;}
@media(min-width:720px){.video-reihe.mehr{grid-template-columns:1fr 1fr;}}
.video{
  position:relative; aspect-ratio:16/9; border-radius:12px; overflow:hidden;
  background:#1a2410; cursor:pointer; border:1px solid var(--sand);
}
.video img{width:100%; height:100%; object-fit:cover; opacity:.85; transition:ease .2s;}
.video:hover img{opacity:1;}
.video iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
.video__play{position:absolute; inset:0; display:grid; place-items:center; pointer-events:none;}
.video__play svg{width:60px; height:60px; filter:drop-shadow(0 2px 8px rgba(0,0,0,.5));}
.video__hinweis{
  position:absolute; left:0; right:0; bottom:0; padding:20px 12px 8px;
  background:linear-gradient(transparent, rgba(0,0,0,.7)); color:#fff; font-size:11.5px;
}

/* Quellen-Link im Text */
.quelle .pdf-link{color:var(--wald); font-weight:700; text-decoration:none;}
.quelle .pdf-link:hover{text-decoration:underline;}
/* Links im Fließtext */
.info-block p a{color:var(--wald); font-weight:700;}
.info-block p a:hover{text-decoration:underline;}
.einordnung a{color:#a85a12; font-weight:700;}

/* Inhaltsbild (z. B. Lebensmittelwald) */
.info-bild{margin:0 0 16px; border-radius:12px; overflow:hidden; border:1px solid var(--sand);}
.info-bild img{display:block; width:100%; height:auto;}

/* Selbstgehostetes Video */
.lokalvideo{width:100%; border-radius:12px; border:1px solid var(--sand); background:#1a2410; display:block;}