/* ── Live (Website) — Inhouse-Schaufenster Block IS4 · BAUPLAN-WEBSITE ─────────────────────────────────────────────
   Figma YRUirscc0yHUgTS69n5bDU Section 286:14321 (W-L1 287:14702 · W-L2 288:14983 · W-L3 362:20754 · M-L1 360:20678 ·
   M-L2 361:20716 · M-L3 362:21802 · Zustaende 364:21480). Praefix `lp-` (die `lv-*` gehoerten der Vorgaengerseite).
   Nur Tokens aus style.css + Bausteine tw.css; „Just finished“ = Feed-Zeile `.mt-zeile` aus mt-partien.css (W-M1/W-M3).
   Brueche: ≤ 1080 Buehne gestapelt · ≤ 860 Live-Zeilen als Matches-Karte (Icons statt Portraets) · ≤ 600 = 430er. */

.lp-main { padding-bottom: 120px; }
/* Glow blutet links bis an den Fensterrand (nicht nur bis an die 1440er-Kante von main) und laeuft vor der Fusszeile weich aus. */
.lp-main::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: calc(50% - 50vw); pointer-events: none; z-index: -1;
    background: radial-gradient(1100px 900px at -240px 85%, rgba(124, 92, 255, .09), rgba(124, 92, 255, 0) 70%);
    -webkit-mask-image: linear-gradient(#000 calc(100% - 200px), transparent); mask-image: linear-gradient(#000 calc(100% - 200px), transparent); }
.lp-pfeil { white-space: nowrap; }
.lp-pfeil.klein { font-size: 13px; }
/* Zahlen der Seiten (Stand, Kills) — nur hier, nie global (--team-* sind Kanten-/Stand-Farben) */
.lp-mitte em.blau, .lp-b-stand em.blau, .lp-p-gross em.blau { color: var(--team-blau); }
.lp-mitte em.rot, .lp-b-stand em.rot, .lp-p-gross em.rot { color: var(--team-rot); }

/* ── Kopf ── */
.lp-kopf { align-items: flex-end; }
.lp-h1 { overflow-wrap: anywhere; }
.lp-takt { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 6px; color: var(--w45); white-space: nowrap; }
.lp-takt .tw-punkt { color: var(--w25); }
.lp-takt .tw-punkt.an { color: var(--gruen); }
.lp-vor:not(:empty)::before { content: "·"; margin: 0 6px 0 -2px; }
.lp-alt, .lp-fehler { display: flex; align-items: center; gap: 12px; margin-top: 24px; padding: 14px 18px; border: 1px solid var(--border);
    border-radius: 12px; background: var(--flaeche); color: var(--w70); font: 400 14px/18px var(--font-brand); }
.lp-alt > span, .lp-fehler > span { flex: 1 1 auto; min-width: 0; }
.lp-alt svg, .lp-fehler svg { flex: 0 0 auto; color: var(--gold2); }
.lp-fehler { margin-top: 32px; padding: 20px 24px; }

/* ── Queue-Board + Spielabend-Zeile = Startseiten-Bausteine (ST, css/start.css) — hier nur Abstaende ── */
.lp-q-skel { height: 330px; border-radius: 12px; }
.lp-abend.st-liste { margin-top: 6px; }
/* Sprungziel der Navi „Game nights“ und alter /inhouse-Links: nicht unter der festen Leiste (72 px) */
#abende { scroll-margin-top: 96px; }

/* ── Chips + Kicker ── */
.lp-b-kick { display: flex; align-items: center; gap: 10px; margin: 0; flex-wrap: wrap; }
.lp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 6px; background: var(--w06);
    font: 700 11px/14px var(--font-brand); letter-spacing: .1em; text-transform: uppercase; color: var(--w45); white-space: nowrap; }
.lp-chip .tw-punkt { color: var(--w45); }
.lp-chip.gruen { background: rgba(140, 198, 63, .16); color: var(--gruen); }
.lp-chip.gruen .tw-punkt { color: var(--gruen); }

