/* General styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Lato', sans-serif;
    color: #333;
    line-height: 1.6;
}

/** anchor links - smooth scroll effect **/  
html {
    scroll-behavior: smooth;
  }

  :target {
    scroll-margin-top: 200px;  /* Passen Sie diesen Wert entsprechend der Höhe Ihrer Kopfzeile oder gewünschten Position an */
}

/* Header styles */
.logo-container {
    text-align: center;
    padding: 40px 0;
}

.logo {
    width: 300px;
}

.navbar {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background: #fff;
    padding: 10px 120px;
}

.navbar a {
    margin-right: 50px;
    padding: 10px;
    text-decoration: none;
    color: #333;
}

.navbar a:hover {
    color: #fff; /* Color changes to red on hover */
    padding: 10px;
    border-radius: 7px;
    background-color: #000;
}


.burger-menu {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.burger-menu div {
    width: 25px;
    height: 3px;
    background-color: #333;
    margin: 5px;
    transition: all 0.3s ease;
}

.hero {
    position: relative;
    background: url('img/IF24_Headerbild_LogistikUS.jpg') no-repeat center center/cover;
    height: 639px;
    display: flex;
    align-items: flex-end;
    padding-left: 120px;
    padding-bottom: 100px;
    color: #fff;
}

.hero .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
}

.hero .hero-text {
    position: relative;
    max-width: 50%;
    font-size: 42px;
    line-height: 1.2;
}

.hero-title-black {
    font-weight: 900;
}

.hero-title-regular {
    font-weight: 400;
}

@media (max-width: 1080px) {
    .hero .hero-text {
        font-size: 22px;
        line-height: 0.8;
    }
    .hero-title-black,
    .hero-title-regular {
        font-size: 72px;
        line-height: 1.2;
    }
}

@media (max-width: 768px) {
    .hero {
        height: 450px;
        padding: 0 80px 50px;
    }
    .hero .hero-text {
        font-size: 16px;
    }
    .hero-title-black,
    .hero-title-regular {
        font-size: 60px;
    }
}

@media (max-width: 480px) {
    .navbar {
        justify-content: space-between;
        padding: 10px 20px;
    }
    .navbar a {
        display: none;
    }
    .burger-menu {
        display: flex;
    }
    .hero {
        height: 350px;
        padding: 0 50px 30px;
    }
    .hero .hero-text {
        font-size: 12px;
        line-height: 0.7;
    }
    .hero-title-black,
    .hero-title-regular {
        font-size: 30px;
        line-height: 38px;
    }
    .navbar.active {
        flex-direction: column;
        align-items: flex-start;
    }
    .navbar.active a {
        display: block;
        background: #fff;
        padding: 10px 20px;
        margin: 5px 0;
        width: 100%;
        text-align: left;
    }
}

/* all */

h2 {
    color: #000;
    font-weight: 400;
    font-size: 1.25rem;
    margin-bottom: -5px; /* Adjusted margin-bottom to reduce spacing */
}

h3 {
    color: #84744d;
    font-weight: 500;
    font-size: 1.75rem;
    margin-bottom: 20px;
}

p {
    font-size: 1.1rem;
    margin-bottom: 10px;
    line-height: 1.6;
}



/* Summary section styles */
.summary {
    padding: 70px 0; /* Updated padding */
    background: #f6f6f5;
    text-transform: uppercase;
    text-align: left;
}

.summary-content {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    width: 100%;
}

.summary-item {
    width: 30%;
    text-align: center;
    position: relative; /* Damit die Linie korrekt positioniert werden kann */
    padding-bottom: 20px; /* Abstand für die Linie */
    line-height: 1.2; /* Updated line-height */
}

.summary-item h2 {
    font-weight: 400;
    margin-top: 10px;
    margin-bottom: 15px;
    font-size: 1.5rem;
}

.underline {
    width: 50%; /* Anpassung der Breite der Linie */
    height: 3px;
    background-color: #84744d; /* Farbe der Linie auf Gold setzen */
    margin: 20px auto 0; /* Zentrierung der Linie unter dem Text */
}

.summary-footer {
    padding: 0 0 0 9%;
    background: #f6f6f5;
    text-align: left;
}

.summary-footer-content {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    width: 100%;
}

.summary-footer-content-item {
    width: 100%;
    text-align: left;
    position: relative;
}

.summary-footer-content-item p {
    font-weight: 400;
    margin-top: 10px;
    margin-bottom: 15px;
    font-size: 0.625rem;
}

/* Media Queries für kleinere Bildschirme */
@media (max-width: 1080px) {
    .summary-content {
        flex-direction: column;
        align-items: center;
    }

    .summary-item {
        width: 90%;
        margin-bottom: 20px;
    }
}

@media (max-width: 768px) {
    .summary-content {
        flex-direction: column;
        align-items: center;
    }

    .summary-item {
        width: 90%;
        margin-bottom: 20px;
    }
}

@media (max-width: 480px) {
    .summary-content {
        flex-direction: column;
        align-items: center;
    }

    .summary-item {
        width: 90%;
        margin-bottom: 20px;
    }

    .summary-item h2 {
        font-size: 1rem;
    }

    .underline {
        width: 80%;
    }
}







