/* Globale Box-Sizing-Regel - Ganz am Anfang der Datei */
html {
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}

/* * Farbpalette definiert als CSS-Variablen */
:root {
    /* Neue Farbpalette: Klarheit und Wärme im Wandel */
    --primary-color: #4A9088;  /* Gedämpftes Meergrün - Klarheit, Wachstum */
    --primary-dark: #3F7C85;   /* Dunkleres Teale - Stärke, Tiefe */
    --secondary-color: #F7DBA7; /* Helles, warmes Beige - Wärme, Unterstützung */
    --text-dark: #333333;      /* Dunkler Text für gute Lesbarkeit */
    --text-light: #f5f5f5;     /* Heller Hintergrundtext */
    --background-light: #ffffff; /* Heller Hintergrund für Sektionen */
    --background-grey: #f8f8f8;  /* Leichter Grau für abwechselnde Sektionen */
    --border-color: #e0e0e0;   /* Helle, weiche Rahmen */
    --shadow-light: rgba(0,0,0,0.08); /* Leichter, weicher Schatten */
    --shadow-medium: rgba(0,0,0,0.12); /* Mittlerer, weicher Schatten */
    --accent-color: #da532c; /* Ihre Akzentfarbe für CTAs */
    --accent-color-dark: #c74c26; /* Dunklerer Ton der Akzentfarbe */
}

/* Globale Stile: Für die ganze Seite */
body {
    font-family: 'Open Sans', sans-serif; /* Open Sans für Fließtext */
    line-height: 1.7; /* Leicht erhöhter Zeilenabstand für bessere Lesbarkeit */
    margin: 0;
    padding: 0;
    background-color: var(--text-light); /* Heller Hintergrund */
    color: var(--text-dark);
    overflow-x: hidden; /* Verhindert horizontalen Scrollbalken, wenn Inhalte überlaufen */
}

/* Neue Klasse für Body, wenn das Menü geöffnet ist */
body.menu-open {
    overflow: hidden; /* Verhindert das Scrollen des Body */
    height: 100vh; /* Setzt die Höhe des Body auf die volle Viewport-Höhe */
}


.container {
    width: 85%; /* Etwas breiter auf Desktops */
    max-width: 1100px;
    margin: auto;
    overflow: hidden;
    padding-top: 30px; /* Separates Padding für oben, leicht erhöht */
    padding-bottom: 30px; /* Separates Padding für unten, leicht erhöht */
}

/* Typografie */
h1, h2, h3, h4 {
    font-family: 'Lato', sans-serif; /* Lato für Überschriften */
    color: var(--primary-dark); /* Überschriften in dunkler Primärfarbe */
    margin-bottom: 18px; /* Leicht erhöhter Abstand */
    line-height: 1.3;
    /* Dies stellt sicher, dass lange Wörter umbrechen, wenn sie zu breit sind */
    overflow-wrap: break-word;
    word-break: break-word;
}

h1 { font-size: 2.8em; }
h2 { font-size: 2.1em; }
h3 { font-size: 1.7em; }
h4 { font-size: 1.3em; }

p {
    margin-bottom: 1.2em; /* Leicht erhöhter Absatzabstand */
    font-size: 1.05em; /* Leicht vergrößerter Fließtext */
}

/* Links */
a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.3s ease, text-decoration 0.3s ease;
}

a:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

/* Buttons */
.btn {
    display: inline-block;
    background: var(--primary-color);
    color: var(--text-light); /* Heller Text auf Button */
    padding: 14px 30px; /* Leicht vergrößert */
    border: none;
    cursor: pointer;
    border-radius: 10px; /* Abgerundeter */
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    font-weight: 700; /* Stärkerer Font-Weight */
    font-size: 1.05em;
    box-shadow: 0 4px 8px var(--shadow-light); /* Leichter Schatten auf Buttons */
}

.btn:hover {
    background-color: var(--primary-dark);
    transform: translateY(-3px); /* Etwas stärkerer Lift-Effekt */
    box-shadow: 0 6px 12px var(--shadow-medium); /* Schatten beim Hover */
}

.btn-small {
    padding: 12px 25px; /* Leicht angepasste Größe */
    font-size: 0.98em;
}

/* Header-Bereich */
header {
    background: var(--background-light);
    color: var(--text-dark);
    padding: 7px 0; /* GEÄNDERT: Reduziertes Padding für kleineren Header */
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 2px 5px var(--shadow-light); /* Weicherer Schatten */
    position: sticky; /* Sticky Header */
    top: 0;
    z-index: 1000; /* Sicherstellen, dass der Header immer oben ist */
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0; /* Keine extra Padding in Header-Container */
    padding-bottom: 0;
}

header .logo h1 {
    margin: 0;
    font-size: 1.8em; /* GEÄNDERT: Kleinere Schriftgröße für das Logo */
    color: var(--primary-color);
    line-height: 1;
}
header .logo h1 a {
    color: var(--primary-color);
    text-decoration: none;
}
header .logo h1 a:hover {
    color: var(--primary-dark);
}

