/* DATEI: style-new.css - KOMPLETTE ÜBERARBEITUNG V2 - TEIL 1 */

:root {
    /* CI-konforme Farbpalette basierend auf dem Manual */
    --ci-blau: #284261; /* Bildzeichen Farbe (Primary) */
    --ci-grau: #3c3c42; /* Schrift Farbe */
    --ci-hellgrau: #f0f0f1; /* 01 - Haupthintergrund */
    --ci-blaugrau: #9aafbf; /* 02 - Mentoring Akzente */
    --ci-mentoring: #7a95a6; /* Sattere Mentoring-Farbe */
    --ci-gruengrau: #b5c2a5; /* 05 - Sekundäre Akzente */
    --ci-gruen: #9fa979; /* 04 - Naturelemente */
    --ci-dunkelgruen: #595c42; /* 06 - Dunkle Akzente */
    --ci-braun: #ab784b; /* 07 - Warme Akzente */
    --ci-beige: #deb893; /* 08 - Helle Akzente */
    
    /* Funktionale Farben */
    --primary-color: var(--ci-blau);
    --secondary-color: var(--ci-grau);
    --mentoring-color: var(--ci-mentoring);
    --accent-color: var(--ci-blaugrau);
    --background-color: var(--ci-hellgrau);
    --text-color: var(--ci-grau);
    --light-accent: var(--ci-gruengrau);
    
    /* Layout */
    --content-max-width: 1200px;
    --spacing-xs: 10px;
    --spacing-s: 20px;
    --spacing-m: 30px;
    --spacing-l: 40px;
    --spacing-xl: 60px;
    --spacing-xxl: 80px;
    --border-radius: 10px;
    --transition-time: 0.3s;
    
    /* Schatten */
    --light-shadow: 0 2px 10px rgba(40,66,97,0.1);
    --medium-shadow: 0 5px 15px rgba(40,66,97,0.15);
    --strong-shadow: 0 8px 25px rgba(40,66,97,0.2);
}

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

/* Verbesserte Text-Rendering-Optimierung */
html {
    scroll-behavior: smooth;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: 'Titillium Web', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--background-color);
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}

/* Google Font Import für Titillium Web */
@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&display=swap');

/* Fokus-Styling für bessere Accessibility */
a:focus, button:focus, input:focus, textarea:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Skip-to-Content für Barrierefreiheit - Korrigiert */
.skip-to-content {
    background: var(--primary-color);
    color: white;
    font-weight: 600;
    left: 20px;
    padding: 8px 15px;
    position: absolute;
    top: -100px;
    transition: top 0.3s ease;
    z-index: 1001;
    border-radius: 5px;
    text-decoration: none;
    box-shadow: 0 2px 10px rgba(40,66,97,0.2);
}

.skip-to-content:focus {
    top: 20px;
    outline: 2px solid white;
    outline-offset: 2px;
}
/* Organische Kiesel-Formen wie auf der Visitenkarte */
.organic-shape {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    opacity: 0.6;
}

/* Große dominante Kiesel (wie Visitenkarte) */
.organic-shape-large-blaugrau {
    width: 400px;
    height: 280px;
    background: #9aafbf; /* CI-Farbe 02 */
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    transform: rotate(25deg);
}

.organic-shape-large-beige {
    width: 350px;
    height: 250px;
    background: #deb893; /* CI-Farbe 08 */
    border-radius: 45% 55% 35% 65% / 55% 45% 65% 35%;
    transform: rotate(-30deg);
}

.organic-shape-large-gruen {
    width: 320px;
    height: 220px;
    background: #b5c2a5; /* CI-Farbe 05 */
    border-radius: 50% 70% 40% 60% / 40% 50% 60% 70%;
    transform: rotate(15deg);
}

/* Mittlere Kiesel für Akzente */
.organic-shape-medium-blaugrau {
    width: 200px;
    height: 140px;
    background: #9aafbf;
    border-radius: 55% 45% 40% 60% / 45% 55% 60% 40%;
    transform: rotate(-20deg);
}

.organic-shape-medium-beige {
    width: 180px;
    height: 120px;
    background: #deb893;
    border-radius: 65% 35% 50% 50% / 35% 65% 50% 50%;
    transform: rotate(40deg);
}

.organic-shape-medium-gruen {
    width: 160px;
    height: 110px;
    background: #b5c2a5;
    border-radius: 40% 60% 55% 45% / 60% 40% 45% 55%;
    transform: rotate(-15deg);
}
/* Header mit CI-konformen Farben */
header {
    background-color: white;
    box-shadow: var(--light-shadow);
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid rgba(40,66,97,0.1);
}

nav {
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: var(--spacing-s);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
    text-decoration: none;
    z-index: 1001;
    font-family: 'Titillium Web', sans-serif;
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* CI-konformes Header-Logo - Platz für echtes Logo */
.header-logo {
    width: 100px;
    height: 100px;
    margin-right: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-logo img {
    width: 100px;
    height: 100px;
    object-fit: contain; /* Zurück zu contain für sichtbares Logo */
}

.nav-links {
    display: flex;
    gap: var(--spacing-m);
}/* iPad Navigation-Optimierung */
@media (min-width: 768px) and (max-width: 1024px) {
    .nav-links {
        gap: 15px; /* Weniger Abstand zwischen Links */
    }
    
    .nav-links a {
        font-size: 0.85rem; /* Kleinere Schrift */
        white-space: nowrap; /* Verhindert Zeilenumbruch */
    }
    
    .logo {
        font-size: 1.3rem; /* Logo etwas kleiner */
    }
}

.nav-links a {
    text-decoration: none;
    color: var(--text-color);
    font-weight: 500;
    transition: color var(--transition-time) ease;
    position: relative;
    font-family: 'Titillium Web', sans-serif;
}

.nav-links a:hover, .nav-links a:focus {
    color: var(--primary-color);
}

/* Aktiver Link-Zustand */
.nav-links a.active {
    color: var(--primary-color);
}

.nav-links a.active::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--primary-color);
}

/* Hamburger Menü für Mobile */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    width: 30px;
    height: 24px;
    position: relative;
    z-index: 1001;
}

.menu-toggle span {
    display: block;
    position: absolute;
    height: 3px;
    width: 100%;
    background: var(--primary-color);
    opacity: 1;
    left: 0;
    transform: rotate(0deg);
    transition: .25s ease-in-out;
}

.menu-toggle span:nth-child(1) {
    top: 0;
}

.menu-toggle span:nth-child(2), .menu-toggle span:nth-child(3) {
    top: 10px;
}

.menu-toggle span:nth-child(4) {
    top: 20px;
}

.menu-toggle.open span:nth-child(1),
.menu-toggle.open span:nth-child(4) {
    top: 10px;
    width: 0%;
    left: 50%;
}

.menu-toggle.open span:nth-child(2) {
    transform: rotate(45deg);
}

.menu-toggle.open span:nth-child(3) {
    transform: rotate(-45deg);
}

/* Scroll-Indikator mit CI-Farben */
.scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 50px;
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 15px;
    display: flex;
    justify-content: center;
    z-index: 2;
}

.scroll-indicator::before {
    content: '';
    width: 6px;
    height: 6px;
    background: white;
    margin-top: 8px;
    border-radius: 50%;
    animation: scrollDown 2s infinite;
}

@keyframes scrollDown {
    0% {
        opacity: 0;
        transform: translateY(0);
    }
    40% {
        opacity: 1;
    }
    80% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 0;
    }
}

/* Hero Section mit großen organischen Formen */
.hero {
    background: linear-gradient(135deg, rgba(40,66,97,0.85) 0%, rgba(155,175,191,0.85) 100%), url('forest-canopy.jpg');
    background-position: center;
    background-size: cover;
    color: white;
    padding: 140px var(--spacing-s) 160px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Große organische Formen im Hero - wie im CI-Manual */
.hero::before {
    content: '';
    position: absolute;
    top: 5%;
    right: 3%;
    width: 400px;
    height: 280px;
    background: rgba(154, 175, 191, 0.15); /* Blaugrau wie Visitenkarte */
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    transform: rotate(25deg);
    z-index: 1;
}

.hero::after {
    content: '';
    position: absolute;
    bottom: 8%;
    left: 2%;
    width: 200px;
    height: 140px;
    background: rgba(222, 185, 147, 0.12); /* Beige Akzent */
    border-radius: 55% 45% 40% 60% / 45% 55% 60% 40%;
    transform: rotate(-20deg);
    z-index: 1;
}
.hero h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    margin-bottom: var(--spacing-xl);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: #FFFFFF;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
    position: relative;
    z-index: 2;
    font-family: 'Titillium Web', sans-serif;
}

.hero p {
    font-size: clamp(1rem, 2vw, 1.2rem);
    max-width: 800px;
    margin: 0 auto var(--spacing-m);
    opacity: 0.95;
    position: relative;
    z-index: 2;
    font-family: 'Titillium Web', sans-serif;
    font-weight: 400;
}

/* CI-konforme CTA Buttons */
.cta-button {
    display: inline-block;
    background-color: var(--primary-color);
    color: white !important;
    padding: 15px 40px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
    transition: all var(--transition-time) ease;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    text-align: center;
    font-family: 'Titillium Web', sans-serif;
    box-shadow: var(--medium-shadow);
    position: relative;
    overflow: hidden;
    z-index: 2;
}

.cta-button:hover, .cta-button:focus {
    background-color: rgba(40,66,97,0.9);
    transform: translateY(-2px);
    box-shadow: var(--strong-shadow);
}

.cta-button:active {
    transform: translateY(0);
    box-shadow: var(--medium-shadow);
}

/* Button Ripple Effect */
.cta-button::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.3) 10%, transparent 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(10, 10);
    opacity: 0;
    transition: transform .5s, opacity 1s;
}

.cta-button:active::after {
    transform: scale(0, 0);
    opacity: .3;
    transition: 0s;
}

