/* TELACY ESPORTS — Staff-Seite (W5, 03.10.2026)
   Geladen auf staff.html (Liste, Game-Seite, Seite einer Person) und
   dashboard.html (Bereich Staff page). Den Kasten im Profil gibt es seit
   W6 nicht mehr. Baut auf site.css auf
   (Variablen, .ph, .sh, .tier, .socs, .fseite). Designsprache: Schwarz
   und Weiss tragen, Violett nur als Licht, Fadenkreuz-Marker an den
   Ecken des grossen Bildes, Chakra Petch in Versalien. */

.stf-lade{padding:var(--sec) var(--gut);color:var(--dim);min-height:40vh}

/* ── Liste ───────────────────────────────────────────────────── */
.stf-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)}
.stf-label::before,.stf-label::after{content:"";width:4px;height:4px;background:currentColor}
.stf-wrap{padding-bottom:0}   /* den Abstand zum Footer traegt der Footer (80 px) */
.stf-gr .sh .more{color:var(--dim)}
.stf-grid{list-style:none;margin:0;padding:0;display:grid;gap:var(--gap);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr))}
.stf-grid > li{min-width:0}
/* Karte einer Person, neu gebaut am 06.10.2026 (Alexander: "die Karten
   sind immer noch buggy"). Vorher lagen hier Flicken uebereinander:
   Karte hob sich (translateY), Bild zoomte (scale), dazu translateZ,
   Maske und z-index-Tricks. In Chrome rutschte das Bild dabei aus seinem
   Rahmen (Keil oben links, Pixelreihen, Foto unter dem Namen).
   Jetzt: nichts bewegt sich mehr. Hover zeigt sich nur ueber Rahmen,
   Schatten, Licht und den Pfeil. Keine eigenen Grafikebenen. */
.stf-karte{--rf:var(--brand);--rf2:var(--brand-l);position:relative;isolation:isolate;display:flex;flex-direction:column;height:100%;
  border:1px solid var(--line);background:var(--s1);overflow:hidden;color:inherit;transition:border-color .25s,box-shadow .3s}
/* Leiste in der Farbe der hoechsten Rolle, oben ueber dem Bild. */
.stf-karte::before{content:"";position:absolute;inset:0 0 auto;height:3px;z-index:2;background:linear-gradient(90deg,var(--rf),var(--rf2))}
/* Licht von unten, liegt hinter Bild und Text (z-index -1 in der isolierten Karte). */
.stf-karte::after{content:"";position:absolute;inset:auto 0 0;height:55%;z-index:-1;pointer-events:none;opacity:.5;transition:opacity .3s;
  background:radial-gradient(120% 90% at 50% 110%,color-mix(in srgb,var(--rf) 34%,transparent),transparent 70%)}
.stf-karte:hover,.stf-karte:focus-visible{border-color:color-mix(in srgb,var(--rf) 70%,var(--line2));
  box-shadow:0 14px 40px -18px color-mix(in srgb,var(--rf) 80%,transparent)}
.stf-karte:hover::after,.stf-karte:focus-visible::after{opacity:1}
.stf-bild{position:relative;display:block;flex:none;aspect-ratio:4 / 5;background:var(--s2);overflow:hidden}
.stf-bild img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.9);transition:filter .4s}
.stf-karte:hover .stf-bild img,.stf-karte:focus-visible .stf-bild img{filter:saturate(1.05)}
/* Unterkante: Verlauf in die Kartenfarbe, die letzten Pixel voll deckend. */
.stf-bild::after{content:"";position:absolute;left:0;right:0;bottom:0;height:45%;pointer-events:none;
  background:linear-gradient(to top,var(--s1) 0,var(--s1) 8px,color-mix(in srgb,var(--s1) 70%,transparent) 40%,transparent)}
.stf-bild.leer,.stf-pbild.leer,.stp-bild.leer{display:grid;place-items:center;
  background:radial-gradient(110% 90% at 70% 10%,color-mix(in srgb,var(--akz,var(--brand)) 46%,transparent),transparent 65%),var(--s2)}
