/* SEA-Gestaltung für percursus.de – Farben, Schrift, Radien.
 *
 * Herkunft: design-tokens.json v0.5.0 aus dem SEA Design System.
 * Übertragen am 01.08.2026. Ändert sich das Design-System, gehört diese Datei
 * nachgezogen – die Namen der Tokens stehen jeweils als Kommentar dabei.
 *
 * Warum eine gemeinsame Datei und keine Kopie je Seite: Sechs Seiten mit
 * demselben Satz Farben wären sechs Stellen, die auseinanderlaufen können.
 * Der seitenspezifische Rest bleibt weiterhin in der jeweiligen Seite.
 *
 * Kontraste gemessen (WCAG AA verlangt 4.5:1 für Fließtext). Alles erfüllt es –
 * mit zwei Ausnahmen, die deshalb NICHT für Text auf dem Grund taugen:
 *   --leise auf --grund   4.2:1  → nur ab 18px oder fett
 *   --aktion auf --grund  3.2:1  → nur als Fläche mit hellem Text, nie als Schrift
 *
 * SCHRIFT WIRD SELBST AUSGELIEFERT, NICHT VON GOOGLE GEHOLT (seit 09.08.2026).
 * Das Design-System lädt Libre Franklin per @import von fonts.googleapis.com –
 * so ginge die IP-Adresse jedes Azubis an Google, und die Datenschutzerklärung
 * sagt ausdrücklich, dass keine externen Dienste eingebunden sind. Die Dateien
 * liegen deshalb unter /schrift/ im Repo; der Browser holt sie von percursus.de.
 * Kein Dritter erfährt etwas.
 *
 * Vorher stand hier nur ein Schriftstapel: Franklin Gothic auf Windows,
 * Helvetica Neue auf iPhones, Roboto auf Android. Drei Geräte, drei Schriften –
 * und Abstände, die nur für eine davon stimmen konnten.
 *
 * Die vier Franklin-Gothic-TTFs im Design-System kommen dafür NICHT in Frage.
 * Ihre Copyright-Felder weisen Microsoft (die Windows-Systemschrift),
 * Digital Typeface Corp. 1991 und Adobe 1989 aus – kommerzielle Schriften ohne
 * Web-Lizenz. Sie auf einer Website auszuliefern ist eine eigene Nutzungsart,
 * die eine Windows-Installation nicht abdeckt. Libre Franklin dagegen steht
 * unter der SIL Open Font License 1.1 (Beleg: /schrift/OFL.txt) und ist im
 * Design-System ohnehin die primäre Web-Schrift – Franklin Gothic ist dort nur
 * als „Office-Pendant" für Windows geführt.
 */

/* Variable Schrift: eine Datei deckt alle Gewichte von 400 bis 700 ab.
 * Zwei Subsets – latin trägt Umlaute, ß und die deutschen Anführungszeichen,
 * latin-ext fängt Namen und Fachbegriffe mit osteuropäischer Diakritik ab. */
@font-face {
  font-family: "Libre Franklin";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/schrift/libre-franklin-latin.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: "Libre Franklin";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/schrift/libre-franklin-latin-ext.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;
}

