@import url('/schriften.css');

/* ═══════════════════════════════════════════════════════════════════════════
   DIE STELLSCHRAUBEN

   Vorher standen im Stylesheet 17 Schriftgrößen, 8 Schatten und 5 Rundungen
   verstreut. Unterschiede von 1.05 zu 1.1rem sieht niemand — sie erzeugen
   keine Ordnung, nur Unruhe. Jetzt gibt es eine Skala mit echten Sprüngen.

   Wer etwas ändern will, ändert es HIER — nicht an fünfzig Einzelstellen.
   ═══════════════════════════════════════════════════════════════════════════ */
h1, h2, h3, .logo, .price {
    font-family: var(--schrift-titel);
    font-weight: 600;
    letter-spacing: -0.01em;
}

:root{
    --schrift-text: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --schrift-titel: 'Lora', Georgia, 'Times New Roman', serif;

    /* Schriftgrößen — jeder Schritt ist ein sichtbarer Sprung */
    --t-xs: 0.82rem;
    --t-sm: 0.94rem;
    --t-base: 1.06rem;
    --t-md: 1.22rem;
    --t-lg: 1.5rem;
    --t-xl: 1.95rem;
    --t-2xl: 2.6rem;
    --t-3xl: 3.4rem;

    /* Schatten — neutral statt grün. Licht ist nicht grün; farbige Schatten
       sind das deutlichste Zeichen dafür, dass eine Seite nicht gestaltet wurde. */
    --schatten-klein: 0 1px 2px rgba(20,40,30,.05), 0 1px 3px rgba(20,40,30,.05);
    --schatten: 0 2px 6px rgba(20,40,30,.06), 0 6px 16px rgba(20,40,30,.06);
    --schatten-gross: 0 4px 10px rgba(20,40,30,.05), 0 14px 34px rgba(20,40,30,.08);

    /* Rundungen — zwei statt fünf */
    --rund-klein: 8px;
    --rund: 14px;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--schrift-text);
    line-height: 1.7;
    color: #2c3e50;
    background-color: #f7f6f0;
    background-image:
        radial-gradient(1300px 800px at 90% 0%, rgba(45, 158, 77, .30), transparent 65%),
        radial-gradient(1100px 750px at -8% 12%, rgba(196, 178, 138, .33), transparent 62%),
        radial-gradient(1200px 800px at 108% 26%, rgba(45, 158, 77, .30), transparent 62%),
        radial-gradient(1000px 750px at -4% 40%, rgba(173, 205, 172, .36), transparent 62%),
        radial-gradient(1200px 850px at 106% 55%, rgba(196, 178, 138, .30), transparent 62%),
        radial-gradient(1050px 750px at -6% 70%, rgba(45, 158, 77, .20), transparent 62%),
        radial-gradient(1200px 800px at 105% 84%, rgba(173, 205, 172, .33), transparent 62%),
        radial-gradient(1300px 850px at -5% 100%, rgba(196, 178, 138, .30), transparent 65%);
}

:root {
    --primary-green: #2D9E4D;
    --light-green: #4CAF50;
    --dark-green: #1f7a3e;
    --dark-gray: #2c3e50;
    --light-gray: #ecf0f1;
    --cream: #F9F7F4;
}

/* HEADER */
header {
    background: white;
    box-shadow: var(--schatten);
    position: sticky;
    top: 0;
    z-index: 100;
}

nav {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.2rem 2rem;
}

.logo {
    font-size: var(--t-xl);
    font-weight: bold;
    color: var(--dark-green);
}

nav ul {
    list-style: none;
    display: flex;
    gap: 2.5rem;
}

nav a {
    text-decoration: none;
    color: var(--dark-gray);
    font-weight: 600;
    transition: color 0.3s;
    font-size: var(--t-sm);
}

nav a:hover {
    color: var(--primary-green);
}

/* HERO SECTION */
.hero {
    background: linear-gradient(175deg, rgba(45, 158, 77, .16) 0%, rgba(45, 158, 77, .05) 60%, rgba(45, 158, 77, 0) 100%);
    padding: 8rem 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 640px;
    height: 640px;
    background: radial-gradient(circle, rgba(45, 158, 77, 0.20) 0%, transparent 70%);
    border-radius: 50%;
}

