/* ─── Font Faces ─────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'KMR Melange Grotesk';
  src: url('../fonts/KMRMelangeGrotesk-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'KMR Melange Grotesk';
  src: url('../fonts/KMRMelangeGrotesk-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'KMR Melange Grotesk';
  src: url('../fonts/KMRMelangeGrotesk-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* Doto Variable Font (Open Font License — 100% round dots) */
@font-face {
  font-family: 'Doto';
  src: url('../fonts/Doto-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ─── Custom Properties — Mobile first ──────────────────────────────────────── */
:root {
  /* Colors */
  --color-bg:           #ffffff;
  --color-surface:      #f5f5f5;
  --color-border:       #e0e0e0;
  --color-text:         #1a1c1f;
  --color-text-muted:   #888888;
  --color-accent:       #e84444;
  --color-accent-hover: #cc3333;
  --color-accent-glow:  rgba(232, 68, 68, 0.25);

  /* Font stacks */
  --font-sans: 'KMR Melange Grotesk', Arial, sans-serif;
  --font-dot:  'Doto', monospace;
  --font-dot-weight: 700;
  --font-dot-variation: 'ROND' 100, 'wght' 700;

  /* ── Type scale: Mobile (< 768px) ──────────────────────────────────────── */
  --h1-size:    24px;   --h1-lh:    1.1;
  --h2-size:    21px;   --h2-lh:    1.1;
  --h2dot-size: 28px;   --h2dot-lh: 1.0;
  --h3dot-size: 64px;   --h3dot-lh: 1.0;
  --t1dot-size: 18px;   --t1dot-lh: 1.0;
  --t2-size:    16px;   --t2-lh:    1.2;
  --t3-size:    18px;   --t3-lh:    1.2;
  --t4-size:    14px;   --t4-lh:    1.0;
  --t5-size:    10px;   --t5-lh:    1.0;

  /* Header */
  --header-height: 70px;

  /* Layout */
  --section-gap:  80px;
  --section-pad-x: 40px;
  --radius-pill:  9999px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-med:  250ms ease;
}

/* ── Tablet (≥ 768px) ────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  :root {
    --h1-size:   28px;
    --h2-size:   24px;
    --t3-size:   20px;
    --section-gap: 100px;
  }
}

/* ── Desktop 1440 (≥ 1024px) ─────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  :root {
    --h1-size:    40px;
    --h2-size:    32px;
    --h2dot-size: 28px;
    --h3dot-size: 120px;
    --t1dot-size: 18px;
    --t2-size:    16px;
    --t3-size:    21px;
    --t4-size:    14px;
    --t5-size:    10px;
    --section-gap: 120px;
    --section-pad-x: 120px;
  }
}

/* ── Desktop 1920+ (≥ 1920px) ────────────────────────────────────────────────── */
@media (min-width: 1920px) {
  :root {
    --h1-size:    54px;
    --h2-size:    42px;
    --h2dot-size: 36px;
    --h3dot-size: 160px;
    --t1dot-size: 28px;
    --t2-size:    21px;
    --t3-size:    28px;
    --t4-size:    18px;
    --t5-size:    14px;
    --section-pad-x: 200px;
  }
}

/* ─── Dot Font Styles (Doto with 100% round dots) ─────────────────────────── */
.nw-details__tab,
.nw-details__panel-label,
.nw-details3__card-label,
.nw-linkbox__card-title,
.nw-kachel__stat,
.nw-wpdetails__label,
.nw-contact__heading,
.h2-dot,
.h3-dot,
.t1-dot,
.nw-details2__tagline,
.nw-joincommunity__aside,
.nw-impressum__row-label,
.nw-wpdetails__block-textimage-caption {
  font-family: var(--font-dot);
  font-weight: var(--font-dot-weight, 700);
  font-variation-settings: var(--font-dot-variation, 'ROND' 100, 'wght' 700);
  color: var(--color-accent);
}

/* ─── Reset ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-size: var(--t2-size);
  line-height: var(--t2-lh);
  color: var(--color-text);
  background: var(--color-bg);
  padding-top: var(--header-total-height, var(--header-height));
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

img, svg {
  display: block;
  max-width: 100%;
}

/* ─── Typography classes ─────────────────────────────────────────────────────── */

/* H1 — KMR Melange Grotesk Regular & Medium */
.h1 {
  font-family: var(--font-sans);
  font-size: var(--h1-size);
  font-weight: 400;
  line-height: var(--h1-lh);
  letter-spacing: 0;
}
.h1-medium {
  font-family: var(--font-sans);
  font-size: var(--h1-size);
  font-weight: 500;
  line-height: var(--h1-lh);
  letter-spacing: 0;
}

/* H2 — KMR Melange Grotesk Regular */
.h2 {
  font-family: var(--font-sans);
  font-size: var(--h2-size);
  font-weight: 400;
  line-height: var(--h2-lh);
}

/* H2 Dot — Doto Variable Font (100% round dots, heavy) */
.h2-dot {
  font-family: var(--font-dot);
  font-size: var(--h2dot-size);
  font-weight: 700;
  font-variation-settings: 'ROND' 100, 'wght' 700;
  line-height: var(--h2dot-lh);
  letter-spacing: 0.02em;
  color: var(--color-accent);
}

/* H3 Dot — Doto Variable Font (100% round dots, extra heavy) */
.h3-dot {
  font-family: var(--font-dot);
  font-size: var(--h3dot-size);
  font-weight: 800;
  font-variation-settings: 'ROND' 100, 'wght' 800;
  line-height: var(--h3dot-lh);
  color: var(--color-accent);
}

/* T1 Dot — Doto Variable Font (100% round dots, heavy) */
.t1-dot {
  font-family: var(--font-dot);
  font-size: var(--t1dot-size);
  font-weight: 700;
  font-variation-settings: 'ROND' 100, 'wght' 700;
  line-height: var(--t1dot-lh);
  letter-spacing: 0.02em;
  color: var(--color-accent);
}

/* T2 — KMR Melange Grotesk Regular */
.t2 {
  font-family: var(--font-sans);
  font-size: var(--t2-size);
  font-weight: 400;
  line-height: var(--t2-lh);
}

/* T3 — KMR Melange Grotesk Regular */
.t3 {
  font-family: var(--font-sans);
  font-size: var(--t3-size);
  font-weight: 400;
  line-height: var(--t3-lh);
}

/* T4 — KMR Melange Grotesk Medium CAPS */
.t4 {
  font-family: var(--font-sans);
  font-size: var(--t4-size);
  font-weight: 500;
  line-height: var(--t4-lh);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* T4 ExtraBold — KMR Melange Grotesk Extra Bold CAPS */
.t4-bold {
  font-family: var(--font-sans);
  font-size: var(--t4-size);
  font-weight: 800;
  line-height: var(--t4-lh);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* T5 — KMR Melange Grotesk Regular (small label) */
.t5 {
  font-family: var(--font-sans);
  font-size: var(--t5-size);
  font-weight: 400;
  line-height: var(--t5-lh);
}

/* Text-button — turns red on hover */
.text-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  transition: color var(--transition-fast);
}
.text-btn:hover,
a.text-btn:hover { color: var(--color-accent); }

/* ─── Layout utilities ───────────────────────────────────────────────────────── */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 120px;
}

@media (min-width: 1920px) {
  .container { padding: 0 200px; }
}

@media (max-width: 1023px) {
  .container { padding: 0 40px; }
}

@media (max-width: 767px) {
  .container { padding: 0 24px; }
}