/* Standard Header Navigation (Desktop/Größere Tablets) */
header nav {
    display: block; /* Standardmäßig auf Desktops anzeigen */
    position: static; /* Standardposition */
    width: auto;
    background: none;
    box-shadow: none;
    transition: none;
    padding: 0;
    overflow-y: visible;
    max-height: none;
    border-radius: 0;
}

header nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: flex-end; /* Elemente rechts ausrichten */
    align-items: center; /* Elemente vertikal zentrieren */
    flex-wrap: wrap; /* Erlaubt, dass Elemente auf kleineren Bildschirmen umbrechen */
}

header nav ul li {
    margin-left: 25px; /* GEÄNDERT: Etwas reduzierter Abstand zwischen Navigationspunkten */
}

header nav ul li a {
    color: var(--text-dark);
    font-weight: 600;
    font-size: 0.98em; /* GEÄNDERT: Leicht reduzierte Schriftgröße */
    text-decoration: none; /* Unterstreichung entfernen */
    padding: 6px 12px; /* GEÄNDERT: Reduziertes Padding für mehr Klickfläche und Luft */
    border-radius: 5px; /* Leichte Abrundung der Ecken */
    white-space: nowrap; /* Verhindert, dass Text umbricht */
    transition: color 0.3s ease, background-color 0.3s ease, transform 0.2s ease; /* Sanfte Übergänge */
    border-bottom: none; /* Keine Linie auf Desktop */
}

header nav ul li a:hover {
    color: var(--primary-color);
    background-color: rgba(0, 0, 0, 0.05); /* Sehr leichter grauer Hintergrund beim Hover */
    transform: translateY(-2px); /* Subtiler Lift */
}

/* Stil für den aktiven Navigationspunkt (die Seite, auf der man sich gerade befindet) */
header nav ul li a.active {
    font-weight: bold;
    color: var(--accent-color); /* Ihre Akzentfarbe */
    border-bottom: 2px solid var(--accent-color); /* Eine Linie unter dem aktiven Link */
    padding-bottom: 4px; /* GEÄNDERT: Platz für die Linie schaffen (reduziert) */
    background-color: transparent; /* Entfernt den Hintergrund für aktive Links auf Desktop */
}

/* --- Spezifisches Styling für den "Termin buchen" Button im Header (Desktop) --- */
header nav ul li:last-child a[aria-label="Termin für ein Coaching buchen"] {
    background-color: var(--primary-color);
    color: white; /* Weiße Schriftfarbe */
    padding: 8px 18px; /* GEÄNDERT: Etwas weniger Padding für den Button */
    border-radius: 20px; /* GEÄNDERT: Leicht weniger abgerundete Ecken */
    font-weight: bold; /* Fettschrift */
    margin-left: 40px; /* GEÄNDERT: Reduzierter Abstand zum vorherigen Punkt */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Leichter Schatten für 3D-Effekt */
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    border-bottom: none; /* Wichtig: Keine Border unten für den Button */
}

header nav ul li:last-child a[aria-label="Termin für ein Coaching buchen"]:hover {
    background-color: var(--primary-dark);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Stärkerer Schatten */
    transform: translateY(-1px); /* Leichter Hoch-Effekt */
}

/* --- Styles für das Hamburger-Menü-Icon --- */
.mobile-menu-toggle {
    display: none; /* Standardmäßig auf Desktops ausblenden */
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 25px;
    cursor: pointer;
    z-index: 1000; /* Sicherstellen, dass es über anderen Elementen liegt */
    transition: transform 0.3s ease;
}

.mobile-menu-toggle .bar {
    width: 100%;
    height: 3px;
    background-color: var(--primary-dark);
    border-radius: 5px;
    transition: all 0.3s ease;
}

/* Animation für das Hamburger-Icon bei Klick (optional) */
.mobile-menu-toggle.active .bar:nth-child(1) {
    transform: translateY(11px) rotate(45deg);
}
.mobile-menu-toggle.active .bar:nth-child(2) {
    opacity: 0;
}
.mobile-menu-toggle.active .bar:nth-child(3) {
    transform: translateY(-11px) rotate(-45deg);
}


/* Hero-Bereich (Neues Layout) */
.hero {
    background-color: var(--background-grey); /* Leichter grauer Hintergrund für den Hero-Bereich */
    padding: 80px 0; /* Padding für den gesamten Hero-Bereich */
    min-height: 500px; /* Mindesthöhe für Hero-Bereich */
    display: flex;
    align-items: center; /* Vertikale Zentrierung des Inhalts */
}

.hero-content {
    display: flex;
    flex-direction: column; /* Standardmäßig vertikal stapeln, um die gewünschte Reihenfolge zu erzwingen */
    align-items: center; /* Horizontale Zentrierung der gestapelten Elemente */
    gap: 40px; /* Abstand zwischen den gestapelten Blöcken (h2, Bild, Zitat) */
    flex-wrap: wrap; /* Erlaubt Umbruch auf kleineren Bildschirmen */
    justify-content: center; /* Zentriert die Flex-Items, wenn Platz ist */
    width: 100%; /* Stellt sicher, dass der Container die volle Breite nutzt */
}

