/*
 * Design-Tokens. Die einzige Datei im Projekt, in der Farbwerte stehen.
 *
 * Die Farbwelt einer Marke - Schrift, Papier, Linien, Flaechen, Akzent,
 * dazu Radien, Grundgroesse und Schriftstapel - wird je Site aus dem Site
 * Set ueberschrieben; hier stehen nur die Rueckfallwerte. Gemeinsam bleibt
 * das Geruest: Raster, Abstaende, Fokus, Zeilenlaenge. Das ist der Zweck
 * des gemeinsamen Fundaments - acht Auftritte, eine Datei, ein Kopfblock
 * Unterschied.
 *
 * Kein Dark Mode: Die Auftritte sollen in Kontrast und Wirkung berechenbar
 * bleiben, und ein zweites Farbschema verdoppelt die Pruefarbeit bei der
 * Barrierefreiheit ohne erkennbaren Nutzen fuer diese Zielgruppen.
 */

/* --- Schriftdateien -------------------------------------------------------
 * Nur Lateinisch (Umlaute, €, „“ enthalten), nur die benutzten Schnitte.
 * Jede Marke laedt davon nur, was ihr Stapel nennt - der Browser holt eine
 * Datei erst, wenn Text in dieser Schrift auf der Seite steht.
 * font-display: swap - der Text ist sofort lesbar, die Schrift folgt.
 * Lizenz: SIL Open Font License 1.1, Texte in Fonts/OFL-*.txt.
 * Herkunft: Build/schriften-holen.sh. */
