/* Artikel-Seite: Hero + reiche Bausteine. Klassen entsprechen sanitize_article_html(). */

.artikel-wrap{max-width:780px;margin:0 auto;padding:0 1.2rem}

/* Hero-Bereich */
.artikel-hero{padding:2.5rem 0 1rem}
.artikel-hero .kicker{display:inline-block;text-transform:uppercase;letter-spacing:1.2px;font-size:.78rem;font-weight:700}
.artikel-hero h1{font-size:clamp(2rem,5vw,3rem);line-height:1.1;margin:.6rem 0}
.artikel-hero .standfirst{font-size:1.2rem;line-height:1.5;opacity:.8}
.artikel-hero .meta{display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;margin-top:1rem;font-size:.86rem;opacity:.7}

/* Cover-Bild */
.artikel-cover{margin:1.6rem 0}
.artikel-cover img{width:100%;height:auto;border-radius:14px;display:block}

/* Artikel-Body: Basis-Typo */
.artikel-body p{font-size:1.06rem;line-height:1.65;margin:.9rem 0}
.artikel-body h2{font-size:clamp(1.4rem,3.4vw,1.9rem);margin:2.4rem 0 .4rem}
.artikel-body h3{font-size:1.18rem;margin:1.6rem 0 .5rem}

/* Kapitelnummer in Überschriften (span.num): dezentes Mono-Label mit Abstand zum Titel. */
.artikel-body h2 .num,
.artikel-body h3 .num,
.artikel-body h4 .num{font-family:var(--mono,ui-monospace,monospace);font-weight:600;color:var(--ink-3,#a6a6a6);margin-right:.5em}

/* Abbildung (figure.fig) */
.artikel-body figure.fig{margin:2rem 0}
.artikel-body figure.fig img{width:100%;height:auto;border-radius:14px;display:block;border:1px solid var(--line,#ececec)}
.artikel-body figure.fig figcaption{font-size:.84rem;opacity:.7;margin-top:.5rem}

/* TL;DR-Box */
.artikel-body .tldr{border:1px solid var(--line,#ececec);border-radius:14px;padding:1.2rem 1.4rem;margin:1.6rem 0}

/* Callout-Boxen (c-analogie, c-fakt, c-warn) */
.artikel-body .callout{border:1px solid var(--line,#ececec);border-left-width:4px;border-radius:12px;padding:1rem 1.2rem;margin:1.4rem 0}
.artikel-body .callout .ct{font-weight:700;margin-bottom:.3rem;display:flex;gap:.5rem;align-items:center}
.artikel-body .callout.c-analogie{border-left-color:#12a3a3}
.artikel-body .callout.c-fakt{border-left-color:#0c6b8a}
.artikel-body .callout.c-warn{border-left-color:var(--warn,#b4791f);background:rgba(180,121,31,.08)}

/* Kennzahlen-Raster (stats / stat) */
.artikel-body .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.8rem;margin:1.6rem 0}
.artikel-body .stat{border:1px solid var(--line,#ececec);border-radius:12px;padding:1rem}
.artikel-body .stat .v{font-size:1.5rem;font-weight:800;line-height:1.1}
.artikel-body .stat .l{font-size:.82rem;opacity:.7;margin-top:.25rem}

/* Tabelle (table-wrap) */
.artikel-body .table-wrap{overflow-x:auto;border:1px solid var(--line,#ececec);border-radius:12px;margin:1.6rem 0}
.artikel-body table{width:100%;border-collapse:collapse;font-size:.95rem}
.artikel-body th,.artikel-body td{padding:.75rem .9rem;border-bottom:1px solid var(--line,#ececec);text-align:left;vertical-align:top}

/* Bewertungs-Pill (ok / no) */
.artikel-body .pill{display:inline-block;font-size:.72rem;font-weight:700;padding:.12em .55em;border-radius:20px}
.artikel-body .pill.ok{background:rgba(31,138,91,.12);color:var(--ok,#1f8a5b)}
.artikel-body .pill.no{background:rgba(180,121,31,.12);color:var(--warn,#b4791f)}

/* Zitat-Hervorhebung (blockquote.pullquote) */
.artikel-body blockquote.pullquote{font-size:1.3rem;line-height:1.4;border-left:4px solid var(--accent,#111114);padding-left:1rem;margin:1.6rem 0;opacity:.9}

/* Figur-Karte mit dunklem Hintergrund (figcard) */
.artikel-body .figcard{background:#0c1a29;border-radius:14px;padding:1.3rem 1.1rem;margin:1.8rem 0}
.artikel-body .figcard .ftitle{color:#cfe2f2;font-weight:700;margin-bottom:.6rem}
.artikel-body .figcard svg{display:block;width:100%;height:auto}
.artikel-body .figcard .fnote{color:#8fb0cb;font-size:.82rem;margin-top:.5rem}

/* Quellenangaben (ol.sources / .s-meta) */
.artikel-body ol.sources{list-style:decimal;margin:1rem 0 1rem 1.4rem}
.artikel-body ol.sources li{margin:.5rem 0}
.artikel-body ol.sources .s-meta{display:block;opacity:.6;font-size:.82rem}

/* Trenner (hr.divider) */
.artikel-body hr.divider{border:none;height:1px;background:var(--line,#ececec);margin:2.4rem 0}

/* Card-Wall: Vorschaubild für alle Typen. */
.wall .card .thumb{position:relative;aspect-ratio:16/9;background:linear-gradient(135deg,#1a2330,#27313f);border-radius:12px 12px 0 0;overflow:hidden}
.wall .card .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.wall .card .thumb .play{position:absolute;inset:0;display:grid;place-items:center}
.wall .card .thumb .dur{position:absolute;right:.5rem;bottom:.5rem;background:rgba(0,0,0,.7);color:#fff;font-size:.72rem;padding:.1rem .4rem;border-radius:6px}

/* Redesign: Video-Einbettung (video-embed) */
.artikel-body .video-embed{position:relative;width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;margin:1.6rem 0;background:#000}
/* Gilt fuer den bei Klick eingetauschten Player UND das Legacy-iframe. */
.artikel-body .video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Facade-Karte: klickbares Poster mit plattformabhaengigem Play-Button.
   Der Poster hat width/height bzw. der Container aspect-ratio -> kein Layout-Shift. */
.artikel-body .video-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.artikel-body .video-facade{position:absolute;inset:0;display:block;cursor:pointer;text-decoration:none}
/* Tastatur-Fokusring, inset gegen overflow:hidden des Containers (nicht geclippt). */
.artikel-body .video-facade:focus{outline:none}
.artikel-body .video-facade:focus-visible{outline:3px solid #fff;outline-offset:-3px;box-shadow:inset 0 0 0 3px rgba(0,0,0,.6);border-radius:12px}

/* Play-Button: zentriert, klick-transparent (Klick geht an den Link),
   sanfte Skalierung bei Hover/Fokus der Facade. */
.artikel-body .video-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}
.artikel-body .video-facade:hover .video-play,
.artikel-body .video-facade:focus-visible .video-play{transform:translate(-50%,-50%) scale(1.08)}

/* YouTube: typischer roter, abgerundeter Button mit weissem Play-Dreieck. */
.artikel-body .video-youtube .video-play{width:68px;height:48px;border-radius:14px;background:#f00;box-shadow:0 2px 12px rgba(0,0,0,.4)}
.artikel-body .video-youtube .video-play::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-40%,-50%);border-style:solid;border-width:11px 0 11px 19px;border-color:transparent transparent transparent #fff}
.artikel-body .video-youtube .video-facade:hover .video-play{box-shadow:0 4px 18px rgba(0,0,0,.5)}

/* X: dunkler, glasiger Rundknopf mit weissem Play-Dreieck. */
.artikel-body .video-x .video-play{width:64px;height:64px;border-radius:50%;background:rgba(15,15,18,.62);border:1px solid rgba(255,255,255,.28);box-shadow:0 4px 16px rgba(0,0,0,.4);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.artikel-body .video-x .video-play::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-40%,-50%);border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent #fff}
/* Dezentes X-Signet oben rechts (inline-SVG, keine Font-Abhaengigkeit). */
.artikel-body .video-x::after{content:"";position:absolute;top:.6rem;right:.7rem;width:22px;height:22px;z-index:2;pointer-events:none;opacity:.85;filter:drop-shadow(0 1px 2px rgba(0,0,0,.55));background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24h-6.66l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E")}

/* Redesign: Code-Block (pre/code) */
.artikel-body pre{background:#0c0c0e;color:#e8e8e8;border-radius:12px;padding:1.2rem 1.4rem;margin:1.6rem 0;overflow-x:auto;font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;font-size:.92rem;line-height:1.7}
.artikel-body pre code{font-family:inherit}
.artikel-body pre .c-com{color:#6b6b6b}
.artikel-body pre .c-key{color:#9cc0ff}
.artikel-body pre .c-str{color:#b7e1a1}

/* Redesign: Button / CTA. Klassenbasiert (nicht "a.cta"), damit dieselbe Regel
   auch auf dem contenteditable-Vorschau-Span im Block-Editor greift. */
.artikel-body .cta{display:inline-flex;align-items:center;gap:.5rem;background:var(--accent,#111114);color:#fff;font-size:.95rem;padding:.7rem 1.3rem;border-radius:999px;text-decoration:none;margin:1rem 0}
.artikel-body .cta::after{content:"→"}

/* Redesign: Eyebrow (p.eyebrow), Stil-Variante von text statt eigenem Typ */
.artikel-body p.eyebrow{font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent,#111114);margin-bottom:.4rem}