/* =========================================
   1. GLOBALE STILE & VARIABLEN
   ========================================= */
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500&family=Great+Vibes&family=Poppins:wght@300;400;500;700&family=League+Script:wght@300;400;500&=swap');

:root {
    --primary-color: #ffffff;
    --section-dark: #131313;
    --mobile-nav-bg: #131313;
    
    --font-primary: 'Comfortaa', sans-serif;
    --font-secondary: 'Poppins', sans-serif;
    --font-script: "Great Vibes", cursive;

    /* Swiper Overrides */
    --swiper-pagination-color: #ffffff;
    --swiper-pagination-bullet-inactive-color: #ffffff;
    --swiper-pagination-bullet-inactive-opacity: 1;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-primary);
    background-color: var(--section-dark);
    color: var(--primary-color);
}

body.menu-open {
    overflow: hidden;
}

.container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
}

/* =========================================
   2. HEADER & NAVIGATION
   ========================================= */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 3000;
    background-color: transparent;
    transition: background-color 0.4s ease, backdrop-filter 0.4s ease;
}

.header.scrolled {
    background-color: rgba(8, 8, 8, 0.5);
    backdrop-filter: blur(10px);
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 90px;
    position: relative;
    z-index: 3100;
}

.header-logo {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease-in-out;
    text-decoration: none;
}

.header-logo img {
    margin-top: 15%;
    width: 5em;
    height: auto;
    display: block;
}

.header.scrolled .header-logo {
    opacity: 1;
    pointer-events: auto;
}
/* =========================================
   BACK BUTTON STYLING
   ========================================= */

/* Abstand zwischen Pfeil und Text */
.back-link span {
    margin-right: 8px;
    display: inline-block;
    transition: transform 0.3s ease;
}

/* Animation: Pfeil bewegt sich beim Hover nach links */
.back-link:hover span {
    transform: translateX(-5px);
}

/* Optional: Fettere Schrift für den Zurück-Button */
.back-link {
    font-weight: 400 !important;
}
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #131313; /* Dein dunkler Hintergrund */
    z-index: 9999; /* Muss über allem anderen liegen */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Animation für das Ausblenden */
    transition: opacity 0.6s ease-out, visibility 0.6s ease-out;
    opacity: 1;
    visibility: visible;
}

/* Klasse zum Ausblenden (wird per JS hinzugefügt) */
#preloader.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* Damit man durchklicken kann, falls er hängen bleibt */
}

.preloader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

/* Das Logo im Preloader */
.preloader-logo {
    width: 120px;
    height: auto;
    /* Pulsier-Effekt */
    animation: pulseLogo 2s infinite ease-in-out;
}

/* Lade-Linie darunter */
.spinner-line {
    width: 0;
    height: 2px;
    background-color: #ffffff;
    border-radius: 2px;
    animation: loadLine 2s infinite ease-in-out;
}

/* --- ANIMATIONEN --- */

@keyframes pulseLogo {
    0% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); opacity: 0.8; }
}

@keyframes loadLine {
    0% { width: 0; opacity: 0; }
    50% { width: 50px; opacity: 1; }
    100% { width: 0; opacity: 0; margin-left: 50px; } /* Wandert nach rechts */
}
.nav-menu {
    display: flex;
    list-style: none;
    gap: 40px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.nav-link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 300;
    font-size: 0.8rem;
    letter-spacing: 1.2px;
    padding-bottom: 8px;
    transition: color 0.3s ease;
    text-transform: uppercase;
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 1px;
    background-color: var(--primary-color);
    transition: width 0.3s ease-in-out;
}

.nav-link.active::after {
    width: 30px;
}

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

.nav-lang {
    position: static;
    right: 20px;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

/* Dekoratives Blatt (Header Mobil) */
.mobile-leaf-header {
    display: none;
    position: absolute;
    top: -20px;
    left: -30px;
    width: 180px;
    z-index: 3;
    pointer-events: none;
}

/* Hamburger Button */
.hamburger-menu {
    display: none;
    width: 30px;
    height: 20px;
    flex-direction: column;
    justify-content: space-between;
    background: transparent;
    border: none;
    cursor: pointer;
    position: relative;
    z-index: 4000;
}

.hamburger-menu .line {
    width: 100%;
    height: 2px;
    background-color: var(--primary-color);
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    transform-origin: center;
}

/* =========================================
   3. MOBILE NAV OVERLAY
   ========================================= */
.mobile-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--mobile-nav-bg);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transform: translateX(100%);
    transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
}

.mobile-nav ul {
    list-style: none;
    text-align: center;
}

.mobile-nav li {
    margin-bottom: 40px;
}

.mobile-nav-link {
    color: var(--primary-color);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    position: relative;
    padding-bottom: 5px;
}

.mobile-nav-link.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 25px;
    height: 1px;
    background-color: var(--primary-color);
}

.mobile-leaf-overlay {
    position: absolute;
    top: -20px;
    left: -30px;
    width: 180px;
    pointer-events: none;
    opacity: 1;
}

.mobile-nav-logo-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    max-width: 300px;
    opacity: 0.01;
    pointer-events: none;
}

.mobile-nav-footer {
    position: absolute;
    bottom: 40px;
    text-align: center;
    opacity: 0.3;
}

.mobile-nav-footer p {
    font-family: var(--font-primary);
    text-transform: uppercase;
    font-size: 0.9rem;
    margin-bottom: 5px;
}

.mobile-nav-footer span {
    font-family: var(--font-secondary);
    font-size: 0.8rem;
}

/* Menu Open State */
body.menu-open .mobile-nav {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}

body.menu-open .hamburger-menu .line-1 {
    transform: translateY(9px) rotate(45deg);
}
body.menu-open .hamburger-menu .line-2 {
    opacity: 0;
}
body.menu-open .hamburger-menu .line-3 {
    transform: translateY(-9px) rotate(-45deg);
}

/* =========================================
   4. STARTBILDSCHIRM (HOME)
   ========================================= */
#home {
    height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    background-image: url('Images/IMG_1895.jpg');
    background-size: cover;
    background-position: center center;
}

.hero-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(26, 26, 26, 0.597);
    /*backdrop-filter: blur(1.5px);*/
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-logo {
    width: 480px;
    margin-bottom: 20px;
}

/* =========================================
   5. ÜBER UNS
   ========================================= */
#ueber-uns {
    background-color: var(--section-dark);
    padding: 8rem 0 6rem 0;
    position: relative;
    overflow: hidden;
}

.ueber-uns-container {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 2;
}

.ueber-uns-text {
    max-width: 80%;
}

.ueber-uns-text p {
    color: #ffffff;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1.2em;
    margin-top: 2em;
    font-weight: 300;
}

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

.ueber-uns-text .signature {
    font-size: 1.6rem;
    font-weight: 400;
    margin-top: 2em;
    font-family: var(--font-script);
}

.ueber-uns-leaf {
    position: absolute;
    top: -3%;
    right: -5%;
    width: 80%;
    max-width: 600px;
    z-index: 1;
    opacity: 0.4;
    backdrop-filter: blur(3px);
    pointer-events: none;
}

/* =========================================
   6. SEKTION LEISTUNGEN (Allgemein & Desktop)
   ========================================= */
#leistungen {
    padding: 5rem 0;
    position: relative;
    background-size: cover;
    background: var(--section-dark);
    background-image: url('Images/Bildlaufgruppe\ 12.png');
    background-size: cover;
    background-position: center;
    display: block;
     background-attachment: fixed; 

}

