/* ===== CSS RESET & BASE STYLES ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Sanftes Natur-Farbschema
       Die vorherige Variante basierte auf sehr kräftigen Gelb‑ und Orangetönen,
       die von vielen Nutzern als unruhig empfunden wurden. Für eine ruhige,
       wellnessorientierte Atmosphäre wird das neue Schema aus warmen Braun‑ und
       Beigetönen kombiniert mit einem goldenen Akzent abgeleitet.  Der primäre
       Braunton (#A38B7E) bildet eine harmonische Basis, das helle Beige
       (#E9E5CC) sorgt für luftigere Flächen, während das dunkle Braun (#603636)
       als kontraststarker Akzent fungiert.  Gold (#D6BD3E) bleibt als sanfter
       Highlight‑Farbton erhalten. Die übrigen Farben passen sich diesem
       natürlichen Schema an. */
    /* Farbpalette basierend auf den Werbebildern der Fußreflexzonen­massagen
       Die aktualisierten Farben orientieren sich an den warmen, erdigen Tönen
       der Kampagnenbilder: dunkle Schokobrauntöne bilden das Fundament,
       ein sattes Kastanienbraun dient als primäre Markenfarbe, ein zartes
       Creme‑Beige sorgt für luftige Flächen, und ein honiggelber Akzent
       lenkt gezielt Aufmerksamkeit.  Details zu dieser Palette sind in der
       zugehörigen Analyse dokumentiert. */
    --primary-color: #8F4C1A;      /* chestnut – Hauptfarbe für Überschriften, Icons etc. */
    --secondary-color: #F5EDE4;    /* soft cream – helle Hintergründe für Karten und Sektionen */
    --accent-color: #FBB756;       /* golden honey – Akzentfarbe für Buttons & Links */
    --dark-accent: #5B2D0C;        /* dark cocoa – kontrastreiche Akzente & Footer */
    --white: #FFFFFF;
    /* Dunkles Grau im ursprünglichen Design wird durch unser dunkles
       Kakao‑Braun ersetzt, um auch den Footer und andere dunkle
       Sektionen mit dem neuen Farbschema zu harmonisieren. */
    --dark-gray: #5B2D0C;
    --light-gray: #F8F6F1;
    /* Textfarben werden an das braune Schema angepasst. Eine dunkle
       Schokonuance für Standardtext und eine wärmere Kastaniennuance für
       sekundäre Texte erzeugen eine harmonische Lesbarkeit. */
    --text-color: #5B2D0C;
    --text-light: #8F4C1A;
    
    /* Schatten und Effekte */
    /* Schatten nutzen die Akzentfarbe (Golden Honey) mit transparenter Deckkraft */
    --shadow-light: 0 2px 10px rgba(251, 183, 86, 0.2);
    --shadow-medium: 0 4px 20px rgba(251, 183, 86, 0.3);
    --shadow-heavy: 0 8px 30px rgba(251, 183, 86, 0.4);
    
    /* Übergänge */
    --transition-fast: 0.3s ease;
    --transition-medium: 0.5s ease;
    --transition-slow: 0.8s ease;
    
    /* Typografie */
    --font-primary: 'Poppins', sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3rem;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-primary);
    line-height: 1.6;
    color: var(--text-color);
    overflow-x: hidden;
}

/* ===== LOADING SCREEN ===== */
#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--primary-color), var(--dark-accent));
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

#loading-screen.hidden {
    opacity: 0;
    visibility: hidden;
}

.loader {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.leaf {
    width: 20px;
    height: 20px;
    background: var(--accent-color);
    border-radius: 50% 0;
    animation: leafFloat 1.5s ease-in-out infinite;
}

.leaf:nth-child(2) {
    animation-delay: 0.3s;
}

.leaf:nth-child(3) {
    animation-delay: 0.6s;
}

@keyframes leafFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(180deg); }
}

#loading-screen p {
    color: var(--white);
    font-size: var(--font-size-lg);
    font-weight: 300;
}

/* ===== NAVIGATION ===== */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    z-index: 1000;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-light);
}

.navbar.scrolled {
    background: rgba(255, 255, 255, 0.98);
    box-shadow: var(--shadow-medium);
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: var(--font-size-xl);
    color: var(--primary-color);
}

