/* Code Hive GmbH: Reset, Basis-Typografie, Band-System.
   Farben und Typo kommen ausschliesslich aus tokens.css (erzeugt aus docs/styleguide.json). */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 118px;
  hanging-punctuation: first last;
}

body {
  font-family: var(--font-text);
  font-size: var(--type-fliesstext-size);
  line-height: var(--type-fliesstext-line);
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
p, li { overflow-wrap: break-word; }
h1, h2, h3, h4 { overflow-wrap: normal; hyphens: manual; }
p { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; }
/* Notbremse fuer schmale Geraete. Bewusst nur overflow-wrap, kein
   hyphens: auto: Zusammen mit text-wrap: balance trennt der Browser sonst auch
   dort, wo das Wort noch in die Zeile passt, und aus "Software, die sich
   rechnet." wird "Soft-ware, die sich rech-net.". overflow-wrap greift erst,
   wenn ein Wort allein nicht mehr passt. Wo echte Ueberlaenge vorkommt
   (.pagehead h1, .bento__cell h3), steht hyphens: auto gezielt in
   sections.css. */
@media (max-width: 599px) {
  h1, h2, h3, h4 { overflow-wrap: break-word; }
}
ul, ol { padding: 0; list-style: none; }

/* ---------- Abgeleitete Farbstufen (nicht im Styleguide, aus den Tokens berechnet) ---------- */
:root {
  --petrol-tief: #174759;   /* Karten und Linien auf Tiefsee */
  --nacht-tief: #071F26;    /* dunkelstes Band im Dark Mode */
  --header-h: 76px;        /* Hoehe der Menue-Pille selbst */
  --header-gap: 14px;      /* Abstand der Pille zum Fensterrand */
  --header-total: calc(var(--header-h) + 2 * var(--header-gap));
  --band-py: clamp(64px, 9vw, 144px);
}

/* ---------- Band-System ----------
   Die Seite wechselt zwischen hellen und dunklen Baendern. Das ist ein Bestandsmerkmal
   der Marke und im Styleguide als Layout-Regel festgehalten. Jedes Band setzt seine
   eigenen Farbrollen, damit alle Komponenten unveraendert funktionieren. */
.band {
  position: relative;
  padding-block: var(--band-py);
  background: var(--band-bg);
  color: var(--band-text);
}
.band--light {
  --band-bg: var(--weiss);
  --band-text: var(--anthrazit);
  --band-heading: var(--petrol);
  --band-muted: var(--schiefer);
  --band-surface: var(--nebel);
  --band-surface-2: var(--weiss);
  --band-line: var(--linie);
  --band-link: var(--tuerkis-text);
  --band-accent: var(--hive-tuerkis);
}
.band--tint {
  --band-bg: var(--nebel);
  --band-text: var(--anthrazit);
  --band-heading: var(--petrol);
  --band-muted: var(--schiefer);
  --band-surface: var(--weiss);
  --band-surface-2: var(--tuerkis-wash);
  --band-line: var(--linie);
  --band-link: var(--tuerkis-text);
  --band-accent: var(--hive-tuerkis);
}
.band--dark {
  --band-bg: var(--tiefsee);
  --band-text: var(--nebel);
  --band-heading: var(--weiss);
  --band-muted: var(--dunst);
  --band-surface: var(--petrol-tief);
  --band-surface-2: var(--nacht);
  --band-line: var(--petrol);
  --band-link: var(--hive-tuerkis);
  --band-accent: var(--hive-tuerkis);
}

:root[data-theme="dark"] .band--light,
:root[data-theme="dark"] .band--tint,
:root[data-theme="dark"] .band--dark { --band-text: var(--nebel); --band-heading: var(--weiss); --band-muted: var(--dunst); --band-link: var(--hive-tuerkis); }
:root[data-theme="dark"] .band--light { --band-bg: var(--nacht); --band-surface: var(--tiefsee); --band-surface-2: var(--petrol-tief); --band-line: var(--petrol-tief); }
:root[data-theme="dark"] .band--tint  { --band-bg: var(--tiefsee); --band-surface: var(--petrol-tief); --band-surface-2: var(--nacht); --band-line: var(--petrol); }
:root[data-theme="dark"] .band--dark  { --band-bg: var(--nacht-tief); --band-surface: var(--tiefsee); --band-surface-2: var(--nacht); --band-line: var(--petrol-tief); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .band--light,
  :root:not([data-theme="light"]) .band--tint,
  :root:not([data-theme="light"]) .band--dark { --band-text: var(--nebel); --band-heading: var(--weiss); --band-muted: var(--dunst); --band-link: var(--hive-tuerkis); }
  :root:not([data-theme="light"]) .band--light { --band-bg: var(--nacht); --band-surface: var(--tiefsee); --band-surface-2: var(--petrol-tief); --band-line: var(--petrol-tief); }
  :root:not([data-theme="light"]) .band--tint  { --band-bg: var(--tiefsee); --band-surface: var(--petrol-tief); --band-surface-2: var(--nacht); --band-line: var(--petrol); }
  :root:not([data-theme="light"]) .band--dark  { --band-bg: var(--nacht-tief); --band-surface: var(--tiefsee); --band-surface-2: var(--nacht); --band-line: var(--petrol-tief); }
}

/* ---------- Raster ---------- */
.wrap { width: min(100% - 2 * var(--space-3), var(--container)); margin-inline: auto; }
@media (min-width: 900px) { .wrap { width: min(100% - 2 * var(--space-7), var(--container)); } }
.wrap--narrow { width: min(100% - 2 * var(--space-3), 820px); margin-inline: auto; }
@media (min-width: 900px) { .wrap--narrow { width: min(100% - 2 * var(--space-7), 820px); } }

/* ---------- Typografie ---------- */
h1, .t-h1 {
  font-family: var(--font-display); font-weight: var(--type-h1-weight);
  font-size: var(--type-h1-size); line-height: var(--type-h1-line);
  letter-spacing: var(--type-h1-tracking); color: var(--band-heading, var(--color-text));
}
h2, .t-h2 {
  font-family: var(--font-display); font-weight: var(--type-h2-weight);
  font-size: var(--type-h2-size); line-height: var(--type-h2-line);
  letter-spacing: var(--type-h2-tracking); color: var(--band-heading, var(--color-text));
}
h3, .t-h3 {
  font-family: var(--font-display); font-weight: var(--type-h2-mittel-weight);
  font-size: var(--type-h2-mittel-size); line-height: var(--type-h2-mittel-line);
  color: var(--band-heading, var(--color-text));
}
h4, .t-h4 {
  font-family: var(--font-text); font-weight: var(--type-h3-weight);
  font-size: var(--type-h3-size); line-height: var(--type-h3-line);
  color: var(--band-heading, var(--color-text));
}
.lead {
  font-size: var(--type-lead-size); line-height: var(--type-lead-line);
  max-width: 50ch; color: var(--band-text);
}
.small { font-size: var(--type-klein-size); line-height: var(--type-klein-line); }
.muted { color: var(--band-muted, var(--color-muted)); }
p { max-width: 70ch; }

/* Mono-Label mit Code-Klammern. Markenzeichen, rationiert eingesetzt. */
.eyebrow {
  display: inline-block; font-family: "LFT Etica Mono", ui-monospace, monospace;
  font-weight: 600; font-size: var(--type-label-size); line-height: var(--type-label-line);
  letter-spacing: var(--type-label-tracking); text-transform: uppercase;
  color: var(--band-link); margin-bottom: var(--space-2);
}
.mono { font-family: "LFT Etica Mono", ui-monospace, monospace; }

a { color: var(--band-link, var(--color-accent)); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 2px solid var(--hive-tuerkis); outline-offset: 2px; border-radius: 2px; }

.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;
}
.skip-link {
  position: absolute; left: var(--space-3); top: -100px; z-index: 1000;
  background: var(--hive-tuerkis); color: var(--tiefsee); padding: var(--space-2) var(--space-4);
  border-radius: var(--radius); font-weight: 700; transition: top var(--duration-fast) var(--ease);
}
.skip-link:focus { top: var(--space-3); }

/* ---------- Icons ---------- */
.icon { width: 1.25em; height: 1.25em; flex: none; fill: currentColor; }
.icon--lg { width: 2rem; height: 2rem; }

/* ---------- Sektionskopf ---------- */
.section-head { max-width: 60ch; margin-bottom: clamp(32px, 4vw, 56px); }
.section-head h2 + p { margin-top: var(--space-3); }
.section-head--wide { max-width: none; }

/* ---------- Scroll-Reveal ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(14px); transition: opacity 420ms var(--ease), transform 420ms var(--ease); }
  .reveal.is-in { opacity: 1; transform: none; }
}
@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; }
}