/* TELACY ESPORTS — We're hiring (J1, 03.10.2026)
   Geladen auf hiring.html (/hiring und /hiring/<slug>) und dashboard.html
   (Bereiche Hiring und Applications). Baut auf site.css auf (Variablen,
   .ph, .sh, .fbox, .f, .pill, .btn, .empty). Designsprache: Schwarz und
   Weiss tragen, Violett nur als Licht und Akzent, Chakra Petch in
   Versalien fuer Beschriftungen, punktflankierte Labels. */

.hr-lade{padding:var(--sec) var(--gut);color:var(--dim);min-height:40vh}
/* hidden muss gewinnen: .f, .card und .fbox setzen display selbst. */
#hiringseite [hidden],#hiring [hidden],#applications [hidden]{display:none!important}
.hr-lade a{color:var(--txt);text-decoration:underline}

/* ── Seitenkopf ─────────────────────────────────────────────── */
.hr-label{display:inline-flex;align-items:center;gap:10px;margin:0 0 14px;
  font:600 10.5px/1 'Chakra Petch',sans-serif;letter-spacing:.32em;text-transform:uppercase;color:var(--brand-l)}
.hr-label::before,.hr-label::after{content:"";width:4px;height:4px;background:currentColor;flex:none}
.hr-labelgm .gm{width:22px;height:22px;font-size:8px}
.hr-labelgm .gm img{width:16px;height:16px}
.hr-ph h1{overflow-wrap:anywhere}
.hr-sprung{margin-top:26px}
.hr-phtags{margin-top:20px}

/* ── Merkmale ───────────────────────────────────────────────── */
.hr-tags{display:flex;flex-wrap:wrap;gap:6px}
.hr-tag{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border:1px solid var(--line2);
  font:600 10px/1 'Chakra Petch',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--txt);background:rgba(255,255,255,.03)}
.hr-tag.hr-team{color:var(--brand-l);border-color:rgba(120,64,224,.5);background:rgba(120,64,224,.12)}
.hr-tag.hr-gruppe{color:var(--silver);border-color:rgba(201,206,214,.4);background:rgba(201,206,214,.08)}
.hr-tagl{color:var(--dim)}
/* Rollen-Tag (J2): Farbe kommt aus rolleTag, hier nur die Masse der
   anderen Merkmale, damit alle Tags einer Zeile gleich hoch stehen. */
.hr-tags .tier.hr-rolle{align-self:auto;margin:0;padding:5px 9px;letter-spacing:.14em;max-width:100%;overflow-wrap:anywhere}

/* ── Drei Fakten unter dem Kopf ─────────────────────────────── */
.hr-fakten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);margin-top:var(--sec)}
.hr-fakt{position:relative;padding:24px var(--pad) 26px;border:1px solid var(--line);background:var(--s1);overflow:hidden}
.hr-fakt::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 120% at 0% 0%,color-mix(in srgb,var(--brand) 16%,transparent),transparent 60%)}
.hr-fn{position:relative;display:block;margin-bottom:14px;font:600 11px/1 'Chakra Petch',sans-serif;letter-spacing:.2em;color:var(--brand-l)}
.hr-fakt h2{position:relative;font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--white);text-transform:uppercase;letter-spacing:.04em;margin:0 0 10px}
.hr-fakt p{position:relative;margin:0;color:var(--dim);font-size:14.5px;line-height:1.6}
@media (max-width:900px){ .hr-fakten{grid-template-columns:1fr} }

/* ── Liste ──────────────────────────────────────────────────── */
.hr-wrap{padding-bottom:0}   /* den Abstand zum Footer traegt der Footer (80 px) */
.hr-kat .sh .more{color:var(--dim)}
.hr-katunter{margin:-6px 0 22px;color:var(--dim);font-size:14px;max-width:70ch}
.hr-gr{margin-top:22px}
.hr-gr:first-of-type{margin-top:0}
.hr-grkopf{display:flex;align-items:center;gap:12px;margin:0 0 14px}
.hr-grkopf h3{font:700 16px/1.2 'Chakra Petch',sans-serif;color:var(--white);text-transform:uppercase;letter-spacing:.06em;margin:0}
.hr-zahl{font-size:12px;color:var(--dim)}
.hr-gm .gm{width:30px;height:30px;font-size:10px}
.hr-gm .gm img{width:22px;height:22px}
.hr-liste{list-style:none;margin:0;padding:0;display:grid;gap:var(--gap);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr))}
.hr-liste > li{min-width:0}
.hr-karte{position:relative;display:flex;flex-direction:column;gap:12px;height:100%;padding:22px var(--pad) 20px;
  border:1px solid var(--line);background:var(--s1);overflow:hidden;transition:border-color .25s,transform .35s var(--e)}
.hr-karte::after{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--brand);opacity:0;transition:opacity .25s}
.hr-karte:hover,.hr-karte:focus-visible{border-color:var(--line2);transform:translateY(-3px)}
.hr-karte:hover::after,.hr-karte:focus-visible::after{opacity:1}
.hr-kopf{display:flex;flex-direction:column;gap:10px;min-width:0}
.hr-titel{font:700 21px/1.1 'Chakra Petch',sans-serif;color:var(--white);text-transform:uppercase;letter-spacing:.01em;overflow-wrap:anywhere}
.hr-kurz{font-size:14.5px;line-height:1.55;color:var(--dim);overflow-wrap:anywhere}
.hr-mehr{display:inline-flex;gap:8px;align-items:center;margin-top:auto;padding-top:4px;
  font:600 10.5px/1 'Chakra Petch',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);transition:color .2s,gap .25s var(--e)}
