/*
 * index.css — Stylesheet für die Startseite (index.html)
 * ========================================================
 * Dieses File enthält alle Stile, die AUSSCHLIESSLICH auf der
 * Startseite verwendet werden. Es dient als vollständiges,
 * eigenständiges Stylesheet (inkl. Basis-Stile, Navigation, Footer).
 *
 * Seitenspezifische Stylesheets:
 *   - Unterseiten (nordapart.html etc.) → css/style.css
 *   - Gezeitenrechner                   → css/gezeiten.css
 *
 * INHALTSVERZEICHNIS
 * ===================
 *  1. CSS-Variablen & Reset
 *  2. Typographie
 *  3. Schaltflächen
 *  4. Navigation
 *  5. Hero-Bereich (Startseiten-Header)
 *  6. Ferienhäuser-Übersicht
 *  7. Ferienwohnungs-Karten
 *  8. Highlights
 *  9. CTA-Bereich
 * 10. Footer
 * 11. Animationen
 * 12. Testimonials / Kundenstimmen
 * 13. Freizeitaktivitäten
 * 14. Kontaktbereich
 * 15. Cookie-Banner
 * 16. Sektion-Hintergründe & Übergänge
 * 17. Hilfsklassen
 * 18. Responsive Design
 */


/* ================================================================
   1. CSS-VARIABLEN & RESET
   Globale Design-Tokens: Farben, Schatten, Transition-Geschwindigkeit.
   Alle Elemente erhalten box-sizing: border-box, damit Padding und
   Border INNERHALB der angegebenen Breite liegen.
   ================================================================ */

:root {
    --primary-color:   #08468e;   /* Hauptfarbe: Dunkelblau */
    --secondary-color: #1d1d1f;   /* Textfarbe: Fast-Schwarz */
    --third-color:     #366396;   /* Hover-Farbe: Mittleres Blau */
    --light-gray:      #f5f5f7;   /* Hintergrundflächen */
    --medium-gray:     #86868b;   /* Platzhaltertext, Metainfos */
    --dark-gray:       #333333;   /* Fließtext */
    --white:           #ffffff;
    --shadow:          0 4px 12px rgba(0, 0, 0, 0.08);
    --transition:      all 0.3s ease;
}

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

html {
    scroll-behavior:   smooth;
    /* Verhindert, dass Inhalte unter der fixierten Navbar verschwinden */
    scroll-padding-top: 80px;
}

body {
    font-family:      -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    line-height:      1.6;
    color:            var(--secondary-color);
    background-color: var(--white);
    overflow-x:       hidden; /* Verhindert horizontales Scrollen */
}

/* Zentrierung und maximale Breite für Seiteninhalte */
.container {
    width:     90%;
    max-width: 1200px;
    margin:    0 auto;
    padding:   0 15px;
}

/* Abschnitte sollen beim Anspringen per Anker nicht unter der Navbar liegen */
section[id] {
    scroll-margin-top: 80px;
}


/* ================================================================
   2. TYPOGRAPHIE
   Hierarchie der Überschriften, Absätze und Links.
   ================================================================ */

h1, h2, h3, h4, h5, h6 {
    font-weight:   600;
    line-height:   1.3;
    margin-bottom: 1rem;
}

h1 { font-size: 3rem; }

h2 {
    font-size:     2.5rem;
    text-align:    center;
    margin-bottom: 2rem;
}

h3 { font-size: 1.8rem; }

p {
    margin-bottom: 1rem;
}

a {
    text-decoration: none;
    color:           var(--primary-color);
    transition:      var(--transition);
}

a:hover {
    color: var(--secondary-color);
}

img {
    max-width: 100%;
    height:    auto;
    display:   block;
}

section {
    padding: 2rem 0;
}


/* ================================================================
   3. SCHALTFLÄCHEN
   Drei Varianten: .btn (Standard), .btna (primär, Cookie-Banner),
   .btnb (sekundär, Cookie-Banner). Modifikatoren: .btn-primary,
   .btn-small, .btn-block, .btn-outline.
   ================================================================ */

/* Standard-Button (blau, abgerundet) */
.btn {
    display:          inline-block;
    padding:          12px 24px;
    background-color: var(--primary-color);
    color:            var(--white);
    border-radius:    30px;
    font-weight:      500;
    text-align:       center;
    transition:       var(--transition);
    border:           none;
    cursor:           pointer;
}

.btn:hover {
    background-color: var(--third-color);
    color:            var(--white);
    transform:        translateY(-2px);
    box-shadow:       var(--shadow);
}

/* Primärer Button (Cookie-Banner: Alle akzeptieren) */
.btna {
    display:          inline-block;
    padding:          12px 24px;
    background-color: var(--primary-color);
    color:            var(--white);
    border-radius:    30px;
    font-size:        0.9rem;
    text-align:       center;
    transition:       var(--transition);
    border:           none;
    cursor:           pointer;
}

.btna:hover {
    background-color: var(--third-color);
    color:            var(--white);
    transform:        translateY(-2px);
    box-shadow:       var(--shadow);
}