/* Haupt-Sections mit großen organischen Elementen */
.section {
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: var(--spacing-xxl) var(--spacing-s);
    position: relative;
}

/* Große organische Form zwischen Sections */
.section::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -8%;
    width: 160px;
    height: 110px;
    background: rgba(181, 194, 165, 0.08);
    border-radius: 40% 60% 55% 45% / 60% 40% 45% 55%;
    transform: rotate(-15deg);
    z-index: 0;
}

.about {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    align-items: center;
    position: relative;
}

.about-image {
    height: 500px;
    border-radius: var(--border-radius);
    background-image: url('dr-pullig.jpg');
    background-size: cover;
    background-position: center;
    box-shadow: var(--medium-shadow);
    transition: transform var(--transition-time) ease;
    position: relative;
    overflow: hidden;
}

.about-image:hover {
    transform: scale(1.02);
}

.about-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, transparent 70%, rgba(40,66,97,0.2));
    border-radius: var(--border-radius);
}

.forest-image {
    width: 100%;
    height: 500px;
    border-radius: var(--border-radius);
    object-fit: cover;
    box-shadow: var(--medium-shadow);
    transition: transform var(--transition-time) ease;
}

.forest-image:hover {
    transform: scale(1.02);
}

.about-content h2, .section-title {
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    margin-bottom: var(--spacing-s);
    color: var(--primary-color);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    font-family: 'Titillium Web', sans-serif;
}

.about-content p, .section-text {
    margin-bottom: var(--spacing-s);
    color: var(--text-color);
    font-size: 1.05rem;
    font-family: 'Titillium Web', sans-serif;
    font-weight: 400;
}

/* Spacing-Konsistenz zwischen Sektionen */
.leistungen {
    background-color: white;
    padding: var(--spacing-xxl) var(--spacing-s);
    margin: var(--spacing-xl) 0;
    position: relative;
    overflow: hidden;
}

/* Große organische Formen in Leistungssektionen */
.leistungen::before {
    content: '';
    position: absolute;
    top: 12%;
    left: -10%;
    width: 350px;
    height: 250px;
    background: rgba(181, 194, 165, 0.06);
    border-radius: 50% 70% 40% 60% / 40% 50% 60% 70%;
    transform: rotate(15deg);
    z-index: 0;
}

.leistungen::after {
    content: '';
    position: absolute;
    bottom: 5%;
    right: -6%;
    width: 180px;
    height: 120px;
    background: rgba(222, 185, 147, 0.08);
    border-radius: 65% 35% 50% 50% / 35% 65% 50% 50%;
    transform: rotate(40deg);
    z-index: 0;
}
.leistungen h2 {
    text-align: center;
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    margin-bottom: var(--spacing-xl);
    color: var(--primary-color);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    font-family: 'Titillium Web', sans-serif;
    position: relative;
    z-index: 1;
}

.leistungen-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-xl);
    max-width: var(--content-max-width);
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* Flip Container mit CI-Farben */
.flip-container {
    perspective: 1000px;
    height: 550px;
}

.flipper {
    transition: 0.8s;
    transform-style: preserve-3d;
    position: relative;
    height: 100%;
}

.flip-container:hover .flipper, 
.flip-container:focus-within .flipper, 
.flip-container.hover .flipper {
    transform: rotateY(180deg);
}