.logo-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

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

.nav-link {
    text-decoration: none;
    color: var(--text-color);
    font-weight: 500;
    position: relative;
    transition: color var(--transition-fast);
}

.nav-link:hover {
    color: var(--primary-color);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--accent-color);
    transition: width var(--transition-fast);
}

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

.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 4px;
}

.bar {
    width: 25px;
    height: 3px;
    background: var(--primary-color);
    transition: all var(--transition-fast);
}

/* ===== HERO SECTION ===== */
.hero {
    height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--dark-accent) 100%);
    background-size: cover;
    background-position: center;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), /* halbtransparente Ebene */
        url('images/Begrüßung.JPG'); /* das eigentliche Bild */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


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

.hero-title {
    font-size: var(--font-size-5xl);
    font-weight: 700;
    color: var(--white);
    margin-bottom: 20px;
    line-height: 1.2;
}

.hero-subtitle {
    font-size: var(--font-size-xl);
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 40px;
    font-weight: 300;
}

.hero-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 30px;
    border: none;
    border-radius: 50px;
    font-size: var(--font-size-base);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
    overflow: hidden;
}

.btn-primary {
    background: var(--accent-color);
    color: var(--white);
    box-shadow: var(--shadow-medium);
}

.btn-primary:hover {
    background: var(--dark-accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow-heavy);
}

.btn-secondary {
    background: transparent;
    color: var(--white);
    border: 2px solid var(--white);
}

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

.scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    animation: bounce 2s infinite;
}

.scroll-arrow {
    width: 30px;
    height: 30px;
    border-right: 2px solid var(--white);
    border-bottom: 2px solid var(--white);
    transform: rotate(45deg);
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
    40% { transform: translateX(-50%) translateY(-10px); }
    60% { transform: translateX(-50%) translateY(-5px); }
}

/* ===== UTILITY CLASSES ===== */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-title {
    font-size: var(--font-size-4xl);
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 15px;
}

.section-divider {
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
    margin: 0 auto 20px;
    border-radius: 2px;
}

.section-subtitle {
    font-size: var(--font-size-lg);
    color: var(--text-light);
    font-weight: 300;
}

.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s ease forwards;
}

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

/* ===== ABOUT SECTION ===== */
.about {
    padding: 100px 0;
    background: var(--light-gray);
}

.about-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.about-description {
    font-size: var(--font-size-lg);
    line-height: 1.8;
    margin-bottom: 40px;
    color: var(--text-color);
}

.stats-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.stat-item {
    text-align: center;
    padding: 20px;
    background: var(--white);
    border-radius: 15px;
    box-shadow: var(--shadow-light);
    transition: transform var(--transition-fast);
}

.stat-item:hover {
    transform: translateY(-5px);
}

.stat-number {
    font-size: var(--font-size-4xl);
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.stat-label {
    font-size: var(--font-size-sm);
    color: var(--text-light);
    font-weight: 500;
}

.about-image {
    position: relative;
}

.image-container {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow-heavy);
}

