/* Datei: css/custom-styles.css */

/* --- Farbvariablen für das Achtsamkeits-Design (WALD & MEER) --- */
:root {
    /* Primäre Farben: Wald (Erdung, Stabilität) */
    --bs-primary: #3A644D;     /* Tiefer Waldgrün-Ton */
    --bs-success: #3A644D;     /* Primäre Farbe auch für "Success" (CTAs) */
    
    /* Sekundäre Farben: Meer (Weite, Klarheit) */
    --accent-color-sea: #60A3B5; /* Ruhiges Meeres-Blau */
    
    /* Neutrale Farben: Sand/Kiesel */
    --bs-secondary: #F5F3ED;   /* Helles Sand/Kiesel-Ton für Akzentbereiche */
    --neutral-bg: #F5F3ED;     /* Hintergrundfarbe für abgesetzte Sektionen */
    
    /* Text und Basis */
    --bs-body-color: #333333;  /* Dunkles, weiches Grau für Lesbarkeit */
    --bs-white: #FFFFFF;
}

/* --- Typografie und Basis-Layout --- */
body {
    font-family: 'Lato', sans-serif; 
    color: var(--bs-body-color);
}

h1, h2, h3, h4 {
    font-family: 'Lora', serif; 
    color: var(--bs-primary); /* Überschriften verwenden jetzt das tiefe Waldgrün */
}

/* --- Spezifische Komponenten --- */

/* Hero Sektion */
.hero-section {
    padding-top: 6rem;
    padding-bottom: 6rem;
    background-color: var(--bs-white);
}

/* Call-to-Action Button (Primary/Success) */
.btn-primary, .btn-success {
    /* Verwendung des dunkleren Waldgrüns */
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    font-weight: bold;
    padding: 0.75rem 1.5rem;
    transition: all 0.3s ease;
}
.btn-primary:hover, .btn-success:hover {
    background-color: #2c4a34 !important; /* Noch dunkler beim Hover */
    border-color: #2c4a34 !important;
}

/* Navigationsleiste */
.navbar-brand {
    font-size: 1.75rem;
    font-weight: bold;
    color: var(--bs-primary) !important;
}

/* 1. Sektionen mit allgemeinem Sand-Akzent-Hintergrund */
.bg-accent {
    background-color: var(--neutral-bg);
    padding-top: 4rem;
    padding-bottom: 4rem;
}

/* 2. NEU: Sektionen mit Meer-Akzent (z.B. für "Über Uns" oder spezielle Angebote) */
.bg-accent-sea {
    background-color: var(--accent-color-sea);
    color: var(--bs-white); /* Text auf diesem Hintergrund sollte weiß sein */
    padding-top: 4rem;
    padding-bottom: 4rem;
}
.bg-accent-sea h2, .bg-accent-sea h3 {
    color: var(--bs-white); /* Überschriften im blauen Bereich bleiben weiß */
}

/* NEU: Für Textschatten auf Hero-Images */
.shadow-text {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}