:root{
    font-family:Inter,system-ui,sans-serif;
    color:#17221b;
    background:#f5f7f5
}
*{
    box-sizing:border-box
}
body{
    margin:0
}
header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:1rem 4vw;
    background:#133d24;
    color:white
}
header a{
    color:white;
    text-decoration:none
}
section a{
    color:black;
    text-decoration:none
}
section a:hover{
    color:black;
}
.brand{
    font-size:1.5rem;
    font-family: "Slackey", sans-serif;
    font-weight: 400;
    font-style: normal;
}
nav{
    display:flex;
    gap:1rem;
    align-items:center
}
nav form{
    margin:0
}
a {
    text-decoration: none;
    color: black;
}
a:hover {
    text-decoration: none;
    font-weight: bold;
}
button{
    background:#21834b;
    color:white;
    border:0;
    padding:.7rem 1rem;
    border-radius:.5rem;
    cursor:pointer
}
button:disabled{
    opacity:.45
}
main{
    max-width:1100px;
    margin:0px auto
}
.grid,.cards{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
    gap:1rem
}
.card,.match{
    background:white;
    border-radius:.75rem;
    padding:1rem;
    box-shadow:0 3px 16px #0001
}
.card{
    display:flex;
    flex-direction:column;
    border-left:6px solid #21834b;
    text-decoration:none;
    color:inherit
}
.match div,.fixture{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    gap:1rem;
    align-items:center
}
.match div a:last-child,.fixture a:last-child{
    text-align:right
}
.fixture{
    background:white;
    padding:.8rem;
    margin:.5rem 0;
    border-radius:.5rem
}
.fixture span{
    grid-column:1/-1;
    color:#667;
    font-size:.8rem
}
table{
    width:100%;
    border-collapse:collapse;
    background:white
}
th,td{
    text-align:left;
    padding:.65rem;
    border-bottom:1px solid #e5e8e5
}
.form{
    max-width:520px;
    display:grid;
    gap:1rem;
    background:white;
    padding:1.25rem;
    border-radius:.75rem
}
.form label{
    display:grid;
    gap:.35rem
}
.form input,.form select,select{
    padding:.7rem;
    border:1px solid #ccd3cd;
    border-radius:.4rem
}
.error{
    background:#ffdede;
    padding:1rem
}
.success{
    background:#dff5e6;
    padding:1rem
}
.colors i{
    display:inline-block;
    width:45px;
    height:45px;
    border:1px solid #bbb
}
footer{
    text-align: center;
    padding: 3rem;
    color: lightgray;
    background-color: gray;
    margin-top: 3rem;
}
@media(max-width:650px){
    header{
        align-items:flex-start;
        gap:1rem
    }
    nav{
        flex-wrap:wrap
    }
    .fixture{
        grid-template-columns:1fr
    }
    .fixture a:last-child{
        text-align:left
    }
    table{
        font-size:.85rem
    }
}
.team-heading{
    display:flex;
    align-items:center;
    gap:1.25rem;
    margin-bottom:1.5rem
}
.crest{
    width:54px;
    height:60px;
    object-fit:contain
}
.crest-large{
    width:100px;
    height:110px
}
.match.is-live{
    outline:3px solid #e43
}
.match a.status{
    display:inline-block;
    margin-top:.6rem;
    color:#176b3a;
    text-decoration:none;
    font-weight:700
}
.match-hero{
    background:linear-gradient(110deg,var(--home),#fff 48%,#fff 52%,var(--away));
    padding:1.5rem;
    margin-top: 2rem;
    border-radius:1rem;
    box-shadow:0 5px 25px #0002
}
.scoreboard{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    text-align:center;
    gap:1rem
}
.scoreboard>div{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:.5rem
}
.scoreboard a{
    color:#17221b;
    font-weight:800;
    text-decoration:none
}
.scoreboard strong{
    font-size:3rem;
    background:#111;
    color:#fff;
    padding:.35rem .8rem;
    border-radius:.5rem
}
.live-status{
    text-align:center;
    font-weight:800;
    margin:1rem
}
.pitch{
    height:90px;
    background:#278846;
    position:relative;
    border:3px solid #fff;
    border-radius:.5rem;
    overflow:hidden
}
.pitch:before{
    content:"";
    position:absolute;
    left:50%;
    height:100%;
    border-left:2px solid #fff
}
.pitch:after{
    content:"";
    position:absolute;
    left:calc(50% - 25px);
    top:18px;
    width:50px;
    height:50px;
    border:2px solid #fff;
    border-radius:50%
}
.ball{
    position:absolute;
    top:35px;
    width:18px;
    height:18px;
    background:#fff;
    border:3px solid #222;
    border-radius:50%;
    transform:translateX(-50%);
    transition:left .5s;
    z-index:2
}
.goal{
    position:absolute;
    top:25px;
    width:8px;
    height:40px;
    border:2px solid #fff
}
.home-goal{
    left:0
}
.away-goal{
    right:0
}
.timeline{
    border-left:3px solid #21834b;
    padding-left:1rem
}
.report td:first-child,.report th:first-child{
    text-align:right
}
.report td:last-child,.report th:last-child{
    text-align:left
}
.report th:nth-child(2){
    text-align:center
}
.record-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:1rem
}
.record-grid .card{
    display:block
}
.pair-form fieldset{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1rem;
    border:1px solid #ccd3cd;
    border-radius:.5rem
}
.muted{
    color:#667
}
@media(max-width:650px){
    .scoreboard{
        grid-template-columns:1fr auto 1fr
    }
    .scoreboard strong{
        font-size:2rem
    }
    .team-heading{
        align-items:flex-start
    }
    .pair-form fieldset{
        grid-template-columns:1fr
    }
}

/* Tabellen-Markierungen */

.standings-table tr.qualification-best td:first-child {
    border-left: 5px solid #1769e0;
}

.standings-table tr.qualification-other td:first-child {
    border-left: 5px solid #f29f05;
}

.standings-table tr.promotion td:first-child {
    border-left: 5px solid #20a653;
}

.standings-table tr.relegation td:first-child {
    border-left: 5px solid #d93636;
}


/* Optional: sehr dezenter Hintergrund */

.standings-table tr.qualification-best {
    background: rgba(23, 105, 224, 0.08);
}

.standings-table tr.qualification-other {
    background: rgba(242, 159, 5, 0.08);
}

.standings-table tr.promotion {
    background: rgba(32, 166, 83, 0.08);
}

.standings-table tr.relegation {
    background: rgba(217, 54, 54, 0.08);
}


/* Legende */

.table-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 12px;
    font-size: 0.9rem;
}

.table-legend span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.legend-color {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 2px;
}

.legend-color.qualification-best {
    background: #1769e0;
}

.legend-color.qualification-other {
    background: #f29f05;
}

.legend-color.promotion {
    background: #20a653;
}

.legend-color.relegation {
    background: #d93636;
}