@font-face {
    font-family: "Cinzel";
    src: url("../site-fonts/cinzel/Cinzel-VariableFont_wght.ttf") format("truetype");
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
}

@font-face {
    font-family: "Work Sans";
    src: url("../site-fonts/work-sans/WorkSans-VariableFont_wght.ttf") format("truetype");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: "Work Sans";
    src: url("../site-fonts/work-sans/WorkSans-Italic-VariableFont_wght.ttf") format("truetype");
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
}

/* Verhindert, dass Vollbreiten-Elemente durch die Breite der
   vertikalen Browser-Scrollleiste einen horizontalen Balken erzeugen. */
html,
body,
.wp-site-blocks {
    max-width: 100%;
    overflow-x: clip;
}

@supports not (overflow: clip) {
    html,
    body,
    .wp-site-blocks {
        overflow-x: hidden;
    }
}

/* Grundlagen fuer die gesamte Website.

   Enthaelt die Design-Tokens (Farben, Schriften, Abstaende) und
   die Schriftzuweisung. Wird auf allen Seiten geladen, vor allen
   anderen CSS-Dateien.

   Schriftsystem:
   - Cinzel     fuer die Wortmarke und kurze Versalien-Labels.
                Eine roemische Capitalis, die die Schrift im Logo
                aufgreift.
   - Work Sans  fuer Navigation, Ueberschriften und Fliesstext.
                Freundlich, offen, auf kleinen Bildschirmen gut
                lesbar – passend zur Zielgruppe von 18 bis 35. */

:root {
    /* Marke */
    --jf-blau: #5b818f;
    --jf-blau-tief: #34535e;
    --jf-blau-dunkel: #1b2f37;
    --jf-blau-nacht: #12232a;

    --jf-gold: #dbc58f;
    --jf-gold-tief: #b99e5f;

    /* Hellere Variante fuer Text auf der Kopfzeilenfarbe:
       reines Gold erreicht darauf nur 3,3:1 Kontrast und ist
       in kleinen Groessen schlecht lesbar. */
    --jf-gold-hell: #f4e9cd;

    /* Das kräftige Gelb der Wortmarke vom Flyer. Es steht auf dem
       tiefen Teil des Fusszeilen-Verlaufs und erreicht dort rund
       4,9:1 Kontrast - deutlich besser lesbar als das matte Gold. */
    --jf-gelb: #ffd23f;

    /* Kopf- und Fusszeile teilen sich dieselbe Grundfarbe.
       --jf-kopf ist exakt der Ton, den der Site Editor auf die
       Kopfzeile setzt. Der Verlauf laeuft von dort nach unten
       ins Tiefere – so schliesst die Fusszeile oben bruchlos an
       die Kopfzeile an und der Text darunter bleibt lesbar. */
    --jf-kopf: #5b818f;
    --jf-kopf-mitte: #4c6d78;
    --jf-kopf-tief: #3f5c66;

    /* Flaechen */
    --jf-weiss: #ffffff;
    --jf-hell: #e8eef0;
    --jf-hell-warm: #f2f6f7;

    /* Globaler heller Seitenhintergrund: identisch mit dem Hero der
       Aktivitaets-Designvariante 1. */
    --jf-hintergrund-1:
        radial-gradient(circle at 8% 0%, rgb(255 255 255 / 18%), transparent 28rem),
        radial-gradient(circle at 94% 105%, rgb(219 197 143 / 22%), transparent 30rem),
        linear-gradient(135deg, #173d49 0%, #315866 43%, #5b818f 100%);
    --hintergrund_1: var(--jf-hintergrund-1);
    --jf-hintergrund-2: linear-gradient(145deg, #edf7fa 0%, #dcecf1 58%, #f5eedc 100%);
    --hintergrund_2: var(--jf-hintergrund-2);
    --jf-hintergrund-2-knopf: #dcecf1;

    /* Text */
    --jf-text: #1f2c33;
    --jf-text-leise: #5f7480;
    --jf-text-hell: #ffffff;
    --jf-text-hell-leise: #dfeaee;

    /* Linien */
    --jf-linie: #d8e2e5;
    --jf-linie-dunkel: rgb(255 255 255 / 16%);

    /* Schrift */
    --jf-schrift-marke: "Cinzel", "Trajan Pro", Georgia, serif;
    --jf-schrift: "Work Sans", -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, sans-serif;
    --jf-schrift-zitat: Georgia, "Times New Roman", serif;

    /* Zentrale Typografie-Skala.

       Komponenten-Dateien verwenden nur diese Variablen und legen
       keine eigenen Schriftgroessen fest. So lassen sich die
       Proportionen der gesamten Website spaeter hier an einer Stelle
       nachjustieren. Die fluiden Werte wachsen zwischen kleinen und
       grossen Bildschirmen automatisch mit. */
    --jf-schriftgroesse-label: 0.75rem;
    --jf-schriftgroesse-klein: 0.82rem;
    --jf-schriftgroesse-meta: 0.9rem;
    --jf-schriftgroesse-basis: 1rem;
    --jf-schriftgroesse-text: clamp(0.94rem, 1.2vw, 1.06rem);
    --jf-schriftgroesse-text-betont: clamp(1rem, 1.25vw, 1.14rem);
    --jf-schriftgroesse-zwischenueberschrift: clamp(1.22rem, 1.8vw, 1.5rem);
    --jf-schriftgroesse-titel-kompakt: clamp(1.45rem, 2.5vw, 2rem);
    --jf-schriftgroesse-abschnitt: clamp(2rem, 4.2vw, 3.65rem);
    --jf-schriftgroesse-abschnitt-ruhig: clamp(1.7rem, 2.8vw, 2.55rem);
    --jf-schriftgroesse-zitatzeichen: 3.25rem;

    /* Bewegung */
    --jf-ease: cubic-bezier(0.22, 1, 0.36, 1);

    /* Seitenrand */
    --jf-rand: max(22px, calc((100% - 1240px) / 2));
}


/* Schriftzuweisung.

   Das Theme Extendable setzt in seiner theme.json:
       styles.typography.fontFamily      = Inter   (fuer body)
       styles.elements.heading.fontFamily = Inter   (fuer h1-h6)

   WordPress gibt diese Regeln als Global Styles aus und umgibt die
   Selektoren dabei mit :root :where(...). Das ergibt Spezifitaet
   0-1-0 – ein blosses "body" (0-0-1) verliert dagegen, egal in
   welcher Reihenfolge die Dateien geladen werden.

   Deshalb steht vor jedem Selektor :root. Damit liegen die Regeln
   hier bei 0-1-1 und gewinnen zuverlaessig, ohne !important. */

:root body,
:root .wp-site-blocks,
:root .wp-site-blocks p,
:root .wp-site-blocks li,
:root .wp-site-blocks a,
:root .wp-site-blocks button,
:root .wp-site-blocks input,
:root .wp-site-blocks textarea,
:root .wp-site-blocks select {
    font-family: var(--jf-schrift);
}

:root .wp-site-blocks h1,
:root .wp-site-blocks h2,
:root .wp-site-blocks h3,
:root .wp-site-blocks h4,
:root .wp-site-blocks h5,
:root .wp-site-blocks h6,
:root .jf-footer h2,
:root .jf-nav-band h2 {
    font-family: var(--jf-schrift);
    font-weight: 700;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

/* Fuer Versalien-Auszeichnungen in der Markenschrift */
.jf-marke-schrift {
    font-family: var(--jf-schrift-marke);
    font-weight: 600;
    letter-spacing: 0.06em;
}