/* Blog theme: follows system light/dark via html[data-rd-theme] (set in inline script). */

:root {
    --rd-bg: #0f172a;
    --rd-bg-elev: #1e293b;
    --rd-surface: #1e293b;
    --rd-fg: #ECEAE4;
    --rd-fg-muted: #8E9099;
    --rd-fg-dim: #5B5E68;
    --rd-line: rgba(255, 255, 255, 0.08);
    --rd-line-strong: rgba(255, 255, 255, 0.16);
    --rd-accent: #10b981;
    --rd-accent-ink: #0f172a;
    --rd-accent-soft: rgba(16, 185, 129, 0.10);
    --rd-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
    --rd-danger: #ef4444;
}

html[data-rd-theme="light"] {
    --rd-bg: #FAFAF7;
    --rd-bg-elev: #FFFFFF;
    --rd-surface: #FFFFFF;
    --rd-fg: #14201B;
    --rd-fg-muted: #4F5A55;
    --rd-fg-dim: #8E9099;
    --rd-line: rgba(0, 0, 0, 0.08);
    --rd-line-strong: rgba(0, 0, 0, 0.16);
    --rd-accent: #047857;
    --rd-accent-ink: #FFFFFF;
    --rd-accent-soft: rgba(4, 120, 87, 0.08);
    --rd-shadow: 0 24px 60px rgba(16, 16, 16, 0.08);
    --rd-danger: #b91c1c;
}

body {
    background: var(--rd-bg) !important;
    color: var(--rd-fg-muted) !important;
    transition: background 0.3s ease, color 0.3s ease;
}

nav,
footer {
    border-color: var(--rd-line) !important;
}

/* Backgrounds */
.bg-brand-dark {
    background-color: var(--rd-bg) !important;
}

.bg-slate-900 {
    background-color: var(--rd-bg-elev) !important;
}

/* Tabellenkoepfe (thead-Zeilen) und Karten mit solidem slate-800:
   dark unveraendert, light lesbar hellgrau statt dunkel auf dunkel */
.bg-slate-800 {
    background-color: var(--rd-bg-elev) !important;
}

html[data-rd-theme="light"] .bg-slate-800 {
    background-color: var(--rd-line) !important;
}

/* Getoente Panels: im Dunkelmodus sind das dunkle Flaechen mit Transparenz.
   Ohne Gegenstueck bleiben sie im Hellmodus dunkel, waehrend der Text auf
   dunkel umschaltet, gemessen bis herunter auf 1,15:1. Deshalb im Hellmodus
   auf dieselbe helle Flaeche wie .bg-slate-800. Der Dunkelmodus bleibt
   unangetastet, die Regeln greifen nur unter data-rd-theme="light".
   :not(body), weil ein Artikel bg-slate-950 am body traegt und der
   Seitengrund sonst grau statt hell wuerde. */
html[data-rd-theme="light"] .bg-slate-800\/30:not(body),
html[data-rd-theme="light"] .bg-slate-800\/40:not(body),
html[data-rd-theme="light"] .bg-slate-800\/80:not(body),
html[data-rd-theme="light"] .bg-slate-900\/50:not(body),
html[data-rd-theme="light"] .bg-slate-700:not(body),
html[data-rd-theme="light"] .bg-slate-950:not(body) {
    background-color: var(--rd-line) !important;
}

/* Sticky-Kopfleiste einzelner Artikel: dunkel mit 80 Prozent Deckung. */
html[data-rd-theme="light"] .bg-brand-dark\/80 {
    background-color: rgba(255, 255, 255, 0.85) !important;
}

.bg-brand-card,
.bg-slate-800\/50 {
    background-color: var(--rd-bg-elev) !important;
}

.bg-brand-primary {
    background-color: var(--rd-accent) !important;
}

.bg-brand-primary\/10 {
    background-color: var(--rd-accent-soft) !important;
}

.bg-brand-danger {
    background-color: var(--rd-danger) !important;
}

.hover\:bg-slate-700:hover {
    background-color: var(--rd-line-strong) !important;
}

.hover\:bg-emerald-400:hover {
    filter: brightness(1.08);
}