/* Investing section styles */
.investing {
    padding: 40px 40px 40px 0; /* Ursprüngliches Padding */
    background: #fff;
    text-align: left;
}

.investment-content {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

.investment-image {
    flex: 1;
    max-width: 600px; /* Aktualisierte Breite */
    margin-right: 120px;
    padding-top: 10px;
    align-items: flex-start;
}

.investment-image img {
    width: 100%;
    height: auto;
    max-width: 600px; /* Stellt sicher, dass das Bild nicht über 600px breit wird */
}

.investment-text {
    flex: 1;
}





@media (max-width: 1080px) {
    .investment-content {
        flex-direction: column; /* Bild und Text vertikal anordnen */
        align-items: center; /* Zentriert die Inhalte horizontal */
    }

    .investment-image {
        max-width: 100%; /* Stellt sicher, dass das Bild sich an den Container anpasst */
        padding: 0 25%; /* Setzt das Padding links und rechts auf 25% */
        order: -1; /* Platziert das Bild über dem Text */
    }

    .investment-text {
        padding-left: 0; /* Entfernt Padding auf der linken Seite des Textes, falls vorhanden */
        text-align: center; /* Zentriert den Text */
    }
    
    .investing {
        padding: 40px 40px 40px 40px; /* Setzt das Padding auf allen Seiten */
    }
}

@media (max-width: 768px) {
    .investment-content {
        flex-direction: column;
        align-items: center;
    }
    
    .investment-image {
        max-width: 100%;
        padding: 0 25%;
        order: -1;
    }
    
    .investment-text {
        padding-left: 0;
        text-align: center;
    }
    
    .investing {
        padding: 40px 40px 40px 40px; /* Setzt das Padding auf allen Seiten */
    }
}

@media (max-width: 480px) {
    .investment-content {
        flex-direction: column;
        align-items: center;
    }
    
    .investment-image {
        max-width: 100%;
        padding: 0 25%;
        order: -1;
    }
    
    .investment-text {
        padding-left: 0;
        text-align: center;
    }
    
    .investing {
        padding: 40px 40px 40px 40px; /* Setzt das Padding auf allen Seiten */
    }
}






/* Quote section styles */

.quote {
    background: #f6f6f5;
    padding: 120px 25%;
    text-align: left;
    line-height: 1.3;
    position: relative;
    margin-bottom: 50px;
}

.quote p {
    display: inline;
    font-size: 2.8rem;
    color: #000 !important;
    font-weight: 500;
    font-style: italic;
    margin-left: 10px;
}

.quote q {
    font-size: 2.65rem;
    font-style: italic;
    font-weight: 500;
    line-height: 1.5;
}

@media (max-width: 1080px) {
    .quote .quote-icon {
        padding-left: 15%;
    }
}

@media (max-width: 768px) {
    .quote .quote-icon {
        padding-left: 10%;
    }
    .quote p {
        font-size: 1.5rem;
    }
    .quote q {
        font-size: 1.4rem;
        font-style: italic;
        font-weight: 500;
        line-height: 1.5;
        text-align: center;
        justify-content: center; 
    }
}

@media (max-width: 480px) {
    .quote .quote-icon {
        width: 38px;
        height: 90px;
    }
    .quote p {
        font-size: 1rem;
        font-style: italic;
        font-weight: 500;
        line-height: 1.5;
        text-align: center;
        justify-content: center; 
    }
    .quote q {
        font-size: 1rem;
        font-style: italic;
        font-weight: 500;
        line-height: 1.5;
        text-align: center;
        justify-content: center; 
    }
}









/* Reasons section styles */
.reasons {
    padding: 50px 20px;
    background: #fff;
    text-align: left;
    position: relative; /* Ensure relative positioning for overlap */
    z-index: 0;
}

.reasons h2,
.reasons h3 {
    padding-left: 10%;
}

.reasons h2 {
    color: #000;
    font-weight: 400;
    font-size: 1.25rem;
    text-transform: uppercase;
    margin-bottom: -5px; /* Adjusted margin-bottom to reduce spacing */
}

.reasons h3 {
    color: #84744d;
    font-weight: 500;
    font-size: 1.75rem;
    margin-bottom: 20px;
}

.reason-content {
    display:flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    gap: 7px;
    height: auto;
}

.reason-item {
    width: 30%;
    height: 0;
    padding-bottom: 22%;
    text-align: center;
    color: #fff;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: 600;
    font-size: 1rem;
    overflow: hidden;
    transition: height 0.3s ease, max-height 0.3s ease;
    z-index: 0;
}

.reason-item.gray {
    background-color: #878888;
}

.reason-item.black {
    background-color: #000;
}

.reason-item.gold {
    background-color: #84744d;
}

.reason-number {
    font-size: 1.5rem;
    padding: 10px;
    margin: 5% 0 0 0;
    border: 2px solid #fff;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
}

.reason-item p {
    font-weight: 600;
    line-height: 0.75rem;
    margin: auto 0;
    padding-top: 35%;
    white-space: pre-line;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.learn-more-reasons {
    margin-top: auto;
    margin-bottom: 10%;
    margin-top: 4%;
    padding:1%;
    display: block;
    text-decoration: none;
    color: #fff;
    font-weight: 400;
    font-size: 1.1rem;
    align-self: center; /* Center the link horizontally */
    border: 2px solid white;
}

.reason-text {
    display: none;
    margin-top: 10px;
    font-size: 1.1rem;
    color: #fff;
    text-align: left;
    padding: 30px;
    font-weight: 400;
}

.reason-item.expanded {
    height: auto;
    max-height: 800px; /* Large enough to fit all text */
    z-index: 1;
    position: relative; /* Maintain relative position to keep horizontal alignment */
}

@media (max-width: 1080px) {
    .reason-item {
        font-size: 0.6rem;
    }
    .reason-number {
        font-size: 1rem;
        width: 30px;
        height: 30px;
    }
    .learn-more-reasons {
        font-size: 0.8rem;
        margin-bottom: 10%;
    }
    .reason-item p {
        font-weight: 600;
        line-height: 0.6rem;
        margin: auto 0;
        padding-top: 35%;
        font-size: 0.8rem;
        white-space: pre-line;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1;
    }
}

@media (max-width: 768px) {
    .reason-content {
        flex-direction: column;
        align-items: center;
    }
    .reason-item {
        width: 50%;
        padding-bottom: 50%;
        margin-bottom: 20px;
        font-size: 1.2rem;
    }
    .reason-number {
        font-size: 1.5rem;
        width: 40px;
        height: 40px;
    }
    .learn-more-reasons {
        font-size: 0.8rem;
        margin-bottom: 10%;
    }
    .reasons h2,
    .reasons h3 {
        text-align: center; /* Center align the headings */
        padding-left: 0; /* Remove padding */
    }
    .reason-item.expanded {
        height: auto;
        max-height: 700px; /* Large enough to fit all text */
        z-index: 1;
        position: relative; /* Maintain relative position to keep horizontal alignment */
    }
}

@media (max-width: 480px) {
    .reason-number {
        font-size: 1.2rem;
        width: 35px;
        height: 35px;
    }
    .learn-more-reasons {
        font-size: 0.7rem;
        margin-bottom: 10%;
    }
    .reason-item {
        font-size: 0.6rem;
        width: 60%;
    }
    .reason-item.expanded {
        height: auto;
        max-height: 800px; /* Large enough to fit all text */
        z-index: 1;
        position: relative; /* Maintain relative position to keep horizontal alignment */
    }
}



/* R Austin section styles */

.austin {
    background-color: #f6f6f5;
    padding: 50px 0% 50px 10%;
    display: flex;
    align-items: center;
}

.austin-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
}

.austin-text {
    flex: 1;
    text-align: left;
    padding-right: 80px; /* Add padding-right */
}


.austin-image {
    flex: 1;
    max-width: 600px; /* Reduce the max-width to half */
    position: relative;
    right: 0; /* Change right to 0 */
    vertical-align: top;
}

.austin-image img {
    width: 100%;
    height: auto;
    max-width: 600px;
    vertical-align: top;
    padding-top: 10px;
}

.download-link {
    display: inline-block;
    color: #84744d;
    text-decoration: none;
    font-weight: 400;
    font-size: 1rem;
    margin-top: 20px;
}

.austin-header {
    text-align: left;
    margin-bottom: 40px;
}

.austin-header h2 {
    color: #000;
    font-weight: 400;
    font-size: 1.25rem;
    text-transform: uppercase;
}

.austin-header h3 {
    color: #84744d;
    font-weight: 500;
    font-size: 1.75rem;
    margin-bottom: 20px;
}

@media (max-width: 1080px) {
    .austin {
        flex-direction: column;
        padding: 0; /* Remove padding */
    }
    .austin-content {
        flex-direction: column;
    }
    .austin-text {
        text-align: center;
        padding: 50px 5% 50px 5%; /* Add padding top 50px, left 5%, right 5%, bottom 50px */
    }
    .austin-image {
        display: none; /* Hide the image for screen widths less than 1080px */
    }
    .download-link {
        margin: 0 auto;
    }
}






/* Location section styles */
.location {
    background-color: #f6f6f5;
    padding: 40px 0 40px 120px;
    text-align: left;
}

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

.location-text {
    flex: 1;
    padding-right: 40px;
}



.location-text p {
    margin-bottom: 20px;
    line-height: 1.6;
}

.location-image {
    flex: 1;
    max-width: 600px;
    padding-top: 10px;
}

.location-image img {
    width: 100%;
    height: auto;
}

@media (max-width: 1080px) {
    .location {
        padding: 20px 60px;
    }
    .location-content {
        flex-direction: column;
        align-items: flex-start;
    }
    .location-image {
        max-width: 100%;
        margin-top: 20px;
    }
}

@media (max-width: 768px) {
    .location {
        padding: 20px 40px;
    }
}

@media (max-width: 480px) {
    .location {
        padding: 20px;
    }
    .location-text h2 {
        font-size: 1.25rem;
    }
    .location-text h3 {
        font-size: 1.75rem;
    }
}

.abstand {
    width: auto;
    height: 50px;
}







/* Silicon Hills section styles */
.siliconehills {
    background: url('img/paketbild_black.jpg') no-repeat center center/cover;
    color: #fff;
    text-align: center;
    position: relative;
    padding: 0 10%;
}

.siliconehills-content {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    position: relative; /* Important for absolute positioning of dividers */
}

.tile {
    background: none;
    padding: 20px;
    flex: 1 1 20%;
    position: relative;
    height: 520px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
    overflow: hidden;
}

.tile svg {
    margin-top: auto; /* Push the SVG to the bottom */
    margin-bottom: 50px; /* Add some margin to separate from the bottom */
    z-index: 1; /* Ensure the SVG is above the background */
}

.tile h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 0px;
    margin-top: 100%;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.tile .hover-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.3s ease;
    text-align: center;
    width: 100%;
    padding: 20px;
    color: #000;
}

