/* ACHTUNG: Grunt funktioniert nicht, daher ausgelagerte CSS Datei */


/* ***** Basics ***** */

h2.important {
    line-height: 1.3em;
}


/* ***** Tabelle ***** */

.groups {
    display:grid;
    grid-template-columns:1fr 1fr 1fr 1fr;
    gap:30px;
    margin:30px 0 40px;
}

.groups .group {
    border:1px solid #000;
    margin:0;
}

.groups .group li {
    padding:5px 10px;
}

.groups .group li:not(.club4) {
    border-bottom:1px solid #000;
}

.groups .group-header {
    font-weight:bold;
}

@media screen and (max-width:1000px) {
    .groups {
        grid-template-columns:1fr 1fr;
    }
}
@media screen and (max-width:550px) {
    .groups {
        grid-template-columns:1fr;
    }
}


/* ***** Spielplan ***** */

.schedule {
    margin:30px 0 40px;
    border-top:1px solid #000;
    border-left:1px solid #000;
}

.schedule-header,
.schedule-item {
    display:grid;
    grid-template-columns:1fr 1fr 1fr 1fr 6fr 1fr;
}

.schedule-header.prelim,
.schedule-item.prelim {
    display:grid;
    grid-template-columns:1fr 1fr 1fr 1fr 1fr 6fr 1fr;
}

.schedule-header {
    font-weight:bold;
}

.schedule ul {
    margin:0;
}

.schedule li {
    padding:5px 10px;
    border-right:1px solid #000;
    border-bottom:1px solid #000;
}

.label {
    display:none;
    font-weight:bold;
    padding-right:20px;
    vertical-align:top;
}

@media screen and (max-width:1000px) {
    .label {
        display:inline-block;
        width:20%;
    }

    .value {
        display:inline-block;
        width:78%;
    }

    .schedule {
        border:0;
    }

    .schedule li {
        border:0;
    }

    .schedule li:nth-child(odd) {
        background:#efefef;
    }

    .schedule-header {
        display:none !important;
    }

    .schedule-item {
        display:block !important;
        border:1px solid #000;
        margin:10px 0 !important;
    }
}

@media screen and (max-width:650px) {
    .label {
        width:35%;
    }

    .value {
        width:64%;
    }
}
@media screen and (max-width:650px) {
    .label {
        width:40%;
    }

    .value {
        width:57%;
    }
}