/* ============================================================
   VS Ried — Design-Tokens
   Zusammengeführt aus _ds/tokens/*.css (Claude Design), angepasst
   für den Produktivbetrieb. Drei Unterschiede zum Original:

   1. Schriften selbst gehostet statt @import von Google Fonts.
   2. Eine Datei statt sechs @import-Ketten (die werden nacheinander
      abgearbeitet und verzögern den ersten Seitenaufbau).
   3. Kontraste auf WCAG 2.1 AA gebracht — siehe Abschnitt "Farben".

   Diese Datei ist nicht redaktionell editierbar (Konzept, Abschnitt
   "Nicht editierbar"). Farben stehen der Redaktion nur als
   Auswahlliste zur Verfügung.
   ============================================================ */


/* ============================================================
   1. SCHRIFTEN — selbst gehostet
   ------------------------------------------------------------
   Baloo 2 (Ek Type) und Nunito (Vernon Adams) stehen unter der
   SIL Open Font License 1.1; die Lizenz liegt als OFL.txt neben
   den Schriftdateien, wie von der OFL gefordert.

   Beides sind Variable Fonts: eine Datei deckt den gesamten
   Gewichtsbereich 400–800 ab. Zwei Dateien statt vier, und jedes
   Zwischengewicht ist ohne Nachladen verfügbar.

   Nur Subset "latin" — enthält Umlaute und ß. Baloo 2 bringt auch
   Devanagari mit; das wäre ein Vielfaches an Bytes ohne Nutzen.

   Kein Google, kein CDN, keine externe Verbindung → kein
   Drittland-Transfer, kein Cookie-Banner.
   ============================================================ */

@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 400 800;          /* variabel */
  font-display: swap;            /* Text sofort sichtbar */
  src: url('/assets/fonts/baloo-2-var.woff2') format('woff2-variations');
  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: 'Nunito';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/nunito-var.woff2') format('woff2-variations');
  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;
}


/* ============================================================
   2. FARBEN
   ------------------------------------------------------------
   Die Markenfarben stammen pixelgenau aus dem Logo und bleiben
   unverändert — als FLÄCHEN. Als Textfarbe sind sie größtenteils
   unbrauchbar: gemessen gegen den Seitenhintergrund #FAF9F7
   erreicht keine einzige die 4.5:1, die WCAG AA für Fließtext
   verlangt. Gelb kommt auf 1.30:1, Orange auf 2.16:1.

   Auch die vorhandenen -700-Varianten reichen nicht durchgehend:
   blue-700 = 4.01, pink-700 = 3.88, orange-700 = 3.21,
   yellow-700 = 2.20. Das betraf unter anderem die Linkfarbe der
   gesamten Website.

   Deshalb drei getrennte Ebenen, die nicht vermischt werden:

     --c-<farbe>        Fläche. Dunkler Text (--c-ink) darauf.
     --c-<farbe>-800    Textfarbe auf hellem Grund. ≥ 4.5:1.
     --fill-<farbe>     Fläche für WEISSEN Text. ≥ 4.5:1.

   Zwei Ausnahmen bei den Flächen: Auf Rot und Violett erreicht
   dunkler Text nur 3.49:1 bzw. 3.06:1 — dort weißen Text auf
   --fill-red / --fill-purple verwenden.
   ============================================================ */