.tile:hover .hover-content {
    opacity: 1;
}

.tile:hover h3 {
    opacity: 0;
}

.tile:hover svg {
    opacity: 0;
}

.tile .hover-content strong {
    display: block;
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 10px;
}

.tile .hover-content span {
    font-size: 1rem;
    font-weight: normal;
}

.tile::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.tile:hover::before {
    opacity: 1;
}

.divider {
    position: absolute;
    top: 0;
    width: 3px;
    height: 100%;
    background: rgb(255, 255, 255);
    pointer-events: none; /* Make sure dividers don't interfere with interactions */
}

#divider-1 {
    left: 25%; /* Adjust these values as needed */
}

#divider-2 {
    left: 50%; /* Adjust these values as needed */
}

#divider-3 {
    left: 75%; /* Adjust these values as needed */
}

@media (max-width: 1080px) {
    .siliconehills-content {
        padding: 0 10%;
    }
    .tile {
        flex: 1 1 45%;
        max-width: 45%;
        height: 390px;
    }
    .divider {
        position: absolute;
        top: 0;
        width: 3px;
        height: 100%;
        background: rgb(255, 255, 255, 0);
        pointer-events: none; /* Make sure dividers don't interfere with interactions */
    }
}

@media (max-width: 768px) {
    .siliconehills-content {
        padding: 0 10%;
    }
    .tile {
        flex: 1 1 100%;
        max-width: 100%;
        height: 260px;
    }
    .tile .hover-content,
    .tile::before {
        opacity: 1; /* Stellen Sie sicher, dass sowohl der Inhalt als auch die weiße Fläche immer sichtbar sind */
        background: rgba(255, 255, 255, 0.5); /* Weiß mit 50% Opacity */
    }
    .tile h3,
    .tile svg {
        display: none; /* Versteckt das h3 und das SVG */
    }
    .divider {
        position: absolute;
        top: 0;
        width: 3px;
        height: 100%;
        background: rgb(255, 255, 255, 0);
        pointer-events: none; /* Make sure dividers don't interfere with interactions */
    }
}



