/* ============================================================================
   Recruiter-Journey (Public-Funnel /p/*) — Screens 01 Briefing · 02 Abgleich ·
   03 Treffer · 04 Zugang.

   QUELLE: freigegebene Standalone-Vorlage „Recruiter Journey (standalone).html".
   Deren erster Style-Block IST landing.css (gleiche Tokens/Grammatik) — hier
   steht ausschliesslich der journey-spezifische zweite Block, 1:1 übernommen
   und unter `.jr` gescoped, damit es keine Klassenkollision mit dem übrigen
   Landing-System gibt (z. B. `.sub`, das dort das Abo-Modul der Company-Page
   ist). Prototyp-Elemente der Vorlage (Screen-Rail, State-Schalter,
   Claim-Check-Notiz) sind bewusst NICHT übernommen — die Zustände kommen
   serverseitig aus dem Matching-Kern.

   Nicht neu interpretieren: Änderungen hier nur gegen die Vorlage.
   ========================================================================= */
.wrap.jr{max-width:calc(var(--max) + 2*var(--pad))}
/* Tokens, die landing.css verwendet, aber nicht in :root definiert (Flächen/Karten). */
.jr{--surf2:#EFEBE1;--card:#FFFFFF}
.jr .scr{padding:44px 0 0}
.jr h1.q{font-size:clamp(30px,3.7vw,46px);font-weight:600;letter-spacing:-.03em;line-height:1.04;margin:0;max-width:19ch;text-wrap:pretty}
.jr h1.q em{font-family:var(--serif);font-style:italic;font-weight:400}
.jr .sub{display:block;border:none;border-radius:0;padding:0;background:none;font-size:15.5px;line-height:1.7;color:var(--ink2);margin:18px 0 0;max-width:46ch}
.jr .sub b{color:var(--ink);font-weight:600}

/* 1 Briefing */
.jr .brief{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;margin-top:44px;max-width:var(--max);align-items:start}
@media(max-width:900px){.jr .brief{grid-template-columns:1fr;gap:28px}}
.jr .drop{border:1px dashed var(--line2);border-radius:14px;background:#fff;padding:38px 34px;text-align:left;display:block;width:100%;font-family:var(--sans);color:var(--ink);cursor:pointer}
.jr .drop:hover,.jr .drop.over{border-color:var(--ink)}
.jr .drop .lic{color:var(--accent)}
.jr .drop b{display:block;font-size:17px;font-weight:600;letter-spacing:-.015em;margin:14px 0 6px}
.jr .drop p{margin:0;font-size:13.5px;color:var(--ink2)}
.jr .drop .fmt{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);margin-top:18px}
.jr .drop.filled{border-style:solid}
.jr .drop.filled .lic{color:var(--accent-text)}
.jr .or{display:flex;align-items:center;gap:16px;font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink3);margin:20px 0}
.jr .or:before,.jr .or:after{content:'';flex:1;height:1px;background:var(--line)}
.jr .ta{width:100%;border:1px solid var(--line2);border-radius:14px;background:#fff;padding:20px 22px;font-family:var(--sans);font-size:14.5px;line-height:1.65;color:var(--ink);min-height:132px;resize:vertical}
.jr .ta::placeholder{color:var(--ink3)}
.jr .ta:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(31,181,232,.16)}
.jr .go-row{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:24px}
.jr .side dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink3)}
.jr .side dd{margin:8px 0 22px;font-size:13.5px;color:var(--ink2);line-height:1.6}
.jr .side dd b{color:var(--ink);font-weight:600}
.jr .mini{border:none;background:none;font:inherit;padding:0;cursor:pointer;font-size:13.5px;font-weight:600;color:var(--ink2);border-bottom:1px solid var(--line2);padding-bottom:3px}
.jr .mini:hover{color:var(--accent-text)}
.jr .fields{display:none;gap:12px;flex-wrap:wrap;margin-top:18px}
.jr .fields.on{display:flex}
.jr .fields input{flex:1 1 200px;border:1px solid var(--line2);border-radius:8px;padding:13px 15px;font-family:var(--sans);font-size:14px;background:#fff}

/* 2 Abgleich — bewusst leise */
.jr .wait{max-width:420px;padding:96px 0 140px;display:none}
.jr .wait.on{display:block}
.jr .wait-h{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);margin:0 0 22px}
.jr .steps{display:flex;flex-direction:column;gap:0}
.jr .st{display:grid;grid-template-columns:16px minmax(0,1fr);gap:12px;align-items:center;padding:11px 0;opacity:.3;transition:opacity .45s var(--ease)}
.jr .st.active,.jr .st.done{opacity:1}
.jr .st .txt{font-size:14.5px;color:var(--ink2);transition:color .35s var(--ease)}
.jr .st.active .txt{color:var(--ink)}
.jr .st.done .txt{color:var(--ink)}

