@import url('https://googleapis.com');

* {
margin: 0;
padding: 0;
box-sizing: border-box;
scroll-behavior: smooth;
}

/* Überall, wo nichts anderes steht: Hintergrund WEISS, Schrift SCHWARZ */
body {
font-family: 'Montserrat';
line-height: 1.8;
background-color: #ffffff;
color: #000000;
}

/* 1. Header (Logo + Portrait nebeneinander oben) */
.top-header {
background-color: #8faea0;
padding:20px 40px;
display: flex;
flex-direction: column;
align-items: flex-start;
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-logo, .header-portrait {
max-height: 200px;
width: auto;
border-radius: 6px;
}

/* Ab hier gelten die Regeln nur für Handys und Tablets */
@media (max-width: 768px) {
  
  .top-header {
    /* Weniger Abstand an den Seiten, damit mehr Platz für den Inhalt ist */
    padding: 15px 15px; 
    /* Zentriert den gesamten Header-Inhalt auf dem Handy */
    align-items: center; 
  }

  .header-images {
    /* Ändert die Richtung von nebeneinander zu untereinander */
    flex-direction: column; 
    /* Verringert den Abstand zwischen den Elementen */
    gap: 15px; 
    /* Kleinere Schriftgröße für mobile Geräte */
    font-size: 2.2rem; 
    margin-bottom: 10px;
  }

  .header-logo, .header-portrait {
    /* Verkleinert die Bilder, damit sie nicht den Bildschirm sprengen */
    max-height: 120px; 
    /* Sorgt dafür, dass die Bilder niemals breiter als das Handy sind */
    max-width: 100%;   
    height: auto;
  }
  
}


/* Hamburger Menü (Drei Querstriche) */
.menu-icon {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
cursor: pointer;
margin-top: 20px;
font-family: 'Montserrat';
}

.menu-icon span {
display: block;
width: 100%;
height: 3px;
background-color: #ffffff !important;
border-radius: 2px;
transition: all 0.3 ease;
font-family: 'Montserrat';
}

/* 2. Layout & Startbereich */
main {
max-width: 900px;
margin: 0 auto;
padding-bottom: 60px;
font-family: 'Montserrat';
}

section {
padding: 60px 20px;
}

/* 4. Start-Bereich (Weißer Hintergrund) */
#start-bereich {
display: flex;
flex-direction: column;
align-items: center; /* Zentriert die Blöcke als Ganzes */
text-align: center;
padding-top: 40px;
font-family: 'Montserrat';
}

.center-logo-box {
margin-bottom: 30px;
}

.center-logo {
max-width: 100vw; /* ÄNDERUNG: Das Logo im Inhaltsbereich ist jetzt deutlich größer */
width: 100vw;
height: auto;
display: block;
margin-left: calc(-50vw + 50%);
}

/* Die 4 Sätze: Perfekt an der linken Kante des großen Logos ausgerichtet */
.focus-text-block {
width: 100%;
max-width: 100%; /*  Exakt dieselbe maximale Breite wie das große Logo oben */
margin: 0 auto;
text-align: center; /* Richtet den Text linksbündig an der Box-Kante aus */
margin-top: 40px;
margin-bottom: 80px; /* Großer Abstand laut deiner Skizze */
 font-family: 'Montserrat';
}

.focus-text-block p {
font-size: 1.7rem;
font-weight: 700; /* Dicke Schrift */
color: #000000;
margin-bottom: 12px;
letter-spacing: 1px;
 font-family: 'Montserrat', ;
}


.intro-text-block {
width: 100%
max-width: 480px;
margin: 0 auto;
text-align: left; /* Links zentriert */
 font-family: 'Montserrat';
}

.intro-text-block p { 
font-size: 1.3rem; 
color: #000000; 
line-height: 1.8;
 font-family: 'Montserrat',;
}

/* 6. DIE GRÜNEN BALKEN (Jetzt als durchgehende Überschriften-Bänder) */
.green-balken {
background-color: #ffffff; /* Sektion selbst ist jetzt weiß laut Anweisung */
color: #000000; /* Inhaltstexte sind schwarz */
margin: 0;
padding: 0 0 40px 0; /* Unten Abstand zum Inhalt */
 font-family: 'Montserrat', cursive;

}