#leistungen::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 10, 10, 0.156);
    backdrop-filter: blur(8px);
    z-index: 0;
    display: block;
}

/* Mobile standardmäßig verstecken */
#leistungen-mobile {
    display: none;
}

/* Desktop Styling */
#leistungen-desktop .leistungen-list {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.leistung-card-desktop {
    position: relative;
    width: 100%;
    height: 450px;
    background-color: #1D1D1D;
    border-radius: 25px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    transform: translateZ(0);
}

/* Layer 1: Bild */
.card-bg-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    margin: 0;
    padding: 0;
}

.card-bg-layer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.10);
    transition: transform 0.6s ease;
    display: block;
}

.leistung-card-desktop:hover .card-bg-layer img {
    transform: scale(1.15);
}

/* Layer 2: Glass Overlay Desktop (35% Breite) */
.leistung-glass-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 37%;
    height: 100%;
    z-index: 2;
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: rgba(20, 20, 20, 0.65);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.leistung-glass-overlay h3 {
    font-family: var(--font-primary);
    font-size: 1.6rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: 1.5rem;
    margin-top: 1em;
    letter-spacing: 1px;
     line-height: 1.6;
    
}

.leistung-glass-overlay p {
    font-family: var(--font-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 2rem;
    font-weight: 300;
}

.preis-link {
    position: absolute;
    margin-top: 20px;
    bottom: 30px;
    right: 30px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-secondary);
    color: #ffffff;
    text-decoration: none;
    font-size: 1rem;
    border-bottom: 1px solid transparent;
    transition: opacity 0.3s;
}

.preis-link:hover {
    opacity: 0.7;
}

/* Layer 3: Mehr Button Desktop */
.mehr-btn-desktop {
    position: absolute;
    bottom: 30px;
    right: 30px;
    z-index: 3;
    display: inline-block;
    padding: 8px 35px;
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 50px;
    backdrop-filter: blur(5px);
    color: #ffffff;
    text-decoration: none;
    font-family: var(--font-secondary);
    font-size: 1rem;
    text-transform: lowercase;
    transition: all 0.3s ease;
}

.mehr-btn-desktop:hover {
    background-color: #ffffff;
    color: #000000;
    border-color: #ffffff;
}
/* =========================================
   8. SEKTION ANFAHRT (KARTE)
   ========================================= */
#anfahrt {
    background-color: #ffffff;
    padding: 6rem 0;
    position: relative;
    /* WICHTIG: Verhindert horizontalen Scrollbalken, falls das Blatt zu breit ist */
    overflow-x: hidden; 
    color: #1D1D1D;
}

#anfahrt h2 {
    text-align: center;
    font-family: var(--font-primary);
    font-size: 2.2rem;
    font-weight: 300; /* Dünne Schrift wie im Screenshot */
    text-transform: uppercase;
    margin-bottom: 3rem;
    letter-spacing: 1px;
    color: #333;
}

/* Container für Map und Blatt */
.map-wrapper {
    position: relative;
    width: 100%;
    max-width: 1000px; /* Begrenzung für Desktop */
    margin: 0 auto;
}

/* Die Karte selbst */
.map-frame {
    width: 100%;
    height: 450px; /* Gute Höhe für Desktop und Mobile */
    border: none;
    border-radius: 30px; /* Die starken Rundungen aus dem Design */
    
    /* Optional: Ein sehr sanfter Schatten, damit die Karte sich vom Weiß abhebt */
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    
    /* Graustufen-Filter für die Karte (optional, sieht edler aus) */
    /* filter: grayscale(100%) invert(0%); */
}

/* Das dekorative Blatt rechts */
.map-leaf-decor {
    position: absolute;
    
    /* Klebt am rechten Bildschirmrand */
    right: 0; 
    
    /* Vertikale Positionierung: */
    top: 50%; 
    transform: translateY(-30%); /* Schiebt es etwas höher/tiefer nach Bedarf */
    
    /* Größe */
    width: 200px; 
    height: auto;
    
    /* Layering */
    z-index: 2;
    pointer-events: none;
    
    /* Schatten */
    filter: drop-shadow(-10px 10px 15px rgba(0,0,0,0.15));
}/* =========================================
   9. SEKTION TEAM
   ========================================= */
#team {
    background-color: #ffffff; /* Weißer Hintergrund */
    padding: 4rem 0 8rem 0;
    position: relative;
}

/* Titel rechtsbündig */
.team-section-title {
    text-align: right;
    font-family: var(--font-primary);
    font-size: 2.5rem;
    font-weight: 300; /* Dünne Schriftart */
    text-transform: uppercase;
    color: #333;
    margin-bottom: 3rem;
    letter-spacing: 1px;
}

/* --- GRID LAYOUT (Desktop) --- */
.team-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 Spalten nebeneinander */
    gap: 30px; /* Abstand zwischen den Karten */
}

/* --- KARTE STYLING --- */
.team-card {
    position: relative;
    width: 100%;
    height: 350px; /* Höhe der Karten */
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    background-color: #f0f0f0;
    
    /* Safari Fix für runde Ecken */
    transform: translateZ(0);
    -webkit-mask-image: -webkit-radial-gradient(white, black);
}

/* Das Bild */
.team-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center; /* Fokus auf das Gesicht */
    transition: transform 0.6s ease;
}

/* Leichter Zoom beim Hover über die ganze Karte */
.team-card:hover .team-img {
    transform: scale(1.05);
}

/* --- GLASS OVERLAY (UNTEN) --- */
.team-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px; /* Höhe des Balkens unten */
    
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
    
    /* Der helle "Silber/Milchglas" Verlauf aus dem Screenshot */
    background: linear-gradient(to bottom, 
        rgba(255, 255, 255, 0.6) 0%, 
        rgba(255, 255, 255, 0.8) 40%,
        rgba(220, 220, 220, 1) 100%
    );
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    
    /* Feine weiße Linie oben für den 3D Look */
    border-top: 1px solid rgba(255, 255, 255, 0.8);
}

.team-overlay h3 {
    font-family: var(--font-primary);
    font-size: 1.2rem;
    font-weight: 500;
    color: #333; /* Dunkle Schrift auf hellem Grund */
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}
.arrow-icon {
    display: flex;       /* Wichtig, damit SVG zentriert ist */
    align-items: center;
    text-decoration: none; /* Entfernt Unterstriche */
    cursor: pointer;     /* Zeigt die Hand beim Hover */
    border: none;        /* Entfernt Ränder */
    background: none;    /* Entfernt Hintergrund */
    
    /* Deine existierende Animation */
    transition: transform 0.3s ease;
}

.arrow-icon:hover {
    transform: translateX(10px); /* Bewegt den Pfeil beim Hover */
}
/* --- PFEIL ANIMATION --- */
.arrow-icon {
    color: #333;
    display: flex;
    align-items: center;
    transition: transform 0.3s ease;
}

/* Pfeil bewegt sich nach rechts beim Hover über die Karte */
.team-card:hover .arrow-icon {
    transform: translateX(10px);
}/* =========================================
   10. SEKTION KONTAKT
   ========================================= */
#kontakt {
    background-color: #ffffff;
    padding: 6rem 0;
    position: relative;
    overflow: hidden;
}

.kontakt-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

/* --- TEXT BEREICH (Links) --- */
.kontakt-text {
    width: 40%;
    position: relative;
    z-index: 2;
}