.hr-karte:hover .hr-mehr{color:var(--white);gap:12px}

.hr-leer{margin-top:var(--sec);padding:42px var(--pad);border:1px dashed var(--line2);text-align:center}
.hr-leer h2{font-size:clamp(1.2rem,2.2vw,1.6rem);color:var(--white);text-transform:uppercase;margin:0 0 10px}
.hr-leer p{color:var(--dim);margin:0 auto 22px;max-width:52ch}
.hr-anders{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;margin-top:var(--sec);
  padding:20px var(--pad);border:1px solid var(--line);background:var(--s1)}
.hr-anders p{margin:0;color:var(--dim)}
.hr-anders b{color:var(--white);font-weight:600}

/* ── Eine Stelle ────────────────────────────────────────────── */
.hr-stelle{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:calc(var(--gap) * 2);align-items:start;margin-top:var(--sec)}
.hr-stelle-zu{grid-template-columns:minmax(0,1fr);max-width:820px;margin-top:var(--gap)}
.hr-text{display:flex;flex-direction:column;gap:var(--gap)}
.hr-abs{padding:22px var(--pad) 24px;border:1px solid var(--line);background:var(--s1)}
.hr-abs h2{font:600 11px/1 'Chakra Petch',sans-serif;letter-spacing:.24em;text-transform:uppercase;color:var(--brand-l);margin:0 0 16px}
.hr-punkte{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.hr-punkte li{position:relative;padding-left:20px;color:var(--txt);line-height:1.55;overflow-wrap:anywhere}
.hr-punkte li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;background:var(--brand);transform:rotate(45deg)}
.hr-bewerben{position:sticky;top:calc(var(--hdr) + 16px)}
/* Bewerben per Knopf (06.10.2026): Text in einer Spalte, Formular darunter. */
.hr-stelle-ein{grid-template-columns:minmax(0,1fr);max-width:880px;margin-left:auto;margin-right:auto}
.hr-stelle-ein .hr-bewerben{position:static;scroll-margin-top:calc(var(--hdr) + 32px)}
.hr-bewerben.auf{animation:hr-auf .5s cubic-bezier(.2,.8,.2,1)}
@keyframes hr-auf{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hr-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px var(--pad);
  border:1px solid rgba(120,64,224,.45);background:linear-gradient(120deg,rgba(120,64,224,.16),rgba(120,64,224,.04) 60%),var(--s1)}
.hr-cta h2{font-size:clamp(1.15rem,2vw,1.45rem);color:var(--white);text-transform:uppercase;margin:0 0 6px}
.hr-cta p{margin:0;color:var(--txt);font-size:14.5px}
.hr-cta .btn{flex:none}
.hr-kopfknopf{margin-top:22px}
@media (prefers-reduced-motion:reduce){ .hr-bewerben.auf{animation:none} }
@media (max-width:640px){ .hr-cta{flex-direction:column;align-items:flex-start} }
.hr-form h2,.hr-danke h2{font-size:clamp(1.2rem,2.2vw,1.55rem);color:var(--white);text-transform:uppercase;margin:0 0 8px}
.hr-vorab{margin:0 0 22px;color:var(--dim);font-size:14px}
.hr-vorab a{color:var(--txt);text-decoration:underline;text-underline-offset:3px}
.hr-form .f.wide{grid-column:1 / -1}
.hr-form .f textarea{min-height:130px}
.hr-form #hb-links{min-height:84px}
.hr-form .f .hint{order:3}
.hr-form .f .err{order:4}
.hr-form .pcheck a{color:var(--white);text-decoration:underline;text-underline-offset:3px}
.hr-form .f.bad .pcheck{color:var(--white)}
.hr-form .frow{margin-top:22px}
.hr-form .frow .hint a{color:var(--txt);text-decoration:underline}
.hr-eltern{padding:12px 14px;border:1px solid rgba(201,206,214,.35);background:rgba(201,206,214,.06)}
.hr-eltern .pcheck{margin-top:0}
.hr-danke{scroll-margin-top:calc(var(--hdr) + 20px)}
.hr-danke p{margin:0 0 20px}
.hr-zu{margin-top:var(--sec);padding:26px var(--pad);border:1px solid rgba(201,206,214,.35);background:rgba(201,206,214,.05)}
.hr-zu h2{font-size:clamp(1.2rem,2.2vw,1.6rem);color:var(--white);text-transform:uppercase;margin:0 0 10px}
.hr-zu p{color:var(--dim);margin:0 0 20px;max-width:60ch}
@media (max-width:1000px){
  .hr-stelle{grid-template-columns:minmax(0,1fr)}
  .hr-bewerben{position:static}
}
@media (max-width:620px){
  .hr-form .fgrid2{grid-template-columns:minmax(0,1fr)}
}

