/* Mittelstand Cloud: ein 1800 x 2612 Artboard, ueber JS auf den Viewport
   skaliert. Ab 1280px wird es unveraendert gezeichnet, darunter heben
   Hero und Problem-Abschnitt die Skalierung auf und setzen sich als Grid
   in echten Gerätepixeln. Die Hero-Buehne ist immer genau 100vh hoch. */

/* Geist Mono lag als rohes TrueType vor (149 KB je Schnitt, unkomprimiert,
   von GitHub geladen). Auf WOFF2 gebracht: 51 KB, wie jede andere Schrift
   im Repo -- gleiches Format, gleicher Cache-Header, kein Ausreisser mehr. */
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../assets/fonts/geist-mono-regular.woff2) format("woff2"); }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(../assets/fonts/geist-mono-medium.woff2) format("woff2"); }
@font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 400; font-display: swap;
  src: url(../assets/fonts/playfair-display-italic.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 400; font-display: swap;
  src: url(../assets/fonts/playfair-display-italic-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
:root {
  --ink: #000e23;
  --stage: #000c1e;
  --artboard-width: 1800;
  --artboard-height: 2612;
  --hero-offset: 0px;
  --hero-top-shift: 0px;
  --hero-content-scale: 1;
  --hero-title-size: 65.512px;
  --hero-title-leading: 1.1;
  --hero-title-line: calc(var(--hero-title-size) * var(--hero-title-leading));
  --problem-heading-shift: 0px;
  --problem-card-shift: 0px;
  --problem-card-scale: 1;
  --problem-caption-shift: 0px;
  /* Aeonik TRIAL ist eine Testlizenz und liegt nicht im Repo. Statt des
     neutralen Inter faellt der Text auf DM Sans zurueck: dieselbe
     geometrische Statur wie Aeonik (grosse x-Hoehe, zirkulares "a"), UND
     die Schrift, die skillbyte an anderer Stelle schon als Fliesstext
     fuehrt (siehe /askedda, FAQ-Akkordeon) -- keine dritte Stimme auf der
     Seite. DM Sans laedt sitesweit ueber fonts.css (400-700, hier keine
     eigene Kopie noetig), Inter bleibt als letzte Notbremse. */
  --aeonik: "Aeonik TRIAL", "Aeonik", "DM Sans", "Inter", "Helvetica Neue", Arial, sans-serif;
  --entrance-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --entrance-ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --entrance-shift: 22px;
}
/* Kein Font-Synthesis: Geist Mono hat nur 400/500, Playfair nur kursiv 400 --
   ohne diese Zeile wuerde ein Browser bei einem fehlenden Schnitt selbst
   fett oder kursiv rechnen (Faux Bold/Italic), und genau das sieht man den
   Buchstaben an: verzerrte Strichstaerke statt echter Formen. */
* { font-synthesis: none; }
/* Helle Schrift auf dunklem Grund (Hero, .blk--ink, FAQ) wirkt ohne das
   hier deutlich fetter, als sie gezeichnet ist -- macOS/iOS rendern ohne
   Hinting, das faengt das ab. */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* ---------- Basis ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: #fff; scrollbar-gutter: stable; }
body { margin: 0; min-width: 320px; overflow-x: hidden; background: #fff; }
::selection { color: #fff; background: #2372ae; }
p, h1, h2, h3, span, em { user-select: text; }
img { -webkit-user-drag: none; user-select: none; }
a, button { -webkit-tap-highlight-color: transparent; }
.site-shell { position: relative; margin: 0 auto; width: 100%; height: 100vh; overflow: hidden; background: #fff; }
.artboard { position: absolute; inset: 0 auto auto 0; width: 1800px; height: 2612px; overflow: hidden;
  transform-origin: top left; background: #fff; }
.page-surface { position: absolute; z-index: 0; left: 52.592px; top: 50px; width: 1700.406px; height: 3570.481px; background: #fff; }
.hero, .problem { position: absolute; inset: 0; }

/* ---------- Hero, Desktop-Artboard ---------- */
.hero-sky { position: absolute; z-index: 1; left: 52.592px; top: 50px; width: 1700.406px;
  height: calc(1147.749px + var(--hero-offset)); overflow: hidden; background: #2372ae; }
.hero-panel { left: 70.779px; top: 150.027px; width: 821.409px;
  height: calc(1029.539px + var(--hero-offset)); background: #fff; }

.cloud-layer { position: absolute; display: block; max-width: none; object-fit: cover; pointer-events: none; }
.cloud-layer--wide { left: -14.914px; top: -380.352px; width: 2038.81px; height: 2038.81px; }
.cloud-layer--shift { top: -208.82px; }
.cloud-layer--computer { left: 659.754px; top: -9.098px; width: 1207.359px; height: 1207.359px; }
.cloud-layer--live { aspect-ratio: 1;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%);
  mask-image: linear-gradient(to right, transparent 0, #000 8%);
  opacity: 0; transition: opacity 420ms ease; }
.cloud-layer--live[data-playing] { opacity: 1; }
@media (min-width: 1280px) {
  .cloud-layer--wide { content: url("https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/60fdb0d8-1e5e-4e7b-ace7-50b782304c5b.png"); }
  .cloud-layer--computer {
    -webkit-mask-image: linear-gradient(to right, transparent 0 16%, #000 32%);
    mask-image: linear-gradient(to right, transparent 0 16%, #000 32%); }
}
@media (prefers-reduced-motion: reduce) { .cloud-layer--live { transition: none; } }

.nav-left, .nav-right, .hero-panel { position: absolute; z-index: 2; border-radius: 4.041px; }
.nav-left { left: 70.779px; top: 68.188px; width: 821.409px; height: 72.745px; background: #fff; }
.nav-right { left: 902.291px; top: 68.188px; width: 832.522px; height: 72.745px;
  background: rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(19.55px); backdrop-filter: blur(19.55px); }
.navigation { position: absolute; z-index: 10; inset: 0; pointer-events: none; }
.navigation a, .nav-links { pointer-events: auto; }
.brand-mark, .wordmark, .login-button, .nav-links { position: absolute; }
/* ---- Navbar-Logo: diese drei Regeln SIND das Logo ---- */
.brand-mark { left: 84.924px; top: 85.359px; width: 42.434px; height: 42.434px; }
.brand-mark img, .wordmark img { width: 100%; height: 100%; display: block; }
/* Wortmarke direkt neben dem Zeichen, damit das Logo als eines gelesen wird. */
.wordmark { left: 141.358px; top: 91.576px; width: 113.4px; height: 30px; }
/* ------------------------------------------------------- */
.nav-links { left: 929.568px; top: 91.426px; display: flex; align-items: center; gap: 63.652px; }
.nav-links a, .login-button {
  color: rgba(255, 255, 255, .84); font-family: var(--aeonik); font-size: 14.268px; font-weight: 700;
  line-height: 26.158px; letter-spacing: -0.143px; text-decoration: none; white-space: nowrap; }
.login-button { left: 1587.307px; top: 78.285px; width: 136.734px; height: 53.158px;
  display: grid; place-items: center; border-radius: 2.378px; color: #252525; background: #fff; }

/* Obere Textgruppe: Koordinaten unveraendert, nur die Schutz-Skalierung
   haengt hinten am Transform. Beide Boxen drehen um denselben Artboard-Punkt. */
.hero-dots { position: absolute; z-index: 4; left: 457.74px; top: 344.014px; display: flex; gap: 8.081px;
  transform: translateY(var(--hero-top-shift)) scale(var(--hero-content-scale));
  transform-origin: 23.25px 0; }
.hero-dots i { width: 10.103px; height: 10.103px; display: block; background: var(--ink); }
.hero-copy { position: absolute; z-index: 4; inset: 0; color: #000; text-align: center;
  transform: translateY(var(--hero-top-shift)) scale(var(--hero-content-scale));
  transform-origin: 481.2px 344.014px; }
.hero-copy h1 { position: absolute; left: 220.309px; top: 407.66px; width: 521.797px; margin: 0; text-transform: uppercase; }
.hero-copy h1 span { display: block; font-family: "Geist Mono", monospace; font-size: var(--hero-title-size);
  font-weight: 400; line-height: var(--hero-title-leading); letter-spacing: -3.931px; }
.hero-copy h1 span:last-child { margin-top: var(--hero-title-line); }
.hero-copy h1 em { position: absolute; z-index: 1; left: 0; top: 65.512px; width: 100%;
  font-family: "Playfair Display", Georgia, serif; font-size: 73.557px; font-weight: 400; line-height: 0.95;
  letter-spacing: -4.413px; text-transform: none; }
.hero-copy > p { position: absolute; left: 310.23px; top: 656.207px; width: 342.506px; margin: 0;
  font-family: var(--aeonik); font-size: 16.165px; line-height: 1.2; letter-spacing: -0.323px; }
.trial-button { position: absolute; left: 381.965px; top: 759.258px; width: 198.683px; height: 56.579px;
  display: grid; place-items: center; border-radius: 2.021px; color: #fff; background: var(--ink);
  font-family: "Geist Mono", monospace; font-size: 14.145px; font-weight: 500; line-height: 1;
  letter-spacing: -0.283px; text-decoration: none; text-transform: uppercase; }

/* Untere Gruppe: haengt am unteren Rand der Buehne, nimmt den vollen Offset. */
/* Karte 40px hoeher als im Entwurf (drei Textzeilen) und 60px vom unteren
   Buehnenrand abgesetzt statt 30px. */
.insight-card { position: absolute; z-index: 4; left: 922.498px; top: 831.719px; width: 312.196px; height: 305.72px;
  margin: 0; border-radius: 3.031px; color: #fff; background: rgba(255, 255, 255, .2);
  -webkit-backdrop-filter: blur(31.169px); backdrop-filter: blur(31.169px);
  transform: translateY(var(--hero-offset)); }
.diamond-grid { position: absolute; left: 19.196px; top: 19.198px; width: 54.929px; height: 54.929px;
  display: grid; grid-template-columns: repeat(3, 15.474px); grid-auto-rows: 15.474px; gap: 4.253px; }
.diamond-grid i { width: 10.941px; height: 10.941px; place-self: center; transform: rotate(45deg);
  border-radius: 0.608px; background: #fff; }
.diamond-grid i.outline { border: 0.608px solid #fff; background: transparent; }
.insight-card h2 { position: absolute; left: 18.187px; top: 176.814px; margin: 0;
  font-family: "Geist Mono", monospace; font-size: 20.207px; font-weight: 400; line-height: 1.1;
  letter-spacing: -1.212px; text-transform: uppercase; }
.insight-card p { position: absolute; left: 18.187px; top: 213.183px; width: 231.368px; margin: 0;
  font-family: var(--aeonik); font-size: 15.155px; line-height: 1.2; letter-spacing: -0.303px; }

/* Referenzblock und seine Blenden. Die rechte Blende traegt: das Streifenende
   ist nach jedem Lauf rund 11px leer, und der Neustart springt. Beides liegt
   unter der rechten Blende. */
.trusted-block { position: absolute; z-index: 4; left: 150.595px; top: 1058.322px; width: 660.766px; height: 99.012px;
  transform: translateY(var(--hero-offset)); }
.trusted-block > p { position: absolute; left: 190.957px; top: 0; margin: 0; color: #4a4a4a;
  font-family: "Geist Mono", monospace; font-size: 14.145px; font-weight: 500; line-height: 1;
  letter-spacing: -0.283px; text-transform: uppercase; white-space: nowrap; }
.partner-strip { position: absolute; left: 42.435px; top: 47.482px; width: 612.268px; height: 25.259px; overflow: hidden; }
.partner-strip img { position: absolute; inset: 0 auto auto 0; width: 1252.026px; height: 25.622px; opacity: .28;
  animation: brand-rail-loop 18s linear infinite; will-change: transform; }
@keyframes brand-rail-loop { from { transform: translateX(0); } to { transform: translateX(-650.766px); } }
@media (hover: hover) { .partner-strip:hover img { animation-play-state: paused; } }
.partner-fade { position: absolute; z-index: 2; top: 22.226px; width: 113.158px; height: 76.786px;
  background: linear-gradient(90deg, #fff 31.7%, rgba(255, 255, 255, 0) 93.304%); }
.partner-fade--left { left: 0; }
.partner-fade--right { right: 0; transform: rotate(180deg); }

.hero-divider { position: absolute; z-index: 5; left: 71.791px; top: 1018.918px; width: 820.398px; height: 1.01px;
  background: rgba(0, 14, 35, .12); transform: translateY(var(--hero-offset)); }
.trial-button:focus-visible, .navigation a:focus-visible {
  outline: 3px solid #fff; outline-offset: 4px; }

/* ---------- Problem, Desktop-Artboard ---------- */
.problem { z-index: 6; pointer-events: none; transform: translateY(var(--hero-offset)); }
.section-kicker, .problem > h2, .card-caption, .card-caption * { pointer-events: auto; user-select: text; }
.section-kicker { position: absolute; left: 80px; top: 1233px; width: 1645.252px; height: 14px;
  display: flex; align-items: center; justify-content: space-between; color: #4a4a4a;
  font-family: "Geist Mono", monospace; font-size: 14.145px; font-weight: 500; line-height: 1;
  letter-spacing: -0.283px; text-transform: uppercase; }
.section-kicker i { width: 10.103px; height: 10.103px; display: block; opacity: .3; background: var(--ink); }
.section-divider { position: absolute; left: 47px; top: 1280.555px; width: 1706px; height: 1.01px; background: rgba(0, 14, 35, .13); }
.problem > h2 { position: absolute; left: 522px; top: 1391px; width: 756.979px; margin: 0; color: #000;
  font-family: "Geist Mono", monospace; font-size: 44.748px; font-weight: 400; line-height: 1.1;
  letter-spacing: -2.685px; text-align: center; text-transform: uppercase;
  transform: translateY(var(--problem-heading-shift)); }
.problem-card { position: absolute; width: 821px; height: 538px; overflow: hidden; border-radius: 4.041px;
  background: rgba(224, 224, 224, .3); }
.card-one { left: 71px; top: 1535px; transform: translateY(var(--problem-card-shift)) scale(var(--problem-card-scale)); transform-origin: top center; }
.card-two { left: 904px; top: 1535px; transform: translateY(var(--problem-card-shift)) scale(var(--problem-card-scale)); transform-origin: top center; }
.card-three { left: 71px; top: 2225px; transform: translateY(var(--problem-caption-shift)); }
.card-four { left: 904px; top: 2225px; transform: translateY(var(--problem-caption-shift)); }
.card-grid { position: absolute; z-index: 1; left: 7px; top: 7px; width: 809.466px; height: 525.446px;
  transform: rotate(180deg); opacity: .34; }
.card-illustration { position: absolute; z-index: 2; display: block; object-fit: cover; border-radius: 4.041px; }
.illustration-one { left: 97px; top: 103px; width: 592px; height: 388px; }
.illustration-two { left: 119px; top: 88px; width: 574px; height: 403px; }
.illustration-three { left: 87px; top: 72px; width: 602px; height: 394px; }
.illustration-four { left: 109px; top: 60px; width: 595px; height: 418px; }
.card-caption { position: absolute; color: #000; }
.caption-one { left: 90px; top: 2102px; transform: translateY(var(--problem-caption-shift)); }
.caption-two { left: 941px; top: 2105px; transform: translateY(var(--problem-caption-shift)); }
.card-caption h3 { width: 522px; margin: 0; font-family: "Geist Mono", monospace; font-size: 24px; font-weight: 400;
  line-height: 1.1; letter-spacing: -1.44px; text-transform: uppercase; }
.card-caption p { margin: 7px 0 0; font-family: var(--aeonik); font-size: 16.165px; line-height: 1.2;
  letter-spacing: -0.323px; opacity: .6; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .partner-strip img { animation: none; }
}

/* ---------- Navigation ausserhalb jeder Media Query ---------- */
.nav-toggle { display: none; }
.nav-drawer { display: contents; }

/* ---------- Tablet (max-width: 1279px) ---------- */
@media (max-width: 1279px) {
  .hero { inset: auto; left: 52.592px; top: 50px; width: var(--viewport-width, 100vw);
    height: auto; min-height: 100vh; min-height: 100dvh;
    transform: scale(calc(1 / var(--artboard-scale, 1))); transform-origin: 0 0;
    --v: 1vw; --v: min(1vw, 1.5svh);
    --pad: clamp(14px, 2.1vw, 26px);
    --card-pad: clamp(24px, 3.4vw, 46px);
    --sky-pad: clamp(16px, 2.2vw, 28px);
    --nav-h: clamp(54px, 5.4vw, 72.745px);
    --nav-gap: 9.094px;
    --radius: 4.041px;
    --hero-title-size: clamp(40px, calc(var(--v) * 4.6), 65.512px);
    --hero-title-line: calc(var(--hero-title-size) * var(--hero-title-leading));
    --body-size: clamp(15px, 1.25vw, 16.165px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(288px, 0.8fr);
    grid-template-rows: var(--nav-h) var(--nav-gap) auto auto auto minmax(auto, 1fr);
    column-gap: var(--pad); padding: var(--pad); }

  .hero-copy, .hero-dots, .insight-card, .trusted-block, .hero-divider { transform: none; }

  .nav-left, .nav-right { position: relative; inset: auto; width: auto; height: auto; grid-row: 1; }
  .nav-left { grid-column: 1; }
  .nav-right { grid-column: 2; }
  .hero-panel { position: relative; inset: auto; width: auto; height: auto; grid-row: 3 / -1; grid-column: 1; }
  .hero-sky { position: relative; inset: auto; width: auto; height: auto; grid-row: 1 / -1; grid-column: 1 / -1;
    margin: calc(var(--pad) * -1); }
  .cloud-layer--wide, .cloud-layer--shift { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
  .cloud-layer--computer { left: 38.8%; top: -0.79%; width: 73%; height: auto; }
  .navigation { display: contents; }
  /* ---- Navbar-Logo, Tablet ---- */
  .brand-mark, .wordmark { position: relative; inset: auto; z-index: 11; grid-row: 1; grid-column: 1; align-self: center; }
  .brand-mark { justify-self: start; margin-inline-start: clamp(12px, 1.4vw, 18.187px);
    width: clamp(30px, 3.1vw, 42.434px); height: clamp(30px, 3.1vw, 42.434px); }
  .wordmark { justify-self: start;
    margin-inline-start: calc(clamp(12px, 1.4vw, 18.187px) + clamp(30px, 3.1vw, 42.434px) + 12px);
    width: clamp(84px, 8.2vw, 113.4px); height: auto; aspect-ratio: 113.4 / 30; }
  /* ----------------------------- */
  .nav-toggle { display: grid; place-items: center; position: relative; z-index: 11; grid-row: 1; grid-column: 2;
    justify-self: end; align-self: center; margin-inline-end: clamp(10px, 1.2vw, 16px); width: 46px; height: 46px;
    padding: 0; border: 0; pointer-events: auto; border-radius: 2.378px; background: transparent; cursor: pointer;
    -webkit-tap-highlight-color: transparent; }
  .nav-toggle-bars { display: grid; gap: 4.5px; width: 20px; }
  .nav-toggle-bars i { display: block; height: 2px; background: rgba(255, 255, 255, .84);
    transition: transform 180ms ease, opacity 120ms ease; }
  [data-nav-open="true"] .nav-toggle-bars i:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  [data-nav-open="true"] .nav-toggle-bars i:nth-child(2) { opacity: 0; }
  [data-nav-open="true"] .nav-toggle-bars i:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
  .nav-drawer { display: grid; position: absolute; z-index: 12;
    top: calc(var(--pad) + var(--nav-h) + 8px); right: var(--pad);
    width: min(300px, calc(100% - var(--pad) * 2)); gap: 14px; padding: 14px;
    border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--radius);
    background: rgba(0, 14, 35, .9); -webkit-backdrop-filter: blur(19.55px); backdrop-filter: blur(19.55px);
    pointer-events: auto; opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms; }
  [data-nav-open="true"] .nav-drawer { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .nav-links { position: relative; inset: auto; display: grid; gap: 2px; }
  .nav-links a { display: flex; align-items: center; min-height: 44px; padding-inline: 10px; border-radius: 2.378px; }
  .nav-links a:hover { background: rgba(255, 255, 255, .08); }
  .login-button { position: relative; inset: auto; width: 100%; height: 48px; }
  .hero-dots { position: relative; inset: auto; grid-row: 3; grid-column: 1; justify-self: center; margin-top: var(--card-pad); }
  .hero-copy { position: relative; inset: auto; grid-row: 4; grid-column: 1; display: flex; flex-direction: column;
    align-items: center; padding-inline: var(--card-pad); margin-top: clamp(22px, calc(var(--v) * 3.4), 52px); }
  .hero-copy h1 { position: relative; left: auto; top: auto; width: 100%; text-wrap: balance; }
  .hero-copy h1 span { letter-spacing: -0.06em; }
  .hero-copy h1 em { top: var(--hero-title-size); font-size: calc(var(--hero-title-size) * 1.1228); letter-spacing: -0.06em; }
  .hero-copy > p { position: relative; left: auto; top: auto; width: min(100%, 44ch);
    margin-top: clamp(16px, calc(var(--v) * 2.2), 34px); font-size: var(--body-size); letter-spacing: -0.02em; }
  .trial-button { position: relative; left: auto; top: auto; margin-top: clamp(18px, calc(var(--v) * 2.6), 38px);
    width: 198.683px; min-height: 52px; height: auto; }
  .hero-divider { position: relative; inset: auto; grid-row: 5; grid-column: 1; width: auto;
    margin: clamp(24px, calc(var(--v) * 3.6), 54px) var(--card-pad) 0; }

  .trusted-block { position: relative; inset: auto; grid-row: 6; grid-column: 1; display: flex; flex-direction: column;
    align-items: center; gap: clamp(14px, 1.8vw, 22px); width: auto; height: auto; max-width: 612.268px;
    align-self: start; margin: clamp(18px, calc(var(--v) * 2.6), 34px) auto var(--card-pad); }
  .trusted-block > p { position: relative; left: auto; top: auto; text-align: center; }
  .partner-strip { position: relative; left: auto; top: auto; width: 100%; }
  .partner-fade { top: auto; bottom: 0; height: 25.259px; width: clamp(44px, 11%, 113.158px); }

  .insight-card { position: relative; inset: auto; z-index: 5; grid-row: 3 / -1; grid-column: 2; align-self: end;
    justify-self: start; display: flex; flex-direction: column; width: auto; height: auto;
    max-width: 312.196px; min-height: 0; margin: var(--sky-pad); margin-bottom: calc(var(--sky-pad) + 28px); padding: 19.196px; }
  .diamond-grid { position: relative; inset: auto; }
  .insight-card h2 { position: relative; left: auto; top: auto; margin-top: clamp(40px, 6vw, 82px);
    font-size: clamp(17px, 1.6vw, 20.207px); letter-spacing: -0.06em; }
  .insight-card p { position: relative; left: auto; top: auto; width: auto; margin-top: 8px;
    font-size: clamp(13.5px, 1.2vw, 15.155px); letter-spacing: -0.02em; }

  .problem { inset: auto; left: 52.592px; top: calc(1197.749px + var(--hero-offset));
    width: var(--viewport-width, 100vw); height: auto;
    transform: scale(calc(1 / var(--artboard-scale, 1))); transform-origin: 0 0;
    --pad: clamp(14px, 2.1vw, 26px);
    --card-gap: clamp(8px, 0.9vw, 12px);
    --row-gap: clamp(34px, 4.1vw, 70px);
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "kick kick" "rule rule" "head head" "c1 c2" "p1 p2" "c3 c4";
    column-gap: var(--card-gap);
    padding: clamp(20px, 2.1vw, 35.25px) var(--pad) clamp(40px, 5vw, 88px); }
  .problem > h2, .problem-card, .card-caption { transform: none; }
  .section-kicker { position: relative; inset: auto; grid-area: kick; width: auto; letter-spacing: -0.02em; }
  .section-divider { position: relative; inset: auto; grid-area: rule; width: auto;
    margin: clamp(18px, 2vw, 33.6px) calc(var(--pad) * -1) 0; }
  .problem > h2 { position: relative; left: auto; top: auto; grid-area: head; width: auto;
    margin-top: clamp(48px, 6.4vw, 109.4px); font-size: clamp(26px, 5.5vw, 44.748px); letter-spacing: -0.06em; }
  .problem-card { position: relative; inset: auto; width: auto; height: auto; aspect-ratio: 821 / 538; }
  .card-one { grid-area: c1; }
  .card-two { grid-area: c2; }
  .card-three { grid-area: c3; }
  .card-four { grid-area: c4; }
  .card-one, .card-two { margin-top: clamp(24px, 2.7vw, 45.6px); }
  .card-three, .card-four { margin-top: var(--row-gap); }
  .card-grid { left: 0.8526%; top: 1.3011%; width: 98.5951%; height: 97.6666%; }
  .card-illustration { height: auto; }
  .illustration-one { left: 11.8149%; top: 19.1450%; width: 72.1072%; height: 72.1190%; }
  .illustration-two { left: 14.4945%; top: 16.3569%; width: 69.9147%; height: 74.9071%; }
  .illustration-three { left: 10.5968%; top: 13.3829%; width: 73.3252%; height: 73.2342%; }
  .illustration-four { left: 13.2765%; top: 11.1524%; width: 72.4726%; height: 77.6952%; }
  .card-caption { position: relative; inset: auto; margin-top: clamp(16px, 1.7vw, 29px); padding-inline-start: 2.314%; }
  .caption-one { grid-area: p1; }
  .caption-two { grid-area: p2; }
  .card-caption h3 { width: auto; font-size: clamp(18px, 1.9vw, 24px); letter-spacing: -0.06em; }
  .card-caption p { white-space: normal; font-size: clamp(14.5px, 1.25vw, 16.165px); letter-spacing: -0.02em; }
}
@media (prefers-reduced-motion: reduce) { .nav-drawer, .nav-toggle-bars i { transition: none; } }

/* ---------- Gestapelt (max-width: 895px) ---------- */
@media (max-width: 895px) {
  .hero { --sky-band: clamp(240px, min(41vw, 30svh), 420px);
    --hero-title-size: clamp(36px, min(7vw, 9svh), 65.512px);
    grid-template-columns: minmax(0, 1fr) var(--nav-h);
    grid-template-rows: var(--nav-h) var(--nav-gap) auto auto auto auto var(--pad) minmax(var(--sky-band), 1fr); }
  .hero-panel { grid-row: 3 / 7; grid-column: 1 / -1; }
  .hero-dots, .hero-copy, .hero-divider, .trusted-block { grid-column: 1 / -1; }
  .nav-toggle { justify-self: center; margin-inline: 0; }
  .cloud-layer--wide, .cloud-layer--shift { object-position: 50% 50%; }
  .cloud-layer--shift { top: 14%; }
  .cloud-layer--computer { left: 50%; top: auto;
    bottom: calc(var(--sky-band) / 2 - var(--viewport-width, 100vw) * 0.627);
    width: calc(var(--viewport-width, 100vw) * 1.1); height: auto; translate: -50% 0; }
  .cloud-layer--live {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 8%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 8%); }
  .insight-card { grid-row: 8; grid-column: 1 / -1; }
  .problem { grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "kick" "rule" "head" "c1" "p1" "c2" "p2" "c3" "c4"; }
  .card-two { margin-top: var(--row-gap); }
  .card-four { margin-top: var(--card-gap); }
}

/* ---------- Mobil (max-width: 475px) ---------- */
@media (max-width: 475px) {
  :root { --entrance-shift: 14px; }
  .hero { --sky-band: clamp(390px, 92vw, 450px);
    --hero-title-size: clamp(29px, min(7vw, 9svh), 65.512px);
    --card-pad: clamp(20px, 5vw, 46px); }
  .insight-card { justify-self: stretch; max-width: none; margin-bottom: calc(var(--sky-pad) + 54px); }
  .insight-card h2 { margin-top: clamp(24px, 7vw, 82px); }
  .cloud-layer--computer { bottom: calc(var(--sky-band) * 0.81 - var(--viewport-width, 100vw) * 0.79315);
    width: calc(var(--viewport-width, 100vw) * 1.45); }
  .trusted-block > p { white-space: normal; text-wrap: balance; }
  .problem { padding-bottom: clamp(32px, 9vw, 88px); }
  .problem > h2 { margin-top: clamp(36px, 11vw, 109.4px); text-wrap: pretty; }
  .card-one, .card-two { margin-top: clamp(20px, 6vw, 45.6px); }
  .card-caption { margin-top: clamp(13px, 4vw, 29px); }
  .motion-ready .hero-copy h1 span:first-child,
  .motion-ready .hero-copy h1 em,
  .motion-ready .hero-copy h1 span:last-child { animation-duration: 680ms; }
}

/* ---------- Einzugsbewegung ---------- */
@keyframes entrance-wipe-right { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes entrance-wipe-down { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
@keyframes entrance-nav-content { from { opacity: 0; translate: 0 -12px; } to { opacity: 1; translate: none; } }
@keyframes entrance-type { from { opacity: 0; clip-path: inset(100% 0 0 0); translate: 0 62%; } to { opacity: 1; clip-path: inset(0); translate: none; } }
@keyframes entrance-support { from { opacity: 0; translate: 0 var(--entrance-shift); } to { opacity: 1; translate: none; } }
@keyframes entrance-action { from { opacity: 0; translate: 0 16px; scale: .975; } to { opacity: 1; translate: none; scale: none; } }
@keyframes entrance-visual { from { opacity: 0; translate: 0 var(--entrance-shift); scale: .985; } to { opacity: 1; translate: none; scale: none; } }
@keyframes entrance-rule { from { opacity: 0; scale: 0 1; } to { opacity: 1; scale: none; } }

.motion-ready .nav-left { animation: entrance-wipe-right 680ms var(--entrance-ease) 40ms both; }
.motion-ready .nav-right { animation: entrance-wipe-right 760ms var(--entrance-ease) 110ms both; }
.motion-ready .hero-panel { animation: entrance-wipe-down 920ms var(--entrance-ease-soft) 230ms both; }
.motion-ready .brand-mark { animation: entrance-nav-content 560ms var(--entrance-ease) 150ms both; }
.motion-ready .wordmark { animation: entrance-nav-content 560ms var(--entrance-ease) 220ms both; }
.motion-ready .nav-links { animation: entrance-nav-content 560ms var(--entrance-ease) 240ms both; }
.motion-ready .login-button { animation: entrance-nav-content 560ms var(--entrance-ease) 310ms both; }
.motion-ready .nav-toggle { animation: entrance-nav-content 560ms var(--entrance-ease) 310ms both; }
.motion-ready .hero-dots { animation: entrance-support 460ms var(--entrance-ease) 430ms both; }
.motion-ready .hero-copy h1 span:first-child { animation: entrance-type 780ms var(--entrance-ease-soft) 500ms both; }
.motion-ready .hero-copy h1 em { animation: entrance-type 780ms var(--entrance-ease-soft) 610ms both; }
.motion-ready .hero-copy h1 span:last-child { animation: entrance-type 780ms var(--entrance-ease-soft) 720ms both; }
.motion-ready .hero-copy > p { animation: entrance-support 620ms var(--entrance-ease) 940ms both; }
.motion-ready .trial-button { animation: entrance-action 600ms var(--entrance-ease) 1080ms both; }
.motion-ready .hero-divider { animation: entrance-rule 760ms var(--entrance-ease) 1100ms both; transform-origin: left center; }
.motion-ready .insight-card { animation: entrance-visual 820ms var(--entrance-ease-soft) 1160ms both; transform-origin: center bottom; }
.motion-ready .trusted-block { animation: entrance-support 620ms var(--entrance-ease) 1200ms both; }

.motion-ready .problem:not(.problem-is-visible) :is(.section-kicker, .problem-card, .card-caption),
.motion-ready .problem:not(.problem-is-visible) > h2 { opacity: 0; translate: 0 var(--entrance-shift); }
.motion-ready .problem:not(.problem-is-visible) > h2 { clip-path: inset(100% 0 0 0); }
.motion-ready .problem:not(.problem-is-visible) .problem-card { scale: .985; }
.motion-ready .problem:not(.problem-is-visible) .section-divider { opacity: 0; scale: 0 1; transform-origin: left center; }

.motion-ready .problem.problem-is-visible .section-kicker { animation: entrance-support 520ms var(--entrance-ease) 0ms both; }
.motion-ready .problem.problem-is-visible .section-divider { animation: entrance-rule 760ms var(--entrance-ease) 70ms both; transform-origin: left center; }
.motion-ready .problem.problem-is-visible > h2 { animation: entrance-type 820ms var(--entrance-ease-soft) 160ms both; }
.motion-ready .problem.problem-is-visible .card-one { animation: entrance-visual 800ms var(--entrance-ease-soft) 390ms both; }
.motion-ready .problem.problem-is-visible .card-two { animation: entrance-visual 800ms var(--entrance-ease-soft) 480ms both; }
.motion-ready .problem.problem-is-visible .caption-one { animation: entrance-support 580ms var(--entrance-ease) 650ms both; }
.motion-ready .problem.problem-is-visible .caption-two { animation: entrance-support 580ms var(--entrance-ease) 730ms both; }
.motion-ready .problem.problem-is-visible .card-three { animation: entrance-visual 760ms var(--entrance-ease-soft) 760ms both; }
.motion-ready .problem.problem-is-visible .card-four { animation: entrance-visual 760ms var(--entrance-ease-soft) 840ms both; }

@media (prefers-reduced-motion: reduce) {
  .motion-ready .hero :is(.nav-left, .nav-right, .hero-panel, .brand-mark, .wordmark, .nav-links, .login-button, .nav-toggle,
    .hero-dots, .hero-copy h1 span, .hero-copy h1 em, .hero-copy > p, .trial-button, .hero-divider, .trusted-block,
    .insight-card),
  .motion-ready .problem :is(.section-kicker, .section-divider, h2, .problem-card, .card-caption) {
    animation: none !important; clip-path: none !important; opacity: 1 !important;
    scale: none !important; translate: none !important; }
}

/* ---------- Fliesslayout unter dem Artboard ----------
   Angebot, Film, Zahlen, Weg, Datenhoheit, Pilotkunde, Abschluss. Normaler
   Dokumentfluss, dieselbe Formensprache wie das Artboard: Mono-Versalien,
   Playfair-Kursive als Akzent, technisches Raster auf den Karten. */
.flow { font-family: var(--aeonik); color: #000; background: #fff; }
.blk { padding: clamp(64px, 7vw, 120px) clamp(16px, 2.1vw, 26px); }
.blk--tint { background: #f6f7f9; }
.blk--ink { background: var(--ink); color: #fff; }
.blk-in { max-width: 1240px; margin: 0 auto; }
.kick { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: #4a4a4a;
  font-family: "Geist Mono", monospace; font-size: 14.145px; font-weight: 500; line-height: 1; letter-spacing: -0.283px;
  text-transform: uppercase; }
.kick i { width: 10.103px; height: 10.103px; display: block; opacity: .3; background: var(--ink); }
.blk--ink .kick { color: rgba(255,255,255,.7); }
.blk--ink .kick i { background: #fff; }
.rule { height: 1.01px; background: rgba(0,14,35,.13); margin: clamp(18px, 2vw, 33.6px) 0 0; }
.blk--ink .rule { background: rgba(255,255,255,.14); }
.flow h2 { margin: clamp(40px, 5vw, 80px) 0 0; font-family: "Geist Mono", monospace; font-weight: 400;
  font-size: clamp(26px, 3.4vw, 44.748px); line-height: 1.1; letter-spacing: -0.06em; text-transform: uppercase; max-width: 22ch; }
.flow h2 em { font-family: "Playfair Display", Georgia, serif; font-style: italic; text-transform: none;
  letter-spacing: -0.03em; font-size: 1.12em; color: #2372ae; }
.blk--ink h2 em { color: #8fe4f6; }
.flow .lead { max-width: 62ch; margin: clamp(20px, 2.4vw, 32px) 0 0; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.55;
  letter-spacing: -0.2px; color: rgba(0,0,0,.72); }
.blk--ink .lead { color: rgba(255,255,255,.72); }
.flow p { margin: 0; }
.cards { display: grid; gap: clamp(8px, 0.9vw, 12px); margin-top: clamp(28px, 3.4vw, 54px); }
.cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card { position: relative; overflow: hidden; border-radius: 4.041px; background: rgba(224,224,224,.3); padding: clamp(22px, 2.4vw, 34px); min-height: 220px; }
.card::before { content: ""; position: absolute; inset: 7px; background: url(../assets/card-grid.svg) center / cover no-repeat; opacity: .22; pointer-events: none; }
.card > * { position: relative; }
.blk--ink .card { background: rgba(255,255,255,.06); }
.blk--ink .card::before { filter: invert(1); opacity: .16; }
.card .no { font-family: "Geist Mono", monospace; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #2372ae; }
.blk--ink .card .no { color: #8fe4f6; }
.card h3 { margin: 14px 0 0; font-family: "Geist Mono", monospace; font-weight: 400; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.15;
  letter-spacing: -0.06em; text-transform: uppercase; }
.card p { margin-top: 12px; font-size: 15.5px; line-height: 1.55; color: rgba(0,0,0,.66); }
.blk--ink .card p { color: rgba(255,255,255,.66); }
.stat { display: flex; flex-direction: column; justify-content: space-between; min-height: 260px; }
.stat .z { font-family: "Geist Mono", monospace; font-size: clamp(28px, 2.9vw, 42px); line-height: 1; letter-spacing: -0.06em; }
.stat .z small { display: block; margin-top: 10px; font-family: var(--aeonik); font-size: 15px; letter-spacing: 0; color: rgba(0,0,0,.66); white-space: normal; }
.stat .st { display: inline-block; margin-top: 18px; border: 1.5px solid #2372ae; color: #2372ae; border-radius: 4px; padding: 6px 10px;
  font-family: "Geist Mono", monospace; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; align-self: flex-start; }
.stat .qu { margin-top: 10px; font-family: "Geist Mono", monospace; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: rgba(0,0,0,.5); }
.liste { list-style: none; padding: 0; margin: clamp(28px, 3.4vw, 54px) 0 0; display: grid; gap: 0; border-top: 1px solid rgba(0,14,35,.13); }
.liste li { display: grid; grid-template-columns: 56px 1fr; gap: 18px; padding: 22px 0; border-bottom: 1px solid rgba(0,14,35,.13); }
.liste .no { font-family: "Geist Mono", monospace; font-size: 13px; letter-spacing: .1em; color: #2372ae; padding-top: 4px; }
.liste b { display: block; font-family: "Geist Mono", monospace; font-weight: 400; font-size: 17px; letter-spacing: -0.04em; text-transform: uppercase; }
.liste p { margin-top: 8px; font-size: 15.5px; line-height: 1.55; color: rgba(0,0,0,.66); max-width: 70ch; }
.film-wrap { margin-top: clamp(28px, 3.4vw, 54px); display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .8fr); gap: clamp(20px, 3vw, 48px); align-items: end; }
.film-side p { font-size: 15.5px; line-height: 1.6; color: rgba(0,0,0,.66); }
.film-side .mf-cap { margin-top: 14px; }
.fit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(8px, 0.9vw, 12px); margin-top: clamp(28px, 3.4vw, 54px); }
.fit ul { list-style: none; margin: 14px 0 0; padding: 0; }
.fit li { position: relative; padding: 10px 0 10px 26px; font-size: 15.5px; line-height: 1.5; color: rgba(0,0,0,.72); border-top: 1px solid rgba(0,14,35,.1); }
.fit li::before { content: ""; position: absolute; left: 4px; top: 16px; width: 9px; height: 9px; transform: rotate(45deg); background: #2372ae; }
.fit .nein li::before { background: transparent; border: 1.5px solid rgba(0,14,35,.4); }
.profil { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 0.9vw, 12px); margin-top: clamp(28px, 3.4vw, 54px); }
.profil div { border-top: 2px solid var(--ink); padding-top: 14px; }
.profil .no { font-family: "Geist Mono", monospace; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(0,0,0,.5); }
.profil b { display: block; margin-top: 8px; font-family: "Geist Mono", monospace; font-weight: 400; font-size: clamp(18px, 1.8vw, 24px); letter-spacing: -0.05em; }
.schluss { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); gap: clamp(24px, 4vw, 64px); align-items: end; }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: clamp(24px, 3vw, 40px); }
.btn { display: inline-grid; place-items: center; min-width: 198.683px; height: 56.579px; padding: 0 26px; border-radius: 2.021px;
  color: #fff; background: var(--ink); font-family: "Geist Mono", monospace; font-size: 14.145px; font-weight: 500; line-height: 1;
  letter-spacing: -0.283px; text-decoration: none; text-transform: uppercase; }
.blk--ink .btn { color: var(--ink); background: #fff; }
.btn--ghost { color: var(--ink); background: transparent; border: 1.5px solid var(--ink); }
.blk--ink .btn--ghost { color: #fff; border-color: rgba(255,255,255,.5); background: transparent; }
.mini { font-family: "Geist Mono", monospace; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: rgba(0,0,0,.5); }
.blk--ink .mini { color: rgba(255,255,255,.55); }
.flow a { color: inherit; }
@media (max-width: 1023px) {
  .cards--3, .cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .film-wrap, .schluss { grid-template-columns: 1fr; }
  .profil { grid-template-columns: 1fr; }
}
@media (max-width: 639px) {
  .cards--3, .cards--4, .cards--2, .fit { grid-template-columns: 1fr; }
  .liste li { grid-template-columns: 1fr; gap: 6px; }
  .stat { min-height: 0; }
}