/* ============================================================
   BAUM — Base: reset, typography, primitives
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--c-body);
  background: var(--c-surface);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video, canvas, svg { display: block; max-width: 100%; }
button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
strong { font-weight: 600; color: var(--c-text); }

::selection { background: var(--c-primary); color: #fff; }

/* Focus — visible, never removed */
:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
.on-dark :focus-visible { outline-color: var(--c-on-navy-2); }

/* Skip link */
.skip-link {
  position: absolute; top: -48px; left: 16px; z-index: 200;
  background: var(--c-navy); color: #fff; padding: var(--sp-3) var(--sp-5);
  font-size: var(--fs-sm); font-weight: 500; border-radius: 0 0 var(--r-md) var(--r-md);
  transition: top var(--t-fast) ease;
}
.skip-link:focus { top: 0; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { color: var(--c-text); font-weight: 600; letter-spacing: var(--ls-heading); line-height: var(--lh-heading); }

/* long German compounds must wrap, never clip (html lang="de" → de patterns).
   hyphens:auto only on small screens — desktop display titles must not break mid-word.
   hyphenate-limit-chars reserves hyphenation for the genuinely long compounds it exists for
   ("Videoüberwachungsanlagen"): only words ≥12 chars break, so ordinary words ("Sicherheit")
   wrap whole instead of splitting mid-word in a centred hero. */
h1, h2, h3, h4, .display, .h1, .h2, .h3, .h4 { overflow-wrap: break-word; }
@media (max-width: 700px) {
  h1, h2, h3, h4, .display, .h1, .h2, .h3, .h4 { hyphens: auto; hyphenate-limit-chars: 12 3 3; }
}

.display {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-weight: 600;
}
.h1 { font-size: var(--fs-h1); line-height: 1.06; letter-spacing: -0.03em; }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); }
.h4 { font-size: var(--fs-h4); }

.lead { font-size: var(--fs-lead); line-height: 1.65; max-width: 66ch; }

.eyebrow {
  display: inline-block;
  font-size: 11px; font-weight: 400;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--c-eyebrow);
}
.on-dark .eyebrow { color: var(--c-on-navy-2); }

/* v=162 — EIN Abstand zwischen Eyebrow und Ueberschrift.
   Gemessen ueber 12 Seiten / 71 Eyebrows waren es ZEHN verschiedene Werte
   (2, 16, 18, 20, 22, 24, 26, 34, 40, -9 px). Ursache: .eyebrow bringt keinen
   Abstand mit, 18 Ueberschriften hatten gar keine margin-top (Ergebnis: 2 px,
   das Label klebte am Titel), 34 bekamen ihre 20 px aus verschiedenen Regeln.

   ⚠️ NICHT `.eyebrow { margin-bottom }` benutzen: das haette die 34 Faelle, die
   ihren Abstand schon aus CSS beziehen, auf 40 px VERDOPPELT.
   ⚠️ Auch nicht `.eyebrow + *`: der naechste Knoten ist mitunter `.sr-only`
   (braucht sein margin:-1px) oder ein Layout-Container wie `.hours-grid`
   (44 px, gewollt). Darum gezielt nur Ueberschriften, sr-only ausgenommen.
   Spezifitaet (0,2,1) schlaegt die bestehenden Klassenregeln. */
.eyebrow + h1:not(.sr-only),
.eyebrow + h2:not(.sr-only),
.eyebrow + h3:not(.sr-only),
.eyebrow + .h1,
.eyebrow + .h2,
.eyebrow + .h3 {
  margin-top: var(--sp-5);
}

/* ⚠️ Zweite Haelfte des Fixes, ohne sie ist er schlimmer als vorher:
   manche Eyebrows (v. a. in Hero-Koepfen) bringen SELBST ein margin-bottom mit.
   Zusammen mit dem margin-top oben ergaeben sich 40 px statt 22 (gemessen auf
   /leistungen/). Wo die Regel oben greift, gehoert der Abstand allein der
   Ueberschrift — die Eyebrow gibt ihren hier ab.

   ⚠️ Die doppelte Klasse `.eyebrow.eyebrow` ist Absicht und kein Tippfehler: sie hebt
   die Spezifitaet auf (0,3,1). Ohne das gewinnt `.final:not(:has(.final-panel)) .eyebrow`
   (sections.css, (0,3,0)) und die CTA-Sektionen stehen bei 40 statt 22 px (gemessen).
   Das Ergebnis bleibt dort optisch identisch — 20 px Abstand, nur jetzt aus EINER
   Quelle statt aus der Eyebrow. */
.eyebrow.eyebrow:has(+ h1:not(.sr-only)),
.eyebrow.eyebrow:has(+ h2:not(.sr-only)),
.eyebrow.eyebrow:has(+ h3:not(.sr-only)),
.eyebrow.eyebrow:has(+ .h1),
.eyebrow.eyebrow:has(+ .h2),
.eyebrow.eyebrow:has(+ .h3) {
  margin-bottom: 0;
}

/* Micro technical labels — coordinates, index numbers */
.tech-label {
  font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: var(--ls-micro); text-transform: uppercase;
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}
.on-dark .tech-label { color: var(--c-on-navy-muted); }

/* Dark sections */
.on-dark { color: var(--c-on-navy); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4, .on-dark .display { color: #fff; }
.on-dark strong { color: #fff; }

/* ---------- Layout ---------- */
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-pad); position: relative; }
.section--flush-top { padding-top: 0; }
.section--alt { background: var(--c-bg-alt); }

/* Screen-reader-only (hidden section headings for a clean document outline) */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3);
  min-height: 52px; padding: var(--sp-3_5) 30px;
  font-size: 15px; font-weight: 500; letter-spacing: 0.01em;
  border-radius: var(--r-sm);
  transition: background-color var(--t-fast) ease, border-color var(--t-fast) ease,
              color var(--t-fast) ease, transform var(--t-fast) var(--ease-out);
  position: relative;
}
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--c-primary); color: #fff; }
.btn-primary:hover { background: var(--c-primary-hover); }
.btn-primary:active { background: var(--c-primary-active); }

.btn-outline { border: 1px solid var(--c-border); color: var(--c-text); background: transparent; }
.btn-outline:hover { border-color: var(--c-primary); color: var(--c-primary); }

.on-dark .btn-outline { border-color: rgba(201,216,236,.35); color: #fff; }
.on-dark .btn-outline:hover { border-color: #fff; background: rgba(255,255,255,.06); color: #fff; }

/* Arrow affordance inside buttons/links */
.btn .arr, .link-arrow .arr { transition: transform var(--t-fast) var(--ease-out); }
.btn:hover .arr, .link-arrow:hover .arr { transform: translateX(4px); }

.link-arrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: 15px; font-weight: 500; color: var(--c-primary);
}
.link-arrow:hover { color: var(--c-primary-hover); }

/* ---------- Reveal system (JS adds .is-inview) ---------- */
/* Calm reveals (client brief: kein plötzliches Einblenden) — gentle settle, minimal travel. */
.reveal { opacity: 0; transform: translateY(10px); }
.reveal.is-inview {
  opacity: 1; transform: none;
  transition: opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out);
}
.reveal-line { opacity: 0; }
.reveal-line.is-inview { opacity: 1; transition: opacity var(--t-reveal) ease; }

/* Stagger children: JS sets --i per child */
.stagger > * { opacity: 0; transform: translateY(10px); }
.stagger.is-inview > * {
  opacity: 1; transform: none;
  transition: opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 55ms);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal, .reveal-line, .stagger > * { opacity: 1 !important; transform: none !important; }
}