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

:root {
  --bg: #ffffff;
  --fg: #0b0b0c;
  --muted: #6b6b70;
  --line: #e6e6e8;
  --panel: #fafafa;
  --btn-bg: #0b0b0c;
  --btn-fg: #ffffff;
  --accent: #15805a;
  --accent-line: rgba(21, 128, 90, .3);
  --accent-soft: rgba(21, 128, 90, .09);
  --accent-glow: rgba(21, 128, 90, .24);
  --shadow: 0 1px 2px rgba(11, 11, 12, .04), 0 12px 40px rgba(11, 11, 12, .07);

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

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b0b0c;
    --fg: #f3f3f4;
    --muted: #9c9ca3;
    --line: #26262a;
    --panel: #141416;
    --btn-bg: #f3f3f4;
    --btn-fg: #0b0b0c;
    --accent: #4cc48e;
    --accent-line: rgba(76, 196, 142, .34);
    --accent-soft: rgba(76, 196, 142, .14);
    --accent-glow: rgba(76, 196, 142, .32);
    --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 16px 48px rgba(0, 0, 0, .45);
  }
}

:root[data-theme="dark"] {
  --bg: #0b0b0c;
  --fg: #f3f3f4;
  --muted: #9c9ca3;
  --line: #26262a;
  --panel: #141416;
  --btn-bg: #f3f3f4;
  --btn-fg: #0b0b0c;
  --accent: #4cc48e;
  --accent-line: rgba(76, 196, 142, .34);
  --accent-soft: rgba(76, 196, 142, .14);
  --accent-glow: rgba(76, 196, 142, .32);
  --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 16px 48px rgba(0, 0, 0, .45);
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  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; }

/* 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 gruenen Feld, durch das einmal ein heller Streifen
   von links nach rechts laeuft, 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(--accent-line);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  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; }
}