@font-face {
    font-family: "Font Awesome 6 Free";
    font-style: normal;
    font-weight: 900;
    src: url("../fa-solid-900.woff2");
}

.header-section{
    display: none;
}

.com_sympo .container-fluid {
    padding: 0;
}

body {
    font-family: 'Trebuchet MS', serif;
    /* more styles here if necessary */
}

.com_sympo main#content{
    padding: 0;
}

.rectangle-grey-large {
    width: 150px;
    height: 150px;
    border: 1px solid lightgray;
    border-radius: 15px;
    margin-bottom: 10px;
}

.rectangle-grey-normal {
    width: 120px;
    height: 120px;
    border: 2px solid #E0E0E4;
    border-radius: 8px;
    margin-bottom: 10px;
}

.rectangle-grey-small {
    width: 64px;
    height: 64px;
    border: 2px solid #C0C1CA;
    border-radius: 8px;
    margin-bottom: 10px;
}

.rectangle-grey-horizontal {
    width: 300px;
    height: 75px;
    border: 1px solid lightgray;
    border-radius: 15px;
    margin-bottom: 10px;
}

.rectangle-green-large {
    width: 150px;
    height: 150px;
    border: 2px solid #DBF0EE;
    border-radius: 15px;
    margin-bottom: 10px;
}

.rectangle-green-normal {
    width: 100px;
    height: 100px;
    border: 2px solid #EFF0F2;
    border-radius: 8px;
    margin-bottom: 10px;
}

.rectangle-green-normal2 {
    width: 100px;
    height: 100px;
    border: 2px solid #E0E0E4;
    border-radius: 8px;
    margin-bottom: 10px;
}

.rectangle-green-small {
    width: 57px;
    height: 57px;
    border: 2px solid #C0C1CA;
    border-radius: 8px;
    margin-bottom: 10px;
}

.rectangle-green-small2 {
    width: 57px;
    height: 57px;
    border: 2px solid #E0E0E4;
    border-radius: 8px;
    margin-bottom: 10px;
}

.rectangle-green-horizontal {
    width: 300px;
    height: 75px;
    border: 2px solid #EFF0F2;
    border-radius: 8px;
    margin-bottom: 10px;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(12, 1fr); /* 12 Spalten Grid */
    gap: 10px;
    padding: 10px;
    height: auto;
    min-width: 1200px;
}

@media screen and (max-width: 1800px) {
    .grid-container { zoom: 0.8; }
    .rectangle-grey-normal {
        width: 85px;
        height: 85px;
    }
    .rectangle-grey-small {
        width: 40px;
        height: 40px;
        border-radius: 9px;
    }
    .grid-container h1 {
        font-size: 2.1rem;
    }
}


.grid-item {
    color: #fff; /* Textfarbe für die Elemente */
    display: flex;
    justify-content: center;
    align-items: center;
}
/* Anpassung der Größen und Positionen der Elemente basierend auf dem Bild */
.item-1 {
    grid-area: 2 / 1 / 5 / 5;
    margin-bottom: -40px;
    margin-right: 10px;
}

.item-2 {
    grid-area: 1 / 5 / 4 / 9;
}

.item-3 {
    grid-area: 1 / 9 / 2 / 13;
}

.item-4 {
    grid-area: 7 / 9 / 1 / 12;
    margin-bottom: -19px;
}

.item-5 {
    grid-area: 2 / 5 / 5 / 8;
}

.grid-item.item-5 h1 {
    color: #333333;
}

.item-6 {
    grid-area: 5 / 8 / 4 / 8;
}

.item-7 {
    grid-area: 5 / 2 / 5 / 1;
}

.item-8 {
    grid-area: 5 / 5 / 5 / 2;
    margin-top: -50px;
}

.item-9 {
    grid-area: 6 / 8 / 4 / 5;
    height: 190px;
}
.item-9 img {
    height: 190px;
    margin-top: 53px;
}


.item-10 {
    grid-area: 5 / 8 / 5 / 10;
    margin-left: 10px;
}

.item-11 {
    grid-area: 5 / 4 / 5 / 5;
}

.item-12 {
    grid-area: 5 / 10 / 5 / 11;
    margin-left: -40px;
    margin-top: -20px;
}

