/*
    Grundlagen des öffentlichen Teils (Konzept 15.2): Zurücksetzen der
    Browservorgaben, Typografie und die nackten HTML-Elemente.

    Abgrenzung: Hier wird gestaltet, was ohne Klasse im Markup steht – eine
    Überschrift, ein Absatz, ein Link, ein Bild. Ein Bauteil gehört nicht
    hierher: Raster, Kopf- und Fußbereich stehen in layout.css, Karten,
    Schaltflächen und Formulare in components.css. Wer diese Grenze
    aufweicht, sucht später in beiden Dateien.

    Zwei Klassen bilden die Ausnahme, weil sie Fließtext betreffen und kein
    Bauteil sind: `.leise` für Datumsangaben und Bildunterschriften und
    `.inhalt` als Hülle um redaktionellen Text, der seine Listenpunkte
    zurückbekommt.

    Sämtliche Werte stammen aus tokens.css. In dieser Datei steht kein
    Farb- und kein Abstandswert, der nicht dort benannt ist.
*/

/* ----------------------------------------------------------------------
   Schriften

   Selbst gehostet unter wwwroot/fonts/, keine Zeile von einem fremden
   Server (Konzept 6.2). Zur Herkunft und zum Grund der Umbenennung siehe
   wwwroot/fonts/LIESMICH.md.

   font-display: swap – der Text erscheint sofort in der Rückfallschrift und
   wird ausgetauscht, sobald die Schrift da ist. Er ist damit nie unsichtbar,
   was für den LCP-Wert entscheidend ist (Konzept 15.3).

   Die Regeln stehen am Anfang der Datei, damit der Browser sie früh findet;
   geladen wird eine Schrift ohnehin erst, wenn ein Element sie braucht.
   ---------------------------------------------------------------------- */

