body {
    font-family: Arial, sans-serif;
    margin: 20px;
    padding: 0;
}

#messages {
    display: flex;
    gap: 20px;
}

button {
    padding: 10px;
    background-color: red;
    color: white;
    border: none;
    border-radius: 0px;
    cursor: pointer;
}

input {
    padding: 9px;
    border: 1px solid #ccc;
    border-radius: 0px;
}

input:focus {
    border: 1px solid #ccc;
    outline: none;
    border-radius: 0px;
}

table {
    width: 100%;
    border-collapse: collapse;
}

thead th {
    text-align: left;
    border-bottom: 2px solid #000;
    padding: 0.5rem 0;
}

th:last-child {
    text-align: right;
}

tbody td {
    padding: 0.4rem 0;
    border-bottom: 1px solid #eee;
}

.time {
    width: 8.33%;
}

.track {
    text-align: right;
    width: 12.5%;
}

.destination {
    width: auto;
}

.number {
    width: 12.5%;
}

.alert {
    color: #c00;
    font-weight: 600;
}

sbb-clock {
    height: 113px;
    aspect-ratio: 1/1;
    position: absolute;
    top: 20px;
    right: 20px;
    border: 3px solid black;
    border-radius: 50%;
}

@media (max-width: 600px) and (orientation: portrait) {
    button {
        margin-top: 4px;
    }

    button,
    input {
        width: 100%;
        text-align: left;
    }

    #station-name {
        margin-bottom: -10px;
    }

    #abfahrtstafel {
        margin-top: -20px;
    }

    sbb-clock {
        display: none;
    }

    h1 {
        margin-top: -7px;
        margin-bottom: 10.75px;
    }

    table {
        table-layout: fixed
    }

    .destination,
    th:last-child {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .destination:hover {
        overflow-x: auto;
        text-overflow: clip;
    }
}