/* Neue Klassen für die Text-Teile */
.hero-text-top,
.hero-text-bottom {
    flex: 1 1 100%; /* Nehmen die volle Breite ein */
    text-align: center; /* Zentriert den Text */
    padding: 0 20px; /* Etwas Padding links/rechts */
    max-width: 900px; /* Optional: Max-Breite für den Text, damit er nicht zu breit wird */
}

/* Anpassung der H2 im neuen Top-Bereich */
.hero-text-top h2 {
    margin-bottom: 30px; /* Abstand nach der H2 */
    font-size: 2.4em; /* Standardgröße für Desktop */
    color: var(--primary-dark);
    line-height: 1.3;
}

/* Zitat Styles - jetzt im Bottom-Bereich */
.hero-text-bottom .quote {
    font-family: 'Lato', serif;
    font-style: italic;
    font-size: 2.2em; /* Größe des Zitattextes */
    color: var(--primary-dark);
    margin-bottom: 5px;
    line-height: 1.4;
    /* `position: relative;` und `padding` sind nicht mehr nötig, da keine Pseudoelemente verwendet werden */
    box-sizing: border-box;
    overflow: hidden; /* Sicherstellen, dass nichts übersteht */
}

/* Die Regeln für .hero-text-bottom .quote::before und .hero-text-bottom .quote::after wurden entfernt */

.hero-text-bottom .quote-author {
    font-size: 1.4em;
    font-weight: 600;
    color: var(--text-dark);
    margin-top: 0;
    margin-bottom: 40px; /* Abstand zum nächsten Element (dem Button) */
}


.hero-image-container {
    flex: 0 0 auto; /* Passt sich an den Inhalt an, nimmt nicht den gesamten Platz ein */
    display: flex;
    justify-content: center; /* Bild im Container zentrieren */
    align-items: center;
    max-width: 600px; /* Beispiel-Maximalbreite für das Bild */
    width: 100%; /* Stellt sicher, dass es auf kleinen Bildschirmen flexibel ist */
}

.hero-main-image {
    max-width: 100%;
    height: auto;
    border-radius: 15px;
    box-shadow: 0 10px 30px var(--shadow-medium);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hero-main-image:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.3);
}

/* Neuer Stil für den CTA-Button im Hero-Bereich, der unten platziert ist */
.hero-cta-bottom {
    flex-basis: 100%; /* Nimmt die volle Breite ein */
    margin-top: 50px; /* Abstand nach oben zum Text/Bild-Block */
    text-align: center; /* Text innerhalb des Buttons zentrieren */
    margin-left: auto;
    margin-right: auto;
    display: block; /* Macht den Button zum Block-Element, damit margin:auto funktioniert */
    max-width: 350px; /* Maximale Breite für den Button, damit er nicht zu breit wird */
}


/* Allgemeine Sektionen */
section {
    padding: 80px 0;
    background-color: var(--background-light);
    margin-bottom: 30px; /* Etwas mehr Abstand zwischen Sektionen */
    box-shadow: 0 8px 20px var(--shadow-light); /* Weicherer, präsenterer Schatten */
    border-radius: 15px; /* Noch runder */
}

section:nth-child(even) {
    background-color: var(--background-grey);
}

/* Über mich Bereich */
.about-me .container h3 {
    text-align: center;
    margin-bottom: 40px; /* Mehr Abstand */
}

.about-me p {
    text-align: justify;
    margin-bottom: 18px; /* Leicht erhöhter Abstand */
    font-size: 1.05em;
}
.about-me ul {
    list-style: disc;
    margin-left: 25px; /* Leicht erhöhter Einzug */
    margin-bottom: 1.5em; /* Mehr Abstand */
}

.about-me ul li {
    margin-bottom: 10px; /* Leicht erhöhter Abstand */
    font-size: 1.05em;
}

/* Über mich Bild Container */
/* Diese Regeln könnten ganz gelöscht werden, da der Container in HTML entfernt wurde */
.about-image-container {
    text-align: center;
    margin-bottom: 40px; /* Abstand zum Text darunter */
}

.about-image-container .profile-image {
    max-width: 400px; /* Maximale Breite für das Bild im Über mich Bereich */
    width: 100%;
    height: auto;
    border-radius: 15px; /* Abgerundete Ecken */
    box-shadow: 0 8px 20px var(--shadow-medium); /* Schatten */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.about-image-container .profile-image:hover {
    transform: scale(1.02); /* Leichter Zoom-Effekt */
    box-shadow: 0 12px 30px rgba(0,0,0,0.25);
}


/* Angebotsbereich */
.offers .container {
    text-align: center;
}

.offer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Min-Breite leicht erhöht */
    gap: 40px; /* Größerer Abstand zwischen den Karten */
    margin-top: 50px; /* Mehr Abstand zur Überschrift */
    padding: 0;
    box-sizing: border-box;
}

.offer-item {
    background-color: var(--background-light);
    padding: 40px; /* Mehr Innenabstand */
    border-radius: 15px; /* Noch runder */
    box-shadow: 0 10px 25px var(--shadow-medium); /* Deutlicherer, weicherer Schatten */
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid var(--border-color);
    box-sizing: border-box;
}

.offer-item:hover {
    transform: translateY(-10px); /* Stärkerer Lift-Effekt */
    box-shadow: 0 15px 35px rgba(0,0,0,0.25); /* Deutlich stärkerer Schatten beim Hover */
}

