/* ============================================================
   WOLTIDO — Base tokens, reset, typography, buttons, utilities
   Warm editorial system — refined, restrained, crafted.
   ============================================================ */

:root {
  /* Brand */
  --red:        #E12A1E;
  --red-600:    #C21D13;
  --red-700:    #9E150D;
  --red-soft:   #FAEAE6;
  --red-on-dark:#F2685C;   /* lightened red for small text on --ink/--ink-2 (≈5:1, WCAG AA) */

  /* Ink / surfaces (warm) */
  --ink:        #1A1610;   /* warm near-black */
  --ink-2:      #14110C;   /* darkest — hero/footer */
  --ink-3:      #2A241B;
  --paper:      #FFFFFF;
  --bg:         #F6F2EC;   /* warm off-white page */
  --stone:      #ECE6DC;   /* warm secondary surface */
  --stone-2:    #E3DBCE;

  /* Text */
  --text:       #221C14;
  --muted:      #6B635A;   /* warm gray */
  --muted-2:    #9A9184;
  --on-dark:    #F6F2EC;
  --on-dark-mut:#A89F92;

  /* Lines (warm hairlines) */
  --line:       #E5DDD0;
  --line-2:     #D6CBBA;
  --line-dark:  rgba(246,242,236,.14);

  /* Accent badges */
  --violet:     #5B4BD6;
  --violet-bg:  #ECE9FB;
  --green:      #1F7A45;
  --green-bg:   #DDF1E3;
  --amber:      #8A5A12;
  --amber-bg:   #FBF1DC;

  /* Radii — architectural, tighter */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --pill: 999px;

  /* Shadows — soft, warm-tinted, subtle */
  --sh-sm: 0 1px 2px rgba(40,30,15,.05);
  --sh-md: 0 10px 30px -12px rgba(40,30,15,.18);
  --sh-lg: 0 30px 60px -24px rgba(40,30,15,.28);
  --sh-xl: 0 50px 100px -30px rgba(20,15,8,.40);

  /* Layout */
  --maxw: 1320px;
  --maxw-wide: 1460px;
  --gutter: clamp(20px, 5vw, 64px);
  --header-h: 116px;

  /* Type */
  --font-display: "Schibsted Grotesk", system-ui, sans-serif;
  --font-body: "Hanken Grotesk", system-ui, sans-serif;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.62;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}
p { margin: 0; }
::selection { background: var(--ink); color: var(--bg); }

/* ---------- Typographic scale ---------- */
.display {
  font-size: clamp(2.6rem, 5.8vw, 4.6rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.032em;
}
.h1 { font-size: clamp(2rem, 4vw, 3.1rem); font-weight: 700; letter-spacing: -0.028em; }
.h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 700; letter-spacing: -0.02em; }
.h3 { font-size: clamp(1.18rem, 1.8vw, 1.45rem); font-weight: 600; letter-spacing: -0.01em; }
.lead {
  font-size: clamp(1.06rem, 1.4vw, 1.28rem);
  line-height: 1.58;
  color: var(--muted);
  font-weight: 400;
}

