/* ===== Feelochamp shared styles =====
   Combined from the per-page <style> blocks that used to live in each
   template. Rules used on only one page keep living here too (no
   collision risk from the unique class names) but a few classes are
   styled slightly differently per page (content-card spacing, the
   kickoff button's padding, crest size, some navbar sizing) — those
   are scoped under the body.page-* class each template sets. */

:root{
  --ink:#050b1a;
  --ink-2:#0a1730;
  --panel: rgba(6,16,36,0.66);
  --panel-strong: rgba(6,16,36,0.85);
  --cyan:#22d3ee;
  --cyan-soft:#8fe9f7;
  --blue:#3b82f6;
  --white:#f3f7ff;
  --slate:#a8b7d6;
  --green:#22c55e;
  --green-dark:#16a34a;
  --line: rgba(243,247,255,0.12);
  --line-cyan: rgba(34,211,238,0.4);
  --shadow: 0 20px 60px rgba(0,0,0,0.5);
  --nav-h: 63px; /* Höhe der sticky .navbar-feelo (py-2 + Brand) */
}
body.page-home{ --panel-strong: rgba(6,16,36,0.82); }

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scrollbar-color:#21CDE7 rgba(6,16,36,0.66); scrollbar-width:thin; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

::-webkit-scrollbar{ width:12px; height:12px; }
::-webkit-scrollbar-track{ background:rgba(6,16,36,0.66); }
::-webkit-scrollbar-thumb{ background:#21CDE7; border-radius:8px; border:2px solid rgba(6,16,36,0.66); }
::-webkit-scrollbar-thumb:hover{ background:#5be0f2; }

body{
  background: var(--ink);
  color: var(--white);
  font-family:'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{ text-decoration:none; }
.mono{ font-family:'JetBrains Mono', ui-monospace, Menlo, monospace; }
.eyebrow{
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color: var(--cyan-soft);
}
.text-slate{ color:var(--slate) !important; }
.text-cyan{ color: var(--cyan) !important; }

a:focus-visible, button:focus-visible, input:focus-visible, .btn:focus-visible, .nav-link:focus-visible, .form-check-input:focus-visible{
  outline: 2px solid var(--cyan); outline-offset:3px; border-radius:3px;
}

/* ---------- Navbar ---------- */
.navbar-feelo{
  background: rgba(5,11,26,0.9);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.navbar-feelo .navbar-brand{
  font-family:'Bebas Neue', sans-serif; font-size:1.5rem; letter-spacing:.06em;
  color: var(--white); display:flex; align-items:center; gap:.55rem;
}
.navbar-feelo .nav-link{
  color: var(--slate); font-size:.85rem; font-weight:600; letter-spacing:.02em;
  padding:.5rem .85rem !important; transition: color .15s ease;
}
.navbar-feelo .nav-link:hover, .navbar-feelo .nav-link:focus{ color: var(--cyan-soft); }
.navbar-feelo .nav-link.nav-link-admin{ color:#e2596b; }
.navbar-feelo .nav-link.nav-link-admin:hover, .navbar-feelo .nav-link.nav-link-admin:focus{ color:#ff8a97; }
.navbar-feelo .nav-link.active-mark{ color: var(--white); position:relative; }
.navbar-feelo .nav-link.active-mark::after{
  content:""; position:absolute; left:.85rem; right:.85rem; bottom:.1rem;
  height:2px; background: var(--cyan); border-radius:2px;
}
/* ---- Mobiles Hamburger-Icon: kein Rahmen, helle Striche, öffnet zu einem X ----
   3 unabhängige Striche direkt am Button (::before / .icon / ::after), damit sich
   die Transforms nicht gegenseitig vererben. */
.navbar-feelo .navbar-toggler{
  position: relative; padding: 0;
  border: none !important; box-shadow: none !important; outline: none;
  width: 2.6rem; height: 2.6rem;
}
.navbar-feelo .navbar-toggler::before,
.navbar-feelo .navbar-toggler::after,
.navbar-feelo .navbar-toggler .navbar-toggler-icon{
  content: "";
  position: absolute; top: 50%; left: 50%;
  width: 1.4rem; height: 2px; margin: -1px 0 0 -.7rem;
  background-image: none;
  background-color: var(--white); border-radius: 2px;
  transition: transform .3s cubic-bezier(.4,.05,.2,1), opacity .2s ease, background-color .2s ease;
}
.navbar-feelo .navbar-toggler::before{ transform: translateY(-6px); }
.navbar-feelo .navbar-toggler::after{ transform: translateY(6px); }
.navbar-feelo .navbar-toggler:hover::before,
.navbar-feelo .navbar-toggler:hover::after,
.navbar-feelo .navbar-toggler:hover .navbar-toggler-icon,
.navbar-feelo .navbar-toggler:focus-visible::before,
.navbar-feelo .navbar-toggler:focus-visible::after,
.navbar-feelo .navbar-toggler:focus-visible .navbar-toggler-icon{ background-color: var(--cyan); }

/* geöffnet -> X: oberer + unterer Strich kreuzen sich, mittlerer blendet aus */
.navbar-feelo .navbar-toggler[aria-expanded="true"]::before{
  transform: translateY(0) rotate(45deg);
}
.navbar-feelo .navbar-toggler[aria-expanded="true"]::after{
  transform: translateY(0) rotate(-45deg);
}
.navbar-feelo .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon{
  opacity: 0; transform: scaleX(.2);
}

/* Startseite verwendet einen minimal helleren/grösseren Navbar-Auftritt */
body.page-home .navbar-feelo{ background: rgba(5,11,26,0.85); }
body.page-home .navbar-feelo .navbar-brand{ font-size:1.55rem; }
body.page-home .navbar-feelo .nav-link{ font-size:.86rem; padding:.5rem .9rem !important; }

.dropdown-menu-feelo{
  background: var(--ink-2); border:1px solid var(--line); box-shadow: var(--shadow); padding:.4rem;
}
.dropdown-menu-feelo .dropdown-item{ color:var(--white); font-size:.88rem; border-radius:.4rem; padding:.5rem .75rem; }
.dropdown-menu-feelo .dropdown-item:hover, .dropdown-menu-feelo .dropdown-item:focus{
  background: rgba(34,211,238,0.12); color: var(--cyan-soft);
}
.dropdown-menu-feelo .dropdown-item.active-mark{ color: var(--cyan-soft); }

.btn-ghost-cyan{
  border:1px solid var(--line-cyan);
  color: var(--cyan-soft);
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.03em;
  padding:.4rem 1.1rem;
  border-radius: 999px;
  transition: all .18s ease;
}
.btn-ghost-cyan:hover{
  background: var(--cyan);
  color:#031018;
  border-color: var(--cyan);
}

.user-chip{
  display:flex; align-items:center; gap:.5rem;
  color: var(--white); font-weight:600; font-size:.86rem;
}
.user-avatar{
  width:1.9rem; height:1.9rem; border-radius:50%;
  background: linear-gradient(160deg, var(--cyan), var(--blue));
  display:flex; align-items:center; justify-content:center;
  font-family:'JetBrains Mono', monospace; font-weight:700; font-size:.72rem; color:#04131c;
}

/* Mobile: das User-Dropdown genau wie die anderen Nav-Dropdowns
   (inline aufklappen statt rechts überlagern) */
@media (max-width: 991.98px){
  .navbar-feelo .navbar-collapse > .dropdown{ width: 100%; }
  .navbar-feelo .navbar-collapse > .dropdown .user-chip{
    padding: .5rem .85rem;
    color: var(--slate); font-size: .85rem; font-weight: 600; letter-spacing: .02em;
  }
  .navbar-feelo .navbar-collapse > .dropdown .user-chip:hover,
  .navbar-feelo .navbar-collapse > .dropdown .user-chip.show{ color: var(--cyan-soft); }
  .navbar-feelo .navbar-collapse > .dropdown .user-chip .user-avatar{
    width: 1.45rem; height: 1.45rem; font-size: .56rem;
  }
  .navbar-feelo .navbar-collapse > .dropdown .dropdown-menu{
    position: static !important;
    inset: auto !important;
    transform: none !important;
    float: none; width: 100%; margin: .15rem 0 .3rem;
  }
}

/* ---------- Hero: Champions-League night glow (Startseite + Start-Dashboard) ---------- */
.hero{
  position:relative;
  padding-top: 7rem;
  padding-bottom: 5rem;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(ellipse 1100px 680px at 18% 6%, rgba(34,211,238,0.32), transparent 60%),
    radial-gradient(ellipse 950px 720px at 88% -4%, rgba(59,130,246,0.30), transparent 58%),
    radial-gradient(ellipse 1300px 800px at 50% 118%, rgba(34,211,238,0.16), transparent 62%),
    linear-gradient(180deg, #050b1a 0%, #081428 45%, #0a1a34 100%);
}
.hero-rays{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:.5;
}
.hero-rays .twinkle{ animation: twinkle 3.4s ease-in-out infinite; }
@keyframes twinkle{ 0%,100%{ opacity:.9; } 50%{ opacity:.2; } }
@media (prefers-reduced-motion: reduce){ .hero-rays .twinkle, .page-header-rays .twinkle{ animation:none; } }

.hero-content{ position:relative; z-index:1; }

.hero-panel{
  display:inline-block;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius:.6rem;
  padding: .55rem 1rem;
  backdrop-filter: blur(6px);
}
.kicker-badge{
  display:inline-flex; align-items:center; gap:.5rem;
  border:1px solid var(--line-cyan);
  border-radius:999px;
  padding:.35rem .9rem;
  background: rgba(34,211,238,0.08);
}

.hero h1{
  font-family:'Bebas Neue', sans-serif;
  font-size: clamp(3.2rem, 8.4vw, 6rem);
  line-height:.95;
  letter-spacing:.01em;
  margin:0;
  color: var(--white);
}
.hero h1 .accent{ color: var(--cyan); }

.hero-lede{
  max-width: 32rem;
  color: var(--slate);
  font-size: 1.02rem;
  line-height:1.6;
  margin:0;
}

/* ---------- Scoreboard countdown (Startseite) ---------- */
.scoreboard-label{
  font-family:'JetBrains Mono', monospace;
  font-size:.7rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color: var(--slate);
}
.scoreboard{
  display:flex; gap:.6rem; margin-top:.6rem; flex-wrap:wrap;
}
.scoreboard .cell{
  background: var(--panel-strong);
  border: 1px solid var(--line);
  border-radius: .55rem;
  min-width: 4.4rem;
  padding: .65rem .4rem .5rem;
  text-align:center;
}
.scoreboard .cell .val{
  font-family:'JetBrains Mono', monospace;
  font-weight:700;
  font-size:1.65rem;
  color: var(--cyan-soft);
  font-variant-numeric: tabular-nums;
}
.scoreboard .cell .lbl{
  display:block;
  margin-top:.15rem;
  font-size:.6rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: var(--slate);
}

@media (max-width: 575.98px){
  .scoreboard{ gap:.4rem; }
  .scoreboard .cell{ min-width:3.3rem; padding:.5rem .25rem .4rem; }
  .scoreboard .cell .val{ font-size:1.15rem; }
  .scoreboard .cell .lbl{ font-size:.52rem; letter-spacing:.1em; }
}

/* ---------- Login card (Startseite, hell wie die Content-Card) ---------- */
.login-card{
  background: linear-gradient(180deg, #fbfdff, #eef3fb);
  border-radius: 1rem;
  box-shadow: var(--shadow), 0 0 0 1px rgba(34,211,238,0.25);
  overflow:hidden;
  color:#0c1930;
}
.login-card-head{
  padding: 1.3rem 1.6rem 1rem;
  display:flex; align-items:center; gap:.6rem;
  border-bottom: 1px solid rgba(12,25,48,0.08);
}
.login-card-head svg{ flex:none; }
.login-card-head h2{
  font-family:'Bebas Neue', sans-serif;
  letter-spacing:.04em;
  font-size:1.3rem;
  margin:0;
  color:#0c1930;
}
.login-card-body{ padding: 1.4rem 1.6rem 1.7rem; }

.form-label-feelo{
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#4a5b7c;
  margin-bottom:.35rem;
}
.input-feelo{
  background:#fff;
  border: 1px solid rgba(12,25,48,0.14);
  color:#0c1930;
  padding: .65rem .85rem;
  border-radius:.55rem;
}
.input-feelo::placeholder{ color: rgba(74,91,124,0.55); }
.input-feelo:focus{
  background:#fff;
  border-color: var(--blue);
  color:#0c1930;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.18);
}

/* ---------- section divider (Startseite) ---------- */
.hero-divider{
  height:1px;
  background: linear-gradient(90deg, transparent, var(--line-cyan) 25%, var(--line-cyan) 75%, transparent);
}

/* ---------- Matchday programme / Sitemap (alle Seiten) ---------- */
body.page-home .section-programme,
body.page-start .section-programme,
body.page-spiele .section-programme,
body.page-aufsteiger .section-programme,
body.page-default .section-programme{
  background: linear-gradient(180deg, var(--ink-2) 0%, #0a1626 100%);
  border-bottom: 1px solid var(--line);
  padding: 4.5rem 0;
}
body.page-home .programme-head h2,
body.page-start .programme-head h2,
body.page-spiele .programme-head h2,
body.page-aufsteiger .programme-head h2,
body.page-default .programme-head h2{
  font-family:'Bebas Neue', sans-serif;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  letter-spacing:.02em;
  margin-bottom:.3rem;
  color: var(--white);
}

.card-feelo{
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
  border-top: 3px solid var(--cyan);
  border-radius: .8rem;
  padding: 1.5rem 1.4rem;
  height:100%;
  opacity:0; transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease, box-shadow .2s ease, border-color .2s ease;
}
.card-feelo.in-view{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .card-feelo{ opacity:1; transform:none; transition:none; }
}
.card-feelo:hover{
  border-color: var(--line-cyan);
  box-shadow: 0 14px 34px rgba(0,0,0,0.35);
}
.card-feelo .icon-wrap{
  width:2.6rem; height:2.6rem;
  display:flex; align-items:center; justify-content:center;
  border-radius:.6rem;
  background: rgba(34,211,238,0.12);
  color: var(--cyan-soft);
  margin-bottom:1rem;
}
.card-feelo h3{
  font-family:'Bebas Neue', sans-serif;
  letter-spacing:.05em;
  font-size:1.15rem;
  margin-bottom:.75rem;
  color: var(--white);
}
.card-feelo ul{ margin:0; padding:0; list-style:none; }
.card-feelo li + li{ margin-top:.5rem; }
.card-feelo a{
  color: var(--slate);
  font-size:.92rem;
  display:inline-flex; align-items:center; gap:.4rem;
  transition: color .15s ease, gap .15s ease;
}
.card-feelo a:hover{ color: var(--white); }
.card-feelo a svg{ flex:none; opacity:.5; transition: transform .15s ease, opacity .15s ease; }
.card-feelo a:hover svg{ transform: translateX(3px); opacity:1; }

/* ---------- Login-Dashboard (Start-Seite nach dem Login) ---------- */
/* Mobile: einfache Stapelreihenfolge, Champ-Karte ganz am Ende.
   Ab lg: Champ-Karte rückt neben Titel/Countdown (Grid-Areas), der Rest bleibt volle Breite. */
.dash-layout{
  display:grid;
  grid-template-columns: 1fr;
  grid-template-areas: "title" "tippen" "ergebnisse" "infos" "statistik" "champ";
}
@media (min-width: 992px){
  .dash-layout{
    grid-template-columns: 7fr 5fr;
    column-gap: 2rem;
    grid-template-areas:
      "title      champ"
      "tippen     champ"
      "ergebnisse ergebnisse"
      "infos      infos"
      "statistik  statistik";
  }
}
.dash-title{ grid-area: title; }
.dash-tippen{ grid-area: tippen; }
.dash-ergebnisse{ grid-area: ergebnisse; }
.dash-infos{ grid-area: infos; }
.dash-statistik{ grid-area: statistik; }
.champ-card{ grid-area: champ; }

.dash-group{ margin-top: 2.2rem; }
.dash-heading{
  display:inline-block;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius:.6rem;
  padding:.6rem 1.1rem;
  margin-bottom:.9rem;
}
.dash-heading h2{
  font-family:'Bebas Neue', sans-serif;
  font-size:1.3rem;
  letter-spacing:.03em;
  margin:0;
  color: var(--white);
}
.dash-pills{ display:flex; flex-wrap:wrap; gap:.7rem; }
.dash-pill{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.6rem 1.1rem;
  border-radius:.6rem;
  font-weight:700; font-size:.92rem;
  transition: transform .15s ease, box-shadow .15s ease;
}
.dash-pill:hover{ transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0,0,0,0.3); }
.dash-pill svg{ flex:none; }
.dash-pill.variant-green{ background: linear-gradient(180deg, #34d167, var(--green-dark)); color:#04220f; }
.dash-pill.variant-amber{ background: linear-gradient(180deg, #ffcf5c, #e8a72e); color:#3a2600; }
.dash-pill.variant-slate{ background: linear-gradient(180deg, #cbd5e8, #97a7c9); color:#1c2740; }
.dash-pill.variant-cyan{ background: linear-gradient(180deg, var(--cyan-soft), var(--cyan)); color:#04303a; }

.stat-chip{
  display:inline-flex; align-items:center; gap:.25rem;
  background: rgba(4,20,10,0.16);
  border-radius:999px;
  padding:.18rem .55rem;
  font-family:'JetBrains Mono', monospace;
  font-weight:700; font-size:.7rem;
}
.stat-chip svg{ flex:none; }

.champ-card{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background: var(--panel-strong);
  border:1px solid var(--line-cyan);
  border-radius:.8rem;
  padding:1.4rem;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:.7rem;
  backdrop-filter: blur(6px);
}
/* Grosser Deko-Pokal im Hintergrund der "Aktueller Champ"-Karte.
   Sitzt hinter dem Karteninhalt (z-index:-1 im isolierten Stacking-Context),
   blutet unten/rechts aus dem Kartenrand aus. */
.champ-trophy{
  position:absolute;
  left:50%; top:50%;
  transform: translate(-50%, -50%);
  width:66%; height:auto;
  max-height:none;
  z-index:-1;
  pointer-events:none;
  opacity:.5;
}
.champ-trophy .champ-trophy-fill{ opacity:.1; }
.champ-trophy .champ-trophy-line{ opacity:.28; }
@media (max-width: 991.98px){
  .champ-trophy{ width:52%; }
}
.champ-avatar{
  width:4.6rem; height:4.6rem; border-radius:50%;
  background: linear-gradient(160deg, var(--cyan), var(--blue));
  display:flex; align-items:center; justify-content:center;
  font-family:'JetBrains Mono', monospace; font-weight:700; font-size:1.3rem; color:#04131c;
}
/* Foto-Variante: freigestelltes Champ-Portrait im runden Rahmen auf dem Verlauf.
   Als <button> ausgeführt (öffnet die Lightbox), darum Button-Defaults zurücksetzen. */
.champ-avatar.has-photo{
  width:7rem; height:7rem;
  padding:0; border:0; cursor:pointer;
  /* 50% erneut setzen: der globale button:focus-visible-Reset weiter oben
     würde die Ecken sonst auf 3px ziehen, sobald der Button Fokus hat. */
  border-radius:50%;
  overflow:hidden;
  box-shadow: inset 0 0 0 2px rgba(243,247,255,0.25);
  transition: transform .15s ease, box-shadow .15s ease;
}
.champ-avatar.has-photo:hover{
  transform: scale(1.04);
  box-shadow: inset 0 0 0 2px rgba(243,247,255,0.45), 0 8px 24px rgba(0,0,0,0.4);
}
@media (prefers-reduced-motion: reduce){
  .champ-avatar.has-photo{ transition:none; }
  .champ-avatar.has-photo:hover{ transform:none; }
}
.champ-avatar .champ-photo{
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  display:block;
}

/* ---------- Lightbox: Original-Sieger-Foto ---------- */
.lightbox{
  position:fixed; inset:0; z-index:1090;
  display:none; align-items:center; justify-content:center;
  padding:1.5rem;
  background: rgba(3,7,18,0.85);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.lightbox.is-open{ display:flex; }
.lightbox img{
  max-width:min(92vw, 900px); max-height:88vh;
  width:auto; height:auto;
  border-radius:.8rem;
  border:1px solid var(--line-cyan);
  box-shadow: var(--shadow);
  /* Freigestellter Ausschnitt auf dem Champ-Verlauf: die helle Kante des
     Originals leuchtet dabei bewusst als Halo um die Person. */
  background: linear-gradient(160deg, var(--cyan), var(--blue));
}
.lightbox-close{
  position:absolute; top:1rem; right:1.15rem;
  width:2.6rem; height:2.6rem; border-radius:50%;
  border:1px solid var(--line);
  background: var(--panel-strong); color: var(--white);
  font-size:1.6rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.lightbox-close:hover, .lightbox-close:focus-visible{
  background: rgba(34,211,238,0.16); color: var(--cyan-soft);
}

/* Text-Variante der Lightbox (Datenschutz): dunkle Karte wie spiele_info.html
   (body.page-info), Body scrollt, ×-Button bleibt oben stehen. */
.lightbox-panel{
  position:relative;
  display:flex; flex-direction:column;
  width:min(92vw, 640px);
  max-height:86vh;
  overflow:hidden;
  border:1px solid var(--line-cyan);
  border-radius:1rem;
  box-shadow: var(--shadow);
  background: var(--ink-2);
  color: var(--white);
}
.lightbox-panel .lightbox-close{
  top:.7rem; right:.7rem; z-index:1;
}
.lightbox-panel-body{
  overflow-y:auto;
  padding:1.75rem;
}
.lightbox-panel-body h2{
  font-family:'Bebas Neue', sans-serif; letter-spacing:.03em;
  font-size:1.5rem; margin:0 0 .8rem; padding-right:2.2rem; color: var(--white);
}
.lightbox-panel-body h3{
  font-family:'Bebas Neue', sans-serif; letter-spacing:.03em;
  font-size:1.1rem; margin:1.4rem 0 .4rem; color: var(--white);
}
.lightbox-panel-body p{ margin:0 0 .7rem; font-size:.9rem; line-height:1.6; color: var(--slate); }
.lightbox-panel-body strong{ color: var(--white); }
.lightbox-panel-body a{ color: var(--cyan-soft); }
.lightbox-panel-body a:hover{ text-decoration:underline; }
.ds-table{ width:100%; border-collapse:collapse; margin:.5rem 0 .3rem; font-size:.82rem; }
.ds-table th, .ds-table td{
  text-align:left; padding:.4rem .5rem; border-bottom:1px solid var(--line);
}
.ds-table th{ text-transform:uppercase; letter-spacing:.06em; font-size:.7rem; color: var(--slate); }
.ds-table td{ color: var(--white); }

/* Portrait-Variante der Lightbox (Spieler-Icon, Spielstand-Seite) */
.player-lightbox-card{
  display:flex; flex-direction:column; align-items:center; gap:1.1rem;
}
.player-lightbox-avatar{
  width:9rem; height:9rem; border-radius:50%;
  background: linear-gradient(160deg, var(--cyan), var(--blue));
  display:flex; align-items:center; justify-content:center;
  font-family:'JetBrains Mono', monospace; font-weight:700; font-size:2.4rem; color:#04131c;
  border:1px solid var(--line-cyan);
  box-shadow: var(--shadow);
}
.player-lightbox-name{
  font-family:'Bebas Neue', sans-serif; letter-spacing:.04em;
  font-size:1.6rem; color: var(--white);
  text-shadow: 0 0 12px rgba(34,211,238,0.7), 0 0 4px rgba(34,211,238,0.9);
}

/* Frame-Variante der Lightbox (Spiel-Info per iframe, Spiele-Seite) */
.lightbox-frame{
  position:relative;
  display:flex; flex-direction:column;
  width:min(94vw, 760px);
  height:min(82vh, 600px);
  overflow:hidden;
  border:1px solid var(--line-cyan);
  border-radius:1rem;
  box-shadow: var(--shadow);
  background:#fff;
}
.lightbox-frame .lightbox-close{
  top:.7rem; right:.7rem; z-index:1;
  border-color: rgba(12,25,48,0.15);
}
.lightbox-frame iframe{
  flex:1; width:100%; border:0; border-radius:1rem;
}

.champ-card h2{
  font-family:'Bebas Neue', sans-serif;
  font-size:1.4rem; letter-spacing:.03em; margin:0; color: var(--white);
}

/* ---------- Page header strip (Unterseiten) ---------- */
.page-header{
  /* Kein overflow:hidden/isolation:isolate hier: das Rays-SVG clippt sich
     selbst (SVG-Default), aber overflow:hidden würde ein offenes Dropdown
     im Header abschneiden. */
  position:relative;
  padding: 2.6rem 0 3rem;
  background:
    radial-gradient(ellipse 900px 460px at 15% -10%, rgba(34,211,238,0.28), transparent 60%),
    radial-gradient(ellipse 800px 500px at 100% -10%, rgba(59,130,246,0.24), transparent 58%),
    linear-gradient(180deg, #050b1a 0%, #081428 60%, #0a1a34 100%);
}
.page-header-rays{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5; }
.page-header-rays .twinkle{ animation: twinkle 3.4s ease-in-out infinite; }
/* z-index:3, nicht 1: .page-header selbst bildet keine eigene Stacking-Context
   (position:relative ohne z-index), darum konkurriert .page-header-content direkt
   mit .content-card (z-index:2) auf Body-Ebene. Mit z-index:1 verlor es dagegen und
   das MD-Dropdown (Spiele-Seite) landete unter der content-card statt darüber. */
.page-header-content{ position:relative; z-index:3; }
.page-header h1{
  font-family:'Bebas Neue', sans-serif; font-size: clamp(2rem, 4.4vw, 3rem);
  letter-spacing:.02em; margin:0; color: var(--white);
}
.page-header h1 .accent{ color: var(--cyan); }

.md-select .btn{
  background: var(--panel-strong); border:1px solid var(--line-cyan); color: var(--white);
  font-family:'JetBrains Mono', monospace; font-weight:600; font-size:.85rem;
  padding:.5rem 1rem; border-radius:.6rem;
}
.md-select .btn:hover, .md-select .btn:focus{ background: rgba(34,211,238,0.14); color:var(--white); }
.md-select .dropdown-menu{ min-width: 7rem; }

/* ---------- Info notice, "deselect first" hint (Aufsteiger) ---------- */
.notice-feelo{
  position:relative; z-index:2;
  display:flex; align-items:center; gap:.6rem;
  background: linear-gradient(90deg, #0c8f9a, #17a8b5);
  color:#eafdff; font-size:.86rem; font-weight:600;
  border-radius:.6rem; padding:.75rem 1.1rem;
  margin-top:-1.4rem; box-shadow: 0 10px 26px rgba(12,143,154,0.35);
}
.notice-feelo svg{ flex:none; }
.notice-feelo.notice-danger{
  background: linear-gradient(90deg, #b3243b, #d64553);
  color:#fff2f4;
  box-shadow: 0 10px 26px rgba(179,36,59,0.35);
}
.notice-feelo.notice-danger a{
  color:#fff; text-decoration:underline; text-underline-offset:2px;
  font-weight:700;
}
.notice-feelo.notice-danger a:hover,
.notice-feelo.notice-danger a:focus-visible{ color:#ffe3e7; }

/* ---------- Content card (hell, wie die Login-Karte) ---------- */
.content-card{
  background: linear-gradient(180deg, #fbfdff, #eef3fb);
  border-radius: 1rem;
  box-shadow: var(--shadow), 0 0 0 1px rgba(34,211,238,0.2);
  color:#0c1930;
  position:relative; z-index:2;
}
/* Spiele: Karte überlappt den Header wie die Login-Karte, Tabelle wird geclippt */
body.page-spiele .content-card{ margin-top: -2.2rem; overflow:hidden; }
/* … außer es steht eine Hinweisbox davor – dann sitzt die Karte darunter */
body.page-spiele .notice-feelo{ z-index:3; }
body.page-spiele .notice-feelo + .content-card{ margin-top: .9rem; }
/* .notice-feelo liegt hier auf gleicher z-index-Ebene (3) wie .page-header-content
   und gewinnt bei Gleichstand als später im DOM stehendes Element – das ausgeklappte
   MD-Dropdown im Header landete dadurch unter der roten Hinweisbox. */
body.page-spiele .page-header-content{ z-index:4; }
/* Aufsteiger: Karte sitzt unter der Notice-Bar, Multiselect-Panel darf überstehen */
body.page-aufsteiger .content-card{ margin-top: 1.4rem; overflow:visible; }
/* Default-Unterseite (z. B. regeln.html): Karte überlappt den Header wie auf der Spiele-Seite */
body.page-default .content-card{ margin-top: -2.2rem; overflow:hidden; }

.content-card-toolbar{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.75rem;
  padding: 1.1rem 1.3rem;
  border-bottom: 1px solid rgba(12,25,48,0.08);
}
.content-card-toolbar .toolbar-title{
  font-family:'Bebas Neue', sans-serif; letter-spacing:.03em; font-size:1.2rem; color:#0c1930;
}

.search-feelo{
  display:flex; align-items:center; gap:.6rem;
}
.search-feelo label{
  font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#4a5b7c;
}
.search-feelo input, .search-feelo select{
  border:1px solid rgba(12,25,48,0.16); border-radius:.55rem; padding:.4rem .75rem;
  font-size:.88rem; min-width: 12rem; color:#0c1930; background:#fff;
}
.search-feelo input:focus, .search-feelo select:focus{ outline:none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(59,130,246,0.16); }

.table-feelo{ width:100%; border-collapse:separate; border-spacing:0; }
.table-feelo thead th{
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:#5a6c8c;
  font-weight:700; padding:.85rem 1.3rem; border-bottom:1px solid rgba(12,25,48,0.1);
  text-align:left; background:#f6f9fd;
}
.table-feelo thead th.col-res{ text-align:center; }
.table-feelo tbody tr{ border-bottom:1px solid rgba(12,25,48,0.06); transition: background .15s ease; }
.table-feelo tbody tr:nth-child(even){ background: rgba(12,25,48,0.02); }
.table-feelo tbody tr:hover{ background: rgba(59,130,246,0.06); }
.table-feelo tbody tr.is-hidden{ display:none; }
.table-feelo td{ padding: .9rem 1.3rem; vertical-align:middle; }

.kickoff-date{ font-weight:700; font-size:.88rem; color:#0c1930; }
.kickoff-time{ font-family:'JetBrains Mono', monospace; font-size:.78rem; color:#5a6c8c; }
.status-row{ display:flex; align-items:center; gap:.4rem; margin-top:.3rem; }
.status-chip{
  width:1.05rem; height:1.05rem; border-radius:50%;
  background: var(--green); color:#04220f;
  display:flex; align-items:center; justify-content:center; font-size:.6rem; font-weight:900;
}
.info-btn{
  width:1.35rem; height:1.35rem; border-radius:50%;
  border:1px solid rgba(12,25,48,0.18); background:#fff; color:#5a6c8c;
  display:flex; align-items:center; justify-content:center; font-size:.68rem; font-weight:700;
  cursor:pointer; padding:0;
}
.info-btn:hover{ background:#eef3fb; color:#0c1930; }

.team-cell{ display:flex; align-items:center; gap:.7rem; }
.team-cell.reverse{ flex-direction:row-reverse; text-align:right; }

.crest{
  display:flex; align-items:center; justify-content:center; flex:none;
  border-radius:50%;
  font-family:'JetBrains Mono', monospace; font-weight:700;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.5), 0 1px 3px rgba(12,25,48,0.25);
}
/* Spiele: etwas größere Crests in der Tabelle. Aufsteiger: kompakter für die 36er-Liste. */
body.page-spiele .crest{ width:2.1rem; height:2.1rem; font-size:.62rem; }
body.page-aufsteiger .crest{ width:2rem; height:2rem; font-size:.58rem; }
.crest-sm{ width:1.5rem; height:1.5rem; font-size:.5rem; }
.team-name{ font-weight:600; font-size:.94rem; color:#0c1930; }

/* segmented 1 / X / 2 pick control (Spiele) */
.pick-group{
  display:inline-flex; border:1px solid rgba(12,25,48,0.14); border-radius:.6rem; overflow:hidden;
}
.pick-group input{ position:absolute; opacity:0; pointer-events:none; }
.pick-group label{
  margin:0; padding:.4rem .75rem; font-size:.82rem; font-weight:700; color:#5a6c8c;
  cursor:pointer; transition: all .15s ease; min-width:2.4rem; text-align:center;
}
.pick-group label + label{ border-left:1px solid rgba(12,25,48,0.14); }
.pick-group input:checked + label{ background: var(--blue); color:#fff; }
.pick-group input:focus-visible + label{ outline:2px solid var(--blue); outline-offset:-2px; }
.pick-group label:hover{ background: rgba(59,130,246,0.1); }

/* Spiele: Anpfiff vorbei -> Tippen gesperrt, Schloss statt 1/X/2 */
.pick-locked{
  display:inline-flex; align-items:center; justify-content:center;
  width:2.6rem; height:2.15rem;
  border:1px solid rgba(12,25,48,0.12); border-radius:.6rem;
  background: rgba(12,25,48,0.03); color:#8092b3;
}
.table-feelo tr.is-locked .kickoff-date,
.table-feelo tr.is-locked .team-name{ color:#8092b3; }

.table-footbar{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  padding: 1.1rem 1.3rem;
}
.row-count{ font-size:.82rem; color:#5a6c8c; font-weight:600; }

.btn-kickoff{
  background: linear-gradient(180deg, #34d167, var(--green-dark));
  color:#04220f; font-weight:700; letter-spacing:.03em; border:none;
  border-radius:.6rem; transition: transform .15s ease, box-shadow .15s ease;
}
.btn-kickoff:hover{ color:#04220f; transform: translateY(-1px); box-shadow: 0 10px 22px rgba(34,197,94,0.35); }
.btn-kickoff:disabled{ opacity:.55; transform:none; box-shadow:none; cursor:not-allowed; }
/* Login-Button (volle Breite) vs. "Absenden"-Buttons je Unterseite */
body.page-home .btn-kickoff{ padding:.75rem 1rem; }
body.page-spiele .btn-kickoff{ padding:.65rem 1.6rem; }
body.page-aufsteiger .btn-kickoff{ padding:.7rem 2.2rem; }

/* ---------- pick badge n / 8 (Aufsteiger) ---------- */
.pick-badge{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:'JetBrains Mono', monospace; font-weight:700; font-size:.8rem;
  padding:.3rem .75rem; border-radius:999px;
  background: rgba(90,108,140,0.12); color:#5a6c8c;
  border:1px solid rgba(90,108,140,0.22);
  transition: all .18s ease;
}
.pick-badge .chk{ display:none; }
.pick-badge.is-complete{
  background: rgba(34,197,94,0.14); color: var(--green-dark);
  border-color: rgba(34,197,94,0.35);
}
.pick-badge.is-complete .chk{ display:inline; }

/* ---------- custom multiselect (Aufsteiger) ---------- */
.team-select{ position:relative; padding: 1.3rem; }
.team-select-toggle{
  width:100%; text-align:left; cursor:pointer;
  background:#fff; border:1px solid rgba(12,25,48,0.16); border-radius:.6rem;
  padding:.6rem .9rem; min-height:3rem;
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  color:#0c1930; font-size:.9rem;
}
.team-select-toggle:hover{ border-color: rgba(59,130,246,0.4); }
.team-select-toggle.is-open{ border-color: var(--blue); box-shadow: 0 0 0 3px rgba(59,130,246,0.16); }
.team-select-toggle .placeholder-text{ color:#8092b3; }
.team-select-summary{ display:flex; align-items:center; flex-wrap:wrap; gap:.45rem; flex:1; }
.team-select-summary .team-tag{ display:inline-flex; align-items:center; gap:.4rem; font-weight:600; font-size:.85rem; }
.team-select-summary .team-tag:not(:last-child)::after{ content:","; color:#8092b3; font-weight:400; margin-left:.05rem; }
.team-select-caret{ margin-left:auto; flex:none; color:#5a6c8c; transition: transform .18s ease; }
.team-select-toggle.is-open .team-select-caret{ transform: rotate(180deg); }

.team-select-panel{
  position:absolute; left:1.3rem; right:1.3rem; top:calc(100% - .3rem);
  background:#fff; border:1px solid rgba(12,25,48,0.14); border-radius:.7rem;
  box-shadow: 0 18px 40px rgba(12,25,48,0.22);
  max-height: 20rem; overflow-y:auto; z-index:5;
  padding:.4rem;
  display:none;
}
.team-select-panel.is-open{ display:block; }
.team-option{
  display:flex; align-items:center; gap:.65rem;
  padding:.5rem .6rem; border-radius:.5rem; cursor:pointer;
  font-size:.88rem; font-weight:600; color:#0c1930;
}
.team-option:hover{ background: rgba(59,130,246,0.08); }
.team-option input{ flex:none; width:1.05rem; height:1.05rem; accent-color: var(--blue); cursor:pointer; }
.team-option.is-disabled{ opacity:.4; cursor:not-allowed; }
.team-option.is-disabled:hover{ background:none; }
.team-option.is-disabled input{ cursor:not-allowed; }

/* ---------- Spiel-Info-Seite (spiele_info.html, ohne Nav/Footer, für die Info-Lightbox) ---------- */
body.page-info{ background: var(--ink-2); }
.info-wrap{ max-width: 40rem; margin: 0 auto; padding: 1.7rem 1.3rem 2rem; }
.info-head{ text-align:center; margin-bottom:1.5rem; }
.info-teams{
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  margin-top:.55rem; flex-wrap:wrap;
}
body.page-info .crest{ width:2.2rem; height:2.2rem; font-size:.62rem; }
.info-team-name{
  font-family:'Bebas Neue', sans-serif; font-size:1.15rem; letter-spacing:.03em; color: var(--white);
}
.info-vs{ color: var(--slate); font-weight:700; }
.info-table{ width:100%; border-collapse:separate; border-spacing:0; }
.info-table th{
  text-align:left; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  color: var(--slate); font-weight:700; padding:.55rem .7rem; border-bottom:1px solid var(--line);
}
.info-table td{
  padding:.6rem .7rem; font-size:.9rem; color: var(--white);
  border-bottom:1px solid rgba(243,247,255,0.06);
}
.info-table tbody tr:last-child td{ border-bottom:0; }
.info-table td.info-muted{ color: var(--slate); }
.info-pick{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:1.7rem; padding:.15rem .45rem; border-radius:.4rem;
  background: rgba(34,211,238,0.14); color: var(--cyan-soft);
  font-family:'JetBrains Mono', monospace; font-weight:700; font-size:.82rem;
}

/* ---------- Regeln-Inhalt (.rules, aktuell nur regeln.html) ---------- */
.rules{ padding: 1.6rem 1.6rem 2rem; color:#0c1930; }
.rules h2{
  font-family:'Bebas Neue', sans-serif; letter-spacing:.03em;
  font-size:1.25rem; color:#0c1930;
  margin:1.9rem 0 .55rem; padding-top:1.5rem;
  border-top:1px solid rgba(12,25,48,0.1);
}
.rules h2:first-child{ margin-top:0; padding-top:0; border-top:0; }
.rules p{ margin:0 0 .7rem; font-size:.92rem; line-height:1.65; color:#33415c; }
.rules strong{ color:#0c1930; }
.rules .score-list{ margin:.3rem 0 .2rem; padding-left:1.15rem; }
.rules .score-list li{ font-size:.92rem; line-height:1.75; color:#33415c; }
.rules .badge-new{
  display:inline-block; vertical-align:middle; margin-left:.5rem;
  font-family:'JetBrains Mono', monospace; font-size:.6rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase;
  padding:.2rem .5rem; border-radius:999px;
  background: rgba(34,197,94,0.16); color: var(--green-dark);
}

/* ---------- Alle-Tipps-Tabellen (alletips.html) ---------- */
body.page-default .crest{ width:2rem; height:2rem; font-size:.56rem; }

/* DataTables-Bedienelemente an die helle content-card anpassen */
.content-card .dataTables_wrapper{ padding: .2rem 0 .4rem; }
.content-card .dataTables_length,
.content-card .dataTables_filter{ padding: .2rem 1.3rem .7rem; font-size:.84rem; color:#5a6c8c; }
.content-card .dataTables_filter{ text-align:right; }
.content-card .dataTables_length select,
.content-card .dataTables_filter input{
  border:1px solid rgba(12,25,48,0.16); border-radius:.5rem; padding:.3rem .6rem;
  font-size:.84rem; color:#0c1930; background:#fff; margin:0 .35rem;
}
.content-card .dataTables_filter input:focus,
.content-card .dataTables_length select:focus{
  outline:none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(59,130,246,0.16);
}
.content-card .dataTables_info{ padding: .8rem 1.3rem 0; font-size:.8rem; color:#5a6c8c; }
.content-card .dataTables_paginate{ padding: .5rem 1.3rem .1rem; text-align:right; }
.content-card .dataTables_paginate .pagination{ gap:.1rem; }
.content-card .dataTables_paginate .page-link{
  padding:.15rem .55rem; border-radius:.35rem; border:1px solid transparent;
  font-size:.76rem; line-height:1.6; color:#8a97b3; background:none; box-shadow:none;
  transition: color .15s ease, background-color .15s ease;
}
.content-card .dataTables_paginate .page-item.active .page-link{
  background:none; color:#0c1930; font-weight:700;
  box-shadow: inset 0 -2px 0 #21CDE7;
}
.content-card .dataTables_paginate .page-item:not(.active):not(.disabled) .page-link:hover{
  background: rgba(33,205,231,0.1); color:#0c1930;
}
.content-card .dataTables_paginate .page-item.disabled .page-link{
  opacity:.35; color:#8a97b3; background:none;
}
.content-card table.dataTable{ border-collapse:separate !important; margin:0 !important; }
body.page-default #resTableCard, body.page-default #resTable2Card, body.page-default #resTable3Card{
  scroll-margin-top: calc(var(--nav-h) + 0.75rem);
}
.content-card table.dataTable thead th{ cursor:pointer; }
/* Responsive-Aufklapper (+/-) */
.content-card table.dataTable td.dtr-control:before,
.content-card table.dataTable td.child .dtr-title{ color:#5a6c8c; }
.content-card table.dataTable tr.child ul.dtr-details{ color:#33415c; font-size:.85rem; }
.alltips td{ vertical-align:middle; }
.alltips td.user{ font-weight:700; font-size:.88rem; color:#0c1930; }
.alltips td.erg, .alltips td.dt{ color:#8092b3; font-size:.85rem; white-space:nowrap; }
.alltips .tip{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:1.7rem; padding:.15rem .45rem; border-radius:.4rem;
  background: var(--ink-2); color: var(--cyan-soft);
  font-family:'JetBrains Mono', monospace; font-weight:700; font-size:.82rem;
}

/* ---------- Spielstand-Tabelle (spielstand.html) ---------- */
.standings td{ vertical-align:middle; }
.standings th.col-pts, .standings td.pts{ text-align:right; }
.standings .rank{
  font-family:'JetBrains Mono', monospace; font-weight:700; font-size:1rem; color:#0c1930;
}
.standings .rank.is-tied{ color:#8092b3; }
.standings tr.is-leader{ background: rgba(232,167,46,0.08) !important; }
.standings tr.is-leader .player-name{ color:#8a5a00; }

.trend{ display:inline-flex; align-items:center; gap:.3rem; }
.trend.up{ color: var(--green); }
.trend.down{ color:#da3a49; }
.trend.even{ color:#e8a72e; }

.standings .player{ display:flex; align-items:center; gap:.7rem; }
.standings .player-avatar{
  width:1.9rem; height:1.9rem; flex:none; border-radius:50%;
  padding:0; border:0; cursor:pointer;
  background: linear-gradient(160deg, var(--cyan), var(--blue));
  display:flex; align-items:center; justify-content:center;
  font-family:'JetBrains Mono', monospace; font-weight:700; font-size:.66rem; color:#04131c;
  transition: transform .15s ease, box-shadow .15s ease;
}
.standings .player-avatar:hover, .standings .player-avatar:focus-visible{
  transform: scale(1.08);
  box-shadow: 0 0 0 2px rgba(34,211,238,0.35);
}
@media (prefers-reduced-motion: reduce){
  .standings .player-avatar{ transition:none; }
  .standings .player-avatar:hover{ transform:none; }
}
.standings .mood{ flex:none; color:#5a6c8c; }
.standings .player-name{ font-weight:700; font-size:.95rem; letter-spacing:.02em; color:#0c1930; }
.standings .pts-main{ font-family:'JetBrains Mono', monospace; font-weight:700; font-size:1.15rem; color:#0c1930; }
.standings .pts-sub{ font-size:.8rem; color:#8092b3; margin-left:.2rem; }

.standings-legend{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1.2rem;
  margin-top:1rem; font-size:.8rem; color: var(--slate);
}
.standings-legend .trend{ font-weight:600; }
.standings-legend .legend-note{ opacity:.8; }

/* ---------- Ligaphase-Tabelle (tabelle.html) ---------- */
.ligaphase th.col-num, .ligaphase td.col-num{ text-align:center; width:3rem; }
.ligaphase th.col-stat, .ligaphase td.col-stat{ text-align:center; width:2.7rem; }
.ligaphase th.col-goals, .ligaphase td.col-goals{ text-align:center; width:4rem; }
.ligaphase th.col-pts, .ligaphase td.col-pts{ text-align:center; width:3.4rem; }
.ligaphase td.col-stat, .ligaphase td.col-goals{
  font-family:'JetBrains Mono', monospace; font-size:.9rem; color:#5a6c8c;
}
.ligaphase td.col-pts{
  font-family:'JetBrains Mono', monospace; font-weight:700; font-size:1.05rem; color:#0c1930;
}
.ligaphase .pos{
  font-family:'JetBrains Mono', monospace; font-weight:700; font-size:.95rem; color:#0c1930;
}
.ligaphase td, .ligaphase th{ padding-top:.6rem; padding-bottom:.6rem; }

/* Qualifikationszonen – farbiger Balken an der Positionsspalte + zarte Tönung */
.ligaphase tbody td.col-num{ border-left:3px solid transparent; }
.ligaphase tbody tr.zone-aufsteiger td.col-num{ border-left-color: var(--green); }
.ligaphase tbody tr.zone-playoffs   td.col-num{ border-left-color:#e8a72e; }
.ligaphase tbody tr.zone-raus       td.col-num{ border-left-color:#da3a49; }
.ligaphase tbody tr.zone-aufsteiger{ background: rgba(34,197,94,0.07) !important; }
.ligaphase tbody tr.zone-playoffs{ background: rgba(232,167,46,0.07) !important; }
.ligaphase tbody tr.zone-raus{ background: rgba(218,58,73,0.06) !important; }
.ligaphase tbody tr:hover{ background: rgba(59,130,246,0.1) !important; }
.ligaphase tbody tr.zone-edge td{ border-top:2px solid rgba(12,25,48,0.18); }

.zone-key{ display:inline-flex; align-items:center; gap:.4rem; font-weight:600; }
.zone-dot{ width:.75rem; height:.75rem; border-radius:.2rem; flex:none; display:inline-block; }
.zone-dot.aufsteiger{ background: var(--green); }
.zone-dot.playoffs{ background:#e8a72e; }
.zone-dot.raus{ background:#da3a49; }

/* table.ligaphase (Typ+Klasse) schlägt die generische .table-feelo-Regel
   weiter unten per Spezifität, unabhängig von der Reihenfolge im
   Stylesheet - analog zu table.spielplan/table.alltips/table.standings.
   Die 7 Spalten sind auf Desktop-Breiten ausgelegt (#, Team, S, U, N,
   T, Pt) und brauchen auf schmalen Screens deutlich schmalere feste
   Spalten, damit für den Team-Namen genug Platz bleibt. */
@media (max-width: 575.98px){
  table.ligaphase thead{ display:table-header-group; }
  table.ligaphase tbody tr{ display:table-row; }
  table.ligaphase td{ display:table-cell; }
  table.ligaphase td, table.ligaphase th{ padding:.5rem .3rem; }
  table.ligaphase th.col-num, table.ligaphase td.col-num{ width:1.4rem !important; }
  table.ligaphase th.col-stat, table.ligaphase td.col-stat{ width:1.3rem !important; font-size:.78rem; }
  table.ligaphase th.col-goals, table.ligaphase td.col-goals{ width:2.6rem !important; font-size:.78rem; }
  table.ligaphase th.col-pts, table.ligaphase td.col-pts{ width:2rem !important; font-size:.9rem; }
  table.ligaphase .pos{ font-size:.82rem; }
  table.ligaphase .team-cell{ gap:.4rem; }
  table.ligaphase .crest-sm{ width:1.3rem; height:1.3rem; font-size:.44rem; }
  table.ligaphase .team-name{ font-size:.78rem; }
}

/* ---------- Turnierbaum / Playoffs (playoff.html) ---------- */
.ko-section{ margin-top: 2.6rem; scroll-margin-top: calc(var(--nav-h) + 1rem); }
.ko-section:first-of-type{ margin-top: 1.6rem; }
/* Diese Seite: Karten sollen NICHT wie sonst bei page-default in den Header /
   in die vorangehende Überschrift ragen (überschreibt body.page-default .content-card). */
body.page-default .ko-section .content-card{ margin-top: 0; }
.ko-head{ display:flex; align-items:baseline; gap:.7rem; flex-wrap:wrap; margin-bottom:1rem; }
.ko-head h2{
  font-family:'Bebas Neue', sans-serif; letter-spacing:.03em; font-size:1.7rem;
  color: var(--white); margin:0;
}
.ko-head .ko-sub{ color: var(--slate); font-size:.85rem; font-weight:600; }

.tie-grid{ display:grid; gap:1rem; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); }
.tie-grid.cols-2{ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); max-width: 592px; }
.tie-grid.cols-1{ grid-template-columns: minmax(0, 340px); }

.tie{
  background: linear-gradient(180deg, #fbfdff, #eef3fb);
  border-radius: .9rem;
  box-shadow: var(--shadow), 0 0 0 1px rgba(34,211,238,0.18);
  overflow:hidden; color:#0c1930;
}
.tie-head{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  padding:.55rem .9rem; border-bottom:1px solid rgba(12,25,48,0.08); background:#f6f9fd;
}
.tie-grp{ font-family:'Bebas Neue', sans-serif; letter-spacing:.04em; font-size:1rem; color:#0c1930; }
.tie-date{ font-family:'JetBrains Mono', monospace; font-size:.72rem; color:#5a6c8c; }
.tie-body{ padding:.55rem .9rem .7rem; }
.tie-team{ display:flex; align-items:center; gap:.6rem; padding:.32rem 0; }
.tie-team .team-name{ flex:1; font-size:.9rem; color:#0c1930; }
.tie-team.win .team-name{ font-weight:800; }
.tie-team.out .team-name, .tie-team.out .crest{ opacity:.45; }
.tie-agg{
  font-family:'JetBrains Mono', monospace; font-weight:700; font-size:1rem;
  color:#0c1930; min-width:1.2rem; text-align:right;
}
.tie-team.win .tie-agg{ color: var(--green-dark); }
.tie-legs{
  margin-top:.4rem; padding-top:.45rem; border-top:1px solid rgba(12,25,48,0.07);
  font-family:'JetBrains Mono', monospace; font-size:.72rem; color:#5a6c8c;
  display:flex; gap:.9rem; flex-wrap:wrap;
}
.tie-legs .pen{ color:#8a5a00; }

.fix-wrap{ display:flex; flex-wrap:wrap; gap:.55rem .7rem; }
.fix-tag{
  display:inline-flex; align-items:center; gap:.5rem;
  background:#fff; border:1px solid rgba(12,25,48,0.12); border-radius:.6rem;
  padding:.32rem .75rem .32rem .4rem; font-weight:700; font-size:.88rem; color:#0c1930;
}

.champion-card{
  margin-top:1.1rem; text-align:center;
  background: linear-gradient(180deg, #fff7e6, #ffe6b3);
  border-radius:1rem; box-shadow: var(--shadow), 0 0 0 1px rgba(232,167,46,0.45);
  padding:1.7rem 1rem; color:#5a3d00;
}
.champion-card .crest{ margin:0 auto .55rem; width:3.1rem; height:3.1rem; font-size:.82rem; }
.champion-card .champ-label{
  font-size:.72rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase; color:#8a5a00;
}
.champion-card .champ-name{
  font-family:'Bebas Neue', sans-serif; font-size:2.1rem; letter-spacing:.03em;
  color:#7a4a00; margin-top:.15rem;
}

/* ---------- Turnierbaum-Klammer (turnierbaum.html) ---------- */
:root{ --br-line: rgba(34,211,238,0.4); --br-gap: 3rem; --br-col: 220px; }

.bracket-note{
  display: flex; gap: .85rem; align-items: flex-start;
  max-width: 680px; margin: 1.4rem 0 1.9rem; padding: .95rem 1.15rem;
  background: linear-gradient(180deg, rgba(34,211,238,0.12), rgba(34,211,238,0.03));
  border: 1px solid var(--line-cyan); border-left: 3px solid var(--cyan);
  border-radius: .7rem;
  color: var(--white); font-size: .88rem; line-height: 1.55;
  box-shadow: 0 10px 30px rgba(3,10,25,0.4);
}
.bracket-note svg{ flex: none; margin-top: .1rem; color: var(--cyan); }
.bracket-note strong{ font-weight: 800; }
.bracket-note b{ color: var(--cyan-soft); font-weight: 700; font-family:'JetBrains Mono', monospace; }
.bracket-scroll{ overflow-x: auto; overflow-y: hidden; padding-bottom: 1rem; }
.bracket{ display: flex; gap: var(--br-gap); align-items: stretch; min-width: max-content; }

.br-round{ width: var(--br-col); flex: none; display: flex; flex-direction: column; }
.br-round-title{
  font-family:'Bebas Neue', sans-serif; letter-spacing:.04em; font-size:1.05rem;
  color: var(--white); margin: 0 0 .9rem; align-self: flex-start;
  background: var(--panel-strong); border: 1px solid var(--line-cyan);
  border-radius:.4rem; padding:.12rem .7rem;
}
.br-round ul{ list-style: none; margin: 0; padding: 0; flex: 1; display: flex; flex-direction: column; }
.br-round li{ flex: 1; display: flex; align-items: center; position: relative; min-height: 132px; }

.br-match{
  position: relative; z-index: 1; width: 100%;
  background: linear-gradient(180deg, #fbfdff, #eef3fb);
  border-radius: .7rem;
  box-shadow: var(--shadow), 0 0 0 1px rgba(34,211,238,0.16);
  padding: .5rem .75rem; color: #0c1930; text-align: center;
}
.br-score{
  font-family:'JetBrains Mono', monospace; font-weight: 700; font-size: .88rem;
  color: #5a6c8c; letter-spacing: .06em;
}
.br-side{ display: flex; align-items: center; gap: .5rem; padding: .18rem 0; }
.br-crest{
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: #9aa7bd; color: #fff;
  font-family:'JetBrains Mono', monospace; font-weight: 700; font-size: .72rem;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.5), 0 1px 3px rgba(12,25,48,0.25);
}
.br-seed{ font-family:'JetBrains Mono', monospace; font-weight: 700; font-size: .8rem; color: #8092b3; }
.br-medal{ margin-left: auto; font-size: .9rem; line-height: 1; }
.br-date{
  margin-top: .3rem; padding-top: .3rem; border-top: 1px solid rgba(12,25,48,0.08);
  font-family:'JetBrains Mono', monospace; font-size: .62rem; color: #5a6c8c;
}

/* Verbindungslinien: waagrechte Ausgänge + senkrechte Klammer je Paar */
.br-round:not(:last-child) li::after{
  content: ""; position: absolute; left: 100%; top: 50%;
  width: var(--br-gap); height: 2px; background: var(--br-line);
}
.br-round:not(:last-child) li:nth-child(odd)::before{
  content: ""; position: absolute; left: calc(100% + var(--br-gap)); top: 50%;
  width: 2px; height: 50%; background: var(--br-line);
}
.br-round:not(:last-child) li:nth-child(even)::before{
  content: ""; position: absolute; left: calc(100% + var(--br-gap)); bottom: 50%;
  width: 2px; height: 50%; background: var(--br-line);
}

/* Schmale Screens: kein horizontales Bracket – Runden untereinander,
   Spiele je Runde als responsives Raster, Verbindungslinien aus. */
@media (max-width: 991.98px){
  .bracket-scroll{ overflow-x: visible; overflow-y: visible; padding-bottom: 0; }
  .bracket{ flex-direction: column; align-items: stretch; gap: 2.4rem; min-width: 0; }
  .br-round{ width: 100%; }
  .br-round-title{ font-size: 1.2rem; margin-bottom: .9rem; }
  .br-round ul{
    display: grid; flex: none;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: .9rem;
  }
  .br-round li{ flex: none; display: block; min-height: 0; }
  .br-round li::before, .br-round li::after{ display: none; }
}

@media (max-width: 575.98px){
  :root{ --br-gap: 2rem; --br-col: 190px; }
  .br-round ul{ grid-template-columns: 1fr; }
}

/* ---------- Teams-Seite (teams.html) ---------- */
.teams-toolbar{ display:flex; flex-wrap:wrap; gap:.6rem; }
.teams-toolbar .dropdown-menu{ max-height:60vh; overflow-y:auto; overflow-x:hidden; }
/* nur im geöffneten Zustand als 2-Spalten-Raster – sonst greift Bootstraps display:none */
.teams-toolbar .team-jump-menu.show{ display:grid; grid-template-columns:1fr 1fr; min-width:19rem; }

.teams-grid{
  display:grid; gap:1.2rem; margin-top:1.6rem;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}
.team-card{
  border-radius:.9rem;
  box-shadow: var(--shadow), 0 0 0 1px rgba(34,211,238,0.16);
  scroll-margin-top: calc(var(--nav-h) + 1rem);
}
/* kein overflow:hidden – Crest-Tooltips dürfen aus der Karte ragen;
   Rundung stattdessen an Kopf + letzter Zeile */
.team-card-head{
  text-align:center; padding:1.2rem 1rem 1rem; color: var(--white);
  border-radius:.9rem .9rem 0 0;
  background:
    radial-gradient(ellipse 400px 200px at 50% -30%, rgba(34,211,238,0.22), transparent 70%),
    linear-gradient(180deg, #0c1a3a, #0a1730);
  border-bottom:1px solid var(--line-cyan);
}
.team-fixtures .tf-row:last-child{ border-radius:0 0 .9rem .9rem; }
.team-card-head .crest{ width:3rem; height:3rem; margin:0 auto .55rem; font-size:.8rem; }
.team-card-head h3{
  font-family:'Bebas Neue', sans-serif; letter-spacing:.04em; font-size:1.35rem; margin:0;
}
.team-card-head .country{ font-size:.8rem; color: var(--slate); margin-top:.2rem; }
.team-card-head .country .flag{ font-size:.95rem; margin-right:.35rem; }

.team-fixtures{ background:#fbfdff; }
.tf-row{
  display:grid; grid-template-columns: 3.2rem 1fr auto 1fr auto; align-items:center; gap:.5rem;
  padding:.5rem .8rem; border-top:1px solid rgba(12,25,48,0.07);
}
.tf-row .info-btn{ width:1.3rem; height:1.3rem; font-size:.64rem; }
.tf-row:nth-child(odd){ background: rgba(12,25,48,0.025); }
.tf-md{
  font-family:'JetBrains Mono', monospace; font-size:.62rem; font-weight:700;
  color:#8092b3; text-align:center;
}
.tf-date{
  font-family:'JetBrains Mono', monospace; font-size:.68rem; color:#5a6c8c; line-height:1.25;
}
.tf-side{ display:flex; align-items:center; gap:.35rem; min-width:0; }
.tf-side.away{ flex-direction:row-reverse; }
.tf-side .crest{ width:1.6rem; height:1.6rem; font-size:.5rem; }
.tf-side.self .crest{ box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.5), 0 0 0 2px var(--cyan); }

/* Crest-Tooltip (rein CSS, erscheint unter dem Badge) */
.crest[data-tip]{ position:relative; cursor:default; }
.crest[data-tip]:hover{ z-index:60; }
.crest[data-tip]:hover::after{
  content: attr(data-tip);
  position:absolute; top:calc(100% + 9px); left:50%;
  transform:translateX(-50%);
  padding:.34rem .62rem;
  background: linear-gradient(180deg, #12274f, #0a1730);
  color: var(--white);
  border:1px solid var(--line-cyan);
  border-radius:.45rem;
  font:700 .72rem/1 'Inter', system-ui, sans-serif;
  letter-spacing:.01em; white-space:nowrap;
  box-shadow: 0 12px 28px rgba(3,10,25,0.6);
  z-index:60; pointer-events:none;
  animation: crest-tip .13s ease-out;
}
.crest[data-tip]:hover::before{
  content:"";
  position:absolute; top:calc(100% + 4px); left:50%;
  transform:translateX(-50%) rotate(45deg);
  width:9px; height:9px;
  background:#12274f;
  border-left:1px solid var(--line-cyan);
  border-top:1px solid var(--line-cyan);
  z-index:60; pointer-events:none;
}
@keyframes crest-tip{
  from{ opacity:0; transform:translateX(-50%) translateY(-4px); }
}

/* Info-Button-Tooltip: über dem Button, rechtsbündig (ragt nach links,
   nie über den rechten Kartenrand) */
.info-btn[data-tip]{ position:relative; }
.info-btn[data-tip]:hover{ z-index:60; }
.info-btn[data-tip]:hover::after{
  content: attr(data-tip);
  position:absolute; bottom:calc(100% + 9px); right:-.35rem;
  padding:.36rem .62rem;
  background: linear-gradient(180deg, #12274f, #0a1730);
  color: var(--white);
  border:1px solid var(--line-cyan);
  border-radius:.45rem;
  font:700 .72rem/1.2 'Inter', system-ui, sans-serif;
  letter-spacing:.01em;
  width:max-content; max-width:12rem; text-align:right;
  box-shadow: 0 12px 28px rgba(3,10,25,0.6);
  z-index:60; pointer-events:none;
  animation: info-tip .13s ease-out;
}
.info-btn[data-tip]:hover::before{
  content:"";
  position:absolute; bottom:calc(100% + 4px); right:.15rem;
  transform:rotate(45deg);
  width:9px; height:9px;
  background:#0a1730;
  border-right:1px solid var(--line-cyan);
  border-bottom:1px solid var(--line-cyan);
  z-index:60; pointer-events:none;
}
@keyframes info-tip{ from{ opacity:0; transform:translateY(4px); } }

@media (prefers-reduced-motion: reduce){
  .crest[data-tip]:hover::after, .info-btn[data-tip]:hover::after{ animation:none; }
}
.tf-sc{
  font-family:'JetBrains Mono', monospace; font-weight:700; font-size:.8rem; color:#5a6c8c;
  white-space:nowrap;
}

@media (max-width: 575.98px){
  .teams-toolbar .team-jump-menu.show{ grid-template-columns:1fr; min-width:12rem; }
}

/* ---------- Preloader-Seite (preloader.html) ---------- */
body.page-preloader{ background: var(--ink); }
.preloader{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  padding:1.5rem;
  background:
    radial-gradient(ellipse 900px 600px at 20% 8%, rgba(34,211,238,0.28), transparent 60%),
    radial-gradient(ellipse 800px 620px at 86% 0%, rgba(59,130,246,0.26), transparent 58%),
    linear-gradient(180deg, #050b1a 0%, #081428 50%, #0a1a34 100%);
}
.preloader-card{
  width:min(92vw, 22rem);
  background: linear-gradient(180deg, #fbfdff, #eef3fb);
  border-radius:1rem;
  box-shadow: var(--shadow), 0 0 0 1px rgba(34,211,238,0.25);
  overflow:hidden;
  color:#0c1930; text-align:center;
}
.preloader-card-head{ padding:1.1rem 1.4rem; border-bottom:1px solid rgba(12,25,48,0.08); }
.preloader-card-head h3{
  font-family:'Bebas Neue', sans-serif; letter-spacing:.05em;
  font-size:1.4rem; margin:0; color:#0c1930;
}
.preloader-card-body{ padding:1.7rem 1.4rem 1.9rem; }
.preloader-card-body p{
  margin:1.15rem 0 0; font-size:.9rem; line-height:1.6; color:#4a5b7c; font-weight:600;
}
.preloader-dots{ display:flex; gap:.5rem; justify-content:center; }
.preloader-dots span{
  width:.7rem; height:.7rem; border-radius:50%; background: var(--blue);
  animation: preloader-bounce 1.4s ease-in-out infinite both;
}
.preloader-dots span:nth-child(1){ animation-delay:-.32s; }
.preloader-dots span:nth-child(2){ animation-delay:-.16s; }
@keyframes preloader-bounce{
  0%, 80%, 100%{ transform: scale(.35); opacity:.4; }
  40%{ transform: scale(1); opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  .preloader-dots span{ animation:none; opacity:.85; transform:none; }
}

/* ---------- Kalender (kalender.html) ---------- */
:root{
  --ph-liga:#22c55e; --ph-po:#c9a76b; --ph-r16:#e0559b;
  --ph-qf:#3b82f6; --ph-sf:#eab308; --ph-fin:#ef4444;
}
.cal-toolbar{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1rem; margin: 1.4rem 0 1.2rem;
}
.cal-nav{ display:flex; align-items:center; gap:.7rem; }
.cal-nav h2{
  font-family:'Bebas Neue', sans-serif; letter-spacing:.03em; font-size:1.7rem;
  color: var(--white); margin:0; min-width: 11rem;
}
.cal-arrow{
  width:2.2rem; height:2.2rem; flex:none; border-radius:.55rem;
  border:1px solid var(--line-cyan); background: var(--panel-strong);
  color: var(--white); font-size:1.1rem; line-height:1; cursor:pointer;
  transition: background .15s ease;
}
.cal-arrow:hover{ background: rgba(34,211,238,0.14); }
.cal-arrow:disabled{ opacity:.3; cursor:not-allowed; }
.cal-arrow:disabled:hover{ background: var(--panel-strong); }
.cal-views{ display:inline-flex; border:1px solid var(--line-cyan); border-radius:.6rem; overflow:hidden; }
.cal-view-btn{
  border:0; background: var(--panel-strong); color: var(--slate);
  font-family:'JetBrains Mono', monospace; font-weight:600; font-size:.82rem;
  padding:.45rem .95rem; cursor:pointer; transition: all .15s ease;
}
.cal-view-btn + .cal-view-btn{ border-left:1px solid var(--line-cyan); }
.cal-view-btn:hover{ color: var(--white); }
.cal-view-btn.is-active{ background: rgba(34,211,238,0.16); color: var(--white); }

.cal-grid{
  border:1px solid rgba(12,25,48,0.5);
  border-radius:.7rem; overflow:hidden;
  background: var(--panel-strong);
}
.cal-weekdays{
  display:grid; grid-template-columns: repeat(7, 1fr);
  background: var(--ink-2);
}
.cal-weekdays > div{
  padding:.55rem .6rem; text-align:right;
  font-family:'JetBrains Mono', monospace; font-weight:700; font-size:.72rem;
  color: var(--cyan-soft); border-left:1px solid rgba(243,247,255,0.06);
}
.cal-weekdays > div:first-child{ border-left:0; }
.cal-week{ display:grid; grid-template-columns: repeat(7, 1fr); }
.cal-day{
  min-height: 7.5rem; padding:.4rem .45rem .5rem;
  border-top:1px solid rgba(243,247,255,0.07);
  border-left:1px solid rgba(243,247,255,0.06);
  display:flex; flex-direction:column; gap:.2rem; overflow:hidden;
}
.cal-day:nth-child(7n+1){ border-left:0; }
.cal-day.is-out{ background: rgba(3,7,18,0.35); }
.cal-day.is-out .cal-day-num{ color: rgba(168,183,214,0.4); }
.cal-day.is-today{
  background: rgba(34,211,238,0.09);
  box-shadow: inset 0 0 0 1px rgba(34,211,238,0.5);
}
.cal-day-num{
  align-self:flex-start; font-family:'JetBrains Mono', monospace; font-weight:700;
  font-size:.8rem; color: var(--slate); margin-bottom:.1rem;
}
.cal-day.is-today .cal-day-num{
  display:flex; align-items:center; justify-content:center;
  width:1.35rem; height:1.35rem; margin-bottom:.05rem;
  border-radius:50%; background: var(--cyan); color:#04131c;
}
.cal-day-week{ min-height: 12rem; }

.cal-event{
  display:flex; align-items:baseline; gap:.3rem;
  font-size:.72rem; line-height:1.25; color: var(--white);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cal-ev-dot{
  width:.5rem; height:.5rem; border-radius:50%; flex:none; align-self:center;
  background: var(--ph-liga);
}
.cal-event .cal-ev-time{ color: var(--slate); font-family:'JetBrains Mono', monospace; font-size:.68rem; flex:none; }
.cal-event .cal-ev-title{ overflow:hidden; text-overflow:ellipsis; }
.ph-liga .cal-ev-dot, .cal-list-row.ph-liga .cal-ev-dot{ background: var(--ph-liga); }
.ph-po   .cal-ev-dot, .cal-list-row.ph-po   .cal-ev-dot{ background: var(--ph-po); }
.ph-r16  .cal-ev-dot, .cal-list-row.ph-r16  .cal-ev-dot{ background: var(--ph-r16); }
.ph-qf   .cal-ev-dot, .cal-list-row.ph-qf   .cal-ev-dot{ background: var(--ph-qf); }
.ph-sf   .cal-ev-dot, .cal-list-row.ph-sf   .cal-ev-dot{ background: var(--ph-sf); }
.ph-fin  .cal-ev-dot, .cal-list-row.ph-fin  .cal-ev-dot{ background: var(--ph-fin); }

.cal-more{
  align-self:flex-start; margin-top:.1rem; padding:0;
  border:0; background:none; color: var(--cyan-soft);
  font-size:.7rem; font-weight:600; cursor:pointer;
}
.cal-more:hover{ text-decoration:underline; }

/* Tages-Lightbox (Klick auf "+ weitere N") */
.cal-daybox{
  position:relative;
  width:min(94vw, 420px); max-height:82vh;
  display:flex; flex-direction:column;
  background: var(--ink-2);
  border:1px solid var(--line-cyan);
  border-radius:.9rem; overflow:hidden;
  box-shadow: var(--shadow);
}
.cal-daybox .lightbox-close{
  top:.6rem; right:.6rem; z-index:1;
  width:2.2rem; height:2.2rem; font-size:1.1rem;
}
.cal-daybox-head{
  padding:1.05rem 3.2rem 1rem 1.25rem;
  border-bottom:1px solid rgba(243,247,255,0.08);
  font-family:'Bebas Neue', sans-serif; letter-spacing:.03em; font-size:1.25rem;
  color: var(--white);
}
.cal-daybox-head small{
  display:block; margin-top:.15rem;
  font-family:'Inter', sans-serif; font-size:.72rem; font-weight:600;
  letter-spacing:0; color: var(--slate);
}
.cal-daybox-body{ overflow-y:auto; }
.cal-daybox-body .cal-list-row:first-child{ border-top:0; }
.cal-empty{ color: rgba(168,183,214,0.35); font-size:.8rem; }

.cal-list{
  border:1px solid rgba(12,25,48,0.5); border-radius:.7rem; overflow:hidden;
}
.cal-list-day{
  display:flex; align-items:center; justify-content:space-between;
  padding:.6rem 1rem; background: var(--ink-2);
  font-family:'JetBrains Mono', monospace; font-weight:700; font-size:.82rem;
  color: var(--cyan-soft);
}
.cal-list-day.is-today{ background: rgba(34,211,238,0.16); }
.cal-today-tag{
  display:inline-block; margin-left:.5rem; padding:.1rem .45rem;
  border-radius:1rem; background: var(--cyan); color:#04131c;
  font-family:'Inter', sans-serif; font-weight:700; font-size:.66rem;
  letter-spacing:.04em; text-transform:uppercase; vertical-align:middle;
}
.cal-list-wd{ color: var(--slate); font-weight:600; }
.cal-list-row{
  display:flex; align-items:center; gap:.7rem;
  padding:.6rem 1rem; border-top:1px solid rgba(243,247,255,0.07);
  background: var(--panel-strong); color: var(--white); font-size:.9rem;
}
.cal-lr-time{ font-family:'JetBrains Mono', monospace; color: var(--slate); font-size:.8rem; width:3.2rem; flex:none; }
.cal-list-empty{ color: var(--slate); padding:1.5rem 0; }

.cal-legend{
  display:flex; flex-wrap:wrap; gap:.5rem 1.2rem;
  margin-top:1.1rem; font-size:.8rem; color: var(--slate);
}
.cal-key{ display:inline-flex; align-items:center; gap:.4rem; font-weight:600; }
.cal-dot{ width:.7rem; height:.7rem; border-radius:50%; flex:none; }
.cal-dot.ph-liga{ background: var(--ph-liga); }
.cal-dot.ph-po{ background: var(--ph-po); }
.cal-dot.ph-r16{ background: var(--ph-r16); }
.cal-dot.ph-qf{ background: var(--ph-qf); }
.cal-dot.ph-sf{ background: var(--ph-sf); }
.cal-dot.ph-fin{ background: var(--ph-fin); }

@media (max-width: 767.98px){
  .cal-nav h2{ font-size:1.35rem; min-width:0; }
  .cal-day{ min-height:5.5rem; padding:.3rem .3rem .4rem; }
  .cal-event{ font-size:.64rem; }
  .cal-event .cal-ev-time{ display:none; }
  .cal-weekdays > div{ font-size:.62rem; padding:.4rem .3rem; }
}
@media (max-width: 519.98px){
  /* Monat wird zu schmal – Grid horizontal scrollbar */
  .cal-grid:not(.cal-grid-week){ overflow-x:auto; }
  .cal-grid:not(.cal-grid-week) .cal-weekdays,
  .cal-grid:not(.cal-grid-week) .cal-week{ min-width: 40rem; }
}

/* ---------- Statistik (statistik.html) ---------- */
.stat-intro{ color: var(--slate); font-size:.9rem; margin: 1.4rem 0 1.6rem; }
.stat-intro a{ color: var(--cyan-soft); }

.stat-card{
  background: var(--panel-strong);
  border:1px solid var(--line-cyan);
  border-radius:.9rem;
  padding:1.2rem 1.3rem 1.4rem;
  margin-bottom:1.6rem;
  box-shadow: var(--shadow);
  scroll-margin-top: calc(var(--nav-h) + 1rem);
}
.stat-card-title{
  font-family:'Bebas Neue', sans-serif; letter-spacing:.03em; font-size:1.5rem;
  color: var(--white); margin:0 0 1rem;
}
.stat-sub{
  font-family:'JetBrains Mono', monospace; font-size:.82rem; font-weight:700;
  color: var(--cyan-soft); margin:0 0 .7rem; letter-spacing:.04em;
}

.stat-bars{ display:flex; flex-direction:column; gap:.3rem; }
.stat-bar-row{
  display:grid; grid-template-columns: 8.5rem 1fr 2.4rem; align-items:center; gap:.6rem;
}
.stat-bar-label{
  font-size:.78rem; color: var(--slate); font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:right;
}
.stat-bar-track{
  height:.8rem; border-radius:.4rem;
  background: rgba(243,247,255,0.06);
  overflow:hidden;
}
.stat-bar-fill{
  display:block; height:100%; border-radius:.4rem;
  min-width:2px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
  animation: stat-grow .6s cubic-bezier(.4,.1,.2,1) both;
}
@keyframes stat-grow{ from{ transform: scaleX(0); transform-origin:left; } }
@media (prefers-reduced-motion: reduce){ .stat-bar-fill{ animation:none; } }
.stat-bar-val{
  font-family:'JetBrains Mono', monospace; font-weight:700; font-size:.8rem;
  color: var(--white); text-align:right;
}

.stat-donut-grid{
  display:grid; gap:1.6rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.stat-donut{ display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; }
.stat-donut svg{ width:8.5rem; height:8.5rem; flex:none; }
.stat-donut-arc{
  transform: rotate(-90deg); transform-origin: 60px 60px;
  transition: stroke-dashoffset .6s ease;
}
.stat-donut-legend{ display:flex; flex-direction:column; gap:.45rem; }
.stat-donut-key{
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.82rem; color: var(--slate); font-weight:600;
}
.stat-donut-key b{ color: var(--white); font-family:'JetBrains Mono', monospace; }
.stat-donut-dot{ width:.7rem; height:.7rem; border-radius:.2rem; flex:none; }

@media (max-width: 575.98px){
  .stat-bar-row{ grid-template-columns: 6rem 1fr 2rem; gap:.4rem; }
  .stat-bar-label{ font-size:.7rem; }
  .stat-card-title{ font-size:1.3rem; }
}

/* ---------- Verlauf (verlauf.html) ---------- */
.verlauf-chart-wrap{ overflow-x:auto; }
.verlauf-svg{ width:100%; min-width:46rem; height:auto; display:block; }
.verlauf-grid-line{ stroke:rgba(243,247,255,0.08); stroke-width:1; }
.verlauf-axis-label{
  font-family:'JetBrains Mono', monospace; font-size:11px; fill: var(--slate);
}
.verlauf-line{
  fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round;
  transition: opacity .25s ease;
}
.verlauf-point{ transition: opacity .25s ease; }
.verlauf-end-label{
  font-family:'JetBrains Mono', monospace; font-size:12px; font-weight:700;
  transition: opacity .25s ease;
}
.verlauf-line.is-hidden,
.verlauf-point.is-hidden,
.verlauf-end-label.is-hidden{ opacity:.06; }

.verlauf-legend{ display:flex; flex-wrap:wrap; gap:.5rem .6rem; margin-top:1.4rem; }
.verlauf-chip{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:'JetBrains Mono', monospace; font-size:.72rem; font-weight:700; letter-spacing:.02em;
  color: var(--white); background: rgba(243,247,255,0.06);
  border:1px solid var(--line-cyan); border-radius:999px;
  padding:.32rem .7rem; cursor:pointer; user-select:none;
  transition: opacity .2s ease, background .2s ease;
}
.verlauf-chip:hover{ background: rgba(34,211,238,0.12); }
.verlauf-chip.is-off{ opacity:.4; }
.verlauf-chip-dot{ width:.62rem; height:.62rem; border-radius:50%; flex:none; }
.verlauf-chip-pos{ color: var(--slate); font-weight:600; }

@media (max-width: 575.98px){
  .verlauf-svg{ min-width:56rem; }
}

.points-table-wrap{ overflow-x:auto; border-radius:.6rem; }
.points-table{
  width:100%; min-width:62rem; border-collapse:collapse; font-size:.8rem;
}
.points-table th, .points-table td{
  padding:.6rem .75rem; text-align:right; white-space:nowrap;
  border-bottom:1px solid rgba(243,247,255,0.08);
}
.points-table th{
  font-family:'JetBrains Mono', monospace; font-size:.66rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; color: var(--slate);
}
.points-table td{ font-family:'JetBrains Mono', monospace; color: var(--white); }
.points-table th:first-child, .points-table td:first-child{
  text-align:left; position:sticky; left:0; background: var(--panel-strong);
}
.points-table td:first-child{ font-weight:700; }
.points-table td.total{ font-weight:800; color: var(--cyan-soft); }
.points-table th.total{ color: var(--cyan-soft); }
.points-table tbody tr:nth-child(even) td{ background: rgba(243,247,255,0.025); }
.points-table tbody tr:nth-child(even) td:first-child{ background: color-mix(in srgb, var(--panel-strong) 96%, rgba(243,247,255,0.025)); }
.points-table tbody tr:hover td{ background: rgba(34,211,238,0.08); }
.points-table tbody tr:hover td:first-child{ background: rgba(34,211,238,0.14); }

/* ---------- Footer ---------- */
.footer-feelo{ background: var(--ink); padding: 1.8rem 0; font-size:.85rem; }
.footer-feelo a{ color: var(--slate); }
.footer-feelo a:hover{ color: var(--cyan-soft); }

/* Gelb statt dunkelblau, damit der Toast sich vom dunklen Hintergrund abhebt
   und als Bestätigung ins Auge springt; dunkler Text statt --white für Kontrast. */
.toast-feelo{
  background: linear-gradient(135deg, #ffd23f, #f5a300);
  border:1px solid rgba(255,210,63,0.5);
  color:#231a00; font-weight:600;
  box-shadow: 0 14px 34px rgba(245,163,0,0.45);
}
.toast-feelo .btn-close{ filter:none; opacity:.6; }
.toast-feelo .btn-close:hover, .toast-feelo .btn-close:focus{ opacity:1; }

/* ---------- Responsive: Tabellen allgemein (Spielstand, ...) ---------- */
@media (max-width: 575.98px){
  .table-feelo thead{ display:none; }
  .table-feelo td{ display:block; padding:.4rem 1rem; }
  .table-feelo tbody tr{ display:block; padding:.9rem 0; border-bottom:1px solid rgba(12,25,48,0.1); }
  .team-cell.reverse{ flex-direction:row; text-align:left; }
  .col-res{ text-align:left !important; }
}

/* ---------- Responsive: Spielstand-Tabelle (Gesamtwertung) ----------
   table.standings (Typ+Klasse) schlägt die generische .table-feelo-Regel
   oben per Spezifität, unabhängig von der Reihenfolge im Stylesheet -
   analog zu table.spielplan/table.alltips. Inhalt ist schon kompakt
   genug für eine normale (nicht gestapelte) Tabellenzeile, nur Header-
   Breiten und Schrift/Icon-Größen werden für schmale Screens gestutzt. */
@media (max-width: 575.98px){
  table.standings thead{ display:table-header-group; }
  table.standings tbody tr{ display:table-row; }
  table.standings td{ display:table-cell; padding:.55rem .4rem; }
  table.standings th:nth-child(1){ width:1.8rem !important; }
  table.standings th:nth-child(2){ width:3rem !important; }
  table.standings th.col-pts{ width:6rem !important; }
  table.standings .mood{ width:1.6rem; height:1.6rem; }
  table.standings .player-avatar{ width:1.5rem; height:1.5rem; font-size:.55rem; }
  table.standings .player{ gap:.4rem; }
  table.standings .player-name{ font-size:.82rem; }
  table.standings .rank{ font-size:.85rem; min-width:1.4rem; padding:.1rem .3rem; }
  table.standings .pts-main{ font-size:.95rem; }
  table.standings .pts-sub{ font-size:.68rem; margin-left:.1rem; }
}

/* ---------- Responsive: Alle-Tipps-Tabellen (alletips.html) ----------
   table.alltips (Typ+Klasse) schlägt die generische .table-feelo-Regel
   oben per Spezifität, unabhängig von der Reihenfolge im Stylesheet -
   analog zu table.spielplan weiter unten. DataTables Responsive
   verwaltet die Spaltenausblendung dort selbst per JS und braucht dafür
   eine echte table/tr/td-Layoutberechnung - das generische Stapeln auf
   display:block bricht diese Messung (Header werden ausgeblendet, Body-
   Zellen aber nicht mehr synchron -> großer horizontaler Overflow). */
@media (max-width: 575.98px){
  table.alltips thead{ display:table-header-group; }
  table.alltips tbody tr{ display:table-row; }
  table.alltips td{ display:table-cell; }
}

/* #resTable ("Die einzelnen Spiele"): auf Mobile nur die Crests statt
   Crest+Vereinsname zeigen (spart Breite), Datum/Uhrzeit in der dt-Spalte
   auf zwei Zeilen stapeln statt nebeneinander, "Team 1"/"Team 2"-Header
   auf "T1"/"T2" kürzen und Usernamen auf 3 Zeichen kürzen. Kurzformen
   (.th-short/.uname-short) sind per Default versteckt und werden nur
   in der Media Query eingeblendet. */
.th-short, .uname-short{ display:none; }
@media (max-width: 575.98px){
  #resTable .team-name{ display:none; }
  #resTable .team-cell{ justify-content:center; }
  #resTable td.dt{ white-space:normal; line-height:1.3; }
  #resTable .dt-time{ display:block; font-size:.78rem; opacity:.8; }
  #resTable .th-full, #resTable .uname-full{ display:none; }
  #resTable .th-short, #resTable .uname-short{ display:inline; }
}

/* ---------- Responsive: Spiele-Tabelle (Teams je Zeile untereinander, kein Scrollen) ---------- */
@media (max-width: 575.98px){
  table.spielplan thead{ display:none; }
  table.spielplan tbody tr{
    display:grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    align-items:center;
    column-gap:.6rem;
    padding:.6rem 1rem;
    border-bottom:1px solid rgba(12,25,48,0.1);
  }
  table.spielplan td{ display:block; padding:.1rem 0; }
  table.spielplan td:nth-child(1){ grid-column:1; grid-row:1 / 3; padding-right:.3rem; }
  table.spielplan td:nth-child(2){ grid-column:2; grid-row:1; }
  table.spielplan td:nth-child(3){ grid-column:2; grid-row:2; }
  table.spielplan td:nth-child(4){ grid-column:3; grid-row:1 / 3; }
  table.spielplan .team-cell.reverse{ flex-direction:row; text-align:left; }
  table.spielplan .kickoff-date{ font-size:.76rem; }
  table.spielplan .kickoff-time{ font-size:.68rem; }
  table.spielplan .team-name{ font-size:.8rem; }
  table.spielplan .crest{ width:1.55rem !important; height:1.55rem !important; font-size:.48rem !important; }
  table.spielplan .pick-group label{ padding:.3rem .5rem; min-width:1.85rem; font-size:.78rem; }
  table.spielplan .pick-locked{ width:2.1rem; height:1.8rem; }
}

/* ---------- Responsive: Aufsteiger-Multiselect ---------- */
@media (max-width: 575.98px){
  .team-select-panel{ left:.6rem; right:.6rem; }
}