/* offermann.ai — Onepager im SAP-Fiori-Stil (Theme "Horizon")
   Radien, Schatten und Grautoene sind die Original-Tokens aus
   @sap-theming/theming-base-content (sap_horizon), Namen als Kommentar.
   Die Blautoene weichen bewusst ab: sie sind aus der Chevron-Form des Heros
   gemessen (Mittelwert ueber 295'706 Pixel), damit Buttons und Flaechen
   denselben Ton tragen wie die Grafik. */

:root {
  --brand: #2537a1;          /* Mittelwert der Chevron-Form; Kontrast 9.8:1 auf Weiss */
  --highlight: #1c2a80;      /* dunklere Variante fuer Links und Hover */
  --text: #131e29;           /* sapTextColor */
  --label: #556b82;          /* sapContent_LabelColor */
  --bg: #070c22;             /* Nachtblau — Traeger des Nordlichts */
  --surface: #ffffff;        /* sapGroup_ContentBackground / sapTile_Background */
  --line: #d9d9d9;           /* sapGroup_ContentBorderColor */
  --button-border: #bcc3ca;  /* sapButton_BorderColor */
  --neutral: #788fa6;        /* sapNeutralColor */

  --r-element: .75rem;       /* sapElement_BorderCornerRadius */
  --r-button: .5rem;         /* sapButton_BorderCornerRadius */
  --r-tile: 1rem;            /* sapTile_BorderCornerRadius */

  --shadow-0: 0 0 .125rem 0 rgba(34, 53, 72, .2), 0 .125rem .25rem 0 rgba(34, 53, 72, .2);
  --shadow-1: 0 0 0 .0625rem rgba(34, 53, 72, .48), 0 .125rem .5rem 0 rgba(34, 53, 72, .3);

  /* sapFontFamily. Die Schrift "72" gehört SAP und wird bewusst nicht
     ausgeliefert — wer sie lokal hat, sieht sie; sonst greift SAPs Fallback. */
  --font: "72", "72full", Arial, Helvetica, sans-serif;

  /* Toene fuer alles, was direkt auf dem dunklen Grund liegt.
     Innerhalb der weissen Panels gelten weiterhin --text und --label. */
  --on-dark: #eef2ff;
  --on-dark-muted: #c6cdf0;
  --brand-on-dark: #8ea6ff;   /* Markenblau, aufgehellt fuer dunklen Grund */
  --brand-bright: #3b50cc;    /* Flaechenblau fuer Buttons auf dunklem Grund */

  --maxw: 1120px;
  --pad: clamp(1rem, 4vw, 2rem);
  color-scheme: dark;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Feines Raster ueber dem Nordlicht — gibt der Flaeche Struktur, ohne sich
   vorzudraengen. Die Farbflaechen selbst liegen in .aurora (siehe unten). */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(226, 232, 255, .07) 1px, transparent 1px);
  background-size: 26px 26px;
}

/* Fiori-Headerskala: 3 / 2 / 1.5 / 1.25 rem */
h1, h2, h3 { margin: 0; font-weight: 700; line-height: 1.2; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--highlight); }

:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.skip {
  position: absolute;
  left: -9999px;
  background: var(--text);
  color: #fff;
  padding: .75rem 1.25rem;
  z-index: 100;
}
.skip:focus { left: 0; }

/* ---------- Shellbar ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--surface);          /* sapShellColor */
  box-shadow: var(--shadow-0);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 3.5rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  color: inherit;
  margin-right: auto;
}

.brand__mark {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex: 0 0 2rem;
  background: var(--brand);
  color: #fff;
  border-radius: var(--r-button);
  font-size: 1rem;
  font-weight: 700;
}

.brand__name {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
}

.brand__role {
  display: block;
  font-size: .8125rem;
  color: var(--label);
  line-height: 1.25;
}

/* Navigation in der Anmutung der Fiori IconTabBar */
.nav { display: flex; align-items: stretch; gap: 1.5rem; align-self: stretch; }

.nav a {
  display: flex;
  align-items: center;
  color: var(--text);
  text-decoration: none;
  font-size: .9375rem;
  border-bottom: 3px solid transparent;
  transition: color .1s ease, border-color .1s ease;
}
.nav a:hover { color: var(--highlight); border-bottom-color: var(--brand); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .625rem 1.5rem;
  border-radius: var(--r-button);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: .9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .1s ease, border-color .1s ease;
}