/* Zustandsmarke: wartend = ruhiger Punkt, laufend = derselbe Punkt atmet, erledigt = Haken.
   Der Haken erscheint erst, wenn der Schritt wirklich fertig ist — er behauptet nichts. */
.jr .st .ind{position:relative;width:16px;height:16px;display:inline-grid;place-items:center}
.jr .st .ind i{width:6px;height:6px;border-radius:50%;background:var(--ink3);display:block;
  transition:background .3s var(--ease),opacity .25s var(--ease),transform .25s var(--ease)}
.jr .st .ind .lic{position:absolute;color:var(--accent);opacity:0;transform:scale(.7);
  transition:opacity .3s var(--ease),transform .3s var(--ease)}
.jr .st.active .ind i{background:var(--accent);animation:jr-breathe 1.6s ease-in-out infinite}
.jr .st.done .ind i{opacity:0;transform:scale(.4)}
.jr .st.done .ind .lic{opacity:1;transform:none}
@keyframes jr-breathe{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.75);opacity:.4}}

/* Dünne Laufspur unter den Schritten — das einzige durchgehend bewegte Element. */
.jr .wait-bar{height:2px;background:var(--line);margin:22px 0 0;overflow:hidden;position:relative}
.jr .wait-bar i{position:absolute;inset:0 auto 0 0;width:34%;background:var(--accent);opacity:.55;
  animation:jr-sweep 1.9s cubic-bezier(.4,0,.2,1) infinite}
@keyframes jr-sweep{0%{transform:translateX(-110%)}100%{transform:translateX(320%)}}