/* ── Portraet (Live/Porträt · Web) ── */
.lp-seite { display: flex; gap: 5px; padding-bottom: 6px; border-bottom: 2px solid; min-width: 0; }
.lp-seite.blau { border-color: var(--team-blau); }
.lp-seite.rot { border-color: var(--team-rot); }
.lp-por { position: relative; flex: 1 1 0; min-width: 0; max-width: 70px; aspect-ratio: 70 / 95; border-radius: 6px; overflow: hidden;
    background: var(--erhoeht) center 15% / cover no-repeat; display: flex; align-items: flex-end; justify-content: center; }
.lp-por::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,13,17,0) 45%, rgba(12,13,17,.9) 100%); }
.lp-por b { position: relative; z-index: 1; max-width: 100%; padding: 0 4px 6px; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; font: 600 11px/14px var(--font-brand); color: var(--w100); }
.lp-por.leer { background: var(--w04); }
.lp-por.leer::after { display: none; }
.lp-por.leer b { color: var(--w45); font-weight: 500; }
.lp-por.gross { max-width: 86px; aspect-ratio: 82 / 150; }
.lp-vs { font: 700 13px/1 var(--font-brand); letter-spacing: .1em; color: var(--w45); align-self: center; }

/* ── Buehne (Top-Partie) ── */
.lp-buehne { position: relative; display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: 32px; align-items: center;
    margin-top: 28px; padding: 32px 28px; border: 1px solid var(--border); border-radius: 16px; background: var(--flaeche); overflow: hidden;
    isolation: isolate; }
