@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('/assets/schibsted-grotesk.woff2') format('woff2');
  font-weight: 400 900;
  font-display: swap;
}

:root {
  --nacht: #12304f;
  --nacht-tief: #0b2036;
  --punkt: #8fb6dd;
  --weiss: #ffffff;
  --gedaempft: #c6d6e7;
  --blau: #2c5c89;
  --hauch: #eef3f8;
  --rand: clamp(1.25rem, 3.4vw, 3.5rem);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 3.5rem; }
body {
  margin: 0;
  background: var(--nacht);
  color: var(--weiss);
  font-family: 'Schibsted Grotesk', system-ui, sans-serif;
  font-size: 1.125rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 0.06em; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; border-radius: 2px; }

.sprung {
  position: absolute;
  left: var(--rand);
  top: -4rem;
  padding: 0.5rem 1rem;
  background: var(--weiss);
  color: var(--nacht);
  z-index: 5;
}
.sprung:focus { top: 1rem; }

/* Hero: der i-Punkt der Wortmarke. Der Kopf nimmt, was er braucht, die Wortmarke den Rest der Höhe. */
.hero {
  position: relative;
  height: max(100svh, 32rem);
  padding: calc(var(--rand) + 3.5rem) var(--rand) var(--rand);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(1rem, 3svh, 2rem);
  overflow: hidden;
}
.hero-kopf { min-width: 0; }
@media (min-aspect-ratio: 3/2) and (min-width: 62rem) {
  .hero-kopf {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 6rem);
    align-items: end;
  }
  .hero-kopf .hero-text { margin: 0 0 0.35em; }
}
.hero h1 {
  margin: 0;
  max-width: 19ch;
  font-size: clamp(2.1rem, min(5.6vw, 9.4svh), 7rem);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.028em;
  text-wrap: balance;
}
.am-stueck { white-space: nowrap; }
.hero-text {
  text-wrap: pretty;
  margin: clamp(1rem, 2.4svh, 1.75rem) 0 0;
  max-width: 44ch;
  color: var(--gedaempft);
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
}
.hero-text a { color: var(--weiss); white-space: nowrap; }
.wortmarke { display: block; width: 100%; height: 100%; min-height: 0; align-self: end; }
.wortmarke path { fill: var(--weiss); }
.wortmarke circle { fill: var(--punkt); }

.flut { display: none; }

.bewegt .buehne { height: 240svh; }
.bewegt .hero { position: sticky; top: 0; }
.bewegt .wortmarke circle { visibility: hidden; }
.bewegt .flut {
  display: block;
  position: absolute;
  inset: 0;
  background: var(--punkt);
  clip-path: circle(var(--r, 0px) at var(--x, 50%) var(--y, 50%));
  animation: punkt-faellt 1.15s 0.25s both;
  pointer-events: none;
}
/* Der Punkt fällt auf das i und federt zweimal aus. */
@keyframes punkt-faellt {
  0% { transform: translateY(-110svh); animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.4); }
  58% { transform: translateY(0); animation-timing-function: cubic-bezier(0.15, 0.6, 0.4, 1); }
  74% { transform: translateY(-5svh); animation-timing-function: cubic-bezier(0.6, 0, 0.85, 0.4); }
  88% { transform: translateY(0); animation-timing-function: cubic-bezier(0.15, 0.6, 0.4, 1); }
  94% { transform: translateY(-1.2svh); animation-timing-function: cubic-bezier(0.6, 0, 0.85, 0.4); }
  100% { transform: translateY(0); }
}

/* Feste Leiste mit Sprungmarken */
.leiste {
  position: fixed;
  inset: 0 0 auto;
  z-index: 4;
  height: 3.5rem;
  padding: 0 var(--rand);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  background: var(--nacht);
  font-size: 1rem;
}
.leiste ul { display: flex; gap: clamp(1rem, 2.4vw, 2.25rem); list-style: none; margin: 0; padding: 0; }
.leiste li a { display: inline-block; padding: 0.4rem 0; text-decoration: none; white-space: nowrap; }
.leiste li a:hover { text-decoration: underline; }
.leiste-logo { flex: none; display: block; transition: opacity 0.2s; }
.leiste-logo img { display: block; width: 7.75rem; height: auto; }
.bewegt .leiste-logo { opacity: 0; visibility: hidden; }
.bewegt.nach-hero .leiste-logo { opacity: 1; visibility: visible; }

/* Bänder */
.band { padding: clamp(3.5rem, 8vw, 7.5rem) var(--rand); }
.band-punkt { background: var(--punkt); color: var(--nacht-tief); }
.band-weiss { background: var(--weiss); color: var(--nacht-tief); }
.band h2 {
  margin: 0;
  max-width: 22ch;
  font-size: clamp(2rem, 4.4vw, 4.25rem);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.026em;
  text-wrap: balance;
}
.zweispaltig {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.5rem clamp(2rem, 6vw, 6rem);
  align-items: start;
}

