/* Gemeinsame Darstellung von Beitragsinhalt, Code und Video.
   Farben und Radien kommen aus den Variablen des jeweiligen Entwurfs. */

.prose { line-height: 1.7; font-size: 1.0625rem; overflow-wrap: anywhere; }
.prose > * + * { margin-top: 1rem; }
.prose h2 { font-size: 1.35rem; line-height: 1.3; margin-top: 2rem; }
.prose h3 { font-size: 1.15rem; margin-top: 1.5rem; }
.prose a { color: var(--accent); text-underline-offset: 2px; }
.prose img { max-width: 100%; height: auto; border-radius: var(--radius, 8px); border: 1px solid var(--line); }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose .figure { margin: 1.25rem 0; }
.prose figcaption { color: var(--muted); font-size: .9rem; margin-top: .4rem; }

/* Code */
.codeblock { border: 1px solid var(--code-line, var(--line)); border-radius: var(--radius, 8px); background: var(--code-bg); overflow: hidden; margin: 1.25rem 0; }
.codehead { display: flex; align-items: center; gap: .75rem; padding: .45rem .5rem .45rem .9rem; border-bottom: 1px solid var(--code-line, var(--line)); font-size: .8125rem; background: var(--code-head, transparent); }
.codetitle { font-weight: 600; color: var(--fg); }
.codemeta { color: var(--muted); margin-right: auto; }
.copybtn { font: inherit; font-size: .8125rem; cursor: pointer; padding: .3rem .7rem; border-radius: 6px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); }
.copybtn:hover { border-color: var(--accent); color: var(--accent); }
.copybtn.done { border-color: var(--ok, #1a7f4b); color: var(--ok, #1a7f4b); }
.codeblock pre { margin: 0; padding: 1rem; overflow-x: auto; max-height: 34rem; tab-size: 4; font-size: .875rem; line-height: 1.6; }
.codeblock code { font-family: ui-monospace, "Cascadia Code", "SF Mono", Consolas, "Liberation Mono", monospace; font-size: .875rem; line-height: 1.6; color: var(--code-fg); white-space: pre; }
.tok-kw { color: var(--tok-kw); font-weight: 600; }
.tok-str { color: var(--tok-str); }
.tok-com { color: var(--tok-com); font-style: italic; }
.tok-num { color: var(--tok-num); }
.tok-api { color: var(--tok-api); }

/* Video-Platzhalter (kein Kontakt zu YouTube vor dem Klick) */
.video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius, 8px); overflow: hidden; background: var(--video-bg, #0e1620); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-btn { position: absolute; inset: 0; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem; cursor: pointer; border: 0; color: #fff; font: inherit; background: radial-gradient(circle at 30% 20%, #23405f, #0e1620 70%); }
.video-btn .play { width: 4.2rem; height: 4.2rem; border-radius: 50%; background: var(--accent); position: relative; box-shadow: 0 6px 24px rgba(0,0,0,.35); transition: transform .15s; }
.video-btn .play::after { content: ""; position: absolute; left: 53%; top: 50%; transform: translate(-50%, -50%); border-style: solid; border-width: .8rem 0 .8rem 1.3rem; border-color: transparent transparent transparent #fff; }
.video-btn:hover .play { transform: scale(1.08); }
.video-note { display: flex; flex-direction: column; align-items: center; gap: .15rem; font-weight: 600; }
.video-note small { font-weight: 400; opacity: .7; font-size: .78rem; padding: 0 1rem; text-align: center; }

mark { background: var(--mark, #ffe58f); color: inherit; border-radius: 2px; padding: 0 1px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 600px) { .prose { font-size: 1rem; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }