/* qisses.com/bewerbung — „Die Anzeige für einen Menschen" · Tokens */
@font-face{font-family:"Gloock";src:url("../fonts/gloock-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Supreme";src:url("../fonts/supreme-vf.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;}
@font-face{font-family:"Supreme";src:url("../fonts/supreme-vf-italic.woff2") format("woff2");font-weight:100 900;font-style:italic;font-display:swap;}
@font-face{font-family:"Fragment Mono";src:url("../fonts/fragment-mono-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}

:root{
  --nacht:#0F1C2A; --nacht-hell:#17293A; --kreide:#F4F6F4; --tinte:#16222B; --nebel:#6C7A85;
  --gold:#F2B455; --gold-dunkel:#D9973A; --rot:#E6394A; --gruen:#38C172;
  --linie:rgba(22,34,43,.14); --linie-hell:rgba(244,246,244,.16);
  --rand:clamp(20px,5vw,72px); --kanal:640px; --buehne:1120px;
  --display:"Gloock",Georgia,"Times New Roman",serif;
  --body:"Supreme",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Fragment Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease-out:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:var(--body);font-size:18px;line-height:1.55;color:var(--tinte);background:var(--kreide);font-weight:400;overflow-x:hidden}
img,video,canvas{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-weight:400;font-family:var(--display);letter-spacing:-.005em}
h2{font-size:clamp(1.85rem,3.4vw,2.9rem);line-height:1.1;max-width:22ch;text-wrap:balance}
h3{font-size:clamp(1.3rem,2vw,1.7rem);line-height:1.2;margin-bottom:.45em}
p{max-width:var(--kanal)}
p+p{margin-top:1em}
strong{font-weight:650}
.mono{font-family:var(--mono);font-size:.78rem;letter-spacing:.01em;color:var(--nebel)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px;top:8px;background:var(--gold);color:var(--nacht);padding:8px 12px;z-index:100}
.skip:focus{left:8px}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100svh;background:var(--nacht);color:#fff;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;isolation:isolate}
.hero-video{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:15% 38%;opacity:0;transition:opacity 1.4s ease}
.hero-video.da{opacity:1}
.hero-poster{position:absolute;inset:0;z-index:-3;width:100%;height:100%;object-fit:cover;object-position:15% 38%}
@media (orientation:portrait){.hero-video,.hero-poster{object-position:50% 30%}.hero-schatten{background:linear-gradient(180deg,rgba(15,28,42,.38) 0%,rgba(15,28,42,0) 20%,rgba(15,28,42,0) 34%,rgba(15,28,42,.66) 56%,rgba(15,28,42,.97) 100%)}}
.hero-schatten{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(15,28,42,.35) 0%,rgba(15,28,42,0) 30%,rgba(15,28,42,0) 48%,rgba(15,28,42,.58) 74%,rgba(15,28,42,.94) 100%),
             linear-gradient(90deg,rgba(15,28,42,.62) 0%,rgba(15,28,42,.18) 45%,rgba(15,28,42,0) 70%)}
.hero-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:22px var(--rand) 0;font-family:var(--mono);font-size:.8rem;color:rgba(255,255,255,.82)}
.hero-kopf a{text-decoration:none;color:inherit;border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:2px;white-space:nowrap}
@media (max-width:720px){.hero-kopf a,.nur-desktop{display:none}.hero-kopf{font-size:.74rem}}
@media (max-width:380px){.hero-kopf{font-size:.68rem}}
.funnel.ruhe{opacity:0;pointer-events:none}
.hero-kopf a:hover{border-color:var(--gold);color:var(--gold)}
.hero-inhalt{position:relative;padding:0 var(--rand) clamp(36px,6vh,72px);max-width:960px}
.hero h1{font-size:clamp(1.85rem,4.05vw,3.75rem);line-height:1.06;max-width:20ch;text-shadow:0 2px 24px rgba(15,28,42,.5)}
.hero h1 .zeile{display:block;overflow:hidden}
.hero h1 .zeile>span{display:inline-block}
.hero-sub{margin-top:clamp(18px,2.4vh,28px);font-size:clamp(1.02rem,1.35vw,1.22rem);line-height:1.5;max-width:52ch;color:rgba(255,255,255,.9)}
.hero-aktion{margin-top:clamp(22px,3vh,34px);display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.hero-hinweis{font-family:var(--mono);font-size:.8rem;color:rgba(255,255,255,.72)}
.js .hero-sub,.js .hero-aktion,.js .hero-kopf{opacity:0}
.js .hero-sub.da,.js .hero-aktion.da,.js .hero-kopf.da{opacity:1;transition:opacity .9s var(--ease-out)}

.knopf{display:inline-flex;align-items:center;gap:12px;background:var(--gold);color:var(--nacht);font-weight:620;font-size:1.05rem;line-height:1;padding:17px 26px;border-radius:8px;text-decoration:none;border:0;cursor:pointer;font-family:var(--body);transition:background .2s,transform .2s var(--ease-out)}
.knopf:hover{background:#F7C979}
.knopf:active{transform:translateY(1px)}
.knopf svg{width:18px;height:18px}
.knopf[disabled]{opacity:.7;cursor:progress}

/* ---------- Sektionen ---------- */
section{padding:clamp(72px,9vw,128px) var(--rand)}
.innen{max-width:var(--buehne);margin:0 auto}
.kanal{max-width:var(--kanal)}
.sek-kopf{margin-bottom:clamp(28px,4vw,48px)}
.sek-kopf p{margin-top:18px;font-size:1.06rem;color:var(--nebel)}
.nacht{background:var(--nacht);color:#EEF2F4}
.nacht .mono{color:rgba(238,242,244,.62)}
.nacht h2,.nacht h3{color:#fff}

/* Funnel-Absatz */
.funnel-absatz{padding-top:clamp(64px,8vw,110px)}
.funnel-absatz p:first-of-type{font-size:1.14rem}
.marke{background:linear-gradient(transparent 62%,rgba(242,180,85,.55) 62%)}
.nacht .marke{background:linear-gradient(transparent 62%,rgba(242,180,85,.38) 62%)}

/* Zahlen-Ledger */
.zahlen{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(28px,4vw,48px) clamp(20px,3vw,40px);max-width:var(--buehne);margin:0 auto}
.zahl{grid-column:span 3;border-top:1px solid var(--linie);padding-top:16px}
.zahl.xl{grid-column:span 6}
.zahl strong{display:block;font-family:var(--display);font-weight:400;line-height:.95;letter-spacing:-.01em;color:var(--tinte)}
.zahl.xl strong{font-size:clamp(3.4rem,7.4vw,6.6rem)}
.zahl:not(.xl) strong{font-size:clamp(2.2rem,3.6vw,3.2rem)}
.zahl span{display:block;margin-top:12px;font-size:1rem;color:var(--nebel);max-width:30ch}
.zahl.xl span{font-size:1.06rem;max-width:34ch}
.zahlen-fuss{margin:clamp(28px,4vw,44px) auto 0;max-width:var(--buehne)}
@media (max-width:900px){.zahl{grid-column:span 6}.zahl.xl{grid-column:span 12}}
@media (max-width:480px){.zahl{grid-column:span 12}}

/* Geschichten */
.geschichten{display:grid;grid-template-columns:200px 1fr;column-gap:56px;row-gap:clamp(40px,5vw,64px);max-width:var(--buehne);margin:0 auto}
.geschichte{display:contents}
.geschichte aside{font-family:var(--mono);font-size:.78rem;line-height:1.7;color:var(--nebel);padding-top:6px}
.geschichte aside b{display:block;font-weight:400;color:var(--tinte)}
.geschichte article p{max-width:60ch}
@media (max-width:760px){.geschichten{grid-template-columns:1fr;row-gap:12px}.geschichte article{margin-bottom:28px}}

/* Werdegang */
.werdegang-wrap{display:grid;grid-template-columns:1fr 340px;gap:clamp(32px,5vw,80px);max-width:var(--buehne);margin:0 auto;align-items:start}
.werdegang{list-style:none}
.werdegang li{display:grid;grid-template-columns:118px 1fr;gap:20px;padding:20px 0;border-top:1px solid var(--linie)}
.werdegang li:last-child{border-bottom:1px solid var(--linie)}
.werdegang .wann{font-family:var(--mono);font-size:.8rem;color:var(--nebel);padding-top:5px}
.werdegang .wo{font-weight:650}
.werdegang .was{color:var(--nebel);font-size:1rem;margin-top:2px}
.werdegang .was b{font-weight:500;color:var(--tinte)}
.werdegang-figur{position:sticky;top:8vh}
.werdegang-lektion{margin-top:28px;font-size:1.06rem}
@media (max-width:820px){.werdegang-wrap{grid-template-columns:1fr}.werdegang-figur{position:static;width:min(240px,60%);margin:0 auto 12px}.werdegang li{grid-template-columns:1fr;gap:4px}}

/* Figur-Loops */
.figur{position:relative;width:100%;aspect-ratio:9/16}
.figur canvas{width:100%;height:auto}
.figur video{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;pointer-events:none}
.figur img.fallback{width:100%;height:auto}

/* Regeln: Scale / Iterate / Kill */
.regeln{max-width:var(--buehne);margin:0 auto}
.regel{display:grid;grid-template-columns:300px 1fr;gap:28px;padding:28px 0;border-top:1px solid var(--linie)}
.regel:last-of-type{border-bottom:1px solid var(--linie)}
.regel h3{font-size:clamp(1.7rem,2.7vw,2.45rem);line-height:1;margin:0}
.regel.skalieren h3{color:var(--gold-dunkel)}
.regel.abschalten h3{color:var(--rot)}
.regel p{max-width:58ch;padding-top:6px}
@media (max-width:700px){.regel{grid-template-columns:1fr;gap:10px}}

/* Zwei Arten */
.arten{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);max-width:var(--buehne);margin:0 auto}
.art p{max-width:46ch}
.branchen{margin:clamp(32px,4vw,48px) auto 0;max-width:var(--buehne)}
.branchen p{max-width:70ch}
@media (max-width:720px){.arten{grid-template-columns:1fr}}

/* Werkschau */
.werke{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,36px);max-width:var(--buehne);margin:0 auto}
.werk{text-decoration:none;color:inherit;display:block}
.werk .rahmen{aspect-ratio:16/10;overflow:hidden;border-radius:10px;background:#0b1520;box-shadow:0 10px 30px rgba(15,28,42,.18)}
.werk video,.werk img{width:100%;height:100%;object-fit:cover;object-position:top}
.werk b{display:block;margin-top:14px;font-weight:650}
.werk span{display:block;color:var(--nebel);font-size:.98rem;margin-top:2px}
.werk:hover b{text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:4px}
@media (max-width:760px){.werke{grid-template-columns:1fr}}

/* Formular */
.kontakt-wrap{display:grid;grid-template-columns:minmax(0,640px) 300px;gap:clamp(32px,5vw,96px);max-width:var(--buehne);margin:0 auto;align-items:end}
.kontakt-figur{align-self:end}
form{margin-top:32px}
.feld{margin-bottom:18px}
.feld label{display:block;font-size:.95rem;margin-bottom:8px;color:rgba(238,242,244,.85)}
.feld label small{color:rgba(238,242,244,.5);font-weight:400}
.feld input,.feld textarea{width:100%;font:inherit;color:#fff;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.2);border-radius:8px;padding:14px 16px;transition:border-color .2s,background .2s}
.feld input:focus,.feld textarea:focus{outline:none;border-color:var(--gold);background:rgba(255,255,255,.09)}
.feld textarea{min-height:110px;resize:vertical}
.zweispalt{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:560px){.zweispalt{grid-template-columns:1fr}}
.wahl{display:flex;gap:10px;flex-wrap:wrap}
.wahl label{position:relative;cursor:pointer}
.wahl input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer}
.wahl span{display:inline-block;padding:11px 16px;border:1px solid rgba(255,255,255,.25);border-radius:999px;font-size:.98rem;color:rgba(238,242,244,.9);transition:background .2s,color .2s,border-color .2s}
.wahl input:checked+span{background:var(--gold);color:var(--nacht);border-color:var(--gold);font-weight:600}
.wahl input:focus-visible+span{outline:3px solid var(--gold);outline-offset:3px}
.honig{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.form-fuss{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:26px}
.form-fehler{margin-top:16px;color:#FFB4BB;font-size:.98rem;display:none}
.form-fehler.da{display:block}
.direkt{margin-top:28px;font-size:.98rem;color:rgba(238,242,244,.72)}
.direkt a{color:#fff;text-decoration-color:var(--gold);text-underline-offset:4px}
.erfolg{display:none;margin-top:32px;padding:28px;border:1px solid rgba(242,180,85,.45);border-radius:12px;background:rgba(242,180,85,.07)}
.erfolg.da{display:block}
.erfolg h3{font-size:1.8rem}
.erfolg p{margin-top:12px}
.erfolg a{color:#fff;text-decoration-color:var(--gold);text-underline-offset:4px}
.cv-link{display:inline-flex;align-items:center;gap:8px;color:#fff;text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:2px;font-size:1rem}
.cv-link:hover{color:var(--gold)}
@media (max-width:820px){.kontakt-wrap{grid-template-columns:1fr}.kontakt-figur{width:min(220px,55%);margin:0 auto;order:-1}}

/* Fuß */
footer{background:var(--nacht);color:rgba(238,242,244,.66);padding:28px var(--rand) 120px;border-top:1px solid var(--linie-hell)}
footer .innen{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-family:var(--mono);font-size:.78rem;line-height:1.7}
@media (min-width:721px){footer .innen{padding-right:300px}}
footer a{color:rgba(238,242,244,.85)}

/* ---------- Signature: Funnel-Konsole ---------- */
.funnel{position:fixed;right:18px;bottom:18px;z-index:60;width:264px;background:rgba(15,28,42,.93);color:#DCE4EA;font-family:var(--mono);font-size:12.5px;line-height:1.55;border-radius:12px;padding:12px 14px 12px;box-shadow:0 14px 44px rgba(0,0,0,.4),inset 0 0 0 1px rgba(255,255,255,.08);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.funnel.da{opacity:1;transform:none}
.funnel.weg{display:none}
.funnel-kopf{display:flex;justify-content:space-between;align-items:center;gap:8px;color:#fff;margin-bottom:6px}
.funnel-kopf b{font-weight:400}
.funnel-kopf button{background:none;border:0;color:rgba(220,228,234,.6);font:inherit;cursor:pointer;padding:2px 4px;line-height:1}
.funnel-kopf button:hover{color:#fff}
.funnel-kurz{display:none}
.funnel-zeile{display:grid;grid-template-columns:14px 1fr auto;gap:10px;align-items:center;padding:3px 0;color:rgba(220,228,234,.55)}
.funnel-zeile.ok{color:#fff}
.funnel-zeile a{color:inherit;text-decoration:none}
.funnel-zeile a:hover{color:var(--gold)}
.punkt{width:10px;height:10px;border-radius:50%;border:1.5px solid rgba(220,228,234,.45);position:relative}
.ok .punkt{background:var(--gruen);border-color:var(--gruen)}
.ok .punkt::after{content:"";position:absolute;left:2.5px;top:.5px;width:3px;height:5px;border:solid #0F1C2A;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.funnel-zeit{color:rgba(220,228,234,.55);font-variant-numeric:tabular-nums}
.ok .funnel-zeit{color:rgba(220,228,234,.8)}
.funnel-urteil{margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.1);color:rgba(220,228,234,.6)}
.funnel-urteil b{font-weight:400;color:var(--gold)}
@media (max-width:720px){
  .funnel{left:12px;right:12px;bottom:12px;width:auto;padding:10px 14px}
  .funnel-kurz{display:flex;justify-content:space-between;align-items:center;gap:10px;color:#fff;cursor:pointer}
  .funnel-kurz .punkte{display:flex;gap:6px}.funnel-kurz .punkte>span{display:inline-flex}.punkt{display:inline-block}
  .funnel-lang{display:none;margin-top:8px}
  .funnel.offen .funnel-lang{display:block}
  .funnel.offen .funnel-kurz{border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:8px}
  .funnel-kopf{display:none}
}
@media (max-width:360px){body{font-size:17px}}

@media (prefers-reduced-motion:reduce){
  .hero-video{display:none}
  .js .hero-sub,.js .hero-aktion,.js .hero-kopf,.hero h1{opacity:1!important;transform:none!important}
  .funnel{transition:none}
  .knopf{transition:none}
}