/* =========================================================
   BASE – Schrift, Reset, Skalierungseinheit, Band-Primitive
   ========================================================= */

/* Das @font-face für Águila steht jetzt in css/fonts.css (dort als
   Base64 eingebettet, damit die Schrift auch per Doppelklick/file://
   lädt). Der Fallback bleibt Italiana (Google Fonts) für den Fall,
   dass Águila fehlt – siehe --f-display in tokens.css. */

/* ---------- Reset -------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }

/* Tastaturfokus. Vorher zeichnete der Browser seinen eigenen Ring –
   auf dieser Seite ein Fremdkörper. Der Ring nimmt stattdessen die
   Sprache des Entwurfs auf: 1px Kontur, dieselbe Stärke wie beim
   Button, in der Farbe des jeweiligen Grundes. Nur :focus-visible,
   damit ein Mausklick keinen Rahmen hinterlässt. */
:focus-visible {
  outline: 1px solid var(--c-focus, var(--c-blue));
  outline-offset: calc(6 * var(--u));
}
/* Auf dunklem Grund trägt Blau auf Blau nicht. */
.band--hero, .band--banner, .nav:not(.is-stuck) { --c-focus: var(--c-white); }

body {
  margin: 0;
  background: var(--c-white);
  color: var(--c-body);
  font-family: var(--f-text);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: calc(38 / 21);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 400;   /* nicht 500 – sonst rendert der Fallback synthetisch fett */
  color: var(--c-blue);
  letter-spacing: .005em;
}

/* Fallback-Kompensation: Italiana läuft deutlich zarter als Aguila Medium.
   Ein minimaler Konturzuschlag bringt die Strichstärke auf Entwurfsniveau.
   Das Skript in der index.html entfernt .no-aguila, sobald die echte
   Schriftdatei geladen wurde – dann greift diese Regel nicht mehr. */
.no-aguila h1,
.no-aguila h2,
.no-aguila h3,
.no-aguila .foot__brand { -webkit-text-stroke: .55px currentColor; }

/* Italiana hat eine höhere Oberlänge als Aguila und sitzt dadurch
   tiefer in der Zeile. Beim Footer-Schriftzug fällt das gegenüber
   den Spalten daneben auf – dort wird es ausgeglichen. Entfällt
   mit der echten Schriftdatei automatisch. */
.no-aguila .foot__brand { margin-top: calc(-18 * var(--u)); }

/* Überschriften, die bewusst in der Textschrift stehen (Footer-
   Spaltenköpfe), nehmen weder Display-Schrift noch Konturzuschlag. */
.h-plain,
.no-aguila .h-plain {
  font-family: var(--f-text);
  -webkit-text-stroke: 0;
}

/* ---------- Skalierungseinheit -------------------------
   1u == 1px im 1920er Entwurf. Bezug ist die Container-
   Breite (100cqw), NICHT 100vw – letzteres schließt die
   Scrollbar ein und erzeugt horizontalen Overflow.

   Die Untergrenze entspricht dem Umbruchpunkt (1100/1920).
   Oberhalb von 1100px ist der Wert damit identisch zu einer
   reinen Proportionalskalierung; darunter friert die Layout-
   Einheit ein, weil das 1920er-Raster dort ohnehin verlassen
   wird. Der Übergang ist dadurch stetig – kein Sprung an der
   Breakpoint-Kante. Für Schriftgrade gilt das nicht: die
   skalieren über --fs-* eigenständig weiter. */
/* WICHTIG: Die 1600 begrenzen den INHALT, nicht die Fläche.
   `.page` läuft über die volle Fensterbreite – so reichen Hero-Bild,
   Banner- und Footer-Fläche von Kante zu Kante. Begrenzt wird nur der
   Inhalt, und zwar über `--gutter`: den zentrierenden Rand, um den jedes
   Band seinen Inhalt einrückt (bei ≥1600 = (100cqw−1600)/2, darunter 0).
   Genau dieses Modell nutzt auch Elementor (Section voll, Container innen).

   container-type sitzt weiterhin auf `.page` – nötig als Bezugsrahmen für
   die fixierte Navigation (sonst scrollt sie weg) und als cqw-Quelle für
   `--u`/`--gutter`. `--u` deckelt sich selbst über min(100cqw,1600), damit
   der Inhalt oberhalb 1600 nicht weiterwächst; die Schriftgrade sind über
   ihre clamp-Maxima auf denselben 1600-Stand gedeckelt (siehe tokens.css). */
.page {
  container-type: inline-size;
  --u: clamp(0.573px, min(100cqw, 1600px) / 1920, 1px);
  --gutter: max(0px, (100cqw - 1600px) / 2);
  /* Tatsächliche Hero-Höhe: dem Entwurf folgend, aber nie höher
     als das Fenster – sonst liegt die Dachsilhouette der
     Unterkante unter der Falz und ist erst nach dem Scrollen zu
     sehen. Hero und Spine beziehen sich beide hierauf, damit der
     Farbwechsel der Linie auf der Kante sitzt. */
  --hero-height: min(100svh, calc(var(--hero-h) * var(--u)));
  position: relative;
  overflow-x: clip;
}

/* Die Inhalts-Spur der fixierten Navigation: eigener zentrierter
   1600er-Container (die Nav-Fläche selbst bleibt voll breit über `.nav`).
   Eigener container-type, damit Logo/Menü genauso deckeln wie der Inhalt. */
.nav__band {
  container-type: inline-size;
  --u: clamp(0.573px, 100cqw / 1920, 1px);
  max-width: 1600px;
  margin-inline: auto;
}

/* Sprungziele nicht unter der fixierten Navigation ausrichten.
   Bezug ist ihre Höhe im geschrumpften Zustand – in dem steht sie,
   sobald überhaupt gesprungen wird. */
[id] { scroll-margin-top: calc(150 * var(--u)); }

/* =========================================================
   BAND – die Sektions-Primitive
   Jede Sektion der Seite ist ein Band über die VOLLE Breite –
   sein Hintergrund läuft von Fensterkante zu Fensterkante.
   Der INHALT dagegen sitzt im zentrierten 1600er-Streifen:
   dazu rückt das Band um `--gutter` (zentrierender Rand) plus
   die Entwurfskante (`--edge`) ein. Bei <1600 ist --gutter = 0,
   dann verhält sich alles exakt wie im ursprünglichen Entwurf.
   ========================================================= */
.band {
  position: relative;
  background: var(--band-bg, transparent);
  padding-inline-start: calc(var(--gutter) + var(--edge, var(--edge-rule)) * var(--u));
  padding-inline-end: calc(var(--gutter) + var(--edge-right) * var(--u));
}

/* Das Stack umfasst alle Bänder, durch die die Spine läuft –
   Hero bis „Doppelte Expertise". Sie endet damit automatisch
   an der Oberkante des CTA-Banners, ohne feste Pixelhöhe. */
.stack { position: relative; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
  html { scroll-behavior: auto; }
}