/* =========================
   SCANMIT GLOBAL LAYOUT
   ========================= */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%;
}

body {
    overflow-x: hidden;
}

.scanmit-page {
    width: 100%;
}

.scanmit-container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}

.scanmit-container--narrow {
    width: min(760px, calc(100% - 40px));
    margin: 0 auto;
}

/* =========================
   HERO
   ========================= */

.scanmit-hero {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    overflow: hidden;
}

.scanmit-hero img {
    display: block;
    width: 100%;
    height: clamp(260px, 34vw, 430px);
    object-fit: cover;
    object-position: center;
}

.scanmit-hero--small img {
    height: clamp(180px, 25vw, 300px);
}

/* =========================
   CARDS
   ========================= */

.scanmit-card {
    width: 100%;
    margin: 0 auto 20px auto;
}

/* =========================
   FORM ELEMENTS
   ========================= */

input,
select,
textarea,
button {
    max-width: 100%;
}

input,
select,
textarea {
    width: 100%;
}

/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 768px) {

    .scanmit-container,
    .scanmit-container--narrow {
        width: calc(100% - 24px);
    }

    .scanmit-hero img {
        height: 240px;
    }

    .scanmit-hero--small img {
        height: 190px;
    }
}

@media (max-width: 480px) {

    .scanmit-container,
    .scanmit-container--narrow {
        width: calc(100% - 20px);
    }

    .scanmit-hero img {
        height: 210px;
    }

    .scanmit-hero--small img {
        height: 170px;
    }
}
/* =========================
   EINHEITLICHE SEITENBREITE
   ========================= */

main {
    width: min(1180px, calc(100% - 40px));
    margin-left: auto;
    margin-right: auto;
}

/* Formulare und schmalere Inhaltsbereiche bleiben lesbar */
main form {
    max-width: 100%;
}

/* Bilder nie über den Inhaltsbereich hinaus */
main img {
    max-width: 100%;
    height: auto;
}

/* Tablets */
@media (max-width: 768px) {
    main {
        width: calc(100% - 24px);
    }
}

/* Kleine Smartphones */
@media (max-width: 480px) {
    main {
        width: calc(100% - 20px);
    }
}