/* newssofort.de -- Basis-Stylesheet. Alle Werte als Tokens, keine Hex-Werte im Code darunter. */

:root {
    --farbe-text: #16181d;
    --farbe-text-leise: #5b6270;
    --farbe-hintergrund: #ffffff;
    --farbe-flaeche: #f5f6f8;
    --farbe-akzent: #c8102e;
    --farbe-linie: #dfe2e8;

    --schrift: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --breite-max: 44rem;
    --abstand-s: 0.5rem;
    --abstand-m: 1rem;
    --abstand-l: 2rem;
    --radius: 6px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--schrift);
    color: var(--farbe-text);
    background: var(--farbe-hintergrund);
    line-height: 1.6;
}

.kopf {
    border-bottom: 3px solid var(--farbe-akzent);
    padding: var(--abstand-m);
}

.kopf__logo {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--farbe-text);
    text-decoration: none;
}

.kopf__punkt { color: var(--farbe-akzent); }

.kopf__claim {
    margin: 0;
    color: var(--farbe-text-leise);
    font-size: 0.9rem;
}

.inhalt {
    max-width: var(--breite-max);
    margin: 0 auto;
    padding: var(--abstand-l) var(--abstand-m);
}

.titel { font-size: 1.8rem; line-height: 1.25; }

.liste { list-style: none; margin: 0; padding: 0; }

.liste__eintrag + .liste__eintrag { margin-top: var(--abstand-m); }

.karte {
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-linie);
    border-radius: var(--radius);
    padding: var(--abstand-m);
}

.karte__titel { margin: 0 0 var(--abstand-s); font-size: 1.2rem; }
.karte__titel a { color: var(--farbe-text); text-decoration: none; }
.karte__titel a:hover { color: var(--farbe-akzent); }

.karte__meta,
.beitrag__meta {
    margin: 0 0 var(--abstand-s);
    color: var(--farbe-text-leise);
    font-size: 0.85rem;
    display: flex;
    gap: var(--abstand-s);
}

.karte__teaser { margin: 0; }

.beitrag__teaser { font-weight: 600; }
.beitrag__zurueck { margin-top: var(--abstand-l); }

.hinweis { color: var(--farbe-text-leise); }

a { color: var(--farbe-akzent); }

.fuss {
    border-top: 1px solid var(--farbe-linie);
    padding: var(--abstand-m);
    text-align: center;
    color: var(--farbe-text-leise);
    font-size: 0.85rem;
}

.fuss__nav { display: flex; gap: var(--abstand-m); justify-content: center; }
.fuss__copy { margin: var(--abstand-s) 0 0; }