.kontakt-text h2 {
    font-family: var(--font-primary);
    font-size: 2.8rem;
    font-weight: 500; /* Nicht zu fett, wie im Design */
    line-height: 1.3;
    color: #333333;
}

/* --- VISUELLER BEREICH (Rechts) --- */
.kontakt-visual {
    width: 55%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 500px; /* Platz für das Blatt */
}

/* Das Blatt im Hintergrund */
.kontakt-bg-leaf {
    position: absolute;
   top: 90%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%; /* Großes Blatt, ragt etwas raus */
    max-width: 1200px;
    height: auto;
    z-index: 1;
    /* Optional: Falls das Blatt Bild nicht perfekt ist, hilft ein Drop-Shadow */
    filter: drop-shadow(0 20px 30px rgba(0,0,0,0.15));
}

/* --- DAS FORMULAR (Glassmorphism) --- */
.kontakt-form {
    position: relative;
    z-index: 2; /* Über dem Blatt */
    width: 100%;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Button rechtsbündig */
}
.kontakt-form input{
     width: 100%;
    height: 90px;
    padding: 40px;
    margin-bottom: 50px;
    
    /* DER MILCHGLAS EFFEKT (Grünlich) */
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.4) 0%, 
        rgba(180, 240, 180, 0.2) 100%
    );
    backdrop-filter: blur(12px); /* Das verschwimmt das Blatt darunter */
    -webkit-backdrop-filter: blur(12px);
    
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    
    /* Text Styling */
    font-family: var(--font-secondary); /* Comfortaa für den "Handgeschrieben"-Look */
    font-size: 1.2rem;
    color: #333;
    resize: none; /* Verhindert manuelles Größe ändern */
    outline: none;
}
.kontakt-form textarea {
    width: 100%;
    height: 300px;
    padding: 40px;
    
    /* DER MILCHGLAS EFFEKT (Grünlich) */
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.4) 0%, 
        rgba(180, 240, 180, 0.2) 100%
    );
    backdrop-filter: blur(12px); /* Das verschwimmt das Blatt darunter */
    -webkit-backdrop-filter: blur(12px);
    
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    
    /* Text Styling */
    font-family: var(--font-secondary); /* Comfortaa für den "Handgeschrieben"-Look */
    font-size: 1.2rem;
    color: #333;
    resize: none; /* Verhindert manuelles Größe ändern */
    outline: none;
}

/* Placeholder Styling (Kursiv wie im Bild) */
.kontakt-form textarea::placeholder {
    color: #333;
    font-style: italic;
    font-weight: 300;
    opacity: 0.8;
}
.kontakt-form input::placeholder {
    color: #333;
    font-style: italic;
    font-weight: 300;
    opacity: 0.8;
}
/* Der Button */
.send-btn {
    margin-top: 20px; /* Abstand zum Textfeld */
    padding: 12px 50px;
    
    /* Grüner Glass Button */
    background: rgba(160, 210, 160, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 15px;
    
    color: #000;
    font-family: var(--font-primary);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.send-btn:hover {
    background: rgba(140, 190, 140, 1);
    transform: translateY(-2px);
}

/* =========================================
   11. FOOTER
   ========================================= */
.footer {
    background-color: #000000; /* Tiefschwarz */
    color: #ffffff;
    padding: 4rem 0 3rem 0;
    font-family: var(--font-primary);
}

#whatsapp-float.hide
{
    display: none;
    opacity: 0;
    visibility: hidden;
      pointer-events: none;
}
.footer-content {
    display: grid;
    /* Aufteilung: Logo bekommt etwas mehr Platz, Rest gleichmäßig */
    grid-template-columns: 1.2fr 1fr 0.8fr; 
    gap: 40px;
    align-items: flex-start;
}

/* --- SPALTE 1: LOGO & SOCIALS --- */
.footer-col {
    display: flex;
    flex-direction: column;
}

.footer-logo-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center; /* Zentriert das Logo-Bild */
    width: fit-content;
}

.footer-logo-img {
    width: 180px; /* Größe des Kreis-Logos */
    height: auto;
    margin-bottom: 10px;
    display: block;
}

.logo-text-row {
    display: flex;
    align-items: flex-end; /* Unten ausgerichtet */
    gap: 20px;
    width: 100%;
    justify-content: space-between;
}

.logo-texts {
    display: flex;
    flex-direction: column;
    align-items: center; /* Zentriert Text unter Logo */
}

.brand-name {
    font-size: 0.9rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 300;
    color: #ccc;
    margin-bottom: 2px;
}

.brand-slogan {
    font-family: var(--font-script); /* Deine Schreibschrift */
    font-size: 1rem;
    color: #888; /* Etwas dunkleres Grau für den Slogan */
}

/* Social Icons */
.social-icons {
    display: flex;
    gap: 10px;
    padding-bottom: 5px;
}

.social-icons a {
    color: #ffffff;
    transition: transform 0.3s ease, color 0.3s ease;
    display: flex;
    align-items: center;
}

.social-icons a:hover {
    color: #cccccc;
    transform: translateY(-2px);
}

/* --- SPALTE 2: KONTAKT (Mitte) --- */
.contact-col {
    padding-left: 20px; /* Etwas Einrückung */
}

.footer h3 {
    font-size: 1.2rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 20px;
}

.contact-item .icon {
    flex-shrink: 0;
    margin-top: 3px; /* Icon bündig mit erster Textzeile */
}

.contact-item p, 
.contact-item a {
    font-family: var(--font-primary);
    font-size: 1rem;
    line-height: 1.6;
    color: #cccccc;
    text-decoration: none;
    font-weight: 300;
    transition: color 0.3s;
}

.contact-item a:hover {
    color: #ffffff;
}

/* --- SPALTE 3: RECHTLICHES (Rechtsbündig) --- */
.legal-col {
    align-items: flex-end; /* Alles nach rechts schieben */
    text-align: right;
}

.legal-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-end; /* Listenpunkte rechtsbündig */
}

.legal-links a {
    color: #cccccc;
    text-decoration: none;
    font-weight: 300;
    font-size: 1rem;
    transition: color 0.3s;
}

.legal-links a:hover {
    color: #ffffff;
}/* =========================================
   12. SPRACHUMSCHALTER (Language Switcher)
   ========================================= */

/* --- DESKTOP VERSION --- */
.lang-item {
    font-family: var(--font-primary);
    text-decoration: none;
    color: rgba(255, 255, 255, 0.5); /* Inaktiv: Leicht transparent/grau */
    font-size: 0.95rem;
    font-weight: 400;
    letter-spacing: 1px;
    padding-bottom: 2px; /* Abstand zum Unterstrich */
    border-bottom: 1px solid transparent; /* Platzhalter, damit nichts springt */
    transition: all 0.3s ease;
}

.lang-item:hover {
    color: #ffffff;
}

/* Der AKTIVE Zustand (Unterstrich) */
.lang-item.active {
    color: #ffffff; /* Weiß */
    font-weight: 500;
    border-bottom: 1px solid #ffffff; /* Der weiße Unterstrich */
}





/* --- MOBILE VERSION (Nach Screenshot) --- */
/* --- 3. Mobile Positionierung --- */
.mobile-lang-switch {
    display: flex;
    justify-content: center;
    gap: 20px; /* Etwas mehr Abstand auf Mobile */
    margin-top: 40px;
    margin-bottom: 40px;
    width: 100%;
}

/* Auf Mobile die Schrift etwas größer machen */
.mobile-lang-switch .lang-item {
    font-size: 1rem; 
    padding-bottom: 4px;
}

