/* base.css — Reset, Typografie, Custom Property Fallbacks */

@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/Schibsted-Grotesk-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/Schibsted-Grotesk-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/Inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/Inter-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/Inter-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/Space-Mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/Space-Mono-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/Caveat-600.woff2') format('woff2');
}

*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { overflow-x: clip; }
:root { --sc-head-h: 72px; --sc-wrap: 1160px; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--sc-bg);
  color: var(--sc-ink);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
  font-family: 'Schibsted Grotesk', sans-serif;
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -.025em;
  color: var(--sc-ink-strong);
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.sc-wrap { max-width: var(--sc-wrap); margin: 0 auto; padding: 0 28px; }
.sc-eyebrow {
  font-family: 'Space Mono', monospace;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sc-accent-text);
}

.sc-script {
  font-family: 'Caveat', cursive;
  font-weight: 600;
  font-size: clamp(2.5rem, 6.4vw, 4.8rem);
  line-height: 1.05;
  letter-spacing: .01em;
  color: var(--sc-accent);
}
.sc-script--crm { color: #D68B45; }
.sc-script--vt { color: #9EBC34; }
.sc-script--pm { color: #5C6880; }
.sc-script--blue { color: var(--sc-accent); }
.sc-script--onband { color: var(--sc-on-brand-accent); }

/* Section-System: jede Inhalts-Sektion folgt einem Bauplan, Hintergrund per Modifier */
.sc-section { scroll-margin-top: calc(var(--sc-head-h) + 24px); padding: 96px 0; position: relative; overflow: hidden; }
.sc-section__in { position: relative; z-index: 1; max-width: 760px; }
.sc-section h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); margin-top: 14px; }
.sc-section__body { font-size: 1.14rem; color: var(--sc-ink-soft); margin-top: 22px; max-width: 62ch; }
.sc-section__body + .sc-section__body { margin-top: 18px; }
.sc-section__head { margin-bottom: 42px; }

.sc-section--light { background: var(--sc-surface); }
.sc-section--dark, .sc-section--image { background: var(--sc-brand); color: var(--sc-on-brand); }
.sc-section--dark .sc-eyebrow, .sc-section--image .sc-eyebrow { color: var(--sc-on-brand-accent); }
.sc-section--dark h2, .sc-section--image h2 { color: var(--sc-on-brand); }
.sc-section--dark .sc-section__body, .sc-section--image .sc-section__body { color: var(--sc-on-brand-soft); }
.sc-section--dark .sc-section__body a, .sc-section--image .sc-section__body a { color: var(--sc-on-brand-accent); font-weight: 600; }
.sc-section--dark .sc-rows { border-top-color: rgba(234,241,251,.18); }
.sc-section--dark .sc-row { border-bottom-color: rgba(234,241,251,.18); }
.sc-section--dark .sc-row h3 { color: var(--sc-on-brand); }
.sc-section--dark .sc-row p { color: var(--sc-on-brand-soft); }
.sc-section--dark .sc-row__num { color: var(--sc-on-brand-accent); }
.sc-section--dark .sc-row__arrow { color: var(--sc-on-brand-soft); }
.sc-section--dark .sc-tag, .sc-section--image .sc-tag { color: var(--sc-on-brand-soft); border-color: rgba(234,241,251,.22); }
.sc-section--dark .sc-chip, .sc-section--image .sc-chip { color: var(--sc-on-brand-soft); border-color: rgba(234,241,251,.22); }
.sc-section--dark .sc-badge, .sc-section--image .sc-badge { color: var(--sc-on-brand-accent); border-color: var(--sc-on-brand-accent); }
.sc-section--dark .sc-list li, .sc-section--image .sc-list li { color: var(--sc-on-brand-soft); }
.sc-section--dark .sc-list li strong, .sc-section--image .sc-list li strong { color: var(--sc-on-brand); }
.sc-section--dark .sc-list li::before, .sc-section--image .sc-list li::before { background: var(--sc-on-brand-accent); }
.sc-section--dark .sc-callout, .sc-section--image .sc-callout { border-color: rgba(234,241,251,.22); }
.sc-section--dark .sc-callout h3, .sc-section--image .sc-callout h3 { color: var(--sc-on-brand); }
.sc-section--dark .sc-callout p, .sc-section--image .sc-callout p { color: var(--sc-on-brand-soft); }
.sc-section--dark .sc-subsub, .sc-section--image .sc-subsub { color: var(--sc-on-brand); }
.sc-section--image .sc-about__facts { color: var(--sc-on-brand-soft); }
.sc-section--image .sc-about__facts span::before { background: var(--sc-on-brand-accent); }

.sc-secbg { position: absolute; inset: 0; z-index: 0; }
.sc-secbg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); opacity: .32; }
.sc-secbg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--sc-brand) 14%, color-mix(in srgb, var(--sc-brand) 52%, transparent) 88%); }

@media (min-width: 600px) {
  .sc-script { font-size: clamp(3.2rem, 6.4vw, 4.8rem); }
}