.floating-image {
    width: 100%;
    height: 400px;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.floating-image:hover {
    transform: scale(1.05);
}

.image-decoration {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 100px;
    height: 100px;
    background: var(--accent-color);
    border-radius: 50%;
    opacity: 0.8;
    z-index: -1;
}

.about-details {
  margin-top: 14px;
}

.about-more {
  cursor: pointer;
  display: inline-block;
  font-weight: 600;
}

.about-more::-webkit-details-marker {
  display: none;
}

.about-details[open] .about-more {
  opacity: 0.9;
}

.about-details-content {
  margin-top: 10px;
}

.about-qualifications {
  margin: 10px 0 0;
  padding-left: 18px;
}

.about-qualifications li {
  margin: 6px 0;
}


/* ===== FIX: WER WIR SIND / TEAM-TEXTE EINHEITLICH ===== */
.about-details-content,
.about-details-content p,
.about-details-content .member-description,
.about-details-content .about-qualifications,
.about-details-content .about-list,
.about-details-content .about-qualifications li,
.about-details-content .about-list li {
    font-size: var(--font-size-base);
    line-height: 1.75;
    color: var(--text-color);
}

.about-details-content .member-info {
    text-align: left;
}

.about-details-content .member-name,
.about-details-content .member-role,
.about-details-content .about-subhead {
    text-align: left;
}

.about-details-content .about-subhead {
    font-size: var(--font-size-lg);
    color: var(--text-color);
    margin: 18px 0 10px;
}

.about-details-content .about-qualifications,
.about-details-content .about-list {
    list-style-position: outside;
    padding-left: 1.25rem;
    margin: 12px 0 0;
    text-align: left;
}

.about-details-content .about-qualifications li,
.about-details-content .about-list li {
    margin: 8px 0;
    text-align: left;
}

.about-details-content .team {
    padding: 40px 0;
    background: transparent;
}

.about-details-content .team .container {
    padding-left: 0;
    padding-right: 0;
}

/* ===== SERVICES SECTION ===== */
.services {
    padding: 100px 0;
    background: var(--white);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 40px;
}

.service-card {
    background: var(--white);
    border-radius: 20px;
    padding: 40px 30px;
    text-align: center;
    box-shadow: var(--shadow-light);
    transition: all var(--transition-fast);
    position: relative;
    overflow: hidden;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    /* Subtile Glanzeffekte der Service-Karten werden an den neuen Akzentton
       angepasst. Der frühere grünliche Schimmer wurde durch eine
       transparente Version des Goldtons ersetzt. */
    background: linear-gradient(90deg, transparent, rgba(214, 189, 62, 0.1), transparent);
    transition: left var(--transition-medium);
}

.service-card:hover::before {
    left: 100%;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-heavy);
}

.service-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    font-size: var(--font-size-2xl);
    color: var(--white);
    transition: transform var(--transition-fast);
}

.service-card:hover .service-icon {
    transform: scale(1.1) rotate(5deg);
}

.service-title {
    font-size: var(--font-size-2xl);
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 15px;
}

.service-description {
    font-size: var(--font-size-base);
    color: var(--text-light);
    line-height: 1.6;
    margin-bottom: 25px;
}

.service-features {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 25px;
}

.feature-tag {
    background: var(--light-gray);
    color: var(--primary-color);
    padding: 5px 15px;
    border-radius: 20px;
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.service-btn {
    background: var(--primary-color);
    color: var(--white);
    border: none;
    padding: 12px 25px;
    border-radius: 25px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.service-btn:hover {
    background: var(--dark-accent);
    transform: translateY(-2px);
}


.services-more-wrapper{
    margin-top: 3rem;
    text-align: center;
}

/* Button */
.services-more-btn{
    background: transparent;
    border: 2px solid #c98d6b;
    color: #c98d6b;
    padding: 14px 26px;
    font-size: 1rem;
    border-radius: 30px;
    cursor: pointer;
    transition: all .25s ease;
}

.services-more-btn:hover{
    background: #c98d6b;
    color: #fff;
}

/* Versteckter Bereich */
.more-services{
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height .6s ease, opacity .4s ease;
}

/* Aktiv */
.more-services.active{
    max-height: 3000px;
    opacity: 1;
    margin-top: 2rem;
}

/* Grid */
.more-services-grid{
    max-width: 900px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    text-align: left;
}

/* Einzelne Massage */
.more-service-item{
    background: #fff7ee;
    border-radius: 16px;
    padding: 1.25rem;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

.more-service-item h4{
    margin: 0 0 .5rem;
    color: #1e1e1e;
    font-size: 1.05rem;
}

.more-service-item p{
    margin: 0;
    font-size: .95rem;
    color: #5b5b5b;
}

/* Rechtlicher Hinweis */
.services-legal-note{
    margin-top: 2rem;
    font-size: .85rem;
    color: #777;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}


/* ===== HEALTH STUDIO SECTION ===== */
.health-studio {
    padding: 100px 0;
    background: linear-gradient(135deg, var(--primary-color), var(--dark-accent));
    color: var(--white);
}

.health-studio-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.health-studio .section-title {
    color: var(--white);
}

.health-studio-description {
    font-size: var(--font-size-lg);
    line-height: 1.8;
    margin-bottom: 4px;
    opacity: 0.9;
}

.health-features {
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin-bottom: 4px;
}

.health-feature {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    backdrop-filter: blur(10px);
    transition: transform var(--transition-fast);
}

.health-feature:hover {
    transform: translateX(10px);
}

.health-feature i {
    font-size: var(--font-size-2xl);
    color: var(--accent-color);
    min-width: 40px;
}

.feature-content h4 {
    font-size: var(--font-size-lg);
    margin-bottom: 5px;
}

.feature-content p {
    opacity: 0.8;
    font-size: var(--font-size-sm);
}

.health-studio-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.visual-element {
    position: relative;
    width: 300px;
    height: 300px;
}

.floating-card {
    position: absolute;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--white);
    font-weight: 600;
    animation: float 3s ease-in-out infinite;
}

.floating-card:nth-child(1) {
    top: 0;
    left: 0;
    animation-delay: 0s;
}

.floating-card:nth-child(2) {
    top: 50%;
    right: 0;
    animation-delay: 1s;
}

.floating-card:nth-child(3) {
    bottom: 0;
    left: 50%;
    animation-delay: 2s;
}

.floating-card i {
    font-size: var(--font-size-2xl);
    color: var(--accent-color);
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}

/* ===== TEAM SECTION ===== */
.team {
    padding: 100px 0;
    background: var(--light-gray);
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
}

.team-member {
    perspective: 1000px;
}

.member-card {
    background: var(--white);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow-light);
    transition: all var(--transition-fast);
}

.member-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-heavy);
}

