/* Auftrieb Cloud: eine Seite, viel Luft. */

@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap; src: url("fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url("fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url("fonts/barlow-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-display: swap; src: url("fonts/barlow-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url("fonts/barlow-latin-600-normal.woff2") format("woff2"); }

/* Farben der Marke. Die Übersicht dazu steht unter /ci/. */
:root {
  --dunkelblau: #1b2858;
  --blau: #2747a8;
  --tiefblau: #0b1640;
  --creme: #f6f4ee;
  --gold: #c9a24e;
  --gold-ink: #85651c;
  --gold-hell: #e2c27a;

  --bg: #ffffff;
  --fg: var(--tiefblau);
  --muted: #56608a;
  --line: #e1e4ee;
  --panel: #f7f8fc;
  --btn-bg: var(--blau);
  --btn-fg: #ffffff;
  --accent: var(--blau);
  --accent-line: rgba(39, 71, 168, .28);
  --accent-soft: rgba(39, 71, 168, .07);
  --accent-glow: rgba(255, 255, 255, .5);
  --headline: var(--blau);
  --flaeche: var(--dunkelblau);
  --pop: var(--gold);
  --pop-text: var(--gold-ink);
  --shadow: 0 1px 2px rgba(15, 27, 77, .06), 0 12px 36px rgba(15, 27, 77, .1);

  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --text: "Barlow", -apple-system, "Segoe UI", Arial, sans-serif;

  --space-section: clamp(5.5rem, 13vw, 11rem);
  --measure: 34rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--tiefblau);
    --fg: var(--creme);
    --muted: #a9b6e0;
    --line: #26357a;
    --panel: #15245f;
    --btn-bg: #ffffff;
    --btn-fg: var(--tiefblau);
    --accent: #a9b6e0;
    --accent-line: rgba(169, 182, 224, .34);
    --accent-soft: rgba(169, 182, 224, .1);
    --headline: var(--creme);
    --pop: var(--gold-hell);
    --pop-text: var(--gold-hell);
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 16px 44px rgba(0, 0, 0, .4);
  }
}

:root[data-theme="dark"] {
  --bg: var(--tiefblau);
  --fg: var(--creme);
  --muted: #a9b6e0;
  --line: #26357a;
  --panel: #15245f;
  --btn-bg: #ffffff;
  --btn-fg: var(--tiefblau);
  --accent: #a9b6e0;
  --accent-line: rgba(169, 182, 224, .34);
  --accent-soft: rgba(169, 182, 224, .1);
  --headline: var(--creme);
  --pop: var(--gold-hell);
  --pop-text: var(--gold-hell);
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 16px 44px rgba(0, 0, 0, .4);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--text);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap {
  width: 100%;
  max-width: 68rem;
  margin: 0 auto;
  padding-inline: 16px;
}

@media (min-width: 40rem) {
  .wrap { padding-inline: 2.5rem; }
}

a { color: inherit; }

/* Kopf */

.site-head {
  padding: 1.5rem 0;
}

.head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  text-decoration: none;
}

.wordmark__mark {
  width: 26px;
  height: 26px;
  flex: none;
}

/* Knopf */

.btn {
  display: inline-block;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border-radius: 999px;
  padding: 0.85rem 1.6rem;
  font-size: 0.975rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: opacity .15s ease, transform .15s ease;
}

.btn--sm {
  padding: 0.6rem 1.15rem;
  font-size: 0.9rem;
}

.btn:hover { opacity: .85; }
.btn:active { transform: translateY(1px); }

.btn:focus-visible,
a:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Fold */

.hero {
  padding-block: clamp(2.5rem, 7vw, 5rem) var(--space-section);
  display: grid;
  gap: clamp(3rem, 7vw, 4.5rem);
  align-items: center;
}

@media (min-width: 62rem) {
  .hero {
    grid-template-columns: minmax(0, 29rem) minmax(0, 1fr);
    gap: 4rem;
  }
}