@font-face { font-family: 'Hind'; font-style: normal; font-weight: 300; font-display: swap; src: url('../Fonts/hind-latin-300-normal.woff2') format('woff2'); }
@font-face { font-family: 'Hind'; font-style: normal; font-weight: 400; font-display: swap; src: url('../Fonts/hind-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Hind'; font-style: normal; font-weight: 600; font-display: swap; src: url('../Fonts/hind-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400; font-display: swap; src: url('../Fonts/archivo-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 600; font-display: swap; src: url('../Fonts/archivo-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 700; font-display: swap; src: url('../Fonts/archivo-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400; font-display: swap; src: url('../Fonts/source-serif-4-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 400; font-display: swap; src: url('../Fonts/source-serif-4-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 600; font-display: swap; src: url('../Fonts/source-serif-4-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../Fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); }

:root {
    /* --- Farben ---------------------------------------------------------
     * ink auf paper ergibt 15,9:1, muted auf paper 7,4:1 - beide weit ueber
     * der Schwelle von 4,5:1 fuer Fliesstext (WCAG 2.2 AA, 1.4.3).
     * Geprueft mit Build/kontraste-pruefen.php. */
    --ink: #1A1A18;
    --paper: #FFFFFF;
    --muted: #5A5A54;
    --line: #D8D8D2;
    --flaeche: #F5F5F1;

    /* Markenwerte - werden je Site gesetzt */
    --accent: #14504A;
    --accent-soft: #E8F0EE;
    --accent-text: #FFFFFF;

    /* Markenfarbe fuer Linien, Rahmen und Aufzaehlungspunkte.
     *
     * Getrennt vom Akzent, weil nicht jeder Akzent als Linie taugt: Das
     * Gelb der Werkstattmarke (#E2A400) traegt auf ihrem Papier (#F4F5F6)
     * nur 1,9:1. Als Flaeche mit dunklem Text ist es ausgezeichnet, als
     * Strich auf hellem Grund unsichtbar fuer jeden mit Sehschwaeche
     * (WCAG 2.2, 1.4.11 verlangt 3:1). Dort steht deshalb ein dunklerer
     * Verwandter derselben Farbe. */
    --accent-kontur: #14504A;

    /* Dunkle Flaeche. Die Werkstattmarke setzt ihre Preise darauf,
     * die uebrigen Marken benutzen sie fuer den Fussbereich. */
    --panel: #1C2124;
    --panel-text: #FFFFFF;

    /* Zweitfarbe. Nur dort, wo sie den Kontrast haelt.
     *
     * Bei den Maverick-Marken ist das ein Gold (#C89B3C). Gemessen:
     * auf Weiss 2,56:1 - das reicht WEDER fuer Text (4,5:1) NOCH fuer
     * Linien und Bedienelemente (3:1). Auf dem Navy der Marke dagegen
     * 6,46:1, und mit dunklem Text darauf 6,81:1.
     *
     * Deshalb gilt: Zweitfarbe nur auf dunklem Grund oder als Flaeche
     * mit dunklem Text. Nie als Linie auf Weiss, nie als Textfarbe auf
     * Weiss. Wer das umdreht, baut eine Marke, die niemand mit
     * Sehschwaeche lesen kann.
     *
     * Marken ohne Zweitfarbe geben eine leere Einstellung aus; die Zeile
     * im Kopf ist dann ungueltig und wird vom Browser verworfen. Deshalb
     * steht hier kein Gold als Rueckfall, sondern die eigene Akzentfarbe
     * der Marke - sonst erbte jede Marke ohne Zweitfarbe das Gold der
     * Mavericks, ohne dass es jemand angeordnet haette. */
    --accent-zweit: var(--accent);
    --accent-zweit-text: var(--accent-text);

    /* --- Abstaende ------------------------------------------------------
     * Achterreihe, nicht frei waehlbar. Wer einen Zwischenwert braucht,
     * braucht in Wahrheit ein anderes Raster. */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2.5rem;
    --space-7: 4rem;
    --space-8: 6rem;

    /* --- Radien ---------------------------------------------------------
     * Je Marke gesetzt: das Technikhaus bleibt bei 2/4 px, das
     * Marketinghaus rundet auf 4/8, die Sorgenfrei-Marke auf 8/12, die
     * Werkstatt bleibt kantig bei 0/2. */
    --radius-1: 2px;
    --radius-2: 6px;

    /* --- Schriftstapel ---------------------------------------------------
     * Vier Stapel, aus denen jede Marke waehlt (stil.schrift_* im Site
     * Set). Die Dateien liegen seit dem 21.09.2026 im Paket (Fonts/,
     * @font-face unten) und kommen von der eigenen Domain - keine
     * Verbindung zu Google oder einem CDN (DSGVO).
     *
     * Bis dahin standen die Namen hier, die Dateien fehlten: Jeder Browser
     * fiel auf Georgia/Times und die Systemschrift zurueck. Das war ein
     * Grossteil des "nuechternen" Eindrucks, den der Auftraggeber bemerkte.
     *
     * Prinzip aus dem Entwurf (Lovable): sachlicher Fliesstext mit Serifen,
     * Ueberschriften in Archivo, Zahlen in einer Schreibmaschinenschrift.
     * WWE Media folgt dem Figma-Entwurf: durchgehend Frutiger - als freie
     * Alternative Hind (Entscheidung 21.09.2026). Wer Frutiger lizenziert,
     * legt die Dateien dazu; der Stapel nennt sie schon an zweiter Stelle. */
    --stapel-sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --stapel-serif: 'Source Serif 4', Georgia, 'Noto Serif', 'Times New Roman', serif;
    --stapel-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, 'DejaVu Sans Mono', monospace;
    --stapel-frutiger: 'Hind', 'Frutiger', 'Frutiger LT Std', 'Segoe UI', system-ui, sans-serif;

    --schrift-text: var(--stapel-sans);
    --schrift-titel: var(--stapel-sans);
    --schrift-zahl: var(--stapel-mono);
    /* Gewicht der Ueberschriften: Archivo 600 laut Entwurf; die Marken
     * setzen es nicht einzeln, WWE Media (Hind) ebenfalls 600. */
    --gewicht-titel: 600;

    /* --- Schriftgroessen -------------------------------------------------
     * Grundgroesse 17 - 19 px, je Marke bis 20 px. Fliessend zwischen
     * 320px und 1200px Breite, damit bei 200 % Zoom nichts umbricht, was
     * nicht umbrechen soll (1.4.4). */
    --text-max: 1.1875rem;
    --text-basis: clamp(1.0625rem, 1rem + 0.3vw, var(--text-max));
    --text-klein: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);      /* 15 - 16 px */
    --text-gross: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);      /* 20 - 24 px */
    --h1: clamp(1.75rem, 1.3rem + 2.2vw, 2.75rem);             /* 28 - 44 px */
    --h2: clamp(1.375rem, 1.15rem + 1.1vw, 1.875rem);          /* 22 - 30 px */
    --h3: clamp(1.1875rem, 1.05rem + 0.6vw, 1.375rem);         /* 19 - 22 px */

    --zeile: 1.6;
    --zeile-titel: 1.2;

    /* Textspalte hoechstens 68 Zeichen - laengere Zeilen kosten beim Lesen
     * den Zeilenanschluss (WCAG 1.4.8 nennt 80 als Obergrenze). */
    --spalte: 68ch;
    --seite: 72rem;

    /* --- Fokus ----------------------------------------------------------
     * Sichtbar, nicht dezent: 3px Rahmen plus 2px Abstand. Der Kontrast
     * gegen weiss betraegt 15,9:1, gegen die Akzentflaeche mindestens 3:1
     * (WCAG 2.2, 1.4.11 und 2.4.13). */
    --fokus-farbe: var(--ink);
    --fokus-breite: 3px;
    --fokus-abstand: 2px;

    /* --- Breakpoints (nur zur Dokumentation; CSS kann sie nicht nutzen) --
     * 640 / 900 / 1200 */
}

/* ----------------------------------------------------------------------
 * Grundlagen
 * ------------------------------------------------------------------- */

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

html {
    /* Kein festes font-size in px: ueberschreibt die Einstellung des
     * Nutzers und verletzt 1.4.4. */
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--schrift-text);
    font-size: var(--text-basis);
    line-height: var(--zeile);
    /* Kein horizontales Scrollen, auch nicht bei 320px (1.4.10). */
    overflow-x: hidden;
}

h1, h2, h3, h4 {
    font-family: var(--schrift-titel);
    font-weight: var(--gewicht-titel);
    line-height: var(--zeile-titel);
    margin: 0 0 var(--space-4);
    text-wrap: balance;
}

h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); margin-top: var(--space-7); }
h3 { font-size: var(--h3); margin-top: var(--space-5); }

p, ul, ol, dl, table {
    margin: 0 0 var(--space-4);
    max-width: var(--spalte);
    /* Auch lange Woerter ohne Trennmoeglichkeit brechen um, statt die
     * Seite breiter zu machen. */
    overflow-wrap: break-word;
}

a {
    color: var(--ink);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    /* Lange Adressen umbrechen. In den uebernommenen Rechtstexten stehen
     * ausgeschriebene Web- und Mailadressen; auf dem Telefon ragte die
     * Datenschutzseite dadurch 71 px ueber den Rand (gemessen 18.09.2026,
     * Strukturpruefstand). Waagerechtes Scrollen ist ein Verstoss gegen
     * WCAG 1.4.10. */
    overflow-wrap: anywhere;
}

a:hover {
    text-decoration-thickness: 2px;
}

/* Ein Fokusring fuer alles. :focus-visible statt :focus, damit der Ring
 * bei Mausklick nicht stehen bleibt - sichtbar bleibt er fuer Tastatur. */
:focus-visible {
    outline: var(--fokus-breite) solid var(--fokus-farbe);
    outline-offset: var(--fokus-abstand);
}

img {
    max-width: 100%;
    height: auto;
}

/* Bewegung nur, wenn sie gewuenscht ist (2.3.3). Es bewegt sich ohnehin
 * nichts von selbst; das hier faengt den Rest ab. */
@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;
    }
}