/* Der eigentliche Balken, der sich komplett über die Website zieht */
.balken-header {
background-color: #8faea0; /* Das Salbeigrün wandert nur hierhin */
width: 100vw; /* Zwingt den Balken über die volle Bildschirmbreite */
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
padding: 20px 0;
margin-bottom: 40px; /* Abstand vom Balken zum darauffolgenden Text */
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
/* Die Überschrift im Balken: WEISSE Schrift, DICK, zentriert oder linksbündig im Hauptbereich */
.balken-header h2 {
font-size: 2rem;
font-weight: 700;
color: #ffffff; /* Weiße Schrift im grünen Balken */
max-width: 480px; /* Gleiche Ausrichtungskante wie dein Startbereich */
margin: 0 auto;
padding: 0 20px;
text-align: center;
border-bottom: none; /* Entfernt die alte Linie */
}

/* 7. Inhalt-Bereiche unter den Balken (Hintergrund WEISS, Schrift SCHWARZ) */
.angebots-liste,
.balken-content,
.philosophie-text-block,
.table-container {
max-width: 480px; /* Bleibt bündig mit Logo, Fokus-Text und Einleitungstext */
margin: 0 auto;
padding: 0 20px;
background-color: #ffffff; /* Absolut weißer Hintergrund */
color: #000000; /* Schwarze Schrift */
 font-family: 'Montserrat';
}

/* Richtet das Foto-Kästchen und den Text exakt auf gleicher Höhe (mittig) aus */
.angebot-item {
display: flex;
align-items: center; /* Zwingt Text und Foto auf exakt dieselbe horizontale Linie */
gap: 25px; /* Gleichmäßiger Abstand zwischen Foto und Text */
margin-bottom: 30px; /* Großzügiger Abstand zwischen den einzelnen Angeboten */
width: 100%;
}

/* Das Foto-Kästchen */
.foto-box {
width: 70px; /* Leicht vergrößert für eine harmonischere Optik */
height: 70px;
background-color: #f4f7f5;
border: 1px solid #8faea0;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.9rem;
font-weight: bold;
color: #000000;
flex-shrink: 0; /* Verhindert, dass das Kästchen zusammengedrückt wird */
font-family: 'Montserrat';
}

/* Vereinheitlicht alle Links: Gleich groß, gleich dick, tiefschwarz, ohne Unterstreichung */
.angebot-link {
font-size: 1.3rem !important; /* Vereinheitlicht die Größe für ALLE 5 Texte */
font-weight: 700 !important; /* Macht ALLE Texte gleichmäßig kräftig und dick */
color: #000000 !important; /* Zwingt alle Links zu tiefem, klarem Schwarz */
text-decoration: none !important; /* Entfernt die störende, unregelmäßige Unterstreichung */
line-height: 1.4;
display: inline-block;
transition: color 0.2s;
font-family: 'Montserrat';
}

/* Kleiner visueller Effekt beim Drüberfahren mit der Maus */
.angebot-link:hover {
color: #6b877b !important; /* Färbt sich dezent dunkelgrün */
}



/* Listen auf weißem Grund */
.weiss-liste, .schwarze-liste {
list-style-type: disc;
padding-left: 20px;
font-size: 1.1rem;
color: #000000;
}

.weiss-liste li, .schwarze-liste li {
margin-bottom: 12px;
}

/* Preistabelle auf weißem Grund */
table {
width: 100%;
border-collapse: collapse;
color: #000000;
 font-family: 'Montserrat';
}

th, td {
padding: 14px 0;
text-align: left;
border-bottom: 1px solid #eaeaea;
 font-family: 'Montserrat';
}

th {
font-weight: 700;
font-size: 1.2rem;
color: #000000;
 font-family: 'Montserrat';
}


/* Fußzeile */
footer {
text-align: center;
padding: 40px 20px;
background-color: #ffffff;
color: #666666;
font-size: 0.9rem;
font-family: 'Montserrat';
}

footer nav a {
color: #000000;
text-decoration: none;
margin: 0 10px;
font-family: 'Montserrat';
}

/* Styling für das ausklappbare Menü */
.nav-menu {
width: 100%;
max-height: 0; /* Standardmäßig geschlossen und unsichtbar */
overflow: hidden;
transition: max-height 0.4s ease-out; /* Sorgt für ein flüssiges Aufklappen */
background-color: #ffffff;
font-family: 'Montserrat';
}

/* Diese Klasse wird per JavaScript hinzugefügt, wenn man auf die Striche klickt */
.nav-menu.active {
max-height: 400px; /* Öffnet das Menü */
margin-top: 15px;
padding-bottom: 10px;
font-family: 'Montserrat';
}

.nav-menu ul {
list-style: none;
display: flex;
flex-direction: column;
gap: 12px;
padding-left: 10px;
font-family: 'Montserrat';
}

.nav-menu ul li a {
text-decoration: none;
color: #000000; /* Schwarze Schrift */
font-size: 1.1rem;
font-weight: 600;
display: block;
padding: 5px 0;
transition: color 0.2s;
font-family: 'Montserrat';
}

.nav-menu ul li a:hover {
color: #8faea0; /* Färbt sich beim Drüberfahren salbeigrün */
}

/* Kontakt Details */
.kontakt-details p { 
    color: #000000;
    font-size: 1.15rem;
    margin-bottom: 12px;
    font-family: 'Montserrat';
}
.kontakt-details p strong { 
    color: #000000;
    font-weight: 700;
    font-family: 'Montserrat';
}

/* Macht die Schrift im Termine-Bereich größer */
#termine-balken .balken-content p {
font-size: 1.4rem !important; /* Spürbar größere Schrift für die Termine */
font-weight: 600; /* Schön kräftig lesbar */
color: #000000; /* Tiefschwarz */
margin-bottom: 12px; /* Abstand zwischen den Zeilen */
}

