/* --------------------------------------------------
   Container
-------------------------------------------------- */

.container {
    width: min(1600px, calc(100% - clamp(30px, 5vw, 80px)));
    margin-inline: auto;
}


/* --------------------------------------------------
   Allgemeine Bereiche
-------------------------------------------------- */

.section {
    padding: clamp(45px, 6vw, 80px) 0;
}


/* --------------------------------------------------
   Header
-------------------------------------------------- */

.site-header {
    background: #fff;
    border-bottom: 1px solid #ddd;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    min-height: 72px;
}


/* --------------------------------------------------
   Logo
-------------------------------------------------- */

.logo {
    display: inline-flex;
    align-items: center;

    font-size: 20px;
    font-weight: 700;
    text-decoration: none;
}


/* --------------------------------------------------
   Allgemeine Inhaltsbreiten
-------------------------------------------------- */

.content-narrow {
    max-width: 760px;
}

.content-medium {
    max-width: 960px;
}


/* --------------------------------------------------
   Allgemeines Grid
-------------------------------------------------- */

.grid {
    display: grid;
    gap: clamp(24px, 4vw, 50px);
}

.grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}


/* --------------------------------------------------
   Flex-Helfer
-------------------------------------------------- */

.flex {
    display: flex;
}

.flex-center {
    display: flex;
    align-items: center;
}

.flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}


/* --------------------------------------------------
   Abstände
-------------------------------------------------- */

.mt-0 {
    margin-top: 0;
}

.mb-0 {
    margin-bottom: 0;
}


/* --------------------------------------------------
   Tablet
-------------------------------------------------- */

@media (max-width: 900px) {

    .grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* --------------------------------------------------
   Mobile
-------------------------------------------------- */

@media (max-width: 700px) {

    .header-inner {
        min-height: 64px;
        gap: 20px;
    }

    .grid-2,
    .grid-3 {
        grid-template-columns: 1fr;
    }

    .flex-between {
        align-items: flex-start;
        flex-direction: column;
        gap: 20px;
    }
}