.hero-container {
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.hero h1 {
    font-size: var(--t-3xl);
    font-weight: 800;
    color: var(--dark-green);
    margin-bottom: 1rem;
    line-height: 1.2;
}

.hero .subtitle {
    font-size: var(--t-lg);
    color: var(--dark-gray);
    margin-bottom: 1.5rem;
    font-weight: 500;
}

.hero .credentials {
    font-size: var(--t-base);
    color: #666;
    margin-bottom: 2rem;
    letter-spacing: 0.5px;
}

.cta-buttons {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 2.5rem;
}

.btn {
    padding: 1.2rem 2.5rem;
    font-size: var(--t-base);
    border: none;
    border-radius: var(--rund-klein);
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    font-weight: 600;
    box-shadow: var(--schatten);
}

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

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: var(--schatten);
}

.btn-secondary {
    background: white;
    color: var(--primary-green);
    border: 2.5px solid var(--primary-green);
}

.btn-secondary:hover {
    background: var(--cream);
    transform: translateY(-3px);
}

/* ABOUT SECTION */
.about {
    background: transparent;
    padding: 3.5rem 2rem 5rem;
}

.about-container {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}

/* Abschnitt mit nur Text (Startseite): volle Breite statt leerer rechter Spalte */
.about-container > .about-content:only-child {
    grid-column: 1 / -1;
    max-width: 820px;
    margin: 0 auto;
}

.about-content h2::after {
    content: '';
    display: block;
    width: 64px;
    height: 4px;
    border-radius: 2px;
    background: var(--primary-green);
    margin-top: .6rem;
}

.about-content h2 {
    color: var(--primary-green);
    font-size: var(--t-2xl);
    margin-bottom: 1.5rem;
    font-weight: 800;
}

.about-content p {
    margin-bottom: 1.3rem;
    color: #555;
    font-size: var(--t-base);
    line-height: 1.8;
}

.about-content ul {
    margin-left: 1.5rem;
    margin-top: 1rem;
}

.about-content li {
    margin-bottom: 0.8rem;
    color: #555;
    font-size: var(--t-base);
}

.about-content h3 {
    color: var(--primary-green);
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-size: var(--t-lg);
    font-weight: 700;
}

.about-photo {
    position: sticky;
    top: 110px;
    border-radius: var(--rund);
    overflow: hidden;
    box-shadow: var(--schatten-gross);
    height: 460px;
}

.about-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 58%;
    display: block;
}

.quote {
    margin-top: 2rem;
    padding: 1.5rem;
    background: #f4f9f6;
    border-left: 4px solid var(--primary-green);
    border-radius: var(--rund-klein);
    font-style: italic;
    color: var(--dark-gray);
    font-size: var(--t-md);
}

/* WORKSHOP SECTION */
.workshop {
    background: transparent;
    padding: 6rem 2rem;
}

.workshop-container {
    max-width: 1100px;
    margin: 0 auto;
}

.workshop h2 {
    text-align: center;
    color: var(--primary-green);
    font-size: var(--t-2xl);
    margin-bottom: 1rem;
    font-weight: 800;
}

.workshop-subtitle {
    text-align: center;
    color: #666;
    font-size: var(--t-md);
    margin-bottom: 3rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.workshop-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.workshop-video {
    position: relative;
    border-radius: var(--rund);
    overflow: hidden;
    box-shadow: var(--schatten-gross);
    aspect-ratio: 16/9;
}

.workshop-video img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
    transition: opacity 0.3s;
}

.workshop-video img:hover {
    opacity: 0.8;
}

.workshop-play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: rgba(45, 158, 77, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    z-index: 10;
}

.workshop-play-button:hover {
    background: rgba(45, 158, 77, 1);
    transform: translate(-50%, -50%) scale(1.1);
}

.workshop-play-button::after {
    content: '▶';
    color: white;
    font-size: 30px;
    margin-left: 5px;
}

.workshop-info h3 {
    color: var(--primary-green);
    font-size: var(--t-xl);
    margin-bottom: 1rem;
    font-weight: 700;
}

.workshop-info p {
    color: #555;
    font-size: var(--t-base);
    margin-bottom: 1.5rem;
    line-height: 1.8;
}

.workshop-benefits {
    background: white;
    padding: 2rem;
    border-radius: var(--rund);
    margin-bottom: 1.5rem;
    border-left: 4px solid var(--primary-green);
}

.workshop-benefits h4 {
    color: var(--primary-green);
    margin-bottom: 1rem;
    font-weight: 700;
}