.body-portrait {
    max-width: 600px;
    width: 100%;
    height: auto;
    border-radius:6px;
    display: block;
}

/* Layout für das perfekte Linksbündig-Sein von Bild und Text */
.ueber-mich-layout {
display: flex !important;
flex-direction: row !important;
align-items: flex-start !important;
justify-content: space-between !important; /* Startet absolut links am Bildschirmrand */
gap: 50px !important; /* Eleganter Abstand zwischen Bild und Text */
width: 100% !important;
padding: 40px 40px !important; /* ÄNDERUNG: Zwingt die Box an die absolute linke Kante */
background-color: #ffffff;
max-width: 100% !important;
box-sizing: border-box !important;
font-family: 'Montserrat';
}

/* Die linke Seite: Der Text nimmt den flexiblen Platz ein */
.philosophie-text-block {
flex: 1 !important;
text-align: left !important; /* Text sauber linksbündig */
font-family: 'Montserrat';

}

.portrait-box-links {
    flex: 0 0 40% !important;
    max-width: 400% !important;
    font-family: 'Montserrat';
}

.body-portrait {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 6px;
    font-family: 'Montserrat';
}

.philosophie-text-block p {
font-size: 1.15rem !important;
color: #000000 !important;
margin-bottom: 20px !important; /* Schöner Abstand zwischen den Absätzen */
line-height: 1.8 !important;
font-family: 'Montserrat';
}

/* Die rechte Seite: Die Box für das Bild */
.portrait-box-links {
flex-shrink: 0 !important;
width: 40% !important; /* Das Bild nimmt exakt die rechte Seite ein */
max-width: 450px !important; /* Begrenzt das Bild, damit es auf großen Bildschirmen nicht riesig wird */
margin: 0 !important;
padding: 0 !important;
font-family: 'Montserrat';
}

/* Das Portrait-Bild selbst */
.body-portrait {
width: 100% !important;
height: auto !important;
border-radius: 6px; /* Leicht abgerundete Ecken */
display: block !important;
}

#ueber-mich-balken {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    background-color: #ffffff;
}

/*Container für 50/50 aufteilung */
.split-container {
    display: flex;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    align-items: stretch;
    background-color:#ffffff;
    position: relative;


}


.text-box {
    width: 50%;
    flex: 0 0 50%;
    padding: 60px 0 60px 50px;
    margin-left: 50% !important;
    box-sizing: border-box;
    font-family: 'Montserrat';

}
.image-box {
position: absolute;
top: 0;
bottom: 0;
right: 50%;
left: calc(-50vw + 50%);
}


/*Bild-Box Einstellung*/
.image-box img {
    width: 100%; 
    height: 100%;
    display: block;
    object-fit: cover;
}
/*Text-Box einstellung*/
.split-box.text-box {
    padding: 60px 0 60px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.6;
    font-size: 1.1rem;
    color: #000000;
    font-family: 'Montserrat';
}


/*textabsätze aufteilen*/ 
.text-box p {
    margin-bottom: 20px;

}
.text-box p:last-child {
    margin-bottom: 0;
}

