html {
    max-width: 100vw;
    font-family: sans-serif;
    font-size: 14pt;

    body {
        margin: 0;
        width: inherit;
    }
}

p{
    margin: 0;
}

header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;

    h1 {
        color: #d44;

    }
}

table#schedule {
    width: 100%;
    border-collapse: collapse;

    thead {
        text-align: center;
        background-color: #222;
        color: white;
        font-weight: bold;

        th {
            padding: .5rem 0;
            font-size: larger;
        }
        th:nth-child(1), th:nth-child(2), th:nth-child(4) {
            min-width: 100px;
        }
    }
    td {
        padding: 1rem .5rem;
    }
    tr:nth-child(2n) {
        background-color: #f7f7f7;
    }

    .schedule-time {
        font-weight: bold;

        .actual {
            display: block;
            color: #2d2;
        }
    }
    .schedule-time, .schedule-item, .schedule-place {
        text-align: center;
    }
    .schedule-track {

        p {
            padding: .2rem 0;
        }
        .schedule-info {
            padding-left: .5rem;
            padding-right: .5rem;
            color: #d44;
            font-weight: bold;
        }
    }
    .schedule-dest {
        font-size: larger;
        font-weight: bold;
    }
    .schedule-via::before {
        content: "u. a. über: ";
    }
    .schedule-via {
        color: #999;
    }
    p:has(+ .place-switch) {
        text-decoration: line-through;
    }
    .place-switch {
        color: #d44;
        font-weight: bold;
    }

    .dest-changed {
        color: #d44;
    }

    tr.canceled {
        background-color: #d441;

        .schedule-time .actual {
            color: #d44;
        }
        .schedule-info {
            background-color: #d44;
            color: white;

            &::before {
                content: "!";
                display: inline-block;
                text-align: center;
                min-width: 25px;
                border-right: 2px white solid;
                margin-right: 10px;
            }
        }
    }

    .delayed {
        .actual {
            color: #d44;
        }
    }

    .special {
        background-color: #44d1;

        .schedule-info {
            color: #44d;
        }
    }
}