.offer-item h4 {
    color: var(--primary-dark); /* Überschrift in dunkler Primärfarbe */
    margin-bottom: 25px; /* Mehr Abstand */
    font-size: 1.8em; /* Leicht vergrößert */
}

.offer-item ul {
    list-style: disc; /* Setzt die Standardpunkte */
    padding-left: 20px; /* Fügt einen Innenabstand hinzu, der die Punkte und den Text verschiebt */
    margin-bottom: 30px; /* Mehr Abstand */
    text-align: left;
}

.offer-item ul li {
    padding: 12px 0; /* Leicht mehr Padding */
    border-bottom: 1px dotted var(--border-color);
    font-size: 1.1em; /* Leicht vergrößert */
}

.offer-item ul li:last-child {
    border-bottom: none;
}

/* Kontaktbereich */
.contact form {
    display: flex;
    flex-direction: column;
    max-width: 600px; /* Etwas breiter */
    margin: 40px auto; /* Mehr Abstand */
    padding: 40px; /* Mehr Innenabstand */
    background-color: var(--background-light);
    border-radius: 15px; /* Noch runder */
    box-shadow: 0 6px 15px var(--shadow-light);
}

.contact form input,
.contact form textarea {
    padding: 16px; /* Mehr Padding */
    margin-bottom: 20px; /* Mehr Abstand */
    border: 1px solid var(--border-color);
    border-radius: 10px; /* Noch runder */
    font-size: 1.1em; /* Leicht vergrößert */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.contact form input:focus,
.contact form textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(74, 144, 136, 0.25); /* Farbe an neue Palette angepasst */
    outline: none;
}

.contact .btn {
    align-self: center; /* Button zentrieren im Formular */
    margin-top: 15px;
}

.contact-info {
    text-align: center;
    margin-top: 50px; /* Mehr Abstand */
    font-size: 1.2em; /* Leicht vergrößert */
    color: var(--text-dark);
}

.contact-info p {
    margin-bottom: 15px;
}

/* --- Kontakt Icons --- */
.contact-icons {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 40px;
}

.contact-icons a {
    display: inline-block;
    text-decoration: none;
    margin: 0 20px; /* Abstand zwischen den Icons */
    color: var(--primary-dark); /* Farbe der Icons */
    transition: color 0.3s ease, transform 0.2s ease;
}

.contact-icons a:hover {
    color: var(--primary-color);
    transform: translateY(-3px);
}

.contact-icons a i {
    font-size: 50px; /* Erhöht die Standardgröße */
}

/* Spezifische Anpassungen für das Telefon-Icon, da es manchmal kleiner wirkt */
.contact-icons .fa-phone {
    font-size: 45px; /* Angepasst für das Telefon-Icon */
}

.calendly-button-container {
    margin-top: 30px;
    text-align: center;
}

.calendly-btn-custom {
    /* Style wie .btn, falls es sich unterscheidet, aber es sollte von .btn erben */
}

/* --- Footer Styling --- */
footer {
    background-color: #2F4F4F; /* Ein dunkles Blau-Grün, passend zur Primärfarbe */
    color: white;
    padding: 35px 0; /* Mehr Padding */
    text-align: center;
    margin-top: 50px; /* Mehr Abstand zur letzten Sektion */
}

footer .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px; /* Größerer Abstand */
    padding-top: 0;
    padding-bottom: 0;
}

footer p {
    margin: 0;
    font-size: 0.95em; /* Leicht vergrößert */
}

footer a {
    color: white;
    text-decoration: none;
    transition: color 0.3s ease;
}

footer a:hover {
    color: var(--secondary-color); /* Sekundärfarbe als Hover-Farbe auf dunklem Hintergrund */
}


/* --- Social Icons (mit Hintergrundfeld) --- */
.social-links {
    margin-top: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.social-links a {
    text-decoration: none;
    margin: 0 12px; /* Leicht mehr Abstand */
    background-color: white;
    border: 1px solid var(--primary-color); /* Rand in Primärfarbe */
    border-radius: 50%;
    width: 55px; /* Leicht größer */
    height: 55px; /* Leicht größer */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15); /* Weicherer Schatten */
}

/* Hover-Effekt für das Feld und das Icon */
.social-links a:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-dark);
    transform: translateY(-5px); /* Stärkerer Lift */
    box-shadow: 0 5px 15px rgba(0,0,0,0.25);
}

.social-links a:hover i {
    color: white !important;
}

/* Spezifische Farben der Icons, wenn sie NICHT gehovered werden */
.social-links a .fa-linkedin {
    color: #0A66C2; /* LinkedIn-Blau */
}

.social-links a .fa-facebook-f {
    color: #1877F2; /* Facebook-Blau */
}

.social-links a .fa-instagram {
    /* Bestehender Instagram-Gradient für das Icon */
    background: -webkit-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #C13584; /* Fallback */
}

/* Anpassung der Icon-Größe INNERHALB des Feldes */
.social-links a i {
    font-size: 28px; /* Leicht vergrößert */
    margin: 0;
}