.workshop-benefits ul {
    list-style: none;
    margin-left: 0;
}

.workshop-benefits li {
    margin-bottom: 0.8rem;
    color: #555;
    padding-left: 1.5rem;
    position: relative;
}

.workshop-benefits li:before {
    content: "✓";
    color: var(--primary-green);
    font-weight: bold;
    position: absolute;
    left: 0;
}

/* GESUNDHEITSTEST SECTION */
.test {
    background: transparent;
    padding: 6rem 2rem;
}

.test-container {
    max-width: 1100px;
    margin: 0 auto;
}

.test h2 {
    text-align: center;
    color: var(--primary-green);
    font-size: var(--t-2xl);
    margin-bottom: 1rem;
    font-weight: 800;
}

.test-subtitle {
    text-align: center;
    color: #666;
    font-size: var(--t-md);
    margin-bottom: 3rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.test-box {
    background: #ffffff;
    padding: 3rem;
    border-radius: var(--rund);
    box-shadow: var(--schatten-gross);
    border: 2px solid var(--light-green);
}

.test-intro {
    text-align: center;
    margin-bottom: 2rem;
}

.test-intro h3 {
    color: var(--dark-green);
    font-size: var(--t-lg);
    margin-bottom: 1rem;
}

.test-intro p {
    color: #555;
    font-size: var(--t-base);
    line-height: 1.8;
}

.form-container {
    background: white;
    padding: 2rem;
    border-radius: var(--rund);
    margin-top: 2rem;
}

.form-container iframe {
    width: 100%;
    min-height: 700px;
}

/* PROGRAM SECTION */
.program {
    background: transparent;
    padding: 2rem 2rem 6rem;
}

.program-container {
    max-width: 1100px;
    margin: 0 auto;
}

.program h2 {
    text-align: center;
    color: var(--primary-green);
    font-size: var(--t-2xl);
    margin-bottom: 3rem;
    font-weight: 800;
}

.phases {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 2rem;
}

.phase-card {
    background: white;
    padding: 2.5rem;
    border-radius: var(--rund);
    box-shadow: var(--schatten);
    transition: all 0.3s ease;
    border-top: 4px solid var(--primary-green);
}

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

.phase-card h3 {
    color: var(--primary-green);
    margin-bottom: 1.2rem;
    font-size: var(--t-lg);
    font-weight: 700;
}

.phase-card ul {
    list-style: none;
    font-size: var(--t-sm);
}

.phase-card li {
    margin-bottom: 0.8rem;
    color: #555;
    padding-left: 1.5rem;
    position: relative;
}

.phase-card li:before {
    content: "✓";
    color: var(--primary-green);
    font-weight: bold;
    position: absolute;
    left: 0;
}

/* BENEFITS SECTION */
.benefits {
    background: transparent;
    padding: 6rem 2rem;
}

.benefits-container {
    max-width: 1100px;
    margin: 0 auto;
}

.benefits h2 {
    text-align: center;
    color: var(--primary-green);
    font-size: var(--t-2xl);
    margin-bottom: 3rem;
    font-weight: 800;
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.benefit-card {
    background: #ffffff;
    padding: 2.5rem;
    border-radius: var(--rund);
    border-left: 4px solid var(--primary-green);
    transition: all 0.3s ease;
}

.benefit-card:hover {
    transform: translateX(5px);
    box-shadow: var(--schatten);
}

.benefit-card h3 {
    color: var(--primary-green);
    margin-bottom: 1rem;
    font-weight: 700;
    font-size: var(--t-md);
}

.benefit-card p {
    color: #555;
    font-size: var(--t-base);
    line-height: 1.7;
}

/* PRICING SECTION */
.pricing {
    background: transparent;
    padding: 6rem 2rem;
}

.pricing-container {
    max-width: 800px;
    margin: 0 auto;
}

.pricing h2 {
    text-align: center;
    color: var(--primary-green);
    font-size: var(--t-2xl);
    margin-bottom: 3rem;
    font-weight: 800;
}

.price-box {
    background: white;
    padding: 3rem;
    border-radius: var(--rund);
    border: 3px solid var(--primary-green);
    box-shadow: var(--schatten-gross);
    margin-bottom: 2rem;
}

.price {
    font-size: var(--t-3xl);
    color: var(--primary-green);
    font-weight: 900;
    margin: 1.5rem 0;
}

.price-desc {
    color: #666;
    font-size: var(--t-md);
    margin-bottom: 2rem;
}

.payment-options {
    background: #f4f9f6;
    padding: 2rem;
    border-radius: var(--rund);
    margin: 2rem 0;
}

.payment-options p {
    color: #555;
    margin-bottom: 0.8rem;
    font-size: var(--t-base);
}

.payment-options strong {
    color: var(--primary-green);
}

.included {
    background: #f4f9f6;
    padding: 2rem;
    border-radius: var(--rund);
    margin-top: 2rem;
}

.included h4 {
    color: var(--primary-green);
    margin-bottom: 1.5rem;
    font-weight: 700;
}

.included ul {
    list-style: none;
}

.included li {
    margin-bottom: 0.8rem;
    color: #555;
    padding-left: 1.5rem;
    position: relative;
}

.included li:before {
    content: "✓";
    color: var(--primary-green);
    font-weight: bold;
    position: absolute;
    left: 0;
}

.maintenance {
    margin-top: 3rem;
    padding-top: 3rem;
    border-top: 2px solid var(--light-gray);
    text-align: center;
}

.maintenance h3 {
    color: var(--primary-green);
    font-size: var(--t-lg);
    margin-bottom: 1rem;
}

.maintenance p {
    color: #666;
    font-size: var(--t-md);
}

/* FAQ SECTION */
.faq {
    background: transparent;
    padding: 6rem 2rem;
}

.faq-container {
    max-width: 900px;
    margin: 0 auto;
}

.faq h2 {
    text-align: center;
    color: var(--primary-green);
    font-size: var(--t-2xl);
    margin-bottom: 3rem;
    font-weight: 800;
}

.faq-item {
    margin-bottom: 2rem;
    background: #f4f9f6;
    padding: 2rem;
    border-radius: var(--rund);
    border-left: 4px solid var(--primary-green);
}

.faq-question {
    font-weight: 700;
    color: var(--primary-green);
    cursor: pointer;
    margin-bottom: 1rem;
    font-size: var(--t-md);
}

.faq-answer {
    color: #555;
    line-height: 1.8;
    font-size: var(--t-base);
}

/* CONTACT SECTION */
.contact {
    background: #f4f9f6;
    padding: 6rem 2rem;
}

.contact-container {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

.contact h2 {
    color: var(--primary-green);
    font-size: var(--t-2xl);
    margin-bottom: 1rem;
    font-weight: 800;
}

.contact p {
    color: #666;
    font-size: var(--t-md);
    margin-bottom: 3rem;
}

.contact-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.contact-card {
    background: white;
    padding: 2.5rem;
    border-radius: var(--rund);
    box-shadow: var(--schatten);
    transition: all 0.3s ease;
}

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

.contact-card h3 {
    color: var(--primary-green);
    margin-bottom: 1.5rem;
    font-weight: 700;
    font-size: var(--t-md);
}

.contact-card a {
    color: var(--primary-green);
    text-decoration: none;
    font-weight: 700;
    font-size: var(--t-base);
    word-break: break-word;
    display: block;
    transition: all 0.3s;
}

.contact-card a:hover {
    text-decoration: underline;
}

/* FOOTER */
footer {
    background: var(--dark-gray);
    color: white;
    text-align: center;
    padding: 3rem 2rem;
    font-size: var(--t-base);
}

footer a {
    color: #fff;
    text-decoration: none;
    transition: opacity 0.3s;
}

footer a:hover {
    opacity: 0.8;
    text-decoration: underline;
}

footer p {
    margin-bottom: 0.5rem;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .hero h1 {
        font-size: var(--t-xl);
    }

    .hero .subtitle {
        font-size: var(--t-md);
    }

    nav ul {
        gap: 1rem;
        font-size: var(--t-xs);
    }

    .about-container,
    .workshop-content {
        grid-template-columns: 1fr;
    }

    .cta-buttons {
        flex-direction: column;
    }

    .btn {
        width: 100%;
    }
}

/* ══════════════════════════════════════════════════════════════
   AB HIER: Ergaenzungen fuer die aufgeteilten Unterseiten
   ══════════════════════════════════════════════════════════════ */

/* Kopfbereich einer Unterseite (statt des grossen Hero der Startseite) */
.seitenkopf {
    background: linear-gradient(175deg, rgba(45, 158, 77, .17) 0%, rgba(45, 158, 77, 0) 100%);
    padding: 4.5rem 2rem 3.5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.seitenkopf::after {
    content: '';
    position: absolute;
    left: -6%;
    top: -40%;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(45, 158, 77, 0.16) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.seitenkopf > * { position: relative; }

.seitenkopf h1 {
    color: var(--primary-green);
    font-size: var(--t-2xl);
    font-weight: 800;
    line-height: 1.2;
}

.seitenkopf p {
    color: #666;
    font-size: var(--t-md);
    max-width: 700px;
    margin: 1rem auto 0;
}

/* Aktueller Menuepunkt wird hervorgehoben */
nav a.aktiv {
    color: var(--primary-green);
    border-bottom: 2px solid var(--primary-green);
    padding-bottom: 3px;
}

/* Uebersichtskarten auf der Startseite */
.uebersicht {
    background: transparent;
    padding: 5rem 2rem;
}

.uebersicht-container {
    max-width: 1100px;
    margin: 0 auto;
}

.uebersicht h2 {
    text-align: center;
    color: var(--primary-green);
    font-size: var(--t-2xl);
    margin-bottom: 3rem;
    font-weight: 800;
}

.uebersicht-gitter {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 2rem;
}

.uebersicht-karte {
    display: block;
    text-decoration: none;
    color: inherit;
    background: #f4f9f6;
    padding: 2.2rem;
    border-radius: var(--rund);
    border-left: 4px solid var(--primary-green);
    transition: all 0.3s ease;
}

.uebersicht-karte:hover {
    transform: translateY(-4px);
    box-shadow: var(--schatten-gross);
}

.uebersicht-karte h3 {
    color: var(--primary-green);
    font-size: var(--t-md);
    font-weight: 700;
    margin-bottom: 0.7rem;
}

.uebersicht-karte p {
    color: #555;
    font-size: var(--t-base);
    line-height: 1.7;
}

.uebersicht-karte .weiter {
    display: inline-block;
    margin-top: 1rem;
    color: var(--primary-green);
    font-weight: 600;
    font-size: var(--t-sm);
}

/* Abschluss-Aufruf am Ende jeder Unterseite */
.abschluss {
    background: var(--cream);
    padding: 4.5rem 2rem;
    text-align: center;
}

.abschluss h2 {
    color: var(--primary-green);
    font-size: var(--t-xl);
    font-weight: 800;
    margin-bottom: 0.8rem;
}

.abschluss p {
    color: #666;
    font-size: var(--t-md);
    margin-bottom: 2rem;
}

/* Menue auf schmalen Bildschirmen: umbrechen statt quetschen */
@media (max-width: 900px) {
    nav {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem 1.2rem;
    }

    nav ul {
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem 1.4rem;
    }
}

@media (max-width: 768px) {
    .seitenkopf h1 {
        font-size: var(--t-xl);
    }

    .seitenkopf {
        padding: 3rem 1.2rem 2.5rem;
    }
}

/* ── Lange Kontaktangaben in EINER Zeile ────────────────────────────────────
   "natuerlichmitmichael@gmail.com" sind 30 Zeichen ohne jede Trennstelle.
   In einer 220px-Karte mit 2.5rem Polsterung bleiben davon 140px Platz —
   die Adresse brach deshalb mitten im Wort um.

   Drei Stellschrauben zusammen, nicht nur die Schriftgröße:
   die Karten dürfen etwas breiter werden, die seitliche Polsterung wird
   knapper, und die Schrift der langen Angabe kleiner. Damit passt die
   Adresse auch auf einem schmalen Handy in eine Zeile.

   word-break bleibt als Notnagel stehen: Wird der Bildschirm doch einmal
   zu schmal, bricht die Adresse um, statt aus der Karte zu laufen.        */
.contact-options { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.contact-card    { padding: 2.2rem 1.25rem; }
.contact-card a.lang {
    font-size: var(--t-xs);
    letter-spacing: -0.005em;
}


/* ── Auffrischung 16.09.2026: Karten und Tiefe (Michaels Auswahl: Wellen + Kreise, deutlich sichtbar) ── */
.benefit-card,
.faq-item,
.phase-card {
    box-shadow: 0 8px 26px rgba(31, 122, 62, .10);
    transition: transform .15s, box-shadow .15s;
}

.benefit-card:hover,
.faq-item:hover,
.phase-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 34px rgba(31, 122, 62, .16);
}

.faq-item {
    background: #ffffff;
    border-left: 4px solid var(--primary-green);
}