/* sapButton_Emphasized_* */
.btn--primary {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.btn--primary:hover { background: var(--highlight); border-color: var(--highlight); }

/* sapButton_* (Default) */
.btn--ghost {
  background: var(--surface);
  border-color: var(--button-border);
  color: var(--highlight);
}
.btn--ghost:hover { background: #eaecf8; }

.btn--sm { padding: .5rem 1rem; font-size: .875rem; }

/* ---------- Sections ---------- */

.section { padding-block: clamp(2.5rem, 6vw, 4rem); }

/* Weisser Inhaltsblock auf grauem Grund — Fiori Object Page */
.panel {
  background: var(--surface);
  border-radius: var(--r-element);
  box-shadow: var(--shadow-0);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

.panel > h2 {
  font-size: clamp(1.5rem, 3.2vw, 2rem);   /* sapFontHeader2Size */
  margin-bottom: 1.25rem;
}

.label {
  margin: 0 0 .35rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--label);
}

.section-head { max-width: 52rem; margin-bottom: 1.75rem; }
.section-head h2 { font-size: clamp(1.5rem, 3.2vw, 2rem); }
.section-head p { margin-top: .75rem; color: var(--label); }

/* ---------- Hero ---------- */

/* Buehne nach dem Vorbild von sap.com: Text links auf hellem Verlauf,
   rechts eine grosse geometrische Form, die ueber den Rand hinauslaeuft. */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(60rem 40rem at 88% 50%, rgba(109, 141, 255, .18), transparent 60%),
    linear-gradient(115deg, #f3f1ff 0%, #f8f9ff 46%, #ffffff 100%);
  border-bottom: 1px solid var(--line);
}

.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  min-height: clamp(26rem, 44vw, 33rem);
  padding-block: clamp(3rem, 7vw, 5rem);
}

.hero__text { max-width: 34rem; }

.hero h1 {
  font-size: clamp(2rem, 5.2vw, 3.5rem);
  margin-bottom: 1rem;
}

.hero__lead {
  font-size: clamp(1.03rem, 1.9vw, 1.19rem);
  color: var(--label);
  margin-bottom: 1.75rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.hero__shape {
  position: absolute;
  top: 50%;
  right: -6%;
  width: clamp(26rem, 44vw, 46rem);
  height: auto;
  transform: translateY(-50%);
  pointer-events: none;
  user-select: none;
}

@media (max-width: 900px) {
  .hero__grid {
    grid-template-columns: 1fr;
    min-height: 0;
    padding-bottom: clamp(1.5rem, 5vw, 2.5rem);
  }
  /* Auf schmalen Viewports nimmt die volle Form zu viel Hoehe ein —
     deshalb hier als angeschnittenes Band mit fester Hoehe. */
  .hero__shape {
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    display: block;
    width: 100%;
    height: clamp(120px, 30vw, 180px);
    object-fit: cover;
    object-position: left center;
  }
}

/* ---------- Kennzahlen ---------- */

.stats {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(1.75rem, 4vw, 2.5rem);
}

.stats__grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.stat__value {
  display: block;
  font-size: clamp(2rem, 4.5vw, 2.75rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}

.stat__label {
  display: block;
  margin-top: .25rem;
  font-size: .9375rem;
  color: var(--label);
}

/* ---------- Bildband ---------- */

.band { padding-block: clamp(1rem, 3vw, 2rem); }

.band__image {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- Statement ---------- */

.statement {
  max-width: 46rem;
  font-size: clamp(1.25rem, 2.8vw, 1.5rem);   /* sapFontHeader3Size */
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 1.5rem;
  padding-left: 1rem;
  border-left: 4px solid var(--brand);
}

.prose { max-width: 46rem; color: var(--label); }
.prose strong { color: var(--text); }

.error-action { margin-top: 1.5rem; }

/* ---------- Split: Text neben Schaubild ---------- */

.split {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
}

@media (max-width: 880px) {
  .split { grid-template-columns: 1fr; }
}

.split__figure { margin: 0; }

.bridge { width: 100%; height: auto; }

/* Die gestrichelten Verbindungen laufen, sobald das Schaubild sichtbar wird */
.bridge__line { stroke-dashoffset: 0; }

.reveal.is-visible .bridge__line { animation: dash 1.4s linear infinite; }

@keyframes dash { to { stroke-dashoffset: -24; } }

.reveal.is-visible .bridge__hub { animation: hub 2.8s ease-in-out infinite; }

@keyframes hub {
  0%, 100% { opacity: 1; }
  50%      { opacity: .82; }
}

/* ---------- Cards ---------- */

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.card {
  background: var(--surface);          /* sapTile_Background */
  border-radius: var(--r-tile);        /* sapTile_BorderCornerRadius */
  box-shadow: var(--shadow-0);
  padding: 1.5rem;
  transition: transform .18s ease, box-shadow .18s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 .125rem 0 rgba(34, 53, 72, .2), 0 .75rem 1.5rem 0 rgba(34, 53, 72, .18);
}

.card__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 1rem;
  border-radius: var(--r-button);
  background: #eaecf8;
  color: var(--brand);
}

.card__icon svg { width: 1.5rem; height: 1.5rem; }

.card h3 {
  font-size: 1.25rem;                  /* sapFontHeader4Size */
  margin-bottom: .5rem;
}

.card p { color: var(--label); margin: 0; }

/* ---------- Arbeitsweise als Zeitstrahl ---------- */

.timeline {
  list-style: none;
  margin: 0;
  padding: 0 0 0 2.5rem;
  position: relative;
  counter-reset: step;
}

/* durchgehende Linie hinter den Punkten */
.timeline::before {
  content: "";
  position: absolute;
  left: .875rem;
  top: .5rem;
  bottom: .5rem;
  width: 2px;
  background: linear-gradient(180deg, var(--brand), rgba(37, 55, 161, .15));
}

.timeline__item {
  counter-increment: step;
  position: relative;
  background: var(--surface);
  border-radius: var(--r-element);
  box-shadow: var(--shadow-0);
  padding: 1.5rem;
  margin-bottom: 1rem;
}

.timeline__item::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: -2.5rem;
  top: 1.5rem;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: .6875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 4px var(--bg);
}

.timeline__item h3 {
  font-size: 1.25rem;
  margin-bottom: .5rem;
}

.timeline__item p { color: var(--label); margin: 0; }

@media (max-width: 600px) {
  .timeline { padding-left: 2rem; }
  .timeline::before { left: .6875rem; }
  .timeline__item::before { left: -2rem; }
}

/* ---------- Einblenden beim Scrollen ---------- */

/* Versteckt wird nur, wenn JavaScript laeuft — sonst waere die Seite ohne
   JS leer. Die Klasse .js setzt ein Inline-Schnipsel im <head>. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s ease, transform .55s ease;
}

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

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .card:hover { transform: none; }
  .reveal.is-visible .bridge__line,
  .reveal.is-visible .bridge__hub { animation: none; }
}

/* ---------- Profil ---------- */

.profile {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: start;
}

@media (max-width: 820px) {
  .profile { grid-template-columns: 1fr; }
}

.facts h3 {
  font-size: .875rem;                  /* sapFontHeader6Size */
  color: var(--label);
  margin-bottom: .75rem;
}

/* Anmutung der Fiori-Tokens/Chips */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.tags li {
  border: 1px solid var(--brand);
  border-radius: var(--r-button);
  padding: .2rem .7rem;
  font-size: .875rem;
  color: var(--highlight);
  background: #eaecf8;
}

/* ---------- Kontakt ---------- */

.contact h2 {
  font-size: clamp(1.5rem, 3.2vw, 2rem);
  margin-bottom: .75rem;
  max-width: 40rem;
}

.contact__lead {
  color: var(--label);
  max-width: 40rem;
  margin-bottom: 1.5rem;
}

/* ---------- Formular (sapField_*) ---------- */

.form { max-width: 44rem; }

.form__row {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.field { margin-bottom: 1rem; }

.field__label {
  display: block;
  margin-bottom: .25rem;
  font-size: .875rem;
  color: var(--label);
}

.field__input {
  display: block;
  width: 100%;
  padding: .5rem .75rem;
  font-family: inherit;
  font-size: 1rem;
  color: var(--text);                          /* sapField_TextColor */
  background: #fff;                            /* sapField_Background */
  border: .0625rem solid #556b81;              /* sapField_BorderColor */
  border-radius: .25rem;                       /* sapField_BorderCornerRadius */
}

.field__input:hover { border-color: var(--highlight); }   /* sapField_Hover_BorderColor */

.field__input:focus {
  outline: none;
  border-color: #0032a5;                       /* sapField_Focus_BorderColor */
  box-shadow: 0 0 0 .0625rem #0032a5;
}

textarea.field__input { resize: vertical; min-height: 8rem; }

/* Honeypot — für Menschen unsichtbar, für Bots erreichbar */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.25rem;
  margin-top: .5rem;
}

.form__hint {
  margin: 0;
  font-size: .875rem;
  color: var(--label);
}

.form-note {
  margin-top: 1rem;
  padding: .75rem 1rem;
  border-radius: var(--r-button);
  border: .0625rem solid transparent;
  font-size: .9375rem;
}

.form-note--success {
  background: #f5fae5;                         /* sapSuccessBackground */
  border-color: #30914c;                       /* sapSuccessBorderColor */
  color: #256f3a;                              /* sapSuccessColor */
}

.form-note--error {
  background: #ffeaf4;                         /* sapErrorBackground */
  border-color: #e90b0b;                       /* sapErrorBorderColor */
  color: #aa0808;                              /* sapErrorColor */
}

/* ---------- Rechtstexte ---------- */

.legal { max-width: 52rem; }

.legal h1 {
  font-size: clamp(1.5rem, 3.2vw, 2rem);       /* sapFontHeader2Size */
  margin-bottom: 1.5rem;
}

.legal h2 {
  font-size: 1.25rem;                          /* sapFontHeader4Size */
  margin: 2rem 0 .5rem;
}

.legal p,
.legal li,
.legal address { color: var(--label); }

.legal address {
  font-style: normal;
  margin-bottom: 1rem;
}

.legal ul {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
}

.legal li { margin-bottom: .35rem; }

.legal strong { color: var(--text); }

.legal__meta {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: .875rem;
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--line);
  color: var(--label);
  padding-block: 1.5rem;
  font-size: .875rem;
}

.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  justify-content: space-between;
  align-items: center;
}

