/*
 * Alle Werte der Oberfläche nach dem Designbrief "Produkt" aus dem Mailtool.
 * Ausserhalb dieser Datei gibt es keinen Hex- oder Pixelwert, ausser 1px für Haarlinien.
 *
 * Gleiche Werte wie im Mailtool, damit die beiden Oberflächen zusammengehören. Die Schrift
 * ist dieselbe Datei; IBM Plex Sans steht unter der SIL Open Font License, die Lizenz liegt
 * daneben.
 */

@font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("schrift/ibm-plex-sans-400.woff2") format("woff2");
}
@font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("schrift/ibm-plex-sans-500.woff2") format("woff2");
}
@font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("schrift/ibm-plex-sans-600.woff2") format("woff2");
}

:root {
    /* Schrift */
    --schrift: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --gewicht-normal: 400;
    --gewicht-mittel: 500;
    --gewicht-fett: 600;

    /* Schriftgrössen mit Zeilenhöhe */
    --text-13: 13px;
    --zeile-13: 18px;
    --text-15: 15px;
    --zeile-15: 22px;
    --text-17: 17px;
    --zeile-17: 24px;
    --text-22: 22px;
    --zeile-22: 28px;
    --text-28: 28px;
    --zeile-28: 34px;
    --text-40: 40px;
    --zeile-40: 44px;
    --text-56: 56px;
    --zeile-56: 60px;
    --versalien-abstand: 0.04em;

    /* Abstände */
    --abstand-4: 4px;
    --abstand-8: 8px;
    --abstand-12: 12px;
    --abstand-16: 16px;
    --abstand-24: 24px;
    --abstand-32: 32px;
    --abstand-48: 48px;
    --abstand-64: 64px;

    /* Rundungen */
    --rundung-kachel: 12px;
    --rundung-knopf: 8px;
    --rundung-schalter: 999px;

    /* Farben */
    --grund: #F3F4F6;
    --flaeche: #FFFFFF;
    --haarlinie: #E5E7EB;
    --text: #111827;
    --gedaempft: #6B7280;
    --akzent: #0F7A5C;
    --akzent-hell: #E6F4EF;
    --gefahr: #C8102E;
    --gefahr-hell: #FBE9EC;
    --warnung: #B45309;
    --warnung-hell: #FDF1E7;
    --weiss: #FFFFFF;

    /* Fokus */
    --fokus-breite: 2px;
    --fokus-abstand: 2px;

    /* Bewegung */
    --dauer: 150ms;
    --kurve: ease-out;

    /* Layout */
    --inhalt-breite: 1200px;
    --spalten-abstand: 24px;
    --seitenrand: 32px;
    --seitenrand-schmal: 16px;

    /* Bausteinmasse */
    --knopf-hoehe: 40px;
    --feld-hoehe: 40px;
    --zeilen-hoehe: 48px;
    --suchfeld-breite: 200px;
    --schalter-breite: 44px;
    --schalter-hoehe: 24px;
    --schalter-knopf: 20px;
    --fortschritt-hoehe: 2px;
    --hinweis-kante: 3px;
    --haarlinie-breite: 1px;
    --deaktiviert: 0.4;
}