/* Die weiße Linie oben */
.lang-separator-line {
    width: 80px;
    height: 4px; /* Etwas dicker wie im Bild */
    background-color: #ffffff;
    border-radius: 2px;
    margin-bottom: 25px;
    /* Der Schatten unter der Linie wie im Screenshot */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); 
}

.mobile-lang-option {
    text-decoration: none;
    color: #ffffff;
    line-height: 1.2;
    font-family: var(--font-primary);
    transition: all 0.3s ease;
}




/* --- Das Banner --- */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(20, 20, 20, 0.95);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255,255,255,0.1);
    color: #fff;
    padding: 25px 20px;
    z-index: 5000;
    display: none; /* Standardmäßig versteckt, JS schaltet es an */
    
    /* Layout */
    flex-direction: column;
    align-items: center;
    gap: 20px;
    box-shadow: 0 -10px 30px rgba(0,0,0,0.5);
}/* =========================================
   14. SUB-PAGES (SERVICES / MASSAGE)
   ========================================= */

/* --- DARK HEADER OVERRIDE (für helle Hintergründe) --- */
.header.header-dark .nav-link,
.header.header-dark .nav-lang,
.header.header-dark .current-lang {
    color: #1D1D1D; /* Dunkle Schrift */
}

.header.header-dark .nav-link::after {
    background-color: #1D1D1D; /* Dunkler Unterstrich */
}

.header.header-dark .hamburger-menu .line {
    background-color: #1D1D1D; /* Dunkles Hamburger Menü */
}

/* Logo invertieren (macht das weiße Logo schwarz) */
.header.header-dark .header-logo img {
    filter: invert(1) brightness(0);
}

/* Beim Scrollen wieder normaler dunkler Header mit weißem Text */
.header.header-dark.scrolled .nav-link,
.header.header-dark.scrolled .nav-lang,
.header.header-dark.scrolled .current-lang {
    color: #ffffff;
}
.header.header-dark.scrolled .header-logo img {
    filter: none; /* Logo wieder weiß */
}
.header.header-dark.scrolled .hamburger-menu .line {
    background-color: #ffffff;
}
.header-lang {
    margin-left: auto; /* Schiebt es nach rechts */
    margin-right: 30px; /* Abstand zum Hamburger-Menü */
    display: flex;
    gap: 15px; /* Abstand zwischen DE und RUS */
    align-items: center;
    z-index: 3200;
}




/* --- HERO SECTION --- */
.service-hero {
    /* WICHTIG: Definiert die Höhe auf Desktop */
    height: 70vh !important; 
    min-height: 900px; /* Mindesthöhe, damit es nicht zu klein wird */
    position: relative;
    overflow: hidden;
    background-color: #000; /* Schwarzer Hintergrund, falls Video kurz lädt */
}

.service-hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover; /* Füllt den Bildschirm */
    z-index: 0;
    display: block !important; /* Erzwingt Sichtbarkeit */
}

/* Overlay muss über dem Video liegen */



/* Optionaler Schleier für bessere Lesbarkeit des Titels */
.service-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2); /* 20% Abdunklung */
    z-index: 1;
}

/* Titel muss über Video und Schleier liegen */


/* HINWEIS:
   Der Block darunter (.service-white-box) hat bereits "margin-top: -100px" 
   und "z-index: 10" in deinem Code. 
   Deshalb rutscht er automatisch über das Video, du musst hier nichts ändern.
*/

.service-hero-bg {
    width: 100%;
    height: 180%;
    object-fit: cover;
    object-position: center;
}

.hero-title-wrapper {
    position: absolute;
    top: 300px; /* Platz für die überlappende Box lassen */
    right: 0;
    width: 100%;
    text-align: right;
    padding-right: 40px;
    z-index: 2;
}

.hero-title-wrapper h1 {
    font-size: 5rem;
    color: #ffffff;
    font-weight: 700;
    text-transform: uppercase;
    text-shadow: 0 10px 30px rgba(0,0,0,0.3);
    margin: 0;
    z-index: 2;
}

/* --- CONTENT BOX (Die weiße Karte) --- */
.service-content-wrapper {
    position: relative;
    z-index: 10;
    padding-bottom: 20rem;
   
    /* Hintergrund der unteren Sektion (Blatt/Dunkel) */
    background: url('Images/BlattLila.webp') no-repeat center center fixed;
    background-size: cover;
}

.service-white-box {
    background-color: #ffffff;
  
    padding: 40px;
    /*margin-top: 2%; /* Hier passiert der Überlappungs-Effekt */
    
    color: #333;
    z-index: 10;
    box-shadow: 0 30px 10px rgba(0, 0, 0, 0.5);
}

.service-intro-text p {
    font-family: var(--font-primary);
    font-size: 1.1rem;
    line-height: 1.8;
    color: #333;
    margin-bottom: 50px;
    max-width: 100%;
}

/* --- SUB-SERVICE GRID --- */
.sub-service-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 Spalten */
    gap: 30px;
}

.sub-service-card {
    position: relative;
    height: 300px;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.sub-service-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.sub-service-card:hover img {
    transform: scale(1.05);
}

.sub-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px 30px;
    
    /* Verlauf Schwarz/Transparent unten */
    background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0));
    
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sub-card-overlay h3 {
    color: #fff;
    font-family: var(--font-primary);
    font-size: 1.5rem;
    font-weight: 600;
    text-transform: capitalize;
    margin: 0;
}
/* =========================================
   15. MASTER SEKTION (Profile)
   ========================================= */

#master-section {
    position: relative;
    background-color: #ffffff; /* Weißer Hintergrund für den Textbereich */
    padding-bottom: 6rem;
    
    /* WICHTIG: Kein Abstand nach oben, damit wir schieben können */
    margin-top: 0; 
    padding-top: 0;
    box-shadow: 20px 0 20px rgba(0,0,0,0.5);
}

/* --- DAS PROFILBILD (Overlap) --- */
.master-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    
    /* WICHTIG: Muss höher sein als die vorherige Sektion */
    z-index: 20; 
}

.master-profile-wrapper {
    position: relative;
    
    /* DAS ZIEHT DAS BILD NACH OBEN AUF DIE VORHERIGE SEKTION */
    /* Da das Bild 300px hoch ist, ziehen wir es zur Hälfte (-150px) hoch */
    margin-top: -150px; 
    
    margin-bottom: 40px;
    filter: drop-shadow(0 20px 40px rgba(0,0,0,0.2));
}

.master-img {
    width: 500px;
    height: 500px;
    object-fit: cover;
    border-radius: 70%;
    
    /* Dicker weißer Rand trennt das Bild sauber vom Hintergrund ab */
    border: 10px solid #ffffff; 
    background-color: #ffffff;
    display: block;
}

/* --- DER TEXT --- */
.master-text {
    max-width: 800px;
    margin: 0 auto;
}

.master-text p {
    font-family: var(--font-primary);
    font-size: 1.1rem;
    line-height: 1.6;
    color: #000000;
    font-weight: 400;
}/* =========================================
   16. PREISE SEKTION
   ========================================= */

#preise {
    padding: 6rem 0;
    position: relative;
    /* Hintergrundbild (Blätter) */
    background-image: url('Images/BlattLila.webp'); 
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Parallax Effekt auf Desktop */
}