.site-footer__tagline { color: var(--text); font-weight: 600; }

/* ---------- Schmale Viewports ---------- */

@media (max-width: 860px) {
  /* dreizeiliger Header wäre als Sticky zu hoch */
  .site-header { position: static; }
  .site-header .wrap {
    flex-wrap: wrap;
    padding-block: .6rem;
    row-gap: .5rem;
    column-gap: 1rem;
  }
  .nav {
    order: 3;
    width: 100%;
    gap: 1.25rem;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a {
    white-space: nowrap;
    font-size: .875rem;
    padding-bottom: .25rem;
  }
}

/* =====================================================================
   Bewegung — scrollgekoppelte Ebenen
   =====================================================================
   Vorbild ist die Buehnenfuehrung von apple.com: Ebenen, die sich beim
   Scrollen unterschiedlich schnell bewegen, statt harter Uebergaenge.
   Den Fortschritt liefert assets/app.js als --p (0..1) pro Abschnitt und
   --scroll (0..1) fuer das ganze Dokument. Hier steht nur, was daraus
   optisch wird — bewegt werden ausschliesslich transform und opacity,
   damit der Browser die Arbeit dem Compositor ueberlassen kann.
   Ohne JavaScript bleiben alle Werte auf 0 und die Seite steht still. */

@property --p {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

@property --scroll {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

/* Rueckfall fuer Browser ohne @property: sonst waere --p in calc() ungueltig */
.hero, .band, .timeline, .statement { --p: 0; }
:root { --scroll: 0; }

/* Kurve fuer alle Bewegungen dieser Schicht — weich auslaufend, kein Ueberschwingen */
:root { --ease-out: cubic-bezier(.22, .61, .36, 1); }

/* ---------- Lesefortschritt ---------- */

.progress {
  position: fixed;
  inset: 0 0 auto;
  height: 3px;
  z-index: 60;
  pointer-events: none;
}

.progress__bar {
  display: block;
  height: 100%;
  transform: scaleX(var(--scroll));
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--brand), #4f7ef0 60%, #8fb4ff);
}

/* ---------- Shellbar: Glas, sobald die Seite laeuft ---------- */

.site-header {
  transition: background-color .35s var(--ease-out), box-shadow .35s var(--ease-out);
}

body.is-scrolled .site-header {
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 .0625rem 0 0 rgba(34, 53, 72, .08), 0 .5rem 1.5rem -.5rem rgba(34, 53, 72, .22);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.is-scrolled .site-header {
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
  }
}

/* ---------- Hero: drei Ebenen, drei Geschwindigkeiten ---------- */

/* Nur auf breiten Viewports. Schmale Geraete zeigen die Form als Band mit
   fester Hoehe (siehe oben) — dort wuerde ein Versatz nur stoeren. */
@media (min-width: 901px) {
  .hero__shape {
    /* haelt gegen: die Form wandert langsamer nach oben als der Text und
       waechst dabei minimal — dadurch entsteht die Tiefe */
    transform:
      translate3d(calc(var(--mx, 0) * 16px),
                  calc(-50% + var(--p) * 110px + var(--my, 0) * 12px),
                  0)
      scale(calc(1 + var(--p) * .07));
    transition: transform .25s var(--ease-out);
    will-change: transform;
  }

  .hero__text {
    transform: translate3d(0, calc(var(--p) * -58px), 0);
    /* der Versatz beginnt sofort, das Ausblenden erst im letzten Drittel —
       sonst waere die Schrift schon blass, waehrend man noch liest */
    opacity: calc(1 - max(0, var(--p) - .38) * 1.75);
    will-change: transform, opacity;
  }
}

/* Der Farbschleier des Heros zieht leicht mit — sehr langsam, kaum bewusst
   wahrnehmbar, aber er nimmt der Flaeche das Starre. */
.hero::before {
  content: "";
  position: absolute;
  inset: -20% -10%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(38rem 26rem at 72% 42%, rgba(109, 141, 255, .22), transparent 62%);
  transform: translate3d(calc(var(--mx, 0) * -22px), calc(var(--p) * 60px), 0);
  transition: transform .45s var(--ease-out);
}

/* ---------- Kennzahlen: Ziffern kommen von unten ---------- */

.js .stat { overflow: hidden; }

.js .stat .stat__value {
  transform: translate3d(0, 60%, 0);
  opacity: 0;
  transition: transform .7s var(--ease-out), opacity .5s ease;
  transition-delay: var(--delay, 0ms);
}

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

/* ---------- Statement: laeuft Wort fuer Wort auf ---------- */

/* Der Satz steht beim Durchscrollen nach und nach im vollen Ton da. Ohne
   JavaScript wird gar nicht erst getrennt und der Satz ist sofort lesbar. */
.statement--split { --words: 12; }

.statement--split .word {
  display: inline-block;
  opacity: clamp(.22, calc((var(--p) * (var(--words) + 8) - var(--i)) * .45), 1);
  transition: opacity .18s linear;
}

/* ---------- Bildband: gegenlaeufige Fahrt im Rahmen ---------- */

.band__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 2170 / 725;
  border-radius: var(--r-element);
  box-shadow: var(--shadow-0);
}

.js .band__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 14 % Ueberhang (also 7 % je Kante), ausgefahren werden hoechstens 5 % —
     es bleibt immer Bild im Rahmen, nie ein weisser Streifen */
  transform: translate3d(0, calc((var(--p) - .5) * -10%), 0) scale(1.14);
  will-change: transform;
}

