/* ==========================================================================
   OPOHL GmbH – Reset, Basistypografie, Layout-Primitive
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Sticky Header berücksichtigen, damit Überschriften nicht darunter liegen */
  scroll-padding-top: var(--scroll-offset);
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink-2);
  font-family: var(--ff-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* niemals horizontaler Overflow */
  overflow-x: hidden;
}

/* --- Überschriften: Satzschreibung, enge Laufweite ----------------------- */

h1,
h2,
h3,
h4 {
  margin: 0;
  color: var(--c-ink);
  font-weight: var(--fw-semibold);
  text-wrap: balance;
  /* Deutsche Komposita sind länger als jede Spalte. Getrennt wird nur an
     den Stellen, die im HTML als ­ hinterlegt sind – also an den
     Wortfugen: „Maschinen­verpackung".
     Kein hyphens: auto. Der Automat trennt in großen Überschriften an
     Stellen, die niemand so setzen würde („Maschinenverpa-ckung"), und
     verstößt dabei sogar gegen die Rechtschreibung – „ck" wird seit 1996
     nicht mehr getrennt. Bei 56 px Schriftgröße fällt jeder Fehltreffer
     sofort auf. overflow-wrap bleibt als Notbremse: lieber ein harter
     Umbruch als Text, der aus dem Container läuft. */
  hyphens: manual;
  -webkit-hyphens: manual;
  overflow-wrap: break-word;
}

h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-head);
  letter-spacing: var(--ls-head);
}

h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-head);
}

h4 {
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  font-weight: var(--fw-semibold);
}

p {
  margin: 0;
}

p + p {
  margin-top: var(--s-4);
}

strong {
  font-weight: var(--fw-semibold);
  color: var(--c-ink);
}

small {
  font-size: var(--fs-caption);
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

img {
  height: auto;
}

/* --- Links --------------------------------------------------------------- */

a {
  color: var(--c-accent);
  text-decoration: none;
  transition: color var(--t-fast) var(--e-out);
}

a:hover {
  color: var(--c-accent-hover);
}

/* Lauftext-Links bleiben als Link erkennbar */
.prose a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--c-line-strong);
}

.prose a:hover {
  text-decoration-color: currentColor;
}

/* --- Fokus: immer sichtbar, überall gleich ------------------------------- */

:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

:is(.section--dark, .on-dark) :focus-visible {
  outline-color: var(--c-accent-on-dark);
}

/* --- Skip Link ----------------------------------------------------------- */

.skip-link {
  position: absolute;
  top: var(--s-2);
  left: var(--s-2);
  z-index: 999;
  padding: var(--s-3) var(--s-5);
  background: var(--c-ink);
  color: var(--c-on-dark);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  transform: translateY(-200%);
  transition: transform var(--t-fast) var(--e-out);
}

.skip-link:focus {
  transform: translateY(0);
  color: var(--c-on-dark);
}

/* --- Nur für Screenreader ------------------------------------------------ */

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Abstands-Hilfsklassen ------------------------------------------------
   Ersetzen die früheren style="margin-top: …"-Attribute. Inline-Styles
   bräuchten 'unsafe-inline' in der Content-Security-Policy – dafür sind
   sechs Klassen der günstigere Preis. Bewusst knapp gehalten: das ist kein
   Utility-Framework, sondern die Ausnahmen vom Komponentenabstand.
   ------------------------------------------------------------------------- */

.mt-4 { margin-top: var(--s-4); }
.mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }
.mt-8 { margin-top: var(--s-8); }
.mb-8 { margin-bottom: var(--s-8); }

/* Sprungziel nicht unter die fixierte Kopfzeile rutschen lassen */
.anchor-offset {
  scroll-margin-top: calc(var(--scroll-offset) + 16px);
}

/* ==========================================================================
   Layout-Primitive
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--w-content);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow {
  max-width: var(--w-narrow);
}

/* Lesetexte nie über die volle Breite */
.measure {
  max-width: var(--w-text);
}

.measure--short {
  max-width: 52ch;
}

.section {
  padding-block: var(--sp-section);
}

.section--sm {
  padding-block: var(--sp-section-sm);
}

.section--alt {
  background: var(--c-bg-alt);
}

:is(.section--dark, .on-dark) {
  background: var(--c-dark);
  color: var(--c-on-dark-2);
}

:is(.section--dark, .on-dark) h1,
:is(.section--dark, .on-dark) h2,
:is(.section--dark, .on-dark) h3,
:is(.section--dark, .on-dark) h4 {
  color: var(--c-on-dark);
}

:is(.section--dark, .on-dark) a {
  color: var(--c-accent-on-dark);
}

:is(.section--dark, .on-dark) .eyebrow {
  color: var(--c-accent-on-dark);
}

/* Angrenzende gleichfarbige Sections nicht doppelt polstern */
.section--alt + .section--alt,
.section--dark + .section--dark {
  padding-top: 0;
}

.divider {
  height: 1px;
  border: 0;
  margin: 0;
  background: var(--c-line);
}

/* --- Eyebrow: ersetzt die frühere H6-Fehlnutzung ------------------------- */

.eyebrow {
  margin: 0 0 var(--s-4);
  color: var(--c-accent);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

/* --- Lead: Einleitungstext unter der Überschrift ------------------------- */

.lead {
  font-size: var(--fs-lg);
  line-height: 1.5;
  color: var(--c-ink-2);
}

:is(.section--dark, .on-dark) .lead {
  color: var(--c-on-dark-2);
}

/* ==========================================================================
   Scroll-Reveal – Grundzustand nur wenn JS aktiv ist
   ========================================================================== */

.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--t-slow) var(--e-out),
    transform var(--t-slow) var(--e-out);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

.js .reveal--delay-1 { transition-delay: 70ms; }
.js .reveal--delay-2 { transition-delay: 140ms; }
.js .reveal--delay-3 { transition-delay: 210ms; }

/* ==========================================================================
   Reduced Motion – global und vollständig
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }
}

/* --- Print --------------------------------------------------------------- */

@media print {
  .site-header,
  .site-footer,
  .cta-section,
  .nav-toggle {
    display: none !important;
  }

  body {
    color: #000;
    font-size: 11pt;
  }
}