:root {
  /* --- Markenpalette, aus dem Logo gesampelt (Flächen) --- */
  --c-teal:   #1FA395; /* "V" */
  --c-lilac:  #CF95C2; /* "S" */
  --c-blue:   #2EA6E5; /* "R" */
  --c-orange: #F1981D; /* "I" */
  --c-red:    #E0322F; /* "E" */
  --c-pink:   #EC73A7; /* "D" */
  --c-yellow: #FBDB3C; /* Funkeln */
  --c-purple: #6D65AA; /* Punkt */

  /* --- Helle Tönungen für Karten und Hintergründe --- */
  --c-teal-100:   #DCF0ED;
  --c-blue-100:   #DBEFFB;
  --c-pink-100:   #FBE2EE;
  --c-orange-100: #FCEBD2;
  --c-red-100:    #FBE0DF;
  --c-purple-100: #E6E4F1;
  --c-yellow-100: #FEF6D2;
  --c-lilac-100:  #F4E9F1;

  /* --- Mitteltöne: NUR für Ränder und Hover, nicht für Text --- */
  --c-teal-700:   #167F74;
  --c-blue-700:   #1B82BD;
  --c-pink-700:   #C9558A;
  --c-orange-700: #C9790E;
  --c-red-700:    #B9241F;
  --c-purple-700: #534C84;
  --c-yellow-700: #C9A800;

  /* --- Textfarben: geprüft ≥ 4.5:1 gegen --surface-page --- */
  --c-teal-800:   #187F74;  /* 4.61:1 */
  --c-lilac-800:  #AF4F99;  /* 4.53:1 */
  --c-blue-800:   #167AAE;  /* 4.51:1 */
  --c-orange-800: #A5640A;  /* 4.51:1 */
  --c-red-800:    #C9231F;  /* 5.44:1 */
  --c-pink-800:   #DB1E6F;  /* 4.51:1 */
  --c-yellow-800: #877103;  /* 4.54:1 */
  --c-purple-800: #6D65AA;  /* 4.88:1 — Original genügt bereits */

  /* --- Textfarben auf der eigenen -100-Tönung (Badges, Alerts) ---
     Die -800-Werte sind gegen die helle Seitenfläche gemessen. Auf einer
     getönten Fläche wie --c-blue-100 reichen sie nicht mehr, deshalb eine
     zweite, dunklere Stufe. Diese gilt auch auf hellem Grund. */
  --c-teal-900:   #17776D;  /* 4.55:1 auf teal-100   */
  --c-lilac-900:  #A34A8F;  /* 4.52:1 auf lilac-100  */
  --c-blue-900:   #1471A2;  /* 4.54:1 auf blue-100   */
  --c-orange-900: #995D0A;  /* 4.57:1 auf orange-100 */
  --c-red-900:    #C9211E;  /* 4.52:1 auf red-100    */
  --c-pink-900:   #C81B65;  /* 4.53:1 auf pink-100   */
  --c-yellow-900: #846F03;  /* 4.54:1 auf yellow-100 */
  --c-purple-900: #665EA6;  /* 4.50:1 auf purple-100 */

  /* --- Flächen für weißen Text: geprüft ≥ 4.5:1 gegen Weiß --- */
  --fill-teal:   #198378;  /* 4.61:1 */
  --fill-lilac:  #B2549D;  /* 4.52:1 */
  --fill-blue:   #167DB3;  /* 4.55:1 */
  --fill-orange: #AA670B;  /* 4.51:1 */
  --fill-red:    #E0302D;  /* 4.54:1 */
  --fill-pink:   #E12073;  /* 4.51:1 */
  --fill-yellow: #8C7503;  /* 4.51:1 */
  --fill-purple: #6D65AA;  /* 5.13:1 */

  /* --- Neutrale Töne (warmes Anthrazit wie die Wortmarke) --- */
  --c-ink:    #232323;
  --c-slate:  #4A4A4F;
  --c-gray:   #72727A;  /* nachgedunkelt von #74747C: 4.40 → 4.53 */
  --c-mist:   #90909B;  /* nachgedunkelt von #AEAEB6: 2.09 → 3.00 */
  --c-cloud:  #CDCDD6;  /* nachgedunkelt von #DCDCE2 */
  --c-paper:  #F3F1EE;
  --c-snow:   #FAF9F7;
  --c-white:  #FFFFFF;
}


/* ============================================================
   3. SEMANTISCHE ALIASE
   ------------------------------------------------------------
   In Komponenten werden ausschließlich diese Namen verwendet,
   nie die Rohfarben. Ändert sich später eine Markenfarbe, muss
   nur hier eine Zeile angefasst werden.
   ============================================================ */