/* ---------- Zeitstrahl: die Linie faellt mit ---------- */

.timeline::after {
  content: "";
  position: absolute;
  left: .875rem;
  top: .5rem;
  width: 2px;
  height: calc(100% - 1rem);
  background: var(--brand);
  transform: scaleY(var(--p));
  transform-origin: 50% 0;
}

@media (max-width: 600px) {
  .timeline::after { left: .6875rem; }
}

/* ---------- Karten: Lift und Lichtschein ---------- */

.card {
  position: relative;
  overflow: hidden;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}

/* folgt dem Zeiger; ohne Zeiger bleibt die Flaeche unveraendert */
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
  background: radial-gradient(16rem 16rem at var(--cx, 50%) var(--cy, 0%),
                              rgba(37, 55, 161, .10), transparent 70%);
}

@media (hover: hover) {
  .card:hover { transform: translateY(-6px); }
  .card:hover::after { opacity: 1; }
  .card__icon { transition: transform .3s var(--ease-out), background-color .3s ease; }
  .card:hover .card__icon { transform: scale(1.08) rotate(-3deg); background: #dfe3f7; }
}

/* ---------- Buttons und Navigation ---------- */

.btn {
  transition: background-color .15s ease, border-color .15s ease,
              transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}

@media (hover: hover) {
  .btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 .5rem 1rem -.25rem rgba(37, 55, 161, .45);
  }
  .btn--ghost:hover { transform: translateY(-2px); }
}

