@charset "UTF-8";

/* =====================================================================
   SCHRIFTSATZ – youngstudy
   =====================================================================

   Hier änderst du alle Schriften der Seite.

   Diese Datei ist die EINZIGE Stelle, an der Schriften festgelegt
   werden. Alle anderen Dateien (style.css usw.) benutzen nur die
   Variablen von hier – zum Beispiel var(--schrift-titel).
   Wenn du hier etwas änderst, ändert es sich überall auf der Seite.

   Die Seite hat fünf «Schriftrollen»:

     --schrift-titel     grosse, schmale, fette Titel in Versalien
                         (wie die Buchrücken auf dem Sticker)
     --schrift-text      normaler Lesetext, Knöpfe, Menü
     --schrift-marker    dicker Filzstift wie «DANN SCAN DAS!» –
                         nur für wenige Akzente
     --schrift-notiz     Kugelschreiber-Handschrift für die roten
                         Korrektur-Notizen
     --schrift-dokument  Serifenschrift in den Dokument-Vorschauen
                         (die Seiten, die wie eine Arbeit aussehen)

   ---------------------------------------------------------------------
   (a) EINE ANDERE, SCHON VORHANDENE SCHRIFT VERWENDEN
   ---------------------------------------------------------------------
   Beispiel: Die Notizen sollen im Filzstift statt im Kugelschreiber
   erscheinen.

     1. Scrolle weiter unten zum Abschnitt «2. SCHRIFTROLLEN».
     2. Suche die Zeile  --schrift-notiz: "Caveat", …
     3. Ersetze "Caveat" durch "Permanent Marker".
     4. Speichern, Seite im Browser neu laden (Strg+F5 bzw. Cmd+Shift+R).

   Wichtig: Der Name muss genau so geschrieben sein wie bei
   font-family im passenden @font-face-Block (Abschnitt 1),
   inklusive Gross-/Kleinschreibung und Anführungszeichen.

   ---------------------------------------------------------------------
   (b) EINE NEUE SCHRIFT HINZUFÜGEN
   ---------------------------------------------------------------------
     1. Schrift holen: z. B. auf https://gwfh.mranftl.com/fonts
        die Schrift suchen, bei «charsets» nur «latin» wählen,
        die gewünschten Schnitte anhaken (z. B. regular und 700)
        und bei «Modern Browsers» die Dateien herunterladen.
        Nimm nur Schriften mit freier Lizenz (z. B. SIL Open Font
        License) und trag sie in website/fonts/LIZENZEN.md ein.

     2. Die .woff2-Datei(en) in den Ordner  website/fonts  legen.
        Dateinamen am besten klein, ohne Leerzeichen und ohne
        Umlaute, z. B.  meine-schrift-700.woff2

     3. In Abschnitt 1 einen @font-face-Block kopieren (alles von
        «@font-face {» bis und mit der schliessenden «}») und
        darunter einfügen.

     4. Im kopierten Block anpassen:
          font-family  → der neue Name, z. B. "Meine Schrift"
          src: url(…)  → der neue Dateiname, z. B.
                         url("fonts/meine-schrift-700.woff2")
          font-weight  → die Stärke der Datei, z. B. 700
                         (bei einer variablen Schrift ein Bereich,
                         z. B. 100 900)
          font-style   → normal oder italic (kursiv)
          font-stretch → Zeile löschen, wenn die Schrift keine
                         verschiedenen Breiten hat
        Hast du mehrere Dateien (z. B. 400 und 700), brauchst du pro
        Datei einen eigenen Block – mit gleichem font-family-Namen,
        aber passender font-weight.

     5. In Abschnitt 2 die Variable ändern, z. B.
          --schrift-titel: "Meine Schrift", "Arial Narrow", … ;

     6. Speichern, neu laden. Sieht die Schrift gleich aus wie
        vorher, stimmt meist der Name oder der Dateipfad nicht.

   ---------------------------------------------------------------------
   (c) FALLBACK-SCHRIFTEN
   ---------------------------------------------------------------------
   Hinter jeder Schrift steht eine Ersatzliste, z. B.
        "Archivo", "Arial Narrow", Arial, sans-serif
   Der Browser nimmt die erste Schrift, die er hat (sichtbar nur beim
   Laden oder wenn eine Datei fehlt). Gewünschte Schrift zuerst, Namen
   mit Leerzeichen in Anführungszeichen, das letzte Wort ohne.

   ---------------------------------------------------------------------
   Aufbau dieser Datei
     1. Schriftdateien    (@font-face – welche Datei zu welchem Namen)
     2. Schriftrollen     (welche Schrift wofür)
     3. Schriftschnitte   (Stärke, Breite, Laufweite, Zeilenhöhe)
     4. Schriftgrössen    (wie gross was ist – Handy zuerst)
     5. Rollen zuweisen   (die einzige font-family – nicht ändern)

   In dieser Datei stehen nur Schriften – keine Farben, Abstände
   oder anderen Gestaltungsregeln.
   ===================================================================== */


