:root {
    --1color: #1476B7;
    --2color: #009999;
    --3color: #F7BA20;
    --4color: #2B1D37;
    --5color: #E12B54;
    --6color: #fff3e3;
    --7color: #ededee;
    --8color: #F2780C;
    --outer-padding:1rem;--max-width:65rem;
}

body{
    margin: 0;
    padding: 0; 
}

.page-content outer-wrapper {
    height: 200px;
}

.outer-wrapper{
    padding-right:var(--outer-padding);
    padding-left:var(--outer-padding);
    padding: 0.4cm;
    max-width:calc(var(--max-width) + 2 * var(--outer-padding));
    margin-left:auto;margin-right:auto;}
    @keyframes 
    v-dash{0%{transform:translateY(100%);
    opacity:0;}60%{transform:translateY(-10%);
    opacity:1;}90%{transform:translateY(5%);opacity:1;}100%{transform:translateY(0);opacity:1;}}
    @keyframes 
    h-dash{0%{transform:translateX(100%);
    opacity:0;}60%{transform:translateX(-3%);
    opacity:1;}90%{transform:translateX(1%);
    opacity:1;}100%{transform:translateX(0);
    opacity:1;}
}


.page  {
    font-family: 'Quicksand', sans-serif;
    font-size: 16px;
    color: #1E1021;
    text-align: center;
    overflow: hidden;
    position: relative;
}

.text-center_section {
    background-color: var(--6color);
    text-align: center;
}
    
.img {
    display: block;      
    margin: 0 auto;  
    height: 325px;   
}

.heading-heading-font-h1 {
    font-family: 'Quicksand', sans-serif;
    font-weight: 900;
    font-style:normal;
    font-size: 1.875rem;line-height:1.2666666667;
    color: #1E1021;
    text-align: center;
}

.heading-heading-font-h1-2 {
    font-family: 'Quicksand', sans-serif;
    font-weight: 900;
    font-style:normal;
    font-size: 1.875rem;line-height:1.2666666667;
    color: #1E1021;
    text-align: center;
    padding-left: 2cm;
    padding-right: 2cm;
}

.text-center-section-font {
    font-family: 'Quicksand', sans-serif;
    font-size: 16px;
    color: #1E1021;
    text-align: justify;
}

.invite-section{
    background-color: var(--6color);
    padding-top: 10px;
    padding-bottom: 10px;
}

.invite__section__heading {
    font-family: 'Quicksand', sans-serif;
    font-size: 25px;
    color: #1E1021;
    text-align: center;
    margin: 5px;
    padding-bottom: 10px;
    padding-top: 0px;
}
.invite-container {
    padding: 0.25cm;
}


.button {
    display: inline-block;
    padding: 10px 40px;
    border-radius: 1rem;
    color: white; 
    text-align: center;
    text-decoration: none; 
    font-size: 16px; 
    vertical-align:middle;
    font-weight: bold;
    transition: background-color 0.2s ease;
    width: 200px;
}
.button1:hover {
    background-color: var(--1color);
}
.button2:hover {
    background-color: var(--8color);
}
.button-wrapper {
    padding-bottom: 30px;
    padding-top: 5px;
}

.button1 {
    background-color: var(--2color);
}
.button2 {
    background-color: var(--3color);
}

.info-field-grid-container{
    display: grid;
    grid-template-columns: repeat(2, minmax(200px, 400px));
    grid-template-rows: repeat(1, minmax(150px, 250px));
    gap: 40px 40px;
    padding-bottom: 2cm;
    padding-top: 2cm;
    justify-content: center;
    justify-items: stretch;
}
.grid-item{
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-decoration: none;
    height: 100%;
    font-family: 'Quicksand', sans-serif;
    font-weight: 900;
    font-style:normal;
    font-size: 1.875rem;line-height:1.2666666667;
    text-align: center;
}