.btn:active { transform: translateY(0); }

/* Unterstrich waechst aus der Mitte statt hart zu erscheinen */
.nav a {
  position: relative;
  border-bottom-color: transparent !important;
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: 50% 50%;
  transition: transform .25s var(--ease-out);
}

.nav a:hover::after { transform: scaleX(1); }

/* ---------- Einblenden: etwas weiter, etwas weicher ---------- */

.js .reveal {
  transform: translate3d(0, 24px, 0) scale(.99);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  transition-delay: var(--delay, 0ms);
}

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

/* ---------- Wer Bewegung reduziert, sieht die ruhige Fassung ---------- */

@media (prefers-reduced-motion: reduce) {
  .progress { display: none; }

  .hero::before,
  .hero__shape,
  .hero__text,
  .band__image,
  .card,
  .btn,
  .js .stat .stat__value {
    transform: none !important;
    opacity: 1 !important;
  }

  /* die Chevron-Form braucht ihre Zentrierung weiterhin */
  @media (min-width: 901px) {
    .hero__shape { transform: translateY(-50%) !important; }
  }

  .band__image { transform: scale(1) !important; }
  .timeline::after { transform: scaleY(1) !important; }
  .statement--split .word { opacity: 1 !important; }
  .nav a::after { display: none; }
  .nav a { border-bottom-color: transparent; }
  .nav a:hover { border-bottom-color: var(--brand) !important; }
}

