/* Responsive- und Touch-Regeln, zuletzt eingebunden (Briefing Abschnitt 7/8). */

/* Hover nur auf Geräten mit echtem Hover-Zeiger */
@media (hover: hover) {
    .imp_tab:hover {
        border-bottom: 2px solid yellow;
    }

    .imp_tab_active:hover {
        border-bottom: 2px solid transparent;
    }
}

/* Touch-Feedback statt Hover */
@media (hover: none) {
    .imp_tab:active {
        background-color: rgb(51, 51, 51);
    }

    .imp_tab_active:active {
        background-color: red;
    }
}

/* Tablet */
@media (max-width: 1024px) {
    .imp_content {
        padding: 3vh 5vw;
    }

    .imp_view {
        max-width: 100%;
    }
}

/* Smartphone */
@media (max-width: 767px) {
    .imp_head {
        flex-direction: column;
        align-items: stretch;
        gap: 1vh;
    }

    .imp_logo {
        text-align: center;
    }

    .imp_tabs {
        justify-content: center;
        gap: 4vw;
    }

    .imp_tab {
        flex: 1 1 auto;
    }

    .imp_content {
        padding: 3vh 5vw;
    }
}