/* ============================================================
   winterliga.css – gemeinsames Styling (VPC-Designsystem)
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --navy:#0a1f44;--navy-mid:#1a3a6e;--gold:#c9a84c;--gold-lt:#e8c96a;
  --cream:#faf7f2;--sand:#e8dece;--sand-dk:#d4c4a8;
  --text:#1a1a2e;--muted:#6b7080;--white:#fff;
  --green:#1a7a4a;--red:#c0392b;--orange:#d4660a;--r:12px;
}
body{background:var(--cream);font-family:"Source Sans 3",sans-serif;color:var(--text);min-height:100vh}

/* Navigation */
.nav{background:var(--navy);padding:.7rem 1.5rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem}
.nav .brand{color:var(--gold-lt);font-family:"Playfair Display",serif;font-size:1.05rem;display:flex;align-items:center;gap:.5rem}
.nav .brand img{height:28px;width:auto}
.nav .links{display:flex;gap:.35rem;align-items:center;flex-wrap:wrap}
.nav .links a,.nav .links button{color:rgba(255,255,255,.75);font-size:.83rem;padding:.3rem .7rem;
  border-radius:6px;text-decoration:none;background:none;border:none;cursor:pointer;font-family:inherit}
.nav .links a:hover,.nav .links button:hover{background:rgba(255,255,255,.12);color:#fff}
.nav .links a.aktiv{background:rgba(201,168,76,.22);color:var(--gold-lt)}

/* Layout */
.wrap{max-width:1180px;margin:0 auto;padding:2rem 1.25rem 4rem}
.page-title{font-family:"Playfair Display",serif;color:var(--navy);font-size:2rem;margin-bottom:.35rem}
.untertitel{color:var(--muted);font-size:.92rem;margin-bottom:1.5rem}
.section-title{font-family:"Playfair Display",serif;color:var(--navy);font-size:1.2rem;margin-bottom:1rem}
.card{background:var(--white);border-radius:var(--r);box-shadow:0 6px 28px rgba(10,31,68,.09);padding:1.5rem;margin-bottom:1.5rem}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
@media(max-width:760px){.grid2{grid-template-columns:1fr}}

/* Formulare */
.field{display:flex;flex-direction:column;gap:.25rem;margin-bottom:.75rem}
.field label{font-size:.78rem;font-weight:600;color:var(--navy)}
input[type=text],input[type=date],input[type=time],input[type=number],select{
  width:100%;padding:.5rem .7rem;border:1.5px solid var(--sand-dk);border-radius:7px;
  font-size:.9rem;font-family:inherit;background:var(--white);color:var(--text)}
input:focus,select:focus{outline:none;border-color:var(--navy-mid);box-shadow:0 0 0 3px rgba(26,58,110,.12)}
.hint{font-size:.78rem;color:var(--muted)}
.check{display:flex;align-items:center;gap:.45rem;font-size:.86rem;margin:.5rem 0}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.35rem;padding:.55rem 1.2rem;border-radius:7px;
  font-family:inherit;font-size:.86rem;font-weight:600;cursor:pointer;border:none;text-decoration:none;
  transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(10,31,68,.18)}
.btn:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.btn-p{background:linear-gradient(135deg,var(--navy),var(--navy-mid));color:#fff}
.btn-g{background:linear-gradient(135deg,#0d5c30,var(--green));color:#fff}
.btn-d{background:linear-gradient(135deg,#6b1212,var(--red));color:#fff}
.btn-s{background:#fff;color:var(--navy);border:1.5px solid var(--sand-dk)}
.btn-sm{padding:.28rem .65rem!important;font-size:.76rem!important;border-radius:5px!important}
.aktionen{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin-top:1rem}

/* Meldungen */
.msg{padding:.8rem 1rem;border-radius:0 8px 8px 0;font-size:.88rem;margin-bottom:1.25rem}
.msg.success{background:#e8f5ee;border-left:3px solid var(--green);color:#0d5c30}
.msg.error{background:#fdf0f0;border-left:3px solid var(--red);color:var(--red)}
.msg.warn{background:#fff3eb;border-left:3px solid var(--orange);color:#8a3f00}

/* Tabs / Pills */
.tabs{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1.25rem}
.tab{padding:.45rem 1rem;border-radius:7px;font-size:.86rem;font-weight:600;border:1.5px solid var(--sand-dk);
  background:#fff;color:var(--muted);text-decoration:none;display:inline-flex;flex-direction:column;line-height:1.2}
.tab small{font-weight:400;font-size:.72rem}
.tab.aktiv{background:var(--navy);color:#fff;border-color:var(--navy)}
.tab.fertig:not(.aktiv){border-color:var(--green);color:var(--green)}

/* Tabellen */
table{width:100%;border-collapse:collapse}
th{background:var(--navy);color:#fff;padding:.5rem .7rem;font-size:.76rem;font-weight:600;text-align:left}
td{padding:.45rem .7rem;border-bottom:1px solid var(--sand);font-size:.86rem;vertical-align:middle}
.num{text-align:right;font-variant-numeric:tabular-nums}
.ctr{text-align:center}
.scroll{overflow-x:auto}

/* Rangliste */
.rang td,.rang th{padding:.45rem .55rem}
.rang .platz{font-weight:700;color:var(--navy);width:2.2rem}
.rang tr.p1 td{background:#fbf5e3}
.rang tr.p1 .platz{color:var(--gold)}
.rang .haupt{font-weight:700;color:var(--navy)}
.rang .team{font-weight:600;white-space:nowrap}
.rang .num{white-space:nowrap}
.legende{font-size:.75rem;color:var(--muted);margin-top:.6rem;line-height:1.5}

/* Badges */
.badge{display:inline-block;padding:.08rem .5rem;border-radius:20px;font-size:.72rem;font-weight:700}
.badge.auto{background:#e8eef8;color:var(--navy-mid)}
.badge.manuell{background:#fff3eb;color:var(--orange)}
.badge.ok{background:#e8f5ee;color:#0d5c30}
.badge.offen{background:#f1f0ee;color:var(--muted)}
.badge.oeff{background:#fbf5e3;color:#7a5b00}