/* NEUE KLASSE: Visually Hidden für Barrierefreiheit */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* NEUE REGEL: Diese ID wird die gesamte Testimonial-Sektion ausblenden */
#testimonials-hidden {
    display: none;
}


/* Responsive Anpassungen (Allgemein) */
@media (max-width: 1200px) {
    .container {
        width: 90%;
        padding: 0 15px;
        box-sizing: border-box;
    }

    /* Header Anpassungen für Mobile */
    header .container {
        flex-direction: row; /* Logo und Hamburger-Menü nebeneinander */
        justify-content: space-between; /* Logo links, Toggle rechts */
        align-items: center;
        padding: 10px 0; /* GEÄNDERT: Reduziertes Padding im mobilen Header */
        min-height: 50px; /* GEÄNDERT: Kompaktere Mindesthöhe des Headers */
    }

    header .logo h1 {
        font-size: 1.5em; /* GEÄNDERT: Noch kleineres Logo auf Mobile */
        margin-bottom: 0; /* Kein Margin unter dem Logo auf Mobile */
    }

    /* Hamburger-Icon anzeigen auf mobilen Geräten */
    .mobile-menu-toggle {
        display: flex;
    }

    /* Navigation auf Mobile ausblenden und positionieren */
    header nav#main-nav { /* ID verwenden, um spezifisch zu sein */
        display: flex; /* Behalten, aber im geöffneten Zustand sichtbar */
        flex-direction: column;
        position: fixed; /* Auf 'fixed' geändert, damit es über dem Inhalt bleibt */
        top: 50px; /* GEÄNDERT: Angepasst an die neue min-height des Headers. */
        left: -100%; /* Versteckt die Navigation standardmäßig links außerhalb des Bildschirms */
        width: 100%; /* Volle Breite */
        height: calc(100vh - 50px); /* GEÄNDERT: Nimmt die restliche Höhe des Viewports ein */
        background-color: var(--background-light); /* Hintergrund für die ausgefahrene Navigation */
        box-shadow: 0 5px 15px var(--shadow-medium); /* Schatten für die ausgefahrene Navigation */
        transition: left 0.4s ease-in-out; /* Sanfte Ein- und Ausblendeanimation */
        z-index: 999; /* Unter dem Toggle, aber über dem Inhalt */
        padding: 20px 0; /* Innenabstand für die ausgefahrene Navigation */
        border-bottom-left-radius: 15px; /* Abgerundete Ecken */
        border-bottom-right-radius: 15px;
        overflow-y: auto; /* Scrollbalken, wenn die Navigation zu lang ist */
    }

    /* Navigation anzeigen, wenn 'active' Klasse hinzugefügt wird (durch JS) */
    header nav#main-nav.active {
        left: 0; /* Navigation einblenden */
    }

    header nav ul {
        flex-direction: column; /* Links weiterhin vertikal stapeln */
        align-items: center; /* Links zentrieren */
        width: 100%;
        padding: 0; /* Padding zurücksetzen */
        margin: 0; /* Margin zurücksetzen */
    }

    header nav ul li {
        margin: 0; /* Keine horizontalen oder vertikalen Margins hier */
        margin-bottom: 12px; /* GEÄNDERT: Etwas weniger vertikaler Abstand zwischen den Links */
        width: 90%; /* Etwas schmaler als 100%, damit Padding wirksam wird */
        text-align: center;
    }

    header nav ul li:last-child {
        margin-bottom: 0; /* Kein Margin nach dem letzten Listenelement */
    }

    header nav ul li a {
        padding: 12px 10px; /* GEÄNDERT: Weniger Padding für größere Klickfläche */
        display: block; /* Macht den gesamten Bereich klickbar */
        width: 100%;
        border-bottom: 1px solid var(--border-color); /* Trennlinie zwischen den Links */
        border-radius: 0; /* Keine Rundung */
    }
    header nav ul li:last-child a { /* Der "Termin buchen" Link */
         border-bottom: none; /* Keine Linie unter dem letzten Link */
    }

    /* Anpassung: "Termin buchen" Button im mobilen Menü */
    header nav ul li:last-child a[aria-label="Termin für ein Coaching buchen"] {
        background-color: transparent; /* Hintergrund transparent machen */
        color: var(--text-dark); /* Textfarbe wie andere Links */
        padding: 12px 10px; /* GEÄNDERT: Padding wie andere Links */
        border-radius: 0; /* Keine Rundung */
        font-weight: 600; /* Font-Weight wie andere Links */
        margin: 0; /* Keine speziellen Margins */
        width: 100%; /* Volle Breite */
        box-shadow: none; /* Schatten entfernen */
        border-bottom: 1px solid var(--border-color); /* Trennlinie wie andere Links */
    }

    header nav ul li:last-child a[aria-label="Termin für ein Coaching buchen"]:hover {
        background-color: rgba(0, 0, 0, 0.05); /* Hover-Effekt wie andere Links */
        color: var(--primary-color);
        transform: none; /* Kein Lift-Effekt */
        box-shadow: none; /* Kein Schatten */
    }


    /* Hero */
    .hero {
        padding: 60px 0; /* Weniger Padding auf Mobile */
        min-height: unset; /* Höhe auf Mobile flexibler */
    }

    .hero-content {
        gap: 30px; /* Abstand zwischen den gestapelten Blöcken auf kleineren Bildschirmen */
        flex-direction: row; /* nebeneinander für Tablets/größere Handys im Querformat */
        flex-wrap: wrap; /* Erlaubt Umbruch, falls es doch nicht passt */
        justify-content: center;
        align-items: flex-start; /* Oben ausrichten */
    }

    /* Anpassen der Breiten der Flex-Elemente, wenn sie nebeneinander stehen */
    .hero-text-top {
        flex: 1 1 100%; /* H2 nimmt weiterhin volle Breite, aber oberhalb von allem */
        order: 1; /* Sicherstellen, dass die H2 immer ganz oben ist */
    }

    .hero-image-container {
        flex: 1 1 35%; /* Bild nimmt ca. ein Drittel ein */
        max-width: 300px; /* Max-Breite für das Bild im Querformat weiter reduziert */
        order: 2; /* Bild kommt nach der H2 */
    }

    .hero-text-bottom {
        flex: 1 1 55%; /* Zitat nimmt ca. die Hälfte ein, etwas mehr Platz */
        max-width: 500px; /* Max-Breite für das Zitat im Querformat (etwas größer als das Bild) */
        order: 3; /* Zitat kommt nach dem Bild */
        margin-top: 0; /* Kein zusätzlicher Abstand nach oben */
    }

    .hero-cta-bottom {
        flex: 1 1 100%; /* Button nimmt wieder volle Breite, am Ende */
        order: 4; /* Button kommt ganz unten */
        margin-top: 40px; /* Abstand nach oben zum Text/Bild-Block */
        max-width: 350px;
    }


    .hero-text-top h2 {
        font-size: 2em; /* Angepasste Größe für größere Tablets/kleine Desktops */
        margin-bottom: 25px; /* Auch hier den Abstand erhöhen für Responsive */
    }
    .hero-text-bottom .quote {
        font-size: 1.4em;
        /* Padding und Positionierung für Pseudo-Elemente sind nicht mehr nötig */
    }
    .hero-text-bottom .quote-author {
        font-size: 1em;
    }
    .hero-image-container {
        max-height: 350px; /* Bildhöhe auf mobilen Geräten begrenzen */
        object-fit: cover; /* Bildausschnitt anpassen */
    }

    /* CTA im Hero-Bereich unten auf mobilen Geräten */
    .hero-cta-bottom {
        margin-top: 40px; /* Etwas weniger Abstand auf Mobile */
        max-width: 300px; /* Kleinerer Max-Breite auf Mobile */
    }

    /* KONTAKT-ICONS ANPASSUNG FÜR MOBILE */
    .contact-icons a {
        font-size: 48px;
        margin: 0 15px;
    }
    .contact-icons .fa-phone {
        font-size: 42px;
    }

    /* Testimonials */
    .testimonial-item {
        margin-bottom: 30px;
        padding: 25px;
        border-radius: 10px;
    }
    .testimonial-item p {
        font-size: 1.1em;
    }
    .testimonial-item .client-name {
        font-size: 0.9em;
    }

    /* Allgemeine Sektionen */
    section {
        padding: 60px 0;
        margin-bottom: 25px;
        border-radius: 10px;
    }

    /* Über mich Bereich */
    .about-me .container h3 {
        margin-bottom: 30px;
    }
    .about-me p, .about-me ul li {
        font-size: 1em;
    }
    /* about-image-container Regeln können hier auch entfernt werden, wenn das Bild in HTML weg ist */
    .about-image-container .profile-image {
        max-width: 300px;
    }

    /* Angebotsbereich */
    .offers .container {
        padding-left: 15px; /* Sicherstellen, dass auch hier Padding ist, wenn container Breite 90% ist */
        padding-right: 15px;
    }
    .offer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        margin-top: 35px;
    }
    .offer-item {
        padding: 30px;
        border-radius: 10px;
    }
    .offer-item h4 {
        font-size: 1.6em;
        margin-bottom: 20px;
    }
    .offer-item ul li {
        font-size: 1em;
    }

    /* Kontaktbereich */
    .contact form {
        width: 95%;
        padding: 30px;
        margin: 30px auto;
        border-radius: 10px;
    }
    .contact form input,
    .contact form textarea {
        padding: 14px;
        margin-bottom: 15px;
    }
    .contact .btn {
        padding: 12px 25px;
        font-size: 1em;
    }
    
    footer {
        padding: 25px 0;
        margin-top: 40px;
    }
    footer .container {
        gap: 15px;
    }
    .social-links a {
        width: 45px;
        height: 45px;
    }
    .social-links a i {
        font-size: 24px;
    }

    #datenschutz h1, #impressum h1 { font-size: 1.6em; }
    #datenschutz h2, #impressum h2 { font-size: 1.2em; }
    #datenschutz h3, #impressum h3 { font-size: 1em; }
}