@media (max-width: 480px) {
    .siliconehills-content {
        padding: 0 10%;
    }
    .tile {
        flex: 1 1 100%;
        max-width: 100%;
        height: 350px; /* Erhöhte Höhe auf 350px */
    }
    .divider {
        position: absolute;
        top: 0;
        width: 3px;
        height: 100%;
        background: rgb(255, 255, 255, 0);
        pointer-events: none; /* Make sure dividers don't interfere with interactions */
    }
}











/* Gap Titles section styles */
.gaptitles {
    background-color: #fff;
    text-align: center;
    padding: 40px 10%;
}

.gaptitles-content {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
}

.title-item {
    flex: 1 1 45%;
    margin: 10px;
    position: relative;
}

.title-item h2 {
    font-size: 1.25rem;
    color: #000;
    margin-bottom: 10px;
    font-weight: 400;
}

.underline {
    width: 50%;
    height: 3px;
    background-color: #84744d;
    margin: 0 auto;
}

@media (max-width: 1080px) {
    .gaptitles-content {
        flex-direction: column;
    }
    .title-item {
        flex: 1 1 100%;
        margin-bottom: 20px;
    }
    .title-item h2 {
        font-size: 1.2rem;
    }
    .underline {
        width: 70%;
    }
}

@media (max-width: 768px) {
    .title-item h2 {
        font-size: 1rem;
    }
    .underline {
        width: 80%;
    }
}

@media (max-width: 480px) {
    .title-item h2 {
        font-size: 0.9rem;
    }
    .underline {
        width: 90%;
    }
}












/* Logistikimmobilien section styles */
.logistikimmobilien {
    padding: 40px 40px 40px 0; /* Ursprüngliches Padding */
    background: #f6f6f5; /* Hellgrauer Hintergrund */
    text-align: left;
}