:root {
  --grund: #f4f1eb;        /* color.background.default – Knochen */
  --flaeche: #ffffff;      /* color.background.surface */
  --kasten: #ede9df;       /* color.background.surface_2 */
  --text: #1a1a1a;         /* color.ink.primary */
  --gedaempft: #4a4845;    /* color.ink.secondary */
  --leise: #737373;        /* color.ink.tertiary */
  --linie: #ddd8cb;        /* color.border.default */
  --linie-stark: #c5bfb0;  /* color.border.strong */
  --akzent: #104e64;       /* color.accent.primary – Navy */
  --akzent-dunkel: #0a3848;/* color.accent.primary_700 */
  --akzent-tint: #d9e5ea;  /* color.accent.primary_100 */
  --aktion: #f05100;       /* color.accent.action – Burnt Orange */
  --gold: #fcbd20;         /* color.accent.gold – SEA Gold */
  --gruen: #3e6b47;        /* color.semantic.success – Mid Forest */

  /* type.font_family.body bzw. .head – eine variable Schrift für beides.
   * Der Unterschied zwischen Fließtext und Überschrift entsteht über das
   * Gewicht, nicht über eine zweite Familie. Franklin Gothic bleibt als
   * Rückfallebene, falls die WOFF2 einmal nicht ankommt. */
  --schrift: "Libre Franklin", "Franklin Gothic Book", "Helvetica Neue", Arial, sans-serif;
  --schrift-kopf: var(--schrift);

  --radius-mini: 3px;      /* radius.sm */
  --radius-klein: 6px;     /* radius.md */
  --radius: 10px;          /* radius.lg */
  --radius-gross: 14px;    /* radius.xl */
  --radius-pille: 999px;   /* radius.pill */

  /* shadow.low/mid/high. Drei Stufen, und sie kodieren Ebene, nicht Wichtigkeit:
   * low = liegt auf der Seite, mid = klappt auf und bleibt verankert,
   * high = löst sich von der Seite. Ein wichtiger Knopf bekommt keinen
   * größeren Schatten. */
  --schatten: 0 1px 2px rgba(26, 26, 26, 0.04), 0 1px 3px rgba(26, 26, 26, 0.06);
  --schatten-mittel: 0 4px 6px rgba(26, 26, 26, 0.04), 0 10px 15px rgba(26, 26, 26, 0.08);
  --schatten-hoch: 0 10px 20px rgba(26, 26, 26, 0.08), 0 20px 40px rgba(26, 26, 26, 0.12);

  /* spacing.s1–s6 – das 8px-Raster. Abstände kommen ab jetzt hierher und
   * werden nicht mehr je Seite geschätzt (1.1rem, 0.85rem, 1.15rem lagen
   * alle daneben). */
  --abstand-1: 0.25rem;    /* 4px  */
  --abstand-2: 0.5rem;     /* 8px  */
  --abstand-3: 1rem;       /* 16px */
  --abstand-4: 1.5rem;     /* 24px */
  --abstand-5: 2rem;       /* 32px */
  --abstand-6: 3rem;       /* 48px */

  /* type.line_height */
  --zeile-eng: 1.15;
  --zeile-knapp: 1.35;
  --zeile-normal: 1.55;
  --zeile-weit: 1.7;

  /* motion.duration.fast, motion.ease_out */
  --dauer: 150ms;
  --kurve: cubic-bezier(0.16, 1, 0.3, 1);

  /* 44px – Apples Mindestmaß für Berührungsflächen. Nicht aus dem
   * Design-System, sondern aus der Nutzung: Der Lernbereich wird auf dem
   * Handy bedient. WCAG 2.2 verlangt nur 24px, das ist hier zu wenig. */
  --hoehe-bedienelement: 2.75rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund: #14130f;        /* color.dark_mode.background */
    --flaeche: #262318;      /* color.dark_mode.surface */
    --kasten: #2e2b1f;       /* color.dark_mode.surface_2 */
    --text: #f2efe9;         /* color.dark_mode.ink */
    --gedaempft: #b5b1a7;    /* color.dark_mode.ink_2 */
    --leise: #b5b1a7;
    --linie: #3d3a30;        /* color.dark_mode.border */
    --linie-stark: #524d40;  /* color.dark_mode.border_strong */
    --akzent: #5ba8c2;       /* color.dark_mode.accent_primary */
    --akzent-dunkel: #5ba8c2;
    --akzent-tint: #2e3a3f;
    --aktion: #ff7530;       /* color.dark_mode.accent_action */
    --gruen: #6f9c78;
    /* Auf dunklem Grund trägt ein Schatten kaum – dort trennt die Linie,
     * nicht der Schatten. Deshalb bleiben die Stufen hier flacher.
     * Abgeleitet, nicht aus dem Design-System: dort gibt es keine
     * Dunkelvarianten für mid und high. */
    --schatten: 0 1px 3px rgba(0, 0, 0, 0.4);
    --schatten-mittel: 0 4px 12px rgba(0, 0, 0, 0.5);
    --schatten-hoch: 0 12px 32px rgba(0, 0, 0, 0.6);
  }
}

/* --- Tastaturfokus, einmal für die ganze Website ---------------------------
 *
 * Bisher war er nur am Suchfeld des Lernbereichs gesetzt. Wer mit der
 * Tastatur durch die Karten geht, sah überall sonst nur den Browserstandard –
 * auf jedem Gerät ein anderer.
 *
 * outline statt border: Ein Rahmen läge im Kastenmodell und verschöbe beim
 * Erscheinen das Layout. Der Ring liegt außerhalb und bewegt nichts.
 * Der Abstand (outline-offset) ist kein Zierrat: Karten und Eingabefelder
 * haben selbst schon einen Rahmen – die Lücke in Grundfarbe trennt den Ring
 * davon ab, sodass er auch dort erkennbar bleibt.
 *
 * :focus-visible statt :focus – sonst erscheint der Ring auch beim Mausklick.
 * :where() hält die Spezifität bei null, damit ein Einzelfall die Regel ohne
 * !important überschreiben kann. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 2px;
  border-radius: inherit;
}

/* Wer im Betriebssystem „Bewegung reduzieren" gesetzt hat, bekommt keine.
 * Betrifft hier vor allem den pulsierenden Ladeplatzhalter. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}