.member-image {
    position: relative;
    height: 250px;
    overflow: hidden;
}

.member-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.member-card:hover .member-image img {
    transform: scale(1.1);
}

.member-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Passe den Overlay-Hintergrund an das neue Farbschema an.
       Anstelle des ehemaligen grünlichen Tons (#7E9038) wird nun
       ein halbtransparentes Braun verwendet, das sich harmonisch
       in die restliche Farbpalette einfügt. */
    /* Anstelle des ehemaligen warmen Beigetons (#A38B7E) nutzen wir jetzt den
       kastanienfarbenen Primärton als halbtransparentes Overlay. Die Werte
       143,76,26 entsprechen der hex‑Farbe #8F4C1A (Primary Color). */
    background: rgba(143, 76, 26, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.member-card:hover .member-overlay {
    opacity: 1;
}

.member-social {
    display: flex;
    gap: 15px;
}

.social-link {
    width: 50px;
    height: 50px;
    background: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    text-decoration: none;
    transition: transform var(--transition-fast);
}

.social-link:hover {
    transform: scale(1.1);
}

.member-info {
    padding: 30px;
    text-align: center;
}

.member-name {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 10px;
}

.member-role {
    font-size: var(--font-size-base);
    color: var(--primary-color);
    font-weight: 500;
    margin-bottom: 15px;
}

.member-description {
    font-size: var(--font-size-sm);
    color: var(--text-light);
    line-height: 1.6;
    margin-bottom: 20px;
}

.contact-btn {
    background: var(--primary-color);
    color: var(--white);
    padding: 10px 20px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all var(--transition-fast);
}

.contact-btn:hover {
    background: var(--dark-accent);
    transform: translateY(-2px);
}

/* ===== TESTIMONIALS SECTION ===== */
.testimonials {
    padding: 100px 0;
    background: var(--white);
}

.testimonials-slider {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}

.testimonial-track {
    display: flex;
    transition: transform var(--transition-medium);
}

.testimonial-card {
    min-width: 100%;
    padding: 0 20px;
    opacity: 0.5;
    transform: scale(0.9);
    transition: all var(--transition-medium);
}

.testimonial-card.active {
    opacity: 1;
    transform: scale(1);
}

.testimonial-content {
    background: var(--light-gray);
    padding: 40px;
    border-radius: 20px;
    text-align: center;
    position: relative;
}

.testimonial-content::before {
    content: '"';
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 4rem;
    color: var(--accent-color);
    font-family: serif;
}

.stars {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-bottom: 20px;
}

.stars i {
    color: var(--accent-color);
    font-size: var(--font-size-lg);
    animation: starTwinkle 2s ease-in-out infinite;
}

.stars i:nth-child(2) { animation-delay: 0.2s; }
.stars i:nth-child(3) { animation-delay: 0.4s; }
.stars i:nth-child(4) { animation-delay: 0.6s; }
.stars i:nth-child(5) { animation-delay: 0.8s; }

@keyframes starTwinkle {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

.testimonial-text {
    font-size: var(--font-size-lg);
    line-height: 1.6;
    color: var(--text-color);
    margin-bottom: 20px;
    font-style: italic;
}

.testimonial-author {
    font-size: var(--font-size-base);
    color: var(--primary-color);
    font-weight: 600;
}

.testimonial-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 40px;
}

.testimonial-btn {
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    background: var(--primary-color);
    color: var(--white);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.testimonial-btn:hover {
    background: var(--dark-accent);
    transform: scale(1.1);
}

.testimonial-dots {
    display: flex;
    gap: 10px;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--secondary-color);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.dot.active {
    background: var(--primary-color);
    transform: scale(1.2);
}

/* ===== CONTACT SECTION ===== */
.contact {
    padding: 100px 0;
    background: var(--light-gray);
}

.contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.contact-card {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 25px;
    background: var(--white);
    border-radius: 15px;
    box-shadow: var(--shadow-light);
    transition: transform var(--transition-fast);
}

.contact-card:hover {
    transform: translateY(-5px);
}

.contact-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: var(--font-size-xl);
    flex-shrink: 0;
}

.contact-details h4 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 10px;
}

.contact-details p {
    color: var(--text-light);
    line-height: 1.6;
}

.contact-details a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.contact-details a:hover {
    color: var(--dark-accent);
}

.contact-form-container {
    background: var(--white);
    padding: 40px;
    border-radius: 20px;
    box-shadow: var(--shadow-light);
}

.contact-form h3 {
    font-size: var(--font-size-2xl);
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 30px;
    text-align: center;
}

.form-group {
    position: relative;
    margin-bottom: 25px;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 15px;
    border: 2px solid var(--secondary-color);
    border-radius: 10px;
    font-size: var(--font-size-base);
    font-family: var(--font-primary);
    transition: all var(--transition-fast);
    background: transparent;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
}

.form-group label {
    position: absolute;
    top: 15px;
    left: 15px;
    color: var(--text-light);
    font-size: var(--font-size-base);
    pointer-events: none;
    transition: all var(--transition-fast);
}

.form-group input:focus + label,
.form-group input:valid + label,
.form-group textarea:focus + label,
.form-group textarea:valid + label {
    top: -10px;
    left: 10px;
    font-size: var(--font-size-sm);
    color: var(--primary-color);
    background: var(--white);
    padding: 0 5px;
}

button[disabled]:hover {
    transform: none;
    box-shadow: none;
}


/* ===== CONTACT FORM: CONSENT CHECKBOX FIX ===== */
.form-group input[type="checkbox"]{
  width: auto;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

.form-consent{
  margin-top: 10px;
}

.form-consent .consent-label{
  position: static;          /* überschreibt absolute label-Regel */
  pointer-events: auto;      /* wieder klickbar */
  display: flex;
  gap: 10px;
  align-items: flex-start;
  cursor: pointer;
  color: var(--text-light);
  line-height: 1.4;
}

.form-consent .consent-label input{
  margin-top: 4px;
}

.form-consent .consent-label span a{
  color: var(--primary-color);
  text-decoration: none;
}

.form-consent .consent-label span a:hover{
  color: var(--dark-accent);
}


/* ===== FOOTER ===== */
.footer {
    background: var(--dark-gray);
    color: var(--white);
    padding: 60px 0 20px;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.footer-logo img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.footer-logo span {
    font-size: var(--font-size-xl);
    font-weight: 600;
}

.footer-description {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
}

.footer-section h4 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin-bottom: 20px;
    color: var(--accent-color);
}

.footer-links {
    list-style: none;
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.footer-links a:hover {
    color: var(--accent-color);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.social-links {
    display: flex;
    gap: 15px;
}

.social-links .social-link {
    width: 40px;
    height: 40px;
    background: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.social-links .social-link:hover {
    background: var(--accent-color);
    transform: translateY(-3px);
}

/* ===== MODAL ===== */
.modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
}

.modal-content {
    background-color: var(--white);
    margin: 5% auto;
    padding: 40px;
    border-radius: 20px;
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
    animation: modalSlideIn 0.3s ease;
}

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

.close-modal {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
    color: var(--text-light);
    transition: color var(--transition-fast);
}

.close-modal:hover {
    color: var(--primary-color);
}

/* ===== BACK TO TOP BUTTON ===== */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: var(--primary-color);
    color: var(--white);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-fast);
    z-index: 1000;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    background: var(--dark-accent);
    transform: translateY(-3px);
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
    html,
    body {
        overflow-x: hidden;
        width: 100%;
        max-width: 100%;
    }

    .hamburger {
        display: flex;
    }
    
    .nav-menu {
        position: fixed;
        left: 0;
        top: 70px;
        width: 100%;
        flex-direction: column;
        background-color: var(--white);
        text-align: center;
        transition: transform 0.3s ease, opacity 0.3s ease;
        box-shadow: var(--shadow-medium);
        padding: 20px 0;
        transform: translateX(-100%);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
    
    .nav-menu.active {
        transform: translateX(0);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    
    .nav-menu li {
        margin: 15px 0;
    }
    
    .hamburger.active .bar:nth-child(2) {
        opacity: 0;
    }
    
    .hamburger.active .bar:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    
    .hamburger.active .bar:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }
    
    .hero-title {
        font-size: var(--font-size-3xl);
    }
    
    .hero-subtitle {
        font-size: var(--font-size-base);
    }
    
    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .about-content,
    .health-studio-content,
    .contact-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .stats-container {
        grid-template-columns: 1fr;
    }
    
    .services-grid {
        grid-template-columns: 1fr;
    }
    
    .team-grid {
        grid-template-columns: 1fr;
    }
    
    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
    
    .section-title {
        font-size: var(--font-size-3xl);
    }
    
    .container {
        padding: 0 15px;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: var(--font-size-2xl);
    }
    
    .section-title {
        font-size: var(--font-size-2xl);
    }
    
    .service-card,
    .contact-form-container {
        padding: 25px 20px;
    }
    
    .btn {
        padding: 12px 20px;
        font-size: var(--font-size-sm);
    }
}


/* ===== HINTERGRUNDANIMATIONEN ===== */

/* Leuchtende Kugeln Animation */
.glowing-orbs {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
}

.orb {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, 
        rgba(244, 208, 63, 0.9) 0%, 
        rgba(243, 156, 18, 0.7) 20%, 
        rgba(214, 137, 16, 0.5) 40%, 
        rgba(244, 208, 63, 0.3) 60%, 
        rgba(243, 156, 18, 0.1) 80%, 
        transparent 100%);
    animation: orbFloat 12s infinite linear;
    filter: blur(0.5px);
    box-shadow: 0 0 20px rgba(244, 208, 63, 0.6), 
                0 0 40px rgba(243, 156, 18, 0.4),
                0 0 60px rgba(214, 137, 16, 0.2);
}

.orb:nth-child(1) {
    width: 40px;
    height: 40px;
    left: 10%;
    animation-delay: 0s;
    animation-duration: 15s;
}

.orb:nth-child(2) {
    width: 30px;
    height: 30px;
    left: 20%;
    animation-delay: 2s;
    animation-duration: 18s;
}

.orb:nth-child(3) {
    width: 50px;
    height: 50px;
    left: 30%;
    animation-delay: 4s;
    animation-duration: 12s;
}

.orb:nth-child(4) {
    width: 35px;
    height: 35px;
    left: 40%;
    animation-delay: 6s;
    animation-duration: 16s;
}

.orb:nth-child(5) {
    width: 45px;
    height: 45px;
    left: 50%;
    animation-delay: 8s;
    animation-duration: 14s;
}

.orb:nth-child(6) {
    width: 32px;
    height: 32px;
    left: 60%;
    animation-delay: 10s;
    animation-duration: 17s;
}

.orb:nth-child(7) {
    width: 48px;
    height: 48px;
    left: 70%;
    animation-delay: 12s;
    animation-duration: 13s;
}

.orb:nth-child(8) {
    width: 38px;
    height: 38px;
    left: 80%;
    animation-delay: 14s;
    animation-duration: 19s;
}

.orb:nth-child(9) {
    width: 42px;
    height: 42px;
    left: 90%;
    animation-delay: 16s;
    animation-duration: 11s;
}

.orb:nth-child(10) {
    width: 34px;
    height: 34px;
    left: 95%;
    animation-delay: 18s;
    animation-duration: 20s;
}

@keyframes orbFloat {
    0% {
        transform: translateY(100vh) translateX(0px) scale(1);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(-100px) translateX(50px) scale(0.3);
        opacity: 0;
    }
}

/* Nebel Animation */
.fog-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -2;
    overflow: hidden;
}

.fog {
    position: absolute;
    width: 300%;
    height: 150%;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(254, 249, 231, 0.15) 20%, 
        rgba(244, 208, 63, 0.25) 35%, 
        rgba(243, 156, 18, 0.2) 50%, 
        rgba(244, 208, 63, 0.25) 65%, 
        rgba(254, 249, 231, 0.15) 80%, 
        transparent 100%);
    animation: fogMove 25s infinite linear;
    opacity: 0.8;
    filter: blur(2px);
}

