/* ═══════════════════════════════════════════════════════════════════
   HIG-Gruppe — BASE
   Reset, element defaults, focus states, layout shell.
   Loaded after tokens.css, before components.css. Contains no
   component styling and no raw values — tokens only.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--f);font-size:var(--t-base);line-height:1.65;color:var(--c-ink);
  background:var(--c-white);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none;padding:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
strong{font-weight:var(--fw-strong)}

/* [hidden] muss gewinnen. Die Browser-Grundregel dafür ist NICHT
   !important, deshalb schlägt sie jede eigene display-Deklaration —
   ein Element mit `.sem-grid{display:grid}` bleibt trotz hidden stehen.
   Genau das ist am 17.08. im Seminarkatalog passiert: das Kartenraster
   blieb beim Umschalten sichtbar und die anderen Ansichten wirkten
   angereiht. Einmal hier abgesichert statt in jeder Komponente
   nachgetragen — wir verlassen uns an vielen Stellen auf hidden. */
[hidden]{display:none!important}

/* One icon set (lucide), always inlined, always stroked — never filled.
   Set once here so no component has to restate it. */
svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}

/* ── Focus — never removed (DESIGN.md §12) ── */
:focus-visible{outline:2px solid var(--c-signal);outline-offset:3px;border-radius:4px}

.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--c-deep);color:#fff;
  padding:var(--s-3) var(--s-5);border-radius:var(--r-pill)}
.skip:focus{left:var(--s-4);top:var(--s-4)}

/* ── Layout shell ── */
.shell{max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}

/* ── Type primitives ── */
/* .h1 is the inner-page title — the hero's counterpart on pages that have
   no hero. Same scale, because it is the same job. */
.h1{font-size:var(--t-3xl);line-height:1.04;letter-spacing:-.03em;font-weight:var(--fw-display)}
.h2{font-size:var(--t-2xl);line-height:1.08;letter-spacing:-.025em;font-weight:var(--fw-display)}

/* Utility: visually hidden but read by assistive tech. */
.vh{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Reduced motion — the component-level overrides live at the end of
   components.css so they win the cascade against the "from" states
   declared there. Only the global kill-switch belongs here. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}