.grid-container h1 {
    font-size: 2.5rem;
    /*letter-spacing: 1px;*/
    color: #000;
    line-height: 1.2;
}
.landingpage-content {
    margin-top: -100px;
}

.sticky-navbar {
    padding: 40px;
}
.symp-content {
    margin: 0 auto;
    max-width: 70%;
}

@media screen and (max-width: 855px) {
    .symp-content {
        margin: 0 auto;
        max-width: 90%;
    }
}

@media screen and (min-width: 856px) {
    .symp-content {
        margin: 0 auto;
        max-width: 80%;
    }
}


/* Ansprechpartner */

.contacts-container-landingpage {
    display: grid; /* Use a grid layout */
    grid-template-columns: repeat(3, 1fr); /* Create 3 equal-width columns */
    gap: 20px; /* Add space between the grid items */
    width: 100%; /* Ensure the container takes the full width of the parent */
    margin-top: 15px; /* Add spacing above the container */
}

.contact-info.contact-person {
    border-radius: 8px; /* Optional: rounded corners for the cards */
    padding: 20px;
    box-shadow: 0 18px 33px 0 rgba(0, 0, 0, 0.16);
    text-align: left;
}

.contact-info.contact-person img.avatar {
    width: 200px; /* Set a fixed width for the avatar */
    height: 200px;
    object-fit: cover; /* Ensures the image fits properly without distortion */
    border-radius: 5%; /* Make the image circular */
    margin-bottom: 10px; /* Add space below the avatar */
}

.contact-info.contact-person .fontstyle.person {
    font-style: normal;
    font-weight: 900;
    margin-bottom: 10px;
}

.contact-info.contact-person .fontstyle {
    color: #333333;
    font-size: 16px;
    font-weight: 400;
    line-height: 25.6px;
}

.contact-info.contact-person .fontstyle a {
    text-decoration: none; /* Remove underline */
}

.contact-info.contact-person .fontstyle a:hover {
    text-decoration: underline; /* Add underline on hover for better UX */
}

/* Responsive Design */
@media (max-width: 768px) {
    .contacts-container-landingpage {
        grid-template-columns: repeat(2, 1fr); /* Reduce to 2 columns on smaller screens */
    }
}

@media (max-width: 530px) {
    .contacts-container-landingpage {
        grid-template-columns: 1fr; /* Reduce to 1 column on very small screens */
    }
}


.contact-info {
    flex: 1 1 calc(33.333% - 20px);
    box-sizing: border-box;
    padding: 20px;
}


.fontstyle {
    margin: 10px 0;
    color: #333333;
    font-size: 16px;
    font-weight: 400;
    line-height: 25.6px;
}

.fontstyle.person {
    margin: 10px 0;
    color: #333333;
    font-size: 16px;
    font-weight: 700;
}

.fontstyle a {
    font-size: 16px;
    font-weight: 400;
    color: #333333;
}

.fontstyle a:hover {
    color: #00ac82;
    text-decoration: none;
}

@media (max-width: 1056px) and (min-width: 981px) {
    .contact-info {
        flex: 1 1 calc(50% - 20px);
    }
}

@media (max-width: 980px) {
    .contact-info {
        flex: 1 1 100%;
    }
}

.green-title{
    color: #00ac82;
}



.contacts-container-landingpage hr {
    display: none;
}

.contacts-container-landingpage .contact-info p.landing {
    display: none;
}


.contacts-container-landingpage .contact-info .avatar {
    width: 200px;
    height: 200px;
}

.contacts-container-landingpage .contact-info .phone-number {
    margin-top: 18px;
}

@media only screen and (max-width: 1080px) {
    .view-sympooverview #symposcaffehold .symp-content > .description-container {
        padding: 150px 0;
    }
}

@media only screen and (max-width: 840px) {
    .view-sympooverview #symposcaffehold .symp-content > .description-container {
        flex-wrap: wrap;
        row-gap: 60px;
    }
    .view-sympooverview #symposcaffehold .symp-content > .description-container .bold-text {
        text-align: left;
    }
}

@media only screen and (max-width: 529px) {
    .symp-content {
        max-width: 320px;
        padding-left: 0;
        padding-right: 0;
    }
}