/* ── Meine Turniere · Teams · Team-Seite · Serie (Block W1 · Agent C) ───────────────────────────────────────────────
   Figma YRUirscc0yHUgTS69n5bDU: W5 137:2310 · W22 176:5885 · M6 177:5631 · W23 177:6896 · W24 177:8203 · W4 136:2533 ·
   W10 145:3040 · M7 178:7879 · W25 176:5070. Nur Tokens aus style.css; Grundbausteine aus tw.css. Präfix `tw-c-`.
   Brüche wie tw.css: ≤ 1080 einspaltig, ≤ 600 Tabelle → Liste. */

/* leere Abschnitte nehmen keinen Abstand ein */
.tw-links > :empty, .tw-rechts > :empty, .tw-c-oben:empty { display: none !important; }
.tw-c-nur-mobil, .tw-c-nur-schmal { display: none; }
.tw-c-pfeil { color: var(--w45); display: inline-flex; flex: 0 0 auto; }
.tw-c-knopfz { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.tw-c-cap-z { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tw-c-zeilen { display: flex; flex-direction: column; border-top: 1px solid var(--w06); }
.tw-c-zeilen > * { border-bottom: 1px solid var(--w06); }
.tw-c-chips { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tw-c-z-t:focus-visible, .tw-c-tz:focus-visible, .tw-c-erg:focus-visible, .tw-c-anm:focus-visible, .tw-c-next:focus-visible,
.tw-c-tr-n:focus-visible, .tw-c-se-cup:focus-visible, .tw-c-tk:focus-visible, .tw-c-farbe:focus-visible, .tw-c-drop:focus-visible,
.tw-c-dots:focus-visible, .tw-c-menue-o:focus-visible, .tw-c-suchfeld:focus-visible, .tw-c-wahl-z:focus-visible, a.tw-name:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
a.tw-name { text-decoration: none; }
a.tw-name:hover { color: var(--violett-text); }

/* ── Meine Turniere: Zeile (W22) — Datum 56 · Typ/Titel/Zeile/Hinweise · Status · EINE Aktion ── */
.tw-c-z { display: grid; grid-template-columns: 56px minmax(0, 1fr) 200px auto; gap: 0 24px; align-items: center;
    padding: 22px 0; min-width: 0; }
.tw-c-z-d { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.tw-c-z-d span { font: 600 11px/14px var(--font-brand); letter-spacing: .66px; text-transform: uppercase; color: var(--w70); }
.tw-c-z-d span:last-child { color: var(--w45); }
.tw-c-z-d b { font: 600 24px/30px var(--font-brand); color: var(--w100); font-variant-numeric: tabular-nums; }
.tw-c-z-i { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tw-c-z-cap { font: 600 11px/14px var(--font-brand); letter-spacing: .66px; text-transform: uppercase; color: var(--violett-text); }
.tw-c-z-cap .schmal { display: none; }
.tw-c-z-t { font: 600 18px/24px var(--font-brand); color: var(--w100); text-decoration: none; overflow-wrap: anywhere; align-self: flex-start; }
.tw-c-z-t:hover { color: var(--violett-text); }
.tw-c-z-z { display: flex; align-items: center; gap: 8px; font: 400 13px/18px var(--font-brand); color: var(--w70); min-width: 0; }
.tw-c-z-z span { overflow-wrap: anywhere; }
.tw-c-hws { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tw-c-hw { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 6px; background: var(--w04);
    font: 600 12px/16px var(--font-brand); color: var(--w70); max-width: 100%; overflow-wrap: anywhere; }
.tw-c-hw.amber { color: var(--gold2); background: rgba(232, 180, 80, .1); }
.tw-c-hw.violett { color: var(--violett-text); background: rgba(184, 168, 255, .1); }
.tw-c-punkte { display: inline-flex; gap: 4px; flex: 0 0 auto; }
.tw-c-punkte i { width: 6px; height: 6px; border-radius: 50%; background: var(--w25); }
.tw-c-punkte i.an { background: var(--gruen); }
.tw-c-z-s { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.tw-c-z-cd { display: flex; flex-direction: column; gap: 2px; }
.tw-c-z-l { font: 400 12px/16px var(--font-brand); color: var(--w45); }
.tw-c-z-w { font: 600 18px/23px var(--font-brand); color: var(--w100); font-variant-numeric: tabular-nums; }
.tw-c-z-a { justify-self: end; display: flex; }
.tw-c-zeilen > .tw-c-z { border-bottom: 1px solid var(--w06); }

/* Karte oben: Panel; `spielt` = violetter Rahmen (tw.css .tw-panel.violett) */
.tw-c-karte { padding: 0 24px; border-radius: 12px; }
.tw-c-karte .tw-c-z { padding: 24px 0; }
.tw-c-karte-dp { border-top: 1px solid var(--w08); padding: 16px 0 20px; }
.tw-c-reihe { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; padding: 0 0 16px; }
.tw-c-sp { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--w08); min-width: 0; }
.tw-c-sp.da { border-color: rgba(140, 198, 63, .35); }
.tw-c-sp.fehlt { border-color: rgba(232, 180, 80, .35); }
.tw-c-sp-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tw-c-sp-n { display: flex; align-items: center; gap: 6px; min-width: 0; }
.tw-c-sp-n small { font: 600 10px/12px var(--font-brand); color: var(--w45); text-transform: uppercase; letter-spacing: .5px; }
.tw-c-sp-st { display: inline-flex; align-items: center; gap: 4px; font: 500 12px/15px var(--font-brand); color: var(--w45); }
.tw-c-sp.da .tw-c-sp-st { color: var(--gruen); }
.tw-c-sp.fehlt .tw-c-sp-st { color: var(--gold2); }
.tw-c-fort { display: flex; flex-direction: column; gap: 8px; padding: 0 0 22px; font: 400 13px/18px var(--font-brand); color: var(--w70); }
.tw-c-fort b { color: var(--w100); font-weight: 600; }
.tw-c-fort.amber { color: var(--gold2); }
.tw-c-bar-amber i { background: var(--gold2); }

/* Leerzustand (W22 „Leerzustand · ohne Turniere“): gestrichelt, mittig */
.tw-c-leer { border: 1px dashed var(--w14); border-radius: 14px; padding: 36px 24px; display: flex; flex-direction: column;
    align-items: center; text-align: center; gap: 8px; }
.tw-c-leer b { font: 600 18px/24px var(--font-brand); color: var(--w100); }
.tw-c-leer p { margin: 0 0 8px; font: 400 14px/21px var(--font-brand); color: var(--w70); max-width: 48ch; }

/* Rechte Spalte: Team-Zeilen, Einladung, Ergebnisse */
.tw-c-tzliste { display: flex; flex-direction: column; }
.tw-c-tz { display: flex; align-items: center; gap: 12px; padding: 8px 0; text-decoration: none; color: inherit; min-width: 0; }
.tw-c-tz-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.tw-c-tz:hover .tw-name { color: var(--violett-text); }
.tw-c-einp { display: flex; flex-direction: column; gap: 14px; border-radius: 14px; }
.tw-c-einp-z { display: flex; align-items: center; gap: 12px; font: 500 14px/20px var(--font-brand); color: var(--w100); min-width: 0; }
.tw-c-einp-z span { overflow-wrap: anywhere; }
.tw-c-erg { display: grid; grid-template-columns: 84px minmax(0, 1fr) 14px; gap: 12px; align-items: center; padding: 14px 0;
    text-decoration: none; color: inherit; min-width: 0; }
.tw-c-erg-p { font: 600 15px/20px var(--font-brand); color: var(--w45); overflow-wrap: anywhere; }
.tw-c-erg-p.gold { color: var(--gold2); }
.tw-c-erg-p.bronze { color: var(--lb-r3); }
.tw-c-erg-p.silber { color: var(--w100); }
.tw-c-erg-p.live { color: var(--gruen); }
.tw-c-erg-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.tw-c-erg-t .tw-mini { overflow-wrap: anywhere; }
.tw-c-erg:hover .tw-name, .tw-c-anm:hover .tw-name, .tw-c-next:hover .tw-name, .tw-c-se-cup:hover .tw-name { color: var(--violett-text); }

/* ── Teams (W23) ── */
.tw-c-meine { display: flex; flex-direction: column; gap: 40px; }
.tw-c-meine .tw-abschnitt { gap: 14px; }
.tw-c-tkgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tw-c-tk { display: flex; flex-direction: column; gap: 12px; padding: 18px; background: var(--w03); } /* Kasten = klickbar, aber keine gefuellte Handlung (§14) */
.tw-c-tk-kopf { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tw-c-tk-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.tw-c-tk-t .tw-name { font-size: 16px; line-height: 20px; }
.tw-c-tk-zahlen { font: 400 12px/16px var(--font-brand); color: var(--w45); }
.tw-c-tk-next { border-top: 1px solid var(--w08); padding-top: 12px; font: 400 13px/18px var(--font-brand); color: var(--w45); overflow-wrap: anywhere; }
.tw-c-tk-next.an { color: var(--w70); }
.tw-c-ein { display: flex; align-items: center; gap: 14px; padding: 14px 18px; }
.tw-c-ein.amber { border-color: rgba(232, 180, 80, .35); }
.tw-c-ein-ic { color: var(--gold2); display: inline-flex; }
.tw-c-ein-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; font: 400 14px/20px var(--font-brand); color: var(--w70); }
.tw-c-ein-t b { color: var(--w100); font-weight: 600; }
.tw-c-ein-t span { overflow-wrap: anywhere; }
.tw-c-anf { display: flex; align-items: center; gap: 14px; padding: 12px 0; }
.tw-c-gast { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; }
.tw-c-gast > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tw-c-such { position: relative; display: flex; align-items: center; }
.tw-c-such > svg { position: absolute; left: 13px; color: var(--w45); pointer-events: none; }
.tw-c-such .tw-feld { padding-left: 38px; height: 44px; }
.tw-c-tr { display: grid; grid-template-columns: minmax(0, 1fr) 72px 120px 150px; gap: 16px; align-items: center; padding: 12px 0; }
.tw-c-tr-n { display: flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none; color: inherit; }
.tw-c-tr-n:hover .tw-name { color: var(--violett-text); }
.tw-c-tr-tag { font: 500 13px/16px var(--font-brand); color: var(--w45); }
.tw-c-tr-k { font: 400 13px/16px var(--font-brand); color: var(--w70); font-variant-numeric: tabular-nums; }
.tw-c-tr-a { justify-self: end; display: flex; }
.tw-c-tr-st { font: 400 13px/16px var(--font-brand); color: var(--w45); }
.tw-c-mehr { margin-top: 14px; }
.tw-c-akt { display: flex; flex-direction: column; gap: 2px; padding: 12px 0; font: 400 14px/20px var(--font-brand); color: var(--w70); }
.tw-c-akt b { color: var(--w100); font-weight: 600; }
.tw-c-info { border: 1px solid var(--w12); border-radius: 10px; padding: 12px 14px; font: 400 13px/18px var(--font-brand); color: var(--w70); }

/* ── Dialog Team erstellen (W24) ── */
.tw-c-dlg .tw-feld-l { gap: 8px; }
.tw-c-tagz { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tw-c-tag { width: 120px; text-transform: uppercase; letter-spacing: .06em; }
.tw-c-farbz { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.tw-c-farben { display: flex; flex-wrap: wrap; gap: 8px; }
.tw-c-farbe { width: 30px; height: 30px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: rgb(var(--tf));
    flex: 0 0 auto; transition: box-shadow .12s ease; }
.tw-c-farbe:hover { box-shadow: 0 0 0 2px var(--erhoeht), 0 0 0 4px var(--w45); }
.tw-c-farbe[aria-checked="true"] { box-shadow: 0 0 0 2px var(--erhoeht), 0 0 0 4px var(--w100); }
.tw-c-farben.klein { gap: 6px; }
.tw-c-farben.klein .tw-c-farbe { width: 22px; height: 22px; }
.tw-c-farbname { font: 500 13px/16px var(--font-brand); color: var(--w70); }
.tw-c-logoz { display: flex; align-items: stretch; gap: 16px; }
.tw-c-drop { flex: 1 1 auto; min-height: 88px; border: 1px dashed var(--w14); border-radius: 10px; background: transparent; color: var(--w70);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: pointer;
    font: 400 13px/18px var(--font-brand); padding: 12px; min-width: 0; }
.tw-c-drop:hover { border-color: var(--w45); color: var(--w100); }
.tw-c-drop.mit { flex-direction: row; justify-content: flex-start; gap: 12px; }
.tw-c-drop img { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; flex: 0 0 48px; }
.tw-c-drop span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.tw-c-logo-vs { display: flex; align-items: center; justify-content: center; }

/* ── Team-Seite (W4 · W10 · M7) ── */
.tw-c-tkopf { display: flex; align-items: center; gap: 24px; margin-top: 20px; min-width: 0; }
.tw-c-tkopf-t { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1 1 auto; }
.tw-c-tkopf-z1 { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; min-width: 0; }
.tw-c-tkopf-z2 { display: flex; flex-wrap: wrap; gap: 4px 8px; font: 400 14px/20px var(--font-brand); color: var(--w70); }
.tw-c-tkopf-z2 i { font-style: normal; color: var(--w25); }
.tw-c-tkopf-k { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.tw-c-oben { margin-top: 24px; }
.tw-c-join { display: flex; align-items: center; gap: 16px; padding: 20px 22px; }
.tw-c-join-t { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; }
.tw-c-hw-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }

/* Kader-Tabelle: Spieler · Rolle · 5v5 GDR · Riot ID · ••• */
.tw-c-ktab { display: flex; flex-direction: column; }
.tw-c-kz { display: grid; grid-template-columns: minmax(0, 1fr) 160px 84px 170px 32px; gap: 16px; align-items: center;
    padding: 10px 0; border-bottom: 1px solid var(--w06); min-width: 0; }
.tw-c-ktab.kap .tw-c-kz { grid-template-columns: minmax(0, 1fr) 210px 72px 150px 32px; }
.tw-c-kz.kopf { padding: 0 0 8px; font: 600 11px/14px var(--font-brand); letter-spacing: .66px; text-transform: uppercase; color: var(--w45); }
.tw-c-kz.kopf > span { font: inherit; color: inherit; }
.tw-c-kz.du { background: linear-gradient(90deg, rgba(124, 92, 255, .08), rgba(124, 92, 255, 0) 70%); }
.tw-c-kz-sp { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tw-c-kz-n { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tw-c-kz-unter { display: none; font: 400 12px/15px var(--font-brand); color: var(--w45); }
.tw-c-kz-r { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tw-c-rolle-t { font: 400 14px/18px var(--font-brand); color: var(--w70); }
.tw-c-kz-g { font: 500 14px/18px var(--font-brand); color: var(--w100); }
.tw-c-kz-m { position: relative; display: flex; justify-content: flex-end; }
.tw-c-riot { display: inline-flex; align-items: center; gap: 4px; font: 500 13px/16px var(--font-brand); color: var(--w45); }
.tw-c-riot.ok { color: var(--gruen); }
.tw-c-riot.fehlt { color: var(--gold2); }
.tw-c-lane select { height: 36px; min-width: 120px; padding-right: 30px; }
.tw-c-subtag { font: 600 11px/14px var(--font-brand); letter-spacing: .3px; color: var(--w70); border: 1px solid var(--w14);
    border-radius: 6px; padding: 3px 6px; text-transform: uppercase; }
.tw-c-krone { color: var(--gold2); display: inline-flex; }
.tw-c-dots { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--w08); background: transparent; color: var(--w70);
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.tw-c-dots:hover, .tw-c-dots[aria-expanded="true"] { color: var(--w100); background: var(--w06); }
.tw-c-menue { position: absolute; right: 0; top: 38px; z-index: 30; min-width: 220px; background: var(--erhoeht); border: 1px solid var(--border2);
    border-radius: 12px; padding: 6px; box-shadow: 0 8px 24px rgba(0, 0, 0, .5); display: flex; flex-direction: column; gap: 2px; }
.tw-c-menue-o { display: block; width: 100%; text-align: left; padding: 9px 10px; border-radius: 8px; background: none; border: 0;
    color: var(--w100); font: 500 14px/18px var(--font-brand); cursor: pointer; white-space: nowrap; }
.tw-c-menue-o:hover { background: var(--w06); }
.tw-c-menue-o.warn { color: var(--gold2); }

/* Einladen (W10): Suchfeld öffnet den Dialog, Einladungslink, offene Einladungen/Anfragen */
.tw-c-suchfeld { width: 100%; height: 44px; border: 1px solid var(--w08); border-radius: 8px; background: var(--w03); color: var(--w45);
    display: flex; align-items: center; gap: 10px; padding: 0 14px; text-align: left; font: 400 14px/1 var(--font-brand); cursor: pointer; }
.tw-c-suchfeld:hover { border-color: var(--w25); color: var(--w70); }
.tw-c-suchfeld.aus { opacity: .45; pointer-events: none; }
.tw-c-linkz { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tw-c-linkz-l { display: inline-flex; align-items: center; gap: 6px; font: 500 13px/16px var(--font-brand); color: var(--w70); }
.tw-c-linkz .tw-feld { flex: 1 1 220px; min-width: 0; font: 400 13px/1 var(--font-brand); color: var(--w70); }
.tw-c-of { display: flex; align-items: center; gap: 12px; padding: 12px 0; flex-wrap: wrap; }
.tw-c-of-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 160px; }
.tw-c-anm { display: flex; align-items: center; gap: 12px; padding: 12px 0; text-decoration: none; color: inherit; min-width: 0; }

/* Rechte Spalte der Team-Seite */
.tw-c-kz3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tw-c-kz3 > div { background: var(--flaeche); border: 1px solid var(--border); border-radius: 12px; padding: 14px 10px 14px 12px;
    display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tw-c-kz3 .tw-cap { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: .3px; }
.tw-c-kz3 b { font: 600 22px/26px var(--font-brand); color: var(--w100); white-space: nowrap; }
.tw-c-next { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; min-width: 0; }
.tw-c-l { font: 500 13px/16px var(--font-brand); color: var(--w70); }
.tw-c-lpz { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tw-c-lpz .tw-c-l { min-width: 40px; }
#tw-c-einst .tw-feld-l { gap: 6px; }

/* Dialoge: Spieler einladen, Kapitän übergeben */
.tw-c-trliste { display: flex; flex-direction: column; max-height: 320px; overflow-y: auto; min-height: 40px; }
.tw-c-trz { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--w06); }
.tw-c-ok { display: inline-flex; align-items: center; gap: 4px; font: 500 13px/16px var(--font-brand); color: var(--gruen); }
.tw-c-wahl { display: flex; flex-direction: column; gap: 6px; max-height: 360px; overflow-y: auto; }
.tw-c-wahl-z { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--w08); border-radius: 10px;
    background: none; color: var(--w100); text-align: left; width: 100%; cursor: pointer; font: inherit; }
.tw-c-wahl-z:hover { border-color: var(--w25); }
.tw-c-wahl-z[aria-checked="true"] { border-color: var(--violett); background: rgba(124, 92, 255, .08); }
.tw-c-wahl-z .tw-name { flex: 0 1 auto; }
.tw-c-wahl-z .tw-mini { margin-left: auto; }
.tw-c-radio { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--w25); flex: 0 0 16px; box-sizing: border-box; }
.tw-c-wahl-z[aria-checked="true"] .tw-c-radio { border: 5px solid var(--violett-knopf); }

/* ── Serie (W25) ── */
.tw-c-se-steuer { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 20px; }
.tw-c-se-tab { display: flex; flex-direction: column; }
.tw-c-se-z { display: grid; grid-template-columns: 36px minmax(0, 1fr) 64px 80px 64px 170px; gap: 12px; align-items: center;
    min-height: 40px; padding: 0 12px; border-bottom: 1px solid var(--w06); font: 400 14px/18px var(--font-brand); color: var(--w70); }
.tw-c-se-z.kopf { min-height: 32px; font: 600 11px/14px var(--font-brand); letter-spacing: .66px; text-transform: uppercase; color: var(--w45); }
.tw-c-se-z .r { text-align: right; }
.tw-c-se-z .stark { font-weight: 600; color: var(--w100); }
.tw-c-se-z.du { background: rgba(124, 92, 255, .1); }
.tw-c-se-z.du .tw-name { color: var(--violett-text); }
.tw-c-se-z.weg { opacity: .55; }
.tw-c-se-n { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tw-c-se-nt { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.tw-c-se-nt .tw-name { font-weight: 600; }
.tw-c-se-du { font: 600 11px/14px var(--font-brand); color: var(--violett-text); text-transform: uppercase; letter-spacing: .5px; }
.tw-c-se-unter { display: none; flex-basis: 100%; font: 400 12px/15px var(--font-brand); color: var(--w45); }
.tw-c-se-q { font: 500 12px/15px var(--font-brand); color: var(--gruen); text-align: right; }
.tw-c-se-linie { display: flex; align-items: center; gap: 12px; padding: 12px; }
.tw-c-se-linie span { font: 500 12px/15px var(--font-brand); color: var(--violett-text); white-space: nowrap; }
.tw-c-se-linie i { flex: 1 1 auto; height: 1px; background: rgba(124, 92, 255, .6); }
.tw-c-se-pz { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; font: 400 15px/20px var(--font-brand); }
.tw-c-se-pz span { color: var(--w100); }
.tw-c-se-pz span.gold { color: var(--gold2); }
.tw-c-se-pz span.bronze { color: var(--lb-r3); }
.tw-c-se-pz b { font-weight: 600; color: var(--w100); }
.tw-c-se-cup { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; text-decoration: none; color: inherit; min-width: 0; }
.tw-c-se-cup.finale .tw-name { color: var(--violett-text); }
.tw-c-se-mein { display: flex; flex-direction: column; gap: 10px; }
.tw-c-se-mein-k { display: flex; align-items: center; gap: 12px; min-width: 0; }

/* ── Brüche ── */
@media (max-width: 1280px) {
    .tw-c-z { grid-template-columns: 52px minmax(0, 1fr) 180px auto; gap: 0 20px; }
    .tw-c-tr { grid-template-columns: minmax(0, 1fr) 60px 110px 150px; }
}
@media (max-width: 1080px) {
    .tw-c-nur-mobil { display: block; }
    .tw-c-nicht-mobil { display: none !important; }
}
@media (max-width: 760px) {
    .tw-c-tkgrid { grid-template-columns: minmax(0, 1fr); }
    .tw-c-se-z { grid-template-columns: 32px minmax(0, 1fr) 56px 64px 56px; }
    .tw-c-se-z > :last-child { display: none; }
}
@media (max-width: 600px) {
    .tw-c-nur-schmal { display: block; }
    .tw-c-nicht-schmal { display: none !important; }

    /* Meine Turniere (M6): gestapelt — Datum · Typ (grün) / Titel / Zeile / Hinweis / Chip … Countdown / Knopf breit */
    .tw-c-z { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 20px 0; }
    .tw-c-z-d { display: none; }
    .tw-c-z-cap .breit { display: none; }
    .tw-c-z-cap .schmal { display: inline; color: var(--gruen); }
    .tw-c-z-s { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }
    .tw-c-z-cd { flex-direction: row; align-items: baseline; gap: 8px; margin-left: auto; }
    .tw-c-z-w { font-size: 16px; line-height: 20px; }
    .tw-c-z-a { justify-self: stretch; }
    .tw-c-z-a .tw-btn { width: 100%; }
    .tw-c-karte { padding: 0 16px; }
    .tw-c-karte .tw-c-z { padding: 18px 0; }
    .tw-c-reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* Teams */
    .tw-c-ein { flex-wrap: wrap; padding: 14px 16px; }
    .tw-c-ein .tw-c-knopfz { width: 100%; }
    .tw-c-ein .tw-c-knopfz > * { flex: 1 1 0; }
    .tw-c-gast { flex-direction: column; align-items: stretch; }
    .tw-c-tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n a" "k a"; gap: 2px 12px; }
    .tw-c-tr-n { grid-area: n; }
    .tw-c-tr-tag { display: none; }
    .tw-c-tr-k { grid-area: k; padding-left: 48px; font-size: 12px; color: var(--w45); }
    .tw-c-tr-a { grid-area: a; }
    .tw-c-logoz { flex-direction: column; }
    .tw-c-logo-vs { justify-content: flex-start; }

    /* Team-Seite (M7) */
    .tw-c-tkopf { gap: 16px; align-items: flex-start; }
    .tw-c-tkopf .tw-logo.s80 { --gr: 64px; }
    .tw-c-tkopf-k:empty { display: none; }
    .tw-c-tkopf { flex-wrap: wrap; }
    .tw-c-tkopf-t { flex-basis: calc(100% - 80px); }
    .tw-c-tkopf-k { width: 100%; justify-content: stretch; }
    .tw-c-tkopf-k .tw-btn { flex: 1 1 0; }
    .tw-c-join { flex-wrap: wrap; }
    .tw-c-join .tw-btn { width: 100%; }
    .tw-c-kz, .tw-c-ktab.kap .tw-c-kz { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "sp g m"; gap: 8px 12px; }
    .tw-c-kz-sp { grid-area: sp; } .tw-c-kz-g { grid-area: g; text-align: right; } .tw-c-kz-m { grid-area: m; }
    .tw-c-kz-r, .tw-c-kz-ri { display: none; }
    .tw-c-kz-unter { display: block; }
    .tw-c-kz.kopf .tw-c-kz-m { display: none; }
    .tw-c-ktab.kap .tw-c-kz:not(.kopf), .tw-c-kz.du:has(select) { grid-template-areas: "sp g m" "r r r"; }
    .tw-c-ktab.kap .tw-c-kz:not(.kopf) .tw-c-kz-r, .tw-c-kz.du:has(select) .tw-c-kz-r { display: flex; grid-area: r; padding-left: 38px; }
    .tw-c-kz3 { gap: 8px; }
    .tw-c-kz3 > div { padding: 12px; }
    .tw-c-kz3 b { font-size: 18px; line-height: 22px; }
    .tw-c-linkz .tw-feld { flex-basis: 100%; }
    .tw-c-of .tw-c-knopfz { margin-left: auto; }

    /* Serie */
    .tw-c-se-z { grid-template-columns: 28px minmax(0, 1fr) 52px; padding: 8px 10px; }
    .tw-c-se-z > :nth-child(3), .tw-c-se-z > :nth-child(4), .tw-c-se-z > :last-child { display: none; }
    .tw-c-se-unter { display: block; }
}

/* ═════════ Schaufenster SF4 (BAUPLAN-WEBSITE · Figma T2 307:15474 · T2-Gast 333:20120 · T3 308:15653 · T3-Gast 333:18586 ·
   M-T2 338:19693 · M-T3 338:20133) — /meine-turniere, /teams, Kopf /team/<id> + /serie/<id>. Bausteine .tw-sf-* aus tw.css;
   hier nur das Seitengeruest (Abstaende, Raster). Die W1-Regeln oben bleiben (Team-Seite, Serie, Dialoge). ═════════ */
body.page-meine-turniere, body.page-teams, body.page-team, body.page-serie { position: relative; }
.tw-main.tw-c-sf { padding-top: calc(72px + 132px); }
.tw-main.tw-c-sf.liste::before { display: none; }
body.page-team .tw-main.tw-c-sf, body.page-serie .tw-main.tw-c-sf { padding-top: calc(72px + 96px); }
body.page-meine-turniere .tw-main.tw-c-sf, body.page-teams .tw-main.tw-c-sf { display: flex; flex-direction: column; gap: 56px; }
.tw-main.tw-c-sf > :empty { display: none; }
.tw-main.tw-c-sf > .tw-rumpf { margin-top: 0; }
.tw-main.tw-c-sf > .tw-rumpf[hidden] { display: none; }
body.page-team .tw-main.tw-c-sf > .tw-rumpf, body.page-serie .tw-main.tw-c-sf > .tw-rumpf { margin-top: 48px; }
.tw-c-team-hero .tw-sf-titel { font-size: 56px; }

/* T2: Partie-Leiste im Hero, Coming up (Bild-Zeilen), History, rechte Spalte, Gast (Schritte + Karten) */
.tw-c-hero-dp { margin-top: 28px; max-width: 880px; }
.tw-c-hero-dp .tw-b-dp { background: rgba(12,13,17,.72); }
.tw-c-bzliste { display: flex; flex-direction: column; gap: 16px; }
.tw-c-bzliste .tw-c-hws { margin-top: 4px; }
.tw-c-bzliste .tw-c-karte-dp { padding: 12px 0 0; }
.tw-c-bzliste .tw-c-reihe, .tw-c-bzliste .tw-c-fort { margin-top: 8px; }
.tw-c-cd { display: inline-flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.tw-c-cd .l { color: var(--w45); }
.tw-c-cd .tw-zahl { color: var(--w100); font-weight: 600; }
.tw-c-vzliste { display: flex; flex-direction: column; }
.tw-c-mehrknopf { width: 100%; margin-top: 12px; justify-content: center; }
.tw-c-tz-nx { font: 500 12px/15px var(--font-brand); color: var(--w45); overflow-wrap: anywhere; }
.tw-c-tz-nx.an { color: var(--violett-text); }
.tw-c-tzliste .tw-c-tz { padding: 10px 0; }
.tw-c-plus { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 13px; font-weight: 600; align-self: flex-start; }
.tw-c-voll { display: flex; flex-direction: column; gap: 48px; min-width: 0; }
.tw-c-karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }


/* T3: Team-Raster (3 Spalten, eigene Teams + Plus-Karte), Einladungen, Filterzeile (Suche · Rollen · Sortierung), Top teams */
.tw-c-sf .tw-c-tkgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 32px; }
.tw-c-riot { margin: 4px 0 0; }
.tw-c-einliste { display: flex; flex-direction: column; gap: 12px; }
.tw-c-ein.violett { border-color: rgba(124,92,255,.45); background: linear-gradient(90deg, rgba(124,92,255,.08), rgba(124,92,255,0) 60%), var(--flaeche); }
.tw-c-fz { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; min-width: 0; margin-bottom: 8px; }
.tw-c-fz .tw-c-such { flex: 0 1 360px; min-width: 220px; }
.tw-c-rollen { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }
.tw-c-rollenz { display: flex; gap: 8px; flex-wrap: wrap; }
.tw-c-rolle { height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--w14); background: none; cursor: pointer;
    font: 500 13px/16px var(--font-brand); color: var(--w70); white-space: nowrap; }
.tw-c-rolle:hover { border-color: var(--w25); color: var(--w100); }
.tw-c-rolle.an { border-color: rgba(140,198,63,.55); background: rgba(140,198,63,.12); color: var(--gruen); font-weight: 600; }
.tw-c-rolle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tw-c-sort { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font: 400 13px/16px var(--font-brand); color: var(--w55); }
.tw-c-sort select { height: 36px; width: auto; min-width: 140px; }

@media (max-width: 1080px) {
    .tw-c-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
    .tw-c-sf .tw-c-tkgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
    .tw-c-team-hero .tw-sf-titel { font-size: 44px; }
}
@media (max-width: 600px) {
    .tw-main.tw-c-sf, body.page-team .tw-main.tw-c-sf, body.page-serie .tw-main.tw-c-sf { padding-top: calc(72px + 32px); }
    body.page-meine-turniere .tw-main.tw-c-sf, body.page-teams .tw-main.tw-c-sf { gap: 40px; }
    body.page-team .tw-main.tw-c-sf > .tw-rumpf, body.page-serie .tw-main.tw-c-sf > .tw-rumpf { margin-top: 32px; }
    .tw-c-team-hero .tw-sf-titel { font-size: 34px; }
    .tw-c-karten, .tw-c-sf .tw-c-tkgrid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .tw-c-voll { gap: 32px; }
    .tw-c-hero-dp { margin-top: 20px; }
    .tw-c-fz { flex-direction: column; align-items: stretch; }
    .tw-c-fz .tw-c-such { flex: 1 1 auto; min-width: 0; }
    .tw-c-rolle { height: 34px; padding: 0 12px; }
    .tw-c-sort { margin-left: 0; }
}

/* ═════════ TK14 /teams = Roster-Poster (BAUPLAN-TICKET W2-6 · Figma 648:56165 R-1…R-11, 📘 652:57021) ═════════
   Jedes Team ist ein Poster wie eine Esports-Roster-Ankuendigung: links Teamfarbe + Kuerzel als Kontur + Name + Zeilen (Barlow),
   rechts fuenf schraege Streifen Top → Support. Masse = Figma-Pixel ueber `--u` (Container-Einheit): liegend 1200 × 300
   (R-1), ≤ 760 hochkant 382 × 360 (R-4). Team-Seite: Hero randlos 1440 × 600 (R-5), ROSTER-Tabelle, LOGBOOK als Klapptafel.
   Barlow Condensed = Tafel-Schrift (BRAND-Ausnahme wie Abflugtafel/Bordkarte), Kontur-Woerter = Outfit Black mit Strich.
   Praefix `tw-r-`. Pfeile → / ↗ als Symbol (Outfit-Untermenge kennt nur ↑ ↓). */
.page-teams, .page-team { --lime: 182, 224, 122; --lime-r: 140, 198, 63; --gold-t: 243, 227, 181; --b5: 'Barlow Condensed', 'Outfit', sans-serif; }
.tw-main.tw-r { padding: 72px 120px 96px; max-width: 1440px; }
.tw-r :where(h1, h2, h3, p, ul) { margin: 0; }
.tw-r-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Kontur-Schrift (C.kontur: SVG-Maske = Strich 1,5 aussen wie Figma) — Woerter ROSTERS · WANTED · ROSTER · LOGBOOK, Kuerzel, Rollen */
.tw-r-kontur { display: block; overflow: visible; pointer-events: none; user-select: none; --fs: 230px; --ls: -.06em; --sw: 3px; }
.tw-r-kontur text { font-family: var(--font-brand); font-weight: 900; font-size: var(--fs); letter-spacing: var(--ls); }
.tw-r-kontur text.s { fill: #fff; stroke: #fff; stroke-width: var(--sw); stroke-linejoin: round; }
.tw-r-kontur text.f { fill: #000; }
.tw-r-kontur rect { fill: rgba(var(--k, 255, 255, 255), var(--ka, .16)); }
.tw-r-wort { width: 100%; height: calc(var(--fs) * 1.26); }
.tw-r-cap { font: 600 16px/19px var(--b5); letter-spacing: .16em; text-transform: uppercase; color: var(--w55); }
.tw-r-cap.v { color: #a894ff; }
.tw-r-link { display: inline-flex; align-items: center; gap: 4px; font: 600 16px/20px var(--font-brand); color: #a894ff; text-decoration: none;
    background: none; border: 0; padding: 0; cursor: pointer; white-space: nowrap; }
.tw-r-link.gruen { color: rgb(var(--lime)); }
.tw-r-link:hover { color: var(--w100); }
.tw-r-link svg { width: 14px; height: 14px; }
.tw-r :is(a, button):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* ── Kopf /teams (R-1: Wort 230 bei y 90, Zeile bei 330) ── */
.tw-r-kopf { position: relative; padding-top: 18px; }
/* Design-QoL R4: Kontur-Woerter skalieren mit der Breite statt anzuschneiden — Teiler >= breitestes Wort beider Sprachen in em
   (ROSTERS 4,21 · GESUCHT 4,44 · LOGBOOK 4,81 bei Outfit 900) + Strich, Boden 56 px; so endet das Wort auch auf 360–430 vor dem Rand */
.tw-r-kopf .tw-r-wort { --fs: clamp(56px, calc((100vw - 48px) / 5.2), 230px); margin-left: calc(var(--fs) * -.07); }
.tw-r-kopfz { display: flex; align-items: baseline; justify-content: space-between; gap: 12px 32px; flex-wrap: wrap; margin-top: -50px; position: relative; }
.tw-r-kopfz .tw-r-cap { color: var(--w60, rgba(255,255,255,.6)); }
.tw-r-kopfl { display: flex; gap: 24px; flex-wrap: wrap; margin-right: 31px; }
.tw-r-ab { margin-top: 50px; display: flex; flex-direction: column; gap: 13px; }
.tw-r-ab:empty { display: none; }
.tw-r-labelkopf { display: flex; align-items: center; gap: 12px; }
.tw-r-labelkopf .g { width: 26px; height: 26px; border-radius: 6px; background: #7555fb; color: #fff; display: inline-flex; align-items: center; justify-content: center;
    font: 900 15px/1 var(--font-brand); }
.tw-r-labelz { display: flex; align-items: center; gap: 12px 28px; flex-wrap: wrap; margin-top: 3px; }
.tw-r-labelz .gold { font: 600 17px/20px var(--b5); letter-spacing: .1em; text-transform: uppercase; color: rgb(var(--gold-t)); }
.tw-r-einl { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.tw-r-einl:empty { display: none; }

/* ── Poster (R-1 liegend 1200 × 300 · R-4 hochkant 382 × 360) ── */
.tw-r-liste { display: flex; flex-direction: column; gap: 28px; }
.tw-r-p { --tf: 168, 148, 255; display: block; position: relative; container-type: inline-size; text-decoration: none; color: var(--w100);
    border-radius: 4px; }
.tw-r-p-b { --u: calc(100cqw / 1200); --v: 44; position: relative; height: calc(300 * var(--u)); overflow: hidden; border-radius: 4px;
    background: linear-gradient(90deg, rgba(var(--tf), .22) 0%, #121419 45%, #0e0f13 100%); }
.tw-r-p:hover .tw-r-p-b { box-shadow: 0 0 0 1px rgba(var(--tf), .45); }
.tw-r-p.du .tw-r-p-b { background: linear-gradient(90deg, rgba(var(--tf), .22) 0%, #121419 45%, #0e0f13 100%); }
.tw-r-p-band { position: absolute; left: 0; top: 0; right: 0; height: calc(4 * var(--u)); background: rgb(var(--tf)); }
.tw-r-p-nr { position: absolute; left: calc(32 * var(--u)); top: calc(26 * var(--u)); font: 600 max(10px, calc(16 * var(--u)))/1.2 var(--b5); letter-spacing: .14em; color: var(--w50, rgba(255,255,255,.5)); }
.tw-r-p-tag { position: absolute; left: calc(22 * var(--u)); top: calc(30 * var(--u)); --fs: calc(190 * var(--u)); --ls: -.06em; --sw: max(2px, calc(3 * var(--u)));
    --k: var(--tf); --ka: .55; width: calc(800 * var(--u)); height: calc(var(--fs) * 1.26); }
.tw-r-stempel { position: absolute; left: calc(305 * var(--u)); top: calc(38 * var(--u)); transform: rotate(6deg); transform-origin: left top;
    padding: calc(3 * var(--u)) calc(10 * var(--u)); border: max(1.5px, calc(2 * var(--u))) solid rgba(168, 148, 255, .9); border-radius: 3px;
    font: 600 max(10px, calc(15 * var(--u)))/1.2 var(--b5); letter-spacing: .12em; text-transform: uppercase; color: #a894ff; white-space: nowrap; }
.tw-r-stempel.gold { border-color: rgba(226, 194, 122, .95); color: #e2c27a; transform: rotate(6deg); }
.tw-r-p-kopf { position: absolute; left: calc(30 * var(--u)); bottom: calc(100 * var(--u)); width: calc(420 * var(--u)); display: flex; flex-direction: column;
    align-items: flex-start; gap: calc(12 * var(--u)); }
.tw-r-p-kopf .tw-logo { --gr: calc(48 * var(--u)); border-radius: calc(10 * var(--u)); margin-left: calc(2 * var(--u)); }
.tw-r-p-name { font: 900 calc(40 * var(--u) * var(--fit, 1))/1.25 var(--font-brand); letter-spacing: -.01em; text-transform: uppercase; color: #fff;
    overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tw-r-p-linien { position: absolute; left: calc(32 * var(--u)); top: calc(208 * var(--u)); width: calc(430 * var(--u)); list-style: none; padding: 0;
    display: flex; flex-direction: column; }
.tw-r-p-linien li { font: 600 max(10px, calc(15 * var(--u)))/calc(20 * var(--u)) var(--b5); letter-spacing: .1em; text-transform: uppercase;
    color: var(--w65, rgba(255,255,255,.65)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tw-r-p-linien li.gold { color: rgb(var(--gold-t)); }
.tw-r-p-kurz { display: none; }
/* Streifen: Parallelogramm (clip-path), Bild = Ladebild des Profil-Banners (Data Dragon), Verlauf darueber, Rolle + Name */
.tw-r-p-st { position: absolute; inset: 0; }
.tw-r-s { position: absolute; top: 0; left: calc((470 + var(--i) * 150) * var(--u)); width: calc(186 * var(--u)); height: calc(300 * var(--u));
    clip-path: polygon(calc(var(--v) * var(--u)) 0, 100% 0, calc(100% - var(--v) * var(--u)) 100%, 0 100%); background: #16181e; }
.tw-r-s .bild { position: absolute; inset: 0; background-size: cover; background-position: 50% 12%; }
.tw-r-s .verlauf { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.91) 100%); }
.tw-r-s .rand { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tw-r-s .rand polygon { fill: none; stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 6 6; }
.tw-r-s .r { position: absolute; left: calc(10 * var(--u)); top: calc(236 * var(--u)); font: 600 max(9px, calc(12 * var(--u)))/1.2 var(--b5); letter-spacing: .14em;
    text-transform: uppercase; color: rgba(255,255,255,.75); white-space: nowrap; }
.tw-r-s .n { position: absolute; left: calc(8 * var(--u)); top: calc(254 * var(--u)); max-width: calc(132 * var(--u)); font: 600 calc(20 * var(--u) * var(--fit, 1))/1.2 var(--b5);
    letter-spacing: .04em; text-transform: uppercase; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tw-r-s.anonym .n, .tw-r-s.ohne .n { color: rgba(255,255,255,.6); }
.tw-r-s.anonym, .tw-r-s.ohne { background: #16181e; }
.tw-r-s.gesucht { background: #0c0d11; }
.tw-r-s.gesucht .rand polygon { stroke: rgba(var(--lime-r), .8); }
.tw-r-s.gesucht .w { position: absolute; left: calc(64 * var(--u)); bottom: calc(80 * var(--u)); writing-mode: vertical-rl; transform: rotate(180deg);
    font: 900 calc(34 * var(--u))/1 var(--font-brand); letter-spacing: .1em; color: rgb(var(--lime)); white-space: nowrap; }
.tw-r-s.gesucht .r { left: calc(20 * var(--u)); top: calc(262 * var(--u)); font-size: max(10px, calc(14 * var(--u))); color: rgb(var(--lime)); }
.tw-r-s.frei { background: #101116; }
.tw-r-s.frei .rand polygon { stroke: rgba(255,255,255,.16); }
.tw-r-s.frei .r { color: rgba(255,255,255,.45); }
.tw-r-s.frei .n { color: rgba(255,255,255,.35); }
.tw-r-s .fr { position: absolute; left: calc(70 * var(--u)); top: calc(108 * var(--u)); font: 900 calc(46 * var(--u))/1.26 var(--font-brand); color: rgba(168, 148, 255, .6); }
.tw-r-s .nur-s, .tw-r-p .nur-s { display: none; }
/* Label-Platz leer (R-1/R-3): gestrichelt violett, Klick = „How the label works“ */
.tw-r-p.label-leer .tw-r-p-b, .tw-r-p.geist .tw-r-p-b { border: 1.5px dashed rgba(168, 148, 255, .6); background: linear-gradient(90deg, rgba(168,148,255,.12) 0%, #121419 45%, #0e0f13 100%); }
.tw-r-p.geist .tw-r-p-b { border-color: rgba(255,255,255,.25); background: linear-gradient(90deg, rgba(255,255,255,.05) 0%, #121419 45%, #0e0f13 100%); }
.tw-r-p.geist .tw-r-p-band { background: rgba(255,255,255,.3); }
.tw-r-p.geist .tw-r-p-tag { --k: 255, 255, 255; --ka: .25; }
.tw-r-p.label-leer .tw-r-s, .tw-r-p.geist .tw-r-s { background: #0e0f13; }
.tw-r-p.label-leer .tw-r-s .rand polygon { stroke: rgba(168, 148, 255, .45); }
.tw-r-p.geist .tw-r-s .rand polygon { stroke: rgba(255,255,255,.16); }
.tw-r-p.geist .tw-r-s .fr { color: rgba(255,255,255,.25); }
.tw-r-p.label-leer .tw-r-s .r, .tw-r-p.geist .tw-r-s .r { left: calc(18 * var(--u)); top: calc(258 * var(--u)); font-size: max(10px, calc(13 * var(--u))); color: rgba(168, 148, 255, .7); }
.tw-r-p-lk { color: #a894ff !important; display: inline-flex; align-items: center; gap: 4px; }
.tw-r-p-lk svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
/* Label besetzt (R-2): Rahmen Gold → Violett, Stempel REPRESENTING GDN */
.tw-r-p.label .tw-r-p-b { border: 2px solid transparent; background: linear-gradient(90deg, rgba(var(--tf), .22) 0%, #121419 45%, #0e0f13 100%) padding-box,
    linear-gradient(#0e0f13, #0e0f13) padding-box, linear-gradient(90deg, #e2c27a, #a894ff) border-box; }
.tw-r-mehr { align-self: flex-start; margin-top: 4px; }
/* Design-QoL R1: Label-Band unter den Community-Teams (ohne Label-Team), eine Zeile; 430 einspaltig */
.tw-r-lband { display: flex; align-items: center; gap: 12px 20px; margin-top: 14px; padding: 16px 20px; border: 1.5px dashed rgba(168, 148, 255, .5); border-radius: 10px;
    background: linear-gradient(90deg, rgba(168,148,255,.10) 0%, rgba(18,20,25,0) 70%); }
.tw-r-lband .tw-r-cap { margin: 0; white-space: nowrap; }
.tw-r-lband .s { flex: 1; min-width: 0; margin: 0; font: 400 15px/20px var(--font-brand); color: var(--w70); }
.tw-r-lband .tw-r-link { white-space: nowrap; }
@media (max-width: 760px) {
    .tw-r-lband { flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 16px; }
    .tw-r-lband .tw-r-cap { white-space: normal; }
}

/* Filter (Text-Reiter, R-1) */
.tw-r-filter { display: flex; gap: 32px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 15px; }
.tw-r-filter button { background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; flex-direction: column; gap: 6px;
    font: 600 17px/20px var(--b5); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.tw-r-filter button[aria-pressed="true"], .tw-r-filter button[aria-selected="true"] { color: #fff; }
.tw-r-filter button[aria-selected="true"]::after { content: ""; width: 40px; height: 3px; background: #a894ff; }
.tw-r-filter button:hover { color: #fff; }
.tw-r-filter .k { display: none; }

/* ── Wanted-Board (R-1 unten, R-3 leer, R-4 Liste) ── */
.tw-r-wanted { margin-top: 60px; }
.tw-r-wanted .tw-r-wort { --fs: clamp(56px, calc((100vw - 48px) / 4.6), 200px); --k: var(--lime); --ka: .35; margin-left: calc(var(--fs) * -.07); }
.tw-r-wanted.leer .tw-r-wort { --fs: clamp(56px, calc((100vw - 48px) / 5.4), 160px); --ka: .3; }
.tw-r-wz { display: flex; align-items: baseline; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin-top: -32px; position: relative; }
.tw-r-wz .tw-r-cap { color: rgba(255,255,255,.6); }
.tw-r-leertext { font: 400 17px/1.3 var(--font-brand); color: var(--w65, rgba(255,255,255,.65)); max-width: 560px; margin-top: -22px !important; }
.tw-r-brett { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 20px; margin-top: 30px; }
.tw-r-spalte { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.tw-r-spalte > .tw-r-cap { font-size: 15px; color: rgba(255,255,255,.5); margin-bottom: -4px; }
.tw-r-az { position: relative; display: block; min-height: 130px; background: #0f1013; border-radius: 4px; overflow: hidden; color: var(--w100); text-decoration: none;
    border: 0; text-align: left; cursor: pointer; padding: 0; width: 100%; font: inherit; }
.tw-r-az:hover { background: #14151a; }
.tw-r-az.frei { --tf: 168, 148, 255; display: grid; grid-template-columns: 298px minmax(0, 1fr); }
.tw-r-az.frei::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: rgb(var(--tf)); }
.tw-r-az .rk { align-self: center; padding-left: 22px; overflow: hidden; }
.tw-r-az .rk .tw-r-kontur { --fs: var(--rfs, 71px); --ls: -.03em; --k: var(--lime); --ka: .75; width: 100%; height: calc(var(--fs) * 1.26); }
.tw-r-azw { position: relative; }
.tw-r-azw > .ak { position: absolute; right: 12px; top: 18px; background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; align-items: center;
    gap: 6px; font: 600 15px/18px var(--b5); letter-spacing: .12em; text-transform: uppercase; color: #a894ff; }
.tw-r-azw > .ak.leise { color: rgba(255,255,255,.45); cursor: default; }
.tw-r-azw > .ak svg { width: 13px; height: 13px; }
.tw-r-azw > button.ak:hover { color: #fff; }
.tw-r-cap .k { display: none; }
.tw-r-wunten { display: none; }
/* Design-QoL R2: unter vier Anzeigen normale Ueberschrift statt Konturwort; eine Seite = eine Spalte (Kartenbreite wie zweispaltig) */
.tw-r-wanted.klein .tw-r-wz { margin-top: 0; }
.tw-r-wanted.klein .tw-r-brett { margin-top: 22px; }
.tw-r-wanted.klein .tw-r-leertext { margin-top: 12px !important; }
.tw-r-wleer { margin-top: 24px; }
.tw-r-wanted:not(.klein) .tw-r-wleer { margin-top: 38px; }
.tw-r-brett.eins { grid-template-columns: minmax(0, calc(50% - 10px)); }
.tw-r-wanted.klein.eins .tw-r-wz { max-width: calc(50% - 10px); }
.tw-r-wsuche { margin-top: 20px; font: 400 17px/1.3 var(--font-brand); color: var(--w65, rgba(255,255,255,.65));
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.tw-r-az .tx { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px 18px 22px; min-width: 0; }
.tw-r-az .tm { font: 600 18px/22px var(--b5); letter-spacing: .08em; text-transform: uppercase; color: rgb(var(--tf)); overflow-wrap: anywhere; }
.tw-r-az .mt { font: 400 16px/19px var(--b5); color: rgba(255,255,255,.7); overflow-wrap: anywhere; }
.tw-r-az .ak { display: inline-flex; align-items: center; gap: 6px; font: 600 15px/18px var(--b5); letter-spacing: .12em; text-transform: uppercase; color: rgb(var(--lime)); }
.tw-r-az .ak svg { width: 13px; height: 13px; }
.tw-r-az .ak.v { color: #a894ff; }
.tw-r-az .ak.leise { color: rgba(255,255,255,.45); }
.tw-r-az.sp { display: grid; grid-template-columns: 150px minmax(0, 1fr); }
.tw-r-az.sp .st { position: relative; height: 130px; clip-path: polygon(30px 0, 100% 0, calc(100% - 30px) 100%, 0 100%); background: #16181e center 12% / cover no-repeat; }
.tw-r-az.sp .tx { padding: 16px 20px 16px 22px; }
.tw-r-az.sp .kl { font: 600 13px/16px var(--b5); letter-spacing: .14em; text-transform: uppercase; color: #a894ff; }
.tw-r-az.sp .nm { font: 600 26px/31px var(--b5); letter-spacing: .04em; text-transform: uppercase; color: #fff; overflow-wrap: anywhere; }
.tw-r-az.sp .zl { font: 400 14px/18px var(--font-brand); color: rgba(255,255,255,.75); }
.tw-r-az.sp .ak { position: absolute; right: 12px; top: 18px; }
.tw-r-az.sp .ak.leise { color: rgba(255,255,255,.45); }
.tw-r-leer { padding: 22px 24px; border: 1px dashed var(--w12); border-radius: 4px; font: 400 15px/1.35 var(--font-brand); color: var(--w55); }

/* ── Team-Seite: Hero randlos 1440 × 600 (R-5) ── */
.page-team .tw-main.tw-r { padding-top: 72px; }
.tw-r-hero { position: relative; left: 50%; width: 100vw; margin-left: -50vw; container-type: inline-size; --tf: 168, 148, 255; }
/* Figma misst ab der Fensteroberkante (Hero 0–600 hinter der Leiste): sichtbar 528, Streifen ab −72, Zeilen = Figma-y − 72 */
.tw-r-hero-b { --u: min(1px, calc(100cqw / 1440)); --v: 70; position: relative; height: calc(528 * var(--u)); max-width: 1440px; margin: 0 auto; overflow: hidden;
    background: linear-gradient(90deg, rgba(var(--tf), .25) 0%, #121419 40%, #0e0f13 100%); }
.tw-r-hero::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(528 * min(1px, 100cqw / 1440)); background: #0e0f13; z-index: -1; }
.tw-r-hero .tw-r-s { top: calc(-72 * var(--u)); left: calc((600 + var(--i) * 164) * var(--u)); width: calc(226 * var(--u)); height: calc(600 * var(--u)); }
.tw-r-hero .tw-r-p-st { z-index: 1; }
.tw-r-hero .tw-r-s .verlauf { background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.92) 100%); }
.tw-r-hero .tw-r-s .r { left: calc(12 * var(--u)); top: calc(516 * var(--u)); font-size: max(10px, calc(14 * var(--u))); }
.tw-r-hero .tw-r-s .n { left: calc(8 * var(--u)); top: calc(538 * var(--u)); max-width: calc(150 * var(--u)); font-size: calc(24 * var(--u) * var(--fit, 1)); }
.tw-r-hero .tw-r-s.gesucht .w { left: calc(104 * var(--u)); bottom: calc(140 * var(--u)); font-size: calc(52 * var(--u)); }
.tw-r-hero .tw-r-s.gesucht .r { left: calc(14 * var(--u)); top: calc(554 * var(--u)); }
.tw-r-hero .tw-r-s.frei .r { top: calc(516 * var(--u)); }
.tw-r-hero .tw-r-s .rand polygon { stroke-dasharray: 8 8; }
.tw-r-hero-l { position: absolute; left: 0; top: 0; width: calc(700 * var(--u)); height: 100%; background: linear-gradient(90deg, rgba(18,18,23,.9) 60%, rgba(18,18,23,0) 100%); z-index: 0; }
.tw-r-hero-t { position: absolute; z-index: 2; left: calc(120 * var(--u)); top: 0; bottom: 0; width: calc(560 * var(--u)); }
.tw-r-hero-t > * { z-index: 1; }
.tw-r-zurueck { position: absolute; left: 0; top: calc(38 * var(--u)); z-index: 1; display: inline-flex; align-items: center; gap: 6px; font: 600 15px/18px var(--b5); letter-spacing: .12em;
    color: rgba(255,255,255,.6); text-decoration: none; }
.tw-r-zurueck:hover { color: #fff; }
.tw-r-zurueck svg { width: 13px; height: 13px; transform: rotate(180deg); }
.tw-r-hero .tw-r-p-tag { left: calc(-24 * var(--u)); top: calc(38 * var(--u)); --fs: calc(300 * var(--u)); --ls: -.1em; --ka: .5; }
.tw-r-hero-kopf { position: absolute; left: 0; bottom: calc(179 * var(--u)); display: flex; flex-direction: column; align-items: flex-start; gap: calc(12 * var(--u)); width: calc(560 * var(--u)); }
.tw-r-hero-kopf .tw-logo { --gr: calc(64 * var(--u)); border-radius: calc(14 * var(--u)); }
/* Teamfarbe = Unterstrich unter dem Namen (Design-QoL R5; dieselbe Form wie das Band oben am Listen-Poster .tw-r-p-band) — nie am Seitenrand */
.tw-r-hero-kopf::after { content: ""; position: absolute; left: 0; top: calc(100% - 7 * var(--u) * var(--fit, 1)); width: calc(120 * var(--u)); height: max(3px, calc(4 * var(--u)));
    background: rgb(var(--tf)); }
.tw-r-hero h1 { font: 900 calc(72 * var(--u) * var(--fit, 1))/1.26 var(--font-brand); letter-spacing: -.02em; text-transform: uppercase; color: #fff; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tw-r-hero-z { position: absolute; left: calc(2 * var(--u)); top: calc(348 * var(--u)); display: flex; flex-direction: column; gap: calc(4 * var(--u)); }
.tw-r-hero-z p { font: 600 max(12px, calc(18 * var(--u)))/1.22 var(--b5); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.7); white-space: nowrap; }
.tw-r-hero .tw-r-stempel { left: calc(320 * var(--u)); top: calc(228 * var(--u)); transform: rotate(-6deg); font-size: max(11px, calc(15 * var(--u))); }
.tw-r-akt { position: absolute; left: 0; top: calc(428 * var(--u)); display: flex; gap: 10px; flex-wrap: wrap; }
.tw-r-akt .tw-btn.voll { background: rgba(var(--lime-r), .14); border-color: rgba(var(--lime-r), .5); color: rgb(var(--lime)); }
.tw-r-akt .tw-btn.aus { opacity: .6; }

/* ROSTER-Tabelle (R-5): # 50 · Rolle 130 · Spieler 280 · Mains 260 · GDR|Games together 160 · Spiele 140 · Seit (Design-QoL R3: Wappen + Spalte) */
.tw-r-sek { margin-top: 42px; }
.tw-r-sek .tw-r-wort { --fs: clamp(56px, calc((100vw - 48px) / 8), 120px); --ka: .14; --ls: -.04em; margin-left: calc(var(--fs) * -.1); }
.tw-r-tab { margin-top: -11px; position: relative; }
.tw-r-tz { display: grid; grid-template-columns: 50px 130px 280px 260px 160px 140px minmax(0, 1fr); align-items: center; min-height: 55px;
    border-bottom: 1px solid rgba(255,255,255,.07); font: 400 18px/22px var(--b5); letter-spacing: .04em; color: rgba(255,255,255,.7); }
.tw-r-tz.kopf { min-height: 27px; align-items: start; font: 600 14px/17px var(--b5); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.45); }
.tw-r-tz > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 12px; }
.tw-r-tz .sp { font: 600 22px/26px var(--b5); color: #fff; text-decoration: none; }
a.tw-r-tz-a { color: inherit; text-decoration: none; }
.tw-r-tz .sp a { color: #fff; text-decoration: none; }
.tw-r-tz .sp a:hover { color: #b8a8ff; }
.tw-r-tz .sp.anonym { color: rgba(255,255,255,.55); }
.tw-r-tz .gd { display: inline-flex; align-items: center; gap: 8px; }
.tw-r-tz .gd .zahl { font-variant-numeric: tabular-nums; }
.tw-r-wp { width: 24px; height: 24px; flex: 0 0 24px; object-fit: contain; vertical-align: middle; }
.tw-r-tz .un .tw-r-wp { width: 16px; height: 16px; flex-basis: 16px; margin-right: 4px; margin-top: -3px; }
.tw-r-tz.offen { color: rgb(var(--lime)); }
.tw-r-tz.offen .sp { color: rgb(var(--lime)); }
.tw-r-tz.grau { color: rgba(255,255,255,.4); }
.tw-r-tz.grau .sp { color: rgba(255,255,255,.4); }
.tw-r-tz .lang { grid-column: 4 / -1; display: inline-flex; gap: 6px; align-items: center; }
.tw-r-tz .lang button, .tw-r-tz .lang a { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }
.tw-r-tz .lang svg { width: 13px; height: 13px; }
/* LOGBOOK = Abflugtafel-Zeilen (Klappblaetter 16 × 27, Barlow 22) */
.tw-r-log { margin-top: -11px; position: relative; display: flex; flex-direction: column; gap: 4px; max-width: 896px; }
.tw-r-lz { display: grid; grid-template-columns: 88px 358px 200px 178px; gap: 0 24px; align-items: center; min-height: 52px; border-bottom: 1px solid rgba(255,255,255,.07);
    color: var(--w100); text-decoration: none; }
.tw-r-lz:hover { background: rgba(255,255,255,.02); }
.tw-r-ks { display: inline-flex; gap: 2px; color: rgba(255,255,255,.8); }
.tw-r-ks i { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 27px; flex: 0 0 16px; border-radius: 2.5px;
    background: linear-gradient(180deg, #24252b 0, #1c1d22 50%, #141519 50%, #0f1013 100%); box-shadow: 0 1.5px 1.5px rgba(0,0,0,.7);
    font: 600 22px/1 var(--b5); font-style: normal; overflow: hidden; }
.tw-r-ks i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0,0,0,.95); }
.tw-r-ks i.lz, .tw-r-ks i.l { color: transparent; }
/* P4: Leerblatt dunkler als der Grund (T1-Regel wie tw.css) */
.tw-r-ks i.lz, .tw-r-ks i.l { background: linear-gradient(180deg, rgba(0, 0, 0, .38) 0, rgba(0, 0, 0, .38) 50%, rgba(0, 0, 0, .5) 50%, rgba(0, 0, 0, .5) 100%);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .03); }
.tw-r-ks i.lz::after, .tw-r-ks i.l::after { background: rgba(0, 0, 0, .55); box-shadow: none; }
.tw-r-lz .d { color: rgb(var(--gold-t)); }
.tw-r-lz .m { font: 400 17px/20px var(--b5); color: rgba(255,255,255,.55); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tw-r-lz .s.gold { color: #e2c27a; } .tw-r-lz .s.silber { color: #d6dbe6; } .tw-r-lz .s.bronze { color: #c98a5a; }
.tw-r-lz .s.live { color: #ff7a7a; } .tw-r-lz .s.standby { color: #e8b450; } .tw-r-lz .s.boarding { color: rgba(255,255,255,.85); }
.tw-r-logleer { font: 400 16px/1.35 var(--font-brand); color: var(--w55); padding: 16px 0; }
.tw-r-logleer a { color: #a894ff; }
/* Design-QoL 36 (R15/R16): ohne Mains rueckt alles nach; Konturwort erst ab zwei Eintraegen, sonst Abschnittsueberschrift */
.tw-r-tab.ohne-mn .tw-r-tz { grid-template-columns: 50px 130px 280px 160px 140px minmax(0, 1fr); }
.tw-r-kcap { margin: 0; }
.tw-r-kopf.klein { padding-top: 40px; }
.tw-r-kopf.klein .tw-r-kopfz { margin-top: 10px; }
.tw-r-sek.klein .tw-r-log { margin-top: 18px; }
.tw-r-sek.klein .tw-r-logleer { padding-top: 10px; }
/* Verwalten (Kapitaen/Mitglied, „Manage team“): die bestehenden Bausteine der Team-Seite (W1/SF4) unter dem Logbuch */
.tw-r-verw { margin-top: 56px; display: flex; flex-direction: column; gap: 28px; max-width: 900px; }
.tw-r-verw[hidden] { display: none; }
.tw-r-verw .tw-abschnitt:empty { display: none; }

/* ── Dialoge (Boarding-Check-Muster, Figma R-7/R-8/R-9/R-9b) ── */
.tw-dlg.tw-r-dlg { width: 620px; padding: 32px 36px; gap: 20px; }
.tw-dlg.tw-r-dlg.breit { width: 664px; }
.tw-r-dlg .tw-tk11-kopf h2 { font-size: 30px; line-height: 36px; letter-spacing: -.01em; }
.tw-r-sitz { display: flex; align-items: center; gap: 14px; min-height: 57px; padding: 0 18px; border: 1px dashed rgba(168, 148, 255, .35); border-radius: 12px;
    background: rgba(124, 92, 255, .1); }
.tw-r-sitz .l { font: 600 15px/1 var(--b5); letter-spacing: .1em; text-transform: uppercase; color: #a894ff; white-space: nowrap; }
.tw-r-sitz .tw-r-ks { color: rgb(var(--gold-t)); }
.tw-r-sitz .ks18 i { width: 16px; height: 27px; }
.tw-r-sitz .w { font: 600 22px/1 var(--b5); color: rgba(255,255,255,.5); text-transform: uppercase; white-space: nowrap; }
.tw-r-sitz .t { margin-left: auto; text-align: right; font: 400 13px/16px var(--font-brand); color: rgba(255,255,255,.55); min-width: 0; overflow-wrap: anywhere; }
.tw-r-dcap { font: 600 11px/14px var(--font-brand); letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: -6px; }
.tw-r-cps { display: flex; flex-direction: column; gap: 20px; }
.tw-r-cps .tw-tk-cp { min-height: 70px; padding: 0 22px; }
button.tw-tk-cp { width: 100%; text-align: left; cursor: pointer; font: inherit; color: inherit; }
button.tw-tk-cp[aria-checked="false"] { --cp: 124, 92, 255; border-color: rgba(124, 92, 255, .6); }
.tw-r-dfuss { display: flex; align-items: center; gap: 10px; }
.tw-r-dfuss p { flex: 1 1 auto; font: 400 13px/16px var(--font-brand); color: rgba(255,255,255,.5); min-width: 0; }
.tw-r-bekommt { font: 600 15px/20px var(--b5); letter-spacing: .08em; text-transform: uppercase; color: #a894ff; overflow-wrap: anywhere; }
.tw-r-reiter { display: flex; gap: 45px; }
.tw-r-reiter button { background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; flex-direction: column; gap: 6px;
    font: 600 17px/20px var(--b5); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.tw-r-reiter button[aria-selected="true"] { color: #fff; }
.tw-r-reiter button[aria-selected="true"]::after { content: ""; width: 40px; height: 3px; background: #a894ff; }
.tw-r-rollen { display: flex; gap: 0 26px; flex-wrap: wrap; }
.tw-r-rollen button { background: none; border: 0; padding: 0 0 4px; cursor: pointer; font: 600 18px/22px var(--b5); letter-spacing: .08em; text-transform: uppercase;
    color: rgba(255,255,255,.5); border-bottom: 2px solid transparent; }
.tw-r-rollen button[aria-pressed="true"] { color: rgb(var(--lime)); border-bottom-color: rgb(var(--lime)); }
.tw-r-zeiten { display: flex; gap: 10px 26px; flex-wrap: wrap; }
.tw-r-zeiten button { background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; font: 400 15px/18px var(--font-brand); color: rgba(255,255,255,.85); }
.tw-r-zeiten .k { width: 20px; height: 20px; border-radius: 5px; border: 1px solid rgba(255,255,255,.35); display: inline-flex; align-items: center; justify-content: center; }
.tw-r-zeiten .k svg { width: 12px; height: 12px; stroke-width: 3.4; display: none; }
.tw-r-zeiten button[aria-checked="true"] .k { background: #7555fb; border-color: #7555fb; }
.tw-r-zeiten button[aria-checked="true"] .k svg { display: block; }
.tw-r-feld { position: relative; }
.tw-r-feld input { width: 100%; height: 49px; box-sizing: border-box; padding: 0 70px 0 17px; border-radius: 10px; border: 1px solid rgba(168, 148, 255, .6);
    background: rgba(255,255,255,.03); color: rgba(255,255,255,.9); font: 400 15px/1 var(--font-brand); }
.tw-r-feld .n { position: absolute; right: 17px; top: 50%; transform: translateY(-50%); font: 400 13px/1 var(--font-brand); color: rgba(255,255,255,.45); pointer-events: none; }
.tw-r-vs .tw-r-az { pointer-events: none; }
.tw-r-dlg .tw-r-az.frei { grid-template-columns: 298px minmax(0, 1fr); }
.tw-r-dlg .tw-r-az.frei .rk { --rfs: 61px; }

/* ── Breiten ── */
@media (max-width: 1240px) {
    .tw-main.tw-r { padding-left: 40px; padding-right: 40px; }
    .tw-r-tz { grid-template-columns: 44px 110px minmax(0, 1.4fr) minmax(0, 1.4fr) 150px 80px minmax(0, 1fr); }
    .tw-r-tab.ohne-mn .tw-r-tz { grid-template-columns: 44px 110px minmax(0, 1.4fr) 150px 80px minmax(0, 1fr); }
}
@media (max-width: 1080px) {
    .tw-r-brett, .tw-r-brett.eins { grid-template-columns: minmax(0, 1fr); }
    .tw-r-wanted.klein.eins .tw-r-wz { max-width: none; }
    .tw-r-az.frei { grid-template-columns: 240px minmax(0, 1fr); }
    .tw-r-az .rk { --rfs: 56px !important; }
}
@media (max-width: 760px) {
    .tw-main.tw-r { padding: 72px 24px 64px; }
    .tw-r-kopf { padding-top: 24px; }
    .tw-r-kopfz { margin-top: -6px; }
    .tw-r-kopfz .tw-r-cap { font-size: 14px; letter-spacing: .14em; }
    .tw-r-kopfl { display: none; }
    .tw-r-cap { font-size: 14px; letter-spacing: .14em; }
    .tw-r-ab { margin-top: 18px; gap: 18px; }
    .tw-r-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 18px; }
    /* Poster hochkant (R-4): 382 × 360 — Kopf 0–170, Streifen 170–360 (92 × 190, Versatz 22, Schritt 74) */
    .tw-r-p { max-width: 460px; }
    .tw-r-p-b { --u: calc(100cqw / 382); --v: 22; height: calc(360 * var(--u));
        background: linear-gradient(180deg, rgba(var(--tf), .26) 0%, #121419 50%, #0e0f13 100%); }
    .tw-r-p.label-leer .tw-r-p-b { background: linear-gradient(180deg, rgba(168,148,255,.12) 0%, #121419 50%, #0e0f13 100%); }
    .tw-r-p.geist .tw-r-p-b { background: linear-gradient(180deg, rgba(255,255,255,.05) 0%, #121419 50%, #0e0f13 100%); }
    .tw-r-p.label .tw-r-p-b { background: linear-gradient(180deg, rgba(var(--tf), .26) 0%, #121419 50%, #0e0f13 100%) padding-box, linear-gradient(#0e0f13, #0e0f13) padding-box,
        linear-gradient(90deg, #e2c27a, #a894ff) border-box; }
    .tw-r-p-nr { display: none; }
    .tw-r-p-tag { left: calc(14 * var(--u)); top: calc(6 * var(--u)); --fs: calc(120 * var(--u)); --ls: -.05em; --ka: .5; width: calc(400 * var(--u)); }
    .tw-r-stempel { left: calc(250 * var(--u)); top: calc(22 * var(--u)); font-size: max(10px, calc(13 * var(--u))); transform: rotate(6deg); }
    .tw-r-p-kopf { left: calc(18 * var(--u)); bottom: auto; top: calc(127 * var(--u)); transform: translateY(-100%); width: calc(346 * var(--u)); gap: calc(8 * var(--u)); }
    .tw-r-p-kopf .tw-logo { --gr: calc(36 * var(--u)); }
    .tw-r-p-name { font-size: calc(28 * var(--u) * var(--fit, 1)); letter-spacing: -.01em; }
    .tw-r-p-linien { display: none; }
    .tw-r-p-kurz { display: block; position: absolute; left: calc(18 * var(--u)); top: calc(131 * var(--u)); width: calc(346 * var(--u));
        font: 600 max(10px, calc(13 * var(--u)))/1.25 var(--b5); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.65);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .tw-r-s { top: calc(170 * var(--u)); left: calc((6 + var(--i) * 74) * var(--u)); width: calc(92 * var(--u)); height: calc(190 * var(--u)); }
    .tw-r-s .r { left: calc(4 * var(--u)); top: calc(152 * var(--u)); font-size: max(8px, calc(10 * var(--u))); letter-spacing: .12em; }
    .tw-r-s .n { left: calc(2 * var(--u)); top: calc(166 * var(--u)); max-width: calc(66 * var(--u)); font-size: calc(13 * var(--u) * var(--fit-s, 1)); letter-spacing: .02em; text-overflow: clip; }
    .tw-r-s.gesucht .w { left: calc(38 * var(--u)); bottom: calc(46 * var(--u)); font-size: calc(18 * var(--u)); letter-spacing: .08em; }
    .tw-r-s.gesucht .r { left: calc(8 * var(--u)); top: calc(168 * var(--u)); font-size: max(8px, calc(11 * var(--u))); }
    .tw-r-s .fr { left: calc(30 * var(--u)); top: calc(66 * var(--u)); font-size: calc(30 * var(--u)); }
    .tw-r-p.label-leer .tw-r-s .r, .tw-r-p.geist .tw-r-s .r { display: none; }
    .tw-r-s .nur-b, .tw-r-p .nur-b { display: none; }
    .tw-r-s .nur-s, .tw-r-p .nur-s { display: inline; }
    .tw-r-s .rand.nur-s { display: block; }
    .tw-r-s .rand polygon { stroke-dasharray: 5 5; stroke-width: 1.2; }
    .tw-r-filter { gap: 22px; margin-bottom: 0; }
    .tw-r-filter button { font-size: 15px; letter-spacing: .1em; }
    .tw-r-filter button[aria-selected="true"]::after { display: none; }
    .tw-r-filter .l { display: none; }
    .tw-r-filter .k { display: inline; }
    .tw-r-wanted { margin-top: 36px; }
    .tw-r-wz { margin-top: -8px; }
    .tw-r-wz .tw-r-cap { display: none; }
    .tw-r-wanted.klein .tw-r-wz .tw-r-cap { display: block; }
    .tw-r-brett { margin-top: 18px; gap: 18px; }
    .tw-r-spalte > .tw-r-cap { display: none; }
    .tw-r-az.frei { display: flex; flex-direction: column; min-height: 141px; padding: 12px 20px 14px; }
    .tw-r-az .rk { padding: 0; --rfs: 40px !important; }
    .tw-r-az .rk .tw-r-kontur { --ls: -.02em; }
    .tw-r-azw > .ak { top: 14px; font-size: 13px; }
    .tw-r-cap .l { display: none; }
    .tw-r-cap .k { display: inline; }
    .tw-r-wz .tw-r-link { display: none; }
    .tw-r-wunten { display: block; margin-top: 18px; }
    .tw-r-tz .lang { display: none; }
    .tw-r-tz .sp { white-space: normal; }
    .tw-r-az .tx { padding: 2px 0 0; gap: 4px; }
    .tw-r-az .tm { font-size: 15px; line-height: 18px; }
    .tw-r-az .mt { font-size: 15px; line-height: 18px; }
    .tw-r-az .ak { font-size: 14px; }
    .tw-r-az.sp { grid-template-columns: 96px minmax(0, 1fr); min-height: 96px; }
    .tw-r-az.sp .st { height: 96px; clip-path: polygon(22px 0, 100% 0, calc(100% - 22px) 100%, 0 100%); }
    .tw-r-az.sp .tx { padding: 14px 12px 12px 14px; gap: 2px; }
    .tw-r-az.sp .kl { font-size: 12px; } .tw-r-az.sp .nm { font-size: 22px; line-height: 26px; } .tw-r-az.sp .zl { font-size: 13px; }
    .tw-r-az.sp .ak { position: static; margin-top: 4px; }
    .tw-r-leertext { margin-top: 0 !important; }
    /* Team-Seite schmal: Kopf im Fluss, Streifen darunter (Form der 430-Karte) */
    .tw-r-hero-b { --u: calc(100cqw / 382); --v: 22; height: auto; padding: 24px 24px 0; background: linear-gradient(180deg, rgba(var(--tf), .25) 0%, #121419 60%, #0e0f13 100%); }
    .tw-r-hero::before { display: none; }
    .tw-r-hero-l { display: none; }
    .tw-r-hero-t { position: relative; left: auto; width: auto; display: flex; flex-direction: column; gap: 14px; padding-bottom: 20px; }
    .tw-r-zurueck { position: static; }
    /* R4: Kuerzel (2–4 Zeichen, `--n` am Hero) passt in die Breite — W = 0,9 em je Zeichen bei −.1em; 3 Zeichen bleiben bei 430 ≈ 140 px */
    .tw-r-hero .tw-r-p-tag { left: 8px; top: 30px; --fs: clamp(56px, calc((100vw - 56px) / (var(--n, 3) * .9)), 140px); width: 600px; }
    .tw-r-hero-kopf { position: relative; bottom: auto; width: auto; margin-top: 60px; }
    .tw-r-hero-kopf .tw-logo { --gr: 48px; border-radius: 10px; }
    .tw-r-hero h1 { font-size: calc(40px * var(--fit, 1)); }
    .tw-r-hero-z { position: static; }
    .tw-r-hero-z p { font-size: 14px; white-space: normal; }
    .tw-r-hero .tw-r-stempel { position: absolute; left: auto; right: 0; top: 34px; }
    .tw-r-akt { position: static; }
    .tw-r-akt .tw-btn { flex: 1 1 auto; }
    .tw-r-hero-b { display: flex; flex-direction: column; }
    .tw-r-hero-st { position: relative; inset: auto; order: 2; height: calc(190 * var(--u)); margin: 0 -24px; }
    .tw-r-hero-t > * { z-index: auto; }
    .tw-r-hero .tw-r-s { top: 0; left: calc((6 + var(--i) * 74) * var(--u)); width: calc(92 * var(--u)); height: 100%; }
    .tw-r-hero-kopf::after { position: static; width: 64px; height: 3px; margin-top: -6px; }
    .tw-r-hero .tw-r-s .r { left: calc(4 * var(--u)); top: auto; bottom: calc(26 * var(--u)); font-size: max(8px, calc(10 * var(--u))); }
    .tw-r-hero .tw-r-s .n { left: calc(2 * var(--u)); top: auto; bottom: calc(8 * var(--u)); max-width: calc(66 * var(--u)); font-size: calc(13 * var(--u) * var(--fit-s, 1)); }
    .tw-r-hero .tw-r-s.gesucht .w { left: calc(38 * var(--u)); bottom: calc(46 * var(--u)); font-size: calc(18 * var(--u)); }
    .tw-r-hero .tw-r-s.gesucht .r { left: calc(8 * var(--u)); top: auto; bottom: calc(10 * var(--u)); }
    .tw-r-hero .tw-r-s.frei .r { top: auto; }
    .tw-r-sek { margin-top: 28px; }
    .tw-r-tab { margin-top: 0; }
    .tw-r-tz, .tw-r-tab.ohne-mn .tw-r-tz { grid-template-columns: 34px minmax(0, 1fr); grid-template-areas: "nr sp" "nr un"; min-height: 0; padding: 10px 0; row-gap: 2px; }
    .tw-r-tz.kopf { display: none; }
    .tw-r-tz > * { padding-right: 6px; }
    .tw-r-tz .nr { grid-area: nr; align-self: start; padding-top: 3px; font-size: 15px; }
    .tw-r-tz .sp { grid-area: sp; font-size: 20px; line-height: 24px; }
    .tw-r-tz .rl, .tw-r-tz .mn, .tw-r-tz .gd, .tw-r-tz .sl, .tw-r-tz .se { display: none; }
    .tw-r-tz .un { grid-area: un; display: block !important; white-space: normal; font-size: 15px; line-height: 19px; }
    .tw-r-tz .lang { grid-area: un; grid-column: auto; white-space: normal; font-size: 15px; }
    .tw-r-log { margin-top: 0; }
    .tw-r-lz { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "d c" "m s"; gap: 6px 10px; padding: 10px 0; }
    .tw-r-lz .d { grid-area: d; } .tw-r-lz .c { grid-area: c; justify-self: end; } .tw-r-lz .m { grid-area: m; align-self: center; } .tw-r-lz .s { grid-area: s; justify-self: end; }
    .tw-r-ks i { width: 12px; height: 20px; flex-basis: 12px; font-size: 16px; }
    .tw-r-ks { gap: 1px; }
    .tw-dlg.tw-r-dlg, .tw-dlg.tw-r-dlg.breit { width: 100%; padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); }
    .tw-r-dlg .tw-tk11-kopf h2 { font-size: 26px; line-height: 32px; }
    .tw-r-sitz .t { display: none; }
    .tw-r-reiter { gap: 24px; }
    .tw-r-cps { gap: 12px; }
    .tw-r-dlg .tw-r-az.frei .rk { --rfs: 40px !important; }
}
.tw-r-tz .un { display: none; }
@media (prefers-reduced-motion: reduce) { .tw-r * { transition: none !important; } }

/* ── Design-QoL 44: Mini-Poster `.tw-r-p.klein` (Vereinsheim „Mannschaften“, Figma 789:52068: 282 × 120) — dasselbe Markup wie das
   grosse Poster, feste Masse statt Container-Einheiten: Farbband 4, Konturwort 44 px oben links, Name + eine Zeile unten links,
   rechts NUR der erste Streifen (90 breit, Bild 55 %), kein Nummern-/Linien-/Logo-Teil. ─────────────────────────────────── */
.tw-r-p.klein .tw-r-p-b { height: 120px; border-radius: 0; background: #121419; }
.tw-r-p.klein:hover .tw-r-p-b { box-shadow: 0 0 0 1px rgba(var(--tf), .55); }
.tw-r-p.klein .tw-r-p-band { height: 4px; }
.tw-r-p.klein .tw-r-p-nr, .tw-r-p.klein .tw-r-p-linien, .tw-r-p.klein .tw-r-stempel, .tw-r-p.klein .tw-r-p-kopf .tw-logo { display: none; }
.tw-r-p.klein .tw-r-p-tag { left: 12px; top: 8px; --fs: 44px; --ls: -.02em; --sw: 1.5px; --ka: .28; width: calc(100% - 100px); height: 56px; }
.tw-r-p.klein .tw-r-p-kopf { left: 16px; right: 100px; bottom: 32px; width: auto; gap: 0; }
.tw-r-p.klein .tw-r-p-name { font: 900 15px/1.3 var(--font-brand); letter-spacing: .005em; -webkit-line-clamp: 1; }
.tw-r-p.klein .tw-r-p-kurz { display: block; position: absolute; left: 16px; right: 100px; bottom: 14px; margin: 0; font: 400 11px/1.3 var(--font-brand);
    color: rgba(255, 255, 255, .55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tw-r-p.klein .tw-r-s { display: none; }
.tw-r-p.klein .tw-r-s:first-child { display: block; left: auto; right: 0; top: 0; width: 90px; height: 120px; clip-path: none; background: #121419; }
.tw-r-p.klein .tw-r-s .bild { opacity: .55; background-position: 50% 18%; }
.tw-r-p.klein .tw-r-s .verlauf, .tw-r-p.klein .tw-r-s .rand, .tw-r-p.klein .tw-r-s .r, .tw-r-p.klein .tw-r-s .n, .tw-r-p.klein .tw-r-s .w,
.tw-r-p.klein .tw-r-s .fr { display: none; }
@media (max-width: 760px) {
    /* Design-QoL 44: das Mini-Poster bleibt liegend (120 hoch) — die hochkant-Regeln des grossen Posters gelten hier nicht */
    .tw-r-p.klein { max-width: none; }
    .tw-r-p.klein .tw-r-p-b { height: 120px; }
    .tw-r-p.klein .tw-r-p-tag { left: 10px; top: 6px; --fs: 40px; --ls: -.02em; --ka: .28; width: calc(100% - 80px); height: 50px; }
    .tw-r-p.klein .tw-r-p-kopf { left: 12px; right: 80px; top: auto; bottom: 30px; transform: none; width: auto; gap: 0; }
    .tw-r-p.klein .tw-r-p-name { font-size: 14px; }
    .tw-r-p.klein .tw-r-p-kurz { left: 12px; right: 80px; top: auto; bottom: 12px; width: auto; font: 400 11px/1.3 var(--font-brand); letter-spacing: 0;
        text-transform: none; color: rgba(255, 255, 255, .55); }
    .tw-r-p.klein .tw-r-s:first-child { top: 0; left: auto; right: 0; width: 72px; height: 120px; }
    .tw-r-p.klein .tw-r-s .rand.nur-s, .tw-r-p.klein .tw-r-s .nur-s { display: none; }
}