/*
 * Design-Tokens – Flüchtlingsnetzwerk Hiltrup
 * Projektspezifisch: Eine andere Website (z. B. die Bücherei) bekommt eine eigene tokens.css
 * mit denselben Namen und eigenen Werten; site.css bleibt gleich.
 * Farben aus dem Logo, Kontraste nach WCAG 2.1 AA geprüft (siehe docs/marke/markenanalyse.md).
 */

@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../schriften/poppins-latin-600-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../schriften/poppins-latin-ext-600-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../schriften/poppins-latin-700-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../schriften/poppins-latin-ext-700-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Atkinson Hyperlegible Next";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../schriften/atkinson-hyperlegible-next-latin-400-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Atkinson Hyperlegible Next";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../schriften/atkinson-hyperlegible-next-latin-ext-400-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Atkinson Hyperlegible Next";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("../schriften/atkinson-hyperlegible-next-latin-400-italic.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Atkinson Hyperlegible Next";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../schriften/atkinson-hyperlegible-next-latin-700-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Atkinson Hyperlegible Next";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../schriften/atkinson-hyperlegible-next-latin-ext-700-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Ersatzschriften mit angepassten Maßen – verhindert Layout-Sprünge beim Nachladen */
@font-face {
    font-family: "Poppins Ersatz";
    src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans");
    size-adjust: 112%;
    ascent-override: 93%;
    descent-override: 31%;
    line-gap-override: 9%;
}
@font-face {
    font-family: "Atkinson Ersatz";
    src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans");
    size-adjust: 103%;
    ascent-override: 92%;
    descent-override: 22%;
}

:root {
    /* Markenfarben (Logo) – Vollton, Textvariante (≥ 4,5 : 1 auf Weiß), helle Fläche */
    --gruen: #27D479;        --gruen-text: #167A45;       --gruen-hell: #E5FAEF;
    --cyan: #009FE3;         --cyan-text: #00719F;        --cyan-hell: #E0F3FC;
    --dunkelgruen: #076633;  --dunkelgruen-text: #076633; --dunkelgruen-hell: #E1EDE7;
    --rot: #E30613;          --rot-text: #C80511;         --rot-hell: #FCE1E3;
    --violett: #951B81;      --violett-text: #951B81;     --violett-hell: #F2E4F0;
    --orange: #F39200;       --orange-text: #9E5E00;      --orange-hell: #FEF2E0;
    --dunkelblau: #2B2E83;   --dunkelblau-text: #2B2E83;  --dunkelblau-hell: #E6E6F0;

    /* Rollen */
    --primaer: var(--dunkelgruen);
    --primaer-dunkel: #054D26;
    --akzent: var(--gruen);
    --text: #1A1A1A;
    --text-leise: #595959;
    --grund: #FAF8F4;
    --flaeche: #FFFFFF;
    --flaeche-warm: #F3EFE7;
    --linie: #E4DED2;
    --dunkel: #0B3D22;
    --dunkel-text: #FFFFFF;
    --dunkel-leise: #C9E4D5;
    --fokus: #2B2E83;

    /* Typografie */
    --schrift-titel: "Poppins", "Poppins Ersatz", system-ui, sans-serif;
    --schrift-text: "Atkinson Hyperlegible Next", "Atkinson Ersatz", system-ui, sans-serif;
    --groesse-klein: 0.9375rem;
    --groesse-text: 1.125rem;
    --groesse-gross: clamp(1.2rem, 1.1rem + 0.4vw, 1.375rem);
    --groesse-h3: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
    --groesse-h2: clamp(1.625rem, 1.35rem + 1.2vw, 2.375rem);
    --groesse-h1: clamp(2.125rem, 1.6rem + 2.4vw, 3.75rem);
    --zeilenhoehe: 1.6;

    /* Abstände und Formen */
    --abstand-1: 0.25rem;
    --abstand-2: 0.5rem;
    --abstand-3: 0.75rem;
    --abstand-4: 1rem;
    --abstand-5: 1.5rem;
    --abstand-6: 2rem;
    --abstand-7: 3rem;
    --abstand-8: clamp(3rem, 2rem + 4vw, 6rem);
    --breite: 76rem;
    --breite-text: 44rem;
    --rand: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
    --radius: 1.25rem;
    --radius-klein: 0.625rem;
    --schatten: 0 1px 2px rgb(11 61 34 / 0.06), 0 8px 24px -8px rgb(11 61 34 / 0.12);
    --schatten-hoch: 0 2px 4px rgb(11 61 34 / 0.06), 0 18px 40px -12px rgb(11 61 34 / 0.22);
    --dauer: 180ms;
}