/* ==========================================================================
   RDN Recruiting – Landingpage Bauleiter (m/w/d)
   Baut auf den Tokens aus css/tokens/ auf. Mobile first.
   ========================================================================== */

/* --- Grundlagen -------------------------------------------------------- */

body{background:var(--white);color:var(--anthrazit-950);font-family:var(--font-body)}
a{color:var(--rdn-red)}
a:hover{color:var(--rdn-red-press)}

.page{overflow-x:hidden}

@keyframes rdn-kenburns{from{transform:scale(1)}to{transform:scale(1.08)}}
@keyframes rdn-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes rdn-marquee-run{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes rdn-pop-in{0%{transform:scale(.6)}70%{transform:scale(1.1)}100%{transform:scale(1)}}

/* [hidden] muss das display:flex der Komponenten schlagen */
[hidden]{display:none !important}

.accent{color:var(--rdn-red)}

/* Scroll-Reveal: greift nur, wenn JS läuft – sonst ist alles sofort sichtbar.
   Die Regeln stehen bewusst weit oben, damit spätere :active-Zustände
   (z. B. .card:active) den transform-Wert wieder überschreiben können. */
.js [data-reveal]{opacity:0;transform:translateY(var(--reveal-distance));
                  transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.js [data-reveal].is-visible{opacity:1;transform:none}

/* --- Sektionen & Container --------------------------------------------- */

.section{padding:clamp(56px,9vw,96px) clamp(20px,5vw,40px)}
.section--light{background:var(--white)}
.section--warm{background:var(--warm-50)}
.section--dark{background:var(--anthrazit-950);color:var(--paper-100)}
.section--contact{padding:clamp(48px,8vw,80px) clamp(20px,5vw,40px)}

.wrap{max-width:var(--content-max);margin:0 auto;display:flex;flex-direction:column}
.wrap--gap-16{gap:var(--space-4)}
.wrap--gap-28{gap:28px}
.wrap--gap-32{gap:var(--space-8)}
.wrap--center{gap:28px;align-items:center}
.wrap--row{flex-direction:row;flex-wrap:wrap;gap:28px;align-items:center}

.h2{margin:0;font-family:var(--font-display);font-weight:var(--weight-black);
    text-transform:uppercase;font-size:clamp(34px,6vw,56px);line-height:.96}
.h2--start{align-self:flex-start}
.h2--sm{font-size:clamp(30px,5vw,44px);line-height:.98}

.lead{margin:0;font-size:20px;line-height:1.5;max-width:60ch}

/* --- Handgezeichnete Markierungen --------------------------------------- */

.u-mark{position:relative;white-space:nowrap}
/* Der Text behält seine Farbe, nur der gezeichnete Strich ist rot. */
.u-mark>svg{color:var(--rdn-red)}
/* In den Benefit-Karten saß die Markierung im Entwurf auf einem Block-Element. */
.card__lead .u-mark{display:inline-block}

.u-mark__line{position:absolute;left:-2%;bottom:-10px;width:104%;height:12px;overflow:visible}
.u-mark__strike{position:absolute;left:-6px;top:24px;width:calc(100% + 12px);height:16px;overflow:visible}
.u-mark__under{position:absolute;left:-4px;bottom:-8px;width:calc(100% + 8px);height:14px;overflow:visible}
.u-mark__under--h2{left:0;bottom:-8px;width:100%;height:12px}
.u-mark--circle{padding:2px 14px 0 4px}
.u-mark__circle{position:absolute;left:-8px;top:-8px;width:calc(100% + 16px);height:calc(100% + 14px);overflow:visible}

/* --- 1 Hero ------------------------------------------------------------- */

.hero-section{background:var(--anthrazit-950)}

.hero{position:relative;container-type:inline-size;min-height:560px;overflow:hidden;
      display:flex;flex-direction:column;justify-content:space-between;
      padding:20px clamp(20px,4vw,56px) 56px;color:var(--paper-100)}

.hero__img{position:absolute;left:0;width:100%;height:auto;max-width:none;
           top:calc(350px - 88.5cqw);
           animation:rdn-kenburns 26s ease-out infinite alternate;transform-origin:50% 60%}

.hero__scrim{position:absolute;inset:0;
  background:linear-gradient(to bottom,
    rgba(18,19,20,.78) 0,
    rgba(18,19,20,.5) 34%,
    rgba(18,19,20,0) 52%,
    rgba(18,19,20,0) 66%,
    rgba(18,19,20,.82) 100%)}

.hero__top{position:relative;display:flex;flex-direction:column;gap:14px;max-width:640px}

.hero__logo{width:104px;height:auto;align-self:flex-start}

.hero__title{margin:6px 0 0;font-family:var(--font-display);font-weight:var(--weight-black);
             text-transform:uppercase;font-size:clamp(34px,6.4vw,68px);line-height:.96;
             letter-spacing:var(--tracking-display);text-wrap:balance;
             animation:rdn-up .6s .1s both var(--ease-out)}

.hero__sub{margin:6px 0 0;font-size:clamp(17px,2.4vw,21px);line-height:1.4;max-width:36ch;
           animation:rdn-up .6s .2s both var(--ease-out)}
.hero__sub>span{background:var(--anthrazit-950);padding:4px 12px;line-height:1.7;
                box-decoration-break:clone;-webkit-box-decoration-break:clone}

.hero__badges{position:relative;margin:0;padding:0;list-style:none;
              display:flex;flex-wrap:wrap;gap:var(--space-2);
              animation:rdn-up .6s .32s both var(--ease-out)}
.hero__badges li{background:var(--white);color:var(--anthrazit-950);font-weight:var(--weight-semibold);
                 font-size:15px;line-height:1;padding:11px 14px;border-radius:var(--radius-m)}

/* --- 2 Formular --------------------------------------------------------- */

.form-band{position:relative;padding:0 var(--gutter) 56px;background:var(--warm-50);
           display:flex;justify-content:center}

.form-card{width:100%;max-width:520px;background:var(--white);border-radius:var(--radius-m);
           padding:22px 20px 24px;box-shadow:0 4px 24px rgba(0,0,0,.12);
           display:flex;flex-direction:column;gap:var(--space-4);
           margin-top:-40px;position:relative}

.form{display:flex;flex-direction:column;gap:var(--space-4)}

.form__hint{margin:0;font-size:15px;line-height:1.35;font-weight:var(--weight-medium);color:#3a3c3e}

.form__progress{display:flex;align-items:center;gap:var(--space-3)}

.form__back{width:48px;height:48px;flex:none;border:var(--border-w) solid #d8d4cd;
            background:var(--white);border-radius:var(--radius-m);font-size:22px;cursor:pointer;
            color:var(--anthrazit-950);line-height:1}
.form__back:hover{border-color:var(--anthrazit-950)}

.progress{flex:1;height:10px;background:var(--warm-100);border-radius:var(--radius-pill);overflow:hidden}
.progress__fill{height:100%;width:16.6667%;background:var(--rdn-red);border-radius:var(--radius-pill);
                transition:width .3s ease-out}

.form__step{font-size:14px;font-weight:var(--weight-semibold);color:#555;white-space:nowrap}

.form__question{margin:0;font-family:var(--font-display);font-weight:var(--weight-black);
                text-transform:uppercase;font-size:30px;line-height:1;outline-offset:6px}

.answers{display:flex;flex-direction:column;gap:10px}

.ans{min-height:60px;text-align:left;padding:12px 16px;font-family:var(--font-body);
     font-size:18px;font-weight:var(--weight-semibold);line-height:1.2;color:var(--anthrazit-950);
     background:var(--white);border:var(--border-w) solid #d8d4cd;border-radius:var(--radius-m);
     cursor:pointer;
     transition:transform var(--dur-fast) var(--ease-out),border-color var(--dur-fast),background var(--dur-fast)}
.ans.is-selected{border-color:var(--rdn-red)}
.ans:hover{border-color:var(--anthrazit-950)}
.ans:active{transform:scale(.98);background:var(--warm-50)}

.fields{display:flex;flex-direction:column;gap:10px}
.fields__note{margin:-4px 0 0;font-size:14px;color:#555}

.field{height:56px;padding:0 16px;font-family:var(--font-body);font-size:18px;
       border:var(--border-w) solid #d8d4cd;border-radius:var(--radius-m);
       background:var(--white);color:var(--anthrazit-950)}
[data-step-plz] .field{height:60px;font-size:20px}
[data-step-plz] .btn{height:60px}

.consent{display:flex;gap:var(--space-3);align-items:flex-start;font-size:15px;line-height:1.4;
         color:#333;cursor:pointer;min-height:48px}
.consent input{width:26px;height:26px;flex:none;margin:2px 0 0;accent-color:var(--rdn-red)}

.form__error{margin:0;font-size:15px;font-weight:var(--weight-semibold);color:var(--error)}

/* --- Erfolgsansicht ----------------------------------------------------- */

.success{display:flex;flex-direction:column;gap:var(--space-4);align-items:flex-start;padding:10px 0}
.success__mark{width:64px;height:64px;border:var(--border-w) solid var(--anthrazit-950);
               box-shadow:var(--offset-3d) calc(-1 * var(--offset-3d)) 0 0 var(--rdn-red);
               background:var(--white);display:flex;align-items:center;justify-content:center;
               animation:rdn-pop-in .4s ease-out}
.success__mark svg{width:36px;height:36px}
.success__title{margin:8px 0 0;font-family:var(--font-display);font-weight:var(--weight-black);
                text-transform:uppercase;font-size:38px;line-height:.98;outline-offset:6px}
.success__text{margin:0;font-size:19px;line-height:1.45}

/* --- Buttons ------------------------------------------------------------ */

.btn{transition:transform var(--dur-fast) var(--ease-out),background var(--dur-fast),box-shadow var(--dur-fast);
     cursor:pointer;border:0;font-family:var(--font-body)}
.btn:hover{box-shadow:var(--offset-3d) calc(-1 * var(--offset-3d)) 0 -2px var(--white),
                      var(--offset-3d) calc(-1 * var(--offset-3d)) 0 0 var(--anthrazit-950)}
.btn:active{transform:scale(.97)}

.btn--primary{background:var(--rdn-red);color:var(--text-on-accent);border-radius:var(--radius-m);
              font-family:var(--font-display);font-weight:var(--weight-black);font-size:24px;
              letter-spacing:.03em;text-transform:uppercase;text-decoration:none}
.btn--submit{height:64px;font-size:26px}

.btn--link{align-self:flex-start;display:inline-flex;align-items:center;justify-content:center;
           min-height:60px;padding:0 32px;font-size:26px}

.btn--outline{background:var(--white);color:var(--anthrazit-950);
              border:var(--border-w) solid var(--anthrazit-950);border-radius:var(--radius-m);
              text-decoration:none}

/* --- 3 Vorteile --------------------------------------------------------- */

.benefits{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:20px}

.card{background:var(--warm-50);border-radius:var(--radius-m);padding:var(--space-6);
      display:flex;flex-direction:column;gap:10px;
      transition:transform .25s var(--ease-out),box-shadow .25s}
.card:hover{box-shadow:var(--offset-3d) calc(-1 * var(--offset-3d)) 0 -2px var(--white),
                       var(--offset-3d) calc(-1 * var(--offset-3d)) 0 0 var(--rdn-red),
                       0 6px 20px rgba(0,0,0,.08)}
.card:active{transform:scale(.98)}

.card__lead{font-family:var(--font-display);font-weight:var(--weight-black);font-size:56px;
            line-height:1;text-transform:uppercase;align-self:flex-start}
.card__lead--sm{font-size:44px;line-height:1.1}

.card__title{margin:0;font-family:var(--font-display);font-weight:var(--weight-black);
             text-transform:uppercase;font-size:26px}
.card__text{margin:0;font-size:17px;line-height:1.5}

/* --- 4 Laufband --------------------------------------------------------- */

.marquee{background:var(--anthrazit-950);padding:20px 0;overflow:hidden}
.marquee__track{display:flex;width:max-content;animation:rdn-marquee-run 60s linear infinite}
.marquee__track img{height:clamp(180px,28vw,280px);max-width:none;object-fit:cover;
                    border-radius:var(--radius-s);margin-right:12px}
.marquee:hover .marquee__track,.marquee:active .marquee__track{animation-play-state:paused}

/* --- 5 Alltag ----------------------------------------------------------- */

.alltag{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:var(--space-6)}
.alltag__col{display:flex;flex-direction:column;gap:var(--space-4)}
/* height:auto ist nötig, sonst gewinnt das height-Attribut gegen aspect-ratio. */
.alltag__img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-m)}
.alltag__title{margin:0;font-family:var(--font-display);font-weight:var(--weight-black);
               text-transform:uppercase;font-size:30px;color:var(--rdn-red)}
.alltag__text{margin:0;font-size:18px;line-height:1.5;max-width:46ch}
.alltag__closing{margin:8px 0 0;font-size:20px;line-height:1.45;max-width:52ch;font-weight:var(--weight-medium)}

/* --- 6 Video ------------------------------------------------------------ */

.vid{position:relative;aspect-ratio:9/16;width:100%;max-width:360px;
     overflow:hidden;border-radius:var(--radius-m);background:var(--anthrazit-900)}
.vid__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.vid__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
           width:88px;height:88px;border-radius:50%;background:var(--rdn-red);
           display:flex;align-items:center;justify-content:center}
.vid__play:active{transform:translate(-50%,-50%) scale(.97)}
.vid__play svg{width:34px;height:34px;margin-left:5px}
.vid__note{position:absolute;left:12px;right:12px;bottom:12px;background:rgba(18,19,20,.9);
           padding:12px 14px;font-size:16px;line-height:1.35;border-radius:var(--radius-m)}

/* --- 7 Passt das zu dir ------------------------------------------------- */

.profile{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:14px;max-width:720px}
.profile li{display:flex;gap:var(--space-4);align-items:flex-start;font-size:19px;line-height:1.45;
            font-weight:var(--weight-medium)}
.profile__check{width:34px;height:34px;flex:none;margin-top:-2px;overflow:visible;color:var(--rdn-red)}
.profile__note{margin:6px 0 0;font-size:16px;line-height:1.45;color:#555;max-width:60ch}

/* --- 8 Ablauf ----------------------------------------------------------- */

.steps{margin:0;padding:0;list-style:none;
       display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:28px}
.steps__item{display:flex;flex-direction:column;gap:14px}
.steps__num{width:72px;height:72px;border:var(--border-w) solid var(--anthrazit-950);
            box-shadow:var(--offset-3d) calc(-1 * var(--offset-3d)) 0 0 var(--rdn-red);
            display:flex;align-items:center;justify-content:center;
            font-family:var(--font-display);font-weight:var(--weight-black);font-size:44px}
.steps__title{margin:8px 0 0;font-family:var(--font-display);font-weight:var(--weight-black);
              text-transform:uppercase;font-size:28px}
.steps__text{margin:0;font-size:18px;line-height:1.5}

/* --- 9 Ansprechpartner -------------------------------------------------- */

.contact{display:flex;flex-direction:column;gap:18px;flex:1 1 280px}
.contact__actions{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.btn--contact{display:inline-flex;align-items:center;gap:14px;min-height:60px;padding:0 24px;
              font-family:var(--font-body);font-size:22px;font-weight:var(--weight-semibold);
              letter-spacing:normal;text-transform:none}
.contact__glyph{font-family:var(--font-display);font-weight:var(--weight-black);font-size:26px}

/* --- 10 Fußzeile -------------------------------------------------------- */

.footer{background:var(--anthrazit-950);color:var(--paper-100);padding:36px clamp(20px,5vw,40px) 120px}
.footer__logo{width:110px;height:auto}
.footer__addr{margin:0;font-size:16px;line-height:1.5;color:#d6d3cd}
.footer__nav{display:flex;gap:var(--space-6);font-size:16px}
.footer__nav a{color:var(--paper-100)}
.footer__nav a:hover{color:var(--paper-100)}

/* --- Sticky-Leiste (mobil) ---------------------------------------------- */

.sticky{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;
        padding:10px 16px calc(10px + env(safe-area-inset-bottom));
        background:var(--anthrazit-950);box-shadow:var(--shadow-sticky)}
.sticky[hidden]{display:none}
.sticky__btn{flex:1;display:flex;align-items:center;justify-content:center;min-height:56px}

/* --- Fokus -------------------------------------------------------------- */

input:focus,button:focus-visible,a:focus-visible{outline:3px solid var(--rdn-red);outline-offset:3px}

/* --- Desktop ------------------------------------------------------------ */

@media (min-width:900px){
  .vid{aspect-ratio:16/9;max-width:960px}
  .sticky{display:none !important}
}

/* --- Reduzierte Bewegung ------------------------------------------------ */

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important}
  .js [data-reveal]{opacity:1 !important;transform:none !important}
}

/* --- Honigtopf (Bot-Falle, nie sichtbar) -------------------------------- */

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* --- Feldfehler vom Server ---------------------------------------------- */

.field.is-invalid{border-color:var(--rdn-red)}