.stf-bild.leer{background:linear-gradient(160deg,color-mix(in srgb,var(--rf) 30%,var(--s2)),var(--s2) 70%)}
.stf-bild.leer b,.stf-pbild.leer b{font:700 clamp(64px,9vw,104px)/1 'Chakra Petch',sans-serif;color:rgba(255,255,255,.88)}
.stf-bild.leer b{font-size:clamp(48px,6vw,72px)}
.stf-ktxt{position:relative;display:flex;flex-direction:column;gap:7px;padding:0 14px 14px;margin-top:-22px;flex:1;min-width:0}
.stf-tags{display:flex;flex-wrap:wrap;gap:6px}
.stf-tags .tier,.stf-rollen .tier,.stp-tags .tier{font-size:9.5px;padding:4px 8px;align-self:auto}
.stf-tags .tier{background:color-mix(in srgb,var(--s1) 82%,transparent)}
.stf-name{font:700 18px/1.05 'Chakra Petch',sans-serif;color:var(--white);text-transform:uppercase;letter-spacing:.01em;overflow-wrap:anywhere}
.stf-ber{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px;color:color-mix(in srgb,var(--rf2) 80%,#fff)}
.stf-auszug{font-size:12.5px;line-height:1.55;color:var(--dim);overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.stf-mehr{display:inline-flex;align-self:flex-start;gap:8px;align-items:center;margin:0 14px 14px;
  font:600 10.5px/1 'Chakra Petch',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);transition:color .2s}
.stf-mehr .a{display:inline-block;transition:transform .25s var(--e)}
.stf-karte:hover .stf-mehr,.stf-karte:focus-visible .stf-mehr{color:var(--white)}
.stf-karte:hover .stf-mehr .a,.stf-karte:focus-visible .stf-mehr .a{transform:translateX(4px)}
/* Ohne Website-Konto: Karte ohne eigene Seite, keine Reaktion beim Ueberfahren. */
.stf-karte.ohne:hover{border-color:var(--line);box-shadow:none}
.stf-karte.ohne:hover::after{opacity:.5}
.stf-karte.ohne:hover .stf-bild img{filter:saturate(.9)}
.stf-karte.ohne .stf-ktxt{padding-bottom:16px}

/* ── Game-Karten (W6, gross seit S7 04.10.2026) ─────────────────
   Gleiche Karte wie auf Startseite und Teams-Seite: .dcard im Raster
   .tiles aus site.css (Breite, Hoehe 3:4, Bild, Verlauf, Bildnachweis).
   Hier nur, was die Staff-Karte dazu bringt: Zahlen und "See staff". */
.stf-games{list-style:none;margin:0;padding:0}
.stf-games > li{min-width:0}
.stf-games > li > .dcard{display:flex;height:100%;color:inherit}
.stf-gcard .dinfo{gap:6px}
.stf-gcard .dinfo b{overflow-wrap:anywhere}
.stf-gz{font-size:13px;color:rgba(255,255,255,.72)}
.stf-gz .tab{color:var(--brand-l)}
.stf-gcard .stf-mehr{margin:6px 0 0}
.stf-gcard:hover .stf-mehr,.stf-gcard:focus-visible .stf-mehr{color:var(--white);gap:12px}
/* Telefon: Karten untereinander, volle Breite (site.css setzt dort zwei Spalten). */
@media (max-width:620px){ .stf-games.tiles{grid-template-columns:1fr} }

/* ── Game-Seite (W6) ─────────────────────────────────────────── */
.stf-ph h1{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.stf-h1gm .gm{width:52px;height:52px}
.stf-h1gm .gm img{width:40px;height:40px}
.stf-teams > .sh{margin-top:8px}
.stf-teams .stf-gr .sh h3{font:700 17px/1.2 'Chakra Petch',sans-serif;color:var(--white);text-transform:uppercase;letter-spacing:.02em;margin:0}
.stf-nav1{display:flex;justify-content:center;padding-block:32px 0}

/* ── Lore-Seite ──────────────────────────────────────────────── */
.stf-lore{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.stf-ban{position:absolute;inset:0;background-size:cover;background-position:center 30%;opacity:.28;filter:saturate(.8) blur(2px);transform:scale(1.03)}
.stf-ban.leer{opacity:1;filter:none;transform:none;
  background:radial-gradient(70% 90% at 18% 20%,color-mix(in srgb,var(--akz,var(--brand)) 30%,transparent),transparent 62%),var(--black)}
.stf-schleier{position:absolute;inset:0;background:linear-gradient(to top,var(--black) 4%,color-mix(in srgb,var(--black) 78%,transparent) 46%,color-mix(in srgb,var(--black) 50%,transparent))}
/* Eigenes Banner aus dem Dashboard (S8, 04.10.2026): ein scharfes Band
   oben im Format 16:5 (wie der Zuschnitt), kaum abgedunkelt, ohne
   Unschaerfe. Nach unten laeuft es ueber einen Verlauf in Schwarz aus;
   Portraet und Text beginnen im unteren Teil des Bandes und bleiben dort
   ueber den Verlauf (und einen weichen Schatten) lesbar. Hoehe des Bandes:
   min(31.25vw, 640px), dieselbe Zahl steuert den Abstand oben. */
.stf-ban.eigen{inset:0 0 auto;aspect-ratio:16 / 5;max-height:640px;opacity:1;filter:none;transform:none;background:var(--black)}
.stf-ban.eigen img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 40%}
.stf-ban.eigen::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,color-mix(in srgb,var(--black) 8%,transparent) 0,color-mix(in srgb,var(--black) 18%,transparent) 38%,color-mix(in srgb,var(--black) 62%,transparent) 72%,var(--black) 100%)}
.stf-lore.mitban .stf-schleier{display:none}
.stf-lore.mitban .stf-lin{padding-top:max(40px,calc(min(31.25vw,640px) - 170px))}
.stf-lore.mitban .stf-ltxt .crumb,.stf-lore.mitban .stf-art,.stf-lore.mitban .stf-ltxt h1{text-shadow:0 1px 2px rgba(0,0,0,.55),0 2px 22px rgba(0,0,0,.5)}
.stf-lin{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,72px);
  align-items:start;padding-block:clamp(40px,7vw,88px) clamp(40px,6vw,72px)}
