*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#17304f;background:#f4f7fa}.container{width:min(1440px,calc(100% - 48px));margin:auto}.hero{height:260px;background:radial-gradient(circle at 75% 45%,#3b8bc4 0,#0b3965 32%,#061d35 75%);color:white;position:relative;overflow:hidden}.hero:after{content:"";position:absolute;inset:auto -5% -80px;height:150px;background:linear-gradient(180deg,#4d9c3c,#1f642d);transform:skewY(-3deg)}.hero-overlay{position:relative;z-index:2;height:100%}.hero-inner{height:100%;display:flex;align-items:center;justify-content:space-between}.brand{font-size:72px;font-weight:950;letter-spacing:-5px;text-shadow:0 4px 15px #0008}.brand-sub{font-size:28px;font-weight:900;letter-spacing:2px}.claim{margin-top:8px;font-weight:700;font-size:18px;letter-spacing:1px}.ball{font-size:150px;filter:drop-shadow(0 12px 20px #0008)}.nav{background:#063b70;color:white;box-shadow:0 2px 8px #0003}.nav-inner{display:flex;align-items:center;min-height:56px}.nav-links{display:flex}.nav a{color:white;text-decoration:none;padding:18px 28px;font-weight:700}.nav a:hover{background:#116da8}.nav-user{margin-left:auto}.menu-toggle{display:none;background:none;border:0;color:white;font-size:25px}.page{padding:28px 0 50px}.welcome{display:grid;grid-template-columns:1.25fr .75fr;background:white;border:1px solid #dbe3ea;border-radius:8px;overflow:hidden;margin-bottom:24px}.welcome>div:first-child{padding:38px}.welcome h1{font-size:36px;margin:8px 0 18px;color:#123f71}.welcome p{font-size:18px;line-height:1.55}.feature-image{min-height:260px;background:linear-gradient(135deg,#7e9eb0,#182d3e);display:grid;place-items:center;font-size:100px}.eyebrow{font-size:12px;font-weight:900;letter-spacing:1.5px;color:#2176b8}.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;margin-bottom:24px}.span-2{grid-column:span 2}.card{background:white;border:1px solid #d7e0e8;border-radius:7px;box-shadow:0 2px 8px #17304f0b;padding:20px}.card-title{font-size:20px;font-weight:850;color:#174879;border-bottom:1px solid #e0e7ed;padding-bottom:14px;margin-bottom:15px}.button{display:inline-block;background:#1677bd;color:white;border:0;border-radius:5px;padding:12px 20px;font-weight:800;text-decoration:none;cursor:pointer}.button:hover{background:#0d5f9b}.full{width:100%;text-align:center}.muted,.hint{color:#687a8c}.match-list{display:grid}.match-row{display:grid;grid-template-columns:130px 1fr 20px 1fr;gap:8px;padding:13px 0;border-bottom:1px solid #e5ebf0;align-items:center}.date{font-size:13px;color:#718295}.card-link{display:block;text-align:right;margin-top:14px;color:#116eae;text-decoration:none;font-weight:800}label{display:block;font-weight:700;margin:14px 0}input{display:block;width:100%;padding:11px;border:1px solid #b9c9d7;border-radius:5px;margin-top:7px;font-size:16px;background:#fff}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:10px 8px;border-bottom:1px solid #e1e7ec}th{background:#f2f5f7;color:#304c67}.news-item{padding:7px 0;border-bottom:1px solid #e1e7ec}.news-item small,.news-item strong{display:block}.news-item strong{color:#126eae;margin-top:3px}.news-item p{margin:5px 0}.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:20px}.section-head h1,h1{margin:5px 0 0;color:#123f71}.matchday{background:#eef4f8;padding:10px 14px;color:#164b79;font-size:19px}.match-detail{display:grid;grid-template-columns:150px 1fr 80px 1fr 90px;gap:15px;align-items:center;padding:15px;border-bottom:1px solid #e4e9ee}.team{font-weight:750}.status{font-size:12px;text-transform:uppercase;color:#6c7d8e}.tip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.tip-card small{color:#728496}.tip-teams{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;margin:15px 0;font-weight:800}.score-inputs{display:flex;gap:12px;align-items:center;margin-bottom:15px}.score-inputs input{width:75px;text-align:center;font-size:22px;font-weight:800}.narrow{max-width:650px;margin:auto}.alert{background:#fff0f0;color:#9d3030;border:1px solid #f0baba;padding:12px;border-radius:5px}.success{background:#edf9f0;color:#256c38;border:1px solid #b9dfc2;padding:12px;border-radius:5px;margin-bottom:20px}.metric span{display:block;color:#6c7e90}.metric strong{font-size:40px;color:#146fac}.footer{background:#062e55;color:#d9e8f5;padding:24px 0}@media(max-width:900px){.container{width:min(100% - 28px,720px)}.hero{height:210px}.brand{font-size:54px}.brand-sub{font-size:20px}.ball{font-size:90px}.nav-inner{position:relative}.menu-toggle{display:block}.nav-links{display:none;position:absolute;left:0;right:0;top:56px;background:#063b70;z-index:20;flex-direction:column}.menu-open .nav-links{display:flex}.nav-links a{padding:14px 20px}.grid-3,.tip-grid,.welcome{grid-template-columns:1fr}.span-2{grid-column:auto}.welcome>div:first-child{padding:25px}.match-detail{grid-template-columns:1fr auto 1fr;gap:8px}.match-detail .date,.match-detail .status{grid-column:1/-1}.match-row{grid-template-columns:95px 1fr 15px 1fr;font-size:14px}.section-head{align-items:start;gap:15px;flex-direction:column}}
/* =========================================================
   HWD STATISTIK – SAUBERES PREMIUM-DESIGN
   Bestehende Statistik-Klassen
   ========================================================= */

.stats-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ---------------------------------------------------------
   Gesamtwertung
   --------------------------------------------------------- */

.stats-card {
    margin-bottom: 24px;
    background: #fff;
    border: 1px solid rgba(185,149,55,.20);
    border-radius: 22px;
    box-shadow: 0 12px 35px rgba(23,23,23,.08);
    overflow: hidden;
}

.stats-card .card-title {
    margin: 0;
    padding: 21px 24px;
    background: #fff;
    color: #171717;
    border-bottom: 1px solid #eee8dc;
    font-size: 1.25rem;
    font-weight: 950;
}

.stats-table {
    width: 100%;
    min-width: 820px;
    border-collapse: collapse;
}

.stats-table th,
.stats-table td {
    padding: 13px 14px;
    border-bottom: 1px solid #eeeae2;
    white-space: nowrap;
}

.stats-table th {
    background: #f5f1e7;
    color: #625d55;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .7px;
}

.stats-table th:not(:nth-child(2)),
.stats-table td:not(:nth-child(2)) {
    text-align: right;
}

.stats-table th:first-child,
.stats-table td:first-child {
    text-align: center;
    width: 50px;
}

.stats-table td {
    background: #fff;
    color: #302e2a;
    font-size: 14px;
    font-weight: 650;
}

.stats-table td:nth-child(2) {
    color: #171717;
    font-weight: 850;
}

.stats-table td:nth-child(3) {
    color: #a17a20;
    font-size: 17px;
    font-weight: 950;
}

.stats-table tbody tr:last-child td {
    border-bottom: 0;
}

.stats-table tbody tr:hover td {
    background: #faf8f3;
}

/* ---------------------------------------------------------
   Erste drei Plätze
   --------------------------------------------------------- */

.stats-table tbody tr.stats-rank-1 td {
    background: #fffaf0;
}

.stats-table tbody tr.stats-rank-2 td {
    background: #f8f8f7;
}

.stats-table tbody tr.stats-rank-3 td {
    background: #fcf7f3;
}

.stats-table tbody tr.stats-rank-1:hover td,
.stats-table tbody tr.stats-rank-2:hover td,
.stats-table tbody tr.stats-rank-3:hover td {
    background: #f5f1e7;
}

.stats-table tbody tr.stats-rank-1 td:first-child {
    color: #a17a20;
    font-weight: 950;
}

.stats-table tbody tr.stats-rank-2 td:first-child {
    color: #77736c;
    font-weight: 950;
}

.stats-table tbody tr.stats-rank-3 td:first-child {
    color: #9a633d;
    font-weight: 950;
}

/* ---------------------------------------------------------
   Gesamt-Wins
   --------------------------------------------------------- */

.total-wins-head {
    min-width: 145px;
    text-align: center !important;
}

.total-wins-head span {
    display: block;
    margin-top: 3px;
    font-size: 10px;
    line-height: 1.2;
    font-weight: 700;
    opacity: .72;
}

.stats-total-wins {
    text-align: center !important;
    vertical-align: middle;
}

.stats-table td.stats-total-wins strong,
.stats-table td.stats-total-wins .wins-breakdown {
    display: block;
    width: 100%;
    text-align: center !important;
    margin-left: auto;
    margin-right: auto;
}

.stats-table td.stats-total-wins strong {
    color: #a17a20;
    font-size: 22px;
    line-height: 1.05;
    font-weight: 950;
}

.stats-table td.stats-total-wins .wins-breakdown {
    margin-top: 5px;
    color: #756f64;
    font-size: 10px;
    line-height: 1.25;
    white-space: nowrap;
}

.stats-rank-1 .stats-total-wins strong {
    color: #8a6500;
}

.stats-rank-2 .stats-total-wins strong {
    color: #65717c;
}

.stats-rank-3 .stats-total-wins strong {
    color: #8a4b20;
}

/* ---------------------------------------------------------
   Negative / positive Statistikwerte
   --------------------------------------------------------- */

.stats-table td:last-child {
    color: #9d5a50;
    font-weight: 800;
}

.stats-table td:nth-child(9) {
    color: #537d55;
    font-weight: 800;
}

/* ---------------------------------------------------------
   Kleine Statistik-Tabellen
   --------------------------------------------------------- */

.stats-table-small {
    min-width: 560px;
}

.stats-table-small th,
.stats-table-small td {
    padding: 10px 12px;
}

.stats-table-small td:nth-child(3) {
    color: #a17a20;
    font-size: 17px;
    font-weight: 900;
}

.stats-table-small td:nth-child(4) {
    color: #756f64;
    font-weight: 700;
}

.stats-table-small tbody tr:hover td {
    background: #faf8f3;
}

/* ---------------------------------------------------------
   Max / Min nebeneinander
   --------------------------------------------------------- */

.stats-two-col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
    margin-top: 20px;
}

.stats-two-col > .stats-card {
    margin: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.stats-two-col > .stats-card .stats-table-wrap {
    flex: 1;
}

/* ---------------------------------------------------------
   Statistik-Kennzahlen
   --------------------------------------------------------- */

.page:has(.stats-card) .metric.card {
    position: relative;
    overflow: hidden;
    min-height: 125px;
    padding: 22px 24px;
    background: #fff;
    border: 1px solid rgba(185,149,55,.20);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(23,23,23,.07);
}

.page:has(.stats-card) .metric.card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: #b99537;
}

.page:has(.stats-card) .metric span {
    color: #756f64;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.page:has(.stats-card) .metric strong {
    color: #171717;
    font-size: 38px;
    line-height: 1;
    font-weight: 950;
}

