/* Liga-Web — eigenständiges Design, mobil zuerst. Keine externen
   Schriften oder Ressourcen (Datenschutz, CSP 'self'). */
:root {
  --bg: #0d1017;
  --bg-2: #121722;
  --flaeche: #161c28;
  --flaeche-2: #1c2433;
  --rand: #283246;
  --text: #e8ebf1;
  --leise: #97a2b6;
  --gold: #f2b84b;
  --gold-dunkel: #c98a1b;
  --gold-hauch: rgba(242, 184, 75, .12);
  --sieg: #3fbf8a;
  --nieder: #ef6461;
  --remis: #a3adbf;
  --discord: #5865f2;
  --radius: 14px;
  --radius-klein: 9px;
  --schatten: 0 1px 0 rgba(255,255,255,.03) inset, 0 10px 30px rgba(0,0,0,.25);
  --max: 1120px;
  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --zahl: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; overflow-x: clip; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  font: 16px/1.55 var(--schrift); color: var(--text);
  background:
    radial-gradient(1200px 500px at 85% -120px, rgba(242,184,75,.10), transparent 60%),
    radial-gradient(900px 400px at -10% 0, rgba(88,101,242,.10), transparent 60%),
    var(--bg);
}
a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .6rem; letter-spacing: -.01em; }
h1 { font-size: clamp(1.8rem, 5vw, 2.8rem); font-weight: 800; }
h2 { font-size: 1.25rem; font-weight: 700; }
h3 { font-size: 1.02rem; font-weight: 700; }
p { margin: 0 0 .9rem; }
.leise { color: var(--leise); }
.sprung { position: absolute; left: -999px; }
.sprung:focus { left: 16px; top: 8px; z-index: 50; background: var(--gold); color: #000; padding: .4rem .8rem; border-radius: 6px; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }

/* ----- Demo-Band ----- */
.demo-band {
  background: repeating-linear-gradient(-45deg, #3a2b07, #3a2b07 12px, #43320a 12px, #43320a 24px);
  color: #ffe3a3; text-align: center; font-size: .85rem; padding: .45rem 16px;
  border-bottom: 1px solid #5c4511;
}
.demo-band strong { text-transform: uppercase; letter-spacing: .12em; margin-right: .3rem; }

/* ----- Ansicht als (Vorschau der Ligaleitung) ----- */
.vorschau-band {
  background: repeating-linear-gradient(-45deg, #13204a, #13204a 12px, #182a5c 12px, #182a5c 24px);
  color: #dfe5ff; font-size: .9rem; padding: .45rem 16px; border-bottom: 2px solid var(--discord);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .3rem .9rem; text-align: center;
}
.vorschau-band form { margin: 0; }
.vorschau-band .knopf { padding: .3rem .8rem; font-size: .85rem; background: var(--discord); border-color: transparent; color: #fff; }
/* ----- Kopf ----- */
.kopf {
  position: sticky; top: 0; z-index: 20;
  background: rgba(13,16,23,.86); backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--rand);
}
.kopf-innen {
  max-width: var(--max); margin: 0 auto; padding: .6rem 16px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .4rem 1.2rem;
  grid-template-areas: "marke konto" "nav nav";
}
.marke { grid-area: marke; }
.hauptnav { grid-area: nav; }
.konto { grid-area: konto; }
.marke { display: flex; align-items: center; gap: .6rem; color: var(--text); font-weight: 800; letter-spacing: .01em; white-space: nowrap; }
.marke:hover { text-decoration: none; }
.marke-text { font-size: 1.05rem; }
.hauptnav { display: flex; flex-wrap: wrap; gap: .25rem; margin-left: -.7rem; }
.hauptnav::-webkit-scrollbar { display: none; }
.hauptnav a {
  color: var(--leise); padding: .45rem .7rem; border-radius: 999px; white-space: nowrap; font-weight: 600; font-size: .93rem;
}
.hauptnav a:hover { color: var(--text); background: var(--flaeche-2); text-decoration: none; }
.hauptnav a[aria-current="page"] { color: #17120a; background: var(--gold); }
.konto { display: flex; align-items: center; gap: .5rem; }
.konto form { margin: 0; }
.konto-name { color: var(--text); font-weight: 600; font-size: .9rem; display: flex; align-items: center; gap: .4rem; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.punkt { width: .55rem; height: .55rem; border-radius: 50%; background: var(--leise); flex: none; }
.punkt.rolle-1 { background: var(--sieg); }
.punkt.rolle-2, .punkt.rolle-3 { background: var(--gold); }
.punkt.rolle-4 { background: var(--discord); }

@media (max-width: 760px) {
  .kopf-innen { grid-template-columns: minmax(0, 1fr) auto; }
  .marke { min-width: 0; }
  .marke-text { overflow: hidden; text-overflow: ellipsis; }
  .konto form[action="/logout"] { display: none; }      /* Abmelden steht in »Mein Bereich« */
  .hauptnav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px .1rem;
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .hauptnav::-webkit-scrollbar { display: none; }
  .konto-name { max-width: 9rem; }
  .kopf-innen { grid-template-areas: "marke konto" "nav nav" "ansicht ansicht"; }
  .konto .ansicht-als { grid-area: ansicht; }
}

/* Ansicht als (nur Ligaleitung): kompakt in der Konto-Leiste, mit eigener
   Spezifität (.konto .ansicht-als …) gegen die allgemeinen Formularregeln
   (label als Spalte, select 100 % breit) — sonst stapelte es sich über die
   ganze Kopfzeile und schob die Navigation aus dem Bild (Felix 06.11.2026). */
.konto .ansicht-als { display: flex; align-items: center; gap: .3rem; margin: 0; }
.konto .ansicht-als select {
  width: auto; max-width: 15rem; font-size: .85rem; padding: .35rem .5rem;
  background: var(--flaeche-2); border-color: var(--rand);
}
.konto .ansicht-als .knopf { padding: .35rem .6rem; font-size: .85rem; }
.nur-vorleser { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 760px) {
  .konto { display: contents; }
  .konto .ansicht-als { grid-area: ansicht; }
  .konto .ansicht-als select { flex: 1; max-width: none; }
  .konto-name, .konto > .knopf-discord { grid-area: konto; justify-self: end; }
}

/* ----- Knöpfe ----- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  font: inherit; font-weight: 700; font-size: .93rem; cursor: pointer;
  padding: .55rem 1rem; border-radius: 10px; border: 1px solid var(--rand);
  background: var(--flaeche-2); color: var(--text); white-space: nowrap;
}
.knopf:hover { text-decoration: none; border-color: #3a475f; background: #222c3e; }
.knopf-haupt { background: linear-gradient(180deg, var(--gold), var(--gold-dunkel)); color: #1a1205; border-color: transparent; }
.knopf-haupt:hover { background: linear-gradient(180deg, #ffc95f, #d99a26); }
.knopf-discord { background: var(--discord); border-color: transparent; color: #fff; }
.knopf-discord:hover { background: #4752c4; }
.knopf-leise { background: transparent; color: var(--leise); padding: .45rem .7rem; }
.knopf.gross { padding: .8rem 1.4rem; font-size: 1rem; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: .6rem; }

/* ----- Seite ----- */
.seite { flex: 1; width: 100%; max-width: var(--max); margin: 0 auto; padding: 1.5rem 16px 3rem; }
.block { margin: 2.2rem 0; }
.block-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.mehr { font-weight: 600; font-size: .92rem; }
.seitenkopf { margin: .8rem 0 1.6rem; }
.ueberzeile { color: var(--leise); font-weight: 600; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: .35rem; }
.etikett {
  display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .03em;
  padding: .15rem .55rem; border-radius: 999px; background: var(--flaeche-2); color: var(--leise); border: 1px solid var(--rand); white-space: nowrap;
}
.etikett.gold { background: var(--gold-hauch); color: var(--gold); border-color: rgba(242,184,75,.35); }
.leise-etikett { opacity: .8; }
.zaehler { font-size: .8rem; color: var(--leise); background: var(--flaeche-2); border-radius: 999px; padding: .1rem .5rem; vertical-align: middle; margin-left: .3rem; }
.hinweis-klein { font-size: .82rem; color: var(--leise); margin-top: .7rem; }
.meldung { background: var(--flaeche); border: 1px solid var(--rand); border-left: 4px solid var(--gold); padding: .7rem .9rem; border-radius: var(--radius-klein); }
.meldung.fehler { border-left-color: var(--nieder); }

/* ----- Held (Start) ----- */
.held {
  display: grid; grid-template-columns: 1.6fr 1fr; gap: 2rem; align-items: center;
  padding: 2.2rem; border-radius: 22px; border: 1px solid var(--rand);
  background:
    linear-gradient(135deg, rgba(242,184,75,.10), transparent 45%),
    linear-gradient(180deg, var(--flaeche), var(--bg-2));
  box-shadow: var(--schatten); position: relative; overflow: hidden;
}
.held::after {
  content: ""; position: absolute; right: -60px; top: -60px; width: 280px; height: 280px;
  background: url("/static/zeichen.svg") no-repeat center / contain; opacity: .06; pointer-events: none;
}
.held-lead { font-size: 1.08rem; color: #c7cede; max-width: 40rem; }
.held-zahlen { display: grid; gap: .7rem; margin: 0; }
.held-zahlen div { background: rgba(13,16,23,.55); border: 1px solid var(--rand); border-radius: var(--radius); padding: .8rem 1rem; display: flex; justify-content: space-between; align-items: baseline; }
.held-zahlen dt { color: var(--leise); font-weight: 600; font-size: .9rem; }
.held-zahlen dd { margin: 0; font: 800 1.7rem/1 var(--zahl); color: var(--gold); }
.phase { display: inline-block; padding: .12rem .55rem; border-radius: 999px; background: rgba(63,191,138,.14); color: var(--sieg); margin-right: .4rem; letter-spacing: .04em; }
.phase-anmeldung { background: rgba(88,101,242,.18); color: #a8b0ff; }
@media (max-width: 760px) {
  .held { grid-template-columns: 1fr; padding: 1.4rem 1.1rem; gap: 1.3rem; border-radius: 18px; }
  .held-zahlen { grid-template-columns: repeat(3, 1fr); gap: .5rem; }
  .held-zahlen div { flex-direction: column-reverse; align-items: flex-start; padding: .6rem .7rem; gap: .25rem; }
  .held-zahlen dt { font-size: .74rem; }
  .held-zahlen dd { font-size: 1.35rem; }
}

/* ----- Zeitleiste ----- */
.zeitleiste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; counter-reset: zl; }
.zeitleiste li { position: relative; background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius-klein); padding: .75rem .9rem .75rem 2.6rem; display: flex; flex-direction: column; }
.zeitleiste li::before { counter-increment: zl; content: counter(zl); position: absolute; left: .8rem; top: .78rem; width: 1.3rem; height: 1.3rem; border-radius: 50%; display: grid; place-items: center; font-size: .75rem; font-weight: 800; background: var(--flaeche-2); color: var(--leise); }
.zeitleiste li.erledigt::before { content: "✓"; background: rgba(63,191,138,.18); color: var(--sieg); }
.zeitleiste li.jetzt { border-color: rgba(242,184,75,.55); background: linear-gradient(180deg, var(--gold-hauch), var(--flaeche)); }
.zeitleiste li.jetzt::before { background: var(--gold); color: #1a1205; }
.zl-titel { font-weight: 700; }
.zl-datum { color: var(--leise); font-size: .85rem; }
@media (max-width: 760px) { .zeitleiste { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .zeitleiste { grid-template-columns: 1fr; } }

/* ----- Karten ----- */
.karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
@media (max-width: 380px) { .karten { grid-template-columns: 1fr; } }
.karte { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); box-shadow: var(--schatten); }
.stufe-karte { display: flex; flex-direction: column; overflow: hidden; }
.stufe-karte header { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .9rem 1rem .5rem; }
.stufe-karte h3 { margin: 0; font-size: 1.1rem; }
.stufe-karte h3 a { color: var(--text); }
.stufe-karte .tabelle-rahmen { border: 0; border-radius: 0; background: transparent; }
.karte-fuss { margin-top: auto; padding: .7rem 1rem; border-top: 1px solid var(--rand); font-weight: 600; font-size: .9rem; }
.raster-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 760px) { .raster-3 { grid-template-columns: 1fr; } }
.punkt-karte { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); padding: 1.1rem 1.1rem .4rem; }
.punkt-karte .nummer { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 10px; background: var(--gold-hauch); color: var(--gold); font-weight: 800; margin-bottom: .6rem; }
.punkt-karte p { color: #c2c9d6; font-size: .95rem; }

/* ----- Tabelle ----- */
.tabelle-rahmen { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); overflow-x: auto; }
.tabelle { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tabelle th { text-align: left; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--leise); font-weight: 700; padding: .6rem .7rem; border-bottom: 1px solid var(--rand); }
.tabelle td { padding: .62rem .7rem; border-bottom: 1px solid rgba(40,50,70,.6); }
.tabelle tbody tr:last-child td { border-bottom: 0; }
.tabelle tbody tr:hover { background: rgba(255,255,255,.02); }
.tabelle .zahl { text-align: right; font-family: var(--zahl); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabelle th.zahl { font-family: var(--schrift); }
.tabelle .platz { color: var(--leise); width: 2.2rem; }
.tabelle tbody tr:first-child .platz { color: var(--gold); font-weight: 800; }
.tabelle .pkt { font-weight: 800; color: var(--text); }
.tabelle .plus { color: var(--sieg); }
.tabelle .minus { color: var(--nieder); }
.tabelle .markiert { background: var(--gold-hauch); }
.team-zelle a { color: var(--text); font-weight: 600; display: inline-flex; align-items: center; gap: .55rem; }
.kuerzel { font: 700 .68rem/1 var(--zahl); color: var(--gold); background: var(--gold-hauch); border-radius: 6px; padding: .28rem .32rem; min-width: 2.3rem; text-align: center; }
.tabelle.kompakt td, .tabelle.kompakt th { padding: .48rem .7rem; }
@media (max-width: 560px) {
  .tabelle .breit { display: none; }
  .tabelle td, .tabelle th { padding: .55rem .45rem; }
  .kuerzel { display: none; }
}

/* ----- Spieltage ----- */
.spieltage { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 1rem; }
@media (max-width: 440px) { .spieltage { grid-template-columns: 1fr; } }
.spieltag { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); padding: .9rem 1rem; }
.spieltag h3 { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; font-size: .95rem; }
.spieltag h3 .leise { font-weight: 500; font-size: .82rem; }
.begegnungen { list-style: none; margin: 0; padding: 0; }
.begegnung { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .6rem; padding: .55rem 0; border-top: 1px solid rgba(40,50,70,.6); }
.begegnung:first-child { border-top: 0; }
.begegnung a { color: #cfd5e1; font-weight: 600; font-size: .93rem; min-width: 0; }
.seite-heim { text-align: right; }
.begegnung .sieger { color: var(--text); }
.begegnung .sieger { font-weight: 800; }
.begegnung .seite-heim.sieger { box-shadow: inset -3px 0 0 var(--sieg); padding-right: .5rem; }
.begegnung .seite-gast.sieger { box-shadow: inset 3px 0 0 var(--sieg); padding-left: .5rem; }
.begegnung .eigen { color: var(--gold); }
.ergebnis { font: 800 1rem/1 var(--zahl); background: var(--bg-2); border: 1px solid var(--rand); border-radius: 8px; padding: .4rem .55rem; min-width: 4.6rem; text-align: center; font-variant-numeric: tabular-nums; }
.ergebnis.remis { color: var(--remis); }
.ergebnis .trenner { color: var(--leise); margin: 0 .1rem; }
.ergebnis .offen { color: var(--leise); font-weight: 600; font-size: .85rem; font-family: var(--schrift); }
.begegnung .hinweis-klein { grid-column: 1 / -1; text-align: center; margin: 0; }
.begegnung.spielfrei { display: block; text-align: center; color: var(--leise); font-size: .88rem; padding: .6rem 0 .2rem; }
.begegnung.spielfrei a { color: var(--leise); }

/* ----- Teams ----- */
.team-raster { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .7rem; }
.team-kachel { display: flex; align-items: center; gap: .8rem; padding: .8rem; background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); color: var(--text); font-weight: 650; }
.team-kachel:hover { border-color: rgba(242,184,75,.5); text-decoration: none; }
.wappen {
  flex: none; width: 2.6rem; height: 2.9rem; display: grid; place-items: center;
  font: 800 .78rem/1 var(--zahl); color: #1a1205;
  background: linear-gradient(180deg, var(--gold), var(--gold-dunkel));
  clip-path: polygon(50% 0, 100% 14%, 100% 58%, 50% 100%, 0 58%, 0 14%);
}
.wappen.gross { width: 4.2rem; height: 4.7rem; font-size: 1.15rem; }
.team-kopf { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.team-kopf h1 { margin-bottom: .2rem; }
.team-kopf p { margin: 0; }
.team-aktion { margin-left: auto; }
.team-aktionen { margin-left: auto; display: flex; flex-wrap: wrap; gap: .5rem; }
.team-aktionen .team-aktion { margin-left: 0; }
.kennzahlen { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; margin: 0 0 1rem; }
.kennzahlen div { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); padding: .8rem 1rem; }
.kennzahlen dt { color: var(--leise); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.kennzahlen dd { margin: .2rem 0 0; font: 800 1.45rem/1.1 var(--zahl); }
@media (max-width: 560px) { .kennzahlen { grid-template-columns: repeat(2, 1fr); } }
.zwei-spalten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 1.5rem; }
.zwei-spalten .block { margin: 1rem 0; }
.zwei-spalten .spieltage { grid-template-columns: 1fr; }
@media (max-width: 860px) { .zwei-spalten { grid-template-columns: 1fr; } }
.roster { list-style: none; margin: 0; padding: 0; background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); }
.roster li { display: flex; align-items: center; gap: .7rem; padding: .6rem .9rem; border-top: 1px solid rgba(40,50,70,.6); }
.roster li:first-child { border-top: 0; }
.avatar { flex: none; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--flaeche-2); color: var(--gold); font-weight: 800; border: 1px solid var(--rand); }
.roster-name { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: break-word; }
.klarname { display: block; font-weight: 400; color: var(--leise); font-size: .82rem; }

/* ----- Regeln / Fließtext ----- */
.regeln-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 2rem; align-items: start; }
.toc { position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow: auto; background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); padding: .8rem; font-size: .88rem; }
.toc summary { font-weight: 700; cursor: pointer; }
.toc ol { list-style: none; padding: 0; margin: .5rem 0 0; }
.toc li a { display: block; padding: .28rem .4rem; border-radius: 6px; color: #c7cede; }
.toc li a:hover { background: var(--flaeche-2); text-decoration: none; }
.para { color: var(--gold); font-family: var(--zahl); font-weight: 700; font-size: .85em; margin-right: .25rem; }
@media (max-width: 860px) {
  .regeln-layout { grid-template-columns: 1fr; gap: 1rem; }
  .toc { position: static; max-height: none; }
  .toc details:not([open]) { margin: 0; }
}
.fliesstext { max-width: 46rem; font-size: 1.01rem; color: #d3d8e2; }
.fliesstext.schmal { max-width: 40rem; }
.fliesstext h2 { margin-top: 2.2rem; padding-top: .4rem; color: var(--text); }
.fliesstext h3 { margin-top: 1.4rem; color: var(--text); }
.fliesstext ul, .fliesstext ol { padding-left: 1.3rem; margin: 0 0 1rem; }
.fliesstext li { margin: .2rem 0; }
.fliesstext li::marker { color: var(--gold); }
.fliesstext hr { border: 0; border-top: 1px solid var(--rand); margin: 2rem 0; }
.fussnote { font-size: .85rem; color: var(--leise); }
.platzhalter { border: 1px dashed rgba(242,184,75,.55); background: var(--gold-hauch); border-radius: var(--radius-klein); padding: .7rem .9rem; margin-bottom: 1.2rem; color: #f3d9a2; }

/* ----- Anmelden / Fehler / Leer ----- */
.anmelde-karte { max-width: 30rem; margin: 2.5rem auto; background: var(--flaeche); border: 1px solid var(--rand); border-radius: 18px; padding: 1.8rem 1.5rem; box-shadow: var(--schatten); text-align: center; }
.anmelde-karte h1 { font-size: 1.7rem; }
.anmelde-karte .knopf { margin-top: .5rem; }
.fehlercode { font: 800 3rem/1 var(--zahl); color: var(--gold); margin-bottom: .4rem; }
.block.leer { background: var(--flaeche); border: 1px dashed var(--rand); border-radius: var(--radius); padding: 1.4rem; }
.liste-karten { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.zeile-karte { display: flex; align-items: center; gap: .8rem; padding: .7rem .9rem; flex-wrap: wrap; }
.zeile-karte > a:first-of-type { flex: 1; font-weight: 700; color: var(--text); }

/* ----- Fuß ----- */
.fuss { border-top: 1px solid var(--rand); background: var(--bg-2); }
.fuss-innen { max-width: var(--max); margin: 0 auto; padding: 1.4rem 16px .6rem; display: flex; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; }
.fuss nav { display: flex; gap: .4rem 1.2rem; flex-wrap: wrap; align-items: center; }
.fuss nav a { color: #c7cede; font-size: .92rem; }
.fuss-klein { max-width: var(--max); margin: 0 auto; padding: 0 16px 1.4rem; font-size: .76rem; color: #6f7a8e; }

/* Kompakte Tabellen in den Stufen-Karten: kein Kürzel, damit »Pkt« bei
   drei Karten nebeneinander nicht abgeschnitten wird. */
.tabelle.kompakt .kuerzel { display: none; }
.tabelle.kompakt td, .tabelle.kompakt th { padding-left: .55rem; padding-right: .55rem; }

/* ----- Teamnamen: NIE mitten im Wort trennen (04.11.2026) -----
   »hyphens: auto« trennte am Handy »Kometen-hammer«, »overflow-wrap:
   anywhere« zerhackte Namen. Umbruch nur an Leerzeichen und Bindestrichen
   des Namens selbst; am Handy wird die Schrift der Begegnungen kleiner,
   damit auch das längste Wort in die Spalte passt. */
.teamname, .begegnung a, .team-kachel, .team-zelle a, .seitenkopf h1 {
  hyphens: manual; -webkit-hyphens: manual; word-break: normal; overflow-wrap: normal;
}
@media (max-width: 420px) {
  .begegnung { gap: .4rem; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .begegnung a { font-size: .8rem; }
  .ergebnis { min-width: 3.9rem; padding: .35rem .4rem; font-size: .92rem; }
  .spieltag { padding: .8rem .7rem; }
  .team-kopf h1 { font-size: 1.6rem; }
}

/* ----- Formulare, Anträge (Captain-Bereich, Widerspruch) ----- */
.meldung.ok { border-left-color: var(--sieg); }
.meldung { margin: 0 0 1rem; }
.leer-text { color: var(--leise); }
.abstand { margin-top: 1.8rem; }
.formular-karte { padding: 1rem 1.1rem; }
.schmal-karte { max-width: 38rem; }
.form-raster { display: grid; grid-template-columns: 1fr 1fr auto; gap: .7rem; align-items: end; margin: .4rem 0 0; }
.form-raster.einspaltig { grid-template-columns: 1fr; align-items: stretch; }
.form-raster.einspaltig .knopf { justify-self: start; }
@media (max-width: 560px) { .form-raster { grid-template-columns: 1fr; align-items: stretch; } .form-raster .knopf { justify-self: start; } }
label { display: flex; flex-direction: column; gap: .3rem; font-size: .88rem; font-weight: 600; color: #c7cede; }
input:not([type=checkbox]):not([type=radio]), select {
  font: inherit; font-size: 1rem; color: var(--text); background: var(--bg-2);
  border: 1px solid var(--rand); border-radius: 8px; padding: .55rem .65rem; width: 100%; min-width: 0;
}
input:focus, select:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
label.haken { flex-direction: row; align-items: flex-start; gap: .55rem; font-weight: 500; margin: .5rem 0; }
label.haken input { margin-top: .2rem; accent-color: var(--gold); }
fieldset { border: 1px solid var(--rand); border-radius: var(--radius-klein); padding: .5rem .9rem .3rem; margin: 0; }
legend { font-weight: 700; padding: 0 .3rem; }
.falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.knopf-warn { border-color: rgba(239,100,97,.5); color: #ffb4b2; }
.knopf-warn:hover { background: rgba(239,100,97,.12); }
.minus-etikett { color: var(--nieder); border-color: rgba(239,100,97,.4); }
.suchergebnis { margin-top: .9rem; padding: .8rem .9rem; border-radius: var(--radius-klein); border: 1px solid var(--rand); background: var(--bg-2); }
.suchergebnis.status-gefunden, .suchergebnis.status-neu { border-color: rgba(63,191,138,.45); }
.suchergebnis.status-mehrdeutig, .suchergebnis.status-gesperrt, .suchergebnis.status-widerspruch, .suchergebnis.status-nur_discord { border-color: rgba(239,100,97,.45); }
.suchergebnis p { margin: 0 0 .5rem; }
.schritte { padding-left: 1.3rem; color: #c7cede; font-size: .93rem; }
.schritte li { margin: .35rem 0; }
.schritte li::marker { color: var(--gold); font-weight: 800; }
.verwalt-roster li { flex-wrap: wrap; }
.zeilen-aktion { flex-basis: 100%; margin-left: 2.7rem; font-size: .88rem; }
.zeilen-aktion summary { cursor: pointer; color: var(--gold); font-weight: 600; width: max-content; }
.aktion-inhalt { display: flex; flex-wrap: wrap; gap: .6rem; align-items: end; padding: .6rem 0 .2rem; }
.inline-form { display: flex; flex-wrap: wrap; gap: .6rem; align-items: end; margin: 0; }
.inline-form label { min-width: 10rem; }
.gefahr { border: 1px solid rgba(239,100,97,.35); border-radius: var(--radius-klein); padding: .7rem .9rem; }
.gefahr summary { cursor: pointer; font-weight: 700; color: #ffb4b2; }
.gefahr form { margin-top: .6rem; }
.antraege { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.antrag { background: var(--flaeche); border: 1px solid var(--rand); border-left: 4px solid var(--rand); border-radius: var(--radius-klein); padding: .7rem .9rem; }
.antrag.status-offen { border-left-color: var(--gold); }
.antrag.status-freigegeben { border-left-color: var(--sieg); }
.antrag.status-abgelehnt { border-left-color: var(--nieder); }
.antrag p { margin: .3rem 0 0; }
.antrag form { margin-top: .4rem; }
.antrag-kopf { display: flex; flex-wrap: wrap; gap: .4rem .6rem; align-items: center; }
.antrag-art { font-weight: 800; }
.antrag-meta { font-size: .8rem; color: var(--leise); }
.antrag-grund { font-size: .9rem; color: #ffcfcd; }
.antrag-hinweis { font-size: .88rem; color: #f3d9a2; }
.status-etikett { font-size: .74rem; font-weight: 700; border-radius: 999px; padding: .12rem .55rem; background: var(--flaeche-2); color: var(--leise); }
.status-etikett.status-offen { background: var(--gold-hauch); color: var(--gold); }
.status-etikett.status-freigegeben { background: rgba(63,191,138,.15); color: var(--sieg); }
.status-etikett.status-abgelehnt { background: rgba(239,100,97,.15); color: var(--nieder); }
.status-etikett.herald-wartet_auf_anmeldung, .status-etikett.herald-ausstehend { background: rgba(88,101,242,.18); color: #a8b0ff; }
.status-etikett.herald-fehler { background: rgba(239,100,97,.15); color: var(--nieder); }
.tb { font-size: .7rem; color: var(--leise); font-weight: 500; }
.minus { color: var(--nieder); }

/* ---------------- Ligaleitung (AP13) + Spielerprofile (AP17) ---------------- */
.leitung-nav { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.4rem; }
.leitung-nav a { padding: .38rem .75rem; border: 1px solid var(--rand); border-radius: 999px; font-size: .88rem; font-weight: 600; color: #c7cede; background: var(--flaeche); }
.leitung-nav a[aria-current=page] { background: var(--gold-hauch); color: var(--gold); border-color: rgba(242,184,75,.45); }
.leitung-nav a:hover { text-decoration: none; border-color: var(--gold-dunkel); }
.maengel { margin: .4rem 0 .8rem; padding-left: 1.2rem; font-size: .93rem; }
.maengel li.hart::marker { color: var(--nieder); }
.maengel li.weich::marker { color: var(--gold); }
.phasenleiste { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem; padding: 0; margin: 0 0 1rem; counter-reset: ph; }
.phasenleiste li { counter-increment: ph; font-size: .8rem; padding: .3rem .6rem; border-radius: 6px; background: var(--flaeche); border: 1px solid var(--rand); color: var(--leise); }
.phasenleiste li::before { content: counter(ph) ". "; }
.phasenleiste li.jetzt { background: var(--gold-hauch); color: var(--gold); border-color: rgba(242,184,75,.45); font-weight: 700; }
.fristen-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .7rem; margin-bottom: .6rem; }
textarea { font: inherit; font-size: 1rem; color: var(--text); background: var(--bg-2); border: 1px solid var(--rand); border-radius: 8px; padding: .55rem .65rem; width: 100%; resize: vertical; }
textarea:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.entscheiden { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-top: .5rem; }
@media (max-width: 720px) { .entscheiden { grid-template-columns: 1fr; } }
.entscheiden .inline-form label { flex: 1 1 10rem; }
.antrag-grund-neutral { font-size: .92rem; color: #d5dbe7; font-style: italic; }
.korrektur-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.korrektur-liste p { margin: 0; }
.zeilen-aktion-frei summary { cursor: pointer; color: var(--gold); font-weight: 600; font-size: .88rem; margin-top: .3rem; width: max-content; }
.zeilen-aktion-frei form { margin-top: .5rem; }
input.schmal { width: 4.5rem !important; }
.protokoll { white-space: pre-wrap; font: .85rem/1.5 var(--zahl); background: var(--bg-2); border: 1px solid var(--rand); border-radius: 8px; padding: .7rem .8rem; overflow-x: auto; margin: 0 0 .8rem; }
.pruefliste { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; font-size: .92rem; }
.info14 { display: grid; grid-template-columns: minmax(9rem, 14rem) 1fr; gap: .4rem 1rem; margin: 0; font-size: .93rem; }
.info14 dt { font-weight: 700; color: #c7cede; }
.info14 dd { margin: 0; color: #d5dbe7; }
@media (max-width: 560px) { .info14 { grid-template-columns: 1fr; } .info14 dd { margin-bottom: .5rem; } }
.code { font-family: var(--zahl); font-size: 1.15rem; letter-spacing: .06em; color: var(--gold); }
.avatar.gross { width: 3.2rem; height: 3.2rem; font-size: 1.4rem; }
.fall fieldset { margin: .6rem 0; }
.fall { margin-bottom: .8rem; }
table.einstufung select { min-width: 6.5rem; }
table.einstufung input { min-width: 9rem; }

/* Widerspruchs-Fälle: Hash-Treffer nur als Liste (Entscheidung in der Club-App) */
.kandidaten { margin: .3rem 0 0; padding-left: 1.2rem; }
.kandidaten li { margin: .2rem 0; }
.unterzeile { font-size: 1rem; margin: .6rem 0 .2rem; }

/* Herald-Bericht (Prüfmodus/echt, liga/herald_liga.Bericht) */
.status-etikett.herald-vorschau { background: rgba(88,101,242,.18); color: #a8b0ff; }
.status-etikett.herald-gesendet, .status-etikett.herald-stimmt { background: rgba(80,200,120,.15); color: var(--sieg, #6fd08c); }
.status-etikett.herald-mangel, .status-etikett.herald-wartet,
.status-etikett.herald-handarbeit, .status-etikett.herald-ueberholt { background: rgba(240,180,60,.15); color: #f0c060; }
.herald-bericht td:last-child { overflow-wrap: break-word; }

/* ---------------- Team-Strategie (AP18-Anschluss, ohne JavaScript) ---------------- */
.strat-titel { margin: 0 0 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.strat-runden, .strat-kader, .strat-listen, .strat-brett, .strat-matchups { list-style: none; margin: 0; padding: 0; }
.strat-runde { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; padding: .7rem .8rem; margin: 0 0 .5rem; border: 1px solid var(--rand); border-radius: 10px; background: var(--flaeche); color: inherit; text-decoration: none; }
.strat-runde:hover, .strat-runde:focus-visible { border-color: var(--gold); }
.strat-nr { font-weight: 800; min-width: 1.6rem; text-align: center; color: var(--gold); }
.strat-gegner { flex: 1 1 12rem; }
.strat-ergebnis { font-weight: 800; font-variant-numeric: tabular-nums; }
.status-etikett.strat-gepaart { background: var(--gold-hauch); color: var(--gold); }
.status-etikett.strat-gespielt { background: rgba(63,191,138,.15); color: var(--sieg); }
.strat-kader > li { padding: .6rem 0; border-bottom: 1px solid var(--rand); }
.strat-kader > li.inaktiv { opacity: .55; }
.strat-kader-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.strat-listen > li { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; margin: .3rem 0 0 .2rem; font-size: .92rem; }
.strat-listen details { flex-basis: 100%; }
.strat-listentext { white-space: pre-wrap; overflow-wrap: break-word; font-size: .82rem; max-height: 22rem; overflow: auto; background: var(--flaeche-2); padding: .6rem; border-radius: 8px; }
.inline-form.klein .knopf { padding: .15rem .55rem; font-size: .78rem; }
.klein { font-size: .82rem; }
.strat-formular { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .6rem .9rem; align-items: end; }
.strat-formular label { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; }
.strat-formular .breit, .strat-gegnerzeile .breit { grid-column: 1 / -1; }
.strat-formular textarea, .strat-formular input, .strat-formular select,
.strat-einschaetzung select, .strat-einschaetzung input, .strat-brett select, .strat-brett input { width: 100%; box-sizing: border-box; }
.strat-gegnerzeile { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .8rem; border: 1px solid var(--rand); border-radius: 10px; margin: 0 0 .7rem; padding: .5rem .8rem .8rem; }
.strat-gegnerzeile legend { font-weight: 700; padding: 0 .3rem; }
.strat-gegnerzeile label { display: flex; flex-direction: column; gap: .2rem; font-size: .85rem; }
.strat-brett > li { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .7rem; padding: .6rem 0; border-bottom: 1px solid var(--rand); }
.strat-brett > li > strong { flex: 0 0 100%; }
.strat-brett label { display: flex; align-items: center; gap: .3rem; font-size: .85rem; }
.strat-brett input.kurz { width: 3.4rem; }
.strat-matrix th, .strat-matrix td { text-align: center; white-space: nowrap; }
.strat-matrix th[scope="row"] { text-align: left; }
.strat-matrix .tb { display: block; }
.wertung.w2 { background: rgba(63,191,138,.28); }
.wertung.w1 { background: rgba(63,191,138,.14); }
.wertung.w-1 { background: rgba(239,100,97,.14); }
.wertung.w-2 { background: rgba(239,100,97,.28); }
.strat-matrix td.gesetzt { outline: 2px solid var(--gold); outline-offset: -2px; }
.strat-matchups > li { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem; padding: .5rem 0; border-bottom: 1px solid var(--rand); }
.strat-matchups .wertung { padding: .1rem .5rem; border-radius: 999px; font-size: .8rem; }
@media (max-width: 520px) {
  .strat-gegnerzeile { grid-template-columns: 1fr; }
}

/* ----- Team-Anmeldung auffindbar, mehrere Rollen (ligaweb-leitungspieler) ----- */
.etiketten { display: flex; flex-wrap: wrap; gap: .35rem; margin: .3rem 0 0; }
.anmelde-ruf {
  border: 1px solid rgba(242,184,75,.35); background: var(--gold-hauch);
  border-radius: 14px; padding: 1rem 1.2rem;
}
.anmelde-ruf h2 { margin-top: 0; }
.anmelde-ruf .knopfreihe { flex-wrap: wrap; margin-bottom: 0; }

/* ----- Bilder (ligaweb-bilder) ----- */
img.avatar { object-fit: cover; padding: 0; background: var(--flaeche-2); }
.wappen-bild { flex: none; width: 2.6rem; height: 2.9rem; object-fit: contain; }
.wappen-bild.gross { width: 4.2rem; height: 4.7rem; }
.kuerzel-bild { flex: none; width: 1.5rem; height: 1.5rem; object-fit: contain; }
.konto-name img.avatar { width: 1.6rem; height: 1.6rem; }
.bild-karte { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.bild-karte .bild-formulare { flex: 1; min-width: 14rem; display: grid; gap: .6rem; }
.bild-karte input[type=file] { max-width: 100%; }
.bild-vorschau { width: 6rem; height: 6rem; border-radius: 50%; object-fit: cover; border: 1px solid var(--rand); background: var(--flaeche-2); }
.bild-vorschau.team { border-radius: 8px; object-fit: contain; }
span.bild-vorschau { display: grid; place-items: center; color: var(--gold); font-weight: 800; font-size: 2rem; }
.knopf-reihe { display: flex; gap: .5rem; flex-wrap: wrap; }
/* »Code anfordern« (ligaweb-verifycode, 06.11.2026) */
.verify-karte .meldung.warten { border-left-color: var(--discord); }
.verify-code { margin: .4rem 0 .6rem; }
.verify-code code { display: inline-block; font-size: 1.9rem; font-weight: 800; letter-spacing: .08em; padding: .45rem .9rem; border: 1px dashed var(--gold); border-radius: var(--radius-klein); background: var(--bg-2); color: var(--gold); user-select: all; -webkit-user-select: all; }
@media (max-width: 560px) { .verify-code code { font-size: 1.5rem; } }
.verify-karte .knopf-reihe { margin: .6rem 0; }
.abstand-klein { margin-top: .6rem; }
.verify-oder { margin: .9rem 0 0; font-size: .93rem; color: #c7cede; }
.ausweich { margin-top: 1.4rem; font-size: .88rem; }
.ausweich > summary { cursor: pointer; color: var(--leise); }
.ausweich[open] > summary { margin-bottom: .6rem; }

/* Discord-Kontrollpanel (/leitung/discord, ligaweb-discordpanel) */
.discord-status dd.an, .discord-status dd.echt { color: var(--sieg, #5fd38d); }
.discord-status dd.aus { color: var(--leise); }
.discord-status dd.pruef { color: var(--gold); }
.haupt-schalter { font-size: .95rem; }
.phasen-schalter, fieldset { border: 1px solid var(--rand); border-radius: 8px; padding: .5rem .8rem .3rem; margin: .6rem 0 .8rem; min-width: 0; }
.phasen-schalter legend, fieldset legend { font-size: .82rem; color: var(--leise); padding: 0 .3rem; }
.echt-karte { border-color: rgba(239,100,97,.55); }
.discord-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .7rem; margin-bottom: .4rem; }
.kanal-wahl { display: grid; grid-template-columns: 2fr 1fr; gap: .7rem; margin: 0 0 .8rem; }
.farben-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .3rem .9rem; }
.farbe-zeile { display: flex; align-items: center; gap: .5rem; justify-content: space-between; }
.farbe-zeile input[type=color] { width: 2.6rem; height: 1.9rem; padding: 0; border: 1px solid var(--rand); border-radius: 6px; background: transparent; }
.rollen-vorschau { list-style: none; padding: 0; margin: .3rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.rollen-vorschau li { display: inline-flex; align-items: center; gap: .4rem; background: var(--flaeche); border: 1px solid var(--rand); border-radius: 999px; padding: .2rem .7rem; font-size: .85rem; max-width: 100%; }
.rollen-name { font-weight: 600; overflow-wrap: break-word; }
.rollen-punkt { width: .7rem; height: .7rem; flex: none; }
.lauf-zahlen { margin: .3rem 0 .8rem; padding-left: 1.1rem; }
.post-zaehler { grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); }
@media (max-width: 560px) { .kanal-wahl { grid-template-columns: 1fr; } }