.front, .back {
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    padding: var(--spacing-xl);
    border-radius: var(--border-radius);
    box-shadow: var(--medium-shadow);
    border: 1px solid rgba(40,66,97,0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.front {
    z-index: 2;
    transform: rotateY(0deg);
    padding-top: 70px;
    justify-content: center;
}

.back {
    transform: rotateY(180deg);
    padding: var(--spacing-m);
    justify-content: flex-start;
    align-items: flex-start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.flip-container h3 {
    color: var(--primary-color);
    font-size: 1.8rem;
    margin-bottom: var(--spacing-s);
    text-align: center;
    line-height: 1.2;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Titillium Web', sans-serif;
    font-weight: 600;
}

.flip-container p {
    color: var(--text-color);
    line-height: 1.45;
    font-family: 'Titillium Web', sans-serif;
}

.front p {
    margin-top: 0;
    font-size: 1.1rem;
    line-height: 1.5;
    font-weight: 400;
}

.back p {
    text-align: left;
    margin-bottom: 1rem;
    font-size: 0.86rem;
    line-height: 1.5;
    font-weight: 400;
}

/* Flip-Indikator für Mobile */
.flip-indicator {
    position: absolute;
    bottom: 20px;
    width: 100%;
    text-align: center;
    opacity: 0;
}

.flip-icon {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-color: rgba(40,66,97,0.1);
    border-radius: 50%;
    position: relative;
}

.flip-icon::before,
.flip-icon::after {
    content: '';
    position: absolute;
    background-color: var(--primary-color);
    top: 50%;
    left: 50%;
    width: 10px;
    height: 2px;
}

.flip-icon::before {
    transform: translate(-50%, -50%) rotate(45deg);
    margin-left: -4px;
}

.flip-icon::after {
    transform: translate(-50%, -50%) rotate(-45deg);
    margin-left: 4px;
}/* DATEI: style-new.css - KOMPLETTE ÜBERARBEITUNG V2 - TEIL 2 (Fortsetzung) */

/* CSS für "Mein Ansatz" Sektion mit überlappenden Kreisen */
.ansatz-container {
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: var(--spacing-xxl) var(--spacing-s);
    position: relative;
}

/* Überlappende Kreise wie im CI-Manual für Ansatz-Sektion */
.ansatz-container::before {
    content: '';
    position: absolute;
    top: 8%;
    right: -3%;
    width: 200px;
    height: 140px;
    background: rgba(222, 185, 147, 0.12);
    border-radius: 55% 45% 40% 60% / 45% 55% 60% 40%;
    transform: rotate(-20deg);
    z-index: 0;
}

.ansatz-container::after {
    content: '';
    position: absolute;
    top: 3%;
    right: 5%;
    width: 160px;
    height: 110px;
    background: rgba(154, 175, 191, 0.10);
    border-radius: 40% 60% 55% 45% / 60% 40% 45% 55%;
    transform: rotate(-15deg);
    z-index: 0;
}

.ansatz-content {
    text-align: center;
    position: relative;
    z-index: 1;
}

.ansatz-content h2 {
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    margin-bottom: var(--spacing-m);
    color: var(--primary-color);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    font-family: 'Titillium Web', sans-serif;
}

.ansatz-content p {
    margin-bottom: var(--spacing-s);
    color: var(--text-color);
    font-size: 1.05rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    font-family: 'Titillium Web', sans-serif;
    font-weight: 400;
}

.ansatz-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-xl);
    margin-top: var(--spacing-xl);
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.ansatz-box {
    background-color: white;
    padding: var(--spacing-xl);
    border-radius: var(--border-radius);
    box-shadow: var(--medium-shadow);
    text-align: center;
    transition: transform var(--transition-time) ease, box-shadow var(--transition-time) ease;
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
}

/* Kleine organische Form in Ansatz-Boxen */
.ansatz-box::before {
    content: '';
    position: absolute;
    top: -15px;
    right: -15px;
    width: 60px;
    height: 60px;
    background: rgba(181,195,166,0.1);
    border-radius: 50%;
    z-index: 0;
}

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

.ansatz-box.arzt {
    border-color: var(--primary-color);
    border-width: 3px;
}

.ansatz-box.mentor {
    border-color: var(--mentoring-color);
    border-width: 3px;
}

.ansatz-icon {
    font-size: 3rem;
    margin-bottom: var(--spacing-s);
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.ansatz-box h3 {
    font-size: 1.4rem;
    margin-bottom: var(--spacing-s);
    font-weight: 600;
    font-family: 'Titillium Web', sans-serif;
    position: relative;
    z-index: 1;
}

.ansatz-box.arzt h3 {
    color: var(--primary-color);
}

.ansatz-box.mentor h3 {
    color: var(--mentoring-color);
}

.ansatz-box p {
    color: var(--text-color);
    line-height: 1.6;
    margin-bottom: 0;
    font-family: 'Titillium Web', sans-serif;
    font-weight: 400;
    position: relative;
    z-index: 1;
}

/* CSS für Ärztliche Praxis Sektion */
.aerztliche-hinweis {
    max-width: 800px;
    margin: 0 auto 40px auto;
    background: linear-gradient(135deg, rgba(40,66,97,0.08) 0%, rgba(40,66,97,0.05) 100%);
    border: 2px solid var(--primary-color);
    border-radius: var(--border-radius);
    padding: 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.aerztliche-hinweis p {
    margin: 0;
    color: var(--primary-color);
    font-weight: 600;
    font-size: 1rem;
    font-family: 'Titillium Web', sans-serif;
    position: relative;
    z-index: 1;
}

/* Ärztliche Flip-Cards Styling */
.front.aerztlich, .back.aerztlich {
    background: linear-gradient(135deg, rgba(40,66,97,0.03) 0%, rgba(40,66,97,0.01) 100%);
    border-left: 4px solid var(--primary-color);
}

.front.aerztlich h3 {
    color: var(--primary-color);
}

/* Ärztlicher Button */
.cta-button.aerztlich-button {
    background-color: var(--primary-color);
}

.cta-button.aerztlich-button:hover, 
.cta-button.aerztlich-button:focus {
    background-color: rgba(40,66,97,0.9);
}

/* CSS für Mentoring Sektion mit satterer Farbe */
.mentoring-section {
    background-color: white;
    position: relative;
}

/* Große organische Form für Mentoring */
.mentoring-section::before {
    content: '';
    position: absolute;
    top: 20%;
    left: -10%;
    width: 280px;
    height: 280px;
    background: rgba(122,149,166,0.04);
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; transform: rotate(25deg);
    z-index: 0;
}

.mentoring-section h2 {
    color: var(--mentoring-color);
}

.mentoring-hinweis {
    max-width: 800px;
    margin: 0 auto 40px auto;
    background: linear-gradient(135deg, rgba(122,149,166,0.08) 0%, rgba(122,149,166,0.05) 100%);
    border: 2px solid var(--mentoring-color);
    border-radius: var(--border-radius);
    padding: 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.mentoring-hinweis p {
    margin: 0;
    color: var(--mentoring-color);
    font-weight: 600;
    font-size: 1rem;
    font-family: 'Titillium Web', sans-serif;
    position: relative;
    z-index: 1;
}

/* Mentoring Flip-Cards Styling mit satterer Farbe */
.front.mentoring, .back.mentoring {
    background: linear-gradient(135deg, rgba(122,149,166,0.03) 0%, rgba(122,149,166,0.01) 100%);
    border-left: 4px solid var(--mentoring-color);
}

.front.mentoring h3 {
    color: var(--mentoring-color);
}

/* Mentoring Card Content */
.mentoring-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
}

.mentoring-content p {
    text-align: left;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    line-height: 1.5;
    font-family: 'Titillium Web', sans-serif;
    font-weight: 400;
}

.programm-liste {
    list-style: none;
    padding-left: 0;
    margin: 1rem 0;
}

.programm-liste li {
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
    line-height: 1.4;
    display: flex;
    align-items: flex-start;
    font-family: 'Titillium Web', sans-serif;
    font-weight: 400;
}

.programm-liste li::before {
    content: "•";
    color: var(--mentoring-color);
    margin-right: 8px;
    font-weight: 600;
    flex-shrink: 0;
}

/* Elegante Preisgestaltung */
.mentoring-preis {
    margin-top: auto;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(122,149,166,0.2);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.preis-label {
    font-size: 0.8rem;
    color: var(--mentoring-color);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: 'Titillium Web', sans-serif;
}

.preis-wert {
    font-size: 1.1rem;
    color: var(--text-color);
    font-weight: 700;
    font-family: 'Titillium Web', sans-serif;
}

/* Mentoring Button mit satterer Farbe */
.cta-button.mentoring-button {
    background-color: var(--mentoring-color);
}

.cta-button.mentoring-button:hover, 
.cta-button.mentoring-button:focus {
    background-color: rgba(122,149,166,0.9);
}

/* Verbesserte Vortragssektion */
.vortrag-container {
    margin-bottom: var(--spacing-xl);
    position: relative;
}

/* Große organische Form für Vorträge */
.vortrag-container::before {
    content: '';
    position: absolute;
    top: 15%;
    right: -8%;
    width: 240px;
    height: 240px;
    background: rgba(181,195,166,0.05);
    border-radius: 45% 55% 35% 65% / 55% 45% 65% 35%; transform: rotate(-30deg);
    z-index: 0;
}

.vortrag-intro {
    max-width: 800px;
    margin: 0 auto var(--spacing-xl);
    text-align: center;
    position: relative;
    z-index: 1;
}

.vortrag-intro h3 {
    color: var(--primary-color);
    font-size: 1.8rem;
    margin-bottom: var(--spacing-s);
    font-family: 'Titillium Web', sans-serif;
    font-weight: 600;
}

.vortrag-intro p {
    color: var(--text-color);
    margin-bottom: var(--spacing-s);
    font-family: 'Titillium Web', sans-serif;
    font-weight: 400;
}

.themen-container {
    display: flex;
    gap: var(--spacing-xl);
    margin: 0 auto;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.themen-box {
    flex: 1;
    min-width: 300px;
    background: linear-gradient(135deg, rgba(181,195,166,0.08) 0%, rgba(181,195,166,0.03) 100%);
    padding: var(--spacing-l);
    border-radius: var(--border-radius);
    box-shadow: var(--medium-shadow);
    position: relative;
    overflow: hidden;
}

.themen-box h4 {
    color: var(--primary-color);
    font-size: 1.4rem;
    margin-bottom: var(--spacing-m);
    position: relative;
    padding-bottom: 10px;
    text-align: center;
    font-family: 'Titillium Web', sans-serif;
    font-weight: 600;
    z-index: 1;
}

.themen-box h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 2px;
    background-color: var(--primary-color);
}

.themen-box ul {
    list-style: none;
    position: relative;
    z-index: 1;
}

.themen-box li {
    padding: var(--spacing-xs) 0;
    border-bottom: 1px solid rgba(40,66,97,0.1);
    display: flex;
    align-items: flex-start;
    font-family: 'Titillium Web', sans-serif;
    font-weight: 400;
}

.themen-box li::before {
    content: "•";
    color: var(--primary-color);
    margin-right: 10px;
    font-weight: 600;
}

.themen-box li:last-child {
    border-bottom: none;
}

/* Blog-Sektion mit großen organischen Formen */
.blog-section {
    background: linear-gradient(135deg, rgba(181,195,166,0.05) 0%, rgba(222,185,147,0.03) 100%);
    padding: var(--spacing-xl) 0;
    margin: var(--spacing-xl) 0;
    position: relative;
    overflow: hidden;
}

/* Große organische Formen im Blog-Bereich */
.blog-section::before {
    content: '';
    position: absolute;
    top: 6%;
    left: -6%;
    width: 300px;
    height: 200px;
    background: rgba(154, 175, 191, 0.08);
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    transform: rotate(25deg);
    z-index: 0;
}

.blog-section::after {
    content: '';
    position: absolute;
    bottom: 8%;
    right: -8%;
    width: 180px;
    height: 120px;
    background: rgba(181, 194, 165, 0.06);
    border-radius: 40% 60% 55% 45% / 60% 40% 45% 55%;
    transform: rotate(-15deg);
    z-index: 0;
}
.blog-intro {
    max-width: 800px;
    margin: 0 auto var(--spacing-xl);
    text-align: center;
    color: var(--text-color);
    font-size: 1.1rem;
    font-family: 'Titillium Web', sans-serif;
    font-weight: 400;
    position: relative;
    z-index: 1;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
    position: relative;
    z-index: 1;
}

.blog-post {
    background-color: white;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--light-shadow);
    transition: transform var(--transition-time) ease, box-shadow var(--transition-time) ease;
    border: 1px solid rgba(40,66,97,0.08);
}

.blog-post:hover {
    transform: translateY(-5px);
    box-shadow: var(--medium-shadow);
}

.blog-image {
    height: 200px;
    background-size: cover;
    background-position: center;
}

.blog-content {
    padding: var(--spacing-m);
}

.blog-content h3 {
    font-size: 1.4rem;
    margin-bottom: 5px;
    color: var(--primary-color);
    font-family: 'Titillium Web', sans-serif;
    font-weight: 600;
}

.blog-meta {
    font-size: 0.85rem;
    color: var(--text-color);
    margin-bottom: var(--spacing-s);
    font-family: 'Titillium Web', sans-serif;
    font-weight: 400;
    opacity: 0.8;
}

.blog-content p {
    color: var(--text-color);
    margin-bottom: var(--spacing-s);
    font-family: 'Titillium Web', sans-serif;
    font-weight: 400;
}

.blog-more {
    display: inline-block;
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: none;
    position: relative;
    font-family: 'Titillium Web', sans-serif;
}

.blog-more::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--primary-color);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--transition-time) ease;
}

.blog-more:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.blog-footer {
    text-align: center;
    position: relative;
    z-index: 1;
}

.blog-archive-link {
    display: inline-block;
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
    padding: 10px 20px;
    border: 2px solid var(--primary-color);
    border-radius: 5px;
    transition: background-color var(--transition-time) ease, color var(--transition-time) ease;
    font-family: 'Titillium Web', sans-serif;
}

.blog-archive-link:hover {
    background-color: var(--primary-color);
    color: white;
}

/* Buch-Sektion mit großer organischer Form */
.buch-section {
    background: linear-gradient(135deg, rgba(222,185,147,0.12) 0%, rgba(222,185,147,0.08) 100%);
    border-radius: var(--border-radius);
    padding: var(--spacing-xl);
    margin: var(--spacing-xl) auto;
    max-width: var(--content-max-width);
    border: 1px solid rgba(222,185,147,0.2);
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
}

/* Große organische Form im Buch-Bereich */
.buch-section::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -60px;
    width: 200px;
    height: 200px;
    background: rgba(222,185,147,0.12);
    border-radius: 50% 70% 40% 60% / 40% 50% 60% 70%; transform: rotate(15deg);
    z-index: 0;
}

.buch-container {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--spacing-xl);
    align-items: center;
    position: relative;
    z-index: 1;
}

.buch-cover {
    position: relative;
}

.buch-image {
    width: 150px;
    height: auto;
    border-radius: 8px;
    box-shadow: var(--medium-shadow);
    transition: transform var(--transition-time) ease;
}

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

.buch-content h3 {
    color: var(--primary-color);
    font-size: 1.6rem;
    margin-bottom: 0.5rem;
    font-weight: 700;
    font-family: 'Titillium Web', sans-serif;
}

.buch-untertitel {
    color: var(--mentoring-color);
    font-style: italic;
    font-size: 1.1rem;
    margin-bottom: var(--spacing-s);
    font-weight: 500;
    font-family: 'Titillium Web', sans-serif;
}

.buch-content p {
    color: var(--text-color);
    margin-bottom: var(--spacing-s);
    line-height: 1.6;
    font-family: 'Titillium Web', sans-serif;
    font-weight: 400;
}

.buch-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: var(--primary-color);
    color: white;
    padding: 12px 24px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    transition: all var(--transition-time) ease;
    margin-top: var(--spacing-s);
    box-shadow: var(--medium-shadow);
    font-family: 'Titillium Web', sans-serif;
}

.buch-button:hover {
    background-color: rgba(40,66,97,0.9);
    transform: translateY(-2px);
    box-shadow: var(--strong-shadow);
    color: white;
}

.buch-icon {
    font-size: 1.2rem;
}