h1 {
  margin: 0;
  font-size: clamp(2.4rem, 5.6vw, 3.9rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 600;
  text-wrap: balance;
}

.lead {
  margin: 1.5rem 0 0;
  max-width: var(--measure);
  font-size: clamp(1.075rem, 1.6vw, 1.2rem);
  line-height: 1.55;
  color: var(--muted);
  letter-spacing: -0.011em;
  text-wrap: pretty;
}

.hero .btn { margin-top: 2.25rem; }

/* Wo es läuft: als Label unter dem Knopf, vom Absatz abgesetzt. */
.origin {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: fit-content;
  margin: 2rem 0 0;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.85rem;
  line-height: 1.35;
}

.origin__ico { width: 15px; height: 15px; flex: none; }

/* Das Bild des Moments */

.shot {
  margin: 0;
  display: grid;
  gap: 1rem;
}

/* Nebeneinander passen die Karten erst ab etwa 34rem Breite der Grafik. Die hat
   sie nur zwischen 40rem und 62rem Fensterbreite, wo sie allein in der Zeile steht.
   Ab 62rem teilt sie sich die Zeile mit dem Text und ist wieder zu schmal. */
@media (min-width: 40rem) and (max-width: 61.99rem) {
  .shot {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    gap: 1.25rem;
    align-items: start;
  }
}

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.card__bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line);
}

.card__label {
  margin-left: 0.35rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  color: var(--muted);
  letter-spacing: 0.01em;
}

.card__ico { width: 13px; height: 13px; flex: none; }

/* Mittlerer Schritt: der Code geht ins Netz. */

.publish {
  margin: 0.7rem 0 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.4rem 0.45rem;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--muted);
}

.publish__ico {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--accent);
}

/* Die Adresse sitzt in einem dunkelblauen Feld, durch das einmal ein weißer Streifen
   von links nach rechts läuft, sobald der Schritt dran ist. */

.publish__url {
  position: relative;
  display: inline-block;
  /* Nicht overflow: hidden. Das macht die Unterkante zur Grundlinie und schiebt
     die Adresse gegenueber dem Text daneben nach oben. clip-path schneidet den
     Streifen genauso ab, ohne die Grundlinie anzufassen. */
  clip-path: inset(0 round 999px);
  padding: 0.15rem 0.5rem;
  line-height: 1.15;
  border: 1px solid var(--flaeche);
  border-radius: 999px;
  background: var(--flaeche);
  color: #ffffff;
  font-weight: 500;
}

.publish.on .publish__url::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, var(--accent-glow) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: sweep 1.5s ease-out 2;
}

@keyframes sweep {
  to { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .publish.on .publish__url::after { animation: none; }
}

.publish__bar {
  grid-column: 1 / -1;
  position: relative;
  height: 2px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
}

.publish__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
}

.publish.on .publish__bar::after {
  transform: scaleX(1);
  transition: transform .9s ease;
}

.card__body { padding: 0.95rem; }

/* links: Chat */

.msg {
  margin: 0;
  font-size: 0.83rem;
  line-height: 1.5;
  letter-spacing: -0.005em;
}

.msg--you {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.6rem 0.75rem;
}

.msg--ai {
  margin-top: 0.85rem;
  color: var(--muted);
}

.steps-mini {
  margin: 0.7rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.78rem;
  color: var(--muted);
  display: grid;
  gap: 0.35rem;
}

.steps-mini li {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
}

.tick { color: var(--accent); font-size: 0.7rem; }

/* rechts: laufende App */

.app-shot { margin-top: 1.5rem; }

/* Schmale Grafik (Handy, und auf breiten Schirmen neben dem Text): die beiden
   Karten liegen uebereinander und die laufende App loest den Chat ab. Nebeneinander
   passen sie nicht, untereinander stuende der halbe Bildschirm leer, bis die zweite
   Karte erscheint. */
@media (max-width: 39.99rem), (min-width: 62rem) {
  .app-shot { margin-top: 0; }

  .shot > .card { grid-area: 1 / 1; }

  /* Der Balken läuft langsamer, weil der Schritt hier länger steht. */
  .publish.on .publish__bar::after { transition-duration: 1.5s; }

  /* Die fliegende Kopie. Solange sie unterwegs ist, bleibt die echte Adresse in
     der Zeile unsichtbar, sonst stünde sie doppelt da. */
  .url-ghost {
    position: fixed;
    z-index: 5;
    /* Von der linken oberen Ecke aus rechnen, sonst verschiebt das Verkleinern
       um die eigene Mitte das Ziel. */
    transform-origin: 0 0;
    margin: 0;
    pointer-events: none;
    white-space: nowrap;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    transition:
      left .62s cubic-bezier(.4, 0, .2, 1),
      top .62s cubic-bezier(.4, 0, .2, 1),
      width .62s cubic-bezier(.4, 0, .2, 1),
      height .62s cubic-bezier(.4, 0, .2, 1),
      padding .62s cubic-bezier(.4, 0, .2, 1),
      font-size .62s cubic-bezier(.4, 0, .2, 1),
      background-color .5s ease .1s,
      border-color .5s ease .1s,
      color .5s ease .1s;
  }

  /* Die Adresszeile ist erst gar nicht da. Sie entsteht, indem die Kopie sie wird.
     versteckt statt weg, damit die Kopfzeile der Karte ihre Breite behält. */
  .shot.flying .app-shot .urlbar { visibility: hidden; }

  .shot.anim:has(.app-shot.on) > .card:not(.app-shot) {
    opacity: 0;
    transition: opacity .5s ease;
  }
}

