/* =========================================================================
   Stundenplan HFU – Grundlagen: Schrift, Design-Tokens, Reset
   Werte 1:1 aus Figma (Seite 03 „V7.2“, Seite 04 „Web“, Seite 05 „Einrichten“)
   ========================================================================= */

@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/Inter-Regular.woff") format("woff"); }
@font-face { font-family: "Inter"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/Inter-Medium.woff") format("woff"); }
@font-face { font-family: "Inter"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/Inter-SemiBold.woff") format("woff"); }
@font-face { font-family: "Inter"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/Inter-Bold.woff") format("woff"); }

:root {
  /* Farben */
  --ink: #0F1A17;            /* Haupttext */
  --mut: #4A5A55;            /* Nebentext (dunkel genug für gute Lesbarkeit) */
  --mut-hell: #8A9A95;       /* Pfeile, Register */
  --gruen: #2F4B44;          /* aktive Elemente, Hauptknopf */
  --salbei-1: #6A9087;
  --salbei-2: #A7C1B9;
  --salbei-3: #E9F0ED;
  --grund: #F6F8F7;
  --salbei-ton: rgba(106, 144, 135, 0.14);   /* Plaketten, Symbol-Kästen, Auswahl */
  --linie: rgba(15, 26, 23, 0.07);
  --gestrichelt: #8FA59E;

  /* Glas */
  --glas-blur: 30px;
  --glas-kante: linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.4) 100%);
  --schatten-glas: 0 8px 30px rgba(26, 38, 38, 0.06);
  --schatten-leiste: 0 8px 30px rgba(26, 38, 38, 0.14);
  --schatten-karte: 0 4px 14px rgba(13, 38, 38, 0.05);
  --schatten-liste: 0 6px 20px rgba(26, 38, 38, 0.06);
  --schatten-knopf: 0 8px 20px rgba(26, 51, 46, 0.25);

  /* Bewegung */
  --weich: cubic-bezier(.22, .8, .24, 1);
  --dauer: 320ms;

  --schrift: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--schrift);
  color: var(--ink);
  background: var(--grund);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "tnum" 1, "cv11" 1;   /* gleich breite Ziffern für Uhrzeiten */
  overflow-x: hidden;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
svg { display: block; flex-shrink: 0; }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--gruen); outline-offset: 2px; border-radius: 10px; }
.auf-farbe :focus-visible { outline-color: #fff; }

.nur-vorleser {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; margin: -1px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}