/* Kleinere Mobile-Geräte, falls nötig noch engere Anpassungen */
@media (max-width: 480px) {
    h1 { font-size: 2.2em; }
    
    .hero-text-top h2 {
        font-size: 1.6em;
        margin-bottom: 20px;
    }
    h2 {
        font-size: 1.8em;
    }
    .offers .container h3 {
        font-size: 1.8em;
    }
    h3 {
        font-size: 1.5em;
    }
    h4 { font-size: 1.2em; }
    p { font-size: 1em; }

    .btn {
        padding: 12px 22px;
        font-size: 0.95em;
    }

    .hero {
        padding: 50px 0;
    }
    .hero-text-bottom .quote {
        font-size: 1.3em;
        /* Padding und Positionierung für Pseudo-Elemente sind nicht mehr nötig */
    }
    .hero-text-bottom .quote-author {
        font-size: 1em;
    }
    .hero-image-container {
        max-width: 100%; /* Bild volle Breite auf sehr kleinen Bildschirmen */
    }
    .hero-cta-bottom {
        margin-top: 30px;
        max-width: 280px;
    }

    /* Mobile Anpassungen für den Header (noch kleinere Geräte) */
    header .container {
        padding: 8px 0; /* Noch weniger Padding */
        min-height: 45px; /* Noch kleinere Mindesthöhe */
    }
    header .logo h1 {
        font-size: 1.3em; /* Noch kleineres Logo */
    }
    header nav#main-nav {
        top: 45px; /* Angepasst an die neue min-height */
        height: calc(100vh - 45px); /* Angepasst an die neue Höhe */
    }
    header nav ul li {
        margin-bottom: 10px; /* Noch weniger vertikaler Abstand */
    }
    header nav ul li a {
        padding: 10px 8px; /* Noch weniger Padding */
    }
    header nav ul li:last-child a[aria-label="Termin für ein Coaching buchen"] {
        padding: 10px 8px; /* Angepasst */
    }
}


