/* ============================================================
   SALLYTA CREATIVE — Karriereseite
   Digital Content Manager (m/w/d)
   jobs.sallyta.de
   ============================================================ */
/* ============================================================
     SALLYTA CREATIVE — Stellenanzeige
     CI-Tokens abgeleitet aus den offiziellen CI Guidelines v1.0
     ============================================================ */
  :root{
    --blue:#0A42FF;        /* SALLYTA Blue */
    --black:#0D0D0D;       /* Deep Black */
    --white:#FFFFFF;       /* Pure White */
    --n1:#111111;
    --n2:#1A1A1A;
    --n3:#333333;
    --n4:#666666;
    --n5:#F5F5F5;
    --line:rgba(255,255,255,.12);
    --line-dark:rgba(13,13,13,.10);
    /* Verlaufswelt aus CI: Blau -> Violett -> Cyan/Warm */
    --grad-brand:linear-gradient(120deg,#0A42FF 0%,#5B3BFF 38%,#8E5BFF 60%,#22C7E6 100%);
    --grad-warm:linear-gradient(120deg,#0A42FF 0%,#6D4BFF 45%,#C77BFF 70%,#F0B45A 100%);
    --grad-spectrum:linear-gradient(115deg,#0A42FF 0%,#6E45FF 30%,#B85BFF 50%,#FF7BB0 68%,#F3C24B 86%,#3BD17A 100%);
    --maxw:1080px;
    --pad:clamp(24px,6vw,96px);
    --r:20px;
    --r-lg:28px;
    --ease:cubic-bezier(.22,.61,.36,1);
  }

  /* PP Neue Montreal ist die offizielle Headline-Schrift (Lizenz).
     Für diese Vorschau wird eine nahe groteske Alternative genutzt.
     Fließtext = Inter (frei, CI-konform). */
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    background:var(--black);
    color:var(--white);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  .display{
    font-family:'Space Grotesk','Inter',sans-serif;
    font-weight:700;
    letter-spacing:-.02em;
    line-height:1.02;
  }

  /* ---------- Star (Brand Signature) ---------- */
  .star{display:inline-block;line-height:0}
  .star svg{display:block}
  @keyframes spin{to{transform:rotate(360deg)}}
  .star--spin svg{animation:spin 26s linear infinite;transform-origin:50% 50%}
  @media (prefers-reduced-motion:reduce){.star--spin svg{animation:none}}

  /* ---------- Section scaffolding ---------- */
  section{position:relative;padding:clamp(64px,11vw,140px) var(--pad)}
  .wrap{max-width:var(--maxw);margin:0 auto;position:relative;z-index:2}
  .light{background:var(--white);color:var(--black)}
  .dark{background:var(--black);color:var(--white)}

  .eyebrow{
    display:inline-flex;align-items:center;gap:10px;
    font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
    color:var(--blue);
  }
  .light .eyebrow{color:var(--blue)}
  .eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--blue)}

  h1{font-size:clamp(40px,8.5vw,92px)}
  h2{font-size:clamp(30px,5.2vw,56px);line-height:1.05;letter-spacing:-.02em}
  h3{font-size:clamp(20px,2.6vw,26px);letter-spacing:-.01em}
  .lead{font-size:clamp(17px,2.1vw,21px);line-height:1.55;font-weight:400}
  .muted{color:var(--n4)}
  .light .muted{color:var(--n4)}
  .dim{color:rgba(255,255,255,.62)}

  /* ============================================================
     SEITE 1 — HERO
     ============================================================ */
  .hero{
    min-height:100vh;display:flex;flex-direction:column;justify-content:space-between;
    padding-top:clamp(28px,5vw,48px);padding-bottom:clamp(40px,6vw,72px);
    background:var(--black);overflow:hidden;
  }
  .hero__glow{
    position:absolute;inset:0;z-index:0;pointer-events:none;
  }
  .hero__glow::before{
    content:"";position:absolute;width:120vw;height:120vw;max-width:1200px;max-height:1200px;
    right:-30%;top:-35%;border-radius:50%;
    background:var(--grad-brand);filter:blur(90px);opacity:.55;
  }
  .hero__glow::after{
    content:"";position:absolute;width:60vw;height:60vw;max-width:640px;max-height:640px;
    left:-12%;bottom:-22%;border-radius:50%;
    background:radial-gradient(circle,#22C7E6 0%,transparent 70%);filter:blur(80px);opacity:.30;
  }
  .hero__top{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:3;max-width:var(--maxw);margin:0 auto;width:100%}
  .hero__logo{width:clamp(132px,18vw,184px);height:auto}
  .hero__logo svg{width:100%;height:auto;display:block}
  .hero__tag{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55);font-weight:500}
  .hero__center{position:relative;z-index:3;max-width:var(--maxw);margin:0 auto;width:100%;flex:1;display:flex;flex-direction:column;justify-content:center;padding:clamp(40px,8vw,72px) 0}
  .hero__eyebrow{margin-bottom:26px;color:#fff}
  .hero__eyebrow .dot{background:#22C7E6}
  .hero h1{max-width:14ch}
  .hero h1 .accent{
    background:var(--grad-warm);-webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .hero__sub{
    margin-top:22px;font-size:clamp(15px,2.2vw,20px);font-weight:500;letter-spacing:.02em;
    color:rgba(255,255,255,.82);display:flex;gap:14px;align-items:center;flex-wrap:wrap;
  }
  .hero__sub .sep{width:5px;height:5px;border-radius:50%;background:#22C7E6;display:inline-block}
  .hero__intro{margin-top:30px;max-width:46ch;color:rgba(255,255,255,.72);font-size:clamp(16px,1.9vw,19px)}
  .hero__bottom{position:relative;z-index:3;max-width:var(--maxw);margin:0 auto;width:100%;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
  .cta{
    display:inline-flex;align-items:center;gap:12px;
    background:var(--white);color:var(--black);
    font-weight:600;font-size:16px;letter-spacing:-.01em;
    padding:17px 26px;border-radius:100px;text-decoration:none;
    transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease);
    box-shadow:0 0 0 0 rgba(10,66,255,0);
  }
  .cta:hover{transform:translateY(-2px);box-shadow:0 14px 40px -8px rgba(10,66,255,.55);background:var(--blue);color:#fff}
  .cta svg{transition:transform .3s var(--ease)}
  .cta:hover svg{transform:translate(4px)}
  .cta--ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.28)}
  .cta--ghost:hover{background:rgba(255,255,255,.06);color:#fff;box-shadow:none}
  .hero__meta{display:flex;gap:28px;flex-wrap:wrap;color:rgba(255,255,255,.6);font-size:14px}
  .hero__meta b{color:#fff;font-weight:600;display:block;font-size:15px;margin-bottom:2px}
  /* Eckdaten-Leiste */
  .facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
  .fact{display:inline-flex;align-items:center;gap:9px;padding:11px 16px;border:1px solid rgba(255,255,255,.16);border-radius:100px;background:rgba(255,255,255,.04);font-size:14px;color:rgba(255,255,255,.9);font-weight:500}
  .fact svg{width:16px;height:16px;color:#22C7E6;flex-shrink:0}
  .fact--pay{background:rgba(10,66,255,.16);border-color:rgba(127,160,255,.45);color:#fff}
  .fact--pay svg{color:#9DB4FF}
  .hero__star{position:absolute;right:var(--pad);top:50%;transform:translateY(-50%);z-index:1;opacity:.9;pointer-events:none}
  @media(max-width:760px){.hero__star{display:none}}

  /* ============================================================
     SEITE 2 — WER WIR SIND
     ============================================================ */
  .who__grid{display:grid;grid-template-columns:1fr;gap:clamp(40px,6vw,72px);align-items:start}
  @media(min-width:880px){.who__grid{grid-template-columns:1.05fr .95fr}}
  .who__lead h2{margin:24px 0 0}
  .who__statement{font-size:clamp(22px,3vw,30px);font-weight:500;line-height:1.3;letter-spacing:-.01em;color:var(--black)}
  .who__statement .hl{
    background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700;
  }
  .who__cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  @media(max-width:480px){.who__cards{grid-template-columns:1fr}}
  .vcard{
    border:1px solid var(--line-dark);border-radius:var(--r);padding:22px 22px 24px;
    background:#fff;transition:transform .3s var(--ease),border-color .3s var(--ease);
  }
  .vcard:hover{transform:translateY(-3px);border-color:rgba(10,66,255,.35)}
  .vcard .ic{width:38px;height:38px;color:var(--blue);margin-bottom:14px}
  .vcard h4{font-size:16px;font-weight:600;margin-bottom:6px;letter-spacing:-.01em}
  .vcard p{font-size:14px;line-height:1.5;color:var(--n4)}

  /* ============================================================
     SEITE 3 — AUFGABEN
     ============================================================ */
  .tasks__head{max-width:62ch}
  .tasks__head h2{margin:22px 0 16px}
  .tasks__grid{display:grid;grid-template-columns:1fr;gap:18px;margin-top:clamp(40px,6vw,64px)}
  @media(min-width:820px){.tasks__grid{grid-template-columns:repeat(3,1fr)}}
  .tcard{
    position:relative;border:1px solid var(--line);border-radius:var(--r-lg);
    padding:32px 30px 36px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
    overflow:hidden;transition:transform .35s var(--ease),border-color .35s var(--ease);
  }
  .tcard::before{
    content:"";position:absolute;inset:0;opacity:0;transition:opacity .4s var(--ease);
    background:radial-gradient(120% 80% at 100% 0%,rgba(10,66,255,.20),transparent 60%);
  }
  .tcard:hover{transform:translateY(-4px);border-color:rgba(10,66,255,.4)}
  .tcard:hover::before{opacity:1}
  .tcard__ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:rgba(10,66,255,.14);color:#7FA0FF;margin-bottom:22px;position:relative;z-index:2}
  .tcard__ic svg{width:24px;height:24px}
  .tcard h3{margin-bottom:16px;position:relative;z-index:2}
  .tcard ul{list-style:none;position:relative;z-index:2;display:flex;flex-direction:column;gap:11px}
  .tcard li{display:flex;gap:11px;font-size:15px;line-height:1.45;color:rgba(255,255,255,.78)}
  .tcard li svg{flex-shrink:0;margin-top:5px;width:14px;height:14px;color:var(--blue)}

  /* ============================================================
     SEITE 4 — DAS BRINGST DU MIT
     ============================================================ */
  .profile__grid{display:grid;grid-template-columns:1fr;gap:20px;margin-top:clamp(40px,6vw,60px)}
  @media(min-width:820px){.profile__grid{grid-template-columns:1fr 1fr}}
  .pbox{border-radius:var(--r-lg);padding:clamp(28px,4vw,40px);border:1px solid var(--line-dark)}
  .pbox--must{background:var(--black);color:#fff;border-color:transparent}
  .pbox--nice{background:var(--n5);color:var(--black)}
  .pbox__label{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin-bottom:22px}
  .pbox--must .pbox__label{color:#7FA0FF}
  .pbox--nice .pbox__label{color:var(--blue)}
  .pbox__label .tag{padding:4px 10px;border-radius:100px;font-size:11px;letter-spacing:.06em}
  .pbox--must .tag{background:rgba(127,160,255,.16)}
  .pbox--nice .tag{background:rgba(10,66,255,.10)}
  .plist{list-style:none;display:flex;flex-direction:column;gap:15px}
  .plist li{display:flex;gap:13px;font-size:15.5px;line-height:1.45}
  .pbox--must li{color:rgba(255,255,255,.85)}
  .pbox--nice li{color:var(--n3)}
  .plist .chk{flex-shrink:0;width:22px;height:22px;border-radius:7px;display:grid;place-items:center;margin-top:1px}
  .pbox--must .chk{background:var(--blue)}
  .pbox--nice .chk{background:#fff;border:1px solid var(--line-dark)}
  .plist .chk svg{width:12px;height:12px}
  .pbox--must .chk svg{color:#fff}
  .pbox--nice .chk svg{color:var(--blue)}
  .pbox__note{margin-top:24px;font-size:13.5px;line-height:1.5}
  .pbox--nice .pbox__note{color:var(--n4)}
  .pbox--must .pbox__note{color:rgba(255,255,255,.55)}

  /* ============================================================
     SEITE 5 — BENEFITS
     ============================================================ */
  .ben__head{max-width:60ch}
  .ben__head h2{margin:22px 0 0}
  .ben__grid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:clamp(40px,6vw,64px)}
  @media(min-width:620px){.ben__grid{grid-template-columns:1fr 1fr}}
  @media(min-width:920px){.ben__grid{grid-template-columns:repeat(3,1fr)}}
  .bcard{
    border:1px solid var(--line-dark);border-radius:var(--r);padding:28px 26px 30px;background:#fff;
    transition:transform .3s var(--ease),box-shadow .3s var(--ease);
  }
  .bcard:hover{transform:translateY(-4px);box-shadow:0 20px 44px -22px rgba(13,13,13,.28)}
  .bcard__ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;margin-bottom:20px;color:#fff}
  .bcard__ic svg{width:26px;height:26px}
  .bcard h4{font-size:17px;font-weight:600;letter-spacing:-.01em;margin-bottom:8px}
  .bcard p{font-size:14px;line-height:1.5;color:var(--n4)}
  /* je Benefit ein eigener Verlauf für die Illustration */
  .g1{background:linear-gradient(135deg,#0A42FF,#5B3BFF)}
  .g2{background:linear-gradient(135deg,#5B3BFF,#8E5BFF)}
  .g3{background:linear-gradient(135deg,#0A42FF,#22C7E6)}
  .g4{background:linear-gradient(135deg,#8E5BFF,#C77BFF)}
  .g5{background:linear-gradient(135deg,#0A42FF,#6D4BFF)}
  .g6{background:linear-gradient(135deg,#22C7E6,#0A42FF)}
  .g7{background:linear-gradient(135deg,#6E45FF,#FF7BB0)}

  /* ============================================================
     SEITE 6 — WARUM SALLYTA / CLOSING
     ============================================================ */
  .why{background:var(--black);overflow:hidden;text-align:center}
  .why__glow{position:absolute;inset:0;z-index:0;pointer-events:none}
  .why__glow::before{
    content:"";position:absolute;left:50%;top:-10%;transform:translateX(-50%);
    width:90vw;height:90vw;max-width:900px;max-height:900px;border-radius:50%;
    background:var(--grad-spectrum);filter:blur(110px);opacity:.34;
  }
  .why .wrap{display:flex;flex-direction:column;align-items:center}
  .why .star{margin-bottom:34px}
  .why h2{max-width:18ch;margin:0 auto}
  .why h2 .accent{background:var(--grad-warm);-webkit-background-clip:text;background-clip:text;color:transparent}
  .why__text{max-width:54ch;margin:28px auto 0;color:rgba(255,255,255,.74);font-size:clamp(16px,2vw,19px)}
  .why__cta{margin-top:44px;display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
  .why__how{
    margin-top:clamp(48px,7vw,72px);width:100%;max-width:760px;
    border:1px solid var(--line);border-radius:var(--r-lg);
    padding:clamp(28px,4vw,40px);background:rgba(255,255,255,.03);text-align:left;
  }
  .why__how h3{margin-bottom:24px;text-align:center}
  .steps{display:grid;grid-template-columns:1fr;gap:18px}
  @media(min-width:620px){.steps{grid-template-columns:repeat(3,1fr)}}
  .step{display:flex;flex-direction:column;gap:8px}
  .step__n{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:15px;color:var(--blue);letter-spacing:.04em}
  .step b{font-size:15px;font-weight:600}
  .step p{font-size:13.5px;color:rgba(255,255,255,.6);line-height:1.45}
  .why__contact{margin-top:36px;font-size:14px;color:rgba(255,255,255,.55)}
  .why__contact a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:1px}
  .why__contact a:hover{border-color:#fff}
  .why__note{margin-top:18px;font-size:11.5px;line-height:1.5;color:rgba(255,255,255,.4);max-width:62ch;margin-left:auto;margin-right:auto}

  /* ---------- Footer ---------- */
  footer{background:var(--black);border-top:1px solid var(--line);padding:34px var(--pad);text-align:center}
  .footer__in{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
  .footer__logo{width:128px}
  .footer__logo svg{width:100%;height:auto;display:block;opacity:.9}
  .footer__claim{font-size:13px;color:rgba(255,255,255,.5)}
  .footer__url{font-size:13px;color:rgba(255,255,255,.7);text-decoration:none}
  .footer__url:hover{color:#fff}

  /* ---------- Reveal animation ---------- */
  .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
  .reveal.in{opacity:1;transform:none}
  @media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

  .pbox--qual{background:var(--n5);border-left:4px solid var(--blue);}
  .pbox__note--highlight{
    margin-top:18px;font-size:14px;font-weight:600;
    color:var(--navy);line-height:1.5;
    padding:12px 16px;background:rgba(26,66,138,.06);
    border-radius:var(--r);
  }

  .footer__links{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .footer__sep{color:rgba(255,255,255,.25);font-size:12px}

  /* ---- Ansprechpartner Block ---- */
  .contact-block{
    margin-top:clamp(40px,6vw,64px);
    border:1px solid rgba(255,255,255,.1);
    border-radius:var(--r-lg);
    background:rgba(255,255,255,.03);
    padding:clamp(24px,4vw,40px);
    position:relative;
    overflow:hidden;
  }
  .contact-block::before{
    content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
    background:var(--grad-brand);
  }
  .contact-block__inner{
    display:flex;align-items:center;justify-content:space-between;
    gap:24px;flex-wrap:wrap;
  }
  .contact-block__label{
    font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
    color:rgba(255,255,255,.35);display:block;margin-bottom:12px;
  }
  .contact-block__name{
    font-size:clamp(20px,2.5vw,26px);font-weight:700;color:#fff;
    letter-spacing:-.02em;line-height:1.1;margin:0 0 4px;
  }
  .contact-block__role{
    font-size:14px;color:rgba(255,255,255,.45);margin:0;
  }
  .contact-block__right{
    display:flex;flex-direction:column;gap:12px;
  }
  .contact-block__link{
    display:inline-flex;align-items:center;gap:11px;
    font-size:16px;font-weight:500;color:#fff;text-decoration:none;
    padding:13px 20px;border:1px solid rgba(255,255,255,.12);
    border-radius:100px;background:rgba(255,255,255,.04);
    transition:background .25s ease,border-color .25s ease;
    white-space:nowrap;
  }
  .contact-block__link:hover{
    background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.28);
  }
  .contact-block__link svg{opacity:.6;flex-shrink:0}