/* --- DIE GLAS-KARTE --- */
.price-card {
    max-width: 900px; /* Nicht zu breit, damit es elegant bleibt */
    margin: 0 auto;
    
    /* Der Milchglas-Effekt */
    background: radial-gradient(circle at center, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.7) 100%);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    
    /* Der weiße Rand und die runden Ecken */
    border: 3px solid #ffffff;
    border-radius: 50px;
    
    /* Schatten für Tiefe */
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
    
    padding: 60px 50px;
}

.price-card h2 {
    font-family: var(--font-primary);
    font-size: 2.5rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #444; /* Dunkles Grau wie im Bild */
    margin-bottom: 40px;
    text-align: left; /* Oder center, je nach Wunsch */
    letter-spacing: 1px;
}

/* --- DIE PREISLISTE --- */
.price-list {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Abstand zwischen den Zeilen */
}
h4{
    color: #ff9cf0;
   
}

.price-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline; /* Text unten bündig */
    border-bottom: 1px solid rgba(0,0,0,0.05); /* Sehr feine Trennlinie (optional) */
    padding-bottom: 8px;
}

/* Linke Seite: Name */
.service-name {
    font-family: var(--font-primary);
    font-size: 1.1rem;
    font-weight: 500;
    color: #1D1D1D;
    text-align: left;
    flex: 1; /* Nimmt den verfügbaren Platz */
    padding-right: 20px;
}

.service-name small {
    font-size: 0.9rem;
    color: #666;
    font-weight: 400;
}

/* Rechte Seite: Zeit & Preis */
.price-meta {
    display: flex;
    gap: 20px;
    white-space: nowrap; /* Verhindert Umbruch */
}

.duration {
    font-family: var(--font-primary);
    font-size: 1.1rem;
    color: #333;
    font-weight: 400;
}

.cost {
    font-family: var(--font-primary);
    font-size: 1.1rem;
    color: #1D1D1D;
    font-weight: 600;
    min-width: 50px; /* Damit Preise untereinander stehen */
    text-align: right;
}
/* =========================================
   BILDER GRID (3x3 Clean Layout)
   ========================================= */
/* =========================================
   3x3 BILDER GRID (Responsive)
   ========================================= */

.gallery-grid {
    display: grid;
    /* Desktop: Exakt 3 Spalten */
    grid-template-columns: repeat(3, 1fr); 
    gap: 20px; /* Abstand zwischen den Bildern */
    width: 100%;
}

.gallery-item {
    position: relative;
    width: 100%;
    /* Macht die Box quadratisch (Optional: Wenn du Hochformat willst, lösche diese Zeile) */
    aspect-ratio: 1 / 1; 
    border-radius: 20px; /* Runde Ecken passend zum Design */
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Füllt das Quadrat perfekt aus */
    object-position: center;
    transition: transform 0.5s ease;
    display: block;
}

/* Hover Effekt: Reinzoomen */
.gallery-item:hover img {
    transform: scale(1.05);
}
ul.brow {
    margin: 25px 0;
    padding-left: 20px;
    list-style: none;
    
}

ul.brow li {
    margin-bottom: 15px;
    padding-left: 15px;
    position: relative;
    font-size: 1rem;
    transition: transform 0.2s ease;
   
}

/* Hover Effekt: Schiebt den Text leicht nach rechts */
ul.brow li:hover {
    transform: translateX(5px);
    color: #000;
}

/* Kleiner Strich vor jedem Wort */
ul.brow li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 2px;
    background-color: #333; /* Dunkle Linie */
    margin-left: -21.5px; /* Positioniert auf der grauen Linie */
}
ul.pack {
    margin: 25px 0;
    padding-left: 20px;
    list-style: none;
    
}

ul.pack li {
    margin-bottom: 15px;
    padding-left: 15px;
    position: relative;
    font-size: 1rem;
     color: var(--section-dark);
    transition: transform 0.2s ease;
}

/* Hover Effekt: Schiebt den Text leicht nach rechts */
ul.pack li:hover {
    transform: translateX(5px);
    color: #85ffc2;
}

/* Kleiner Strich vor jedem Wort */
ul.pack li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 2px;
    background-color: var(--section-dark); /* Dunkle Linie */
    margin-left: -21.5px; /* Positioniert auf der grauen Linie */
}
.ergebnis{
color: rgb(255, 40, 136);

}

/* =========================================
   18. ANGEBOTE SEKTION (Pink)
   ========================================= */

#angebote {
    position: relative;
    background-color: #F8C8DC; /* Das Pastell-Rosa */
    padding: 6rem 0;
    overflow: hidden; /* Damit der unscharfe Kreis nicht rausragt */
    z-index: 5;
}

/* --- TITEL --- */
.angebote-title {
    font-family: var(--font-primary);
    font-size: 2.5rem;
    font-weight: 800; /* Extra Fett */
    text-transform: uppercase;
    text-align: right; /* Rechtsbündig wie im Bild */
    color: #000000;
    margin-bottom: 3rem;
    letter-spacing: 1px;
}

/* --- GRID --- */
.angebote-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 Spalten */
    gap: 30px;
    position: relative;
    z-index: 2; /* Liegt über der Deko */
}

/* --- KARTEN --- */
.angebot-card {
    border: 2px solid #ffffff; /* Der weiße Rahmen */
    border-radius: 30px; /* Starke Rundung */
    padding: 40px 30px;
    text-align: center;
    
    /* Leichter Glass-Effekt, damit Text lesbar bleibt */
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 450px; /* Damit alle gleich hoch sind */
    transition: transform 0.3s ease;
}

.angebot-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.25);
}

.angebot-card h3 {
    font-family: var(--font-primary);
    font-size: 1.5rem;
    font-weight: 700;
    color: #000;
    margin-bottom: 30px;
}

.angebot-card p {
    font-family: var(--font-primary);
    font-size: 0.95rem;
    line-height: 1.6;
    color: #1D1D1D;
    font-weight: 400;
    margin-bottom: auto; /* Drückt den Preis nach unten */
}

.angebot-price {
    margin-top: 30px;
    font-family: var(--font-primary);
    font-size: 1.1rem;
    font-weight: 700;
    color: rgb(255, 40, 136);
}

/* --- DEKORATION (Der verschwommene Ring) --- */
.angebote-deco-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    
    /* Der goldene Ring Style */
    border: 40px solid rgba(212, 128, 64, 0.6); /* Orange/Gold Farbe */
    border-radius: 50%;
    
    /* Macht es extrem unscharf wie im Hintergrund */
    filter: blur(40px);
    z-index: 1;
    pointer-events: none;
    opacity: 0.8;
}
/* =========================================
   19. WHATSAPP FLOATING BUTTON
   ========================================= */

#whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 60px;
    z-index: 4000; /* Über dem Inhalt, unter dem Cookie Banner (5000) */
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: transform 0.3s ease;
}

#whatsapp-float:hover {
    transform: scale(1.1); /* Wird beim Hover etwas größer */
}

/* Der grüne Kreis */
.whatsapp-icon-container {
    width: 60px;
    height: 60px;
    background-color: #25D366; /* Offizielles WhatsApp Grün */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 2;
    
    /* Pulsierende Animation */
    animation: pulse-green 2s infinite;
}

.whatsapp-custom-img {
    width: 100%;       /* Füllt den Container */
    height: 100%;      /* Füllt den Container */
    object-fit: cover; /* Schneidet Ränder ab, falls nicht quadratisch */
    border-radius: 50%; /* Macht das Bild rund */
    display: block;
}