:root {
  --color-brand:        var(--c-blue);
  --color-brand-hover:  var(--c-blue-700);
  --color-brand-soft:   var(--c-blue-100);
  --color-brand-fill:   var(--fill-blue);   /* Flächen mit weißem Text */
  --color-accent:       var(--c-pink);
  --color-accent-soft:  var(--c-pink-100);

  --text-strong:   var(--c-ink);
  --text-body:     var(--c-slate);
  --text-muted:    var(--c-gray);
  --text-on-brand: var(--c-white);
  --text-on-fill:  var(--c-white);
  --text-link:     var(--c-blue-800);   /* vorher blue-700 = 4.01, zu wenig */
  --text-link-hover: var(--c-purple-800);

  --surface-page:   var(--c-snow);
  --surface-card:   var(--c-white);
  --surface-sunken: var(--c-paper);
  --surface-soft:   var(--c-blue-100);

  --border-soft:   var(--c-cloud);
  --border-strong: var(--c-mist);        /* 3:1 — gilt für Formularfelder */

  --color-success:      var(--c-teal);
  --color-success-text: var(--c-teal-800);
  --color-success-soft: var(--c-teal-100);
  --color-warning:      var(--c-orange);
  --color-warning-text: var(--c-orange-800);
  --color-warning-soft: var(--c-orange-100);
  --color-danger:       var(--c-red);
  --color-danger-text:  var(--c-red-800);
  --color-danger-soft:  var(--c-red-100);
  --color-info:         var(--c-blue);
  --color-info-text:    var(--c-blue-800);
  --color-info-soft:    var(--c-blue-100);

  /* Fokusring: WCAG 2.1 SC 1.4.11 verlangt 3:1 gegen die Umgebung.
     --c-blue erreicht nur 2.59 gegen die Seitenfläche. */
  --focus-ring: var(--c-blue-800);
}


/* ============================================================
   4. TYPOGRAFIE
   ============================================================ */

:root {
  --font-display: 'Baloo 2', 'Trebuchet MS', system-ui, sans-serif;
  --font-text:    'Nunito', 'Segoe UI', system-ui, sans-serif;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extra:    800;

  /* Skala 1.250 (große Terz), rem-basiert */
  --fs-display:  clamp(2.75rem, 1.6rem + 4.6vw, 4.5rem);
  /* h1 und h2 skalieren mit der Fensterbreite. Vorher waren sie fest:
     Auf 320 px stand "Sozialwirksame Schule" in 44 px und brauchte zwei
     Zeilen à 46 px, während --fs-display als einzige Größe schon skalierte.
     Untere Grenze 32 bzw. 26 px, obere die bisherigen Werte — auf breiten
     Bildschirmen ändert sich also nichts. */
  --fs-h1:       clamp(2rem, 1.4rem + 2.6vw, 2.75rem);      /* 32 → 44 */
  --fs-h2:       clamp(1.625rem, 1.3rem + 1.4vw, 2.125rem); /* 26 → 34 */
  --fs-h3:       1.625rem; /* 26 */
  --fs-h4:       1.25rem;  /* 20 */
  --fs-lead:     1.25rem;  /* 20 — Einleitungsabsatz */
  --fs-body:     1rem;     /* 16 */
  --fs-sm:       0.875rem; /* 14 */
  --fs-xs:       0.75rem;  /* 12 — Labels */

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.55;
  --lh-relaxed: 1.7;

  --ls-tight:   -0.01em;
  --ls-normal:  0;
  --ls-wide:    0.04em;
  --ls-eyebrow: 0.12em;
}


/* ============================================================
   5. ABSTÄNDE (8px-Raster)
   ============================================================ */

:root {
  --space-0:  0;
  --space-1:  0.25rem; /* 4  */
  --space-2:  0.5rem;  /* 8  */
  --space-3:  0.75rem; /* 12 */
  --space-4:  1rem;    /* 16 */
  --space-5:  1.5rem;  /* 24 */
  --space-6:  2rem;    /* 32 */
  --space-7:  3rem;    /* 48 */
  --space-8:  4rem;    /* 64 */
  --space-9:  6rem;    /* 96 */

  --container:    1200px;
  --container-sm: 720px;

  --hit: 48px;   /* Mindestgröße für Klickziele */
}


/* ============================================================
   6. RADIEN, SCHATTEN, BEWEGUNG
   ============================================================ */

:root {
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   16px;
  --radius-lg:   22px;
  --radius-xl:   30px;
  --radius-pill: 999px;

  --border-width: 2px;

  --shadow-xs: 0 1px 2px rgba(35,35,35,0.06);
  --shadow-sm: 0 2px 6px rgba(35,35,35,0.08);
  --shadow-md: 0 6px 18px rgba(35,35,35,0.10);
  --shadow-lg: 0 16px 40px rgba(35,35,35,0.14);
  --shadow-pop: 0 4px 0 rgba(35,35,35,0.12);   /* "Sticker"-Effekt */

  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 120ms;
  --dur-mid:  220ms;
  --dur-slow: 380ms;
}


