@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: italic;
  font-weight: 600 800;
  font-display: swap;
  src: url("schrift/schibsted-grotesk-italic-latin-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: italic;
  font-weight: 600 800;
  font-display: swap;
  src: url("schrift/schibsted-grotesk-italic-latin.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: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("schrift/schibsted-grotesk-normal-latin-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("schrift/schibsted-grotesk-normal-latin.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;
}
/* Work From Paradise – Startseite (Tonys Claude, 13.11.2026). Look wie Webseite/neu: Papier, Tinte, Koralle, Glas auf echten Bildern. */
:root{--papier:#FBF3E6;--papier-tief:#F2E5D1;--tinte:#1D3A31;--leise:#54594C;--koralle:#AE3D19;--koralle-tief:#923212;--salbei:#DDEBD6;--linie:#E8DCC8;--schrift:'Schibsted Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;--rand:clamp(20px,5vw,48px)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--papier);color:var(--tinte);font:400 1.0625rem/1.6 var(--schrift);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--koralle);outline-offset:3px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.springen{position:absolute;left:12px;top:-60px;z-index:50;background:var(--tinte);color:#fff;padding:10px 16px;border-radius:10px;text-decoration:none}
.springen:focus{top:12px}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 var(--rand)}
h1,h2,h3{margin:0;font-family:var(--schrift);text-wrap:balance;color:var(--tinte)}
p{margin:0}

/* Kopf */
.kopf{position:absolute;top:0;left:0;right:0;z-index:10;background:linear-gradient(180deg,rgba(251,243,230,.82) 0%,rgba(251,243,230,.55) 60%,rgba(251,243,230,0) 100%)}
.kopf .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px}
.marke{display:flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;font:italic 800 1.2rem/1 var(--schrift);letter-spacing:-.01em;white-space:nowrap}
.marke img{width:36px;height:36px}
.nav{display:flex;align-items:center;gap:6px}
.nav a.leicht{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;text-decoration:none;font-weight:500;border-radius:10px}
.nav a.leicht:hover{background:rgba(255,255,255,.55)}
@media (max-width:640px){.nav a.leicht{display:none}}
@media (max-width:420px){.marke{font-size:1rem;gap:8px}.marke img{width:32px;height:32px}.kopf .knopf.klein{padding:8px 14px;font-size:.9375rem}.kopf .wrap{gap:10px}}
@media (max-width:350px){.kopf .knopf.klein{display:none}}

/* Knöpfe */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 22px;border:0;border-radius:14px;background:var(--koralle);color:#fff;font:600 1rem/1.25 var(--schrift);text-align:center;text-decoration:none;cursor:pointer;transition:background-color .15s ease,transform .1s ease}
.knopf:hover{background:var(--koralle-tief)}
.knopf:active{transform:scale(.98)}
.knopf.zweit{background:rgba(255,255,255,.75);color:var(--tinte);box-shadow:inset 0 0 0 1.5px var(--tinte)}
.knopf.zweit:hover{background:#fff}
.knopf.klein{min-height:44px;padding:10px 18px}
.knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* Bühne: Bild hinter einem Abschnitt */
.buehne{position:relative;isolation:isolate;overflow:hidden}
.buehne > picture{position:absolute;inset:0;z-index:-2}
.buehne > picture img{width:100%;height:100%;object-fit:cover}
.buehne::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(251,243,230,.28)}

/* Start */
.held{min-height:100svh;display:flex;align-items:center;padding:110px 0 64px}
.held::after{background:linear-gradient(90deg,rgba(251,243,230,.95) 0%,rgba(251,243,230,.86) 40%,rgba(251,243,230,.2) 64%,rgba(251,243,230,0) 100%)}
.held .text{max-width:35rem}
.blickfang{font-style:italic;font-weight:800;font-size:clamp(2.2rem,1.2rem + 3.6vw,4.1rem);line-height:.98;letter-spacing:-.02em}
.held h1{margin-top:22px;font-weight:600;font-size:clamp(1.2rem,1rem + .7vw,1.55rem);line-height:1.3;max-width:28ch}
.vorspann{margin-top:16px;font-size:1.0625rem;max-width:34rem;color:var(--tinte)}
.zeile{margin-top:18px;font-size:.9375rem;color:var(--tinte)}
.zeile b{color:var(--tinte);font-weight:600}
@media (min-width:821px) and (max-width:1100px) and (min-aspect-ratio:5/4){
 .held::after{background:linear-gradient(90deg,rgba(251,243,230,.95) 0%,rgba(251,243,230,.9) 50%,rgba(251,243,230,.3) 62%,rgba(251,243,230,0) 70%)}
 .held > picture img{object-position:22% 50%}   /* 13.11.: Laptop ganz rechts neben dem Text, nicht angeschnitten */
}
@media (max-width:820px),(max-aspect-ratio:5/4){
 /* 13.11.: neues Startbild, Laptop im unteren Drittel. Text oben, Bild am unteren Rand, damit der Laptop frei unter dem Text steht */
 .held{align-items:flex-start;padding:96px 0 clamp(300px,80vw,560px)}
 .held > picture{top:auto;height:min(100%,calc(100vw * 16 / 9))}
 .held > picture img{object-position:50% 100%}
 .held::after{background:linear-gradient(180deg,rgba(251,243,230,.97) 0%,rgba(251,243,230,.93) 48%,rgba(251,243,230,.4) 64%,rgba(251,243,230,0) 76%)}
}

/* Glas */
.glas{background:rgba(255,255,255,.64);-webkit-backdrop-filter:blur(16px) saturate(1.15);backdrop-filter:blur(16px) saturate(1.15);border:1px solid rgba(255,255,255,.75);border-radius:22px;box-shadow:0 12px 40px rgba(29,58,49,.08)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.glas{background:rgba(255,255,255,.9)}}

.band{padding:clamp(72px,10vw,128px) 0}
.kicker{font-size:.8125rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--koralle-tief)}
#so-gehts::after{background:rgba(251,243,230,.55)}
.band h2{margin-top:10px;font-weight:800;font-size:clamp(1.7rem,1.2rem + 1.8vw,2.6rem);line-height:1.08;letter-spacing:-.015em;max-width:24ch}
.einleitung{margin-top:14px;max-width:40rem;font-size:1.0625rem}
/* Aufkleber (Tony 13.11.2026: Koffer-Spruch klein und schräg statt riesig oben) */
.kopf-zeile{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:26px 48px}
.aufkleber{position:relative;margin:0 6px 4px 0;max-width:17.5rem;padding:16px 20px 17px;background:#FFFDF6;color:var(--tinte);font-style:italic;font-weight:700;font-size:1.0625rem;line-height:1.3;border-radius:5px;box-shadow:0 1px 0 rgba(29,58,49,.06),0 14px 28px -14px rgba(29,58,49,.4);transform:rotate(-3.5deg)}
.aufkleber::before{content:"";position:absolute;top:-10px;left:50%;width:72px;height:20px;margin-left:-36px;background:rgba(221,235,214,.88);transform:rotate(3deg);border-radius:2px}
@media (max-width:640px){.aufkleber{font-size:1rem;max-width:16rem;margin-left:4px}}

/* Schritte */
.schritte{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:18px;margin:36px 0 0;padding:0;list-style:none}
.schritte li{padding:26px 24px 28px}
.nr{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--tinte);color:#fff;font-weight:700;font-size:.95rem}
.schritte h3{margin-top:14px;font-size:1.2rem;font-weight:700}
.schritte p{margin-top:8px;color:var(--leise)}
.ehrlich{margin-top:22px;max-width:46rem;padding:16px 20px;font-size:.9375rem;color:var(--leise)}

/* Arbeitgeber */
.ag{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);padding:clamp(28px,4vw,52px)}
@media (max-width:860px){.ag{grid-template-columns:minmax(0,1fr)}}
.haken{margin:0;padding:0;list-style:none;display:grid;gap:14px;align-content:start}
.haken li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:start}
.haken svg{width:28px;height:28px;flex:none}
.haken b{font-weight:600}
.deutsch{grid-column:1/-1;padding-top:18px;border-top:1px solid rgba(29,58,49,.14);font-size:.9375rem;color:var(--leise)}

