/* === Single-Artikel im Dark Mode ===
   Eigene Datei, die als LETZTES eingebunden wird. Grund: base.css liegt in der
   Reihenfolge ganz vorn, danach folgen cyberpunk.css, glitch.css usw. – Regeln
   am Ende von base.css würden von diesen Dateien wieder überschrieben.
   Alles hier ist auf body.single-post gescoped, damit Startseite, Kategorien
   und normale Seiten unberührt bleiben. */

/* --- Grundfläche --- */
body.single-post {
  background-color: var(--black);
  color: var(--white);
}
/* base.css setzt im Mobile-Breakpoint "background: none" – hier zurückholen. */
@media (max-width: 767.9px) {
  body.single-post { background: var(--black); }
}
body.single-post .blog {
  background-color: var(--black);
  /* Abstand zwischen fixiertem Header und der Kategoriezeile. Als margin, weil
     das pt-xl-5-Utility im Markup das padding mit !important belegt. */
  margin-top: 3.5rem;
}

/* --- Kopfbereich: Kategorien, Headline, Teaser --- */
/* !important nötig: das Markup trägt Bootstraps .text-black, das selbst
   !important setzt – sonst bleiben die "//"-Trenner zwischen den Kategorien
   schwarz und damit auf dem dunklen Grund unsichtbar. */
body.single-post .article__head .post-categories,
body.single-post .article__head .post-categories a,
body.single-post .article__head .desc { color: var(--yellow) !important; }
body.single-post .article__head .entry-title,
body.single-post .article__head .entry-title span,
body.single-post .excerpt,
body.single-post .excerpt p { color: var(--white); }

/* --- Meta-Zeile: Autor, Datum --- */
/* Autorenbild eckig statt rund (base.css setzt border-radius: 19px) */
body.single-post .article__meta .author img { border-radius: 0; }

body.single-post .article__meta .desc,
body.single-post .article__meta .label { color: rgba(255, 255, 255, 0.65); }

/* --- Fließtext --- */
body.single-post .article__content p,
body.single-post .article__content li,
body.single-post .article__content h1,
body.single-post .article__content h2,
body.single-post .article__content h3,
body.single-post .article__content h4,
body.single-post .article__content h5,
body.single-post .article__content h6,
body.single-post .article__content td,
body.single-post .article__content th { color: var(--white); }

body.single-post .article__content a { color: var(--yellow); }
body.single-post .article__content a:hover { color: var(--white); }

/* Bildunterschrift: dezentes Grau statt schwarzem Kasten */
body.single-post figcaption {
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  padding: 6px 0 0 0;
  display: block;
}

/* Heller Rahmen der Content-Bilder auf Dunkel abstimmen */
body.single-post .wp-block-image img {
  border-color: rgba(255, 255, 255, 0.12) !important;
}

/* Tabellen / Trennlinien */
body.single-post .article__content table,
body.single-post .article__content td,
body.single-post .article__content th { border-color: rgba(255, 255, 255, 0.18); }
body.single-post .article__content hr { border-color: rgba(255, 255, 255, 0.18); }

/* Zitate (nicht der rote Spoiler-Block) */
body.single-post .article__content blockquote:not(#spoiler) {
  border-left: 4px solid var(--yellow);
  background: rgba(255, 255, 255, 0.05);
  padding: 1rem 1.2rem;
}

/* --- Share-Icons oben und unten --- */
body.single-post .article__share-link,
body.single-post .article__share-copy { color: var(--white); }
/* Der untere Share-Block liegt innerhalb von .article__content – ohne diese
   Regel würden die Icons dort die gelbe Textlink-Farbe erben und sich von der
   weißen Leiste oben unterscheiden. */
body.single-post .article__content .article__share-link { color: var(--white); }
body.single-post .article__content .article__share-link:hover { color: var(--yellow); }
body.single-post .article__share-label { color: rgba(255, 255, 255, 0.75); }
/* Tooltip "Kopiert" invertiert, damit er sich vom Hintergrund abhebt */
body.single-post .article__share-copied {
  background: var(--white);
  color: var(--black);
}

/* --- "Auch interessant" (Plugin) im Stil der Blog-/Kategorieübersicht ---
   Die Karten-Optik selbst kommt über die Klasse "blog" aus base.css; hier nur
   die Höhen-Angleichung, die dort an body.home/body.category hängt. */
body.single-post .auch-interessant .blog__list article {
  min-height: 290px;
  position: relative;
}
body.single-post .auch-interessant .card-title { min-height: 70px; }
/* Überschrift zentriert und ohne Akzentlinie (der gelbe Balken links stammt
   von .blog-section__title und passt hier nicht). */
body.single-post .auch-interessant .blog-section__title {
  text-align: center;
  border: none;
  padding-left: 0;
  margin: 0.5rem 0 2.5rem 0;
}
body.single-post .auch-interessant .card-body { padding-bottom: 0.5rem; }
/* Bootstrap gibt .card einen weißen Grund – in den Übersichten hebt das
   "#newest__article .card { background: transparent }" auf, diese ID gibt es
   hier aber nicht. Ohne die Regel stünde der weiße Titel auf Weiß. */
body.single-post .auch-interessant .card { background: transparent !important; }
/* Titelhöhe wie in den Übersichten, damit die drei Karten gleich hoch sind. */
body.single-post .auch-interessant h5 { min-height: 16vh; }
@media (min-width: 576px) {
  body.single-post .auch-interessant .card-title { min-height: auto; }
}

/* --- Seitennavigation bei mehrseitigen Artikeln (wp_link_pages) --- */
body.single-post .article__content .btn.bg-black {
  background: rgba(255, 255, 255, 0.1) !important;
  color: var(--white) !important;
}
body.single-post .article__content .btn.bg-black:hover {
  background: var(--yellow) !important;
  color: var(--black) !important;
}