/* Der Text daneben (Tooltip) */
.whatsapp-tooltip {
    background: radial-gradient(circle at center, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.7) 100%);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    color: #333;
    padding: 20px 10px;
    border-radius: 20px;
    font-family: var(--font-primary);
    font-size: 0.9rem;
    font-weight: 500;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    
    /* Positionierung */
    margin-right: 15px;
    opacity: 0; /* Standardmäßig unsichtbar */
    visibility: hidden;
    transform: translateX(20px);
    transition: all 0.3s ease;
    
    /* Absolute Positionierung relativ zum Link */
    position: absolute;
    right: 60px; /* Links neben dem Button */
    white-space: nowrap;
}

/* Text anzeigen beim Hover */
#whatsapp-float:hover .whatsapp-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* Animation Definition */
@keyframes pulse-green {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}#whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 90px;
    z-index: 4000;
    display: flex;
    flex-direction: column; /* Stapelt Text und Button übereinander */
    align-items: center;
    text-decoration: none;
    transition: transform 0.3s ease;
}

#whatsapp-float:hover {
    transform: translateY(-5px); /* Hüpft leicht nach oben beim Hover */
}

/* --- Der Text oben drüber (Sprechblase) --- */
.whatsapp-label {
    position: absolute;
    bottom: 75px; /* Abstand zum Button nach oben */
    
    background: radial-gradient(circle at center, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.7) 100%);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    color: #333;
    padding: 6px 12px;
    border-radius: 8px;
    font-family: var(--font-primary);
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap; /* Verhindert Umbruch */
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    
    /* Zentrierung über dem Button */
    left: 50%;
    transform: translateX(-50%);
    
    /* Optional: Animation */
    animation: floatText 3s infinite ease-in-out;
     transition: all 0.4s ease; /* Sorgt für weiches Ausblenden */
    
    /* Startzustand: Voll sichtbar */
    opacity: 1;
    visibility: visible;
}

/* Das kleine Dreieck unten an der Sprechblase */
.whatsapp-label::after {
    content: '';
    position: absolute;
    top: 100%; /* Ganz unten am Textfeld */
    left: 50%;
    margin-left: -6px; /* Hälfte der Breite zum Zentrieren */
    border-width: 6px;
    border-style: solid;
    border-color: #ffffff transparent transparent transparent;
    transition: all 0.4s ease; /* Auch das Dreieck muss weich verschwinden */
}
/* 2. HOVER-Zustand: Der Text VERSCHWINDET */
#whatsapp-float:hover .whatsapp-label {
    opacity: 0;       /* Wird durchsichtig */
    visibility: hidden; /* Wird für die Maus unsichtbar */
    transform: translateX(-50%) translateY(10px); /* Bewegt sich beim Verschwinden leicht nach unten */
}

/* Damit das Dreieck auch verschwindet */
#whatsapp-float:hover .whatsapp-label::after {
    opacity: 0;
}
/* --- Das Icon --- */
.whatsapp-icon-container {
    width: 60px;
    height: 60px;
    /* background-color: #25D366;  <-- Falls dein Bild transparent ist */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.whatsapp-custom-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

/* Sanftes Schweben des Textes */
@keyframes floatText {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-5px); }
}
.info-section {
    background-color: #f9f9f9; /* Sehr helles Grau zur Abgrenzung */
    padding: 6rem 0;
    
    margin-bottom: 5%;
    position: relative;
    z-index: 5;
}

.info-container {
    display: flex;
    align-items: center;
    gap: 60px; /* Abstand zwischen Bild und Text */
}

/* --- BILD --- */
.info-image-wrapper {
    flex: 1; /* Nimmt 50% Platz */
    position: relative;
}

.info-img {
    width: 100%;
    height: auto;
    border-radius: 30px; /* Runde Ecken wie überall */
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
    object-fit: cover;
}

/* --- TEXT --- */
.info-text-wrapper {
    flex: 1; /* Nimmt 50% Platz */
}

.info-text-wrapper h2 {
    font-family: var(--font-primary);
    font-size: 2.2rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #333;
    margin-bottom: 25px;
    letter-spacing: 1.5px;
    line-height: 3rem;
}

.info-text-wrapper p {
    font-family: var(--font-primary);
    font-size: 1.05rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 20px;
}

/* =========================================
   7. RESPONSIVE / MEDIA QUERIES
   ========================================= */

/* Tablet / Kleinere Desktops */
@media (max-width: 992px) {
 
    .simple-image-grid {
        grid-template-columns: 1fr; /* Alles untereinander */
        gap: 15px;
    }

    .grid-image-item {
        height: 250px; /* Etwas niedriger auf dem Handy */
    }
    .nav-link, .nav-lang {
        font-size: 0.7rem;
    }
    .ueber-uns-container {
        justify-content: flex-start;
        padding-right: 5%;
        padding-left: 5%;
    }
    .ueber-uns-text {
        max-width: 80%;
        margin-bottom: 10%;
        font-size: 0.85rem;
    }
    .ueber-uns-leaf {
        width: 60%;
    }
    .hero-logo {
        width: 380px;
    }
    .kontakt-container {
        flex-direction: column;
        gap: 20px;
    }

    .kontakt-text {
        width: 100%;
        text-align: center; /* Text zentriert auf Mobile */
        margin-bottom: 0;
    }

    .kontakt-text h2 {
        font-size: 2rem;
    }

    .kontakt-visual {
        width: 100%;
        min-height: 400px;
    }
    
    /* Blatt auf Mobile anpassen */
    .kontakt-bg-leaf {
        width: 100%;
        max-width: 850px;
        
    }

    .kontakt-form {
        width: 90%; /* Formular nicht ganz randbreit */
    }

    .kontakt-form textarea {
        height: 250px; /* Etwas kleiner auf Handy */
        padding: 25px;
    }
 
   .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .angebote-grid {
        grid-template-columns: 1fr; /* Alles untereinander auf Mobile */
        gap: 20px;
    }
    
    .angebote-title {
        text-align: center; /* Mobil zentriert sieht meist besser aus */
        font-size: 2rem;
    }
    
    .angebot-card {
        min-height: auto; /* Höhe automatisch anpassen */
    }
    
    .angebote-deco-circle {
        width: 300px;
        height: 300px;
        border-width: 20px;
    }
    .header-lang {
        display: flex !important; /* Wieder einblenden */
        margin-left: auto;        /* Nach rechts schieben */
        margin-right: 15px;       /* Kleiner Abstand zum Hamburger */
        gap: 10px;                /* Abstand zwischen DE und RUS */
        align-items: center;
        z-index: 3200;
        transition: opacity 0.3s ease;
    }

    /* Schrift etwas kleiner machen für den Header */
    .header-lang .lang-item {
        font-size: 0.85rem; 
        font-weight: 500;
    }

    /* 2. WICHTIG: Wenn Menü OFFEN ist -> Header-Sprache AUSBLENDEN */
    /* Damit sieht man nur noch die große Auswahl unten im Menü */
    body.menu-open .header-lang {
        opacity: 0;
        visibility: hidden;
    }

    .leistung-glass-overlay h3 {

    font-size: 1.3rem;
    
     line-height: 1.3;
    
}

.leistung-glass-overlay p {
   
    font-size: 0.95rem;
    line-height: 1.3rem;
    margin-bottom: 0;
   
}
.info-container {
        flex-direction: column; /* Untereinander */
        gap: 40px;
    }

    .info-image-wrapper, 
    .info-text-wrapper {
        width: 100%; /* Volle Breite auf Mobile */
        text-align: center; /* Text zentrieren */
    }

    .info-text-wrapper h2 {
        font-size: 1.8rem;
    }


}