/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media (max-width: 900px) {

    .stats-table-wrap {
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .stats-table {
        min-width: 820px;
    }

    .stats-two-col {
        grid-template-columns: 1fr;
    }

    .page:has(.stats-card) .metric.card {
        min-height: 105px;
        padding: 19px 21px;
        border-radius: 17px;
    }

    .page:has(.stats-card) .metric strong {
        font-size: 32px;
    }
}

@media (max-width: 700px) {

    .stats-card {
        border-radius: 18px;
    }

    .stats-card .card-title {
        padding: 18px 19px;
        font-size: 18px;
    }

    .stats-table th,
    .stats-table td {
        padding-left: 12px;
        padding-right: 12px;
    }
}


/* ============================================================
   KONKURRENZ-ANALYSE – MODERNES DESIGN
   ============================================================ */

.competition-heading{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  margin-bottom:22px;
}

.competition-heading h1{
  font-size:34px;
  letter-spacing:-.7px;
}

.competition-winner-box{
  min-width:310px;
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 20px;
  border:1px solid #e8c96b;
  border-radius:12px;
  background:linear-gradient(135deg,#fffaf0,#fff3c9);
  box-shadow:0 4px 14px rgba(23,48,79,.08);
}

.competition-winner-icon{
  font-size:38px;
  line-height:1;
}

.competition-winner-label{
  display:block;
  color:#9a7012;
  font-size:10px;
  font-weight:900;
  letter-spacing:1.3px;
  margin-bottom:3px;
}

.competition-winner-box strong{
  display:block;
  color:#17304f;
  font-size:20px;
}

.competition-winner-box>div:last-child>span:last-child{
  display:block;
  color:#80651f;
  font-size:13px;
  font-weight:800;
  margin-top:2px;
}

.competition-toolbar{
  display:grid;
  grid-template-columns:1fr auto;
  gap:28px;
  align-items:center;
  margin-bottom:22px;
}

.competition-toolbar .card-title{
  margin-bottom:10px;
  padding-bottom:0;
  border:0;
}

.competition-toolbar label{
  display:inline-block;
  margin:0 10px 0 0;
}

.competition-toolbar select{
  min-width:230px;
  padding:10px 13px;
  border:1px solid #b9c9d7;
  border-radius:7px;
  background:#fff;
  color:#17304f;
  font-weight:700;
}

.competition-points-info{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:center;
  gap:7px 12px;
  max-width:620px;
  padding:12px 16px;
  border:1px solid #cfe0ed;
  border-radius:10px;
  background:#f1f7fb;
  color:#315572;
  font-size:12px;
}

.competition-points-info strong{
  width:100%;
  color:#174879;
  font-size:13px;
}

.competition-points-info span{
  white-space:nowrap;
}

.competition-points-info b{
  color:#146fac;
}

.competition-card{
  padding:0;
  overflow:hidden;
}

.competition-card-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  padding:20px 22px;
  border-bottom:1px solid #dce5ec;
  background:linear-gradient(180deg,#fff,#f7fafc);
}

.competition-card-head h2{
  margin:4px 0 0;
  color:#173e67;
  font-size:23px;
}

.competition-status{
  display:inline-flex;
  align-items:center;
  padding:7px 12px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.6px;
}

.competition-status.is-completed{
  color:#287343;
  background:#e9f7ed;
  border:1px solid #b8dfc2;
}

.competition-status.is-open{
  color:#8a6512;
  background:#fff6d8;
  border:1px solid #ecd58c;
}

.competition-table-wrap{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

.competition-table{
  width:100%;
  min-width:1120px;
  border-collapse:separate;
  border-spacing:0;
  table-layout:auto;
}

.competition-table th,
.competition-table td{
  border-right:1px solid #e1e8ee;
  border-bottom:1px solid #e1e8ee;
  text-align:center;
  vertical-align:middle;
}

.competition-table thead th{
  padding:13px 10px;
  background:#eef4f8;
  color:#173e67;
  font-size:12px;
}

.competition-table thead th:first-child{
  border-left:0;
}

.competition-number{
  width:46px;
  min-width:46px;
  font-size:12px;
  color:#708296;
}

.competition-game-name{
  min-width:245px;
  text-align:left!important;
  padding-left:16px!important;
}

.competition-game-name strong{
  display:block;
  color:#173e67;
  line-height:1.35;
}

.competition-vs{
  color:#8294a5;
  padding:0 4px;
}

.competition-kickoff{
  width:110px;
  min-width:110px;
  color:#526a80;
}

.competition-kickoff strong,
.competition-kickoff span{
  display:block;
}

.competition-kickoff strong{
  color:#294f70;
  font-size:12px;
}

.competition-kickoff span{
  font-size:11px;
  margin-top:2px;
}

.competition-result{
  width:82px;
  min-width:82px;
}

.competition-result strong{
  display:inline-flex;
  min-width:50px;
  justify-content:center;
  padding:6px 8px;
  border-radius:7px;
  background:#e8f0f6;
  color:#173e67;
  font-size:15px;
}

.competition-pending{
  display:inline-block;
  color:#8a6512;
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
}

.competition-user{
  min-width:105px;
  width:105px;
  padding:10px 7px!important;
}

.competition-user-rank{
  font-size:14px;
  min-height:18px;
}

.competition-user-name{
  margin-top:3px;
  font-size:13px;
  font-weight:900;
  color:#173e67;
}

.competition-user-total{
  margin-top:3px;
  font-size:11px;
  font-weight:800;
  color:#536b80;
}

.competition-leader-label{
  margin:5px auto 0;
  display:inline-block;
  padding:3px 6px;
  border-radius:999px;
  background:#f2cf61;
  color:#72540c;
  font-size:8px;
  font-weight:900;
  letter-spacing:.5px;
}

.competition-rank-1{
  background:linear-gradient(180deg,#fff8dc,#fff0b5)!important;
  box-shadow:inset 0 0 0 1px #e8c55c;
}

.competition-rank-2{
  background:linear-gradient(180deg,#f7f9fb,#e7edf2)!important;
  box-shadow:inset 0 0 0 1px #c9d3dc;
}

.competition-rank-3{
  background:linear-gradient(180deg,#fff5eb,#f5dfcd)!important;
  box-shadow:inset 0 0 0 1px #dfb995;
}

.competition-user-cell{
  min-width:105px;
  width:105px;
  padding:9px 7px!important;
  background:#fff;
}

.competition-user-cell:hover{
  background:#f8fbfd;
}

.competition-tip{
  font-size:15px;
  font-weight:900;
  color:#173e67;
  white-space:nowrap;
}

.competition-joker{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  width:19px;
  height:19px;
  margin-left:4px;
  border-radius:50%;
  background:#d62828;
  color:#fff;
  font-size:10px;
  font-weight:900;
  vertical-align:middle;
}

.competition-points-value{
  display:inline-block;
  margin-top:4px;
  padding:3px 6px;
  border-radius:5px;
  font-size:11px;
  font-weight:900;
}

.competition-points-value span{
  font-size:9px;
  font-weight:700;
}

.competition-points-3{
  color:#216b39;
  background:#dff6e7;
}

.competition-points-2{
  color:#397047;
  background:#ebf8ee;
}

.competition-points-1{
  color:#66782c;
  background:#f4f8df;
}

.competition-points-0{
  color:#a04444;
  background:#fdeaea;
}

.competition-points-minus{
  color:#a51f1f;
  background:#ffdcdc;
}

.competition-points-none{
  color:#8293a3;
}

.competition-points-pending{
  margin-top:4px;
  color:#8898a7;
  font-size:9px;
  font-weight:700;
}

.competition-empty{
  color:#a0adb9;
}

.competition-table tfoot th{
  padding:13px 8px;
  background:#edf3f7;
  color:#173e67;
  border-bottom:0;
}

.competition-total-label{
  text-align:left!important;
  padding-left:16px!important;
  font-size:14px!important;
}

.competition-total-label span{
  margin-right:5px;
}

.competition-total{
  font-size:19px!important;
}

.competition-legend{
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
  padding:14px 18px;
  margin-top:12px;
  color:#667b8e;
  font-size:11px;
}

.competition-legend span{
  display:inline-flex;
  align-items:center;
  gap:5px;
}

.competition-legend b{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  min-width:21px;
  height:21px;
  border-radius:5px;
  font-size:10px;
}

.legend-3{background:#dff6e7;color:#216b39}
.legend-2{background:#ebf8ee;color:#397047}
.legend-1{background:#f4f8df;color:#66782c}
.legend-0{background:#fdeaea;color:#a04444}
.legend-j{background:#d62828;color:#fff}

@media(max-width:900px){
  .competition-heading{
    flex-direction:column;
    align-items:stretch;
  }

  .competition-winner-box{
    min-width:0;
  }

  .competition-toolbar{
    grid-template-columns:1fr;
  }

  .competition-points-info{
    justify-content:flex-start;
    max-width:none;
  }

  .competition-card-head{
    padding:16px;
  }

  .competition-heading h1{
    font-size:28px;
  }
}

/* =========================================================
   AWB – Allgemeine Wettbedingungen
   ========================================================= */

.awb-card {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    background: #fff;
    border: 1px solid rgba(185,149,55,.20);
    border-radius: 22px;
    box-shadow: 0 12px 35px rgba(23,23,23,.08);
    overflow: hidden;
}

.awb-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 0;
    padding: 22px 26px;
    color: #171717;
    background: #f5f1e7;
    border-bottom: 1px solid rgba(185,149,55,.20);
    line-height: 1.4;
}

.awb-intro strong {
    display: block;
    color: #171717;
    font-size: 1.05rem;
    font-weight: 950;
    letter-spacing: .04em;
}

.awb-intro span {
    color: #777;
    font-size: .88rem;
    font-weight: 700;
}

.awb-section {
    margin: 0;
    padding: 28px 30px;
    border: 0;
    border-bottom: 1px solid #ebe6dc;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
}

.awb-section:last-of-type {
    border-bottom: 0;
}

.awb-section h2 {
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid #b99537;
    color: #171717;
    font-size: 1.25rem;
    line-height: 1.35;
    font-weight: 950;
}

.awb-section h3 {
    margin: 26px 0 12px;
    color: #292929;
    font-size: 1rem;
    line-height: 1.4;
    font-weight: 900;
}

.awb-section p {
    margin: 0 0 13px;
    color: #444;
    line-height: 1.72;
}

.awb-section p:last-child {
    margin-bottom: 0;
}

.awb-section p strong {
    color: #171717;
}

.awb-list {
    margin: 14px 0 18px;
    padding-left: 24px;
}

.awb-list li {
    margin-bottom: 9px;
    color: #444;
    line-height: 1.65;
}

.awb-list li strong {
    color: #171717;
}

.awb-note {
    margin: 0;
    padding: 18px 22px;
    border: 1px solid rgba(185,149,55,.25);
    border-left: 4px solid #b99537;
    border-radius: 0 0 22px 22px;
    background: #f5f1e7;
    color: #555;
    line-height: 1.6;
}

.awb-note strong {
    display: block;
    margin-bottom: 4px;
    color: #171717;
    font-weight: 950;
}

.awb-note span {
    display: block;
}

@media (max-width: 700px) {

    .awb-card {
        border-radius: 18px;
    }

    .awb-intro {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
        padding: 18px 20px;
    }

    .awb-section {
        padding: 22px 20px;
    }

    .awb-section h2 {
        margin-bottom: 17px;
        font-size: 1.1rem;
    }

    .awb-section h3 {
        margin-top: 22px;
    }

    .awb-list {
        padding-left: 21px;
    }

    .awb-note {
        border-radius: 0 0 18px 18px;
        padding: 16px 18px;
    }
}

/* =========================================================
   SAISONÜBERSICHT
   Platzierungen 1 bis 5 je Spieltag
   ========================================================= */

.season-overview-card {
  overflow: hidden;
}

.season-overview-head {
  padding: 20px 22px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.season-overview-head .card-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.season-overview-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.season-overview-table {
  width: 100%;
  min-width: 900px;
  border-collapse: separate;
  border-spacing: 0;
}

.season-overview-table th,
.season-overview-table td {
  padding: 12px 10px;
  border-bottom: 1px solid rgba(0,0,0,.07);
  text-align: center;
  white-space: nowrap;
}

.season-overview-table thead th {
  background: rgba(0,0,0,.025);
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.season-overview-table .season-tag,
.season-overview-table .season-tag-cell {
  width: 65px;
}

.season-overview-table .season-play,
.season-overview-table .season-play-cell {
  text-align: left;
  min-width: 120px;
}

.season-overview-table .season-user {
  min-width: 82px;
}

.season-overview-table .season-average,
.season-overview-table .season-average-cell {
  min-width: 75px;
  font-weight: 700;
}

.season-tag-cell {
  font-weight: 800;
  font-size: .9rem;
}

.season-play-cell {
  font-weight: 650;
}

.season-points {
  position: relative;
  font-weight: 600;
  transition: transform .15s ease;
}

.season-points strong {
  font-size: 1rem;
}

.season-points small {
  display: block;
  margin-top: 2px;
  font-size: .68rem;
  font-weight: 700;
  opacity: .7;
}

.season-empty {
  opacity: .3;
}

/* 1. Platz */
.season-rank-1 {
  background: rgba(218, 165, 32, .22) !important;
  box-shadow: inset 0 0 0 1px rgba(218, 165, 32, .32);
}

.season-rank-1 strong {
  font-weight: 800;
}

/* 2. Platz */
.season-rank-2 {
  background: rgba(160, 160, 160, .18) !important;
  box-shadow: inset 0 0 0 1px rgba(160, 160, 160, .25);
}

/* 3. Platz */
.season-rank-3 {
  background: rgba(184, 115, 51, .18) !important;
  box-shadow: inset 0 0 0 1px rgba(184, 115, 51, .25);
}

/* 4. Platz */
.season-rank-4 {
  background: rgba(80, 150, 190, .12) !important;
  box-shadow: inset 0 0 0 1px rgba(80, 150, 190, .18);
}

/* 5. Platz */
.season-rank-5 {
  background: rgba(120, 120, 120, .08) !important;
  box-shadow: inset 0 0 0 1px rgba(120, 120, 120, .14);
}

/* Legende */
.season-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  padding: 16px 22px 20px;
  border-top: 1px solid rgba(0,0,0,.07);
  font-size: .8rem;
  color: inherit;
}

.season-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.season-legend i {
  display: inline-block;
  width: 13px;
  height: 13px;
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,.08);
}

.season-legend-1 {
  background: rgba(218, 165, 32, .22);
}

.season-legend-2 {
  background: rgba(160, 160, 160, .18);
}

.season-legend-3 {
  background: rgba(184, 115, 51, .18);
}

.season-legend-4 {
  background: rgba(80, 150, 190, .12);
}

.season-legend-5 {
  background: rgba(120, 120, 120, .08);
}

/* Mobile */
@media (max-width: 700px) {
  .season-overview-head {
    padding: 16px;
  }

  .season-overview-table th,
  .season-overview-table td {
    padding: 10px 8px;
  }

  .season-legend {
    padding: 14px 16px 16px;
    gap: 8px 14px;
  }
}


/* Kräftige Farben für die Platzierungen */
.season-rank-1 {
  background: #f4c542 !important;
  color: #3d2f00;
  box-shadow: inset 0 0 0 2px #d6a900;
}

.season-rank-2 {
  background: #c7cbd1 !important;
  color: #25282d;
  box-shadow: inset 0 0 0 2px #9da3aa;
}

.season-rank-3 {
  background: #d88945 !important;
  color: #3d1d08;
  box-shadow: inset 0 0 0 2px #b56627;
}

.season-rank-4 {
  background: #72b7d8 !important;
  color: #10384a;
  box-shadow: inset 0 0 0 2px #3e91b9;
}

.season-rank-5 {
  background: #b5a0d6 !important;
  color: #302040;
  box-shadow: inset 0 0 0 2px #9275bd;
}

/* Zugehörige Legende */
.season-legend-1 {
  background: #f4c542 !important;
  border-color: #d6a900 !important;
}

.season-legend-2 {
  background: #c7cbd1 !important;
  border-color: #9da3aa !important;
}

.season-legend-3 {
  background: #d88945 !important;
  border-color: #b56627 !important;
}

.season-legend-4 {
  background: #72b7d8 !important;
  border-color: #3e91b9 !important;
}

.season-legend-5 {
  background: #b5a0d6 !important;
  border-color: #9275bd !important;
}


/* =========================================================
   SAISONÜBERSICHT – FINALE PLATZIERUNGSFARBEN
   ========================================================= */

/* 1. Platz – ROT */
.season-rank-1 {
  background: #e53935 !important;
  color: #ffffff !important;
  box-shadow: inset 0 0 0 2px #b71c1c;
}

/* 2. Platz – BLAU */
.season-rank-2 {
  background: #1976d2 !important;
  color: #ffffff !important;
  box-shadow: inset 0 0 0 2px #0d47a1;
}

/* 3. Platz – GRÜN */
.season-rank-3 {
  background: #43a047 !important;
  color: #ffffff !important;
  box-shadow: inset 0 0 0 2px #1b5e20;
}

/* 4. Platz – HELLBLAU */
.season-rank-4 {
  background: #81d4fa !important;
  color: #083b52 !important;
  box-shadow: inset 0 0 0 2px #29b6f6;
}

/* 5. Platz – GELB */
.season-rank-5 {
  background: #fdd835 !important;
  color: #4a3b00 !important;
  box-shadow: inset 0 0 0 2px #f9a825;
}

/* Legende – exakt dieselben Farben */
.season-legend-1 {
  background: #e53935 !important;
  border-color: #b71c1c !important;
}

.season-legend-2 {
  background: #1976d2 !important;
  border-color: #0d47a1 !important;
}

.season-legend-3 {
  background: #43a047 !important;
  border-color: #1b5e20 !important;
}

.season-legend-4 {
  background: #81d4fa !important;
  border-color: #29b6f6 !important;
}

.season-legend-5 {
  background: #fdd835 !important;
  border-color: #f9a825 !important;
}


/* Saisonplatzierungen – ohne Rahmen */
.season-rank-1 {
  background: #e53935 !important;
  color: #ffffff !important;
  box-shadow: none !important;
  border: none !important;
}

.season-rank-2 {
  background: #1976d2 !important;
  color: #ffffff !important;
  box-shadow: none !important;
  border: none !important;
}

.season-rank-3 {
  background: #43a047 !important;
  color: #ffffff !important;
  box-shadow: none !important;
  border: none !important;
}

.season-rank-4 {
  background: #81d4fa !important;
  color: #083b52 !important;
  box-shadow: none !important;
  border: none !important;
}

.season-rank-5 {
  background: #fdd835 !important;
  color: #4a3b00 !important;
  box-shadow: none !important;
  border: none !important;
}


/* Saisonübersicht – einheitliche Zeilenhöhe */
.season-overview-table tbody tr {
  height: 58px;
}

.season-overview-table tbody td {
  height: 58px;
  min-height: 58px;
  box-sizing: border-box;
  vertical-align: middle;
  padding-top: 8px;
  padding-bottom: 8px;
}


/* Klickbarer Spieltag in der Saisonübersicht */
.season-play-link {
  color: inherit;
  font-weight: 750;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 8px;
  margin-left: -8px;
  border-radius: 6px;
  transition: background-color .15s ease, color .15s ease;
}

.season-play-link:hover {
  background: rgba(0,0,0,.07);
  text-decoration: none;
}

.season-play-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}


/* =========================================================
   ADMIN DASHBOARD
   ========================================================= */

.admin-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 28px;
}

.admin-dashboard-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 24px;
    border: 1px solid rgba(185,149,55,.20);
    border-radius: 18px;
    background: #fff;
    color: #171717;
    text-decoration: none;
    box-shadow: 0 10px 28px rgba(23,23,23,.07);
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}

.admin-dashboard-card:hover {
    transform: translateY(-2px);
    border-color: rgba(185,149,55,.42);
    box-shadow: 0 15px 34px rgba(23,23,23,.11);
    text-decoration: none;
}

.admin-dashboard-card h2 {
    margin: 0 0 7px;
    color: #171717;
    font-size: 1.08rem;
    line-height: 1.35;
    font-weight: 900;
}

.admin-dashboard-card p {
    margin: 0;
    color: #666;
    line-height: 1.55;
}

.admin-dashboard-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(185,149,55,.25);
    border-radius: 14px;
    background: #f5f1e7;
    font-size: 22px;
}

/* Kennzahlen */

.admin-dashboard-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-top: 28px;
}

.admin-dashboard-stat {
    min-width: 0;
    padding: 22px 20px;
    border: 1px solid rgba(185,149,55,.20);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(23,23,23,.06);
}

.admin-dashboard-stat-label {
    display: block;
    margin-bottom: 8px;
    color: #777;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.admin-dashboard-stat strong {
    display: block;
    color: #171717;
    font-size: 2rem;
    line-height: 1;
    font-weight: 950;
}

.admin-dashboard-stat-detail {
    display: block;
    margin-top: 8px;
    color: #888;
    font-size: .78rem;
    line-height: 1.4;
}

/* Hauptbereich */

.admin-dashboard-main {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
    gap: 18px;
    margin-top: 18px;
}

.admin-dashboard-current {
    min-width: 0;
    padding: 24px;
    border: 1px solid rgba(185,149,55,.20);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(23,23,23,.07);
}

.admin-dashboard-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
}

.admin-dashboard-section-head .eyebrow {
    display: block;
    margin-bottom: 5px;
}

.admin-dashboard-section-head h2 {
    margin: 0;
    color: #171717;
    font-size: 1.3rem;
    line-height: 1.25;
    font-weight: 950;
}

.admin-dashboard-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 11px;
    border: 1px solid rgba(185,149,55,.25);
    border-radius: 999px;
    background: #f5f1e7;
    color: #7b601e;
    font-size: .76rem;
    font-weight: 850;
    white-space: nowrap;
}

.admin-dashboard-current-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 22px;
}

.admin-dashboard-current-grid > div {
    padding: 16px;
    border: 1px solid #ebe6dc;
    border-radius: 14px;
    background: #f8f6f1;
}

.admin-dashboard-current-grid strong {
    display: block;
    color: #171717;
    font-size: 1.55rem;
    line-height: 1;
    font-weight: 950;
}

.admin-dashboard-current-grid span {
    display: block;
    margin-top: 7px;
    color: #777;
    font-size: .78rem;
    font-weight: 700;
}

.admin-dashboard-current .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Schnellzugriff */

.admin-dashboard-quicklinks {
    display: grid;
    gap: 9px;
}

.admin-dashboard-quicklinks > a {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
    padding: 12px 13px;
    border: 1px solid #ebe6dc;
    border-radius: 13px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    transition:
        background .15s ease,
        border-color .15s ease,
        transform .15s ease;
}

.admin-dashboard-quicklinks > a:hover {
    background: #f5f1e7;
    border-color: rgba(185,149,55,.30);
    transform: translateX(2px);
    text-decoration: none;
}

.admin-dashboard-quick-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: #f5f1e7;
    font-size: 18px;
}

.admin-dashboard-quicklinks > a > span:last-child {
    min-width: 0;
}

.admin-dashboard-quicklinks strong {
    display: block;
    color: #171717;
    font-size: .9rem;
    line-height: 1.25;
    font-weight: 900;
}

.admin-dashboard-quicklinks small {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    color: #777;
    font-size: .76rem;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Responsive */

@media (max-width: 1000px) {
    .admin-dashboard-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-dashboard-main {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .admin-dashboard-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .admin-dashboard-stats {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .admin-dashboard-stat {
        padding: 18px 16px;
    }

    .admin-dashboard-stat strong {
        font-size: 1.7rem;
    }

    .admin-dashboard-current {
        padding: 20px 18px;
        border-radius: 18px;
    }

    .admin-dashboard-section-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .admin-dashboard-current-grid {
        gap: 8px;
    }

    .admin-dashboard-current-grid > div {
        padding: 13px 10px;
    }

    .admin-dashboard-current-grid strong {
        font-size: 1.3rem;
    }

    .admin-dashboard-current-grid span {
        font-size: .72rem;
    }
}

@media (max-width: 430px) {
    .admin-dashboard-stats {
        grid-template-columns: 1fr;
    }

    .admin-dashboard-current-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   ADMIN ERGEBNISSE – SPIELTAGSÜBERSICHT
   ========================================================= */

.admin-results-overview {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 24px;
}

.admin-results-play-card {
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 82px;
    padding: 20px 22px;
    text-decoration: none;
    color: inherit;
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        border-color 0.15s ease;
}

.admin-results-play-card:hover {
    transform: translateY(-2px);
}

.admin-results-play-card-main {
    flex: 1 1 auto;
    min-width: 0;
}

.admin-results-play-number {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 5px;
}

.admin-results-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 600;
}

.admin-results-status.closed {
    color: #b42318;
}

.admin-results-status.running {
    color: #a15c00;
}

.admin-results-status.open {
    color: #18794e;
}

.admin-results-status.scheduled {
    color: #667085;
}

.admin-results-play-arrow {
    flex: 0 0 auto;
    font-size: 26px;
    line-height: 1;
    color: #98a2b3;
}

.admin-results-back {
    display: inline-block;
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.admin-results-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.admin-results-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.admin-results-table {
    width: 100%;
    border-collapse: collapse;
}

.admin-results-table th,
.admin-results-table td {
    padding: 14px 12px;
    text-align: left;
    vertical-align: middle;
}

.admin-results-table th {
    font-size: 13px;
    font-weight: 700;
}

.admin-results-table td {
    font-size: 15px;
}

.admin-results-table tbody tr + tr {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

@media (max-width: 900px) {
    .admin-results-overview {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .admin-results-play-card {
        gap: 12px;
        padding: 16px;
    }

    .admin-results-play-card-main {
        min-width: 0;
    }

    .admin-results-play-number {
        font-size: 16px;
    }

    .admin-results-status {
        font-size: 13px;
    }

    .admin-results-detail-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
    }

    .admin-results-table th,
    .admin-results-table td {
        padding: 11px 8px;
    }
}


/* ADMIN ERGEBNISSE – GRÖSSERER ZURÜCK-PFEIL */
.admin-results-back {
    display: inline-block;
    font-size: 19px;
    font-weight: 600;
    padding: 10px 0;
}


/* ADMIN ERGEBNISSE – ERGEBNISFELDER NEBENEINANDER */
.admin-result-inputs {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.admin-result-inputs input {
    width: 58px;
    min-width: 58px;
    text-align: center;
    padding: 8px 6px;
}

.admin-result-inputs span {
    font-size: 20px;
    font-weight: 600;
}


/* ADMIN – FEHLERDIALOG */
.admin-error-dialog-page {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 60px 20px;
}

.admin-error-dialog {
    width: 100%;
    max-width: 520px;
    padding: 36px 32px;
    text-align: center;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

.admin-error-dialog-icon {
    width: 46px;
    height: 46px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f3f3f3;
    font-size: 25px;
    font-weight: 700;
}

.admin-error-dialog h2 {
    margin: 0 0 14px;
    font-size: 24px;
    line-height: 1.25;
}

.admin-error-dialog p {
    margin: 0 auto 28px;
    max-width: 430px;
    font-size: 16px;
    line-height: 1.6;
}

.admin-error-dialog-back {
    display: inline-block;
    min-width: 120px;
    text-align: center;
}

@media (max-width: 600px) {
    .admin-error-dialog-page {
        padding: 35px 15px;
    }

    .admin-error-dialog {
        padding: 30px 22px;
        border-radius: 14px;
    }

    .admin-error-dialog h2 {
        font-size: 21px;
    }

    .admin-error-dialog p {
        font-size: 15px;
    }
}


/* =========================================================
   Mannschaftsverwaltung – klare Trennung der Mannschaften
   ========================================================= */

.admin-teams-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.admin-team-edit {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr) auto;
    gap: 24px;
    align-items: center;
    padding: 20px;
    border: 1px solid rgba(0, 0, 0, 0.10);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.admin-team-edit:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.admin-team-edit-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.admin-team-logo,
.admin-team-logo-placeholder {
    width: 76px;
    height: 76px;
    border-radius: 12px;
    object-fit: contain;
}

.admin-team-logo {
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #fff;
    padding: 8px;
}

.admin-team-logo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed rgba(0, 0, 0, 0.20);
    background: #f7f7f7;
    color: #777;
    font-size: 12px;
    text-align: center;
}

.admin-team-upload {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    cursor: pointer;
}

.admin-team-upload span {
    font-weight: 600;
}

.admin-team-upload input[type="file"] {
    max-width: 120px;
    font-size: 11px;
}

.admin-team-edit-fields {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 140px 180px;
    gap: 16px;
    align-items: end;
}

.admin-team-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.admin-team-field label {
    font-size: 12px;
    font-weight: 600;
    color: #666;
}

.admin-team-field input[type="text"] {
    width: 100%;
    box-sizing: border-box;
}

.admin-team-league > div {
    min-height: 42px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    border-radius: 8px;
    background: #f5f5f5;
    color: #555;
    font-size: 14px;
}

.admin-team-edit-action {
    display: flex;
    justify-content: flex-end;
}

.admin-team-edit-action .button {
    white-space: nowrap;
}

/* Mobile */
@media (max-width: 900px) {

    .admin-team-edit {
        grid-template-columns: 100px minmax(0, 1fr);
        gap: 18px;
    }

    .admin-team-edit-fields {
        grid-column: 1 / -1;
        grid-template-columns: 1fr 140px;
    }

    .admin-team-league {
        grid-column: 1 / -1;
    }

    .admin-team-edit-action {
        grid-column: 1 / -1;
        justify-content: stretch;
    }

    .admin-team-edit-action .button {
        width: 100%;
    }
}

@media (max-width: 600px) {

    .admin-team-edit {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 16px;
    }

    .admin-team-edit-logo {
        align-items: flex-start;
    }

    .admin-team-edit-fields {
        grid-template-columns: 1fr;
    }

    .admin-team-league {
        grid-column: auto;
    }
}


/* Team-Logo Upload: nativen Dateinamen ausblenden */
.admin-team-upload {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.admin-team-upload input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.admin-team-upload span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 14px;
    border-radius: 8px;
    cursor: pointer;
}


/* Team-Logos in der Spielanzeige */
.competition-teams{
  display:flex;
  align-items:center;
  gap:10px;
}

.competition-team{
  display:inline-flex;
  align-items:center;
  gap:7px;
}

.competition-team-logo{
  width:28px;
  height:28px;
  object-fit:contain;
  flex:0 0 28px;
}

.competition-vs{
  flex:0 0 auto;
  padding:0 3px;
}

@media (max-width:600px){
  .competition-team-logo{
    width:24px;
    height:24px;
    flex-basis:24px;
  }

  .competition-teams{
    gap:6px;
  }

  .competition-team{
    gap:5px;
  }
}

/* Überarbeitete Team-Darstellung */
.competition-teams{
  display:grid;
  grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr);
  align-items:center;
  width:100%;
  gap:10px;
}

.competition-team{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
}

.competition-team-home{
  justify-content:flex-end;
  text-align:right;
}

.competition-team-away{
  justify-content:flex-start;
  text-align:left;
}

.competition-team-name{
  line-height:1.25;
  overflow-wrap:anywhere;
}

.competition-team-logo{
  width:34px;
  height:34px;
  object-fit:contain;
  flex:0 0 34px;
}

.competition-vs{
  display:flex;
  align-items:center;
  justify-content:center;
  color:#8294a5;
  padding:0;
  font-weight:600;
}

@media (max-width:600px){
  .competition-teams{
    grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr);
    gap:5px;
  }

  .competition-team{
    gap:6px;
  }

  .competition-team-logo{
    width:28px;
    height:28px;
    flex-basis:28px;
  }

  .competition-team-name{
    line-height:1.15;
  }
}

/* Team-Logos im Spielplan */
.schedule-team{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
}

.schedule-home{
  justify-content:flex-end;
  text-align:right;
}

.schedule-away{
  justify-content:flex-start;
  text-align:left;
}

.schedule-team-logo{
  width:32px;
  height:32px;
  object-fit:contain;
  flex:0 0 32px;
}

.schedule-vs{
  flex:0 0 20px;
  text-align:center;
}

@media (max-width:600px){
  .schedule-team{
    gap:6px;
  }

  .schedule-team-logo{
    width:27px;
    height:27px;
    flex-basis:27px;
  }

  .schedule-vs{
    flex-basis:14px;
  }
}

/* Spielplan – finale Teamdarstellung */
.match-row{
  grid-template-columns:130px minmax(0,1fr) 24px minmax(0,1fr);
  gap:12px;
  align-items:center;
}

.schedule-team{
  display:flex;
  align-items:center;
  min-width:0;
  gap:8px;
  font-weight:750;
  color:#173e67;
}



.schedule-team > span{
  min-width:0;
  overflow-wrap:anywhere;
}

.schedule-team-logo{
  width:32px;
  height:32px;
  flex:0 0 32px;
  object-fit:contain;
}

.schedule-vs{
  display:flex;
  align-items:center;
  justify-content:center;
  color:#8294a5;
  font-weight:700;
}

@media(max-width:900px){
  .match-row{
    grid-template-columns:95px minmax(0,1fr) 18px minmax(0,1fr);
    gap:8px;
  }
}

@media(max-width:600px){
  .match-row{
    grid-template-columns:72px minmax(0,1fr) 16px minmax(0,1fr);
    gap:5px;
    font-size:13px;
  }

  .schedule-team{
    gap:5px;
  }

  .schedule-team-logo{
    width:26px;
    height:26px;
    flex-basis:26px;
  }
}

/* Tippabgabe – kleinere Teamlogos */
.tips-team-logo{
    width:22px;
    height:22px;
    flex:0 0 22px;
}

@media(max-width:700px){
    .tips-team-logo{
        width:20px;
        height:20px;
        flex-basis:20px;
    }
}

/* Tippabgabe – Teamlogos 44px */
.tips-team-logo{
    width:44px;
    height:44px;
    flex:0 0 44px;
}

@media(max-width:700px){
    .tips-team-logo{
        width:40px;
        height:40px;
        flex-basis:40px;
    }
}

/* Tippabgabe – Teamname mittig zum Logo und mehr Abstand */
.tips-team{
    align-items:center;
    gap:14px;
}


/* Tippabgabe – finale Teamdarstellung */
.tip-row{
    grid-template-columns:minmax(240px,1fr) auto minmax(240px,1fr) auto !important;
}

.tips-team{
    display:flex;
    align-items:center !important;
    min-height:44px;
    gap:16px !important;
    font-weight:600;
}

.tips-team-home{
    justify-content:flex-end !important;
    text-align:right;
}

.tips-team-away{
    justify-content:flex-start !important;
    text-align:left;
}

.tips-team-logo{
    width:44px !important;
    height:44px !important;
    flex:0 0 44px !important;
    object-fit:contain;
}

@media(max-width:700px){
    .tip-row{
        grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) !important;
    }

    .tips-team{
        gap:10px !important;
        font-size:14px;
    }

    .tips-team-logo{
        width:40px !important;
        height:40px !important;
        flex-basis:40px !important;
    }

    .tip-row > div:last-child{
        grid-column:1 / -1;
        text-align:center !important;
    }
}


/* Tippabgabe – Spiel optisch trennen */
.tip-row{
    margin-bottom:10px;
    background:rgba(255,255,255,.025);
}

/* Anstoßzeit mittig unter dem Tipp */
.tip-row + div{
    text-align:center !important;
    padding:4px 16px 10px !important;
    margin-bottom:8px;
    border-bottom:1px solid rgba(255,255,255,.10);
}

@media(max-width:700px){
    .tip-row{
        margin-bottom:6px;
    }

    .tip-row + div{
        padding:4px 10px 10px !important;
        margin-bottom:6px;
    }
}

/* Tippabgabe – kompakte Spielzeilen */
.tip-row{
    margin-bottom:0 !important;
    padding:10px 16px !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
}

.tip-row + div{
    padding:2px 16px 10px !important;
    margin-bottom:8px !important;
    border-bottom:1px solid #dfe6ec !important;
    text-align:center !important;
    font-size:.82rem;
}

.tip-row + div:last-child{
    border-bottom:0 !important;
}

@media(max-width:700px){
    .tip-row{
        padding:8px 8px !important;
    }

    .tip-row + div{
        padding:2px 8px 8px !important;
        margin-bottom:6px !important;
    }
}


/* ==========================================================
   Admin – Spieltage verwalten
   ========================================================== */

.admin-plays-layout{
    display:grid;
    grid-template-columns:260px minmax(0,1fr);
    gap:24px;
    align-items:start;
}

.admin-plays-sidebar{
    position:sticky;
    top:20px;
}

.admin-card{
    background:#fff;
    border:1px solid #e2e8ee;
    border-radius:14px;
    box-shadow:0 6px 24px rgba(20,40,60,.07);
    padding:22px;
}

.admin-card > h2{
    margin:0 0 16px;
    font-size:1.1rem;
}

.admin-play-list{
    display:flex;
    flex-direction:column;
    gap:7px;
}

.admin-play-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    min-height:58px;
    padding:10px 12px;
    color:inherit;
    text-decoration:none;
    border:1px solid transparent;
    border-radius:10px;
    transition:background .15s ease,border-color .15s ease,transform .15s ease;
}

.admin-play-item:hover{
    background:#f5f8fa;
    border-color:#dce5eb;
}

.admin-play-item.is-active{
    background:#eef5f7;
    border-color:#9bbbc5;
}

.admin-play-item > span:first-child{
    display:flex;
    flex-direction:column;
    gap:3px;
    min-width:0;
}

.admin-play-item strong{
    font-size:.94rem;
}

.admin-play-item small{
    color:#71808c;
    font-size:.78rem;
}

.admin-play-status{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    white-space:nowrap;
    padding:4px 8px;
    border-radius:999px;
    background:#edf2f5;
    color:#52616b;
    font-size:.7rem;
    font-weight:700;
    line-height:1.2;
}

.admin-play-status.is-completed{
    background:#e7f3eb;
    color:#287342;
}

.admin-plays-layout main .admin-card .page-heading{
    margin-bottom:20px;
}

.admin-plays-layout main .card{
    border:1px solid #e2e8ee;
    border-radius:10px;
    background:#f8fafb;
    padding:16px 18px;
}

.admin-plays-layout main h3{
    margin-bottom:12px;
    font-size:1rem;
}

.admin-plays-layout .table-wrap{
    overflow-x:auto;
    border:1px solid #e2e8ee;
    border-radius:10px;
    background:#fff;
}

.admin-plays-layout table{
    width:100%;
    min-width:760px;
    border-collapse:collapse;
}

.admin-plays-layout th{
    background:#f5f7f9;
    color:#566570;
    font-size:.74rem;
    font-weight:700;
    letter-spacing:.02em;
    text-transform:uppercase;
}

.admin-plays-layout th,
.admin-plays-layout td{
    padding:12px 13px;
    border-bottom:1px solid #e7edf1;
    vertical-align:middle;
}

.admin-plays-layout tbody tr:last-child td{
    border-bottom:0;
}

.admin-plays-layout tbody tr:hover{
    background:#fafcfd;
}

.admin-plays-layout td:first-child{
    width:44px;
    color:#667782;
}

.admin-plays-layout select,
.admin-plays-layout input[type="datetime-local"]{
    width:100%;
    min-height:42px;
    box-sizing:border-box;
    border:1px solid #d5dfe5;
    border-radius:8px;
    background:#fff;
    padding:8px 10px;
    color:inherit;
    font:inherit;
}

.admin-plays-layout select:focus,
.admin-plays-layout input[type="datetime-local"]:focus{
    outline:none;
    border-color:#7da9b5;
    box-shadow:0 0 0 3px rgba(125,169,181,.15);
}

.admin-plays-layout .button{
    min-height:44px;
    padding:10px 20px;
    border-radius:9px;
    font-weight:700;
    cursor:pointer;
}

.admin-plays-layout .alert{
    margin-bottom:18px;
    border-radius:10px;
}

@media(max-width:900px){
    .admin-plays-layout{
        grid-template-columns:1fr;
    }

    .admin-plays-sidebar{
        position:static;
    }

    .admin-play-list{
        display:grid;
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
}

@media(max-width:620px){
    .admin-card{
        padding:15px;
        border-radius:11px;
    }

    .admin-play-list{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .admin-play-item{
        min-height:52px;
        padding:8px 9px;
    }

    .admin-play-item .admin-play-status{
        display:none;
    }

    .admin-plays-layout main .page-heading h2{
        font-size:1.2rem;
    }

    .admin-plays-layout main .card{
        padding:13px;
    }
}

/* Spieltag freigeben */
.admin-release-button{
    background:#2f7d5a;
    border-color:#2f7d5a;
    color:#fff;
}

.admin-release-button:hover{
    background:#256548;
    border-color:#256548;
    color:#fff;
}

.admin-release-button:focus{
    outline:none;
    box-shadow:0 0 0 3px rgba(47,125,90,.18);
}


.admin-release-button:disabled{
    opacity:.45;
    cursor:not-allowed;
    background:#7d8a91;
    border-color:#7d8a91;
    color:#fff;
}

.admin-release-hint{
    flex-basis:100%;
    margin:10px 0 0;
    color:#71808c;
    font-size:.86rem;
}

.team-select option.is-team-unavailable{
    display:none;
}

/* Öffentliche Liga-Trennung */
.public-league-heading{
    display:flex;
    align-items:center;
    gap:16px;
    margin:34px 0 16px;
    padding:14px 18px;
    border-radius:14px;
    position:relative;
    overflow:hidden;
}

.public-league-heading:first-child{
    margin-top:8px;
}

.public-league-badge{
    display:flex;
    align-items:center;
    gap:10px;
    min-height:38px;
    padding:0;
    border-radius:0;
    background:none;
    font-size:1.05rem;
    font-weight:800;
    letter-spacing:.06em;
    text-transform:uppercase;
    white-space:nowrap;
}

.public-league-badge::before{
    content:"";
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    border-radius:10px;
    font-size:.82rem;
    font-weight:800;
    letter-spacing:0;
}

.public-league-heading-1{
    background:linear-gradient(
        90deg,
        rgba(31,93,111,.16),
        rgba(31,93,111,.055)
    );
    border:1px solid rgba(31,93,111,.25);
    box-shadow:0 4px 14px rgba(31,93,111,.06);
}

.public-league-heading-1 .public-league-badge{
    color:#1f5d6f;
}

.public-league-heading-1 .public-league-badge::before{
    content:"1";
    background:#1f5d6f;
    color:#fff;
}

.public-league-heading-1 .public-league-line{
    background:rgba(31,93,111,.25);
}

.public-league-heading-2{
    background:linear-gradient(
        90deg,
        rgba(47,125,90,.16),
        rgba(47,125,90,.055)
    );
    border:1px solid rgba(47,125,90,.25);
    box-shadow:0 4px 14px rgba(47,125,90,.06);
}

.public-league-heading-2 .public-league-badge{
    color:#2f7d5a;
}

.public-league-heading-2 .public-league-badge::before{
    content:"2";
    background:#2f7d5a;
    color:#fff;
}

.public-league-heading-2 .public-league-line{
    background:rgba(47,125,90,.25);
}

.public-league-line{
    flex:1;
    height:2px;
}

@media (max-width:600px){

    .public-league-heading{
        margin:28px 0 14px;
        padding:12px 14px;
        gap:12px;
    }

    .public-league-badge{
        font-size:.88rem;
    }

    .public-league-badge::before{
        width:30px;
        height:30px;
        border-radius:8px;
        font-size:.75rem;
    }

    .public-league-line{
        height:2px;
    }
}


    .public-league-badge{
        font-size:.72rem;
        padding:5px 10px;
    }


/* Konkurrenz-Analyse – Liga-Trennung */
.competition-league-row td{
    padding:0 !important;
    border:0 !important;
}

.competition-league-row .public-league-heading{
    margin:22px 0 12px;
}

.competition-league-row:first-child .public-league-heading{
    margin-top:0;
}

/* Profil – Lieblingsverein */
.profile-grid select[name="favorite_team"]{
    width:100%;
    min-height:44px;
    box-sizing:border-box;
    padding:10px 42px 10px 13px;
    border:1px solid #d5dfe5;
    border-radius:8px;
    background:#fff;
    color:inherit;
    font:inherit;
    font-size:15px;
    line-height:1.35;
    cursor:pointer;
    appearance:auto;
}

.profile-grid select[name="favorite_team"]:hover{
    border-color:#b9c9d7;
}

.profile-grid select[name="favorite_team"]:focus{
    outline:none;
    border-color:#7da9b5;
    box-shadow:0 0 0 3px rgba(125,169,181,.15);
}

.profile-grid select[name="favorite_team"] optgroup{
    font-weight:700;
    color:#315572;
}

.profile-grid select[name="favorite_team"] option{
    color:#17304f;
    background:#fff;
}

@media(max-width:600px){
    .profile-grid select[name="favorite_team"]{
        min-height:46px;
        font-size:16px;
    }
}


/* Profil – Avatar */
.profile-avatar-section{
    display:flex;
    align-items:center;
    gap:20px;
    margin-bottom:24px;
}

.profile-avatar{
    width:110px;
    height:110px;
    flex:0 0 110px;
    border-radius:50%;
    overflow:hidden;
    background:#eef3f6;
    border:1px solid #d5dfe5;
    display:flex;
    align-items:center;
    justify-content:center;
}

.profile-avatar img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

.profile-avatar-placeholder{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:32px;
    font-weight:700;
    color:#315572;
    background:#eef3f6;
}

.profile-avatar-upload{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.profile-avatar-upload-label{
    font-weight:600;
    color:#17304f;
}

.profile-avatar-upload input[type="file"]{
    max-width:100%;
    font:inherit;
}

@media(max-width:600px){
    .profile-avatar-section{
        align-items:flex-start;
        gap:14px;
    }

    .profile-avatar{
        width:90px;
        height:90px;
        flex-basis:90px;
    }

    .profile-avatar-placeholder{
        font-size:26px;
    }
}


/* =========================================================
   HWD – neues Branding / Header
   HühnerfürstWettenDeutschland
   ========================================================= */

.hero-inner{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:28px;
}

.hwd-logo-link{
    display:flex;
    align-items:center;
    flex:0 0 auto;
    text-decoration:none;
}

.hwd-logo{
    display:block;
    width:220px;
    max-width:32vw;
    height:auto;
    max-height:110px;
    object-fit:contain;
}

.hwd-branding{
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.hwd-branding .brand{
    line-height:1;
}

.hwd-branding .brand-sub{
    margin-top:5px;
}

.hwd-branding .claim{
    margin-top:8px;
    letter-spacing:.08em;
}

@media (max-width:700px){
    .hero-inner{
        gap:14px;
    }

    .hwd-logo{
        width:125px;
        max-width:38vw;
        max-height:75px;
    }

    .hwd-branding .brand{
        font-size:28px;
    }

    .hwd-branding .brand-sub{
        font-size:12px;
        line-height:1.2;
    }

    .hwd-branding .claim{
        font-size:10px;
        letter-spacing:.04em;
    }
}


/* =========================================================
   HWD – heller Premium Header
   passend zum schwarz/goldenen Logo
   ========================================================= */

.hwd-premium-header .hwd-logo-link {
    display: flex;
    align-items: center;
}


.hero.hwd-premium-header{
    background:#f7f4ed;
    background-image:none;
    color:#171717;
    border:0;
    box-shadow:0 2px 12px rgba(0,0,0,.08);
}

.hero.hwd-premium-header .hero-overlay{
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.96) 0%,
            rgba(247,244,237,.98) 100%
        );
}

.hero.hwd-premium-header .hero-inner{
    min-height:175px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:42px;
    padding-top:20px;
    padding-bottom:20px;
}

.hwd-premium-header .hwd-logo{
    width:270px;
    max-width:38vw;
    max-height:140px;
}

.hwd-header-copy{
    border-left:1px solid #c9a44a;
    padding-left:32px;
}

.hwd-header-name{
    color:#171717;
    font-size:23px;
    font-weight:600;
    letter-spacing:.03em;
}

.hwd-header-claim{
    color:#a27b22;
    font-size:13px;
    font-weight:700;
    letter-spacing:.16em;
    margin-top:11px;
}

.hero.hwd-premium-header + .nav{
    background:#fff;
    border-top:1px solid #d6b45e;
    border-bottom:1px solid #e5e0d5;
    box-shadow:0 3px 12px rgba(0,0,0,.07);
}

.hero.hwd-premium-header + .nav a{
    color:#242424;
}

.hero.hwd-premium-header + .nav a:hover{
    color:#a27b22;
}

.hero.hwd-premium-header + .nav .menu-toggle{
    color:#242424;
}

@media (max-width:700px){

    .hero.hwd-premium-header .hero-inner{
        min-height:125px;
        gap:16px;
        padding-top:14px;
        padding-bottom:14px;
    }

    .hwd-premium-header .hwd-logo{
        width:145px;
        max-width:43vw;
        max-height:95px;
    }

    .hwd-header-copy{
        padding-left:15px;
    }

    .hwd-header-name{
        font-size:14px;
        line-height:1.25;
    }

    .hwd-header-claim{
        font-size:9px;
        letter-spacing:.08em;
        margin-top:7px;
    }
}


/* =========================================================
   HWD – neue Startseite
   Premium / Schwarz / Gold
   ========================================================= */

.home-personal{
    display:grid;
    grid-template-columns:minmax(0, 1.55fr) minmax(280px, .85fr);
    gap:22px;
    margin-bottom:34px;
}

.home-personal-main,
.home-favorite{
    background:#fff;
    border:1px solid #e5e0d5;
    border-radius:18px;
    box-shadow:0 8px 30px rgba(25,25,25,.06);
}

.home-personal-main{
    display:flex;
    align-items:center;
    gap:28px;
    padding:30px;
}

.home-avatar{
    width:128px;
    height:128px;
    flex:0 0 128px;
    border-radius:50%;
    overflow:hidden;
    border:4px solid #d6b45c;
    background:#f1eee7;
    box-shadow:0 5px 18px rgba(0,0,0,.12);
}

.home-avatar img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

.home-avatar-placeholder{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#eeeae1;
    color:#8e6b20;
    font-size:38px;
    font-weight:800;
}

.home-personal-text{
    min-width:0;
}

.home-personal-text h1{
    margin:5px 0 8px;
    font-size:34px;
    line-height:1.1;
    color:#171717;
}

.home-personal-text p{
    margin:0;
    color:#686868;
    font-size:16px;
}

.eyebrow{
    color:#a17a20;
    font-size:11px;
    font-weight:800;
    letter-spacing:.16em;
}

.home-personal-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:20px;
}

.button-secondary{
    background:#f4f1ea;
    color:#252525;
    border:1px solid #ddd5c5;
}

.button-secondary:hover{
    background:#ebe5d8;
    color:#171717;
}

.home-favorite{
    padding:28px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.home-favorite-label{
    color:#a17a20;
    font-size:11px;
    font-weight:800;
    letter-spacing:.14em;
    margin-bottom:18px;
}

.home-favorite-team{
    display:flex;
    align-items:center;
    gap:18px;
}

.home-favorite-logo{
    width:76px;
    height:76px;
    flex:0 0 76px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#faf9f5;
    border:1px solid #e5dfd1;
    border-radius:14px;
    padding:8px;
}

.home-favorite-logo img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.home-favorite-name{
    font-size:21px;
    font-weight:800;
    color:#171717;
    line-height:1.2;
}

.home-favorite-sub{
    margin-top:6px;
    color:#858585;
    font-size:13px;
    line-height:1.4;
}

.home-favorite-empty{
    color:#777;
    line-height:1.6;
}

.home-favorite-empty a{
    display:block;
    margin-top:8px;
    color:#a17a20;
    font-weight:700;
}


/* Gast-Startseite */

.home-guest{
    display:grid;
    grid-template-columns:minmax(0, 1.4fr) minmax(220px, .6fr);
    align-items:center;
    gap:30px;
    margin-bottom:34px;
    padding:45px;
    border-radius:20px;
    color:#fff;
    background:
        linear-gradient(135deg,#171717 0%,#292929 100%);
    box-shadow:0 12px 35px rgba(0,0,0,.14);
    overflow:hidden;
}

.home-guest h1{
    margin:10px 0 16px;
    color:#fff;
    font-size:42px;
    line-height:1.05;
}

.home-guest p{
    max-width:650px;
    color:#d5d5d5;
    font-size:16px;
    line-height:1.65;
}

.home-guest .button-secondary{
    color:#fff;
    background:rgba(255,255,255,.08);
    border-color:rgba(255,255,255,.2);
}

.home-guest-mark{
    display:flex;
    align-items:center;
    justify-content:center;
}

.home-guest-circle{
    width:190px;
    height:190px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    border:2px solid #d6b45c;
    color:#d6b45c;
    font-size:54px;
    font-weight:900;
    letter-spacing:.05em;
    box-shadow:
        0 0 0 14px rgba(214,180,92,.05),
        0 0 0 30px rgba(214,180,92,.025);
}


/* Abschnitt Überschrift */

.home-section{
    margin-bottom:34px;
}

.home-section-heading{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:16px;
}

.home-section-heading h2{
    margin:5px 0 0;
    color:#171717;
    font-size:27px;
}

.home-section-heading .card-link{
    white-space:nowrap;
}


/* Spiele */

.home-matches{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.home-match{
    display:grid;
    grid-template-columns:105px minmax(160px,1fr) 55px minmax(160px,1fr) 90px;
    align-items:center;
    gap:14px;
    padding:15px 18px;
    background:#fff;
    border:1px solid #e6e1d8;
    border-radius:14px;
    transition:
        transform .15s ease,
        box-shadow .15s ease,
        border-color .15s ease;
}

.home-match:hover{
    transform:translateY(-1px);
    border-color:#d6b45c;
    box-shadow:0 7px 22px rgba(0,0,0,.07);
}

.home-match-date{
    display:flex;
    flex-direction:column;
    color:#8a8a8a;
    line-height:1.15;
}

.home-match-date span{
    font-size:11px;
    text-transform:uppercase;
    font-weight:700;
}

.home-match-date strong{
    margin-top:2px;
    color:#252525;
    font-size:16px;
}

.home-match-date small{
    margin-top:3px;
    font-size:11px;
}

.home-match-team{
    display:flex;
    align-items:center;
    gap:12px;
    font-weight:700;
    color:#252525;
}

.home-match-team img{
    width:42px;
    height:42px;
    object-fit:contain;
    flex:0 0 42px;
}

.home-match-home{
    justify-content:flex-end;
    text-align:right;
}

.home-match-away{
    justify-content:flex-start;
}

.home-match-vs{
    display:flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    margin:auto;
    border-radius:50%;
    background:#f3f0e9;
    color:#9c7725;
    font-size:10px;
    font-weight:900;
}

.home-match-tip{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:38px;
    padding:0 12px;
    border-radius:8px;
    background:#171717;
    color:#fff;
    text-decoration:none;
    font-size:12px;
    font-weight:700;
}

.home-match-tip:hover{
    background:#a17a20;
    color:#fff;
}


/* Untere Kacheln */

.home-tiles{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
    margin-bottom:35px;
}

.home-tile{
    display:grid;
    grid-template-columns:48px 1fr 20px;
    align-items:center;
    gap:14px;
    padding:20px;
    background:#fff;
    border:1px solid #e5e0d5;
    border-radius:14px;
    text-decoration:none;
    color:#222;
    transition:
        transform .15s ease,
        box-shadow .15s ease,
        border-color .15s ease;
}

.home-tile:hover{
    transform:translateY(-2px);
    border-color:#d6b45c;
    box-shadow:0 8px 25px rgba(0,0,0,.07);
}

.home-tile-icon{
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    background:#f5f1e8;
    font-size:22px;
}

.home-tile-title{
    font-weight:800;
    font-size:15px;
}

.home-tile-text{
    margin-top:4px;
    color:#858585;
    font-size:12px;
    line-height:1.35;
}

.home-tile > span{
    color:#a17a20;
    font-size:20px;
    font-weight:700;
}


/* Responsive */

@media(max-width:900px){

    .home-personal{
        grid-template-columns:1fr;
    }

    .home-guest{
        grid-template-columns:1fr;
    }

    .home-guest-mark{
        display:none;
    }

    .home-tiles{
        grid-template-columns:1fr;
    }
}

@media(max-width:700px){

    .home-personal-main{
        padding:22px;
        gap:18px;
    }

    .home-avatar{
        width:90px;
        height:90px;
        flex-basis:90px;
        border-width:3px;
    }

    .home-avatar-placeholder{
        font-size:28px;
    }

    .home-personal-text h1{
        font-size:26px;
    }

    .home-personal-text p{
        font-size:14px;
    }

    .home-favorite{
        padding:22px;
    }

    .home-guest{
        padding:30px 24px;
    }

    .home-guest h1{
        font-size:34px;
    }

    .home-section-heading{
        align-items:flex-start;
        flex-direction:column;
        gap:8px;
    }

    .home-match{
        grid-template-columns:70px 1fr 32px 1fr;
        gap:8px;
        padding:12px;
    }

    .home-match-team{
        gap:6px;
        font-size:12px;
    }

    .home-match-team img{
        width:32px;
        height:32px;
        flex-basis:32px;
    }

    .home-match-home{
        justify-content:flex-end;
    }

    .home-match-vs{
        width:30px;
        height:30px;
        font-size:8px;
    }

    .home-match-tip{
        display:none;
    }

    .home-match-date strong{
        font-size:13px;
    }

    .home-match-date small{
        font-size:10px;
    }

    .home-tile{
        padding:16px;
    }
}

@media(max-width:480px){

    .home-personal-main{
        align-items:flex-start;
    }

    .home-avatar{
        width:76px;
        height:76px;
        flex-basis:76px;
    }

    .home-personal-text h1{
        font-size:23px;
    }

    .home-personal-actions{
        margin-top:15px;
    }

    .home-personal-actions .button{
        font-size:13px;
    }

    .home-match{
        grid-template-columns:58px 1fr 24px 1fr;
    }

    .home-match-team{
        font-size:11px;
    }

    .home-match-team img{
        width:27px;
        height:27px;
        flex-basis:27px;
    }
}


/* =========================================================
   HWD – warmer Seitenhintergrund
   ========================================================= */

body {
    background: #f5f1e7;
}

main {
    background: transparent;
}


/* =========================================================
   HWD – Startseite Premium Feinschliff
   ========================================================= */

/* ---------------------------------------------------------
   Lieblingsverein
   --------------------------------------------------------- */

.home-favorite {
    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;
}

.home-favorite:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(30, 35, 40, .08);
    border-color: rgba(185, 145, 55, .28);
}

.home-favorite-logo {
    width: 58px;
    height: 58px;
    min-width: 58px;
    border-radius: 13px;
    background: #faf8f2;
    border: 1px solid rgba(185, 145, 55, .20);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7px;
    box-shadow: 0 4px 12px rgba(30, 35, 40, .05);
}


.home-favorite-name {
    font-size: 17px;
    font-weight: 800;
}

.home-favorite-sub {
    margin-top: 4px;
}


/* ---------------------------------------------------------
   Persönlicher Bereich
   --------------------------------------------------------- */

.home-personal {
    transition:
        box-shadow .22s ease,
        border-color .22s ease;
}

.home-personal:hover {
    box-shadow: 0 14px 32px rgba(30, 35, 40, .08);
    border-color: rgba(185, 145, 55, .20);
}

.home-avatar {
    transition: transform .25s ease;
}

.home-personal:hover .home-avatar {
    transform: scale(1.025);
}

.home-personal-actions .button {
    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.home-personal-actions .button:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 15px rgba(30, 35, 40, .12);
}


/* ---------------------------------------------------------
   Nächste Spiele
   --------------------------------------------------------- */

.home-match {
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}

.home-match:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(30, 35, 40, .08);
    border-color: rgba(185, 145, 55, .25);
}

.home-match-team img {
    transition: transform .18s ease;
}

.home-match:hover .home-match-team img {
    transform: scale(1.08);
}

.home-match-vs {
    transition:
        background .18s ease,
        color .18s ease;
}

.home-match:hover .home-match-vs {
    background: #f0e5ca;
    color: #92702b;
}

.home-match-tip {
    transition:
        transform .18s ease,
        background .18s ease,
        box-shadow .18s ease;
}

.home-match-tip:hover {
    transform: translateX(2px);
    box-shadow: 0 5px 12px rgba(30, 35, 40, .14);
}


/* ---------------------------------------------------------
   Untere Navigation / Kacheln
   --------------------------------------------------------- */

.home-tile {
    position: relative;
    overflow: hidden;
    transition:
        transform .20s ease,
        box-shadow .20s ease,
        border-color .20s ease;
}

.home-tile::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: #b99537;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .22s ease;
}

.home-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(30, 35, 40, .09);
    border-color: rgba(185, 145, 55, .28);
}

.home-tile:hover::after {
    transform: scaleX(1);
}

.home-tile-icon {
    transition:
        transform .20s ease,
        background .20s ease;
}

.home-tile:hover .home-tile-icon {
    transform: scale(1.08);
    background: #f1e7cf;
}

.home-tile-title {
    transition: color .18s ease;
}

.home-tile:hover .home-tile-title {
    color: #92702b;
}


/* ---------------------------------------------------------
   Goldene Details
   --------------------------------------------------------- */

.eyebrow {
    color: #9b772c;
}

.card-link {
    transition:
        color .18s ease,
        transform .18s ease;
}

.card-link:hover {
    color: #92702b;
    transform: translateX(2px);
}


/* ---------------------------------------------------------
   Mobile Feinschliff
   --------------------------------------------------------- */

@media (max-width: 700px) {

    .home-favorite-logo {
        width: 52px;
        height: 52px;
        min-width: 52px;
    }

    .home-match:hover,
    .home-tile:hover,
    .home-favorite:hover {
        transform: none;
    }

}


/* =========================================================
   HWD – Premium Navigation
   ========================================================= */

.site-nav,
.main-nav,
.navigation,
nav {
    background: #fffdf9;
    border-bottom: 1px solid rgba(185, 145, 55, .16);
    box-shadow: 0 3px 12px rgba(35, 35, 35, .035);
}

/* Navigation Links */

.site-nav a,
.main-nav a,
.navigation a,
nav a {
    position: relative;
    transition:
        color .18s ease,
        background .18s ease;
}

/* Goldener Hover-Effekt */

.site-nav a:hover,
.main-nav a:hover,
.navigation a:hover,
nav a:hover {
    color: #92702b;
}

/* Aktiver Menüpunkt */

.site-nav a.active,
.main-nav a.active,
.navigation a.active,
nav a.active,
.site-nav a[aria-current="page"],
.main-nav a[aria-current="page"],
.navigation a[aria-current="page"],
nav a[aria-current="page"] {
    color: #92702b;
}

/* Goldene Linie unter aktivem Punkt */

.site-nav a.active::after,
.main-nav a.active::after,
.navigation a.active::after,
nav a.active::after,
.site-nav a[aria-current="page"]::after,
.main-nav a[aria-current="page"]::after,
.navigation a[aria-current="page"]::after,
nav a[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: -1px;
    height: 2px;
    background: #b99537;
    border-radius: 2px;
}

/* Hover-Linie */

.site-nav a:not(.active)::after,
.main-nav a:not(.active)::after,
.navigation a:not(.active)::after,
nav a:not(.active)::after {
    content: "";
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: -1px;
    height: 2px;
    background: #b99537;
    border-radius: 2px;
    transition:
        left .18s ease,
        right .18s ease;
}

.site-nav a:not(.active):hover::after,
.main-nav a:not(.active):hover::after,
.navigation a:not(.active):hover::after,
nav a:not(.active):hover::after {
    left: 12%;
    right: 12%;
}


/* ---------------------------------------------------------
   Benutzerbereich rechts
   --------------------------------------------------------- */

.site-nav .user-menu,
.main-nav .user-menu,
.navigation .user-menu {
    margin-left: auto;
}


/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media (max-width: 700px) {

    .site-nav a::after,
    .main-nav a::after,
    .navigation a::after,
    nav a::after {
        display: none;
    }

}


/* =========================================================
   HWD – Blau aus der UI entfernen
   Gold / Schwarz als zentrale Akzentfarben
   ========================================================= */

/* ---------------------------------------------------------
   Hauptnavigation – aktiver Menüpunkt
   --------------------------------------------------------- */

.site-nav a.active,
.main-nav a.active,
.navigation a.active,
nav a.active,
.site-nav a[aria-current="page"],
.main-nav a[aria-current="page"],
.navigation a[aria-current="page"],
nav a[aria-current="page"] {
    background: transparent !important;
    color: #92702b !important;
    box-shadow: none !important;
}

/* Kein blaues Rechteck beim Hover */

.site-nav a:hover,
.main-nav a:hover,
.navigation a:hover,
nav a:hover {
    background: transparent !important;
    color: #92702b !important;
}


/* ---------------------------------------------------------
   Primärer Button – Meine Tipps
   --------------------------------------------------------- */

.button,
.home-personal-actions .button {
    background: #171717 !important;
    color: #ffffff !important;
    border-color: #171717 !important;
}

.button:hover,
.home-personal-actions .button:hover {
    background: #b99537 !important;
    border-color: #b99537 !important;
    color: #ffffff !important;
}


/* ---------------------------------------------------------
   Sekundärer Button
   --------------------------------------------------------- */

.button-secondary {
    background: #f7f3ea !important;
    color: #171717 !important;
    border-color: #ded6c6 !important;
}

.button-secondary:hover {
    background: #efe5cf !important;
    border-color: #b99537 !important;
    color: #92702b !important;
}


/* ---------------------------------------------------------
   Textlinks
   --------------------------------------------------------- */

.card-link {
    color: #92702b !important;
}

.card-link:hover {
    color: #b99537 !important;
}




/* ---------------------------------------------------------
   Goldene Akzentfarbe für Links
   --------------------------------------------------------- */

a {
    --hwd-link-color: #92702b;
}

.home-tile:hover .home-tile-title {
    color: #92702b !important;
}


/* ---------------------------------------------------------
   Navigation – aktiver Unterstrich
   --------------------------------------------------------- */

.site-nav a.active::after,
.main-nav a.active::after,
.navigation a.active::after,
nav a.active::after,
.site-nav a[aria-current="page"]::after,
.main-nav a[aria-current="page"]::after,
.navigation a[aria-current="page"]::after,
nav a[aria-current="page"]::after {
    background: #b99537 !important;
}


/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media (max-width: 700px) {

    .site-nav a.active,
    .main-nav a.active,
    .navigation a.active,
    nav a.active,
    .site-nav a[aria-current="page"],
    .main-nav a[aria-current="page"],
    .navigation a[aria-current="page"],
    nav a[aria-current="page"] {
        background: transparent !important;
    }

}






/* =========================================================
   HWD – Header endgültig korrigieren
   Äußere Höhe reduzieren, Logo wieder vergrößern
   ========================================================= */

.hwd-premium-header {
    height: 155px !important;
    min-height: 155px !important;
    max-height: 155px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden;
}

.hwd-premium-header .hero-overlay {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.hwd-premium-header .hero-inner {
    height: 155px !important;
    min-height: 0 !important;
    max-height: none !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: flex;
    align-items: center;
}

/* Logo wieder etwas größer */

.hwd-premium-header .hwd-logo {
    width: auto !important;
    height: 105px !important;
    max-height: 105px !important;
}

/* Schrift passend zum größeren Logo */

.hwd-premium-header .hwd-header-copy {
    margin-left: 22px;
}

.hwd-premium-header .hwd-header-name {
    font-size: 20px;
    line-height: 1.2;
}

.hwd-premium-header .hwd-header-claim {
    font-size: 10px;
    margin-top: 7px;
}


/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media (max-width: 700px) {

    .hwd-premium-header {
        height: 105px !important;
        min-height: 105px !important;
        max-height: 105px !important;
    }

    .hwd-premium-header .hero-inner {
        height: 105px !important;
    }

    .hwd-premium-header .hwd-logo {
        height: 76px !important;
        max-height: 76px !important;
    }

    .hwd-premium-header .hwd-header-copy {
        margin-left: 12px;
    }

    .hwd-premium-header .hwd-header-name {
        font-size: 16px;
    }

    .hwd-premium-header .hwd-header-claim {
        font-size: 8px;
    }

}


/* =========================================================
   HWD – Lieblingsverein Premium
   ========================================================= */

.home-favorite {
    position: relative;
    overflow: hidden;
}

/* Dezenter goldener Lichtakzent */

.home-favorite::after {
    content: "";
    position: absolute;
    width: 150px;
    height: 150px;
    right: -65px;
    bottom: -75px;
    border-radius: 50%;
    background: rgba(185, 149, 55, .055);
    pointer-events: none;
}

.home-favorite-label {
    margin-bottom: 16px;
}

.home-favorite-team {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 16px;
}

.home-favorite-logo {
    width: 68px;
    height: 68px;
    min-width: 68px;
    border-radius: 14px;
    background: #fffdf8;
    border: 1px solid rgba(185, 149, 55, .25);
    padding: 9px;
    box-shadow:
        0 5px 16px rgba(35, 35, 35, .07),
        inset 0 0 0 1px rgba(255,255,255,.7);
}


.home-favorite-name {
    font-size: 19px;
    line-height: 1.2;
    font-weight: 800;
    color: #171717;
}

.home-favorite-sub {
    margin-top: 6px;
    font-size: 12px;
    color: #77736b;
}

.home-favorite-team::after {
    content: "★";
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 21px;
    color: #b99537;
    opacity: .65;
}

.home-favorite-empty {
    position: relative;
    z-index: 1;
}


/* Mobile */

@media (max-width: 700px) {

    .home-favorite-logo {
        width: 60px;
        height: 60px;
        min-width: 60px;
    }

    .home-favorite-name {
        font-size: 17px;
    }

    .home-favorite-team::after {
        display: none;
    }

}


/* =========================================================
   HWD – Lieblingsverein: großes Vereinslogo
   ========================================================= */

.home-favorite-logo {
    width: 90px;
    height: 90px;
    min-width: 90px;
    border-radius: 16px;
    padding: 10px;
}


.home-favorite-team {
    gap: 20px;
}

.home-favorite-name {
    font-size: 21px;
}

.home-favorite-sub {
    font-size: 12px;
    margin-top: 7px;
}

@media (max-width: 700px) {

    .home-favorite-logo {
        width: 76px;
        height: 76px;
        min-width: 76px;
        padding: 8px;
    }

    .home-favorite-team {
        gap: 15px;
    }

    .home-favorite-name {
        font-size: 18px;
    }

}


/* HWD – Lieblingsverein XL */

.home-favorite-logo {
    width: 120px;
    height: 120px;
    min-width: 120px;
    border-radius: 20px;
    padding: 12px;
}


.home-favorite-team {
    gap: 24px;
}

.home-favorite-name {
    font-size: 23px;
}

.home-favorite-sub {
    font-size: 13px;
    margin-top: 8px;
}

@media (max-width: 700px) {
    .home-favorite-logo {
        width: 92px;
        height: 92px;
        min-width: 92px;
        padding: 9px;
    }

    .home-favorite-team {
        gap: 17px;
    }

    .home-favorite-name {
        font-size: 19px;
    }
}




.home-match-actions .home-match-tip {
    flex-shrink: 0;
}

/* =========================================================
   HWD – Spieleliste final
   Tippstatus + Tippbutton vollständig innerhalb der Kachel
   ========================================================= */

/* Jede Spielkachel exakt gleich */
.home-match {
    background: #fff !important;
    border: 1px solid #e6e1d8 !important;
    box-shadow: none;
}

/* Ausreichend breite Spalte für Status + Button */
.home-match {
    grid-template-columns:
        105px
        minmax(160px, 1fr)
        55px
        minmax(160px, 1fr)
        220px;
}

/* Rechte Aktionsspalte */
.home-match-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    width: 100%;
    min-width: 0;
    margin-left: 0;
}

/* Tippstatus */
.home-tip-status {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    white-space: nowrap;
    flex: 0 0 auto;
    font-size: 12px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .01em;
}

.home-tip-status-done {
    color: #a17a20;
}

.home-tip-status-open {
    color: #66615a;
}

/* Tippbutton */
.home-match-actions .home-match-tip {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 76px;
    min-height: 38px;
    padding: 0 13px;
    margin: 0;
    border-radius: 8px;
    background: #171717 !important;
    border: 1px solid #171717 !important;
    color: #fff !important;
    white-space: nowrap;
}

.home-match-actions .home-match-tip:hover {
    background: #b99537 !important;
    border-color: #b99537 !important;
    color: #fff !important;
}

/* Hover bleibt bei allen fünf Kacheln identisch */
.home-match:hover {
    background: #fff !important;
}

/* Tablet */
@media (max-width: 1100px) {
    .home-match {
        grid-template-columns:
            90px
            minmax(130px, 1fr)
            45px
            minmax(130px, 1fr)
            195px;
        gap: 10px;
        padding: 13px 14px;
    }

    .home-match-actions {
        gap: 8px;
    }


    .home-match-actions .home-match-tip {
        min-width: 70px;
        padding: 0 10px;
    }
}

/* Mobil */
@media (max-width: 700px) {
    .home-match {
        grid-template-columns: 70px 1fr 32px 1fr;
        gap: 8px;
        padding: 12px;
    }

    .home-match-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
        margin-top: 4px;
        padding-top: 8px;
        border-top: 1px solid #eee9df;
    }

    .home-tip-status {
        font-size: 11px;
    }

}

@media (max-width: 480px) {
    .home-match-actions .home-match-tip {
        min-height: 34px;
        min-width: 68px;
        font-size: 11px;
        padding: 0 9px;
    }
}


/* =========================================================
   HWD – Spieleliste Mobile final
   ========================================================= */

@media (max-width: 700px) {

    .home-match {
        display: grid;
        grid-template-columns: 62px minmax(0, 1fr) 32px minmax(0, 1fr);
        gap: 8px;
        padding: 13px;
        border-radius: 12px;
    }

    .home-match-date {
        grid-column: 1;
        grid-row: 1;
        align-self: center;
    }

    .home-match-date span {
        font-size: 9px;
    }

    .home-match-date strong {
        font-size: 14px;
    }

    .home-match-date small {
        font-size: 9px;
    }

    .home-match-team {
        min-width: 0;
        gap: 7px;
        font-size: 11px;
        line-height: 1.15;
    }

    .home-match-team span {
        min-width: 0;
    }

    .home-match-home {
        grid-column: 2;
        grid-row: 1;
    }

    .home-match-away {
        grid-column: 4;
        grid-row: 1;
    }

    .home-match-team img {
        width: 32px;
        height: 32px;
        flex: 0 0 32px;
    }

    .home-match-vs {
        grid-column: 3;
        grid-row: 1;
        width: 30px;
        height: 30px;
        font-size: 8px;
    }

    .home-match-actions {
        grid-column: 1 / -1;
        grid-row: 2;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
        width: 100%;
        margin-top: 5px;
        padding-top: 9px;
        border-top: 1px solid #eee9df;
    }

    .home-tip-status {
        font-size: 10px;
    }

    .home-match-actions .home-match-tip {
        min-width: 72px;
        min-height: 34px;
        padding: 0 10px;
        font-size: 11px;
    }
}

@media (max-width: 480px) {

    .home-match {
        grid-template-columns: 55px minmax(0, 1fr) 28px minmax(0, 1fr);
        gap: 6px;
        padding: 11px;
    }

    .home-match-team {
        font-size: 10px;
        gap: 5px;
    }

    .home-match-team img {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
    }

    .home-match-vs {
        width: 28px;
        height: 28px;
    }

    .home-tip-status {
        font-size: 9px;
    }

    .home-match-actions {
        gap: 8px;
    }

    .home-match-actions .home-match-tip {
        min-width: 68px;
        min-height: 32px;
        font-size: 10px;
    }
}


/* =========================================================
   HWD – Spielplan Premium Design
   Creme / Weiß / Schwarz / Gold
   ========================================================= */

.schedule-page,
.page:has(.match-detail) {
    color: #171717;
}

/* Kopfbereich */
.section-head {
    margin-bottom: 22px;
}

.section-head h1 {
    color: #171717 !important;
    font-weight: 800;
    letter-spacing: -.025em;
}

.section-head .eyebrow {
    color: #a17a20 !important;
    letter-spacing: .12em;
}

/* Hauptcontainer */
.page > .card:has(.match-detail) {
    padding: 0 !important;
    overflow: hidden;
    background: #fff !important;
    border: 1px solid #e6e1d8 !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 24px rgba(23,23,23,.05) !important;
}

/* Spieltag */
.matchday {
    margin: 0 !important;
    padding: 18px 22px !important;
    background: #171717 !important;
    color: #fff !important;
    font-size: 17px !important;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: .01em;
    border: 0 !important;
}

/* Bundesliga-Trenner */
.public-league-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 22px 8px;
    background: #fff !important;
}

.public-league-badge {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    background: #f1eadb !important;
    color: #8d6a20 !important;
    font-size: 10px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    white-space: nowrap;
}

.public-league-line {
    flex: 1;
    height: 1px;
    background: #e8e2d8 !important;
}

/* Einzelnes Spiel */
.match-detail {
    display: grid;
    grid-template-columns: 145px minmax(0,1fr) 72px minmax(0,1fr) 100px;
    gap: 16px;
    align-items: center;
    min-height: 76px;
    padding: 14px 22px !important;
    background: #fff !important;
    border-bottom: 1px solid #eee9df !important;
}

.match-detail:last-child {
    border-bottom: 0 !important;
}

.match-detail:hover {
    background: #fcfaf6 !important;
}

/* Datum */
.match-detail .date {
    color: #756f66 !important;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 600;
}

/* Teams */
.match-detail .schedule-team {
    color: #171717 !important;
    font-size: 14px;
    line-height: 1.25;
    font-weight: 750;
}

.match-detail .schedule-team > span {
    color: #171717 !important;
}

/* Logos */
.match-detail .schedule-team-logo {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    object-fit: contain;
}

/* VS */
.match-detail .schedule-vs {
    width: 38px;
    height: 38px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2dcd1;
    border-radius: 50%;
    background: #f8f5ee;
    color: #8b8479 !important;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .04em;
}

/* Ergebnis / Status */
.match-detail .status {
    color: #8b8479 !important;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    text-align: right;
}

.match-detail .result {
    color: #171717;
    font-size: 18px;
    font-weight: 850;
}

/* Button im Kopf */
.section-head .button {
    background: #171717 !important;
    border: 1px solid #171717 !important;
    color: #fff !important;
    border-radius: 8px;
    font-weight: 750;
}

.section-head .button:hover {
    background: #b99537 !important;
    border-color: #b99537 !important;
}

/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 900px) {
    .match-detail {
        grid-template-columns: 105px minmax(0,1fr) 52px minmax(0,1fr) 75px;
        gap: 10px;
        padding: 13px 16px !important;
    }

    .match-detail .schedule-team {
        font-size: 12px;
    }

    .match-detail .schedule-team-logo {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
    }

    .match-detail .schedule-vs {
        width: 32px;
        height: 32px;
    }
}

