/* ============================================================================
   Worker Roster V2 — „Depth Focus Roster" (Richtung V-B, ALPER WAHL 26.07.2026)
   Tiefenraum: Fokus scharf/hell, Nachbarn kontrolliert zurück. Kein Loop,
   kein Scroll-Hijacking, Akzent gescopt (nie :root), RM = stabiler Endzustand.
   No-JS: ohne .wr2-on rendert .wr2-list als lesbare gestapelte Karten (Parität).
   ========================================================================== */

.wr2-root{
  --acc:47,191,113;                 /* Start: Live-Grün (Fokus = Postfach) */
  --wr2-line:rgba(238,242,251,.14);
  --wr2-mut:rgba(238,242,251,.62);
  --wr2-ease:cubic-bezier(0.23,1,0.32,1);
  margin-top:34px;
}

/* ---------- Raum ---------- */
.wr2-room{position:relative;touch-action:pan-y}
.wr2-on .wr2-room{
  height:clamp(500px,64vh,640px);
  overflow:hidden;
  background:
    radial-gradient(90% 70% at 50% 108%, rgba(var(--acc),.13), transparent 60%),
    radial-gradient(120% 90% at 50% 46%, transparent 52%, rgba(3,4,8,.9) 100%);
}
.wr2-list{list-style:none;margin:0;padding:0}
.wr2-on .wr2-list{position:absolute;inset:0}

/* Ohne JS: gestapelte, vollständig lesbare Karten */
.wr2-item{max-width:560px;margin:0 auto 26px}
.wr2-on .wr2-item{
  position:absolute;top:50%;left:50%;
  width:min(540px,74%);max-width:none;margin:0;
  transform:translate(-50%,-50%);
  will-change:transform,filter,opacity;
}
.wr2-on .wr2-item[data-idle]{cursor:pointer}
.wr2-on .wr2-item:focus-within{outline:none}
.wr2-item:focus-visible{outline:2px solid rgba(95,168,255,1);outline-offset:4px;border-radius:18px}

/* ---------- Karte ---------- */
.wr2-card{
  display:block;border:1px solid var(--wr2-line);border-radius:16px;overflow:hidden;
  background:linear-gradient(180deg,rgba(22,27,42,.94),rgba(9,12,20,.97));
  box-shadow:0 26px 70px rgba(0,0,0,.6);
}
.wr2-shot{display:block;position:relative;aspect-ratio:16/6.9;overflow:hidden;border-bottom:1px solid var(--wr2-line)}
.wr2-shot img{width:100%;height:100%;object-fit:cover;object-position:top;filter:brightness(.84) saturate(.94);display:block}
.wr2-demotag{
  position:absolute;left:10px;bottom:10px;max-width:82%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:9px;letter-spacing:.07em;text-transform:uppercase;
  background:rgba(5,6,11,.66);border:1px solid rgba(238,242,251,.1);
  padding:3px 8px;border-radius:99px;color:rgba(238,242,251,.5);
}

/* Systemfläche für gebaute Stellen ohne Screenshot-Material:
   wirkt wie eine laufende Arbeitsoberfläche (Zeilen, Slots, Status) — gebaut, nicht Blaupause. */