/* Meditations-Geschenk Sektion */
.meditation-geschenk-section {
    background: linear-gradient(135deg, rgba(122,149,166,0.08) 0%, rgba(122,149,166,0.05) 100%);
    border-radius: var(--border-radius);
    padding: var(--spacing-xl);
    margin: var(--spacing-xl) auto;
    max-width: var(--content-max-width);
    border: 1px solid rgba(122,149,166,0.1);
    position: relative;
    overflow: hidden;
}

.meditation-geschenk-section::after {
    content: '';
    position: absolute;
    bottom: -40px;
    left: -50px;
    width: 180px;
    height: 180px;
    background: rgba(122,149,166,0.08);
    border-radius: 55% 45% 40% 60% / 45% 55% 60% 40%;
transform: rotate(-20deg);
    z-index: 0;
}

.meditation-container {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--spacing-xl);
    align-items: center;
    position: relative;
    z-index: 1;
}

.meditation-cover {
    position: relative;
}

.meditation-image {
    width: 150px;
    height: 200px;
    border-radius: 8px;
    object-fit: cover;
    box-shadow: var(--medium-shadow);
    transition: transform var(--transition-time) ease;
}

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

.meditation-content h3 {
    color: var(--mentoring-color);
    font-size: 1.6rem;
    margin-bottom: 0.5rem;
    font-weight: 700;
    font-family: 'Titillium Web', sans-serif;
}

.meditation-untertitel {
    color: var(--primary-color);
    font-style: italic;
    font-size: 1.1rem;
    margin-bottom: var(--spacing-s);
    font-weight: 500;
    font-family: 'Titillium Web', sans-serif;
}

.meditation-content p {
    color: var(--text-color);
    margin-bottom: var(--spacing-s);
    line-height: 1.6;
    font-family: 'Titillium Web', sans-serif;
    font-weight: 400;
}

.meditation-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: var(--mentoring-color);
    color: white;
    padding: 12px 24px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    transition: all var(--transition-time) ease;
    margin-top: var(--spacing-s);
    box-shadow: var(--medium-shadow);
    font-family: 'Titillium Web', sans-serif;
}

.meditation-button:hover {
    background-color: rgba(122,149,166,0.9);
    transform: translateY(-2px);
    box-shadow: var(--strong-shadow);
    color: white;
}

.meditation-play-icon {
    font-size: 1.2rem;
}/* DATEI: style-new.css - KOMPLETTE ÜBERARBEITUNG V2 - TEIL 3 (Fortsetzung) */

/* Newsletter mit CI-konformen Farben und organischer Form */
.newsletter {
    background: linear-gradient(135deg, rgba(40,66,97,0.95) 0%, rgba(122,149,166,0.95) 100%);
    color: white;
    padding: var(--spacing-xl) var(--spacing-s);
    margin-bottom: var(--spacing-xl);
    border-radius: var(--border-radius);
    text-align: center;
    box-shadow: var(--medium-shadow);
    border: 1px solid rgba(40,66,97,0.1);
    position: relative;
    overflow: hidden;
}

/* Große organische Form im Newsletter */
.newsletter::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -70px;
    width: 160px;
    height: 110px;
    background: rgba(255,255,255,0.08);
    border-radius: 40% 60% 55% 45% / 60% 40% 45% 55%;
    transform: rotate(-15deg);
    z-index: 0;
}

.newsletter h3 {
    font-size: clamp(1.4rem, 2vw, 1.8rem);
    margin-bottom: var(--spacing-s);
    color: white;
    font-weight: 700;
    font-family: 'Titillium Web', sans-serif;
    position: relative;
    z-index: 1;
}

.newsletter p {
    margin-bottom: var(--spacing-l);
    color: rgba(255,255,255,0.95);
    font-family: 'Titillium Web', sans-serif;
    font-weight: 400;
    position: relative;
    z-index: 1;
}

.newsletter-form {
    display: flex;
    gap: var(--spacing-xs);
    max-width: 500px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.newsletter-form input {
    flex: 1;
    padding: 12px;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 5px;
    font-family: 'Titillium Web', sans-serif;
    background-color: rgba(255,255,255,0.1);
    color: white;
    transition: background-color var(--transition-time) ease, border-color var(--transition-time) ease;
}

.newsletter-form input:focus {
    background-color: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.5);
    outline: none;
}

.newsletter-form input::placeholder {
    color: rgba(255,255,255,0.7);
}

.newsletter-form button {
    padding: 12px 25px;
    border: none;
    background-color: var(--primary-color);
    color: white;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
    transition: background-color var(--transition-time) ease;
    white-space: nowrap;
    font-family: 'Titillium Web', sans-serif;
}

.newsletter-form button:hover, 
.newsletter-form button:focus {
    background-color: rgba(40,66,97,0.8);
    transform: translateY(-2px);
}

/* Verbesserte Kontakt-Sektion mit großen organischen Formen */
.kontakt {
    background: linear-gradient(135deg, rgba(40,66,97,0.95) 0%, rgba(122,149,166,0.95) 100%);
    color: white;
    text-align: center;
    padding: var(--spacing-xxl) var(--spacing-s);
    position: relative;
    overflow: hidden;
}

/* Große organische Formen im Kontakt-Bereich */
.kontakt::before {
    content: '';
    position: absolute;
    top: 8%;
    left: -8%;
    width: 220px;
    height: 150px;
    background: rgba(255,255,255,0.05);
    border-radius: 55% 45% 40% 60% / 45% 55% 60% 40%;
    transform: rotate(-20deg);
    z-index: 0;
}

.kontakt::after {
    content: '';
    position: absolute;
    bottom: 12%;
    right: -10%;
    width: 180px;
    height: 120px;
    background: rgba(255,255,255,0.03);
    border-radius: 40% 60% 55% 45% / 60% 40% 45% 55%;
    transform: rotate(15deg);
    z-index: 0;
}

.kontakt h2 {
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    margin-bottom: var(--spacing-m);
    color: white;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    font-family: 'Titillium Web', sans-serif;
    position: relative;
    z-index: 1;
}

.kontakt-form {
    max-width: 600px;
    margin: 0 auto;
    margin-top: 30px;
    position: relative;
    z-index: 1;
}

.kontakt-form input,
.kontakt-form textarea {
    width: 100%;
    padding: 15px;
    margin-bottom: var(--spacing-s);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 5px;
    font-family: 'Titillium Web', sans-serif;
    background-color: rgba(255,255,255,0.1);
    color: white;
    transition: background-color var(--transition-time) ease, border-color var(--transition-time) ease;
}

.kontakt-form input:focus,
.kontakt-form textarea:focus {
    background-color: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.5);
    outline: none;
}

.kontakt-form input::placeholder,
.kontakt-form textarea::placeholder {
    color: rgba(255,255,255,0.7);
}

.kontakt-form textarea {
    height: 150px;
    resize: vertical;
}

/* Verbesserte Fehler- und Erfolgs-Benachrichtigungen */
.form-notification {
    padding: 15px;
    margin-bottom: var(--spacing-s);
    border-radius: 5px;
    text-align: center;
    display: none;
    font-family: 'Titillium Web', sans-serif;
    font-weight: 500;
}

.form-notification.success {
    background-color: rgba(76, 175, 80, 0.2);
    border: 1px solid rgba(76, 175, 80, 0.5);
    color: #4CAF50;
}

.form-notification.error {
    background-color: rgba(244, 67, 54, 0.2);
    border: 1px solid rgba(244, 67, 54, 0.5);
    color: #F44336;
}

/* Footer mit CI-Farben und organischer Form */
footer {
    background-color: var(--primary-color);
    color: white;
    text-align: center;
    padding: var(--spacing-xl) var(--spacing-s);
    margin-top: var(--spacing-xl);
    position: relative;
    overflow: hidden;
}

/* Große organische Form im Footer */
footer::before {
    content: '';
    position: absolute;
    top: -60px;
    left: 8%;
    width: 200px;
    height: 140px;
    background: rgba(255,255,255,0.04);
    border-radius: 50% 70% 40% 60% / 40% 50% 60% 70%;
    transform: rotate(15deg);
    z-index: 0;
}footer::after {
    content: '';
    position: absolute;
    bottom: 20px;
    left: 50px;
    width: 320px;
    height: 220px;
    background: rgba(154, 175, 191, 0.12);
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    transform: rotate(25deg);
    z-index: 0;
}

footer > * {
    position: relative;
    z-index: 1;
}

footer p, footer div {
    font-family: 'Titillium Web', sans-serif;
    font-weight: 400;
}

footer h3 {
    font-family: 'Titillium Web', sans-serif;
    font-weight: 600;
}

.social-links {
    margin-top: var(--spacing-m);
    display: flex;
    justify-content: center;
    gap: var(--spacing-s);
    flex-wrap: wrap;
}

.social-link {
    color: white;
    text-decoration: none;
    font-size: 1.5rem;
    transition: opacity var(--transition-time) ease, transform var(--transition-time) ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.1);
}

.social-link:hover, .social-link:focus {
    opacity: 0.8;
    transform: translateY(-3px);
    background-color: rgba(255,255,255,0.2);
}

.social-link svg {
    width: 24px;
    height: 24px;
}

/* Scroll-to-Top Button */
.scroll-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 40px;
    height: 40px;
    background-color: var(--primary-color);
    color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: var(--medium-shadow);
    transition: opacity 0.3s ease, transform 0.3s ease;
    opacity: 0;
    transform: translateY(20px);
    z-index: 999;
    border: none;
}

.scroll-top.visible {
    opacity: 1;
    transform: translateY(0);
}

.scroll-top:hover, .scroll-top:focus {
    background-color: rgba(40,66,97,0.9);
}

/* Vollständige Blog-Post-Ansicht */
.blog-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(40,66,97,0.85);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow-y: auto;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.blog-modal.open {
    opacity: 1;
    visibility: visible;
}

