/* ═══════════════════════════════════════════════════════════════
   SCHRIFTEN — lokal eingebunden

   Diese Dateien lagen bis hierhin bei Google und wurden bei jedem
   Seitenaufruf von fonts.gstatic.com geholt. Damit ging die IP-Adresse
   jedes Besuchers ohne Einwilligung an Google. Das LG Muenchen I hat
   genau das am 20.01.2022 (Az. 3 O 17493/20) als Verstoss gegen die
   DSGVO gewertet und Unterlassung samt Schadensersatz zugesprochen;
   darauf folgte eine Abmahnwelle.

   Lokal eingebunden verlaesst dafuer kein Byte mehr die eigene Seite.

   Enthalten sind latin und latin-ext. latin-ext deckt polnische,
   tschechische und tuerkische Zeichen ab — bei europaeischen Kader-
   namen keine Spielerei. Thai und Vietnamesisch kamen bei Google mit
   und sind hier weggelassen.

   font-display:swap: Der Text steht sofort in der Ersatzschrift und
   wird ersetzt, sobald die richtige da ist. Besser als unsichtbarer
   Text auf einer Seite, die sonst fertig waere.
   ═══════════════════════════════════════════════════════════════ */
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/barlow-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/barlow-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/barlow-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/barlow-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/barlow-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/barlow-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/chakra-petch-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/chakra-petch-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/chakra-petch-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/chakra-petch-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/chakra-petch-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/chakra-petch-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* ═══════════════════════════════════════════════════════════════
   TELACY ESPORTS — shared stylesheet
   Rule of the system: black, white, and ONE accent (Telacy purple).
   Gold marks the Academy sub-brand only. Teal means "live" only.
   Nothing else carries colour.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --black:#141418; --s1:#1A1A1F; --s2:#202026; --s3:#25252B; /* eine Palette fuer Website und Dashboard (F1/F2, 04.10.2026) */
  --line:rgba(255,255,255,.10); --line2:rgba(255,255,255,.18);
  --white:#fff; --txt:#D8D8DF; --dim:#8B8B96;

  --brand:#7840E0; --brand-d:#5828C0; --brand-l:#B99CF5;
  --live:#38A3A5; --gold:#FDC500;
  --win:#3BD671; --red:#FF4B5C;   /* Sieg gruen, Niederlage rot */
  --silver:#C9CED6;              /* Telacy Esports, die Org als Ganzes */

  --e:cubic-bezier(.16,1,.3,1);
  --gut:clamp(16px,4vw,48px); --max:1400px;
  --hdr:88px;                    /* Hoehe der Hauptnavigation */
  --tbar:54px;                   /* Hoehe der klebenden Teamleiste */

  /* Abstaende (Spacing Check 30.09.2026). Vorher hatte jedes Raster
     seinen eigenen Wert (10, 14, 20 px), Karten nebeneinander standen
     dadurch je Seite unterschiedlich weit auseinander. */
  --gap:16px;                    /* zwischen Karten in einem Raster */
  --pad:26px;                    /* Innenabstand seitlich in Kaesten */
  --sec:64px;                    /* Abstand zwischen Abschnitten */
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--black);color:var(--txt);overflow-x:hidden;
  font:400 16px/1.6 Barlow,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
/* Ein Grund fuer alle oeffentlichen Seiten (Alexander, 04.10.2026: "wir
   haben uns aufs Hellere geeinigt"). Vorher lagen zwei Schwarztoene
   uebereinander: die Vignette (Mitte #18181E, Rand #09090B) und alles,
   was mit var(--black) #0D0D10 gemalt ist (Kopfleiste, Hero-Unterkante,
   Bannerkoepfe, Felder). Wo die Mitte der Vignette auf eine solche
   Flaeche traf, stand eine Kante; die Karten (#141418) lagen sogar
   dunkler als der Grund daneben.
   Jetzt ist der Grund selbst der helle Ton, die Flaechen steigen in
   gleichen Schritten darueber. Wer var(--black) malt, trifft den Grund.
   Alle Toene halten gedaempften Text (--dim) ueber 4,5:1.
   Seit F2 (04.10.2026) gilt dieselbe Palette auch im Dashboard und im
   Team Hub, deshalb steht sie direkt in :root (Alexander: ein Ton auf
   der ganzen Seite). */
/* Vignette (Effekt 3), sanft: Die Mitte ist der Grund selbst, nur zu den
   Ecken hin wird es leicht dunkler (hoechstens #111114, nie unter
   #0D0D10). Ohne helle Mitte gibt es keine Stelle mehr, an der eine
   Flaeche in Grundfarbe als Kante absteht. Feste Ebene hinter allem,
   damit sie beim Scrollen stehen bleibt (background-attachment:fixed
   ruckelt auf dem Telefon). Das Dashboard bleibt flach. */
body:not(.dashapp)::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 40%,transparent 58%,rgba(0,0,0,.16) 100%)}
h1,h2,h3,h4,h5{font-family:'Chakra Petch',sans-serif;font-weight:700;margin:0;line-height:1.02;letter-spacing:-.015em}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
:focus-visible{outline:2px solid var(--brand-l);outline-offset:3px}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.tab{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Live-Puls. Wird geteilt von der Spielkachel, dem freien Slot und dem
   Navigations-Dropdown — deshalb steht die Animation hier oben und nicht
   bei einem der drei Nutzer. */
@keyframes ping{0%{transform:scale(1);opacity:.85}70%,100%{transform:scale(3.2);opacity:0}}

/* ── top: utility strip ─────────────────────────────────────── */
/* Schmale lila Leiste ueber der Navigation (Alexander, 04.10.2026). */
.util{background:var(--brand);border-bottom:0}
.util .in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:26px}
.util a,.util span{font-size:11.5px;color:rgba(255,255,255,.88);letter-spacing:.02em}
.util a:hover{color:#fff}
/* Die Leiste traegt nur noch die Netzwerk-Kanaele rechts. Ohne linke
   Gruppe schiebt space-between den Rest nach links — margin-left:auto
   haelt ihn unabhaengig davon am rechten Rand. */
.util .r{display:flex;gap:18px;align-items:center;margin-left:auto}

/* We are hiring (Alexander, 06.10.2026): fett, mittig in der Leiste,
   fuehrt auf /career. Gesetzt von hiringLeisteSetzen() in site.js. */
.util .in{position:relative}
.util .util-hiring{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:8px;
  white-space:nowrap;color:#fff;text-decoration:none}
.util .util-hiring b{font:700 11.5px/1 'Chakra Petch',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#fff}
.util .util-hiring .uh-mehr{font-size:11.5px;color:rgba(255,255,255,.78);transition:color .2s}
.util .util-hiring .uh-pfeil{font-size:12px;color:#fff;transition:transform .22s var(--e)}
.util .util-hiring:hover .uh-mehr,.util .util-hiring:focus-visible .uh-mehr{color:#fff}
.util .util-hiring:hover .uh-pfeil,.util .util-hiring:focus-visible .uh-pfeil{transform:translateX(3px)}
.util .util-hiring:hover b,.util .util-hiring:focus-visible b{text-decoration:underline;text-underline-offset:3px}
.uh-punkt{position:relative;width:6px;height:6px;border-radius:50%;background:var(--silver);flex:none}
.uh-punkt::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--silver);animation:ping 2.2s cubic-bezier(0,0,.2,1) infinite}
@media (prefers-reduced-motion:reduce){ .uh-punkt::after{animation:none} }
/* Schmal: kein Zusatztext; neben dem Rueckweg rechts, allein mittig. */
@media (max-width:700px){
  .util .util-hiring .uh-mehr{display:none}
  .util .in:has(.hdback) .util-hiring{position:static;transform:none;margin-left:auto}
}

/* ── Der Weg zurueck ──────────────────────────────────────────────
   Zwei Auspraegungen desselben Gedankens. Beide tragen den Namen der
   Seite, von der man kam: "Back" allein zwingt zum Raten, ob es zur
   Liste, zur Teamseite oder zur Startseite geht.

   .hdback sitzt in der schmalen Leiste ueber der Navigation und gilt
   fuer jeden Seitenwechsel. .pback steht ueber der Ueberschrift der
   Detailseiten, wo mehr Platz ist und der Weg mehr Gewicht hat —
   dort unterbleibt der kleine Pfeil oben, sonst stuende er doppelt. */
.hdback{display:inline-flex;align-items:center;gap:6px;flex:none;min-width:0;
  color:var(--dim);transition:color .18s}
.hdback svg{width:13px;height:13px;flex:none;transition:transform .22s var(--e)}
.hdback span{font-size:12px;letter-spacing:.02em;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.hdback:hover{color:var(--white)}
.hdback:hover svg{transform:translateX(-3px)}

/* flex statt inline-flex: Der Rueckweg braucht seine eigene Zeile.
   Seit die Brotkrume bei vorhandener Herkunft entfaellt, stuende sonst
   der Tier-Chip direkt daneben statt darunter. width:fit-content haelt
   die Klickflaeche trotzdem am Text — eine ueber die volle Breite
   klickbare Zeile waere eine Falle. */
.pback{display:flex;width:fit-content;align-items:center;gap:8px;margin-bottom:15px;
  font:600 11px/1 'Chakra Petch',sans-serif;letter-spacing:.13em;
  text-transform:uppercase;color:var(--dim);transition:color .18s}
.pback svg{width:14px;height:14px;flex:none;transition:transform .22s var(--e)}
.pback:hover{color:var(--white)}
.pback:hover svg{transform:translateX(-3px)}

/* Auf der Teamseite steht der Rueckweg vor der Brotkrume im
   Kopfbereich — dort ist der Text hell auf Bild, nicht auf Flaeche. */
.thead .pback{color:rgba(255,255,255,.62)}
.thead .pback:hover{color:#fff}

/* ── top: main bar ──────────────────────────────────────────── */
header{position:sticky;top:0;z-index:80;background:color-mix(in srgb,var(--black) 92%,transparent);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:34px;height:88px}
/* logo stands alone — no ring, no circle */
.logo{display:flex;align-items:center;gap:13px;margin-right:auto;flex:none}
.logo img{width:58px;height:58px;object-fit:contain}
.logo b{font:700 21px/1 'Chakra Petch',sans-serif;letter-spacing:.14em;color:var(--white);white-space:nowrap}
.logo b i{font-style:normal;font-weight:500;color:var(--dim)}
.menu{display:flex;gap:30px}
.menu a{display:inline-flex;align-items:center;gap:9px;line-height:1.2;
  font-size:14.5px;font-weight:500;color:var(--dim);padding:6px 0;position:relative;transition:color .2s}
.menu a:hover{color:var(--white)}
.menu a[aria-current="page"]{color:var(--white)}
.menu a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--brand)}
/* Shop als letzter Punkt, lila hinterlegt mit weisser Schrift (Alexander, 03.10.2026). */
.menu a.navshop{background:var(--brand);color:#fff;padding:7px 14px}
.menu a.navshop:hover,.menu a.navshop:focus-visible{background:var(--brand-l);color:#fff}
.menu a.navshop[aria-current="page"]::after{display:none}
.acts{display:flex;align-items:center;gap:10px;flex:none}
.ico{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line);color:var(--dim);transition:all .2s}
.ico:hover{color:var(--white);border-color:var(--line2)}
.ico svg{width:17px;height:17px}
.burger{display:none}
/* Suche, Anmelden und Menue stehen in einer Reihe: gleich hoch, sonst
   springt die Unterkante um 2 px. */
.acts .btn{min-height:40px}
/* Auf dem Telefon passte die Leiste nicht: Wortmarke, Sprachregler,
   Suche, Anmelden und Menue brauchten 480 px, die Seite liess sich
   seitlich verschieben. Erst schrumpfen die Luecken, unter 460 px
   steht das Zeichen allein. */
@media (max-width:620px){
  .bar{gap:16px}
  .acts{gap:8px}
  .acts .btn{padding:0 14px}
}
@media (max-width:460px){
  .bar .logo b{display:none}
  .bar .logo img{width:44px;height:44px}
}

.btn{display:inline-flex;align-items:center;gap:9px;min-height:42px;padding:0 20px;background:var(--brand);
  color:#fff;font:600 13px/1 'Chakra Petch',sans-serif;letter-spacing:.1em;text-transform:uppercase;
  transition:background .2s,transform .2s var(--e)}
.btn:hover{background:var(--brand-d);transform:translateY(-1px)}
.btn .a{transition:transform .25s var(--e)}
.btn:hover .a{transform:translateX(3px)}
.btn-g{background:none;border:1px solid var(--line2);color:var(--txt)}
.btn-g:hover{background:rgba(255,255,255,.06);border-color:var(--white);color:var(--white)}
.btn-w{background:var(--white);color:#000}
.btn-w:hover{background:#DEDEE6}

/* ── section head ───────────────────────────────────────────── */
.sh{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding:var(--sec) 0 24px}
.srvakt{display:inline-flex;gap:10px;align-items:center}
.sh h2{font-size:clamp(1.45rem,2.7vw,2rem);color:var(--white);text-transform:uppercase}
.sh .more{font-size:13px;font-weight:500;color:var(--dim);display:inline-flex;gap:7px;align-items:center;transition:color .2s,gap .25s var(--e)}
.sh .more:hover{color:var(--white);gap:12px}
/* Zwei Links in einer Abschnittszeile: die Ueberschrift behaelt links
   ihren Platz, beide Links ruecken zusammen nach rechts. */
.sh .fcsrc{margin-left:auto;gap:6px}
.sh .fcsrc svg{width:11px;height:11px;flex:none;transition:transform .22s var(--e)}
/* Der Chevron der Nachbarlinks wandert beim Ueberfahren nach rechts —
   "weiter dort entlang". Der Diagonalpfeil hebt stattdessen ab:
   die Bewegung sagt "hier geht es hinaus". */
.sh .fcsrc:hover{gap:6px}
.sh .fcsrc:hover svg{transform:translate(2px,-2px)}

/* ── page header (subpages) ─────────────────────────────────── */
/* Oben und unten sichtbar gleich viel Luft: vorher 72 zu 44 px, der
   Kopf wirkte nach unten gequetscht. */
.ph{position:relative;padding:var(--sec) 0 56px;border-bottom:1px solid var(--line);overflow:hidden}
.ph::after{content:"";position:absolute;right:-8%;top:-60%;width:46%;aspect-ratio:1;
  background:radial-gradient(circle,rgba(120,64,224,.2),transparent 68%);pointer-events:none}
/* Banner im Seitenkopf des eigenen Profils (05.10.2026), gleiche Machart
   wie das oeffentliche Profil (.spl-kopf in spielerseite.css). */
.ph.mitban::after{display:none}
.ph .phban{position:absolute;inset:0;background-size:cover;background-position:center 30%;opacity:.45;filter:saturate(.85)}
.ph .phschleier{position:absolute;inset:0;
  background:linear-gradient(to top,var(--black) 6%,color-mix(in srgb,var(--black) 70%,transparent) 48%,color-mix(in srgb,var(--black) 30%,transparent))}
.ph.mitban > .wrap{position:relative;z-index:2}
.ph .crumb{font-size:12px;color:var(--dim);margin-bottom:16px}
.ph .crumb a:hover{color:var(--white)}
.ph h1{font-size:clamp(2rem,5vw,3.6rem);color:var(--white);text-transform:uppercase}
.ph p{color:var(--dim);margin:16px 0 0;max-width:62ch}

/* ── Teamauswahl ──────────────────────────────────────────────────
   Ein Knopf statt einer Chip-Reihe. Der Grund ist Platz: Chips fuer
   Spiele und Teams braechen bei einem Dutzend Teams ueber mehrere
   Zeilen um. Der Knopf bleibt bei dreissig Teams so schmal wie bei
   drei; die Liste darunter scrollt. */
.tf{position:relative;display:inline-flex}

.tfbtn{display:inline-flex;align-items:center;gap:10px;min-height:34px;
  padding:7px 13px;border:1px solid var(--line);background:none;color:var(--dim);
  font:500 12px/1 Barlow,sans-serif;cursor:pointer;transition:color .18s,border-color .18s}
.tfbtn:hover{color:var(--white);border-color:var(--line2)}
/* Ein gesetzter Filter faellt auf: Sonst sieht eine gefilterte Liste
   aus wie eine leere Seite, und man sucht den Fehler woanders. */
.tfbtn.gesetzt{color:#fff;border-color:var(--brand);background:rgba(120,64,224,.16)}
.tfbtn .caret{width:6px;height:6px;flex:none;margin-left:2px;position:relative;top:-2px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);opacity:.7;transition:transform .25s var(--e)}
.tfbtn[aria-expanded="true"] .caret{transform:rotate(225deg);top:1px}

.tfmenu{position:absolute;top:calc(100% + 5px);left:0;z-index:70;min-width:260px;
  max-width:min(92vw,340px);background:var(--s2);border:1px solid var(--line2);
  box-shadow:0 20px 48px rgba(0,0,0,.66);display:flex;flex-direction:column}
.tfmenu[hidden]{display:none}
/* Rechts ausrichten, wenn links kein Platz mehr ist. */
@media (max-width:620px){ .tfmenu{left:auto;right:0} }

.tfsuche{padding:10px;border-bottom:1px solid var(--line)}
.tfsuche input{width:100%;background:var(--black);border:1px solid var(--line);
  color:var(--white);font:400 13px/1.4 Barlow,sans-serif;padding:8px 10px;min-height:34px}
.tfsuche input:focus{outline:none;border-color:var(--brand)}

.tflist{max-height:min(58vh,420px);overflow-y:auto;padding:5px 0}

/* Das Untermenue liegt neben der Liste, nicht darin: .tflist scrollt,
   und ihr overflow schnitte ein seitlich austretendes Panel ab. Die
   Hoehe setzt das Skript, damit es auf Hoehe seiner Zeile steht. */
.tfsub{position:absolute;left:calc(100% + 4px);min-width:230px;max-width:min(88vw,300px);
  background:var(--s2);border:1px solid var(--line2);
  box-shadow:0 20px 48px rgba(0,0,0,.66);padding:5px 0;z-index:2}
.tfsub[hidden]{display:none}
.tfsub.links{left:auto;right:calc(100% + 4px)}

/* Eine Spielzeile fuehrt tiefer, statt selbst auszuwaehlen — der
   Pfeil sagt das. Ausgewaehlt wird im Untermenue, wo auch "All
   Overwatch" steht. */
.tfpfeil{width:5px;height:5px;flex:none;margin-left:auto;
  border-right:1.5px solid currentColor;border-top:1.5px solid currentColor;
  transform:rotate(45deg);opacity:.55;transition:opacity .16s,transform .2s var(--e)}
.tfgame:hover .tfpfeil,.tfgame.auf .tfpfeil{opacity:1}
.tfgame.auf{background:rgba(255,255,255,.055);color:var(--white)}
/* Liegt die aktuelle Auswahl in diesem Spiel, bleibt das auch im
   zugeklappten Zustand sichtbar. */
.tfgame.hat .tft{color:var(--white)}
.tfgame.hat .tfpfeil{opacity:1;color:var(--brand-l)}
.tfgame .gm{width:20px;height:20px;flex:none}
.tfgame .gm img{width:20px;height:20px}

.tfopt{display:flex;align-items:center;gap:10px;width:100%;padding:9px 13px;
  background:none;border:0;text-align:left;cursor:pointer;color:var(--txt);
  font:500 13px/1.3 Barlow,sans-serif;transition:background .14s,color .14s}
.tfopt:hover,.tfopt:focus-visible{background:rgba(255,255,255,.055);color:var(--white)}
.tfopt img{width:20px;height:20px;flex:none;object-fit:contain}
.tfopt.on{color:var(--white)}
.tfopt.on .tft{font-weight:600}
.tfopt.on::after{content:"";width:5px;height:5px;margin-left:auto;flex:none;
  background:var(--brand-l);border-radius:50%}
/* Teams sind ankreuzbar, mehrere zugleich (01.10.2026): Kaestchen statt
   Punkt, angekreuzt in Lila mit Haken. */
.tfopt.tf-team::after{content:"";width:14px;height:14px;margin-left:auto;flex:none;
  border:1px solid var(--line2);border-radius:2px;background:none}
.tfopt.tf-team.on::after{border-color:var(--brand);
  background:var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/11px no-repeat}

.tft{display:flex;flex-direction:column;gap:2px;min-width:0}
.tft small{font-size:11px;color:var(--dim);font-weight:400}

.tfleer{padding:16px 13px;font-size:12.5px;color:var(--dim)}

/* Pflichtangaben in der Fusszeile. Sie stehen mittig zwischen
   Copyright und Herkunftszeile — an der Stelle, an der Besucher sie
   suchen, und von jeder Unterseite mit einem Klick erreichbar. */
.legal .rlinks{display:flex;gap:20px;flex-wrap:wrap;justify-content:center}
.legal .rlinks a{color:var(--dim);transition:color .18s}
.legal .rlinks a:hover{color:var(--white);text-decoration:underline;
  text-underline-offset:3px}

/* Abgeschaltete Knoepfe sollen als abgeschaltet erkennbar sein. */
.btn[disabled]{opacity:.42;cursor:not-allowed}
.btn[disabled]:hover{transform:none}

/* ── Anmelden und Registrieren ────────────────────────────────────
   Die Formulare liegen in derselben Karte wie bisher der Discord-Knopf.
   Drei Bereiche teilen sich den Platz und werden umgeschaltet, statt
   drei Seiten zu bauen — der Wechsel zwischen Anmelden und Registrieren
   ist haeufig, ein Seitenwechsel dafuer zu schwer. */
/* Luft zwischen Einleitungstext und erstem Feld. Ohne sie klebt die
   Feldbeschriftung am Absatz darueber und liest sich wie dessen
   Fortsetzung. */
.signin form{margin-top:24px}
.signin .f{margin:0 0 16px}
.signin .f label{display:block;font:600 11px/1 'Chakra Petch',sans-serif;
  letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:7px}
.signin .f input{width:100%;background:var(--black);border:1px solid var(--line);
  color:var(--white);font:400 14.5px/1.5 Barlow,sans-serif;padding:11px 13px;
  min-height:44px;transition:border-color .18s}
.signin .f input:focus{outline:none;border-color:var(--brand)}
.signin .f .hint{display:block;font-size:12px;color:var(--dim);margin-top:6px}

/* Kontrollkaestchen: Die Flaeche zum Treffen ist die ganze Zeile, nicht
   nur das 16px-Kaestchen. */
.cbox{display:flex;gap:11px;align-items:flex-start;margin:0 0 13px;cursor:pointer;
  font-size:13.5px;line-height:1.55;color:var(--txt)}
.cbox input{width:17px;height:17px;flex:none;margin-top:2px;accent-color:var(--brand);
  cursor:pointer}
.cbox a{color:var(--brand-l);text-decoration:underline;text-underline-offset:3px}

.formfehler{background:rgba(255,75,92,.1);border:1px solid rgba(255,75,92,.4);
  color:var(--red);font-size:13.5px;line-height:1.55;padding:11px 13px;margin:0 0 15px}
.formfehler[hidden]{display:none}

.switchline{display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  margin:16px 0 0;font-size:13.5px;color:var(--dim)}
/* Ein Knopf, der wie ein Link aussieht — weil es eine Aktion auf
   derselben Seite ist und kein Sprung woandershin. */
.linkbtn{background:none;border:0;padding:0;cursor:pointer;color:var(--brand-l);
  font:inherit;text-decoration:underline;text-underline-offset:3px}
.linkbtn:hover{color:var(--white)}
.linkbtn:disabled{color:var(--dim);cursor:not-allowed;text-decoration:none}

/* Trenner zwischen den beiden Wegen hinein. */
.odertrenner{display:flex;align-items:center;gap:14px;margin:26px 0 20px;
  color:var(--dim);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.odertrenner::before,.odertrenner::after{content:"";flex:1;height:1px;background:var(--line)}

.dchint{font-size:12.5px;line-height:1.6;color:var(--dim);margin:11px 0 0}

/* Die Prototyp-Auswahl statt der echten Discord-Anmeldung. */

/* Die Prototyp-Warnung faellt auf, ohne das Formular zu verdecken. */
.protowarn{margin-bottom:26px}

/* ── Rechtstexte ──────────────────────────────────────────────────
   Impressum und Datenschutz sind Fliesstext, der gelesen werden muss —
   nicht ueberflogen. Deshalb eine begrenzte Zeilenlaenge und mehr
   Zeilenabstand als im uebrigen Layout. */
/* Nur oben und unten: Die Kurzform padding:52px 0 72px hob das
   seitliche Polster von .wrap auf, auf dem Telefon stand der Text am
   Bildschirmrand. Die Zeilenlaenge begrenzen die Kinder, so beginnt
   der Text an derselben Kante wie die Ueberschrift darueber, statt
   mittig versetzt darunter. */
/* Oben derselbe Abstand wie auf jeder Unterseite (--sec, vorher 48),
   unten keiner: Den Abstand zum Footer traegt der Footer selbst (80 px).
   Mit beidem standen am Seitenende 144 px statt 80 (Final-Check 04.10.2026). */
.rechtstext{padding-block:var(--sec) 0}
.rechtstext>*{max-width:78ch}

/* Der Sprachwechsel steht ganz oben: Wer die andere Fassung braucht,
   sucht sie am Anfang und nicht nach 900 Pixeln. */
.sprachwahl{margin:0 0 30px}
.sprachwahl a{display:inline-flex;align-items:center;gap:7px;
  font:600 11px/1 'Chakra Petch',sans-serif;letter-spacing:.13em;
  text-transform:uppercase;color:var(--dim);text-decoration:none;
  border:1px solid var(--line);padding:8px 13px;transition:color .18s,border-color .18s}
.sprachwahl a:hover{color:var(--white);border-color:var(--line2);text-decoration:none}
.rechtstext h2{font:700 1.35rem/1.3 'Chakra Petch',sans-serif;color:var(--white);
  text-transform:uppercase;letter-spacing:.04em;margin:44px 0 14px}
.rechtstext h2:first-child{margin-top:0}
.rechtstext h3{font:600 1.02rem/1.35 'Chakra Petch',sans-serif;color:var(--white);
  margin:28px 0 9px}
.rechtstext p{color:var(--txt);line-height:1.72;margin:0 0 14px}
.rechtstext ul{color:var(--txt);line-height:1.72;margin:0 0 14px;padding-left:22px}
.rechtstext li{margin-bottom:5px;list-style:disc}
.rechtstext a{color:var(--brand-l);text-decoration:underline;
  text-underline-offset:3px}
.rechtstext a:hover{color:var(--white)}
.rechtstext code{font:500 13px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  background:var(--s2);padding:2px 6px;color:var(--white)}

/* Eine offene Stelle wird markiert, nicht verschwiegen. Ein Impressum
   mit erfundener Anschrift waere schlimmer als eines mit sichtbarer
   Luecke — die Luecke sieht man und fuellt sie. */
.lu{background:rgba(253,197,0,.16);border-bottom:1px dashed var(--gold);
  color:var(--gold);padding:1px 5px;font-style:italic}

.lubox{border:1px solid rgba(253,197,0,.4);background:rgba(253,197,0,.07);
  padding:18px 20px;margin:0 0 38px}
.lubox b{display:block;color:var(--gold);font:700 13px/1.4 'Chakra Petch',sans-serif;
  letter-spacing:.08em;text-transform:uppercase;margin-bottom:7px}
.lubox p{margin:0;font-size:14px;color:var(--txt);line-height:1.66}

/* Begruendungen und Hinweise an die Redaktion: leiser als der Text,
   den ein Besucher liest, aber nicht versteckt. */
.rechtstext .hinweis{font-size:13px;color:var(--dim);line-height:1.62;
  border-left:2px solid var(--line2);padding-left:14px;margin:-4px 0 20px}

.rtab{width:100%;border-collapse:collapse;margin:0 0 16px;font-size:14px}
.rtab th,.rtab td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);
  vertical-align:top;color:var(--txt)}
.rtab th{color:var(--white);font:600 11px/1 'Chakra Petch',sans-serif;
  letter-spacing:.12em;text-transform:uppercase}

/* ── cards ──────────────────────────────────────────────────── */
.card{border:1px solid var(--line);background:var(--s1);transition:border-color .3s,transform .4s var(--e)}
.card:hover{border-color:var(--line2);transform:translateY(-4px)}

/* fixture module */
.fx{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.fx>div{background:var(--s1);padding:var(--pad)}
.fxh{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.fxh h3{font-size:.95rem;color:var(--white);text-transform:uppercase;letter-spacing:.05em}
.cd{display:flex;gap:6px}
.cd div{min-width:50px;padding:8px 5px;border:1px solid var(--line);text-align:center}
.cd b{display:block;font:700 1.15rem/1 'Chakra Petch',sans-serif;color:var(--white)}
.cd small{display:block;margin-top:4px;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.vs{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0 4px}
.vs .t{display:flex;flex-direction:column;align-items:center;gap:11px;flex:1;min-width:0}
.crest{width:64px;height:64px;display:grid;place-items:center;border:1px solid var(--line);background:var(--s2)}
.crest img{width:46px}
/* Gegnerlogo (01.10.2026): eingepasst, nicht beschnitten. */
.crest.o img{width:46px;height:46px;object-fit:contain}
.crest.o{font:700 1.1rem/1 'Chakra Petch',sans-serif;color:var(--dim)}
.vs .t b{font:600 12.5px/1.3 'Chakra Petch',sans-serif;letter-spacing:.07em;text-transform:uppercase;color:var(--white);text-align:center}
.vs .m{text-align:center;flex:none}
.vs .m span{font:700 1.3rem/1 'Chakra Petch',sans-serif;color:var(--brand-l)}
.vs.academy .m span{color:var(--gold)}
.vs.community .m span{color:var(--white)}
.vs .m small{display:block;margin-top:7px;font-size:11px;color:var(--dim)}
.fxf{margin-top:16px;padding-top:16px;border-top:1px solid var(--line);display:flex;justify-content:space-between;
  gap:12px;flex-wrap:wrap;font-size:12px;color:var(--dim)}
.fxf a{color:var(--brand-l)}.fxf a:hover{color:var(--white)}

.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{padding:7px 14px;border:1px solid var(--line);color:var(--dim);font-size:12px;font-weight:500;transition:all .2s}
.chip[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:#fff}
.chip:hover{color:var(--white);border-color:var(--line2)}

.rl{display:flex;flex-direction:column}

/* team tiles */
/* Karten wachsen nicht ins Leere: Mit nur einer Division bleibt sie
   320 px breit und steht links, statt sich ueber die volle Zeile zu
   ziehen. */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,320px));
  gap:var(--gap);justify-content:start}
.tile{position:relative;aspect-ratio:3/4;overflow:hidden;border:1px solid var(--line);background:var(--s1);
  display:flex;flex-direction:column;justify-content:flex-end;padding:16px;
  transition:border-color .3s,transform .4s var(--e)}
.tile:hover{border-color:var(--line2);transform:translateY(-6px)}
.tile .art{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.42;filter:grayscale(.35);
  transition:transform .9s var(--e),opacity .4s,filter .4s}
.tile:hover .art{transform:scale(1.08);opacity:.62;filter:grayscale(0)}
.tile .fade{position:absolute;inset:0;background:linear-gradient(to top,var(--black) 8%,color-mix(in srgb,var(--black) 40%,transparent) 52%,transparent)}
.tile b{position:relative;z-index:2;font:600 12.5px/1.3 'Chakra Petch',sans-serif;letter-spacing:.07em;text-transform:uppercase;color:var(--white)}
.tile .st{position:relative;z-index:2;margin-top:7px;font-size:11px;color:var(--dim);display:flex;align-items:center;gap:7px}
.tile.live .st{color:var(--live)}
.tile .d{width:6px;height:6px;border-radius:50%;background:var(--live);position:relative;flex:none}
.tile .d::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--live);animation:ping 2.4s var(--e) infinite}
.tile.soon{opacity:.5}.tile.soon:hover{opacity:.85}

/* news */
.news{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.na{border:1px solid var(--line);background:var(--s1);overflow:hidden;display:flex;flex-direction:column;
  transition:border-color .3s,transform .4s var(--e)}
.na:hover{border-color:var(--line2);transform:translateY(-6px)}
.na .ph2{aspect-ratio:16/9;overflow:hidden;background:var(--s2)}
.na .ph2 img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--e)}
.na:hover .ph2 img{transform:scale(1.06)}
.na .bd{padding:20px;display:flex;flex-direction:column;gap:10px;flex:1}
.na .src{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-l)}
.na .src.ac{color:var(--gold)}
.na h4{font-size:1rem;color:var(--white);line-height:1.34}
.na time{margin-top:auto;font-size:11.5px;color:var(--dim)}

/* panels */
.panel{border:1px solid var(--line);background:var(--s1);padding:clamp(26px,4vw,44px);margin-top:var(--sec);
  display:flex;flex-wrap:wrap;gap:26px;justify-content:space-between;align-items:center}
.panel h3{font-size:clamp(1.3rem,3vw,1.9rem);color:var(--white);text-transform:uppercase;max-width:22ch}
.panel p{color:var(--dim);margin:12px 0 0;max-width:52ch}
.slots{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.slot{display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border:1px solid var(--line);
  font-size:12px;color:var(--txt)}
.slot .d{width:6px;height:6px;border-radius:50%;background:var(--live);position:relative;flex:none}
.slot .d::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--live);animation:ping 2.4s var(--e) infinite}

/* partner strip */
.pt{border-block:1px solid var(--line);background:var(--s1);overflow:hidden}
/* conveyor belt: no gap property — spacing lives on the item, so shifting
   by exactly one set lands on an identical frame and the seam is invisible */
/* min-height haelt die Streifenhoehe stabil: Mit Logos traegt sie das
   Bild, mit reinen Platzhaltern fiele sie auf Texthoehe zusammen — und
   spraenge wieder hoch, sobald der erste Partner dazukommt.

   72 und nicht 46: Die Seite setzt global box-sizing:border-box, also
   zaehlen die 13px Polster oben und unten mit hinein. 46 + 2*13 = 72
   ergibt dieselbe Hoehe wie ein Streifen mit 46px hohen Logos. */
.pt .rn{display:flex;align-items:center;width:max-content;padding:13px 0;min-height:72px;
  /* Die Dauer setzt das Skript aus gemessener Breite und Tempo; der
     Wert hier greift nur, falls das ausbleibt. */
  animation:run 75s linear infinite;will-change:transform}
.pt:hover .rn{animation-play-state:paused}
@keyframes run{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* Barlow statt Chakra Petch, und keine Versalien.

   Chakra Petch ist eine kantige Techno-Schrift mit abgeschnittenen
   Ecken — richtig fuer Teamnamen und Ergebnisse, falsch neben einem
   Partnerlogo. Die gelieferten Marken sind weich, rund und farb-
   verlaufend; die harte Sperrschrift daneben kaempft mit ihnen.

   Barlow tritt zurueck und laesst dem Zeichen den Auftritt. Und ein
   Firmenname wird geschrieben, wie die Firma ihn schreibt — nicht in
   Grossbuchstaben umgeformt. "Visiocast Studio" ist der Name,
   "VISIOCAST STUDIO" ist eine Behauptung darueber. */
.pt span{display:inline-flex;align-items:center;gap:16px;margin-right:118px;flex:none;
  font:500 17px/1.2 Barlow,sans-serif;letter-spacing:.005em;
  color:var(--txt);white-space:nowrap;transition:color .3s}

/* Hoehe gesetzt, Breite frei: Sponsorenlogos sind meist breite Wort-
   marken. In einen quadratischen Kasten gezwaengt schrumpfte etwa
   "PaysafeCard" auf 28px Breite und waere keine 5px hoch. Ueber die
   Hoehe gebunden stehen schmale und breite Marken dagegen optisch
   gleich gross — so wie in einer gedruckten Sponsorenleiste.

   max-width faengt Ausreisser ab: Ein extrem langgezogenes Logo
   schoebe sonst alle anderen aus dem Bild.

   Das Skript baut nach dem Laden der Bilder neu auf, weil eine freie
   Breite vor dem Laden null ist und die Messung sonst danebenliefe. */
/* Die Dateien sind auf ihr Motiv beschnitten — diese 46 Pixel sind
   also 46 Pixel Zeichen, nicht Leinwand mit Rand. Zum Vergleich: Vor
   dem Beschneiden lief TLC auf 48px Hoehe, von denen 28 Prozent leer
   waren, sichtbar blieben rund 35px.

   Mit 13px Luft oben und unten tragen die Marken damit zwei Drittel
   der Streifenhoehe. Mehr waere gedraengt, weniger sah nach einem
   Logo im zu grossen Kasten aus. */
.pt span img{height:46px;width:auto;max-width:170px;flex:none;object-fit:contain;
  /* Graustufen: Sechs Marken in sechs fremden Farbwelten machen den
     Streifen unruhig und ziehen Aufmerksamkeit vom Inhalt ab. Einfarbig
     wirken sie als eine Reihe statt als Sammelsurium.

     Die Helligkeit wird dabei angehoben: Eine mittlere Farbe wird zu
     mittlerem Grau, und das verschwindet auf fast schwarzem Grund. */
  /* Seit 01.10.2026 in Farbe (Alexander): Die Partner sollen als sie
     selbst zu sehen sein, nicht als graue Reihe. */
  opacity:1;transition:opacity .3s,filter .35s}

/* Eine Wortmarke steht allein, ohne Namen daneben. Sie laeuft etwas
   niedriger als eine Bildmarke: Ein Schriftzug wirkt auf Versalhoehe,
   ein Zeichen fuellt seine ganze Hoehe — gleiche Pixelhoehe liesse
   die Wortmarke groesser erscheinen. */
.pt span.wm img{height:34px;max-width:260px}

/* Der Streifen haelt beim Darueberfahren ohnehin an. Dass Logo und
   Name dabei aufklaren, macht aus dem Anhalten eine Einladung zum
   Lesen statt eines blossen Stillstands. */
/* Beim Darueberfahren haelt der Streifen ohnehin an — dann kehrt auch
   die Farbe zurueck. Aus dem Anhalten wird damit ein Hinsehen. */
.pt:hover span{color:var(--white)}
.pt:hover span img{opacity:1;filter:none}

/* Die freien Plaetze bleiben klein, gesperrt und in Versalien: Sie
   sind ein Etikett, kein Firmenname. Der Unterschied haelt sie im
   Streifen sofort auseinander. */
.pt span.ph3{color:rgba(255,255,255,.18);font:600 11.5px/1 'Chakra Petch',sans-serif;
  letter-spacing:.16em;text-transform:uppercase}
.pt:hover span.ph3{color:rgba(255,255,255,.3)}

/* footer */
footer{margin-top:80px;border-top:1px solid var(--line);background:var(--s1)}
.fg{display:grid;grid-template-columns:1.7fr repeat(3,1fr);gap:32px;padding:48px 0}
.fg h5{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--white);margin:0 0 16px;font-weight:600}
.fg ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.fg li a{font-size:14px;color:var(--dim);transition:color .2s}
.fg li a:hover{color:var(--white)}
.fg p{color:var(--dim);font-size:14px;margin:0 0 20px;max-width:34ch}
.soc{display:flex;gap:8px;flex-wrap:wrap}
.soc a{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line);color:var(--dim);transition:all .2s}
.soc a:hover{color:var(--white);border-color:var(--line2)}
.soc svg{width:16px;height:16px}
/* Drei Spalten mit gleich breiten Aussenspalten: Mit space-between
   stand die Mitte nur dann mittig, wenn links und rechts gleich lang
   waren; so sass sie 20 px neben der Seitenmitte. */
