@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap');

/* ══════════════════════════════════════════════════════════════════
   Skischule Arosa – Embed-Korrekturen für Fremdsysteme
   ══════════════════════════════════════════════════════════════════

   ZWECK
   Diese Datei wird NUR von externen Systemen geladen, die unseren
   Header und/oder Footer einbinden (z. B. shop.skischule-arosa.ch).
   Auf skischule-arosa.ch wird sie NICHT eingebunden.

   HINTERGRUND
   Unser style.css bemisst alle Schriftgrössen und Abstände in `rem`.
   1 rem entspricht der Schriftgrösse des <html>-Elements, im Normalfall
   16 px. Der Shop setzt jedoch (in ws.bundle.css) `html { font-size: 10px }`,
   ein Überbleibsel älterer Bootstrap-Themes. Dadurch schrumpfen alle
   unsere rem-Werte auf 62,5 % – die Navigation erscheint mit 8,6 px statt
   13,8 px, das Logo mit 11,3 px statt 18 px.

   LÖSUNG
   Wir überschreiben unsere Design-Variablen mit absoluten px-Werten,
   und zwar ausschliesslich innerhalb unserer eigenen Bausteine
   (.season-banner, .site-header, .nav-mobile, .site-footer).
   Custom Properties werden vererbt, px-Werte sind von der html-Basis
   unabhängig. Das Shop-Layout bleibt dadurch unangetastet.

   Die Werte entsprechen exakt den rem-Werten aus style.css × 16.
   Bei einer html-Basis von 16 px ändert diese Datei nichts – sie kann
   also gefahrlos immer geladen werden.

   SCHRIFTEN
   Barlow Condensed und Inter werden auf unseren Seiten per <link> im
   HTML geladen. Damit Fremdsysteme sie nicht separat einbinden müssen,
   holt diese Datei sie oben per @import nach.

   EINBINDUNG (nach style.css):
   <link rel="stylesheet" href="https://skischule-arosa.vercel.app/css/style.css">
   <link rel="stylesheet" href="https://skischule-arosa.vercel.app/css/embed.css">
   ══════════════════════════════════════════════════════════════════ */

.season-banner,
.site-header,
.nav-mobile,
.site-footer {
  /* ── Type Scale (rem × 16) ─────────────────────────────────── */
  --text-xs:   clamp(12px, 11.2px + 0.25vw, 14px);
  --text-sm:   clamp(14px, 12.8px + 0.35vw, 16px);
  --text-base: clamp(16px, 15.2px + 0.25vw, 18px);
  --text-lg:   clamp(18px, 16px + 0.75vw, 24px);
  --text-xl:   clamp(24px, 19.2px + 1.25vw, 36px);
  --text-2xl:  clamp(32px, 19.2px + 2.5vw, 56px);
  --text-3xl:  clamp(40px, 16px + 4vw, 80px);
  --text-hero: clamp(48px, 8px + 7vw, 128px);

  /* ── Spacing ───────────────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ── Radius ────────────────────────────────────────────────── */
  --radius-sm:  6px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 24px;

  /* Basisschrift für alles, was innerhalb unserer Bausteine erbt */
  font-size: var(--text-base);
  line-height: 1.6;
}

/* ── Einzelwerte, die in style.css direkt in rem stehen ──────── */
.nav-link {
  font-size: clamp(12px, 10.88px + 0.28vw, 13.76px);
}

/* ── Schutz vor Fremdsystem-Regeln ───────────────────────────
   TYPO3-Themes setzen häufig globale Regeln für Listen, Links und
   Bilder. Wir stellen unsere Erwartungen innerhalb unserer Bausteine
   wieder her, ohne den restlichen Shop zu beeinflussen. */
.season-banner *,
.site-header *,
.nav-mobile *,
.site-footer * {
  box-sizing: border-box;
}

.site-header ul,
.nav-mobile ul,
.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-header img,
.site-footer img {
  max-width: 100%;
  height: auto;
}

.site-header a,
.nav-mobile a,
.site-footer a,
.season-banner a {
  text-decoration: none;
}

.site-footer p {
  margin-top: 0;
}