/* =====================================================================
   Nordlicht — dynamischer Hintergrund
   =====================================================================
   Gebaut ausschliesslich aus Farbverlaeufen. Kein filter: blur(), kein
   mix-blend-mode, keine mask-image — gemessen in Chrome halbierte jede
   Kombination dieser drei die Bildrate auf 30 fps, und zwar auch dann,
   wenn nur zwei davon aktiv waren. Mit reinen Verlaeufen laeuft die Seite
   mit 60 fps, also so schnell wie ganz ohne Hintergrund.

   Die Weichheit, die sonst das Blur liefert, steckt hier in den Farbstops:
   breite Baender mit langen Alpha-Rampen sehen aus wie weichgezeichnet,
   kosten den Compositor aber nichts. Bewegt wird nur transform und opacity.
   Die Schleier liegen fest hinter dem Inhalt und scrollen nicht mit. */

.aurora {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
  background:
    radial-gradient(120% 88% at 50% -12%, #0d2a5e 0%, #071634 40%, #050b1c 76%, #03060f 100%);
}

/* Beruhigung: nimmt den Schleiern oben und unten die Kante und haelt den
   Grund dort ruhig, wo Text steht. Ersetzt zugleich die fruehere Maske. */
.aurora::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 50% at 42% 40%, rgba(4, 6, 15, .34), transparent 74%),
    linear-gradient(180deg, transparent 0%, transparent 58%, rgba(4, 6, 15, .5) 100%);
}

.aurora__veil {
  position: absolute;
  left: -60%;
  width: 220%;
  will-change: transform, opacity;
  transform-origin: 50% 40%;
}

/* Hellgruen — der kraeftigste Schleier, die Leitfarbe echter Polarlichter.
   Erste Zeile ist die Farbwolke, zweite die senkrechten Vorhaenge; die langen
   Rampen ersetzen den Weichzeichner. Gruen traegt mit 0.72 den groessten
   Anteil an der wahrgenommenen Helligkeit — die Alphawerte liegen deshalb
   niedriger als beim frueheren Lila, sonst kippen die Textkontraste. */
.aurora__veil--a {
  top: -60%;
  height: 170%;
  background:
    radial-gradient(52% 38% at 34% 34%, rgba(108, 250, 178, .8) 0%, rgba(42, 205, 140, .36) 46%, transparent 74%),
    repeating-linear-gradient(94deg,
      rgba(140, 250, 196, 0)    0px,
      rgba(140, 250, 196, 0)    26px,
      rgba(158, 252, 205, .58)  62px,
      rgba(140, 250, 196, 0)    104px,
      rgba(140, 250, 196, 0)    150px);
  animation: aurora-a 26s ease-in-out infinite alternate;
}

/* Weiss — die helle Kante, gegenlaeufig und etwas langsamer. Der Saum zieht
   ins Aquagruene und vermittelt so zwischen dem gruenen und dem blauen Schleier. */
.aurora__veil--b {
  top: -66%;
  height: 168%;
  background:
    radial-gradient(44% 30% at 64% 26%, rgba(255, 255, 255, .58) 0%, rgba(206, 250, 240, .26) 38%, transparent 70%),
    repeating-linear-gradient(102deg,
      rgba(228, 253, 246, 0)    0px,
      rgba(228, 253, 246, 0)    34px,
      rgba(255, 255, 255, .46)  80px,
      rgba(164, 244, 220, .16)  128px,
      rgba(228, 253, 246, 0)    196px);
  animation: aurora-b 34s ease-in-out infinite alternate;
}

/* Blau — breite, ruhige Grundschwingung in der unteren Bildhaelfte */
.aurora__veil--c {
  top: -10%;
  height: 175%;
  background:
    radial-gradient(56% 40% at 56% 58%, rgba(80, 172, 255, .58) 0%, rgba(40, 120, 232, .22) 52%, transparent 76%),
    repeating-linear-gradient(88deg,
      rgba(110, 186, 255, 0)    0px,
      rgba(110, 186, 255, 0)    52px,
      rgba(126, 198, 255, .44)  120px,
      rgba(110, 186, 255, 0)    196px,
      rgba(110, 186, 255, 0)    290px);
  animation: aurora-c 46s ease-in-out infinite alternate;
}

@keyframes aurora-a {
  0%   { transform: translate3d(-8%, -4%, 0) rotate(-9deg) scale(1.05); opacity: .9; }
  50%  { transform: translate3d(6%, 5%, 0)   rotate(-3deg) scale(1.2);  opacity: 1; }
  100% { transform: translate3d(14%, -2%, 0) rotate(4deg)  scale(1.08); opacity: .92; }
}

@keyframes aurora-b {
  0%   { transform: translate3d(12%, 8%, 0)  rotate(7deg)  scale(1.12); opacity: .78; }
  50%  { transform: translate3d(-4%, -3%, 0) rotate(1deg)  scale(1.28); opacity: 1; }
  100% { transform: translate3d(-14%, 6%, 0) rotate(-6deg) scale(1.15); opacity: .82; }
}