/* Mobile (Tablets & Phones < 768px) */
@media (max-width: 768px) {
    .gallery-grid {
        /* Hier wird aus 3x3 eine lange Liste: 1 Bild pro Reihe */
        grid-template-columns: 1fr; 
        gap: 15px;
    }
    
    /* Auf dem Handy etwas flacher, falls Quadrat zu groß ist (optional) */
    .gallery-item {
        aspect-ratio: 4 / 3; 
    }
    /* --- Mobile Nav Reset --- */
    .nav-menu, .nav-lang { display: none; }
    .hamburger-menu { display: flex; }
    
    .navbar { justify-content: space-between; }
    .header.scrolled {
        background-color: rgba(19, 19, 19, 0.9) !important; /* Fast schwarz */
        backdrop-filter: blur(10px) !important;
        box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    }

    /* 2. ABER: Wenn das Menü OFFEN ist: Transparent (damit es gut aussieht) */
    body.menu-open .header {
        background-color: transparent !important;
        backdrop-filter: none !important;
        box-shadow: none !important;
    }
     .header-lang {
        display: none;
    }
    .mobile-leaf-header { display: contents; }
    .hero-logo { width: 280px; }

    /* --- Über Uns Mobile --- */
    #ueber-uns { padding: 4rem 0; }
    .ueber-uns-container {
        justify-content: flex-start;
        padding-right: 15%;
        padding-left: 10%;
    }
    .ueber-uns-text {
        max-width: 100%;
        text-align: left;
        margin-bottom: 10%;
    }
    .ueber-uns-text p { font-size: 0.9rem; }
        .ueber-uns-text .signature { font-size: 1.2rem; }
    .ueber-uns-leaf {
        width: 60%;
        right: -15%;
        bottom: 20%;
        opacity: 0.6;
    }

    /* --- Leistungen Mobile Container --- */
    #leistungen { padding: 2rem 0 1rem 0; }
    #leistungen-desktop { display: none; }
    #leistungen-mobile { display: block; }

    .swiper {
        width: 100%;
        padding-bottom: 60px !important; /* Platz für Pagination */
        overflow: hidden;
    }

    .swiper-slide {
        width: 75% !important; 
        margin: 0 15px;
        box-sizing: border-box !important;
        height: 500px !important; 
        display: flex;
        transform: none !important;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

    .swiper-slide:not(.swiper-slide-active) .leistung-card-mobile{
        transform: scale(0.95);
        opacity: 0.5;
    }

    /* --- Mobile Card Design (KEIN Rand, Vollbild) --- */
    .leistung-card-mobile {
        position: relative;
        width: 100%;
        height: 100%; 
        
        /* Design: Runde Ecken */
        clip-path: inset(0 round 30px);
        background-color: transparent !important; 
        /* WICHTIG 1: Alles auf 0 setzen */
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        outline: none !important;
        isolation: isolate;
        /* WICHTIG 2: Der Masken-Trick für saubere Ecken (Safari/Chrome Fix) */
        /* Das zwingt den Browser, das Bild exakt an der Rundung abzuschneiden */
       /* -webkit-mask-image: -webkit-radial-gradient(white, black);
        mask-image: radial-gradient(white, black);*/
        
        -webkit-mask: radial-gradient(circle, white 99%, transparent 100%);
    mask: radial-gradient(circle, white 99%, transparent 100%);
    border-radius: 30px;
    overflow: hidden;
        
        /* Schatten */
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
        
        background-color: #1D1D1D; 
        /* Entferne transform hier, da es manchmal mit der Maske kollidiert */
        /* transform: translateZ(0); */ 
    }

    /* --- HINTERGRUNDBILD MOBILE --- */
    .card-mobile-bg {
        position: absolute;
        /* Wir schieben das Bild minimal nach oben links über den Rand */
        
        top: -2.5%;
        left: -2.5%;
        /* Wir machen es minimal größer als die Box */
        width: 105% !important; 
        height: 105% !important;
      
        
        object-fit: cover;
        object-position: center;
        z-index: 0;
        display: block;
        
        /* Optional: Verhindert Pixel-Verschiebungen */
        transform: translate3d(0,0,0);
    }

    /* Gradient/Glass Overlay Mobile */
    .mobile-glass-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 1;
        padding: 10px 25px 30px 25px; /* Oben viel Platz für Gradient */
        
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        
        background: linear-gradient(to bottom, 
            rgba(29, 29, 29, 0.2) 20%, 
            rgba(29, 29, 29, 0.4) 40%,
            rgba(29, 29, 29, 0.8) 80%,
            rgba(29, 29, 29, 1) 100%
        );
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }

    .card-top-row {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin-bottom: 15px;
        width: 100%;
    }

    .card-title {
        font-family: var(--font-primary);
        font-size: 1.6rem;
        font-weight: 700;
        text-transform: uppercase;
        color: #ffffff;
        margin-top: 20px;
        margin-bottom: 15px;
        line-height: 1.9rem;
    }

    .card-desc {
        font-family: var(--font-secondary);
        font-size: 0.95rem;
        line-height: 1.3;
        color: rgba(255, 255, 255, 0.85);
        margin-bottom: 25px;
        font-weight: 300;
        display: -webkit-box;
        -webkit-line-clamp: 5;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Mobile Links & Buttons */
    .preis-link-mobile {
        font-family: var(--font-secondary);
        color: #ffffff;
        text-decoration: none;
        font-size: 0.9rem;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 2px;
       
    }

    .preis-link-mobile svg {
        width: 25px;
        height: auto;
        opacity: 0.9;
    }

    .mehr-btn-mobile {
        align-self: flex-start;
        display: inline-block;
        padding: 10px 35px;
        background-color: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.6);
        border-radius: 50px;
        color: #ffffff;
        text-decoration: none;
        font-family: var(--font-primary);
        font-size: 0.9rem;
        text-transform: capitalize;
        transition: background 0.3s ease;
    }

    .mehr-btn-mobile:hover {
        background-color: #ffffff;
        color: #1D1D1D;
    }

    /* --- Swiper Pagination (Dots) --- */
    .swiper-pagination {
        bottom: 10px !important;
        position: absolute;
        width: 100%;
        text-align: center;
        z-index: 10;
    }

    .swiper-pagination-bullet {
        background-color: #ffffff !important;
        background: #ffffff !important;
        opacity: 1 !important; 
        width: 12px !important;
        height: 12px !important;
        margin: 0 8px !important;
        border-radius: 50% !important;
        transition: all 0.3s ease !important;
    }

    .swiper-pagination-bullet-active {
        width: 50px !important;
        border-radius: 10px !important;
        background-color: #ffffff !important;
    }
    #anfahrt {
        padding: 4rem 0;
    }

    #anfahrt h2 {
        font-size: 1.6rem;
        margin-bottom: 2rem;
    }

    .map-frame {
        height: 350px; /* Etwas kleiner auf Handy */
        border-radius: 20px;
    }

    .map-leaf-decor {
        width: 80px; /* Kleiner auf Handy */
        top: auto;    /* Reset top */
        bottom: 0%;   /* Auf Handy eher unten positionieren */
        transform: none;
        opacity: 0.8; /* Optional: etwas transparenter auf Mobile */
    }
    #team {
        padding: 3rem 0;
    }

    .team-section-title {
        font-size: 1.8rem;
        text-align: center; /* Mobil evtl. zentriert schöner? Sonst 'right' lassen */
        margin-bottom: 2rem;
    }

    /* Mobil: Karten untereinander (1 Spalte) */
    .team-grid {
        grid-template-columns: 1fr; 
        gap: 20px;
    }

    .team-card {
        height: 300px; /* Etwas kleiner auf Mobile */
        border-radius: 25px;
    }

    .team-overlay {
        height: 70px;
        padding: 0 20px;
    }

    .team-overlay h3 {
        font-size: 1rem;
    }
    
    /* Pfeil auf Mobile etwas kleiner */
    .arrow-icon svg {
        width: 40px;
        height: auto;
    }
    .footer-content {
        grid-template-columns: 1fr; /* Alles untereinander */
        gap: 50px;
        text-align: center; /* Zentriert auf Mobile */
        justify-items: center; /* Zentriert die Grid-Items */
    }

    /* Logo Bereich Zentrieren */
    .footer-logo-wrapper {
        align-items: center;
    }
    
    .logo-text-row {
        flex-direction: column; /* Text oben, Icons drunter auf Mobile */
        align-items: center;
        gap: 15px;
    }

    /* Kontakt Bereich Zentrieren */
    .contact-col {
        padding-left: 0;
        align-items: center;
    }

    .contact-item {
        flex-direction: column; /* Icon über Text auf Mobile */
        align-items: center;
        text-align: center;
        gap: 10px;
    }

    /* Rechtliches Zentrieren */
    .legal-col {
        align-items: center;
        text-align: center;
    }
    
    .legal-links {
        align-items: center;
    }

   .cookie-banner {
        width: 100% !important;
        left: 0 !important;
        bottom: 0 !important;
        border-radius: 20px 20px 0 0; /* Oben rund, unten eckig */
        padding: 20px 15px; /* Etwas weniger Padding am Rand */
        flex-direction: column;
        align-items: flex-start; /* Text linksbündig */
        gap: 15px;
        max-height: 80vh; /* Verhindert, dass er den ganzen Screen blockiert */
        overflow-y: auto; /* Scrollbar falls Text riesig ist */
    }

    .cookie-content {
        width: 100%;
        text-align: left;
    }

    .cookie-content h3 {
        font-size: 1.1rem;
        margin-top: 0;
    }

    .cookie-content p {
        font-size: 0.85rem; /* Schrift etwas kleiner für mehr Platz */
        line-height: 1.4;
    }

    /* Buttons untereinander stapeln */
    .cookie-buttons {
        display: flex;
        flex-direction: column; /* WICHTIG: Untereinander */
        width: 100%;
        gap: 10px;
    }

    .cookie-btn {
        width: 100%; /* Volle Breite */
        padding: 12px 0; /* Hohe Klickfläche */
        text-align: center;
        font-size: 0.95rem;
    }

    /* Der "Ablehnen" Button etwas dezenter */
    .cookie-btn.reject {
        margin-top: 0;
        border: 1px solid rgba(255, 255, 255, 0.3);
    }
    .service-hero {
        height: 50vh;
    }
    
    .hero-title-wrapper h1 {
        font-size: 3rem;
        padding-right: 20px;
        bottom: 80px;
    }

    .service-white-box {
        padding: 30px;
        margin-top: -50px;
        
    }

    .service-intro-text p {
        font-size: 0.95rem;
        max-width: 100%;
    }

    .sub-service-grid {
        grid-template-columns: 1fr; /* 1 Spalte auf Mobile */
        gap: 20px;
    }

    .sub-service-card {
        height: 250px;
    }
    .master-banner {
        height: 200px; /* Kleinerer Banner auf Handy */
    }

    .master-img {
        width: 400px; /* Kleineres Bild auf Handy */
        height: 400px;
        border-width: 10px;
    }

    .master-profile-wrapper {
        margin-top: -100px; /* Muss genau die Hälfte der neuen Höhe (200px) sein */
    }

    .master-text p {
        font-size: 1rem;
        padding: 0 15px;
    }
    #preise {
        padding: 3rem 0;
        background-attachment: scroll; /* Performance auf Handy */
    }

    .price-card {
        padding: 40px 20px;
        border-radius: 30px;
        margin: 0 10px; /* Etwas Abstand zum Rand */
    }

    .price-card h2 {
        font-size: 2rem;
        margin-bottom: 30px;
        text-align: center;
    }

    .price-item {
        flex-direction: column; /* Auf Handy untereinander? Nein, sieht oft besser nebeneinander aus, wenn Platz ist */
        align-items: flex-start;
        gap: 5px;
    }
   #whatsapp-float {
        bottom: 20px;
        right: 60px;
    }
    .whatsapp-tooltip{
        display: block;
        opacity: 1;
        right: 90px;
         visibility: visible;
        }
    .whatsapp-icon-container {
        width: 55px;
        height: 55px;
    }
    
    /* Falls der Text auf dem Handy stört, kannst du ihn hier ausblenden: */
    /* .whatsapp-label { display: none; } */
    
    /* Oder etwas kleiner machen: */
    .whatsapp-label {
        font-size: 0.75rem;
        bottom: 70px;
    }
}

