/* ============================================================================
   Design-Tokens · Fjordhaus am See
   Einzige Quelle für Farbe, Typografie, Abstände und Radien.
   Keine Selektoren hier, nur Variablen.
   ========================================================================= */

:root {
    /* --- Farbe ---------------------------------------------------------
       Abgeleitet aus der Lage: Elbmündung, Salbei am Deich, Dünensand.
       Geprüfte Kontraste (WCAG verlangt 4.5:1 für Text):
         tinte auf greige 14.9  ·  tinte auf weiss 16.6  ·  tinte auf apricot 7.8
         petrol auf greige 5.7  ·  petrol auf weiss 6.4  ·  weiss auf tiefsee 13.3
         tinte-2 auf greige 6.4 ·  apricot auf tiefsee 6.2
       Achtung: petrol auf taupe liegt bei 4.5 und ist damit grenzwertig.
       Auf Taupe-Flächen deshalb tinte statt petrol verwenden. */
    --c-tiefsee: #0B3538;
    --c-petrol: #0F6A6B;
    --c-salbei: #7AA8A2;
    --c-apricot: #E4A275;
    --c-taupe: #DED7CC;
    --c-greige: #F5F1EA;
    --c-weiss: #FFFFFF;
    --c-tinte: #14201E;
    --c-tinte-2: #4F5956;

    /* Abgeleitete Zustände */
    --c-apricot-hover: #D8925F;
    --c-petrol-hover: #0C5556;
    --c-linie: #E2DCD2;
    --c-linie-dunkel: rgba(255, 255, 255, .18);

    /* --- Typografie ----------------------------------------------------
       Georgia und system-ui sind auf praktisch jedem Gerät vorhanden.
       Kein externer Font-Request, damit auch kein Google-Fonts-Problem
       nach DSGVO. */
    --f-display: Georgia, "Iowan Old Style", "Times New Roman", serif;
    --f-text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

    /* Typskala, Basis 16px, Faktor ~1.25 */
    --t-xs: 0.8125rem;
    --t-sm: 0.9375rem;
    --t-base: 1rem;
    --t-lg: 1.125rem;
    --t-xl: 1.375rem;
    --t-2xl: 1.75rem;
    --t-3xl: clamp(1.9rem, 3.4vw, 2.5rem);
    --t-4xl: clamp(2.2rem, 5.2vw, 3.4rem);

    /* --- Abstände, 4px-Raster ------------------------------------------ */
    --s-1: 0.25rem;
    --s-2: 0.5rem;
    --s-3: 0.75rem;
    --s-4: 1rem;
    --s-5: 1.5rem;
    --s-6: 2rem;
    --s-7: 3rem;
    --s-8: 4rem;
    --s-9: 5.5rem;

    /* --- Form ----------------------------------------------------------- */
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 16px;
    --schatten: 0 1px 2px rgba(11, 53, 56, .06), 0 6px 20px rgba(11, 53, 56, .06);
    --schatten-tief: 0 2px 4px rgba(11, 53, 56, .08), 0 14px 36px rgba(11, 53, 56, .1);

    /* --- Layout ---------------------------------------------------------- */
    --breite: 1120px;
    --breite-text: 68ch;
}