/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 600px) {

    .section-head {
        gap: 14px;
    }

    .section-head .button {
        width: 100%;
        text-align: center;
    }

    .page > .card:has(.match-detail) {
        border-radius: 12px !important;
    }

    .matchday {
        padding: 15px 14px !important;
        font-size: 15px !important;
    }

    .public-league-heading {
        padding: 11px 14px 7px;
    }

    .match-detail {
        grid-template-columns: 58px minmax(0,1fr) 30px minmax(0,1fr);
        gap: 7px;
        min-height: 0;
        padding: 12px !important;
    }

    .match-detail .date {
        grid-column: 1;
        grid-row: 1;
        font-size: 9px;
        line-height: 1.25;
    }

    .match-detail .schedule-home {
        grid-column: 2;
        grid-row: 1;
    }

    .match-detail .schedule-vs {
        grid-column: 3;
        grid-row: 1;
        width: 28px;
        height: 28px;
        font-size: 7px;
    }

    .match-detail .schedule-away {
        grid-column: 4;
        grid-row: 1;
    }

    .match-detail .schedule-team {
        gap: 5px;
        font-size: 10px;
        line-height: 1.15;
    }

    .match-detail .schedule-team-logo {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
    }

    .match-detail .status {
        grid-column: 1 / -1;
        grid-row: 2;
        padding-top: 7px;
        margin-top: 2px;
        border-top: 1px solid #eee9df;
        text-align: center;
        font-size: 8px;
    }
}

