/** * Diana Perske - Ganzheitliche Psychotherapie * Stylesheet | Version 4.0 * * Verbesserungen v4: * - Accessibility (Skip-Link, Focus-Styles, reduced-motion) * - Verbesserte Formular-Validierung * - Botanische Dekorationen als CSS-Klassen *//* ======================================== CSS Variables ======================================== */:root{/* Colors */ --clr-sage: #8a9a8e;--clr-sage-light: #a8b5ab;--clr-sage-lighter: #c5d1c8;--clr-sage-dark: #6b7d6f;--clr-sage-darker: #5a6b5e;--clr-cream: #f9f7f4;--clr-cream-dark: #f0ede8;--clr-white: #ffffff;--clr-text: #4a5548;--clr-text-light: #6b7d6f;--clr-text-dark: #3a4338;--clr-focus: #4a90d9;--clr-error: #c75050;--clr-success: #5a8a5e;/* Typography - System Fonts */ --font-display: Georgia, 'Times New Roman', serif;--font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;/* Shadows */ --shadow-soft: 0 4px 20px rgba(106, 125, 111, 0.08);--shadow-medium: 0 8px 40px rgba(106, 125, 111, 0.12);--shadow-lifted: 0 20px 60px rgba(106, 125, 111, 0.15);/* Transitions */ --transition: 0.5s cubic-bezier(0.4, 0, 0.2, 1);--transition-fast: 0.3s cubic-bezier(0.4, 0, 0.2, 1);--transition-bounce: 0.6s cubic-bezier(0.34, 1.56, 0.64, 1)}/* ======================================== Accessibility ======================================== *//* Skip Link */.skip-link{position: absolute;top: -100px;left: 50%;transform: translateX(-50%);background: var(--clr-sage-dark);color: var(--clr-white);padding: 1rem 2rem;z-index: 9999;text-decoration: none;font-weight: 500;border-radius: 0 0 8px 8px;transition: top var(--transition-fast)}.skip-link:focus{top: 0;outline: none}/* Visually Hidden (for screen readers) */.visually-hidden{position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0, 0, 0, 0);white-space: nowrap;border: 0}/* Focus Styles */:focus{outline: none}:focus-visible{outline: 3px solid var(--clr-focus);outline-offset: 2px}/* Reduced Motion */@media (prefers-reduced-motion: reduce){*, *::before, *::after{animation-duration: 0.01ms !important;animation-iteration-count: 1 !important;transition-duration: 0.01ms !important}.fade-in{opacity: 1;transform: none}}/* ======================================== Base Styles ======================================== */*, *::before, *::after{box-sizing: border-box;margin: 0;padding: 0}html{scroll-behavior: smooth;scroll-padding-top: 70px}body{font-family: var(--font-body);font-size: 15px;font-weight: 400;line-height: 1.7;color: var(--clr-text);background: var(--clr-cream);overflow-x: hidden;padding-bottom: 25px}::selection{background: var(--clr-sage-light);color: var(--clr-white)}img{max-width: 100%;height: auto;display: block}a{color: inherit;text-decoration: none;transition: color var(--transition-fast)}a:hover{color: var(--clr-sage-dark)}/* ======================================== Typography ======================================== */h1, h2, h3, h4, h5{font-family: var(--font-display);font-weight: 400;line-height: 1.25;color: var(--clr-text-dark)}h1{font-size: clamp(2.75rem, 7vw, 5rem);font-weight: 300;letter-spacing: -0.02em}h2{font-size: clamp(1.5rem, 4vw, 2.25rem);margin-bottom: 1rem}h3{font-size: clamp(1.15rem, 2.2vw, 1.45rem);margin-bottom: 0.7rem}h4{font-size: 1.05rem;font-weight: 500}p{font-size: 0.95rem;line-height: 1.7;margin-bottom: 0.85rem}p:last-child{margin-bottom: 0}/* ======================================== Layout ======================================== */.container{width: 100%;max-width: 1200px;margin: 0 auto;padding: 0 clamp(1.5rem, 5vw, 4rem)}.container-narrow{max-width: 800px}section{padding: clamp(1.25rem, 3vw, 2rem) 0;position: relative;scroll-margin-top: 0px}/* ======================================== Section Headers (einheitliche Ausrichtung) ======================================== */.section-header{text-align: center;max-width: 750px;margin: 0 auto 1rem}.section-header h2{margin-bottom: 0.85rem}.section-header p{color: var(--clr-text-light);font-size: 0.95rem;line-height: 1.65;max-width: 650px;margin: 0 auto}/* ======================================== Buttons ======================================== */.btn{display: inline-flex;align-items: center;justify-content: center;gap: 0.5rem;padding: 1.1rem 2.5rem;font-family: var(--font-body);font-size: 1rem;font-weight: 500;letter-spacing: 0.1em;text-transform: uppercase;border: 2px solid transparent;cursor: pointer;transition: all var(--transition);white-space: nowrap}.btn-sage{background: var(--clr-sage);color: var(--clr-white);border-color: var(--clr-sage)}.btn-sage:hover:not(:disabled){background: var(--clr-sage-dark);border-color: var(--clr-sage-dark);color: var(--clr-white);transform: translateY(-2px)}.btn-sage:disabled,.btn:disabled{background: var(--clr-sage-lighter);border-color: var(--clr-sage-lighter);color: rgba(255, 255, 255, 0.7);cursor: not-allowed;transform: none;opacity: 0.6}.btn-outline{background: transparent;color: var(--clr-sage);border-color: var(--clr-sage)}.btn-outline:hover{background: var(--clr-sage);color: var(--clr-white)}.btn-white{background: var(--clr-white);color: var(--clr-sage-dark);border-color: var(--clr-white)}.btn-white:hover{background: transparent;color: var(--clr-white);border-color: var(--clr-white)}.btn-pulse{animation: pulse 3s infinite}@keyframes pulse{0%, 100%{box-shadow: 0 0 0 0 rgba(138, 154, 142, 0.4)}50%{box-shadow: 0 0 0 15px rgba(138, 154, 142, 0)}}/* ======================================== Navigation ======================================== */.nav{position: fixed;top: 0;left: 0;right: 0;z-index: 1000;background: rgba(249, 247, 244, 0.95);backdrop-filter: blur(20px);border-bottom: 1px solid rgba(138, 154, 142, 0.1);transition: all var(--transition)}.nav.scrolled{background: rgba(255, 255, 255, 0.98);box-shadow: var(--shadow-soft)}.nav-inner{display: flex;align-items: center;justify-content: space-between;padding: 3px 0}.logo{display: flex;flex-direction: row;align-items: center;gap: 0.75rem;cursor: pointer;margin-left: -1rem}.logo-img{height: 70px;width: auto}.logo-text{display: flex;flex-direction: column}.logo-name{font-family: var(--font-display);font-size: 1.5rem;color: var(--clr-text-dark);letter-spacing: 0.1em}.logo-sub{font-size: 0.75rem;font-weight: 400;letter-spacing: 0.2em;text-transform: uppercase;color: var(--clr-sage)}.nav-links{display: flex;align-items: center;gap: 1.75rem;list-style: none}.nav-link{font-size: 0.9rem;letter-spacing: 0.03em;color: var(--clr-text);padding: 0.5rem 0;position: relative;transition: color var(--transition-fast);white-space: nowrap}.nav-link::after{content: '';position: absolute;bottom: 0;left: 0;width: 0;height: 2px;background: var(--clr-sage);transition: width var(--transition)}.nav-link:hover{color: var(--clr-sage-dark)}.nav-link:hover::after{width: 100%}.menu-toggle{display: none;flex-direction: column;gap: 6px;padding: 0.5rem;background: none;border: none;cursor: pointer}.menu-toggle span{width: 24px;height: 2px;background: var(--clr-text-dark);transition: all var(--transition-fast);border-radius: 2px}@media (max-width: 1024px){/* Mobile Navigation */ .menu-toggle{display: flex}.nav-menu{position: fixed;top: 0;right: 0;width: 100%;max-width: 350px;height: 100vh;background: var(--clr-cream);padding: 5rem 2.5rem 2.5rem;flex-direction: column;transform: translateX(100%);transition: transform var(--transition);box-shadow: -10px 0 40px rgba(0,0,0,0.1)}.nav-menu.open{transform: translateX(0)}.nav-links{flex-direction: column;align-items: flex-start;gap: 0;width: 100%}.nav-links li{width: 100%;border-bottom: 1px solid rgba(138, 154, 142, 0.15)}.nav-link{display: block;padding: 1.25rem 0;font-size: 1.15rem}.nav-cta{margin: 2.5rem 0 0;width: 100%}.nav-cta .btn{width: 100%;justify-content: center}/* Mobile Header - Logo über Text */ .nav-inner{flex-direction: column;padding: 0.75rem 0;position: relative}.logo{flex-direction: column;align-items: center;text-align: center;margin-left: 0;gap: 0.5rem;width: 100%}.logo-img{height: 80px;margin-bottom: 0.25rem}.logo-text{flex-direction: row;align-items: baseline;gap: 0.5rem;flex-wrap: wrap;justify-content: center}.logo-name{font-size: 1.3rem}.logo-sub{font-size: 0.6rem}.menu-toggle{position: absolute;right: 1rem;top: 1rem}}/* ======================================== Hero Section (vereinfacht & funktional) ======================================== */.hero{min-height: 100vh;min-height: 100dvh;display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center;padding: 120px 2rem 120px;position: relative;background: linear-gradient(135deg, var(--clr-sage) 0%, var(--clr-sage-dark) 100%);color: var(--clr-white);overflow: hidden}/* Botanische Dekorationen */.hero-botanical{position: absolute;top: 0;bottom: 0;width: 250px;color: rgba(255, 255, 255, 0.35);pointer-events: none;z-index: 0}.hero-botanical svg{width: 100%;height: 100%}.hero-botanical-left{left: 0}.hero-botanical-right{right: 0}@media (max-width: 1400px){.hero-botanical{width: 220px;color: rgba(255, 255, 255, 0.3)}}@media (max-width: 1200px){.hero-botanical{width: 180px;color: rgba(255, 255, 255, 0.25)}}@media (max-width: 900px){.hero-botanical{width: 140px;color: rgba(255, 255, 255, 0.2)}}@media (max-width: 700px){.hero-botanical{width: 100px;color: rgba(255, 255, 255, 0.15)}}@media (max-width: 500px){.hero-botanical{display: none}}.hero-content{position: relative;z-index: 1;max-width: 800px}.hero h1{color: var(--clr-white);font-size: clamp(2.5rem, 8vw, 4.5rem);margin-bottom: 1.5rem;line-height: 1.1;font-weight: 300}.hero-name{font-family: var(--font-display);font-size: clamp(1.5rem, 4vw, 2.25rem);margin-bottom: 1rem;letter-spacing: 0.08em;font-weight: 400}.hero-subtitle{font-size: clamp(1rem, 2.5vw, 1.2rem);opacity: 0.9;margin-bottom: 0.5rem;font-weight: 300}.hero-badge{display: inline-block;padding: 0.6rem 1.5rem;background: rgba(255,255,255,0.15);border: 1px solid rgba(255,255,255,0.3);font-size: 0.9rem;letter-spacing: 0.1em;text-transform: uppercase;margin-top: 1.5rem;backdrop-filter: blur(10px)}.hero-scroll{position: absolute;bottom: 3rem;left: 50%;transform: translateX(-50%);display: flex;flex-direction: column;align-items: center;gap: 0.75rem;color: var(--clr-white);text-decoration: none;transition: all var(--transition-fast);z-index: 10}.hero-scroll:hover{transform: translateX(-50%) translateY(-5px);color: var(--clr-white)}.hero-scroll-text{font-size: 0.75rem;font-weight: 500;letter-spacing: 0.2em;text-transform: uppercase;opacity: 0.8}.hero-scroll:hover .hero-scroll-text{opacity: 1}.hero-scroll-circle{width: 50px;height: 50px;border: 2px solid rgba(255, 255, 255, 0.4);border-radius: 50%;display: flex;align-items: center;justify-content: center;position: relative;transition: all var(--transition-fast)}.hero-scroll:hover .hero-scroll-circle{border-color: rgba(255, 255, 255, 0.8);transform: scale(1.1)}.hero-scroll-dot{width: 8px;height: 8px;background: rgba(255, 255, 255, 0.9);border-radius: 50%;animation: scrollDotBounce 2s ease-in-out infinite}@keyframes scrollDotBounce{0%, 100%{transform: translateY(-8px);opacity: 1}50%{transform: translateY(8px);opacity: 0.4}}/* Pulsierender Ring-Effekt */.hero-scroll-circle::before{content: '';position: absolute;top: -2px;left: -2px;right: -2px;bottom: -2px;border: 2px solid rgba(255, 255, 255, 0.3);border-radius: 50%;animation: scrollPulse 2s ease-out infinite}@keyframes scrollPulse{0%{transform: scale(1);opacity: 0.5}100%{transform: scale(1.4);opacity: 0}}@media (max-width: 600px){.hero-scroll{bottom: 1.5rem}.hero-scroll-circle{width: 40px;height: 40px}.hero-scroll-dot{width: 6px;height: 6px}}@media (max-width: 600px){.hero{padding: 100px 1.5rem 60px}.hero-cta{flex-direction: column;align-items: center}.hero-cta .btn{width: 100%;max-width: 280px}}/* ======================================== Section Components ======================================== */.section-tag{display: inline-block;font-size: 0.85rem;font-weight: 500;letter-spacing: 0.2em;text-transform: uppercase;color: var(--clr-sage);margin-bottom: 1.5rem}.section-tag-light{color: rgba(255,255,255,0.7)}.section-tag-lined{display: inline-flex;align-items: center;gap: 1rem}.section-tag-lined::before, .section-tag-lined::after{content: '';width: 40px;height: 1px;background: var(--clr-sage-light)}/* ======================================== Info Bar ======================================== */.info-bar{padding: 0;background: var(--clr-white);border-bottom: 1px solid rgba(138, 154, 142, 0.1);scroll-margin-top: 0px}.info-grid{display: grid;grid-template-columns: 180px 1fr 200px;gap: 2.5rem;align-items: center;min-height: 100px;padding: 1rem 0}.info-logo{display: flex;align-items: center;justify-content: flex-start;flex-shrink: 0;margin-left: -1rem}.info-logo img{height: 70px;width: auto;object-fit: contain}.info-center{text-align: center;padding: 0 1rem}.info-center p{color: var(--clr-text);font-size: 0.9rem;margin-bottom: 0.5rem;line-height: 1.5}.info-center strong{display: block;color: var(--clr-sage-dark);font-weight: 500;font-size: 0.95rem;letter-spacing: 0.03em;line-height: 1.5;margin-bottom: 0.5rem}.info-center strong a.info-link{color: var(--clr-sage);text-decoration: underline;text-underline-offset: 2px;transition: color var(--transition-fast)}.info-center strong a.info-link:hover{color: var(--clr-sage-dark)}.info-termin-hinweis{margin-top: 0.5rem;padding-top: 0.5rem;border-top: 1px solid rgba(138, 154, 142, 0.15);font-size: 0.8rem;color: var(--clr-text-light);font-style: italic;margin-bottom: 0 !important}.info-address{text-align: right}.info-address .info-name{font-family: var(--font-display);font-size: 1.25rem;letter-spacing: 0.08em;text-transform: uppercase;color: var(--clr-text-dark);margin-bottom: 0.5rem;font-weight: 400}.info-address p{color: var(--clr-text-light);font-size: 0.9rem;line-height: 1.6}.info-address a{transition: color var(--transition-fast)}.info-address a:hover{color: var(--clr-sage)}@media (max-width: 900px){.info-grid{grid-template-columns: 1fr;text-align: center;gap: 1.5rem;min-height: auto;padding: 1.5rem 0}.info-logo{margin: 0 auto;justify-content: center}.info-logo img{height: 60px}.info-address{text-align: center}.info-center{padding: 0}}/* ======================================== Für Wen Section ======================================== */.fuer-wen{background: var(--clr-cream);position: relative}.fuer-wen .section-header{text-align: center;max-width: 750px;margin: 0 auto 1rem}.fuer-wen .section-header h2{margin-bottom: 0.85rem}.fuer-wen .section-header p{color: var(--clr-text-light);font-size: 0.95rem;line-height: 1.65}.fuer-wen-grid{display: grid;grid-template-columns: repeat(2, 1fr);gap: 1.75rem}.fuer-wen-card{background: var(--clr-white);padding: 1.75rem;border-left: none;position: relative;overflow: hidden;transition: all var(--transition);box-shadow: var(--shadow-soft)}.fuer-wen-card::before{content: '';position: absolute;top: 0;left: 0;width: 3px;height: 0;background: var(--clr-sage);transition: height var(--transition)}.fuer-wen-card:hover{transform: translateY(-8px);box-shadow: var(--shadow-lifted)}.fuer-wen-card:hover::before{height: 100%}.fuer-wen-card .icon{margin-bottom: 1rem;transition: transform var(--transition-bounce)}.fuer-wen-card:hover .icon{transform: scale(1.1)}.fuer-wen-card h3{font-family: var(--font-display);font-size: 1.15rem;color: var(--clr-text-dark);margin-bottom: 0.6rem}.fuer-wen-card p{color: var(--clr-text);font-size: 0.88rem;margin: 0;line-height: 1.6}@media (max-width: 768px){.fuer-wen-grid{grid-template-columns: 1fr}}/* ======================================== Quote Section ======================================== */.quote-section{background: var(--clr-sage);color: var(--clr-white);padding: 4rem 0;position: relative;overflow: hidden}.quote-section::before{content: '"';position: absolute;top: -30px;left: 10%;font-family: var(--font-display);font-size: 16rem;opacity: 0.05;line-height: 1}.quote-text{font-family: var(--font-display);font-size: clamp(1.1rem, 2.2vw, 1.4rem);font-style: italic;font-weight: 400;line-height: 1.5;margin-bottom: 1rem}.quote-author{font-size: 0.85rem;letter-spacing: 0.15em;text-transform: uppercase;opacity: 0.8}/* ======================================== About Section ======================================== */.about{background: var(--clr-white)}.about-content{max-width: 850px;margin: 0 auto;text-align: center}.about h2{margin-bottom: 1.5rem}.about p{margin-bottom: 1.25rem;color: var(--clr-text);font-size: 0.95rem;line-height: 1.75}.about-qualifikationen{display: flex;flex-wrap: wrap;justify-content: center;gap: 0.7rem;margin: 2rem 0}.about-qual{display: flex;align-items: center;gap: 0.4rem;padding: 0.5rem 1rem;background: var(--clr-cream);font-size: 0.85rem;color: var(--clr-text-light);border-left: 2px solid var(--clr-sage);transition: all var(--transition-fast)}.about-qual:hover{background: var(--clr-sage);color: var(--clr-white);transform: translateY(-2px)}.about-signature{font-family: var(--font-display);font-size: 2rem;font-style: italic;color: var(--clr-sage);margin-top: 2rem}/* ======================================== Services Section ======================================== */.services{background: var(--clr-white);position: relative}.services-header{text-align: center;max-width: 650px;margin: 0 auto 1rem}.services-header h2{margin-bottom: 0.75rem}.services-grid{display: grid;grid-template-columns: repeat(2, 1fr);gap: 1.5rem}.service-card{background: var(--clr-white);padding: 2rem;position: relative;transition: all var(--transition);overflow: hidden;box-shadow: var(--shadow-soft)}.service-card::before{content: '';position: absolute;top: 0;left: 0;width: 3px;height: 0;background: var(--clr-sage);transition: height var(--transition)}.service-card:hover{transform: translateY(-8px);box-shadow: var(--shadow-lifted)}.service-card:hover::before{height: 100%}.service-card h3{margin-bottom: 0.85rem;font-size: 1.2rem}.service-card > p{color: var(--clr-text);margin-bottom: 1.25rem;font-size: 0.9rem;line-height: 1.65}.service-points{display: flex;flex-wrap: wrap;gap: 0.5rem}.service-point{display: inline-flex;align-items: center;gap: 0.35rem;padding: 0.35rem 0.85rem;background: var(--clr-cream);font-size: 0.82rem;color: var(--clr-text-light)}.service-point::before{content: '·';color: var(--clr-sage);font-weight: bold}@media (max-width: 768px){.services-grid{grid-template-columns: 1fr}}/* ======================================== Ablauf Section (Timeline Design) ======================================== */.ablauf{background: var(--clr-cream)}.ablauf-timeline{max-width: 800px;margin: 0 auto}.ablauf-step{display: grid;grid-template-columns: 60px 1fr;gap: 1.5rem;position: relative}.ablauf-step:not(:last-child){padding-bottom: 1rem}.ablauf-marker{display: flex;flex-direction: column;align-items: center;position: relative}.ablauf-number{width: 50px;height: 50px;background: var(--clr-sage);color: var(--clr-white);border-radius: 50%;display: flex;align-items: center;justify-content: center;font-family: var(--font-display);font-size: 1.25rem;font-weight: 500;flex-shrink: 0;position: relative;z-index: 2;box-shadow: var(--shadow-soft);transition: all var(--transition)}.ablauf-step:hover .ablauf-number{transform: scale(1.1);box-shadow: var(--shadow-medium)}.ablauf-line{position: absolute;top: 50px;left: 50%;transform: translateX(-50%);width: 2px;height: calc(100% - 50px + 1rem);background: linear-gradient( to bottom, var(--clr-sage-light) 0%, var(--clr-sage-lighter) 100% );z-index: 1}.ablauf-step:last-child .ablauf-line{display: none}.ablauf-content{padding-top: 0.5rem}.ablauf-content h3{font-family: var(--font-display);font-size: 1.15rem;color: var(--clr-text-dark);margin-bottom: 0.5rem;line-height: 1.3}.ablauf-content p{color: var(--clr-text);font-size: 0.9rem;line-height: 1.65;max-width: 600px}/* Tablet */@media (max-width: 768px){.ablauf-step{grid-template-columns: 60px 1fr;gap: 1.5rem}.ablauf-number{width: 50px;height: 50px;font-size: 1.25rem}.ablauf-line{top: 50px;height: calc(100% - 50px + 3rem)}.ablauf-content h3{font-size: 1.25rem}.ablauf-content p{font-size: 1rem}}/* Mobile */@media (max-width: 480px){.ablauf-step{grid-template-columns: 45px 1fr;gap: 1rem}.ablauf-step:not(:last-child){padding-bottom: 2rem}.ablauf-number{width: 40px;height: 40px;font-size: 1.1rem}.ablauf-line{top: 40px;height: calc(100% - 40px + 2rem)}.ablauf-content h3{font-size: 1.15rem}}/* ======================================== Kosten Section ======================================== */.kosten{background: var(--clr-sage);color: var(--clr-white)}.kosten-content{display: grid;grid-template-columns: 1fr 1.5fr;gap: 2.5rem;align-items: start}.kosten-left h2{color: var(--clr-white);margin-bottom: 1rem}.kosten-left p{opacity: 0.95;margin-bottom: 0;font-size: 0.95rem;line-height: 1.65}.kosten-cards{display: flex;gap: 1rem}.kosten-card{flex: 1;background: rgba(255,255,255,0.1);padding: 1.75rem 1.5rem;text-align: center;backdrop-filter: blur(10px);border: 1px solid rgba(255,255,255,0.15)}.kosten-card h3{font-family: var(--font-body);font-size: 0.82rem;letter-spacing: 0.12em;text-transform: uppercase;opacity: 0.9;margin-bottom: 0.5rem;color: var(--clr-white)}.kosten-card .preis{font-family: var(--font-display);font-size: 2.25rem;font-weight: 500;margin-bottom: 0.3rem}.kosten-card .dauer{font-size: 0.9rem;opacity: 0.8}.kosten-hinweis{margin-top: 1.25rem;padding: 1.25rem;background: rgba(0,0,0,0.1);font-size: 0.88rem;line-height: 1.6}@media (max-width: 900px){.kosten-content{grid-template-columns: 1fr;text-align: center}.kosten-cards{flex-direction: column}}/* ======================================== Approach Section ======================================== */.approach{background: var(--clr-white);text-align: center}.approach h2{margin-bottom: 1.5rem}.approach > .container > p{max-width: 750px;margin: 0 auto 4rem;color: var(--clr-text-light);font-size: 1.15rem}.approach-features{display: flex;justify-content: center;gap: 5rem;flex-wrap: wrap}.approach-feature{text-align: center}.approach-icon{width: 100px;height: 100px;border: 2px solid var(--clr-sage-light);border-radius: 50%;display: flex;align-items: center;justify-content: center;margin: 0 auto 1.5rem;color: var(--clr-sage);transition: all var(--transition)}.approach-icon svg{width: 45px;height: 45px;transition: transform var(--transition-bounce)}.approach-feature:hover .approach-icon{background: var(--clr-sage);border-color: var(--clr-sage);color: var(--clr-white)}.approach-feature:hover .approach-icon svg{transform: scale(1.15)}.approach-feature h4{font-family: var(--font-display);font-size: 1rem;color: var(--clr-text-dark)}/* ======================================== FAQ Section ======================================== */.faq{background: var(--clr-cream)}.faq-header{text-align: center;margin-bottom: 2.5rem}.faq-list{max-width: 850px;margin: 0 auto}.faq-item{border-bottom: 1px solid rgba(138, 154, 142, 0.2)}.faq-question{width: 100%;padding: 1.25rem 0;display: flex;justify-content: space-between;align-items: center;background: none;border: none;cursor: pointer;text-align: left;font-family: var(--font-display);font-size: 1.1rem;color: var(--clr-text-dark);transition: color var(--transition-fast);line-height: 1.35}.faq-question:hover{color: var(--clr-sage)}.faq-icon{width: 28px;height: 28px;position: relative;flex-shrink: 0;margin-left: 1.5rem}.faq-icon::before, .faq-icon::after{content: '';position: absolute;background: var(--clr-sage);transition: transform var(--transition-fast)}.faq-icon::before{top: 50%;left: 0;width: 100%;height: 2px;transform: translateY(-50%)}.faq-icon::after{top: 0;left: 50%;width: 2px;height: 100%;transform: translateX(-50%)}.faq-item.active .faq-icon::after{transform: translateX(-50%) rotate(90deg)}.faq-answer{max-height: 0;overflow: hidden;transition: max-height var(--transition)}.faq-item.active .faq-answer{max-height: 500px}.faq-answer-inner{padding: 0 0 2rem;color: var(--clr-text);line-height: 1.95;font-size: 1.15rem}/* ======================================== Contact Section ======================================== */.contact{background: var(--clr-white)}.contact-grid{display: grid;grid-template-columns: 1fr 1fr;gap: 2.5rem}.contact-info h2{margin-bottom: 1rem}.contact-info > p{color: var(--clr-text);margin-bottom: 1.5rem;font-size: 0.95rem;line-height: 1.65}.contact-details{display: flex;flex-direction: column;gap: 1.25rem}.contact-item{display: flex;align-items: flex-start;gap: 1rem}.contact-icon{width: 46px;height: 46px;background: var(--clr-white);display: flex;align-items: center;justify-content: center;flex-shrink: 0;color: var(--clr-sage);box-shadow: var(--shadow-soft);transition: all var(--transition)}.contact-icon svg{width: 20px;height: 20px}.contact-item:hover .contact-icon{background: var(--clr-sage);color: var(--clr-white);transform: scale(1.05);box-shadow: var(--shadow-medium)}.contact-item-content h3{font-family: var(--font-body);font-size: 0.8rem;font-weight: 500;letter-spacing: 0.08em;text-transform: uppercase;color: var(--clr-text-dark);margin-bottom: 0.3rem}.contact-item-content p, .contact-item-content a{color: var(--clr-text);font-size: 0.9rem;line-height: 1.55}.contact-note{margin-top: 1.5rem;padding: 1.25rem;background: var(--clr-sage);color: var(--clr-white)}.contact-note strong{display: block;margin-bottom: 0.4rem;font-weight: 500;letter-spacing: 0.05em;font-size: 0.88rem}.contact-note p{font-size: 0.88rem;margin: 0;line-height: 1.55}/* Crisis Box - Professionelles Design (klappbar) */.crisis-box{margin-top: 1.5rem;background: linear-gradient(135deg, var(--clr-sage) 0%, var(--clr-sage-dark) 100%);border-radius: 8px;overflow: hidden;color: #fff}.crisis-header{display: flex;align-items: center;gap: 0.6rem;padding: 0.9rem 1.1rem;background: rgba(0,0,0,0.1);font-size: 0.82rem;font-weight: 600;letter-spacing: 0.03em;text-transform: uppercase;width: 100%;border: none;color: #fff;cursor: pointer;text-align: left;transition: background 0.2s ease}.crisis-header:hover{background: rgba(0,0,0,0.15)}.crisis-header span{flex: 1}.crisis-chevron{width: 18px;height: 18px;transition: transform 0.3s ease}.crisis-open .crisis-chevron{transform: rotate(180deg)}.crisis-icon{width: 18px;height: 18px;flex-shrink: 0;opacity: 0.9}.crisis-items{max-height: 0;overflow: hidden;transition: max-height 0.3s ease, padding 0.3s ease;padding: 0 0.5rem}.crisis-open .crisis-items{max-height: 500px;padding: 0.5rem;display: flex;flex-direction: column;gap: 0.4rem}.crisis-item{display: grid;grid-template-columns: 1fr auto;grid-template-rows: auto auto;gap: 0.15rem 1rem;padding: 0.7rem 0.8rem;background: rgba(255,255,255,0.1);border-radius: 5px;transition: background 0.2s ease}.crisis-item:hover{background: rgba(255,255,255,0.18)}.crisis-item.crisis-emergency{background: rgba(180, 60, 60, 0.35);border-left: 3px solid #c94a4a}.crisis-item.crisis-emergency:hover{background: rgba(180, 60, 60, 0.45)}.crisis-label{font-weight: 600;font-size: 0.88rem;color: #fff}.crisis-detail{font-size: 0.75rem;color: rgba(255,255,255,0.7);grid-column: 1}.crisis-numbers{grid-column: 2;grid-row: 1 / 3;display: flex;align-items: center;gap: 0.4rem;flex-wrap: wrap;justify-content: flex-end}.crisis-number{display: inline-block;padding: 0.3rem 0.6rem;background: rgba(255,255,255,0.2);color: #fff;font-size: 0.82rem;font-weight: 600;font-family: var(--ff-body);letter-spacing: 0.04em;border-radius: 4px;text-decoration: none;transition: all 0.2s ease}.crisis-number:hover{background: rgba(255,255,255,0.35);transform: translateY(-1px)}.crisis-emergency .crisis-number{background: rgba(180, 60, 60, 0.6)}.crisis-emergency .crisis-number:hover{background: rgba(180, 60, 60, 0.8)}.crisis-sep{font-size: 0.7rem;color: rgba(255,255,255,0.6)}/* Mobile Anpassungen */@media (max-width: 480px){.crisis-item{grid-template-columns: 1fr;grid-template-rows: auto auto auto;gap: 0.3rem}.crisis-numbers{grid-column: 1;grid-row: 3;justify-content: flex-start;margin-top: 0.3rem}.crisis-header{font-size: 0.75rem}}/* ======================================== Contact Form ======================================== */.contact-form{background: var(--clr-white);padding: 1.5rem;box-shadow: var(--shadow-medium)}.contact-form h3{margin-bottom: 0.25rem;font-size: 1.3rem}.contact-form > p{color: var(--clr-text);font-size: 0.85rem;margin-bottom: 1rem;line-height: 1.5}.form-row{display: grid;grid-template-columns: 1fr 1fr;gap: 0.75rem}.form-group{margin-bottom: 0.75rem}.form-group.full{grid-column: 1 / -1}.form-group label{display: block;font-size: 0.75rem;font-weight: 500;letter-spacing: 0.05em;text-transform: uppercase;color: var(--clr-text-dark);margin-bottom: 0.3rem}.form-group input, .form-group textarea{width: 100%;padding: 0.6rem 0.85rem;border: 1px solid rgba(138, 154, 142, 0.3);background: var(--clr-cream);font-family: var(--font-body);font-size: 0.9rem;color: var(--clr-text);transition: border-color var(--transition-fast)}.form-group input:focus, .form-group textarea:focus{outline: none;border-color: var(--clr-sage);background: var(--clr-white)}.form-group textarea{min-height: 80px;resize: vertical}.form-group input::placeholder, .form-group textarea::placeholder{color: var(--clr-text-light);opacity: 0.7;font-size: 0.85rem}/* Form Validation States */.form-group input.invalid,.form-group textarea.invalid{border-color: var(--clr-error);background: #fef8f8}.form-group input.valid,.form-group textarea.valid{border-color: var(--clr-success)}.form-group input:focus-visible,.form-group textarea:focus-visible{outline: 3px solid var(--clr-focus);outline-offset: 2px;border-color: var(--clr-sage)}.label-optional{font-weight: 400;text-transform: none;letter-spacing: normal;color: var(--clr-text-light)}.form-hp{position: absolute;left: -9999px}.form-checkbox{display: flex;align-items: flex-start;gap: 0.5rem;margin-bottom: 0.75rem}.form-checkbox input[type="checkbox"]{width: 16px;height: 16px;margin-top: 2px;accent-color: var(--clr-sage);cursor: pointer;flex-shrink: 0}.form-checkbox label{font-size: 0.8rem;color: var(--clr-text-light);cursor: pointer;line-height: 1.4}.form-checkbox a{color: var(--clr-sage);text-decoration: underline}.form-submit .btn{width: 100%;padding: 0.75rem 1.5rem;font-size: 0.9rem}.form-note{text-align: center;margin-top: 0.75rem;font-size: 0.75rem;color: var(--clr-text-light)}.form-success{background: var(--clr-sage-light);color: var(--clr-white);padding: 0.85rem;margin-bottom: 0.85rem;text-align: center;display: flex;align-items: center;justify-content: center;gap: 0.5rem;font-size: 0.9rem}.form-success .icon{width: 16px;height: 16px}.form-error{background: #d4a5a5;color: #5c3a3a;padding: 0.85rem;margin-bottom: 0.85rem;text-align: center;font-size: 0.85rem}/* Health Data Notice (DSGVO Art. 9) */.health-data-notice{background: linear-gradient(135deg, #f8f4e8 0%, #faf6ed 100%);border: 1px solid #e6dcc6;border-left: 4px solid #5a7360;border-radius: 0 8px 8px 0;padding: 1rem 1.25rem;margin-bottom: 1.5rem;font-size: 0.9rem;line-height: 1.6}.health-data-notice strong{display: block;color: #5a7360;margin-bottom: 0.5rem;font-size: 0.95rem}.health-data-notice p{margin: 0;color: #5c5c4a}@media (max-width: 900px){.contact-grid{grid-template-columns: 1fr}}@media (max-width: 600px){.form-row{grid-template-columns: 1fr}}/* ======================================== Anfahrt Section ======================================== */.anfahrt{background: var(--clr-cream);padding: 1.25rem 0}.anfahrt-content{display: grid;grid-template-columns: 1fr 1fr;gap: 2rem;align-items: center}.anfahrt h2{margin-bottom: 1rem}.anfahrt-text > p{color: var(--clr-text);margin-bottom: 1rem;font-size: 0.95rem;line-height: 1.65}.anfahrt-details{font-size: 0.9rem;line-height: 1.7}.anfahrt-details p{margin-bottom: 1.25rem}.anfahrt-details strong{color: var(--clr-text-dark)}.anfahrt-map{height: 320px;background: var(--clr-cream);border: 1px solid rgba(138,154,142,0.2);border-radius: 4px;overflow: hidden;position: relative}.anfahrt-map iframe{display: block}/* Google Maps Consent */.map-consent{position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: var(--clr-cream);display: flex;align-items: center;justify-content: center;text-align: center;padding: 2rem}.map-consent-content{max-width: 280px}.map-consent-icon{width: 48px;height: 48px;color: var(--clr-sage);margin-bottom: 1rem}.map-consent p{margin-bottom: 0.75rem;font-size: 0.95rem;color: var(--clr-text-light)}.map-consent p strong{color: var(--clr-text-dark);font-size: 1.1rem}.map-consent .btn-sm{padding: 0.6rem 1.5rem;font-size: 0.9rem;margin: 0.5rem 0}.map-consent-link{font-size: 0.8rem !important;margin-top: 0.5rem !important}.map-consent-link a{color: var(--clr-sage);text-decoration: underline}.map-consent.hidden{display: none}@media (max-width: 768px){.anfahrt-content{grid-template-columns: 1fr}}/* ======================================== Footer (fixiert) ======================================== */.footer-fixed{position: fixed;bottom: 0;left: 0;right: 0;height: 25px;background: var(--clr-sage-darker);color: var(--clr-white);z-index: 100}.footer-fixed .container{height: 100%;display: flex;justify-content: space-between;align-items: center}.footer-fixed .footer-copy{font-size: 0.7rem;color: rgba(255,255,255,0.6);margin: 0}.footer-fixed .footer-legal{display: flex;gap: 1.5rem}.footer-fixed .footer-legal a{font-size: 0.7rem;color: rgba(255,255,255,0.6)}.footer-fixed .footer-legal a:hover{color: var(--clr-white)}@media (max-width: 500px){.footer-fixed .footer-copy{display: none}.footer-fixed .footer-legal{width: 100%;justify-content: center}}.footer-legal a:hover{color: var(--clr-white)}@media (max-width: 768px){.footer-content{flex-direction: column;align-items: center;text-align: center}.footer-brand p{max-width: 100%}.footer-links{flex-direction: column;gap: 2.5rem}.footer-bottom{flex-direction: column;text-align: center}}/* ======================================== Modal ======================================== */.modal-overlay{position: fixed;inset: 0;background: rgba(0,0,0,0.6);z-index: 2000;display: flex;align-items: center;justify-content: center;padding: 2rem;opacity: 0;visibility: hidden;transition: all var(--transition)}.modal-overlay.active{opacity: 1;visibility: visible}.modal{background: var(--clr-white);max-width: 850px;width: 100%;max-height: 90vh;overflow-y: auto;position: relative;transform: translateY(20px);transition: transform var(--transition)}.modal-overlay.active .modal{transform: translateY(0)}.modal-header{position: sticky;top: 0;background: var(--clr-sage);color: var(--clr-white);padding: 1.75rem 2rem;display: flex;justify-content: space-between;align-items: center}.modal-header h2{font-size: 1.6rem;margin: 0;color: var(--clr-white)}.modal-close{background: none;border: none;color: var(--clr-white);font-size: 1.75rem;cursor: pointer;padding: 0.5rem;line-height: 1}.modal-body{padding: 2.5rem}.modal-body h3{font-size: 1.35rem;margin: 2.5rem 0 1rem;color: var(--clr-text-dark)}.modal-body h3:first-child{margin-top: 0}.modal-body p, .modal-body li{color: var(--clr-text);font-size: 1.05rem;margin-bottom: 1rem;line-height: 1.9}.modal-body ul{margin-left: 1.75rem;margin-bottom: 1rem}.modal-body a{color: var(--clr-sage);text-decoration: underline}/* ======================================== Back to Top Button ======================================== */.back-to-top{position: fixed;bottom: 2.5rem;right: 2.5rem;width: 55px;height: 55px;background: var(--clr-sage);color: var(--clr-white);border: none;cursor: pointer;display: flex;align-items: center;justify-content: center;opacity: 0;visibility: hidden;transform: translateY(20px);transition: all var(--transition);z-index: 999;box-shadow: var(--shadow-medium)}.back-to-top svg{width: 22px;height: 22px}.back-to-top.visible{opacity: 1;visibility: visible;transform: translateY(0)}.back-to-top:hover{background: var(--clr-sage-dark);transform: translateY(-5px)}/* ======================================== Animations ======================================== */.fade-in{opacity: 0;transform: translateY(30px);transition: opacity 0.8s ease, transform 0.8s ease}.fade-in.visible{opacity: 1;transform: translateY(0)}.stagger-1{transition-delay: 0.1s}.stagger-2{transition-delay: 0.2s}.stagger-3{transition-delay: 0.3s}.stagger-4{transition-delay: 0.4s}/* ======================================== Icon Styles ======================================== */.icon{display: inline-flex;align-items: center;justify-content: center;flex-shrink: 0}.icon svg{width: 100%;height: 100%}.icon-sm{width: 18px;height: 18px}.icon-md{width: 26px;height: 26px}.icon-lg{width: 36px;height: 36px}.icon-xl{width: 52px;height: 52px}/* ======================================== Wave Dividers ======================================== */.wave-divider{position: absolute;left: 0;right: 0;height: 50px;overflow: hidden;line-height: 0;pointer-events: none;z-index: 1}.wave-divider-bottom{bottom: 0}.wave-divider-top{top: 0;transform: rotate(180deg)}.wave-divider svg{position: relative;display: block;width: calc(100% + 1.3px);height: 50px}.wave-divider .shape-fill{fill: var(--clr-cream)}.wave-divider-white .shape-fill{fill: var(--clr-white)}.wave-divider-sage .shape-fill{fill: var(--clr-sage)}/* Mini-Wellen für Kosten-Sektion */.wave-mini{width: 100%;height: 10px;line-height: 0}.wave-mini svg{width: 100%;height: 100%;display: block}