/*Smartphone optimierung*/
@media (max-width: 768px) {
    
    /* Zwingt die Hauptbox untereinander zu stehen */
    .ueber-mich-layout {
        display: flex !important;
        flex-direction: column !important; 
        padding: 20px 15px !important; /* Weniger Abstand zu den Handy-Rändern */
        gap: 25px !important;
    }

    /* Der Textblock darf nun die volle Breite nutzen und wird nicht mehr gequetscht */
    .philosophie-text-block {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        display: block !important;
    }

    /* Das Bild bricht sauber nach unten um und wird zentriert */
    .portrait-box-links {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        display: block !important;
        margin: 15px 0 0 0 !important; /* Abstand nach oben zum Text */
        padding: 0 !important;
    }

    /* Das Portrait-Bild passt sich perfekt an das Display an */
    .body-portrait {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
        margin: 0 auto !important; /* Zentriert das Bild, falls es kleiner bricht */
    }

    /* --- Bestehende Regeln für deine Split-Container (Beibehalten) --- */
    .split-container {
        flex-direction: column-reverse !important;
        margin: 0 !important;
    }
    
    /* Wichtig: .text-box hatte im Desktop-CSS ein margin-left: 50%. Das muss mobil weg! */
    .text-box { 
        padding: 30px 20px !important;
        width: 100% !important;
        flex: 0 0 100% !important;
        margin-left: 0 !important; 
    }
    
    .split-box.text-box, 
    .split-box.image-box {
        flex: 0 0 100% !important;
        width: 100% !important;
    }
    
    /* Behebt die absolute Positionierung der Image-Box auf dem Smartphone */
    .image-box {
        position: relative !important;
        right: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 300px !important;
    }
    
    .image-box img { 
        height: 300px !important;
        object-fit: cover !important;
    }
}






/* --- Komplette Reparatur für den "Für wen?" Bereich --- */

.fuer-wen-weiss-block-fullscreen {
width: 100vw !important;
position: relative !important;
left: 50% !important;
transform: translateX(-50%) !important; /* Zentriert das ausbrechende Band perfekt */
background-color: #ffffff !important;
margin: 0 !important;
padding: 0 !important;
}

/* Teilt den Bildschirm exakt in zwei Hälften */
.fuer-wen-innen-zentriert {
display: flex !important;
flex-direction: row !important;
width: 100% !important;
align-items: stretch !important;
}

/* Linke Hälfte für den Text: Holt den Inhalt bündig unter die Überschrift */
.fuer-wen-weiss-text {
flex: 0 0 50% !important;
width: 50% !important;
/* Berechnet exakt den Abstand zum linken Displayrand basierend auf Ihrer 1000px-Box */
padding: 60px 40px 60px calc(50vw - 500px) !important;
box-sizing: border-box !important;
display: flex !important;
align-items: center !important;
}
/* Deaktiviert alle standardmäßigen Punkte, Nummern oder Abstände der Liste */
.fuer-wen-weiss-text .points-list {
list-style-type: disc !important;
padding: 0 !important;
margin: 0 !important;
}

/* Definiert die einzelnen Textzeilen */
.fuer-wen-weiss-text .points-list li {
position: relative !important;
color: #333333 !important;
font-size: 1.15rem !important;
line-height: 1.6 !important;
margin-bottom: 14px !important;
padding-left: 25px !important; /* Schafft Platz für das selbstgebaute Dreieck */
font-family: 'Montserrat';
}


.fuer-wen-weiss-text .points-list li:last-child {
margin-bottom: 0 !important;
}
/* Rechte Hälfte für das Bild: Geht lückenlos bis ganz nach rechts */
.fuer-wen-weiss-bild {
flex: 0 0 50% !important;
width: 50% !important;
padding: 0 !important;
margin: 0 !important;
box-sizing: border-box !important;
}

.fuer-wen-weiss-bild img {
width: 100% !important;
height: 100% !important;
display: block !important;
object-fit: cover !important; /* Schneidet das Bild perfekt zu, ohne es zu verzerren */
}

/* Smartphone-Ansicht: Bild über Text auf dem Handy */
@media (max-width: 768px) {
  
  .fuer-wen-weiss-block-fullscreen {
    width: 100% !important;
    left: 0 !important;
    transform: none !important;
  }
  
  /* Flexbox aktivieren und stapeln */
  .fuer-wen-innen-zentriert {
    display: flex !important;
    flex-direction: column !important;
  }
  
  .fuer-wen-weiss-text,
  .fuer-wen-weiss-bild {
    flex: 0 0 100% !important;
    width: 100% !important;
  }
  
  /* Zwingt das Bild an Position 1 (oben) */
  .fuer-wen-weiss-bild {
    order: 1 !important;
  }
  
  .fuer-wen-weiss-bild img {
    height: 280px !important;
    object-fit: cover !important;
  }
  
  /* Zwingt den Text an Position 2 (darunter) */
  .fuer-wen-weiss-text {
    order: 2 !important;
    padding: 30px 20px !important; /* Etwas kompaktere Abstände für Mobilgeräte */
  }
  
  .fuer-wen-weiss-text .points-list li {
    padding-left: 20px !important;
  }
}