@keyframes aurora-c {
  0%   { transform: translate3d(-6%, 5%, 0) rotate(5deg)  scale(1.18); opacity: .8; }
  100% { transform: translate3d(8%, -6%, 0) rotate(-7deg) scale(1.32); opacity: 1; }
}

/* Schmale Geraete: ein Schleier weniger — dort zaehlt jede gesparte Flaeche */
@media (max-width: 700px) {
  .aurora__veil--c { display: none; }
}

/* =====================================================================
   Was direkt auf dem Nachtgrund liegt
   =====================================================================
   Die weissen Panels, Karten und Formulare bleiben unveraendert — dort
   gelten weiterhin --text und --label. Umgestellt wird nur, was ohne
   eigene Flaeche auf der Aurora steht. */

/* ---------- Shellbar ---------- */

.site-header {
  background: rgba(9, 14, 40, .68);
  box-shadow: inset 0 -1px 0 0 rgba(174, 190, 255, .14);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header {
    -webkit-backdrop-filter: saturate(150%) blur(10px);
    backdrop-filter: saturate(150%) blur(10px);
  }
}

body.is-scrolled .site-header {
  background: rgba(8, 13, 36, .82);
  box-shadow:
    inset 0 -1px 0 0 rgba(174, 190, 255, .18),
    0 .5rem 1.5rem -.5rem rgba(0, 0, 0, .6);
}

.brand__name { color: var(--on-dark); }
.brand__role { color: var(--on-dark-muted); }

