@media screen and (max-width: 767px) {
    /* Spalten: Alle untereinander anzeigen */
    .column {
        width: 100% !important; /* Volle Breite auf Mobile */
        float: none;
        padding: 5px;
    }

    /* Navigation: Links untereinander anzeigen */
    .nav {
        flex-direction: column; /* Links untereinander */
        align-items: center; /* Zentriert die Links horizontal */
        padding: 10px;
    }

    .nav li {
        margin: 5px 0; /* Abstand zwischen den Links */
        width: 100%; /* Volle Breite für Touch-Freundlichkeit */
    }

    .nav li a {
        padding: 10px;
    }

    /* Zeit-Anzeige anpassen */
    .time {
        padding: 10px;
        font-size: 14px;
    }

    /* Formulare anpassen */
    form {
        padding: 10px;
    }

    /* Update-Button anpassen */
    .update-button {
        width: 100%; /* Volle Breite für bessere Touch-Bedienung */
        padding: 12px;
    }
}

/* Responsive Anpassungen für Tablets (768px–1024px) */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .column.middle {
        width: 60%;
    }

    .column.side {
        width: 20%;
    }

    .nav li a {
        padding: 12px 14px;
    }
}