/* ----------------------------------------------------------------------
 * Raster
 * ------------------------------------------------------------------- */

.seite {
    width: 100%;
    max-width: var(--seite);
    margin-inline: auto;
    /* Mindestens 16px Rand auf dem Telefon. */
    padding-inline: var(--space-4);
}

@media (min-width: 640px) {
    .seite { padding-inline: var(--space-5); }
}

.abschnitt {
    padding-block: var(--space-7);
}

.abschnitt--flaeche {
    background: var(--flaeche);
}

.abschnitt--akzent {
    background: var(--accent);
    color: var(--accent-text);
}

.abschnitt--akzent :focus-visible {
    outline-color: var(--accent-text);
}

/* ----------------------------------------------------------------------
 * Wiederkehrende Bausteine
 * ------------------------------------------------------------------- */

/* Sprungmarke: sichtbar, sobald sie den Fokus hat (2.4.1). */
.sprungmarke {
    position: absolute;
    left: var(--space-4);
    top: var(--space-4);
    z-index: 100;
    transform: translateY(-200%);
    background: var(--paper);
    color: var(--ink);
    padding: var(--space-3) var(--space-4);
    border: 2px solid var(--ink);
    border-radius: var(--radius-1);
}

.sprungmarke:focus {
    transform: translateY(0);
}

/* Bedienelemente: Zielgroesse mindestens 44 x 44 px (2.5.8 verlangt 24,
 * 44 ist die bequeme Groesse und kostet hier nichts). */
.knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    padding: var(--space-3) var(--space-5);
    background: var(--accent);
    color: var(--accent-text);
    border: 2px solid var(--accent);
    border-radius: var(--radius-2);
    font-size: var(--text-basis);
    text-decoration: none;
}

.knopf:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
}

.knopf--leise {
    background: transparent;
    color: var(--ink);
    border-color: var(--ink);
}

.knopf--leise:hover {
    background: var(--ink);
    color: var(--paper);
}

/* Zahlen, Preise und Kennwerte in der Zahlenschrift der Marke. Ziffern
 * gleicher Breite, damit untereinander stehende Betraege eine Spalte
 * ergeben und nicht flimmern. */
.zahl {
    font-family: var(--schrift-zahl);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

/* Kleine Auszeichnungszeile ueber einer Ueberschrift. Versalien mit
 * Sperrung - ohne Sperrung sind Versalien schwerer zu lesen. */
.label {
    font-family: var(--schrift-zahl);
    font-size: var(--text-klein);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

/* Dunkle Flaeche. Der Fokusring wechselt mit, sonst laege er unsichtbar
 * dunkel auf dunkel (1.4.11). */
.panel {
    background: var(--panel);
    color: var(--panel-text);
}

.panel :focus-visible {
    outline-color: var(--panel-text);
}

.panel a {
    color: var(--panel-text);
}

/* Nur fuer Screenreader - nicht display:none, das waere auch fuer sie weg. */
.nur-vorlesen {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Bilder mit Hinweis - der Hinweis gehoert in die Bildunterschrift, nicht
 * als Auflage ueber das Bild: so bleibt er kopierbar und vorlesbar
 * (Artikel 50 KI-VO). */
figure {
    margin: 0 0 var(--space-5);
}

figcaption {
    margin-top: var(--space-2);
    font-size: var(--text-klein);
    color: var(--muted);
}