/* ============================================================
   LDmotion Design-System: Basis
   Token, Reset, Typografie, Layout-Helfer, Buttons.
   Keine Seite und kein Baustein definiert diese Werte erneut.

   Formen-System (eine Regel, ueberall gueltig):
     Buttons, Pills, Chips    -> --r-pill (voll rund)
     Flaechen, Karten, Inputs -> --r (16px)
     Grosse Panels, Medien    -> --r-lg (24px)
   ============================================================ */

:root {
  /* --- Marke: unveraendert aus styles.css uebernommen --- */
  --accent: #1F9FCC;
  --accent-deep: #0467AA;
  --accent-grad: linear-gradient(135deg, #0467AA 0%, #1F9FCC 100%);
  --accent-soft: color-mix(in oklab, var(--accent) 14%, transparent);
  --accent-line: color-mix(in oklab, var(--accent) 34%, transparent);
  --on-accent: #ffffff;

  --bg: #0a0c0f;
  --bg-1: #0e1115;
  --surface: #14181e;
  --surface-2: #181d24;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.17);

  --ink: #f4f6f8;
  --ink-2: #b4bcc6;
  --ink-3: #7d8794;

  --display: "Montserrat", system-ui, sans-serif;
  --body: "Fira Sans", system-ui, sans-serif;

  /* --- Layout --- */
  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 64px);

  /* --- Formen --- */
  --r: 16px;
  --r-lg: 24px;
  --r-pill: 999px;

  /* --- Material (transluzente Ebenen) --- */
  --mat: rgba(12, 15, 19, 0.62);
  --mat-blur: blur(22px) saturate(170%);
  --mat-edge: rgba(255, 255, 255, 0.12);

  --shadow-sm: 0 10px 30px -18px rgba(0, 0, 0, 0.9);
  --shadow: 0 30px 70px -34px rgba(0, 0, 0, 0.9);

  /* Fallback-Kurven fuer alles, was NICHT gestengetrieben ist. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.64, 0, 0.78, 0); /* Spiegel fuer den Rueckweg */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.62;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

/* Grundgroesse fuer Inline-Icons. Ein SVG ohne width und height dehnt sich
   sonst auf die volle Containerbreite. Genau daran ist die Pakete-Seite
   auseinandergelaufen: aus einer Fussnote wurde ein 947px hoher Block.
   Jede Klassenregel schlaegt diese Vorgabe, sie ist nur das Netz darunter. */
/* :where() haelt die Spezifitaet bei null. Ohne das schlaegt die Vorgabe
   wegen der beiden :not() jede Klassenregel, und gezielte Groessen wirken nicht. */
svg:where(:not([width]):not([height])) { width: 1.15em; height: 1.15em; flex: none; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
p { margin: 0; text-wrap: pretty; }
figure, blockquote { margin: 0; }

:where(a, button, input, textarea, select):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Sprunglink. Ohne ihn tabbt sich jeder, der keine Maus benutzt, auf jeder
   Seite zuerst durch den kompletten Kopf, bevor der Inhalt kommt.
   Er steht als erstes Element im Body und wird beim Fokus sichtbar.
   Nicht mit display:none oder visibility:hidden arbeiten, beides nimmt
   ihn auch aus dem Tabulatorlauf, dann ist er wirkungslos. */
.sprunglink {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 1000;
  padding: 12px 20px;
  border-radius: var(--r-pill);
  background: var(--accent-deep);
  color: var(--on-accent);
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.95rem;
  transform: translateY(calc(-100% - 16px));
  transition: transform 160ms var(--ease-out);
}
.sprunglink:focus { transform: translateY(0); }

/* Das Sprungziel traegt tabindex="-1", damit der Fokus mitwandert und
   nicht nur der Bildausschnitt springt. Der Umriss dort waere aber nur
   ein Rahmen um die halbe Seite. */
main:focus { outline: none; }

@media (prefers-reduced-motion: reduce) {
  .sprunglink { transition: none; }
}

/* ============================================================
   Typografie
   Tracking und Leading sind groessenabhaengig, nie ein Wert fuer alles:
   grosse Schrift zieht sich zusammen, kleine Schrift oeffnet sich.
   ============================================================ */
h1, h2, h3, h4 { font-family: var(--display); margin: 0; text-wrap: balance; }

.t-display {
  font-size: clamp(2.5rem, 6vw, 4.4rem);
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -0.035em;
}
.t-h2 {
  font-size: clamp(1.85rem, 3.6vw, 2.9rem);
  font-weight: 700;
  line-height: 1.09;
  letter-spacing: -0.026em;
}
.t-h3 {
  font-size: clamp(1.12rem, 1.5vw, 1.32rem);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.012em;
}
.t-lead {
  font-size: clamp(1.05rem, 1.4vw, 1.18rem);
  line-height: 1.58;
  color: var(--ink-2);
  letter-spacing: 0;
}
.t-body { color: var(--ink-2); }
.t-small { font-size: 0.9rem; line-height: 1.52; letter-spacing: 0.004em; color: var(--ink-3); }

.t-label {
  font-family: var(--body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin: 0 0 18px;
}

.num { font-variant-numeric: tabular-nums; }

/* ============================================================
   Layout-Helfer
   ============================================================ */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: clamp(76px, 10vw, 136px); position: relative; }
.section--tight { padding-block: clamp(52px, 7vw, 88px); }
.section--tint { background: var(--bg-1); }
/* Abschnittskopf: Ueberschrift und Beschreibung duerfen bis zur halben
   Inhaltsbreite laufen, solange nichts daneben steht. 46ch ergaben auf
   breiten Schirmen nur rund 35 Prozent, und das wirkt gequetscht.
   Wo der Kopf eine Spalte in einem Raster ist, hebt die Seite das auf. */
.head { max-width: 58ch; }
@media (min-width: 900px) { .head { max-width: 50%; } }
.head p { margin-top: 18px; }

/* ============================================================
   Buttons
   Rueckmeldung sitzt auf dem Druck, nicht auf dem Loslassen.
   ============================================================ */
.btn {
  --btn-scale: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.97rem;
  letter-spacing: -0.004em;
  white-space: nowrap;
  transform: scale(var(--btn-scale));
  transition: transform 120ms var(--ease-out), background-color 220ms var(--ease-out),
              border-color 220ms var(--ease-out), color 220ms var(--ease-out);
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:active { --btn-scale: 0.97; }

.btn--primary { background: var(--accent-deep); color: var(--on-accent); }
.btn--primary:hover { background: color-mix(in oklab, var(--accent-deep) 82%, #fff); }

.btn--ghost {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--line-strong);
  color: var(--ink);
}
.btn--ghost:hover { border-color: var(--accent-line); background: rgba(255, 255, 255, 0.07); }

/* Ein Knopf ueber die volle Breite hat vom Umbruchverbot oben nichts,
   es schadet nur: seine unteilbare Mindestbreite draengt sich durch jeden
   Vorfahren nach oben und macht auf schmalen Geraeten die ganze Seite
   breiter als das Fenster. Passiert bei „Meine Empfehlungen erhalten“
   auf sichtbarkeits-check.html. */
.btn--block { width: 100%; white-space: normal; }

/* Textlink mit Pfeil */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--accent);
}
.arrow-link svg { width: 16px; height: 16px; transition: transform 320ms var(--ease-out); }
.arrow-link:hover svg { transform: translateX(4px); }

/* ============================================================
   Einblenden beim Scrollen
   ============================================================ */
.js .reveal { opacity: 0; transform: translate3d(0, 18px, 0); }
.js .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
}

/* ============================================================
   Zugaenglichkeit, Grundlagen
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .arrow-link svg { transition: none; }
  .btn { transition: background-color 200ms linear, border-color 200ms linear, color 200ms linear; }
  .btn:active { transform: none; }
}
@media (prefers-contrast: more) {
  :root { --line: rgba(255, 255, 255, 0.26); --line-strong: rgba(255, 255, 255, 0.42); --ink-2: #d5dbe2; --ink-3: #aab3bd; }
}