.wr2-blueprint{
  display:block;position:relative;aspect-ratio:16/6.9;border-bottom:1px solid var(--wr2-line);
  background:
    radial-gradient(80% 90% at 50% 0%, rgba(var(--bacc),.10), transparent 70%),
    linear-gradient(180deg,#0c1120,#080b15);
  overflow:hidden;
}
.wr2-blueprint::before{
  content:"";position:absolute;left:7%;right:40%;top:14%;bottom:16%;
  border:1px solid rgba(238,242,251,.13);border-radius:10px;
  background:
    linear-gradient(rgba(238,242,251,.10) 2px, transparent 2px) 14% 22%/46% 34px no-repeat,
    linear-gradient(rgba(238,242,251,.07) 2px, transparent 2px) 14% 42%/60% 34px no-repeat,
    linear-gradient(rgba(238,242,251,.07) 2px, transparent 2px) 14% 62%/38% 34px no-repeat,
    linear-gradient(rgba(var(--bacc),.5) 2px, transparent 2px) 14% 82%/28% 34px no-repeat,
    linear-gradient(180deg,rgba(20,26,42,.85),rgba(12,16,28,.9));
}
.wr2-blueprint::after{
  content:"";position:absolute;right:8%;top:14%;bottom:16%;width:26%;
  border:1px solid rgba(var(--bacc),.35);border-radius:10px;
  background:
    radial-gradient(circle at 14% 20%, rgba(var(--bacc),.9) 3px, transparent 4px),
    radial-gradient(circle at 14% 45%, rgba(238,242,251,.4) 3px, transparent 4px),
    radial-gradient(circle at 14% 70%, rgba(238,242,251,.4) 3px, transparent 4px),
    linear-gradient(rgba(238,242,251,.09) 2px, transparent 2px) 30% 24%/52% 25px no-repeat,
    linear-gradient(rgba(238,242,251,.06) 2px, transparent 2px) 30% 49%/40% 25px no-repeat,
    linear-gradient(rgba(238,242,251,.06) 2px, transparent 2px) 30% 74%/46% 25px no-repeat,
    linear-gradient(180deg,rgba(16,22,36,.9),rgba(10,14,24,.92));
}

.wr2-meta{display:grid;gap:8px;padding:15px 20px 16px}
.wr2-badge{
  display:inline-flex;align-items:center;gap:7px;justify-self:start;margin:0;
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 11px;border-radius:99px;border:1px solid rgba(var(--bacc),.55);color:rgba(var(--bacc),1);
}
.wr2-badge .dot{
  width:6px;height:6px;border-radius:50%;background:rgba(var(--bacc),1);
  /* Live-Puls bewusst AN (Owner 27.07.: Sektion soll leben) — Statussignal, pausiert offscreen */
  box-shadow:0 0 8px rgba(var(--bacc),.55);
  animation:wr2pulse 2.4s ease-out infinite;
}
@keyframes wr2pulse{
  0%{box-shadow:0 0 0 0 rgba(var(--bacc),.5)}
  70%{box-shadow:0 0 0 9px rgba(var(--bacc),0)}
  100%{box-shadow:0 0 0 0 rgba(var(--bacc),0)}
}
.wr2-paused .wr2-badge .dot{animation-play-state:paused}

/* Ambient-Tiefe (Owner 27.07.): Nachbarn atmen minimal — genau EINE Dauerbewegung,
   nur auf nicht-fokussierten Karten, pausiert offscreen/hidden, RM aus. */
.wr2-on .wr2-item[data-idle] .wr2-card,
.wr2-on .wr2-item[data-idle] .wr2-ctacard{
  animation:wr2breathe 9s ease-in-out infinite alternate;
}
@keyframes wr2breathe{
  from{transform:translateY(0)}
  to{transform:translateY(-7px)}
}
.wr2-paused .wr2-item .wr2-card,
.wr2-paused .wr2-item .wr2-ctacard{animation-play-state:paused}

/* Entrance: Karten kommen einmalig gestaffelt aus der Tiefe (IO-getriggert) */
.wr2-on.wr2-pre .wr2-item{opacity:0 !important}
.wr2-enter .wr2-item{
  animation:wr2enter .7s cubic-bezier(0.23,1,0.32,1) backwards;
  animation-delay:calc(var(--wr2-i,0) * 90ms);
}
@keyframes wr2enter{
  from{opacity:0;transform:translate(-50%,-50%) translate3d(var(--wr2-x,0),26px,0) scale(.9)}
}
.wr2-badge--profil{border-style:dashed}
.wr2-meta h3{font-size:clamp(21px,2.4vw,28px);font-weight:800;line-height:1.1;margin:0;hyphens:manual}
.wr2-reife{
  font-size:12.5px;font-weight:600;color:rgba(var(--bacc),1);margin:0;
  border-left:2px solid rgba(var(--bacc),.8);padding-left:9px;line-height:1.4;
}
.wr2-nutzen{font-size:14px;color:rgba(238,242,251,.85);margin:0}

/* Aufgaben-Chips: „direkt checken, worum es geht" — kompakt, keine Textwand */
.wr2-chips{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 0;padding:0}
.wr2-chips li{
  font-size:11.5px;color:rgba(238,242,251,.78);
  border:1px solid rgba(238,242,251,.16);border-radius:99px;padding:4px 10px;
  background:rgba(238,242,251,.04);
}

/* Details nativ (summary/details) — No-JS voll nutzbar; im Raum als Layer über der Karte */
.wr2-details{margin:6px 0 0}
.wr2-details summary{
  list-style:none;cursor:pointer;display:inline-block;
  font-size:12.5px;font-weight:700;color:#eef2fb;
  background:rgba(238,242,251,.06);border:1px solid var(--wr2-line);
  border-radius:99px;padding:7px 14px;
  transition:transform .16s var(--wr2-ease),border-color .2s var(--wr2-ease);
}
.wr2-details summary::-webkit-details-marker{display:none}
.wr2-details summary:active{transform:scale(.97)}
.wr2-details summary:focus-visible{outline:2px solid rgba(95,168,255,1);outline-offset:2px}
@media(hover:hover) and (pointer:fine){ .wr2-details summary:hover{border-color:rgba(238,242,251,.4)} }
.wr2-dbody{padding:10px 2px 2px}
.wr2-dbody h4{
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(var(--bacc),1);margin:10px 0 2px;
}
.wr2-dbody ul{list-style:none;margin:0;padding:0}
.wr2-dbody li{padding:6px 0;border-bottom:1px solid rgba(238,242,251,.08);font-size:13px}
/* Im Raum: geöffnete Details liegen als Layer über der Kartenfläche */
.wr2-on .wr2-details[open] .wr2-dbody{
  position:absolute;inset:0;z-index:5;overflow:auto;
  background:rgba(9,12,20,.97);border-radius:16px;border:1px solid var(--wr2-line);
  padding:18px 20px 46px;
}
.wr2-on .wr2-details[open] summary{position:absolute;left:20px;bottom:10px;z-index:6}

/* CTA-Karte (verlinkt die Maßanfertigung — Haupt-CTA bleibt dort) */
.wr2-ctacard{
  display:grid;gap:12px;justify-items:center;text-align:center;
  border:1px dashed rgba(238,242,251,.28);border-radius:16px;
  padding:clamp(26px,4vw,44px);text-decoration:none;color:inherit;
  background:linear-gradient(180deg,rgba(16,20,32,.82),rgba(8,10,18,.9));
}
.wr2-ctacard .e{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--wr2-mut)}
.wr2-ctacard h3{font-size:clamp(21px,2.4vw,28px);margin:0}
.wr2-ctacard p{color:var(--wr2-mut);font-size:14px;max-width:34ch;margin:0}
.wr2-ctacard .btn{
  font-size:14px;font-weight:700;color:#0a0f1e;
  background:linear-gradient(180deg,#f2f6ff,#c9dcff);border-radius:12px;padding:12px 20px;
  transition:transform .16s var(--wr2-ease);
}
.wr2-ctacard:active .btn{transform:scale(.97)}

/* ---------- Steuerzeile ---------- */
.wr2-bar{display:none}
.wr2-on .wr2-bar{display:flex;align-items:center;gap:12px;padding:16px 2px 0;flex-wrap:wrap}
.wr2-nav{
  width:42px;height:42px;border-radius:50%;border:1px solid var(--wr2-line);
  background:rgba(238,242,251,.04);color:#eef2fb;cursor:pointer;font-size:17px;
  transition:transform .16s var(--wr2-ease),border-color .2s var(--wr2-ease);
}
.wr2-nav:active{transform:scale(.94)}
.wr2-nav:disabled{opacity:.35;cursor:default}
.wr2-nav:focus-visible{outline:2px solid rgba(95,168,255,1);outline-offset:2px}
@media(hover:hover) and (pointer:fine){ .wr2-nav:hover:not(:disabled){border-color:rgba(var(--acc),.8)} }
.wr2-ticks{display:flex;gap:6px;flex-wrap:wrap}
.wr2-tick{
  border:1px solid var(--wr2-line);border-radius:99px;cursor:pointer;
  background:rgba(238,242,251,.03);color:var(--wr2-mut);
  font-size:11px;font-weight:600;letter-spacing:.04em;padding:6px 11px;position:relative;overflow:hidden;
  transition:color .12s var(--wr2-ease),border-color .12s var(--wr2-ease),background .12s var(--wr2-ease);
}
.wr2-tick.on{color:#0a0f1e;background:rgba(var(--acc),.95);border-color:rgba(var(--acc),1);font-weight:700}
.wr2-tick:focus-visible{outline:2px solid rgba(95,168,255,1);outline-offset:2px}
.wr2-count{font-size:12px;letter-spacing:.14em;color:var(--wr2-mut)}
.wr2-hint{font-size:12px;color:var(--wr2-mut);margin-left:auto}
@media(max-width:700px){ .wr2-hint{display:none} }

/* ---------- Reduced Motion: sofortiger stabiler Endzustand ---------- */
@media (prefers-reduced-motion: reduce){
  .wr2-root *{transition-duration:.001s !important;animation:none !important}
  .wr2-details summary{transition:none !important}
}

/* ============================================================================
   Stellen-Funnel (Klick-Fragebogen, Owner 27.07.) — ohne JS: alle Fragen lesbar
   ========================================================================== */
.fnl{margin:22px 0 6px;max-width:640px}
.fnl-step{margin:0 0 26px}
.fnl-on .fnl-step{display:none;margin:0}
.fnl-on .fnl-step.on{display:block;animation:fnlin .32s cubic-bezier(0.23,1,0.32,1) backwards}
@keyframes fnlin{from{opacity:0;transform:translateY(12px)}}
.fnl-progress{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(238,242,251,.55);margin:0 0 12px}
.fnl-q{font-size:clamp(18px,2vw,22px);font-weight:800;margin:0 0 14px;color:#eef2fb}
.fnl-opts{display:flex;flex-wrap:wrap;gap:10px}
.fnl-opt{
  font:inherit;font-size:14px;font-weight:600;color:#eef2fb;cursor:pointer;
  background:rgba(238,242,251,.05);border:1px solid rgba(238,242,251,.16);
  border-radius:12px;padding:12px 18px;text-align:left;
  transition:transform .14s cubic-bezier(0.23,1,0.32,1),border-color .18s,background .18s;
}
.fnl-opt:active{transform:scale(.97)}
.fnl-opt:focus-visible{outline:2px solid rgba(95,168,255,1);outline-offset:2px}
@media(hover:hover) and (pointer:fine){
  .fnl-opt:hover{border-color:rgba(159,224,255,.7);background:rgba(159,224,255,.07)}
}
.fnl-result .fnl-text{font-size:15px;color:rgba(238,242,251,.88);margin:0 0 10px;max-width:52ch}
.fnl-honest{font-size:13px;color:rgba(238,242,251,.6);margin:0 0 18px}
.fnl-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin:0 0 14px}
.fnl-ctas .ws-cta-big{white-space:normal;text-align:center;max-width:100%}
.fnl-tel{font-size:14px;color:rgba(159,224,255,1)}
.fnl-back{
  font:inherit;font-size:12.5px;color:rgba(238,242,251,.55);cursor:pointer;
  background:none;border:0;padding:4px 0;text-decoration:underline;
}
.fnl-back:focus-visible{outline:2px solid rgba(95,168,255,1);outline-offset:2px}
@media (prefers-reduced-motion: reduce){
  .fnl-on .fnl-step.on{animation:none}
}