/* Container, der alle Angebotsboxen in der Mitte hält */
.angebote-boxen-container {
width: 100%;
max-width: 1000px; /* Exakt dieselbe Breite wie Ihre blauen Balken */
margin: 30px auto;
padding: 0;
box-sizing: border-box;
}

/* Die einzelne Zeilen-Box (Gleiches Prinzip wie die großen Blöcke, nur kompakter) */
.angebot-mini-box {
display: flex;
align-items: stretch; /* Sorgt dafür, dass Bild und Textbox gleich hoch sind */
background-color: #ffffff; /* Die grüne Hintergrundfarbe Ihrer Boxen */
margin-bottom: 15px; /* Abstand zwischen den einzelnen Angeboten */
overflow: hidden;
}
.angebot-mini-box:last-child {
margin-bottom: 0;
}

/* Linke Seite: Das kleine Bild in der Box */
.mini-bild-box {
width: 220px; /* Schöne, kompakte Breite für das kleine Querformat-Bild */
flex-shrink: 0;
}

.mini-bild-box img {
width: 100%;
height: 100%;
display: block;
object-fit: cover; /* Schneidet das Querformat-Bild perfekt ohne Verzerrung zu */
}

/* Rechte Seite: Der Textbereich in der Box */
.mini-text-box {
flex: 1;
padding: 20px 35px; /* Innenabstand für den Text */
display: flex;
align-items: center; /* Zentriert den Text vertikal neben dem Bild */
}

/* Styling für die klickbaren Links in den Boxen */
.mini-text-box a {
color: #000000 !important; /* Weißer Text auf dem grünen Hintergrund */
font-size: 1.25rem; /* Exakt dieselbe Schriftgröße wie auf der restlichen Seite */
text-decoration: none; /* Entfernt den standardmäßigen Unterstrich */
font-weight: 500;
transition: opacity 0.2s ease;
line-height: 1.4;
font-family: 'Montserrat';
}

/* Hover-Effekt: Text reagiert beim Drüberfahren mit der Maus */
.mini-text-box a:hover {
opacity: 0.85;
text-decoration: underline; /* Unterstrich erscheint erst beim Drüberfahren */
}

/* Mobile Optimierung für Smartphones */
@media (max-width: 768px) {
.mini-bild-box {
    width: 120px; /* Auf Handys etwas schmaleres Bild, damit mehr Platz für den Text bleibt */
}
.mini-text-box {
padding: 15px 20px;
}
.mini-text-box a {
font-size: 1.1rem;
}
}

*/
@media (max-width: 768px) {
/* 1. Header ganz oben (Logo + Text) auf Handys zentrieren & untereinander */
.top-header {
padding: 15px 10px !important;
width: 100%;
box-sizing: border-box; 
}

.header-images {
flex-direction: column !important; /* Setzt Logo und Text untereinander */
gap: 15px !important; /* Verringert den Abstand dazwischen */
align-items: center !important;
text-align: center !important;
width: 100% !important;
}

/* Verkleinert die riesige Willkommens-Schrift auf mobilen Bildschirmen */
.header-images h1,
.header-images p,
.header-images font,
.header-images [style*="font-size"] {
font-size: 1.8rem !important; /* Angenehme Größe für Handydisplays */
line-height: 1.3 !important;
margin: 0 !important;
word-wrap: break-word !important; /* Verhindert, dass Text aus dem Bildschirm ragt */
}

.header-logo,
.header-portrait {
max-height: 120px !important; /* Macht das Logo auf dem Handy etwas kompakter */
width: auto !important;
}
/* 2. Start-Bereich im Inhalt (Großes Logo + die 4 Sätze) optimieren */
#start-bereich {
padding: 20px 15px !important;
width: 100% !important;
box-sizing: border-box !important;
}

.center-logo {
max-width: 90vw !important; /* Verhindert, dass das große Logo rechts rausragt */
margin-left: auto !important; /* Setzt das Logo auf dem Handy sauber mittig */
margin-right: auto !important;
}

.focus-text-block {
width: 100% !important;
padding: 0 10px !important;
box-sizing: border-box !important;
}

.focus-text-block p {
font-size: 1.3rem !important; /* Verkleinert die 4 Sätze minimal fürs Handy */
text-align: center !important; /* Zentriert die Sätze ("Ankommen" etc.) auf dem Smartphone */
}
}