.item1:hover {
    background-color: #1476B7;
    color: white;
    border-color: #1476B7;
}

.item2:hover {
    background-color: #F2780C;
    color: white;
    border-color: #F2780C;
}

.item2 {
    background-color: var(--3color); 
    justify-self: end;
}

.item1 {
    background-color: var(--2color); 
    justify-self: start;
}


@media (max-width: 700px) {
    .info-field-grid-container {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, minmax(150px, 325px)); 
        gap: 40px; 
    }
}

.image-teaser{
    position:relative;
    transition:color 250ms ease;
}
.image-teaser__link{
    justify-content:center;
    align-items:center;}
.image-teaser__title{
    position:absolute;
    width:100%;
    max-height:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    text-align:center;
    z-index:20;
    padding:1rem;
    white-space:nowrap;
}
@media only screen and (min-width:540px){
.image-teaser__title{
    white-space:normal;}
}

.image-teaser_title_heading_font_h2{
    font-family: 'Quicksand', sans-serif;
    font-size: 30px;
    color: #1E1021;
    text-align: center;
    text-decoration: none;
}

.sponsor-footer {
    padding: 1rem;
}

.sponsor-footer_title {
    text-align: center;
    font-size: medium;
}


.sponsor-footer_logos {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.logo-image-name-field label{
    justify-content: start;
}

.sponsor-footer_logos .logo {
    display: flex;
    align-items: center;
}

.sponsor-footer_logos img {
    max-width: 17.5rem;
    max-height: 6.75rem;
    height: auto;
}


.block{
    min-width: 300px; 
    max-width: 500px;
    background-color: var(--3color);
    text-align: justify;
    border-radius: 1rem;
    flex: 1 1 auto;
    margin: 10px;
}


.video-section {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 2cm;
    padding-bottom: 4cm;
}
  .video-ratio {
    width: 720px;
    height: 480px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-color: #ffffff;

}

.video {
    width: 720px;
    height: 480px;
    position: absolute;
    object-fit: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border: 1px solid #000;
}


.formel-text {
    font-family: 'Quicksand', sans-serif;
    font-size: 20px;
    text-align: left;
    color: #1E1021;
  }




.site-header{
    padding: 30px;
    margin-bottom: 30px;
}

.site-footer {
    background-color: var(--4color);
    color: white;
    display: flex;
    justify-content: center; /* Zentriert den Inhalt */
    align-items: center;
    padding: 20px;
}

.site-footer-wrapper {
    display: flex;
    justify-content: center; /* Zentriert den Inhalt */
    width: 100%; /* Stellt sicher, dass der Wrapper die volle Breite einnimmt */
}

.site-footer__logo {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    justify-content: start; 
}

.site-footer__logo .logo img {
    width: 200px;
    height: 200px;
}

.footer-menu {
    display: flex;
    flex-direction: column; 
    align-items: center; 
    margin-left: auto;
    gap: 5px;
}

.footer-menu ul {
    list-style: none; 
    align-items: center; 
}

.site-footer__text {
    color: white;
}

.footer-menu__item-link {
    text-decoration: none;
    color: white;
    font-size: 20px;
}

.main-header{
    padding-bottom: 5px;
}

@media (max-width: 700px) {
    .button-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .button {
        width: 40%; /* Verkleinert die Buttons auf 80% der Bildschirmbreite */
        margin-bottom: 10px; /* Abstand zwischen den Buttons */
    }
}
/* Standardanordnung: Blöcke nebeneinander */
.d-flex {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

/* Bei einer Breite von maximal 768px: Blöcke untereinander anzeigen */
@media (max-width: 500px) {
    .d-flex {
        flex-direction: column;
    }

    .block {
        margin-left: auto;
        margin-right: auto;
        margin: 10px;
    }
}

.bbs{
    padding-top: 3cm;
}

.über-uns-text{
    text-align: left;
}

.button-flyer-section{
    padding: 1.5cm;
}