.blog-modal-content {
    background-color: white;
    border-radius: 10px;
    max-width: 800px;
    width: 100%;
    padding: 40px;
    margin: 40px auto;
    position: relative;
    box-shadow: var(--strong-shadow);
}

.blog-modal-content h2 {
    color: var(--primary-color);
    margin-bottom: 10px;
    font-size: 2rem;
    font-family: 'Titillium Web', sans-serif;
    font-weight: 700;
}

.blog-modal-content .blog-meta {
    font-family: 'Titillium Web', sans-serif;
    font-weight: 400;
}

.blog-full-content p {
    margin-bottom: 20px;
    line-height: 1.7;
    color: var(--text-color);
    font-family: 'Titillium Web', sans-serif;
    font-weight: 400;
}

.blog-full-content h3 {
    color: var(--mentoring-color);
    margin: 30px 0 15px;
    font-size: 1.4rem;
    font-family: 'Titillium Web', sans-serif;
    font-weight: 600;
}

.close-blog {
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
    display: block;
    margin: 30px auto 0;
    transition: background-color 0.3s ease;
    font-family: 'Titillium Web', sans-serif;
}

.close-blog:hover {
    background-color: rgba(40,66,97,0.9);
}

/* Cookie Banner mit CI-Farben */
.cookie-banner {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(40,66,97,0.95);
    color: white;
    padding: 15px;
    z-index: 9999;
    font-family: 'Titillium Web', sans-serif;
}

.cookie-banner p {
    font-weight: 400;
}

.cookie-banner button {
    font-family: 'Titillium Web', sans-serif;
    font-weight: 600;
}

/* Legal Modals mit CI-Farben */
.legal-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(40,66,97,0.8);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow-y: auto;
    padding: 20px;
}

.legal-modal-content {
    background-color: white;
    border-radius: 10px;
    max-width: 800px;
    width: 100%;
    padding: 40px;
    margin: 40px auto;
    position: relative;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    box-shadow: var(--strong-shadow);
}

.legal-modal-close {
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: #666;
    line-height: 1;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.legal-modal h2 {
    color: var(--primary-color);
    margin-bottom: 30px;
    font-size: 2rem;
    padding-right: 40px;
    font-family: 'Titillium Web', sans-serif;
    font-weight: 700;
}

.legal-content {
    line-height: 1.6;
    color: var(--text-color);
    font-family: 'Titillium Web', sans-serif;
    font-weight: 400;
}

.legal-content h3 {
    color: var(--primary-color);
    margin-top: 30px;
    margin-bottom: 15px;
    font-size: 1.3rem;
    font-family: 'Titillium Web', sans-serif;
    font-weight: 600;
}

.legal-content p {
    margin-bottom: 15px;
}

.legal-content ul {
    margin: 15px 0;
    padding-left: 20px;
}

.legal-content li {
    margin-bottom: 8px;
}

.legal-content a {
    color: var(--mentoring-color);
    text-decoration: none;
    word-break: break-all;
}

.legal-content a:hover {
    text-decoration: underline;
}

.legal-modal-close-bottom {
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
    display: block;
    margin: 30px auto 0;
    transition: background-color 0.3s ease;
    font-family: 'Titillium Web', sans-serif;
}

.legal-modal-close-bottom:hover {
    background-color: rgba(40,66,97,0.9);
}

/* Kosten-Popup mit CI-Farben */
.kosten-popup {
    font-family: 'Titillium Web', sans-serif;
}

.kosten-popup-content h2 {
    color: var(--primary-color);
    font-family: 'Titillium Web', sans-serif;
    font-weight: 700;
}

.kosten-popup-content p {
    font-family: 'Titillium Web', sans-serif;
    font-weight: 400;
    color: var(--text-color);
}

.kosten-popup-content button {
    background-color: var(--primary-color);
    font-family: 'Titillium Web', sans-serif;
    font-weight: 600;
}

.kosten-popup-content button:hover {
    background-color: rgba(40,66,97,0.9);
}

/* CSS für bessere Responsivität */
@media (max-width: 992px) {
    .about, #heilung > .about {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-l);
    }
    
    .themen-container {
        flex-direction: column;
    }
    
    /* Organische Formen bei mittleren Bildschirmen reduzieren */
    .organic-shape-large-beige,
    .organic-shape-large-green,
    .organic-shape-large-blue {
        width: 200px;
        height: 200px;
    }
    
    .hero::before,
    .hero::after {
        width: 240px;
        height: 240px;
    }
}

@media (max-width: 768px) {
    .header-logo {
        width: 55px;
        height: 55px;
        margin-right: 10px;
    }
    
    .menu-toggle {
        display: block;
    }/* Hero-Kiesel für Mobile optimieren */
    .hero::before {
        top: 10%;
        right: -20px;
        width: 180px;
        height: 120px;
        opacity: 0.8;
    }

    .hero::after {
        bottom: 15%;
        left: -30px;
        width: 120px;
        height: 80px;
        opacity: 0.7;
    }

    .nav-links {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        height: 100vh;
        width: 70%;
        max-width: 300px;
        background-color: white;
        flex-direction: column;
        padding: 80px var(--spacing-m) var(--spacing-m);
        transform: translateX(100%);
        transition: transform 0.3s ease;
        box-shadow: -5px 0 15px rgba(40,66,97,0.1);
        z-index: 1000;
        align-items: flex-start;
        overflow-y: auto;
    }

    .nav-links.active {
        transform: translateX(0);
    }

    .about, #heilung > .about {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }
    
    .about-image {
        height: 350px;
        margin: 0 auto;
        width: 100%;
    }
    
    .forest-image {
        height: 350px;
        margin: 0 auto;
    }
    
    .hero h1 {
        font-size: 2rem;
    }
    
    .section {
        padding: 60px var(--spacing-s);
    }

    .newsletter-form {
        flex-direction: column;
    }

    .newsletter-form button {
        width: 100%;
    }

    .social-links {
        gap: 15px;
    }
    
    .blog-grid {
        grid-template-columns: 1fr;
    }
    
    .blog-modal-content {
        padding: 20px;
        margin: 20px auto;
    }
    
    /* Scroll-Top-Button auf Mobilgeräten immer sichtbar */
    .scroll-top {
        opacity: 0.7;
        transform: translateY(0);
        bottom: 15px;
        right: 15px;
    }
    
    .ansatz-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-m);
    }
    
    .ansatz-box {
        padding: var(--spacing-m);
    }
    
    .aerztliche-hinweis {
        margin: 0 20px 30px 20px;
        padding: 15px;
    }
    
    .aerztliche-hinweis p {
        font-size: 0.9rem;
    }
    
    .mentoring-hinweis {
        margin: 0 20px 30px 20px;
        padding: 15px;
    }
    
    .mentoring-hinweis p {
        font-size: 0.9rem;
    }
    
    .mentoring-content p,
    .programm-liste li {
        font-size: 0.85rem;
    }
    
    .back.mentoring {
        padding: 20px 15px;
    }
    
    /* Mobile Fix: Nur Transformationsprogramm-Box höher machen */
    #mentoring .leistungen-grid .flip-container:last-child {
        height: 740px;
    }
    
    #mentoring .leistungen-grid .flip-container:last-child .flipper {
        height: 740px;
    }
    
    #mentoring .leistungen-grid .flip-container:last-child .front,
    #mentoring .leistungen-grid .flip-container:last-child .back {
        height: 740px;
    }
    
    /* Buch-Sektion Mobile Fix */
    .buch-container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: var(--spacing-m);
    }
    
    .buch-image {
        width: 120px;
        margin: 0 auto;
    }
    
    .buch-section {
        padding: var(--spacing-m);
        margin: var(--spacing-m) 20px;
        max-width: calc(100vw - 40px);
        box-sizing: border-box;
    }
    
    .buch-content {
        text-align: center;
    }
    
    .buch-content h3 {
        font-size: 1.4rem;
    }
    
    .buch-button {
        width: 100%;
        justify-content: center;
        max-width: 280px;
        margin: var(--spacing-s) auto 0;
    }
    
    /* Meditation Mobile Fix */
    .meditation-container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: var(--spacing-m);
    }
    
    .meditation-image {
        width: 120px;
        height: 160px;
        margin: 0 auto;
    }
    
    .meditation-geschenk-section {
        padding: var(--spacing-m);
        margin: var(--spacing-m) auto;
    }
    
    .meditation-content h3 {
        font-size: 1.4rem;
    }
    
    .meditation-button {
        width: 100%;
        justify-content: center;
    }
   
}

@media (max-width: 480px) {
    .header-logo {
        width: 50px;
        height: 50px;
        margin-right: 8px;
    }
    
    /* Weitere Reduzierung der organischen Formen */
    .hero::before,
    .hero::after {
        display: none;
    }
    
    .organic-shape-large-beige,
    .organic-shape-large-green,
    .organic-shape-large-blue {
        opacity: 0.2;
        width: 100px;
        height: 100px;
    }
}

/* Touch-Geräte */
@media (hover: none) {
    .flip-container {
        cursor: pointer;
    }
    
    .flipper {
        transition: 0.8s;
        transform-style: preserve-3d;
    }
    
    .flip-indicator {
        opacity: 1;
        animation: pulse 2s infinite;
    }
    
    .flip-container.touch .flipper {
        transform: rotateY(180deg);
    }
}

@keyframes pulse {
    0% {
        transform: scale(0.95);
        opacity: 0.7;
    }
    50% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(0.95);
        opacity: 0.7;
    }
}

/* Größere Mobilgeräte und Tablets */
@media (min-width: 769px) and (max-width: 1024px) {
    .leistungen-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
    
    .section {
        padding: var(--spacing-xl) var(--spacing-s);
    }
    
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Organische Formen für Tablets anpassen */
    .organic-shape-large-beige,
    .organic-shape-large-green,
    .organic-shape-large-blue {
        width: 220px;
        height: 220px;
    }
}