/* Ausblenden, wenn Menü offen ist */
body.menu-open #whatsapp-float {
    display: none;
}



    /* Auf ganz kleinen Handys Name oben, Preis unten */
    @media (max-width: 480px) {
        .price-item {
            flex-direction: column;
            margin-bottom: 10px;
            border-bottom: 1px solid rgba(0,0,0,0.1);
        }
        
        .price-meta {
            width: 100%;
            justify-content: space-between; /* Zeit links, Preis rechts */
            margin-top: 2px;
        }
        
        .cost {
            font-size: 1.2rem; /* Preis etwas hervorheben */
        }
    }


.cookie-content h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
    font-weight: 600;
}

.cookie-content p {
    font-size: 0.9rem;
    color: #ccc;
    line-height: 1.5;
}

.cookie-content a {
    color: #fff;
    text-decoration: underline;
}

.cookie-buttons {
    display: flex;
    gap: 15px;
}

.cookie-btn {
    padding: 12px 25px;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    font-family: var(--font-primary);
    font-size: 0.9rem;
    transition: transform 0.2s;
}

.cookie-btn.accept {
    background-color: #ffffff;
    color: #000;
    font-weight: 600;
}

.cookie-btn.reject {
    background-color: transparent;
    border: 1px solid #fff;
    color: #fff;
}

.cookie-btn:hover {
    transform: scale(1.05);
}

/* --- Blockierte Karte (Placeholder Style) --- */
.map-placeholder {
    position: relative;
    width: 100%;
    height: 450px; /* Gleiche Höhe wie Karte */
    border-radius: 30px;
    overflow: hidden;
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.map-overlay-text {
    position: absolute;
    z-index: 2;
    text-align: center;
    padding: 20px;
    background: rgba(255,255,255,0.9);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.map-overlay-text p {
    color: #333;
    margin-bottom: 15px;
    font-weight: 500;
}

.cookie-btn-small {
    padding: 10px 20px;
    background: #333;
    color: #fff;
    border: none;
    border-radius: 20px;
    cursor: pointer;
}

/* Wenn die Karte geladen ist, blenden wir den Placeholder-Text aus */
.map-loaded .map-overlay-text {
    display: none;
}
    

@media (max-width: 480px) {
    .kontakt-text h2 {
        font-size: 1.8rem;
    }
    
    /* Auf ganz kleinen Screens Blatt noch besser positionieren */
    .kontakt-bg-leaf {
        width: 180%;
       
    }
    
}