/* ═══════════════════════════════════════════════════════════════════════
   Hosting und Wartung · Cloud fuer den Industrie-Mittelstand
   Erster Bildschirm und Problem-Sektion nach der Vorlage "Axiom, Cloud
   Observability": ein 1800 x 2833 px Artboard, per JS auf die Viewport-
   breite skaliert (scale = clientWidth / 1700.406). Unter 1280 px heben
   Hero und Problem-Sektion die Skalierung wieder auf und legen sich als
   CSS-Grid in echten Geraetepixeln aus. Der Hero ist bei jeder Groesse
   genau 100vh hoch.

   Abweichungen von der Vorlage, beide bewusst:
   - Marke: skillbyte-Bildmarke und -Wortmarke statt Axiom, Kundenlogos
     aus kunden.json statt Intel/Google/Sony/Amazon/Adobe im Laufband,
     Inter statt Aeonik (im Spec selbst als Ersatz genannt).
   - Artboard 2833 statt 2612 hoch: die Vorlage schneidet Karte 3 und 4
     unten ab, weil ihre Seite dort endet. Hier folgen weitere Sektionen,
     also bekommen die Karten 70 px Luft. Alle Koordinaten bleiben gleich.
   Alles Uebrige (Masse, Schriften, Farben, Radien, Motion-Timeline) ist
   Wort fuer Wort aus der Vorlage.
   ═══════════════════════════════════════════════════════════════════════ */

@font-face{font-family:"Geist Mono";font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/geist-mono.woff2) format("woff2")}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/geist-mono.woff2) format("woff2")}
@font-face{font-family:"Playfair Display";font-style:italic;font-weight:400;font-display:swap;src:url(/10_ASSETS/landing_pages/fonts/PlayfairDisplay-i-latin-ext-2d6d99f2fa.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}
@font-face{font-family:"Playfair Display";font-style:italic;font-weight:400;font-display:swap;src:url(/10_ASSETS/landing_pages/fonts/PlayfairDisplay-i-latin-d143613668.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}

:root{
  --ink:#000e23;
  --stage:#000c1e;
  --artboard-width:1800;
  --artboard-height:2833;
  --hero-offset:0px;
  --hero-top-shift:0px;
  --hero-content-scale:1;               /* [100VH] die einzige neue Eigenschaft */
  --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:"Inter","Aeonik TRIAL","Aeonik","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;
}

/* ── Basis ─────────────────────────────────────────────────────────── */
html{scroll-behavior:smooth;scrollbar-gutter:stable}
body{margin:0;min-width:320px;overflow-x:hidden}
.site-shell ::selection{color:#fff;background:#2372ae}
.site-shell p,.site-shell h1,.site-shell h2,.site-shell h3,.site-shell span,.site-shell em{user-select:text}
.site-shell img{-webkit-user-drag:none;user-select:none}
.site-shell a,.site-shell button{-webkit-tap-highlight-color:transparent}
.site-shell{position:relative;margin:0 auto;width:100%;height:100vh;overflow:hidden;background:#fff;color:#000}
.artboard{position:absolute;inset:0 auto auto 0;width:1800px;height:2833px;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}

/* ── Sektion 1 · 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}
/* ---- 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}
.wordmark{left:788.123px;top:93.441px;width:79.152px;height:19.706px}
/* ------------------------------------------------ */
.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}

/* [100VH] obere Textgruppe: Koordinaten, Schrift, Farbe unveraendert; nur die Schutz-Skalierung haengt am Transform */
.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;margin:0;padding: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;padding:0;font-weight:400;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-style:italic;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}

/* [100VH] untere Gruppe haengt an der Unterkante des Himmels, nimmt den vollen Versatz */
.insight-card{position:absolute;z-index:4;left:922.498px;top:901.719px;width:312.196px;height:265.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;color:#fff;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}

/* ── Beweisblock und seine Ausblendungen ── */
.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;max-width:none;opacity:.28;filter:grayscale(1);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))}
.carousel-controls{position:absolute;z-index:5;left:1620.643px;top:1116.922px;display:flex;gap:2.023px;transform:translateY(var(--hero-offset))}
.carousel-button{width:50.517px;height:50.517px;display:grid;place-items:center;padding:0;border:0;border-radius:3.031px;cursor:pointer;background:rgba(255,255,255,.2);-webkit-backdrop-filter:blur(31.169px);backdrop-filter:blur(31.169px)}
.carousel-button img{width:16.165px;height:16.165px;display:block}
#previous-slide img{transform:rotate(90deg)}
#next-slide img{transform:rotate(-90deg)}
.carousel-button:focus-visible,.trial-button:focus-visible,.navigation a:focus-visible{outline:3px solid #fff;outline-offset:4px}

/* ── Sektion 2 · 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;margin:0;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;max-width:none;transform:rotate(180deg);opacity:.34}
.card-illustration{position:absolute;z-index:2;display:block;max-width:none;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;color:#000;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}}

/* ── Responsive · Tablet (max-width:1279px) ────────────────────────── */
.nav-toggle{display:none}
.nav-drawer{display:contents}

@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;                /* [100VH] */
    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);  /* [100VH] */
    column-gap:var(--pad);padding:var(--pad)}
  .hero-copy,.hero-dots,.insight-card,.trusted-block,.hero-divider,.carousel-controls{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}
  /* ---- Logo, Tablet-Platzierung ---- */
  .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:end;margin-inline-end:clamp(14px,1.6vw,24.153px);width:clamp(58px,5.8vw,79.152px);height:auto;aspect-ratio:79.152/19.706}
  /* ---------------------------------- */
  .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:min(312.196px,calc(100% - var(--sky-pad) * 2 - 104px));min-height:0;margin:var(--sky-pad);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}
  .carousel-controls{position:relative;inset:auto;z-index:5;grid-row:3/-1;grid-column:2;align-self:end;justify-self:end;margin:var(--sky-pad)}
  .carousel-button{width:44px;height:44px}

  .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}}

/* ── Responsive · 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)}  /* [100VH] */
  .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,.carousel-controls{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)}
}

/* ── Responsive · 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}
}

/* ── Einzugs-Motion ────────────────────────────────────────────────── */
@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 .carousel-controls{animation:entrance-support 560ms var(--entrance-ease) 1380ms 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,.carousel-controls),
  .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}
}