/* High-DPI Screens */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .hero {
        background-image: linear-gradient(135deg, rgba(40,66,97,0.85) 0%, rgba(122,149,166,0.85) 100%), url('forest-canopy-2x.jpg');
    }
}/* Gestapelte Kieselsteine Icon */
.stacked-stones {
    position: relative;
    width: 48px;
    height: 48px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}

.stone {
    border-radius: 50%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* Stein 1 (unten, größter - wie auf dem Foto) */
.stone-1 {
    width: 38px;
    height: 14px;
    background: linear-gradient(135deg, #a5a5a5 0%, #979797 100%);
    bottom: 0px;
    border-radius: 45% / 35%;
    transform: translateX(-50%) rotate(-2deg);
}

/* Stein 2 (deutlich kleiner) */
.stone-2 {
    width: 30px;
    height: 12px;
    background: linear-gradient(135deg, #8a8a8a 0%, #7c7c7c 100%);
    bottom: 10px;
    border-radius: 55% / 45%;
    transform: translateX(-50%) rotate(3deg);
}

/* Stein 3 (mittlere Größe, heller) */
.stone-3 {
    width: 26px;
    height: 11px;
    background: linear-gradient(135deg, #b8b8b8 0%, #aaaaaa 100%);
    bottom: 19px;
    border-radius: 50% / 42%;
    transform: translateX(-50%) rotate(-1deg);
}

/* Stein 4 (kleiner Sprung) */
.stone-4 {
    width: 22px;
    height: 9px;
    background: linear-gradient(135deg, #959595 0%, #878787 100%);
    bottom: 27px;
    border-radius: 48% / 38%;
    transform: translateX(-50%) rotate(2deg);
}

/* Stein 5 (oben, sehr klein und rund) */
.stone-5 {
    width: 14px;
    height: 7px;
    background: linear-gradient(135deg, #c2c2c2 0%, #b4b4b4 100%);
    bottom: 34px;
    border-radius: 60% / 50%;
    transform: translateX(-50%) rotate(-1deg);
}

/* Schatten für 3D-Effekt */
.stone {
    box-shadow: 
        0 1px 3px rgba(0,0,0,0.2),
        inset 0 1px 1px rgba(255,255,255,0.3);
}

/* Größenvarianten */
.stacked-stones.small {
    width: 24px;
    height: 24px;
    display: inline-flex;
    vertical-align: middle;
}

.small .stone-1 { width: 18px; height: 7px; bottom: 0px; transform: translateX(-50%) rotate(-2deg); }
.small .stone-2 { width: 15px; height: 6px; bottom: 5px; transform: translateX(-50%) rotate(3deg); }
.small .stone-3 { width: 12px; height: 5px; bottom: 9px; transform: translateX(-50%) rotate(-1deg); }
.small .stone-4 { width: 10px; height: 4px; bottom: 13px; transform: translateX(-50%) rotate(2deg); }
.small .stone-5 { width: 8px; height: 3px; bottom: 16px; transform: translateX(-50%) rotate(-1deg); }
.stacked-stones.large {
    width: 60px;
    height: 60px;
}

.large .stone-1 { width: 48px; height: 18px; bottom: 0px; transform: translateX(-50%) rotate(-2deg); }
.large .stone-2 { width: 38px; height: 15px; bottom: 13px; transform: translateX(-50%) rotate(3deg); }
.large .stone-3 { width: 33px; height: 14px; bottom: 25px; transform: translateX(-50%) rotate(-1deg); }
.large .stone-4 { width: 28px; height: 12px; bottom: 36px; transform: translateX(-50%) rotate(2deg); }
.large .stone-5 { width: 18px; height: 9px; bottom: 45px; transform: translateX(-50%) rotate(-1deg); }/* CI-KONFORME DESIGN-VERBESSERUNGEN - ZUM ANHÄNGEN AN BESTEHENDE style-new.css */

/* 1. ZUSÄTZLICHE CI-VARIABLEN (ergänzen die bestehenden) */
:root {
    /* Elegante Schatten - CI-konform */
    --shadow-subtle: 0 1px 3px rgba(40,66,97,0.08), 0 4px 8px rgba(40,66,97,0.04);
    --shadow-elegant: 0 4px 12px rgba(40,66,97,0.08), 0 8px 16px rgba(40,66,97,0.06);
    --shadow-premium: 0 8px 16px rgba(40,66,97,0.12), 0 16px 24px rgba(40,66,97,0.08);
    
    /* Elegante Timing-Funktionen */
    --ease-elegant: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-smooth: cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* 2. VERBESSERTE TYPOGRAFIE */
body {
    font-feature-settings: "liga" on, "kern" on !important;
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    letter-spacing: 0.01em !important;
}

h1, h2, h3, h4 {
    font-feature-settings: "liga" on, "kern" on !important;
    letter-spacing: -0.02em !important;
    line-height: 1.2 !important;
}

p {
    line-height: 1.7 !important;
    hyphens: auto;
}

/* 3. MICRO-ANIMATIONEN */
@keyframes breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

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

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

/* 4. SCROLL-ANIMATIONEN FÜR SECTIONS */
.section-animate {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s var(--ease-elegant);
}

.section-animate.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* 5. VERBESSERTE HERO-SECTION */
.hero::before {
    animation: floatGentle 8s ease-in-out infinite !important;
}

.hero::after {
    animation: floatGentle 12s ease-in-out infinite reverse !important;
}

/* 6. ELEGANTE CTA-BUTTONS */
.cta-button {
    transition: all 0.4s var(--ease-elegant) !important;
    box-shadow: var(--shadow-elegant) !important;
    border-radius: 8px !important;
    position: relative;
    overflow: hidden;
}

.cta-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.6s var(--ease-smooth);
}

.cta-button:hover::before {
    left: 100%;
}

.cta-button:hover, .cta-button:focus {
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-premium) !important;
    animation: breathe 2s ease-in-out infinite;
}

/* 7. VERFEINERTE FLIP-CARDS */
.flip-container {
    transition: transform 0.3s var(--ease-elegant) !important;
}

.flip-container:hover {
    transform: translateY(-4px) !important;
}

.flipper {
    transition: transform 0.7s var(--ease-elegant) !important;
}

.front, .back {
    box-shadow: var(--shadow-elegant) !important;
    border: 1px solid rgba(40,66,97,0.06) !important;
    transition: all 0.3s var(--ease-smooth) !important;
}

/* 8. STACKED STONES - KEINE SCHIEFEN BEWEGUNGEN */
.stacked-stones .stone {
    transition: transform 0.3s var(--ease-elegant) !important;
}

/* Entfernt die schiefen Animationen, behält nur sanfte Y-Bewegung */
.ansatz-icon:hover .stacked-stones .stone {
    transform: translateX(-50%) translateY(-1px) !important;
}

/* 9. VERBESSERTE NAVIGATION */
nav {
    backdrop-filter: blur(10px) !important;
    background-color: rgba(255,255,255,0.95) !important;
    border-bottom: 1px solid rgba(40,66,97,0.08) !important;
}

.nav-links a {
    position: relative;
    transition: all 0.3s var(--ease-elegant) !important;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--primary-color);
    transition: all 0.4s var(--ease-elegant);
    transform: translateX(-50%);
}

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

/* 10. BLOG-CARDS VERBESSERUNG */
.blog-post {
    transition: all 0.4s var(--ease-elegant) !important;
    border: 1px solid rgba(40,66,97,0.06) !important;
    background: rgba(255,255,255,0.98) !important;
}

.blog-post:hover {
    transform: translateY(-6px) scale(1.01) !important;
    box-shadow: var(--shadow-premium) !important;
}

/* 11. VERBESSERTE FORMULARE */
.kontakt-form input,
.kontakt-form textarea,
.newsletter-form input {
    transition: all 0.3s var(--ease-elegant) !important;
    border-radius: 6px !important;
}

.kontakt-form input:focus,
.kontakt-form textarea:focus,
.newsletter-form input:focus {
    transform: translateY(-1px) !important;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.1) !important;
}

/* 12. SOCIAL LINKS VERBESSERUNG */
.social-link {
    transition: all 0.3s var(--ease-elegant) !important;
    backdrop-filter: blur(5px) !important;
}

.social-link:hover {
    transform: translateY(-3px) scale(1.1) !important;
    background-color: rgba(255,255,255,0.25) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

/* 13. ORGANISCHE FORMEN - CI-KONFORM */
.hero::before {
    background: rgba(154,175,191,0.15) !important; /* CI-02 */
}

.hero::after {
    background: rgba(222,185,147,0.12) !important; /* CI-08 */
}

.section::before {
    background: rgba(181,194,165,0.08) !important; /* CI-05 */
}

.leistungen::before {
    background: rgba(181,194,165,0.06) !important; /* CI-05 */
}

.leistungen::after {
    background: rgba(222,185,147,0.08) !important; /* CI-08 */
}

/* 14. LOADING STATES */
@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.loading-shimmer {
    position: relative;
    overflow: hidden;
}

.loading-shimmer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    animation: shimmer 2s infinite;
}

/* 15. MOBILE OPTIMIERUNGEN */
@media (max-width: 768px) {
    .hero::before,
    .hero::after {
        animation-duration: 15s !important;
        opacity: 0.5 !important;
    }
    
    .section::before,
    .leistungen::before,
    .leistungen::after {
        opacity: 0.3 !important;
    }
}

/* 16. REDUCED MOTION SUPPORT */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* 17. PERFORMANCE OPTIMIERUNGEN */
.flip-container,
.blog-post,
.cta-button,
.social-link {
    will-change: transform;
}

/* 18. ACCESSIBILITY VERBESSERUNGEN */
.cta-button:focus,
.flip-container:focus,
.nav-links a:focus {
    outline: 2px solid var(--primary-color) !important;
    outline-offset: 2px !important;
}

/* 19. HIGH-DPI OPTIMIERUNGEN */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .hero,
    .about-image,
    .forest-image {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}/* FIX FÜR SCHIEFE STACKED STONES - ANS ENDE DER CSS ANHÄNGEN */

/* Überschreibt die schiefen Rotationen aus der ursprünglichen CSS */
.stone-1 {
    transform: translateX(-50%) rotate(0deg) !important; /* Entfernt -2deg */
}

.stone-2 {
    transform: translateX(-50%) rotate(0deg) !important; /* Entfernt 3deg */
}

.stone-3 {
    transform: translateX(-50%) rotate(0deg) !important; /* Entfernt -1deg */
}

.stone-4 {
    transform: translateX(-50%) rotate(0deg) !important; /* Entfernt 2deg */
}

.stone-5 {
    transform: translateX(-50%) rotate(0deg) !important; /* Entfernt -1deg */
}

/* Auch für die Small-Varianten */
.small .stone-1 { 
    transform: translateX(-50%) rotate(0deg) !important; 
}

.small .stone-2 { 
    transform: translateX(-50%) rotate(0deg) !important; 
}

.small .stone-3 { 
    transform: translateX(-50%) rotate(0deg) !important; 
}

.small .stone-4 { 
    transform: translateX(-50%) rotate(0deg) !important; 
}

.small .stone-5 { 
    transform: translateX(-50%) rotate(0deg) !important; 
}

/* Und für die Large-Varianten */
.large .stone-1 { 
    transform: translateX(-50%) rotate(0deg) !important; 
}

.large .stone-2 { 
    transform: translateX(-50%) rotate(0deg) !important; 
}

.large .stone-3 { 
    transform: translateX(-50%) rotate(0deg) !important; 
}

.large .stone-4 { 
    transform: translateX(-50%) rotate(0deg) !important; 
}

.large .stone-5 { 
    transform: translateX(-50%) rotate(0deg) !important; 
}

/* Hover-Effekt ohne Rotation */
.ansatz-icon:hover .stone-1,
.ansatz-icon:hover .stone-2,
.ansatz-icon:hover .stone-3,
.ansatz-icon:hover .stone-4,
.ansatz-icon:hover .stone-5 {
    transform: translateX(-50%) translateY(-1px) !important;
}/* FINALE VERBESSERUNGEN - KOMPLETT UND SAUBER */

/* 1. MENTORING-KÄSTEN: TOUCH-FOCUS-RAHMEN IN MENTORING-BLAU */
.flip-container.mentoring:focus,
.flip-container .mentoring:focus {
    outline: 2px solid #9aafbf !important; /* CI-02 Mentoring-Blau */
    outline-offset: 2px !important;
}

/* Für alle Mentoring-Flip-Container */
#mentoring .flip-container:focus {
    outline: 2px solid #9aafbf !important; /* CI-02 Mentoring-Blau */
    outline-offset: 2px !important;
}

/* 2. MEDITATION-BUTTON: NEUE FARBE - SANFTES GRÜNGRAU */
.meditation-button {
    background-color: #b5c2a5 !important; /* CI-05 Grüngrau */
    transition: all 0.4s var(--ease-elegant) !important;
    box-shadow: var(--shadow-elegant) !important;
}

.meditation-button:hover {
    background-color: rgba(181,194,165,0.9) !important; /* Hover-Effekt mit CI-05 */
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-premium) !important;
    animation: breathe 2s ease-in-out infinite !important;
}

/* 3. NEWSLETTER-CTA VERBESSERUNGEN */
.newsletter {
    background: linear-gradient(135deg, rgba(40,66,97,0.96) 0%, rgba(122,149,166,0.94) 100%) !important;
    box-shadow: var(--shadow-premium) !important;
    animation: fadeInUp 0.8s var(--ease-elegant) once !important;
}

.newsletter:hover {
    transform: translateY(-1px) !important;
    transition: transform 0.3s var(--ease-elegant) !important;
}

.newsletter h3 {
    font-size: clamp(1.5rem, 2.5vw, 1.9rem) !important;
    margin-bottom: var(--spacing-m) !important;
    font-weight: 700 !important;
}

.newsletter p {
    margin-bottom: var(--spacing-xl) !important;
    font-size: 1.05rem !important;
    line-height: 1.6 !important;
}

.newsletter-form {
    position: relative;
    max-width: 550px !important;
    margin: 0 auto !important;
}

.newsletter-form input {
    flex: 1;
    padding: 15px 18px !important;
    border: 2px solid rgba(255,255,255,0.3) !important;
    border-radius: 8px !important;
    font-family: 'Titillium Web', sans-serif !important;
    background-color: rgba(255,255,255,0.12) !important;
    color: white !important;
    transition: all 0.4s var(--ease-elegant) !important;
    font-size: 1rem !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}

.newsletter-form input:focus {
    background-color: rgba(255,255,255,0.18) !important;
    border-color: rgba(255,255,255,0.6) !important;
    outline: none !important;
    transform: translateY(-1px) !important;
    box-shadow: 
        0 0 0 3px rgba(255,255,255,0.15),
        0 4px 12px rgba(0,0,0,0.15) !important;
}

.newsletter-form input:focus-visible {
    outline: 2px solid white !important;
    outline-offset: 2px !important;
}

.newsletter-form input::placeholder {
    color: rgba(255,255,255,0.75) !important;
    font-weight: 400 !important;
}

.newsletter-form button {
    padding: 15px 30px !important;
    border: none !important;
    background-color: rgba(40,66,97,0.9) !important;
    color: white !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    transition: all 0.4s var(--ease-elegant) !important;
    white-space: nowrap !important;
    font-family: 'Titillium Web', sans-serif !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
    min-width: 140px !important;
}

.newsletter-form button:hover, 
.newsletter-form button:focus {
    background-color: rgba(40,66,97,1) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2) !important;
    animation: breathe 2s ease-in-out infinite;
}

