* Überall, wo nichts anderes steht: Hintergrund WEISS, Schrift SCHWARZ */
body {
font-family: 'Montserrat', cursive;
line-height: 1.8;
}
/* 1. Header (Logo + Portrait nebeneinander oben) */
.top-header {
background-color: #8faea0;
padding:20px 40px;
display: flex;
flex-direction: row;
align-items: center;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.header-images {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 35px;
margin-bottom: 15px;
color: #ffffff !important;
font-size: 3.5rem;
font-weight: 600;
font-family: 'Montserrat' , cursive !important;
padding-bottom: 10px;
flex: 1;
text-align: center;
}

.header-welcome-text {
    line-height: 1.2;
    max-width: 70%;
}

.header-logo, .header-portrait {
max-height: 200px;
width: auto;
border-radius: 6px;
}
/* Ab hier gelten die Regeln für Handys und kleine Tablets (Unterseiten-Optimierung) */
@media (max-width: 768px) {

  .top-header {
    /* Ändert die Zeile (row) in eine Spalte (column), damit alles untereinander steht */
    flex-direction: column;
    /* Weniger Abstand an den Seiten für mehr Platz */
    padding: 15px 15px;
    /* Zentriert alle Blöcke im Header */
    align-items: center;
    text-align: center;
  }

  .header-images {
    /* Stapelt Logo und Portrait (oder Text darin) mobil untereinander */
    flex-direction: column;
    /* Verringert den Riesen-Abstand zwischen den Elementen */
    gap: 15px;
    /* Macht die Riesenschrift passend fürs Handy */
    font-size: 2.2rem;
    margin-bottom: 10px;
    /* Breite auf 100% setzen, damit es sich schön zentriert */
    width: 100%;
    justify-content: center;
  }

  .header-welcome-text {
    /* Hebt die Begrenzung von 70% auf – auf dem Handy darf der Text die volle Breite nutzen */
    max-width: 100%;
    /* Etwas Abstand nach oben, falls es unter den Bildern steht */
    margin-top: 10px;
    /* Schön lesbare Schriftgröße für mobile Endgeräte */
    font-size: 1.1rem; 
  }

  .header-logo, .header-portrait {
    /* Verkleinert die Bilder, damit sie nebeneinander oder untereinander Platz haben */
    max-height: 120px;
    max-width: 100%;
    height: auto;
  }

}




/* Layout für die Aufteilung (Text links, Bild rechts) */
.split-layout-container {
display: flex;
width: 100%;
min-height: calc(100vh - 160px); /* Nutzt den restlichen Platz unter dem Banner */
background-color: #ffffff;
}

/* Linke Textspalte */
.left-text-column {
width: 50%;
padding: 60px 50px 60px 80px; /* Schön viel Platz zu den Rändern */
text-align: left !important;
background-color: #ffffff;
}

.left-text-column h2 {
font-size: 2.2rem;
color: #8faea0;
margin-bottom: 25px;
background-color: #ffffff;
 font-family: 'Montserrat', cursive;
}

.left-text-column h3 {
font-size: 1.3rem;
color: #000000;
margin-top: 35px;
margin-bottom: 15px;
background-color: #ffffff;
 font-family: 'Montserrat', cursive;
}

.left-text-column p {
    font-family: 'Montserrat';
font-size: 1.15rem;
color: #000000;
margin-bottom: 20px;
background-color: #ffffff;
}

/* Listen-Styling für die neue Seite */
.subpage-list {
     font-family: 'Montserrat';
margin-bottom: 30px;
padding-left: 25px;
list-style-type: disc !important; /* Saubere, volle Punkte */
text-align: left !important;
background-color: ;
}

.subpage-list li {
font-size: 1.15rem;
margin-bottom: 10px;
color: #000000;
line-height: 1.6;
}

/* Rechtlicher Hinweis am Fuß des Textes */
.subpage-disclaimer {
font-size: 0.95rem;
color: #000000;
font-style: italic;
margin-top: 40px;
border-top: 1px solid #eeeeee;
padding-top: 20px;
}

/* Rechte Bildspalte */
.right-image-column {
width: 50%;
background-color: #ffffff;
}
.right-image-column img {
width: 100%;
height: 100%;
object-fit: cover; /* Füllt die rechte Seite perfekt aus, ohne verzerrt zu werden */
display: block;
}

/* Optimierung für kleinere Bildschirme (Tablets/Smartphones) */
@media (max-width: 900px) {
.split-layout-container {
flex-direction: column; /* Schiebt das Bild auf dem Handy unter den Text */
}
.left-text-column, .right-image-column {
width: 100%;
padding: 30px 20px;
}
.right-image-column {
height: 350px;
}
}