/* Gemeinsame Gestaltung fuer alle Themes: Tastatur-Fokus, Burger-Menue, reduzierte Bewegung, leere Zustaende, Spielerprofil. */

/* Sichtbarer Fokus nur bei Tastaturbedienung, in der Akzentfarbe des Themes */
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent, currentColor);
  outline-offset: 3px;
}

/* Burger-Knopf: wird von nav.js eingefuegt, am Desktop unsichtbar */
.nav-toggle { display: none; }

@media (max-width: 800px) {
  .nav-js > .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin-left: auto; padding: 0;
    background: transparent; color: var(--text, currentColor);
    border: 1px solid var(--line, currentColor); border-radius: 6px; cursor: pointer;
  }
  .nav-bars { display: grid; gap: 5px; width: 20px; }
  .nav-bars i { display: block; height: 2px; background: currentColor; border-radius: 1px; transition: transform .2s, opacity .2s; }
  .nav-open .nav-bars i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-open .nav-bars i:nth-child(2) { opacity: 0; }
  .nav-open .nav-bars i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  /* Menue eingeklappt, bis der Knopf gedrueckt wird */
  .nav-js:not(.nav-open) > nav { display: none !important; }
  .nav-js.nav-open > nav { display: flex !important; flex-direction: column; flex: 1 1 100%; order: 99; gap: 2px; padding-bottom: 10px; }
  .nav-js.nav-open > nav a { padding: 12px 4px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* Leere Zustaende ("Noch keine News") als gestaltete Hinweisbox */
.empty-state { border: 1px dashed var(--line, currentColor); border-radius: 8px; padding: 26px 18px; text-align: center; margin: 12px 0; }

/* Spielerprofil: Foto links, Angaben rechts, Biografie darunter */

/* Zitate in Texten (> Zitat) */
.prose blockquote { margin: 1.4em 0; padding: .3em 0 .3em 1.1em; border-left: 4px solid var(--accent, currentColor); }
.prose blockquote p { margin: 0; font-style: italic; }

/* Wartungsmodus: Hinweis fuer Mitarbeiter und Standard-Wartungsseite */
.mt-banner { position: sticky; top: 0; z-index: 1000; background: #f2b705; color: #111; text-align: center; padding: 8px 14px; font: 600 14px/1.4 system-ui, sans-serif; }
.mt-banner a { color: #111; text-decoration: underline; }
.wt-page { margin: 0; min-height: 100vh; }
.wt-login { font-size: 12px; opacity: .6; text-decoration: underline; }
.wt-default { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.wt-card { width: min(520px, 100%); display: grid; gap: 16px; justify-items: center; text-align: center; padding: clamp(22px, 5vw, 44px); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius, 12px); }
.wt-card h1 { margin: 0; font-size: clamp(1.8rem, 5vw, 2.6rem); }
.wt-card p { margin: 0; color: var(--muted); }
.wt-logo { max-height: 64px; max-width: 240px; }
.wt-name { font-weight: 800; font-size: 1.4rem; }

/* Team-Seite: Karten fuer Spieler und Staff, Kennzahlen, Ergebnisse */
.tm-facts { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0 0 1rem; color: var(--muted); }
.tm-facts b { color: var(--text); font-size: 1.3em; margin-right: 4px; }
.tm-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }   /* hoechstens 5 pro Reihe, danach geht es darunter weiter */
.tm-card { position: relative; min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius, 10px); overflow: hidden; }
.tm-card::after { content: ""; position: absolute; inset: 0; border: 2px solid transparent; border-radius: inherit; pointer-events: none; transition: border-color .15s; }
.tm-card:hover::after { border-color: var(--accent); }
.tm-link { display: block; color: inherit; text-decoration: none; }
.tm-link:hover { text-decoration: none; }
.tm-pic { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 5; overflow: hidden; background: color-mix(in srgb, var(--text) 8%, var(--bg)); }
.tm-pic img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.tm-ini { font-family: var(--font-head); font-weight: 800; font-size: 3rem; color: color-mix(in srgb, var(--text) 26%, var(--bg)); }
.tm-bd { display: grid; gap: 2px; padding: 12px 14px 14px; }
.tm-bd strong { font-family: var(--font-head); font-size: 1.3rem; line-height: 1.1; }
.tm-bd span { color: var(--muted); font-size: .9rem; }
.tm-soc { position: absolute; top: 8px; right: 8px; gap: 4px; padding: 3px 8px; border-radius: 99px; background: rgba(0, 0, 0, .6); }
.tm-soc .soc { color: #fff; }
.tm-staff .tm-pic { aspect-ratio: 1; }
.tm-stafflist { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 0; color: var(--muted); }
.tm-stafflist b { color: var(--text); }
.tm-next { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; padding: 16px 20px; border: 1px solid var(--accent); border-radius: var(--radius, 10px); background: color-mix(in srgb, var(--accent) 10%, var(--panel)); }
.tm-results { border: 1px solid var(--line); border-radius: var(--radius, 10px); background: var(--panel); overflow: hidden; }
.tm-res { display: flex; align-items: center; gap: 14px; padding: 11px 18px; border-top: 1px solid var(--line); }
.tm-res:first-child { border-top: 0; }
.tm-res .tm-d { flex: 0 0 3.6rem; color: var(--muted); }
.tm-res .tm-t { flex: 1; min-width: 0; font-weight: 600; }
.tm-res .tm-s { min-width: 4rem; padding: 2px 10px; border-radius: 6px; text-align: center; font-weight: 800; background: color-mix(in srgb, var(--ok) 20%, var(--panel)); color: var(--ok); }
.tm-res.loss .tm-s { background: color-mix(in srgb, var(--err) 20%, var(--panel)); color: var(--err); }
.tm-res.draw .tm-s { background: var(--line); color: var(--text); }
.tm-desc { max-width: 70ch; }
@media (max-width: 900px) { .tm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .tm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
.tm-desc { margin-top: 18px; }

/* Spielerprofil: Portraet, Pillen, Netzwerk-Knoepfe, Team-Karte */
.pf-cols { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(20px, 4vw, 44px); align-items: start; margin: 0 0 8px; }
.pf-pic { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 5; overflow: hidden; min-width: 0; background: color-mix(in srgb, var(--text) 8%, var(--bg)); }
.pf-pic img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.pf-ini { font-family: var(--font-head); font-weight: 800; font-size: clamp(3.4rem, 10vw, 6.4rem); color: color-mix(in srgb, var(--text) 26%, var(--bg)); }
.pf-main, .pf-tx { min-width: 0; }
.pf-name { margin: .25em 0 .1em; line-height: 1; overflow-wrap: anywhere; }
.pf-real { margin: 0 0 1em; color: var(--muted); }
.pf-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.pf-pill { padding: 2px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .9rem; }
.pf-bio { max-width: 62ch; margin: 0 0 1em; }
.pf-sbtns { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 1.2em; }
.pf-sbtn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 1px solid var(--line); border-radius: var(--radius, 8px); color: var(--text); font-weight: 600; text-decoration: none; }
.pf-sbtn:hover { border-color: var(--accent); text-decoration: none; }
.pf-team { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--radius, 8px); background: var(--panel); }
.pf-mark { display: grid; place-items: center; flex: none; width: 48px; height: 48px; overflow: hidden; border-radius: 6px; background: var(--accent); color: #0b0d12; font-family: var(--font-head); font-weight: 800; font-size: 1.2rem; }
.pf-mark img { width: 100%; height: 100%; object-fit: contain; }
.pf-x { flex: 1 1 180px; min-width: 0; }
.pf-x strong { display: block; font-family: var(--font-head); font-size: 1.3rem; line-height: 1.1; overflow-wrap: anywhere; }
.pf-x small { color: var(--muted); }
@media (max-width: 640px) { .pf-cols { grid-template-columns: 1fr; } .pf-pic { max-width: 240px; } }

/* Footer-Links (zum Beispiel Staff) */
.footer-nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }

/* Teams-Seite: Teamname im Teambild (Streifen in der Akzentfarbe am unteren Rand) */
/* Teams-Seite: immer 3 Karten pro Reihe (Tablet 2, Handy 1), dadurch groessere Bilder */
.cards.tc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .cards.tc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cards.tc-grid { grid-template-columns: 1fr; } }
.card.tc { position: relative; padding: 0; }
.card.tc img { width: 100%; margin: 0; aspect-ratio: 4 / 3; }
/* Option "Teambilder schwarz-weiß": Farbe beim Überfahren, auf Touch-Geräten ohne Hover bleibt das Bild farbig */
.tc-bw .card.tc img { filter: grayscale(1); transition: filter .25s ease; }
@media (hover: hover) { .tc-bw .card.tc:hover img, .tc-bw .card.tc:focus-visible img { filter: none; } }
@media (hover: none) { .tc-bw .card.tc img { filter: none; } }
.tc-top { position: absolute; top: 10px; left: 10px; }
.tc-ph { display: grid; place-items: center; aspect-ratio: 4 / 3; background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--accent) 22%, var(--panel)), var(--panel) 70%); }
.tc-ph b { margin-bottom: 34px; font-family: var(--font-head, inherit); font-weight: 800; font-size: clamp(3rem, 9vw, 5.2rem); line-height: 1; letter-spacing: .04em; color: color-mix(in srgb, var(--accent) 55%, var(--panel)); }
.tc-bd { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 12px 16px; background: var(--accent); color: var(--on-accent, #0b0d12); }
.tc-bd h3 { margin: 0; font-family: var(--font-head, inherit); font-size: 1.35rem; line-height: 1.1; text-transform: uppercase; color: inherit; overflow-wrap: anywhere; }
.tc-bd span { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }

/* Nationalitaet: Flagge (flag-icons) neben dem Namen und auf dem Spielerprofil */
img.flag { display: inline-block; width: 1.3em; height: auto; aspect-ratio: 4 / 3; margin-left: .45em; vertical-align: -.1em; border-radius: 2px; box-shadow: 0 0 0 1px rgba(128, 128, 128, .35); object-fit: cover; }
/* Flagge der Teamkarte: kleines Abzeichen oben links im Foto (gegenueber den Social-Icons), bricht so nie um */
.tm-flag { position: absolute; top: 10px; left: 10px; z-index: 1; line-height: 0; pointer-events: none; }
.tm-flag img.flag { display: block; width: 28px; margin: 0; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .45), 0 2px 8px rgba(0, 0, 0, .55); }
.pf-country { display: flex; align-items: center; gap: .5em; margin: .2em 0 .8em; font-size: .9rem; font-weight: 700; letter-spacing: .1em; }
.pf-country img.flag { margin: 0; width: 1.6em; }

/* Ligen & Turniere auf der Matches-Seite: Karten mit Platzierung, Punkten und Bilanz, gleichzeitig Filter (Links mit ?wb=). Farben vom Theme. */
.cp { margin: 0 0 28px; }
.cp-head { font-weight: 700; font-size: .85rem; letter-spacing: .09em; text-transform: uppercase; color: var(--muted, inherit); margin: 0 0 10px; }
.cp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.cp-card { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 16px 18px; color: var(--text, inherit); text-decoration: none;
  background: var(--panel, transparent); border: 1px solid var(--line, currentColor); border-radius: var(--radius, 10px); }
.cp-card:hover { text-decoration: none; border-color: color-mix(in srgb, var(--accent, currentColor) 55%, var(--line, currentColor)); }
.cp-card.is-on { border-color: var(--accent, currentColor); box-shadow: 0 0 0 1px var(--accent, currentColor) inset; }
.cp-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cp-logo { display: grid; place-items: center; flex: none; width: 44px; height: 44px; overflow: hidden; border-radius: 6px; background: var(--accent, #888); color: var(--on-accent, #0b0d12); font-weight: 800; font-size: 1.2rem; letter-spacing: .02em; }
.cp-logo.has-img { background: transparent; }
.cp-logo img { width: 100%; height: 100%; object-fit: contain; }
.cp-t { min-width: 0; }
.cp-t b { display: block; font-size: 1.05rem; line-height: 1.15; overflow-wrap: anywhere; }
.cp-t > span { display: block; color: var(--muted, inherit); font-size: .88rem; }
.cp-mid { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.cp-place { font-weight: 800; font-size: 2.6rem; line-height: .95; font-variant-numeric: tabular-nums; }
.cp-place small { margin-left: 6px; font-size: .9rem; font-weight: 600; color: var(--muted, inherit); }
.cp-state { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 2px 8px; border-radius: 4px; border: 1px solid var(--line, currentColor); color: var(--muted, inherit); white-space: nowrap; }
.cp-state.run { color: var(--ok, #3ddc84); border-color: color-mix(in srgb, var(--ok, #3ddc84) 50%, var(--bg, #000)); }
.cp-stats { display: flex; flex-wrap: wrap; gap: 6px 18px; padding-top: 12px; border-top: 1px solid var(--line, currentColor); font-variant-numeric: tabular-nums; }
.cp-stats > span { display: flex; flex-direction: column; }
.cp-stats b { font-size: 1.1rem; line-height: 1.2; }
.cp-stats i { font-style: normal; font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted, inherit); }
.cp-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 14px; }
.cp-chip { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line, currentColor); color: var(--muted, inherit); font-size: .92rem; text-decoration: none; }
.cp-chip:hover { text-decoration: none; color: var(--text, inherit); }
.cp-chip.is-on { background: var(--text, currentColor); border-color: var(--text, currentColor); color: var(--bg, #000); font-weight: 600; }
.cp-note { color: var(--muted, inherit); font-size: .9rem; }
.cp-team { margin: 8px 0 28px; }
.cp-team > h2 { margin-bottom: 14px; }
.cp-filter { margin: 4px 0 22px; }
.cp-filter .cp-note { font-size: .78rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }

/* Presse-Kit (/presse) */
.pk { display: grid; gap: 8px; }
.pk-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; margin-bottom: 8px; }
.pk-top h1 { margin: 0; }
.pk-intro { max-width: 68ch; margin: 8px 0 0; }
.pk-sec { margin-top: 26px; }
.pk-sec h2 { margin: 0 0 14px; }
.pk-grid { display: grid; gap: 16px; }
.pk-logos { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.pk-colors { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.pk-texts { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.pk-rules { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.pk-card { min-width: 0; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius, 10px); overflow: hidden; }
.pk-pv { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.pk-pv img { position: absolute; left: 16%; top: 12%; width: 68%; height: 76%; object-fit: contain; }
.pk-bg-light { background: #f3f3f1; }
.pk-bg-dark { background: #0b0d12; }
.pk-bg-accent { background: var(--accent); }
.pk-bg-neutral { background: color-mix(in srgb, var(--text) 14%, var(--bg)); }
.pk-in { display: grid; gap: 8px; padding: 12px 14px 16px; align-content: start; }
.pk-in b { font-family: var(--font-head); font-size: 1.1rem; line-height: 1.2; }
.pk-in h3 { margin: 0; font-size: 1.15rem; }
.pk-in p { margin: 0; overflow-wrap: anywhere; }
.pk-row { display: flex; flex-wrap: wrap; gap: 6px; }
.pk .pk-row .btn { padding: 5px 12px; font-size: .95rem; letter-spacing: .03em; line-height: 1.3; }
.pk-lk { color: var(--muted); font-size: .8rem; overflow-wrap: anywhere; }
.pk-co { height: 70px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 18%, transparent); }
.pk-sw code { font-size: .9rem; color: var(--muted); }
.pk-rl ul { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.pk-rl li { display: flex; gap: 10px; align-items: flex-start; }
.pk-rl svg { flex: none; margin-top: 3px; }
.pk-ct .pk-in { grid-template-columns: repeat(auto-fit, minmax(160px, max-content)); gap: 6px 28px; align-items: center; }

/* Live-Seite (Twitch-Kanaele mit Player und Chat) */
.lv { display: grid; gap: 14px; padding-block: 8px; }
.lv-cards { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.lv-k { flex: 0 0 auto; min-width: 200px; max-width: 260px; display: block; text-decoration: none; color: inherit; background: var(--panel, rgba(255,255,255,.04)); border: 1px solid var(--line, rgba(255,255,255,.14)); padding: 7px 12px; border-radius: var(--radius, 4px); }
.lv-k.on, .lv-k:hover { border-color: var(--accent); }
.lv-n { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.lv-n em, .lv-org { font-style: normal; font-weight: 700; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; background: var(--accent); color: var(--on-accent, #fff); padding: 0 6px; border-radius: 2px; }
.lv-n small { margin-left: auto; color: var(--muted); font-weight: 400; }
.lv-t { display: block; color: var(--muted); font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 14px; align-items: stretch; }
.lv-main { min-width: 0; }
.lv-pv { position: relative; aspect-ratio: 16 / 9; background: #000; }
.lv-pv iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lv-ask { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 16px; color: #eee; }
.lv-ask p { margin: 0; max-width: 48ch; font-size: .9rem; line-height: 1.45; }
.lv-info { padding-top: 12px; display: grid; gap: 4px; }
.lv-info p { margin: 0; }
.lv-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lv-head h1 { margin: 0; font-size: 1.6rem; line-height: 1.1; }
.lv-live { display: inline-flex; align-items: center; gap: 7px; font-weight: 800; letter-spacing: .1em; color: #ff3b3b; }
.lv-dot { width: 9px; height: 9px; border-radius: 50%; background: #ff3b3b; animation: lvpulse 1.6s infinite; }
.lv-title { font-weight: 600; }
.lv-chat { display: flex; flex-direction: column; min-height: 420px; background: var(--panel, rgba(255,255,255,.04)); border: 1px solid var(--line, rgba(255,255,255,.14)); }
.lv-chat-h { padding: 8px 12px; border-bottom: 1px solid var(--line, rgba(255,255,255,.14)); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .85rem; }
.lv-chat-b { flex: 1; position: relative; display: grid; place-items: center; text-align: center; padding: 16px; color: var(--muted); font-size: .88rem; }
.lv-chat-b.loaded { padding: 0; display: block; }
.lv-chat-b iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lv-idle { padding: 40px 0; text-align: center; }
.lv a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
@keyframes lvpulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .lv-dot { animation: none; } }
@media (max-width: 860px) { .lv-grid { grid-template-columns: 1fr; } .lv-chat { min-height: 460px; } }