.stf-port{position:relative;margin:0;padding:14px}
.stf-pbild{display:block;aspect-ratio:4 / 5;background:var(--s2);overflow:hidden;border:1px solid var(--line2)}
.stf-pbild img{width:100%;height:100%;object-fit:cover}
.stf-pbild.leer b{font-size:clamp(96px,14vw,180px)}
/* Fadenkreuz-Marker an den Ecken, wie in den Social-Grafiken. */
.stf-kreuz{position:absolute;width:14px;height:14px}
.stf-kreuz::before,.stf-kreuz::after{content:"";position:absolute;background:var(--white);opacity:.7}
.stf-kreuz::before{left:6px;top:0;width:2px;height:14px}
.stf-kreuz::after{top:6px;left:0;height:2px;width:14px}
.stf-kreuz.k1{left:0;top:0}.stf-kreuz.k2{right:0;top:0}.stf-kreuz.k3{left:0;bottom:0}.stf-kreuz.k4{right:0;bottom:0}
.stf-ltxt{min-width:0;padding-top:8px}
.stf-ltxt .crumb{font-size:12px;color:var(--dim);margin-bottom:22px}
.stf-ltxt .crumb a:hover{color:var(--white)}
.stf-art{font:600 10.5px/1 'Chakra Petch',sans-serif;letter-spacing:.24em;text-transform:uppercase;color:var(--brand-l)}
.stf-ltxt h1{font-size:clamp(2.4rem,6vw,4.6rem);color:#fff;text-transform:uppercase;margin-top:12px;overflow-wrap:anywhere}
.stf-rollen{display:flex;flex-direction:column;gap:10px;margin:24px 0 0}
.stf-rollen > div{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.stf-rollen dt{margin:0;display:flex}
.stf-rollen dd{margin:0;font-size:14px;color:var(--txt)}
.stf-links{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:22px}
.stf-text{margin-top:34px;padding-top:28px;border-top:1px solid var(--line);max-width:62ch}
.stf-text p{margin:0 0 1.1em;font-size:clamp(16px,1.35vw,18px);line-height:1.75;color:var(--txt);overflow-wrap:anywhere}
.stf-text p:first-child::first-letter{font:700 3.1em/.9 'Chakra Petch',sans-serif;float:left;margin:.06em .1em 0 0;color:var(--white)}
.stf-text p:last-child{margin-bottom:0}

/* Blaettern wie in einem Buch: vorige Person, alle, naechste Person. */
.stf-nav{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--gap);align-items:center;padding-block:32px 0}
.stf-nb{display:flex;flex-direction:column;gap:6px;padding:16px 20px;border:1px solid var(--line);background:var(--s1);min-width:0;
  transition:border-color .2s,transform .3s var(--e)}
.stf-nb:hover{border-color:var(--line2);transform:translateY(-2px)}
.stf-nb.nach{text-align:right;align-items:flex-end}
.stf-nb.leer{visibility:hidden}
.stf-nbl{font:600 10px/1 'Chakra Petch',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.stf-nb b{font:700 17px/1.1 'Chakra Petch',sans-serif;color:var(--white);text-transform:uppercase;overflow-wrap:anywhere}
.stf-nbr{font-size:12.5px;color:var(--brand-l)}

@media (max-width:820px){
  .stf-lin{grid-template-columns:minmax(0,1fr)}
  .stf-port{max-width:340px;width:100%}
  /* Einspaltig: das Portraet ragt nur ins untere Drittel des Bandes. */
  .stf-lore.mitban .stf-lin{padding-top:max(40px,calc(31.25vw - 44px))}
  .stf-nav{grid-template-columns:1fr 1fr}
  .stf-nav .stf-alle{grid-column:1 / -1;grid-row:2;justify-self:center}
}
@media (max-width:480px){
  .stf-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
  .stf-ktxt{padding:0 12px 12px;margin-top:-20px}
  .stf-name{font-size:16px}
  .stf-auszug{display:none}
  .stf-mehr{margin:0 12px 12px}
  .stf-ber{font-size:12px}
  .stf-nb{padding:12px 14px}
}

/* ── Dashboard: Staff page ───────────────────────────────────── */
.stp-l{list-style:none;margin:0;padding:0}
.stp-z{padding:18px 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.stp-z:first-child{border-top:0;padding-top:4px}
.stp-kopf{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.stp-bild{width:44px;height:44px;flex:none;border:1px solid var(--line2);background:var(--s2);overflow:hidden;display:grid;place-items:center}
.stp-bild img{width:100%;height:100%;object-fit:cover}
.stp-bild.leer b{font:700 18px/1 'Chakra Petch',sans-serif;color:#fff}
.stp-wer{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}
.stp-wer .al{color:var(--white);font-weight:600;overflow-wrap:anywhere}
.stp-tags{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.stp-ber{font-size:12.5px;color:var(--dim)}
/* Trial (26.10.2026): im Dashboard sichtbar, oeffentlich erst nach der Trial-Phase. */
.stp-trial{color:#FDC500;font-weight:600}
.stp-st{font:600 10.5px/1.2 'Chakra Petch',sans-serif;letter-spacing:.08em;text-transform:uppercase}
.stp-st.an{color:var(--win)}
.stp-st.an:hover{color:var(--white)}
.stp-st.aus{color:var(--dim)}
.stp-f textarea{resize:vertical}
.stp-gr{font:600 11px/1 'Chakra Petch',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--brand-l);margin:22px 0 4px}
.stp-gr:first-child{margin-top:8px}
.stp-reihe{display:flex;gap:6px}
.stp-pf{width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--line2);background:transparent;color:var(--txt);cursor:pointer}
.stp-pf svg{width:16px;height:16px}
.stp-pf:hover:not(:disabled){border-color:var(--white);color:var(--white)}
.stp-pf:disabled{opacity:.3;cursor:default}
.stp-akt{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.stp-sw{margin:0 8px 0 0;font-size:13.5px;align-items:center}
.stp-sw input{margin-top:0}
.stp-hinweis{margin:14px 0 0}
@media (max-width:700px){ .stp-st{flex-basis:100%} }

/* W7: alle Personen, Suche, aufklappbare Bearbeitung je Person. */
.stp-such{align-items:center;margin:4px 0 6px}
.stp-zahl{font-size:13px;color:var(--dim)}
.stp-gr{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.stp-ober{color:var(--dim);letter-spacing:.14em}
.stp-mehr{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12.5px;color:var(--dim)}
.stp-auf{min-width:76px}
.stp-z.offen{background:linear-gradient(90deg,rgba(120,64,224,.07),transparent 70%);box-shadow:inset 2px 0 0 var(--brand);padding-left:14px;padding-right:4px}
.stp-ed{display:flex;flex-direction:column;gap:14px;padding:4px 0 2px}
.stp-ed .frow{margin-top:0;padding-top:0;border-top:0}
.stp-arow{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.stp-arow input{flex:1 1 220px;width:auto;max-width:340px}
.stp-alias .hint b{color:var(--txt);font-weight:600;overflow-wrap:anywhere}
.stp-ohne{margin:0}
@media (max-width:700px){
  .stp-reihe{order:5}
  .stp-auf{order:6;margin-left:auto}
  .stp-arow input{max-width:none;flex-basis:100%}
}

/* S8 (04.10.2026): Bild und Banner je Person, Vorschau wie auf der Seite. */
.stp-medien{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px 26px;align-items:start}
.stp-med{display:flex;flex-direction:column;gap:8px;min-width:0}
.stp-mlab{font:600 10.5px/1 'Chakra Petch',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.stp-vor{display:block;width:120px;aspect-ratio:4 / 5;border:1px solid var(--line2);background:var(--s2);overflow:hidden}
.stp-med.ban .stp-vor{width:100%;max-width:480px;aspect-ratio:16 / 5}
.stp-vor img{display:block;width:100%;height:100%;object-fit:cover}
.stp-vor.leer{border-style:dashed}
.stp-mk{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.stp-mk .bzs-feldfehler{flex-basis:100%}
.stp-klein{margin:0}
@media (max-width:700px){ .stp-medien{grid-template-columns:minmax(0,1fr)} }

/* ══ Staff-Seite neu (05.10.2026, Alexander): kleinere Karten mit Farbe,
   Reiter Karten / Organigramm ═══════════════════════════════════════ */
.stf-tabs{display:inline-flex;gap:0;margin:var(--sec) 0 0;border:1px solid var(--line);background:var(--s1);padding:4px}
.stf-tabs [role=tab]{appearance:none;border:0;background:none;color:var(--dim);cursor:pointer;
  font:600 11.5px/1 'Chakra Petch',sans-serif;letter-spacing:.14em;text-transform:uppercase;padding:11px 20px;transition:color .2s,background .2s}
.stf-tabs [role=tab]:hover{color:var(--white)}
.stf-tabs [role=tab][aria-selected="true"]{background:var(--brand);color:#fff}
.stf-wrap [role=tabpanel][hidden]{display:none}

/* Karten: kleiner, Farbe der Rolle als Leiste und Licht. */
.stf-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr))}
.stf-gr .sh h2,.stf-gr .sh h3{position:relative;padding-left:16px}
.stf-gr .sh h2::before,.stf-gr .sh h3::before{content:"";position:absolute;left:0;top:.12em;bottom:.12em;width:4px;background:linear-gradient(180deg,var(--brand),var(--gold))}
/* Oben auf /staff: Abschnitte mit wenigen Karten stehen nebeneinander. */
/* Untereinander (Alexander, 05.10.2026): Founder, Ai Assistant, Departments, dann Games. */
.stf-reihe{display:block}
.stf-reihe > .stf-gr{flex:0 1 auto;min-width:0;max-width:100%}
.stf-reihe .stf-grid{display:flex;flex-wrap:wrap}
.stf-reihe .stf-grid > li{width:200px;max-width:100%}

/* ── Organigramm ── */
.org2{--ln:color-mix(in srgb,var(--brand) 55%,var(--line2));padding:var(--sec) 0 0;display:flex;flex-direction:column;align-items:center}
.org2-e{display:flex;justify-content:center;align-items:stretch;width:100%;position:relative;margin-bottom:22px}
.org2-kind{position:relative;padding:22px 10px 0;display:flex;flex:0 1 250px;min-width:0}
.org2-top > .org2-kind{padding-top:0}
/* Linien: Stiel nach oben, waagrechter Balken ueber den Geschwistern. */
.org2-kind::before{content:"";position:absolute;top:0;left:50%;height:22px;border-left:2px solid var(--ln)}
.org2-kind::after{content:"";position:absolute;top:0;left:0;right:0;border-top:2px solid var(--ln)}
.org2-kind:first-child::after{left:50%}
.org2-kind:last-child::after{right:50%}
.org2-e.eins > .org2-kind::after,.org2-top > .org2-kind::before,.org2-top > .org2-kind::after{display:none}
/* Stiel nach unten zur naechsten Ebene. */
.org2-e:not(:last-child)::after{content:"";display:block;position:absolute;left:50%;bottom:-22px;height:22px;border-left:2px solid var(--ln)}
.org2-marke{position:relative;display:flex;justify-content:center;margin:0 0 22px}
.org2-marke span{position:relative;z-index:1;background:var(--black);border:1px solid var(--ln);padding:7px 16px;
  font:600 10.5px/1 'Chakra Petch',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--brand-l)}
.org2-marke::after{content:"";position:absolute;left:50%;bottom:-22px;height:22px;border-left:2px solid var(--ln)}

.org2-k{--rf:var(--brand);--rf2:var(--brand-l);position:relative;flex:1;min-width:0;background:var(--s1);border:1px solid var(--line);
  display:flex;flex-direction:column;overflow:hidden;transition:border-color .25s,box-shadow .25s}
.org2-k::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--rf),var(--rf2))}
.org2-k:hover{border-color:color-mix(in srgb,var(--rf) 60%,var(--line2));box-shadow:0 12px 34px -20px color-mix(in srgb,var(--rf) 80%,transparent)}
.org2-k.spitze{background:linear-gradient(180deg,color-mix(in srgb,var(--rf) 14%,var(--s1)),var(--s1) 70%)}
.org2-kt{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 14px 10px}
.org2-kt b{font:700 12px/1.2 'Chakra Petch',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:color-mix(in srgb,var(--rf2) 70%,#fff);overflow-wrap:anywhere}
.org2-n{font-size:11px;color:var(--dim)}
.org2-kl{display:flex;flex-direction:column;padding:0 6px 8px}
.org2-p{display:flex;align-items:center;gap:10px;padding:7px 8px;min-width:0;color:var(--txt);text-decoration:none;transition:background .2s}
a.org2-p:hover,a.org2-p:focus-visible{background:var(--s3)}
.org2-av{flex:none;width:34px;height:34px;overflow:hidden;background:var(--s3);border:1px solid var(--line2);display:grid;place-items:center}
.org2-av img{width:100%;height:100%;object-fit:cover}
.org2-av.leer{background:color-mix(in srgb,var(--rf) 30%,var(--s3))}
.org2-av.leer b{font:700 15px/1 'Chakra Petch',sans-serif;color:#fff}
.org2-pt{display:flex;flex-direction:column;gap:3px;min-width:0}
.org2-pt b{font:600 14px/1.15 'Chakra Petch',sans-serif;color:var(--white);overflow-wrap:anywhere}
.org2-pt small{font-size:11.5px;line-height:1.3;color:var(--dim)}

.org2-game{position:relative;width:100%;border:1px solid var(--line);background:linear-gradient(180deg,var(--s1),var(--black) 140px);margin-bottom:22px}
.org2-game::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--brand),var(--gold))}
.org2-gk{display:flex;align-items:center;gap:14px;padding:20px 22px;color:var(--white);cursor:pointer;list-style:none;user-select:none}
.org2-gk::-webkit-details-marker{display:none}
.org2-game[open] > .org2-gk{border-bottom:1px solid var(--line)}
.org2-pfeil{flex:none;width:10px;height:10px;margin-left:14px;border-right:2px solid var(--brand-l);border-bottom:2px solid var(--brand-l);transform:rotate(45deg) translate(-2px,-2px);transition:transform .25s}
.org2-game[open] .org2-pfeil{transform:rotate(-135deg) translate(-2px,-2px)}
.org2-zur{margin-top:20px}
.org2-gk b{font:700 22px/1 'Chakra Petch',sans-serif;text-transform:uppercase;letter-spacing:.02em}
.org2-gm{display:grid;place-items:center;width:34px;height:34px}
.org2-gm svg,.org2-gm img{width:100%;height:100%}
.org2-gz{margin-left:auto;font-size:13px;color:var(--dim)}
.org2-gz .tab{color:var(--white);font-weight:600}
.org2-gk:hover b{color:var(--brand-l)}
.org2-gi{padding:6px 22px 24px}
.org2-lade{color:var(--dim);margin:18px 0 0}
.org2-unter{display:flex;align-items:center;gap:12px;margin:22px 0 0;font:600 10.5px/1 'Chakra Petch',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--brand-l)}
.org2-unter::after{content:"";flex:1;order:1;border-top:1px solid var(--line)}
.org2-unter .org2-n{order:2}
.org2-div{margin:0;justify-content:center;flex-wrap:wrap}
.org2-div::after{display:none!important}
.org2-div > .org2-kind{padding:14px 6px 0;flex-basis:240px}
/* Division Ops mittig (Alexander, 05.10.2026): Linie links und rechts der Marke. */
.org2-unter.mitte::before{content:"";flex:1;border-top:1px solid var(--line)}
.org2-div > .org2-kind::before,.org2-div > .org2-kind::after{display:none}
.org2-teams{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:12px;margin-top:14px}
.org2-teams .org2-k{flex:none}

@media (max-width:820px){
  /* Schmal: untereinander, die Linie laeuft links als Schiene. */
  .org2{align-items:stretch}
  .org2-e{flex-direction:column;align-items:stretch;margin-bottom:0}
  .org2-e::after,.org2-marke::after{display:none!important}
  .org2-kind,.org2-top > .org2-kind{flex:none;padding:0 0 12px 22px}
  .org2-kind::before,.org2-top > .org2-kind::before{display:block;top:0;bottom:0;left:6px;height:auto;border-left:2px solid var(--ln)}
  .org2-kind::after,.org2-top > .org2-kind::after,.org2-e.eins > .org2-kind::after{display:block;top:22px;left:6px;right:auto;width:16px;border-top:2px solid var(--ln)}
  .org2-div > .org2-kind{padding:12px 0 0;flex:1 1 100%}
  .org2-div > .org2-kind::before,.org2-div > .org2-kind::after{display:none}
  .org2-marke{justify-content:flex-start;margin:6px 0 14px}
  .org2-gk{padding:16px}
  .org2-gk b{font-size:18px}
  .org2-gi{padding:2px 16px 18px}
  .stf-tabs{display:flex}
  .stf-tabs [role=tab]{flex:1;padding:12px 8px}
  .stf-reihe{gap:0 16px}
  .stf-reihe .stf-grid > li{width:calc(50% - 5px)}
  .stf-reihe > .stf-gr{flex:1 1 100%}
}
.stf-reihe .stf-gr .sh h2{font-size:clamp(1.15rem,2vw,1.5rem)}

/* Aufbau einer Division im Organigramm (05.10.2026): Division Ops und
   Esports Staff als Baum, mittig, ohne Teams. */
.org2-baum{display:flex;flex-direction:column;align-items:center;padding-top:24px}
.org2-baum .org2-marke span{background:var(--s1)}
.org2-kind:has(> .org2-k.breit){flex-basis:560px}
.org2-k.breit .org2-kl{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:0 6px}
@media (max-width:820px){ .org2-baum{align-items:stretch} }
/* Marken der Schichten groesser, klarer, weiss (Alexander, 05.10.2026). */
.org2-marke span{font-size:14px;letter-spacing:.18em;color:#fff;padding:11px 24px;border:1px solid var(--brand);background:color-mix(in srgb,var(--brand) 22%,var(--black))}
.org2-baum .org2-marke span{background:color-mix(in srgb,var(--brand) 22%,var(--s1))}

/* Teams der Division im Organigramm (05.10.2026): Verweise zur Teamseite,
   Rand in der Tag-Farbe des Teams, als Verlauf wenn es einen hat. */
.org2-teamsbox{width:100%;display:flex;flex-direction:column;align-items:center}
.org2-teamsbox:empty{display:none}
.org2-tl{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;width:100%;padding-top:22px}
.org2-team{--rf:var(--brand);--rf2:var(--brand-l);display:flex;align-items:center;gap:12px;min-width:200px;max-width:100%;padding:12px 16px;
  color:var(--white);text-decoration:none;border:2px solid transparent;
  background:linear-gradient(var(--s1),var(--s1)) padding-box,linear-gradient(110deg,var(--rf),var(--rf2)) border-box;
  transition:transform .25s var(--e),box-shadow .25s}
.org2-team:hover,.org2-team:focus-visible{transform:translateY(-2px);box-shadow:0 12px 30px -16px var(--rf)}
.org2-team b{font:700 13px/1.2 'Chakra Petch',sans-serif;letter-spacing:.08em;text-transform:uppercase;flex:1;min-width:0;overflow-wrap:anywhere}
.org2-team .a{color:var(--dim);transition:color .2s,transform .2s}
.org2-team:hover .a{color:#fff;transform:translateX(3px)}
.org2-tlogo{flex:none;width:30px;height:30px;display:grid;place-items:center}
.org2-tlogo img{max-width:100%;max-height:100%;object-fit:contain}
@media (max-width:820px){ .org2-team{min-width:0;flex:1 1 100%} .org2-teamsbox{align-items:stretch} }

/* Gleiche Abstaende zwischen allen Bloecken des Organigramms (Alexander,
   05.10.2026): Marke, Kasten, Marke ... immer --ab, mit Linie dazwischen. */
.org2{--ab:34px}
@media (min-width:821px){
  .org2-e{margin-bottom:var(--ab)}
  .org2-e:not(:last-child)::after{bottom:calc(-1 * var(--ab));height:var(--ab)}
  .org2-marke{margin:0 0 var(--ab)}
  .org2-marke::after{bottom:calc(-1 * var(--ab));height:var(--ab)}
  /* Ein einzelner Kasten braucht keinen Stiel und keinen Balken: Die Linie
     von oben endet direkt an ihm. */
  .org2-e.eins > .org2-kind{padding-top:0}
  .org2-e.eins > .org2-kind::before{display:none}
  .org2-game{margin-bottom:var(--ab)}
  .org2-baum{padding-top:var(--ab)}
  .org2-gi{padding-top:0;padding-bottom:var(--ab)}
  .org2-tl{padding-top:0}
  .org2-baum > .org2-e:last-of-type{margin-bottom:var(--ab)}
  .org2-zur{margin-top:0}
}
@media (max-width:820px){
  .org2{--ab:14px}
  .org2-kind,.org2-top > .org2-kind{padding-bottom:var(--ab)}
  .org2-marke{margin:0 0 var(--ab)}
  .org2-game{margin-bottom:var(--ab)}
  .org2-baum{padding-top:var(--ab)}
  .org2-tl{padding-top:0;gap:var(--ab)}
}

/* Teams in Reihen: Telacy, Academy, Community (05.10.2026). */
@media (min-width:821px){
  .org2-tl{position:relative;flex-wrap:nowrap}
  .org2-tl:not(:last-child){margin-bottom:var(--ab)}
  .org2-tl:not(:last-child)::after{content:"";position:absolute;left:50%;bottom:calc(-1 * var(--ab));height:var(--ab);border-left:2px solid var(--ln)}
  .org2-tl.viele{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:10px}
  .org2-tl.viele .org2-team{min-width:0;padding:12px 10px;gap:8px;flex-direction:column;text-align:center}
  .org2-tl.viele .org2-team b{font-size:11.5px;letter-spacing:.06em;flex:none}
  .org2-tl.viele .org2-team .a{display:none}
}
/* Academy ohne eigene Tag-Farbe: Gelb der Stufe statt Violett (05.10.2026). */
.org2-team.academy{--rf:#FDC500;--rf2:#FFD94D}

/* Leere Position (14.10.2026): ausgeschaltete Person, Platz bleibt stehen. */
.stf-bild.frei,.org2-av.frei{background:var(--s2);border:1px dashed var(--line)}
.stf-karte.frei .stf-name,.org2-p.frei b{color:var(--dim)}
.stf-karte.frei .stf-tags{opacity:.7}
/* Schnellschalter je Zeile im Dashboard */
.stp-schnell{display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap}
.stp-schnell .stp-sw{margin:0}
@media (max-width:700px){ .stp-schnell{flex-basis:100%} }