/* Text */
h1, h2, h3, h4,
.text-white,
.text-slate-100,
.text-slate-200 {
    color: var(--rd-fg) !important;
}

.text-slate-300,
.text-slate-400 {
    color: var(--rd-fg-muted) !important;
}

.text-slate-500,
.text-slate-600 {
    color: var(--rd-fg-dim) !important;
}

.text-brand-primary {
    color: var(--rd-accent) !important;
}

.text-brand-dark {
    color: var(--rd-accent-ink) !important;
}

.text-brand-danger,
.text-red-400,
.text-red-500 {
    color: var(--rd-danger) !important;
}

.hover\:text-white:hover,
.hover\:text-slate-300:hover {
    color: var(--rd-fg) !important;
}

/* Borders */
.border-slate-600,
.border-slate-700,
.border-slate-800 {
    border-color: var(--rd-line) !important;
}

.border-brand-primary\/20 {
    border-color: var(--rd-accent-soft) !important;
}

.border-brand-danger {
    border-color: var(--rd-danger) !important;
}

.hover\:border-slate-500:hover {
    border-color: var(--rd-line-strong) !important;
}

.hover\:border-brand-danger:hover,
.hover\:border-brand-primary:hover {
    border-color: var(--rd-accent) !important;
}

/* Prose */
.prose {
    color: var(--rd-fg-muted) !important;
    font-size: 1.0625rem;
}

.prose strong {
    color: var(--rd-fg) !important;
}

/* Grundzustand fuer Ueberschriften im Artikelkoerper.
   Bewusst ueber :where() auf Spezifitaet 0,0,1 gehalten: schlaegt das
   Tailwind-Preflight (h1..h6 { font-size: inherit }, gleiche Spezifitaet,
   frueher in der Quelle), verliert aber gegen jede Utility-Klasse.
   Ueberschriften in Karten behalten damit text-lg, text-2xl, mt-0 usw. */
:where(.prose) h1,
:where(.prose) h2,
:where(.prose) h3,
:where(.prose) h4 {
    color: var(--rd-fg);
    font-weight: 700;
    margin-top: 1.7em;
    margin-bottom: 0.5em;
    text-wrap: balance;
}

/* Ohne diese Groessen rendert jede Fliesstext-Ueberschrift in
   Absatzgroesse: das Typography-Plugin ist im Tailwind-Build nicht
   enthalten und blog-theme.css setzte bisher nur Farbe und Gewicht. */
:where(.prose) h2 {
    font-size: clamp(1.45rem, 1.2rem + 0.9vw, 1.65rem);
    line-height: 1.25;
    letter-spacing: -0.015em;
}

:where(.prose) h3 {
    font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.25rem);
    line-height: 1.35;
}

:where(.prose) h4 {
    font-size: 1.05rem;
    line-height: 1.4;
}

/* Erste Ueberschrift direkt unter dem Vorspann braucht keinen Vorlauf. */
:where(.prose) > :first-child {
    margin-top: 0;
}

.prose p {
    margin-bottom: 1.25em;
    line-height: 1.7;
}

.prose li {
    line-height: 1.7;
}

.prose ul {
    list-style-type: disc;
    padding-left: 1.5em;
    margin-bottom: 1.25em;
}

.prose li {
    margin-bottom: 0.5em;
}

.prose a {
    color: var(--rd-accent) !important;
    text-decoration: underline;
}

.prose a:hover {
    filter: brightness(1.1);
}

.prose-invert {
    --tw-prose-body: var(--rd-fg-muted);
    --tw-prose-headings: var(--rd-fg);
    --tw-prose-lead: var(--rd-fg-muted);
    --tw-prose-links: var(--rd-accent);
    --tw-prose-bold: var(--rd-fg);
    --tw-prose-counters: var(--rd-fg-dim);
    --tw-prose-bullets: var(--rd-fg-dim);
    --tw-prose-hr: var(--rd-line);
    --tw-prose-quotes: var(--rd-fg);
    --tw-prose-quote-borders: var(--rd-line);
    --tw-prose-captions: var(--rd-fg-dim);
    --tw-prose-code: var(--rd-fg);
    --tw-prose-pre-code: var(--rd-fg-muted);
    --tw-prose-pre-bg: var(--rd-bg-elev);
    --tw-prose-th-borders: var(--rd-line);
    --tw-prose-td-borders: var(--rd-line);
}