.brand__mark {
  background: linear-gradient(140deg, #4a62e8, #2a389f);
  box-shadow: 0 0 1.25rem -.25rem rgba(141, 166, 255, .8);
}

.nav a { color: var(--on-dark-muted); }
.nav a:hover { color: var(--on-dark); }
.nav a::after { background: var(--brand-on-dark); }

/* ---------- Hero ---------- */

/* Der eigene Verlauf entfaellt — hier scheint das Nordlicht durch. */
.hero {
  background: none;
  border-bottom: 1px solid rgba(174, 190, 255, .16);
}

.hero::before {
  background:
    radial-gradient(50% 82% at 26% 52%, rgba(4, 6, 15, .8) 0%, rgba(4, 6, 15, .46) 54%, transparent 78%),
    radial-gradient(38rem 26rem at 78% 40%, rgba(141, 166, 255, .16), transparent 62%);
}

.hero h1 {
  color: #ffffff;
  text-shadow: 0 .125rem .75rem rgba(4, 6, 15, .75), 0 .0625rem 3rem rgba(4, 6, 15, .5);
}

.hero__lead,
.hero .label { text-shadow: 0 .0625rem .5rem rgba(4, 6, 15, .7); }

.hero .label { color: #e4eaff; }
.hero__lead { color: var(--on-dark-muted); }

/* Auf dem dunklen Grund braucht der Hauptknopf mehr Leuchtkraft als das
   gedeckte Markenblau — in den weissen Panels bleibt es unveraendert. */
.hero .btn--primary,
.site-header .btn--primary {
  background: var(--brand-bright);
  border-color: #5468e0;
  box-shadow: 0 .5rem 1.5rem -.5rem rgba(59, 80, 204, .9);
}

.hero .btn--primary:hover,
.site-header .btn--primary:hover {
  background: #4a5fe0;
  border-color: #6a7cf0;
}

/* Glasknopf statt weisser Flaeche — sonst zoege er mehr Blick als der CTA */
.hero .btn--ghost {
  background: rgba(238, 242, 255, .08);
  border-color: rgba(174, 190, 255, .45);
  color: var(--on-dark);
}

.hero .btn--ghost:hover {
  background: rgba(238, 242, 255, .16);
  border-color: rgba(174, 190, 255, .7);
}

/* ---------- Kennzahlen ---------- */

.stats {
  background: rgba(9, 14, 40, .55);
  border-top: 1px solid rgba(174, 190, 255, .12);
  border-bottom: 1px solid rgba(174, 190, 255, .12);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .stats {
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
}

.stat__value { color: var(--brand-on-dark); }
.stat__label { color: var(--on-dark-muted); }

/* ---------- Abschnittskoepfe ---------- */

.section-head h2 { color: var(--on-dark); }
.section-head .label { color: var(--brand-on-dark); }
.section-head p { color: var(--on-dark-muted); }

/* ---------- Zeitstrahl ---------- */

.timeline::before {
  background: linear-gradient(180deg, rgba(141, 166, 255, .55), rgba(141, 166, 255, .12));
}

.timeline::after { background: var(--brand-on-dark); }

.timeline__item::before {
  background: var(--brand-bright);
  box-shadow: 0 0 0 4px rgba(7, 12, 34, .95), 0 0 1rem -.125rem rgba(141, 166, 255, .7);
}

/* ---------- Bildband ---------- */

.band__frame { box-shadow: 0 1.5rem 3rem -1rem rgba(0, 0, 0, .7); }

/* ---------- Panels heben sich vom Nachtgrund ab ---------- */

.panel,
.card,
.timeline__item {
  box-shadow: 0 .75rem 2rem -.75rem rgba(0, 0, 0, .55);
}

/* ---------- Footer ---------- */

.site-footer {
  background: rgba(8, 13, 36, .6);
  border-top: 1px solid rgba(174, 190, 255, .14);
  color: var(--on-dark-muted);
}

.site-footer__tagline { color: var(--on-dark); }
.site-footer a { color: var(--brand-on-dark); }

/* ---------- Kleinteile ---------- */

.skip { background: var(--brand-bright); }

:focus-visible {
  outline: 2px solid var(--on-dark);
  outline-offset: 2px;
}

/* innerhalb der weissen Flaechen wieder der dunkle Fokusring */
.panel :focus-visible,
.card :focus-visible { outline-color: var(--text); }

/* Eingabefelder stehen in weissen Panels und bleiben hell — ohne diese
   Zeile wuerden Autofill und Platzhalter dem dunklen Schema folgen. */
.field__input { color-scheme: light; }

/* =====================================================================
   Wer Bewegung reduziert, bekommt dasselbe Bild — nur ohne Wanderung
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
  .aurora__veil {
    animation: none !important;
    opacity: .85;
  }
  .aurora__veil--a { transform: translate3d(2%, 0, 0) rotate(-4deg) scale(1.14); }
  .aurora__veil--b { transform: translate3d(2%, 1%, 0) rotate(3deg)  scale(1.2); }
  .aurora__veil--c { transform: translate3d(0, 0, 0)   rotate(-2deg) scale(1.26); }
}

/* ---------- Sprachumschalter DE/EN ---------- */

/* Segmentierter Knopf in der Shellbar; die aktive Sprache ist kein Link. */
.lang {
  display: inline-flex;
  flex: 0 0 auto;
  padding: .1875rem;
  border: 1px solid rgba(174, 190, 255, .3);
  border-radius: var(--r-button);
  background: rgba(238, 242, 255, .06);
}

.lang__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  padding: .25rem .5rem;
  border-radius: calc(var(--r-button) - .1875rem);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.2;
  color: var(--on-dark-muted);
  text-decoration: none;
  transition: background-color .1s ease, color .1s ease;
}

a.lang__item:hover { color: var(--on-dark); background: rgba(238, 242, 255, .1); }
a.lang__item:focus-visible { outline: 2px solid var(--brand-on-dark); outline-offset: 1px; }

.lang__item[aria-current] {
  background: var(--brand-bright);
  color: #fff;
}

/* ---------- Hervorgehobene Leistung (KI) ----------
   Laeuft ueber die volle Rasterbreite und steht vor den sechs uebrigen
   Karten. Der Verlauf nimmt das Gruen-Blau des Nordlichts auf, bleibt aber
   so hell, dass --text und --label ihren Kontrast behalten. */

.card--feature {
  grid-column: 1 / -1;
  background:
    linear-gradient(120deg, #ffffff 0%, #ffffff 48%, #eefaf5 76%, #eaf3ff 100%);
  border: 1px solid #cfe6de;
}

.card--feature .card__icon {
  background: linear-gradient(140deg, #dff7ec, #dde9ff);
  color: #1c6b52;
}

.card--feature p { max-width: 62rem; }

/* Die Ueberschrift mit KI ist laenger als die fruehere; bei 34rem Breite
   stand "mit" allein in einer Zeile und das Startbild wurde fuenfzeilig.
   Der Block bekommt mehr Breite, der Einleitungstext behaelt seine
   Lesezeilenlaenge, und text-wrap gleicht die Zeilen aus. */
.hero__text { max-width: 39rem; }
.hero__lead { max-width: 34rem; }
.hero h1 { text-wrap: balance; }

/* Auszeichnungszeile im Startbild als Plakette: mit "KI-gestuetzt" ist sie
   laenger und reichte in ein helles Band des Nordlichts (gemessen 3.1:1).
   Der eigene dunkle Grund haelt den Kontrast unabhaengig von der Animation. */
.hero .label {
  display: inline-block;
  padding: .25rem .75rem;
  border-radius: 999px;
  background: rgba(4, 6, 15, .55);
  box-shadow: inset 0 0 0 1px rgba(174, 190, 255, .22);
  margin-bottom: .9rem;
}