.logistikimmobilien .investment-content {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

.logistikimmobilien .investment-image {
    flex: 1;
    max-width: 600px; /* Aktualisierte Breite */
    margin-right: 120px;
    padding-top: 10px;
    align-items: flex-start;
}

.logistikimmobilien .investment-image img {
    width: 100%;
    height: auto;
    max-width: 600px; /* Stellt sicher, dass das Bild nicht über 600px breit wird */
}

.logistikimmobilien .investment-text {
    flex: 1;
}

.logistikimmobilien h2 {
    color: #000;
    font-weight: 400;
    font-size: 1.25rem;
}

.logistikimmobilien h3 {
    color: #84744d;
    font-weight: 500;
    font-size: 1.75rem;
    margin-bottom: 20px;
}



@media (max-width: 1080px) {
    .logistikimmobilien .investment-content {
        flex-direction: column; /* Bild und Text vertikal anordnen */
        align-items: center; /* Zentriert die Inhalte horizontal */
    }

    .logistikimmobilien .investment-image {
        max-width: 100%; /* Stellt sicher, dass das Bild sich an den Container anpasst */
        padding: 0 25%; /* Setzt das Padding links und rechts auf 25% */
        order: -1; /* Platziert das Bild über dem Text */
    }

    .logistikimmobilien .investment-text {
        padding-left: 0; /* Entfernt Padding auf der linken Seite des Textes, falls vorhanden */
        text-align: center; /* Zentriert den Text */
    }
    
    .logistikimmobilien {
        padding: 40px 40px 40px 40px; /* Setzt das Padding auf allen Seiten */
    }
}

@media (max-width: 768px) {
    .logistikimmobilien .investment-content {
        flex-direction: column;
        align-items: center;
    }
    
    .logistikimmobilien .investment-image {
        max-width: 100%;
        padding: 0 25%;
        order: -1;
    }
    
    .logistikimmobilien .investment-text {
        padding-left: 0;
        text-align: center;
    }
    
    .logistikimmobilien {
        padding: 40px 40px 40px 40px; /* Setzt das Padding auf allen Seiten */
    }
}

@media (max-width: 480px) {
    .logistikimmobilien .investment-content {
        flex-direction: column;
        align-items: center;
    }
    
    .logistikimmobilien .investment-image {
        max-width: 100%;
        padding: 0 25%;
        order: -1;
    }
    
    .logistikimmobilien .investment-text {
        padding-left: 0;
        text-align: center;
    }
    
    .logistikimmobilien {
        padding: 40px 40px 40px 40px; /* Setzt das Padding auf allen Seiten */
    }
}













/* Investment Strategy section styles */
.investment-strategy {
    background-color: #fff;
    padding: 50px 10% 50px 10%;
    display: flex;
    align-items: center;
}

.strategy-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.strategy-text {
    flex: 1;
    text-align: left;
}





.strategy-image {
    flex: 1;
    max-width: 600px;
    position: relative;
    right: -10%;
}

.strategy-image img {
    width: 100%;
    height: auto;
}

.learn-more-strategy {
    display: inline-block;
    color: #84744d;
    text-decoration: none;
    font-weight: 400;
    font-size: 1rem;
    margin-top: 20px;
}

@media (max-width: 1080px) {
    .investment-strategy {
        flex-direction: column;
        padding: 0; /* Remove padding */
    }
    .strategy-content {
        flex-direction: column;
    }
    .strategy-text {
        text-align: center;
        padding: 50px 5% 50px 5%; /* Add padding top 50px, left 5%, right 5%, bottom 50px */
    }
    .strategy-image {
        max-width: 100%;
        padding: 0 0 50px 50%; /* Add padding left 50%, bottom 50px, right 0 */
        right: 0;
    }
    .learn-more-strategy {
        margin: 0 auto;
    }
}





/* quote2 section styles */
.quote2 {
    background: url('img/privatanleger_bild_dark_250624.jpg') no-repeat center center/cover;
    height: 500px;
    padding: 10%;
    text-align:center;
    line-height: 1.3;
    position: relative;
}

.quote2 p {
    display: inline;
    font-size: 2rem;
    color: #fff;
    font-weight: 500;
    text-align: center;
}

.quote2 q {
    font-size: 2.65rem;
    font-weight: 500;
    line-height: 1.0;
    color:#fff;
}

.quote2 .quote-icon {
    position: absolute;
    top: 0;
    left: 0;
    margin-right: 10px;
    padding-left: 20%;
    transform: translate(0, 25%);
}

.quote2-footer {
    padding: 3% 3% 0 9%;
    text-align: right;
}

.quote2-footer-content {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    width: 100%;
}

.quote2-footer-content-item {
    width: 100%;
    text-align: right;
    position: relative;
}

.quote2-footer-content-item p {
    font-weight: 400;
    margin-top: 10px;
    margin-bottom: 15px;
    font-size: 0.625rem;
}

@media (max-width: 1080px) {
    .quote2 .quote-icon {
        padding-left: 15%;
    }
}

@media (max-width: 768px) {
    .quote2 .quote-icon {
        padding-left: 10%;
    }
    .quote2 p {
        font-size: 1.5rem;
    }
    .quote2 q {
        font-size: 1.4rem;
        font-weight: 500;
        line-height: 1.5rem;
        color:#fff;
        display: flex; 
        align-items: center;
        justify-content: center;
        margin:auto;
    }
    .quote2-footer-content-item p {
        font-weight: 400;
        margin-top: 10px;
        margin-bottom: 15px;
        font-size: 0.625rem;
    }
}

@media (max-width: 480px) {
    .quote2 .quote-icon {
        width: 38px;
        height: 90px;
    }
    .quote2 p {
        font-size: 1rem;
    }
    .quote2 q {
        font-size: 1.4rem;
        font-weight: 500;
        line-height: 1.5rem;
        color:#fff;
        display: flex; 
        align-items: center;
        justify-content: center;
        margin:auto;
    }
    .quote2-footer-content-item p {
        font-weight: 400;
        margin-top: 10px;
        margin-bottom: 15px;
        font-size: 0.625rem;
    }
}

/* gaptitles2 section styles */
.gaptitles2 {
    background-color: #fff;
    text-align: center;
    padding: 40px 10%;
}

.gaptitles2 .gaptitles-content {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
}

.gaptitles2 .title-item {
    flex: 1 1 45%;
    margin: 20px;
    position: relative;
}

.gaptitles2 .title-item h2 {
    font-size: 1.25rem;
    color: #000;
    margin-bottom: 10px;
    font-weight: 400;
}

.gaptitles2 .underline {
    width: 50%;
    height: 3px;
    background-color: #84744d;
    margin: 0 auto;
}

.gaptitles2 .gold-text {
    color: #84744d;
}

@media (max-width: 1080px) {
    .gaptitles2 .gaptitles-content {
        flex-direction: column;
    }
    .gaptitles2 .title-item {
        flex: 1 1 100%;
        margin-bottom: 20px;
    }
    .gaptitles2 .title-item h2 {
        font-size: 1.2rem;
    }
    .gaptitles2 .underline {
        width: 70%;
    }
}

@media (max-width: 768px) {
    .gaptitles2 .title-item h2 {
        font-size: 1rem;
    }
    .gaptitles2 .underline {
        width: 80%;
    }
}

@media (max-width: 480px) {
    .gaptitles2 .title-item h2 {
        font-size: 0.9rem;
    }
    .gaptitles2 .underline {
        width: 90%;
    }
}





/* investmentfonds section styles */
.investmentfonds {
    background-color: #f6f6f5;
    padding: 40px 0 40px 90px;
    text-align: left;
}

.investmentfonds .location-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.investmentfonds .location-text {
    flex: 1;
    text-align: left;
    padding-right: 80px;
}

.investmentfonds .location-text p {
    margin: auto 0; /* Zentriert den Text vertikal zwischen den Überschriften und den Icons */
    line-height: 1.8;
}



.investmentfonds .fond-location-image {
    flex: 1;
    max-width: 600px; /* Reduce the max-width to half */
    position: relative;
    right: 0; /* Change right to 0 */
    vertical-align: top;
}

.investmentfonds .fond-location-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Stellt sicher, dass das Bild den Container ausfüllt */
}