.newsletter-form button:focus-visible {
    outline: 2px solid white !important;
    outline-offset: 2px !important;
}

/* Mobile Newsletter-Optimierung */
@media (max-width: 768px) {
    .newsletter-form {
        flex-direction: column !important;
        gap: var(--spacing-s) !important;
    }
    
    .newsletter-form button {
        width: 100% !important;
        padding: 16px 30px !important;
        font-size: 1.1rem !important;
        font-weight: 700 !important;
    }
    
    .newsletter-form input {
        width: 100% !important;
        padding: 16px 18px !important;
        font-size: 1rem !important;
    }
}

/* 4. KONSISTENZ FÜR ALLE NEWSLETTER-FORMULARE */
#newsletter-form-mentoring input,
#newsletter-form-vortraege input {
    flex: 1;
    padding: 15px 18px !important;
    border: 2px solid rgba(255,255,255,0.3) !important;
    border-radius: 8px !important;
    background-color: rgba(255,255,255,0.12) !important;
    transition: all 0.4s var(--ease-elegant) !important;
}

#newsletter-form-mentoring input:focus,
#newsletter-form-vortraege input:focus {
    background-color: rgba(255,255,255,0.18) !important;
    border-color: rgba(255,255,255,0.6) !important;
    transform: translateY(-1px) !important;
    box-shadow: 
        0 0 0 3px rgba(255,255,255,0.15),
        0 4px 12px rgba(0,0,0,0.15) !important;
}

#newsletter-form-mentoring button,
#newsletter-form-vortraege button {
    padding: 15px 30px !important;
    background-color: rgba(40,66,97,0.9) !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    transition: all 0.4s var(--ease-elegant) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
}

#newsletter-form-mentoring button:hover,
#newsletter-form-vortraege button:hover {
    background-color: rgba(40,66,97,1) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2) !important;
}/* CSS-Verbesserungen für Logo-Klickbarkeit - Füge diese Zeilen ans Ende der style-new.css hinzu */

/* Logo-Container und Logo klickbar machen */
.logo-container {
    cursor: pointer !important;
    transition: opacity 0.2s ease !important;
    user-select: none !important; /* Verhindert Textauswahl */
}

.logo-container:hover {
    opacity: 0.85 !important;
}

.logo-container:active {
    opacity: 0.7 !important;
    transform: scale(0.98) !important;
    transition: all 0.1s ease !important;
}

.logo {
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    user-select: none !important; /* Verhindert Textauswahl */
}

.logo:hover {
    color: rgba(40,66,97,0.8) !important;
    text-decoration: none !important;
}

.logo:active {
    transform: scale(0.95) !important;
}

/* Bessere Zugänglichkeit */
.logo:focus,
.logo-container:focus {
    outline: 2px solid var(--primary-color) !important;
    outline-offset: 2px !important;
    border-radius: 4px !important;
}

/* Logo-Image auch klickbar */
.header-logo img {
    cursor: pointer !important;
    transition: transform 0.2s ease !important;
    user-select: none !important;
    pointer-events: none !important; /* Delegiert Klicks an Parent */
}

.logo-container:hover .header-logo img {
    transform: scale(1.02) !important;
}

.logo-container:active .header-logo img {
    transform: scale(0.98) !important;
}/* CSS-Ergänzungen - Ans Ende der bestehenden style-new.css hinzufügen */

/* === LOGO-KLICKBARKEIT STYLING === */
/* Logo und Name "Dr. Andreas Pullig" klickbar machen - alle Geräte */

.logo-container {
    cursor: pointer;
    transition: opacity 0.2s ease;
    user-select: none;
}

.logo-container:hover {
    opacity: 0.9;
}

.logo-container:active {
    opacity: 0.8;
    transform: scale(0.98);
    transition: all 0.1s ease;
}

.logo {
    cursor: pointer;
    transition: color 0.2s ease;
    user-select: none;
}

.logo:hover {
    color: rgba(40,66,97,0.8);
    text-decoration: none;
}

.logo:focus,
.logo-container:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Logo-Image Styling */
.header-logo img {
    cursor: pointer;
    transition: transform 0.2s ease;
    user-select: none;
    pointer-events: none;
}