/* ============================================================
   7. GRUNDSTILE
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;

  /* Der Kopfbereich klebt oben. Ohne diesen Wert landet das Sprungziel
     eines Ankers dahinter — betroffen wären "Zum Inhalt springen" und
     jeder Link auf eine Stelle derselben Seite.
     Bemessen am hohen Ruhezustand des Kopfes (119 px), nicht am flachen:
     Beim Sprung von ganz oben ist der Kopf noch hoch, und der Umschalter
     greift erst danach. Etwas Luft zu viel ist ein Schönheitsfehler,
     verdeckter Text ein Funktionsfehler. */
  scroll-padding-top: 7.5rem;
}

body {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-strong);
  line-height: var(--lh-snug);
  font-weight: var(--fw-bold);
  margin: 0 0 0.4em;
  text-wrap: balance;

  /* Die Schule hat lange Zusammensetzungen: "Abschlusswortgottesdienst",
     "Klimaackerworkshop", "Schulbedarfslisten". In einer 380 px breiten
     Karte ist so ein Wort breiter als die Spalte, ragt hinaus und wird von
     overflow:hidden abgeschnitten — das Wort ist dann nicht zu Ende lesbar.
     hyphens:auto trennt nach deutschen Regeln (am <html> steht lang="de-AT"),
     overflow-wrap greift, wenn selbst das nicht reicht. In breiten Spalten
     passiert dadurch nichts: Getrennt wird nur, was sonst nicht passt. */
  overflow-wrap: break-word;
  hyphens: auto;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { margin: 0 0 1em; text-wrap: pretty; }

a {
  color: var(--text-link);
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}
/* Nur Links ohne eigene Klasse — also die im Fließtext.
 *
 * Vorher galt das für jeden Link. Bei Links auf gefüllter Fläche
 * (--fill-*, weiße Schrift) hat es die weiße Schrift durch Violett ersetzt:
 * rund 1.5:1, praktisch unlesbar. Betroffen waren .vs-bewerbung__link sowie
 * .vsbtn--primary und .vsbtn--accent, sobald der Button ein <a> ist.
 *
 * Der Grund war Spezifität: a:hover (0,1,1) schlägt .vsbtn--primary (0,1,0),
 * und die zugehörige :hover-Regel setzte nur den Hintergrund, nicht die
 * Schriftfarbe. Statt in jeder Komponente color zu wiederholen, gilt die
 * Regel jetzt nur dort, wo sie gemeint war. Alle Links mit Klasse zeigen
 * ihren Hover ohnehin über Fläche, Rahmen oder Umriss. */
a:not([class]):hover { color: var(--text-link-hover); }

strong { font-weight: var(--fw-bold); color: var(--text-strong); }

img { max-width: 100%; height: auto; }

/* Kicker / Dachzeile */
.vs-eyebrow {
  font-family: var(--font-text);
  font-weight: var(--fw-extra);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-info-text);   /* vorher --c-blue: 2.59:1 */
}
/* Steht in der Dachzeile ein Link — auf /aktuelles/<jahr> führt er zurück
   zur Übersicht —, war er bei 12 px Schrift nur 16 px hoch. Das ist das
   kleinste Klickziel der ganzen Website gewesen. */
.vs-eyebrow a {
  display: inline-block;
  padding-block: var(--space-2);
}

/* Bunte Wortmarke wie im Logo.
   Nur dekorativ und nur bei großem Text verwenden — die reinen
   Markenfarben erreichen als Text keine 4.5:1. */
.vs-rainbow > :nth-child(7n+1) { color: var(--c-teal-800); }
.vs-rainbow > :nth-child(7n+2) { color: var(--c-lilac-800); }
.vs-rainbow > :nth-child(7n+3) { color: var(--c-blue-800); }
.vs-rainbow > :nth-child(7n+4) { color: var(--c-orange-800); }
.vs-rainbow > :nth-child(7n+5) { color: var(--c-red-800); }
.vs-rainbow > :nth-child(7n+6) { color: var(--c-pink-800); }
.vs-rainbow > :nth-child(7n+7) { color: var(--c-purple-800); }

/* Sichtbarer Fokus — Tastaturbedienung */
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Sprunglink zum Inhalt, für Screenreader und Tastatur */
.vs-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-card);
  color: var(--text-link);
  border-radius: 0 0 var(--radius-sm) 0;
}
.vs-skip:focus { left: 0; }

/* Nutzerwunsch "weniger Bewegung" respektieren */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}