/* ==========================================================================
   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:600px;overflow:hidden;
      display:flex;flex-direction:column;justify-content:space-between;
      padding:20px clamp(20px,4vw,56px) 56px;color:var(--paper-100);
      /* Bildausschnitt: auf dem Handy nah an den beiden Gesichtern, damit sie
         im freien Streifen zwischen Subline und Badges liegen. Das Foto ist
         querformatig und die Gesichter sitzen weit oben, deshalb braucht der
         Hero hier 600 px statt 560 px, sonst reicht der Platz nicht. */
      --hero-h:870px;
      --hero-x:calc(50% - 687px);
      --hero-y:0px;
      --hero-zoom:1.03}

/* Auf dem Handy wird das Bild über die HÖHE skaliert und an der Hero-Mitte
   ausgerichtet. Über die Breite skaliert wandern die Gesichter sonst bei
   jeder Gerätebreite woanders hin. */
.hero__img{position:absolute;left:var(--hero-x);top:var(--hero-y);
           height:var(--hero-h);width:auto;max-width:none;
           animation:rdn-kenburns-hero 26s ease-out infinite alternate;transform-origin:50% 38%}

@keyframes rdn-kenburns-hero{from{transform:scale(1)}to{transform:scale(var(--hero-zoom))}}

.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:700px){
  /* Auf dem Desktop endet der Text bei rund 570 px, der Hero ist aber viel
     breiter. Deshalb stehen die beiden hier rechts neben der Headline statt
     darunter. Dort stoert kein Textblock, und die Koepfe koennen deutlich
     weiter oben sitzen. */
  .hero{min-height:710px;--hero-h:max(1150px,66.7vw);--hero-x:min(0px,calc(100% - 0.9675 * var(--hero-h) - 40px));--hero-y:0px;--hero-zoom:1.05}
}

@media (min-width:900px){
  .sticky{display:none !important}
  /* Hochformat bleibt, nur etwas groesser. */
  .vid{max-width:420px}
}

/* --- 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)}

/* --- Video: das Recruiting-Video ist im Hochformat (9:16) gedreht, ------
   deshalb bleibt die Box auch auf dem Desktop hochkant und wird nur
   etwas breiter. Ein 16:9-Rahmen würde links und rechts schwarze
   Balken zeigen. */

.vid__el{position:absolute;inset:0;width:100%;height:100%;
         object-fit:cover;background:var(--anthrazit-950)}
.vid__el[hidden]{display:none !important}