/* Autorenzeile im Artikelkopf.
   text-slate-500 (--rd-fg-dim) zusammen mit opacity-70 ergab effektiv
   1,98:1 im Dunkel- und 2,08:1 im Hellmodus, beides deutlich unter
   WCAG AA. Ausgerechnet der Kompetenznachweis war das am schlechtesten
   lesbare Element der Seite. Scope bleibt der Artikelkopf, das
   Kleingedruckte im Footer ist davon nicht betroffen. */
main header .text-slate-500 {
    color: var(--rd-fg-muted) !important;
}

main header .opacity-70 {
    opacity: 1;
}

/* ===== Aufklapp-FAQ im Stil der Startseite (07.08.2026) ===== */

/* Die Artikel setzen das FAQ als Reihe gerahmter Karten. Auf der
   Startseite ist es eine ruhige Liste mit Haarlinien und einem
   Plus-Zeichen (.rd-faq in index.html). Hier wird die Kartenfassung auf
   diese Optik gezogen, ohne eine einzige Artikel-HTML anzufassen.

   Angriffspunkt ist das Markup selbst (.not-prose als Huelle um die
   details), nicht eine per Skript gesetzte Klasse. Damit greift es auf
   allen Artikeln, das Muster ist in 42 FAQ-Bloecken identisch.
   Das aufklappbare Inhaltsverzeichnis aus blog-layout.js liegt nicht in
   einem .not-prose-Block und bleibt deshalb unberuehrt. */

main .not-prose > details {
    background: transparent !important;
    border-width: 1px 0 0 0 !important;
    border-style: solid !important;
    border-color: var(--rd-line) !important;
    border-radius: 0 !important;
    padding: 22px 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

main .not-prose > details:last-child {
    border-bottom-width: 1px !important;
}

main .not-prose > details > summary {
    font-size: 17px;
    font-weight: 500;
    letter-spacing: -0.012em;
    line-height: 1.4;
    gap: 16px;
    padding: 0;
}

/* Der Lucide-Pfeil weicht dem Plus-Zeichen der Startseite. */
main .not-prose > details > summary > i,
main .not-prose > details > summary > svg {
    display: none !important;
}

main .not-prose > details > summary::after {
    content: "+";
    font-size: 22px;
    line-height: 1;
    color: var(--rd-fg-muted);
    flex-shrink: 0;
}

main .not-prose > details[open] summary::after {
    content: "−";
    color: var(--rd-accent);
}

main .not-prose > details > div {
    margin-top: 14px !important;
    font-size: 15px !important;
    line-height: 1.65;
    color: var(--rd-fg-muted) !important;
    max-width: 64ch;
}

main .not-prose > details > div a {
    color: var(--rd-fg) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}

main .not-prose > details > summary:focus-visible {
    outline: 2px solid var(--rd-accent);
    outline-offset: 4px;
}

/* ===== Schaltflaechen im Artikel (07.08.2026) =====

   Die Artikel trugen die Textfarbe der Hauptschaltflaeche inline als
   style="color:#0f172a !important". Im Hellmodus stand dieses Dunkelblau
   auf dem dunkelgruenen Akzent und ergab 3,26:1, also unter WCAG AA.
   Inline plus !important laesst sich per Stylesheet nicht ueberstimmen,
   deshalb ist das Attribut am 07.08.2026 aus allen Artikeln entfernt
   worden und die Farbe kommt von hier. Ergebnis: 7,04:1 dunkel und
   5,48:1 hell, dieselben Werte wie .rd-cta auf der Startseite.

   Wichtig: In neuen Artikeln keine Textfarbe mehr inline setzen. */

main a[class~="bg-brand-primary"] {
    color: var(--rd-accent-ink) !important;
}

main a[class~="bg-brand-primary"],
main a[class~="border-slate-600"] {
    text-decoration: none !important;
}