/**
 * article.css - Artikeldesign, projektuebergreifend identisch
 *
 * Vorlage: https://business-blog-style.lovable.app/ - ein schlichter
 * Magazinsatz. Die Werte hier sind an der Vorlage gemessen, nicht geschaetzt.
 *
 * Zwei Bedingungen bestimmen den Aufbau dieser Datei:
 *
 * 1. Artikeltext steht in der Datenbank und ist reines semantisches HTML ohne
 *    Klassen. Alles Aussehen muss deshalb an den Elementen selbst haengen -
 *    h2, p, ul, ol, blockquote, table. Eine Utility-Klasse im Artikeltext
 *    wuerde der Tailwind-Build nie sehen, weil er keine Datenbank scannt.
 * 2. Dieselbe Datei laedt der TinyMCE-Editor in AdminX (ueber editor.css).
 *    Deshalb steht hier nichts, was einen Seitenrahmen voraussetzt.
 *
 * Gescopet auf .article. Diese Klasse traegt im Frontend der Wrapper um den
 * Artikelkoerper und im Editor der body. Ausserhalb aendert die Datei nichts.
 *
 * Farben stehen als Tokens im :where(.article)-Block. Ein Projekt, das eine
 * andere Akzentfarbe fuehrt, ueberschreibt --article-accent - sonst nichts.
 */

.article {
    --article-bg: oklch(16% 0.035 260);
    --article-surface: oklch(20% 0.036 259);
    --article-subtle: oklch(23.5% 0.032 257);
    --article-line: oklch(34% 0.03 256);
    --article-heading: oklch(97% 0.005 255);
    --article-copy: oklch(83% 0.012 255);
    --article-muted: oklch(70% 0.02 255);
    --article-accent: oklch(68% 0.115 244);
    --article-radius: 0.375rem;

    color: var(--article-copy);
    font-family: Outfit, system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 1.04rem;
    line-height: 1.8;
    overflow-wrap: break-word;
}

/* ========== UEBERSCHRIFTEN ========== */

/*
 * Die Haarlinie ueber der h2 ersetzt den section-Rahmen der Vorlage. So
 * entsteht die Abschnittstrennung auch dann, wenn der Artikel gar keine
 * section-Elemente enthaelt.
 */
.article h2 {
    margin: 3rem 0 1.25rem;
    padding-top: 2.75rem;
    border-top: 1px solid var(--article-line);
    color: var(--article-heading);
    font-size: 1.7rem;
    font-weight: 600;
    line-height: 1.25;
}

.article h3 {
    margin: 2rem 0 0.5rem;
    color: var(--article-heading);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.4;
}

.article h4 {
    margin: 1.5rem 0 0.5rem;
    color: var(--article-heading);
    font-size: 1rem;
    font-weight: 600;
}

/* Der erste Block startet ohne Trennlinie - darueber steht nichts. */
.article > *:first-child,
.article > section:first-child > *:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

/* ========== FLIESSTEXT ========== */

.article p {
    margin: 0 0 1.25rem;
}

.article strong {
    color: var(--article-heading);
    font-weight: 600;
}

.article a {
    color: var(--article-accent);
    text-decoration: none;
}

.article a:hover,
.article a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

/* ========== ZITAT ========== */

/*
 * Kein Kasten mit Rundung, sondern ein abgesetzter Streifen ueber die volle
 * Spaltenbreite. Das ist der ruhigste Weg, eine Aussage herauszuheben.
 */
.article blockquote {
    margin: 1.75rem 0;
    padding: 1.25rem 2rem;
    border-top: 1px solid var(--article-line);
    border-bottom: 1px solid var(--article-line);
    background: var(--article-subtle);
    color: var(--article-heading);
    font-weight: 500;
    font-style: normal;
}

.article blockquote > *:last-child {
    margin-bottom: 0;
}

/* ========== LISTEN ========== */

/*
 * Listen sind in dieser Vorlage keine eingerueckten Punkte, sondern eine
 * Tabelle aus Haarlinien: jeder Eintrag eine Zeile, getrennt durch eine
 * Linie, die Marke traegt die Akzentfarbe.
 */
.article ul,
.article ol {
    margin: 1.5rem 0;
    padding: 0;
    border-top: 1px solid var(--article-line);
    border-bottom: 1px solid var(--article-line);
    list-style: none;
}

.article ol {
    counter-reset: article-step;
}

/*
 * Die Marke steht absolut positioniert, nicht als Flex-Kind. Sonst wuerde
 * jedes inline-Element im Eintrag - ein strong, ein Link - zu einem eigenen
 * Flex-Element und die Zeile bricht mitten im Satz.
 */
.article ul > li,
.article ol > li {
    position: relative;
    padding: 0.875rem 0 0.875rem 2.75rem;
    border-top: 1px solid var(--article-line);
}

.article ul > li:first-child,
.article ol > li:first-child {
    border-top: 0;
}

.article ul > li::before,
.article ol > li::before {
    position: absolute;
    left: 0;
    color: var(--article-accent);
}

.article ul > li::before {
    content: '\2014';
}

.article ol > li {
    counter-increment: article-step;
}

.article ol > li::before {
    content: counter(article-step, decimal-leading-zero);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 2.1;
}

/* Verschachtelte Listen bleiben schlicht eingerueckt. */
.article li ul,
.article li ol {
    margin: 0.5rem 0 0;
    border: 0;
}

.article li ul > li,
.article li ol > li {
    border-top: 0;
    padding: 0.25rem 0 0.25rem 1.5rem;
}

/* ========== TABELLE ========== */

.article table {
    width: 100%;
    margin: 1.75rem 0;
    border: 1px solid var(--article-line);
    border-radius: var(--article-radius);
    border-collapse: collapse;
    overflow: hidden;
}

.article th,
.article td {
    padding: 0.875rem 1.25rem;
    border-top: 1px solid var(--article-line);
    text-align: left;
    vertical-align: top;
}

.article thead th {
    border-top: 0;
    background: var(--article-subtle);
    color: var(--article-heading);
    font-weight: 600;
}

/* ========== BILD UND TRENNER ========== */

.article img {
    max-width: 100%;
    height: auto;
    margin: 1.75rem 0;
    border-radius: var(--article-radius);
}

.article hr {
    margin: 3rem 0;
    border: 0;
    border-top: 1px solid var(--article-line);
}

/* ========== ABSCHNITTE ========== */

/*
 * Artikel aus der alten Vorlage bringen section-Elemente mit Anker-IDs mit.
 * Die Trennlinie zeichnet bereits die h2, deshalb traegt die section selbst
 * nur den Abstand und den Sprungpunkt fuer das Inhaltsverzeichnis.
 */
.article section {
    margin-bottom: 3rem;
    scroll-margin-top: 2.5rem;
}

.article section > h2:first-child {
    margin-top: 0;
}