/* Kontakt */
.kontakt{max-width:44rem;margin:0 auto;text-align:center;padding:clamp(28px,4vw,48px)}
.kontakt h2{margin-left:auto;margin-right:auto}
.kontakt .mail{display:inline-block;margin-top:18px;font-weight:700;font-size:clamp(1.15rem,1rem + .8vw,1.5rem);text-decoration:none;border-bottom:2px solid var(--koralle);overflow-wrap:anywhere}
.kontakt .knoepfe{justify-content:center}

/* Fuß */
.fuss{padding:36px 0 44px;font-size:.9375rem;color:var(--leise)}
.fuss .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;justify-content:space-between}
.fuss nav{display:flex;gap:4px 18px;flex-wrap:wrap}
.fuss nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--tinte)}
.fuss .marke{font-size:1.05rem}
.fuss .klein{width:100%;font-size:.8125rem}

/* Rechtstexte */
.recht{padding:120px 0 72px}
.recht .glas{max-width:48rem;padding:clamp(24px,4vw,44px)}
.recht h1{font-weight:800;font-size:clamp(1.9rem,1.4rem + 1.6vw,2.6rem);letter-spacing:-.015em}
.recht h2{margin-top:28px;font-size:1.15rem;font-weight:700}
.recht p{margin-top:12px}
.recht a{overflow-wrap:anywhere}