/* ============================================================
   Jobio — Design System.  Hell, warm, konsumentennah.
   Motion: eigene Kurven, <300ms, nie ease-in.
   ============================================================ */
@font-face{font-family:Geist;src:url(/fonts/geist.woff2)format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Geist;src:url(/fonts/geist-medium.woff2)format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Geist;src:url(/fonts/geist-semibold.woff2)format('woff2');font-weight:600;font-display:swap}

:root{
  --paper:#FBFAF8; --paper-2:#F3F1EC; --card:#FFFFFF;
  --ink:#15140F; --ink-2:#45433C; --ink-3:#78756B;
  --edge:#E6E2D9; --edge-2:#F0EDE6;
  --go:#0B6E4F; --go-soft:#E7F2EC; --go-deep:#08543C;
  --warn:#B4541E;

  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --pad:clamp(20px,4.5vw,64px);
  --r:20px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:Geist,system-ui,-apple-system,sans-serif;font-size:17px;line-height:1.55;
  letter-spacing:-.012em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:var(--go);color:#fff}

.wrap{max-width:1180px;margin:0 auto;padding-inline:var(--pad)}
.narrow{max-width:820px;margin:0 auto;padding-inline:var(--pad)}

h1,h2,h3{margin:0;letter-spacing:-.032em;font-weight:600;line-height:1.06}
.h1{font-size:clamp(38px,6.2vw,70px);letter-spacing:-.038em;line-height:1.02}
.h2{font-size:clamp(29px,4.2vw,48px)}
.h3{font-size:clamp(19px,2vw,23px);line-height:1.25;letter-spacing:-.022em}
.lede{font-size:clamp(17px,1.6vw,20px);line-height:1.55;color:var(--ink-2);max-width:44ch}
.small{font-size:14.5px;color:var(--ink-3);line-height:1.5}
.tag{display:inline-flex;align-items:center;gap:7px;background:var(--go-soft);color:var(--go-deep);
  border-radius:999px;padding:6px 14px;font-size:13px;font-weight:500;letter-spacing:-.006em}
.tag i{width:6px;height:6px;border-radius:99px;background:var(--go);display:block;flex:none}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--go);color:#fff;border:0;border-radius:999px;
  padding:16px 28px;font:inherit;font-weight:500;font-size:16.5px;cursor:pointer;white-space:nowrap;
  box-shadow:0 1px 2px rgba(21,20,15,.10),0 8px 24px -10px rgba(11,110,79,.45);
  transition:transform 140ms var(--ease-out),background-color 180ms ease,box-shadow 180ms ease}
.btn:active{transform:scale(.975)}
.btn svg{width:15px;height:15px;transition:transform 200ms var(--ease-out)}
.btn--lg{padding:19px 34px;font-size:17.5px}
.btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--edge)}
.btn--white{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(21,20,15,.12),0 10px 30px -12px rgba(21,20,15,.4)}
@media (hover:hover) and (pointer:fine){
  .btn:hover{background:var(--go-deep)}
  .btn:hover svg{transform:translateX(3px)}
  .btn--ghost:hover{background:var(--paper-2)}
  .btn--white:hover{background:#fff}
}

/* Reveal */
.rise{opacity:0;transform:translateY(16px);
  transition:opacity 640ms var(--ease-out),transform 640ms var(--ease-out)}
.rise.in{opacity:1;transform:none}
.stagger>*{opacity:0;transform:translateY(12px);
  transition:opacity 520ms var(--ease-out),transform 520ms var(--ease-out)}
.stagger.in>*{opacity:1;transform:none}
.stagger.in>*:nth-child(2){transition-delay:60ms}
.stagger.in>*:nth-child(3){transition-delay:120ms}
.stagger.in>*:nth-child(4){transition-delay:180ms}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rise,.stagger>*{transform:none!important;transition:opacity 240ms ease!important}
  .btn:active{transform:none}
}

/* ============ VOLLBILD-HERO ============ */
.cover{position:relative;min-height:100svh;display:flex;align-items:flex-end;
  isolation:isolate;overflow:hidden}
.cover picture,.cover img{position:absolute;inset:0;z-index:-2}
.cover img{width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.cover::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(12,11,9,.94) 0%,rgba(12,11,9,.86) 30%,
    rgba(12,11,9,.52) 62%,rgba(12,11,9,.34) 100%)}
@media(min-width:900px){
  .cover{align-items:center}
  .cover img{object-position:70% 40%}
  .cover::before{background:linear-gradient(100deg,rgba(12,11,9,.93) 0%,rgba(12,11,9,.84) 34%,
    rgba(12,11,9,.42) 64%,rgba(12,11,9,.14) 100%)}
}
.cover .in{position:relative;width:100%;max-width:1180px;margin-inline:auto;
  padding-inline:var(--pad);
  padding-block:clamp(110px,16vh,170px) calc(clamp(34px,6vh,72px) + env(safe-area-inset-bottom))}
.cover .col{max-width:15ch}
@media(min-width:640px){.cover .col{max-width:20ch}}
.cover h1{color:#fff;font-size:clamp(40px,8.4vw,78px);letter-spacing:-.042em;line-height:1.02;
  margin-top:18px;text-shadow:0 2px 40px rgba(0,0,0,.45)}
.cover h1 .sub2{color:rgba(255,255,255,.62)}
.cover .lede{color:rgba(255,255,255,.86);max-width:34ch;margin-top:18px;
  font-size:clamp(16px,1.6vw,20px);line-height:1.5;text-shadow:0 1px 24px rgba(0,0,0,.5)}
@media(min-width:640px){.cover .lede{max-width:40ch}}
.cover .tag{background:rgba(255,255,255,.15);color:#fff;backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.2);white-space:nowrap;gap:8px}
.cover .tag b{font-weight:600}
.cover .trust{color:rgba(255,255,255,.7);margin-top:24px;font-size:13.5px}
.cover .trust svg{color:#6EE7A8}

.cta1{margin-top:30px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.cta1 .btn{font-size:17.5px;padding:19px 34px;
  box-shadow:0 2px 6px rgba(0,0,0,.28),0 18px 46px -14px rgba(11,110,79,.85)}
.cta1 .under{font-size:13.5px;color:rgba(255,255,255,.66);line-height:1.5}
.cta1 .under a{color:#fff;text-decoration:underline;text-underline-offset:3px}

.scrollcue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:2;
  color:rgba(255,255,255,.45);display:grid;place-items:center;gap:6px;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase}
.scrollcue i{display:block;width:1px;height:28px;
  background:linear-gradient(rgba(255,255,255,.5),transparent);
  animation:cue 2.4s var(--ease-in-out) infinite}
@keyframes cue{0%,100%{opacity:.25;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}
@media(max-width:900px){.scrollcue{display:none}}
@media (prefers-reduced-motion:reduce){.scrollcue i{animation:none}}