.legal{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:24px 0;
  border-top:1px solid var(--line);font-size:12.5px;color:var(--dim)}
.legal>:last-child{justify-self:end}
/* Schmal: untereinander und mittig, statt dass eine Zeile umbricht und
   "Made in Europe" allein links unten haengt. */
@media (max-width:620px){
  .legal{grid-template-columns:1fr;justify-items:center;gap:12px;text-align:center}
  .legal>:last-child{justify-self:center}
}

/* reveal */
.js .rv{opacity:0;transform:translateY(20px);transition:opacity .6s var(--e),transform .6s var(--e)}
.js .rv.in{opacity:1;transform:none}

@media (max-width:1180px){.tiles{grid-template-columns:repeat(3,1fr)}.fx{grid-template-columns:1fr}}
/* Mobiles Menue. Vorher position:fixed mit top:124px: Der Kopf hat
   backdrop-filter und wird damit selbst zum Bezugsrahmen fuer fixed,
   die 124 px zaehlten also ab Kopfoberkante. Zwischen Kopf und Menue
   klaffte eine Luecke von 35 px, durch die die Seite schien, und quer
   (360 px hoch) lagen die unteren Eintraege ausserhalb des Bildes, ohne
   dass man hinkam. Jetzt haengt das Menue absolut an der Kopfunterkante,
   scrollt in sich, wenn es nicht passt (126 px = Leiste oben plus
   Kopf), und die Seite dahinter ist abgedunkelt und gesperrt. */
@media (max-width:900px){
  .menu{position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:var(--black);
    border-bottom:1px solid var(--line);padding:8px var(--gut) 20px;display:none;z-index:79;
    max-height:calc(100vh - 126px);max-height:calc(100dvh - 126px);overflow-y:auto;overscroll-behavior:contain;
    box-shadow:0 0 0 100vmax rgba(0,0,0,.6);clip-path:inset(0 0 -100vmax 0)}
  .menu.open{display:flex}
  .menu a{padding:15px 0;border-bottom:1px solid var(--line);font-size:16px}
  /* Sperre an body, nicht an html: body hat overflow-x:hidden, mit
     html:hidden wuerde body selbst zum Scrollbereich und der Kopf
     klebte nicht mehr oben (gescrollt lag das Menue ausserhalb). */
  body:has(.menu.open){overflow:hidden}
  .burger{display:grid}
  /* Offen zeigt der Knopf ein X: so ist klar, wo das Menue zugeht. */
  .burger[aria-expanded="true"]{color:var(--white);border-color:var(--line2)}
  .burger[aria-expanded="true"] svg{display:none}
  .burger[aria-expanded="true"]::before,.burger[aria-expanded="true"]::after{content:"";grid-area:1/1;
    width:18px;height:2px;background:currentColor;transform:rotate(45deg)}
  .burger[aria-expanded="true"]::after{transform:rotate(-45deg)}
  .news{grid-template-columns:1fr}.fg{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .logo b i{display:none}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .fg{grid-template-columns:1fr}.rr .dt{display:none}
  .crest{width:52px;height:52px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .tabs{scroll-behavior:auto}
  .js .rv{opacity:1;transform:none}
}

/* ── hero carousel (home) ─────────────────────────────────────
   Seit 04.10.2026 filmisch (Entwurf C, Alexander): Bild ueber die volle
   Breite, rund 85 % der Bildschirmhoehe wie bei BIG, Schlagzeile unten
   links, darunter die Folien als Kartenleiste. Die aktive Karte traegt
   den Fortschritt, ein Klick springt dorthin. */
.hero{position:relative;height:max(560px,calc(100svh - var(--hdr) - 26px - 56px));overflow:hidden;background:var(--black)}
.sl{position:absolute;inset:0;opacity:0;transition:opacity 1.1s var(--e);pointer-events:none}
.sl.on{opacity:1;pointer-events:auto}
/* inset:0 und Start bei 1.04 (vorher -3 % und 1.08): Das News-Bild wurde
   auf dichten Bildschirmen bis 1,29-fach hochgerechnet und wirkte weich. */
.sl .bg{position:absolute;inset:0;background-size:cover;background-position:center 30%;
  transform:scale(1.04);transition:transform 9s linear;filter:saturate(.92)}
.sl.on .bg{transform:scale(1)}
/* Verlauf: unten in den Seitengrund, links fuer die Schrift */
.sl .vl{position:absolute;inset:0;
  background:linear-gradient(to top,var(--black) 4%,color-mix(in srgb,var(--black) 86%,transparent) 30%,color-mix(in srgb,var(--black) 20%,transparent) 62%,color-mix(in srgb,var(--black) 35%,transparent)),
             linear-gradient(90deg,color-mix(in srgb,var(--black) 80%,transparent),transparent 60%)}
.sl .in{position:relative;z-index:3;height:100%;display:flex;flex-direction:column;justify-content:flex-end;
  padding-bottom:56px;transform:translateY(16px);opacity:0;transition:opacity .7s var(--e),transform .9s var(--e)}
.sl.on .in{transform:none;opacity:1}
.hero.mitkarten .sl .in{padding-bottom:calc(var(--hkh,84px) + 62px)}
.sl .tagx{align-self:flex-start;font:600 11px/1 'Chakra Petch',sans-serif;letter-spacing:.2em;
  text-transform:uppercase;color:#fff;padding:8px 13px;background:var(--brand)}
.sl h2{font-size:clamp(2.4rem,5.6vw,5.6rem);line-height:.92;color:#fff;text-transform:uppercase;margin:18px 0 0;max-width:15ch;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}
.sl p{color:var(--txt);margin:16px 0 0;max-width:48ch;font-size:17px}
.sl .acts2{margin-top:22px}
/* Kartenleiste */
.hkarten{position:absolute;left:0;right:0;bottom:28px;z-index:6}
.hkarten[hidden]{display:none}
.hkl{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr)) auto;gap:var(--gap);align-items:stretch}
.hkarte{position:relative;display:flex;gap:14px;align-items:center;text-align:left;padding:14px 16px 14px 14px;min-width:0;
  background:rgba(24,24,29,.72);backdrop-filter:blur(10px);border:1px solid var(--line);color:inherit;font:inherit;cursor:pointer;
  transition:border-color .2s,background .2s}
.hkarte:hover{border-color:var(--line2);background:rgba(31,31,38,.85)}
.hkarte[aria-current="true"]{border-color:rgba(185,156,245,.5)}
.hkarte .prog{position:absolute;left:-1px;right:-1px;top:-1px;height:2px;overflow:hidden}
.hkarte .prog i{display:block;height:100%;width:100%;background:var(--brand-l);transform:scaleX(0);transform-origin:left}
.hkarte .prog i.run{animation:hkprog var(--dauer,7000ms) linear forwards}
.hkarte[aria-current="true"] .prog i:not(.run){transform:scaleX(1)}
.hero.paused .hkarte .prog i.run{animation-play-state:paused}
@keyframes hkprog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hkarte .hkb{width:64px;height:48px;flex:none;background:var(--s2) center/cover no-repeat}
.hkarte .hkt{min-width:0;display:flex;flex-direction:column}
.hkarte small{font:600 10px/1.3 'Chakra Petch',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hkarte b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin-top:6px;
  font:600 14px/1.25 'Chakra Petch',sans-serif;color:#fff;text-transform:uppercase;letter-spacing:.02em}
.hctl{display:flex;flex-direction:column;gap:6px}
.hctl button,.hmctl{width:40px;flex:1;min-height:36px;display:grid;place-items:center;border:1px solid var(--line2);
  background:color-mix(in srgb,var(--black) 55%,transparent);color:#fff;cursor:pointer;transition:background .2s,border-color .2s}
.hctl button:hover,.hmctl:hover{background:var(--brand);border-color:var(--brand)}
.hctl svg,.hmctl svg{width:16px;height:16px}
.hmctl{display:none;position:absolute;right:var(--gut);top:20px;z-index:7;flex:none;height:36px}
.hmctl[hidden]{display:none!important}
@media (max-width:1100px){.hkarte .hkb{display:none}}
@media (max-width:1700px){.hkl.viele .hkb{display:none}}
@media (max-width:900px){
  .hkl{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(170px,1fr);overflow-x:auto;scrollbar-width:none;
    margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut)}
  .hkl::-webkit-scrollbar{display:none}
  .hctl{display:none}
  .hmctl{display:grid}
}
@media (max-width:620px){
  .hero{height:max(560px,calc(100svh - var(--hdr) - 26px - 48px))}
  .sl .bg{background-position:30% 30%}
  .sl p{font-size:15.5px}
  .hkl{grid-auto-columns:62%}
  .hkarten{bottom:20px}
  .hero.mitkarten .sl .in{padding-bottom:calc(var(--hkh,76px) + 44px)}
}

/* ═══════════════════════════════════════════════════════════════
   TIER SYSTEM — colour carries meaning, not decoration.
   Main roster is always purple. Academy is always gold.
   ═══════════════════════════════════════════════════════════════ */
.tier{display:inline-flex;align-items:center;gap:7px;padding:5px 10px;border:1px solid;
  width:fit-content;align-self:flex-start;flex:none;
  font:600 10px/1 'Chakra Petch',sans-serif;letter-spacing:.16em;text-transform:uppercase}
.tier.main{color:var(--brand-l);border-color:rgba(120,64,224,.5);background:rgba(120,64,224,.12)}
.tier.academy{color:var(--gold);border-color:rgba(253,197,0,.42);background:rgba(253,197,0,.1)}
.tier.community{color:var(--dim);border-color:var(--line)}
/* Die Dachmarke bekommt Silber — eine Ebene ueber den Kadern,
   deshalb weder Lila noch Gold. */
.tier.network{color:var(--silver);border-color:rgba(201,206,214,.45);
  background:rgba(201,206,214,.09)}

/* Ein Team kann eine eigene Tag-Farbe fuehren. Einfarbig steht sie
   als Stilangabe am Chip selbst und schlaegt die Stufenklasse. Ein
   Verlauf braucht die eigene Lage darunter: background-clip:text
   beschneidet jede Flaeche des Elements auf die Buchstaben, ein
   getoenter Hintergrund am selben Element waere damit verschwunden.
   Rahmen und Flaeche bleiben deshalb aussen, der Verlauf innen. */
.tier .tgrad{-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  /* Ohne eigene Zeilenhoehe schneidet Safari Unterlaengen ab. */
  line-height:inherit;display:inline-block}

/* tier edge on any card */
.edge-main{box-shadow:inset 3px 0 0 var(--brand)}
.edge-academy{box-shadow:inset 3px 0 0 var(--gold)}

.tile.main:hover{border-color:var(--brand)}
.tile.academy:hover{border-color:var(--gold)}
.tile.main .st{color:var(--brand-l)}
.tile.academy .st{color:var(--gold)}
.tile.academy .d{background:var(--gold)}
.tile.academy .d::after{background:var(--gold)}



.game{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}

/* ── sign in ────────────────────────────────────────────────── */
.signin{display:grid;grid-template-columns:1.05fr .95fr;gap:0;border:1px solid var(--line);
  background:var(--s1);overflow:hidden;margin-block:52px 0}
.signin .art{position:relative;min-height:440px;background:url(squad-1400.webp) center/cover;filter:saturate(.85)}
.signin .art::after{content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,color-mix(in srgb,var(--black) 25%,transparent),color-mix(in srgb,var(--black) 90%,transparent))}
.signin .form{padding:clamp(30px,4.5vw,60px);display:flex;flex-direction:column;justify-content:center}
.signin h2{font-size:clamp(1.6rem,3.4vw,2.4rem);color:#fff;text-transform:uppercase}
.signin p{color:var(--dim);margin:16px 0 0;max-width:44ch}
.dbtn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:56px;padding:0 26px;
  background:#5865F2;color:#fff;font:600 14px/1 'Chakra Petch',sans-serif;letter-spacing:.1em;
  text-transform:uppercase;margin-top:30px;transition:background .2s,transform .2s var(--e)}
.dbtn:hover{background:#4752C4;transform:translateY(-2px)}
.dbtn svg{width:22px;height:22px}
.note{margin-top:22px;font-size:13px;color:var(--dim);display:flex;gap:10px;align-items:flex-start}
.note svg{width:15px;height:15px;flex:none;margin-top:3px;color:var(--brand-l)}
.rules{list-style:none;margin:28px 0 0;padding:26px 0 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:13px}
.rules li{font-size:14px;color:var(--dim);display:flex;gap:11px;align-items:flex-start}
.rules li b{color:var(--white);font-weight:600}
.rules .k{width:5px;height:5px;background:var(--brand);margin-top:8px;flex:none}
@media (max-width:900px){.signin{grid-template-columns:1fr}.signin .art{min-height:200px;order:-1}}

footer .logo img{width:66px;height:66px}
footer .logo b{font-size:22px}

/* ── shop ───────────────────────────────────────────────────── */
.shopgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.prod{border:1px solid var(--line);background:var(--s1);overflow:hidden;display:flex;flex-direction:column;
  transition:border-color .3s,transform .4s var(--e)}
.prod:hover{border-color:var(--line2);transform:translateY(-6px)}
.prod .im{aspect-ratio:1;position:relative;overflow:hidden;background:var(--s2);display:grid;place-items:center}
.prod .im img{width:100%;height:100%;object-fit:cover;opacity:.32;filter:grayscale(.6);transition:all .7s var(--e)}
.prod:hover .im img{opacity:.5;filter:grayscale(.2);transform:scale(1.05)}
.prod .im span{position:absolute;font:600 10px/1 'Chakra Petch',sans-serif;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim);border:1px solid var(--line2);padding:8px 13px;background:color-mix(in srgb,var(--black) 70%,transparent)}
.prod .bd{padding:16px;display:flex;flex-direction:column;gap:7px}
.prod b{font:600 13.5px/1.3 'Chakra Petch',sans-serif;letter-spacing:.05em;text-transform:uppercase;color:var(--white)}
.prod small{font-size:12px;color:var(--dim)}
@media (max-width:1100px){.shopgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.shopgrid{grid-template-columns:1fr}}

/* ── dashboard ──────────────────────────────────────────────── */
.dash{display:grid;grid-template-columns:320px minmax(0,1fr);gap:var(--gap);margin-top:40px;align-items:start}
/* Profilseite: gleicher Abstand unter dem Seitenkopf wie bei den
   Rechtstexten, egal ob angemeldet (.dash) oder nicht. */
#profilseite{margin-top:var(--sec)}
/* Die linke Spalte traegt die Ausweiskarte und darunter die Teamkarte;
   sie haftet als Ganzes, die Karten darin nicht einzeln. */
.lcol{display:flex;flex-direction:column;gap:var(--gap);position:sticky;top:104px}
.lcol .me{position:static}
.me{border:1px solid var(--line);background:var(--s1);overflow:hidden;position:sticky;top:104px}
.me.tkarte .bd{padding:16px 20px 6px}
.me.tkarte h4{font-size:.95rem;color:var(--white);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
/* Das Banner traegt bei Bedarf das eigene Bild (per Stilangabe);
   der Verlauf ist nur der Rueckfall, wenn weder Bild noch
   Akzentfarbe vorliegen. */
.me .ban{height:96px;background:linear-gradient(115deg,var(--brand-d),var(--brand));position:relative;
  background-size:cover;background-position:center}
.me .av{width:84px;height:84px;border:3px solid var(--s1);background:var(--s2);margin:-42px 0 0 20px;
  position:relative;z-index:2;display:grid;place-items:center;overflow:hidden}
/* Ein echtes Profilbild fuellt den Rahmen; die Silhouette (SVG,
   .avph) sitzt weiter unten kleiner in der Mitte. */
.me .av img{width:100%;height:100%;object-fit:cover}
.me .bd{padding:14px 20px 22px}
.me h3{font-size:1.45rem;color:var(--white);text-transform:uppercase;margin-top:12px}
.me .at{font-size:13px;color:var(--dim);margin-top:5px}
/* Die Bio auf der Karte: Zeilenumbrueche bleiben, sonst nichts. */
.me .bio{margin-top:12px;font-size:13.5px;line-height:1.55;color:var(--dim);white-space:pre-line;
  overflow-wrap:anywhere}
.me .socs{margin-top:16px}
.me .rows{list-style:none;margin:20px 0 0;padding:18px 0 0;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:13px;font-size:13.5px}
.me .rows li{display:flex;justify-content:space-between;gap:14px;color:var(--dim)}
.me .rows li b{color:var(--white);font-weight:600}
/* Der Rollen-Tag in der Zeile "Role": kleiner als der Tag ueber dem
   Namen, damit er in die Zeilenhoehe passt. */
.me .rows li .tier{padding:4px 8px;font-size:9.5px}

/* Die Teams-Box auf der Profilseite: eine Zeile je Kader, klickbar
   auf die Teamseite, rechts die eigene Funktion darin. */
.pteams{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
/* Genau eine Trennlinie ZWISCHEN zwei Teams — keine ueber dem ersten,
   keine unter dem letzten (Alexander, 25.09.2026). */
.pteams li + li{border-top:1px solid var(--line)}
.pteams a{display:flex;align-items:center;gap:12px;padding:9px 0;color:var(--txt);text-decoration:none;
  transition:color .2s}
.pteams a:hover{color:var(--white)}
/* Wappen gross wie im Nutzermenue (Alexander, 02.10.2026). */
.pteams .crest{width:52px;height:52px;flex:none}
.pteams .crest img{width:40px;height:40px;object-fit:contain}
.pteams .ptx{display:flex;flex-direction:column;gap:2px;min-width:0}
.pteams .ptx b{font:600 13px/1.2 'Chakra Petch',sans-serif;letter-spacing:.05em;text-transform:uppercase;color:var(--white)}
.pteams .ptx small{font-size:11.5px;color:var(--dim)}

.dcol{display:flex;flex-direction:column;gap:18px}
.dbox{border:1px solid var(--line);background:var(--s1);padding:24px}
.dbox h4{font-size:.95rem;color:var(--white);text-transform:uppercase;letter-spacing:.06em;margin-bottom:16px}
.todo{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.todo li{display:flex;gap:13px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--line);font-size:14px}
.todo li:last-child{border-bottom:0}
.todo .mark{width:18px;height:18px;border:1px solid var(--line2);flex:none;margin-top:2px;display:grid;place-items:center;font-size:11px;color:var(--brand-l)}
.todo .mark.ok{background:var(--brand);border-color:var(--brand);color:#fff}
.todo b{color:var(--white);font-weight:600;display:block;margin-bottom:3px}
.todo small{color:var(--dim)}
@media (max-width:900px){.dash{grid-template-columns:1fr}.me,.lcol{position:static}}

/* ── nav dropdown ───────────────────────────────────────────── */
.menu .has-sub{position:relative;display:flex;align-items:center}
/* the caret is its own element: ::after already belongs to the active underline */
.menu .caret{width:7px;height:7px;flex:none;position:relative;top:-1px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);transition:transform .25s var(--e);opacity:.8}
.has-sub:hover .caret,.has-sub:focus-within .caret{transform:rotate(225deg);top:2px;opacity:1}
.sub{position:absolute;top:100%;left:-16px;min-width:290px;z-index:85;
  background:var(--s1);border:1px solid var(--line2);padding:7px;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .22s var(--e),transform .28s var(--e),visibility .22s;
  box-shadow:0 22px 50px -18px rgba(0,0,0,.9)}
/* bridge so the pointer can travel from the link into the panel */
.sub::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.has-sub:hover .sub,.has-sub:focus-within .sub{opacity:1;visibility:visible;transform:none}
.sub a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 13px;
  font-size:14px;font-weight:500;color:var(--dim);transition:background .18s,color .18s}
.sub a:hover{background:rgba(255,255,255,.055);color:var(--white)}
.sub a .s{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);display:flex;align-items:center;gap:6px}
.sub a.on .s{color:var(--live)}
.sub a .d{width:5px;height:5px;border-radius:50%;background:var(--live);position:relative;flex:none}
.sub a .d::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--live);animation:ping 2.4s var(--e) infinite}
.sub .split{height:1px;background:var(--line);margin:7px 6px}
.sub .all{color:var(--brand-l);font-weight:600}
.sub .all:hover{color:var(--white)}
@media (max-width:900px){
  .menu .caret{display:none}
  /* .has-sub ist auf dem Desktop eine Flex-Zeile: mobil standen Teams
     und Overwatch deshalb nebeneinander statt untereinander. */
  .menu .has-sub{display:block}
  .menu .has-sub>a{display:flex}
  .sub{position:static;opacity:1;visibility:visible;transform:none;border:0;box-shadow:none;
    padding:0 0 10px 14px;min-width:0;background:none}
  .sub::before{display:none}
  .sub a{padding:11px 0;border-bottom:1px solid var(--line);font-size:15px}
  .menu .has-sub>a::after{display:none}
}

/* ═══════════════════════════════════════════════════════════════
   TEAM PAGE
   ═══════════════════════════════════════════════════════════════ */
.thead{position:relative;border-bottom:1px solid var(--line);overflow:hidden}
.thead .ban{position:absolute;inset:0;background-size:cover;background-position:center 30%;
  opacity:.4;filter:saturate(.8)}
.thead .veil{position:absolute;inset:0;
  background:linear-gradient(to top,var(--black) 6%,color-mix(in srgb,var(--black) 72%,transparent) 46%,color-mix(in srgb,var(--black) 35%,transparent))}
.thead .in{position:relative;z-index:2;padding-block:56px 36px;display:flex;gap:var(--pad);align-items:flex-end;flex-wrap:wrap}
.thead .crest2{width:118px;height:118px;flex:none;border:1px solid var(--line2);background:color-mix(in srgb,var(--black) 70%,transparent);
  backdrop-filter:blur(8px);display:grid;place-items:center}
.thead .crest2 img{width:72px}
/* Die Brotkrume war ungestaltet (16 px in Textfarbe) und damit groesser
   als auf jeder anderen Seite. Jetzt wie .ph .crumb, auf dem Bild etwas
   heller, so wie der Rueckweg daneben. */