/* =====================================================================
   1. SCHRIFTDATEIEN
   ---------------------------------------------------------------------
   Alle Dateien liegen lokal in website/fonts – es wird nichts von
   Google oder anderen fremden Servern geladen (Datenschutz).
   font-display: swap  → der Text ist sofort lesbar (in der Ersatz-
   schrift) und wechselt zur richtigen Schrift, sobald sie geladen ist.
   unicode-range       → Zeichenumfang «latin»: deckt Deutsch,
   Französisch und Italienisch ab (ä ö ü é è à ç « » – usw.).
   Du musst diese Zeile nicht ändern.
   ===================================================================== */

/* Archivo – Titel. Variable Schrift: Stärke 100–900, Breite 62–125 % */
@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-variabel.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  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;
}

/* Archivo Ersatz – keine Datei: Arial fett, auf 76 % verkleinert (so
   breit wie Archivo 68 %). Nur sichtbar, solange Archivo lädt; ohne
   sie wäre die Headline am Handy kurz zu breit. Nicht ändern. */
@font-face {
  font-family: "Archivo Ersatz";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Roboto Bold"), local("Roboto-Bold"), local("Arial");
  font-weight: 100 900;
  size-adjust: 76%;
  ascent-override: 92%;
  descent-override: 22%;
}