.jr .wait-n{margin:20px 0 0;font-size:12.5px;color:var(--ink3);line-height:1.6}
/* Zweite Zeile erscheint erst, wenn es wirklich länger dauert (große PDFs, Texterkennung). */
.jr .wait-long{margin:8px 0 0;font-size:12.5px;color:var(--ink3);line-height:1.6;opacity:0;
  transform:translateY(4px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.jr .wait-long.on{opacity:1;transform:none}
/* Dauert es länger, ersetzt die konkrete Auskunft den allgemeinen Satz — nicht beides zugleich. */
.jr .wait.long .wait-n{opacity:0;height:0;margin:0;overflow:hidden;transition:opacity .35s var(--ease)}

@media(prefers-reduced-motion:reduce){
  .jr .st.active .ind i{animation:none}
  .jr .wait-bar i{animation:none;width:100%;opacity:.3}
  .jr .wait-long{transition:none}
}

/* 3 Treffer */
.jr .read{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center;border:1px solid var(--line2);border-radius:12px;padding:14px 18px;margin:34px 0 0;max-width:var(--max);background:#fff}
@media(max-width:820px){.jr .read{grid-template-columns:1fr;gap:10px;align-items:start}}
.jr .read .lab{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.jr .chips{display:flex;flex-wrap:wrap;gap:7px}
.jr .chip{font-size:12.5px;font-weight:500;border:1px solid var(--line2);border-radius:6px;padding:5px 9px;display:inline-flex;align-items:center;gap:7px;background:#fff}
.jr .chip button{border:none;background:none;padding:0;cursor:pointer;color:var(--ink3);font-size:11px;line-height:1}
.jr .chip button:hover{color:var(--ink)}
.jr .chip.k{border-color:rgba(31,181,232,.45)}
.jr .read button.edit{font-size:13px;font-weight:600;color:var(--ink2);white-space:nowrap;display:inline-flex;gap:7px;align-items:center;background:none;border:none;cursor:pointer;font-family:var(--sans);padding:0}
.jr .read button.edit:hover{color:var(--ink)}
.jr .edit-req{display:none;max-width:var(--max);margin:14px 0 0;border:1px solid var(--line2);border-radius:12px;background:#fff;padding:20px 22px}
.jr .edit-req.on{display:block}
.jr .edit-req label{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);margin:0 0 7px}
.jr .edit-req .fld+.fld{margin-top:16px}
.jr .edit-req input,.jr .edit-req textarea{width:100%;border:1px solid var(--line2);border-radius:8px;padding:12px 14px;font-family:var(--sans);font-size:14.5px;line-height:1.6;color:var(--ink);background:#fff;resize:vertical}
.jr .edit-req input:focus,.jr .edit-req textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(31,181,232,.16)}
.jr .edit-req .hint{margin:6px 0 0;font-size:12px;color:var(--ink3);line-height:1.5}
.jr .edit-req .acts{display:flex;justify-content:flex-end;gap:16px;align-items:center;margin-top:18px}
.jr .recalc{margin:12px 0 0;font-size:12.5px;color:var(--ink3);max-width:var(--max)}
.jr .hits{max-width:var(--max);margin-top:14px}
.jr .hit-row{border-bottom:1px solid var(--line);padding:26px 0}
.jr .hit-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:start}
@media(max-width:760px){.jr .hit-top{grid-template-columns:1fr;gap:12px}}
.jr .hit-row h3{font-size:20px;font-weight:600;letter-spacing:-.02em;margin:0 0 7px}
.jr .hit-row .ln{font-size:12.5px;color:var(--ink3);margin-top:5px}
.jr .cover{font-family:var(--mono);font-size:22px;font-weight:700;letter-spacing:-.03em;text-align:right;line-height:1}
.jr .cover u{display:block;font-family:var(--sans);font-size:9.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--ink3);margin-top:5px}
.jr .why-line{margin:0 0 9px;font-size:16.5px;line-height:1.55;color:var(--ink);max-width:52ch}
.jr .why-line em{font-family:var(--serif);font-style:italic;font-weight:400;font-size:18px}
.jr .ev-lab{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink3);margin:0 0 2px}
.jr .evid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 44px;margin-top:18px}
@media(max-width:760px){.jr .evid{grid-template-columns:1fr}}
.jr .er{display:grid;grid-template-columns:18px minmax(0,1fr);gap:12px;padding:9px 0;border-top:1px solid var(--line);font-size:13.5px;align-items:baseline}
.jr .er .lic{color:var(--accent)}
.jr .er.open .lic{color:var(--warn)}
.jr .er b{font-weight:600}
.jr .er span{color:var(--ink3);font-size:12.5px;display:block;margin-top:2px}
.jr .er.open span{color:var(--warn-ink)}
.jr .locked{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center;padding:20px 0;border-bottom:1px solid var(--line);color:var(--ink3)}
.jr .locked b{font-size:17px;font-weight:600;letter-spacing:-.015em;color:var(--ink2);display:block;margin-bottom:5px}
.jr .locked .bar{display:flex;gap:5px;margin-top:8px}
.jr .locked .bar i{width:26px;height:4px;border-radius:2px;background:var(--line2);display:block}
.jr .locked .bar i.f{background:var(--accent)}
.jr .locked .lk{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;display:inline-flex;gap:7px;align-items:center}
.jr .rules{margin:26px 0 0;font-size:12.5px;color:var(--ink3);line-height:1.7;max-width:60ch}
.jr .loosen{max-width:var(--max);margin-top:34px;border-top:1px solid var(--line2);padding-top:18px}
.jr .lr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) auto;gap:28px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line)}
@media(max-width:820px){.jr .lr{grid-template-columns:1fr;gap:8px}}
.jr .lr b{font-size:15.5px;font-weight:600;letter-spacing:-.012em}
.jr .lr span{font-size:13.5px;color:var(--ink2);line-height:1.6}
.jr .cta-band{max-width:var(--max);margin-top:44px;padding-top:30px;border-top:1px solid var(--line2);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:center}
@media(max-width:760px){.jr .cta-band{grid-template-columns:1fr;gap:20px}}
.jr .cta-band b{font-size:22px;font-weight:600;letter-spacing:-.02em;display:block;margin-bottom:6px}
.jr .cta-band p{margin:0;font-size:14px;color:var(--ink2);max-width:52ch}
.jr .primary-act{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:34px;max-width:var(--max)}
.jr .primary-act p{margin:0;font-size:14px;color:var(--ink2);max-width:44ch}