.lp-buehne::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(700px 300px at 70% 110%, rgba(124, 92, 255, .14), rgba(124, 92, 255, 0) 70%); }
.lp-buehne.lade { height: 320px; padding: 0; border: 0; }
.lp-b-info { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.lp-b-t { margin: 8px 0 0; font: 600 28px/1.2 var(--font-brand); color: var(--w100); overflow-wrap: anywhere; }
.lp-b-z { margin: 0; font: 400 14px/18px var(--font-brand); color: var(--w45); }
.lp-b-stand { display: flex; align-items: center; gap: 14px; margin: 14px 0 6px; font: 700 64px/1 var(--font-brand); }
.lp-b-stand i { font: 400 28px/1 var(--font-brand); font-style: normal; color: var(--w25); }
.lp-b-stand em { font-style: normal; }
.lp-b-stand.ohne em { color: var(--w25); }
.lp-b-stand small { margin-left: 4px; font: 500 13px/16px var(--font-brand); color: var(--w45); }
.lp-b-zeit { display: flex; align-items: center; gap: 8px; margin: 0; font: 600 15px/20px var(--font-brand); color: var(--gruen); }
.lp-b-kn { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.lp-b-kader { display: flex; align-items: flex-end; gap: 22px; min-width: 0; text-decoration: none; color: inherit; }
.lp-b-kader .lp-seite { flex: 1 1 0; justify-content: flex-end; }
.lp-b-kader .lp-seite.rot { justify-content: flex-start; }
.lp-b-kader .lp-vs { align-self: center; }

/* ── Abschnitte + Live-Zeilen ── */
.lp-abschnitt { margin-top: 48px; }
.lp-ab-k { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 6px; }
.lp-ab-k h2 { margin: 0; }
.lp-ab-k h2 b { margin-left: 8px; color: var(--w100); }
.lp-liste { display: flex; flex-direction: column; }
.lp-zeile { display: grid; grid-template-columns: 200px minmax(0, 1fr) 100px 20px; gap: 20px; align-items: center; padding: 18px 4px;
    border-bottom: 1px solid var(--border); text-decoration: none; color: inherit; border-radius: 10px; transition: background-color .12s ease; }
.lp-zeile:hover { background: var(--w03); }
.lp-zeile:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.lp-z-l { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-left: 4px; }
.lp-z-l b { font: 600 18px/22px var(--font-brand); color: var(--w100); }
.lp-z-l small { font: 400 13px/17px var(--font-brand); color: var(--w45); overflow-wrap: anywhere; }
.lp-z-k { display: grid; grid-template-columns: minmax(0, 1fr) 110px minmax(0, 1fr); align-items: end; gap: 0 16px; min-width: 0; }
.lp-z-k .lp-seite.blau { justify-content: flex-end; }
.lp-z-kopf, .lp-icons { display: none; }
.lp-mitte { display: flex; flex-direction: column; align-items: center; gap: 4px; align-self: center; text-align: center; }
.lp-mitte > b { display: flex; align-items: center; gap: 8px; font: 700 26px/1 var(--font-brand); color: var(--w100); white-space: nowrap; }
.lp-mitte > b i { font: 400 18px/1 var(--font-brand); font-style: normal; color: var(--w25); }
.lp-mitte > b em { font-style: normal; }
.lp-mitte.ohne > b { color: var(--w25); }
.lp-mitte small { font: 400 12px/15px var(--font-brand); color: var(--w45); }
.lp-mitte.draft > b { font: 600 16px/20px var(--font-brand); }
.lp-z-zeit { display: flex; align-items: center; justify-content: flex-end; gap: 8px; font: 600 16px/20px var(--font-brand); color: var(--w100); }
.lp-z-zeit .tw-punkt { color: var(--w100); }
.lp-z-zeit.an { color: var(--gruen); }
.lp-z-zeit.an .tw-punkt { color: var(--gruen); }
.lp-z-pfeil { display: flex; color: var(--w45); }

/* ── Just finished: Feed-Zeile aus S4 (mt-partien.css), hier ohne Aufklappen ── */
.lp-fertig { display: flex; flex-direction: column; }
.lp-fuss { margin-top: 10px; }

/* ═════════════ /live/<gid> (W-L2) ═════════════ */
.lp-p-oben { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; }
.lp-zurueck { display: inline-flex; align-items: center; gap: 6px; justify-self: start; font-size: 14px; color: var(--w70); }
.lp-p-status { display: inline-flex; align-items: center; gap: 8px; margin: 0; font: 700 12px/16px var(--font-brand); letter-spacing: .12em;
    text-transform: uppercase; color: var(--gruen); white-space: nowrap; }
.lp-p-status .tw-punkt { color: var(--gruen); }
.lp-p-status .tw-zahl { letter-spacing: .04em; margin-left: 2px; }
.lp-p-status.aus, .lp-p-status.aus .tw-punkt { color: var(--w45); }
.lp-p-status.draft, .lp-p-status.draft .tw-punkt { color: var(--w100); }
.lp-p-kn { display: flex; gap: 10px; justify-self: end; }
.lp-ende { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; padding: 14px 18px 14px 20px;
    border-radius: 12px; background: rgba(124, 92, 255, .14); font: 400 15px/20px var(--font-brand); color: var(--w100); flex-wrap: wrap; }
.lp-ende b { font-weight: 600; }
.lp-ende.aus { background: var(--w04); color: var(--w70); }
.lp-p-stand { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 24px; margin-top: 44px; }
.lp-p-seite { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lp-p-seite.rot { align-items: flex-end; text-align: right; }
.lp-p-seite.blau .tw-cap { color: var(--team-blau); letter-spacing: .12em; }
.lp-p-seite.rot .tw-cap { color: var(--team-rot); letter-spacing: .12em; }
.lp-p-gross { display: flex; align-items: center; gap: 22px; margin: 0; font: 700 72px/1 var(--font-brand); }
.lp-p-gross em { font-style: normal; }
.lp-p-gross i { font: 600 14px/1 var(--font-brand); font-style: normal; letter-spacing: .1em; color: var(--w45); }
.lp-p-balken { display: flex; gap: 4px; height: 3px; margin-top: 32px; }
.lp-p-balken i { display: block; border-radius: 2px; flex-basis: 0; }
.lp-p-balken i.blau { background: var(--team-blau); }
.lp-p-balken i.rot { background: var(--team-rot); }
.lp-p-balken.ohne i { opacity: .35; }
.lp-p-ohne { margin-top: 8px; }
.lp-p-team { margin-top: 40px; }
.lp-p-team h2 { margin: 0 0 14px; letter-spacing: .12em; }
.lp-p-team.blau h2 { color: var(--team-blau); }
.lp-p-team.rot h2 { color: var(--team-rot); }
.lp-p-karten { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.lp-karte { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--flaeche); min-width: 0; }
.lp-p-team.blau .lp-karte { border-top: 2px solid var(--team-blau); }
.lp-p-team.rot .lp-karte { border-top: 2px solid var(--team-rot); }
.lp-karte-skel { height: 354px; }
.lp-k-bild { position: relative; display: flex; align-items: flex-end; justify-content: center; aspect-ratio: 240 / 300; background: var(--erhoeht) center 12% / cover no-repeat; }
.lp-k-bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,13,17,0) 60%, rgba(12,13,17,.85) 100%); }
.lp-k-bild > b { position: relative; z-index: 1; padding: 0 8px 10px; font: 600 14px/18px var(--font-brand); color: var(--w100); }
.lp-k-quer { display: none; }
.lp-karte.leer .lp-k-bild { background: var(--w04); }
.lp-k-fuss { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px; min-width: 0; }
.lp-k-wer { display: flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; color: var(--w100); }
.lp-k-wer .lp-k-ava.tw-ava { width: 28px; height: 28px; flex-basis: 28px; border-radius: 7px; }
.lp-k-wer b { font: 600 14px/18px var(--font-brand); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.lp-k-wer.leise b { color: var(--w45); font-weight: 500; }
a.lp-k-wer:hover b { color: var(--violett-text); }
.lp-k-gdr { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; font: 500 13px/18px var(--font-brand); color: var(--w70); }
.lp-k-gdr b { font-weight: 500; }
.lp-wp { display: inline-block; flex: 0 0 auto; object-fit: contain; }
.lp-wp.leer { opacity: .4; filter: grayscale(1); }
.lp-p-meta { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px; margin-top: 32px; padding: 18px 0;
    border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.lp-p-meta-t { text-align: center; }
.lp-bans { display: inline-flex; align-items: center; gap: 12px; }
.lp-bans .tw-cap { letter-spacing: .12em; }
.lp-bans .tw-cap.blau { color: var(--team-blau); }
.lp-bans .tw-cap.rot { color: var(--team-rot); }
.lp-bans.r { flex-direction: row-reverse; }
.lp-bans-i { display: inline-flex; gap: 6px; }
.lp-ban { width: 28px; height: 28px; border-radius: 6px; object-fit: cover; background: var(--erhoeht); filter: grayscale(.4); }
.lp-p-gast { margin-top: 16px; }
.lp-hinweis { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; padding: 14px 18px;
    border-radius: 12px; background: rgba(124, 92, 255, .1); font: 400 14px/20px var(--font-brand); color: var(--w70); }
.lp-nf { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 120px 0 80px; color: var(--w70); }
.lp-nf h1 { margin: 6px 0 0; font: 600 22px/28px var(--font-brand); color: var(--w100); }
.lp-nf p { margin: 0; font: 400 14px/20px var(--font-brand); }
.lp-nf .tw-btn { margin-top: 14px; }
.lp-p-lade .lp-p-karten { margin-top: 40px; }

/* ═════════════ Brueche ═════════════ */
@media (max-width: 1280px) {
    .lp-zeile { grid-template-columns: 170px minmax(0, 1fr) 90px 16px; gap: 16px; }
    .lp-p-karten { gap: 12px; }
}
@media (max-width: 1080px) {
    .lp-buehne { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .lp-b-kader .lp-seite, .lp-b-kader .lp-seite.rot { justify-content: center; }
    .lp-zeile { grid-template-columns: 140px minmax(0, 1fr) 80px 16px; }
    .lp-z-k { grid-template-columns: minmax(0, 1fr) 90px minmax(0, 1fr); gap: 0 10px; }
    .lp-p-karten { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
    .lp-k-fuss { flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px; }
    /* /live/<gid> (ISZ): Kopf zweizeilig wie M-L2 — Zurueck + Knoepfe oben, Status darunter (die nowrap-Knoepfe ragten
       zwischen 601 und ~890 px in den mittleren Status) */
    .lp-p-oben { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "zur kn" "st st"; gap: 16px 12px; }
    .lp-zurueck { grid-area: zur; }
    .lp-p-kn { grid-area: kn; }
    .lp-p-status { grid-area: st; justify-self: start; white-space: normal; }
}
/* ≤ 860: Live-/Draft-Zeile = Matches-Karte (W-M3): Kopf Modus · Ø | Zeit · Icons gegen Icons + Stand */
@media (max-width: 860px) {
    .lp-zeile { position: relative; grid-template-columns: minmax(0, 1fr); grid-template-areas: "k"; gap: 10px; padding: 14px; margin-bottom: 10px;
        border: 1px solid var(--border); border-radius: 12px; background: var(--flaeche); align-items: start; }
    .lp-z-l, .lp-z-pfeil { display: none; }
    .lp-z-k { grid-area: k; grid-template-columns: auto auto auto; grid-template-areas: "kopf kopf kopf" "bi mi ri"; justify-content: space-between;
        align-items: center; gap: 12px 8px; }
    .lp-z-k .lp-seite { display: none; }
    .lp-z-kopf { grid-area: kopf; display: flex; align-items: center; gap: 10px; min-width: 0; padding-right: 72px; }
    .lp-z-kopf .tw-mini { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
    .lp-icons { display: flex; gap: 3px; }
    .lp-icons img, .lp-icons i { width: 24px; height: 24px; border-radius: 5px; object-fit: cover; background: var(--w04); display: block; }
    .lp-z-k .lp-icons.b { grid-area: bi; }
    .lp-z-k .lp-mitte { grid-area: mi; }
    .lp-z-k .lp-icons.r { grid-area: ri; }
    .lp-mitte > b { font-size: 22px; }
    .lp-z-zeit { position: absolute; top: 18px; right: 14px; font-size: 14px; }
    .lp-p-karten { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .lp-karte { display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; align-items: center; min-height: 72px; border-top: 1px solid var(--border) !important; }
    .lp-p-team.blau .lp-karte { border-left: 3px solid var(--team-blau); }
    .lp-p-team.rot .lp-karte { border-left: 3px solid var(--team-rot); }
    .lp-k-bild { aspect-ratio: auto; height: 100%; min-height: 72px; background-image: none !important; background-color: var(--erhoeht); }
    .lp-k-quer { display: block; position: absolute; inset: 0; background: center 20% / cover no-repeat; }
    .lp-k-bild > b { z-index: 1; padding: 0 6px 6px; font-size: 13px; }
    .lp-k-bild::after { z-index: 0; }
    .lp-k-fuss { grid-column: 2 / 4; flex-direction: row; align-items: center; padding: 0 14px 0 12px; }
    .lp-karte-skel { height: 72px; }
}
@media (max-width: 600px) {
    .lp-kopf { flex-direction: column; align-items: flex-start; gap: 10px; }
    .lp-h1 { font-size: 28px; line-height: 35px; }
    .lp-takt { white-space: normal; }
    .lp-buehne { margin-top: 16px; padding: 20px; gap: 16px; }
    .lp-b-t { font-size: 26px; }
    .lp-b-stand { font-size: 56px; margin-top: 8px; }
    .lp-b-kader { flex-direction: column; align-items: stretch; gap: 14px; }
    .lp-b-kader .lp-vs { display: none; }
    .lp-b-kader .lp-seite, .lp-b-kader .lp-seite.rot { justify-content: space-between; }
    .lp-por.gross { max-width: none; aspect-ratio: 66 / 120; }
    .lp-por.gross b { display: none; }
    .lp-b-kn .tw-btn { flex: 1 1 0; }
    .lp-b-kn .tw-btn.prim { flex-grow: 2; }
    .lp-abschnitt { margin-top: 36px; }
    .lp-zeile { padding: 12px; }
    .lp-icons img, .lp-icons i { width: 22px; height: 22px; }
    /* /live/<gid> 430 (M-L2): Kopf zweizeilig (ab 1080, s. o.), Stand eine Zeile, Spieler als Zeilen, Bans je Team eine Reihe */
    .lp-nur-breit { display: none; }
    .lp-p-stand { gap: 10px; margin-top: 24px; }
    .lp-p-gross { font-size: 52px; gap: 14px; }
    .lp-p-seite .tw-klein { font-size: 12px; }
    .lp-p-balken { margin-top: 20px; }
    .lp-p-team { margin-top: 28px; }
    .lp-p-meta { grid-template-columns: minmax(0, 1fr); gap: 12px; border-bottom: 0; padding-bottom: 0; }
    .lp-p-meta-t { text-align: left; order: 3; }
    .lp-bans, .lp-bans.r { flex-direction: row; justify-content: space-between; }
    .lp-hinweis { flex-direction: column; align-items: flex-start; }
}