.marker {
    position: absolute;
    width: 120px; /* Größe der Marker auf der Karte */
    height: 120px;
    background: none; /* Entfernt den Hintergrund */
    cursor: pointer;
}

.marker.gold {
    width: 140px; /* Größe der Marker auf der Karte */
    height: 140px;
}

.marker:hover::after {
    content: attr(data-city);
    position: absolute;
    top: 50%; /* Zeigt das Textfeld mittig an der Stelle */
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    white-space: nowrap;
    opacity: 0.8;
    z-index: 10; /* Damit das Tooltip über anderen Elementen liegt */
}

.marker.gold:hover::after {
    background: rgba(255, 215, 0, 0.7); /* Goldener Hintergrund für goldene Marker */
}

/* Styles für die Icons */
.icons {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 40px; /* Abstand zwischen den Icons */
}

.icon-item {
    display: flex;
    flex-direction: column;
    align-items: left;
    text-align: left;
}

.icon-item img {
    width: 40px; /* Größe der Icons */
    height: 40px;
    margin-bottom: 10px;
}

.icon-item p {
    font-size: 0.875rem;
    color: #333;
    line-height: 1.2;
}

@media (max-width: 1080px) {
    .investmentfonds {
        padding: 20px 60px;
    }
    .investmentfonds .location-content {
        flex-direction: column;
        align-items: flex-start;
    }
    .investmentfonds .location-image-container {
        width: 100%;
        margin-top: 20px;
    }
    .marker {
        width: 70px; /* Größe der Marker auf der Karte */
        height: 70px;
    }
}

@media (max-width: 768px) {
    .investmentfonds {
        padding: 20px 40px;
    }
    .marker.gold {
        width: 100px; /* Größe der Marker auf der Karte */
        height: 100px;
    }
    .marker {
        width: 70px; /* Größe der Marker auf der Karte */
        height: 70px;
    }
}

@media (max-width: 480px) {
    .investmentfonds {
        padding: 20px;
    }
    .investmentfonds .location-text h2 {
        font-size: 1.25rem;
    }
    .investmentfonds .location-text h3 {
        font-size: 1.5rem;
    }
    .icons {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px; /* Anpassung des Abstands für kleinere Bildschirme */
    }
    .icon-item {
        flex-direction: row;
    }
    .icon-item img {
        margin-right: 10px;
        margin-bottom: 0;
    }
    .marker.gold {
        width: 80px; /* Größe der Marker auf der Karte */
        height: 80px;
    }
    .marker {
        width: 60px; /* Größe der Marker auf der Karte */
        height: 60px;
    }
}















/* Zugang section styles */
.zugang {
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 40px 0;
}

.zugang-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    padding-right: 120px;
}

.zugang-image {
    flex: 1;
    max-width: 600px;
    margin-right: 120px;
    padding-top: 10px;
    align-items: flex-start;
}

.zugang-image img {
    width: 100%;
    height: auto;
    max-width: 600px;
}

.zugang-text {
    flex: 1;
}