/* 4 Zugang */
.jr .wall{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:64px;margin-top:40px;max-width:var(--max);align-items:start}
@media(max-width:900px){.jr .wall{grid-template-columns:1fr;gap:32px}}
.jr .wr{display:grid;grid-template-columns:110px minmax(0,1fr);gap:22px;padding:18px 0;border-top:1px solid var(--line);align-items:baseline}
.jr .wr:last-of-type{border-bottom:1px solid var(--line)}
.jr .wr dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink3)}
.jr .wr dd{margin:0;font-size:14.5px;line-height:1.65;color:var(--ink2)}
.jr .wr dd b{color:var(--ink);font-weight:600}
.jr .form{border:1px solid var(--line2);border-radius:14px;background:#fff;padding:28px}
.jr .form h3{font-size:18px;font-weight:600;letter-spacing:-.015em;margin:0 0 18px}
.jr .form label{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);margin:0 0 7px}
.jr .form input{width:100%;border:1px solid var(--line2);border-radius:8px;padding:14px 15px;font-family:var(--sans);font-size:14.5px;margin-bottom:12px;background:#fff}
.jr .form input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(31,181,232,.16)}
/* Ein festgelegtes Feld muss auch so aussehen. Die E-Mail steht in der Einladung fest; als
   normal gestyltes Eingabefeld sah sie aus, als koennte man sie aendern (Thomas, 26.08.2026). */
.jr .form input:disabled{background:var(--surf2);color:var(--ink2);cursor:default}
.jr .form input[type=checkbox]{width:auto;margin:0;flex:0 0 auto;accent-color:var(--ink)}
.jr .form label.agb{display:flex;gap:10px;align-items:flex-start;margin:6px 0 4px;font-family:var(--sans);font-size:12.5px;letter-spacing:normal;text-transform:none;color:var(--ink2);line-height:1.55;cursor:pointer}
.jr .form .agb a{color:var(--ink2);text-decoration:underline}
.jr .form .agb a:hover{color:var(--ink)}
.jr .form .btn{width:100%;justify-content:center;margin-top:6px}
.jr .form p{margin:16px 0 0;font-size:12px;color:var(--ink3);line-height:1.6}
.jr .err{border:1px solid rgba(201,74,58,.32);background:rgba(201,74,58,.07);border-radius:10px;padding:13px 15px;margin:0 0 18px;font-size:13px;line-height:1.55;color:#8C3A2E}
.jr .err div+div{margin-top:4px}

/* 5 Cockpit-Übergang / DOI */
.jr .hand{max-width:var(--max);margin-top:40px;border-top:1px solid var(--line2)}
.jr .hand-row{display:grid;grid-template-columns:1fr 1fr auto;gap:36px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--line)}
@media(max-width:820px){.jr .hand-row{grid-template-columns:1fr;gap:8px}}
.jr .hand-row b{font-size:18px;font-weight:600;letter-spacing:-.018em}
.jr .hand-row p{margin:0;font-size:14px;color:var(--ink2);line-height:1.6}
.jr .hand-row a{font-size:13px;font-weight:600;color:var(--ink2);white-space:nowrap;display:inline-flex;gap:7px;align-items:center}
.jr .btn-accent{background:var(--accent);color:#0A0A0A}
.jr .btn-accent:hover{background:#17a3d3}
.jr .btn:disabled{background:var(--surf2);color:var(--ink3);cursor:not-allowed}

/* CI4-Honeypot (Bootstrap-Utility ausserhalb der App-Shell nicht geladen) verstecken */
.jr .d-none,.jr #hpc{display:none!important}