.urlbar {
  flex: 1;
  margin-left: 0.4rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.22rem 0.6rem;
  font-size: 0.7rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.8rem;
}

.app-title {
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: -0.012em;
}

.who {
  font-size: 0.7rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.avatar {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--line);
  display: grid;
  place-items: center;
  font-size: 0.55rem;
  color: var(--muted);
  font-weight: 600;
}

.rows {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.row { display: contents; }

.row > span {
  min-width: 0;
  padding: 0.5rem 0.8rem 0.5rem 0;
  border-top: 1px solid var(--line);
  font-size: 0.78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row:first-child > span {
  border-top: 0;
  padding-top: 0;
  color: var(--muted);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.row > span:nth-child(2) {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.row > span:nth-child(3) {
  display: flex;
  align-items: center;
  padding-right: 0;
}

.pill {
  flex: 1;
  text-align: center;
  font-style: normal;
  white-space: nowrap;
  font-size: 0.68rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  color: var(--muted);
}

.pill--ok {
  color: var(--accent);
  border-color: var(--accent-line);
}

/* Hero-Sequenz */

.caret {
  display: inline-block;
  width: 2px;
  height: 0.95em;
  margin-left: 2px;
  vertical-align: -0.12em;
  background: var(--accent);
  opacity: 0;
}

.typing .caret {
  opacity: 1;
  animation: blink 1.05s steps(1, end) infinite;
}

@keyframes blink { 50% { opacity: 0; } }

.anim [data-step],
.anim .app-shot .row > span {
  opacity: 0;
  transform: translateY(8px);
}

.anim .app-shot[data-step] { transform: translateY(14px) scale(.985); }

.anim [data-step].on,
.anim .app-shot .row > span.on {
  opacity: 1;
  transform: none;
  transition: opacity .6s ease, transform .6s cubic-bezier(.2, .75, .3, 1);
}

.anim .msg--you { transition: opacity .45s ease; }

.anim.rewind .msg--you,
.anim.rewind [data-step],
.anim.rewind [data-type],
.anim.rewind .app-shot .row > span {
  opacity: 0;
  transition: opacity .45s ease;
}

@media (prefers-reduced-motion: reduce) {
  .anim [data-step],
  .anim .app-shot .row > span { opacity: 1; transform: none; }
  .typing .caret { animation: none; }
}

/* Einblenden beim Scrollen */

.reveal .row > span,
.envs.reveal > * {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .35s ease, transform .35s cubic-bezier(.2, .75, .3, 1);
}

.reveal.in .row > span,
.envs.reveal.in > * {
  opacity: 1;
  transform: none;
  transition: opacity .6s ease, transform .6s cubic-bezier(.2, .75, .3, 1);
}

.reveal.in .row:nth-child(1) > span { transition-delay: 0ms; }
.reveal.in .row:nth-child(2) > span { transition-delay: 120ms; }
.reveal.in .row:nth-child(3) > span { transition-delay: 230ms; }
.reveal.in .row:nth-child(4) > span { transition-delay: 340ms; }
.reveal.in .row:nth-child(5) > span { transition-delay: 450ms; }
.reveal.in .row:nth-child(6) > span { transition-delay: 560ms; }

.envs.reveal.in > *:nth-child(1) { transition-delay: 0ms; }
.envs.reveal.in > *:nth-child(2) { transition-delay: 200ms; }
.envs.reveal.in > *:nth-child(3) { transition-delay: 360ms; }
.envs.reveal.in > *:nth-child(4) { transition-delay: 600ms; }

.envs.reveal .env-arrow svg path {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  transition: stroke-dashoffset .35s ease;
}

.envs.reveal.in .env-arrow svg path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset .8s ease .4s;
}

@media (prefers-reduced-motion: reduce) {
  .reveal .row > span,
  .envs.reveal > * { opacity: 1; transform: none; }
  .envs.reveal .env-arrow svg path { stroke-dashoffset: 0; }
}

/* Abschnitte */

section { padding-bottom: var(--space-section); }

.eyebrow {
  margin: 0 0 1.75rem;
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

h2 {
  margin: 0;
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  line-height: 1.2;
  letter-spacing: -0.024em;
  font-weight: 600;
}

/* Drei Schritte und drei Blöcke */

.trio {
  display: grid;
  gap: 2.25rem;
}

@media (min-width: 48rem) {
  .trio { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
}

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
}

.step-mark {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.9rem;
  color: var(--muted);
}

.step-mark .ico { width: 22px; height: 22px; }

.step-mark span {
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

.trio b {
  display: block;
  font-size: clamp(1.15rem, 2.1vw, 1.45rem);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.25;
}

.trio p {
  margin: 0.7rem 0 0;
  max-width: 22rem;
  font-size: 0.975rem;
  line-height: 1.55;
  color: var(--muted);
  letter-spacing: -0.008em;
  text-wrap: pretty;
}

/* Vier Zeilen */

.facts {
  list-style: none;
  margin: 2.75rem 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
  max-width: 44rem;
}

.facts li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 0.95rem;
  align-items: start;
  border-bottom: 1px solid var(--line);
  padding: 1.15rem 0;
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  letter-spacing: -0.014em;
}

.facts .ico {
  width: 20px;
  height: 20px;
  color: var(--muted);
  margin-top: 0.3rem;
}

.facts li > div {
  font-weight: 500;
}

.facts small {
  font-weight: 400;
  display: block;
  margin-top: 0.25rem;
  font-size: 0.925rem;
  line-height: 1.5;
  letter-spacing: -0.006em;
  color: var(--muted);
  text-wrap: pretty;
}

/* Fertige Apps */

.prose {
  margin: 0;
  max-width: var(--measure);
  font-size: clamp(1.075rem, 1.6vw, 1.2rem);
  line-height: 1.55;
  letter-spacing: -0.012em;
  text-wrap: pretty;
}

.prose + .prose { margin-top: 1.1rem; }

h2 + .prose { margin-top: 1.25rem; }

.prose--muted { color: var(--muted); }

.branchen {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  font-size: 0.95rem;
}

.branchen:empty { display: none; }

/* Katalog */

.split { display: grid; gap: clamp(2.5rem, 6vw, 3.5rem); }

@media (min-width: 62rem) {
  .split {
    grid-template-columns: minmax(0, 30rem) minmax(0, 1fr);
    gap: 4rem;
    align-items: start;
  }
}

.shot--single { display: block; max-width: 30rem; }

/* Für die IT */

.envs {
  margin: 0;
  max-width: 21rem;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}

.env {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.875rem;
  letter-spacing: -0.01em;
}

.env .pill { flex: 0 0 auto; }

.env-arrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.35rem 0 0.35rem 0.15rem;
  color: var(--muted);
  font-size: 0.72rem;
}

.env-arrow svg { width: 12px; height: 22px; }

.env-login {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 1.05rem;
  padding-top: 0.95rem;
  border-top: 1px solid var(--line);
  font-size: 0.8rem;
  color: var(--muted);
}

.chip {
  display: inline-block;
  font-style: normal;
  font-size: 0.7rem;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.12rem 0.55rem;
  background: var(--bg);
}

.chip + .chip { margin-left: 0.3rem; }

.it {
  border-top: 1px solid var(--line);
  padding-top: clamp(3rem, 6vw, 4.5rem);
}

@media (min-width: 62rem) {
  .it.split { grid-template-columns: minmax(0, 32rem) minmax(0, 1fr); }
}

.more {
  display: inline-block;
  margin-top: 1.25rem;
  font-size: 1rem;
  letter-spacing: -0.012em;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
}

.more:hover { border-color: var(--fg); }

/* Abschluss */

.close {
  padding: clamp(4rem, 9vw, 7rem) 0;
  border-top: 1px solid var(--line);
  text-align: center;
}

.close h2 { max-width: 30ch; margin: 0 auto; }
.close .btn { margin-top: 2rem; }

/* Fuß */

.site-foot {
  padding: 2.5rem 0 3.5rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.foot-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.5rem;
  justify-content: space-between;
}

.site-foot .wordmark { font-size: 0.95rem; }
.site-foot .wordmark__mark { width: 20px; height: 20px; }

.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
}

.foot-links a { text-decoration: none; }
.foot-links a:hover { color: var(--fg); }

/* Unterseite */

.page {
  padding: clamp(3rem, 8vw, 6rem) 0 var(--space-section);
  max-width: 44rem;
  margin-inline: 0;
}

.page h1 { font-size: clamp(2rem, 4.4vw, 3rem); }
.page .prose { margin-top: 1.75rem; }

.back {
  display: inline-block;
  margin-bottom: 2.5rem;
  font-size: 0.9rem;
  color: var(--muted);
  text-decoration: none;
}

.back:hover { color: var(--fg); }

/* Rechtstexte */

.legal { max-width: var(--measure); }
.legal h2 { margin-top: 2.75rem; font-size: 1.2rem; }
.legal p, .legal ul { margin: 0.9rem 0 0; }
.legal ul { padding-left: 1.2rem; }
.legal li + li { margin-top: 0.35rem; }
.legal .stand { margin-top: 3rem; color: var(--muted); font-size: 0.9rem; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}


/* Marke: Überschriften, Knöpfe und Überzeilen in Barlow Condensed, Fließtext in Barlow.
   Gold steht nur in Überzeilen und als Unterstrich von Links. */

h1, h2, .trio b, .wordmark, .eyebrow, .btn, .more {
  font-family: var(--display);
  text-transform: uppercase;
}

h1, h2 { color: var(--headline); }

h1 {
  font-weight: 700;
  font-size: clamp(2.8rem, 6.4vw, 4.8rem);
  line-height: .95;
  letter-spacing: 0;
}

h2 {
  font-weight: 700;
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
  line-height: 1.02;
  letter-spacing: .005em;
}

.trio b {
  font-weight: 600;
  font-size: clamp(1.35rem, 2.3vw, 1.6rem);
  letter-spacing: .01em;
  line-height: 1.1;
}

.trio p { font-size: 1.02rem; }
.prose { font-size: clamp(1.1rem, 1.6vw, 1.25rem); }

.wordmark {
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: .03em;
}

.wordmark__mark { color: var(--headline); }
.site-foot .wordmark { font-size: 1.05rem; }

.eyebrow {
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: .14em;
  color: var(--pop-text);
}

.btn {
  border-radius: 3px;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: .06em;
  padding: 0.8rem 1.5rem 0.75rem;
}

.btn--sm { font-size: 0.95rem; padding: 0.5rem 1rem 0.45rem; }

.more { font-weight: 600; letter-spacing: .05em; border-bottom: 2px solid var(--pop); }

.pill--ok { color: var(--accent); background: var(--accent-soft); }

/* Schrittnummern groß und blau statt Symbol. */
.steps .step-mark .ico { display: none; }

.step-mark span {
  font-family: var(--display);
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--headline);
}

.step-mark .ico,
.facts .ico { color: var(--accent); }

.facts { border-top: 2px solid var(--headline); }
.close { border-top: 2px solid var(--headline); }

/* Blaue Fläche: Kopfleiste und Fold bilden eine durchgehende Fläche über die ganze Breite.
   .flaeche macht jeden anderen Block zur selben Fläche, etwa auf der Übersicht unter /ci/. */

.site-head,
.hero,
.flaeche {
  background: var(--flaeche);
  color: #ffffff;
}

/* Der Fold steht in .wrap, die Fläche läuft trotzdem über die ganze Fensterbreite. */
.hero {
  box-shadow: 0 0 0 100vmax var(--flaeche);
  clip-path: inset(0 -100vmax);
  padding-bottom: clamp(3rem, 7vw, 5rem);
  margin-bottom: clamp(1rem, 3vw, 2rem);
}

:is(.site-head, .hero, .flaeche) .wordmark__mark { color: #ffffff; }
:is(.hero, .flaeche) h1 { color: #ffffff; }
:is(.hero, .flaeche) .lead { color: rgba(255, 255, 255, .86); }
:is(.site-head, .hero, .flaeche) .btn { background: #ffffff; color: var(--flaeche); }

:is(.hero, .flaeche) .origin {
  border-color: rgba(255, 255, 255, .4);
  background: rgba(255, 255, 255, .1);
  color: #ffffff;
}

:is(.site-head, .hero, .flaeche) a:focus-visible { outline-color: #ffffff; }

/* Die Karten bleiben hell und heben sich vom Blau ab. */
:is(.hero, .flaeche) .card {
  color: var(--fg);
  border-color: transparent;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .15), 0 18px 44px rgba(0, 0, 0, .28);
}