/* ############################################# */
/* #    Container Allgemein                    # */
/* ############################################# */
.multicol {
    display: grid;
    grid-column-gap: 25px;
    grid-auto-flow: row;
}
    /* Abstand erstes <p> verkleinern */
    .multicol .frame p:first-child {
        margin-block-start: auto;
    }


/* ############################################# */
/* #    2/3/4/5 Spalten Container              # */
/* ############################################# */

.multicol-x {
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}


/* ############################################# */
/* #    4 Spalten Container                    # */
/* ############################################# */

.multicol-4 {
    grid-template-columns: repeat(auto-fit, minmax(min(303px, 100%), 1fr));
}
    /* Bildschirm größer 497px */
    @media (min-width: 497px) {
        .multicol-4 {
            grid-template-columns: repeat(2, 1fr);
        }
    }
    /* Bildschirm größer 1005px */
    @media (min-width: 1005px) {
        .multicol-4 {
            grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
        }
    }


/* ############################################# */
/* #    2 Spalten Container (25/75)            # */
/* ############################################# */

.multicol-25-75 {
    grid-template-columns: minmax(min(220px, 100%), 1fr);
}
    /* Bildschirm größer 621px */
    @media (min-width: 621px) {
        .multicol-25-75 {
            grid-template-columns: minmax(220px, calc(25% - 18px)) minmax(220px, 75%);
        }
    }


/* ############################################# */
/* #    2 Spalten Container (75/25)            # */
/* ############################################# */

.multicol-75-25 {
    grid-template-columns: minmax(1fr, min(220px, 100%));
}
    /* Bildschirm größer 621px */
    @media (min-width: 621px) {
        .multicol-75-25 {
            grid-template-columns: minmax(220px, 75%) minmax(220px, calc(25% - 18px));
        }
    }


/* ############################################# */
/* #    2 Spalten Container (20/80)            # */
/* ############################################# */

.multicol-20-80 {
    grid-template-columns: minmax(min(220px, 100%), 1fr);
}
    /* Bildschirm größer 512px */
    @media (min-width: 512px) {
        .multicol-20-80 {
            grid-template-columns: minmax(220px, 0.9fr) minmax(220px, 4fr);
        }
    }


/* ############################################# */
/* #    2 Spalten Container (80/20)            # */
/* ############################################# */

.multicol-80-20 {
grid-template-columns: minmax(1fr, min(220px, 100%));
}
    /* Bildschirm größer 512px */
    @media (min-width: 512px) {
        .multicol-80-20 {
            grid-template-columns: minmax(220px, 4fr) minmax(220px, 0.9fr);
        }
    }


/* ############################################# */
/* #    2 Spalten Container (40/60)            # */
/* ############################################# */

.multicol-40-60 {
    grid-template-columns: minmax(min(220px, 100%), 1fr);
}
    /* Bildschirm größer 685px */
    @media (min-width: 685px) {
        .multicol-40-60 {
            grid-template-columns: minmax(220px, calc(40% - 15px)) minmax(220px, 60%);
        }
    }


/* ############################################# */
/* #    2 Spalten Container (60/40)            # */
/* ############################################# */

.multicol-60-40 {
    grid-template-columns: minmax(1fr, min(220px, 100%));
}
    /* Bildschirm größer 685px */
    @media (min-width: 685px) {
        .multicol-60-40 {
            grid-template-columns: minmax(220px, 60%) minmax(220px, calc(40% - 15px));
        }
    }


/* ############################################# */
/* #    3 Spalten Container (40/20/40)         # */
/* ############################################# */

.multicol-40-20-40 {
    grid-template-columns: minmax(1fr, min(220px, 100%));
}
    /* Bildschirm größer 742px */
    @media (min-width: 742px) {
        .multicol-40-20-40 {
            grid-template-columns: minmax(220px, 40%) 220px minmax(220px, 40%);
        }
    }


/* ############################################# */
/* #    2 Spalten Container (33/66)            # */
/* ############################################# */

.multicol-33-66 {
    grid-template-columns: minmax(1fr, min(220px, 100%));
}
    /* Bildschirm größer 717px */
    @media (min-width: 717px) {
        .multicol-33-66 {
            grid-template-columns: minmax(220px, calc(33% - 13px)) minmax(220px, calc(66% + 13px));
        }
    }


/* ############################################# */   
/* #    2 Spalten Container (66/33)            # */
/* ############################################# */

.multicol-66-33 {
    grid-template-columns: minmax(1fr, min(220px, 100%));
}
    /* Bildschirm größer 717px */
    @media (min-width: 717px) {
        .multicol-66-33 {
            grid-template-columns: minmax(220px, calc(66% + 13px)) minmax(220px, calc(33% - 13px));
        }
    }


/* ############################################# */
/* #    Fußnoten                               # */
/* ############################################# */

.footnotes {
    font-size: 12px;
    line-height: 18px;
    background: var(--color-gray-lightest);
    border-top: solid 1px var(--color-gray-lighter);
    margin-left: calc( 0px - calc(100vw - 100%) / 2);
    max-width: calc( 100% + calc(100vw - 100%));
    width: calc( 100% + calc(100vw - 100%));  
    margin-bottom: -40px;
    padding: 15px 0;
}
.tab .footnotes {
    margin-bottom: -60px;
}
/* Bildschirm kleiner 1250px */
@media (max-width: 1250px) {
    .footnotes {
        width: calc( 100% + calc(100vw - 100%) - 50px); 
        padding: 15px 25px; 
    }
    .footnotes .container,
    .footnotes .frame {
        margin: 0;
    }
}
/* Bildschirm kleiner 768px */
@media (max-width: 768px) {
    .footnotes {
        padding: 15px;
        width: calc(100vw - 30px);
    }
}