@media (max-width: 420px) {

    .match-detail {
        grid-template-columns: 48px minmax(0,1fr) 27px minmax(0,1fr);
        gap: 5px;
        padding: 10px !important;
    }

    .match-detail .schedule-team {
        font-size: 9px;
    }

    .match-detail .schedule-team-logo {
        width: 25px;
        height: 25px;
        flex-basis: 25px;
    }

    .match-detail .schedule-vs {
        width: 25px;
        height: 25px;
    }

    .public-league-badge {
        font-size: 9px;
    }
}


/* =========================================================
   HWD – SPIELPLAN FINAL
   Überschreibt ältere Spielplan-Regeln
   ========================================================= */

/* Spielplan-Karte */
.page > .card:has(.match-detail) {
    padding: 0 !important;
    overflow: hidden !important;
    background: #fff !important;
    border: 1px solid #e6e1d8 !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 24px rgba(23,23,23,.05) !important;
}

/* Spieltag */
.page > .card:has(.match-detail) .matchday {
    margin: 0 !important;
    padding: 17px 20px !important;
    background: #171717 !important;
    color: #fff !important;
    border: 0 !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
}

/* Liga-Zeile */
.page > .card:has(.match-detail) .public-league-heading {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 11px 20px 7px !important;
    background: #fff !important;
    border: 0 !important;
    min-height: 42px !important;
}

/* Alte blaue Kreisnummer vollständig entfernen */
.page > .card:has(.match-detail) .public-league-heading::before,
.page > .card:has(.match-detail) .public-league-heading::after,
.page > .card:has(.match-detail) .public-league-heading-1::before,
.page > .card:has(.match-detail) .public-league-heading-1::after,
.page > .card:has(.match-detail) .public-league-heading-2::before,
.page > .card:has(.match-detail) .public-league-heading-2::after {
    content: none !important;
    display: none !important;
}

/* Liga-Badge */
.page > .card:has(.match-detail) .public-league-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    height: 30px !important;
    padding: 0 12px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    background: #f1eadb !important;
    color: #8d6a20 !important;
    border: 0 !important;
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

.page > .card:has(.match-detail) .public-league-line {
    flex: 1 1 auto !important;
    height: 1px !important;
    margin: 0 !important;
    background: #e8e2d8 !important;
}

/* =========================================================
   SPIELZEILE
   ========================================================= */

.page > .card:has(.match-detail) .match-detail {
    display: grid !important;

    grid-template-columns:
        145px
        minmax(250px, 1fr)
        62px
        minmax(250px, 1fr)
        220px !important;

    align-items: center !important;
    column-gap: 14px !important;
    row-gap: 0 !important;

    width: 100% !important;
    min-width: 0 !important;
    min-height: 70px !important;
    box-sizing: border-box !important;

    margin: 0 !important;
    padding: 12px 20px !important;

    background: #fff !important;
    border: 0 !important;
    border-bottom: 1px solid #eee9df !important;
}

.page > .card:has(.match-detail) .match-detail:last-child {
    border-bottom: 0 !important;
}

.page > .card:has(.match-detail) .match-detail:hover {
    background: #fcfaf6 !important;
}

/* Datum */
.page > .card:has(.match-detail) .match-detail > .date {
    min-width: 0 !important;
    margin: 0 !important;
    color: #756f66 !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
}

/* Mannschaft */
.page > .card:has(.match-detail) .match-detail .schedule-team {
    display: flex !important;
    align-items: center !important;

    width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #171717 !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    font-weight: 750 !important;

    flex-direction: row !important;
}

/* Heimteam */
.page > .card:has(.match-detail) .match-detail .schedule-home {
    justify-content: flex-end !important;
    text-align: right !important;
}

/* Auswärtsteam */
.page > .card:has(.match-detail) .match-detail .schedule-away {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* Mannschaftsname niemals buchstabenweise umbrechen */
.page > .card:has(.match-detail) .match-detail .schedule-team > span {
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;

    color: #171717 !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;

    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
}

/* Logos */
.page > .card:has(.match-detail) .schedule-team-logo {
    display: block !important;

    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;

    object-fit: contain !important;
    object-position: center !important;

    margin: 0 9px !important;
    padding: 0 !important;

    flex: 0 0 38px !important;
}

/* Ergebnis */
.page > .card:has(.match-detail) .match-detail > strong {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 62px !important;
    min-width: 62px !important;
    margin: 0 !important;

    color: #171717 !important;
    font-size: 17px !important;
    line-height: 1 !important;
    font-weight: 850 !important;
    white-space: nowrap !important;
    text-align: center !important;
}

/* =========================================================
   TIPPSTATUS + BUTTON
   ========================================================= */

.page > .card:has(.match-detail) .schedule-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    gap: 11px !important;
}

.page > .card:has(.match-detail) .schedule-tip-status {
    display: inline-flex !important;
    align-items: center !important;

    white-space: nowrap !important;

    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 750 !important;
}

.page > .card:has(.match-detail) .schedule-tip-done {
    color: #a17a20 !important;
}

.page > .card:has(.match-detail) .schedule-tip-open {
    color: #6f6a62 !important;
}

/* Tippen-Button */
.page > .card:has(.match-detail) .schedule-tip-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-width: 78px !important;
    min-height: 35px !important;
    box-sizing: border-box !important;

    margin: 0 !important;
    padding: 0 12px !important;

    border-radius: 8px !important;
    border: 1px solid #171717 !important;

    background: #171717 !important;
    color: #fff !important;

    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 750 !important;

    text-decoration: none !important;
    white-space: nowrap !important;
}

.page > .card:has(.match-detail) .schedule-tip-button:hover {
    background: #b99537 !important;
    border-color: #b99537 !important;
    color: #fff !important;
}

