/* Einzelartikel (lab/site/artikel/*.html). Ergänzt .prose aus site.css um das,
   was die Archivtexte aus dem alten WordPress-Blog mitbringen. */

.article-head .page-title--long { max-width: 20ch; }
.article-lead { margin-top: 1.4rem; margin-bottom: 0; }

.floor--article { padding-top: clamp(2rem, 5vh, 3.5rem); padding-bottom: clamp(3rem, 8vh, 5rem); }
.floor--article-end { padding: clamp(3rem, 8vh, 5rem) 0 clamp(8rem, 20vh, 12rem); }
.floor--article-end .article-cta { margin-top: 0; }

/* Absatzabstände: in site.css setzt .prose p { margin: 0 } den Abstand aus .prose > * + *
   außer Kraft (höhere Spezifität). Hier für die Artikel wiederhergestellt. */
.prose.article-body > * + * { margin-top: 1.15em; }
.prose.article-body > h2, .prose.article-body > h3 { margin-top: 2.2em; }
.prose.article-body > h4, .prose.article-body > h5 { margin-top: 1.7em; }

/* Lesespalte: etwas ruhiger Schleier hinter dem Text, damit die Szene beim Lesen nie stört */
.floor--article .col--read { position: relative; }
.floor--article .col--read::before {
  content: ""; position: absolute; inset: -3rem -3rem -3rem -3rem; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 90% at 30% 40%, rgb(var(--veil) / .72), rgb(var(--veil) / 0) 75%);
}

/* Überschriften aus Altbeiträgen (nach Absenkung bis h5/h6) */
.prose h5, .prose h6 { font: 600 1rem/1.4 var(--text); color: var(--ink); margin-top: 1.5em; }
.prose h2[id], .prose h3[id] { scroll-margin-top: 6rem; }

/* Bilder und Bildunterschriften (WordPress: .wp-caption, figure.aligncenter, .is-resized) */
.prose img { margin-left: auto; margin-right: auto; }
.prose img[width] { width: auto; }
.prose .wp-caption { width: auto !important; max-width: 100%; margin: 2em 0; }
.prose .wp-caption p { margin: 0; }
.prose .wp-caption-text, .prose .wp-caption p:last-child:not(:first-child) {
  font-size: .9rem; color: var(--faint); margin-top: .6rem; text-align: left;
}
.prose figure { margin-left: 0; margin-right: 0; }
.prose figure.aligncenter, .prose .aligncenter { text-align: center; }
.prose figure.aligncenter figcaption { text-align: center; }
.prose figure.is-resized img { max-width: 100%; }
.prose a:has(> img) { display: block; text-decoration: none; }

/* Diagramme mit transparentem Grund bleiben auf der Nachtfassung lesbar */
[data-theme="dark"] .prose img[src$=".png"],
[data-theme="dark"] .prose img[src$=".PNG"] { background: #f3f5fa; padding: .7rem; border-radius: 3px; }

.prose .wp-block-table { overflow-x: auto; }
.prose iframe, .prose video { max-width: 100%; }

/* Gesprächsangebot am Ende */
.article-cta {
  margin-top: clamp(3.5rem, 8vh, 5rem); padding-top: 2rem; position: relative; max-width: 40rem;
}
.article-cta::before {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 1px;
  background: linear-gradient(90deg, #38ebff, #5f73ff 30%, #8f7cff 55%, #c85acb 80%, #ee7ce9);
  opacity: .8;
}
.article-cta__title { font: 300 clamp(1.6rem, 2.4vw, 2rem)/1.2 var(--display); color: var(--ink); margin: 0 0 .8rem; }
.article-cta p { color: var(--soft); font-size: 1.08rem; margin: 0 0 1.4rem; }

.article-nav { margin-top: clamp(3rem, 7vh, 4.5rem); }
.article-back { margin-top: 2.2rem; }

@media (max-width: 900px) {
  .floor--article .col--read::before { inset: -2rem -1rem; }
  [data-theme="dark"] .prose img[src$=".png"] { padding: .45rem; }
}