/* Refined eyebrow: small rule + label (restrained, not all-red caps) */
.eyebrow {
  display: none; /* eyebrow kickers removed globally (Martin) — heading-led sections */
  align-items: center;
  gap: .7em;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .8125rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow::before {
  content: "";
  width: 22px; height: 1.5px;
  background: var(--red);
  flex-shrink: 0;
}
.eyebrow.on-dark { color: var(--on-dark-mut); }

/* Section index label, e.g. "01 — Lösungen" */
.idx { font-family: var(--font-display); font-weight: 700; color: var(--red); font-variant-numeric: tabular-nums; }

/* ---------- Layout helpers ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-wide { width: 100%; max-width: var(--maxw-wide); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(64px, 9vw, 130px); }
.section-sm { padding-block: clamp(44px, 5vw, 70px); }
.center { text-align: center; }
.muted { color: var(--muted); }
.mx-auto { margin-inline: auto; }
.on-stone { background: var(--stone); }
.on-paper { background: var(--paper); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  padding: 1.05em 1.7em;
  border-radius: var(--pill);
  border: 1.5px solid transparent;
  transition: transform .3s var(--ease), background .25s, color .25s, box-shadow .3s, border-color .25s;
  /* No nowrap: long labels (esp. DE) wrap at spaces instead of forcing the
     button's min-content to overflow narrow columns. The arrow is a flex
     item, so it never orphans onto its own line. */
  text-align: center;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn .arr { transition: transform .3s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }
/* constrain inline icons (e.g. phone) that ship without width/height so they don't balloon */
.btn svg:not(.arr) { width: 1.15em; height: 1.15em; flex-shrink: 0; }

.btn--primary { background: var(--red-600); color: #fff; } /* red-600 = white-on-red ≥4.5 (WCAG AA); --red kept for accents/icons */
.btn--primary:hover { background: var(--red-700); }
/* Ground the focal primary CTA when it floats over a photographic hero — brand-hue (red-700) shadow, not a generic grey drop. */
.hero--2 .hero__actions .btn--primary,
.phero__actions .btn--primary { box-shadow: 0 10px 28px -10px rgba(158,21,13,.55), 0 2px 6px rgba(13,10,6,.28); }

.btn--dark { background: var(--ink); color: var(--bg); }
.btn--dark:hover { background: #000; }

.btn--light { background: var(--bg); color: var(--ink); }
.btn--light:hover { background: #fff; }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--ink); }

.btn--ghost-light { background: transparent; color: #fff; border-color: rgba(246,242,236,.3); }
.btn--ghost-light:hover { border-color: #fff; background: rgba(246,242,236,.08); }

.btn--lg { font-size: 1rem; padding: 1.2em 2em; }
.btn--sm { font-size: .875rem; padding: .8em 1.3em; }
.btn--block { width: 100%; justify-content: center; }

/* ---------- Badges / chips ---------- */
.badge {
  display: inline-flex; align-items: center; gap: .4em;
  font-weight: 600; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase;
  padding: .45em .75em; border-radius: var(--r-xs); line-height: 1;
}
/* modifier-less badge (e.g. "Brzy" coming-soon) — soft neutral pill, not bare muted text */
.badge:not([class*="badge--"]) { color: var(--muted); background: var(--stone); }
.badge--violet { color: var(--violet); background: var(--violet-bg); }
.badge--green  { color: var(--green);  background: var(--green-bg); }
.badge--red    { color: #fff; background: var(--red-600); }

/* ---------- Link with arrow ---------- */
.link-arrow {
  display: inline-flex; align-items: center; gap: .45em;
  font-weight: 600; color: var(--ink);
  padding-bottom: 2px;
  border-bottom: 1.5px solid transparent;
  transition: border-color .25s, color .25s;
}
.link-arrow .arr { color: var(--red); transition: transform .3s var(--ease); }
.link-arrow:hover { border-color: var(--ink); }
.link-arrow:hover .arr { transform: translateX(4px); }

/* ---------- Image frame ---------- */
.imgfill {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  background: linear-gradient(135deg, #2a241b 0%, #14110c 100%);
}

/* utility reveal */
.fade-up { opacity: 0; transform: translateY(22px); }
.fade-up.in { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform .8s var(--ease); }

/* In-page anchors clear the sticky header (otherwise the target heading / form
   first field lands hidden behind it). Keyed off the JS-tracked header height. */
[id] { scroll-margin-top: calc(var(--header-h) + 16px); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .fade-up { opacity: 1; transform: none; }
}

/* keyboard focus: one visible, consistent ring (mouse clicks stay clean via :focus-visible) */
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.btn:focus-visible, .opt:focus-visible, .faq__q:focus-visible { outline-offset: 2px; }
.on-dark :focus-visible, .leadband :focus-visible, .cta-band :focus-visible, .site-header .nav__link:focus-visible { outline-color: #fff; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; }

/* reduced motion: stop continuous movement, keep content visible */
@media (prefers-reduced-motion: reduce) {
  .photomarquee__track, .brandstrip__track, .photomarquee__track--rev { animation: none !important; }
  .hb-chip .dot, .hub-campaign .dot, .geo__pulse, .lf-anna__av::before { animation: none !important; }
  .fade-up { opacity: 1 !important; transform: none !important; transition: none !important; }
  .fcard { animation: none !important; opacity: 1 !important; }
  .refticker__track { scroll-behavior: auto; }
}