/* Was wir tun: sechs Themen */
.themen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2.25rem, 4vw, 3.75rem) clamp(1.5rem, 3vw, 3rem);
  margin-top: clamp(2.5rem, 6vw, 5rem);
}
.thema { border-top: 2px solid var(--nacht-tief); padding-top: 1rem; }
.thema h3 { margin: 0 0 0.6rem; font-size: clamp(1.35rem, 2vw, 1.75rem); font-weight: 600; line-height: 1.15; letter-spacing: -0.015em; hyphens: manual; }
.thema p { margin: 0; max-width: 42ch; }

/* Leitsatz */
.leitsatz { padding: clamp(5rem, 13vw, 12rem) var(--rand); }
.leitsatz p {
  margin: 0;
  font-size: clamp(2.6rem, 8.6vw, 9rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.038em;
  text-wrap: balance;
}
.satzpunkt {
  display: inline-block;
  width: 0.2em;
  height: 0.2em;
  margin-left: 0.07em;
  border-radius: 50%;
  background: var(--punkt);
}

/* Wie wir arbeiten */
.prinzipien { margin: 0; }
.prinzipien > div { padding: 1.1rem 0 1.25rem; border-top: 2px solid var(--nacht-tief); }
.prinzipien > div:last-child { border-bottom: 2px solid var(--nacht-tief); }
.prinzipien dt { font-size: 1.35rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.012em; }
.prinzipien dd { margin: 0.35rem 0 0; max-width: 50ch; }

/* Über uns */
.ueber p { margin: 0 0 1.1rem; max-width: 50ch; font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.45; }
.ueber p:last-child { margin-bottom: 0; font-weight: 600; }

/* Weitere Bänder */
.band-nacht { background: var(--nacht-tief); color: var(--weiss); }
.band-hauch { background: var(--hauch); color: var(--nacht-tief); }
.band-text { margin: 1rem 0 0; max-width: 52ch; font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.45; }
.kopf-zweispaltig {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem clamp(2rem, 6vw, 6rem);
  align-items: end;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.kopf-zweispaltig .band-text { margin: 0; color: var(--gedaempft); }

/* Icons: Strich in Textfarbe, der Punkt als einziges gefülltes Element */
.ikon { display: block; width: 2.5rem; height: 2.5rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ikon .p { fill: var(--ikon-punkt, var(--blau)); stroke: none; }
.thema .ikon { margin-bottom: 0.9rem; --ikon-punkt: var(--weiss); }
.prinzipien dt { display: flex; align-items: center; gap: 0.85rem; }
.prinzipien .ikon { flex: none; width: 2.1rem; height: 2.1rem; color: var(--blau); --ikon-punkt: var(--nacht); }
.prinzipien dd { margin-left: 2.95rem; }

/* Schemata */
.schema { display: block; width: 100%; height: auto; font-family: inherit; --s-linie: var(--blau); --s-flaeche: var(--weiss); --s-text: var(--nacht-tief); --s-kern: var(--punkt); --s-kern-text: var(--nacht-tief); --s-raster: #e6edf4; --s-zone: var(--blau); }
.band-nacht .schema { --s-linie: var(--punkt); --s-flaeche: var(--nacht); --s-text: var(--weiss); --s-raster: #14304d; --s-zone: var(--punkt); }
.band-hauch .schema { --s-raster: #dfe8f2; }
.schema text { fill: var(--s-text); font-size: 15px; font-weight: 500; text-anchor: middle; }
.schema .raster line { stroke: var(--s-raster); stroke-width: 1; }
.schema .kasten rect { fill: var(--s-flaeche); stroke: var(--s-linie); stroke-width: 1.5; }
.schema .kern rect { fill: var(--s-kern); stroke: var(--s-kern); }
.schema .kern text { fill: var(--s-kern-text); font-weight: 600; }
.schema .fluss path { fill: none; stroke: var(--s-linie); stroke-width: 1.5; }
.schema .rueck path { stroke-dasharray: 5 5; }
.schema .knoten circle { fill: var(--s-kern); }
.schema .zone { fill: none; stroke: var(--s-zone); stroke-width: 1.5; stroke-dasharray: 7 6; }
.schema .beschr { text-anchor: start; font-size: 14px; font-weight: 600; }
.schema .station circle { fill: var(--s-kern); stroke: var(--s-linie); stroke-width: 1.5; }
.schema .station text { text-anchor: start; font-size: 17px; font-weight: 600; }
.schema .station .nr { text-anchor: middle; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.schema .marke circle { fill: var(--nacht); }
.schema .marke text { fill: var(--weiss); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.nur-hoch { display: none; }
.spalte-schema .schema { margin-top: clamp(1.5rem, 3vw, 2.5rem); max-width: 30rem; }

/* KI-Legende */
.legende { margin: 1.5rem 0 0; padding: 0; list-style: none; counter-reset: l; }
.legende li { counter-increment: l; position: relative; padding: 0 0 0.8rem 2.4rem; max-width: 50ch; }
.legende li::before {
  content: counter(l);
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--nacht);
  color: var(--weiss);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.6rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.legende strong { display: block; font-weight: 600; }
.ki-schema { align-self: center; }

/* Kontakt */
.kontakt { padding: clamp(3.5rem, 9vw, 8rem) var(--rand); }
.kontakt h2 {
  margin: 0 0 0.75rem;
  max-width: 30ch;
  color: var(--gedaempft);
  font-size: clamp(1.15rem, 1.8vw, 1.6rem);
  font-weight: 400;
  line-height: 1.3;
}
.kontakt-mail {
  display: inline-block;
  font-size: clamp(1.75rem, 7.2vw, 7rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.035em;
  overflow-wrap: anywhere;
}

.fuss {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem 2rem;
  padding: 1.5rem var(--rand) 2rem;
  border-top: 1px solid rgba(198, 214, 231, 0.35);
  color: var(--gedaempft);
  font-size: 1rem;
}
.fuss p { margin: 0; }
.fuss ul { display: flex; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.fuss a { padding: 0.25rem 0; display: inline-block; }

/* Impressum und Datenschutz */
.recht-seite { background: var(--weiss); color: var(--nacht-tief); }
.recht-kopf { padding: var(--rand); }
.recht-kopf img { display: block; width: 9.5rem; height: auto; }
.recht {
  max-width: 44rem;
  padding: clamp(1rem, 4vw, 3rem) var(--rand) clamp(3rem, 8vw, 6rem);
  font-size: 1.0625rem;
  line-height: 1.6;
}
.recht h1 { margin: 0 0 2rem; font-size: clamp(2.25rem, 6vw, 4rem); font-weight: 500; line-height: 1.05; letter-spacing: -0.03em; }
.recht h2 { margin: 2.25rem 0 0.5rem; font-size: 1.25rem; font-weight: 600; line-height: 1.3; }
.recht p { margin: 0 0 0.9rem; }
.recht-seite .fuss { color: var(--nacht); border-top-color: rgba(18, 48, 79, 0.25); }

/* Fehlerseite */
.fehler { min-height: 100svh; padding: var(--rand); display: flex; flex-direction: column; justify-content: center; }
.fehler h1 { margin: 0 0 1rem; max-width: 16ch; font-size: clamp(2.5rem, 7vw, 6.5rem); font-weight: 500; line-height: 1.02; letter-spacing: -0.03em; }
.fehler p { margin: 0 0 1.5rem; max-width: 46ch; color: var(--gedaempft); }
.fehler a { color: var(--weiss); font-weight: 600; }

@media (max-width: 62rem) {
  .themen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zweispaltig { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 46rem) {
  .themen { grid-template-columns: minmax(0, 1fr); }
  .leiste { justify-content: flex-start; font-size: 0.9rem; overflow-x: auto; scrollbar-width: none; }
  .leiste-logo { display: none; }
  .leiste ul { gap: 0.8rem; }
  .leiste .breit { display: none; }
  .kopf-zweispaltig { grid-template-columns: minmax(0, 1fr); }
  .nur-breit { display: none; }
  .nur-hoch { display: block; }
  .spalte-schema .schema { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .leiste-logo { transition: none; }
}

/* Website-Chat (07.11.2026): eigener Knopf, bis der Besucher klickt; danach bringt Chatwoot seine eigene Blase. */
.chat-launch { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 40;
  min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--blau); color: var(--weiss); font: inherit;
  font-weight: 600; cursor: pointer; box-shadow: 0 6px 20px rgb(0 0 0 / 0.25); }
.chat-launch:hover { background: var(--nacht); }
.chat-launch:focus-visible { outline: 3px solid var(--punkt); outline-offset: 3px; }
.chat-launch:disabled { opacity: 0.85; cursor: progress; }
.chat-launch[hidden], .chat-offline[hidden] { display: none; }
.chat-offline { position: fixed; right: 16px; bottom: 16px; left: 16px; z-index: 40; max-width: 22rem; margin: 0 0 0 auto; padding: 12px 16px;
  border: 1px solid var(--gedaempft); border-radius: 12px; background: var(--weiss); color: var(--nacht); box-shadow: 0 6px 20px rgb(0 0 0 / 0.2); }
@media print { .chat-launch, .chat-offline { display: none; } }