/* Beendete Spiele */
.page > .card:has(.match-detail) .schedule-finished {
    color: #8b8479 !important;
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 750 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .page > .card:has(.match-detail) .match-detail {
        grid-template-columns:
            105px
            minmax(190px, 1fr)
            52px
            minmax(190px, 1fr)
            185px !important;

        column-gap: 10px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .page > .card:has(.match-detail) .schedule-tip-status {
        font-size: 10px !important;
    }

    .page > .card:has(.match-detail) .schedule-tip-button {
        min-width: 70px !important;
        padding-left: 9px !important;
        padding-right: 9px !important;
    }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .page > .card:has(.match-detail) .match-detail {
        grid-template-columns:
            58px
            minmax(0, 1fr)
            38px
            minmax(0, 1fr) !important;

        column-gap: 7px !important;
        row-gap: 0 !important;

        min-height: 92px !important;
        padding: 11px 12px !important;
    }

    .page > .card:has(.match-detail) .match-detail > .date {
        font-size: 9px !important;
    }

    .page > .card:has(.match-detail) .match-detail .schedule-team {
        font-size: 11px !important;
    }

    .page > .card:has(.match-detail) .schedule-team-logo {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        max-width: 30px !important;
        flex-basis: 30px !important;
        margin-left: 5px !important;
        margin-right: 5px !important;
    }

    .page > .card:has(.match-detail) .match-detail > strong {
        width: 38px !important;
        min-width: 38px !important;
        font-size: 13px !important;
    }

    .page > .card:has(.match-detail) .schedule-actions {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;

        justify-content: flex-end !important;

        width: 100% !important;

        margin-top: 8px !important;
        padding-top: 8px !important;

        border-top: 1px solid #eee9df !important;

        gap: 9px !important;
    }

    .page > .card:has(.match-detail) .schedule-tip-status {
        font-size: 9px !important;
    }

    .page > .card:has(.match-detail) .schedule-tip-button {
        min-width: 72px !important;
        min-height: 33px !important;
        font-size: 10px !important;
    }

    .page > .card:has(.match-detail) .public-league-heading {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .page > .card:has(.match-detail) .matchday {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
}

@media (max-width: 420px) {

    .page > .card:has(.match-detail) .schedule-tip-status {
        font-size: 8px !important;
    }

    .page > .card:has(.match-detail) .schedule-tip-button {
        min-width: 67px !important;
        min-height: 31px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
        font-size: 9px !important;
    }
}


/* =========================================================
   HWD – SPIELPLAN FINAL FIX
   ========================================================= */

/* Der Spielplan-Container selbst darf kein Grid sein */
.page > .card:has(.match-detail) {
    display: block !important;
}

/* Jede Spielzeile immer über die komplette Kartenbreite */
.page > .card:has(.match-detail) > .match-detail {
    display: grid !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
}

/* Auch Spieltag und Liga immer volle Breite */
.page > .card:has(.match-detail) > .matchday,
.page > .card:has(.match-detail) > .public-league-heading {
    display: flex !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Alte blaue Kreisnummer wirklich vollständig entfernen */
.page > .card:has(.match-detail) .public-league-badge::before,
.page > .card:has(.match-detail) .public-league-heading-1 .public-league-badge::before,
.page > .card:has(.match-detail) .public-league-heading-2 .public-league-badge::before {
    content: none !important;
    display: none !important;
}

/* Liga-Badge nur noch als goldene Textmarke */
.page > .card:has(.match-detail) .public-league-badge {
    position: static !important;
    width: auto !important;
    min-width: 0 !important;
    height: 28px !important;
    padding: 0 11px !important;
    margin: 0 !important;

    background: #f1eadb !important;
    color: #8d6a20 !important;
    border: 0 !important;
    border-radius: 999px !important;

    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

/* Spielzeilen etwas kompakter */
.page > .card:has(.match-detail) > .match-detail {
    min-height: 64px !important;
    padding-top: 9px !important;
    padding-bottom: 9px !important;
}

/* Tippbereich sauber rechts */
.page > .card:has(.match-detail) .schedule-actions {
    justify-self: stretch !important;
}

/* CSS-Reset für eventuell geerbte Grid-/Flex-Regeln */
.page > .card:has(.match-detail) > .match-detail > .schedule-team {
    position: static !important;
    transform: none !important;
}

/* Mobile weiterhin eine saubere Zeile */
@media (max-width: 700px) {
    .page > .card:has(.match-detail) > .match-detail {
        grid-column: 1 / -1 !important;
        min-height: 92px !important;
    }
}


/* =========================================================
   HWD – SPIELPLAN ISOLIERTES LAYOUT
   ========================================================= */

.schedule-card {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.schedule-card .schedule-list {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Jede Partie ist eine eigenständige volle Zeile */
.schedule-card .schedule-list > .match-detail {
    display: grid !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 10px 20px !important;

    box-sizing: border-box !important;

    grid-template-columns:
        145px
        minmax(0, 1fr)
        62px
        minmax(0, 1fr)
        220px !important;

    gap: 14px !important;
    align-items: center !important;

    position: relative !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    float: none !important;
}

/* Keine geerbten Einrückungen */
.schedule-card .schedule-list > .match-detail:nth-child(n) {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Liga- und Spieltagzeilen ebenfalls volle Breite */
.schedule-card .schedule-list > .matchday,
.schedule-card .schedule-list > .public-league-heading {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Teams */
.schedule-card .schedule-list .schedule-team {
    min-width: 0 !important;
    width: 100% !important;
}

/* Tippaktionen */
.schedule-card .schedule-list .schedule-actions {
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
}

/* Mobile */
@media (max-width: 700px) {
    .schedule-card .schedule-list > .match-detail {
        grid-template-columns:
            58px
            minmax(0, 1fr)
            38px
            minmax(0, 1fr) !important;

        min-height: 92px !important;
        padding: 10px 12px !important;
    }

    .schedule-card .schedule-list .schedule-actions {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
    }
}


/* =========================================================
   HWD – Saisonübersicht Premium Redesign
   Avatare + warme HWD-Optik
   ========================================================= */

.season-overview-card {
  background: #fff;
  border: 1px solid rgba(23, 23, 23, 0.08);
  border-radius: 22px;
  box-shadow: 0 12px 35px rgba(23, 23, 23, 0.08);
  overflow: hidden;
}

.season-overview-head {
  padding: 24px 26px 20px;
  border-bottom: 1px solid rgba(23, 23, 23, 0.08);
}

.season-overview-head .card-title {
  color: #171717;
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.season-overview-scroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.season-overview-table {
  width: 100%;
  min-width: 820px;
  border-collapse: separate;
  border-spacing: 0;
  color: #171717;
}

.season-overview-table th,
.season-overview-table td {
  border-bottom: 1px solid rgba(23, 23, 23, 0.07);
}

.season-overview-table thead th {
  background: #faf8f2;
  vertical-align: middle;
}

.season-overview-table tbody tr:last-child td {
  border-bottom: 0;
}

/* Spieltag-Spalte */

.season-overview-table .season-play {
  width: 125px;
  min-width: 125px;
  padding: 16px 18px;
  text-align: left;
  color: #171717;
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.season-play-cell {
  padding: 14px 18px;
  background: #fff;
  font-weight: 700;
  white-space: nowrap;
}

.season-play-link {
  color: #171717;
  text-decoration: none;
  transition: color .18s ease;
}

.season-play-link:hover {
  color: #a17a20;
}

/* Teilnehmer-Kopf */

.season-overview-table .season-user {
  min-width: 125px;
  padding: 14px 10px 13px;
  text-align: center;
}

.season-user-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  min-height: 82px;
}

.season-user-avatar {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  object-fit: cover;
  background: #f5f1e7;
  border: 3px solid #fff;
  box-shadow:
    0 0 0 1px rgba(185, 149, 55, 0.45),
    0 5px 12px rgba(23, 23, 23, 0.12);
  color: #171717;
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1;
}

.season-user-avatar-empty {
  background: linear-gradient(135deg, #f5f1e7, #e9dfc8);
  color: #8a6a20;
}

.season-user-name {
  display: block;
  max-width: 112px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #171717;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.15;
}

/* Punkte */

.season-points {
  min-width: 125px;
  padding: 13px 10px;
  text-align: center;
  background: #fff;
  font-variant-numeric: tabular-nums;
}

.season-points strong {
  display: inline-block;
  min-width: 24px;
  font-size: 0.98rem;
  font-weight: 850;
}

.season-points small {
  display: block;
  margin-top: 2px;
  color: rgba(23, 23, 23, 0.58);
  font-size: 0.68rem;
  font-weight: 800;
}

/* Platzierungen */

.season-points.season-rank-1 {
  background: #f5dddd;
}

.season-points.season-rank-2 {
  background: #dfe9f5;
}

.season-points.season-rank-3 {
  background: #e1efdf;
}

.season-points.season-rank-4 {
  background: #e3eef5;
}

.season-points.season-rank-5 {
  background: #f3ead7;
}

.season-empty {
  color: rgba(23, 23, 23, 0.28);
  font-size: 0.95rem;
}

/* Durchschnitt */

.season-overview-table .season-average {
  width: 82px;
  min-width: 82px;
  padding: 16px 10px;
  text-align: center;
  color: #8a6a20;
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.season-average-cell {
  min-width: 82px;
  padding: 13px 10px;
  text-align: center;
  background: #faf8f2;
  color: #171717;
  font-size: 0.88rem;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}

/* Legende */

.season-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 18px;
  padding: 18px 24px 21px;
  border-top: 1px solid rgba(23, 23, 23, 0.07);
  background: #faf8f2;
}

.season-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(23, 23, 23, 0.72);
  font-size: 0.74rem;
  font-weight: 700;
}

.season-legend i {
  display: inline-block;
  width: 13px;
  height: 13px;
  border-radius: 4px;
  border: 1px solid rgba(23, 23, 23, 0.06);
}

.season-legend-1 {
  background: #f5dddd;
}

.season-legend-2 {
  background: #dfe9f5;
}

.season-legend-3 {
  background: #e1efdf;
}

.season-legend-4 {
  background: #e3eef5;
}

.season-legend-5 {
  background: #f3ead7;
}

/* Mobile */

@media (max-width: 700px) {

  .season-overview-card {
    border-radius: 18px;
  }

  .season-overview-head {
    padding: 20px 18px 17px;
  }

  .season-overview-table {
    min-width: 720px;
  }

  .season-overview-table .season-play {
    width: 105px;
    min-width: 105px;
    padding-left: 14px;
    padding-right: 14px;
  }

  .season-play-cell {
    padding-left: 14px;
    padding-right: 14px;
  }

  .season-overview-table .season-user {
    min-width: 105px;
    padding-left: 7px;
    padding-right: 7px;
  }

  .season-user-head {
    min-height: 74px;
    gap: 6px;
  }

  .season-user-avatar {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
    border-width: 2px;
  }

  .season-user-name {
    max-width: 96px;
    font-size: 0.7rem;
  }

  .season-points {
    min-width: 105px;
    padding-left: 7px;
    padding-right: 7px;
  }

  .season-overview-table .season-average,
  .season-average-cell {
    min-width: 72px;
    width: 72px;
  }

  .season-legend {
    padding: 16px 18px 18px;
    gap: 8px 14px;
  }
}

/* Schmalere Geräte: horizontal scrollen statt Layout zerstören */

.season-overview-scroll::-webkit-scrollbar {
  height: 7px;
}

.season-overview-scroll::-webkit-scrollbar-track {
  background: #eee9dd;
  border-radius: 20px;
}

.season-overview-scroll::-webkit-scrollbar-thumb {
  background: #c8b27a;
  border-radius: 20px;
}


/* =========================================================
   HWD – Saisonübersicht finale Platzierungsfarben
   Überschreibt ältere Tabellen-Farbregeln
   ========================================================= */

.season-overview-table td.season-points.season-rank-1 {
  background: #f5dddd !important;
  color: #171717 !important;
}

.season-overview-table td.season-points.season-rank-2 {
  background: #dfe9f5 !important;
  color: #171717 !important;
}

.season-overview-table td.season-points.season-rank-3 {
  background: #e1efdf !important;
  color: #171717 !important;
}

.season-overview-table td.season-points.season-rank-4 {
  background: #e3eef5 !important;
  color: #171717 !important;
}

.season-overview-table td.season-points.season-rank-5 {
  background: #f3ead7 !important;
  color: #171717 !important;
}

/* Punkte und Platzierung immer gut lesbar */
.season-overview-table td.season-points.season-rank-1 strong,
.season-overview-table td.season-points.season-rank-2 strong,
.season-overview-table td.season-points.season-rank-3 strong,
.season-overview-table td.season-points.season-rank-4 strong,
.season-overview-table td.season-points.season-rank-5 strong {
  color: #171717 !important;
}

.season-overview-table td.season-points.season-rank-1 small,
.season-overview-table td.season-points.season-rank-2 small,
.season-overview-table td.season-points.season-rank-3 small,
.season-overview-table td.season-points.season-rank-4 small,
.season-overview-table td.season-points.season-rank-5 small {
  color: rgba(23,23,23,.58) !important;
}

/* Dezenter Hover-Effekt für komplette Zeile */
.season-overview-table tbody tr:hover td:not(.season-points) {
  background: #fcfaf5;
}


/* =========================================================
   HWD Saisonübersicht – kräftige Farben + große Avatare
   ========================================================= */

/* ---------- Große Spieler-Avatare ---------- */

.season-overview-table .season-user {
  min-width: 135px;
  padding: 14px 10px 15px;
  text-align: center;
}

.season-user-head {
  min-height: 106px;
  gap: 8px;
}

.season-user-avatar {
  width: 62px !important;
  height: 62px !important;
  flex: 0 0 62px !important;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #fff !important;
  box-shadow:
    0 0 0 2px rgba(185, 149, 55, 0.65),
    0 6px 16px rgba(23, 23, 23, 0.16) !important;
  background: #f5f1e7;
}

.season-user-avatar-empty {
  background: linear-gradient(135deg, #f5f1e7, #e7d8b5) !important;
  color: #8a6518 !important;
  font-size: 1.15rem !important;
  font-weight: 900 !important;
}

.season-user-name {
  max-width: 125px;
  font-size: 0.76rem;
  font-weight: 900;
  color: #171717;
}

/* ---------- Kräftige Platzierungsfarben ---------- */

/* 1. Platz – kräftiges Rot */
.season-overview-table td.season-points.season-rank-1 {
  background: #e63946 !important;
  color: #fff !important;
}

/* 2. Platz – kräftiges Blau */
.season-overview-table td.season-points.season-rank-2 {
  background: #2f7dcc !important;
  color: #fff !important;
}

/* 3. Platz – kräftiges Grün */
.season-overview-table td.season-points.season-rank-3 {
  background: #4ca64c !important;
  color: #fff !important;
}

/* 4. Platz – kräftiges Cyan */
.season-overview-table td.season-points.season-rank-4 {
  background: #4bb8df !important;
  color: #171717 !important;
}

/* 5. Platz – kräftiges Gelb */
.season-overview-table td.season-points.season-rank-5 {
  background: #f4c542 !important;
  color: #171717 !important;
}

/* Punkte und Platzierung auf den kräftigen Feldern */
.season-overview-table td.season-points.season-rank-1 strong,
.season-overview-table td.season-points.season-rank-2 strong,
.season-overview-table td.season-points.season-rank-3 strong {
  color: #fff !important;
}

.season-overview-table td.season-points.season-rank-4 strong,
.season-overview-table td.season-points.season-rank-5 strong {
  color: #171717 !important;
}

.season-overview-table td.season-points.season-rank-1 small,
.season-overview-table td.season-points.season-rank-2 small,
.season-overview-table td.season-points.season-rank-3 small {
  color: rgba(255,255,255,.82) !important;
}

.season-overview-table td.season-points.season-rank-4 small,
.season-overview-table td.season-points.season-rank-5 small {
  color: rgba(23,23,23,.65) !important;
}

/* ---------- Legende exakt passend zu den Feldern ---------- */

.season-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
  padding: 19px 24px 21px;
  background: #faf8f2;
}

.season-legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #171717;
  font-size: 0.75rem;
  font-weight: 800;
}

.season-legend i {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px;
  display: inline-block;
  border-radius: 4px;
  border: 1px solid rgba(23,23,23,.15);
  box-shadow: 0 1px 3px rgba(23,23,23,.12);
}

/* Exakt dieselben Farben wie in der Tabelle */
.season-legend i.season-legend-1 {
  background: #e63946 !important;
}

.season-legend i.season-legend-2 {
  background: #2f7dcc !important;
}

.season-legend i.season-legend-3 {
  background: #4ca64c !important;
}

.season-legend i.season-legend-4 {
  background: #4bb8df !important;
}

.season-legend i.season-legend-5 {
  background: #f4c542 !important;
}

/* ---------- Mobile ---------- */

@media (max-width: 700px) {

  .season-overview-table {
    min-width: 820px;
  }

  .season-overview-table .season-user {
    min-width: 115px;
    padding-left: 7px;
    padding-right: 7px;
  }

  .season-user-head {
    min-height: 94px;
    gap: 7px;
  }

  .season-user-avatar {
    width: 52px !important;
    height: 52px !important;
    flex-basis: 52px !important;
  }

  .season-user-name {
    max-width: 105px;
    font-size: 0.7rem;
  }

  .season-legend {
    padding: 16px 18px 18px;
    gap: 9px 15px;
  }

  .season-legend span {
    font-size: 0.7rem;
  }
}


/* =========================================================
   HWD Saisonübersicht – weichere Farben + weißer Rahmen
   ========================================================= */

/* 1. Platz */
.season-overview-table td.season-points.season-rank-1 {
  background: #e85b65 !important;
  color: #171717 !important;
  box-shadow: inset 0 0 0 4px #fff !important;
}

/* 2. Platz */
.season-overview-table td.season-points.season-rank-2 {
  background: #5b91ce !important;
  color: #171717 !important;
  box-shadow: inset 0 0 0 4px #fff !important;
}

/* 3. Platz */
.season-overview-table td.season-points.season-rank-3 {
  background: #62aa62 !important;
  color: #171717 !important;
  box-shadow: inset 0 0 0 4px #fff !important;
}

/* 4. Platz */
.season-overview-table td.season-points.season-rank-4 {
  background: #70c2df !important;
  color: #171717 !important;
  box-shadow: inset 0 0 0 4px #fff !important;
}

/* 5. Platz */
.season-overview-table td.season-points.season-rank-5 {
  background: #f2cd58 !important;
  color: #171717 !important;
  box-shadow: inset 0 0 0 4px #fff !important;
}

/* Punkte immer dunkel und ruhig */
.season-overview-table td.season-points.season-rank-1 strong,
.season-overview-table td.season-points.season-rank-2 strong,
.season-overview-table td.season-points.season-rank-3 strong,
.season-overview-table td.season-points.season-rank-4 strong,
.season-overview-table td.season-points.season-rank-5 strong {
  color: #171717 !important;
}

/* Platznummer */
.season-overview-table td.season-points.season-rank-1 small,
.season-overview-table td.season-points.season-rank-2 small,
.season-overview-table td.season-points.season-rank-3 small,
.season-overview-table td.season-points.season-rank-4 small,
.season-overview-table td.season-points.season-rank-5 small {
  color: rgba(23,23,23,.62) !important;
}

/* =========================================================
   Legende – exakt gleiche Farben + weißer Rahmen
   ========================================================= */

.season-legend i.season-legend-1 {
  background: #e85b65 !important;
  border: 3px solid #fff !important;
  box-shadow: 0 0 0 1px rgba(23,23,23,.12);
}

.season-legend i.season-legend-2 {
  background: #5b91ce !important;
  border: 3px solid #fff !important;
  box-shadow: 0 0 0 1px rgba(23,23,23,.12);
}

.season-legend i.season-legend-3 {
  background: #62aa62 !important;
  border: 3px solid #fff !important;
  box-shadow: 0 0 0 1px rgba(23,23,23,.12);
}

.season-legend i.season-legend-4 {
  background: #70c2df !important;
  border: 3px solid #fff !important;
  box-shadow: 0 0 0 1px rgba(23,23,23,.12);
}

.season-legend i.season-legend-5 {
  background: #f2cd58 !important;
  border: 3px solid #fff !important;
  box-shadow: 0 0 0 1px rgba(23,23,23,.12);
}


/* Saisonübersicht – extra große Spieler-Avatare */
.season-overview-table .season-user {
  min-width: 145px;
  padding: 12px 10px 16px;
}

.season-user-head {
  min-height: 116px;
  gap: 9px;
}

.season-user-avatar {
  width: 72px !important;
  height: 72px !important;
  flex: 0 0 72px !important;
  border: 4px solid #fff !important;
  box-shadow:
    0 0 0 2px rgba(185, 149, 55, 0.65),
    0 7px 18px rgba(23, 23, 23, 0.18) !important;
}

.season-user-avatar-empty {
  font-size: 1.3rem !important;
}

.season-user-name {
  max-width: 135px;
  font-size: 0.78rem;
  font-weight: 900;
}

/* Mobile */
@media (max-width: 700px) {

  .season-overview-table {
    min-width: 860px;
  }

  .season-overview-table .season-user {
    min-width: 125px;
  }

  .season-user-head {
    min-height: 105px;
  }

  .season-user-avatar {
    width: 62px !important;
    height: 62px !important;
    flex-basis: 62px !important;
  }

  .season-user-name {
    max-width: 115px;
    font-size: 0.72rem;
  }
}


/* =========================================================
   HWD – MEINE TIPPS
   Premium Redesign passend zu Saisonübersicht + Spielplan
   ========================================================= */

/* Gesamter Tippbereich */
.page:has(.tip-row) {
  color: #171717;
}

/* Kopfbereich */
.page:has(.tip-row) .page-head {
  margin-bottom: 26px;
}

.page:has(.tip-row) .page-head h1 {
  color: #171717;
}

.page:has(.tip-row) .page-head .lead {
  color: #6f6a5e;
}

/* Spieltag-Auswahl */
.page:has(.tip-row) > .card:first-of-type {
  background: #fff;
  border: 1px solid rgba(23,23,23,.08);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(23,23,23,.07);
  padding: 20px 22px;
}

.page:has(.tip-row) > .card:first-of-type label {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #171717;
  font-weight: 800;
}

.page:has(.tip-row) > .card:first-of-type select {
  min-width: 240px;
  padding: 12px 42px 12px 15px;
  border: 1px solid rgba(23,23,23,.14);
  border-radius: 11px;
  background: #faf8f2;
  color: #171717;
  font: inherit;
  font-weight: 700;
  outline: none;
}

.page:has(.tip-row) > .card:first-of-type select:focus {
  border-color: #b99537;
  box-shadow: 0 0 0 3px rgba(185,149,55,.15);
}

/* Haupt-Tippkarte */
.page:has(.tip-row) > form > .card {
  background: #fff;
  border: 1px solid rgba(23,23,23,.08);
  border-radius: 22px;
  box-shadow: 0 12px 35px rgba(23,23,23,.08);
  overflow: hidden;
}

/* Überschrift innerhalb der Tippkarte */
.page:has(.tip-row) > form > .card > div:first-child {
  padding-bottom: 18px !important;
  border-bottom: 1px solid rgba(23,23,23,.08);
}

.page:has(.tip-row) > form > .card h2 {
  color: #171717 !important;
}

/* Spieltag-Eyebrow */
.page:has(.tip-row) .eyebrow {
  color: #a17a20;
  font-weight: 900;
  letter-spacing: .09em;
}

/* =========================================================
   Einzelnes Spiel
   ========================================================= */

.page:has(.tip-row) .tip-row {
  position: relative;
  display: grid !important;
  grid-template-columns: minmax(180px, 1fr) 150px minmax(180px, 1fr) 145px !important;
  align-items: center;
  gap: 18px !important;
  margin: 0 0 12px;
  padding: 20px 22px !important;

  border: 1px solid rgba(23,23,23,.09) !important;
  border-radius: 18px !important;

  background:
    linear-gradient(
      135deg,
      #fff 0%,
      #fff 72%,
      #faf7ef 100%
    ) !important;

  box-shadow: 0 5px 18px rgba(23,23,23,.055);

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}

.page:has(.tip-row) .tip-row:hover {
  transform: translateY(-1px);
  border-color: rgba(185,149,55,.35) !important;
  box-shadow: 0 9px 24px rgba(23,23,23,.09);
}

/* Heim/Gast */
.page:has(.tip-row) .tips-team {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
  color: #171717;
  font-size: 1rem;
  font-weight: 850;
  line-height: 1.2;
}

.page:has(.tip-row) .tips-team-home {
  justify-content: flex-end;
  text-align: right;
}

.page:has(.tip-row) .tips-team-away {
  justify-content: flex-start;
  text-align: left;
}

.page:has(.tip-row) .tips-team span {
  min-width: 0;
}

/* Vereinslogos */
.page:has(.tip-row) .tips-team-logo {
  width: 52px !important;
  height: 52px !important;
  flex: 0 0 52px;
  object-fit: contain;

  padding: 5px;
  border-radius: 50%;
  background: #faf8f2;
  border: 1px solid rgba(23,23,23,.08);

  box-shadow: 0 4px 12px rgba(23,23,23,.10);
}

/* =========================================================
   Ergebnis-Tipp
   ========================================================= */

.page:has(.tip-row) .tip-row > div:nth-child(2) {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px !important;
}

.page:has(.tip-row) .tip-row input[type="number"] {
  width: 62px !important;
  height: 58px;
  padding: 0 !important;

  border: 2px solid #d9d0bb !important;
  border-radius: 13px !important;

  background: #faf8f2 !important;
  color: #171717 !important;

  font-size: 1.45rem !important;
  font-weight: 900 !important;
  text-align: center;

  box-shadow: inset 0 1px 2px rgba(23,23,23,.04);
  outline: none;

  transition:
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}

.page:has(.tip-row) .tip-row input[type="number"]:focus {
  border-color: #b99537 !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(185,149,55,.14);
}

.page:has(.tip-row) .tip-row input[type="number"]:disabled {
  background: #eeeae1 !important;
  color: #777166 !important;
  border-color: #d7d2c8 !important;
}

.page:has(.tip-row) .tip-row > div:nth-child(2) > span {
  color: #a17a20;
  font-size: 1.15rem;
  font-weight: 900;
}

/* =========================================================
   Joker
   ========================================================= */

.page:has(.tip-row) .tip-row > div:last-child {
  text-align: center !important;
}

.page:has(.tip-row) .tip-row label {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px !important;

  min-height: 42px;
  padding: 8px 15px;

  border: 1px solid #d7c79e;
  border-radius: 10px;

  background: #faf6e9;
  color: #80621d;

  font-size: .82rem !important;
  font-weight: 900 !important;

  cursor: pointer;
}

.page:has(.tip-row) .tip-row label:has(input:checked) {
  background: #b99537;
  border-color: #a17a20;
  color: #fff;
}

.page:has(.tip-row) .tip-row input[type="radio"] {
  accent-color: #a17a20;
}

/* Status */
.page:has(.tip-row) .status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 36px;
  padding: 7px 12px;

  border-radius: 9px;

  background: #f5f1e7;
  border: 1px solid rgba(23,23,23,.09);

  color: #5e594f;
  font-size: .74rem;
  font-weight: 850;
  white-space: nowrap;
}

.page:has(.tip-row) .status-badge:first-letter {
  color: #a17a20;
}

/* Datum / Status unter dem Spiel */
.page:has(.tip-row) .tip-row + div {
  margin: -5px 0 14px !important;
  padding: 0 22px 4px !important;
  color: #817b70 !important;
  font-size: .76rem !important;
}

/* Joker-Erklärung */
.page:has(.tip-row) > form > .card > div[style*="Joker-Regel"] {
  margin-top: 20px !important;
  padding: 17px 20px !important;

  border: 1px solid rgba(185,149,55,.22);
  border-radius: 14px !important;

  background: #faf7ef !important;
  color: #71695c !important;

  font-size: .82rem;
  line-height: 1.55;
}

.page:has(.tip-row) > form > .card > div[style*="Joker-Regel"] strong {
  color: #171717 !important;
}

/* Speichern */
.page:has(.tip-row) > form button[type="submit"] {
  min-height: 48px;
  padding: 12px 24px;

  border: 1px solid #a17a20;
  border-radius: 11px;

  background: #171717;
  color: #fff;

  font-size: .88rem;
  font-weight: 850;

  box-shadow: 0 5px 14px rgba(23,23,23,.15);
  cursor: pointer;

  transition:
    background .18s ease,
    transform .18s ease,
    box-shadow .18s ease;
}

.page:has(.tip-row) > form button[type="submit"]:hover {
  background: #a17a20;
  border-color: #a17a20;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(23,23,23,.18);
}

/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 760px) {

  .page:has(.tip-row) > .card:first-of-type {
    padding: 17px;
    border-radius: 17px;
  }

  .page:has(.tip-row) > .card:first-of-type label {
    display: block;
  }

  .page:has(.tip-row) > .card:first-of-type select {
    width: 100%;
    min-width: 0;
    margin-top: 8px;
  }

  .page:has(.tip-row) > form > .card {
    border-radius: 18px;
  }

  .page:has(.tip-row) .tip-row {
    display: grid !important;
    grid-template-columns: 1fr 112px 1fr !important;
    gap: 10px !important;
    padding: 16px 12px !important;
  }

  .page:has(.tip-row) .tips-team {
    gap: 7px;
    font-size: .78rem;
  }

  .page:has(.tip-row) .tips-team-logo {
    width: 40px !important;
    height: 40px !important;
    flex-basis: 40px;
  }

  .page:has(.tip-row) .tip-row input[type="number"] {
    width: 45px !important;
    height: 48px;
    font-size: 1.15rem !important;
  }

  .page:has(.tip-row) .tip-row > div:nth-child(2) {
    gap: 4px !important;
  }

  .page:has(.tip-row) .tip-row > div:last-child {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .page:has(.tip-row) .tip-row label,
  .page:has(.tip-row) .status-badge {
    width: 100%;
  }

  .page:has(.tip-row) .tip-row + div {
    margin-bottom: 10px !important;
    padding: 0 12px 3px !important;
    font-size: .7rem !important;
  }
}

@media (max-width: 480px) {

  .page:has(.tip-row) .tip-row {
    grid-template-columns: minmax(0,1fr) 96px minmax(0,1fr) !important;
    padding: 14px 8px !important;
  }

  .page:has(.tip-row) .tips-team {
    font-size: .72rem;
  }

  .page:has(.tip-row) .tips-team-logo {
    width: 36px !important;
    height: 36px !important;
    flex-basis: 36px;
  }

  .page:has(.tip-row) .tip-row input[type="number"] {
    width: 40px !important;
    height: 44px;
  }
}


/* =========================================================
   HWD – Konkurrenz-Analyse Premium Redesign
   ========================================================= */

/* Kopfbereich */

.competition-heading {
  align-items: center;
}

.competition-heading h1 {
  color: #171717;
}

.competition-winner-box {
  background: #fff !important;
  border: 1px solid rgba(185,149,55,.28) !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 28px rgba(23,23,23,.08) !important;
}

.competition-winner-icon {
  background: #faf6e9 !important;
  border: 1px solid rgba(185,149,55,.28);
  border-radius: 14px;
}

.competition-winner-label {
  color: #a17a20 !important;
  font-weight: 900;
  letter-spacing: .08em;
}

.competition-winner-box strong {
  color: #171717 !important;
}

/* Toolbar */

.competition-toolbar {
  background: #fff !important;
  border: 1px solid rgba(23,23,23,.08) !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 24px rgba(23,23,23,.06) !important;
}

.competition-toolbar select {
  border-color: rgba(23,23,23,.14) !important;
  background: #faf8f2 !important;
  border-radius: 10px !important;
}

.competition-toolbar select:focus {
  border-color: #b99537 !important;
  box-shadow: 0 0 0 3px rgba(185,149,55,.14);
}

.competition-points-info {
  background: #faf8f2 !important;
  border-radius: 13px;
  border: 1px solid rgba(23,23,23,.07);
}

.competition-points-info b {
  background: #171717 !important;
  color: #fff !important;
}

/* Hauptkarte */

.competition-card {
  background: #fff !important;
  border: 1px solid rgba(23,23,23,.08) !important;
  border-radius: 22px !important;
  box-shadow: 0 12px 35px rgba(23,23,23,.08) !important;
  overflow: hidden;
}

.competition-card-head {
  padding: 22px 24px !important;
  background: #fff;
  border-bottom: 1px solid rgba(23,23,23,.08);
}

.competition-card-head h2 {
  color: #171717 !important;
}

.competition-status {
  border-radius: 10px !important;
  font-weight: 850;
}

.competition-status.is-completed {
  background: #e1efdf !important;
  color: #386238 !important;
}

.competition-status.is-open {
  background: #faf0d2 !important;
  color: #80621d !important;
}

/* Tabelle */

.competition-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.competition-table {
  min-width: 1250px;
  border-collapse: separate !important;
  border-spacing: 0;
}

.competition-table th,
.competition-table td {
  border-color: rgba(23,23,23,.07) !important;
}

/* Teilnehmer-Spalten */

.competition-table .competition-user {
  min-width: 145px;
  width: 145px;
  padding: 13px 9px 15px !important;
  text-align: center;
  vertical-align: top;
  background: #faf8f2;
}

.competition-user-avatar-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 8px;
}

.competition-user-avatar {
  width: 68px;
  height: 68px;
  flex: 0 0 68px;
  display: flex;
  align-items: center;
  justify-content: center;

  object-fit: cover;
  border-radius: 50%;

  border: 4px solid #fff;
  box-shadow:
    0 0 0 2px rgba(185,149,55,.65),
    0 7px 17px rgba(23,23,23,.15);

  background: #f5f1e7;
}

.competition-user-avatar-empty {
  background: linear-gradient(135deg,#f5f1e7,#e7d8b5);
  color: #8a6518;
  font-size: 1.25rem;
  font-weight: 900;
}

.competition-user-rank {
  margin-bottom: 4px;
  color: #8a6518;
  font-size: .82rem;
  font-weight: 900;
}

.competition-user-name {
  color: #171717 !important;
  font-size: .78rem !important;
  font-weight: 900 !important;
}

.competition-user-total {
  margin-top: 4px;
  color: #6e685d !important;
  font-size: .72rem !important;
  font-weight: 750;
}

.competition-leader-label {
  display: inline-flex;
  margin-top: 8px;
  padding: 4px 8px;
  border-radius: 7px;
  background: #b99537;
  color: #fff !important;
  font-size: .61rem !important;
  font-weight: 900;
  letter-spacing: .04em;
}

/* Platzierungsfarben – weich + weißer Rahmen */

.competition-user.competition-rank-1,
.competition-total.competition-rank-1 {
  background: #e85b65 !important;
  color: #171717 !important;
  box-shadow: inset 0 0 0 4px #fff;
}

.competition-user.competition-rank-2,
.competition-total.competition-rank-2 {
  background: #5b91ce !important;
  color: #171717 !important;
  box-shadow: inset 0 0 0 4px #fff;
}

.competition-user.competition-rank-3,
.competition-total.competition-rank-3 {
  background: #62aa62 !important;
  color: #171717 !important;
  box-shadow: inset 0 0 0 4px #fff;
}

.competition-user.competition-rank-4,
.competition-total.competition-rank-4 {
  background: #70c2df !important;
  color: #171717 !important;
  box-shadow: inset 0 0 0 4px #fff;
}

.competition-user.competition-rank-5,
.competition-total.competition-rank-5 {
  background: #f2cd58 !important;
  color: #171717 !important;
  box-shadow: inset 0 0 0 4px #fff;
}

/* Spiele */

.competition-number {
  width: 48px;
  min-width: 48px;
  text-align: center;
  color: #aaa297;
  font-weight: 800;
}

.competition-game-name {
  min-width: 245px;
  color: #171717;
}

.competition-game-name strong {
  font-size: .84rem;
  font-weight: 850;
}

.competition-vs {
  color: #a17a20 !important;
  padding: 0 4px;
}

.competition-kickoff {
  min-width: 105px;
  color: #716b61;
}

.competition-kickoff strong {
  color: #171717 !important;
}

.competition-result {
  min-width: 90px;
  text-align: center;
}

.competition-result strong {
  display: inline-flex;
  min-width: 54px;
  justify-content: center;
  padding: 8px 10px;
  border-radius: 9px;
  background: #faf8f2;
  border: 1px solid rgba(23,23,23,.09);
  color: #171717;
}

.competition-pending {
  color: #aaa297;
}

/* Liga-Trenner */

.competition-league-row td {
  padding: 9px 14px !important;
  background: #faf8f2 !important;
}

.competition-league-row .public-league-heading {
  color: #171717;
}

.competition-league-row .public-league-badge {
  border-radius: 7px;
  font-weight: 900;
}

/* Tippzellen */

.competition-user-cell {
  min-width: 145px;
  width: 145px;
  padding: 10px 7px !important;
  text-align: center;
  background: #fff;
}

.competition-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  min-width: 58px;
  padding: 7px 10px;

  border-radius: 9px;
  background: #faf8f2;
  border: 1px solid rgba(23,23,23,.09);

  color: #171717;
  font-size: .86rem;
  font-weight: 900;
}

.competition-joker {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  width: 21px;
  height: 21px;

  border-radius: 50%;
  background: #b99537 !important;
  color: #fff !important;

  font-size: .67rem;
  font-weight: 900;
}

.competition-points-value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 3px;

  margin-top: 5px;
  font-size: 1rem;
  font-weight: 950;
}

.competition-points-value span {
  font-size: .61rem !important;
  font-weight: 800;
  opacity: .65;
}

/* Punktfarben */

.competition-points-3 {
  color: #2f7a36 !important;
}

.competition-points-2 {
  color: #3d78b6 !important;
}

.competition-points-1 {
  color: #a17a20 !important;
}

.competition-points-0 {
  color: #9b9287 !important;
}

.competition-points-minus {
  color: #c0444d !important;
}

.competition-points-pending {
  margin-top: 5px;
  color: #aaa297;
  font-size: .68rem;
  font-weight: 700;
}

.competition-user-cell:hover {
  background: #fcfaf5 !important;
}

/* Gesamt */

.competition-table tfoot th {
  border-top: 2px solid rgba(185,149,55,.25) !important;
}

.competition-total-label {
  background: #faf8f2 !important;
  color: #171717 !important;
  font-weight: 900;
}

.competition-total {
  min-width: 145px;
  font-size: 1.05rem !important;
  font-weight: 950 !important;
}

/* Legende */

.competition-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 18px;
  padding: 18px 22px 21px;
  background: #faf8f2 !important;
  border-top: 1px solid rgba(23,23,23,.07);
}

.competition-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #5f594f;
  font-size: .73rem;
  font-weight: 750;
}

.competition-legend b {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 25px;
  height: 25px;

  border-radius: 7px;
  border: 3px solid #fff;

  box-shadow: 0 0 0 1px rgba(23,23,23,.12);

  color: #171717 !important;
}

.competition-legend .legend-3 {
  background: #62aa62 !important;
}

.competition-legend .legend-2 {
  background: #5b91ce !important;
}

.competition-legend .legend-1 {
  background: #f2cd58 !important;
}

/* Mobile */

@media (max-width: 800px) {

  .competition-heading {
    display: block;
  }

  .competition-winner-box {
    margin-top: 18px;
  }

  .competition-toolbar {
    padding: 17px;
  }

  .competition-points-info {
    margin-top: 14px;
  }

  .competition-table {
    min-width: 1050px;
  }

  .competition-table .competition-user,
  .competition-user-cell,
  .competition-total {
    min-width: 125px;
    width: 125px;
  }

  .competition-user-avatar {
    width: 58px;
    height: 58px;
    flex-basis: 58px;
  }

  .competition-user-name {
    font-size: .72rem !important;
  }
}


/* =========================================================
   HWD – TIPPS NEUES PREMIUM-DESIGN
   Nur Darstellung – keine Tipp-Logik
   ========================================================= */

.page:has(.tip-row) {
    max-width: 1180px;
}

.page:has(.tip-row) .page-head {
    margin-bottom: 24px;
}

.page:has(.tip-row) .page-head h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: 8px;
}

.page:has(.tip-row) .page-head .lead {
    max-width: 680px;
}

/* Spieltag-Auswahl */
.page:has(.tip-row) > .card:first-of-type {
    background: #fff;
    border: 1px solid rgba(185,149,55,.20);
    border-radius: 20px;
    padding: 18px 22px;
    box-shadow: 0 10px 30px rgba(23,23,23,.07);
}

.page:has(.tip-row) > .card:first-of-type label {
    display: flex;
    align-items: center;
    gap: 14px;
    font-weight: 700;
    color: #171717;
}

.page:has(.tip-row) > .card:first-of-type select {
    min-width: 240px;
    min-height: 46px;
    padding: 0 42px 0 14px;
    border: 1px solid #d8d1c2;
    border-radius: 12px;
    background: #f8f5ed;
    color: #171717;
    font-weight: 700;
}

/* Hauptkarte */
.page:has(.tip-row) > form > .card {
    background: #fff;
    border: 1px solid rgba(185,149,55,.20);
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 14px 40px rgba(23,23,23,.08);
}

/* Kopf Tippabgabe */
.page:has(.tip-row) > form > .card > div:first-child {
    padding-bottom: 18px;
    border-bottom: 1px solid #eee8dc;
}

.page:has(.tip-row) > form > .card h2 {
    color: #171717;
    font-size: 1.45rem;
}

.page:has(.tip-row) > form > .card .status-badge {
    background: #f5f1e7;
    color: #7b5d17;
    border: 1px solid #dbc58b;
    font-weight: 800;
}

/* Einzelnes Spiel */
.page:has(.tip-row) .tip-row {
    position: relative;
    display: grid !important;
    grid-template-columns: minmax(180px,1fr) 150px minmax(180px,1fr) 145px !important;
    align-items: center !important;
    gap: 18px !important;
    min-height: 92px;
    margin-top: 14px;
    padding: 16px 18px !important;
    border: 1px solid #e5dfd2 !important;
    border-radius: 18px !important;
    background: #faf8f3;
    box-shadow: 0 4px 14px rgba(23,23,23,.035);
    transition: .2s ease;
}

.page:has(.tip-row) .tip-row:hover {
    border-color: rgba(185,149,55,.45) !important;
    box-shadow: 0 8px 22px rgba(23,23,23,.07);
    transform: translateY(-1px);
}

/* Mannschaften */
.page:has(.tip-row) .tips-team {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    font-size: 1rem;
    font-weight: 800;
    color: #171717;
}

.page:has(.tip-row) .tips-team-logo {
    width: 48px;
    height: 48px;
    object-fit: contain;
    flex: 0 0 48px;
    padding: 5px;
    background: #fff;
    border: 1px solid #e1dbce;
    border-radius: 50%;
    box-shadow: 0 3px 10px rgba(23,23,23,.08);
}

/* Ergebnis */
.page:has(.tip-row) .tip-row > div:nth-child(2) {
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 8px !important;
}

.page:has(.tip-row) .tip-row input[type="number"] {
    width: 58px !important;
    height: 58px;
    padding: 0;
    text-align: center;
    border: 2px solid #d8d0c0;
    border-radius: 14px;
    background: #fff;
    color: #171717;
    font-size: 1.45rem;
    font-weight: 900;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.04);
    transition: .2s ease;
}

.page:has(.tip-row) .tip-row input[type="number"]:focus {
    outline: none;
    border-color: #b99537;
    box-shadow: 0 0 0 4px rgba(185,149,55,.13);
}

.page:has(.tip-row) .tip-row > div:nth-child(2) > span {
    font-size: 1.3rem;
    font-weight: 900;
    color: #9b8b6b;
}

/* Joker */
.page:has(.tip-row) .tip-row > div:last-child {
    text-align: center !important;
}

.page:has(.tip-row) .tip-row > div:last-child label {
    justify-content: center;
    min-height: 42px;
    padding: 8px 12px;
    border: 1px solid #dcc891;
    border-radius: 12px;
    background: #fffaf0;
    color: #8a6918;
    font-weight: 800;
}

.page:has(.tip-row) .tip-row > div:last-child input[type="radio"] {
    accent-color: #b99537;
    transform: scale(1.15);
}

.page:has(.tip-row) .tip-row > div:last-child .status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 7px 11px;
    border-radius: 11px;
    background: #f5f1e7;
    border: 1px solid #ddd4c3;
    color: #756c5b;
    font-weight: 800;
}

/* Joker gesetzt */
.page:has(.tip-row) .tip-row > div:last-child .status-badge:has(+ *) {
    color: #8a6918;
}

/* Zeit / Status unter dem Spiel */
.page:has(.tip-row) .tip-row + div {
    margin: 0 8px 4px !important;
    padding: 7px 8px 4px !important;
    color: #8a8376 !important;
    font-size: .78rem !important;
    font-weight: 600;
}

/* Eingabestatus */
.page:has(.tip-row) .tip-row + div {
    border-bottom: 1px solid #eee9df;
}

/* Speichern */
.page:has(.tip-row) button[type="submit"],
.page:has(.tip-row) .button[type="submit"] {
    min-height: 52px;
    border-radius: 13px;
    font-weight: 900;
    letter-spacing: .01em;
}

/* Joker-Regel */
.page:has(.tip-row) > form > div:last-child {
    margin-top: 22px !important;
    padding: 18px 20px !important;
    border: 1px solid #e4dccd;
    border-radius: 16px !important;
    background: #f8f5ed !important;
    color: #756e62 !important;
    line-height: 1.6;
}

.page:has(.tip-row) > form > div:last-child strong {
    color: #171717 !important;
}

/* Erfolgsmeldung */
.page:has(.tip-row) .success {
    border-radius: 14px;
    border: 1px solid #b8d7b8;
    background: #f3faf3;
    color: #3d743d;
    font-weight: 800;
}

/* Fehler */
.page:has(.tip-row) .alert {
    border-radius: 14px;
    font-weight: 800;
}

/* Mobile */
@media (max-width: 900px) {
    .page:has(.tip-row) > form > .card {
        padding: 16px;
        border-radius: 20px;
    }

    .page:has(.tip-row) .tip-row {
        grid-template-columns: 1fr 130px 1fr !important;
        gap: 10px !important;
        padding: 14px !important;
    }

    .page:has(.tip-row) .tip-row > div:last-child {
        grid-column: 1 / -1;
        text-align: center !important;
        padding-top: 4px;
    }

    .page:has(.tip-row) .tips-team {
        font-size: .92rem;
    }

    .page:has(.tip-row) .tips-team-logo {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
    }

    .page:has(.tip-row) .tip-row input[type="number"] {
        width: 52px !important;
        height: 52px;
        font-size: 1.3rem;
    }
}

@media (max-width: 600px) {
    .page:has(.tip-row) > .card:first-of-type {
        padding: 14px;
    }

    .page:has(.tip-row) > .card:first-of-type label {
        display: block;
    }

    .page:has(.tip-row) > .card:first-of-type select {
        width: 100%;
        margin-top: 8px;
        min-width: 0;
    }

    .page:has(.tip-row) .tip-row {
        grid-template-columns: 1fr !important;
        text-align: center;
    }

    .page:has(.tip-row) .tips-team,
    .page:has(.tip-row) .tips-team-home,
    .page:has(.tip-row) .tips-team-away {
        justify-content: center;
        text-align: center;
    }

    .page:has(.tip-row) .tip-row > div:nth-child(2) {
        order: 2;
    }

    .page:has(.tip-row) .tips-team-home {
        order: 1;
    }

    .page:has(.tip-row) .tips-team-away {
        order: 3;
    }

    .page:has(.tip-row) .tip-row > div:last-child {
        order: 4;
    }

    .page:has(.tip-row) .tip-row + div {
        text-align: center;
    }
}


/* =========================================================
   HWD – TIPPS KOMPAKTE TIPPZEILEN
   Nur Darstellung – keine Tipp-Logik
   ========================================================= */

.page:has(.tip-row) .tip-row {
    min-height: 0 !important;
    padding: 10px 18px !important;
    margin: 0 0 0 0 !important;
    gap: 14px !important;
    border-radius: 18px !important;
}

.page:has(.tip-row) .tips-team {
    min-height: 48px !important;
}

.page:has(.tip-row) .tips-team-logo {
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px !important;
}

.page:has(.tip-row) .tip-row input[type="number"],
.page:has(.tip-row) .tip-row input[type="text"] {
    width: 54px !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 !important;
}

.page:has(.tip-row) .tip-row .joker-box,
.page:has(.tip-row) .tip-row .joker-status,
.page:has(.tip-row) .tip-row .status-badge {
    min-height: 38px !important;
    padding: 8px 12px !important;
}

.page:has(.tip-row) .tip-row + div {
    padding: 7px 8px 9px !important;
    margin: 0 8px !important;
    font-size: 12px !important;
}

/* Noch kompakter auf kleineren Bildschirmen */
@media (max-width: 900px) {
    .page:has(.tip-row) .tip-row {
        padding: 9px 12px !important;
        gap: 10px !important;
    }

    .page:has(.tip-row) .tips-team-logo {
        width: 38px !important;
        height: 38px !important;
        flex-basis: 38px !important;
    }

    .page:has(.tip-row) .tips-team {
        min-height: 44px !important;
    }

    .page:has(.tip-row) .tip-row input[type="number"],
    .page:has(.tip-row) .tip-row input[type="text"] {
        width: 50px !important;
        height: 44px !important;
        min-height: 44px !important;
    }
}

@media (max-width: 600px) {
    .page:has(.tip-row) .tip-row {
        padding: 8px 10px !important;
        gap: 7px !important;
        border-radius: 15px !important;
    }

    .page:has(.tip-row) .tips-team-logo {
        width: 34px !important;
        height: 34px !important;
        flex-basis: 34px !important;
    }

    .page:has(.tip-row) .tip-row input[type="number"],
    .page:has(.tip-row) .tip-row input[type="text"] {
        width: 46px !important;
        height: 42px !important;
        min-height: 42px !important;
    }

    .page:has(.tip-row) .tip-row + div {
        padding: 5px 4px 7px !important;
        font-size: 11px !important;
    }
}


/* =========================================================
   HWD – KONKURRENZ-ANALYSE AVATARE
   Nur Darstellung – keine Berechnungslogik
   ========================================================= */

.competition-table .competition-user {
    min-width: 142px !important;
    padding: 10px 8px 12px !important;
    vertical-align: top !important;
}

.competition-table .competition-user-avatar-wrap {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 auto 7px !important;
}

.competition-table .competition-user-avatar {
    width: 68px !important;
    height: 68px !important;
    min-width: 68px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    object-position: center !important;

    background: #fff !important;
    border: 4px solid #fff !important;
    box-shadow:
        0 0 0 2px #c5a04a,
        0 4px 12px rgba(0,0,0,.14) !important;

    display: block !important;
}

.competition-table .competition-user-avatar-empty {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 68px !important;
    height: 68px !important;
    min-width: 68px !important;

    border-radius: 50% !important;
    background: #f5f1e7 !important;
    color: #8d6d22 !important;

    border: 4px solid #fff !important;
    box-shadow:
        0 0 0 2px #c5a04a,
        0 4px 12px rgba(0,0,0,.12) !important;

    font-size: 25px !important;
    font-weight: 800 !important;
}

.competition-table .competition-user-rank {
    margin-bottom: 4px !important;
}

.competition-table .competition-user-name {
    font-size: 14px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    color: #171717 !important;
    white-space: nowrap !important;
}

.competition-table .competition-user-total {
    margin-top: 4px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

/* Sieger etwas stärker hervorheben */
.competition-table .competition-rank-1 .competition-user-avatar {
    box-shadow:
        0 0 0 3px #b99537,
        0 5px 15px rgba(0,0,0,.17) !important;
}

/* Eigene Teilnehmerkarte optisch klarer */
.competition-table .competition-user:hover .competition-user-avatar {
    transform: translateY(-2px) !important;
    transition: transform .18s ease !important;
}

/* Mobile */
@media (max-width: 900px) {
    .competition-table .competition-user {
        min-width: 120px !important;
    }

    .competition-table .competition-user-avatar,
    .competition-table .competition-user-avatar-empty {
        width: 56px !important;
        height: 56px !important;
        min-width: 56px !important;
    }

    .competition-table .competition-user-name {
        font-size: 13px !important;
    }
}

@media (max-width: 600px) {
    .competition-table .competition-user {
        min-width: 105px !important;
        padding: 8px 5px 10px !important;
    }

    .competition-table .competition-user-avatar,
    .competition-table .competition-user-avatar-empty {
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
        border-width: 3px !important;
    }

    .competition-table .competition-user-name {
        font-size: 12px !important;
    }
}


/* =========================================================
   HWD – KONKURRENZ TEILNEHMER KOMPAKTER
   Avatare bleiben sichtbar, Tabelle wird schmaler
   ========================================================= */

.competition-table .competition-user {
    min-width: 118px !important;
    width: 118px !important;
    padding: 8px 5px 10px !important;
}

.competition-table .competition-user-avatar,
.competition-table .competition-user-avatar-empty {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
}

.competition-table .competition-user-avatar-wrap {
    margin-bottom: 5px !important;
}

.competition-table .competition-user-name {
    font-size: 13px !important;
}

.competition-table .competition-user-total {
    margin-top: 3px !important;
    font-size: 12px !important;
}

.competition-table .competition-user-rank {
    margin-bottom: 2px !important;
}

/* Hauptspalten ebenfalls etwas kompakter */
.competition-table .competition-number {
    width: 42px !important;
    min-width: 42px !important;
}

.competition-table .competition-game-name {
    width: 215px !important;
    min-width: 215px !important;
}

.competition-table .competition-kickoff {
    width: 90px !important;
    min-width: 90px !important;
}

.competition-table .competition-result {
    width: 78px !important;
    min-width: 78px !important;
}

@media (max-width: 900px) {
    .competition-table .competition-user {
        min-width: 105px !important;
        width: 105px !important;
    }

    .competition-table .competition-user-avatar,
    .competition-table .competition-user-avatar-empty {
        width: 54px !important;
        height: 54px !important;
        min-width: 54px !important;
    }
}

@media (max-width: 600px) {
    .competition-table .competition-user {
        min-width: 96px !important;
        width: 96px !important;
    }

    .competition-table .competition-user-avatar,
    .competition-table .competition-user-avatar-empty {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
    }

    .competition-table .competition-user-name {
        font-size: 11px !important;
    }
}


/* =========================================================
   HWD – KONKURRENZ NOCH KOMPAKTER
   Schmalere Spalten + größere Avatare
   ========================================================= */

.competition-table .competition-user {
    min-width: 105px !important;
    width: 105px !important;
    padding: 7px 3px 9px !important;
}

.competition-table .competition-user-avatar,
.competition-table .competition-user-avatar-empty {
    width: 66px !important;
    height: 66px !important;
    min-width: 66px !important;
}

.competition-table .competition-user-avatar-wrap {
    margin-bottom: 4px !important;
}

.competition-table .competition-user-name {
    font-size: 12px !important;
    line-height: 1.15 !important;
    max-width: 100px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.competition-table .competition-user-total {
    margin-top: 2px !important;
    font-size: 11px !important;
}

/* Linke Spielspalten schmaler */
.competition-table .competition-number {
    width: 36px !important;
    min-width: 36px !important;
}

.competition-table .competition-game-name {
    width: 190px !important;
    min-width: 190px !important;
}

.competition-table .competition-kickoff {
    width: 78px !important;
    min-width: 78px !important;
}

.competition-table .competition-result {
    width: 68px !important;
    min-width: 68px !important;
}

/* Noch etwas weniger Zellabstand */
.competition-table th,
.competition-table td {
    padding-left: 5px !important;
    padding-right: 5px !important;
}

/* Mobile */
@media (max-width: 900px) {
    .competition-table .competition-user {
        min-width: 96px !important;
        width: 96px !important;
    }

    .competition-table .competition-user-avatar,
    .competition-table .competition-user-avatar-empty {
        width: 58px !important;
        height: 58px !important;
        min-width: 58px !important;
    }
}

@media (max-width: 600px) {
    .competition-table .competition-user {
        min-width: 88px !important;
        width: 88px !important;
    }

    .competition-table .competition-user-avatar,
    .competition-table .competition-user-avatar-empty {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
    }

    .competition-table .competition-user-name {
        font-size: 11px !important;
        max-width: 84px !important;
    }
}


/* =========================================================
   HWD – KONKURRENZ TEILNEHMER FINAL
   Schmale Spalten / große Avatare / Nickname zentriert
   ========================================================= */

.competition-table .competition-user {
    min-width: 90px !important;
    width: 90px !important;
    max-width: 90px !important;
    padding: 6px 2px 9px !important;
    text-align: center !important;
    vertical-align: top !important;
}

/* Großer Avatar */
.competition-table .competition-user-avatar,
.competition-table .competition-user-avatar-empty {
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    margin: 0 auto !important;
}

/* Avatar sauber zentrieren */
.competition-table .competition-user-avatar-wrap {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 auto 5px !important;
}

/* Nickname direkt mittig unter dem Avatar */
.competition-table .competition-user-name {
    display: block !important;
    width: 100% !important;
    max-width: 90px !important;
    margin: 0 auto !important;
    padding: 0 !important;

    text-align: center !important;
    font-size: 14px !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Platzierung */
.competition-table .competition-user-rank {
    display: block !important;
    width: 100% !important;
    margin: 0 0 3px !important;
    text-align: center !important;
}

/* Punkte */
.competition-table .competition-user-total {
    display: block !important;
    width: 100% !important;
    margin: 3px auto 0 !important;
    text-align: center !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
    font-weight: 800 !important;
}

/* Sieger-Badge kompakter */
.competition-table .competition-leader-label {
    display: inline-block !important;
    margin-top: 4px !important;
    padding: 3px 6px !important;
    font-size: 8px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
}

/* Linke Spalten noch schmaler */
.competition-table .competition-number {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
}

.competition-table .competition-game-name {
    width: 175px !important;
    min-width: 175px !important;
    max-width: 175px !important;
}

.competition-table .competition-kickoff {
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
}

.competition-table .competition-result {
    width: 62px !important;
    min-width: 62px !important;
    max-width: 62px !important;
}

/* Weniger horizontaler Innenabstand */
.competition-table th,
.competition-table td {
    padding-left: 3px !important;
    padding-right: 3px !important;
}

/* Mobile */
@media (max-width: 900px) {

    .competition-table .competition-user {
        min-width: 82px !important;
        width: 82px !important;
        max-width: 82px !important;
    }

    .competition-table .competition-user-avatar,
    .competition-table .competition-user-avatar-empty {
        width: 62px !important;
        height: 62px !important;
        min-width: 62px !important;
        max-width: 62px !important;
    }

    .competition-table .competition-user-name {
        font-size: 13px !important;
        max-width: 82px !important;
    }
}

@media (max-width: 600px) {

    .competition-table .competition-user {
        min-width: 76px !important;
        width: 76px !important;
        max-width: 76px !important;
    }

    .competition-table .competition-user-avatar,
    .competition-table .competition-user-avatar-empty {
        width: 56px !important;
        height: 56px !important;
        min-width: 56px !important;
        max-width: 56px !important;
    }

    .competition-table .competition-user-name {
        font-size: 12px !important;
        max-width: 76px !important;
    }
}


/* =========================================================
   HWD – KONKURRENZ AVATAR 82 PX
   ========================================================= */

.competition-table .competition-user-avatar,
.competition-table .competition-user-avatar-empty {
    width: 82px !important;
    height: 82px !important;
    min-width: 82px !important;
    max-width: 82px !important;
}

.competition-table .competition-user-avatar-wrap {
    min-height: 82px !important;
    margin-bottom: 5px !important;
}

.competition-table .competition-user-name {
    font-size: 14px !important;
    font-weight: 800 !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 90px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

@media (max-width: 900px) {
    .competition-table .competition-user-avatar,
    .competition-table .competition-user-avatar-empty {
        width: 70px !important;
        height: 70px !important;
        min-width: 70px !important;
        max-width: 70px !important;
    }

    .competition-table .competition-user-avatar-wrap {
        min-height: 70px !important;
    }
}

@media (max-width: 600px) {
    .competition-table .competition-user-avatar,
    .competition-table .competition-user-avatar-empty {
        width: 62px !important;
        height: 62px !important;
        min-width: 62px !important;
        max-width: 62px !important;
    }

    .competition-table .competition-user-avatar-wrap {
        min-height: 62px !important;
    }
}


/* =========================================================
   HWD – KONKURRENZ PODIUM LAYOUT FIX
   Überschrift + Podium wieder sauber untereinander
   ========================================================= */

.competition-heading {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
}

.competition-heading > div:first-child {
    width: 100% !important;
}

/* Auf Desktop schön mittig */
@media (min-width: 801px) {
}

/* Mobile */
@media (max-width: 800px) {
    .competition-heading {
        display: block !important;
    }
}


/* =========================================================
   HWD – KONKURRENZ
   Spieltagsauswahl links / Siegertreppchen rechts
   ========================================================= */

@media (min-width: 1001px) {

    .competition-heading {
        grid-template-columns: minmax(0, 1fr) 390px !important;
    }

    /* Spieltagsauswahl links */
    .competition-heading .competition-toolbar {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }
}

/* Tablet und Smartphone wieder untereinander */
@media (max-width: 1000px) {

    .competition-heading {
        grid-template-columns: 1fr !important;
    }

    .competition-heading .competition-toolbar {
        grid-column: 1 !important;
        grid-row: auto !important;
    }
}


/* HWD – KONKURRENZ CSS 23
   Desktop: Spieltagsauswahl links / Siegertreppchen rechts */

@media (min-width: 1001px) {

    .competition-heading {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 390px !important;
        column-gap: 24px !important;
        row-gap: 0 !important;
        align-items: start !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Überschrift über beide Spalten */
    .competition-heading > div:first-child {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
        width: 100% !important;
    }

    /* Spieltagsauswahl links */
    .competition-heading .competition-toolbar {
        grid-column: 1 !important;
        grid-row: 2 !important;
        width: 100% !important;
        margin: 0 0 28px !important;
    }

}

/* Mobile weiterhin untereinander */
@media (max-width: 1000px) {

    .competition-heading {
        display: block !important;
        width: 100% !important;
    }.competition-heading > div:first-child,
.competition-heading .competition-toolbar {

        width: 100% !important;
        max-width: 100% !important;
    
}

}

/* =========================================================
   HWD – KONKURRENZ LAYOUT 24
   Linke Info-Kachel + Siegertreppchen rechts
   Legende innerhalb der linken Kachel
   ========================================================= */

@media (min-width: 1001px) {

    .competition-heading {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 350px !important;
        column-gap: 22px !important;
        row-gap: 0 !important;
        align-items: start !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Überschrift über die komplette Breite */
    .competition-heading > div:first-child {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
        width: 100% !important;
        margin-bottom: 16px !important;
    }

    /* Linke Informations-Kachel */
    .competition-heading .competition-toolbar {
        grid-column: 1 !important;
        grid-row: 2 !important;
        align-self: stretch !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        box-sizing: border-box !important;

        display: grid !important;
        grid-template-columns: minmax(190px, .72fr) minmax(0, 1.28fr) !important;
        grid-template-rows: auto auto !important;
        gap: 18px 22px !important;

        padding: 22px !important;
        margin: 0 0 28px !important;
    }

    /* Spieltagsauswahl */
    .competition-heading .competition-toolbar > div:first-child {
        grid-column: 1 !important;
        grid-row: 1 !important;
        min-width: 0 !important;
    }

    /* Punktesystem */
    .competition-heading .competition-toolbar .competition-points-info {
        grid-column: 2 !important;
        grid-row: 1 !important;
        margin: 0 !important;
        min-width: 0 !important;
        align-self: stretch !important;
    }

    /* Legende jetzt innerhalb derselben Kachel */
    .competition-heading .competition-toolbar .competition-legend {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;

        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        align-content: center !important;
        gap: 10px 18px !important;

        margin: 0 !important;
        padding: 14px 16px !important;

        background: #faf8f2 !important;
        border: 1px solid rgba(23,23,23,.07) !important;
        border-radius: 13px !important;
    }

    .competition-heading .competition-toolbar .competition-legend span {
        font-size: .72rem !important;
        white-space: nowrap !important;
    }

}

/* Mobil */
@media (max-width: 1000px) {

    

    .competition-heading .competition-toolbar {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 18px !important;
    }

    .competition-heading .competition-toolbar > div:first-child,
    .competition-heading .competition-toolbar .competition-points-info {
        width: 100% !important;
        margin-bottom: 14px !important;
    }

    .competition-heading .competition-toolbar .competition-legend {
        width: 100% !important;
        box-sizing: border-box !important;
    }

}

/* =========================================================
   HWD – KONKURRENZ LAYOUT 25
   Feinschliff Info-Kachel
   ========================================================= */

@media (min-width: 1001px) {

    /* Linke Kachel kompakter und sauber ausrichten */
    .competition-heading .competition-toolbar {
        display: grid !important;
        grid-template-columns: 300px minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
        gap: 18px 22px !important;
        padding: 22px !important;
        align-content: start !important;
    }

    /* Spieltagsauswahl */
    .competition-heading .competition-toolbar > div:first-child {
        grid-column: 1 !important;
        grid-row: 1 !important;
        align-self: start !important;
    }

    /* Punktesystem kompakt */
    .competition-heading .competition-toolbar .competition-points-info {
        grid-column: 2 !important;
        grid-row: 1 !important;

        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        align-content: center !important;

        min-height: 0 !important;
        height: auto !important;
        padding: 16px 18px !important;
        margin: 0 !important;

        gap: 8px 14px !important;
        box-sizing: border-box !important;
    }

    .competition-heading .competition-toolbar .competition-points-info strong {
        width: 100% !important;
        margin: 0 0 3px !important;
        line-height: 1.2 !important;
    }

    .competition-heading .competition-toolbar .competition-points-info span {
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        white-space: nowrap !important;
        font-size: .72rem !important;
    }

    .competition-heading .competition-toolbar .competition-points-info b {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: .65rem !important;
    }

    /* Legende */
    .competition-heading .competition-toolbar .competition-legend {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;

        min-height: 0 !important;
        height: auto !important;

        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        align-content: center !important;

        padding: 12px 15px !important;
        gap: 8px 16px !important;
        margin: 0 !important;
    }

    .competition-heading .competition-toolbar .competition-legend span {
        font-size: .69rem !important;
    }

    .competition-heading .competition-toolbar .competition-legend b {
        width: 23px !important;
        height: 23px !important;
        min-width: 23px !important;
        font-size: .65rem !important;
    }

}

/* Mobile */
@media (max-width: 1000px) {

    .competition-heading .competition-toolbar .competition-points-info {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 14px !important;
        gap: 8px 12px !important;
    }

    .competition-heading .competition-toolbar .competition-points-info strong {
        width: 100% !important;
    }

}

/* =========================================================
   HWD – KONKURRENZ LAYOUT 26
   Linke Info-Kachel ohne unnötigen Leerraum
   ========================================================= */

@media (min-width: 1001px) {

    /* Linke Kachel nicht künstlich auf Podiumshöhe ziehen */
    .competition-heading .competition-toolbar {
        height: auto !important;
        min-height: 0 !important;
        align-self: start !important;
        align-content: start !important;
    }

    /* Inhalt kompakt halten */
    .competition-heading .competition-toolbar > div:first-child {
        height: auto !important;
        align-self: start !important;
    }

    .competition-heading .competition-toolbar .competition-points-info {
        height: auto !important;
        min-height: 0 !important;
        align-self: start !important;
    }

    .competition-heading .competition-toolbar .competition-legend {
        height: auto !important;
        min-height: 0 !important;
        align-self: start !important;
    }

}

/* =========================================================
   HWD – KONKURRENZ LAYOUT 27
   Spieltagsauswahl als Hauptbereich
   Punktesystem + Legende dezent
   Linke Kachel auf Podiumshöhe
   ========================================================= */

@media (min-width: 1001px) {

    /* Linke Kachel exakt auf Höhe des Siegertreppchens */
    .competition-heading .competition-toolbar {
        height: 318px !important;
        min-height: 318px !important;
        box-sizing: border-box !important;

        display: grid !important;
        grid-template-columns: 285px minmax(0, 1fr) !important;
        grid-template-rows: 1fr auto !important;

        gap: 12px 28px !important;
        padding: 24px !important;

        align-content: stretch !important;
    }

    /* =========================================
       SPIELTAG – Hauptbereich
       ========================================= */

    .competition-heading .competition-toolbar > div:first-child {
        grid-column: 1 !important;
        grid-row: 1 !important;

        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;

        height: 100% !important;
        padding: 8px 0 !important;
    }

    .competition-heading .competition-toolbar > div:first-child .card-title {
        font-size: 1.45rem !important;
        line-height: 1.15 !important;
        margin-bottom: 18px !important;
        font-weight: 950 !important;
    }

    .competition-heading .competition-toolbar > div:first-child label {
        display: block !important;
        font-size: .92rem !important;
        font-weight: 850 !important;
        margin-bottom: 7px !important;
    }

    .competition-heading .competition-toolbar > div:first-child select {
        width: 100% !important;
        height: 54px !important;

        padding: 0 16px !important;

        border-radius: 11px !important;
        border: 1px solid rgba(23,23,23,.15) !important;

        background: #faf8f2 !important;

        font-size: 1rem !important;
        font-weight: 800 !important;
        color: #173b5d !important;

        box-sizing: border-box !important;
    }

    /* =========================================
       PUNKTESYSTEM – klein und dezent
       ========================================= */

    .competition-heading .competition-toolbar .competition-points-info {
        grid-column: 2 !important;
        grid-row: 1 !important;

        display: flex !important;
        flex-wrap: wrap !important;
        align-content: center !important;
        align-items: center !important;

        min-height: 0 !important;
        height: auto !important;

        padding: 12px 14px !important;
        margin: 0 !important;

        gap: 5px 10px !important;

        border-radius: 10px !important;
        opacity: .82 !important;

        box-sizing: border-box !important;
    }

    .competition-heading .competition-toolbar .competition-points-info strong {
        width: 100% !important;

        margin: 0 0 2px !important;

        font-size: .67rem !important;
        line-height: 1.1 !important;

        text-transform: uppercase !important;
        letter-spacing: .04em !important;
    }

    .competition-heading .competition-toolbar .competition-points-info span {
        display: inline-flex !important;
        align-items: center !important;

        gap: 3px !important;

        font-size: .62rem !important;
        white-space: nowrap !important;
    }

    .competition-heading .competition-toolbar .competition-points-info b {
        width: 17px !important;
        height: 17px !important;
        min-width: 17px !important;

        font-size: .57rem !important;
    }

    /* =========================================
       LEGENDE – sehr dezent
       ========================================= */

    .competition-heading .competition-toolbar .competition-legend {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;

        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;

        min-height: 0 !important;
        height: auto !important;

        padding: 8px 12px !important;
        margin: 0 !important;

        gap: 5px 12px !important;

        border-radius: 9px !important;
        background: #faf8f3 !important;

        opacity: .78 !important;
    }

    .competition-heading .competition-toolbar .competition-legend span {
        font-size: .59rem !important;
        font-weight: 700 !important;
        gap: 4px !important;
        white-space: nowrap !important;
    }

    .competition-heading .competition-toolbar .competition-legend b {
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;

        border-width: 2px !important;
        border-radius: 5px !important;

        font-size: .57rem !important;
    }

}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 1000px) {

    .competition-heading .competition-toolbar {
        height: auto !important;
        min-height: 0 !important;

        display: block !important;
    }

    .competition-heading .competition-toolbar > div:first-child {
        display: block !important;
        height: auto !important;
        padding: 0 !important;
    }

    .competition-heading .competition-toolbar > div:first-child .card-title {
        font-size: 1.15rem !important;
    }

    .competition-heading .competition-toolbar > div:first-child select {
        height: 50px !important;
        font-size: .95rem !important;
    }

    .competition-heading .competition-toolbar .competition-points-info {
        margin-top: 14px !important;
        opacity: .85 !important;
    }

    .competition-heading .competition-toolbar .competition-legend {
        margin-top: 10px !important;
        opacity: .8 !important;
    }

}

/* =========================================================
   HWD – KONKURRENZ LAYOUT 28
   Obere Kacheln exakt gleiche Gesamtbreite und Höhe
   wie die Konkurrenz-Kachel darunter
   ========================================================= */

@media (min-width: 1001px) {

    /*
     * Die obere Zeile bekommt dieselbe Breite
     * wie die eigentliche Konkurrenzkarte.
     */
    .competition-heading {
        width: 100% !important;
        max-width: 100% !important;

        grid-template-columns: minmax(0, 1fr) 330px !important;
        column-gap: 22px !important;
    }/*
     * Beide oberen Kacheln exakt gleiche Höhe.
     */
    .competition-heading .competition-toolbar {

        height: 318px !important;
        min-height: 318px !important;
        max-height: 318px !important;
        box-sizing: border-box !important;
    
}

    /*
     * Linke Kachel
     */
    .competition-heading .competition-toolbar {
        width: 100% !important;
        align-self: start !important;
    }

    /*
     * Die obere Zeile und die Spieltagskarte
     * werden auf dieselbe nutzbare Breite gebracht.
     *
     * Die Konkurrenzkarte darunter bestimmt die
     * sichtbare Inhaltsbreite.
     */
    .competition-heading + .competition-card {
        width: 100% !important;
        max-width: 100% !important;
    }

}

/* Mobile */
@media (max-width: 1000px) {

    .competition-heading {
        width: 100% !important;
        max-width: 100% !important;
    }.competition-heading .competition-toolbar {

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        max-width: 100% !important;
    
}

}

/* =========================================================
   HWD – KONKURRENZ LAYOUT 29
   Gemeinsame Breite für obere Zeile + Tabelle
   ========================================================= */

@media (min-width: 1001px) {

    /*
     * Die Konkurrenzseite selbst definiert die gemeinsame Breite.
     */
    .page:has(.competition-heading) {
        width: 100% !important;
        max-width: none !important;
    }

    /*
     * Obere Zeile über die komplette Seitenbreite.
     */
    .competition-heading {
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box !important;

        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 330px !important;
        column-gap: 22px !important;
    }

    /*
     * Linke Info-Kachel.
     */
    .competition-heading .competition-toolbar {
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box !important;

        height: 318px !important;
        min-height: 318px !important;
        max-height: 318px !important;

        align-self: start !important;
    }

    /*
     * DIE WICHTIGE REGEL:
     * Die Konkurrenz-Tabelle nimmt die komplette
     * verfügbare Breite ein.
     */
    .competition-heading ~ .competition-card {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        box-sizing: border-box !important;

        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /*
     * Falls eine ältere Regel die Karte begrenzt,
     * wird auch die direkte Seitenstruktur zurückgesetzt.
     */
    .page:has(.competition-heading) > .competition-card {
        width: 100% !important;
        max-width: none !important;
    }

}

/* Mobile */
@media (max-width: 1000px) {

    .page:has(.competition-heading),
    .competition-heading,
    .competition-heading ~ .competition-card,
    .page:has(.competition-heading) > .competition-card {
        width: 100% !important;
        max-width: 100% !important;
    }.competition-heading .competition-toolbar {

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        max-width: 100% !important;
    
}

}

/* =========================================================
   HWD – KONKURRENZ LAYOUT 30
   Gemeinsamer Inhaltscontainer für gesamte Konkurrenzseite
   ========================================================= */

@media (min-width: 1001px) {

    /*
     * Normaler HWD-Inhaltscontainer:
     * maximal 1440px und zentriert.
     */
    .page:has(.competition-heading) {
        width: min(1440px, calc(100% - 48px)) !important;
        max-width: 1440px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    /*
     * Obere Zeile und Tabelle exakt dieselbe Breite.
     */
    .competition-heading,
    .competition-heading ~ .competition-card,
    .page:has(.competition-heading) > .competition-card {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    /*
     * Obere Kacheln.
     */
    .competition-heading {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 330px !important;
        column-gap: 22px !important;
        align-items: start !important;
    }/*
     * Linke Kachel und Siegertreppchen exakt gleich hoch.
     */
    .competition-heading .competition-toolbar {

        height: 318px !important;
        min-height: 318px !important;
        max-height: 318px !important;
        box-sizing: border-box !important;
        align-self: start !important;
    
}

    /*
     * Konkurrenz-Tabelle direkt darunter über
     * exakt dieselbe Gesamtbreite.
     */
    .competition-heading ~ .competition-card {
        margin-top: 0 !important;
    }

}

/* Mobile */
@media (max-width: 1000px) {

    .page:has(.competition-heading) {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .competition-heading,
    .competition-heading ~ .competition-card,
    .page:has(.competition-heading) > .competition-card {
        width: 100% !important;
        max-width: 100% !important;
    }.competition-heading .competition-toolbar {

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        max-width: 100% !important;
    
}

}

/* =========================================================
   HWD – KONKURRENZ SINGLE TOP CARD
   Alles oben in EINER gemeinsamen Kachel
   ========================================================= */

@media (min-width: 1001px) {

    /* Überschrift bleibt außerhalb der großen Kachel */
    .competition-heading {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Gemeinsame obere Kachel */
    .competition-heading .competition-top-card {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;

        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 390px !important;
        grid-template-rows: 1fr !important;

        column-gap: 28px !important;

        height: 318px !important;
        min-height: 318px !important;
        max-height: 318px !important;

        padding: 24px !important;
        margin: 20px 0 28px !important;

        background: #fff !important;
        border: 1px solid rgba(23,23,23,.08) !important;
        border-radius: 22px !important;
        box-shadow: 0 12px 35px rgba(23,23,23,.08) !important;
    }/* Alte Kacheloptik der beiden Einzelbereiche neutralisieren */
    .competition-heading .competition-top-card .competition-toolbar {

        box-sizing: border-box !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;

        border-radius: 0 !important;
        box-shadow: none !important;
    
}

    /* Spieltagsbereich links */
    .competition-heading .competition-top-card .competition-toolbar {
        grid-column: 1 !important;
        grid-row: 1 !important;

        display: grid !important;
        grid-template-columns: 285px minmax(0, 1fr) !important;
        grid-template-rows: 1fr auto !important;

        gap: 14px 24px !important;

        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
    }

    /* Große Spieltagsauswahl */
    .competition-heading .competition-top-card .competition-toolbar > div:first-child {
        grid-column: 1 !important;
        grid-row: 1 !important;

        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;

        padding: 0 !important;
        margin: 0 !important;
    }

    .competition-heading .competition-top-card .competition-toolbar > div:first-child .card-title {
        font-size: 1.45rem !important;
        margin-bottom: 16px !important;
        border: 0 !important;
        padding: 0 !important;
    }

    .competition-heading .competition-top-card .competition-toolbar > div:first-child label {
        margin: 0 0 7px !important;
    }

    .competition-heading .competition-top-card .competition-toolbar > div:first-child select {
        height: 56px !important;
        width: 100% !important;
        font-size: 1rem !important;
        font-weight: 800 !important;
        border-radius: 12px !important;
    }

    /* Punktesystem klein */
    .competition-heading .competition-top-card .competition-points-info {
        grid-column: 2 !important;
        grid-row: 1 !important;

        align-self: center !important;

        padding: 12px !important;
        margin: 0 !important;

        min-height: 0 !important;
        height: auto !important;

        opacity: .72 !important;
    }

    .competition-heading .competition-top-card .competition-points-info strong {
        font-size: .68rem !important;
    }

    .competition-heading .competition-top-card .competition-points-info span {
        font-size: .62rem !important;
    }

    /* Legende klein unten */
    .competition-heading .competition-top-card .competition-legend {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;

        padding: 7px 10px !important;
        margin: 0 !important;

        gap: 5px 12px !important;

        opacity: .68 !important;
    }

    .competition-heading .competition-top-card .competition-legend span {
        font-size: .58rem !important;
    }

    /* Tabelle darunter exakt volle Breite */
    .competition-heading ~ .competition-card,
    .page:has(.competition-heading) > .competition-card {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* Mobil */
@media (max-width: 1000px) {

    .competition-heading {
        display: block !important;
    }

    .competition-heading .competition-top-card {
        display: block !important;

        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        padding: 18px !important;
        margin: 18px 0 24px !important;

        background: #fff !important;
        border-radius: 18px !important;
    }.competition-heading .competition-top-card .competition-toolbar {

        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    
}

    .competition-heading .competition-top-card .competition-toolbar {
        display: block !important;
        padding: 0 !important;
    }

    .competition-heading .competition-top-card .competition-toolbar > div:first-child {
        margin-bottom: 16px !important;
    }

    .competition-heading .competition-top-card .competition-points-info {
        margin-top: 14px !important;
    }

    .competition-heading .competition-top-card .competition-legend {
        margin-top: 10px !important;
    }
}

/* =========================================================
   HWD – KONKURRENZ LAYOUT 34
   Infoelemente nur im linken Bereich
   Kompaktere Gesamtkachel
   ========================================================= */

@media (min-width: 1001px) {

    /* Gemeinsame obere Kachel kompakter */
    .competition-heading .competition-top-card {
        height: 320px !important;
        min-height: 320px !important;
        max-height: 320px !important;

        padding: 22px 24px !important;

        grid-template-columns: minmax(0, 1fr) 390px !important;
        column-gap: 28px !important;
    }

    /* Linker Bereich */
    .competition-heading .competition-top-card .competition-toolbar {
        grid-column: 1 !important;
        grid-row: 1 !important;

        display: grid !important;

        grid-template-columns: 300px minmax(0, 1fr) !important;
        grid-template-rows: 1fr auto auto !important;

        column-gap: 24px !important;
        row-gap: 8px !important;

        width: 100% !important;
        height: 100% !important;

        padding: 0 !important;
        margin: 0 !important;
    }

    /* Spieltagsauswahl */
    .competition-heading .competition-top-card
    .competition-toolbar > div:first-child {
        grid-column: 1 / 3 !important;
        grid-row: 1 !important;

        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;

        padding: 0 !important;
        margin: 0 !important;
    }

    .competition-heading .competition-top-card
    .competition-toolbar > div:first-child .card-title {
        font-size: 1.45rem !important;
        margin: 0 0 12px !important;
        padding: 0 !important;
        border: 0 !important;
    }

    .competition-heading .competition-top-card
    .competition-toolbar > div:first-child label {
        margin: 0 0 5px !important;
        font-size: .72rem !important;
    }

    .competition-heading .competition-top-card
    .competition-toolbar > div:first-child select {
        width: 300px !important;
        height: 52px !important;
        font-size: 1rem !important;
        border-radius: 11px !important;
    }

    /* -----------------------------------------------------
       PUNKTESYSTEM NUR LINKS
       ----------------------------------------------------- */

    .competition-heading .competition-top-card
    .competition-points-info {
        grid-column: 1 / 3 !important;
        grid-row: 2 !important;

        width: 100% !important;
        max-width: none !important;

        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;

        padding: 8px 11px !important;
        margin: 0 !important;

        gap: 5px 10px !important;

        box-sizing: border-box !important;

        border-radius: 8px !important;
    }

    .competition-heading .competition-top-card
    .competition-points-info strong {
        width: auto !important;

        margin: 0 6px 0 0 !important;

        font-size: .58rem !important;
        letter-spacing: .05em !important;
    }

    .competition-heading .competition-top-card
    .competition-points-info span {
        font-size: .57rem !important;
        white-space: nowrap !important;
    }

    .competition-heading .competition-top-card
    .competition-points-info b {
        width: 16px !important;
        height: 16px !important;
        min-width: 16px !important;
        font-size: .52rem !important;
    }

    /* -----------------------------------------------------
       LEGENDE NUR LINKS
       ----------------------------------------------------- */

    .competition-heading .competition-top-card
    .competition-legend {
        grid-column: 1 / 3 !important;
        grid-row: 3 !important;

        width: 100% !important;
        max-width: none !important;

        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;

        padding: 6px 10px !important;
        margin: 0 !important;

        gap: 4px 10px !important;

        box-sizing: border-box !important;

        border-radius: 8px !important;
    }

    .competition-heading .competition-top-card
    .competition-legend::before {
        font-size: .52rem !important;
        margin-right: 2px !important;
    }

    .competition-heading .competition-top-card
    .competition-legend span {
        font-size: .54rem !important;
        white-space: nowrap !important;
    }

    .competition-heading .competition-top-card
    .competition-legend b {
        width: 16px !important;
        height: 16px !important;
        min-width: 16px !important;
        font-size: .52rem !important;
    }
}

/* Mobile */
@media (max-width: 1000px) {

    .competition-heading .competition-top-card {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    .competition-heading .competition-top-card
    .competition-toolbar {
        display: block !important;
        height: auto !important;
    }

    .competition-heading .competition-top-card
    .competition-toolbar > div:first-child {
        display: flex !important;
    }

    .competition-heading .competition-top-card
    .competition-points-info,
    .competition-heading .competition-top-card
    .competition-legend {
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 10px !important;
    }

}

/* HWD – KONKURRENZ
   Legende und Punktesystem mittig ausrichten */

.competition-heading .competition-top-card .competition-legend {
    justify-content: center !important;
    text-align: center !important;
}

.competition-heading .competition-top-card .competition-legend::before {
    margin-right: 2px !important;
}

.competition-heading .competition-top-card .competition-points-info {
    justify-content: center !important;
    text-align: center !important;
}

.competition-heading .competition-top-card .competition-points-info strong {
    text-align: center !important;
    width: 100% !important;
}

/* =========================================================
   HWD – KONKURRENZ LAYOUT 37
   Spieltagsauswahl: Titel + Dropdown nebeneinander
   ========================================================= */

@media (min-width: 1001px) {

    /* Hauptbereich der Spieltagsauswahl */
    .competition-heading .competition-top-card
    .competition-toolbar > div:first-child {
        grid-column: 1 / 3 !important;
        grid-row: 1 !important;

        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;

        gap: 28px !important;

        padding: 0 4px !important;
        margin: 0 !important;
    }

    /* Überschrift */
    .competition-heading .competition-top-card
    .competition-toolbar > div:first-child .card-title {
        flex: 0 0 auto !important;

        margin: 0 !important;
        padding: 0 !important;

        font-size: 1.55rem !important;
        line-height: 1.1 !important;

        white-space: nowrap !important;
    }

    /* Formular neben der Überschrift */
    .competition-heading .competition-top-card
    .competition-toolbar > div:first-child .inline-form {
        display: flex !important;
        align-items: center !important;

        gap: 10px !important;

        margin: 0 !important;
    }

    /* "Spieltag" */
    .competition-heading .competition-top-card
    .competition-toolbar > div:first-child .inline-form label {
        margin: 0 !important;

        font-size: .72rem !important;
        font-weight: 900 !important;

        color: #80621d !important;
        text-transform: uppercase !important;
        letter-spacing: .07em !important;

        white-space: nowrap !important;
    }

    /* Großes Dropdown */
    .competition-heading .competition-top-card
    .competition-toolbar > div:first-child select {
        width: 300px !important;
        min-width: 300px !important;
        height: 58px !important;

        padding: 0 18px !important;

        border: 2px solid #d7b65c !important;
        border-radius: 13px !important;

        background: #faf8f2 !important;

        color: #173f64 !important;

        font-size: 1.05rem !important;
        font-weight: 900 !important;

        box-shadow: 0 5px 15px rgba(23,23,23,.06) !important;

        box-sizing: border-box !important;
    }

}

@media (max-width: 1000px) {

    .competition-heading .competition-top-card
    .competition-toolbar > div:first-child {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .competition-heading .competition-top-card
    .competition-toolbar > div:first-child .card-title {
        margin: 0 !important;
    }

    .competition-heading .competition-top-card
    .competition-toolbar > div:first-child .inline-form {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .competition-heading .competition-top-card
    .competition-toolbar > div:first-child select {
        height: 52px !important;
        flex: 1 !important;
        min-width: 0 !important;
    }

}

/* HWD – KONKURRENZ LAYOUT 38
   Spieltagsauswahl ohne zusätzliches Label,
   gesamte Auswahl mittig */

@media (min-width: 1001px) {

    .competition-heading .competition-top-card
    .competition-toolbar > div:first-child {
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
    }

    .competition-heading .competition-top-card
    .competition-toolbar > div:first-child .card-title {
        margin: 0 !important;
        white-space: nowrap !important;
    }

    .competition-heading .competition-top-card
    .competition-toolbar > div:first-child .inline-form {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
    }

    /* Label "Spieltag" vor dem Dropdown ausblenden */
    .competition-heading .competition-top-card
    .competition-toolbar > div:first-child .inline-form label {
        display: none !important;
    }

    /* Großes Dropdown */
    .competition-heading .competition-top-card
    .competition-toolbar > div:first-child select {
        width: 320px !important;
        min-width: 320px !important;
        height: 60px !important;
        font-size: 1.08rem !important;
        text-align: center !important;
    }

}

@media (max-width: 1000px) {

    .competition-heading .competition-top-card
    .competition-toolbar > div:first-child {
        align-items: center !important;
        text-align: center !important;
    }

    .competition-heading .competition-top-card
    .competition-toolbar > div:first-child .inline-form {
        justify-content: center !important;
        width: 100% !important;
    }

    .competition-heading .competition-top-card
    .competition-toolbar > div:first-child .inline-form label {
        display: none !important;
    }

    .competition-heading .competition-top-card
    .competition-toolbar > div:first-child select {
        width: 100% !important;
        max-width: 320px !important;
        text-align: center !important;
    }

}

/* HWD – SPIELTAGSSTATUS GRÖSSER UND DEUTLICHER */

@media (min-width: 1001px) {

    .competition-heading .competition-status,
    .competition-heading .play-status,
    .competition-heading .status-badge,
    .competition-heading .card .status {
        font-size: 1.35rem !important;
        font-weight: 800 !important;
        line-height: 1.3 !important;
        padding: 8px 16px !important;
    }

}

@media (max-width: 1000px) {

    .competition-heading .competition-status,
    .competition-heading .play-status,
    .competition-heading .status-badge,
    .competition-heading .card .status {
        font-size: 1.15rem !important;
        font-weight: 800 !important;
        line-height: 1.3 !important;
        padding: 7px 12px !important;
    }

}

/* HWD – SPIELTAGSSTATUS DEUTLICH GRÖSSER */

@media (min-width: 1001px) {

    .competition-card-head .competition-status {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        min-width: 225px !important;
        min-height: 58px !important;

        padding: 10px 24px !important;

        font-size: 1.45rem !important;
        font-weight: 900 !important;
        line-height: 1.1 !important;

        border-radius: 12px !important;
        letter-spacing: .02em !important;
    }

}

@media (max-width: 1000px) {

    .competition-card-head .competition-status {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        min-height: 48px !important;

        padding: 8px 18px !important;

        font-size: 1.15rem !important;
        font-weight: 900 !important;
        line-height: 1.1 !important;

        border-radius: 10px !important;
    }

}

/* =========================================================
   HWD – SIEGERTREPPCHEN
   SAUBERER FINALER CSS-BLOCK
   ========================================================= */

.hwd-cartoon-podium {
    position: relative !important;
    overflow: hidden !important;
    padding: 0 !important;
    background: #fff !important;
    border-radius: 22px !important;
    border: 1px solid rgba(185,149,55,.20) !important;
    box-shadow: 0 12px 30px rgba(23,23,23,.08) !important;
}

.hwd-cartoon-podium-art {
    position: relative !important;
    width: 100% !important;
    height: 320px !important;
    overflow: hidden !important;
    background: #fff !important;
}

.hwd-cartoon-podium-image {
    position: absolute !important;
    left: 50% !important;
    top: 36% !important;
    width: auto !important;
    height: 82% !important;
    max-width: none !important;
    max-height: none !important;
    transform: translate(-50%, -50%) !important;
    object-fit: contain !important;
    display: block !important;
}




/* =========================================================
   AVATARE
   Nur auf dem Siegertreppchen ohne Rahmen
   ========================================================= */

.competition-heading .hwd-cartoon-podium .hwd-cartoon-avatar {
    position: absolute !important;
    z-index: 40 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 56px !important;
    height: 56px !important;

    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden !important;

    transform: translate(-50%, -50%) !important;
}

.competition-heading .hwd-cartoon-podium .hwd-cartoon-avatar img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}

.competition-heading .hwd-cartoon-podium .hwd-cartoon-avatar span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #8a6518 !important;
    font-size: 1.3rem !important;
    font-weight: 950 !important;
}


/* Avatare – unabhängig von den Namen */

.competition-heading .hwd-cartoon-podium .hwd-cartoon-avatar.podium-place-2 {
    left: 26% !important;
    top: 32% !important;
}

.competition-heading .hwd-cartoon-podium .hwd-cartoon-avatar.podium-place-1 {
    left: 53% !important;
    top: 19% !important;
    width: 64px !important;
    height: 64px !important;
}

.competition-heading .hwd-cartoon-podium .hwd-cartoon-avatar.podium-place-3 {
    left: 79% !important;
    top: 32% !important;
}


/* =========================================================
   NAMEN
   Keine Punkte, kein Hintergrund
   ========================================================= */

.competition-heading .hwd-cartoon-podium .hwd-cartoon-meta {
    position: absolute !important;
    z-index: 60 !important;
    display: block !important;

    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;

    padding: 0 !important;
    margin: 0 !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    white-space: nowrap !important;
    transform: translateX(-50%) !important;
}

.competition-heading .hwd-cartoon-podium .hwd-cartoon-meta span {
    display: none !important;
}

.competition-heading .hwd-cartoon-podium .hwd-cartoon-meta strong {
    display: block !important;
    color: #171717 !important;
    font-size: .94rem !important;
    line-height: 1 !important;
    font-weight: 950 !important;

    text-shadow:
        0 0 2px #fff,
        0 0 4px #fff,
        0 1px 3px rgba(255,255,255,.95) !important;
}


/* Namen – unabhängig von den Avataren */

.competition-heading .hwd-cartoon-podium .hwd-cartoon-meta.podium-place-2 {
    left: 25% !important;
    top: 80% !important;
}

.competition-heading .hwd-cartoon-podium .hwd-cartoon-meta.podium-place-1 {
    left: 50% !important;
    top: 80% !important;
}

.competition-heading .hwd-cartoon-podium .hwd-cartoon-meta.podium-place-3 {
    left: 75% !important;
    top: 80% !important;
}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 1001px) {

    .competition-heading .hwd-cartoon-podium {
        height: 320px !important;
        min-height: 320px !important;
        max-height: 320px !important;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 1000px) {

    .competition-heading .hwd-cartoon-podium {
        width: 100% !important;
        height: auto !important;
    }

    .competition-heading .hwd-cartoon-podium-art {
        height: auto !important;
        aspect-ratio: 1.22 / 1 !important;
    }

    .competition-heading .hwd-cartoon-podium-image {
        top: 36% !important;
        height: 82% !important;
    }

    .competition-heading .hwd-cartoon-podium .hwd-cartoon-avatar {
        width: 44px !important;
        height: 44px !important;
    }

    .competition-heading .hwd-cartoon-podium .hwd-cartoon-avatar.podium-place-1 {
        width: 52px !important;
        height: 52px !important;
    }



    .competition-heading .hwd-cartoon-podium .hwd-cartoon-avatar.podium-place-1 {
        left: 53% !important;
        top: 19% !important;
    }









    .competition-heading .hwd-cartoon-podium .hwd-cartoon-meta strong {
        font-size: .72rem !important;
    }

}


/* =========================================================
   HWD – MOBILES BURGER-MENÜ
   Blauen Hintergrund entfernen
   ========================================================= */

@media (max-width: 1000px) {

    /* Button selbst */
    .menu-toggle,
    .mobile-menu-toggle,
    .navbar-toggler,
    .nav-toggle,
    button.menu-toggle,
    button.mobile-menu-toggle {
        background: transparent !important;
        background-color: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        color: #fff !important;
    }

    /* Hover / Focus / Active ebenfalls ohne Blau */
    .menu-toggle:hover,
    .menu-toggle:focus,
    .menu-toggle:active,
    .mobile-menu-toggle:hover,
    .mobile-menu-toggle:focus,
    .mobile-menu-toggle:active,
    .navbar-toggler:hover,
    .navbar-toggler:focus,
    .navbar-toggler:active {
        background: transparent !important;
        background-color: transparent !important;
        border-color: transparent !important;
        box-shadow: none !important;
        color: #fff !important;
    }

    /* Burger-Linien */
    .menu-toggle span,
    .mobile-menu-toggle span,
    .navbar-toggler span,
    .menu-toggle::before,
    .menu-toggle::after,
    .mobile-menu-toggle::before,
    .mobile-menu-toggle::after {
        background-color: #fff !important;
        border-color: #fff !important;
    }

}

/* =========================================================
   HWD – MOBILES DROPDOWN-MENÜ
   Nur den blauen Hintergrund des aufgeklappten Menüs entfernen.
   Burger-Button und Burger-Striche bleiben unverändert.
   ========================================================= */

@media (max-width: 1000px) {

    /* Typische geöffnete Navigationscontainer */
    .mobile-menu,
    .mobile-nav,
    .mobile-navigation,
    .nav-menu-mobile,
    .navbar-collapse,
    .menu-mobile,
    .main-navigation .menu {
        background: #171717 !important;
        background-color: #171717 !important;
    }

    /* Geöffnete Navigation */
    .navbar-collapse.show,
    .navbar-collapse.open,
    .mobile-menu.open,
    .mobile-menu.active,
    .mobile-nav.open,
    .mobile-nav.active {
        background: #171717 !important;
        background-color: #171717 !important;
    }

}

/* =========================================================
   HWD – MOBILES BURGER-MENÜ FINAL
   ========================================================= */

@media (max-width: 900px) {

    /* Burger auf weißem Hintergrund */
    .hero.hwd-premium-header + .nav .menu-toggle {
        background: transparent !important;
        color: #171717 !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    /* Aufgeklapptes Menü: weiß statt blau */
    .hero.hwd-premium-header + .nav .nav-links,
    .hero.hwd-premium-header + .nav .menu-open .nav-links {
        background: #fff !important;
        background-color: #fff !important;
        box-shadow: 0 10px 25px rgba(23,23,23,.12) !important;
    }

    /* Menüeinträge dunkel */
    .hero.hwd-premium-header + .nav .nav-links a {
        color: #171717 !important;
        background: transparent !important;
    }

    /* Hover/Touch */
    .hero.hwd-premium-header + .nav .nav-links a:hover,
    .hero.hwd-premium-header + .nav .nav-links a:focus,
    .hero.hwd-premium-header + .nav .nav-links a:active {
        color: #171717 !important;
        background: #f5f1e7 !important;
    }

}

/* =========================================================
   ADMIN BENUTZERVERWALTUNG
   ========================================================= */

.admin-users-page {
    max-width: 1200px;
}

.admin-users-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 24px 0 18px;
}

.admin-users-search {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.admin-users-search input {
    flex: 1;
    min-width: 0;
}

.admin-users-count {
    color: #777;
    font-size: .82rem;
    font-weight: 800;
    white-space: nowrap;
}

.admin-users-message {
    margin: 18px 0;
    padding: 14px 18px;
    border-radius: 14px;
    font-weight: 800;
}

.admin-users-message-success {
    background: #eef7ee;
    border: 1px solid #c8dfc8;
    color: #376637;
}

.admin-users-message-error {
    background: #fff0f0;
    border: 1px solid #e4c0c0;
    color: #8a3838;
}

.admin-users-list-card,
.admin-user-editor {
    width: 100%;
    margin-top: 18px;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(185,149,55,.20);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(23,23,23,.07);
}

.admin-users-list-card .card-header,
.admin-user-editor .card-header {
    margin: 0;
    padding: 22px 24px;
    border-bottom: 1px solid #ebe6dc;
}

.admin-users-list-card .card-header h2,
.admin-user-editor .card-header h2 {
    margin: 0;
    color: #171717;
    font-size: 1.25rem;
    font-weight: 950;
}

.admin-users-table-wrap {
    overflow-x: auto;
}

.admin-users-table {
    width: 100%;
    border-collapse: collapse;
}

.admin-users-table th {
    padding: 13px 18px;
    background: #f5f1e7;
    color: #6e603f;
    font-size: .74rem;
    font-weight: 900;
    letter-spacing: .07em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.admin-users-table td {
    padding: 12px 18px;
    border-top: 1px solid #ebe6dc;
    color: #555;
    vertical-align: middle;
}

.admin-users-table tbody tr:hover {
    background: #fcfbf8;
}

.admin-user-list-person {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 210px;
}

/* Einheitliche Avatargröße ausschließlich in der Benutzerliste */
.admin-users-table .admin-user-avatar {
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    height: 40px;
    min-height: 40px;
    max-height: 40px;
    aspect-ratio: 1 / 1;
    display: block;
    flex: 0 0 40px;
    overflow: hidden;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #f5f1e7;
    box-shadow: 0 0 0 1px rgba(185,149,55,.65);
    object-fit: cover;
}

.admin-users-table img.admin-user-avatar {
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    height: 40px;
    min-height: 40px;
    max-height: 40px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.admin-users-table .admin-user-avatar-placeholder-small {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7b601e;
    font-size: .9rem;
    font-weight: 950;
}

.admin-user-list-person > div:last-child {
    min-width: 0;
}

.admin-user-list-person strong {
    display: block;
    color: #171717;
    font-size: .92rem;
    font-weight: 900;
}

.admin-user-list-person span {
    display: block;
    margin-top: 3px;
    color: #888;
    font-size: .78rem;
}

.admin-user-role {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: #f5f1e7;
    color: #777;
    font-size: .72rem;
    font-weight: 850;
    white-space: nowrap;
}

.admin-user-role-admin {
    background: #f4ead0;
    color: #765918;
}

.admin-users-empty {
    padding: 35px !important;
    color: #888 !important;
    text-align: center;
}

/* Benutzer bearbeiten */

.admin-user-form {
    padding: 26px;
}

.admin-user-form-grid {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 30px;
}

.admin-user-avatar-editor {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 15px;
}

.admin-user-avatar-large {
    width: 120px;
    height: 120px;
    display: block;
    object-fit: cover;
    border: 5px solid #fff;
    border-radius: 50%;
    background: #f5f1e7;
    box-shadow: 0 0 0 2px #b99537, 0 10px 25px rgba(23,23,23,.12);
}

.admin-user-avatar-placeholder {
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 5px solid #fff;
    border-radius: 50%;
    background: #f5f1e7;
    box-shadow: 0 0 0 2px #b99537, 0 10px 25px rgba(23,23,23,.12);
    color: #7b601e;
    font-size: 3rem;
    font-weight: 950;
}

.admin-user-upload {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 13px;
    border: 1px solid rgba(185,149,55,.25);
    border-radius: 10px;
    background: #f5f1e7;
    color: #6f571b;
    font-size: .78rem;
    font-weight: 850;
    cursor: pointer;
}

.admin-user-upload input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.admin-user-fields {
    display: grid;
    gap: 15px;
}

.admin-user-field-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
}

.admin-user-fields label,
.admin-password-form label {
    display: grid;
    gap: 7px;
    color: #555;
    font-size: .8rem;
    font-weight: 850;
}

.admin-user-fields input,
.admin-user-fields select,
.admin-password-form input {
    width: 100%;
}

.admin-user-admin-checkbox {
    display: flex !important;
    align-items: center;
    gap: 12px !important;
    padding: 14px 16px;
    border: 1px solid #ebe6dc;
    border-radius: 13px;
    background: #f8f6f1;
    cursor: pointer;
}

.admin-user-admin-checkbox input {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.admin-user-admin-checkbox span {
    display: grid;
    gap: 2px;
}

.admin-user-admin-checkbox strong {
    color: #171717;
    font-size: .85rem;
}

.admin-user-admin-checkbox small {
    color: #888;
    font-size: .74rem;
    font-weight: 600;
}

.admin-user-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #ebe6dc;
}

.admin-user-password {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: 25px;
    margin: 0;
    padding: 24px 26px;
    border-top: 1px solid #ebe6dc;
    background: #f8f6f1;
}

.admin-user-password h3 {
    margin: 0 0 7px;
    color: #171717;
    font-size: 1.05rem;
    font-weight: 950;
}

.admin-password-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: end;
}

.admin-password-form button {
    grid-column: 1 / -1;
    justify-self: start;
}

.button-small {
    padding: 8px 11px;
    font-size: .75rem;
}

@media (max-width: 900px) {
    .admin-user-form-grid {
        grid-template-columns: 1fr;
    }

    .admin-user-avatar-editor {
        align-items: flex-start;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .admin-user-password {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .admin-users-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-users-search {
        flex-wrap: wrap;
    }

    .admin-users-search input {
        flex-basis: 100%;
    }

    .admin-user-field-row,
    .admin-password-form {
        grid-template-columns: 1fr;
    }

    .admin-user-form {
        padding: 20px;
    }

    .admin-user-password {
        padding: 20px;
    }

    .admin-user-form-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .admin-user-form-actions .button {
        width: 100%;
    }
}


/* Mobile Header: Admin und Abmelden getrennt darstellen */
.nav-user {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-user a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 7px;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .nav-inner {
        flex-wrap: wrap;
        gap: 4px;
        padding-top: 4px;
        padding-bottom: 4px;
    }

    .nav-user {
        margin-left: auto;
        display: flex;
        flex-wrap: nowrap;
        gap: 6px;
        min-width: 0;
    }

    .nav-user a {
        padding: 9px 10px;
        margin: 0;
        font-size: 13px;
        line-height: 1.2;
    }
}

/* HWD: Benutzerlinks im Header eindeutig voneinander trennen */
.nav.nav .nav-inner .nav-user {
    display: flex !important;
    align-items: center;
    gap: 8px !important;
    margin-left: auto;
}

.nav.nav .nav-user a {
    display: inline-flex !important;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    padding: 10px 12px !important;
    margin: 0 !important;
    border: 1px solid rgba(255,255,255,.5) !important;
    border-radius: 7px !important;
    background: #104d7d !important;
    color: #fff !important;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .nav.nav .nav-inner .nav-user {
        gap: 8px !important;
    }

    .nav.nav .nav-user a {
        padding: 9px 10px !important;
        font-size: 13px;
    }
}

/* HWD: Header-Buttons in Schwarz und Gold */
.nav.nav .nav-user a {
    background: #171717 !important;
    color: #ffffff !important;
    border: 1px solid #b99537 !important;
    border-radius: 7px !important;
    box-shadow: none !important;
}

.nav.nav .nav-user a:hover,
.nav.nav .nav-user a:focus-visible {
    background: #f5f1e7 !important;
    color: #92702b !important;
    border-color: #b99537 !important;
}

/* HWD DESIGN: ÖFFENTLICHE EXTRA-TIPPS */
.extra-tips-page {
    --extra-gold: #b99537;
    --extra-black: #171717;
    --extra-cream: #f5f1e7;
    --extra-line: rgba(185, 149, 55, .35);
}

.extra-tips-page > .card:first-child {
    border: 1px solid var(--extra-line);
    border-top: 3px solid var(--extra-gold);
    border-radius: 12px;
    padding: 20px 22px;
    background: var(--extra-cream);
    color: var(--extra-black);
    box-shadow: 0 5px 18px rgba(0, 0, 0, .07);
}

.extra-tips-page > .card:first-child .card-title {
    color: var(--extra-black);
    font-weight: 800;
    letter-spacing: .2px;
}

.extra-tips-page > .card:first-child .muted {
    color: #625d50;
}

.extra-tips-page > .card {
    border-radius: 12px;
    border: 1px solid var(--extra-line);
}

.extra-tips-page .extra-tips-table {
    width: 100%;
    border-collapse: separate !important;
    border-spacing: 0;
    color: var(--extra-black);
    background: var(--extra-cream);
    font-size: 14px;
}

.extra-tips-page .extra-tips-table th,
.extra-tips-page .extra-tips-table td {
    border-bottom: 1px solid var(--extra-line) !important;
    padding: 12px 14px !important;
}

.extra-tips-page .extra-tips-table thead th {
    background: var(--extra-black) !important;
    color: var(--extra-cream) !important;
    border-bottom: 2px solid var(--extra-gold) !important;
    vertical-align: middle;
}

.extra-tips-page .extra-tips-table thead th:first-child {
    background: var(--extra-black) !important;
    color: var(--extra-cream) !important;
    border-right: 1px solid var(--extra-gold);
}

.extra-tips-page .extra-tips-table tbody tr > th[colspan] {
    background: #292720 !important;
    color: #e3c46d !important;
    border-top: 1px solid var(--extra-gold) !important;
    border-bottom: 1px solid var(--extra-gold) !important;
    padding: 12px 14px !important;
    font-weight: 800;
    letter-spacing: .3px;
    text-transform: uppercase;
    font-size: 12px;
}

.extra-tips-page .extra-tips-table tbody tr:not(:has(> th[colspan])) {
    background: var(--extra-cream);
}

.extra-tips-page .extra-tips-table tbody tr:not(:has(> th[colspan])):hover {
    background: #fffaf0;
}

.extra-tips-page .extra-tips-table tbody tr > th[scope="row"] {
    background: var(--extra-cream) !important;
    color: var(--extra-black);
    border-right: 1px solid var(--extra-line);
    font-weight: 650 !important;
}

.extra-tips-page .extra-tips-table tbody tr > td {
    color: var(--extra-black);
}

.extra-tips-page .extra-tips-table tbody tr > td small {
    color: #8b6b1e !important;
    font-weight: 800;
}

.extra-tips-page .extra-tips-table img {
    border: 2px solid var(--extra-gold);
    box-shadow: 0 2px 7px rgba(0, 0, 0, .18);
}

.extra-tips-page .extra-tips-table thead th span {
    overflow-wrap: anywhere;
}

.extra-tips-page .extra-tips-table tbody tr:last-child > th,
.extra-tips-page .extra-tips-table tbody tr:last-child > td {
    background: var(--extra-black) !important;
    color: #e3c46d !important;
    border-top: 2px solid var(--extra-gold) !important;
    border-bottom: 0 !important;
    font-weight: 800 !important;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
}

.extra-tips-page .extra-tips-table tbody tr:last-child > th {
    border-right: 1px solid var(--extra-gold);
}

@media (max-width: 700px) {
    .extra-tips-page > .card:first-child {
        padding: 16px;
    }

    .extra-tips-page .extra-tips-table {
        font-size: 12px;
    }

    .extra-tips-page .extra-tips-table th,
    .extra-tips-page .extra-tips-table td {
        padding: 10px 9px !important;
    }

    .extra-tips-page .extra-tips-table thead th {
        min-width: 100px;
    }
}

/* HWD ADMIN DESIGN: EXTRA-TIPPS */
.admin-extra-tips .page-heading {
    margin-bottom: 22px;
}

.admin-extra-tips .admin-extra-tips-card,
.admin-extra-tips > .card {
    border: 1px solid rgba(185, 149, 55, .32);
    border-radius: 12px;
    background: #fffdf8;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .045);
}

.admin-extra-tips .admin-extra-tips-card {
    padding: 20px;
}

.admin-extra-tips .admin-extra-tips-table-wrap {
    overflow-x: auto;
    max-width: 100%;
    border: 1px solid rgba(185, 149, 55, .35);
    border-radius: 10px;
    background: #fffdf8;
    -webkit-overflow-scrolling: touch;
}

.admin-extra-tips .admin-extra-tips-table {
    width: 100%;
    min-width: 900px;
    border-collapse: separate !important;
    border-spacing: 0;
    color: #171717;
    background: #fffdf8;
    font-size: 13px;
}

.admin-extra-tips .admin-extra-tips-table thead th {
    padding: 13px 14px !important;
    background: #171717 !important;
    color: #f5f1e7 !important;
    border: 0 !important;
    border-bottom: 2px solid #b99537 !important;
    text-align: left;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.admin-extra-tips .admin-extra-tips-table tbody td,
.admin-extra-tips .admin-extra-tips-table tbody th {
    padding: 11px 14px !important;
    border: 0 !important;
    border-bottom: 1px solid #e9dfc8 !important;
    vertical-align: middle;
}

.admin-extra-tips .admin-extra-tips-table tbody tr:nth-child(even) {
    background: #f8f5ed;
}

.admin-extra-tips .admin-extra-tips-table tbody tr:hover {
    background: #fff8e7;
}

.admin-extra-tips .admin-extra-tips-table tbody td:first-child {
    font-weight: 700;
    white-space: nowrap;
}

.admin-extra-tips .admin-extra-tips-select {
    width: 100% !important;
    min-width: 200px;
    min-height: 42px;
    box-sizing: border-box;
    padding: 9px 32px 9px 11px !important;
    border: 1px solid #d8c99f !important;
    border-radius: 8px !important;
    background-color: #fff !important;
    color: #171717 !important;
    font: inherit;
}

.admin-extra-tips .admin-extra-tips-select:focus {
    outline: none;
    border-color: #b99537 !important;
    box-shadow: 0 0 0 3px rgba(185, 149, 55, .18);
}

.admin-extra-tips .admin-extra-tips-table small {
    display: inline-block;
    margin-top: 5px;
    padding: 3px 7px;
    border: 1px solid #d9c27e;
    border-radius: 5px;
    background: #f5edcf !important;
    color: #735716 !important;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.admin-extra-tips .admin-extra-tips-table .admin-extra-tips-total th,
.admin-extra-tips .admin-extra-tips-table .admin-extra-tips-total td,
.admin-extra-tips .admin-extra-tips-table tbody tr.admin-extra-tips-total {
    background: #171717 !important;
    color: #e3c46d !important;
    font-weight: 800;
}

.admin-extra-tips .admin-extra-tips-table .admin-extra-tips-total th,
.admin-extra-tips .admin-extra-tips-table .admin-extra-tips-total td {
    border-top: 2px solid #b99537 !important;
    border-bottom: 0 !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    white-space: nowrap;
}

.admin-extra-tips .admin-extra-tips-card .button {
    min-height: 44px;
    padding: 11px 20px;
    border-radius: 8px;
    font-weight: 800;
}

.admin-extra-tips .admin-extra-tips-card button[type="submit"] {
    border: 1px solid #b99537;
}

.admin-extra-tips .admin-extra-tips-card button[type="submit"]:focus-visible {
    outline: 3px solid rgba(185, 149, 55, .35);
    outline-offset: 2px;
}

@media (max-width: 700px) {
    .admin-extra-tips .admin-extra-tips-card {
        padding: 14px;
    }

    .admin-extra-tips .admin-extra-tips-table {
        font-size: 12px;
    }

    .admin-extra-tips .admin-extra-tips-table thead th,
    .admin-extra-tips .admin-extra-tips-table tbody td,
    .admin-extra-tips .admin-extra-tips-table tbody th {
        padding: 10px !important;
    }

    .admin-extra-tips .admin-extra-tips-card button[type="submit"] {
        width: 100%;
    }
}

/* HWD: Admin Extra-Tipps – Überschrift und Beschreibung in Schwarz-Gold */
.admin-extra-tips .page-heading h1,
.admin-extra-tips .page-heading h2,
.admin-extra-tips .page-heading h3 {
    color: #171717 !important;
}

.admin-extra-tips .page-heading p,
.admin-extra-tips .page-heading .muted,
.admin-extra-tips > p,
.admin-extra-tips .admin-extra-tips-card > p {
    color: #5f5748 !important;
}

.admin-extra-tips .page-heading .eyebrow,
.admin-extra-tips .page-heading .kicker {
    color: #a17b25 !important;
}

/* HWD-FIX: Alle Beschreibungstexte im Admin-Extra-Tipps-Bereich */
.admin-extra-tips p,
.admin-extra-tips p *,
.admin-extra-tips .card p,
.admin-extra-tips .card p *,
.admin-extra-tips .admin-extra-tips-card p,
.admin-extra-tips .admin-extra-tips-card p *,
.admin-extra-tips .muted,
.admin-extra-tips .text-muted {
    color: #5f5748 !important;
}

.admin-extra-tips .page-heading h1,
.admin-extra-tips .page-heading h2 {
    color: #171717 !important;
}

/* HWD DESIGN: Mannschaftsverwaltung Schwarz-Gold */
.page-section:has(.admin-teams-card) .page-heading h1 {
    color: #171717 !important;
}

.page-section:has(.admin-teams-card) .page-heading p,
.page-section:has(.admin-teams-card) .muted {
    color: #5f5748 !important;
}

.page-section:has(.admin-teams-card) .admin-teams-card {
    background: #fffdf8 !important;
    border: 1px solid rgba(185, 149, 55, .35) !important;
    border-radius: 12px !important;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .045);
    color: #171717;
}

.page-section:has(.admin-teams-card) .card-header {
    border-bottom: 1px solid #e9dfc8;
}

.page-section:has(.admin-teams-card) .card-header h2 {
    color: #171717 !important;
}

.page-section:has(.admin-teams-card) .card-kicker,
.page-section:has(.admin-teams-card) .eyebrow {
    color: #a17b25 !important;
}

.page-section:has(.admin-teams-card) .admin-team-edit {
    background: #fffdf8 !important;
    border-color: #e5d8b8 !important;
    border-radius: 10px;
}

.page-section:has(.admin-teams-card) .admin-team-edit:hover {
    background: #faf6eb !important;
    border-color: #b99537 !important;
}

.page-section:has(.admin-teams-card) .admin-team-field label {
    color: #393329 !important;
}

.page-section:has(.admin-teams-card) .admin-team-field input[type="text"],
.page-section:has(.admin-teams-card) .admin-team-field select,
.page-section:has(.admin-teams-card) input[type="text"],
.page-section:has(.admin-teams-card) select {
    color: #171717 !important;
    background-color: #fff !important;
    border-color: #d8c99f !important;
    border-radius: 7px;
}

.page-section:has(.admin-teams-card) input:focus,
.page-section:has(.admin-teams-card) select:focus {
    outline: none;
    border-color: #b99537 !important;
    box-shadow: 0 0 0 3px rgba(185, 149, 55, .18);
}

.page-section:has(.admin-teams-card) .admin-team-upload {
    color: #735716 !important;
    border-color: #b99537 !important;
}

.page-section:has(.admin-teams-card) .admin-team-edit-action .button {
    background: #171717 !important;
    color: #f5f1e7 !important;
    border: 1px solid #b99537 !important;
    border-radius: 7px;
    font-weight: 800;
}

.page-section:has(.admin-teams-card) .admin-team-edit-action .button:hover {
    background: #f5f1e7 !important;
    color: #735716 !important;
}


/* HWD DESIGN: Admin-Ergebnisse Schwarz-Gold */
.page-section:has(.admin-results-overview, .admin-results-detail) .page-heading h1 {
    color: #171717 !important;
}

.page-section:has(.admin-results-overview, .admin-results-detail) .page-heading p,
.page-section:has(.admin-results-overview, .admin-results-detail) .muted {
    color: #5f5748 !important;
}

.page-section:has(.admin-results-overview, .admin-results-detail) .eyebrow {
    color: #a17b25 !important;
}

.page-section:has(.admin-results-overview) .admin-results-play-card,
.page-section:has(.admin-results-detail) .admin-results-detail > .card {
    background: #fffdf8 !important;
    color: #171717 !important;
    border: 1px solid rgba(185, 149, 55, .35) !important;
    border-radius: 12px !important;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .045);
}

.page-section:has(.admin-results-overview) .admin-results-play-card:hover {
    background: #faf6eb !important;
    border-color: #b99537 !important;
}

.page-section:has(.admin-results-overview) .admin-results-play-number {
    color: #171717 !important;
}

.page-section:has(.admin-results-overview) .admin-results-play-arrow {
    color: #a17b25 !important;
}

.page-section:has(.admin-results-detail) .admin-results-detail-header h2 {
    color: #171717 !important;
}

.page-section:has(.admin-results-detail) .admin-results-back {
    color: #8b6a21 !important;
}

.page-section:has(.admin-results-detail) .admin-results-table-wrap {
    overflow-x: auto;
    border: 1px solid rgba(185, 149, 55, .35);
    border-radius: 10px;
}

.page-section:has(.admin-results-detail) .admin-results-table {
    color: #171717 !important;
    background: #fffdf8 !important;
    border-collapse: collapse;
}

.page-section:has(.admin-results-detail) .admin-results-table th {
    background: #171717 !important;
    color: #f5f1e7 !important;
    border-bottom: 2px solid #b99537 !important;
}

.page-section:has(.admin-results-detail) .admin-results-table td {
    color: #393329 !important;
    border-color: #e9dfc8 !important;
}

.page-section:has(.admin-results-detail) .admin-results-table tbody tr:nth-child(even) {
    background: #f8f5ed !important;
}

.page-section:has(.admin-results-detail) .admin-results-table input,
.page-section:has(.admin-results-detail) .admin-results-table select {
    color: #171717 !important;
    background: #fff !important;
    border-color: #d8c99f !important;
}

.page-section:has(.admin-results-detail) .admin-results-table input:focus,
.page-section:has(.admin-results-detail) .admin-results-table select:focus {
    outline: none;
    border-color: #b99537 !important;
    box-shadow: 0 0 0 3px rgba(185, 149, 55, .18);
}

.page-section:has(.admin-results-detail) button[type="submit"] {
    background: #171717 !important;
    color: #f5f1e7 !important;
    border: 1px solid #b99537 !important;
    border-radius: 7px;
    font-weight: 800;
}

.page-section:has(.admin-results-detail) button[type="submit"]:hover {
    background: #f5f1e7 !important;
    color: #735716 !important;
}

/* =========================================================
   PHASE 33 – Öffentliche Tippabgabe
   ========================================================= */
.tips-page-message {
    margin-bottom: 20px;
}
.tips-play-selector {
    margin-bottom: 24px;
}
.tips-entry-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.tips-entry-title {
    margin: 4px 0 0;
}
.tips-entry-list {
    display: grid;
    gap: 12px;
}
.tips-entry-row {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
}
.tips-score-inputs {
    display: flex;
    align-items: center;
    gap: 6px;
}
.tips-score-input {
    width: 58px;
    text-align: center;
}
.tips-joker-cell {
    text-align: right;
    white-space: nowrap;
}
.tips-joker-choice {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .9rem;
    cursor: pointer;
}
.tips-kickoff-note {
    font-size: .82rem;
    color: var(--muted);
    padding: 0 16px 4px;
}
.tips-joker-rule {
    margin-top: 24px;
    padding: 16px;
    border-radius: 12px;
    background: rgba(255,255,255,.04);
    color: var(--muted);
}
.tips-joker-rule strong {
    color: inherit;
}
.tips-submit-row {
    margin-top: 20px;
    text-align: right;
}
@media (max-width: 720px) {
    .tips-entry-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }
    .tips-entry-row .tips-team-away {
        grid-column: 1;
    }
    .tips-joker-cell {
        grid-column: 2;
        grid-row: 2;
    }
}

/* =========================================================
   PHASE 34 – Öffentliche Extra-Tipp-Tabelle
   ========================================================= */
.extra-tips-empty-card {
    margin-top: 16px;
}
.extra-tips-card {
    margin-top: 16px;
    padding: 0;
    overflow: hidden;
}
.extra-tips-table-wrap {
    overflow-x: auto;
    width: 100%;
    -webkit-overflow-scrolling: touch;
}
table.extra-tips-table {
    width: 100%;
    min-width: 850px;
    border-collapse: collapse;
}
.extra-tips-table th,
.extra-tips-table td {
    box-sizing: border-box;
}
.extra-tips-table .extra-tips-heading {
    padding: 12px;
    text-align: left;
    border-bottom: 2px solid var(--border-color, #ddd);
    min-width: 190px;
}
.extra-tips-table .extra-tips-heading-sticky {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--card-bg, #fff);
}
.extra-tips-table .extra-tips-player-heading {
    padding: 12px 10px;
    text-align: center;
    vertical-align: top;
    min-width: 115px;
}
.extra-tips-avatar {
    display: block;
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 50%;
    margin: 0 auto 8px;
}
.extra-tips-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--border-color, #eee);
    font-size: 23px;
}
.extra-tips-table .extra-tips-group-heading {
    padding: 11px 12px;
    text-align: left;
    background: var(--border-color, #eee);
    border-bottom: 1px solid var(--border-color, #ddd);
}
.extra-tips-table .extra-tips-field-heading {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--card-bg, #fff);
    padding: 11px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border-color, #ddd);
    font-weight: 500;
}
.extra-tips-table .extra-tips-result-cell {
    padding: 11px 12px;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid var(--border-color, #ddd);
    font-weight: 600;
}
.extra-tips-table .extra-tips-player-cell {
    padding: 11px 10px;
    text-align: center;
    vertical-align: middle;
    border-bottom: 1px solid var(--border-color, #ddd);
}
.extra-tips-earned-points {
    display: block;
    margin-top: 4px;
    color: var(--accent, #16805d);
    font-weight: 700;
    white-space: nowrap;
}
.extra-tips-table .extra-tips-total-heading {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--card-bg, #fff);
    padding: 12px;
    text-align: left;
    border-top: 3px solid var(--border-color, #ddd);
    font-weight: 700;
}
.extra-tips-table .extra-tips-total-cell {
    padding: 12px 10px;
    text-align: center;
    border-top: 3px solid var(--border-color, #ddd);
    font-weight: 700;
    white-space: nowrap;
}

/* =========================================================
   PHASE 35 – Admin Extra-Tipps
   ========================================================= */
.admin-extra-tips-message {
    margin-bottom: 16px;
}
.admin-extra-tips-message-success {
    border-left: 4px solid #27834a;
}
.admin-extra-tips-message-error {
    border-left: 4px solid #b42318;
}
.admin-extra-tips .admin-extra-tips-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.admin-extra-tips table.admin-extra-tips-table {
    width: 100%;
    min-width: 850px;
    border-collapse: collapse;
}
.admin-extra-tips-table .admin-extra-tips-heading {
    text-align: left;
    padding: 10px;
    border-bottom: 2px solid var(--border-color, #ccc);
}
.admin-extra-tips-table .admin-extra-tips-heading-result {
    min-width: 220px;
}
.admin-extra-tips-table .admin-extra-tips-label-cell {
    padding: 9px 10px;
    border-bottom: 1px solid var(--border-color, #ddd);
    font-weight: 600;
}
.admin-extra-tips-table .admin-extra-tips-input-cell {
    padding: 7px 10px;
    border-bottom: 1px solid var(--border-color, #ddd);
}
.admin-extra-tips-table .admin-extra-tips-select {
    box-sizing: border-box;
    width: 100%;
    min-width: 200px;
    padding: 9px;
    border: 1px solid var(--border-color, #ccc);
    border-radius: 6px;
}
.admin-extra-tips-table .admin-extra-tips-points-cell {
    padding: 9px 10px;
    border-bottom: 1px solid var(--border-color, #ddd);
    white-space: nowrap;
}
.admin-extra-tips-earned-badge {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 6px;
    border-radius: 4px;
    background: #e4f5e9;
    color: #176b35;
    font-weight: 700;
}
.admin-extra-tips-table .admin-extra-tips-total {
    background: var(--card-background, #f3f4f6);
}
.admin-extra-tips-table .admin-extra-tips-total-heading {
    text-align: left;
    padding: 11px;
    border-top: 2px solid var(--border-color, #aaa);
}
.admin-extra-tips-table .admin-extra-tips-total-cell {
    text-align: left;
    padding: 11px;
    border-top: 2px solid var(--border-color, #aaa);
    white-space: nowrap;
}
.admin-extra-tips-actions {
    margin-top: 24px;
}
.admin-extra-tips-help-card {
    margin-top: 16px;
}


/* =========================================================
   PHASE 36 – Admin Spieltagsverwaltung
   ========================================================= */
.admin-plays-layout .admin-plays-manual-card {
    margin-bottom: 20px;
}

.admin-plays-layout .admin-plays-section-heading {
    margin-top: 28px;
}

.admin-plays-layout .admin-plays-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
}


/* =========================================================
   PHASE 37 – Admin Ergebnisse
   ========================================================= */
.admin-results-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}


/* =========================================================
   PHASE 38 – Benutzereditor
   ========================================================= */
.admin-user-editor-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.admin-user-editor-actions .admin-user-delete-form {
    margin: 0;
}

/* =========================================================
   PHASE 39 – Login
   ========================================================= */
    body.login-page,
    body.login-page * {
      box-sizing: border-box;
    }

    body.login-page {
      margin: 0;
      padding: 0;
      min-height: 100%;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f5f1e7;
      color: #171717;
      font-family: Arial, Helvetica, sans-serif;
    }

    body.login-page .login-box {
      width: min(100% - 32px, 390px);
      padding: 32px;
      background: #ffffff;
      border: 1px solid #e5dfd3;
      border-radius: 14px;
      box-shadow: 0 12px 35px rgba(0, 0, 0, .08);
    }

    body.login-page .login-title {
      margin: 0 0 24px;
      font-size: 22px;
      line-height: 1.2;
      font-weight: 700;
      text-align: center;
    }

    body.login-page .login-error {
      margin: 0 0 18px;
      padding: 11px 13px;
      border: 1px solid #e1bcbc;
      border-radius: 8px;
      background: #fbefef;
      color: #8a2020;
      font-size: 13px;
      line-height: 1.4;
    }

    body.login-page .login-label {
      display: block;
      margin-bottom: 16px;
      font-size: 13px;
      font-weight: 700;
    }

    body.login-page .login-input {
      display: block;
      width: 100%;
      height: 44px;
      margin-top: 7px;
      padding: 0 12px;
      border: 1px solid #d8d1c5;
      border-radius: 8px;
      background: #fff;
      color: #171717;
      font: inherit;
      outline: none;
    }

    body.login-page .login-input:focus {
      border-color: #b99537;
      box-shadow: 0 0 0 3px rgba(185, 149, 55, .12);
    }

    body.login-page .login-button {
      display: block;
      width: 100%;
      height: 44px;
      margin-top: 8px;
      border: 1px solid #171717;
      border-radius: 8px;
      background: #171717;
      color: #fff;
      font: inherit;
      font-weight: 700;
      cursor: pointer;
    }

    body.login-page .login-button:hover {
      background: #b99537;
      border-color: #b99537;
    }

    @media (max-width: 480px) {
      body.login-page .login-box {
        width: min(100% - 24px, 390px);
        padding: 24px;
      }
    }