.fog:nth-child(1) {
    top: 10%;
    animation-delay: 0s;
    animation-duration: 30s;
    opacity: 0.9;
}

.fog:nth-child(2) {
    top: 30%;
    animation-delay: 8s;
    animation-duration: 35s;
    opacity: 0.7;
}

.fog:nth-child(3) {
    top: 50%;
    animation-delay: 16s;
    animation-duration: 28s;
    opacity: 0.8;
}

.fog:nth-child(4) {
    top: 70%;
    animation-delay: 24s;
    animation-duration: 32s;
    opacity: 0.6;
}

.fog:nth-child(5) {
    top: 85%;
    animation-delay: 12s;
    animation-duration: 38s;
    opacity: 0.5;
}

@keyframes fogMove {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

/* Verglühende Partikel */
.particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
}

.particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: var(--accent-color);
    border-radius: 50%;
    animation: particleGlow 8s infinite ease-in-out;
}

.particle:nth-child(odd) {
    background: rgba(214, 189, 62, 0.8);
}

.particle:nth-child(even) {
    background: rgba(163, 139, 126, 0.6);
}

@keyframes particleGlow {
    0% {
        transform: translateY(100vh) scale(1);
        opacity: 1;
        box-shadow: 0 0 10px currentColor;
    }
    50% {
        opacity: 0.8;
        box-shadow: 0 0 20px currentColor;
    }
    100% {
        transform: translateY(-100px) scale(0);
        opacity: 0;
        box-shadow: 0 0 5px currentColor;
    }
}

