/* TennisSeite.org — Typografie + Layout System
   Poppins 700 (Überschriften) + Work Sans (Fließtext)
   Utopia Fluid Scale: utopia.fyi
   Lokal gehostet */

/* ── Font-Face ── */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/poppins-700-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: 'Work Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/static/fonts/worksans-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;
}

/* ── Utopia Type Scale (320px → 1440px, Perfect Fourth 1.333 → 1.5) ── */
:root {
  --font-heading: 'Poppins', sans-serif;
  --font-body: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Type Scale */
  --step--2: clamp(0.69rem, 0.66rem + 0.18vw, 0.80rem);
  --step--1: clamp(0.83rem, 0.78rem + 0.29vw, 1.00rem);
  --step-0:  clamp(1.00rem, 0.91rem + 0.43vw, 1.25rem);
  --step-1:  clamp(1.20rem, 1.07rem + 0.63vw, 1.56rem);
  --step-2:  clamp(1.44rem, 1.26rem + 0.89vw, 1.95rem);
  --step-3:  clamp(1.73rem, 1.48rem + 1.24vw, 2.44rem);
  --step-4:  clamp(2.07rem, 1.73rem + 1.70vw, 3.05rem);
  --step-5:  clamp(2.49rem, 2.03rem + 2.31vw, 3.82rem);
  --step-6:  clamp(3.00rem, 2.38rem + 3.09vw, 4.77rem);

  /* Space Scale */
  --space-3xs: clamp(0.31rem, 0.29rem + 0.11vw, 0.38rem);
  --space-2xs: clamp(0.56rem, 0.51rem + 0.27vw, 0.75rem);
  --space-xs:  clamp(0.88rem, 0.80rem + 0.38vw, 1.13rem);
  --space-s:   clamp(1.13rem, 1.03rem + 0.54vw, 1.50rem);
  --space-m:   clamp(1.69rem, 1.54rem + 0.80vw, 2.25rem);
  --space-l:   clamp(2.25rem, 2.05rem + 1.07vw, 3.00rem);
  --space-xl:  clamp(3.38rem, 3.08rem + 1.61vw, 4.50rem);
  --space-2xl: clamp(4.50rem, 4.11rem + 2.14vw, 6.00rem);
  --space-3xl: clamp(6.75rem, 6.16rem + 3.21vw, 9.00rem);

  /* Grid */
  --grid-columns: 12;
  --grid-gutter: var(--space-s);
  --grid-margin: var(--space-m);
  --grid-max: 1320px;
}

/* ── Body ── */
body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--step-0);
  line-height: 1.7;
}

/* ── Überschriften ── */
h1 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--step-6);
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-m);
}

h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--step-4);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-top: var(--space-xl);
  margin-bottom: var(--space-s);
}

h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--step-2);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-top: var(--space-l);
  margin-bottom: var(--space-xs);
}

/* ── Text-Varianten ── */
.subheadline {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--step-1);
  line-height: 1.5;
  opacity: 0.82;
}

.label, .nav-label, .caption {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

small, .small {
  font-size: var(--step--2);
}

/* ── Grid ── */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--grid-gutter);
  max-width: var(--grid-max);
  margin-inline: auto;
  padding-inline: var(--grid-margin);
}

.col-12 { grid-column: span 12; }
.col-8  { grid-column: span 8; }
.col-6  { grid-column: span 6; }
.col-4  { grid-column: span 4; }
.col-3  { grid-column: span 3; }

@media (max-width: 768px) {
  .col-8, .col-6, .col-4, .col-3 { grid-column: span 12; }
}

/* ── Sections ── */
.section { padding-block: var(--space-2xl); }
.section--hero { padding-block: var(--space-3xl); min-height: 90vh; }
.section--tight { padding-block: var(--space-l); }

/* ── Stack ── */
.stack > * + * { margin-top: var(--space-m); }
.stack--tight > * + * { margin-top: var(--space-s); }
.stack--loose > * + * { margin-top: var(--space-xl); }

/* ── Content-Seiten (VVI, Regional etc.) — override für kleinere Überschriften ── */
.vvi-page h1 { font-size: var(--step-4); line-height: 1.1; }
.vvi-page h2 { font-size: var(--step-1); margin-top: var(--space-l); }