/* Sekundärer Button (Cookie-Banner: Ablehnen, Auswahl speichern) */
.btnb {
    display:          inline-block;
    padding:          12px 24px;
    background-color: var(--white);
    color:            var(--primary-color);
    border-radius:    30px;
    font-size:        0.9rem;
    text-align:       center;
    transition:       var(--transition);
    border:           3px solid var(--primary-color);
    cursor:           pointer;
}

.btnb:hover {
    background-color: var(--third-color);
    border:           3px solid var(--white);
    color:            var(--white);
    transform:        translateY(-2px);
    box-shadow:       var(--shadow);
}

/* Modifikatoren */
.btn-primary {
    background-color: var(--primary-color);
    color:            var(--white);
}

.btn-small {
    padding:   8px 16px;
    font-size: 0.9rem;
}


/* ================================================================
   4. NAVIGATION
   Die Navbar ist fixiert (position: fixed) und bleibt beim Scrollen
   immer sichtbar. Per JavaScript wird beim Scrollen die Klasse
   .scrolled hinzugefügt, die Hintergrund und Schatten leicht verstärkt.
   Das mobile Hamburger-Menü wird ab 992px eingeblendet.
   ================================================================ */

.navbar {
    position:         fixed;
    top:              0;
    left:             0;
    width:            100%;
    display:          flex;
    justify-content:  space-between;
    align-items:      center;
    padding:          1.5rem 5%;
    z-index:          1000;
    transition:       var(--transition);
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter:        blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Beim Scrollen: stärkerer Hintergrund + Schatten (via JS gesetzt) */
.navbar.scrolled {
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow:       0 2px 10px rgba(0, 0, 0, 0.1);
    padding:          1rem 5%;
}

.logo img {
    max-height: 60px;
    width:      auto;
}

.nav-menu {
    display:     flex;
    list-style:  none;
}

.nav-menu li {
    margin-left: 2rem;
}

.nav-menu a {
    color:       var(--secondary-color);
    font-weight: 500;
    position:    relative;
}

/* Unterstrich-Animation beim Hover und aktiven Link */
.nav-menu a::after {
    content:          '';
    position:         absolute;
    bottom:           -5px;
    left:             0;
    width:            0;
    height:           2px;
    background-color: var(--primary-color);
    transition:       var(--transition);
}

.nav-menu a:hover::after,
.nav-menu a.active::after {
    width: 100%;
}

/* Hamburger-Button (nur auf Mobile sichtbar, per Media Query) */
.menu-toggle {
    display: none;
    cursor:  pointer;
}

.bar {
    display:          block;
    width:            25px;
    height:           2px;
    margin:           5px auto;
    background-color: var(--secondary-color);
    transition:       var(--transition);
}


/* ================================================================
   5. HERO-BEREICH (Startseiten-Header)
   Vollbild-Hintergrundbild mit Overlay-Verdunkelung.
   Auf Mobile wird ein optimiertes Hochformat-Bild geladen (Media Query).
   Das ::before-Pseudo-Element erzeugt die Verdunkelung zusätzlich zum
   Gradient im background-image (doppelt für Kompatibilität).
   ================================================================ */

.main-header {
    position: relative;
    overflow: hidden;
}

.hero {
    /* Gradient + Bild kombiniert, damit der Overlay immer greift */
    background-image:    linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
                         url('../images/index/hero-backround.webp');
    background-size:     cover;
    background-position: center;
    background-attachment: fixed; /* Parallax-Effekt auf Desktop */
    background-repeat:   no-repeat;
    height:              100vh;
    display:             flex;
    align-items:         center;
    justify-content:     center;
    text-align:          center;
    color:               var(--white);
    position:            relative;
}

/* Zusätzliche Verdunkelungsschicht als Fallback */
.hero::before {
    content:          '';
    position:         absolute;
    top:              0;
    left:             0;
    width:            100%;
    height:           100%;
    background-color: rgba(0, 0, 0, 0.4);
}

/* Auf sehr kleinen Bildschirmen: Hochformat-Bild verwenden */
@media (max-width: 576px) {
    .hero {
        background-image:    linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
                             url('../images/index/NA-Hero-Mobile.webp');
        height:              100vh;
        min-height:          100vh;
        width:               100vw;
        background-attachment: scroll; /* Kein Parallax auf Mobile (Performance) */
    }
}

.hero-content {
    position:  relative;
    z-index:   1;
    max-width: 800px;
    padding:   0 20px;
}

/* Hero-Text-Animationen (fadeInDown / fadeInUp – definiert in Abschnitt 11) */
.hero-content h1 {
    font-size:      3.5rem;
    margin-bottom:  1rem;
    animation:      fadeInDown 1s ease;
}

.hero-content p {
    font-size:           1.5rem;
    margin-bottom:       2rem;
    animation:           fadeInUp 1s ease 0.3s;
    animation-fill-mode: both;
}

.hero-content .btn {
    animation:           fadeInUp 1s ease 0.6s;
    animation-fill-mode: both;
}


/* ================================================================
   6. FERIENHÄUSER-ÜBERSICHT
   Kartenraster auf der Startseite mit den zwei Ferienhäusern.
   Hover-Effekt: Karte hebt sich leicht an.
   ================================================================ */

.house-cards {
    display:         flex;
    flex-wrap:       wrap;
    gap:             2rem;
    justify-content: center;
    margin-bottom:   2rem;
}

.house-card {
    flex:             1 1 400px;
    max-width:        550px;
    background-color: var(--white);
    border-radius:    10px;
    overflow:         hidden;
    box-shadow:       var(--shadow);
    transition:       var(--transition);
}

.house-card:hover {
    transform:  translateY(-10px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.house-image img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.house-card:hover .house-image img {
    transform: scale(1.05);
}

.house-info {
    padding: 2rem;
}

.house-info h3 {
    margin-bottom: 0.5rem;
}

.house-info p {
    color:         var(--medium-gray);
    margin-bottom: 1.5rem;
}

.price {
    font-weight:   600;
    color:         var(--primary-color);
    font-size:     1.2rem;
    margin-bottom: 1.5rem;
}


/* ================================================================
   7. FERIENWOHNUNGS-KARTEN
   Kleinere Karten innerhalb des Hauseintrags
   mit zwei Bildformaten für NordApart (.na-) und Möwennest (.mn-).
   ================================================================ */

.apartment-section {
    margin-bottom: 4rem;
}

.apartment-section:last-child {
    margin-bottom: 0;
}

.section-title {
    text-align:    left;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--medium-gray);
}

.apartment-cards {
    display:       flex;
    flex-wrap:     wrap;
    gap:           2rem;
    margin-bottom: 2rem;
}

.apartment-card {
    flex:             1 1 300px;
    background-color: var(--white);
    border-radius:    10px;
    overflow:         hidden;
    box-shadow:       var(--shadow);
    transition:       var(--transition);
}

.apartment-card:hover {
    transform:  translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

/* NordApart-Wohnungsbild: größere Vorschau */
.na-apartment-image {
    height:   300px;
    overflow: hidden;
}

.na-apartment-image img {
    width:      100%;
    height:     300px;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* Möwennest-Wohnungsbild: kompaktere Vorschau */
.mn-apartment-image {
    height:   200px;
    overflow: hidden;
}

.mn-apartment-image img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.apartment-card:hover .apartment-image img {
    transform: scale(1.05);
}

.apartment-info {
    padding: 1.5rem;
}

.apartment-info h4 {
    margin-bottom: 0.5rem;
}

/* Feature-Tags (z. B. "WLAN", "2 Schlafzimmer") */
.apartment-features {
    display:       flex;
    flex-wrap:     wrap;
    gap:           0.5rem;
    margin:        1rem 0 1.5rem;
}

.apartment-features span {
    background-color: var(--light-gray);
    padding:          5px 10px;
    border-radius:    20px;
    font-size:        0.9rem;
    color:            var(--dark-gray);
    display:          flex;
    align-items:      center;
    white-space:      nowrap;
}

.apartment-features span .icon {
    width:          16px;
    height:         16px;
    margin-right:   5px;
    vertical-align: middle;
    display:        inline-block;
}


/* ================================================================
   8. HIGHLIGHTS
   Drei Merkmal-Kacheln unterhalb der Wohnungs-Übersicht.
   ================================================================ */

.highlight-cards {
    display:         flex;
    flex-wrap:       wrap;
    gap:             2rem;
    justify-content: center;
}

.highlight-card {
    flex:             1 1 300px;
    text-align:       center;
    padding:          2rem;
    border-radius:    10px;
    background-color: var(--light-gray);
    transition:       var(--transition);
    display:          flex;
    flex-direction:   column;
    align-items:      center;
}

.highlight-card:hover {
    transform:  translateY(-5px);
    box-shadow: var(--shadow);
}

.highlight-icon {
    margin-bottom: 1rem;
    display:       flex;
    justify-content: center;
    align-items:   center;
    height:        80px; /* Feste Höhe für konsistente Ausrichtung aller Icons */
}

.highlight-icon .icon {
    width:  60px;
    height: 60px;
}

.highlight-card h3 {
    margin-bottom: 0.5rem;
    margin-top:    0.5rem;
}

.highlight-card p {
    color: var(--medium-gray);
}


/* ================================================================
   9. CTA-BEREICH (Call to Action)
   Blauer Balken mit Handlungsaufforderung und Buttons.
   ================================================================ */

.cta {
    background-color: var(--primary-color);
    color:            var(--white);
    text-align:       center;
    padding:          4rem 0;
}

.cta h2 { color: var(--white); }

.cta p {
    margin-bottom: 2rem;
    font-size:     1.2rem;
}

.cta .btn {
    background-color: var(--white);
    color:            var(--primary-color);
}

.cta .btn:hover {
    background-color: var(--light-gray);
}

/* Clearfix für Float-basierte Layouts (Fallback) */
.clearfix::after {
    content: "";
    display: table;
    clear:   both;
}


/* ================================================================
   10. FOOTER
   Dunkelblaues, mehrspaltige Fußzeile mit Kontakt, Links und Social.
   Die h3::after-Linie simuliert eine Unterstreichung.
   ================================================================ */

footer {
    background-color: var(--primary-color);
    color:            var(--white);
    padding:          4rem 0 2rem;
    margin-top:       3rem;
    position:         relative;
    z-index:          0;
}

.footer-content {
    display:       flex;
    flex-wrap:     wrap;
    gap:           2rem;
    margin-bottom: 2rem;
}

.footer-section {
    flex: 1 1 200px;
}

.footer-section h3 {
    position:      relative;
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
}

/* Dekorative kurze Linie unter Footer-Überschriften */
.footer-section h3::after {
    content:          '';
    position:         absolute;
    bottom:           0;
    left:             0;
    width:            50px;
    height:           2px;
    background-color: var(--primary-color);
}

.footer-section p {
    display:     flex;
    align-items: center;
}

.footer-section p a {
    color:         white;
    display:       flex;
    align-items:   center;
    margin-bottom: 0.5rem;
}

.footer-section .icon {
    width:          25px;
    height:         25px;
    margin-right:   10px;
    display:        inline-block;
    vertical-align: middle;
}

.footer-section ul {
    list-style: none;
}

.footer-section ul li {
    margin-bottom: 0.5rem;
}

.footer-section ul li a {
    color: var(--light-gray);
}

.footer-section ul li a:hover {
    color: black;
}

/* Social-Media-Icons (WhatsApp, Instagram, Facebook) */
.social-icons {
    display: flex;
    gap:     1rem;
}

.social-icons a {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    width:            40px;
    height:           40px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius:    50%;
    color:            var(--white);
    transition:       var(--transition);
    overflow:         hidden;
    position:         relative;
}

.social-icons a img.icon {
    width:      24px;
    height:     24px;
    object-fit: contain;
    position:   absolute;
    top:        50%;
    left:       50%;
    transform:  translate(-50%, -50%);
}

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

.footer-bottom {
    text-align:  center;
    padding-top: 2rem;
    border-top:  1px solid rgba(255, 255, 255, 0.1);
}


/* ================================================================
   11. ANIMATIONEN
   @keyframes für Hero-Einblendungen und den Cookie-Banner-Slide-Up.
   ================================================================ */

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-20px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Wird für den Cookie-Banner genutzt (slide von unten rein) */
@keyframes slideUp {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

/* Fade-In-Up-Animation beim Scrollen (gesteuert per IntersectionObserver in grund.js) */
.fade-in-element {
    opacity:    0;
    transform:  translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in-visible {
    opacity:   1;
    transform: translateY(0);
}


/* ================================================================
   12. TESTIMONIALS / KUNDENSTIMMEN
   Automatisch laufendes Karussell (animiert per CSS + JS).
   Links und rechts wird mit einem Gradienten ausgeblendet.
   ================================================================ */

.testimonials-container {
    position: relative;
    width:    100%;
    overflow: hidden;
    padding:  20px 0;
}

.testimonial-description {
    color:      var(--medium-gray);
    text-align: center;
}

/* Ein- und Ausblendgradient links und rechts */
.testimonials-container::before,
.testimonials-container::after {
    content:        '';
    position:       absolute;
    top:            0;
    width:          10%;
    height:         100%;
    z-index:        2;
    pointer-events: none;
}

.testimonials-container::before {
    left:       0;
    background: linear-gradient(to right, var(--white), transparent);
}

.testimonials-container::after {
    right:      0;
    background: linear-gradient(to left, var(--white), transparent);
}

/* Der laufende Track – Animation wird per JS dynamisch gesetzt */
.testimonial-track {
    display:     flex;
    gap:         30px;
    padding:     20px 0;
    align-items: flex-start; /* Karten oben ausrichten, nicht strecken */
}

.testimonial-slide {
    flex:       0 0 auto;
    width:      350px;
    transition: opacity 0.5s ease;
}

.testimonial-card {
    background-color: var(--light-gray);
    border-radius:    15px;
    padding:          25px;
    box-shadow:       0 5px 15px rgba(0, 0, 0, 0.05);
    min-height:       200px;
    transition:       transform 0.3s ease, box-shadow 0.3s ease;
    display:          flex;
    flex-direction:   column;
    justify-content:  space-between;
}

.testimonial-card:hover {
    transform:  translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.testimonial-header {
    display:      flex;
    align-items:  center;
    margin-bottom: 15px;
    flex-shrink:  0;
}

/* Rundes Profilbild mit blauem Rahmen */
.testimonial-image {
    width:         70px;
    height:        70px;
    border-radius: 50%;
    overflow:      hidden;
    margin-right:  15px;
    border:        3px solid var(--primary-color);
}

.testimonial-image img {
    width:      100%;
    height:     100%;
    object-fit: cover;
}

.testimonial-info h3 {
    margin:    0 0 5px;
    font-size: 1.1rem;
}

.testimonial-source {
    display:       flex;
    align-items:   center;
    margin-bottom: 5px;
    font-size:     0.9rem;
    color:         var(--medium-gray);
}

.source-icon {
    height:       16px;
    margin-right: 5px;
}

.testimonial-rating {
    display:     flex;
    align-items: center;
}

.testimonial-rating .icon {
    width:        16px;
    height:       16px;
    margin-right: 2px;
    display:      inline-block;
}

.testimonial-text {
    font-style:    italic;
    margin-bottom: 15px;
    line-height:   1.6;
    color:         var(--dark-gray);
    flex-grow:     1; /* Nimmt verfügbaren Platz, drückt Datum nach unten */
}

.testimonial-date {
    font-size:   0.8rem;
    color:       var(--medium-gray);
    text-align:  right;
    margin:      0;
    flex-shrink: 0;
    margin-top:  auto; /* Datum bleibt immer am unteren Rand */
}

/* Größerer Container auf breiten Bildschirmen */
@media (min-width: 1200px) {
    .testimonials .container {
        max-width: 1400px;
    }
}

@media (max-width: 992px) {
    .testimonial-slide { width: 320px; }
}

@media (max-width: 768px) {
    .testimonial-slide { width: 280px; }

    .testimonial-image {
        width:  60px;
        height: 60px;
    }
}

@media (max-width: 576px) {
    .testimonial-slide { width: 260px; }

    .testimonial-image {
        width:  50px;
        height: 50px;
    }

    .testimonial-info h3 { font-size: 1rem; }
    .testimonial-text    { font-size: 0.9rem; }
}


/* ================================================================
   13. FREIZEITAKTIVITÄTEN
   Gefiltertes Kartenraster mit Kategorie-Buttons oben.
   Karten werden per JS ein-/ausgeblendet.
   .favorite-badge ist ein absolut positioniertes Label.
   ================================================================ */

.section-intro {
    max-width:     800px;
    margin:        0 auto 2rem;
    text-align:    center;
    color:         var(--medium-gray);
    font-size:     1.1rem;
}

.activities-filter {
    display:         flex;
    flex-wrap:       wrap;
    justify-content: center;
    gap:             1rem;
    margin-bottom:   3rem;
}

.filter-btn {
    background:    var(--white);
    border:        none;
    padding:       0.8rem 1.5rem;
    border-radius: 30px;
    font-size:     0.9rem;
    font-weight:   500;
    color:         var(--dark-gray);
    cursor:        pointer;
    transition:    var(--transition);
}

.filter-btn:hover  { background: #e0e0e2; }

.filter-btn.active {
    background: var(--primary-color);
    color:      var(--white);
}

.activities-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap:                   2rem;
    margin-bottom:         4rem;
}

/* Karten starten unsichtbar; JS setzt opacity/transform zurück */
.activity-card {
    background:    var(--white);
    border-radius: 15px;
    overflow:      hidden;
    box-shadow:    var(--shadow);
    position:      relative;
    opacity:       0;
    transform:     translateY(20px);
    transition:    opacity 0.4s ease, transform 0.4s ease, box-shadow 0.3s ease;
    height:        100%;
}

.activity-card:hover {
    transform:  translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.activity-image {
    height:   200px;
    overflow: hidden;
}

.activity-image img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.activity-card:hover .activity-image img {
    transform: scale(1.05);
}

.activity-content {
    padding:  1.5rem;
    position: relative; /* Nötig für absolute Positionierung des Badges */
}

.activity-content h3 {
    margin-bottom: 0.8rem;
    font-size:     1.4rem;
    padding-right: 120px; /* Platz für das Favoriten-Badge reservieren */
}

.activity-meta {
    display:      flex;
    flex-wrap:    wrap;
    gap:          8px;
    margin-bottom: 1rem;
    font-size:    0.9rem;
    color:        var(--medium-gray);
    align-items:  center;
}

.activity-meta span,
.activity-features span {
    display:     inline-flex !important;
    align-items: center !important;
    margin-right: 15px;
    white-space: nowrap;
}

.activity-meta .icon,
.activity-features .icon {
    width:      16px;
    height:     16px;
    margin-right: 8px;
    flex-shrink: 0;
}

.activity-content p {
    margin-bottom: 1.2rem;
    color:         var(--dark-gray);
}

.activity-features {
    display:       flex;
    flex-wrap:     wrap;
    gap:           8px;
    margin-bottom: 1rem;
}

.activity-features span {
    font-size: 0.9rem;
    color:     var(--dark-gray);
}

/* Gestaffelte Einblend-Verzögerung für die Karten (durch CSS vordefiniert) */
.activity-card:nth-child(1)  { transition-delay: 0.05s; }
.activity-card:nth-child(2)  { transition-delay: 0.10s; }
.activity-card:nth-child(3)  { transition-delay: 0.15s; }
.activity-card:nth-child(4)  { transition-delay: 0.20s; }
.activity-card:nth-child(5)  { transition-delay: 0.25s; }
.activity-card:nth-child(6)  { transition-delay: 0.30s; }
.activity-card:nth-child(7)  { transition-delay: 0.35s; }
.activity-card:nth-child(8)  { transition-delay: 0.40s; }
.activity-card:nth-child(9)  { transition-delay: 0.45s; }
.activity-card:nth-child(10) { transition-delay: 0.50s; }
.activity-card:nth-child(11) { transition-delay: 0.55s; }
.activity-card:nth-child(12) { transition-delay: 0.60s; }

/* "Empfehlung"-Badge oben rechts auf der Karte */
.favorite-badge {
    position:         absolute;
    top:              1rem;
    right:            1.5rem;
    background-color: var(--primary-color);
    color:            white;
    padding:          5px 15px;
    border-radius:    20px;
    font-size:        0.8rem;
    font-weight:      500;
    box-shadow:       0 3px 10px rgba(0, 0, 0, 0.1);
    z-index:          1;
    display:          flex;
    align-items:      center;
    margin-top:       0.5rem;
}

.favorite-badge .icon {
    width:        16px;
    height:       16px;
    margin-right: 8px;
}

/* Aktivitäten-Responsive */
@media (max-width: 992px) {
    .activities-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
}

@media (max-width: 768px) {
    .activities-grid { grid-template-columns: 1fr; }
}

@media (max-width: 576px) {
    .filter-btn {
        font-size: 0.8rem;
        padding:   0.7rem 1.2rem;
    }
}


/* ================================================================
   14. KONTAKTBEREICH
   Zweiteiliges Grid: links Infos + Gastgeber, rechts Formular.
   Das Formular enthält Validierung (siehe index.js).
   ================================================================ */

.contact {
    background-color: var(--white);
    position:         relative;
    z-index:          0;
    padding-top:      0;
}

/* Weicher Übergang von der Aktivitäten-Sektion */
.contact::before {
    content:        "";
    position:       absolute;
    top:            -30px;
    left:           0;
    right:          0;
    height:         30px;
    background:     linear-gradient(to bottom, var(--white) 0%, var(--white) 90%, transparent 100%);
    pointer-events: none;
}

.contact-container {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   3rem;
}

/* Gastgeber-Block */
.hosts-section { margin-bottom: 3rem; }

.hosts-section h3 { padding-top: 2.5rem; }

.hosts-container {
    display:    flex;
    gap:        2rem;
    margin-top: 1.5rem;
}

.host-image {
    flex:          0 0 200px;
    height:        200px;
    border-radius: 15px;
    overflow:      hidden;
    box-shadow:    var(--shadow);
}

.host-image img {
    width:      100%;
    height:     100%;
    object-fit: cover;
}

.host-info h4 {
    margin-bottom: 1rem;
    font-size:     1.3rem;
}

.host-info p {
    color:         var(--dark-gray);
    margin-bottom: 1rem;
}

/* Kontaktdetail-Elemente (Telefon, E-Mail, Adresse) */
.contact-details { margin-bottom: 3rem; }

.contact-item {
    display:       flex;
    align-items:   flex-start;
    margin-bottom: 1.5rem;
}

/* Rundes Icon-Feld links neben dem Kontakttext */
.contact-icon {
    flex:             0 0 50px;
    height:           50px;
    background-color: var(--light-gray);
    border-radius:    50%;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    margin-right:     1rem;
    color:            var(--primary-color);
    font-size:        1.2rem;
    padding:          0;
    box-sizing:       border-box;
    position:         relative;
}

.contact-icon .icon {
    width:     24px;
    height:    24px;
    position:  absolute;
    top:       50%;
    left:      50%;
    transform: translate(-50%, -50%);
    padding:   0;
    margin:    0;
}

.contact-text h4 {
    margin-bottom: 0.5rem;
    font-size:     1.1rem;
}

.contact-text p {
    margin-bottom: 0.3rem;
    color:         var(--dark-gray);
}

.contact-text .note {
    font-size: 0.9rem;
    color:     var(--medium-gray);
}

/* Kontaktformular-Container */
.contact-form-container {
    background-color: var(--light-gray);
    border-radius:    15px;
    padding:          2.5rem;
    box-shadow:       var(--shadow);
    height:           auto;
    max-height:       875px;
    overflow:         visible;
}

.contact-form {
    display: block;
    height:  auto;
}

.contact-form .form-group {
    margin-bottom: 1.5rem;
}

.contact-form label {
    display:       block;
    margin-bottom: 0.5rem;
    font-weight:   500;
    color:         var(--dark-gray);
}

/* Einheitliches Styling für alle Formularfelder */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form input[type="date"],
.contact-form select,
.contact-form textarea {
    width:            100%;
    padding:          12px 15px;
    border:           1px solid #e0e0e2;
    border-radius:    8px;
    background-color: var(--white);
    font-family:      inherit;
    font-size:        1rem;
    color:            var(--secondary-color);
    transition:       border-color 0.3s ease, box-shadow 0.3s ease;
}

.contact-form textarea {
    height:  150px;
    resize:  vertical; /* Nutzer kann Höhe selbst anpassen */
}

/* Fokus-Highlight (blauer Rahmen + leichter Schatten) */
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    outline:    none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.1);
}

.contact-form .form-group:last-of-type {
    margin-bottom: 0;
}

/* Nebeneinander-Felder (z. B. Anreise / Abreise) */
.form-row {
    display: flex;
    gap:     1rem;
}

.form-group.half {
    flex: 1;
}

/* Checkbox-Gruppe (Datenschutz-Zustimmung) */
.form-group.checkbox {
    display:     flex;
    align-items: flex-start;
}

.form-group.checkbox input {
    margin-top:   5px;
    margin-right: 10px;
    flex-shrink:  0;
}

.form-group.checkbox label {
    font-weight: normal;
    font-size:   0.9rem;
    line-height: 1.4;
}

.form-group.checkbox a {
    color:           var(--primary-color);
    text-decoration: underline;
}

.form-submit {
    margin-top:    2rem;
    margin-bottom: 1rem;
}

.form-note {
    margin-top:    1rem;
    margin-bottom: 0;
    font-size:     0.8rem;
    color:         var(--medium-gray);
    text-align:    right;
    padding-bottom: 0;
}

/* Kontakt-Responsive */
@media (max-width: 1200px) {
    .contact-container { gap: 2rem; }
    .host-image         { flex: 0 0 150px; height: 150px; }
}

@media (max-width: 992px) {
    .contact-container {
        grid-template-columns: 1fr;
        gap:                   3rem;
    }

    .hosts-container {
        flex-direction: column;
        gap:            1.5rem;
    }

    .host-image {
        width:  200px;
        margin: 0 auto;
    }

    .host-info { text-align: center; }

    .contact-details {
        display:               grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap:                   1.5rem;
    }
}

@media (max-width: 768px) {
    .contact-form-container { padding: 2rem; }

    .form-row {
        flex-direction: column;
        gap:            1.5rem;
    }
}

@media (max-width: 576px) {
    .contact-details          { grid-template-columns: 1fr; }
    .contact-form-container   { padding: 1.5rem; }

    .hosts-section h3 {
        text-align: center;
    }

    .contact-info    { padding-bottom: 0; margin-bottom: 0; }
    .contact-form-container { margin-top: 0; }
}


/* ================================================================
   15. COOKIE-BANNER
   Gleitet von unten ins Bild (transform: translateY).
   Der schwebende Cookie-Button erscheint nach dem Schließen.
   Vollständige Steuerlogik in js/cookie.js.
   ================================================================ */

.cookie-banner {
    position:         fixed;
    bottom:           0;
    left:             0;
    right:            0;
    background-color: var(--white);
    box-shadow:       0 -5px 20px rgba(0, 0, 0, 0.1);
    z-index:          9999;
    transform:        translateY(100%); /* Startet außerhalb des Bildschirms */
    transition:       transform 0.4s ease-in-out;
    max-height:       80vh;
    overflow-y:       auto;
    backdrop-filter:        blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Sichtbar-Zustand (per JS: classList.add('show')) */
.cookie-banner.show {
    transform: translateY(0);
    animation: slideUp 0.4s ease-out;
}

.cookie-content {
    padding:   1.5rem;
    max-width: 800px;
    margin:    0 auto;
}

.cookie-header {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    margin-bottom:   1rem;
}

.cookie-header h3 { margin: 0; }

.cookie-close {
    background: none;
    border:     none;
    font-size:  1.2rem;
    cursor:     pointer;
    color:      var(--medium-gray);
    transition: color 0.3s ease;
}

.cookie-close:hover  { color: var(--dark-gray); }
.cookie-close img    { max-height: 20px; }

.cookie-options { margin: 1.5rem 0; }

.cookie-option {
    margin-bottom:  1rem;
    padding-bottom: 1rem;
    border-bottom:  1px solid var(--light-gray);
}

.cookie-option:last-child { border-bottom: none; }

.cookie-option label {
    font-weight:  600;
    margin-left:  0.5rem;
}

.cookie-description {
    margin-top:  0.5rem;
    margin-left: 1.8rem;
    font-size:   0.9rem;
    color:       var(--medium-gray);
}

.cookie-policy-link {
    margin-bottom: 1.5rem;
    font-size:     0.9rem;
}

.cookie-actions {
    display:   flex;
    flex-wrap: wrap;
    gap:       1rem;
}

.cookie-actions button {
    flex:      1;
    min-width: 120px;
}

/* Schwebender Cookie-Button (Zahnrad-Icon, unten rechts) */
.cookie-settings-float {
    position:         fixed;
    bottom:           20px;
    right:            20px;
    width:            50px;
    height:           50px;
    border-radius:    50%;
    background-color: var(--primary-color);
    color:            var(--white);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    cursor:           pointer;
    box-shadow:       0 4px 10px rgba(0, 0, 0, 0.2);
    z-index:          998;
    font-size:        1.3rem;
    transition:       transform 0.3s ease, box-shadow 0.3s ease;
    opacity:          0;
    transform:        scale(0); /* Startet unsichtbar */
}

/* Sichtbar-Zustand (per JS: classList.add('show')) */
.cookie-settings-float.show {
    opacity:   1;
    transform: scale(1);
}

.cookie-settings-float:hover {
    transform:  scale(1.1);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25);
}

.cookie-settings-float img.icon {
    width:      24px;
    height:     24px;
    object-fit: contain;
    position:   absolute;
    top:        50%;
    left:       50%;
    transform:  translate(-50%, -50%);
}

@media (max-width: 576px) {
    .cookie-actions  { flex-direction: column; }
    .cookie-content  { padding: 1rem; }
}

/* Google Maps Platzhalter (auf der Startseite) */
.maps-section {
    margin-top:    3rem;
    margin-bottom: 2rem;
}

.maps-section h3 { margin-bottom: 1.5rem; }

.map-placeholder {
    width:            100%;
    height:           400px;
    background-color: var(--light-gray);
    border-radius:    15px;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    border:           2px dashed var(--medium-gray);
    margin-bottom:    1rem;
    transition:       var(--transition);
}

.map-placeholder:hover {
    border-color:     var(--primary-color);
    background-color: #f0f4f8;
}

.placeholder-content {
    text-align: center;
    max-width:  400px;
}

.placeholder-icon {
    margin-bottom: 1rem;
    font-size:     3rem;
}

.placeholder-content h4 {
    margin-bottom: 1rem;
    color:         var(--secondary-color);
}

.placeholder-content p {
    color:         var(--dark-gray);
    margin-bottom: 1.5rem;
    line-height:   1.5;
}

.privacy-note {
    font-size:    0.8rem !important;
    color:        var(--medium-gray) !important;
    margin-top:   1rem !important;
    margin-bottom: 0 !important;
}

.privacy-note a               { color: var(--primary-color); text-decoration: underline; }
.privacy-note a:hover         { color: var(--secondary-color); }

.map-container {
    width:         100%;
    height:        400px;
    border-radius: 15px;
    overflow:      hidden;
    box-shadow:    var(--shadow);
    margin-bottom: 1rem;
    border:        1px solid #e0e0e2;
}

.map-container iframe { border-radius: 15px; }

@media (max-width: 768px) {
    .map-placeholder,
    .map-container {
        height: 300px;
    }

    .placeholder-content { padding: 1.5rem; }
    .placeholder-content h4 { font-size: 1.2rem; }
    .placeholder-content p  { font-size: 0.9rem; }
}


/* ================================================================
   16. SEKTION-HINTERGRÜNDE & ÜBERGÄNGE
   Jede Sektion hat einen eigenen Hintergrund und z-index,
   damit die Gradient-Übergänge zwischen den Abschnitten stimmen.
   ================================================================ */

.overview {
    background-color: var(--light-gray);
    position:         relative;
    z-index:          2;
}

.apartments {
    background: linear-gradient(180deg, var(--light-gray) 0%, var(--light-gray) 60%, var(--white) 100%);
    position:   relative;
    z-index:    1;
}

.highlights {
    background-color: var(--white);
    position:         relative;
    z-index:          2;
}

.testimonials {
    background-color: var(--white);
    position:         relative;
    z-index:          2;
    padding-bottom:   10px;
}

/* Weicher Übergang von Testimonials zu Aktivitäten */
.testimonials::after {
    content:        "";
    position:       absolute;
    left:           0;
    right:          0;
    bottom:         -40px;
    height:         90px;
    background:     linear-gradient(to bottom, var(--white) 0%, var(--light-gray) 100%);
    pointer-events: none;
    z-index:        2;
}

.activities {
    position:   relative;
    background: linear-gradient(180deg, var(--light-gray) 0%, var(--light-gray) 80%, var(--white) 100%);
    z-index:    1;
    padding-bottom: 0;
}

/* Mobile: Testimonials-Übergang verkleinern */
@media (max-width: 576px) {
    .testimonials { padding-bottom: 0; }

    .testimonials::after {
        bottom:  -15px;
        height:  30px;
    }
}


/* ================================================================
   17. HILFSKLASSEN
   Wiederverwendbare Klassen für Icons und mobile-only-Elemente.
   ================================================================ */

/* Standard-Icon-Größe (überschreibbar je nach Kontext) */
.icon {
    width:          24px;
    height:         24px;
    vertical-align: middle;
    margin-right:   8px;
}

/* Nur auf Mobile sichtbar (z. B. alternative Überschrift) */
.mobile-only-heading { display: none; }

@media (max-width: 576px) {
    .mobile-only-heading { display: block; }
}


/* ================================================================
   18. RESPONSIVE DESIGN
   Globale Breakpoints für Typographie, Navigation und Layout.
   Komponentenspezifische Breakpoints stehen direkt beim Abschnitt.
   ================================================================ */

/* Tablet (≤ 992px): Hamburger-Menü einblenden, Texte verkleinern */
@media (max-width: 992px) {
    h1 { font-size: 2.5rem; }
    h2 { font-size: 2rem; }

    .hero-content h1 { font-size: 2.8rem; }
    .hero-content p  { font-size: 1.3rem; }

    /* Hamburger-Button anzeigen */
    .menu-toggle { display: block; }

    /* Navigation als Dropdown von oben */
    .nav-menu {
        position:         fixed;
        top:              -100%;
        left:             0;
        width:            100%;
        flex-direction:   column;
        background-color: var(--white);
        box-shadow:       0 5px 10px rgba(0, 0, 0, 0.1);
        padding:          2rem 0;
        transition:       0.4s;
        text-align:       center;
        display:          none;
    }

    .nav-menu.active {
        top:     90px;
        display: block;
    }

    .nav-menu li { margin: 1.5rem 0; }

    /* Hamburger → X-Animation beim Öffnen */
    .menu-toggle.active .bar:nth-child(1) { transform: translateY(7px)  rotate(45deg); }
    .menu-toggle.active .bar:nth-child(2) { opacity: 0; }
    .menu-toggle.active .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* Smartphone (≤ 768px): Karten stapeln */
@media (max-width: 768px) {
    .hero-content h1 { font-size: 2.2rem; }
    .hero-content p  { font-size: 1.1rem; }

    .house-card,
    .apartment-card,
    .highlight-card {
        flex: 1 1 100%;
    }

    .footer-section { flex: 1 1 100%; }
}

/* Kleines Smartphone (≤ 576px): Typographie weiter reduzieren */
@media (max-width: 576px) {
    h1 { font-size: 2.5rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.2rem; }

    .hero-content p { font-size: 1rem; }

    .house-image { height: 200px; }
}