/* Responsive Anpassungen für Animationen */
@media (max-width: 768px) {
    .orb {
        animation-duration: 12s;
    }
    
    .fog {
        animation-duration: 25s;
    }
    
    .particle {
        animation-duration: 6s;
    }
}

@media (prefers-reduced-motion: reduce) {
    .orb,
    .fog,
    .particle {
        animation: none;
    }
    
    .glowing-orbs,
    .fog-container,
    .particles {
        display: none;
    }
}

/* ===== MASSAGE POPUPS ===== */
.massage-popup {
    display: none;
    position: fixed;
    z-index: 3000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    animation: fadeIn 0.3s ease;
}

.massage-popup.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup-content {
    background: linear-gradient(135deg, var(--white) 0%, var(--secondary-color) 100%);
    margin: 20px;
    padding: 0;
    border-radius: 25px;
    width: 90%;
    max-width: 700px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    animation: slideInUp 0.4s ease;
    box-shadow: var(--shadow-heavy);
}

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

.popup-header {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    color: var(--white);
    padding: 30px;
    border-radius: 25px 25px 0 0;
    position: relative;
    text-align: center;
}

.popup-close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
    color: var(--white);
    transition: all var(--transition-fast);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
}

.popup-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

.popup-title {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    margin-bottom: 10px;
}