.thead .crumb{font-size:12px;color:rgba(255,255,255,.62);margin-bottom:14px}
.thead .crumb a:hover{color:#fff}
.thead .txt{flex:1;min-width:260px}
.thead h1{font-size:clamp(1.9rem,4.4vw,3.2rem);color:#fff;text-transform:uppercase;margin-top:12px}
/* Versteckte Teams in der Teamliste (12.10.2026): Tag Hidden, Karte gedaempft. */
.dcard .tier.dhidden{color:var(--gold);border-color:rgba(253,197,0,.42);background:rgba(10,8,18,.72);margin-top:8px}
.dcard.versteckt .art{opacity:.55}
/* Versteckte Teams (12.10.2026): Hinweis fuer die, die das Team pflegen. */
.thead .tversteckt{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:10px;max-width:640px;
  padding:8px 12px;border:1px solid rgba(253,197,0,.42);background:rgba(10,8,18,.72);color:var(--dim);font-size:13px;line-height:1.4}
.thead .tversteckt b{font:600 10px/1 'Chakra Petch',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.thead .meta{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:14px;
  font-size:13.5px;color:var(--dim)}
/* Die Spielmarke im Kopf: gross genug zum Erkennen, nicht so gross,
   dass sie dem Teamnamen darueber Konkurrenz macht. */
.thead .gmeta{display:inline-flex;align-items:center;transition:transform .2s var(--e)}
.thead .gmeta:hover{transform:translateY(-2px)}
.thead .gmeta .gm{width:32px;height:32px}
.thead .gmeta .gm img{width:32px;height:32px}
.thead .meta b{color:var(--white);font-weight:600}
.tabs{position:relative;z-index:2;display:flex;gap:26px;overflow-x:auto;scrollbar-width:none;
  scroll-behavior:smooth;min-width:0}
.tabs::-webkit-scrollbar{display:none}
.tabs a{padding:15px 0;font-size:13.5px;font-weight:500;color:var(--dim);white-space:nowrap;position:relative;
  transition:color .2s}
.tabs a:hover{color:var(--white)}
.tabs a.on{color:var(--white)}
/* Der Strich wandert nicht, er wechselt — sieben Abschnitte liegen zu
   weit auseinander, als dass ein gleitender Balken noch lesbar waere. */
.tabs a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--teamfarbe,var(--brand));
  transform:scaleX(0);transform-origin:left;transition:transform .32s var(--e)}
.tabs a.on::after{transform:scaleX(1)}
.tbar.academy .tabs a::after{background:var(--teamfarbe,var(--gold))}

/* ── Klebende Teamleiste ──────────────────────────────────────────
   Sitzt exakt unter der Hauptnavigation und traegt die Abschnitts-
   reiter. Wappen und Name fahren erst ein, wenn der grosse Kopf
   oben herausgelaufen ist — davor stuenden sie doppelt. */
.tbar{position:sticky;top:var(--hdr);z-index:60;background:color-mix(in srgb,var(--black) 92%,transparent);
  backdrop-filter:blur(14px);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* position:relative ist hier tragend, nicht kosmetisch: Ohne sie faellt
   der Bezugsrahmen des Teamwechslers auf .tbar zurueck (sticky + backdrop-
   filter bilden beide einen), und .tbar laeuft ueber die volle Fenster-
   breite. Das Menue haengt dann am Fensterrand, waehrend der Knopf mit
   dem zentrierten .wrap nach rechts wandert — ab 1400px Fensterbreite
   driftet es sichtbar weg. Am .wrap verankert stimmt es bei jeder Breite. */
.tbin{display:flex;align-items:center;gap:0;position:relative}
/* Die Reiter nehmen den Rest und scrollen bei Bedarf; der Knopf sitzt
   rechts und bleibt immer greifbar — genau das ist der Sinn, ihn aus
   der Seite in die klebende Leiste zu holen. */
.tbin .tabs{flex:1 1 auto;min-width:0}
.tbedit{flex:none;margin-left:20px;display:flex;align-items:center}
.tbedit:empty{display:none}
.tbedit .btn{min-height:32px;padding:0 13px;font-size:11px;letter-spacing:.11em;gap:7px}
.tbedit .edico{width:13px;height:13px;flex:none}
.tbid{display:grid;grid-template-columns:0fr;align-items:center;flex:none;
  opacity:0;visibility:hidden;margin-right:0;
  transition:grid-template-columns .44s var(--e),opacity .26s ease,
             margin-right .44s var(--e),visibility 0s linear .3s}
.tbar.stuck .tbid{grid-template-columns:1fr;opacity:1;visibility:visible;margin-right:28px;
  transition:grid-template-columns .44s var(--e),opacity .26s ease,
             margin-right .44s var(--e),visibility 0s}
/* Das Grid-Kind ist .tbidin, nicht mehr der Knopf: Die Kennung traegt
   zwei Ziele nebeneinander, und der gemeinsame Kasten uebernimmt das
   Einfahren beim Scrollen samt Beschnitt. */
/* padding-right traegt den gedrehten Pfeil: Ein 6x6-Quadrat um 45
   Grad gedreht misst 6*Wurzel(2) ~ 8,49 und ragt damit rund 1,25px
   ueber sein Layoutkaestchen hinaus. Der Pfeil steht als letztes
   Element buendig an der Kante — ohne diese Luft schneidet das
   overflow:hidden ihm die Ecke ab.

   Das overflow bleibt: Ohne es quillt der Inhalt beim Einfahren
   ueber die Reiterleiste, weil das Grid die Spalte auf 0fr zieht. */
.tbid>.tbidin{display:flex;align-items:center;gap:10px;overflow:hidden;min-width:0}
/* Die Luft nur, wenn die Kennung sichtbar ist. Eingeklappt schob sie
   die Reiter 3 px neben die Inhaltskante (Spacing Check 30.09.2026). */
.tbar.stuck .tbid>.tbidin{padding-right:3px}

/* Die Spielemarke: zurueck auf die Spielseite. */
.tbgame{display:flex;align-items:center;flex:none;transition:opacity .18s}
.tbgame:hover{opacity:.62}
.tbgame .gm{width:22px;height:22px}
.tbgame .gm img{width:22px;height:22px}

/* Der Teamname: oeffnet den Teamwechsler. */
.tbidbtn{display:flex;align-items:center;gap:10px;min-width:0;
  padding:0;text-align:left;transition:opacity .18s}
.tbidbtn:hover{opacity:.78}
.tbidbtn.solo{cursor:default}
.tbidbtn.solo .caret{display:none}
.tbidbtn:hover.solo{opacity:1}

/* Der Pfeil trug bisher nur die Drehung, aber keine Form — ein leeres
   <i> ohne Masse und damit unsichtbar. Dass hinter dem Namen ein Menue
   liegt, musste man raten. Gleiche Geometrie wie im Hauptmenue: zwei
   Raender, um 45 Grad gedreht. */
.tbidbtn .caret{width:6px;height:6px;flex:none;margin-left:4px;
  position:relative;top:-2px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);opacity:.7;
  transition:transform .25s var(--e),opacity .18s}
.tbidbtn:hover .caret{opacity:1}
.tbidbtn[aria-expanded="true"] .caret{transform:rotate(225deg);top:1px}

.tbcrest{display:flex;align-items:center;gap:9px;flex:none}
.tbcrest img{width:24px;height:24px;object-fit:contain;flex:none}
/* Trennstrich zwischen Spiel und Team: zwei Marken nebeneinander
   lesen sich sonst als eine. */
.tbsep{width:1px;height:16px;background:var(--line2);flex:none}
.tbid b{font:700 13px/1 'Chakra Petch',sans-serif;letter-spacing:.09em;text-transform:uppercase;
  color:var(--white);white-space:nowrap}
.tbid:hover b{color:var(--brand-l)}
.tbar.academy .tbid:hover b{color:var(--gold)}

/* Sprungziele duerfen nicht unter den beiden klebenden Leisten landen */
main section[id],main .edbar{scroll-margin-top:calc(var(--hdr) + var(--tbar) + 18px)}

/* Auf dem Telefon nahm die Teamkennung die halbe Leiste ein und liess
   den sieben Reitern 141px. Wappen und Name bleiben, der Name wird
   aber gekappt — so behaelt die Reiterleiste die Mehrheit der Breite,
   und man sieht trotzdem, auf wessen Seite man ist. */
@media (max-width:620px){
  .tbar.stuck .tbid{margin-right:14px}
  .tbcrest,.tbcrest img{width:20px;height:20px}
  .tbgame .gm,.tbgame .gm img{width:20px;height:20px}
  .tbid b{font-size:11.5px;letter-spacing:.06em;max-width:78px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tabs{gap:20px}
  /* Nur noch der Stift: die Beschriftung kostete 60px, die den
     Reitern fehlten. Die Funktion bleibt, das Wort geht. */
  .tbedit{margin-left:12px}
  .tbedit .btn{padding:0;width:32px;justify-content:center}
  .tbedit .btn span{display:none}
}

.split2{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--gap);align-items:start}
/* minmax(0,1fr) statt 1fr: Eine Spalte mit 1fr waechst mit ihrem
   breitesten Inhalt mit. Auf Deutsch schob ein langes Wort in der
   Kadertabelle Inhalt und Seitenleiste 20 px ueber den Bildschirmrand
   (Sprachtest 01.10.2026). Lange Woerter brechen in Tabellen um. */
@media (max-width:1000px){
  .split2{grid-template-columns:minmax(0,1fr)}
  .split2>*{min-width:0}
  .split2 .tbl th,.split2 .tbl td{overflow-wrap:anywhere}
}

.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{text-align:left;font:600 10.5px/1 'Chakra Petch',sans-serif;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);padding:0 14px 12px 0;border-bottom:1px solid var(--line)}
.tbl td{padding:14px 14px 14px 0;border-bottom:1px solid var(--line);color:var(--txt);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
/* Teams im Dashboard (Spacing Check 30.09.2026). Vorher brachen
   Teamname, Kaderzahl und Discord-Rollen in schmalen Spalten ueber
   bis zu sechs Zeilen um, und die erste Spalte klebte ohne Luft am
   Rand der Zeile. Jetzt: gleicher Innenabstand in jeder Zelle, auch
   aussen, damit die Hover-Flaeche den Text nicht beruehrt; Namen und
   Zahlen brechen nicht; die Rollen stehen als kleine Liste. Die Karte
   hat dafuer weniger Rand (12/14 px), der Text beginnt so weiterhin
   26 px innen wie in allen anderen Kaesten. */
.tvwrap{overflow-x:auto}
.tbl tbody tr{transition:background .2s}
.tbl tbody tr:hover{background:rgba(255,255,255,.03)}
.tbl .al{font:600 14px/1 'Chakra Petch',sans-serif;letter-spacing:.05em;text-transform:uppercase;color:var(--white)}
.tbl .sm{font-size:12.5px;color:var(--dim)}
.tbl .cc2{display:inline-block;font:600 10px/1 'Chakra Petch',sans-serif;letter-spacing:.12em;
  color:var(--dim);border:1px solid var(--line);padding:5px 7px}
.tbl .num{text-align:right;color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl .in{color:var(--live);font-weight:600}
.tbl .out{color:var(--red);font-weight:600}
.medal{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;flex:none;
  font:700 12px/1 'Chakra Petch',sans-serif;border:1px solid var(--line);color:var(--dim)}
.medal.g{background:var(--gold);color:#221A00;border-color:var(--gold)}
.medal.s{background:#C9CBD1;color:#15161A;border-color:#C9CBD1}
.medal.b{background:#A2724A;color:#1A0F06;border-color:#A2724A}

.side .box{border:1px solid var(--line);background:var(--s1);padding:22px var(--pad);margin-bottom:var(--gap)}
.side .box[hidden]{display:none}
.side h4{font:600 10.5px/1 'Chakra Petch',sans-serif;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);margin:0 0 14px}
.side .kv{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.side .kv:last-child{border-bottom:0}
.side .kv span{color:var(--dim)}
.side .kv b{color:var(--white);font-weight:600;text-align:right}
.side p{font-size:14px;color:var(--dim);margin:0;line-height:1.65}
.comp{display:flex;flex-direction:column;gap:10px}
.comp a{display:flex;justify-content:space-between;gap:12px;padding:11px 13px;border:1px solid var(--line);
  font-size:13.5px;color:var(--txt);transition:all .2s}
.comp a:hover{border-color:var(--line2);background:rgba(255,255,255,.03)}
.comp a span{color:var(--dim);font-size:12px}

/* Die FACEIT-Zeile: Division links, laufende Saison rechts. Als Link
   traegt sie den Markenakzent am linken Rand — das ist die einzige
   Stelle im Kasten, die nach draussen fuehrt, und darf das zeigen.
   Ohne hinterlegte Seite bleibt dieselbe Zeile, nur stumm. */
.comp .fc{display:flex;justify-content:space-between;gap:12px;padding:11px 13px;
  border:1px solid var(--line);font-size:13.5px;color:var(--txt);transition:all .2s;position:relative}
.comp .fc span{color:var(--dim);font-size:12px}
.comp a.fc::before{content:"";position:absolute;left:-1px;top:-1px;bottom:-1px;width:1px;background:var(--brand)}
.comp a.fc:hover{border-color:var(--line2);background:rgba(120,64,224,.08)}
.thead.academy~main .comp a.fc::before,.tbar.academy~main .comp a.fc::before{background:var(--gold)}


/* clickable team tile */
a.tile{cursor:pointer}


/* ── flags & socials ────────────────────────────────────────── */
.flag{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.flag img{width:22px;height:16px;object-fit:cover;border:1px solid var(--line2);flex:none;
  background:var(--s2)}
.flag span{font:600 10.5px/1 'Chakra Petch',sans-serif;letter-spacing:.12em;color:var(--dim)}

.socs{display:flex;gap:6px;flex-wrap:wrap}
.socs a{width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--line);
  color:var(--dim);transition:color .18s,border-color .18s,background .18s,transform .18s var(--e)}
.socs a:hover{color:var(--white);border-color:var(--line2);background:rgba(255,255,255,.05);transform:translateY(-2px)}
.socs a.x:hover{border-color:#fff}
.socs a.tw:hover{color:#A970FF;border-color:#A970FF;background:rgba(169,112,255,.12)}
.socs a.yt:hover{color:#FF4B4B;border-color:#FF4B4B;background:rgba(255,75,75,.12)}
.socs a.dc:hover{color:#5865F2;border-color:#5865F2;background:rgba(88,101,242,.14)}
.socs a.lp:hover{color:var(--brand-l);border-color:var(--brand-l);background:rgba(120,64,224,.12)}
.socs svg{width:15px;height:15px}
/* Instagram, TikTok, Battle.net (B2, 04.10.2026). Battle.net ist kein Link,
   sondern der BattleTag als Text mit Kopierknopf. */
.socs a.ig:hover{color:#E1306C;border-color:#E1306C;background:rgba(225,48,108,.12)}
.socs a.tt:hover{color:#25F4EE;border-color:#25F4EE;background:rgba(37,244,238,.1)}
.socs .bnkopie{height:30px;display:inline-flex;align-items:center;gap:7px;padding:0 9px;max-width:100%;
  border:1px solid var(--line);background:none;color:var(--dim);cursor:copy;font:600 11.5px/1 'Chakra Petch',sans-serif;
  letter-spacing:.04em;transition:color .18s,border-color .18s,background .18s}
.socs .bnkopie:hover,.socs .bnkopie:focus-visible{color:#148EFF;border-color:#148EFF;background:rgba(20,142,255,.1)}
.socs .bnkopie.ok{color:var(--white);border-color:var(--brand-l)}
.socs .bnkopie svg{flex:none}
.socs .bntag{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:none}

/* ═══════════════════════════════════════════════════════════════
   ADMIN
   ═══════════════════════════════════════════════════════════════ */
.adm{display:grid;grid-template-columns:210px minmax(0,1fr);gap:20px;align-items:start;margin-top:36px}
/* Telefon: Die Spalte waechst nicht mehr mit der breitesten Tabelle
   mit (minmax(0,1fr), Sprachtest 01.10.2026: bis zu 870 px zu breit,
   auf Deutsch noch mehr). Breite Tabellen und Raster scrollen in
   ihrer Karte seitlich, die Seite selbst bleibt so breit wie der
   Bildschirm. */
@media (max-width:900px){
  .adm{grid-template-columns:minmax(0,1fr)}
  .adm>*,.dcontent,.dcontent section{min-width:0}
  .dcontent .card,.dcontent .tvwrap,.dcontent .mtxwrap{overflow-x:auto;max-width:100%}
  .dcontent .tbl th,.dcontent .tbl td{white-space:nowrap}
}

.fbox{border:1px solid var(--line);background:var(--s1);padding:26px}
.fgrid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:700px){.fgrid2{grid-template-columns:1fr}}
.f{display:flex;flex-direction:column;gap:7px}
.f.wide{grid-column:1/-1}
.f label{font:600 10.5px/1 'Chakra Petch',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.f input,.f select,.f textarea{
  background:var(--black);border:1px solid var(--line);color:var(--txt);
  font:400 14.5px/1.5 Barlow,sans-serif;padding:12px 13px;min-height:46px;width:100%;
  transition:border-color .18s,background .18s}
.f textarea{min-height:104px;resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--brand)}
.f input::placeholder,.f textarea::placeholder{color:#5C5C68}
.f .hint{font-size:12px;color:var(--dim)}
.f .err{font-size:12px;color:var(--red);display:none}
.f.bad input,.f.bad select{border-color:var(--red)}
.f.bad .err{display:block}
.frow{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}

.pill{display:inline-flex;align-items:center;gap:7px;padding:5px 9px;border:1px solid var(--line);
  font:600 10px/1 'Chakra Petch',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.pill.ok{color:var(--live);border-color:rgba(56,163,165,.45);background:rgba(56,163,165,.1)}
.pill.warn{color:var(--gold);border-color:rgba(253,197,0,.4);background:rgba(253,197,0,.08)}

.ibtn{width:32px;height:32px;display:inline-grid;place-items:center;border:1px solid var(--line);
  color:var(--dim);transition:all .18s}
.ibtn:hover{color:var(--white);border-color:var(--line2);background:rgba(255,255,255,.05)}
.ibtn.del:hover{color:var(--red);border-color:rgba(255,75,92,.5);background:rgba(255,75,92,.1)}
.ibtn svg{width:15px;height:15px}

.empty{padding:40px 20px;text-align:center;color:var(--dim);font-size:14px;border:1px dashed var(--line);}
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);z-index:200;
  background:var(--brand);color:#fff;padding:14px 22px;font:600 13px/1 'Chakra Petch',sans-serif;
  letter-spacing:.08em;text-transform:uppercase;opacity:0;pointer-events:none;
  transition:opacity .3s var(--e),transform .3s var(--e)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.mono2{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;color:var(--brand-l)}

/* ═══════════════════════════════════════════════════════════════
   SIGNED-IN USER CHIP
   The ring carries the Discord role colour, so the site mirrors
   exactly what a member already sees on the server.
   ═══════════════════════════════════════════════════════════════ */
/* Der Knopf traegt das Menue nicht mehr — es liegt daneben. Der
   Bezugspunkt fuer die absolute Lage ist deshalb .userwrap. */
.userwrap{position:relative;display:inline-flex}
.user{display:flex;align-items:center;gap:11px;padding:6px 14px 6px 6px;
  border:1px solid var(--line);background:transparent;cursor:pointer;
  transition:border-color .2s,background .2s}
.user:hover{border-color:var(--line2);background:rgba(255,255,255,.04)}
.user .av2{width:34px;height:34px;flex:none;position:relative;display:grid;place-items:center;
  background:var(--s2);overflow:hidden;
  box-shadow:0 0 0 2px var(--black), 0 0 0 4px var(--rc, var(--brand))}
.user .av2 img{width:100%;height:100%;object-fit:cover}
.user .av2 .avph{width:70%;height:70%}

/* ── Silhouette statt Profilbild ────────────────────────────────
   Gezeichnet und nicht als Datei: So erbt sie die Farben der Seite
   und passt sich jedem Kasten an, in dem sie steht. */
.avph{display:block;fill:currentColor;color:#4A4A55}
.av2 .avph,.av3 .avph{color:#54545F}
.me .av .avph{width:64%;height:64%;margin:auto}
.user .who2{display:flex;flex-direction:column;gap:3px;align-items:flex-start;line-height:1}
.user .who2 b{font:700 13px/1 'Chakra Petch',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--white)}
.user .who2 > span:not(.tier){font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--rc, var(--brand-l))}
.user .car{width:6px;height:6px;border-right:1.5px solid var(--dim);border-bottom:1.5px solid var(--dim);
  transform:rotate(45deg) translateY(-2px);flex:none;transition:transform .22s var(--e)}
.user[aria-expanded="true"] .car{transform:rotate(225deg) translateY(0)}

/* ── Benutzermenue ──────────────────────────────────────────────
   Ruhig statt gegliedert: Die Gruppen trennt Abstand, nicht eine
   Linie quer durch. Vier Eintraege brauchen keine Kapitelueberschrift,
   und jede Linie mehr macht ein kleines Menue unruhiger, nicht
   klarer. Einzige Ausnahme ist der Strich ueber dem Abmelden - der
   soll bremsen. */
.umenu{position:absolute;top:calc(100% + 10px);right:0;min-width:262px;z-index:95;
  background:var(--s1);border:1px solid var(--line2);padding:6px;
  box-shadow:0 24px 54px -18px rgba(0,0,0,.92);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .2s var(--e),transform .24s var(--e),visibility .2s}
.user[aria-expanded="true"] + .umenu{opacity:1;visibility:visible;transform:none}

.umenu .hd{display:flex;flex-direction:column;align-items:flex-start;gap:7px;
  padding:14px 13px 16px}
.umenu .hd b{font:700 14.5px/1.2 'Chakra Petch',sans-serif;letter-spacing:.05em;
  text-transform:uppercase;color:var(--white);max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.umenu .hd small{font-size:12.5px;color:var(--dim);max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.umenu .hd .tier{margin-top:3px;max-width:100%}

.umenu .ug{display:block;padding:5px 0}
.umenu .ug + .ug{border-top:1px solid rgba(255,255,255,.055);margin-top:1px}

.umenu a,.umenu button{display:flex;width:100%;align-items:center;gap:13px;
  padding:10px 13px;text-align:left;font-size:14px;color:var(--txt);
  background:none;border:0;cursor:pointer;transition:background .16s,color .16s}
.umenu a:hover,.umenu button:hover{background:rgba(255,255,255,.05);color:var(--white)}
.umenu a:focus-visible,.umenu button:focus-visible{outline:2px solid var(--brand);
  outline-offset:-2px}

.umenu .umi{display:grid;place-items:center;width:19px;height:19px;flex:none;color:var(--dim);
  transition:color .16s}
.umenu .umi svg{width:19px;height:19px}

/* ── Eigene Teams im Menue ──────────────────────────────────────
   Wappen statt Symbol: Ein Team erkennt man am Wappen, und die
   Liste sieht damit aus wie die unter "Teams". */
.umenu .ugl{display:block;padding:8px 13px 6px;
  font:600 9px/1 'Chakra Petch',sans-serif;letter-spacing:.16em;
  text-transform:uppercase;color:#4A4A55}
/* Wappen gross (Alexander, 02.10.2026): 14 px waren nicht zu erkennen.
   Die Dateien sind 256 bis 1024 px gross, 30 px bleiben also scharf.
   Lange Namen brechen hoechstens einmal um, statt die Zeile auf vier
   Zeilen aufzublaehen; die Rolle bleibt rechts auf einer Zeile. */
.umenu:has(.umt){width:320px}
.umenu a:has(.umt){gap:12px;padding:8px 13px}
.umenu .umt{width:40px;height:40px;border:1px solid var(--line);background:var(--s2)}
.umenu .umt img{width:30px;height:30px;object-fit:contain}
/* Link "Scouting" unter einem eigenen Team (SC3, 03.10.2026): klein,
   eingerueckt unter den Teamnamen. */
.umenu a.umscout{padding:2px 13px 8px 65px;margin-top:-4px;font:600 10px/1.4 'Chakra Petch',sans-serif;
  letter-spacing:.14em;text-transform:uppercase;color:var(--brand-l)}
.umenu a.umscout:hover{color:var(--white)}
.umenu a:has(.umt) > span{flex:1;min-width:0;line-height:1.3;overflow:hidden;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow-wrap:anywhere}
.umenu a em{margin-left:auto;flex:none;font-style:normal;font-size:11.5px;
  color:#5C5C68;white-space:nowrap;max-width:45%;overflow:hidden;text-overflow:ellipsis}
.umenu a:hover em{color:var(--dim)}
.umenu a:hover .umi,.umenu button:hover .umi{color:var(--white)}

.umenu .out{color:var(--red)}
.umenu .out:hover{background:rgba(255,75,92,.09);color:var(--red)}
.umenu .out:hover .umi{color:var(--red)}

@media (max-width:620px){.user .who2{display:none}.user{padding:6px}}
/* Schmal haengt das Menue am rechten Rand der Leiste (Kante des
   Menueknopfs), nicht am Profilbild: Von dort aus nach links ist
   genug Platz, die volle Breite laeuft nicht aus dem Bild. */
@media (max-width:620px){
  .acts{position:relative}
  .userwrap{position:static}
  .umenu{max-width:calc(100vw - 2 * var(--gut))}
}

/* role swatch list used on the profile page */

/* role switcher, grouped by scope */
.rgroup{margin-bottom:16px}
.rglabel{font:600 10px/1 'Chakra Petch',sans-serif;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);margin-bottom:9px;display:flex;align-items:center;gap:10px}
.rglabel::after{content:"";flex:1;height:1px;background:var(--line)}

/* ── dashboard: a field the role is not allowed to change ────── */
.f input.locked{background:rgba(255,255,255,.03);color:var(--dim);cursor:not-allowed;
  border-style:dashed}
.f input.locked:focus{border-color:var(--line2);background:rgba(255,255,255,.03)}

/* ── dashboard: "view as" chips carry a secondary label ──────── */

/* ── dashboard: neutral pill for a team name ─────────────────── */
.tbl .pill{margin:2px 4px 2px 0}

/* a jump to a section must not park the heading under the sticky header */
.adm section{scroll-margin-top:124px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* ── Abschnitts-Ueberschrift, die einen Filter traegt ─────────────
   Der Filter steuert den ganzen Block, also gehoert er nach oben und
   nicht in die Kopfzeile einer einzelnen Spalte. */
.sh.sh-f{flex-wrap:wrap;align-items:center}
.sh.sh-f .chips{margin-right:auto}
@media (max-width:760px){
  .sh.sh-f .chips{order:3;width:100%;margin:4px 0 0}
}


/* ═══════════════════════════════════════════════════════════════
   NEXT UP + ERGEBNISSE — Aufbau nach Referenz, Formensprache eckig
   ═══════════════════════════════════════════════════════════════ */

/* ── Wappen ─────────────────────────────────────────────────────
   Eine Groesse pro Einsatzort. Eigene Teams tragen ihr Logo, Gegner
   ihr Kuerzel, bis echte Logos vorliegen. */
.cx{display:grid;place-items:center;flex:none;border:1px solid var(--line);
  background:var(--s2);overflow:hidden}
.cx img{object-fit:contain}
/* Ganzzahlig statt prozentual: gerade Differenz Kasten minus Bild,
   damit links und rechts exakt gleich viel bleibt. */
.cx.big img{width:62px;height:62px}   /* 88 - 62 = 26 -> 13 je Seite */
.cx.sm  img{width:22px;height:22px}   /* 30 - 22 =  8 ->  4 je Seite */
.cx.xs  img{width:18px;height:18px}   /* 26 - 18 =  8 ->  4 je Seite */
.cx.o{font-family:'Chakra Petch',sans-serif;font-weight:700;letter-spacing:.04em;color:var(--dim)}
.cx.big{width:88px;height:88px}      .cx.big.o{font-size:24px}
.cx.sm{width:30px;height:30px}       .cx.sm.o{font-size:10px}
.cx.xs{width:26px;height:26px}       .cx.xs.o{font-size:9.5px}

/* ── Spielemarke ───────────────────────────────────────────────── */
.gm{display:grid;place-items:center;flex:none;width:40px;height:40px;
  border:1px solid var(--line2);background:var(--s2);
  font:700 12px/1 'Chakra Petch',sans-serif;letter-spacing:.08em;color:var(--txt)}
.gm img{width:30px;height:30px;object-fit:contain}   /* 40 - 30 = 10 -> 5 je Seite */
.gm.sm img{width:20px;height:20px}                    /* 28 - 20 =  8 -> 4 je Seite */
.gm.xs img{width:16px;height:16px}                    /* 22 - 16 =  6 -> 3 je Seite */
.gm.sm{width:28px;height:28px;font-size:9.5px;letter-spacing:.06em;color:var(--dim)}
.gm.xs{width:22px;height:22px;font-size:8.5px;letter-spacing:.04em;color:var(--dim)}

/* ── Der hervorgehobene Kasten ─────────────────────────────────── */
/* Kein align-self:start. Der Kasten .fx traegt als Hintergrund die
   Trennlinienfarbe — die 1px-Fuge zwischen den beiden Spalten ist
   nichts anderes als dieser Hintergrund, der durchscheint. Blieb die
   linke Spalte bei ihrer Inhaltshoehe stehen, lag unter ihr derselbe
   helle Ton als grauer Block: sichtbar, sobald weniger Ansetzungen als
   Ergebnisse anstehen — beim Filter auf Telacy (zwei Termine, fuenf
   Ergebnisse) also immer. Die Spalte fuellt die Zeile jetzt aus; der
   Inhalt steht ohnehin oben, weil die Spalte nichts streckt. */
.fxcol{display:flex;flex-direction:column;min-width:0}
/* Ergebnisspalte neben den Ansetzungen: gleich lang wie die linke
   Spalte (Alexander, 30.09.2026). Wie viele Zeilen hineinpassen,
   rechnet ergebnisseAngleichen() in site.js; die Seitenknoepfe
   sitzen unten und stehen damit auf einer Linie mit denen links. */
.fx .rcol{display:flex;flex-direction:column;min-width:0}
.fx .rcol .rl{flex:1 1 auto}
.fx .rcol .rpage{margin-top:auto}
.fx.messen .rcol .rl{flex:none}
.fx.messen .rcol .rpage{margin-top:4px}
.fxtop{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding-bottom:24px;border-bottom:1px solid var(--line)}
.fxtop .when{text-align:right;display:flex;flex-direction:column;gap:4px}
.fxtop .when b{font:600 13px/1 'Chakra Petch',sans-serif;letter-spacing:.05em;
  text-transform:uppercase;color:var(--white);font-variant-numeric:tabular-nums}
.fxtop .when small{font-size:11.5px;color:var(--dim)}

.fxbody{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;
  gap:20px;padding:34px 0 8px}
.fxbody .side{display:flex;flex-direction:column;align-items:center;gap:14px;min-width:0}
.fxbody .side b{font:600 13px/1.3 'Chakra Petch',sans-serif;letter-spacing:.06em;
  text-transform:uppercase;color:var(--white);text-align:center;
  overflow-wrap:anywhere;max-width:15ch}
.fxbody .mid{display:flex;flex-direction:column;align-items:center;gap:10px;
  padding-top:22px;max-width:230px}
.fxbody .vsx{font:700 24px/1 'Chakra Petch',sans-serif;letter-spacing:.06em;color:var(--brand-l)}
.fxbody .vsx.academy{color:var(--gold)}
.fxbody .mid small{font-size:11.5px;color:var(--dim);text-align:center;line-height:1.5}
.watch{display:inline-flex;align-items:center;gap:8px;margin-top:2px;padding:8px 14px;
  border:1px solid var(--line2);font:700 9.5px/1 'Chakra Petch',sans-serif;
  letter-spacing:.14em;text-transform:uppercase;color:var(--txt);
  transition:color .2s,border-color .2s,background .2s}
.watch svg{width:13px;height:13px}
.watch:hover{color:var(--white);border-color:var(--white);background:rgba(255,255,255,.06)}

.fxempty{padding:56px 20px;text-align:center;border:1px dashed var(--line)}
.fxempty b{display:block;font:600 14px/1 'Chakra Petch',sans-serif;letter-spacing:.06em;
  text-transform:uppercase;color:var(--white);margin-bottom:8px}
.fxempty span{font-size:13px;color:var(--dim)}

/* ── Liste der kommenden Begegnungen ────────────────────────────
   Kleine Wappen, beide Namen, Game und Uhrzeit. Anklickbar: die Zeile
   wandert nach oben in den grossen Kasten. */
.fxlist{display:flex;flex-direction:column;margin-top:26px;padding-top:4px;
  border-top:1px solid var(--line)}
.fxlist[hidden]{display:none}
.fxlist .rglabel{margin:16px 0 2px}
/* Ueber "Upcoming" liegt schon die Linie der Liste; die Haarlinie
   des Labels daneben ergab eine zweite knapp darunter. Nur eine. */
.fxlist>.rglabel:first-child::after{display:none}

.fxrow{display:grid;
  grid-template-columns:30px minmax(0,1fr) auto minmax(0,1fr) 30px;
  grid-template-areas:"c1 n1 vs n2 c2" "mt mt mt mt mt";
  align-items:center;gap:8px 12px;padding:13px 12px;width:100%;
  border:0;border-bottom:1px solid var(--line);border-left:2px solid transparent;
  background:none;text-align:left;cursor:pointer;
  transition:background .2s,border-left-color .25s var(--e)}
.fxrow:last-child{border-bottom:0}
.fxrow:hover{background:rgba(255,255,255,.035)}
.fxrow.on{background:var(--s2);border-left-color:var(--brand)}
.fxrow.on.academy{border-left-color:var(--gold)}
.fxrow:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}

.fxrow .cx:first-of-type{grid-area:c1}
.fxrow .cx.o{grid-area:c2}
.fxrow .nm{font:600 12.5px/1.2 'Chakra Petch',sans-serif;letter-spacing:.05em;
  text-transform:uppercase;color:var(--white);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fxrow .nm:not(.r){grid-area:n1}
.fxrow .nm.r{grid-area:n2;text-align:right;color:var(--txt)}
.fxrow .v{grid-area:vs;font:700 10px/1 'Chakra Petch',sans-serif;
  letter-spacing:.12em;color:var(--brand-l)}
.fxrow.academy .v{color:var(--gold)}
/* Community-Teams in Weiss (Alexander, 01.10.2026): VS und die Leiste
   der gewaehlten Zeile. Lila bleibt Telacy, Gold die Academy. Gilt
   auch mit eigener Teamfarbe, deshalb ueber die Klasse, nicht die
   Variable. */
.fxrow.community .v:not(.sc2){color:var(--white)}
.fxrow.on.community{border-left-color:var(--white)}
.fxrow.community:focus-visible{outline-color:var(--white)}
.fxbody .vsx.community{color:var(--white)}

.fxrow .mt{grid-area:mt;display:flex;align-items:center;gap:9px;
  font-size:11.5px;color:var(--dim);min-width:0}
.fxrow .mt .ev{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fxrow .mt .tm{margin-left:auto;flex:none;font-variant-numeric:tabular-nums;color:var(--txt)}

/* ── Ergebniszeile ─────────────────────────────────────────────── */
.rr{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
  gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.rr:last-child{border-bottom:0}
/* Neben den Ansetzungen: jede Zeile so hoch wie eine Zeile links
   (gesetzt von ergebnisseAngleichen), Inhalt mittig. */
.rl.gleich > .rr:not(.rempty){height:var(--zeile);padding-top:0;padding-bottom:0;box-sizing:border-box}
.fxcol .fxbody{margin-top:calc(var(--fxluft, 0px) / 2);margin-bottom:calc(var(--fxluft, 0px) / 2)}
.fxlist.gleich > .fxrow{height:var(--zeile);padding-top:0;padding-bottom:0;box-sizing:border-box;align-content:center}
.rr .w b{display:block;font:600 13px/1.3 'Chakra Petch',sans-serif;letter-spacing:.05em;
  text-transform:uppercase;color:var(--white)}
.rr .w small{display:block;margin-top:4px;font-size:12px;color:var(--dim)}
.rr .w em{display:block;margin-top:3px;font-style:normal;font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;color:#6E6E7A;
  font-variant-numeric:tabular-nums}
.rr .sc{display:flex;align-items:center;gap:7px;flex:none}
.rr .sc i{width:26px;height:26px;display:grid;place-items:center;font-style:normal;
  font:700 13px/1 'Chakra Petch',sans-serif;font-variant-numeric:tabular-nums}
.rr .sc i.win{color:var(--win)}
.rr .sc i.lose{color:var(--red)}

/* Unser Team steht als Team-Tag in seiner Farbe vor "vs" (01.10.2026),
   bei allen Teams. Der farbige Punkt fuer Telacy und Academy ist
   entfallen. Beim Darueberfahren hellt der Tag auf, statt unter-
   strichen zu werden. */
.rr .w .rtag{vertical-align:middle;margin:-3px 2px 0 0;transition:filter .18s,box-shadow .18s}
.rr .w a.tlink:hover .rtag, .rr .w a.tlink.hv .rtag{filter:brightness(1.3);
  box-shadow:0 0 12px rgba(255,255,255,.12)}
/* Auch der Tag wird unterstrichen (01.10.2026). Die Unterstreichung des
   Links erreicht den Tag nicht (eigener Kasten), deshalb direkt am
   Tag; bei einem Verlauf an der Schrift darin, in Weiss, weil die
   Schrift selbst durchsichtig ist. */
.rr .w a.tlink:hover .rtag:not(:has(.tgrad)), .rr .w a.tlink.hv .rtag:not(:has(.tgrad)),
.rr .w a.tlink:hover .rtag .tgrad, .rr .w a.tlink.hv .rtag .tgrad{
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.rr .w .rtag .tgrad{text-decoration-color:rgba(255,255,255,.85)}

.rr.rempty{display:block;padding:34px 0;text-align:center}
.rr.rempty b{font:600 13px/1 'Chakra Petch',sans-serif;letter-spacing:.06em;
  text-transform:uppercase;color:var(--white)}
.rr.rempty small{display:block;margin-top:7px;font-size:12px;color:var(--dim)}
/* Leerzustand in Ansetzungs- und Ergebnislisten der Teamseiten. Ohne
   diese Regel erbte er das Raster von .fxrow, und Titel und Text lagen
   uebereinander (25.09.2026). Gleiche Form wie .rr.rempty. */
.fxrow.empty2{display:block;padding:34px 0;text-align:center;border-left-color:transparent;cursor:default}
.fxrow.empty2:hover{background:none}
.fxrow.empty2 b{font:600 13px/1 'Chakra Petch',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--white)}
.fxrow.empty2 small{display:block;margin-top:7px;font-size:12px;color:var(--dim)}

/* ── Blaettern ─────────────────────────────────────────────────── */
.rpage{display:flex;align-items:center;justify-content:center;gap:16px;
  padding:16px 0 4px;margin-top:4px;
  font-size:11.5px;color:var(--dim);font-variant-numeric:tabular-nums}
/* Keine Linie unter der letzten Zeile und keine ueber der Blaetter-
   leiste (Alexander, 01.10.2026): Die Liste endet offen, die Linien
   stehen nur zwischen den Zeilen. */
.fxrow:has(+ .rpage), .rr:has(+ .rpage){border-bottom:0}
.pg{width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--line2);
  background:none;color:var(--txt);font-size:15px;cursor:pointer;
  transition:color .2s,border-color .2s,background .2s}
.pg:hover:not([disabled]){color:var(--white);border-color:var(--white);background:rgba(255,255,255,.06)}
.pg[disabled]{opacity:.3;cursor:not-allowed}
.pg:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* ── Matches: Next up ueber die volle Breite ───────────────────── */
.fx.one{grid-template-columns:1fr}

@media (max-width:860px){
  .fxbody{grid-template-columns:1fr auto 1fr;gap:12px}
  .cx.big{width:64px;height:64px}
  .cx.big img{width:46px;height:46px}   /* 64 - 46 = 18 -> 9 je Seite */
  .cx.big.o{font-size:18px}
  .fxbody .vsx{font-size:19px}
  .fxbody .mid{padding-top:12px}
}
@media (max-width:520px){
  .fxtop{flex-direction:column;gap:12px}
  .fxtop .when{text-align:left}
  .rr{grid-template-columns:auto minmax(0,1fr);gap:10px}
  .rr .scw{grid-column:1/-1;align-items:flex-end}
  /* gestapelt, VS als Trenner statt abgesetzt am Rand */
  .fxrow{grid-template-columns:30px minmax(0,1fr);
         grid-template-areas:"c1 n1" "vs vs" "c2 n2" "mt mt";gap:7px 11px;padding:13px 8px}
  .fxrow .nm.r{text-align:left}
  .fxrow .v{justify-self:start;padding-left:41px;opacity:.75}
}

/* ── Spoilerschutz ──────────────────────────────────────────────
   Die Punktzahl wird ersetzt, nicht verwischt: Gruen und Rot wuerden
   den Ausgang sonst schon durch die Faerbung verraten. Der Knopf ist
   so breit wie die beiden Zahlen, damit die Zeile nicht springt. */
.spbar{display:flex;align-items:center;gap:12px;padding:12px 0;
  border-bottom:1px solid var(--line);font-size:12px;color:var(--dim)}
.spbar button{margin-left:auto;font:700 10px/1 'Chakra Petch',sans-serif;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brand-l);background:none;border:0;cursor:pointer;
  padding:6px 0;transition:color .2s}
.spbar button:hover{color:var(--white)}
.spbar button:focus-visible{outline:2px solid var(--brand);outline-offset:3px}

.rr .sc .rev{width:59px;height:26px;display:grid;place-items:center;
  font:700 9px/1 'Chakra Petch',sans-serif;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim);background:none;border:1px dashed var(--line2);cursor:pointer;
  transition:color .2s,border-color .2s,background .2s}
.rr .sc .rev:hover{color:var(--white);border-color:var(--white);background:rgba(255,255,255,.06)}
.rr .sc .rev:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
/* Aufgedeckter Stand ist selbst der Knopf zum Zudecken (01.10.2026).
   Gleiche Breite wie "Show", damit die Zeile nicht springt; der Rahmen
   erscheint erst beim Darueberfahren, als Umriss ohne eigene Breite. */
.rr .sc .unrev{display:flex;align-items:center;gap:7px;padding:0;margin:0;
  background:none;border:0;cursor:pointer;outline:1px dashed transparent;outline-offset:2px;
  transition:outline-color .2s,background .2s}
.rr .sc .unrev:hover{outline-color:var(--line2);background:rgba(255,255,255,.04)}
.rr .sc .unrev:focus-visible{outline:2px solid var(--brand)}

/* ── Lupe in Markenfarbe, passend zum Anmeldeknopf ─────────────── */
.ico.p{background:var(--brand);border-color:var(--brand);color:#fff}
.ico.p:hover{background:var(--brand-d);border-color:var(--brand-d);color:#fff}
.ico.p:focus-visible{outline:2px solid var(--brand-l);outline-offset:2px}

/* ── Top Bar ─────────────────────────────────────────────────────
   Eine Reihe ohne Trennung, in der Reihenfolge der Startseite. "Home"
   ist entfallen — das Logo fuehrt dorthin. Das Dashboard steht gar
   nicht in der Navigation, es gehoert zum Konto. */

@media (max-width:900px){
}
/* ── Partnerseite: Zickzack ──────────────────────────────────────
   Bild und Text tauschen je Zeile die Seite. Umgesetzt ueber die
   Spaltenzuweisung, nicht ueber row-reverse — so bleibt die Lesefolge
   im Quelltext gleich, und auf schmalen Schirmen steht ueberall das
   Bild oben. */
.prows{display:flex;flex-direction:column;gap:0}
/* Ohne Partner steht nur der Leerhinweis da. Er klebte ohne Abstand
   an der Unterkante des Seitenkopfs. */
.prows>.empty{margin-top:var(--sec)}
.prow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,4vw,64px);align-items:center;
  padding:clamp(34px,5vw,64px) 0;border-bottom:1px solid var(--line)}
.prow:last-child{border-bottom:0;padding-bottom:0}
/* Erste Zeile mit dem Abschnittsabstand unter dem Seitenkopf: Die clamp-
   Untergrenze gab auf dem Telefon nur 34 px statt 64. */
.prow:first-child{padding-top:var(--sec)}
/* Beide ausdruecklich in Zeile 1. Ohne das landet in der gespiegelten
   Variante der Text eine Zeile tiefer: Die automatische Platzierung
   laeuft nur vorwaerts und springt nie in eine fruehere Spalte zurueck. */
.prow .pimg,.prow .pbody{grid-row:1}
.prow .pimg{grid-column:1}
.prow .pbody{grid-column:2}
.prow.flip .pimg{grid-column:2}
.prow.flip .pbody{grid-column:1}

.prow .pimg{position:relative;aspect-ratio:4/3;overflow:hidden;
  border:1px solid var(--line);background:var(--s1)}
.prow .pimg img{width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--e)}
.prow:hover .pimg img{transform:scale(1.04)}
/* Ohne Foto tritt das Logo an seine Stelle, statt einen leeren Kasten zu zeigen */
.prow .pimg .noimg{position:absolute;inset:0;display:grid;place-items:center;background:var(--s2)}
.prow .pimg .noimg img{width:42%;height:42%;object-fit:contain;transform:none}
/* Partner ohne Logo: Anfangsbuchstaben statt eines fremden Zeichens. */
.prow .pimg .noimg.nolog{font:700 clamp(2rem,6vw,3.4rem)/1 'Chakra Petch',sans-serif;
  letter-spacing:.1em;color:var(--line2)}

.prow .pbody{display:flex;flex-direction:column;align-items:flex-start;gap:0}
.prow .plogo{width:56px;height:56px;display:grid;place-items:center;margin-bottom:18px;
  border:1px solid var(--line);background:var(--s2)}
.prow .plogo img{width:36px;height:36px;object-fit:contain}  /* 56 - 36 = 20 -> 10 je Seite */
.prow .prole{font:600 10.5px/1 'Chakra Petch',sans-serif;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brand-l)}
.prow h3{margin:10px 0 0;font:700 clamp(1.4rem,2.6vw,2rem)/1.05 'Chakra Petch',sans-serif;
  letter-spacing:.02em;text-transform:uppercase;color:var(--white)}
.prow p{margin:14px 0 0;font-size:14.5px;line-height:1.75;color:var(--txt);max-width:54ch}
.prow .pacts{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:26px}

/* ── Freie Plaetze, einmal gesammelt ─────────────────────────────
   Vier leere Zickzack-Zeilen sehen nach Leerstand aus. Ein Block am
   Ende liest sich als Einladung. */
.openbox{display:flex;align-items:center;gap:clamp(20px,3vw,40px);flex-wrap:wrap;
  padding:clamp(26px,4vw,40px);border:1px dashed var(--line2)}
.openbox[hidden]{display:none}
/* Ohne freie Plaetze blendet site.js den Kasten aus; die Ueberschrift
   "Open slots" stand dann allein vor dem Footer. */
.wrap:has(> .openbox[hidden]){display:none}
.oslots{display:flex;gap:10px;flex:none}
.oslot{width:54px;height:54px;display:grid;place-items:center;
  border:1px dashed var(--line2);color:var(--dim);
  font:300 24px/1 'Chakra Petch',sans-serif;transition:all .25s var(--e)}
.openbox:hover .oslot{border-color:var(--brand);color:var(--brand-l)}
.otext{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}
.otext b{font:700 14px/1.2 'Chakra Petch',sans-serif;letter-spacing:.06em;
  text-transform:uppercase;color:var(--white)}
.otext span{font-size:13.5px;color:var(--dim);line-height:1.6}
.openbox .btn{flex:none}

.bignum{font:700 2.1rem/1 'Chakra Petch',sans-serif;color:var(--white);
  font-variant-numeric:tabular-nums}

@media (max-width:800px){
  .prow{grid-template-columns:1fr;gap:22px}
  .prow .pimg,.prow .pbody,.prow.flip .pimg,.prow.flip .pbody{grid-column:1;grid-row:auto}
  .prow .pimg{aspect-ratio:16/9}
  .oslots{order:2}
  .otext{flex:1 1 100%;order:1}
}

/* ── Divisionskarte ──────────────────────────────────────────────
   Eine Karte je Division. Oben die Spielemarke, unten Name, Status
   und die Kader, die darin spielen. Baut auf .tile auf, damit Bild,
   Verlauf und Hover gleich bleiben. */
.dcard{position:relative;aspect-ratio:3/4;overflow:hidden;
  border:1px solid var(--line);background:var(--s1);
  /* Seit die obere Zeile entfallen ist, gibt es nur noch ein Kind —
     space-between haette es an den Kopf gesetzt. */
  display:flex;flex-direction:column;justify-content:flex-end;padding:16px;
  transition:border-color .3s,transform .4s var(--e)}
.dcard:hover{border-color:var(--line2);transform:translateY(-6px)}
.dcard .art{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:.42;filter:grayscale(.35);transition:transform .7s var(--e),opacity .4s,filter .5s}
.dcard:hover .art{transform:scale(1.08);opacity:.62;filter:grayscale(0)}
.dcard .fade{position:absolute;inset:0;
  background:linear-gradient(to top,var(--black) 8%,color-mix(in srgb,var(--black) 40%,transparent) 52%,transparent)}

/* Unten links der Name mit den Kadern, unten rechts die Spielemarke.
   Das Statuswort ist entfallen — es stehen ohnehin nur laufende
   Divisionen auf der Seite, "Live" an jeder Karte trug keine
   Information. */
.dcard .dbot{position:relative;z-index:2;display:flex;align-items:flex-end;
  justify-content:space-between;gap:12px}
.dcard .dinfo{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.dcard .dmark{flex:none}
.dcard .dbot b{font:700 15px/1.2 'Chakra Petch',sans-serif;letter-spacing:.06em;
  text-transform:uppercase;color:var(--white)}
.dcard .dinfo .tier{margin-bottom:9px}
.dcard.soon{opacity:.5}.dcard.soon:hover{opacity:.85}

/* ── Karte mit Teamlogo statt Bannerbild ──────────────────────────
   Die Karte behaelt Groesse und Seitenverhaeltnis; nur ihr Inhalt
   wechselt. Ein Logo wird eingepasst, nicht beschnitten — sonst
   schneidet die Karte genau das weg, was das Team ausmacht. Es faellt
   dadurch kleiner aus als ein formatfuellendes Foto, und genau das ist
   richtig: Ein Logo mit Rand ist eine Bildmarke, ein Logo bis an den
   Rand ist ein Fehler.

   Die Klasse heisst logocard und nicht crest — .crest ist im
   Ergebnisbereich fuer die kleinen Wappen vergeben. Ein zweites Mal
   vergeben liess die Karte auf 64px zusammenfallen. */
.dcard.logocard .art{background-size:contain;background-repeat:no-repeat;
  background-position:center center;
  /* Etwas mehr Flaeche als zuvor: Ein Logo wirkt scharf, wenn es gross
     genug ist, um seine Kanten zu zeigen. Zu viel Rand laesst es
     billig aussehen, egal wie hoch aufgeloest die Datei ist. */
  inset:11% 13% 26%;
  /* Volle Deckkraft. Die 0.92 stammten vom Bannerbild, das gedaempft
     hinter dem Text lag — ein Logo IST der Inhalt und wird nicht
     abgeblendet. */
  opacity:1;filter:none}
.dcard.logocard:hover .art{transform:scale(1.05);opacity:1;filter:none}
/* Der Verlauf war fuer ein Foto gedacht. Ueber einem freigestellten
   Logo braucht er nur noch den Fuss abzudunkeln, damit der Name
   lesbar bleibt. */
.dcard.logocard .fade{background:linear-gradient(to top,var(--black) 4%,transparent 34%)}

/* Countdown sitzt rechtsbündig unter dem Datum */
.fxtop .when .cd{justify-content:flex-end;margin-top:2px}
@media (max-width:520px){ .fxtop .when .cd{justify-content:flex-start} }

/* ── Spielemarke mit mitgeliefertem Rahmen ───────────────────────
   Die Dateien aus "08 Game Logos" enthalten Rahmen und Hintergrund
   bereits und setzen das Logo selbst mittig. Die Website darf dann
   keinen zweiten Kasten darum zeichnen — sonst stehen zwei Rahmen
   ineinander und die Ränder verdoppeln sich. */
.gm.framed{border:0;background:none;padding:0}
.gm.framed img{width:100%;height:100%;object-fit:contain}

/* Spielemarke im Aufklappmenue: der Kasten bringt seinen Rahmen mit,
   die Zeile braucht deshalb keinen eigenen Abstand mehr. */
.sub a .s{gap:0}
.sub a .s .gm{flex:none}

/* Noch nicht gesetzte Angabe: sichtbar als Platzhalter, nicht als Inhalt */
.dcard .dbot b.tbd{color:var(--dim);font-weight:500;letter-spacing:.1em}

/* Punktstand an der Stelle, an der bei Terminen das VS steht */
.fxrow .v.sc2{display:inline-flex;align-items:center;gap:6px;letter-spacing:0}
.fxrow .v.sc2 i{font-style:normal;font:700 13px/1 'Chakra Petch',sans-serif;
  font-variant-numeric:tabular-nums;color:var(--txt)}
.fxrow .v.sc2 i.win{color:var(--win)}
.fxrow .v.sc2 i.lose{color:var(--red)}
.fxrow .v.sc2 em{font-style:normal;color:var(--dim);font-size:11px}

/* ── Person: Flagge vor dem Namen ────────────────────────────────
   Die Herkunft gehoert zum Namen, nicht in eine eigene Spalte. Die
   Flagge sitzt auf der Mittelhoehe zwischen Alias und Handle, damit
   beides an ihr ausgerichtet wirkt. */
.who{display:flex;align-items:center;gap:11px;min-width:0}
.who .flag{flex:none}
.who .flag img{display:block;border:1px solid var(--line);width:22px;height:16px;object-fit:cover}
.who .txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.who .txt .sm{font-size:12.5px;color:var(--dim)}
/* Unbekannte Herkunft: Platz bleibt, damit die Spalte bündig bleibt */
.who .flag.none{width:22px;height:16px;border:1px dashed var(--line);display:block}
/* Krone der Team Leader hinter dem Namen (01.10.2026). Mit gap von
   .who etwas Abstand zurueckgenommen, damit sie am Namen steht. */
.who .leadmark{flex:none;display:block;width:15px;height:11px;margin-left:-5px}

/* ── Teamseite bearbeiten ────────────────────────────────────────
   Die Leiste sitzt ueber dem Inhalt, damit man beim Bearbeiten sieht,
   was sich aendert. */
.edbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:34px;
  padding:16px 20px;border:1px solid var(--line);background:var(--s1)}
.edbar[hidden]{display:none}
.edbar .edwho{font-size:12.5px;color:var(--dim)}
.edbar .edwho b{color:var(--white)}
.edbar > .btn{margin-left:auto}
.edgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.edgrid .f.wide{grid-column:1/-1}
@media (max-width:900px){ .edgrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:600px){ .edgrid{grid-template-columns:1fr} }

/* Noch nicht gesetzte Angabe im Kopf der Teamseite */
.thead .meta b.tbd{color:var(--dim);font-weight:500}

/* ── Teams eines Spiels, gruppiert nach FACEIT-Division ───────────
   Die Gruppenueberschrift nutzt .rglabel — denselben Stil wie die
   Fixture-Liste und das Dashboard: gesperrte Versalien, Haarlinie
   nach rechts. Kein neues Formvokabular fuer denselben Job.
   Jede Gruppe bringt ihr eigenes .tiles-Raster mit, der aeussere
   Container ist deshalb ein schlichter Block. */
.lgroup + .lgroup{margin-top:48px}
.lgroup .rglabel{margin-bottom:var(--gap)}
/* Die Division als Ueberschrift der Gruppe steht kraeftig (Alexander,
   30.09.2026): groesser, fett, weiss. Die Haarlinie bleibt. */
.lgroup > .rglabel{font:700 15px/1.2 'Chakra Petch',sans-serif;letter-spacing:.12em;color:var(--white);gap:16px}
.lgroup .rglabel.tbd{color:rgba(139,139,150,.55)}
.dcard .dinfo .tier.tbd{opacity:.6}
/* Teamkarte: oben klein die Division (neutral grau), darunter der
   Teamname als grosser Tag in der Farbe des Teams. */
.dcard .dinfo .tier.ddiv{padding:4px 8px;font-size:9.5px;margin-bottom:8px;white-space:nowrap}
.dcard .dinfo .tier.tname{margin-bottom:0;padding:8px 13px;font-size:14px;letter-spacing:.1em;max-width:100%}
@media (max-width:560px){
  .dcard .dinfo .tier.ddiv{font-size:8.5px;padding:3px 6px;letter-spacing:.12em}
  .dcard .dinfo .tier.tname{font-size:11px;padding:6px 8px;letter-spacing:.07em;line-height:1.25}
}
/* Die Spielmarke steht mit Ober- und Unterkante genau auf Hoehe des
   Namens-Tags (Alexander, 30.09.2026). Vorher war sie 40 px hoch und
   ragte ueber den 32 px hohen Tag hinaus. Beide lesen ihre Hoehe aus
   --tagh, auf dem Telefon wird sie kleiner. Die Overwatch-Marke bringt
   ihren Rahmen im SVG selbst mit (.gm.framed), das Bild fuellt deshalb
   den ganzen Kasten. Bricht ein langer Name auf dem Telefon zweizeilig
   um, steht die Marke buendig mit der Unterkante des Tags. */
.dcard.logocard{--tagh:32px}
.dcard.logocard .dinfo .tier.tname{min-height:var(--tagh)}
.dcard.logocard .dmark .gm{width:var(--tagh);height:var(--tagh)}
.dcard.logocard .dmark .gm:not(.framed) img{width:calc(var(--tagh) - 10px);height:calc(var(--tagh) - 10px)}
@media (max-width:560px){ .dcard.logocard{--tagh:28px} }

/* Liquipedia sitzt direkt hinter dem Alias, nicht in der Symbolreihe:
   es ist ein Nachweis ueber die Person, kein Kanal zum Folgen. Kein
   Rahmen, kein Kasten — die Marke haengt am Namen wie eine Fussnote
   und traegt den Markenakzent, damit sie auffaellt, ohne zu schreien. */
/* Liquipedia in Markenlila, wie auf den Kaderlisten der Teamseiten;
   nur die Academy faerbt sie Gold. (Am 25.09.2026 kurz ueberall Gold
   probiert und wieder zurueck — Entscheidung Alexander.) */
.lpmark{display:inline-grid;place-items:center;width:18px;height:18px;flex:none;
  color:var(--brand-l);transition:color .18s,transform .2s var(--e)}
.lpmark svg{width:14px;height:14px}
.lpmark:hover{color:var(--white);transform:translateY(-1px)}
.thead.academy~main .who .lpmark,.tbar.academy~main .who .lpmark{color:var(--gold)}
/* Neben dem Alias auf der Ausweiskarte: groesser, weil die Ueberschrift
   groesser ist, und in der Zeile ausgerichtet. */
.me h3{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.me h3 .lpmark{width:26px;height:26px;border:1px solid rgba(120,64,224,.5);background:rgba(120,64,224,.12)}
.me h3 .lpmark svg{width:16px;height:16px}
.me h3 .lpmark:hover{color:var(--brand-l);border-color:var(--brand-l);background:rgba(120,64,224,.2)}

/* Team-News stehen in der schmaleren Hauptspalte der Teamseite.
   Das Raster bleibt dreispaltig wie ueberall sonst: bei drei
   Meldungen geht die Reihe damit auf, statt eine Karte allein in
   einer zweiten Zeile stehen zu lassen. Unter 900px bricht die
   Seite ohnehin einspaltig um. */
.split2 .news{gap:var(--gap)}


/* ── Teamseite bearbeiten: Abschnitte im Formular ─────────────────
   Stammdaten, Kanaele und Erfolge sind drei verschiedene Dinge. In
   einem durchlaufenden Raster waeren sie ununterscheidbar; die
   Trennlinie kostet nichts und beantwortet "wo bin ich gerade". */
.edsec{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.edsec h5{font:600 10.5px/1 'Chakra Petch',sans-serif;letter-spacing:.18em;
  text-transform:uppercase;color:var(--white);margin:0 0 6px}
.edsec .edhint{font-size:12.5px;color:var(--dim);margin:0 0 16px;max-width:64ch;line-height:1.6}

/* Werte aus FACEIT: sichtbar, aber nicht anfassbar. Kein Eingabefeld,
   kein Rahmen — sonst sieht es aus wie ein Feld, das gerade defekt
   ist, statt nach einer Angabe, die woanders herkommt. */
.fcro{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;max-width:560px}
.fcro .kv{display:flex;justify-content:space-between;gap:14px;padding:11px 0;
  border-bottom:1px solid var(--line);font-size:13.5px}
.fcro .kv span{color:var(--dim)}
.fcro .kv b{color:var(--white);font-weight:600;text-align:right}
.fcro .kv b.tbd{color:var(--dim);font-weight:400;font-style:italic}
@media (max-width:620px){.fcro{grid-template-columns:1fr}}

/* Erfolge: Platz, Ereignis, Datum, Entfernen. Die Kopfzeile traegt die
   Beschriftung einmal statt vier Mal je Zeile. */
.achhead{display:grid;grid-template-columns:72px minmax(0,1.15fr) minmax(0,1fr) 158px 40px;gap:10px;
  font:600 10px/1 'Chakra Petch',sans-serif;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);padding:0 0 9px}
.achlist{display:flex;flex-direction:column;gap:9px}
.achrow{display:grid;grid-template-columns:72px minmax(0,1.15fr) minmax(0,1fr) 158px 40px;gap:10px;
  align-items:center}
.achrow input{background:var(--black);border:1px solid var(--line);color:var(--txt);
  font:400 14px/1.5 Barlow,sans-serif;padding:10px 12px;min-height:44px;width:100%;
  transition:border-color .18s,background .18s}
.achrow input:focus{outline:none;border-color:var(--brand)}
.achrow input::placeholder{color:#5C5C68}
.achrow input[type=date]{font-variant-numeric:tabular-nums}
.achx{width:40px;height:44px;display:grid;place-items:center;border:1px solid var(--line);
  color:var(--dim);font-size:19px;line-height:1;
  transition:color .18s,border-color .18s,background .18s}
.achx:hover{color:var(--red);border-color:var(--red);background:rgba(255,75,92,.1)}
.achadd{margin-top:14px;min-height:38px;padding:0 16px;font-size:11px}

/* Ohne Platzziffer bleibt der Kreis leer statt eine Zahl zu erfinden */
.medal.none{background:none;color:var(--dim);border-color:var(--line)}

/* Der Ereignisname traegt den Beleg. Der Pfeil steht vorab da, damit
   man nicht jede Zeile anfahren muss, um zu sehen, wo etwas
   nachpruefbar ist. */
.tbl a.achlink{display:inline-flex;align-items:center;gap:7px;
  transition:color .18s,gap .22s var(--e)}
.tbl a.achlink svg{width:11px;height:11px;flex:none;color:var(--brand-l);
  transition:color .18s,transform .22s var(--e)}
.tbl a.achlink:hover{color:var(--brand-l)}
.tbl a.achlink:hover svg{transform:translate(1px,-1px)}
.thead.academy~main .tbl a.achlink svg,
.thead.academy~main .tbl a.achlink:hover{color:var(--gold)}

/* Nur fuer Vorleser — der Pfeil allein sagt nicht, wohin er fuehrt */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}

@media (max-width:980px){
  .achhead{display:none}
  .achrow{grid-template-columns:72px minmax(0,1fr) 40px;
    grid-template-areas:"platz ereignis weg" "quelle quelle quelle" "datum datum datum"}
  .achrow .achp{grid-area:platz}
  .achrow .ache{grid-area:ereignis}
  .achrow .achx{grid-area:weg}
  .achrow .achs{grid-area:quelle}
  .achrow .achd{grid-area:datum}
  .achlist{gap:22px}
  /* Bei gestapelten Zeilen braucht es eine sichtbare Trennung, sonst
     verschwimmen zwei Erfolge zu einem Block. */
  .achrow + .achrow{padding-top:22px;border-top:1px solid var(--line)}
}


/* ── Saisonleiste ueber den Ergebnissen ───────────────────────────
   Bilanz und Platzierung, direkt ueber den Spielen, aus denen die
   Bilanz stammt. Flach gehalten: kein Kasten im Kasten, nur eine
   Zeile mit Trennpunkten. */
.seasonbar{display:flex;align-items:center;flex-wrap:wrap;gap:0;
  padding:16px 0 15px;border-bottom:1px solid var(--line)}
.seasonbar[hidden]{display:none}
.seasonbar .sbsep{width:5px;height:5px;flex:none;margin:0 18px;background:var(--line2)}
.seasonbar .sbkey{font:600 10.5px/1 'Chakra Petch',sans-serif;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim)}
.seasonbar .sbpos{font-size:13px;color:var(--txt)}

/* Sieg und Niederlage tragen dieselbe Farbe wie in der Ergebnisliste
   darunter — das Auge verbindet die Bilanz mit den Zeilen, aus denen
   sie kommt. */
.seasonbar .sbrec{display:inline-flex;align-items:baseline;gap:3px;
  font-variant-numeric:tabular-nums}
.seasonbar .sbrec b{font:700 19px/1 'Chakra Petch',sans-serif;letter-spacing:.02em}
.seasonbar .sbrec b.w{color:var(--win)}
.seasonbar .sbrec b.l{color:var(--red)}
.seasonbar .sbrec b.d{color:var(--dim)}
.seasonbar .sbrec em{font:600 10.5px/1 'Chakra Petch',sans-serif;letter-spacing:.14em;
  font-style:normal;color:var(--dim);margin-right:2px}
.seasonbar .sbrec i{font-style:normal;color:var(--line2);margin:0 7px}

@media (max-width:560px){
  .seasonbar .sbsep{margin:0 12px}
  .seasonbar .sbpos{width:100%;margin-top:10px}
  .seasonbar .sbpos+.sbsep,.seasonbar .sbsep:last-of-type{display:none}
}

/* Verlinkte Match-Zeilen: dieselbe Form wie die stummen, nur mit
   Zeiger und einer Spur mehr Aufhellung beim Ueberfahren. */
.fxrow.lnk{cursor:pointer}
.fxrow.lnk:hover{background:rgba(255,255,255,.055)}

/* Teams in Spielen sind Links (01.10.2026). Die Zeile selbst waehlt
   das Spiel oder oeffnet den Matchraum ueber .fxhit, eine Flaeche
   hinter allem; die Team-Links liegen darueber. */
.fxrow{position:relative}
.fxhit{position:absolute;inset:0;z-index:0;border:0;padding:0;margin:0;
  background:none;cursor:pointer}
.fxhit:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.fxrow.community .fxhit:focus-visible{outline-color:var(--white)}
.fxrow > .tlink, .fxrow > .v, .fxrow > .mt{position:relative;z-index:1}
.fxrow > .mt, .fxrow > .v{pointer-events:none}
.fxrow > .tlink{display:block;min-width:0;color:inherit;text-decoration:none}
.fxrow > .tl-c1{grid-area:c1}
.fxrow > .tl-n1{grid-area:n1}
.fxrow > .tl-n2{grid-area:n2}
.fxrow > .tl-c2{grid-area:c2}
/* "Scout opponent" bei kommenden Spielen (SC3, 03.10.2026), nur fuer
   wer die Stats des Teams sieht: eigene Zeile unter dem Spiel, ueber der
   Flaeche .fxhit. In der Next-up-Karte ein Knopf wie Matchroom. */
.fxrow > .fxscout{grid-column:1 / -1;justify-self:start;position:relative;z-index:1;
  font:600 9.5px/1 'Chakra Petch',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-l);padding:4px 0}
.fxrow > .fxscout:hover{color:var(--white)}
.fxbody .mid .fxscout{margin-top:8px}
/* Der Name steckt im Link: Ausrichtung und Kuerzen am Link, der Name
   selbst als Block. Sonst stand der Gegnername links, weit weg von
   seinem Logo (01.10.2026). */
/* Platz fuer die Unterstreichung (01.10.2026): .nm schneidet den
   Ueberlauf ab (fuer "..." bei langen Namen) und war nur so hoch wie
   die Schrift. Die Linie 3 px darunter wurde mit abgeschnitten, beim
   Hover war nichts zu sehen. Polster unten, mit negativem Rand
   ausgeglichen, damit die Zeile nicht waechst. */
.fxrow > .tlink .nm{display:block;padding-bottom:6px;margin-bottom:-6px}
.fxrow > .tl-n2{text-align:right}
@media (max-width:520px){ .fxrow > .tl-n2{text-align:left} }
/* Der Namenslink ist so breit wie der Name, nicht wie die Spalte
   (01.10.2026): Sonst reagierte der Hover neben dem Text, und die
   Unterstreichung sass nicht unter dem Namen. Lange Namen werden
   weiter mit ... gekuerzt. */
.fxrow > .tl-n1, .fxrow > .tl-n2{width:fit-content;max-width:100%}
.fxrow > .tl-n1{justify-self:start}
.fxrow > .tl-n2{justify-self:end}
@media (max-width:520px){ .fxrow > .tl-n2{justify-self:start} }
.fxrow > .tl-c1, .fxrow > .tl-c2{width:fit-content}
.fxrow > .tl-c2{justify-self:end}
@media (max-width:520px){ .fxrow > .tl-c2{justify-self:start} }
.fxrow > span.tlink{pointer-events:none}
/* Hover (Alexander, 01.10.2026): Name unterstrichen, Rahmen des Logos
   leuchtet auf, damit klar ist, dass der Klick auf eine andere Seite
   fuehrt. Name und Logo sind zwei Links; .hv setzt site.js auf beide,
   sobald einer von ihnen unter der Maus ist. */
a.tlink:hover .nm, a.tlink.hv .nm, .rr .w a.tlink:hover, .rr .w a.tlink.hv,
a.side.tlink:hover b, a.t.tlink:hover b{text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;color:var(--white)}
.tlink .cx, .tlink .crest{transition:border-color .18s,box-shadow .18s}
a.tlink:hover .cx, a.tlink.hv .cx, a.tlink:hover .crest{border-color:rgba(255,255,255,.55);
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 0 14px rgba(255,255,255,.16)}
.rr .w a.tlink{color:inherit;text-decoration:none}
.rr .sc a.tlink{display:block;line-height:0}
a.side.tlink, a.t.tlink{color:inherit;text-decoration:none}


/* ── Schwebende Speicherleiste ────────────────────────────────────
   Erscheint erst bei der ersten Aenderung. Sitzt unten, weil das
   Formular laenger ist als der Bildschirm — sie erspart genau den
   Weg ans Ende, den man sonst zum Speichern gehen muesste. */
.savebar{position:fixed;left:0;right:0;bottom:0;z-index:90;
  background:rgba(12,10,20,.94);backdrop-filter:blur(16px);
  border-top:1px solid var(--brand);
  transform:translateY(100%);transition:transform .34s var(--e)}
.savebar.up{transform:none}
.savein{display:flex;align-items:center;gap:12px;min-height:72px}
.savetxt{display:flex;align-items:center;gap:10px;margin-right:auto;
  font:600 12px/1 'Chakra Petch',sans-serif;letter-spacing:.14em;
  text-transform:uppercase;color:var(--white)}
/* Der Punkt pulst langsam — genug, um den Blick zu holen, zu langsam,
   um beim Tippen zu stoeren. */
.savetxt .dot{width:7px;height:7px;flex:none;background:var(--brand-l);
  animation:savepulse 2.4s ease-in-out infinite}
@keyframes savepulse{0%,100%{opacity:1}50%{opacity:.35}}
.savebar .btn{min-height:40px}
@media (max-width:560px){
  .savein{min-height:64px;gap:8px}
  .savetxt{font-size:10.5px;letter-spacing:.1em}
  .savebar .btn{padding:0 13px;font-size:11px}
}

/* ── Rueckfrage vor dem Verwerfen ─────────────────────────────── */
.ask{border:1px solid var(--line2);background:var(--s1);color:var(--txt);
  padding:30px 30px 26px;max-width:440px;width:calc(100% - 32px)}
.ask::backdrop{background:rgba(4,4,6,.72);backdrop-filter:blur(3px)}
.ask h3{font-size:1.2rem;color:var(--white);text-transform:uppercase;margin:0 0 12px}
.ask p{margin:0 0 24px;font-size:14px;line-height:1.65;color:var(--dim)}
.askrow{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:#E03448}

/* Die Fusszeile darf nicht unter der Leiste verschwinden */
body:has(.savebar) footer{padding-bottom:88px}

/* ── Schwebender Speichern-Knopf (assets/speicherhilfe.js) ─────────
   Fuer jedes Formular ausser dem Team-Editor: erscheint nur, wenn
   etwas geaendert wurde UND der echte Knopf ausserhalb des Bildes
   liegt. Rechts unten statt in der Mitte, weil dort die Toasts
   erscheinen. Gleiche Sprache wie die Speicherleiste oben. */
.sbfloat{position:fixed;right:20px;bottom:20px;z-index:95;
  display:flex;align-items:center;gap:10px;max-width:calc(100% - 40px);
  padding:12px 12px 12px 18px;
  background:rgba(12,10,20,.94);backdrop-filter:blur(16px);
  border:1px solid var(--brand);box-shadow:0 14px 40px rgba(0,0,0,.5);
  opacity:0;transform:translateY(16px);pointer-events:none;visibility:hidden;
  transition:opacity .22s var(--e),transform .28s var(--e),visibility 0s linear .28s}
.sbfloat.up{opacity:1;transform:none;pointer-events:auto;visibility:visible;
  transition:opacity .22s var(--e),transform .28s var(--e)}
.sbfloat .savetxt{margin-right:6px;white-space:nowrap}
.sbfloat .btn{white-space:nowrap}
.sbfloat .btn[hidden]{display:none}
/* Liegt die Speicherleiste des Team-Editors schon unten, sitzt dieser
   Knopf darueber. */
.sbfloat.hoch{bottom:92px}

/* Ladesymbol (speicherhilfe.js, 05.10.2026): dreht am Knopf, bis die
   Anfrage und alles, was danach nachlaedt, fertig ist. Waehrenddessen
   kein zweiter Klick. */
.tsh-laedt{pointer-events:none;cursor:progress;position:relative}
.tsh-laedt::after{content:"";flex:none;display:inline-block;width:13px;height:13px;margin-left:8px;vertical-align:-2px;
  border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:tshdreh .7s linear infinite;opacity:.9}
@keyframes tshdreh{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .tsh-laedt::after{animation-duration:2s} }
@media (max-width:560px){
  .sbfloat{left:12px;right:12px;bottom:12px;max-width:none;padding:10px 10px 10px 14px;gap:8px}
  .sbfloat .savetxt{font-size:10.5px;letter-spacing:.1em;margin-right:auto}
  .sbfloat.hoch{bottom:76px}
}
@media (prefers-reduced-motion:reduce){.sbfloat,.sbfloat.up{transition:none}}
body.t-academy .sbfloat{--brand:#FDC500;--brand-d:#E0AE00;--brand-l:#FFD94D}
body.t-academy .sbfloat .btn:not(.btn-g):not(.btn-red){color:#221A00}


/* ── Stufenfarbe der Teamseite ────────────────────────────────────
   Statt jeden Knopf einzeln zu ueberschreiben, wird die Markenfarbe
   im Seiteninhalt umdefiniert. Alles, was --brand benutzt, zieht
   damit von allein mit: Knoepfe, Fokusringe, der Reiterstrich, der
   Akzent an der FACEIT-Zeile, die Kante der Speicherleiste.

   Die Kopfzeile bleibt bewusst aussen vor. Sie gehoert dem Netzwerk,
   nicht dem Team — ein goldener "Sign in"-Knopf waere falsch.

   Fuer Community-Teams genuegt bei Bedarf ein zweiter Block nach
   demselben Muster. */
body.t-academy main,
body.t-academy .tbar,
body.t-academy .savebar,
body.t-academy .ask,
body.t-academy .toast{
  --brand:#FDC500;
  --brand-d:#E0AE00;
  --brand-l:#FFD94D;
}

/* Gold traegt kein Weiss. Auf dem hellen Grund braucht es dunkle
   Schrift, sonst steht die Beschriftung bei 1.8:1 Kontrast.
   Zerstoerende Knoepfe bleiben rot — die Stufe faerbt sie nicht um. */
body.t-academy main .btn:not(.btn-g):not(.btn-red),
body.t-academy .savebar .btn:not(.btn-g):not(.btn-red),
body.t-academy .ask .btn:not(.btn-g):not(.btn-red){color:#221A00}
/* Die Rueckmeldung nach dem Speichern traegt dieselbe Stufenfarbe wie
   der Knopf, den man gerade gedrueckt hat. Erschiene sie lila,
   waehrend der Knopf gold war, laese sie sich wie eine Meldung von
   woanders. Auf Gold wieder dunkle Schrift. */
body.t-academy .toast{color:#221A00}
body.t-academy main .btn:not(.btn-g):not(.btn-red):hover,
body.t-academy .savebar .btn:not(.btn-g):not(.btn-red):hover,
body.t-academy .ask .btn:not(.btn-g):not(.btn-red):hover{color:#1A1400}

/* Umriss-Knoepfe (Cancel, Discard, Add placement, Edit page) bleiben
   ruhig, greifen beim Ueberfahren aber die Stufenfarbe auf statt
   Weiss. Sie lesen --brand-l, also stimmt die Farbe automatisch,
   sobald oben ein Block fuer eine weitere Stufe dazukommt.

   Die Liste waechst mit jeder Stufe um eine Zeile — bewusst
   ausgeschrieben statt ueber einen Attributselektor geraten. */
.t-main main .btn-g:hover,    .t-main .tbar .btn-g:hover,
.t-main .savebar .btn-g:hover,.t-main .ask .btn-g:hover,
.t-academy main .btn-g:hover, .t-academy .tbar .btn-g:hover,
.t-academy .savebar .btn-g:hover,.t-academy .ask .btn-g:hover{
  border-color:var(--brand-l);color:var(--brand-l);background:rgba(255,255,255,.045)}

/* Die klebende Leiste steht ausserhalb von main und braucht die
   Variablen deshalb selbst. */
body.t-academy .tbar{--brand:#FDC500;--brand-d:#E0AE00;--brand-l:#FFD94D}

/* ── Eigene Teamfarbe (01.10.2026) ─────────────────────────────────
   Hat ein Team eine Tag-Farbe, setzt site.js (teamfarbeSetzen) am body
   die Klasse t-eigen und die Variablen --tf, --tf-l, --tf-d, --tf-text.
   Dieselbe Idee wie bei der Academy oben: Die Markenfarbe wird in den
   Bereichen der Teamseite umdefiniert, alles, was --brand (und bei der
   Academy --gold) liest, zieht mit. Steht nach den Academy-Regeln und
   gewinnt deshalb, auch wenn die Academy selbst eine Farbe bekommt.
   Kopf- und Fusszeile bleiben beim Netzwerk. */
body.t-eigen main,
body.t-eigen .thead,
body.t-eigen .tbar,
body.t-eigen .savebar,
body.t-eigen .ask,
body.t-eigen .toast,
body.t-eigen .sbfloat{
  --brand:var(--tf);
  --brand-d:var(--tf-d);
  --brand-l:var(--tf-l);
  --gold:var(--tf);
  --teamfarbe:var(--tf);
}
body.t-eigen main .btn:not(.btn-g):not(.btn-red),
body.t-eigen .tbar .btn:not(.btn-g):not(.btn-red),
body.t-eigen .savebar .btn:not(.btn-g):not(.btn-red),
body.t-eigen .ask .btn:not(.btn-g):not(.btn-red),
body.t-eigen .sbfloat .btn:not(.btn-g):not(.btn-red),
body.t-eigen main .btn:not(.btn-g):not(.btn-red):hover,
body.t-eigen .savebar .btn:not(.btn-g):not(.btn-red):hover,
body.t-eigen .ask .btn:not(.btn-g):not(.btn-red):hover{color:var(--tf-text)}
body.t-eigen .toast{color:var(--tf-text)}
body.t-eigen main .btn-g:hover,body.t-eigen .tbar .btn-g:hover,
body.t-eigen .savebar .btn-g:hover,body.t-eigen .ask .btn-g:hover{
  border-color:var(--tf-l);color:var(--tf-l);background:rgba(255,255,255,.045)}
/* Diese Stellen hatten das Lila als feste Zahl statt als Variable. */
body.t-eigen .thead .tier.main,body.t-eigen .thead .tier.academy,body.t-eigen .thead .tier.community,
body.t-eigen .tbar .tier{color:var(--tf-l);
  border-color:color-mix(in srgb,var(--tf) 50%,transparent);
  background:color-mix(in srgb,var(--tf) 12%,transparent)}
body.t-eigen .comp a.fc:hover{background:color-mix(in srgb,var(--tf) 8%,transparent)}


.mlist{display:flex;flex-direction:column;gap:9px}
.mrow{display:grid;gap:10px;align-items:center;
  grid-template-columns:minmax(0,1.3fr) 178px 148px 40px}
.mrow select,.mrow input{background:var(--black);border:1px solid var(--line);color:var(--txt);
  font:400 14px/1.5 Barlow,sans-serif;padding:10px 12px;min-height:44px;width:100%;
  transition:border-color .18s,background .18s}
.mrow select:focus,.mrow input:focus{outline:none;border-color:var(--brand)}
.mrow input::placeholder{color:#5C5C68}

@media (max-width:980px){
  .mrow{grid-template-columns:minmax(0,1fr) 40px;
    grid-template-areas:"wer weg" "pos pos" "seit seit"}
  .mrow .mrx{grid-area:weg}
  .mrow .mrole{grid-area:pos}
  .mlist{gap:22px}
  .mrow + .mrow{padding-top:22px;border-top:1px solid var(--line)}
}


/* ── Datums- und Monatsfelder ─────────────────────────────────────
   Der Kalenderknopf des Browsers ist auf dunklem Grund fast
   unsichtbar. color-scheme:dark schaltet die Systemdarstellung um,
   damit Symbol UND aufgehender Kalender zur Seite passen. */
input[type=date],input[type=month]{color-scheme:dark;cursor:pointer}
input[type=date]::-webkit-calendar-picker-indicator,
input[type=month]::-webkit-calendar-picker-indicator{
  opacity:.55;cursor:pointer;transition:opacity .18s}
input[type=date]:hover::-webkit-calendar-picker-indicator,
input[type=month]:hover::-webkit-calendar-picker-indicator{opacity:1}


/* ── Bild hochladen ───────────────────────────────────────────────
   Vorschau links, Bedienung rechts. Die native Dateischaltflaeche ist
   in jedem Browser anders und passt in keine dunkle Oberflaeche — sie
/* ── FACEIT-Verbindung ────────────────────────────────────────────
   Drei Zustaende, drei Farben: leer bleibt stumm, verbunden gruen,
   falsche Adresse rot. Gruen ist hier kein Markenakzent, sondern
   eine Zustandsmeldung — dieselbe Farbe wie ein gewonnenes Match. */
.fcstat{display:none}
.fcstat.ok,.fcstat.bad{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:12.5px;line-height:1.5;padding:9px 0 2px}
.fcstat .fcico{width:19px;height:19px;flex:none;display:grid;place-items:center;
  border-radius:50%;font:700 12px/1 'Chakra Petch',sans-serif}
.fcstat.ok{color:var(--win)}
.fcstat.ok .fcico{background:rgba(59,214,113,.16);color:var(--win)}
.fcstat.ok .fcico svg{width:11px;height:11px}
.fcstat.bad{color:var(--red)}
.fcstat.bad .fcico{background:rgba(255,75,92,.16);color:var(--red)}
.fcstat code{font:500 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--dim);letter-spacing:.02em}
.fcstat .fcoff{min-height:30px;padding:0 12px;font-size:10.5px;margin-left:auto}

/* ── Loeschbereich ────────────────────────────────────────────────
   Abgesetzt durch eine rote Oberkante statt durch Groesse. Der
   Bereich soll auffindbar sein, aber nicht wirken, als waere er
   der naechste Schritt. */
.edsec.dz{border-top-color:rgba(255,75,92,.35)}
.edsec.dz h5{color:var(--red)}
.edsec.dz .btn{min-height:38px;padding:0 16px;font-size:11px}

/* Tippbestaetigung im Rueckfrage-Dialog */
.ask .askin{width:100%;background:var(--black);border:1px solid var(--line);color:var(--white);
  font:400 14.5px/1.5 Barlow,sans-serif;padding:11px 13px;min-height:44px;margin:0 0 20px;
  transition:border-color .18s}
.ask .askin:focus{outline:none;border-color:var(--red)}
.ask .askin::placeholder{color:#4A4A55}
.ask .btn[disabled]{opacity:.4;cursor:not-allowed}
.ask .btn[disabled]:hover{background:var(--red);transform:none}


/* ── Teamwechsler in der klebenden Leiste ─────────────────────────
   Haengt unter dem Teamnamen, nicht in der Seite: So bleibt er auch
   nach 3000 Pixeln erreichbar. Breite folgt dem Inhalt, damit
   "Telacy Esports" und "Division TBA" nicht umbrechen. */
.tbmenu{position:absolute;left:var(--gut);top:calc(100% + 1px);z-index:70;
  min-width:288px;max-width:calc(100vw - 2 * var(--gut));
  background:var(--s2);border:1px solid var(--line2);
  box-shadow:0 20px 48px rgba(0,0,0,.66);
  display:flex;flex-direction:column}
.tbmenu[hidden]{display:none}

.tbmi{display:flex;align-items:center;gap:12px;padding:12px 14px;
  border-bottom:1px solid var(--line);transition:background .15s}
.tbmi:last-child{border-bottom:0}
.tbmi:hover{background:rgba(255,255,255,.055)}
.tbmi img{width:30px;height:30px;flex:none;object-fit:contain}
.tbmt{display:flex;flex-direction:column;gap:3px;min-width:0}
.tbmt b{font:700 13px/1.15 'Chakra Petch',sans-serif;letter-spacing:.06em;
  text-transform:uppercase;color:var(--white);white-space:nowrap}
.tbmt small{font-size:11.5px;color:var(--dim);white-space:nowrap}
.tbmt small.tbd{font-style:italic;opacity:.75}

/* Das Team, auf dem man steht: markiert, aber nicht ausgegraut —
   man soll es wiederfinden, nicht meiden. */
.tbmi.on{background:rgba(255,255,255,.04)}
.tbmi.on .tbmt b{color:var(--brand-l)}
.tbmnow{margin-left:auto;font:600 9px/1 'Chakra Petch',sans-serif;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);white-space:nowrap}

@media (max-width:620px){
  .tbmenu{min-width:0;right:var(--gut)}
}

/* ── Tag-Farbe im Dashboard ───────────────────────────────────────
   Aufbau wie die Rollenfarbe bei Discord: oben die Art, darunter die
   Farbwahl mit Vorschlaegen, unten die Vorschau. Die Vorschau steht
   absichtlich am Ende und nicht oben — sie ist das Ergebnis der
   Entscheidungen darueber, nicht ihr Ausgangspunkt. */
.tagpick{border:1px solid var(--line);background:var(--black);padding:14px}

.tpmodes{display:flex;gap:0;border:1px solid var(--line);width:fit-content;max-width:100%;
  flex-wrap:wrap}
.tpm{padding:8px 14px;background:none;border:0;border-right:1px solid var(--line);
  font:600 10.5px/1 'Chakra Petch',sans-serif;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim);cursor:pointer;transition:color .16s,background .16s}
.tpm:last-child{border-right:0}
.tpm:hover{color:var(--white)}
.tpm.on{color:var(--white);background:rgba(120,64,224,.18)}

.tpbody{margin-top:14px;display:flex;flex-direction:column;gap:13px}
.tpbody[hidden]{display:none}

.tpslots{display:flex;gap:18px;flex-wrap:wrap}
.tpslot{display:flex;flex-direction:column;gap:7px}
.tpslot[hidden],.tpsl[hidden]{display:none}
.tpsl{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}

/* ── Das HEX-Feld (hexFeldHtml in site.js, 04.10.2026) ───────────
   Vorschau, Code, Kopieren: drei Teile, ein Rahmen. Das Farbrad des
   Browsers liegt unsichtbar ueber der Vorschau; sein eigener Rahmen
   sahe in dieser Oberflaeche fremd aus. Die Meldung steht darunter
   und ueber die volle Breite, ohne den Kasten zu verbreitern. */
.hexfeld{display:inline-grid;grid-template-columns:auto auto auto;align-items:stretch;
  justify-content:start;justify-self:start;width:fit-content;max-width:100%;vertical-align:middle}
.hexvor{position:relative;width:44px;min-height:42px;border:1px solid var(--line2);border-right:0;
  background-clip:padding-box}
.hexvor.leer{background:repeating-conic-gradient(#2A2A33 0 25%,var(--s2) 0 50%) 0 0/12px 12px}
.hexvor:focus-within{outline:2px solid var(--brand-l,#9D6BFF);outline-offset:1px;z-index:1}
.hexfeld .hexvor .hexnativ{position:absolute;inset:0;width:100%;height:100%;min-height:0;
  padding:0;margin:0;border:0;opacity:0;cursor:pointer}
.hexfeld .hexein{width:112px;min-height:42px;padding:0 11px;background:var(--black);
  border:1px solid var(--line2);color:var(--white);text-transform:uppercase;
  font:500 14px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.04em;
  transition:border-color .18s,background .18s}
.hexfeld .hexein:focus{outline:none;border-color:var(--brand)}
.hexkopie{width:42px;min-height:42px;display:grid;place-items:center;padding:0;cursor:pointer;
  background:var(--s2);border:1px solid var(--line2);border-left:0;color:var(--dim);
  transition:color .16s,background .16s}
.hexkopie svg{width:16px;height:16px}
.hexkopie:hover{color:var(--white);background:var(--s3)}
.hexkopie:focus-visible{outline:2px solid var(--brand-l,#9D6BFF);outline-offset:1px}
.hexkopie.ok{color:var(--win)}
.hexkopie:disabled{opacity:.4;cursor:default}
.hexfeld.falsch .hexein{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}
.hexfehler{grid-column:1/-1;width:0;min-width:100%;margin-top:6px;font-size:12.5px;line-height:1.4;
  color:var(--red);text-wrap:balance}
.hexfehler[hidden]{display:none}

.tppresets{display:flex;gap:8px;flex-wrap:wrap}
.tpsw{width:30px;height:30px;border:1px solid var(--line2);cursor:pointer;padding:0;
  transition:transform .16s var(--e),border-color .16s}
.tpsw:hover{transform:translateY(-2px);border-color:var(--silver)}
.tpsw.on{border-color:#fff;box-shadow:0 0 0 1px #fff inset}

.tpprev{margin-top:15px;padding-top:13px;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:12px;flex-wrap:wrap}

/* ── Suche: die Kommandopalette ───────────────────────────────────
   Liegt ueber allem, deshalb ein eigener Stapel. Der Kasten sitzt
   im oberen Drittel statt mittig: Die Trefferliste waechst nach
   unten, und ein mittig zentrierter Kasten wuerde bei jedem
   Tastendruck springen. */
.pal{position:fixed;inset:0;z-index:300;display:flex;justify-content:center;
  align-items:flex-start;
  padding:clamp(60px,12vh,140px) var(--gut) var(--gut)}
.pal[hidden]{display:none}
.palbd{position:absolute;inset:0;background:rgba(4,4,6,.72);backdrop-filter:blur(3px);
  animation:palfade .18s var(--e)}
.palopen{overflow:hidden}
@keyframes palfade{from{opacity:0}to{opacity:1}}

.palbox{position:relative;width:min(640px,100%);max-height:100%;display:flex;flex-direction:column;
  background:var(--s1);border:1px solid var(--line2);
  box-shadow:0 30px 90px rgba(0,0,0,.6),0 0 0 1px rgba(120,64,224,.14);
  animation:palrise .22s var(--e)}
@keyframes palrise{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ── Eingabezeile ─────────────────────────────────────────────── */
.palin{display:flex;align-items:center;gap:12px;padding:0 14px 0 18px;
  border-bottom:1px solid var(--line);flex:none}
.palin svg{width:17px;height:17px;color:var(--dim);flex:none}
.palin input{flex:1;min-width:0;height:56px;background:none;border:0;outline:none;
  color:var(--white);font:500 15px/1 'Barlow',sans-serif}
.palin input::placeholder{color:var(--dim)}
.palesc{flex:none;padding:5px 9px;background:none;border:1px solid var(--line2);
  color:var(--dim);font:600 10px/1 'Chakra Petch',sans-serif;letter-spacing:.12em;
  text-transform:uppercase;cursor:pointer;transition:color .2s,border-color .2s}
.palesc:hover{color:var(--white);border-color:var(--white)}

/* ── Trefferliste ─────────────────────────────────────────────── */
/* Der Kasten waechst mit dem Inhalt und deckelt erst an der
   Fensterhoehe. flex:0 1 auto laesst die Liste schrumpfen und
   scrollen, aber nie ins Leere wachsen. */
.palres{overflow-y:auto;overscroll-behavior:contain;padding:8px 0;flex:0 1 auto}
.palg{padding:6px 0}
.palgh{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:6px 18px 8px;font:600 10px/1 'Chakra Petch',sans-serif;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim)}
.palgh span{font-size:9.5px;letter-spacing:.1em;color:var(--dim);opacity:.7}

.palr{display:flex;align-items:center;gap:13px;padding:9px 18px;
  border-left:2px solid transparent;transition:background .12s,border-color .12s}
/* Nur eine Zeile ist je "dran" — die Tastatur fuehrt, die Maus zeigt
   nur darauf. Deshalb kein :hover, sondern eine gesetzte Klasse. */
.palr.on{background:rgba(120,64,224,.14);border-left-color:var(--brand)}
/* Die Fundstelle bleibt auf jeder Zeile in Markenfarbe — auch auf der
   aktiven. Sie dort weiss zu faerben hiesse, die Hervorhebung genau
   da zu loeschen, wo hingeschaut wird. */
.palr em{font-style:normal;color:var(--brand-l)}

.palrk{width:26px;height:26px;flex:none;display:grid;place-items:center}
.palrk .flag{gap:0}
.palrk img{width:22px;height:16px;object-fit:cover}
.palini{width:26px;height:26px;display:grid;place-items:center;border:1px solid var(--line2);
  font:600 10px/1 'Chakra Petch',sans-serif;letter-spacing:.06em;color:var(--dim)}
/* Aktionen sind keine Inhalte — die Markenfarbe trennt die beiden. */
.palini.pala{border-color:rgba(120,64,224,.5);color:var(--brand-l);font-size:8px}

.palrt{min-width:0;display:flex;flex-direction:column;gap:2px}
.palrt b{font:600 13.5px/1.25 'Barlow',sans-serif;color:var(--txt);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.palr.on .palrt b{color:var(--white)}
.palrt small{font-size:11.5px;color:var(--dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.palempty{padding:34px 18px 40px;text-align:center;display:flex;flex-direction:column;gap:7px}
.palempty b{font:600 14px/1 'Chakra Petch',sans-serif;letter-spacing:.06em;
  text-transform:uppercase;color:var(--txt)}
.palempty span{font-size:12.5px;color:var(--dim)}

/* ── Fusszeile mit den Tastenhinweisen ────────────────────────── */
.palfoot{display:flex;gap:18px;padding:10px 18px;border-top:1px solid var(--line);
  background:var(--black);flex:none}
.palfoot span{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--dim)}
.palfoot kbd{display:inline-grid;place-items:center;min-width:17px;height:17px;padding:0 4px;
  border:1px solid var(--line2);font:500 10px/1 'Barlow',sans-serif;color:var(--txt)}

@media (max-width:620px){
  .pal{padding-top:60px}
  /* Auf dem Telefon nimmt die Tastatur die halbe Hoehe. Die Hinweise
     auf Pfeiltasten sind dort ohnehin gegenstandslos. */
  .palfoot{display:none}
}
@media (prefers-reduced-motion:reduce){
  .palbd,.palbox{animation:none}
}

/* ── Artikelseite ─────────────────────────────────────────────────
   Fliesstext ist der einzige Ort auf dieser Seite, an dem gelesen und
   nicht ueberflogen wird. Deshalb hier die einzige Spalte, die sich
   auf Lesbarkeit statt auf Raumwirkung einlaesst: begrenzte Zeilen-
   laenge, groessere Schrift, mehr Durchschuss. */
/* padding-block statt der Kurzform padding:44px 0 8px: Die hob das
   seitliche Polster von .wrap auf, das Aufmacherbild stand bei 1440 px
   48 px links neben der Inhaltskante und auf dem Telefon am Rand.
   Oben --sec wie jede Unterseite (Final-Check 04.10.2026). */
.art{padding-block:var(--sec) 8px}
.alead{margin:0 0 clamp(28px,4vw,44px);aspect-ratio:16/9;overflow:hidden;
  border:1px solid var(--line);background:var(--s2)}
.alead img{width:100%;height:100%;object-fit:cover}

.atext{max-width:68ch}
.atext p{color:var(--txt);font-size:clamp(15px,1.15vw,16.5px);line-height:1.75;margin:0 0 22px}
/* Der Vorspann traegt den Satz, der auch im Hero steht. Etwas groesser
   und heller — er fasst zusammen, statt schon zu erzaehlen. */
.atext .alede{font-size:clamp(17px,1.5vw,19px);line-height:1.6;color:var(--white);
  margin-bottom:30px;padding-bottom:26px;border-bottom:1px solid var(--line)}
.atext h2{font-size:clamp(1.15rem,1.9vw,1.45rem);color:var(--white);text-transform:uppercase;
  margin:38px 0 16px;letter-spacing:.01em}
.atext h2:first-child{margin-top:0}

.atext blockquote{margin:32px 0;padding:4px 0 4px 22px;border-left:2px solid var(--brand)}
.atext blockquote p{font-size:clamp(17px,1.5vw,19px);line-height:1.6;color:var(--white);margin:0}
.atext blockquote cite{display:block;margin-top:12px;font-style:normal;
  font:600 10.5px/1 'Chakra Petch',sans-serif;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim)}

.atext figure{margin:32px 0}
.atext figure img{width:100%;border:1px solid var(--line)}
.atext figcaption{margin-top:10px;font-size:12.5px;color:var(--dim)}

/* Kopfzeile des Artikels: Abzeichen und Schlagzeile. Datum und
   Verfasser stehen im Block neben dem Text, nicht noch einmal hier. */
.ph .tier{margin-bottom:18px}

/* ── Quellenverweis im Artikel ────────────────────────────────────
   Uebernommene Beitraege werden hier ausgeschrieben. Der Nachweis, wo
   sie herkommen, steht unter dem Text statt darueber: erst lesen, dann
   nachsehen koennen. Der Diagonalpfeil sagt, dass es hinausgeht. */
.asrc{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin:38px 0 0;padding:20px 22px;border:1px solid var(--line);background:var(--s1)}
.asrc span{font-size:13px;color:var(--dim)}
.asrc .btn{flex:none}
.asrc .a{transition:transform .25s var(--e)}
.asrc .btn:hover .a{transform:translate(2px,-2px)}

/* ── News als Forum ───────────────────────────────────────────────
   Entscheidung von Alexander am 19.09.2026: Die News-Seite liest sich
   wie ein Forum. Links wer veroeffentlicht hat, daneben das Etikett und
   die Schlagzeile, rechts das Bild.

   Die Karten mit grossem Bild bleiben der Startseite vorbehalten. Dort
   sind es drei Eintraege, hier koennen es dreissig werden — und dreissig
   grosse Bilder untereinander liest niemand. */
.forum{border:1px solid var(--line);background:var(--s1)}
.fr{position:relative;display:grid;grid-template-columns:186px minmax(0,1fr) 148px;gap:22px;
  align-items:start;padding:20px 22px;border-bottom:1px solid var(--line);transition:background .16s}
.fr:last-child{border-bottom:0}
.fr:hover{background:rgba(255,255,255,.028)}

/* ── Verfasser ──────────────────────────────────────────────────── */
.fra{display:flex;gap:11px;align-items:center;min-width:0}
/* Profile tragen noch kein Bild (Aufgabenliste Punkt 3). Bis dahin die
   Anfangsbuchstaben, gleiche Machart wie in der Suche. */
.fravt{width:38px;height:38px;flex:none;display:grid;place-items:center;
  border:1px solid var(--line2);background:var(--s2);
  font:600 12px/1 'Chakra Petch',sans-serif;letter-spacing:.04em;color:var(--dim)}
.fr:hover .fravt{border-color:var(--brand);color:var(--brand-l)}
.frai{min-width:0;display:flex;flex-direction:column;gap:3px}
.frai b{font:600 12.5px/1.2 'Chakra Petch',sans-serif;letter-spacing:.06em;
  text-transform:uppercase;color:var(--txt);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.frai small{font-size:11px;color:var(--dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── Etikett, Schlagzeile, Vorschau ─────────────────────────────── */
.frb{min-width:0;display:flex;flex-direction:column;gap:9px}
.frtags{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.frb h3{font-size:1.05rem;line-height:1.35}
/* Die Schlagzeile traegt den Link und spannt ihn ueber die ganze Zeile.
   Damit bleibt die Zeile als Ganzes anklickbar, ohne dass die Zeile
   selbst ein Link sein muss — und der Quellenverweis daneben kann ein
   eigener Link sein. Ein Link im Link waere ungueltig. */
.frlink{color:var(--white);transition:color .18s}
.frlink::after{content:"";position:absolute;inset:0;z-index:1}
.fr:hover .frlink{color:var(--brand-l)}
/* Zwei Zeilen Vorschau. Mehr macht aus der Liste wieder Fliesstext. */
.frb p{font-size:13px;line-height:1.6;color:var(--dim);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.frmeta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:11.5px;color:var(--dim)}
/* Kommentarzahl an News (F3, 02.10.2026): Symbol plus Zahl, nur wenn > 0. */
.kz{display:inline-flex;align-items:center;gap:4px;color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap}
.kz[hidden]{display:none}
.kz svg{width:12px;height:12px;flex:none}
.frmeta .kz{margin-left:auto}
.na .nafuss{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11.5px}
.na .nafuss time{margin-top:0}
/* Der Quellenverweis liegt ueber der gespannten Flaeche, sonst waere er
   nicht erreichbar. */
.frvia{position:relative;z-index:2;display:inline-flex;align-items:center;gap:5px;
  color:var(--dim);transition:color .2s}
.frvia svg{width:10px;height:10px;flex:none;transition:transform .22s var(--e)}
.frvia:hover{color:var(--brand-l)}
.frvia:hover svg{transform:translate(2px,-2px)}

.frt{aspect-ratio:16/10;overflow:hidden;background:var(--s2);border:1px solid var(--line)}
.frt img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--e)}
.fr:hover .frt img{transform:scale(1.06)}

.frempty{padding:44px 22px;text-align:center;display:flex;flex-direction:column;gap:7px}
.frempty b{font:600 14px/1 'Chakra Petch',sans-serif;letter-spacing:.06em;
  text-transform:uppercase;color:var(--txt)}
.frempty span{font-size:13px;color:var(--dim)}

/* ── Verfasser auf der Artikelseite ─────────────────────────────── */
.artgrid{display:grid;grid-template-columns:186px minmax(0,1fr);gap:clamp(24px,4vw,44px);
  align-items:start}
/* Laeuft mit: Wer mitten im Text ist, soll nicht hochscrollen muessen,
   um zu sehen, von wem er das liest. */
.artby{position:sticky;top:calc(var(--hdr) + 22px);
  display:flex;flex-direction:column;gap:14px;
  padding:18px;border:1px solid var(--line);background:var(--s1)}
.artby .frai{gap:4px}
.artbyd{display:flex;flex-direction:column;gap:8px;align-items:flex-start;
  padding-top:13px;border-top:1px solid var(--line);font-size:11.5px;color:var(--dim)}

@media (max-width:900px){
  .fr{grid-template-columns:1fr;gap:14px}
  .fra{order:1}
  .frt{order:2;aspect-ratio:16/7}
  .frb{order:3}
  /* Stehend hat die Seitenspalte keinen Platz. Der Verfasser legt sich
     quer ueber den Text, das Mitlaufen entfaellt. */
  .artgrid{grid-template-columns:1fr;gap:24px}
  .artby{position:static;flex-direction:row;align-items:center;gap:12px}
  .artbyd{margin-left:auto;padding-top:0;border-top:0}
}

/* ═══════════════════════════════════════════════════════════════
   PROFILSEITE

   Die Discord-Verknuepfung ist das, wonach hier am haeufigsten
   gesucht wird. Sie steht deshalb zweimal und beide Male auffaellig:
   als farbiges Zeichen auf der Ausweiskarte und als erstes Feld
   daneben. Grauer Kleintext wie vorher ("· Discord linked") ist
   korrekt und wird trotzdem uebersehen.
   ═══════════════════════════════════════════════════════════════ */

/* ── Zeichen auf der Ausweiskarte ──────────────────────────────── */
.dcrow{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px}
.dclink{display:inline-flex;align-items:center;gap:6px;padding:4px 8px 4px 6px;
  border:1px solid rgba(88,101,242,.5);background:rgba(88,101,242,.14);
  color:#C3C9FF;font:600 11.5px/1 Barlow,sans-serif;text-decoration:none;
  transition:border-color .18s,background .18s,color .18s}
.dclink .g{display:grid;place-items:center;width:14px;height:14px;flex:none;color:#5865F2}
.dclink .g svg{width:14px;height:14px}
.dclink b{font-weight:600;letter-spacing:.01em}
.dclink .hk{font-size:11px;color:var(--win);margin-left:1px}

/* Nicht verknuepft: stiller Umriss, der zum Klicken auffordert.
   Kein Rot — es ist kein Fehler, sondern der Normalfall fuer jeden,
   der kein Spieler ist. */
.dclink.off{border-color:var(--line2);background:none;color:var(--dim);cursor:pointer}
.dclink.off .g{color:var(--dim)}
.dclink.off:hover{border-color:#5865F2;color:#C3C9FF;background:rgba(88,101,242,.1)}
.dclink.off:hover .g{color:#5865F2}
/* FACEIT-Zeichen neben Discord (02.10.2026), Markenfarbe Orange */
.dclink.fc.on{border-color:rgba(255,85,0,.5);background:rgba(255,85,0,.12);color:#FFC2A3}
.dclink.fc .g{color:#FF5500}
.dclink.fc.on:hover{border-color:#FF5500}
.dclink.fc.off .g{color:var(--dim)}
.dclink.fc.off:hover{border-color:#FF5500;color:#FFC2A3;background:rgba(255,85,0,.1)}
.dclink.fc.off:hover .g{color:#FF5500}
/* Schlichter (Alexander, 02.10.2026): verbunden = grauer Rahmen ohne Flaeche,
   heller Text, nur das Symbol in Markenfarbe, kein Haken. */
.dclink.on,.dclink.fc.on{border-color:var(--line2);background:none;color:#C9C9D2}
.dclink.on:hover,.dclink.fc.on:hover{border-color:rgba(255,255,255,.3)}
/* Discord nur Logo und Haken, FACEIT Logo, Name und Haken (02.10.2026) */
.dclink.on{padding:4px 7px 4px 6px}

/* ── Discord-Feld ──────────────────────────────────────────────── */
.dcbox{border-color:rgba(88,101,242,.34)}
.dcstate{display:flex;align-items:center;gap:15px;flex-wrap:wrap}
.dcstate .w{flex:1;min-width:150px}
.dcstate .w b{display:block;color:var(--white);font:600 15px/1.35 Barlow,sans-serif}
.dcstate .w small{display:block;margin-top:4px;font-size:12.5px;color:var(--dim)}
.dctile{width:46px;height:46px;flex:none;display:grid;place-items:center;border:1px solid}
.dctile svg{width:26px;height:26px}
.dctile.on{background:#5865F2;border-color:#5865F2;color:#fff}
.dctile.off{background:var(--s2);border-color:var(--line2);color:var(--dim)}
.pill.off{color:var(--dim);border-color:var(--line2)}
.pill.ok i{width:7px;height:7px;border-radius:50%;background:var(--win);flex:none}

/* ── Kontozeilen ───────────────────────────────────────────────── */
.krows{list-style:none;margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:13px;font-size:14px}
.krows li{display:flex;align-items:center;gap:12px;color:var(--dim)}
/* Nur die Beschriftung (direktes Kind) — nicht ein span im Wert wie die
   Flagge, die sonst 132px breit wuerde und den Laendernamen wegschob. */
.krows li > span:first-child{flex:none;min-width:132px}
.krows li b{color:var(--white);font-weight:600;flex:1;min-width:0;word-break:break-word}
.krows li b.fehlt,.krows li b .fehlt{color:var(--dim);font-weight:400;font-style:italic}
/* Die Aktionen rechts (Change, Set, Connect, Disconnect) als kleine
   Rahmen-Knoepfe statt blosser Textlinks — leichter zu sehen
   (Alexander, 25.09.2026). Gleiche Sprache wie .btn-g. */
.krows .linkbtn{flex:none;display:inline-flex;align-items:center;min-height:32px;padding:0 12px;
  border:1px solid var(--line2);background:rgba(255,255,255,.03);color:var(--txt);
  font:600 11px/1 'Chakra Petch',sans-serif;letter-spacing:.12em;text-transform:uppercase;
  transition:border-color .2s,background .2s,color .2s}
.krows .linkbtn:hover{border-color:var(--white);background:rgba(255,255,255,.07);color:var(--white)}
.krows .linkbtn:disabled{border-color:var(--line);background:none;color:var(--dim);cursor:not-allowed}

.cbox.nl{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.cbox.nl em{font-style:normal;color:var(--gold)}

/* ── Formulare im Profil ───────────────────────────────────────── */
.pform{margin-top:16px;padding:16px;border:1px solid var(--line);background:var(--s2);
  display:flex;flex-direction:column;gap:14px}
.pform[hidden]{display:none}
.pakt{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px}
.pakt.end{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
/* Loeschen: rot, rechts aussen, bewusst als Textknopf statt als Flaeche. */
.pakt.end .linkbtn.rot{margin-left:auto;color:var(--red);font-size:13px}
.pakt.end .linkbtn.rot:hover{color:#fff}
.pform.rot{border-color:rgba(255,75,92,.4)}
.btn.rot{background:var(--red);color:#fff}
.btn.rot:hover{background:#D63A49}
.pform .pakt{margin-top:2px}
.pform .fgrid2{gap:14px}
/* Zeichenzaehler der Bio: rechts unter dem Feld, rot ab dem Limit. */
.f .zaehl{align-self:flex-end;font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums}
.f .zaehl.voll{color:var(--red)}
.krows li b .flag{display:inline-flex;vertical-align:middle}
/* Hinweis hinter einem Wert, den nur der Inhaber sieht. */
.krows li b .privat{font-size:11px;font-weight:400;color:var(--dim);letter-spacing:.02em;margin-left:6px}
.f input:disabled{background:rgba(255,255,255,.03);color:var(--dim);cursor:not-allowed}
.krows li b a{color:var(--white);text-decoration:none;border-bottom:1px solid var(--line2)}
.krows li b a:hover{color:var(--brand-l);border-color:var(--brand-l)}
.btn.sm,.dbtn.sm{min-height:40px;padding:0 18px;font-size:12.5px}
.dbtn.sm svg{width:18px;height:18px}
.pok{background:rgba(59,214,113,.1);border:1px solid rgba(59,214,113,.36);
  color:#8FEFB4;font-size:13px;padding:10px 13px;margin:16px 0 0}
.pok[hidden]{display:none}
.warnhint{font-size:12.5px;color:var(--gold);flex:1;min-width:160px}
.leer{color:var(--dim);font-size:14px;margin:0}

/* ── Nicht angemeldet ──────────────────────────────────────────── */
.leerzustand{margin-top:40px;max-width:640px}
.leerzustand .pakt{margin-top:22px}

/* ── Rollenvorschau ────────────────────────────────────────────── */
.protopill{display:inline-block;margin-left:10px;padding:4px 8px;
  border:1px solid rgba(253,197,0,.4);background:rgba(253,197,0,.1);color:var(--gold);
  font:600 9.5px/1 'Chakra Petch',sans-serif;letter-spacing:.14em;text-transform:uppercase;
  vertical-align:middle}

@media (max-width:760px){
  .krows li{flex-wrap:wrap}
  .krows li > span:first-child{min-width:100%}
}

/* ═══════════════════════════════════════════════════════════════
   DASHBOARD — ÜBERSICHT LINKS, EIN BEREICH RECHTS

   Vorher war das eine sehr lange Seite mit einer Sprungliste daneben.
   Bei sieben Bereichen ging das noch; jeder weitere hätte sie länger
   gemacht, ohne dass irgendwo ablesbar gewesen wäre, was es überhaupt
   alles gibt. Jetzt trägt die Übersicht die Gliederung, und rechts
   steht immer genau ein Bereich.
   ═══════════════════════════════════════════════════════════════ */
/* Nur ab Tablet zweispaltig. Ohne die Abfrage haette diese Zeile die
   Einspalter-Regel weiter oben ueberschrieben - sie steht spaeter in
   der Datei und gewinnt bei gleicher Spezifitaet. Auf dem Handy
   blieb dann eine leere 236px-Spalte stehen, weil die Navigation
   dort waagrecht laeuft. */
@media (min-width:901px){ .adm{grid-template-columns:236px minmax(0,1fr)} }
.adm section[hidden]{display:none}
.adm section[data-locked="1"]{display:none}

.dnav{border:1px solid var(--line);background:var(--s1);padding:10px 8px;
  position:sticky;top:104px}
.dnavg{padding:2px 0}
.dnavg[hidden]{display:none}
.dnavg + .dnavg{margin-top:8px;padding-top:12px;border-top:1px solid var(--line)}
/* 15px statt 13: Die Eintraege darunter tragen einen 2px breiten
   durchsichtigen Rand fuer die Aktiv-Markierung. Ohne den Ausgleich
   stuende jede Rubrik zwei Pixel links von ihren eigenen Eintraegen. */
.dnavl{display:block;padding:0 13px 8px 15px;font:600 9.5px/1 'Chakra Petch',sans-serif;
  letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}

.dnav a{display:flex;align-items:center;gap:10px;padding:10px 13px;font-size:13.5px;
  color:var(--dim);border-left:2px solid transparent;
  transition:color .18s,background .18s,border-color .18s}
.dnav a:hover{background:rgba(255,255,255,.04);color:var(--white)}
.dnav a.on{color:#fff;background:rgba(157,78,221,.14);border-left-color:var(--brand)}
.dnav a:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
/* Die Zahl sagt, wie viel im Bereich liegt — leer heisst: nichts zu zaehlen */
.dnum{margin-left:auto;font-style:normal;font-size:11.5px;color:var(--dim);
  font-variant-numeric:tabular-nums}
.dnav a.on .dnum{color:var(--brand-l)}

@media (max-width:900px){
  .dnav{position:static;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding:6px}
  .dnav::-webkit-scrollbar{display:none}
  .dnavg{display:flex;gap:4px;padding:0;margin:0;border:0}
  .dnavg + .dnavg{margin:0;padding:0;border:0}
  .dnavl{display:none}
  .dnav a{white-space:nowrap;border-left:0;border-bottom:2px solid transparent}
  .dnav a.on{border-left-color:transparent;border-bottom-color:var(--brand);background:none}
}

/* ── Rollenliste ────────────────────────────────────────────────
   Die Reihenfolge IST die Rangfolge, deshalb steht die Nummer davor
   und nicht irgendwo am Rand. */
.rrow{display:grid;
  grid-template-columns:22px 26px minmax(150px,1.2fr) minmax(0,1.4fr) 88px auto;
  align-items:center;gap:6px 12px;padding:10px 0;border-bottom:1px solid var(--line);
  cursor:pointer;transition:background .18s,box-shadow .18s}
.rrow:last-child{border-bottom:0}
.rrow:hover{background:rgba(255,255,255,.03)}
.rrow.on{background:rgba(157,78,221,.10)}
.rrow.drag{opacity:.35;cursor:grabbing}
.rrow.over{box-shadow:inset 0 2px 0 var(--brand)}

.rgrip{display:grid;place-items:center;color:#41414C;cursor:grab;transition:color .18s}
.rgrip svg{width:16px;height:16px}
.rrow:hover .rgrip{color:var(--dim)}
.rrank{text-align:right;font:700 12px/1 'Chakra Petch',sans-serif;color:#5C5C68;
  font-variant-numeric:tabular-nums}
/* Der Name ist ein Tag, und der Tag ist der Knopf. Ein Knopf IN der
   Zeile und nicht die Zeile selbst: In der Zeile stecken weitere
   Knoepfe, und ein Knopf im Knopf waere ungueltiges Markup — mit der
   Tastatur waere die Rolle dann gar nicht erreichbar. */
.ropen{display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  width:100%;min-width:0;padding:0;border:0;background:none;text-align:left;
  cursor:pointer;font:inherit;color:inherit}
.ropen small{font-size:11.5px;color:var(--dim)}
.ropen:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.rrow:hover .ropen .tier{filter:brightness(1.18)}
.rtags{display:flex;flex-wrap:wrap;gap:5px}
.rcnt{text-align:right;font-size:12px;color:var(--dim);white-space:nowrap}
.ract{display:flex;gap:5px;justify-content:flex-end}
.ibtn[disabled]{opacity:.3;cursor:not-allowed}
.ibtn[disabled]:hover{color:var(--dim);border-color:var(--line);background:none}

@media (max-width:1100px){
  .rrow{grid-template-columns:22px 26px minmax(0,1fr) auto;
        grid-template-areas:"g n nm a" "x x t t"}
  .rgrip{grid-area:g} .rrank{grid-area:n} .ropen{grid-area:nm} .ract{grid-area:a}
  .rtags{grid-area:t}
  .rcnt{display:none}
}

/* ── Rechteschalter ─────────────────────────────────────────────
   Ein Schalter statt eines Hakens: Rechte sind an oder aus, und das
   soll man aus drei Metern Entfernung sehen. */
.rperm{display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));gap:10px}
.rsw{display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px 13px;
  align-items:center;padding:13px 15px;border:1px solid var(--line);
  background:var(--black);cursor:pointer;transition:border-color .18s,background .18s}
.rsw:hover{border-color:var(--line2);background:var(--s1)}
/* Das echte Feld traegt den Zustand, der Kasten daneben zeigt ihn.
   position:absolute, damit die Regel fuer .f input es nicht auf
   volle Breite und 46px Hoehe zieht. */
/* Der Schalter muss der Bezug sein (05.10.2026): Sonst haengt das
   unsichtbare Feld am Dokument, scrollt nicht mit dem Formular mit,
   macht das Dokument hoeher als das Fenster, und beim Anklicken springt
   die ganze Seite nach unten, ohne dass man zurueckscrollen kann. */
.rperm label,.rgrants label{position:relative}
.rperm input,.rgrants input{position:absolute;width:1px;height:1px;min-height:0;
  padding:0;margin:0;opacity:0;pointer-events:none}
.rswb{grid-row:1/3;position:relative;width:38px;height:22px;flex:none;
  border:1px solid var(--line2);background:var(--s2);
  transition:background .18s,border-color .18s}
.rswb::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;
  background:var(--dim);transition:transform .2s var(--e),background .18s}
.rsw input:checked + .rswb{background:rgba(157,78,221,.28);border-color:var(--brand)}
.rsw input:checked + .rswb::after{transform:translateX(16px);background:var(--brand-l)}
.rsw input:focus-visible + .rswb{outline:2px solid var(--brand);outline-offset:2px}
.rsw b{font:600 12.5px/1.2 'Chakra Petch',sans-serif;letter-spacing:.04em;
  text-transform:uppercase;color:var(--white)}
.rsw small{font-size:11.5px;line-height:1.45;color:var(--dim)}

/* ── Vergaberechte ───────────────────────────────────────────── */
.rgrants{display:flex;flex-wrap:wrap;gap:8px}
.rgchip{display:inline-flex;align-items:center;gap:8px;padding:9px 13px;
  border:1px solid var(--line);background:var(--black);font-size:13px;color:var(--dim);
  cursor:pointer;transition:color .18s,border-color .18s,background .18s}
.rgchip:hover{border-color:var(--line2);color:var(--white)}
.rgchip:has(input:checked){border-color:var(--brand);background:rgba(157,78,221,.14);color:#fff}
.rgchip:has(input:focus-visible){outline:2px solid var(--brand);outline-offset:2px}
.rgchip .dotc{width:10px;height:10px;flex:none;background:var(--sw)}

/* ── Rollenfarbe ────────────────────────────────────────────────
   Rueckfall, falls eine Rolle keinen gueltigen Farbsatz traegt. Sie
   bleibt lesbar statt farblos — rolleFarbe() sorgt dafuer, dass das
   praktisch nie eintritt, aber ein Tag ohne Farbe waere unsichtbar. */
.tier.role{color:var(--txt);border-color:var(--line2)}

/* Auf der Profilseite steht der Tag jetzt selbst im Knopf. Der Knopf
   tritt zurueck, sonst staende ein Chip in einem Chip. */

/* ═══════════════════════════════════════════════════════════════
   DAS DASHBOARD ALS APP

   Es steckte in der Hülle der Website: Marketing-Kopf, Hero, Inhalt,
   Footer. Auf einem hochkant stehenden Bildschirm stand der Inhalt
   damit oben in einem Drittel und darunter zwei Drittel Schwarz —
   ausgerechnet die Fläche, auf der man arbeiten will.

   Jetzt füllt es das Fenster: Kopfleiste fest, darunter zwei Spalten
   über die volle Resthöhe, jede mit eigenem Lauf. Die Seite selbst
   scrollt nicht mehr, nur die Spalten. So bleiben Übersicht und
   Bereichskopf stehen, wo man sie sucht, statt nach oben wegzurutschen.

   Die Hülle greift erst ab Tablet: Auf dem Handy ist 100vh mit
   eingeblendeter Tastatur unzuverlässig — dort bleibt das normale
   Seitenverhalten, und die Übersicht läuft weiter waagrecht.
   ═══════════════════════════════════════════════════════════════ */

/* Beides ist Beiwerk einer Website, nicht eines Arbeitsgeräts. */
body.dashapp .util,
body.dashapp > footer{display:none}

@media (min-width:901px){
  body.dashapp{height:100vh;overflow:hidden;display:flex;flex-direction:column}

  /* Kein sticky mehr: Wenn die Seite nicht scrollt, gibt es nichts,
     woran der Kopf kleben müsste. */
  body.dashapp > header{flex:none;position:static}
  body.dashapp .bar{height:66px}

  body.dashapp > main{flex:1;min-height:0;width:100%;max-width:none;
    margin:0;padding:0;display:flex}
  body.dashapp .adm{flex:1;min-height:0;height:100%;margin:0;gap:0;
    grid-template-columns:264px minmax(0,1fr)}

  body.dashapp .dnav{position:static;top:auto;height:100%;overflow-y:auto;
    border:0;border-right:1px solid var(--line);
    padding:18px 10px;display:flex;flex-direction:column}

  body.dashapp .dcontent{height:100%;overflow-y:auto;
    /* Ohne contain nimmt am Ende der Liste die Seite darunter den
       Schwung auf — hier gibt es keine, also darf nichts durchrutschen. */
    overscroll-behavior:contain;
    padding:0 clamp(24px,3vw,44px) 76px}

  /* Abschnittsköpfe dürfen hier kleiner atmen als auf der Website:
     64px Vorlauf sind eine Geste für Besucher, nicht für jemanden,
     der acht Bereiche am Tag durchgeht. */
  body.dashapp .sh{padding:34px 0 18px}
  body.dashapp .adm section{padding-top:26px}
  body.dashapp .adm section > .sh:first-child{padding-top:0}

  /* Der Bereichskopf bleibt stehen: Er sagt, wo man ist, und das ist
     nach 400px Formular noch dieselbe Frage. */
  body.dashapp .dhead{position:sticky;top:0;z-index:5;background:var(--black);
    padding:24px 0 16px;border-bottom:1px solid var(--line)}
  /* Damit scrollIntoView nicht unter dem stehenden Kopf landet. */
  body.dashapp .dcontent form,
  body.dashapp .dcontent .sh{scroll-margin-top:104px}
}

/* ── Kopf der Inhaltsspalte ───────────────────────────────────── */
.dhead h1{font-size:clamp(1.55rem,2.3vw,2rem);color:var(--white);
  text-transform:uppercase;letter-spacing:.01em}
.dhead p{margin:8px 0 0;font-size:13.5px;line-height:1.55;color:var(--dim);max-width:72ch}
.dhead p:empty{display:none}

/* Auf breiten Querformat-Schirmen zieht sich ein Formular sonst ueber
   die ganze Breite — ein Eingabefeld von 700px liest sich schlechter,
   nicht besser. Der Inhalt bleibt links stehen, wie bei jedem
   Dashboard dieser Art; die Hoehe bleibt davon unberuehrt, und genau
   die war knapp. Auf dem Hochformat greift die Grenze gar nicht. */
@media (min-width:901px){
  body.dashapp .adm section{max-width:1280px}
  /* Der stehende Kopf geht ueber die volle Breite (Alexander, 04.10.2026):
     Breitere Bereiche wie Teams (1560px) schauten sonst rechts unter dem
     schmaleren Kopf hervor. */
  body.dashapp .dhead{max-width:none}
}

/* Die Kopfleiste steckte noch im zentrierten Seitencontainer der
   Website (max-width 1400, mittig). Die Uebersicht darunter beginnt
   aber am linken Rand — das Logo stand dadurch eingerueckt ueber einer
   buendigen Spalte und sah aus wie verrutscht.

   25px sind kein Zufallswert: .dnav polstert 10px, ihre Eintraege
   noch einmal 13px, dazu 2px fuer den Rand der Aktiv-Markierung. Das
   Logo steht damit exakt ueber "Your access" statt irgendwo daneben. */
@media (min-width:901px){
  body.dashapp > header > .bar{max-width:none;margin-inline:0;
    padding-left:25px;padding-right:clamp(16px,2vw,30px)}
}

/* ── Kopfleiste des Dashboards ─────────────────────────────────── */
.dbrand{display:flex;align-items:center;gap:14px;margin-right:auto;flex:none}
.dbrand .logo{margin-right:0;gap:0}
/* 58px sind die Groesse einer Startseite. Hier steht die Marke nur
   dafuer, dass man weiss, wessen Werkzeug man bedient. */
.dbrand .logo img{width:36px;height:36px}
.dbname{font:700 15px/1 'Chakra Petch',sans-serif;letter-spacing:.14em;
  text-transform:uppercase;color:var(--white);white-space:nowrap;
  padding-left:14px;border-left:1px solid var(--line2)}
/* Telefon: Der Schriftzug "Dashboard" kostete 120 px, die der
   Kopfleiste fehlten (Sprachtest 01.10.2026). Darunter steht ohnehin
   der Titel des Bereichs. Zwei Bereichskarten der Uebersicht duerfen
   nicht breiter sein als die Spalte. */
@media (max-width:460px){
  .dbname{display:none}
  .dbrand{gap:0}
}
@media (max-width:900px){
  .dcontent .card,.dcontent [class*="grid"],.ovcols>*{min-width:0}
}

/* ═══════════════════════════════════════════════════════════════
   OVERVIEW — der Landeplatz
   ═══════════════════════════════════════════════════════════════ */
/* Die Trennlinien zeichnen die Kacheln selbst, nicht der Kasten
   darunter.

   Vorher lag die Linienfarbe als Hintergrund im Grid und die 1px-Fuge
   war dieser Hintergrund, der durchscheint. Das funktioniert nur,
   solange die Kacheln jede Zeile fuellen — bei acht Kacheln in sechs
   Spalten blieben vier Zellen leer und standen als grauer Block da.
   Die Zahl der Kacheln haengt aber an den Rechten der Person, ist also
   nicht vorhersehbar.

   Der Kasten zeichnet deshalb nur oben und links, jede Kachel rechts
   und unten. Das ergibt ein sauberes Raster ohne doppelte Kanten - und
   eine leere Zelle bleibt einfach leer. */
.ovgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));
  background:var(--s1);border:1px solid var(--line);border-width:1px 0 0 1px;
  margin-top:26px}
/* Kacheln sind Knoepfe. Eine Kennzahl, die nur dasteht, laesst einen
   anschliessend im Menue suchen, wo das Ding denn wohnt. */
/* Groesser als eine blosse Zahl: Oben die Bezeichnung mit der
   Veraenderung, in der Mitte der Wert, unten der Zusatz mit der
   Verlaufslinie. Drei Zeilen, weil drei Fragen dranhaengen — was,
   wie viel, wohin. */
.ovtile{display:grid;grid-template-rows:auto 1fr auto;gap:12px;
  min-height:132px;padding:18px 20px 16px;background:var(--s1);
  text-align:left;cursor:pointer;
  border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  font:inherit;color:inherit;transition:background .18s}
.ovkopf{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ovfuss{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.ovtile:hover{background:var(--s2)}
.ovtile:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.ovn{align-self:center;font:700 2.35rem/1 'Chakra Petch',sans-serif;
  color:var(--white);font-variant-numeric:tabular-nums}
.ovl{font:600 10.5px/1 'Chakra Petch',sans-serif;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim)}
.ovs{font-size:12px;color:#5C5C68}
.ovs:empty{display:none}

/* Was wartet: Jede Zeile traegt den Weg dorthin gleich mit. */
.todo li .ovjump{margin-left:auto;flex:none;padding:7px 13px;
  border:1px solid var(--line2);background:none;cursor:pointer;
  font:700 9.5px/1 'Chakra Petch',sans-serif;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);
  transition:color .18s,border-color .18s,background .18s}
.todo li .ovjump:hover{color:var(--white);border-color:var(--white);
  background:rgba(255,255,255,.06)}
.todo li .ovjump:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.ovmore{margin:14px 0 0;font-size:12.5px;color:#5C5C68}

/* Anstehende Begegnungen, knapp: Datum, Gegner, Wettbewerb. */
.ovfx{display:grid;grid-template-columns:150px minmax(0,1fr) minmax(0,1fr);
  align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--line)}
.ovfx:last-child{border-bottom:0}
.ovwhen{font:600 12.5px/1 'Chakra Petch',sans-serif;letter-spacing:.05em;
  text-transform:uppercase;color:var(--white);font-variant-numeric:tabular-nums}
.ovvs{display:flex;align-items:center;gap:10px;min-width:0}
.ovvs em{font-style:normal;font-size:10.5px;letter-spacing:.12em;color:var(--dim)}
.ovvs b{font:600 12.5px/1 'Chakra Petch',sans-serif;letter-spacing:.05em;
  color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ovev{font-size:12px;color:var(--dim);text-align:right;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:820px){
  .ovfx{grid-template-columns:1fr;gap:7px}
  .ovev{text-align:left}
}

/* ── Bereiche, die es noch nicht gibt ───────────────────────────
   Ein Menuepunkt ins Leere ist schlimmer als keiner: Man klickt ihn
   einmal, findet nichts, und traut der Uebersicht danach nicht mehr. */
.bald .baldm{display:inline-block;margin-bottom:18px;padding:6px 11px;
  border:1px dashed var(--line2);font:700 9.5px/1 'Chakra Petch',sans-serif;
  letter-spacing:.14em;text-transform:uppercase;color:var(--silver)}
.bald ul{margin:0;padding:0;list-style:none;display:grid;gap:14px}
.bald li{padding-left:18px;position:relative;font-size:14px;line-height:1.6;color:var(--dim)}
.bald li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;
  background:var(--brand)}
.bald li b{color:var(--white);font-weight:600}
.bald p{margin:22px 0 0;padding-top:18px;border-top:1px solid var(--line);
  font-size:13px;line-height:1.6;color:#5C5C68}

/* Der Landeplatz traegt keine eigene Ueberschrift ueber den Kacheln —
   der Bereichskopf darueber sagt sie schon. */
.dnavtop{font-weight:500}

/* Ein leeres Kaestchen neben einer Warnung las sich wie ein Haken, den
   man setzen kann. Man kann ihn nicht — die Zeile verschwindet, wenn
   die Sache erledigt ist, und nicht wenn man sie ankreuzt. */
.mark.alert{border-color:rgba(253,197,0,.5);background:rgba(253,197,0,.1);
  color:var(--gold);font:700 12px/1 'Chakra Petch',sans-serif}

/* Ergebnisse auf dem Overview: dieselbe Zeile wie die Ansetzungen,
   nur mit Punktzahl in der Mitte. */
.ovsc{display:inline-flex;align-items:center;gap:5px;flex:none;
  font-variant-numeric:tabular-nums}
.ovsc i{font-style:normal;font:700 13px/1 'Chakra Petch',sans-serif;color:var(--txt)}
.ovsc i.win{color:var(--win)}
.ovsc i.lose{color:var(--red)}
.ovsc u{text-decoration:none;color:#5C5C68}

/* ═══════════════════════════════════════════════════════════════
   OVERVIEW — zweispaltig, wo es passt
   ═══════════════════════════════════════════════════════════════ */
.ovcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr));
  gap:0 28px;align-items:start}

/* Teams je Spiel. Der Balken ist relativ zum groessten Spiel, nicht
   absolut: Die Frage ist "wo liegt der Schwerpunkt", nicht "wie viele
   Teams passen in die Zeile". */
.ovgame{display:grid;grid-template-columns:minmax(0,1fr) 90px 62px;
  align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}
.ovgame:last-child{border-bottom:0}
.ovgm{display:flex;align-items:center;gap:10px;min-width:0}
.ovgm b{font:600 12.5px/1.2 'Chakra Petch',sans-serif;letter-spacing:.04em;
  text-transform:uppercase;color:var(--white);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ovbar{height:6px;background:var(--s3);display:block}
.ovbar i{display:block;height:100%;background:var(--brand)}
.ovgn{text-align:right;font:700 15px/1 'Chakra Petch',sans-serif;color:var(--white);
  font-variant-numeric:tabular-nums}
.ovgn small{display:block;margin-top:4px;font:400 11px/1 Barlow,sans-serif;color:#5C5C68}

/* ── Protokollzeile ─────────────────────────────────────────────
   Wer, was, wann — in dieser Reihenfolge, weil so gefragt wird. */
.lgrow{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr) auto;
  align-items:start;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.lgrow:last-child{border-bottom:0}
.lgwho{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
.lgwho b{font:600 12px/1 'Chakra Petch',sans-serif;letter-spacing:.06em;
  text-transform:uppercase;color:var(--dim)}
.lgwhat{font-size:13.5px;line-height:1.5;color:var(--dim);min-width:0}
.lgwhat b{color:var(--white);font-weight:600}
.lgwhat small{display:block;margin-top:3px;font-size:12px;color:#5C5C68}
.lgwhen{font-size:12px;color:#5C5C68;white-space:nowrap;
  font-variant-numeric:tabular-nums;padding-top:2px}
@media (max-width:820px){
  .lgrow{grid-template-columns:minmax(0,1fr) auto;gap:8px 14px}
  .lgwho{flex-direction:row;align-items:center;grid-column:1/-1}
}

/* ═══════════════════════════════════════════════════════════════
   AUFGABEN UND TICKETS — eine Zeilenform fuer beide
   ═══════════════════════════════════════════════════════════════ */
.wkrow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:start;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);
  transition:background .18s}
.wkrow:last-child{border-bottom:0}
.wkrow.on{background:rgba(157,78,221,.10)}

/* Prioritaet als Strich, nicht als Wort: Drei Stufen liest man an der
   Farbe schneller als an "Normal". */
.wkprio{width:4px;align-self:stretch;min-height:34px;background:var(--line2)}
.wkprio.high{background:var(--red)}
.wkprio.normal{background:var(--brand)}
.wkprio.low{background:var(--s3)}

.wkkanal{padding:5px 9px;border:1px solid var(--line);flex:none;
  font:700 9px/1 'Chakra Petch',sans-serif;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim);white-space:nowrap}

.wkmain{min-width:0}
.wkmain b{display:block;font-size:14.5px;font-weight:600;color:var(--white);line-height:1.4}
.wkmain small{display:block;margin-top:5px;font-size:13px;line-height:1.55;color:var(--dim)}
.wkmeta{display:block;margin-top:7px;font-size:12px;color:#5C5C68}
.wkmeta b{display:inline;font-size:12px;color:var(--txt);font-weight:600}
.wkmeta i{font-style:normal;color:#5C5C68}

.wkact{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.ibtn.wide{width:auto;padding:0 12px;font:700 9.5px/1 'Chakra Petch',sans-serif;
  letter-spacing:.12em;text-transform:uppercase}
.wksel{min-height:32px;padding:6px 9px;background:var(--black);border:1px solid var(--line);
  color:var(--txt);font:400 12.5px/1 Barlow,sans-serif;cursor:pointer;
  max-width:170px;transition:border-color .18s}
.wksel:hover{border-color:var(--line2)}
.wksel:focus{outline:none;border-color:var(--brand)}

@media (max-width:820px){
  .wkrow{grid-template-columns:auto minmax(0,1fr)}
  .wkact{grid-column:1/-1;justify-content:flex-start}
}

/* ── Veraenderung und Verlauf ───────────────────────────────────
   Die Marke sagt die Richtung, die Linie den Weg dorthin. Beide
   bleiben weg, wo es keine Vergangenheit gibt — eine Kurve aus
   Zufallszahlen sieht aus wie eine echte, und der Unterschied faellt
   erst auf, wenn eine Entscheidung darauf steht. */
.ovtr{flex:none;padding:3px 7px;border:1px solid transparent;
  font:700 10px/1.3 'Chakra Petch',sans-serif;letter-spacing:.06em;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.ovtr.gut{color:var(--win);border-color:rgba(59,214,113,.35);background:rgba(59,214,113,.1)}
.ovtr.schlecht{color:var(--red);border-color:rgba(255,75,92,.35);background:rgba(255,75,92,.1)}
.ovtr.flach{color:#5C5C68;border-color:var(--line)}
.ovtr.wartet{color:#4A4A55;border-style:dashed;border-color:var(--line);
  text-transform:uppercase;letter-spacing:.1em;cursor:help}

.fnk{width:84px;height:26px;flex:none;overflow:visible}
.fnk polyline{fill:none;stroke:var(--win);stroke-width:1.6;
  stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.fnk.ab polyline{stroke:var(--red)}
.fnk.flach polyline{stroke:#4A4A55}
/* Auf schmalen Kacheln tritt die Linie zurueck, damit der Zusatztext
   nicht abgeschnitten wird. */
@media (max-width:520px){ .fnk{display:none} }

/* ── Wer traegt die Rolle ───────────────────────────────────────
   Die Zahl war eine Sackgasse: Man las "3 members" und musste
   anschliessend in der Mitgliederliste suchen, wer die drei sind. */
.rcntb{padding:0;border:0;background:none;cursor:pointer;font:inherit;
  font-size:12px;color:var(--dim);border-bottom:1px dotted var(--line2);
  transition:color .18s,border-color .18s}
.rcntb:hover{color:var(--white);border-bottom-color:var(--white)}
.rcntb:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.rcntb[aria-expanded="true"]{color:var(--brand-l);border-bottom-color:var(--brand-l)}

.rwho{display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  margin:0 0 4px 60px;padding:12px 14px;background:var(--s2);
  border-left:2px solid var(--brand)}
.rwhoi{display:flex;flex-direction:column;gap:3px;padding-right:16px}
.rwhoi b{font:600 12px/1 'Chakra Petch',sans-serif;letter-spacing:.06em;
  text-transform:uppercase;color:var(--white)}
.rwhoi small{font-size:11.5px;color:var(--dim)}
/* Der Satz steht am Ende und nicht oben: Erst sehen, wen es betrifft,
   dann lesen, was das bedeutet. */
.rwhon{flex:1 1 100%;padding-top:10px;margin-top:4px;
  border-top:1px solid var(--line);font-size:12px;color:#5C5C68}

/* ── Rechte nebeneinander ───────────────────────────────────────
   Breit von Natur aus. Statt Spalten zu opfern laeuft die Tabelle
   waagrecht - eine gekuerzte Rechtetabelle waere wertlos. */
.mtxwrap{overflow-x:auto;scrollbar-width:thin}
.mtx{width:100%;border-collapse:collapse;font-size:13px;min-width:720px}
.mtx th{padding:0 12px 12px 0;text-align:left;white-space:nowrap;
  font:600 9.5px/1.3 'Chakra Petch',sans-serif;letter-spacing:.12em;
  text-transform:uppercase;color:#5C5C68;border-bottom:1px solid var(--line)}
.mtx th:first-child{min-width:190px}
.mtx td{padding:11px 12px 11px 0;border-bottom:1px solid var(--line);
  vertical-align:middle;white-space:nowrap}
.mtx tr:last-child td{border-bottom:0}
.mtx tbody tr{transition:background .18s}
.mtx tbody tr:hover{background:rgba(255,255,255,.03)}
.mtx i{font-style:normal}
.mja{color:var(--win);font-size:14px}
.mnein{color:#3A3A44}
.mwort{font:600 11px/1 'Chakra Petch',sans-serif;letter-spacing:.08em;
  text-transform:uppercase;color:var(--txt)}

/* ═══════════════════════════════════════════════════════════════
   MEMBERS
   ═══════════════════════════════════════════════════════════════ */

/* Zwei Wege hinein, die sich ausschliessen. Als Reiter und nicht
   untereinander: Zwei Formulare gleichzeitig sichtbar laden dazu ein,
   das falsche auszufuellen. */
.mtabs{display:flex;gap:2px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.mtab{padding:11px 16px;border:0;border-bottom:2px solid transparent;background:none;
  cursor:pointer;font:600 12px/1 'Chakra Petch',sans-serif;letter-spacing:.06em;
  text-transform:uppercase;color:var(--dim);transition:color .18s,border-color .18s}
.mtab:hover{color:var(--white)}
.mtab.on{color:#fff;border-bottom-color:var(--brand)}
.mtab:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.mtab[hidden]{display:none}
.mpane[hidden]{display:none}

/* ── Suchen und filtern ─────────────────────────────────────── */
.mfilter{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.mfilter input[type=search]{flex:1 1 240px;min-height:42px;padding:10px 13px;
  background:var(--black);border:1px solid var(--line);color:var(--txt);
  font:400 14px/1.4 Barlow,sans-serif;transition:border-color .18s}
.mfilter input[type=search]:focus{outline:none;border-color:var(--brand)}
.mfilter input::placeholder{color:#5C5C68}
.mfilter select{min-height:42px;padding:10px 12px;background:var(--black);
  border:1px solid var(--line);color:var(--txt);font:400 13.5px/1 Barlow,sans-serif;
  cursor:pointer;transition:border-color .18s}
.mfilter select:hover{border-color:var(--line2)}
.mfilter select:focus{outline:none;border-color:var(--brand)}
.mfclear{padding:0 14px;min-height:42px;background:none;border:1px solid var(--line2);
  cursor:pointer;font:700 9.5px/1 'Chakra Petch',sans-serif;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);transition:color .18s,border-color .18s}
.mfclear:hover{color:var(--white);border-color:var(--white)}
.lnkb{background:none;border:0;padding:0;cursor:pointer;font:inherit;
  color:var(--brand-l);text-decoration:underline}

/* ── Zeile oeffnet die Person ───────────────────────────────── */
/* Die Zeilen der Mitgliederliste heissen wie die alten Kaderzeilen
   (.mrow, Raster). Hier bleiben sie Tabellenzeilen (30.09.2026). */
.mtbl tbody tr.mrow{display:table-row;cursor:pointer;padding:0;border-top:0}
.mtbl tbody tr.mrow.on{background:rgba(157,78,221,.10)}

/* ── Die aufgeschlagene Person ──────────────────────────────── */
.mdet{border-color:var(--line2)}
.mdtop{display:flex;align-items:flex-start;gap:18px;flex-wrap:wrap;
  padding-bottom:20px;border-bottom:1px solid var(--line)}
.mdname{font:700 1.5rem/1 'Chakra Petch',sans-serif;letter-spacing:.02em;
  text-transform:uppercase;color:var(--white)}
.mdsub{margin-top:7px;font-size:12px;color:#5C5C68}
.mdtags{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto}
.mdtop .ibtn{flex:none}

.mdgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:0 28px;padding:6px 0}
.mdrow{display:flex;align-items:baseline;gap:12px;padding:11px 0;
  border-bottom:1px solid var(--line)}
.mdrow span{flex:none;min-width:88px;font:600 9.5px/1.4 'Chakra Petch',sans-serif;
  letter-spacing:.14em;text-transform:uppercase;color:#5C5C68}
.mdrow b{font-weight:500;font-size:13.5px;color:var(--txt)}
.mdrow i{font-style:normal;color:#5C5C68}

.mdcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:24px 28px;margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.mdlist{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:9px}
.mdlist li{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--dim)}
.mdlist li b{flex:1;min-width:0;font-weight:500;color:var(--txt);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mdwhen{flex:none;font-size:11.5px;color:#5C5C68}
.mdleer{margin:12px 0 0;font-size:13px;color:#5C5C68}

/* ═══════════════════════════════════════════════════════════════
   ANMELDESEITE — Neufassung 21.09.2026 (2. Ueberarbeitung)

   Die erste Fassung setzte den Brief konzeptionell richtig um,
   scheiterte aber an vier Stellen im Betrieb:

   1. Zwei gesaettigte Farbbloecke standen gleichzeitig auf dem
      Schirm, sobald das E-Mail-Formular aufklappte — Blurple
      #5865F2 und Violett #7840E0, 26 Grad Farbtonabstand. Genau
      der Konflikt, den der Brief verbietet.
   2. Die Felder standen auf 0 px Abstand zum Text darueber. Das
      liest sich als Kollision, nicht als Formular.
   3. Die Kennzahlen im Bildteil waren vollstaendig gestylt, aber
      nie befuellt — eine leere Flaeche von 754x86 px.
   4. Drei formgleiche Knoepfe, aber zentrierte Beschriftungen in
      drei verschiedenen Schriften. Google fiel heraus.

   Die Loesungen:

   FARBE  Discord im "Flexible"-Stil in Telacy-Violett. Discords
          Richtlinie erlaubt das ausdruecklich, solange das Logo
          unveraendert bleibt. Der Konflikt verschwindet, und
          Weiss auf #7840E0 ergibt 5,82:1 statt 4,61:1 auf
          Blurple — die Marke ist hier auch das barrierefreiere
          Ergebnis. Der Formularknopf wird WEISS: eindeutig
          primaer, aber kein zweiter gesaettigter Farbton.

   RASTER Alle drei Knoepfe teilen eine Spaltenachse: Icon in
          einer festen 20px-Spalte, Beschriftung linksbuendig
          dahinter. Eine Blickfangkante statt drei. Dass Google
          eine andere Schrift vorschreibt, faellt damit nicht
          mehr auf — die Kante traegt die Ordnung, nicht die
          Schrift.

   TAKT   Ein Abstandsraster: 8 / 14 / 18 / 30 / 40.

   BILD   squad-1400.webp war eine fertige "THANK YOU"-Grafik mit
          eigener Headline, Logos und Spielernamen. Als Hinter-
          grund angeschnitten ergab das "ANK Y" und halbierte
          Namen. Ersetzt durch auth-field.webp — ein Ausschnitt
          aus telacy_esports_partnership_deck_background.png
          (Branding Material / 03 Social Grafiken). Reiner
          Tiefenraum: kein Logo, keine Schrift, also auch kein
          Ausschnitt, der etwas zerschneiden koennte. 23 statt
          113 KB.
   ═══════════════════════════════════════════════════════════════ */

body.authbody{min-height:100vh;display:block;background:var(--black)}

.authseite{min-height:100vh;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.04fr)}

/* ── Linke Spalte ──────────────────────────────────────────────
   Zurueck-Verweis, Inhalt und Fuss teilen sich EINE linke Kante.
   Vorher sassen sie an der Polsterkante der Spalte, der Inhalt
   aber in einer 400px-Spur daneben — drei verschiedene Kanten
   auf einem Bildschirm, der von Ruhe lebt. */
.authseite .spalte{position:relative;display:flex;
  padding:clamp(24px,4vw,60px);background:var(--s1);
  border-right:1px solid var(--line)}
.authseite .innen{width:100%;max-width:424px;margin-inline:auto;
  display:grid;grid-template-rows:auto 1fr auto}
.authseite .mitte{align-self:center;padding:40px 0;width:100%}

.authzurueck{display:inline-flex;align-items:center;gap:8px;align-self:start;
  font:600 11px/1 'Chakra Petch',sans-serif;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);transition:color .18s}
.authzurueck:hover{color:var(--white)}
.authzurueck svg{width:13px;height:13px}

/* Die Marke. Genau einmal auf dem Bildschirm. */
.authmarke{display:flex;align-items:center;gap:14px;margin:0 0 40px}
.authmarke img{width:56px;height:56px;object-fit:contain}
.authmarke b{font:700 17px/1.1 'Chakra Petch',sans-serif;letter-spacing:.16em;
  text-transform:uppercase;color:var(--white)}
.authmarke b i{font-style:normal;font-weight:500;color:var(--dim);display:block;
  font-size:15px;letter-spacing:.22em;margin-top:4px}

.authseite h1{font:700 clamp(1.7rem,3vw,2.2rem)/1 'Chakra Petch',sans-serif;
  letter-spacing:.03em;text-transform:uppercase;color:#fff;margin:0}
.authseite .unter{color:var(--dim);margin:14px 0 0;font-size:14px;line-height:1.65;
  max-width:46ch;text-wrap:pretty}

.authfuss{align-self:end;display:flex;gap:18px;flex-wrap:wrap;align-items:center;
  font-size:12px;color:var(--dim)}
.authfuss a{color:var(--dim);text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.18);padding-bottom:2px;transition:.18s}
.authfuss a:hover{color:var(--white);border-bottom-color:var(--white)}

/* ── Die drei Wege hinein ──────────────────────────────────────
   Gleiche Geometrie, gleiche Spaltenachse. Die Rangfolge traegt
   allein die Fuellung. */
.wege{display:flex;flex-direction:column;gap:10px;margin:30px 0 0}
.weg{position:relative;display:grid;grid-template-columns:20px 1fr auto;
  align-items:center;gap:14px;width:100%;min-height:54px;padding:0 16px;
  border:1px solid transparent;text-align:left;cursor:pointer;
  font:600 13.5px/1 'Chakra Petch',sans-serif;letter-spacing:.1em;
  text-transform:uppercase;
  transition:background .2s,border-color .2s,color .2s}
.weg svg,.weg .g{width:20px;height:20px;flex:none}
.weg .ende{display:flex;align-items:center;gap:10px;min-height:20px}
.weg .txt{min-width:0;white-space:nowrap}

/* Der EINE gesaettigte Block. Discord im "Flexible"-Stil in
   Telacy-Violett — Discords Richtlinie erlaubt eigene Knopffarbe
   und eigene Schrift, solange das Logo unangetastet bleibt. */
.weg.discord{background:var(--brand);color:#fff}
.weg.discord:hover{background:#8A55E8}

/* Google schreibt diese Werte verbindlich vor. Die 1px-Kontur ist
   keine Zier: #131314 gegen unser #0F0F13 ergaebe 1,03:1 — ohne
   Kontur waere der Knopf schlicht unsichtbar. Polsterung und
   Abstand liegen mit 16/14 ueber Googles Mindestmass 12/10. */
.weg.google{background:#131314;border-color:#8E918F;color:#E3E3E3;
  font-family:'Google Sans','Roboto',Barlow,sans-serif;font-weight:500;
  font-size:14px;letter-spacing:0;text-transform:none}
.weg.google:hover{background:#1F1F21}

.weg.mail{background:transparent;border-color:rgba(255,255,255,.34);color:var(--txt)}
.weg.mail:hover{background:var(--s2);border-color:var(--white);color:var(--white)}
.weg.mail[aria-expanded="true"]{background:var(--s2);border-color:var(--white);color:var(--white)}
.weg.mail[aria-expanded="true"] .pfeil{transform:rotate(180deg)}
.weg .pfeil{width:14px;height:14px;color:var(--dim);transition:transform .28s var(--e)}

/* Kennzeichen sitzt IM Knopf, rechts in der dritten Spalte. Vorher
   ritt es auf der Oberkante und zerschnitt den Rahmen. */
.weg .marke{padding:4px 9px;font:600 9.5px/1 'Chakra Petch',sans-serif;
  letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.weg.discord .marke{background:rgba(255,255,255,.18);color:#fff}
.weg .marke.zuletzt{background:rgba(255,255,255,.10);color:var(--txt)}
.weg.google .marke,.weg.mail .marke{background:var(--s3);color:var(--dim)}

@media (max-width:1060px){
  .weg{font-size:12.5px;letter-spacing:.06em;gap:11px;padding:0 13px}
  .weg.google{font-size:13px}
  .weg .marke{font-size:9px;padding:3px 7px;letter-spacing:.1em}
  .weg .ende{gap:8px}
}

/* Ladezustand. aria-disabled statt disabled, damit der Fokus nicht
   aus der Reihenfolge faellt, waehrend man wartet. */
.weg[aria-busy="true"]{pointer-events:none;opacity:.72}
.weg[aria-busy="true"] .lade{width:16px;height:16px;border:2px solid currentColor;
  border-right-color:transparent;border-radius:50%;animation:wegdreh .7s linear infinite}
@keyframes wegdreh{to{transform:rotate(360deg)}}

.wegtext{font-size:12.5px;line-height:1.65;color:var(--dim);margin:18px 0 0}
.wegtext b{color:var(--txt);font-weight:600}
/* Hinweis auf Terms und Datenschutz unter den Anmeldewegen (02.10.2026) */
.zustimmung{font-size:12px;line-height:1.6;color:var(--dim);margin:14px 0 0}
.zustimmung a{color:var(--txt);text-decoration:underline;text-underline-offset:3px}
.zustimmung a:hover{color:var(--white)}

/* ── E-Mail-Bereich ────────────────────────────────────────────
   Haengt unmittelbar unter der Knopfgruppe, nicht hinter dem
   Erklaertext — der Bereich gehoert sichtbar zu dem Knopf, der
   ihn geoeffnet hat. Der Erklaertext weicht solange. */
#mail-bereich{margin:18px 0 0}
#mail-bereich[hidden]{display:none}
#mail-bereich .panelkopf{margin:0 0 4px;font:600 14px/1.3 'Chakra Petch',sans-serif;
  letter-spacing:.08em;text-transform:uppercase;color:#fff}
#mail-bereich .panelunter{margin:0 0 18px;font-size:13px;line-height:1.6;color:var(--dim)}

.authseite form{display:grid;gap:14px}
.authseite .f{display:flex;flex-direction:column;gap:8px}

/* 16px, weil iOS Safari bei allem darunter beim Antippen
   hineinzoomt und die Seite springt. Rahmen auf .34, weil
   WCAG 1.4.11 fuer Bedienelementgrenzen 3:1 verlangt — die
   globalen .10 ergeben 1,24:1. */
.authseite .f input{font-size:16px;min-height:48px;
  border-color:rgba(255,255,255,.34);background:var(--black)}
.authseite .f input:focus{border-color:var(--brand-l);background:var(--black)}
/* Der globale Platzhalter #5C5C68 ergibt auf #0D0D10 nur 3,04:1.
   WCAG verlangt fuer Text 4,5:1 — Platzhalter sind Text. #7C7C8A
   liegt bei 4,79:1 und bleibt trotzdem klar leiser als ein
   eingetippter Wert (#D8D8DF). */
.authseite .f input::placeholder{color:#7C7C8A;opacity:1}
.authseite .f label{color:var(--dim)}

/* Sichtbarer Fokusring. Global steht auf .f input:focus ein
   outline:none — hier ausdruecklich zurueckgeholt. */
.authseite a:focus-visible,.authseite button:focus-visible,
.authseite input:focus-visible{outline:2px solid var(--brand-l);outline-offset:2px}

/* Der Formularknopf ist WEISS, nicht violett: eindeutig primaer,
   aber kein zweiter gesaettigter Farbton neben Discord. */
.authseite .primaer{width:100%;min-height:50px;margin:4px 0 0;
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:#fff;color:var(--black);border:0;cursor:pointer;
  font:700 13.5px/1 'Chakra Petch',sans-serif;letter-spacing:.12em;
  text-transform:uppercase;transition:background .18s}
.authseite .primaer:hover{background:#DCDCE4}
.authseite .primaer[aria-busy="true"]{pointer-events:none;opacity:.72}

.authseite .switchline{margin:16px 0 0;font-size:12.5px}
.authseite .cbox{margin:0}
.authseite .cbox + .cbox{margin-top:10px}

/* ── Rechte Spalte: die Gameday-Diashow ────────────────────────
   Acht echte Matchday-Grafiken im Wechsel, in ORIGINALFARBEN.
   Kein Farbabgleich, kein Filter: die Vorlagen sind gegnerbezogen
   eingefaerbt, und genau das sollen sie hier auch bleiben.

   Alle acht sind so beschnitten, dass KEINE Schrift im Bild steht.
   Die Vorlagen teilen sich ein Geruest: Namensliste links oben,
   Vertikaltext rechts ("GAMEDAY // TELACY ESPORTS // Gegner //
   FACEIT MASTER DIVISION"), "MATCH LOADING//...." unten, Logos in
   den oberen Ecken. Sauber ist jeweils die Mitte — genommen wird
   (23,5% .. 87,5%) waagerecht und (7,5% .. 85,5%) senkrecht.

   vs-1234 hat als einzige ein anderes Geruest: ein geschwungenes
   "GAMEDAY"-Band laeuft quer ueber die Figur. Dort wird erst
   unterhalb des Bandes angesetzt (ab 33,5% Hoehe).

   Alle Dateien sind bereits auf dasselbe Seitenverhaeltnis (.75)
   gebracht, damit der Browser nicht ein zweites Mal beschneidet
   und dabei doch noch Text hereinholt. */
.authseite .bild{position:relative;overflow:hidden;background:var(--black)}
.authseite .dia{position:absolute;inset:0;
  background-position:50% 50%;background-size:cover;background-repeat:no-repeat;
  opacity:0;transition:opacity 2.2s cubic-bezier(.4,0,.2,1);
  animation:authdrift 44s ease-in-out infinite alternate}
.authseite .dia.an{opacity:1}
@keyframes authdrift{from{transform:scale(1.02)}to{transform:scale(1.09) translateY(-1.2%)}}


/* Linke Kante ins Formular ueberblenden, damit die Naht nicht
   als harter Schnitt steht; dazu Vignette und Violettschleier. */
.authseite .bild::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(15,15,19,.98),rgba(15,15,19,.4) 11%,transparent 30%),
    radial-gradient(125% 95% at 60% 40%,transparent 30%,color-mix(in srgb,var(--black) 42%,transparent) 88%)}

/* Die Kennzahlen im Bildteil (Players, Teams, Divisions) sind seit
   30.09.2026 entfernt (Alexander). */

/* ── Auftritt ──────────────────────────────────────────────────
   Eine gestaffelte Bewegung, nicht fuenf verschiedene. Nur mit
   JS — ohne steht alles sofort da. */
@keyframes authauf{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.js .authseite .st{opacity:0;animation:authauf .58s var(--e) forwards;
  animation-delay:calc(var(--i,0)*70ms + 60ms)}
@keyframes authein{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
#mail-bereich.auf{animation:authein .3s var(--e)}

@media (prefers-reduced-motion:reduce){
  .js .authseite .st{animation:none;opacity:1}
  /* Kein Driften und kein Wechsel — das Skript prueft dieselbe
     Einstellung und laesst die Diashow dann ganz stehen. */
  .authseite .dia{animation:none;transition:none}
  #mail-bereich.auf{animation:none}
}

/* ── Schmaler Bildschirm ───────────────────────────────────────
   Das Feld rueckt nach oben und schrumpft; die Kennzahlen bleiben
   darin, weil sie dort die Aussage tragen. */
@media (max-width:920px){
  /* Eine Zeile fuer die Zahlenleiste, der Rest fuer das Formular:
     min-height:0 liess die Spalte auf Inhaltshoehe schrumpfen und
     darunter stand eine leere schwarze Flaeche. */
  /* Eine Zeile: Der Bildbereich entfaellt auf dem Handy ganz (30.09.2026),
     die Formularspalte reicht dadurch bis zum unteren Rand. */
  .authseite{grid-template-columns:1fr;grid-template-rows:1fr}

  /* Kein Bild auf dem Handy. Auf 390px traegt es nichts bei, kostet
     aber Ladezeit und schiebt das Formular unter die Bildschirmkante.
     display:none auf der Foto-Ebene heisst ausserdem: die Datei wird
     gar nicht erst geladen — Browser holen Hintergrundbilder von
     ausgeblendeten Elementen nicht.

     Seit 30.09.2026 ohne Kennzahlen: Der Bildbereich ist auf dem Handy
     damit leer und entfaellt ganz. */
  .authseite .dia,
  .authseite .bild::after{display:none}
  .authseite .bild{display:none}


  .authseite .spalte{border-right:0}
  .authseite .innen{max-width:440px}
  .authseite .mitte{padding:32px 0}
}

/* ═══ KADER UND STAFF PFLEGEN (kader.js, 30.09.2026) ═══
   Kader-Editor in der Teamkarte und auf der Teamseite.
   Die Auswahlfelder sitzen in Tabellen statt in .f und bekaemen sonst
   den hellen Standard des Browsers. */
.kaderbox select{
  background:var(--black);border:1px solid var(--line);color:var(--txt);
  font:400 13.5px/1.4 Barlow,sans-serif;padding:7px 9px;min-width:150px;
  transition:border-color .18s,background .18s}
.kaderbox select:focus{outline:none;border-color:var(--brand)}
.kaderbox .khead b{font:700 15px/1.3 'Chakra Petch',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--white)}
.kaderbox .khead .hint{margin:6px 0 4px}
.kaderbox .kaderteil{margin-top:18px}
.kaderbox .kaderteil .sh{margin-top:0}
.kaderbox .kzahl{color:var(--dim);font-size:.7em;margin-left:6px}
.kaderbox .kadd{margin-top:10px}
.kaderbox .kadd select{width:100%;max-width:420px;padding:10px 12px}

/* ═══ ROLE CONNECTIONS (rollenverbindungen.js, 30.09.2026) ═══ */
.rvscankopf{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.btn.sm{padding:7px 12px;font-size:11px;min-height:0}

/* Team loeschen samt Discord (teamverwaltung.js, 30.09.2026) */
.tvwarn{border:1px solid rgba(253,197,0,.4);background:rgba(253,197,0,.07);color:var(--gold);padding:12px 14px;margin:14px 0;font-size:13.5px}
.tvdelteil{border-top:1px solid var(--line);padding:12px 0}
.tvdelteil label{display:flex;gap:8px;align-items:center;color:var(--white);font-size:14px}
.tvdelteil .sm{margin:6px 0 0 24px;color:var(--dim)}
.btn.tvdelknopf{background:var(--red);border-color:var(--red)}
.btn.tvdelknopf:disabled{opacity:.4;cursor:not-allowed}

/* ═══ TEAM-ONBOARDING (teamanlage.js, 30.09.2026) ═══ */
.tabar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
.tabar .hint{margin:0 0 0 6px}
.tawizard{margin-bottom:18px}
.takopf{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.taschritt{display:flex;gap:8px;align-items:center;font:600 12px/1 'Chakra Petch',sans-serif;letter-spacing:.08em;text-transform:uppercase;
  color:var(--dim);padding:8px 10px;border:1px solid var(--line)}
.taschritt i{font-style:normal;display:inline-grid;place-items:center;width:20px;height:20px;border:1px solid var(--line);border-radius:50%}
.taschritt.an{color:var(--white);border-color:var(--brand)}
.taschritt.an i{background:var(--brand);border-color:var(--brand)}
.taschritt.fertig{color:var(--txt)}
.taschritt small{font-size:9px;color:var(--dim);text-transform:none;letter-spacing:0}
.tafarben{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.tafarben input[type=color]{width:46px;height:46px;padding:2px;border:1px solid var(--line);background:var(--black);cursor:pointer}
.tarolle{display:inline-block;padding:4px 10px;border-radius:4px;color:#fff;font-weight:600;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.tawahl{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.tawahl label{display:flex;gap:6px;align-items:center;font-size:14px;color:var(--txt);text-transform:none;letter-spacing:0}
.tamini{width:40px;height:40px;object-fit:contain;border:1px solid var(--line);background:var(--black)}
.tavor{border:1px solid var(--line);background:rgba(255,255,255,.02);padding:12px 14px;margin-top:10px;font-size:14px;color:var(--txt)}
.tavor b{color:var(--white);margin-right:8px}
.tavor .sm{color:var(--dim);margin-top:6px}
.tawarn{border:1px solid rgba(253,197,0,.4);background:rgba(253,197,0,.07);color:var(--gold);padding:12px 14px;margin:0 0 12px;font-size:13.5px}
.takanaele select,.takanaele input{background:var(--black);border:1px solid var(--line);color:var(--txt);
  font:400 13.5px/1.4 Barlow,sans-serif;padding:7px 9px;width:100%}
.takanaele select:focus,.takanaele input:focus{outline:none;border-color:var(--brand)}
.tapfeile{white-space:nowrap}
.tapfeile .ibtn{width:28px;height:28px}
.tatreffer{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.tatr{display:flex;gap:8px;align-items:center;flex-wrap:wrap;border:1px solid var(--line);padding:8px 10px}
.tatr .al{margin-right:auto}
#tavorlage .fgrid2 input{background:var(--black);border:1px solid var(--line);color:var(--txt);padding:10px 12px;width:100%}

/* Rechte-Tabelle je Kanal (teamanlage.js, 30.09.2026) */
.tarechtewahl{display:flex;gap:6px;align-items:center}
.tarechtewahl select{min-width:0}
.tarechtezeile td{background:rgba(120,64,224,.05)}
.tamatrix{padding:6px 0}
.tamatrix table{border-collapse:collapse;width:auto}
.tamatrix th{font:600 10.5px/1 'Chakra Petch',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);padding:6px 10px;text-align:center}
.tamatrix th:first-child{text-align:left}
.tamatrix td{padding:4px 10px;text-align:center;border-top:1px solid var(--line)}
.tamatrix td:first-child{text-align:left;color:var(--white);white-space:nowrap}
.tazelle{width:32px;height:28px;border:1px solid var(--line);background:var(--black);color:var(--dim);font-size:15px;cursor:pointer}
.tazelle.ja{color:var(--win);border-color:rgba(59,214,113,.5);background:rgba(59,214,113,.1)}
.tazelle.nein{color:var(--red);border-color:rgba(255,75,92,.5);background:rgba(255,75,92,.1)}
.tamatrixfuss{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:8px}
.tamatrixfuss select{background:var(--black);border:1px solid var(--line);color:var(--txt);padding:6px 8px;max-width:260px}
.tamatrixfuss .sm{color:var(--dim)}

/* ── Klapp-Formulare, Game-Filter, Sortieren auf Discord (30.09.2026) ── */
.dheadzeile{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.spielwahl{display:inline-flex;align-items:center;gap:10px;margin:0}
.spielwahl span{font:600 10.5px/1 'Chakra Petch',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.spielwahl select{min-height:38px;padding:8px 12px;background:var(--black);border:1px solid var(--line2);color:var(--white);
  font:500 13.5px/1 Barlow,sans-serif;cursor:pointer}
.spielwahl select:focus{outline:none;border-color:var(--brand)}
.sh.klappsh{padding:28px 0 16px;justify-content:flex-start}
section > .sh.klappsh:first-child{padding-top:0}
.klappneu{gap:8px}
.klappneu .klappplus{font-size:16px;line-height:1;margin-top:-2px}
.klappneu.an{border-color:var(--white);color:var(--white)}
.klappkopf{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:-6px 0 18px}
.klappkopf h2{font-size:1.05rem;color:var(--white);text-transform:uppercase;letter-spacing:.02em;margin:0}
.klappx{width:34px;height:34px;flex:none;display:inline-grid;place-items:center;margin-left:auto;background:none;
  border:1px solid var(--line);color:var(--dim);font-size:20px;line-height:1;cursor:pointer}
.klappx:hover{color:var(--white);border-color:var(--line2);background:rgba(255,255,255,.05)}
.klappinline .klappkopf{margin:0;justify-content:flex-end;height:0;position:relative;z-index:1}
.klappinline .klappkopf .klappx{position:absolute;top:-8px;right:-8px}
.tbl tr.klappzeile > td{padding:6px 0 18px;border-bottom:1px solid var(--line)}
.tbl tr.klappzeile .fbox{margin:0;border-color:var(--line2);background:var(--black)}
.wkrow + form.fbox, .rrow + form.fbox{margin:6px 0 16px;border-color:var(--line2)}
.tabarplatz{display:contents}
.tabar .btn.an{border-color:var(--white);color:var(--white)}
.rvscankopf{display:flex;align-items:center;gap:14px}
.rvscankopf .klappx{margin-left:auto}
/* Role connections fertig (Schema 20): Modus, Any/All, NOT, Live, Vorschau */
/* Sortieren */
.dokopf{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.dotabs{display:inline-flex;border:1px solid var(--line2)}
.dotabs button{background:none;border:0;padding:9px 16px;color:var(--dim);cursor:pointer;font:600 12px/1 'Chakra Petch',sans-serif;
  letter-spacing:.08em;text-transform:uppercase;display:inline-flex;gap:8px;align-items:center}
.dotabs button i{font-style:normal;color:#5C5C68}
.dotabs button[aria-selected=true]{background:rgba(255,255,255,.08);color:var(--white)}
.dopunkt{width:7px;height:7px;border-radius:50%;background:var(--gold);display:inline-block}
.dokopf select,.dokopf input[type=search]{min-height:38px;padding:8px 12px;background:var(--black);border:1px solid var(--line);
  color:var(--txt);font:400 13.5px/1 Barlow,sans-serif}
.dokopf input[type=search]{flex:1 1 180px}
.doliste{max-height:62vh;overflow:auto;border:1px solid var(--line);background:var(--black)}
.doeintrag{display:flex;align-items:center;gap:10px;padding:7px 10px;border-bottom:1px solid var(--line);background:var(--black);
  cursor:grab;user-select:none}
.doeintrag:last-child{border-bottom:0}
.doeintrag.fest{opacity:.45;cursor:not-allowed}
.doeintrag.team{background:rgba(120,64,224,.06)}
.doeintrag.bewegt{box-shadow:inset 3px 0 0 var(--gold)}
.doeintrag.gewaehlt{background:rgba(157,78,221,.16)}
.doeintrag.treffer .doname{color:var(--gold)}
.doeintrag.drag{opacity:.4}
.doeintrag.ueber{box-shadow:inset 0 2px 0 var(--brand)}
.doeintrag.unter{box-shadow:inset 0 -2px 0 var(--brand)}
.dogriff{width:16px;height:16px;color:#5C5C68;flex:none;display:inline-grid;place-items:center}
.dogriff svg{width:14px;height:14px}
.dopunktfarbe{width:12px;height:12px;border-radius:50%;flex:none;border:1px solid var(--line2)}
.donr{min-width:22px;font:600 11px/1 'Chakra Petch',sans-serif;color:#5C5C68;text-align:right}
.doname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--txt);font-size:14px}
.dozahl{color:#5C5C68;white-space:nowrap}
.doakt{display:inline-flex;gap:4px;flex:none}
.doakt .ibtn{width:28px;height:28px}
.doeintrag input[type=checkbox]{flex:none;accent-color:var(--brand)}

/* Kopf des Dashboards mit zentralem Game-Filter (02.10.2026)
   Links Titel und Satz des Bereichs, rechts Filter und Mitgliederliste.
   Beide Knoepfe gleich hoch (38px), vertikal mittig. Der Filter ersetzt
   die Spielkarten (.spielleiste, 30.09.2026). */
.dhead{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.dheadtext{flex:1 1 auto;min-width:0}
.dheadakt{flex:none;display:flex;align-items:center;gap:10px;padding-top:2px}
.spielwahl{position:relative}
.spielwahlknopf{display:inline-flex;align-items:center;gap:10px;height:38px;padding:0 10px 0 12px;max-width:300px;
  background:var(--s1);border:1px solid var(--line2);color:var(--white);cursor:pointer;font:inherit;text-align:left}
.spielwahlknopf:hover,.spielwahlknopf[aria-expanded="true"]{border-color:var(--brand)}
.spielwahlknopf:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.spielwahlwas{font:600 9.5px/1 'Chakra Petch',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.spielwahlknopf b{font:600 13px/1.2 'Chakra Petch',sans-serif;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spielwahlknopf .gm,.spielwahlopt .gm{width:24px;height:24px}
.spielwahlknopf .gm img,.spielwahlopt .gm img{width:24px;height:24px}
.gm.spielnetz img{object-fit:contain}
/* Filterwert Website: Symbol eines Browserfensters statt Logo (02.10.2026) */
.gm.spielweb{display:inline-grid;place-items:center;color:var(--txt)}
.gm.spielweb svg{width:64%;height:64%}
.spielwahlpfeil{width:15px;height:15px;color:var(--dim);flex:none;transition:transform .2s}
.spielwahlknopf[aria-expanded="true"] .spielwahlpfeil{transform:rotate(180deg)}
.spielwahlliste{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:270px;padding:6px;
  background:var(--s2);border:1px solid var(--line2);box-shadow:0 18px 40px rgba(0,0,0,.55)}
.spielwahlliste[hidden]{display:none}
.spielwahlopt{display:flex;align-items:center;gap:12px;width:100%;padding:9px 10px;background:none;border:0;
  border-left:2px solid transparent;color:var(--txt);cursor:pointer;font:inherit;text-align:left}
.spielwahlopt span{display:flex;flex-direction:column;gap:3px;min-width:0}
.spielwahlopt b{font:600 13px/1.2 'Chakra Petch',sans-serif;letter-spacing:.04em;color:var(--white)}
.spielwahlopt small{font:400 12px/1.3 Barlow,sans-serif;letter-spacing:0;text-transform:none;color:var(--dim)}
.spielwahlopt:hover,.spielwahlopt:focus-visible{background:rgba(255,255,255,.05);outline:none}
.spielwahlopt.an{background:rgba(157,78,221,.14);border-left-color:var(--brand)}
@media (max-width:640px){
  .dhead{flex-wrap:wrap;gap:14px}
  .dheadakt{width:100%;padding-top:0;flex-wrap:wrap}
  /* Knoepfe (New ticket, View on site) oben, die Spielauswahl darunter ueber die volle Breite (04.10.2026: ragte bei 390 px auf Deutsch ueber den Rand). */
  .spielwahl{flex:1 1 100%;min-width:0}
  .spielwahlknopf{width:100%;max-width:none}
  .spielwahlknopf b{flex:1}
  .spielwahlliste{left:0;right:auto;width:100%;min-width:0}
}
/* Telefon und Tablet: Ohne die feste Huelle hatte der Bereichskopf kein
   Polster und keine Linie, der Inhalt klebte direkt an der Spielauswahl
   (F2, 04.10.2026). Jetzt wie am Rechner: Linie unter dem Kopf, dann Luft. */
@media (max-width:900px){
  .dhead{padding-bottom:16px;margin-bottom:22px;border-bottom:1px solid var(--line)}
}

/* Mitglied unter seiner Zeile, mit Website-Rolle (30.09.2026) */
.mdedit{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.mdeditzeile{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:8px}
.mdeditzeile select{min-height:40px;min-width:260px;padding:8px 12px;background:var(--black);border:1px solid var(--line);
  color:var(--txt);font:400 13.5px/1 Barlow,sans-serif}
.mdeditzeile select:focus{outline:none;border-color:var(--brand)}
.mdedit .mdleer{margin:10px 0 0}
[data-mpane="grant"] > .klappneu{margin:0 0 18px}

/* Konto auf der Seite ja/nein (30.09.2026), nur fuer Verwaltende */
.kmarke{display:inline-block;margin-left:8px;padding:3px 7px;border:1px solid var(--line2);color:#6E6E7A;
  font:600 9px/1.2 'Chakra Petch',sans-serif;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;vertical-align:middle}
.kmarke.an{color:var(--win);border-color:rgba(59,214,113,.45)}
.mtbl .kmarke{margin-left:0}
/* Spielernamen mit oeffentlichem Profil (verknuepftes FACEIT-Konto, A2) */
.mtbl a.plink,.tsplay a.plink{transition:color .18s}
.mtbl a.plink:hover,.mtbl a.plink:focus-visible,.tsplay a.plink:hover,.tsplay a.plink:focus-visible{color:var(--brand-l);text-decoration:underline;text-underline-offset:3px}

/* Rollen-Editor in vier Abschnitten, Vergaben (30.09.2026) */
.rgruppe{margin-bottom:10px}
.rgkopf{padding:34px 0 8px;align-items:center;justify-content:flex-start;gap:16px}
.rgkopf h2{font-size:1.35rem}
.rgkopf h3{font-size:1rem;color:var(--white);text-transform:uppercase;letter-spacing:.03em;margin:0}
.rgkopf .klappneu{margin-left:auto}
.rgabt{padding-top:18px}
.rgtext{color:var(--dim);font-size:13.5px;margin:0 0 12px}
.abtname{color:var(--white);font-weight:600}
.mtx tr.mtxgruppe td{font:600 10.5px/1 'Chakra Petch',sans-serif;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);padding-top:16px;border-bottom:1px solid var(--line)}
.vgbox .fgrid2,.mdvg{margin-top:10px}
.mdedit .mdlist li{display:flex;align-items:center;gap:10px}
.mdedit .mdlist li .ibtn{margin-left:auto}
.srvspiel{min-height:34px;padding:6px 10px;background:var(--black);border:1px solid var(--line);color:var(--txt);width:150px;margin-right:6px}

/* Staff setzen und ueberblicken (30.09.2026) */
.stzelle{white-space:normal}
.stchip{display:inline-flex;align-items:center;gap:6px;margin:2px 6px 2px 0;padding:4px 8px;border:1px solid var(--line2);
  font-size:13px;color:var(--txt);background:rgba(255,255,255,.02)}
.stchip.an{border-color:rgba(59,214,113,.35)}
.stchip i.sm{font-style:normal;color:var(--dim)}
.stweg{background:none;border:0;color:var(--dim);cursor:pointer;font-size:15px;line-height:1;padding:0 0 0 2px}
.stweg:hover{color:var(--red)}
.stadd{margin:2px 0 2px 6px}
.sttbl .stzelle > .sm{margin-right:6px}
.sttbl td,.sttbl th{padding-right:10px}
.stspiel{margin-bottom:26px}

/* Dunkle, schmale Scrollbalken im Dashboard statt der weissen des
   Browsers (Alexander, 30.09.2026) */
body.dashapp, body.dashapp *{scrollbar-width:thin;scrollbar-color:#2c2c36 transparent}
body.dashapp ::-webkit-scrollbar{width:8px;height:8px}
body.dashapp ::-webkit-scrollbar-track{background:transparent}
body.dashapp ::-webkit-scrollbar-thumb{background:#2c2c36;border-radius:8px;border:2px solid transparent;background-clip:padding-box}
body.dashapp ::-webkit-scrollbar-thumb:hover{background:#44444f;background-clip:padding-box}
body.dashapp ::-webkit-scrollbar-button{display:none;width:0;height:0}
body.dashapp ::-webkit-scrollbar-corner{background:transparent}

/* Overview "For you" und Hilfe (30.09.2026) */
.ovdu{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-bottom:8px}
.ovdukarte{padding:18px 20px}
.ovdukopf{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.ovdukopf b{font:600 12px/1.2 'Chakra Petch',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--white)}
.ovduliste{list-style:none;margin:0;padding:0}
.ovduliste li{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid var(--line);font-size:14px}
.ovduliste li:last-child{border-bottom:0}
.ovduliste li i{font-style:normal;color:var(--dim);font-size:12.5px;white-space:nowrap}
.hilfe p{color:var(--txt);font-size:14.5px;line-height:1.65;margin:0 0 12px}
.hilfe p:last-child{margin-bottom:0}
.hilfe b{color:var(--white)}
.hilfeliste p{padding:8px 0;margin:0;border-bottom:1px solid var(--line)}
.hilfeliste p:last-child{border-bottom:0}

/* Tickets und Tasks (30.09.2026) */
.tktabs{margin-bottom:6px}
.tktabs button i{font-style:normal;color:var(--gold)}
.tkfilter{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 12px}
.tkchip{background:none;border:1px solid var(--line2);color:var(--dim);padding:6px 12px;cursor:pointer;
  font:600 11px/1 'Chakra Petch',sans-serif;letter-spacing:.1em;text-transform:uppercase}
.tkchip.an,.tkchip:hover{color:var(--white);border-color:var(--white)}
.tkkopfzeile{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px}
.tkkopfzeile b{color:var(--white);font-size:16px}
.tktext{color:var(--txt);font-size:14px;line-height:1.6;padding:12px 14px;background:var(--black);border:1px solid var(--line);margin-bottom:12px}
.tkverlauf{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.tkantwort{padding:10px 14px;border:1px solid var(--line);background:rgba(255,255,255,.02)}
.tkantwort.eigen{border-color:rgba(157,78,221,.4)}
.tkantwort b{color:var(--white);margin-right:8px}
.tkantwort p{margin:6px 0 0;color:var(--txt);font-size:14px;line-height:1.55}
.tkeingabe{width:100%;min-height:72px;padding:10px 12px;background:var(--black);border:1px solid var(--line2);color:var(--txt);font:400 14px/1.5 Barlow,sans-serif}
.tkeingabe:focus{outline:none;border-color:var(--brand)}
.tkknoepfe{align-items:center;gap:10px}
.tkknoepfe select{min-height:34px;background:var(--black);border:1px solid var(--line2);color:var(--txt);padding:6px 10px}
.tkdckopf{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0 12px}
.wkmarken{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0}
.tktaskref{cursor:pointer;background:none;color:var(--gold);border-color:rgba(253,197,0,.4)}
/* Support (28.10.2026, support.js und supportprofil.js) */
.tkantwort.supleise{background:none;border-style:dashed}
.tkantwort.supleise p{color:var(--dim)}
.supanh{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px;font-size:13px}
.supanh a{color:var(--gold)}
.supziele{display:flex;flex-wrap:wrap;gap:8px 18px;padding:6px 0 10px}
.supfaq{padding:14px 18px;margin-bottom:6px}
#ticketsupport select,#ticketsupport input:not([type=checkbox]),#ticketsupport textarea,#supportprofil textarea{background:var(--black);border:1px solid var(--line2);color:var(--txt);padding:6px 10px;min-height:34px;font:400 14px/1.4 Barlow,sans-serif;max-width:100%}
#ticketsupport textarea{width:100%}
#ticketsupport .tbl input:not([type=checkbox]){width:100%}
/* Ticketliste (28.10.2026): eigene Spaltenbreiten statt der aus .mtbl
   (Teamstatistik, 7 % je Zahlenspalte). Die aufgeklappte Zeile ist die
   erste Zelle und erbte von .mtbl td:first-child nowrap, Verlauf und
   lange Links liefen deshalb rechts hinaus. */
.suptbl th:nth-child(1){width:32%} .suptbl th:nth-child(2){width:18%}
.suptbl th:nth-child(3), .suptbl th:nth-child(4), .suptbl th:nth-child(5), .suptbl th:nth-child(6){width:12.5%}
.mtbl.suptbl td{overflow:hidden;text-overflow:ellipsis}
.suptbl tr.klappzeile > td, .suptbl .tkdetail, .suptbl .tkdetail *{white-space:normal;overflow:visible}
.suptbl .tkantwort p, .suptbl .supanh, .suptbl .tkdetail .sm{overflow-wrap:anywhere}
/* Telefon: jede Zeile eine Karte, Betreff oben, der Rest darunter. */
@media (max-width:700px){
  #ticketsupport{padding:10px 14px 16px !important}
  #ticketsupport .tkdckopf{flex-wrap:wrap}
  .mtbl.suptbl{min-width:0;table-layout:auto}
  .suptbl, .suptbl tbody, .suptbl tr.klappzeile, .suptbl tr.klappzeile > td{display:block;width:100%}
  .suptbl thead{display:none}
  .suptbl tbody tr.mrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:12px 4px;border-bottom:1px solid var(--line)}
  .suptbl tbody tr.mrow td{display:block;padding:0;border:0;white-space:normal;overflow:visible}
  .suptbl tbody tr.mrow td:first-child{flex:1 1 100%}
  .suptbl tbody tr.mrow td .al{line-height:1.3}
  .suptbl tbody tr.mrow td:nth-child(2) div{display:inline}
  .suptbl tbody tr.mrow td:nth-child(2) div::before{content:' · '}
  .suptbl tr.klappzeile > td{padding:4px 0 14px}
  .suptbl .tkdetail{padding:14px !important}
  .suptbl .tkantwort{padding:10px 12px}
}

/* ═══ Sprache, Dialoge, Fehlermeldungen (30.09.2026) ═══════════════
   i18n.js (Schieberegler EN/DE), dialog.js (eigene Dialoge statt
   alert/confirm/prompt, Fehlerkarten, Offline-Leiste). */
.langsw{position:relative;flex:none;display:inline-grid;grid-template-columns:1fr 1fr;align-items:center;
  width:60px;height:26px;padding:2px;border:1px solid var(--line);border-radius:3px;background:transparent;
  font:600 10px/1 'Chakra Petch',sans-serif;letter-spacing:.14em;cursor:pointer;
  transition:border-color .2s var(--e)}
.langsw:hover{border-color:var(--line2)}
.langsw:focus-visible{outline:1px solid var(--brand-l);outline-offset:2px}
.langsw .lsgb,.langsw .lsde{position:relative;z-index:1;text-align:center;padding-left:.14em;
  color:var(--dim);opacity:.6;transition:color .2s var(--e),opacity .2s var(--e)}
.langsw:not(.de) .lsgb,.langsw.de .lsde{color:var(--white);opacity:1}
.langsw:hover .lsgb,.langsw:hover .lsde{opacity:1}
.langsw .lsknopf{position:absolute;top:2px;bottom:2px;left:2px;width:calc(50% - 2px);border-radius:2px;
  background:rgba(255,255,255,.07);transition:transform .28s var(--e)}
.langsw.de .lsknopf{transform:translateX(100%)}
.langsw.frei{position:fixed;right:16px;top:16px;z-index:150}
/* Mittig zwischen dem letzten Menuepunkt und der Lupe (Alexander, 01.10.2026):
   links trennt die Luecke der Leiste (34 px), rechts nur die der Knopfgruppe
   (10 px); 24 px Aussenabstand gleichen das aus. Nur solange das Menue in der
   Leiste steht, darunter klappt es ein und der Schalter sitzt wie bisher. */
@media (min-width:901px){
  .bar .menu ~ .acts > .langsw{margin-right:24px}
}
/* Kopf zwischen 901 und 1280 px (F3, 02.10.2026): Wortmarke, sechs
   Menuepunkte, Sprachschalter, Suche und Kontoknopf mit Rollen-Tag
   brauchten angemeldet bis zu 1110 px (mit langem Alias 1220 px), der
   Kopf lief ueber und die Seite liess sich seitlich verschieben.
   Gemessen in 20-px-Schritten. Erst weicht die Wortmarke dem Zeichen
   (angemeldet unter 1280 px, als Gast unter 1100 px), dann werden die
   Luecken schmaler. Ein langer Alias wird gekuerzt, voll steht er im
   Kontomenue. Ab 1281 px und unter 901 px bleibt alles wie bisher. */
@media (min-width:901px) and (max-width:1280px){
  header:has(.user) .bar .logo b{display:none}
}
@media (min-width:901px) and (max-width:1100px){
  .bar .logo b{display:none}
  .bar{gap:24px}
  .menu{gap:22px}
  .bar .menu ~ .acts > .langsw{margin-right:12px}
  .bar .user .who2 b{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media (min-width:901px) and (max-width:1000px){
  .bar{gap:20px}
  .menu{gap:18px}
  .bar .menu ~ .acts > .langsw{margin-right:6px}
  .bar .user .who2 b{max-width:90px}
}
html.i18n-warten body{opacity:0}
body{transition:opacity .15s linear}

html.tdlg-auf{overflow:hidden}
.tdlg-hg{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(4,4,6,.72);backdrop-filter:blur(4px);opacity:0;transition:opacity .18s var(--e)}
.tdlg-hg.an{opacity:1}
.tdlg{width:min(460px,100%);background:var(--s1);border:1px solid var(--line2);border-top:3px solid var(--brand);
  padding:22px 24px 20px;box-shadow:0 24px 60px rgba(0,0,0,.55);transform:translateY(10px) scale(.98);transition:transform .22s var(--e)}
.tdlg-hg.an .tdlg{transform:none}
.tdlg.gefahr{border-top-color:var(--red)}
.tdlg.info{border-top-color:var(--live)}
.tdlg-kopf{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.tdlg-kopf b{font:700 17px/1.2 'Chakra Petch',sans-serif;color:var(--white);letter-spacing:.01em}
.tdlg-i{flex:none;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;
  background:rgba(120,64,224,.16);color:var(--brand-l)}
.tdlg-i svg{width:19px;height:19px}
.tdlg.gefahr .tdlg-i{background:rgba(255,75,92,.14);color:var(--red)}
.tdlg.info .tdlg-i{background:rgba(56,163,165,.14);color:var(--live)}
.tdlg p{margin:0 0 18px;color:var(--txt);font-size:15px;line-height:1.55;overflow-wrap:anywhere}
.tdlg-in{width:100%;margin:-4px 0 18px;background:var(--black);border:1px solid var(--line2);color:var(--txt);
  padding:11px 12px;font:inherit}
.tdlg-in:focus{outline:none;border-color:var(--brand)}
.tdlg-fuss{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.tdlg-fuss .btn{min-height:38px}

.tfehler-stapel{position:fixed;top:calc(var(--hdr) + 12px);right:16px;z-index:390;display:flex;flex-direction:column;gap:10px;
  width:min(380px,calc(100vw - 32px));pointer-events:none}
.tfehler{pointer-events:auto;display:flex;gap:12px;align-items:flex-start;background:var(--s1);border:1px solid rgba(255,75,92,.4);
  border-left:3px solid var(--red);padding:14px 14px 14px 16px;box-shadow:0 16px 40px rgba(0,0,0,.5);
  opacity:0;transform:translateX(24px);transition:opacity .22s var(--e),transform .22s var(--e)}
.tfehler.an{opacity:1;transform:none}
.tfehler.netz{border-color:rgba(253,197,0,.4);border-left-color:var(--gold)}
.tfehler .tdlg-i{width:30px;height:30px;background:rgba(255,75,92,.14);color:var(--red)}
.tfehler.netz .tdlg-i{background:rgba(253,197,0,.12);color:var(--gold)}
.tfehler > div{flex:1;min-width:0}
.tfehler b{display:block;color:var(--white);font:700 14px/1.3 'Chakra Petch',sans-serif;margin:4px 0 3px}
.tfehler p{margin:0;font-size:13.5px;line-height:1.5;color:var(--txt)}
.tfehler-nochmal{margin-top:9px;font:600 11px/1 'Chakra Petch',sans-serif;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brand-l);padding:7px 0}
.tfehler-nochmal:hover{color:#fff}
.tfehler-x{flex:none;width:26px;height:26px;font-size:20px;line-height:1;color:var(--dim)}
.tfehler-x:hover{color:#fff}
.toffline{position:fixed;left:0;right:0;bottom:0;z-index:380;display:flex;align-items:center;justify-content:center;gap:10px;
  padding:10px 16px;background:#2A2208;border-top:1px solid rgba(253,197,0,.4);color:var(--gold);font-size:14px}
.toffline svg{width:18px;height:18px;flex:none}
@media (max-width:640px){
  .tfehler-stapel{top:auto;bottom:16px;right:16px}
}
@media (prefers-reduced-motion:reduce){
  .langsw .lsknopf,.tdlg-hg,.tdlg,.tfehler{transition:none}
}

/* Fehlerseite 404 */
.fseite{min-height:calc(100vh - var(--hdr));display:flex;align-items:center;padding:60px 0}
.fseite .wrap{width:100%}
.fcode{font:700 clamp(96px,18vw,220px)/.85 'Chakra Petch',sans-serif;letter-spacing:-.04em;
  background:linear-gradient(135deg,var(--brand-l),var(--brand) 55%,var(--silver));-webkit-background-clip:text;background-clip:text;color:transparent}
.fseite h1{font-size:clamp(28px,4vw,44px);color:var(--white);margin:18px 0 12px}
.fseite p{max-width:560px;color:var(--dim);font-size:17px;margin:0 0 28px}
.fknoepfe{display:flex;gap:12px;flex-wrap:wrap}
/* Neu-von-Discord-laden-Knopf (dashhilfe.js) */
.ibtn.dcneu{flex:none;color:var(--dim)}
.ibtn.dcneu:hover{color:var(--brand-l)}
.ibtn.dcneu.dreht svg{animation:dcdreh .8s linear infinite}
@keyframes dcdreh{to{transform:rotate(360deg)}}
.dcfeld{display:flex;gap:6px;align-items:center}
.dcfeld > select,.dcfeld > input{flex:1;min-width:0}

/* ═══ Onboarding nach der ersten Anmeldung (welcome.html, 30.09.2026) ═══
   Drei Schritte in einer Karte, oben die Schrittleiste. Gleiche Abstaende
   wie der Rest der Seite: --pad innen, --gap zwischen Feldern. */
.onb{max-width:640px;margin-top:48px}
.onbschritte{list-style:none;margin:0 0 var(--gap);padding:0;display:grid;
  grid-template-columns:repeat(3,1fr);gap:8px}
.onbschritte li{display:flex;align-items:center;gap:10px;padding:12px 14px;
  border:1px solid var(--line);background:var(--s1);color:var(--dim);
  font:600 11px/1 'Chakra Petch',sans-serif;letter-spacing:.14em;text-transform:uppercase}
.onbschritte li span{width:22px;height:22px;flex:none;display:grid;place-items:center;
  border:1px solid var(--line2);font-size:11px;letter-spacing:0;color:var(--dim)}
.onbschritte li.an{color:var(--white);border-color:var(--brand)}
.onbschritte li.an span{background:var(--brand);border-color:var(--brand);color:#fff}
.onbschritte li.fertig span{border-color:var(--brand-l);color:var(--brand-l)}
.onbkarte{border:1px solid var(--line);background:var(--s1);padding:var(--pad)}
.onbkarte h2{font-size:clamp(1.3rem,2.4vw,1.6rem);color:var(--white);text-transform:uppercase}
.onbhint{color:var(--dim);font-size:14px;margin:10px 0 20px;max-width:56ch}
.onbfeld{display:block;margin:0 0 var(--gap)}
.onbfeld>span{display:block;font:600 11px/1 'Chakra Petch',sans-serif;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim);margin-bottom:8px}
.onbfeld input,.onbfeld select,.onbfeld textarea{width:100%;background:var(--black);
  border:1px solid var(--line);color:var(--white);font:400 14.5px/1.5 Barlow,sans-serif;
  padding:11px 13px;min-height:44px;transition:border-color .18s}
.onbfeld textarea{resize:vertical;min-height:88px}
.onbfeld input:focus,.onbfeld select:focus,.onbfeld textarea:focus{outline:none;border-color:var(--brand)}
.onbraster{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--gap)}
.onbfehler{background:rgba(255,75,92,.1);border:1px solid rgba(255,75,92,.4);color:var(--red);
  font-size:13.5px;line-height:1.55;padding:11px 13px;margin:0 0 20px}
.onbfehler[hidden]{display:none}
.onbfuss{display:flex;justify-content:flex-end;gap:8px;margin-top:8px;padding-top:20px;
  border-top:1px solid var(--line)}
.onbfuss .btn[hidden]{display:none}
@media (max-width:620px){
  .onb{margin-top:32px}
  .onbraster{grid-template-columns:1fr}
  .onbschritte li{padding:10px;gap:8px;font-size:10px;letter-spacing:.1em}
}

/* ── Live now (01.10.2026) ──────────────────────────────────────
   Rot fuer "laeuft gerade", wie man es von Uebertragungen kennt. Der
   Punkt pulsiert, ausser der Besucher hat Bewegung abgeschaltet. */
.livetag{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;
  font:700 10px/1 'Chakra Petch',sans-serif;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;background:var(--red)}
.livetag::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;animation:lvblink 1.4s ease-in-out infinite}
.livetag.sm{padding:3px 7px;font-size:9px}
.livetag.sm::before{width:5px;height:5px}
.fxtop .when .livetag{align-self:flex-end;margin-top:2px}
@media (max-width:520px){ .fxtop .when .livetag{align-self:flex-start} }
.livebox .lvh{display:flex;align-items:center;gap:12px}
.lvdot{width:10px;height:10px;border-radius:50%;background:var(--red);animation:lvpuls 1.8s ease-out infinite}
@keyframes lvpuls{0%{box-shadow:0 0 0 0 rgba(255,75,92,.6)}70%{box-shadow:0 0 0 11px rgba(255,75,92,0)}100%{box-shadow:0 0 0 0 rgba(255,75,92,0)}}
@keyframes lvblink{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){ .lvdot, .livetag::before{animation:none} }
/* auto-fit: Bei wenigen Spielen fuellen die Karten die Breite, statt
   leere graue Felder stehen zu lassen. */
.lvgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:12px}
.lvcard{background:var(--s1);border:1px solid var(--line);padding:18px 20px;
  display:flex;flex-direction:column;gap:16px;min-width:0}
.lvcard.main{box-shadow:inset 2px 0 0 var(--brand)}
.lvcard.academy{box-shadow:inset 2px 0 0 var(--gold)}
.lvcard.community{box-shadow:inset 2px 0 0 var(--white)}
.lvtop{display:flex;align-items:center;gap:10px;font-size:11.5px;color:var(--dim);min-width:0}
.lvtop .lvev{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lvteams{display:grid;grid-template-columns:30px minmax(0,1fr) auto minmax(0,1fr) 30px;align-items:center;gap:12px}
.lvteams .tlink{display:block;min-width:0;width:fit-content;max-width:100%;color:inherit;text-decoration:none}
.lvteams .lvn.r{justify-self:end;text-align:right}
.lvteams .nm{display:block;font:600 12.5px/1.2 'Chakra Petch',sans-serif;letter-spacing:.05em;
  text-transform:uppercase;color:var(--white);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  padding-bottom:6px;margin-bottom:-6px}
.lvteams .v{font:700 10px/1 'Chakra Petch',sans-serif;letter-spacing:.12em;color:var(--white)}
.lvcard.main .lvteams .v{color:var(--brand-l)}
.lvcard.academy .lvteams .v{color:var(--gold)}
.lvcard .watch{align-self:flex-start}

/* Matchraum unter dem Stand der Ergebnisse (01.10.2026): klein und
   ruhig, damit er den Stand nicht ueberstimmt; beim Darueberfahren
   weiss und unterstrichen wie die anderen Links. */
.rr .scw{display:flex;flex-direction:column;align-items:center;gap:7px;flex:none}
.rr .rmr{display:inline-flex;align-items:center;gap:5px;
  font:700 9px/1 'Chakra Petch',sans-serif;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);text-decoration:none;padding:2px 0 3px;transition:color .18s}
.rr .rmr svg{width:10px;height:10px}
.rr .rmr:hover{color:var(--white);text-decoration:underline;text-underline-offset:3px}
.rr .rmr:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* ── Match-Seite und Live-Stand (01.10.2026) ──────────────────── */
.lvstand{display:flex;align-items:baseline;gap:12px;font-size:12px;color:var(--dim)}
.lvstand b{font:700 20px/1 'Chakra Petch',sans-serif;color:var(--white);font-variant-numeric:tabular-nums}
.lvstand small{color:var(--dim);margin-left:4px}
.lvstand span{color:var(--txt)}
.lvlinks{display:flex;gap:10px;flex-wrap:wrap}
.fxbody .mid .lvstand{justify-content:center}
.rr .rmrs{display:inline-flex;gap:12px}
.mcard{background:var(--s1);border:1px solid var(--line);padding:var(--pad)}
.mtop{display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.mtop .mev{font-size:12px;color:var(--dim);flex:1;min-width:0}
.mfin{font:700 10px/1 'Chakra Petch',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
  border:1px solid var(--line2);padding:5px 9px}
.mstand{display:flex;align-items:center;gap:14px;font:700 44px/1 'Chakra Petch',sans-serif;font-variant-numeric:tabular-nums}
.mstand i{font-style:normal;color:var(--dim);font-size:30px}
.mstand b.win{color:var(--win)} .mstand b.lose{color:var(--red)}
.mmaps{display:flex;flex-direction:column;border:1px solid var(--line);background:var(--s1)}
.mmap{display:grid;grid-template-columns:70px minmax(0,1fr) 90px 110px;align-items:center;gap:14px;
  padding:14px 20px;border-bottom:1px solid var(--line)}
.mmap:last-child{border-bottom:0}
.mmap .mnr{font:700 10px/1 'Chakra Petch',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.mmap .mname{font:600 13px/1.3 'Chakra Petch',sans-serif;letter-spacing:.05em;text-transform:uppercase;color:var(--white);
  display:flex;flex-direction:column;gap:3px;min-width:0}
.mmap .mname small{font:400 11.5px/1 Barlow,sans-serif;letter-spacing:0;text-transform:none;color:var(--dim)}
.mmap .mres{font:700 15px/1 'Chakra Petch',sans-serif;font-variant-numeric:tabular-nums;color:var(--txt);text-align:center}
.mmap .mres b.win{color:var(--win)} .mmap .mres b.lose{color:var(--red)}
.mmap .mres .mdist{display:block;margin-top:5px;font:500 10.5px/1.2 Barlow,sans-serif;letter-spacing:0;color:var(--dim);white-space:nowrap}
.mmap.now{background:rgba(255,75,92,.06);box-shadow:inset 2px 0 0 var(--red)}
.mmap.next{opacity:.55}
.mmap > :last-child{justify-self:end}
.mtag{font:700 9.5px/1 'Chakra Petch',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
  border:1px solid var(--line2);padding:4px 8px}
.mtag.won{color:var(--win);border-color:rgba(59,214,113,.45)}
.mtag.lost{color:var(--red);border-color:rgba(255,75,92,.45)}
.mtabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.mtabk{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:9px 14px;background:var(--s1);
  border:1px solid var(--line);color:var(--txt);cursor:pointer;font:700 10px/1 'Chakra Petch',sans-serif;
  letter-spacing:.14em;text-transform:uppercase;transition:border-color .18s,color .18s}
.mtabk small{font:400 11.5px/1 Barlow,sans-serif;letter-spacing:0;text-transform:none;color:var(--dim)}
.mtabk:hover{border-color:var(--line2);color:var(--white)}
.mtabk.on{border-color:var(--brand);color:var(--white);box-shadow:inset 0 -2px 0 var(--brand)}
.mtabk:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.mkopf{font:600 13px/1.3 'Chakra Petch',sans-serif;letter-spacing:.05em;text-transform:uppercase;color:var(--white);margin:0 0 14px}
.mteam{margin-bottom:22px}
.mteam h3{font:700 13px/1 'Chakra Petch',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--white);margin:0 0 10px}
.mtab{overflow-x:auto;border:1px solid var(--line);background:var(--s1)}
.mtbl{width:100%;min-width:640px;table-layout:fixed}
/* Gleiche Spalten in beiden Teamtabellen, damit die Zahlen untereinander stehen. */
.mtbl th:nth-child(1){width:24%} .mtbl th:nth-child(2){width:13%}
.mtbl th:nth-child(3), .mtbl th:nth-child(4), .mtbl th:nth-child(5){width:7%}
.mtbl td:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mtbl th.z, .mtbl td.z{text-align:right;font-variant-numeric:tabular-nums}
.mleer{padding:22px;color:var(--dim);font-size:13px}
/* Nachpruefung (04.10.2026): Daten von FACEIT passen nicht zusammen. */
.mpruef{margin-top:14px;border-left:3px solid var(--gold);color:var(--txt);padding:14px 18px}
/* Unvollstaendige FACEIT-Daten (07.10.2026): ruhiger als .mpruef, kein Gelb. */
.mluecke{margin-top:14px;border-left:3px solid var(--line2);color:var(--dim);padding:14px 18px}
.mluecke b{color:var(--txt);font-weight:600}
@media (max-width:640px){
  .mmap{grid-template-columns:54px minmax(0,1fr) 64px;gap:10px;padding:12px 14px}
  .mmap > :last-child{grid-column:2 / -1;justify-self:start}
  .mstand{font-size:34px}
}
.lvlinks .watch{align-self:stretch}   /* beide Knoepfe gleich hoch (01.10.2026) */
.mmap.offen .mname{color:var(--dim)}   /* Map noch nicht gepickt (01.10.2026) */
/* Laufender Gesamtstand grau, erst das Endergebnis farbig (01.10.2026). */
.mstand.laeuft b, .lvstand b, .fxbody .vsx.laeuft{color:#A6A6B0}
/* Siegerlogo je Map (01.10.2026) */
.mmap .mwin{display:inline-flex;align-items:center;gap:10px}
.mmap .msieger .cx{border-color:var(--line2)}
.mmap{grid-template-columns:70px minmax(0,1fr) 90px 150px}
@media (max-width:640px){ .mmap{grid-template-columns:54px minmax(0,1fr) 64px} }
/* Klickflaeche nur so breit wie Logo und Name (01.10.2026). Der Link
   um ein Team im grossen Spielblock (Next up, Match-Seite) fuellte die
   ganze Spalte; ein Klick 150 px neben dem Namen fuehrte zum Team. */
.fxbody a.side.tlink{justify-self:center;width:fit-content;max-width:100%}
.vs .t .tin{display:flex;flex-direction:column;align-items:center;gap:11px;width:fit-content;max-width:100%;
  color:inherit;text-decoration:none}
a.tin:hover b{text-decoration:underline;text-underline-offset:3px}
a.tin:hover .crest{border-color:rgba(255,255,255,.55);box-shadow:0 0 0 1px rgba(255,255,255,.08),0 0 14px rgba(255,255,255,.16)}

/* ── Bild hochladen im Dashboard (01.10.2026) ───────────────────
   Ablageflaeche mit Vorschau. Gestrichelt, solange leer; beim
   Hineinziehen lila. */
.bfzone{position:relative;display:flex;align-items:center;justify-content:center;min-height:130px;padding:14px;
  border:1px dashed var(--line2);background:var(--s2);cursor:pointer;transition:border-color .18s,background .18s;text-align:center}
.bfzone:hover, .bfzone:focus-visible{border-color:var(--brand-l);outline:none}
.bfzone.drueber{border-color:var(--brand);background:rgba(120,64,224,.10)}
.bfzone.laedt{opacity:.6;pointer-events:none}
.bfeld.voll .bfzone{border-style:solid;min-height:0}
.bftext{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--txt)}
.bftext b{font:600 12px/1 'Chakra Petch',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--white)}
.bftext u{color:var(--brand-l);text-underline-offset:3px}
.bfvor{display:block;max-width:100%;max-height:220px;object-fit:contain}
.bflaed{position:absolute;inset:auto 10px 10px auto;font:700 10px/1 'Chakra Petch',sans-serif;letter-spacing:.14em;
  text-transform:uppercase;color:var(--white);background:var(--brand);padding:5px 8px}
.bfrow{display:flex;justify-content:flex-end;min-height:0}
.bfrow .bfweg{margin-top:6px}
.bfeld [hidden]{display:none !important}   /* ausgeblendete Teile wirklich ausblenden (01.10.2026) */
.bfeld.voll .bfzone{padding:10px}
.bfeld.fehler .bfzone{border-color:var(--red);border-style:solid}   /* Bild fehlt (01.10.2026) */
.bffehler{margin-top:6px;margin-right:auto;font-size:13px;color:var(--red)}
/* Video hochladen im Dashboard (28.10.2026): wie das Bildfeld, mit Fortschritt. */
.vfeld [hidden]{display:none !important}
.vfeld.voll .bfzone{border-style:solid;min-height:0;padding:10px;cursor:default}
.vfeld.fehler .bfzone{border-color:var(--red);border-style:solid}
.vfvor{display:block;width:100%;max-height:280px;background:#000}
.vfprog{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.08)}
.vfprog i{display:block;height:100%;width:0;background:var(--brand);transition:width .2s linear}
.vfeld .bfrow{gap:16px}
.vfeld .bfrow .linkbtn{margin-top:6px}
.rr .rmr.ff{cursor:help;color:var(--dim);border:1px solid var(--line2);padding:3px 6px}   /* kampflos (01.10.2026) */
.rr .rmr.ff:hover{text-decoration:none;color:var(--txt)}
.dcard .dcredit{position:absolute;top:10px;right:12px;z-index:1;font-size:10.5px;letter-spacing:.02em;
  color:rgba(255,255,255,.55);text-shadow:0 1px 2px rgba(0,0,0,.8)}   /* Fotonachweis (01.10.2026) */
/* Fotonachweis erst beim Darueberfahren (01.10.2026); mit Tastatur beim Fokus. */
.dcard .dcredit{opacity:0;transition:opacity .3s}
.dcard:hover .dcredit, .dcard:focus-visible .dcredit{opacity:1}
@media (hover:none){ .dcard .dcredit{opacity:1} }
/* Shop vorerst nur "Coming soon", ohne Platzhalter (Alexander, 01.10.2026). */
.soonbox{display:grid;place-items:center;min-height:220px;border:1px solid var(--line);background:var(--s1)}
/* Auf der Shopseite steht der Kasten direkt unter dem Seitenkopf und
   klebte an dessen Linie; auf der Startseite traegt .sh den Abstand. */
.ph + main > .wrap:first-child > .soonbox:first-child{margin-top:var(--sec)}
.soonbox b{font:700 clamp(28px,4vw,46px)/1 'Chakra Petch',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--white)}

/* Banner im Seitenkopf eines Spiels (01.10.2026). Dunkler Verlauf von
   links, damit Ueberschrift und Text lesbar bleiben; nach rechts tritt
   das Bild hervor, unten laeuft es sauber in den Seitengrund aus.
   Flacher als zuerst (Alexander): hoechstens 400 px. Alle Ebenen ab dem
   Rand und ohne Wiederholung, sonst schien das Bild in der Unterkante
   wieder durch; die Linie unten entfaellt, der Auslauf schliesst ab. */
.ph.phbild{min-height:clamp(260px,24vw,400px);display:flex;align-items:flex-end;border-bottom:0;
  padding-bottom:44px;
  background:
    linear-gradient(to top, var(--black) 0, var(--black) 4%, color-mix(in srgb,var(--black) 85%,transparent) 18%, color-mix(in srgb,var(--black) 0%,transparent) 55%),
    linear-gradient(90deg, color-mix(in srgb,var(--black) 94%,transparent) 0%, color-mix(in srgb,var(--black) 78%,transparent) 34%, color-mix(in srgb,var(--black) 25%,transparent) 70%, color-mix(in srgb,var(--black) 10%,transparent) 100%),
    var(--phbild) center 40% / cover;
  background-repeat:no-repeat;background-origin:border-box;background-clip:border-box}
.ph.phbild::after{display:none}
.ph.phbild .wrap{width:100%}
.ph.phbild p{color:var(--txt)}
@media (max-width:640px){
  .ph.phbild{background:
    linear-gradient(to top, var(--black) 0, var(--black) 6%, color-mix(in srgb,var(--black) 55%,transparent) 60%, color-mix(in srgb,var(--black) 35%,transparent)),
    var(--phbild) 62% center / cover;
    background-repeat:no-repeat;background-origin:border-box}
}

/* Verfasser mit Profilbild und Rollen-Tag (01.10.2026) */
.fravt.bild{padding:0;overflow:hidden}
.fravt.bild img{width:100%;height:100%;object-fit:cover;display:block}
.frrolle{display:flex;min-width:0}
.frrolle .tier{font-size:9px;padding:4px 7px;letter-spacing:.12em}

/* Footer, zentral aus site.js (01.10.2026): zwei Aufrufe oben, Claim
   unter dem Logo. */
.fcta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);padding:48px 0 0}
.fctak{display:flex;flex-direction:column;gap:8px;padding:26px 28px;border:1px solid var(--line);background:var(--black);
  transition:border-color .2s,background .2s}
.fctak:hover,.fctak:focus-visible{border-color:var(--brand);background:rgba(120,64,224,.08);outline:none}
.fctat{font:700 clamp(1.15rem,2vw,1.5rem)/1.1 'Chakra Petch',sans-serif;text-transform:uppercase;color:var(--white);letter-spacing:.02em}
.fctat .a{display:inline-block;color:var(--brand-l);transition:transform .2s var(--e)}
.fctak:hover .fctat .a{transform:translateX(4px)}
.fctas{font-size:14px;color:var(--dim)}
.fg p.fclaim{color:var(--txt);font-size:14px;margin:0 0 20px}
@media (max-width:720px){ .fcta{grid-template-columns:1fr;padding-top:36px} }

/* Kontaktseite /contact (01.10.2026) */
.kgrid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--gap);align-items:start;margin-top:var(--sec)}
.kgrid .f textarea{min-height:180px}
.khp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}   /* Lockfeld */
.kinfo{padding:6px 0 0 8px}
.kinfo h5{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--white);margin:0 0 10px;font-weight:600}
.kinfo p{color:var(--dim);font-size:14px;margin:0 0 26px}
.kinfo a{color:var(--txt)}
.kinfo a:hover{color:var(--white);text-decoration:underline}
.kdanke h2{font-size:clamp(1.3rem,2.4vw,1.8rem);color:var(--white);text-transform:uppercase;margin:0 0 10px}
.kdanke p{color:var(--dim);margin:0}
#kontaktform .frow .hint a{color:var(--txt);text-decoration:underline}
@media (max-width:820px){ .kgrid{grid-template-columns:1fr} .kinfo{padding:0} }

/* Dashboard: Kontaktnachrichten (01.10.2026) */
.kliste{display:flex;flex-direction:column;gap:12px}
.kmsg{border:1px solid var(--line);background:var(--s2);padding:18px 20px}
.kmsg.fertig{opacity:.6}
.kkopf{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.kkopf b{color:var(--white)}
.kkopf .kmail{color:var(--brand-l);font-size:14px}
.kkopf time{margin-left:auto;font-size:12px;color:var(--dim)}
.ktext{margin:12px 0 14px;color:var(--txt);font-size:14px;line-height:1.6;white-space:normal;overflow-wrap:anywhere}
.kfuss{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.kknoepfe{margin-left:auto;display:flex;gap:8px;align-items:center}

/* Betreff einer Kontaktnachricht im Dashboard (01.10.2026) */
.kmsg .kbetreff{margin:12px 0 0;font:600 15px/1.35 'Chakra Petch',sans-serif;color:var(--white);letter-spacing:.01em}
.kmsg .kbetreff + .ktext{margin-top:6px}

/* Geburtsdatum (01.10.2026): Alter hinter dem Alias, Haken im Onboarding und Profil */
.who .palter{margin-left:6px;font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums}
.onbcheck,.pcheck{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--txt);cursor:pointer;margin-top:4px}
.onbcheck input,.pcheck input{margin-top:2px;accent-color:var(--brand)}
.onbgeb{margin-top:14px}
/* Haken im Profilformular: nicht wie die Feldbeschriftung und nicht
   wie ein Eingabefeld darstellen (01.10.2026). */
.f label.pcheck{flex-direction:row;font:400 13px/1.45 Barlow,sans-serif;letter-spacing:0;text-transform:none;color:var(--txt);margin-top:10px}
.f .pcheck input{width:16px;height:16px;min-height:0;padding:0;flex:0 0 16px}

/* Onboarding als Pop-up (01.10.2026): ueber der Seite, unter den
   eigenen Dialogen (400), damit Fehlermeldungen darueber erscheinen. */
html.onb-offen{overflow:hidden}
.onbmodal{position:fixed;inset:0;z-index:350;display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(5,5,8,.8);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);overflow-y:auto}
.onbbox{width:100%;max-width:620px;margin:auto}
.onbbox #onb-titel{font-size:clamp(1.4rem,2.6vw,1.9rem);color:var(--white);text-transform:uppercase;margin:0 0 18px}
.onbmodal .onbhint{margin:-6px 0 4px}
@media (max-width:640px){ .onbmodal{align-items:flex-start;padding:16px} .onbschritte li{font-size:11px;padding:10px} }

/* Onboarding: Abbrechen links im Fuss, Knoepfe rechts (01.10.2026) */
.onbfuss .onbabbruch{margin-right:auto;color:var(--dim);font-size:13px}
.onbfuss .onbabbruch:hover{color:var(--white)}
a.authmarke{color:inherit;text-decoration:none;width:max-content}
a.authmarke:hover b{color:var(--white)}

/* FAQ (01.10.2026): Gruppen mit aufklappbaren Fragen, oeffentlich und im Dashboard */
.faq{margin-top:var(--sec);display:flex;flex-direction:column;gap:var(--sec)}
.faqdash{margin-top:0;gap:0}
.faqgruppe h2{font-size:clamp(1.2rem,2.2vw,1.6rem);color:var(--white);text-transform:uppercase;margin:0 0 12px}
.faqeintrag{border-bottom:1px solid var(--line)}
.faqgruppe .faqeintrag:first-of-type{border-top:1px solid var(--line)}
.faqeintrag summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:18px 2px;font:600 16px/1.35 Barlow,sans-serif;color:var(--white)}
.faqeintrag summary::-webkit-details-marker{display:none}
.faqeintrag summary::after{content:"+";font:400 22px/1 Barlow,sans-serif;color:var(--brand-l);transition:transform .2s var(--e)}
.faqeintrag[open] summary::after{transform:rotate(45deg)}
.faqeintrag summary:hover{color:var(--brand-l)}
.faqeintrag summary:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.faqeintrag p{margin:0 0 18px;color:var(--txt);max-width:70ch;line-height:1.6}
.faqeintrag p a{color:var(--brand-l);text-decoration:underline;text-underline-offset:3px}
.faqdash .faqeintrag:last-child{border-bottom:0}

/* Hochlade-Zeichen auf Banner und Profilbild der Profilkarte (01.10.2026) */
.pbildknopf{position:absolute;display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;cursor:pointer;
  background:color-mix(in srgb,var(--black) 70%,transparent);color:#fff;transition:background .2s}
.pbildknopf svg{width:16px;height:16px}
.pbildknopf:hover,.pbildknopf:focus-visible{background:var(--brand);outline:none}
.me .ban .pbildknopf{top:8px;right:8px}
.me .av .pbildknopf{right:0;bottom:0;width:26px;height:26px;z-index:3}
.me .av .pbildknopf svg{width:14px;height:14px}
.me .bd .formfehler{margin:0 0 12px}

/* Profil an Ort und Stelle bearbeiten (01.10.2026) */
.pkopf{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.pkopf h4{margin:0}
.peigen .edt{display:none}
.peigen.bearbeiten .anz{display:none}
.peigen.bearbeiten .edt{display:flex}
.peigen .krows li .edt{flex-direction:column;gap:6px;flex:1;min-width:0}
.peigen.bearbeiten .krows li{align-items:flex-start}
.peigen .edt input,.peigen .edt select,.peigen .edt textarea{width:100%;background:var(--black);border:1px solid var(--line);
  color:var(--txt);font:400 14px/1.4 Barlow,sans-serif;padding:9px 11px}
.peigen .edt input:focus,.peigen .edt select:focus,.peigen .edt textarea:focus{outline:none;border-color:var(--brand)}
.peigen .edt input:disabled{color:var(--dim);cursor:not-allowed}
.peigen .edt .hint,.peigen .edt .zaehl{font-size:12px;color:var(--dim)}
.peigen .edt .zaehl{align-self:flex-end}
.peigen .edt .pcheck{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--txt);text-transform:none;letter-spacing:0}
.peigen .edt .pcheck input{width:16px;height:16px;padding:0;accent-color:var(--brand)}
.peigen .pakt.edt{gap:10px;align-items:center;margin-top:16px}
.peigen.bearbeiten .krows li > span:first-child{padding-top:10px}

/* Fehler direkt am Feld (01.10.2026): rot umrandet, Meldung darunter */
input.feld-falsch,select.feld-falsch,textarea.feld-falsch{border-color:var(--red)!important;box-shadow:inset 0 0 0 1px var(--red)}
input[type=checkbox].feld-falsch{outline:2px solid var(--red);outline-offset:2px;box-shadow:none}
.feldmeldung{display:block;margin-top:6px;color:var(--red);font-size:12.5px;line-height:1.4;text-transform:none;letter-spacing:0;font-weight:400}

/* ── Politur (Segment P, 02.10.2026) ─────────────────────────────
   Alexander: dunkle Auswahllisten ueberall, auch aufgeklappt; Suchfelder
   mit Lupe statt Platzhaltertext; Haekchen im Stil der Seite.
   color-scheme:dark schaltet die Systemteile (aufgeklappte Listen,
   Datumswahl, datalist, Bildlaufleisten) auf dunkel. */
html{color-scheme:dark}
select{background-color:var(--black);color:var(--txt)}
select option,select optgroup{background-color:var(--s2);color:var(--txt)}
select option:checked{background-color:#2A1B46;color:var(--white)}
select:disabled,input:disabled,textarea:disabled{opacity:.55;cursor:not-allowed}
input[type=checkbox],input[type=radio]{accent-color:var(--brand)}
/* Lupe in jedem Suchfeld. Die FAQ-Suche und die Kommandopalette tragen
   ihre Lupe schon als eigenes Bild. Hohe Spezifitaet, damit die
   Polsterung links gegen die feldeigenen Regeln gewinnt. */
input[type=search]:not(#faq-suche):not(#palq){
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B8B96' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:12px 50%;background-size:16px 16px;padding-left:38px}
input[type=search]::-webkit-search-cancel-button{cursor:pointer}
/* Hinweise und Querverweise sehen ueberall gleich aus, nicht nur in .f
   und .sh (vorher standen sie ausserhalb in Fliesstextgroesse). */
.hint{font-size:12px;line-height:1.5;color:var(--dim)}
.more{font-size:13px;font-weight:500;color:var(--dim);display:inline-flex;gap:7px;align-items:center;
  background:none;border:0;padding:0;cursor:pointer;font-family:inherit;transition:color .2s,gap .25s var(--e)}
.more:hover{color:var(--white)}
/* Schalter im Rollen-Editor: Erklaerung in normaler Schrift, nicht in
   den Grossbuchstaben des Feldlabels. */
.rsw small{font:400 12px/1.45 Barlow,sans-serif;letter-spacing:0;text-transform:none}
/* Haekchen in Tabellen mittig zur Zeile, gleich gross. */
.tbl td > input[type=checkbox]{display:block;margin:0;width:18px;height:18px}
/* Bestaetigung durch Eintippen: Name sichtbar ueber dem Feld. */
.askhint{margin:4px 0 8px;font-size:13px;color:var(--dim)}
.askhint b{color:var(--white);font-weight:600}
/* Fehlerkarten im Dashboard (02.10.2026): oben rechts lagen sie ueber
   dem Game-Filter und fingen dessen Klicks, unten rechts sitzt der
   schwebende Speichern-Knopf. Deshalb unten links ueber der Navigation. */
body.dashapp .tfehler-stapel{top:auto;bottom:16px;right:auto;left:16px;flex-direction:column-reverse}
/* Kopf des Kader-Editors: Titel links, Neuladen rechts (02.10.2026). */
.kaderbox .kheadzeile{display:flex;align-items:center;justify-content:space-between;gap:12px}
/* News und Partners: Das Formular traegt seinen Rahmen selbst, die
   Karte darum ergab einen Doppelrahmen. Jetzt wie Tasks und Tickets. */
#newsbox.card,#partnersbox.card{padding:0!important;border:0;background:none}
/* "Was Sie tun koennen": Name und Satz mit Abstand statt aneinander. */
#access-box .rnow{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
#access-box .rnow .tier{align-self:center}
/* Schalter Website status im Kontomenue (02.10.2026): Marken aus, ausser in der Spalte von Members */
.kmarke-aus .kmarke{display:none}
.kmarke-aus .mtbl .kmarke{display:inline-block}
.umenu button em{margin-left:auto;flex:none;font-style:normal;font-size:11.5px;color:#5C5C68}
.umenu button[aria-checked="true"] em{color:var(--win)}
.user .who2 .tier{padding:2px 6px;font-size:8.5px;gap:0}
/* Shop im Handymenue als Knopf ueber die ganze Breite (03.10.2026). */
@media (max-width:900px){.menu a.navshop{margin-top:14px;padding:13px 16px;justify-content:center;border-bottom:0}}
/* Team-Untermenue der Ergebnis-Auswahl auf dem Telefon unter statt neben
   dem Hauptmenue, sonst ragt es links aus dem Bild (F4, 03.10.2026). */
@media (max-width:620px){.tfsub,.tfsub.links{left:0;right:0;max-width:none;top:auto!important;position:relative;margin-top:4px}}
/* Kontaktformular angemeldet: eigenes Profil als feste Karte (03.10.2026). */
#kontaktform .f[hidden]{display:none}
.kprofil .klabel{display:block;font:600 10.5px/1 'Chakra Petch',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:9px}
.kprofilzeile{display:flex;align-items:center;gap:14px;padding:12px 14px;border:1px solid var(--line);background:var(--black)}
.kprofilbild{flex:none;width:44px;height:44px;display:grid;place-items:center;overflow:hidden}
.kprofilbild img{width:44px;height:44px;object-fit:cover}
.kprofilwer{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;min-width:0}
.kprofilwer b{font:700 15px/1.2 'Chakra Petch',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--white)}
.kprofilwer small{flex-basis:100%;color:var(--dim);font-size:13px;overflow-wrap:anywhere}

/* ── Zwei-Faktor-Anmeldung (A1, 04.10.2026) ─────────────────────────
   Profil: Einrichten mit QR-Code, Wiederherstellungscodes. Anmeldeseite:
   zweiter Schritt. Dashboard: Hinweis statt der Bereiche. */
.mfaform .f{display:flex;flex-direction:column;gap:8px}
.mfakopf{margin:0;font:600 14px/1.3 'Chakra Petch',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--white)}
.mfaschritte{margin:0;padding:0 0 0 20px;display:flex;flex-direction:column;gap:16px;color:var(--txt);font-size:14px;line-height:1.55}
.mfaschritte li{padding-left:4px}
.mfaschritte li > span{display:block;margin-bottom:10px}
/* Prozentbreite: traegt nichts zur Mindestbreite bei, schrumpft auf schmalen Telefonen mit. */
.mfaqr{width:100%;max-width:200px;background:#fff;padding:0;line-height:0}
.mfaqr svg{width:100%;height:auto;display:block}
.mfaalt{margin:10px 0 0;font-size:13px;color:var(--dim);display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.mfakey{font:600 14px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--white);
  background:var(--black);border:1px solid var(--line2);padding:5px 8px;overflow-wrap:anywhere;letter-spacing:.04em}
.mfacode{font-variant-numeric:tabular-nums;letter-spacing:.18em;max-width:220px}
.mfacodes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-width:420px}
.mfacodes code{display:block;font:600 14px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--white);
  background:var(--black);border:1px solid var(--line);padding:7px 10px;text-align:center;letter-spacing:.06em}
.mfawechsel{margin:0}
#p-mfapflicht b{color:var(--gold)}
/* profile#security: nicht unter dem klebenden Kopf verschwinden. */
#security{scroll-margin-top:110px}
/* Waehrend des Codes treten die Anmeldewege zurueck (eigenes display im CSS). */
.authseite .wege[hidden],.authseite .zustimmung[hidden],.authseite .wegtext[hidden]{display:none}
#mfa-bereich{margin:18px 0 0}
#mfa-bereich[hidden]{display:none}
#mfa-bereich .panelkopf{margin:0 0 4px;font:600 14px/1.3 'Chakra Petch',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#fff}
#mfa-bereich .panelunter{margin:0 0 18px;font-size:13px;line-height:1.6;color:var(--dim)}
#mfa-bereich #mfa-code{letter-spacing:.3em;font-variant-numeric:tabular-nums}
.f[hidden]{display:none}
.mfapflicht{margin:36px auto 0;max-width:640px;border-left:3px solid var(--gold)}
.mfapflicht h2{margin:0 0 12px;font:700 20px/1.25 'Chakra Petch',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--white)}
.mfapflicht p{margin:0 0 10px;color:var(--txt);line-height:1.6}
@media (max-width:520px){.mfacodes{grid-template-columns:minmax(0,1fr)}}

/* ═══ Anmeldung und Onboarding neu (Onboarding Pruefbericht, 05.10.2026) ═══ */
/* Cookie-Banner nie ueber dem Onboarding (Fund H3): solange das Pop-up
   offen ist, ist er weg. Nach dem Speichern laedt die Seite neu, dann
   steht er wieder da, solange er nicht beantwortet ist. */
html.onb-offen .einw:not(.einw-fluss){display:none!important}
html.onb-offen body{padding-bottom:0}
/* .weg setzt display:grid und uebersteuerte damit [hidden]: Nicht
   eingerichtete Anbieter blieben sichtbar (Fund niedrig). */
.weg[hidden]{display:none}
/* Eigener Knopf "Create an account" (Fund M6): Geometrie der Wege, still. */
.weg.neu{background:transparent;border-color:var(--line2);color:var(--txt)}
.weg.neu:hover{background:var(--s2);border-color:var(--white);color:var(--white)}
/* Passwort mit "Show password" (statt "Repeat password"). */
.pwfeld{display:flex;align-items:stretch}
.pwfeld input{flex:1;min-width:0}
.pwzeigen{flex:none;padding:0 14px;min-height:48px;background:var(--black);border:1px solid rgba(255,255,255,.34);border-left:0;
  color:var(--txt);cursor:pointer;white-space:nowrap;font:600 11px/1 'Chakra Petch',sans-serif;letter-spacing:.1em;text-transform:uppercase}
.pwzeigen:hover{color:var(--white);border-color:var(--white)}
/* "At least 8 characters" nicht doppelt neben der Fehlermeldung (Fund niedrig). */
.f .feldmeldung ~ .hint{display:none}

/* Onboarding: Kopf mit Sprachschalter, Unterzeile, Schrittanzeige */
.onbkopf{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.onbkopf .onblang{margin-top:6px}
.onbbox #onb-titel{margin:0 0 8px}
.onbbox #onb-titel:focus,.onbzaehler:focus{outline:none}
.onbunter{color:var(--dim);font-size:14px;line-height:1.55;margin:0 0 18px;max-width:56ch}
.onbunter[hidden],.onbschritte[hidden],.onbkarte[hidden]{display:none}
.onbzaehler{margin:0 0 18px;font:600 11px/1 'Chakra Petch',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-l)}
.onbmodal .onbfeldhint{margin:-12px 0 var(--gap)}
.onbmodal .onbsochint{margin:0 0 18px}
.onbmodal .onbzustlinks{margin:-10px 0 0}
.onbmodal .onbzustlinks a{color:var(--dim);font-size:13px}
.onbmodal .onbzustlinks a:hover{color:var(--white)}
/* "Optional" als kleine Marke an jedem freiwilligen Feld (Fund H4) */
.optmarke{display:inline-block;margin-left:8px;padding:3px 6px;border:1px solid var(--line2);vertical-align:1px;
  font:600 9.5px/1 'Chakra Petch',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
/* Haekchen: 18 px statt 13 px, die ganze Zeile ist Trefferflaeche (Fund niedrig) */
.onbcheck{font-size:14px;line-height:1.5;margin:0 0 var(--gap)}
.onbcheck input{width:18px;height:18px;flex:none}
.onbcheck input:disabled{cursor:not-allowed}
.onbcheck input:disabled + span{color:var(--dim)}
.onbcheck a{color:var(--brand-l);text-decoration:underline;text-underline-offset:3px}
.onbcheck a:hover{color:var(--white)}
.onbzust{padding:14px;border:1px solid var(--line2);background:rgba(255,255,255,.02)}
.onbzust .feldmeldung,.onbzust + .feldmeldung{margin-top:-8px;margin-bottom:var(--gap)}
/* Unter 16: deutlich, nicht als Fehler */
.onbjung{margin:0 0 var(--gap);padding:12px 14px;border:1px solid rgba(253,197,0,.4);border-left:3px solid var(--gold);
  background:rgba(253,197,0,.07);color:var(--white);font-size:14px;line-height:1.55}
.onbjung[hidden]{display:none}
/* Fuss: Abbrechen links, Knoepfe rechts */
.onbfuss{flex-wrap:wrap;align-items:center}
.onbknoepfe{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
.onbfuss a.btn{text-decoration:none}
.onbfertig p{margin:0;color:var(--txt);font-size:15px;line-height:1.6;max-width:56ch}
.onbfertig .onbfuss{margin-top:20px}
/* Schrittleiste am Handy: drei gleich breite Spalten ohne Ueberlauf. Auf
   ganz schmalen Schirmen ohne Nummernkasten, die Zeile "Step 1 of 3"
   sagt die Nummer. */
.onbschritte{grid-template-columns:repeat(3,minmax(0,1fr))}
.onbschritte li{min-width:0}
@media (max-width:640px){
  .onbschritte{gap:6px}
  .onbschritte li{padding:9px 8px;gap:6px;font-size:10px;letter-spacing:.06em;line-height:1.2;overflow-wrap:anywhere}
}
@media (max-width:440px){
  .onbschritte li span{display:none}
  .onbschritte li{justify-content:center;text-align:center;min-height:40px}
}
@media (max-width:640px){
  .onbfuss{flex-direction:column-reverse;align-items:stretch}
  /* Weiter/Fertig volle Breite oben, Zurueck und Ueberspringen darunter:
     Auf Deutsch passen drei Knoepfe nicht in eine Zeile. */
  .onbknoepfe{margin-left:0;display:flex;flex-wrap:wrap;gap:8px}
  .onbknoepfe .btn{flex:1 1 0;min-width:0;justify-content:center;padding:0 10px}
  .onbknoepfe #onb-weiter,.onbknoepfe #onb-profil{order:-1;flex-basis:100%}
  .onbfuss .onbabbruch{margin:10px 0 0;align-self:center}
}

/* Geburtsdatum als drei Auswahlfelder (TelacyGeb in dialog.js) */
.gebfeld{border:0;padding:0;margin:0 0 var(--gap);min-width:0}
.gebfeld legend{padding:0;margin:0 0 10px;font:600 11px/1 'Chakra Petch',sans-serif;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim)}
.gebreihe{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr) minmax(0,1.1fr);gap:10px}
.gebteil{display:flex;flex-direction:column;gap:6px;min-width:0}
.gebteil > span{font-size:12px;color:var(--dim)}
.gebteil select{width:100%;min-height:44px;background:var(--black);border:1px solid var(--line);color:var(--white);
  font:400 14.5px/1.5 Barlow,sans-serif;padding:9px 10px}
.gebteil select:focus{outline:none;border-color:var(--brand)}
.gebfeld .gebhinweis{margin:8px 0 0}
.peigen .edt .gebfeld{margin:0 0 6px;width:100%}
.peigen .edt .gebfeld legend{font-size:10.5px}
@media (max-width:420px){ .gebreihe{gap:6px} .gebteil select{padding:9px 6px} }

/* Profil: "Complete your profile" (Phase C) */
.pliste .pkopf small{font-size:12px;color:var(--dim);font-weight:400;letter-spacing:.02em;text-transform:none}
.pliste .krows li b.erledigt{color:var(--win);font-weight:600}
.pliste .krows li b.erledigt::before{content:"\2713\00A0"}

/* Hinweis unter dem Discord-Knopf (05.10.2026): Spieler und Staff melden sich mit Discord an. */
.wegehinweis{margin:-2px 2px 6px;font-size:12.5px;line-height:1.45;color:var(--dim)}

/* Absprung zum Bot-Dashboard /bot in der Dashboard-Leiste und im Bot-Bereich (06.10.2026). */
.dnav a.dnavext svg{width:13px;height:13px;margin-left:auto;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.7}
.bdhin{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:18px 22px;margin-bottom:18px;border-color:rgba(120,64,224,.45)}
.bdhin p{flex:1;min-width:240px;margin:0;color:var(--txt);font-size:14px}
.bdhin b{color:var(--white)}


/* Discord-Beitritt auf der Spielseite Overwatch (07.10.2026).
   Das Discord-Zeichen traegt die Markenfarbe von Discord, damit es sofort
   erkannt wird; alles andere bleibt im Telacy-System. Kein Anheben beim
   Hover, nur Rahmen und Pfeil (siehe Staff-Karten, 06.10.2026). */
.dcjoinwrap{padding-top:var(--sec)}
.dcjoin{position:relative;display:flex;align-items:center;gap:clamp(20px,3vw,40px);
  padding:clamp(24px,3.4vw,44px) clamp(22px,3.4vw,48px);background:var(--s1);
  border:1px solid rgba(120,64,224,.45);overflow:hidden;color:var(--txt);
  transition:border-color .25s var(--e)}
.dcjoin::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 140% at 0% 50%,rgba(88,101,242,.22),transparent 70%),
             radial-gradient(50% 120% at 100% 50%,rgba(120,64,224,.18),transparent 70%)}
.dcjoin > *{position:relative}
.dcjoin:hover{border-color:var(--brand-l)}
.dcjoin:focus-visible{outline:2px solid var(--brand-l);outline-offset:3px}
.dcjoin-logo{flex:none;display:grid;place-items:center;width:clamp(72px,8vw,104px);aspect-ratio:1;
  border-radius:22%;background:#5865F2;color:#fff}
.dcjoin-logo svg{width:60%;height:60%}
.dcjoin-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.dcjoin-k{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-l)}
.dcjoin-t{font-family:'Chakra Petch',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(1.45rem,3vw,2.3rem);line-height:1.1;color:var(--white)}
.dcjoin-s{color:var(--dim);font-size:15px;max-width:52ch}
.dcjoin-cta{flex:none;display:flex;flex-direction:column;align-items:center;gap:10px}
.dcjoin-btn{min-height:52px;padding:0 26px;font-size:15px}
.dcjoin:hover .dcjoin-btn{background:var(--brand-d)}
.dcjoin:hover .dcjoin-btn .a{transform:translateX(3px)}
.dcjoin-url{font-size:13px;color:var(--dim);letter-spacing:.02em}
@media (max-width:760px){
  .dcjoin{flex-direction:column;align-items:stretch}
  .dcjoin-logo{align-self:flex-start}
  .dcjoin-cta{align-items:stretch}
  .dcjoin-btn{justify-content:center}
  .dcjoin-url{text-align:center}
}

/* Tippziele mindestens 24 px hoch (WCAG 2.2, 17.10.2026), ohne dass sich das
   Bild aendert: mehr Polster, gleich viel negativer Rand. */
.rr .rmr:not(.ff){padding:7px 0 8px;margin:-5px 0}
.spbar button{padding-top:7px;padding-bottom:7px;margin-top:-1px;margin-bottom:-1px}
.sh .more{padding:2px 0;margin:-2px 0;min-height:24px}

/* ── Map-Tabellen nach Modus (21.10.2026) ────────────────────────
   Abschnitt je Modus mit Bilanz, darunter die Maps von der besten zur
   schlechtesten (mapSortTabelle in site.js). */
tr.msort-modus > th{padding:16px 0 7px;text-align:left;border-bottom:1px solid var(--line2);
  font:600 10.5px/1 'Chakra Petch',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--white)}
tbody > tr.msort-modus:first-child > th{padding-top:8px}
tr.msort-modus .msort-bilanz{float:right;letter-spacing:.04em;font-variant-numeric:tabular-nums;color:var(--dim)}
tr.msort-modus .msort-bilanz b.w{color:var(--win)} tr.msort-modus .msort-bilanz b.l{color:var(--red)}
tr.msort-modus .msort-bilanz i{font-style:normal;color:var(--txt);margin-left:6px}
/* Der Modus steht im Abschnitt, unter dem Map-Namen waere er doppelt. */
.msort-tab .tsmode,.msort-tab .sc-modus{display:none}

/* ── Video zu einer Meldung (28.10.2026, Werbevideo) ─────────────
   Eigener Player statt eingebettetem Post: keine Drittanbieter, keine
   Einwilligung. Das Bild der Meldung ist das Thumbnail (poster). */
.alead.avid{background:#000}
.alead.avid video{display:block;width:100%;height:100%;background:#000;object-fit:contain}
.sl .acts2{display:flex;flex-wrap:wrap;gap:12px}
.hwatch{background:rgba(0,0,0,.35);border-color:rgba(255,255,255,.55);color:#fff;backdrop-filter:blur(6px)}
.hwatch svg{width:14px;height:14px}
.na .ph2{position:relative}
.vidmark{position:absolute;left:12px;bottom:12px;display:flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:50%;background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.5);color:#fff;pointer-events:none}
.vidmark svg{width:14px;height:14px;margin-left:2px}
/* Hover-Vorschau (28.10.2026): stumm ueber Bild bzw. Hero-Grund, blendet
   erst ein, wenn das Video wirklich laeuft. */
video.hvor{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity .35s var(--e);pointer-events:none;background:transparent}
video.hvor.an{opacity:1}
.na .ph2 video.hvor{z-index:1}
.na .vidmark{z-index:2;transition:opacity .25s var(--e)}
.na.hvan .vidmark{opacity:0}
.na.hvan .ph2 img{transform:none}
.fr[data-video] .frt{position:relative}
.fr.hvan .frt img{transform:none}
dialog.vidlb{width:min(1200px,94vw);max-width:none;max-height:none;padding:0;border:0;background:#000;color:#fff;overflow:visible}
dialog.vidlb::backdrop{background:rgba(0,0,0,.86)}
.vidlb video{display:block;width:100%;aspect-ratio:16/9;max-height:84vh;background:#000}
.vidlb .vidzu{position:absolute;right:0;bottom:calc(100% + 10px);display:flex;align-items:center;gap:8px;padding:8px 12px;
  background:none;border:1px solid rgba(255,255,255,.4);color:#fff;font:600 11px/1 'Chakra Petch',sans-serif;
  letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.vidlb .vidzu:hover, .vidlb .vidzu:focus-visible{border-color:#fff;background:rgba(255,255,255,.08);outline:none}

/* ── Match streams (28.10.2026): wer ein Match streamt, als Knoepfe.
   Spielkarte, Live now und Matchseite. Keine Einbettung. ───────── */
.mstreams{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0}
.mstreams.fx,.mstreams.m{justify-content:center;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.mstreams .mslbl{font:700 9.5px/1 'Chakra Petch',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-right:4px}
.mstreams .msk{display:inline-flex;align-items:center;gap:7px;min-width:0;max-width:100%;padding:7px 11px;
  border:1px solid var(--line2);color:var(--txt);text-decoration:none;font-size:12px;line-height:1;
  transition:color .2s,border-color .2s,background .2s}
.mstreams .msk svg{width:13px;height:13px;flex:none}
.mstreams .msk.twitch svg{color:#9146FF}
.mstreams .msk.youtube svg{color:#FF3B30}
.mstreams .msk.kick svg{color:#53FC18}
.mstreams .msk b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:16ch}
.mstreams .msk small{display:inline-flex;align-items:center;gap:5px;color:var(--dim);font-variant-numeric:tabular-nums}
.mstreams .msk small i{width:6px;height:6px;border-radius:50%;background:#E5484D}
.mstreams .msk.on{border-color:rgba(229,72,77,.55)}
.mstreams .msk:hover{color:var(--white);border-color:var(--white);background:rgba(255,255,255,.06)}
.mstreams .msk:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.mstreams .msmehr{font-size:11.5px;color:var(--dim)}
@media (max-width:560px){ .mstreams .msk b{max-width:11ch} }

/* ── Eingriff eines FACEIT-Admins (28.10.2026): Marke in Live-Karte und
   Matchseite, Hinweis nach einem Neustart. ─────────────────────── */
.adminmarke{display:inline-flex;align-items:center;padding:4px 8px;flex:none;
  font:700 9.5px/1 'Chakra Petch',sans-serif;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold);border:1px solid rgba(253,197,0,.4);background:rgba(253,197,0,.07)}
.lvtop .adminmarke{margin-left:auto}
.mtop .adminmarke{margin-right:2px}
.mtag.pausiert{color:var(--gold);border-color:rgba(253,197,0,.4)}
.madmin{margin:14px 0 0;padding:10px 12px;font-size:12.5px;line-height:1.5;color:var(--txt);
  border:1px solid rgba(253,197,0,.3);background:rgba(253,197,0,.06)}

/* Ueber Telacy Esports auf der Startseite (31.10.2026, SEO): ruhiger Textblock,
   Kanaele als leise Zeile darunter. */
/* Vorgefuellte Listen aus seo.js, nur bis site.js die Karten zeichnet */
.ssr-liste{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:14px}
.ssr-liste a{color:var(--txt)}