@font-face {
    font-family: 'Eringerfeld Serif';
    src: url('../fonts/eringerfeld-serif-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Eringerfeld Serif';
    src: url('../fonts/eringerfeld-serif-italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Eringerfeld Serif';
    src: url('../fonts/eringerfeld-serif-semibold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Eringerfeld Sans';
    src: url('../fonts/eringerfeld-sans-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Eringerfeld Sans';
    src: url('../fonts/eringerfeld-sans-semibold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* ----------------------------------------------------------------------
   Zurücksetzen

   Bewusst knapp gehalten. Ein umfangreicher Reset entfernt Vorgaben, die
   anschließend wieder aufgebaut werden müssen; nötig ist nur, was sich
   zwischen den Browsern unterscheidet oder der Skala im Weg steht.
   ---------------------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Die Standardabstände der Browser folgen keiner Skala. Sie werden entfernt
   und weiter unten je Element aus den Raum-Tokens neu vergeben. */
body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote,
dl, dd,
ul, ol {
    margin: 0;
    padding: 0;
}

ul, ol {
    list-style: none;
}

/* ----------------------------------------------------------------------
   Dokument
   ---------------------------------------------------------------------- */

html {
    /* Sprungmarken und Ankerlinks gleiten, statt zu springen. Bei
       prefers-reduced-motion wird das am Ende der Datei zurückgenommen. */
    scroll-behavior: smooth;

    /* iOS vergrößert im Querformat sonst eigenmächtig die Schrift und
       zerlegt damit die Größenskala. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: var(--schrift-text);
    font-size: var(--groesse-basis);
    line-height: var(--zeilenhoehe);
    color: var(--farbe-text);
    background-color: var(--farbe-flaeche);

    /* Der Fußbereich soll auch auf kurzen Seiten unten stehen. Das Raster
       dazu setzt layout.css; hier steht nur die Mindesthöhe. */
    min-height: 100svh;

    /* Silbentrennung. Deutsche Komposita sind lang genug, dass ohne sie
       auf dem Telefon einzelne Wörter die Spalte sprengen. Die
       Sprachangabe kommt aus dem lang-Attribut des html-Elements. */
    hyphens: auto;
}

/* ----------------------------------------------------------------------
   Typografie
   ---------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--schrift-titel);
    font-weight: 600;
    line-height: var(--zeilenhoehe-titel);
    color: var(--farbe-primaer);

    /* Überschriften werden nicht getrennt – ein Trennstrich in der
       Hauptüberschrift sieht nach Fehler aus. */
    hyphens: none;

    /* Verteilt den Umbruch gleichmäßig, statt ein einzelnes Wort in der
       letzten Zeile stehen zu lassen. */
    text-wrap: balance;
}

h1 { font-size: var(--groesse-titel-1); }
h2 { font-size: var(--groesse-titel-2); }
h3 { font-size: var(--groesse-titel-3); }
h4 { font-size: var(--groesse-basis); }

/* Der Abstand einer Überschrift gehört nach oben, zum vorangehenden
   Abschnitt – sie steht bei ihrem eigenen Text, nicht in der Mitte. Die
   Ausnahme verhindert eine Lücke am Anfang eines Abschnitts. */
h2, h3, h4 {
    margin-top: var(--raum-4);
    margin-bottom: var(--raum-2);
}

h2:first-child,
h3:first-child,
h4:first-child {
    margin-top: 0;
}

p {
    margin-bottom: var(--raum-2);

    /* Vermeidet einzelne Wörter in der letzten Zeile eines Absatzes. */
    text-wrap: pretty;
}

p:last-child {
    margin-bottom: 0;
}

strong, b {
    font-weight: 600;
}

small {
    font-size: var(--groesse-klein);
}

/* Datumsangaben, Bildunterschriften, Herkunftsangaben. */
.leise {
    color: var(--farbe-text-leise);
    font-size: var(--groesse-klein);
}

/* ----------------------------------------------------------------------
   Links

   Fließtextlinks sind unterstrichen, nicht nur eingefärbt. WCAG 1.4.1
   verlangt, dass Farbe nicht das einzige Unterscheidungsmerkmal ist –
   sonst sind die Links für Menschen mit Farbsehschwäche unsichtbar.
   Navigation und Schaltflächen sind davon ausgenommen; deren Bedeutung
   ergibt sich aus der Position. Das regelt layout.css beziehungsweise
   components.css durch Zurücksetzen von text-decoration.
   ---------------------------------------------------------------------- */

a {
    color: var(--farbe-primaer-mittel);
    text-decoration: underline;

    /* Unterlängen werden ausgespart, statt durchgestrichen zu werden. */
    text-underline-offset: 0.15em;
    text-decoration-thickness: 1px;
}

a:hover {
    color: var(--farbe-primaer);
    text-decoration-thickness: 2px;
}

/* ----------------------------------------------------------------------
   Fokus

   Zwei Ringe übereinander, und das aus einem gerechneten Grund: Der
   Fokusrahmen muss sich nach WCAG 1.4.11 mit mindestens 3:1 von seiner
   Umgebung abheben. Auf Weiß leistet das nur das Waldgrün (9,77:1); das
   Gold käme dort auf 1,53:1 und wäre praktisch unsichtbar. Auf dem
   waldgrünen Kopfbereich ist es genau umgekehrt – dort trägt das Gold
   (6,40:1) und das Grün verschwindet.

   Der Doppelring löst beides mit einer Regel: Auf hellem Grund sieht man
   den grünen Ring, auf dunklem den goldenen. Er ersetzt die Angabe in der
   Entscheidungsvorlage, die das Gold allein als Fokusfarbe nannte.

   :focus-visible statt :focus – so erscheint der Ring bei Tastaturbedienung
   und nicht beim Mausklick.
   ---------------------------------------------------------------------- */

:focus-visible {
    outline: 2px solid var(--farbe-primaer);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px var(--farbe-akzent);
}

/* Ausnahme, und sie ist nachgemessen: Der Blazor-Router setzt nach jeder
   Navigation den Fokus auf die Überschrift der neuen Seite, damit ein
   Screenreader dort zu lesen beginnt. Die Überschrift trägt dafür
   tabindex="-1". Entgegen der verbreiteten Annahme greift :focus-visible
   dabei sehr wohl – der Browser wertet den programmatischen Fokus als
   tastaturähnlich, solange zuvor nicht mit der Maus geklickt wurde. Ohne
   diese Regel liegt beim Aufruf jeder Seite ein Fokusring um die
   Hauptüberschrift.

   Elemente mit tabindex="-1" sind keine Bedienelemente; sie werden nur
   angesprungen. Ein Fokusring gehört dort nicht hin. */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible {
    outline: none;
    box-shadow: none;
}

/* ----------------------------------------------------------------------
   Bilder und Medien
   ---------------------------------------------------------------------- */

img, picture, video, svg {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Bis ein Bild geladen ist, steht dort eine ruhige Fläche statt Weiß.
   Gegen das Springen des Layouts helfen die Attribute width und height
   am img-Element; sie sind deshalb im Markup Pflicht. */
img {
    background-color: var(--farbe-flaeche-alt);
}

figure {
    margin-bottom: var(--raum-3);
}

figcaption {
    margin-top: var(--raum-1);
    color: var(--farbe-text-leise);
    font-size: var(--groesse-klein);
    line-height: 1.4;
}

/* ----------------------------------------------------------------------
   Listen im Fließtext

   Die Listenpunkte wurden oben global entfernt, weil Navigationen und
   Kartenraster ebenfalls Listen sind. Hier kommen sie für den Inhalt
   zurück – über eine Klasse, die der Redaktionsinhalt trägt.
   ---------------------------------------------------------------------- */

.inhalt ul,
.inhalt ol {
    margin-bottom: var(--raum-2);
    padding-left: var(--raum-3);
}

.inhalt ul { list-style: disc; }
.inhalt ol { list-style: decimal; }

.inhalt li {
    margin-bottom: var(--raum-1);
}

/* ----------------------------------------------------------------------
   Zitate, Trennlinien, Tabellen
   ---------------------------------------------------------------------- */

blockquote {
    margin-block: var(--raum-3);
    padding-left: var(--raum-3);
    border-left: 3px solid var(--farbe-primaer-hell);
    font-size: var(--groesse-vorspann);
    line-height: 1.5;
}

hr {
    height: 1px;
    margin-block: var(--raum-4);
    border: 0;
    background-color: var(--farbe-primaer-hell);
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--raum-3);
}

th, td {
    padding: var(--raum-1) var(--raum-2);
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--farbe-primaer-hell);
}

th {
    font-family: var(--schrift-titel);
    font-weight: 600;
    color: var(--farbe-primaer);
}

/* ----------------------------------------------------------------------
   Formularelemente

   Nur die Grundform. Das Aussehen der Felder, ihre Rahmen und die
   Fehlermeldungen entstehen in components.css.
   ---------------------------------------------------------------------- */

/* Eingabefelder erben die Schrift nicht von selbst – ohne diese Zeile
   stehen sie in der Standardschrift des Betriebssystems. */
input, textarea, select, button {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
}

textarea {
    /* Nur in der Höhe verstellbar; seitlich würde es das Raster sprengen. */
    resize: vertical;
}

/* ----------------------------------------------------------------------
   Auswahl
   ---------------------------------------------------------------------- */

::selection {
    background-color: var(--farbe-primaer-hell);
    color: var(--farbe-text);
}

/* ----------------------------------------------------------------------
   Bewegungsreduzierung (Konzept 15.4)

   Verpflichtend und keine Formalie: Animationen können bei vestibulären
   Störungen Schwindel und Übelkeit auslösen, und die Zielgruppe umfasst
   viele ältere Nutzerinnen und Nutzer.

   Der Block steht am Ende der Datei und greift damit auch auf alles, was
   layout.css, components.css und hero.css später ergänzen.
   ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}