@media (max-width: 1080px) {
    .zugang-content {
        flex-direction: column-reverse;
        padding: 0 60px;
    }
    .zugang-image {
        max-width: 100%;
        margin-top: 20px;
    }
    .zugang-text {
        padding-left: 0;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .zugang-content {
        padding: 0 40px;
    }
}

@media (max-width: 480px) {
    .zugang-content {
        padding: 0 20px;
    }
    .zugang-text h2 {
        font-size: 1.25rem;
    }
    .zugang-text h3 {
        font-size: 1.5rem;
    }
}





/* Press section styles */
.press {
    background-color: #f6f6f5;
    padding: 40px 120px;
}

.press-header {
    text-align: left;
    margin-bottom: 40px;
}



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

.press-item {
    text-align: center;
    width: 30%;
}

.press-item img {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
}



.learn-more-press {
    display: inline-block;
    color: #84744d;
    text-decoration: none;
    font-weight: 400;
    font-size: 1rem;
    margin-top: 20px;
}

@media (max-width: 1080px) {
    .press {
        padding: 40px 60px;
    }
    .press-content {
        flex-direction: column;
        align-items: center;
    }
    .press-item {
        width: 100%;
        margin-bottom: 40px;
    }
    .press-item img {
        padding-left: 25%;
        padding-right: 25%;
    }
}

@media (max-width: 768px) {
    .press {
        padding: 40px 40px;
    }
}

@media (max-width: 480px) {
    .press {
        padding: 40px 20px;
    }
    .press-header h2 {
        font-size: 1.25rem;
    }
    .press-header h3 {
        font-size: 1.75rem;
    }
}







/* Advantages section styles */
.advantages {
    background-color: #f6f6f5;
    padding: 40px 120px;
}

.advantages-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.advantage-row {
    display: flex;
    width: 100%;
    margin-bottom: 80px;
}

.advantage-item {
    text-align: center;
    width: 30%;
}

.advantage-item h2 {
    color: #000;
    font-weight: 400;
    font-size: 1.25rem;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.underline {
    width: 50%;
    height: 3px;
    border-top: 5px;
    background-color: #84744d;
    margin: 0 auto;
}

.advantage-header {
    text-align: center;
    margin-bottom: 40px;
}

.advantage-header h3 {
    color: #84744d;
    font-weight: 500;
    font-size: 1.75rem;
    margin-bottom: 20px;
}

.advantage-footer {
    padding: 2% 0 0 0;
    text-align: left;
}

.advantage-footer-content {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    width: 100%;
}

.advantage-footer-content-item {
    width: 100%;
    text-align: left;
    position: relative;
}

.advantage-footer-content-item p {
    font-weight: 400;
    margin-top: 10px;
    margin-bottom: 15px;
    font-size: 0.625rem;
}

/* Specific justification for rows */
.advantage-row:nth-child(1) {
    justify-content: space-between;
}

.advantage-row:nth-child(2) {
    justify-content: space-evenly;
}


@media (max-width: 1080px) {
    .advantages {
        padding: 40px 60px;
    }
    .advantage-row {
        flex-direction: column;
        align-items: center;
        margin-bottom: 0; /* Remove bottom margin for screen widths less than 1080px */
    }
    .advantage-item {
        width: 100%;
        margin-bottom: 20px;
    }
    .underline {
        width: 70%;
    }
}

@media (max-width: 768px) {
    .advantages {
        padding: 40px 40px;
    }
}

@media (max-width: 480px) {
    .advantages {
        padding: 40px 20px;
    }
    .advantage-item h2 {
        font-size: 1.25rem;
    }
    .underline {
        width: 80%;
    }
}



.risks {
    background-color: #fff;
    padding: 40px 10%; /* Set padding to 10% on left and right, 40px on top and bottom */
    display: flex;
    align-items: center;
}

.risks-content {
    display: flex;
    justify-content: center; /* Center align since there's no video */
    align-items: center;
    width: 100%;
}

.risks-text {
    flex: 1;
    text-align: left;
    /* Removed padding-left: 40px; */
}

.risks-text h2 {
    color: #000;
    font-weight: 400;
    font-size: 1.25rem;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.risks-text h3 {
    color: #84744d;
    font-weight: 500;
    font-size: 1.75rem;
    margin-bottom: 20px;
}



.risks-footnotes {
    text-align: left;
    font-size: 0.8rem;
    color: #333;
    margin-top: 0; /* Adjusted margin-top to bring footnotes closer to "MEHR ERFAHREN" */
}




/* Logistik section styles */
.logistik {
    background-color: #f6f6f5;
    padding: 50px 0% 50px 10%;
    display: flex;
    align-items: center;
}

.logistik-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
}

.logistik-text {
    flex: 1;
    text-align: left;
    padding-right: 80px; /* Add padding-right */
}





.logistik-image {
    flex: 1;
    max-width: 600px; /* Reduce the max-width to half */
    position: relative;
    right: 0; /* Change right to 0 */
    vertical-align: top;
}

.logistik-image img {
    width: 100%;
    height: auto;
    vertical-align: top;
    padding-top: 10px; /* entfernt jeglichen rechten Rand */
}

.download-link {
    display: inline-block;
    color: #84744d;
    text-decoration: none;
    font-weight: 400;
    font-size: 1rem;
    margin-top: 20px;
}

@media (max-width: 1080px) {
    .logistik {
        flex-direction: column;
        padding: 0; /* Remove padding */
    }
    .logistik-content {
        flex-direction: column;
        align-items: flex-start;
    }
    .logistik-text {
        text-align: center;
        padding: 50px 5% 50px 5%; /* Add padding top 50px, left 5%, right 5%, bottom 50px */
    }
    .logistik-image {
        display: none; /* Hide the image for screen widths less than 1080px */
    }
    .download-link {
        margin: 0 auto;
    }
}







.logistikvideo {
    background-color: #fff;
    padding: 40px 15% 40px 15%;
    text-align: center; /* Zentriert die Überschrift */
}

.logistikvideo-content {
    width: 100%; /* Streckt den Inhalt über die volle Breite */
}

.logistikvideo-video {
    width: 100%; /* Streckt das Video über die volle Breite */
    height: auto;
}


.logistikvideo-subtitle {
    margin: 0;
    padding-bottom: 20px;
}

@media (max-width: 1080px) {
    .logistikvideo-content {
        padding: 0;
    }
}

@media (max-width: 768px) {
    .logistikvideo-content {
        padding: 0;
    }
}

@media (max-width: 480px) {
    .logistikvideo-title {
        font-size: 1.25rem;
    }
    .logistikvideo-subtitle {
        font-size: 1.75rem;
    }
}




/* Webinar section styles */
.webinar {
    background-color: #fff;
    padding: 40px 10%; /* Set padding to 10% on left and right, 40px on top and bottom */
    display: flex;
    align-items: center;
}

.webinar-content {
    display: flex;
    justify-content: center; /* Center align since there's no video */
    align-items: center;
    width: 100%;
}

.webinar-text {
    flex: 1;
    text-align: left;
    /* Removed padding-left: 40px; */
}





.learn-more-webinar {
    display: inline-block;
    color: #84744d;
    text-decoration: none;
    font-weight: 400;
    font-size: 1rem;
    margin-top: 20px;
    margin-bottom: 70px; /* Added margin-bottom: 70px; */
}

.webinar-footnotes {
    text-align: left;
    font-size: 0.8rem;
    color: #333;
    margin-top: 0; /* Adjusted margin-top to bring footnotes closer to "MEHR ERFAHREN" */
}

@media (max-width: 1080px) {
    .webinar-content {
        flex-direction: column;
        padding: 0;
    }
    .webinar-text {
        text-align: center;
        padding: 50px 5% 50px 5%; /* Adjusted padding for smaller screens */
    }
    .learn-more-webinar {
        margin: 0 auto 70px;
    }
    .webinar-footnotes {
        padding: 0 5%;
    }
}

@media (max-width: 768px) {
    .webinar-content {
        padding: 0;
    }
    .webinar-text {
        padding: 50px 5% 50px 5%;
    }
    .learn-more-webinar {
        margin: 0 auto 70px;
    }
    .webinar-footnotes {
        padding: 0 5%;
    }
}

@media (max-width: 480px) {
    .webinar-content {
        padding: 0;
    }
    .webinar-text h2 {
        font-size: 1.25rem;
    }
    .webinar-text h3 {
        font-size: 1.75rem;
    }
    .learn-more-webinar {
        margin: 0 auto 70px;
    }
    .webinar-footnotes {
        padding: 0 5%;
    }
}














/* General styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

body {
    font-family: 'Lato', sans-serif;
    color: #333;
    line-height: 1.6;
}

/* Footer section styles */
.footer-wrapper {
    width: 100%;
    background-color: #000; /* Hintergrundfarbe für den gesamten Footer auf Schwarz gesetzt */
    padding: 0; /* Entfernen von Padding */
    margin: 0; /* Entfernen von Margin */
}

.footer {
    width: 100%;
    background-color: #000;
    color: #fff;
    padding: 40px 120px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-end; /* Align items at the bottom */
    flex-grow: 1;
    width: 100%;
}

.footer-left, .footer-center, .footer-right {
    flex: 1;
}

.footer-left {
    text-align: left;
}

.footer-left h2 {
    color: #84744d;
    font-weight: 400;
    margin-bottom: 10px;
}

.footer-left p {
    line-height: 1.6;
    font-size: 0.8rem; /* Adjusted to match the copyright font size */
}

.footer-center {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-logo {
    width: 300px; /* Doubled the size */
    margin-bottom: 50px; /* Adjusted margin-bottom to 50px */
}

.footer-center p {
    font-size: 0.8rem;
    margin-top: 10px;
}

.footer-right {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.footer-right .social-icons {
    margin-bottom: 10px;
}

.footer-right .social-icons a {
    margin: 0 5px;
}

.footer-right .social-icons img {
    width: 30px;
    height: 30px;
}

.footer-right p {
    font-size: 0.8rem;
}

.footer-right p a {
    color: #fff;
    text-decoration: none;
    margin: 0 5px;
}

.footer-right p a:hover {
    text-decoration: underline;
}

/* Media queries for footer */
@media (max-width: 1080px) {
    .footer {
        padding: 40px 60px;
    }
    .footer-content {
        flex-direction: column;
        align-items: flex-start;
    }
    .footer-left, .footer-center, .footer-right {
        flex: none;
        margin-bottom: 20px;
    }
    .footer-center {
        text-align: left;
    }
    .footer-right {
        text-align: left;
    }
}