/* ════════════════════════ Dashboard ═════════════════════════ */
.hrd-akt{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap}
.hrd-formkarte{padding:22px 26px;margin-bottom:18px}
.hrd-formkarte h3{font:700 17px/1.2 'Chakra Petch',sans-serif;color:var(--white);text-transform:uppercase;margin:0 0 18px}
.hrd-form .fgrid2{gap:16px}
.hrd-form .f.wide{grid-column:1 / -1}
.hrd-form .f textarea{min-height:110px}
.hrd-form .frow{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:20px}
.hrd-form .pcheck{margin-top:4px}
.hrd-gr{margin-bottom:18px}
.hrd-grkopf{display:flex;align-items:center;gap:10px;margin:0 0 10px;padding-top:6px}
.hrd-grkopf h3{font:700 14px/1.2 'Chakra Petch',sans-serif;color:var(--white);text-transform:uppercase;letter-spacing:.06em;margin:0}
.hrd-grkopf .hrd-kat{font:600 10px/1 'Chakra Petch',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.hrd-zeilen{display:flex;flex-direction:column;gap:10px}
.hrd-z{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 18px;align-items:center;padding:16px 20px;border:1px solid var(--line);background:var(--s2)}
.hrd-z.zu{opacity:.72}
.hrd-zt{display:flex;flex-direction:column;gap:8px;min-width:0}
.hrd-zt b{color:var(--white);font:600 16px/1.25 'Chakra Petch',sans-serif;overflow-wrap:anywhere}
.hrd-zm{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.hrd-zm .hrd-bz{font-size:13px;color:var(--dim);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.hrd-zm .hrd-bz:hover{color:var(--white)}
.hrd-zm .sm{font-size:13px;color:var(--dim)}
.hrd-za{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;align-items:center}
.hrd-za .ibtn svg{width:14px;height:14px}
@media (max-width:760px){ .hrd-z{grid-template-columns:minmax(0,1fr)} .hrd-za{justify-content:flex-start} }

/* Auswahl der Rolle (J2): dunkle Liste, je Option der Farbpunkt der Rolle. */
.hrd-rw{position:relative}
.hrd-rwk{display:flex;align-items:center;gap:10px;width:100%;min-height:46px;padding:8px 13px;
  border:1px solid var(--line);background:var(--black);color:var(--txt);font:400 14.5px/1.5 Barlow,sans-serif;text-align:left;cursor:pointer;
  transition:border-color .18s,background .18s}
.hrd-rwk:hover{border-color:var(--line2)}
.hrd-rwk:focus-visible,.hrd-rwk[aria-expanded="true"]{outline:none;border-color:var(--brand)}
.hrd-rwwert{flex:1;min-width:0;display:flex;align-items:center}
.hrd-rwwert .tier{max-width:100%;overflow-wrap:anywhere}
.hrd-rwpf{width:16px;height:16px;flex:none;color:var(--dim);transition:transform .2s}
.hrd-rwk[aria-expanded="true"] .hrd-rwpf{transform:rotate(180deg)}
.hrd-rwl{position:absolute;z-index:30;left:0;right:0;top:calc(100% + 4px);margin:0;padding:6px 0;list-style:none;
  max-height:min(320px,60vh);overflow-y:auto;border:1px solid var(--line2);background:var(--s2);box-shadow:0 18px 40px rgba(0,0,0,.55)}
.hrd-rwl:focus{outline:none;border-color:var(--brand)}
.hrd-rwl [role="option"]{display:flex;align-items:center;gap:10px;min-height:36px;padding:7px 14px;cursor:pointer;color:var(--txt);font-size:14px}
.hrd-rwl [role="option"].akt{background:var(--s3)}
.hrd-rwl [role="option"][aria-selected="true"]{color:var(--white);font-weight:600}
.hrd-rwl [role="option"][aria-selected="true"]::after{content:"";margin-left:auto;width:6px;height:6px;background:var(--brand-l);transform:rotate(45deg);flex:none}
.hrd-rwp{width:12px;height:12px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
.hrd-rwn{min-width:0;overflow-wrap:anywhere}
.hrd-rwg{padding:10px 14px 6px;font:600 9.5px/1 'Chakra Petch',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.hrd-rwg:not(:first-child){margin-top:4px;border-top:1px solid var(--line)}
.hrd-form .f.bad .hrd-rwk{border-color:var(--red,#ff4b5c)}

.hrd-filter{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:16px}
.hrd-filter select{min-height:38px;padding:0 12px;border:1px solid var(--line2);background:var(--black);color:var(--txt);font:inherit;font-size:14px;max-width:100%}
.hrd-filter select:focus{outline:none;border-color:var(--brand)}
.hrd-reload{width:38px;height:38px;display:inline-grid;place-items:center;border:1px solid var(--line2);color:var(--dim)}
.hrd-reload:hover{color:var(--white);border-color:var(--white)}
.hrd-reload svg{width:16px;height:16px}
/* Umschalter "By position / All applications" (29.10.2026) */
.hrd-ansicht button{min-height:38px}
.hrd-ansicht button:hover{color:var(--white)}
.hrd-ansicht button[aria-pressed="true"]{background:rgba(255,255,255,.08);color:var(--white)}
.hrd-anzahl{margin:0 0 10px;font:600 10px/1 'Chakra Petch',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.hrd-bwo{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin:0 0 12px;padding:0;background:none;border:0;cursor:pointer;
  font:600 10px/1.3 'Chakra Petch',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-l);text-align:left;max-width:100%}
.hrd-bwo span{overflow-wrap:anywhere}
.hrd-bwo .hrd-pfadtr{display:inline-flex;color:var(--dim)}
.hrd-bwo .hrd-pfadtr svg{width:11px;height:11px}
.hrd-bwo:hover span:not(.hrd-pfadtr){color:var(--white)}
.hrd-bliste{display:flex;flex-direction:column;gap:12px}
.hrd-b{border:1px solid var(--line);background:var(--s1);padding:20px 22px}
.hrd-b.zu{opacity:.75}
.hrd-bk{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.hrd-bk b{color:var(--white);font:600 17px/1.2 'Chakra Petch',sans-serif;overflow-wrap:anywhere}
.hrd-bk time{margin-left:auto;font-size:12px;color:var(--dim)}
.hrd-bd{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:10px 18px;margin:16px 0 0;padding:0}
.hrd-bd div{min-width:0}
.hrd-bd dt{font:600 9.5px/1 'Chakra Petch',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin:0 0 6px}
.hrd-bd dd{margin:0;color:var(--txt);font-size:14px;overflow-wrap:anywhere}
.hrd-bd dd a{color:var(--brand-l)}
.hrd-bd dd small{display:block;color:var(--silver);font-size:12px;margin-top:3px}
.hrd-bt{margin:16px 0 0}
.hrd-bt h4{font:600 10px/1 'Chakra Petch',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin:0 0 8px}
.hrd-bt p{margin:0;color:var(--txt);font-size:14px;line-height:1.6;overflow-wrap:anywhere}
.hrd-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.hrd-links a{color:var(--brand-l);font-size:14px;overflow-wrap:anywhere}
.hrd-bf{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:14px 18px;align-items:start;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.hrd-bf .f select{min-height:40px}
.hrd-bf .f textarea{min-height:70px}
.hrd-bfa{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.hrd-bfa .hrd-mail{margin-right:auto;display:flex;gap:6px;flex-wrap:wrap}
@media (max-width:700px){ .hrd-bf{grid-template-columns:minmax(0,1fr)} .hrd-bk time{margin-left:0;width:100%} }

/* Lange Stellentexte (05.10.2026): Absaetze, Zwischenueberschriften,
   Aufzaehlungen mit Unterpunkten. */
.hr-fliess{display:flex;flex-direction:column;gap:14px;color:var(--txt);line-height:1.65;overflow-wrap:anywhere}
.hr-fliess p{margin:0}
.hr-fliess b{color:var(--white);font-weight:600}
.hr-fliess h3{margin:10px 0 0;font:700 17px/1.25 'Chakra Petch',sans-serif;color:var(--white);text-transform:uppercase;letter-spacing:.02em}
.hr-fliess > h3:first-child{margin-top:0}
.hr-unter{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.hr-unter li{position:relative;padding-left:18px;color:var(--dim);line-height:1.55}
.hr-unter li::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:1px;background:var(--brand-l);transform:none}
/* Dashboard: Schreibhilfe und hoehere Felder */
.hf-hilfe p{margin:0;padding:12px 14px;border:1px solid var(--line);background:var(--s1);color:var(--dim);font-size:13.5px;line-height:1.6}
.hf-hilfe b{color:var(--white)}
.hf-hilfe code{font:600 12.5px/1 ui-monospace,Consolas,monospace;color:var(--brand-l);background:var(--s3);padding:2px 6px}
textarea.hf-lang{min-height:150px;resize:vertical;line-height:1.55}

/* Aufzaehlungspunkte weiss statt violett (Alexander, 05.10.2026). */
.hr-punkte li::before{background:#fff}
.hr-unter li::before{background:rgba(255,255,255,.7)}

/* Teil "About Telacy" ueber den Stellen (06.10.2026). */
.hr-ueber{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);margin-top:var(--sec)}
.hr-ueberblock{position:relative;padding:26px var(--pad) 28px;border:1px solid var(--line);background:var(--s1)}
.hr-ueberblock:last-child:nth-child(odd){grid-column:1 / -1}
.hr-ueberblock h2{font-size:clamp(1.1rem,1.7vw,1.35rem);color:var(--white);text-transform:uppercase;letter-spacing:.04em;margin:0 0 14px}
.hr-ueberblock p{margin:0;color:var(--txt);font-size:15px;line-height:1.7}
.hr-ueberblock p + p{margin-top:12px}
@media (max-width:900px){ .hr-ueber{grid-template-columns:1fr} }

/* ═══ Career (06.10.2026), Aufbau wie die Karriereseite von Instinct3 ═══ */
/* Hero (06.10.2026, zweite Fassung): nur Schrift auf einem ruhigen
   Sternenhimmel (Canvas aus hiring.js), violetter Schimmer von unten. */
.cr-held{position:relative;overflow:hidden;min-height:min(78vh,720px);display:flex;align-items:center;
  background:radial-gradient(120% 80% at 50% 115%,rgba(120,64,224,.34),rgba(88,40,192,.10) 45%,transparent 70%),#0d0c14;
  border-bottom:1px solid var(--line)}
.cr-himmel{position:absolute;inset:0;width:100%;height:100%;display:block}
.cr-glanz{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 45% at 50% 50%,rgba(13,12,20,.55),transparent 75%),linear-gradient(to bottom,transparent 70%,rgba(20,20,24,.9))}
.cr-intro{position:relative;z-index:1;max-width:900px;margin:0 auto;text-align:center;padding:88px var(--gut) 96px}
.cr-intro .crumb{font-size:12px;color:var(--dim);margin-bottom:18px}
.cr-intro .crumb a:hover{color:var(--white)}
.cr-intro h1{font-size:clamp(2.5rem,7vw,5.2rem);line-height:1.02;letter-spacing:-.01em;color:var(--white);margin:14px 0 0;text-wrap:balance;
  text-shadow:0 0 60px rgba(120,64,224,.45)}
.cr-intro p{color:#d9d6e4;font-size:clamp(15.5px,1.4vw,17.5px);line-height:1.75;margin:26px auto 0;max-width:62ch}
.cr-intro .btn{margin-top:34px}

/* Manifest und Gruender */
.cr-manifest{padding:var(--sec) 0}
.cr-gross{max-width:920px;margin:0 auto;text-align:center;font:600 clamp(1.3rem,2.6vw,1.95rem)/1.45 'Chakra Petch',sans-serif;color:var(--white);text-wrap:pretty}
.cr-gruender{max-width:760px;margin:56px auto 0;padding:32px 36px;background:var(--s1);border:1px solid var(--line);border-left:3px solid var(--brand)}
.cr-gruender blockquote{margin:0}
.cr-gruender blockquote p{margin:0;color:var(--txt);font-size:16px;line-height:1.8}
.cr-gruender figcaption{margin-top:22px}
.cr-unterschrift{display:inline-flex;align-items:center;gap:14px;color:var(--txt);text-decoration:none}
.cr-unterschrift b{display:block;color:var(--white);font:700 15px/1.3 'Chakra Petch',sans-serif}
.cr-unterschrift b + span{display:block;font-size:13px;color:var(--dim);margin-top:2px}
.cr-unterschrift:hover b,.cr-unterschrift:focus-visible b{color:var(--brand-l)}
.cr-bildchen{width:52px;height:52px;border-radius:50%;flex:none;overflow:hidden;background:var(--brand-d);border:2px solid var(--line2);
  display:flex;align-items:center;justify-content:center;font:700 18px/1 'Chakra Petch',sans-serif;color:#fff}
.cr-bildchen:not(.mitbild)::before{content:"L"}
.cr-bildchen img{width:100%;height:100%;object-fit:cover;display:block}

/* Warum Telacy */
.cr-warum{padding:var(--sec) 0;background:var(--s1);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cr-warum h2{font-size:clamp(1.6rem,3.4vw,2.4rem);color:var(--white);text-align:center;margin:0}
.cr-gruende{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--gap)}
.cr-grund{grid-column:span 2;padding:26px 26px 28px;background:var(--s2);border:1px solid var(--line);position:relative}
.cr-grund:nth-child(4){grid-column:2 / span 2}
.cr-grund:nth-child(5){grid-column:4 / span 2}
.cr-nr{display:block;font:700 13px/1 'Chakra Petch',sans-serif;letter-spacing:.12em;color:var(--silver);margin-bottom:14px}
.cr-grund h3{font:700 18px/1.25 'Chakra Petch',sans-serif;color:var(--white);margin:0 0 10px}
.cr-grund p{margin:0;color:var(--txt);font-size:14.5px;line-height:1.7}

/* Abteilungen als Karten */
.cr-facetten{padding:var(--sec) 0}
.cr-facetten h2,.cr-offen h2,.cr-ablauf h2,.cr-kontakt h2{font-size:clamp(1.6rem,3.4vw,2.4rem);color:var(--white);text-align:center;margin:0}
.cr-text{max-width:760px;margin:20px auto 0;text-align:center;color:var(--txt);font-size:15px;line-height:1.75}
.cr-karten{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--gap);margin-top:48px}
.cr-karte{display:flex;flex-direction:column;padding:24px 22px;background:var(--s1);border:1px solid var(--line);border-top:3px solid var(--brand);transition:border-color .2s,transform .2s}
.cr-karte:first-child{border-top-color:var(--silver)}
.cr-karte:hover{border-color:var(--line2);transform:translateY(-2px)}
.cr-karte:first-child:hover{border-top-color:var(--silver)}
.cr-karte:not(:first-child):hover{border-top-color:var(--brand-l)}
.cr-karte h3{font:700 16px/1.25 'Chakra Petch',sans-serif;color:var(--white);margin:0}
.cr-satz{margin:10px 0 16px;color:var(--white);font-size:14.5px;line-height:1.55}
.cr-karte ul{margin:0;padding:0 0 0 18px;color:var(--txt);font-size:13.5px;line-height:1.8}
.cr-karte li::marker{color:#fff}
.cr-offenlink{margin-top:auto;padding-top:18px;display:inline-flex;align-items:center;gap:8px;font:600 13px/1 'Chakra Petch',sans-serif;color:var(--brand-l);text-decoration:none}
.cr-offenlink:hover,.cr-offenlink:focus-visible{color:#fff}

.cr-offen{padding:var(--sec) 0;background:var(--s1);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cr-offen h2{text-align:center}
.cr-hinweis{max-width:900px;margin:16px auto 0;text-align:center;color:var(--txt);font-size:14px;line-height:1.7}
.cr-hinweis.cr-stark{color:var(--white);font-weight:600}
.cr-offen h2 + .cr-hinweis{margin-top:24px}
.cr-tabelle{margin-top:40px}
.cr-initiativ{margin-top:40px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:26px 30px;background:var(--s2);border:1px solid var(--line2)}
.cr-initiativ h3{font:700 18px/1.25 'Chakra Petch',sans-serif;color:var(--white);margin:0}
.cr-initiativ p{margin:8px 0 0;color:var(--txt);font-size:14.5px;line-height:1.65;max-width:62ch}
.cr-initiativ .btn{flex:none}
.cr-tkopf,.cr-zeile{display:grid;grid-template-columns:minmax(0,1fr) 200px 140px 100px;gap:16px;align-items:center}
.cr-tkopf{padding:0 0 12px;border-bottom:1px solid var(--line2);font:600 11px/1 'Chakra Petch',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.cr-tkopf span:nth-child(n+3),.cr-zeile .cr-art,.cr-zeile .cr-ort{text-align:right}
.cr-zeilen{list-style:none;margin:0;padding:0}
.cr-zeile{padding:18px 0;border-bottom:1px solid var(--line2);color:var(--txt);text-decoration:none;transition:color .2s,padding .2s}
.cr-pos{font:700 clamp(1rem,1.7vw,1.2rem)/1.25 'Chakra Petch',sans-serif;color:var(--white);overflow-wrap:anywhere}
.cr-team,.cr-art,.cr-ort{font-size:13px;color:var(--dim)}
.cr-zeile:hover .cr-pos,.cr-zeile:focus-visible .cr-pos{color:var(--brand-l)}
.cr-zeile:hover,.cr-zeile:focus-visible{padding-left:8px}
/* Gruppen der Tabelle (28.10.2026): Telacy Employee und je Game, mit
   Abstand und eigener Kopfzeile, damit Orga und Game getrennt lesbar sind. */
.cr-gruppe + .cr-gruppe{margin-top:56px}
.cr-gkopf{display:flex;align-items:center;gap:14px;padding:26px 0 14px;border-bottom:1px solid var(--line2)}
.cr-gruppe:first-of-type .cr-gkopf{padding-top:22px}
.cr-gkopf h3{margin:4px 0 0;font:700 clamp(1.15rem,2vw,1.4rem)/1.15 'Chakra Petch',sans-serif;color:var(--white);text-transform:uppercase;letter-spacing:.05em}
.cr-gart{display:block;font:600 10.5px/1 'Chakra Petch',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--brand-l)}
.cr-gmark{flex:none;display:inline-flex}
.cr-gzahl{margin-left:auto;font:600 13px/1 'Chakra Petch',sans-serif;color:var(--dim)}
/* Zurueck zur Liste auf der Stellenseite */
.hr-zurueck{display:inline-flex;align-items:center;gap:8px;margin:0 0 18px;padding:8px 14px 8px 12px;border:1px solid var(--line2);
  color:var(--white);text-decoration:none;font:600 12px/1 'Chakra Petch',sans-serif;letter-spacing:.12em;text-transform:uppercase;transition:border-color .2s,color .2s}
.hr-zurueck .a{transition:transform .25s var(--e)}
.hr-zurueck:hover,.hr-zurueck:focus-visible{border-color:var(--brand-l);color:var(--brand-l)}
.hr-zurueck:hover .a,.hr-zurueck:focus-visible .a{transform:translateX(-3px)}

.cr-ablauf{padding:var(--sec) 0}
.cr-zeit{list-style:none;margin:48px auto 0;padding:0;max-width:440px;position:relative}
.cr-zeit::before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:2px;background:var(--line2)}
.cr-schritt{position:relative;z-index:1;padding:0 0 34px 40px}
.cr-schritt:last-child{padding-bottom:0}
.cr-schritt::before{content:"";position:absolute;left:0;top:4px;width:12px;height:12px;border-radius:50%;border:2px solid #fff;background:var(--brand)}
.cr-schritt h3{font:700 18px/1.2 'Chakra Petch',sans-serif;color:var(--white);margin:0 0 8px}
.cr-schritt p{margin:0;color:var(--txt);font-size:14.5px;line-height:1.65}
/* Ablauf animiert (06.10.2026): Linie waechst, Punkte springen nacheinander
   auf, Texte gleiten herein, danach wandert ein Lichtpunkt die Linie
   hinunter. Ausloeser: Klasse .an aus hiring.js (ablaufZeigen). */
.js .cr-zeit::before{transform:scaleY(0);transform-origin:top;transition:transform 1.6s cubic-bezier(.65,0,.35,1)}
.js .cr-zeit.an::before{transform:scaleY(1)}
.cr-zeit::after{content:"";position:absolute;z-index:0;left:5px;top:8px;width:6px;height:56px;border-radius:3px;opacity:0;pointer-events:none;
  background:linear-gradient(to bottom,transparent,var(--brand-l),#fff,transparent);filter:drop-shadow(0 0 6px rgba(185,156,245,.9))}
.cr-zeit.an::after{animation:cr-licht 4.5s linear 2.2s infinite}
@keyframes cr-licht{0%{transform:translateY(0);opacity:0}10%{opacity:1}85%{opacity:1}100%{transform:translateY(calc(var(--zh,560px) - 72px));opacity:0}}
.js .cr-schritt{opacity:0;transform:translateX(-16px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.8,.2,1)}
.js .cr-schritt::before{transform:scale(0);transition:transform .5s cubic-bezier(.3,1.7,.5,1),background .25s,box-shadow .25s}
.js .cr-zeit.an .cr-schritt{opacity:1;transform:none}
.js .cr-zeit.an .cr-schritt::before{transform:scale(1);box-shadow:0 0 0 0 rgba(120,64,224,.6);animation:cr-puls 1.1s ease-out 1}
.cr-schritt:nth-child(1),.cr-schritt:nth-child(1)::before{transition-delay:.15s;animation-delay:.15s}
.cr-schritt:nth-child(2),.cr-schritt:nth-child(2)::before{transition-delay:.45s;animation-delay:.45s}
.cr-schritt:nth-child(3),.cr-schritt:nth-child(3)::before{transition-delay:.75s;animation-delay:.75s}
.cr-schritt:nth-child(4),.cr-schritt:nth-child(4)::before{transition-delay:1.05s;animation-delay:1.05s}
.cr-schritt:nth-child(5),.cr-schritt:nth-child(5)::before{transition-delay:1.35s;animation-delay:1.35s}
.cr-zeit.fertig .cr-schritt,.cr-zeit.fertig .cr-schritt::before{transition-delay:0s}
@keyframes cr-puls{0%{box-shadow:0 0 0 0 rgba(120,64,224,.7)}100%{box-shadow:0 0 0 14px rgba(120,64,224,0)}}
.cr-schritt h3{transition:color .2s}
.cr-schritt:hover::before{background:var(--silver);box-shadow:0 0 14px rgba(201,206,214,.55)}
.cr-schritt:hover h3{color:var(--brand-l)}
@media (prefers-reduced-motion:reduce){
  .js .cr-zeit::before,.js .cr-schritt,.js .cr-schritt::before{transform:none;opacity:1;transition:none;animation:none}
  .cr-zeit.an::after{animation:none}
}

.cr-kontakt{padding:var(--sec) 0;background:var(--s1);border-top:1px solid var(--line);text-align:center}
.cr-kontakt .hr-label{justify-content:center}
.cr-kontakt h2{margin-top:10px}
.cr-wege{list-style:none;margin:26px auto 0;padding:0;max-width:560px;text-align:left}
.cr-wege a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 0;border-top:1px solid var(--line2);color:var(--txt);text-decoration:none}
.cr-wege li:last-child a{border-bottom:1px solid var(--line2)}
.cr-wege a:hover,.cr-wege a:focus-visible{color:var(--white)}
.cr-wege .a{color:var(--dim);transition:transform .2s,color .2s}
.cr-wege a:hover .a{transform:translateX(4px);color:#fff}

@media (max-width:1100px){
  .cr-karten{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  .cr-gruende{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cr-grund,.cr-grund:nth-child(4),.cr-grund:nth-child(5){grid-column:auto}
  .cr-grund:nth-child(5){grid-column:1 / -1}
  .cr-karten{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cr-initiativ{flex-direction:column;align-items:flex-start}
}
@media (max-width:640px){
  .cr-karten,.cr-gruende{grid-template-columns:1fr}
  .cr-grund:nth-child(5){grid-column:auto}
  .cr-gruender{padding:24px 22px}
  .cr-held{min-height:0}
  .cr-intro{padding:64px var(--gut) 72px}
  .cr-tkopf{display:none}
  .cr-zeile{grid-template-columns:1fr auto;grid-template-areas:"pos pos" "team ort";row-gap:6px}
  .cr-pos{grid-area:pos}
  .cr-team{grid-area:team}
  .cr-art{display:none}
  .cr-ort{grid-area:ort}
}
/* Kein leerer Streifen zwischen Kontakt und Footer. */
main#hiringseite:has(.cr-kontakt){padding-bottom:0;margin-bottom:0}

/* PDF-Anhaenge im Bewerbungsformular (07.10.2026) */
.hr-dateikopf{font:600 10.5px/1 'Chakra Petch',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.hr-dateifeld .hr-dateiknopf{align-self:flex-start;gap:8px}
.hr-dateifeld .hr-dateiknopf[hidden]{display:none}
.hr-dateiliste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.hr-dateiliste[hidden]{display:none}
.hr-dateiliste li{display:flex;align-items:center;gap:12px;padding:9px 10px 9px 14px;background:var(--black);border:1px solid var(--line)}
.hr-dateiname{flex:1;min-width:0;color:var(--white);font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hr-dateigroesse{flex:none;color:var(--dim);font-size:12.5px}
.hr-dateiweg{flex:none;display:grid;place-items:center;width:32px;height:32px;background:none;border:1px solid transparent;color:var(--dim);cursor:pointer;transition:color .2s,border-color .2s}
.hr-dateiweg:hover{color:var(--white);border-color:var(--line2)}
.hr-dateiweg:focus-visible{outline:2px solid var(--brand-l);outline-offset:1px}
.hr-dateiweg svg{width:16px;height:16px}
.hr-dateifeld.bad .hr-dateiliste li{border-color:var(--line)}
.hr-dateifeld.bad .hr-dateiknopf{border-color:var(--red)}

/* PDF-Anhaenge in Applications (07.10.2026) */
.hrd-dateien .hint{margin:0 0 10px;font-size:13px;color:var(--dim)}
.hrd-dliste{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:6px}
.hrd-dliste li{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 8px 8px 12px;background:var(--black);border:1px solid var(--line)}
.hrd-dliste li > svg{width:18px;height:18px;flex:none;color:var(--brand-l)}
.hrd-dliste a{flex:1;min-width:160px;color:var(--white);font-size:14px;overflow-wrap:anywhere}
.hrd-dliste a:hover{color:var(--brand-l);text-decoration:underline;text-underline-offset:3px}
.hrd-dmeta{flex:none;color:var(--dim);font-size:12.5px}
.hrd-dliste .ibtn{margin-left:auto}

/* ── Applications in drei Stufen (28.10.2026, Alexander) ──────────
   Bereichskarten (je Game, Telacy Employee) und Stellenkarten. Die
   Game-Karte nimmt das Titelbild des Games aus ALL_GAMES (site.js) wie
   die Divisionskarten der Startseite, gedaempft unter einem Verlauf.
   Spaeter auch fuer die Stellenkarten auf /career gedacht. */
.hrd-pfad{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin:0 0 14px;
  font:600 11px/1.2 'Chakra Petch',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.hrd-pfad button{background:none;border:0;padding:6px 0;color:var(--dim);font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer}
.hrd-pfad button:hover,.hrd-pfad button:focus-visible{color:var(--white)}
.hrd-pfad [aria-current]{color:var(--white);padding:6px 0;overflow-wrap:anywhere}
.hrd-pfad [aria-current]:focus{outline:none}
.hrd-pfadtr{display:inline-grid;place-items:center;opacity:.6}
.hrd-pfadtr svg{width:12px;height:12px}
.hrd-karten{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:14px}
.hrd-karten.stellen{grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr))}
.hrd-gr .hrd-karten{margin-bottom:6px}
.hrd-karte{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:190px;padding:18px 20px;border:1px solid var(--line);background:var(--s1);
  color:var(--txt);font:inherit;text-align:left;cursor:pointer;
  transition:border-color .3s,transform .4s var(--e)}
.hrd-karte:hover{border-color:var(--line2);transform:translateY(-4px)}
.hrd-karte:focus-visible{outline:none;border-color:var(--brand);transform:translateY(-4px)}
.hrd-kbild{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:.42;filter:grayscale(.35);transition:transform .7s var(--e),opacity .4s,filter .5s}
.hrd-karte:hover .hrd-kbild,.hrd-karte:focus-visible .hrd-kbild{transform:scale(1.06);opacity:.62;filter:grayscale(0)}
/* Telacy Employee: Logo mittig oben auf violettem Schein (erste Fassung) */
.hrd-karte.mitlogo{background:radial-gradient(120% 90% at 50% 20%,rgba(120,64,224,.28),var(--s1) 70%)}
.hrd-karte.mitlogo .hrd-kbild{background-size:auto 40%;background-repeat:no-repeat;background-position:center 18%;opacity:.95;filter:none}
.hrd-karte.mitlogo:hover .hrd-kbild,.hrd-karte.mitlogo:focus-visible .hrd-kbild{transform:scale(1.04);opacity:1}
.hrd-kfade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,var(--black) 6%,color-mix(in srgb,var(--black) 40%,transparent) 55%,transparent)}
.hrd-karte.mitlogo .hrd-kfade{background:linear-gradient(to top,var(--black) 4%,transparent 46%)}
.hrd-kmark{position:absolute;top:14px;right:14px;z-index:1}
.hrd-kinhalt{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0;width:100%}
.hrd-kart{font:600 10px/1 'Chakra Petch',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.hrd-karte b{font:700 18px/1.2 'Chakra Petch',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--white);overflow-wrap:anywhere}
.hrd-kzahl{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:13px;color:var(--txt);width:100%}
.hrd-kzahl > span:not(.pill):not(.hrd-kpf){white-space:nowrap}
/* Stellenkarte: ohne Bild, Inhalt von oben, Pfeil rechts unten */
.hrd-karte.stelle{min-height:0;justify-content:flex-start;background:var(--s2)}
.hrd-karte.stelle b{font-size:16px;text-transform:none;letter-spacing:.02em;line-height:1.25}
.hrd-karte.stelle .hrd-kzahl{margin-top:auto;padding-top:4px;color:var(--dim)}
.hrd-karte.stelle.zu{opacity:.72}
.hrd-karte.stelle.zu:hover,.hrd-karte.stelle.zu:focus-visible{opacity:1}
.hrd-kkurz{font-size:13.5px;line-height:1.5;color:var(--dim);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hrd-kpf{margin-left:auto;display:inline-grid;place-items:center;color:var(--dim);transition:transform .3s var(--e),color .3s}
.hrd-kpf svg{width:16px;height:16px}
.hrd-karte:hover .hrd-kpf,.hrd-karte:focus-visible .hrd-kpf{color:var(--white);transform:translateX(3px)}
.hrd-skopf{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin:0 0 14px}
@media (prefers-reduced-motion:reduce){
  .hrd-karte,.hrd-kbild,.hrd-kpf{transition:none}
  .hrd-karte:hover,.hrd-karte:focus-visible,.hrd-karte:hover .hrd-kbild,.hrd-karte:hover .hrd-kpf{transform:none}
}