.popup-subtitle {
    font-size: var(--font-size-lg);
    opacity: 0.9;
    font-weight: 300;
}

.popup-body {
    padding: 40px;
}

.popup-description {
    font-size: var(--font-size-lg);
    line-height: 1.8;
    color: var(--text-color);
    margin-bottom: 30px;
}

.popup-benefits {
    margin-bottom: 30px;
}

.popup-benefits h4 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.popup-benefits h4 i {
    color: var(--accent-color);
}

.benefits-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
}

.benefit-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px;
    background: rgba(244, 208, 63, 0.1);
    border-radius: 12px;
    transition: all var(--transition-fast);
}

.benefit-item:hover {
    background: rgba(244, 208, 63, 0.2);
    transform: translateX(5px);
}

.benefit-item i {
    color: var(--accent-color);
    font-size: var(--font-size-lg);
    min-width: 20px;
}

.popup-pricing {
    background: var(--light-gray);
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 30px;
}

.popup-pricing h4 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 20px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.popup-pricing h4 i {
    color: var(--accent-color);
}

.pricing-options {
    /* Zeige die Preisoptionen in drei gleich großen Spalten auf Desktop.
       Die ursprüngliche Implementierung nutzte auto-fit mit minmax(),
       wodurch die Optionen unter bestimmten Umständen auf schmalen
       Bildschirmen ungleichmäßig verteilt wurden.  Durch drei feste Spalten
       wird eine klarere, nebeneinander stehende Darstellung erreicht.
       Die responsive Anpassung weiter unten stellt sicher, dass auf
       Smartphones die Optionen untereinander angeordnet werden. */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.pricing-option {
    background: var(--white);
    border-radius: 15px;
    padding: 25px;
    text-align: center;
    box-shadow: var(--shadow-light);
    transition: all var(--transition-fast);
    border: 2px solid transparent;
}

.pricing-option:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-medium);
    border-color: var(--primary-color);
}