.logo-container:hover .header-logo img {
    transform: scale(1.02);
}

/* === IPAD QUERFORMAT = DESKTOP-LAYOUT === */
/* iPad Querformat soll EXAKT wie Desktop aussehen */
@media (min-width: 1024px) and (max-width: 1194px) and (orientation: landscape) {
    /* Leistungen-Grid: 3 Kästen nebeneinander (wie Desktop) */
    .leistungen-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: var(--spacing-xl) !important;
    }
    
    /* Ansatz-Grid: 2 Kästen nebeneinander (wie Desktop) */
    .ansatz-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--spacing-xl) !important;
    }
    
    /* About-Sektionen: 2 Spalten (wie Desktop) */
    .about, #heilung > .about {
        grid-template-columns: 1fr 1fr !important;
        gap: var(--spacing-xl) !important;
    }
    
    /* Blog-Grid: 3 Spalten (wie Desktop) */
    .blog-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: var(--spacing-xl) !important;
    }
    
    /* Themen-Container: 2 Spalten (wie Desktop) */
    .themen-container {
        display: flex !important;
        flex-direction: row !important;
        gap: var(--spacing-xl) !important;
    }
    
    /* Buch/Meditation: 2 Spalten (wie Desktop) */
    .buch-container,
    .meditation-container {
        grid-template-columns: auto 1fr !important;
        gap: var(--spacing-xl) !important;
    }
}

/* === IPAD HOCHFORMAT = MOBILE-LAYOUT === */
/* iPad Hochformat soll EXAKT wie Smartphone aussehen */
@media (min-width: 768px) and (max-width: 834px) and (orientation: portrait) {
    /* Leistungen-Grid: 1 Spalte (wie Mobile) */
    .leistungen-grid {
        grid-template-columns: 1fr !important;
        gap: var(--spacing-m) !important;
    }
    
    /* Ansatz-Grid: 1 Spalte (wie Mobile) */
    .ansatz-grid {
        grid-template-columns: 1fr !important;
        gap: var(--spacing-m) !important;
    }
    
    /* About-Sektionen: 1 Spalte (wie Mobile) */
    .about, #heilung > .about {
        grid-template-columns: 1fr !important;
        gap: var(--spacing-xl) !important;
    }
    
    /* Bilder anpassen (wie Mobile) */
    .about-image {
        height: 350px !important;
        margin: 0 auto !important;
        width: 100% !important;
    }
    
    .forest-image {
        height: 350px !important;
        margin: 0 auto !important;
    }
    
    /* Blog-Grid: 1 Spalte (wie Mobile) */
    .blog-grid {
        grid-template-columns: 1fr !important;
        gap: var(--spacing-m) !important;
    }
    
    /* Themen-Container: vertikal (wie Mobile) */
    .themen-container {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--spacing-m) !important;
    }
    
    /* Newsletter-Form: vertikal (wie Mobile) */
    .newsletter-form {
        flex-direction: column !important;
        gap: var(--spacing-s) !important;
    }

    .newsletter-form button {
        width: 100% !important;
    }
    
    /* Buch/Meditation: vertikal zentriert (wie Mobile) */
    .buch-container,
    .meditation-container {
        grid-template-columns: 1fr !important;
        text-align: center !important;
        gap: var(--spacing-m) !important;
    }
    
    .buch-image,
    .meditation-image {
        width: 120px !important;
        margin: 0 auto !important;
    }
    
    .meditation-image {
        height: 160px !important;
    }
    
    /* Ansatz-Boxen: kleinere Padding (wie Mobile) */
    .ansatz-box {
        padding: var(--spacing-m) !important;
    }
}

/* === TOUCH-GERÄTE OPTIMIERUNG === */
/* Reduzierte Hover-Effekte für Touch-Geräte */
@media (hover: none) {
    .logo-container:hover {
        opacity: 1;
    }
    
    .logo-container:hover .header-logo img {
        transform: scale(1);
    }
    
    .logo:hover {
        color: var(--primary-color);
    }
}/* CSS-Ergänzungen - Ans Ende der bestehenden style-new.css hinzufügen */

/* === LOGO-KLICKBARKEIT STYLING === */
/* Logo und Name "Dr. Andreas Pullig" klickbar machen - alle Geräte */

.logo-container {
    cursor: pointer;
    transition: opacity 0.2s ease;
    user-select: none;
}

.logo-container:hover {
    opacity: 0.9;
}

.logo-container:active {
    opacity: 0.8;
    transform: scale(0.98);
    transition: all 0.1s ease;
}

.logo {
    cursor: pointer;
    transition: color 0.2s ease;
    user-select: none;
}

.logo:hover {
    color: rgba(40,66,97,0.8);
    text-decoration: none;
}

.logo:focus,
.logo-container:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Logo-Image Styling */
.header-logo img {
    cursor: pointer;
    transition: transform 0.2s ease;
    user-select: none;
    pointer-events: none;
}

.logo-container:hover .header-logo img {
    transform: scale(1.02);
}

/* === IPAD QUERFORMAT = DESKTOP-LAYOUT === */
/* iPad Querformat soll EXAKT wie Desktop aussehen */
@media (min-width: 1024px) and (max-width: 1194px) and (orientation: landscape) {
    /* Ärztliche Praxis: 3 Kästen nebeneinander (wie Desktop) */
    #aerztliche-praxis .leistungen-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: var(--spacing-xl) !important;
    }
    
    /* Mentoring: 2 Kästen nebeneinander - GRÖßER (wie Desktop) */
    #mentoring .leistungen-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--spacing-xl) !important;
    }
    
    /* Ansatz-Grid: 2 Kästen nebeneinander (wie Desktop) */
    .ansatz-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--spacing-xl) !important;
    }
    
    /* About-Sektionen: 2 Spalten (wie Desktop) */
    .about, #heilung > .about {
        grid-template-columns: 1fr 1fr !important;
        gap: var(--spacing-xl) !important;
    }
    
    /* Blog-Grid: 3 Spalten (wie Desktop) */
    .blog-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: var(--spacing-xl) !important;
    }
    
    /* Themen-Container: 2 Spalten (wie Desktop) */
    .themen-container {
        display: flex !important;
        flex-direction: row !important;
        gap: var(--spacing-xl) !important;
    }
    
    /* Buch/Meditation: 2 Spalten (wie Desktop) */
    .buch-container,
    .meditation-container {
        grid-template-columns: auto 1fr !important;
        gap: var(--spacing-xl) !important;
    }
}

/* === IPAD HOCHFORMAT = MOBILE-LAYOUT === */
/* iPad Hochformat soll EXAKT wie Smartphone aussehen */
@media (min-width: 768px) and (max-width: 834px) and (orientation: portrait) {
    /* Leistungen-Grid: 1 Spalte (wie Mobile) */
    #aerztliche-praxis .leistungen-grid {
        grid-template-columns: 1fr !important;
        gap: var(--spacing-m) !important;
    }
    
    /* Ansatz-Grid: 1 Spalte (wie Mobile) */
    .ansatz-grid {
        grid-template-columns: 1fr !important;
        gap: var(--spacing-m) !important;
    }
    
    /* About-Sektionen: 1 Spalte (wie Mobile) */
    .about, #heilung > .about {
        grid-template-columns: 1fr !important;
        gap: var(--spacing-xl) !important;
    }
    
    /* Bilder anpassen (wie Mobile) */
    .about-image {
        height: 350px !important;
        margin: 0 auto !important;
        width: 100% !important;
    }
    
    .forest-image {
        height: 350px !important;
        margin: 0 auto !important;
    }
    
    /* Blog-Grid: 1 Spalte (wie Mobile) */
    .blog-grid {
        grid-template-columns: 1fr !important;
        gap: var(--spacing-m) !important;
    }
    
    /* Themen-Container: vertikal (wie Mobile) */
    .themen-container {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--spacing-m) !important;
    }
    
    /* Newsletter-Form: vertikal (wie Mobile) */
    .newsletter-form {
        flex-direction: column !important;
        gap: var(--spacing-s) !important;
    }

    .newsletter-form button {
        width: 100% !important;
    }
    
    /* Buch/Meditation: vertikal zentriert (wie Mobile) */
    .buch-container,
    .meditation-container {
        grid-template-columns: 1fr !important;
        text-align: center !important;
        gap: var(--spacing-m) !important;
    }
    
    .buch-image,
    .meditation-image {
        width: 120px !important;
        margin: 0 auto !important;
    }
    
    .meditation-image {
        height: 160px !important;
    }
    
    /* Ansatz-Boxen: kleinere Padding (wie Mobile) */
    .ansatz-box {
        padding: var(--spacing-m) !important;
    }
    
    /* Footer: Mobile-Struktur (wie Smartphone) */
    footer {
        text-align: center !important;
    }
    
    footer .section > div:first-child {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        margin-bottom: 40px !important;
    }
}

/* === TOUCH-GERÄTE OPTIMIERUNG === */
/* Reduzierte Hover-Effekte für Touch-Geräte */
@media (hover: none) {
    .logo-container:hover {
        opacity: 1;
    }
    
    .logo-container:hover .header-logo img {
        transform: scale(1);
    }
    
    .logo:hover {
        color: var(--primary-color);
    }
}/* Höhen-Fix für Transformationsprogramm - zu bestehender CSS hinzufügen */

@media (min-width: 1024px) and (max-width: 1194px) and (orientation: landscape) {
    #mentoring .flip-container {
        height: 700px !important;
    }
}/* Horizontales Scrollen verhindern - ans Ende der style-new.css hinzufügen */

@media (max-width: 834px) {
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
}/* Blog-Grid: Nur erste 3 Artikel anzeigen */
.blog-grid .blog-post:nth-child(n+4) {
    display: none;
}

/* Wenn "Alle anzeigen" aktiviert ist */
.blog-grid.show-all .blog-post {
    display: block;
}

/* ENDE DER DATEI style-new.css */