/* Zusätzlicher Media Query für sehr schmale Bildschirme (z.B. 360px und kleiner) */
@media (max-width: 360px) {
    h1 { font-size: 1.8em; }
    
    .hero-text-top h2 {
        font-size: 1.4em;
        margin-bottom: 18px;
    }
    h2 {
        font-size: 1.5em;
    }
    .offers .container h3 {
        font-size: 1.5em;
    }
    h3 {
        font-size: 1.3em;
    }
    h4 { font-size: 1.05em; }
    p { font-size: 0.98em; }

    .btn {
        padding: 10px 20px;
        font-size: 0.9em;
    }
    .hero-text-bottom .quote {
        font-size: 1.1em;
        /* Padding und Positionierung für Pseudo-Elemente sind nicht mehr nötig */
    }
    /* Header auf sehr kleinen Geräten */
    header .container {
        padding: 5px 0; /* Minimales Padding */
        min-height: 40px; /* Minimalste Höhe */
    }
    header .logo h1 {
        font-size: 1.2em; /* Minimalstes Logo */
    }
    header nav#main-nav {
        top: 40px; /* Angepasst */
        height: calc(100vh - 40px); /* Angepasst */
    }
}


/* --- Spezifische Styles für Datenschutzerklärung und Impressum Überschriften --- */
#datenschutz h1,
#impressum h1 {
    font-size: 2em;
    margin-top: 40px;
    margin-bottom: 30px;
    text-align: center;
    color: var(--primary-dark);
}

#datenschutz h2,
#impressum h2 {
    font-size: 1.5em;
    margin-top: 30px;
    margin-bottom: 18px;
    color: var(--primary-color);
}

#datenschutz h3,
#impressum h3 {
    font-size: 1.2em;
    margin-top: 25px;
    margin-bottom: 12px;
    color: var(--text-dark);
}

/* Responsive Anpassungen für Datenschutzerklärung/Impressum Überschriften */
@media (max-width: 768px) {
    #datenschutz h1,
    #impressum h1 {
        font-size: 1.6em;
    }
    #datenschutz h2,
    #impressum h2 {
        font-size: 1.2em;
    }
    #datenschutz h3,
    #impressum h3 {
        font-size: 1em;
    }
}

/* Anpassung für Listen in familienaufstellung.html */
/* WICHTIG: Sie müssen dem <ul> Tag in Ihrer familienaufstellung.html die Klasse "nutzen-liste" hinzufügen,
   damit diese Regeln greifen! Beispiel: <ul class="nutzen-liste"> */
.nutzen-liste {
    list-style: disc; /* Stellt sicher, dass die Punkte angezeigt werden */
    list-style-position: outside; /* Punkt außerhalb des Textblocks */
    margin: 0; /* ALLE STANDARD-MARGINS ENTFERNEN */
    padding-left: 25px; /* Dies steuert den Gesamteinzug der Liste UND den Abstand des Punktes */
}

.nutzen-liste li {
    margin: 0; /* ALLE STANDARD-MARGINS ENTFERNEN */
    padding: 0; /* ALLE STANDARD-PADDINGS ENTFERNEN */
    margin-bottom: 8px; /* Abstand zwischen den einzelnen Listenelementen */
}

/* --- E-BOOK SEITE STYLING (ebook.html) --- */

.ebook-page-section {
    padding: 80px 0;
    background-color: var(--background-color); /* Oder eine helle Farbe */
}