.pricing-option.featured {
    border-color: var(--accent-color);
    /* Verwende für die hervorgehobene Preisoption eine zarte Tönung des
       Akzenttons. Der Wert 0.05 gibt die Transparenz (5%) an, die zuvor
       auf dem Gelb basierte und jetzt an das Gold (#D6BD3E) angepasst wird. */
    background: linear-gradient(135deg, var(--white) 0%, rgba(214, 189, 62, 0.05) 100%);
}

.pricing-duration {
    font-size: var(--font-size-base);
    color: var(--text-light);
    margin-bottom: 10px;
    font-weight: 500;
}

.pricing-price {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--accent-color);
    margin-bottom: 5px;
}

.pricing-currency {
    font-size: var(--font-size-lg);
    color: var(--text-light);
}

.popup-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.popup-btn {
    padding: 15px 30px;
    border: none;
    border-radius: 50px;
    font-size: var(--font-size-base);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.popup-btn-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    color: var(--white);
    box-shadow: var(--shadow-medium);
}

.popup-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-heavy);
}

.popup-btn-secondary {
    background: transparent;
    color: var(--accent-color);
    border: 2px solid var(--accent-color);
}

.popup-btn-secondary:hover {
    background: var(--accent-color);
    color: var(--white);
}

/* Responsive Anpassungen für Popups */
@media (max-width: 768px) {
    .popup-content {
        margin: 10px;
        border-radius: 20px;
    }
    
    .popup-header {
        padding: 25px 20px;
        border-radius: 20px 20px 0 0;
    }
    
    .popup-body {
        padding: 25px 20px;
    }
    
    .popup-title {
        font-size: var(--font-size-2xl);
    }
    
    .benefits-list {
        grid-template-columns: 1fr;
    }
    
    .pricing-options {
        grid-template-columns: 1fr;
    }
    
    .popup-actions {
        flex-direction: column;
        align-items: center;
    }
    
    .popup-btn {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }
}


@media (max-width: 768px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    body.menu-open {
        overflow: hidden;
        touch-action: none;
    }

    .hamburger {
        display: flex;
    }
    
    .nav-menu {
        position: fixed;
        top: 70px;
        left: 0;
        width: 100%;
        max-width: 100%;
        flex-direction: column;
        background-color: var(--white);
        text-align: center;
        box-shadow: var(--shadow-medium);
        padding: 20px 0;
        transform: translateX(-100%);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
        z-index: 999;
    }
    
    .nav-menu.active {
        transform: translateX(0);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    
    .nav-menu li {
        margin: 15px 0;
    }
    
    .hamburger.active .bar:nth-child(2) {
        opacity: 0;
    }
    
    .hamburger.active .bar:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    
    .hamburger.active .bar:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }
}