/* Hanken Grotesk – Lesetext. Variable Schrift: Stärke 100–900 */
@font-face {
  font-family: "Hanken Grotesk";
  src: url("fonts/hanken-grotesk-variabel.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  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;
}

/* Hanken Grotesk kursiv – Lesetext, schräg. Stärke 100–900 */
@font-face {
  font-family: "Hanken Grotesk";
  src: url("fonts/hanken-grotesk-variabel-kursiv.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
  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;
}

/* Permanent Marker – Filzstift-Akzente. Hat nur EINE Stärke.
   Der Bereich 100 900 ist Absicht: So rechnet der Browser die Schrift
   nie künstlich fett (das sähe verschmiert aus), auch wenn sie in
   einem fetten Titel steht. */
@font-face {
  font-family: "Permanent Marker";
  src: url("fonts/permanent-marker.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  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;
}

/* Caveat – Korrektur-Notizen. Variable Schrift: Stärke 400–700 */
@font-face {
  font-family: "Caveat";
  src: url("fonts/caveat-variabel.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  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;
}

/* Source Serif 4 – Dokument-Vorschauen. Variable Schrift: Stärke
   200–900; passt die Buchstabenform automatisch an die Grösse an */
@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/source-serif-4-variabel.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
  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;
}

/* Source Serif 4 kursiv – Dokument-Vorschauen, schräg. Stärke 200–900 */
@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/source-serif-4-variabel-kursiv.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
  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;
}


:root {

  /* ===================================================================
     2. SCHRIFTROLLEN
     -------------------------------------------------------------------
     Welche Schrift wofür verwendet wird. Zuerst die gewünschte
     Schrift, danach die Ersatzliste (siehe (c) oben).
     =================================================================== */

  /* Titel: Headline, Abschnittstitel, Buchrücken, Etiketten, Zähler */
  --schrift-titel: "Archivo", "Archivo Ersatz", "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;

  /* Lesetext: Absätze, Listen, Knöpfe, Fusszeile */
  --schrift-text: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Filzstift: wenige Akzente wie «Für Studierende in der Schweiz» */
  --schrift-marker: "Permanent Marker", "Marker Felt", "Segoe Print", "Comic Sans MS", cursive;

  /* Kugelschreiber: rote Korrektur-Notizen («2,5 cm. Nicht 2,4.») */
  --schrift-notiz: "Caveat", "Bradley Hand", "Segoe Print", "Comic Sans MS", cursive;

  /* Serifenschrift: Text in den Dokument-Vorschauen (Belege) */
  --schrift-dokument: "Source Serif 4", "Source Serif Pro", Georgia, Cambria, "Times New Roman", serif;


  /* ===================================================================
     3. SCHRIFTSCHNITTE
     -------------------------------------------------------------------
     Stärke (100 = hauchdünn, 400 = normal, 700 = fett, 900 = extrafett),
     Breite, Buchstabenabstand und Zeilenhöhe.
     =================================================================== */

  /* Stärke der Titel (Hero-Headline, Abschnittstitel). 100–900 möglich */
  --titel-gewicht: 850;

  /* Breite der Titel. 100% = normal, kleiner = schmaler.
     Archivo kann 62% bis 125%. 68% wirkt wie die Buchrücken
     (die Headline ist darauf ausgemessen) */
  --titel-breite: 68%;

  /* Buchstabenabstand der Titel. 0 = normal, minus = enger, plus = weiter */
  --titel-laufweite: -0.005em;

  /* Zeilenhöhe der Titel (Abstand zwischen zwei Titelzeilen).
     1 = so hoch wie die Schrift; kleiner = Zeilen rücken zusammen */
  --titel-zeilenhoehe: 0.9;

  /* Wortmarke «youngstudy»: schmaler, fetter */
  --titel-breite-wortmarke: 62%;
  --wortmarke-gewicht: 900;

  /* Kleine Titel in Versalien (Leistungen, Ablauf, Checkliste) */
  --titel-breite-h3: 88%;
  --h3-gewicht: 750;

  /* Etiketten in Versalien («LEISTUNGEN», «A4 · APA 7»); Laufweite = Luft */
  --titel-breite-label: 75%;
  --label-gewicht: 700;
  --label-laufweite: 0.08em;

  /* Ziffern: Zähler wie «2 / 9», Seitenzahlen */
  --ziffern-breite: 100%;
  --ziffern-gewicht: 600;

  /* Dokument-Vorschauen (Source Serif) */
  --dokument-gewicht: 400;
  --dokument-zeilenhoehe: 1.45;

  /* Stärke des normalen Lesetexts (Absätze, Listen) */
  --text-gewicht: 400;

  /* Stärke von fettem Text: Hervorhebungen, Knöpfe, Menü, kleine Überschriften */
  --text-gewicht-fett: 650;

  /* Zeilenhöhe des Lesetexts. 1.5–1.65 liest sich am Handy gut */
  --text-zeilenhoehe: 1.55;

  /* Zeilenhöhe der Filzstift-Akzente */
  --marker-zeilenhoehe: 1.1;

  /* Stärke der Korrektur-Notizen. Caveat kann 400–700 */
  --notiz-gewicht: 600;


  /* ===================================================================
     4. SCHRIFTGRÖSSEN
     ===================================================================
     Handy zuerst: Die Seite wird meistens nach dem Scannen des
     Stickers auf dem Handy geöffnet (ca. 390 px breit).

     So liest du eine Grösse:
        clamp( KLEINSTE ,  MITWACHSEN ,  GRÖSSTE )
     - KLEINSTE  = Grösse auf dem Handy (390 px breit)
     - GRÖSSTE   = Grösse auf einem breiten Bildschirm (1440 px)
     - dazwischen wächst die Schrift mit der Fensterbreite mit.
     1rem = 16 px.  Beispiel: 3.5rem = 56 px, 10.5rem = 168 px.

     Einfach anpassen: nur die erste und die letzte Zahl ändern
     (z. B. 3.5rem → 3.25rem). Die mittlere Angabe darf bleiben;
     der Browser hält sich trotzdem an kleinste und grösste Grösse.

     Lesetext nie kleiner als 1rem (16 px) machen – sonst ist er
     auf dem Handy schlecht lesbar.
     =================================================================== */

  /* Hero-Headline ganz oben.
     Handy 56 px  →  Desktop 168 px */
  --groesse-mega: clamp(3.5rem, 0.9rem + 10.667vw, 10.5rem);

  /* Abschnittstitel (z. B. «Eine Mail reicht.»).
     Handy 40 px  →  Desktop 96 px */
  --groesse-h1: clamp(2.5rem, 1.2rem + 5.333vw, 6rem);

  /* Reserve (zurzeit nicht benutzt).
     Handy 32 px  →  Desktop 64 px */
  --groesse-h2: clamp(2rem, 1.257rem + 3.048vw, 4rem);

  /* Kleine Titel (Leistungen, Ablauf-Schritte, Checkliste).
     Handy 23 px  →  Desktop 34 px */
  --groesse-h3: clamp(1.4375rem, 1.182rem + 1.048vw, 2.125rem);

  /* Einleitungstext unter der Hero-Headline und unter Abschnittstiteln.
     Handy 19 px  →  Desktop 24 px */
  --groesse-gross: clamp(1.1875rem, 1.071rem + 0.476vw, 1.5rem);

  /* Normaler Lesetext: Absätze, Listen, Knöpfe.
     Handy 17 px  →  Desktop 19 px  (nie unter 16 px) */
  --groesse-text: clamp(1.0625rem, 1.016rem + 0.19vw, 1.1875rem);

  /* Kleiner Text: Hinweise unter Knöpfen, Fusszeile, Impressum.
     Handy 15 px  →  Desktop 16 px */
  --groesse-klein: clamp(0.9375rem, 0.914rem + 0.095vw, 1rem);

  /* Winziger Text: Etiketten in Versalien («LEISTUNGEN»).
     Handy 13 px  →  Desktop 14 px */
  --groesse-mini: clamp(0.8125rem, 0.789rem + 0.095vw, 0.875rem);

  /* Filzstift-Akzente wie «DANN SCAN DAS!».
     Handy 24 px  →  Desktop 40 px */
  --groesse-marker: clamp(1.5rem, 1.129rem + 1.524vw, 2.5rem);

  /* Handschriftliche Korrektur-Notizen (Caveat wirkt klein, darum grösser).
     Handy 24 px  →  Desktop 32 px */
  --groesse-notiz: clamp(1.5rem, 1.314rem + 0.762vw, 2rem);

  /* Grosse Mail-Adresse (Abschnitt Mail).  Handy 28 px  →  Desktop 56 px */
  --groesse-adresse: clamp(1.75rem, 1.2rem + 2.3vw, 3.5rem);

  /* Dokument-Vorschauen (Belege).  Handy 15 px  →  Desktop 17 px */
  --groesse-dokument: clamp(0.9375rem, 0.88rem + 0.24vw, 1.0625rem);
}


/* =====================================================================
   5. ROLLEN ZUWEISEN (nicht ändern)
   ---------------------------------------------------------------------
   Nur hier steht font-family. Andere Dateien wählen pro Element eine
   Rolle, z. B.  --schriftrolle: var(--schrift-titel);  (Standard: Text)
   ===================================================================== */
:root { --schriftrolle: var(--schrift-text); }
*, ::before, ::after { font-family: var(--schriftrolle); }