.ebook-detail-content {
    max-width: 1000px; /* Max-Breite für den Inhalt */
    margin: 0 auto;
    text-align: center;
}

.ebook-title {
    font-size: 2.8em;
    color: var(--primary-color);
    margin-bottom: 50px;
    line-height: 1.2;
}

.ebook-main-area {
    display: flex;
    flex-direction: column; /* Standard für Mobile */
    gap: 50px;
    align-items: center;
}

.ebook-image-wrapper {
    flex-shrink: 0; /* Verhindert, dass das Bild schrumpft */
    width: 100%;
    max-width: 380px; /* Maximale Breite des Covers */
}

.ebook-cover-lg {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}

.ebook-info-area {
    flex-grow: 1; /* Lässt den Info-Bereich den restlichen Platz einnehmen */
    text-align: left;
    max-width: 600px; /* Max Breite für Textblock neben Bild auf Desktop */
}

.ebook-tagline {
    font-size: 1.4em;
    font-style: italic;
    color: var(--secondary-color);
    margin-bottom: 20px;
}

.ebook-description-intro,
.ebook-description-body {
    font-size: 1.1em;
    line-height: 1.8;
    margin-bottom: 20px;
    color: #444;
}

.ebook-features-list {
    list-style: none; /* Entfernt Standard-Bullet-Points */
    padding-left: 0;
    margin-bottom: 30px;
}

.ebook-features-list li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 10px;
    font-size: 1.05em;
    line-height: 1.6;
}

.ebook-features-list li::before {
    content: "\f00c"; /* FontAwesome Checkmark Icon */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: var(--primary-color);
    position: absolute;
    left: 0;
    top: 0;
}

.ebook-price-display {
    font-size: 1.3em;
    margin-top: 30px;
    margin-bottom: 30px;
    font-weight: 600;
    color: var(--text-color);
    text-align: center; /* Zentriert den Preis unter dem Text */
}

.ebook-price-display .price-value {
    font-size: 1.8em;
    color: var(--secondary-color);
    font-weight: 700;
    display: block; /* Damit der Preis in einer eigenen Zeile steht */
    margin-top: 5px;
}


.ebook-cta-btn {
    display: inline-block;
    background-color: var(--primary-color);
    color: white;
    padding: 18px 35px;
    font-size: 1.3em;
    text-decoration: none;
    border-radius: 8px;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
    margin-top: 20px;
    font-weight: 700;
}

.ebook-cta-btn:hover {
    background-color: var(--darker-primary-color);
    transform: translateY(-3px);
}

.ebook-disclaimer {
    font-size: 0.9em;
    color: #777;
    margin-top: 60px;
    line-height: 1.6;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* --- E-BOOK PROMO SEKTION AUF STARTSEITE (index.html) --- */

.ebook-promo-section {
    background-color: var(--light-background-color); /* Eine sehr helle Hintergrundfarbe */
    padding: 80px 0;
    text-align: center;
}

.ebook-promo-section h3 {
    font-size: 2.5em;
    margin-bottom: 40px;
    color: var(--heading-color);
    line-height: 1.3;
}

.ebook-promo-content {
    display: flex;
    flex-direction: column; /* Standard für Mobile */
    align-items: center;
    gap: 40px; /* Abstand zwischen Bild und Text */
    max-width: 900px;
    margin: 0 auto;
}

.ebook-promo-cover {
    max-width: 280px; /* Größe des Covers im Promo-Bereich */
    height: auto;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    border-radius: 8px;
}

.ebook-promo-text {
    text-align: center; /* Standard für Mobile */
}

.ebook-promo-text p {
    margin-bottom: 25px;
    line-height: 1.7;
    font-size: 1.1em;
    color: #555;
}

/* --- Responsive Anpassungen für E-Book Seite und Promo Bereich --- */
@media (min-width: 768px) {
    .ebook-main-area {
        flex-direction: row; /* Nebeneinander auf größeren Bildschirmen */
        text-align: left;
        align-items: flex-start; /* Oben ausgerichtet */
    }

    .ebook-image-wrapper {
        margin-right: 50px; /* Abstand zwischen Bild und Textblock */
    }

    .ebook-info-area {
        text-align: left; /* Text linksbündig neben dem Bild */
    }

    .ebook-price-display {
        text-align: left; /* Preis linksbündig unter dem Text */
    }

    .ebook-promo-content {
        flex-direction: row; /* Nebeneinander auf größeren Bildschirmen */
        text-align: left;
    }
    .ebook-promo-text {
        flex: 1;
        text-align: left;
    }
    .ebook-promo-cover {
        margin-right: 40px; /* Abstand zwischen Cover und Text */
    }
}

@media (max-width: 767px) {
    .ebook-title {
        font-size: 2em;
        margin-bottom: 30px;
    }
    .ebook-page-section {
        padding: 60px 0;
    }
    .ebook-promo-section {
        padding: 60px 0;
    }
    .ebook-promo-section h3 {
        font-size: 2em;
        margin-bottom: 30px;
    }
    .ebook-promo-content {
        gap: 30px;
    }
    .ebook-cta-btn {
        padding: 15px 25px;
        font-size: 1.1em;
    }
}